/* =====================================================================
   FLEXKIN HOLE IN ONE THEME, html[data-theme="flexkin"]
   The Flexkin packaging ground (deep plum charcoal), rose-mauve from the
   Hyal-Storm cartons, and the cyan of the device's LCD as the laser accent.
   ===================================================================== */
html[data-theme="flexkin"] {
  --forest: #1a1418;
  --forest-2: #241c21;
  --moss: #4a3d45;
  --sea: #b79aa6;
  --spume: #e3cfd6;
  --glow: #f5ebef;

  --gold: #dfb3bd;
  --gold-lo: #9a6f7a;
  --gold-hi: #f6dbe1;

  --surface: #141013;
  --surface-2: #1b1519;
  --surface-3: #251d22;
  --line: rgba(246, 219, 225, 0.12);
  --line-2: rgba(246, 219, 225, 0.24);
  --text: #eee8eb;
  --text-dim: #bbb0b6;
  --text-faint: #877b82;
}
html[data-theme="flexkin"] body::before {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(79, 184, 224, 0.12), transparent 60%),
    radial-gradient(900px 600px at 92% 6%, rgba(223, 179, 189, 0.15), transparent 62%),
    radial-gradient(1000px 800px at 50% 108%, rgba(10, 8, 9, 0.9), transparent 60%),
    linear-gradient(175deg, #0f0c0e 0%, #1a1418 45%, #0f0c0e 100%);
}
html[data-theme="flexkin"] .step .n { background: linear-gradient(140deg, rgba(79, 184, 224, 0.3), rgba(36, 28, 33, 0.6)); }
html[data-theme="flexkin"] .fig img, html[data-theme="flexkin"] .product img { background: #fff; border-radius: 12px; }

/* the shared surfaces are cut in marine green; re-cut them in plum and rose */
html[data-theme="flexkin"] { --veil: 20, 16, 19; }
html[data-theme="flexkin"] .svgfig,
html[data-theme="flexkin"] .sq-scene { background: linear-gradient(165deg, rgba(223, 179, 189, 0.10), rgba(15, 12, 14, 0.85)); }
html[data-theme="flexkin"] .panel { background: linear-gradient(165deg, rgba(223, 179, 189, 0.12), rgba(20, 16, 19, 0.8)); }
html[data-theme="flexkin"] .product { background: linear-gradient(120deg, rgba(223, 179, 189, 0.12), rgba(20, 16, 19, 0.7)); }
html[data-theme="flexkin"] .gamecard { background: linear-gradient(150deg, rgba(79, 184, 224, 0.14), rgba(15, 12, 14, 0.92)); }
html[data-theme="flexkin"] .tl-panel { background: linear-gradient(160deg, var(--surface-2), rgba(15, 12, 14, 0.6)); }