/* ============================================================
   JOVANA EDUCATION — ART SKINS, site-wide layer
   Loaded after styles.css on every page except the art-history and
   Arcade sections. See public/skin.js for the contract.

   WHAT THIS FILE IS. Each reader-chosen skin re-declares the site's full
   design-token vocabulary at html[data-skin="X"] scope, then adds a
   CHARACTER layer for the shared chrome (nav, cards, buttons, chips, the
   invitation card, the homepage bands). The 超圖解 surface keeps its own
   deeper layer in spread-skins.css, which loads after this file and wins
   inside .ill-body.

   THREE RULES.

   1 · THERE IS NO html[data-skin="editorial"] BLOCK. "editorial" means
       "the original design": under it the author-set data-theme still
       rules, so the AI domain keeps its luminous graphite and a reader
       who never touches the picker sees the site exactly as authored.

   2 · A NON-EDITORIAL SKIN REPLACES THE PALETTE WHOLESALE. Its block
       declares EVERY token the site consumes — the core surfaces AND the
       derived tokens (--on-grad, --cta-*, --term-*, …). A token a skin
       forgets is a place the old palette bleeds through; the coverage
       test in tools/site-skins.test.mjs fails the build if one is missing.

   3 · INK AND COLOUR, NEVER LAYOUT. A skin may change palette, borders,
       radii, shadows, typography and texture. It may not move content:
       no display/grid/flex restructuring, no repositioning. (The one
       licensed exception, inherited from the Illustrated desk skin: a
       window may grow a title bar above its own content.)
   ============================================================ */

/* ============================================================
   1 · THE PICKER — ships with skin.js on every page (this pair is
   enforced by tools/page-chrome.test.mjs). Moved here from
   spread-skins.css the day the picker went site-wide.
   ============================================================ */
