/* =====================================================================
   DERMATHOD PEN THEME — html[data-theme="pen"]
   Gunmetal / titanium: the device's own industrial palette.
   ===================================================================== */
html[data-theme="pen"] {
  --forest: #1a1d22;
  --forest-2: #242830;
  --moss: #48505c;
  --sea: #8a94a4;
  --spume: #b8c2d0;
  --glow: #e2e8f0;

  --gold: #b9a06a;
  --gold-lo: #857641;
  --gold-hi: #e4d3a2;

  --surface: #12151a;
  --surface-2: #181c22;
  --surface-3: #212530;
  --line: rgba(226, 232, 240, 0.12);
  --line-2: rgba(226, 232, 240, 0.24);
  --text: #e6eaf0;
  --text-dim: #aeb6c2;
  --text-faint: #808894;
}
html[data-theme="pen"] body::before {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(120, 140, 170, 0.16), transparent 60%),
    radial-gradient(900px 600px at 92% 6%, rgba(48, 54, 64, 0.55), transparent 62%),
    radial-gradient(1000px 800px at 50% 108%, rgba(14, 16, 20, 0.9), transparent 60%),
    linear-gradient(175deg, #0c0e12 0%, #14171d 45%, #0c0e12 100%);
}
html[data-theme="pen"] .step .n { background: linear-gradient(140deg, rgba(120, 140, 170, 0.28), rgba(36, 40, 48, 0.6)); }
html[data-theme="pen"] .fig img { background: #fff; border-radius: 12px; }

/* the Pen Studio frame picks up the device's champagne gold */
[data-theme="pen"] .simembed { --sim-accent: var(--gold-hi); }