/* =====================================================================
   SEOULOGY PROFESSIONAL DEVICES THEME, html[data-theme="devices"]
   Graphite instrument panels, burgundy labels and champagne rules,
   taken from the Seoulogy Academy device deck.
   ===================================================================== */
html[data-theme="devices"] {
  --forest: #1a1719;
  --forest-2: #241f22;
  --moss: #4a3a40;
  --sea: #b98a95;
  --spume: #e6d2d6;
  --glow: #f6ece8;

  --gold: #d6b97f;
  --gold-lo: #94784a;
  --gold-hi: #f1dfb4;

  --surface: #141113;
  --surface-2: #1c181a;
  --surface-3: #262023;
  --line: rgba(241, 223, 180, 0.12);
  --line-2: rgba(241, 223, 180, 0.24);
  --text: #eee9e6;
  --text-dim: #bcb2b0;
  --text-faint: #887d7c;
}
html[data-theme="devices"] body::before {
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(140, 38, 62, 0.20), transparent 60%),
    radial-gradient(900px 600px at 92% 6%, rgba(214, 185, 127, 0.14), transparent 62%),
    radial-gradient(1000px 800px at 50% 108%, rgba(8, 7, 8, 0.9), transparent 60%),
    linear-gradient(175deg, #0f0d0e 0%, #19151a 45%, #0f0d0e 100%);
}
html[data-theme="devices"] .step .n { background: linear-gradient(140deg, rgba(160, 52, 78, 0.38), rgba(36, 31, 34, 0.6)); }
html[data-theme="devices"] .fig img, html[data-theme="devices"] .product img { background: #fff; border-radius: 12px; }

/* re-cut the shared marine surfaces in graphite and burgundy */
html[data-theme="devices"] { --veil: 20, 17, 19; }
html[data-theme="devices"] .svgfig,
html[data-theme="devices"] .sq-scene { background: linear-gradient(165deg, rgba(214, 185, 127, 0.09), rgba(15, 13, 14, 0.86)); }
html[data-theme="devices"] .panel { background: linear-gradient(165deg, rgba(160, 52, 78, 0.12), rgba(20, 17, 19, 0.82)); }
html[data-theme="devices"] .product { background: linear-gradient(120deg, rgba(214, 185, 127, 0.11), rgba(20, 17, 19, 0.72)); }
html[data-theme="devices"] .gamecard { background: linear-gradient(150deg, rgba(160, 52, 78, 0.18), rgba(15, 13, 14, 0.92)); }
html[data-theme="devices"] .tl-panel { background: linear-gradient(160deg, var(--surface-2), rgba(15, 13, 14, 0.6)); }