.skin-picker{ position:relative; flex-shrink:0; }
.skin-picker.in-bar{ margin-left:14px; }
.skin-btn{
  display:inline-flex; align-items:center; gap:7px;
  height:30px; padding:0 12px;
  font-family:var(--font-sans); font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:999px;
  cursor:pointer; transition:color .18s, border-color .18s, background .18s;
}
.skin-btn:hover{ color:var(--accent-ink); border-color:var(--accent-ink); }
.skin-glyph{ font-size:13px; line-height:1; }
.skin-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:120;
  min-width:186px; padding:6px;
  /* --surface-2, NOT --paper: every context that remaps the nav's ink (the Illustrated
     on-stage chrome, the skins, the themes) remaps --surface-2 WITH it, so this pair can
     never split. --paper is the Illustrated reading layer's and once left this menu
     white-on-white over the dark contents hero. */
  background:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.42);
  display:none;
}
.skin-picker.open .skin-menu{ display:block; }
.skin-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:0; border-radius:10px; background:transparent;
  font-family:var(--font-sans); font-size:13px; color:var(--ink);
  cursor:pointer; text-align:left; transition:background .15s;
}
.skin-item:hover{ background:color-mix(in srgb, var(--accent-1) 12%, transparent); }
.skin-item.on{ background:color-mix(in srgb, var(--accent-1) 18%, transparent); font-weight:700; }
.skin-swatch{ width:22px; height:22px; border-radius:7px; flex-shrink:0; border:1px solid rgba(0,0,0,.16); }
/* each swatch IS its skin, in miniature — the only honest way to preview one */
.skin-sw-editorial{ background:linear-gradient(135deg,#191630 0%,#2C2652 55%,#7E8CFF 100%); }
.skin-sw-modern{ background:#FFFFFF; border-color:#4F5BE3; }
.skin-sw-cosmic{ background:#0B0A12; background-image:radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px); background-size:7px 7px; }
.skin-sw-ai{ background:linear-gradient(135deg,#090B11 30%,#0E2233 100%); border-color:#4EC8F4; }
.skin-sw-desk{ background:#F2F2F0; background-image:radial-gradient(circle, #C6C6C2 1px, transparent 1px); background-size:6px 6px; }
.skin-sw-doodle{ background:linear-gradient(135deg,#B9F3E4 0%,#F6C7E8 50%,#FFE9A8 100%); border-color:#16130F; border-width:2px; }
.skin-sw-manga{ background:linear-gradient(135deg,#FF2D8E 0%,#12E2E8 100%); border-color:#0B0713; border-width:2px; border-radius:3px; }

/* in the standard top bar: match the language pill beside it */
.skin-picker.in-nav{ display:inline-flex; }
.skin-picker.in-nav .skin-btn{
  height:auto; padding:8px 12px;
  background:var(--surface-2); font-size:13px;
}
.skin-picker.in-nav .skin-btn:hover{ border-color:var(--accent-1); color:var(--ink); }
.skin-btn:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; border-radius:999px; }
.skin-item:focus-visible{ outline:2px solid var(--accent-1); outline-offset:-2px; }
/* phones: the bar is crowded — compact to the glyph, the menu still names them */
@media (max-width:700px){
  .skin-picker.in-nav .skin-now{ display:none; }
  .skin-picker.in-nav .skin-btn{ padding:8px 10px; }
}
/* …and on pages WITH a mobile sheet, leave the bar entirely: the sheet carries a
   segmented skin row above the language one (skin.js builds it). The bar was
   overflowing 390px before this pill ever existed — it must not make that worse. */
@media (max-width:560px){
  .skin-picker.in-nav.m-hidable{ display:none; }
}
/* the sheet's segmented skin row — the same species as .m-langs below it.
   Seven choices wrap into rows of four; flex-basis 22% is what makes four fit. */
.m-skins{ display:flex; flex-wrap:wrap; gap:6px; }
.m-skins .skin-opt{
  flex:1 1 22%; padding:11px 4px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface-2); font-size:12.5px; font-weight:600; color:var(--ink-faint);
  text-align:center; transition:color .2s, background .2s, border-color .2s;
}
.m-skins .skin-opt.active{ color:var(--on-grad); background:var(--grad); border-color:transparent; }
/* last-resort host (a page with no bar at all): pin to the corner */
body > .skin-picker{ position:fixed; top:16px; right:16px; z-index:110; }

/* ============================================================
   2 · DESK — a light desktop. The site becomes a workspace: dot grid,
   windows with title bars, filenames in mono, aqua-blue controls.
   ============================================================ */
html[data-skin="desk"]{
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Noto Sans TC", "Noto Sans SC", sans-serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Noto Sans TC", "Noto Sans SC", sans-serif;

  --bg:#F1F1EF; --bg-warm:#FFFFFF; --surface:#F8F8F6; --surface-2:#FFFFFF;
  --ink:#1A1A18; --ink-soft:#565650; --ink-faint:#6B6B64;
  --line:#DEDEDA; --line-soft:#EAEAE6;

  --accent-1:#1E6FFF; --accent-2:#5A3FC0; --accent-ink:#0B57D0;
  --grad: linear-gradient(180deg,#4A94FF 0%,#1E6FFF 100%);     /* an aqua button, basically */
  --grad-text: linear-gradient(180deg,#2E7FFF 0%,#0B57D0 100%);  /* darker as type: 3.3–5.7:1 on the desktop */
  --grad-soft: linear-gradient(140deg,#E8EEFF 0%,#F3EFFA 100%);
  --aura: radial-gradient(60% 60% at 70% 20%, rgba(30,111,255,.10), transparent 70%),
          radial-gradient(55% 55% at 15% 80%, rgba(122,90,248,.08), transparent 70%);

  --shadow-sm:0 2px 8px rgba(20,20,18,.10);
  --shadow-md:0 10px 26px -14px rgba(20,20,18,.30);
  --shadow-lg:0 22px 50px -26px rgba(20,20,18,.38);

  --logo-filter:none; --logo-blend:multiply; --mono-img:url("assets/logo-black.png");

  --on-grad:#fff; --accent-glow:#1E6FFF;
  --ok:#1F7A43; --danger:#C42B2B;
  --term-line:#5A3FC0; --term-link:#0B57D0;
  --portrait-bg:linear-gradient(160deg,#EDEDEA,#DFDFDA); --portrait-blend:multiply;
  --cta-bg:#1A1A18; --cta-ink:#fff; --cta-border:none;
  --cta-btn-bg:#fff; --cta-btn-bg-hover:#EDF2FB; --cta-btn-ink:#0B57D0;
  --cta-aura: radial-gradient(70% 120% at 85% 10%, rgba(30,111,255,.38), transparent 60%),
              radial-gradient(60% 120% at 10% 90%, rgba(122,90,248,.30), transparent 60%);
}
/* the desktop itself */
html[data-skin="desk"] body{
  background-color:#F1F1EF;
  background-image:radial-gradient(circle, #D2D2CD 1.1px, transparent 1.1px);
  background-size:22px 22px;
}
/* type: tight SF headlines, mono folios */
html[data-skin="desk"] .display{ font-weight:600; letter-spacing:-.028em; }
html[data-skin="desk"] .eyebrow{ letter-spacing:.22em; }
html[data-skin="desk"] .pc-year,
html[data-skin="desk"] .ds-count,
html[data-skin="desk"] .hero-note,
html[data-skin="desk"] .paper-byline{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-style:normal; font-size:12.5px; letter-spacing:0;
}
/* THE WINDOW. The demo card and the arcade band are files someone left open. */
html[data-skin="desk"] .demo-card,
html[data-skin="desk"] .arcade-promo .arcade-band{
  position:relative; border:1px solid #D8D8D3; border-radius:11px;
  box-shadow:0 22px 50px -26px rgba(20,20,18,.42);
  padding-top:30px; overflow:hidden;
}
html[data-skin="desk"] .demo-card::before,
html[data-skin="desk"] .arcade-promo .arcade-band::before{
  content:""; position:absolute; inset:0 0 auto 0; height:30px; z-index:3; opacity:1;
  background:linear-gradient(180deg,#FBFBFA 0%,#F0F0EC 100%);
  border-bottom:1px solid #E3E3DE;
  mask-image:none; -webkit-mask-image:none;
}
/* the three lights */
html[data-skin="desk"] .demo-card::after,
html[data-skin="desk"] .arcade-promo .arcade-band::after{
  content:""; position:absolute; left:12px; top:11px; width:44px; height:9px; z-index:4;
  background:
    radial-gradient(circle 4.5px at 4.5px 4.5px,  #FF5F57 98%, transparent 100%),
    radial-gradient(circle 4.5px at 22px  4.5px,  #FEBC2E 98%, transparent 100%),
    radial-gradient(circle 4.5px at 39.5px 4.5px, #28C840 98%, transparent 100%);
}
/* cards sit like dropped windows, each at its own slight angle */
html[data-skin="desk"] .paper-card,
html[data-skin="desk"] .field-card,
html[data-skin="desk"] .rel-card{ border-radius:10px; }
html[data-skin="desk"] .paper-card{ box-shadow:0 10px 26px -14px rgba(20,20,18,.32), 0 1px 0 rgba(255,255,255,.9) inset; transform:rotate(-.25deg); }
html[data-skin="desk"] .paper-card:nth-child(even){ transform:rotate(.3deg); }
html[data-skin="desk"] .paper-card:hover{ transform:translateY(-4px) rotate(0deg); }
/* controls: rounded-rect, not pill */
html[data-skin="desk"] .btn,
html[data-skin="desk"] .nav-cta,
html[data-skin="desk"] .lang-trigger,
html[data-skin="desk"] .lib-chip,
html[data-skin="desk"] .skin-btn{ border-radius:9px; }
html[data-skin="desk"] .lib-search input{ border-radius:9px; }
html[data-skin="desk"] .btn-primary{ box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 16px -8px rgba(30,111,255,.7); }
html[data-skin="desk"] .lang-pop,
html[data-skin="desk"] .skin-menu{ border-radius:12px; box-shadow:0 22px 50px -26px rgba(20,20,18,.5); }
html[data-skin="desk"] .nav.scrolled{ background:rgba(241,241,239,.86); }
/* the takeaway highlighter, site edition: selection runs yellow */
html[data-skin="desk"] ::selection{ background:rgba(255,240,122,.85); color:#1A1A18; }

/* ============================================================
   3 · DOODLE — candy pastel. Fat black outlines, hard offset shadows,
   round type; every card a sticker somebody could peel off.
   ============================================================ */
html[data-skin="doodle"]{
  --font-display: "Baloo 2","Nunito","Avenir Next Rounded","Noto Sans TC","Noto Sans SC",system-ui,sans-serif;
  --font-sans:    "Nunito","Baloo 2","Avenir Next","Noto Sans TC","Noto Sans SC",system-ui,sans-serif;

  --bg:#FFF7EF; --bg-warm:#FFFDF8; --surface:#FFFDF8; --surface-2:#FFFFFF;
  --ink:#16130F; --ink-soft:#4A423B; --ink-faint:#6B6259;
  --line:#16130F; --line-soft:#E4DCD2;

  --accent-1:#FF6FB5; --accent-2:#6D3BB8; --accent-ink:#C2379A;
  --grad: linear-gradient(118deg,#7ED8F5 0%,#B79BFF 42%,#FF9ED2 100%);
  /* the candy gradient is a fine BUTTON (black text on it) and an illegible TYPE FILL —
     as text it deepens to crayon: 3.4 / 5.0 / 3.8:1 on this skin's cream */
  --grad-text: linear-gradient(118deg,#1E8FC4 0%,#7C4FD8 45%,#D8478F 100%);
  --grad-soft: linear-gradient(140deg,#DDF3FF 0%,#FFE3F3 100%);
  --aura: radial-gradient(58% 44% at 12% 6%, rgba(126,216,245,.30), transparent 62%),
          radial-gradient(52% 40% at 88% 12%, rgba(255,158,210,.26), transparent 64%);

  --shadow-sm:3px 3px 0 #16130F;
  --shadow-md:5px 5px 0 #16130F;
  --shadow-lg:8px 8px 0 #16130F;

  --logo-filter:none; --logo-blend:multiply; --mono-img:url("assets/logo-black.png");

  --on-grad:#16130F; --accent-glow:#FF6FB5;
  --ok:#187449; --danger:#C62B24;   /* both measured against this skin's paper — 5.69:1 and 5.25:1 */
  --term-line:#C2379A; --term-link:#A62E84;
  --portrait-bg:linear-gradient(160deg,#FFE9C9,#FFD9EF); --portrait-blend:multiply;
  --cta-bg:#16130F; --cta-ink:#FFF7EF; --cta-border:3px solid #16130F;
  --cta-btn-bg:#FFE9A8; --cta-btn-bg-hover:#FFDF7E; --cta-btn-ink:#16130F;
  --cta-aura: radial-gradient(70% 120% at 85% 10%, rgba(126,216,245,.35), transparent 60%),
              radial-gradient(60% 120% at 10% 90%, rgba(255,158,210,.30), transparent 60%);
}
html[data-skin="doodle"] body{
  background:
    radial-gradient(58% 44% at 12% 6%,  #CDEFFF 0%, transparent 62%),
    radial-gradient(52% 40% at 88% 12%, #FFDCF0 0%, transparent 64%),
    radial-gradient(70% 50% at 50% 96%, #E4FBEA 0%, transparent 68%),
    #FFF7EF;
}
html[data-skin="doodle"] .display{ font-weight:800; letter-spacing:-.022em; }
html[data-skin="doodle"] .eyebrow{ letter-spacing:.16em; font-weight:800; }
/* the sticker sheet: fat outline + hard shadow on every panel */
html[data-skin="doodle"] .demo-card,
html[data-skin="doodle"] .paper-card,
html[data-skin="doodle"] .rel-card,
html[data-skin="doodle"] .cta-card,
html[data-skin="doodle"] .lang-pop,
html[data-skin="doodle"] .skin-menu,
html[data-skin="doodle"] .arcade-promo .arcade-band{
  border:3px solid #16130F; border-radius:24px; box-shadow:6px 6px 0 #16130F;
}
html[data-skin="doodle"] .paper-card:hover,
html[data-skin="doodle"] .rel-card:hover{ box-shadow:8px 8px 0 #16130F; border-color:#16130F; }
html[data-skin="doodle"] .fields-grid{ border:3px solid #16130F; border-radius:24px; box-shadow:6px 6px 0 #16130F; }
/* buttons and chips are candies */
html[data-skin="doodle"] .btn,
html[data-skin="doodle"] .nav-cta,
html[data-skin="doodle"] .lib-chip,
html[data-skin="doodle"] .lang-trigger,
html[data-skin="doodle"] .skin-btn{
  border:2px solid #16130F; box-shadow:2px 2px 0 #16130F; font-weight:800;
}
html[data-skin="doodle"] .btn-primary{ box-shadow:3px 3px 0 #16130F; }
html[data-skin="doodle"] .btn-primary:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 #16130F; }
html[data-skin="doodle"] .lib-search input{ border:2px solid #16130F; box-shadow:2px 2px 0 #16130F; }
html[data-skin="doodle"] .lib-search input:focus{ box-shadow:3px 3px 0 #16130F; }
html[data-skin="doodle"] .level-tab{ border:2px solid #16130F; border-radius:14px; }
html[data-skin="doodle"] .nav.scrolled{ background:rgba(255,247,239,.9); border-bottom:2px solid #16130F; }
/* hairline rules would read as pencil here — keep dividers soft, not black */
html[data-skin="doodle"] .hero-meta{ border-block:2px solid #16130F; background:#16130F; }
html[data-skin="doodle"] .footer-top{ border-bottom:2px solid #16130F; }
html[data-skin="doodle"] .demo,
html[data-skin="doodle"] .how,
html[data-skin="doodle"] .founder{ border-block:2px solid #16130F; }

/* ============================================================
   4 · MANGA — ink and halftone. Black outlines, CMYK, loud, dense.
   ============================================================ */
html[data-skin="manga"]{
  --font-display: "Archivo Black","Archivo","Noto Sans TC","Noto Sans SC",Impact,system-ui,sans-serif;
  --font-sans:    "Archivo","Noto Sans TC","Noto Sans SC",system-ui,sans-serif;

  --bg:#100B24; --bg-warm:#1B1240; --surface:#160F31; --surface-2:#191139;
  --ink:#FFFFFF; --ink-soft:#C9C2E8; --ink-faint:#9089B8;
  --line:rgba(255,255,255,.18); --line-soft:rgba(255,255,255,.09);

  --accent-1:#FF2D8E; --accent-2:#B48CFF; --accent-ink:#FF5CA6;
  --grad: linear-gradient(112deg,#FF2D8E 0%,#B03CFF 46%,#12E2E8 100%);
  --grad-text: var(--grad);   /* neon on near-black is already type-safe: 5.5 / 4.5 / 11.9:1 */
  --grad-soft: linear-gradient(140deg,#2B1B58 0%,#3A1C56 100%);
  --aura: radial-gradient(60% 80% at 14% 2%, rgba(255,45,142,.30), transparent 62%),
          radial-gradient(56% 76% at 88% 10%, rgba(18,226,232,.22), transparent 64%);

  --shadow-sm:3px 3px 0 #0B0713;
  --shadow-md:5px 5px 0 #0B0713;
  --shadow-lg:8px 8px 0 rgba(11,7,19,.9);

  --logo-filter:invert(1) brightness(1.7); --logo-blend:screen; --mono-img:url("assets/logo-white.png");

  --on-grad:#0B0713; --accent-glow:#FF2D8E;
  --ok:#3BE07A; --danger:#FF5C5C;
  --term-line:#12E2E8; --term-link:#12E2E8;
  --portrait-bg:linear-gradient(160deg,#2B1B58,#1B1240); --portrait-blend:normal;
  --cta-bg:#1B1240; --cta-ink:#FFFFFF; --cta-border:3px solid #0B0713;
  --cta-btn-bg:#FFC400; --cta-btn-bg-hover:#FFD54D; --cta-btn-ink:#0B0713;
  --cta-aura: radial-gradient(70% 120% at 85% 10%, rgba(255,45,142,.45), transparent 60%),
              radial-gradient(60% 120% at 10% 90%, rgba(18,226,232,.30), transparent 60%);
}
/* the halftone the whole site is printed on */
html[data-skin="manga"] body{
  background-color:#100B24;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.030) 0 2px, transparent 2px 26px),
    radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:auto, 7px 7px;
}
html[data-skin="manga"] .display{ font-weight:900; letter-spacing:-.024em; }
html[data-skin="manga"] .hero h1,
html[data-skin="manga"] .section-head h2{ text-shadow:3px 3px 0 #0B0713; }
html[data-skin="manga"] .eyebrow{ color:#12E2E8; letter-spacing:.24em; }
/* gradient-clipped display type cannot carry a text-shadow (it paints over the clip) */
html[data-skin="manga"] .grad-text,
html[data-skin="manga"] .paper-formula{ text-shadow:none; }
/* inked panels: sharp corners, pink drop */
html[data-skin="manga"] .demo-card,
html[data-skin="manga"] .paper-card,
html[data-skin="manga"] .rel-card,
html[data-skin="manga"] .cta-card,
html[data-skin="manga"] .lang-pop,
html[data-skin="manga"] .skin-menu,
html[data-skin="manga"] .arcade-promo .arcade-band{
  border:3px solid #0B0713; border-radius:6px; box-shadow:5px 5px 0 #FF2D8E;
}
html[data-skin="manga"] .demo-card,
html[data-skin="manga"] .arcade-promo .arcade-band{ box-shadow:8px 8px 0 #FF2D8E, 16px 16px 0 rgba(18,226,232,.5); }
html[data-skin="manga"] .paper-card:hover,
html[data-skin="manga"] .rel-card:hover{ border-color:#FF2D8E; box-shadow:7px 7px 0 #FF2D8E; }
html[data-skin="manga"] .btn,
html[data-skin="manga"] .nav-cta,
html[data-skin="manga"] .lib-chip,
html[data-skin="manga"] .lang-trigger,
html[data-skin="manga"] .skin-btn{ border-radius:6px; font-weight:800; }
html[data-skin="manga"] .btn-primary{ border:2px solid #0B0713; box-shadow:3px 3px 0 #0B0713; }
html[data-skin="manga"] .btn-primary:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 #0B0713; }
html[data-skin="manga"] .lib-chip.on{ box-shadow:2px 2px 0 #0B0713; }
html[data-skin="manga"] .lib-search input{ border-radius:6px; }
html[data-skin="manga"] .level-tab{ border-radius:6px; }
html[data-skin="manga"] .nav.scrolled{ background:rgba(16,11,36,.84); border-bottom:1px solid rgba(255,45,142,.34); }
html[data-skin="manga"] ::selection{ background:rgba(255,45,142,.45); color:#fff; }
/* the fields mosaic on a dark ground needs its joints visible */
html[data-skin="manga"] .fields-grid{ border:3px solid #0B0713; border-radius:6px; }

/* ============================================================
   4·5 · THE PROMOTED THEMES — modern / cosmic / ai
   These began life as author-set data-theme palettes (styles.css) and
   are now reader-choosable skins in their own right. Their token sets
   mirror the theme blocks (with the AA fixes applied there), restated
   here at data-skin scope so a reader's choice beats any page's theme.
   Their character is quieter than the loud three — modern's identity
   IS restraint — but each still owns a texture and a light.
   ============================================================ */

/* ---- modern: the cool gallery. White walls, hairline rules, nothing extra. ---- */
html[data-skin="modern"]{
  --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  --bg:#FFFFFF; --bg-warm:#F5F6F9; --surface:#F7F8FB; --surface-2:#FFFFFF;
  --ink:#13161F; --ink-soft:#474D5C; --ink-faint:#666d7b;
  --line:rgba(19,22,31,0.10); --line-soft:rgba(19,22,31,0.055);

  --accent-1:#4F5BE3; --accent-2:#8A5CEC; --accent-ink:#4a40c9;
  --grad: linear-gradient(118deg, #4F5BE3 0%, #6a59e8 45%, #8A5CEC 100%);
  --grad-text: var(--grad);
  --grad-soft: linear-gradient(118deg, rgba(79,91,227,0.10), rgba(138,92,236,0.10));
  --aura: radial-gradient(60% 60% at 72% 12%, rgba(138,92,236,0.12), transparent 70%),
          radial-gradient(55% 55% at 10% 80%, rgba(79,91,227,0.10), transparent 72%);

  --shadow-sm: 0 1px 2px rgba(19,22,31,.05), 0 2px 10px rgba(19,22,31,.05);
  --shadow-md: 0 8px 30px rgba(19,22,31,.08);
  --shadow-lg: 0 24px 60px -28px rgba(19,22,31,.22);

  --logo-filter:none; --logo-blend:multiply; --mono-img:url("assets/logo-black.png");

  --on-grad:#fff; --accent-glow:#6e59e8;
  --ok:#4a7c59; --danger:#aa3333;
  --term-line:#c8a07a; --term-link:#9a5a2b;
  --portrait-bg:linear-gradient(160deg,#eef0f4,#e2e5ec); --portrait-blend:multiply;
  --cta-bg:#13161F; --cta-ink:#fff; --cta-border:none;
  --cta-btn-bg:#fff; --cta-btn-bg-hover:#f0eeff; --cta-btn-ink:#2a2350;
  --cta-aura: radial-gradient(70% 120% at 85% 10%, rgba(138,92,236,.5), transparent 60%),
              radial-gradient(60% 120% at 10% 90%, rgba(79,91,227,.4), transparent 60%);
}
/* restraint, made visible: tighter corners, and that is nearly all */
html[data-skin="modern"] .demo-card,
html[data-skin="modern"] .paper-card,
html[data-skin="modern"] .rel-card,
html[data-skin="modern"] .cta-card,
html[data-skin="modern"] .gloss-card,
html[data-skin="modern"] .gs-domain,
html[data-skin="modern"] .ex-surface{ border-radius:12px; }
html[data-skin="modern"] .eyebrow{ letter-spacing:.32em; }

/* ---- cosmic: the site at night. A starfield, and everything glows a little. ---- */
html[data-skin="cosmic"]{
  --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  --bg:#0B0A12; --bg-warm:#100E1A; --surface:#14121F; --surface-2:#1B1830;
  --ink:#ECEAF4; --ink-soft:#ABA7BE; --ink-faint:#8A86A2;
  --line:rgba(255,255,255,0.14); --line-soft:rgba(255,255,255,0.07);

  --accent-1:#6E78F0; --accent-2:#A982FF; --accent-ink:#c9c4ff;
  --grad: linear-gradient(118deg, #6E78F0 0%, #8b7cf5 45%, #A982FF 100%);
  --grad-text: var(--grad);
  --grad-soft: linear-gradient(118deg, rgba(110,120,240,0.18), rgba(169,130,255,0.18));
  --aura: radial-gradient(60% 60% at 72% 12%, rgba(169,130,255,0.30), transparent 68%),
          radial-gradient(55% 55% at 10% 78%, rgba(79,91,227,0.26), transparent 70%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,.7);

  --logo-filter:invert(1) brightness(1.6); --logo-blend:screen; --mono-img:url("assets/logo-white.png");

  --on-grad:#fff; --accent-glow:#8b7cf5;
  --ok:#4FC77D; --danger:#F87171;
  --term-line:#6E78F0; --term-link:#c9c4ff;
  --portrait-bg:linear-gradient(160deg,#1a1830,#121022); --portrait-blend:normal;
  --cta-bg:#16142a; --cta-ink:#fff; --cta-border:1px solid rgba(255,255,255,0.14);
  --cta-btn-bg:#fff; --cta-btn-bg-hover:#f0eeff; --cta-btn-ink:#2a2350;
  --cta-aura: radial-gradient(70% 120% at 85% 10%, rgba(138,92,236,.6), transparent 60%),
              radial-gradient(60% 120% at 10% 90%, rgba(79,91,227,.5), transparent 60%);
}
/* the starfield: two sizes of star, far and near, in CSS where texture belongs */
html[data-skin="cosmic"] body{
  background-color:#0B0A12;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px),
    radial-gradient(circle, rgba(169,178,255,.10) 1.4px, transparent 1.4px);
  background-size:210px 210px, 340px 340px;
  background-position:0 0, 105px 170px;
}
html[data-skin="cosmic"] .paper-card:hover,
html[data-skin="cosmic"] .rel-card:hover,
html[data-skin="cosmic"] .gloss-card:hover{
  border-color:#8b7cf5;
  box-shadow:0 0 0 1px rgba(139,124,245,.4), 0 14px 44px -18px rgba(110,120,240,.5);
}
html[data-skin="cosmic"] ::selection{ background:rgba(169,130,255,.34); color:#fff; }

/* ---- ai: luminous graphite, promoted from the AI domain's own theme. ---- */
html[data-skin="ai"]{
  --font-display: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Noto Sans SC", system-ui, -apple-system, sans-serif;

  --bg:#090B11; --bg-warm:#0D1019; --surface:#111521; --surface-2:#161C2B;
  --ink:#EAF1FB; --ink-soft:#A8B2C8; --ink-faint:#7F89A0;
  --line:rgba(128,162,255,0.15); --line-soft:rgba(128,162,255,0.07);

  --accent-1:#4EC8F4; --accent-2:#A88CFF; --accent-ink:#92D8FF;
  --grad: linear-gradient(118deg, #38BDF8 0%, #6366F1 52%, #A855F7 100%);
  --grad-text: var(--grad);
  --grad-soft: linear-gradient(118deg, rgba(56,189,248,0.16), rgba(168,85,247,0.16));
  --aura: radial-gradient(60% 60% at 74% 10%, rgba(56,189,248,0.22), transparent 66%),
          radial-gradient(55% 55% at 6% 82%, rgba(168,85,247,0.20), transparent 70%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 10px 34px rgba(0,0,0,.5);
  --shadow-lg: 0 32px 80px -28px rgba(0,0,0,.75);

  --logo-filter:invert(1) brightness(1.7); --logo-blend:screen; --mono-img:url("assets/logo-white.png");

  --on-grad:#fff; --accent-glow:#6366F1;
  --ok:#4FC77D; --danger:#F87171;
  --term-line:#4EC8F4; --term-link:#92D8FF;
  --portrait-bg:linear-gradient(160deg,#131A2B,#0D1019); --portrait-blend:normal;
  --cta-bg:#141A2A; --cta-ink:#fff; --cta-border:1px solid rgba(128,162,255,0.15);
  --cta-btn-bg:#fff; --cta-btn-bg-hover:#E8F4FF; --cta-btn-ink:#123047;
  --cta-aura: radial-gradient(70% 120% at 85% 10%, rgba(56,189,248,.4), transparent 60%),
              radial-gradient(60% 120% at 10% 90%, rgba(168,85,247,.35), transparent 60%);
}
/* the substrate: a fine blueprint grid, barely there */
html[data-skin="ai"] body{
  background-color:#090B11;
  background-image:
    linear-gradient(rgba(128,162,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,162,255,.045) 1px, transparent 1px);
  background-size:28px 28px;
}
html[data-skin="ai"] .paper-card:hover,
html[data-skin="ai"] .rel-card:hover,
html[data-skin="ai"] .gloss-card:hover{
  border-color:#4EC8F4;
  box-shadow:0 0 0 1px rgba(78,200,244,.35), 0 14px 44px -18px rgba(56,189,248,.45);
}
html[data-skin="ai"] ::selection{ background:rgba(78,200,244,.30); color:#fff; }

/* ============================================================
   5 · THE READING SURFACES (Phase 2)
   The document reader, the guide reader, the glossary, the guides
   index, explore and the dashboard. Their bones already follow the
   tokens; this is each skin's CHARACTER on them — the same discipline
   as everywhere else: ink, borders, shadows, type. Never layout.
   (Licensed exception, as on the demo card: a desk window may grow
   a title bar above its own content.)
   ============================================================ */

/* ---------- desk: every document is a file someone left open ---------- */
html[data-skin="desk"] .read-controls,
html[data-skin="desk"] .aside-card,
html[data-skin="desk"] .gs-domain,
html[data-skin="desk"] .gloss-card,
html[data-skin="desk"] .ex-surface,
html[data-skin="desk"] .g-figure,
html[data-skin="desk"] .role-widget,
html[data-skin="desk"] .term-pop{ border-radius:10px; }
/* the source text becomes a window: its header strip was already a title bar in waiting */
html[data-skin="desk"] .original{
  border-radius:11px; border-color:#D8D8D3;
  box-shadow:0 22px 50px -26px rgba(20,20,18,.42);
  padding-top:30px;
}
html[data-skin="desk"] .original::before{
  content:""; position:absolute; inset:0 0 auto 0; height:30px; z-index:3;
  background:linear-gradient(180deg,#FBFBFA 0%,#F0F0EC 100%);
  border-bottom:1px solid #E3E3DE;
}
html[data-skin="desk"] .original::after{
  content:""; position:absolute; left:12px; top:11px; width:44px; height:9px; z-index:4;
  background:
    radial-gradient(circle 4.5px at 4.5px 4.5px,  #FF5F57 98%, transparent 100%),
    radial-gradient(circle 4.5px at 22px  4.5px,  #FEBC2E 98%, transparent 100%),
    radial-gradient(circle 4.5px at 39.5px 4.5px, #28C840 98%, transparent 100%);
}
/* captions and folios read as filenames */
html[data-skin="desk"] .g-cap,
html[data-skin="desk"] .gc-cap,
html[data-skin="desk"] .g-fig-cap,
html[data-skin="desk"] .rw-cap,
html[data-skin="desk"] .doc-kicker .dk-year,
html[data-skin="desk"] .orig-note,
html[data-skin="desk"] .ob-sig,
html[data-skin="desk"] .aside-sig{
  font-family:ui-monospace,"SF Mono",Menlo,monospace; font-style:normal;
  font-size:12.5px; letter-spacing:0;
}
html[data-skin="desk"] .g-fig-cap::before,
html[data-skin="desk"] .rw-cap::before{ content:"◻︎ "; opacity:.55; }

/* ---------- doodle: a workbook full of stickers ---------- */
html[data-skin="doodle"] .read-controls,
html[data-skin="doodle"] .original,
html[data-skin="doodle"] .aside-card,
html[data-skin="doodle"] .g-figure,
html[data-skin="doodle"] .role-widget,
html[data-skin="doodle"] .ex-surface,
html[data-skin="doodle"] .gs-domain,
html[data-skin="doodle"] .term-pop{
  border:3px solid #16130F; border-radius:20px; box-shadow:5px 5px 0 #16130F;
}
html[data-skin="doodle"] .gloss-card,
html[data-skin="doodle"] .ex-dom,
html[data-skin="doodle"] .rel-card{
  border:2px solid #16130F; border-radius:16px; box-shadow:3px 3px 0 #16130F;
}
html[data-skin="doodle"] .gloss-card:hover,
html[data-skin="doodle"] .ex-dom:hover{ border-color:#16130F; box-shadow:4px 4px 0 #16130F; }
/* the step dots are candies, same species as the Illustrated call-out pins */
html[data-skin="doodle"] .g-steps li::before{
  background:linear-gradient(135deg,#7ED8F5 0%,#B79BFF 50%,#FF9ED2 100%);
  color:#16130F; font-weight:800; border:2px solid #16130F; box-shadow:1.5px 1.5px 0 #16130F;
}
html[data-skin="doodle"] .g-cap,
html[data-skin="doodle"] .gc-cap,
html[data-skin="doodle"] .g-fig-cap,
html[data-skin="doodle"] .rw-cap{ font-style:normal; font-weight:700; }
html[data-skin="doodle"] .lvl-seg{ border:2px solid #16130F; border-radius:14px; }
html[data-skin="doodle"] .lvl-seg button.on{ box-shadow:inset 0 0 0 2px #16130F; }

/* ---------- manga: every panel is inked ---------- */
html[data-skin="manga"] .read-controls,
html[data-skin="manga"] .original,
html[data-skin="manga"] .aside-card,
html[data-skin="manga"] .g-figure,
html[data-skin="manga"] .role-widget,
html[data-skin="manga"] .ex-surface,
html[data-skin="manga"] .gs-domain,
html[data-skin="manga"] .term-pop{
  border:3px solid #0B0713; border-radius:6px; box-shadow:5px 5px 0 #FF2D8E;
}
html[data-skin="manga"] .gloss-card,
html[data-skin="manga"] .ex-dom,
html[data-skin="manga"] .rel-card{
  border:2px solid #0B0713; border-radius:6px; box-shadow:3px 3px 0 rgba(255,45,142,.65);
}
html[data-skin="manga"] .gloss-card:hover,
html[data-skin="manga"] .ex-dom:hover{ border-color:#FF2D8E; box-shadow:4px 4px 0 #FF2D8E; }
html[data-skin="manga"] .g-steps li::before{
  background:#FFC400; color:#0B0713; font-weight:900;
  border:2px solid #0B0713; border-radius:5px; box-shadow:1.5px 1.5px 0 #0B0713;
}
/* the small tracked caps that key each block go cyan, like the Illustrated eyebrows */
html[data-skin="manga"] .sec-eyebrow,
html[data-skin="manga"] .g-eyebrow,
html[data-skin="manga"] .gc-field,
html[data-skin="manga"] .pc-field,
html[data-skin="manga"] .rel-card .rc-field,
html[data-skin="manga"] .orig-head .oh-l{ color:#12E2E8; }
html[data-skin="manga"] .sec-eyebrow::before{ background:#12E2E8; }
html[data-skin="manga"] .g-cap,
html[data-skin="manga"] .gc-cap,
html[data-skin="manga"] .g-fig-cap,
html[data-skin="manga"] .rw-cap{
  font-style:normal; font-weight:700; color:#12E2E8;
  text-transform:uppercase; letter-spacing:.06em; font-size:12.5px;
}

/* ============================================================
   6 · REDUCED MOTION — skins add hover translates of their own; make
   sure they all sit still when the reader asked for stillness.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html[data-skin] .btn-primary:hover{ transform:none; }
  html[data-skin] .paper-card,
  html[data-skin] .paper-card:hover{ transform:none; }
}