/* ============ Home grid — native fallback ============
   The tool cards were laid out entirely by Tailwind utility classes
   (grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4).  If Tailwind's
   CDN is blocked — Edge Tracking Prevention, ad-blockers, corporate DNS —
   the cards collapse into a plain vertical list.  This fallback gives the
   same layout in plain CSS, using the same breakpoints, so the page looks
   correct with or without Tailwind.  Because it uses the same specificity
   as Tailwind's utility classes and sits earlier in the cascade, Tailwind
   wins once it loads; if it never loads, this rule keeps the grid. */
.fallback-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
@media (min-width:768px){
  .fallback-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:1024px){
  .fallback-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
/* ============ Critical utility fallbacks ============
   Every Tailwind utility class that is used above the fold on the home view
   is mirrored here with byte-identical values. The page therefore renders
   pixel-for-pixel the same whether or not the Tailwind CDN has finished
   loading. Because Tailwind injects its own stylesheet later in the cascade,
   its utilities take over as soon as they arrive — but there is nothing to
   change, because the declarations are the same. */
.w-full{width:100%}
.max-w-5xl{max-width:64rem}
.mx-auto{margin-left:auto;margin-right:auto}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.pb-16{padding-bottom:4rem}
.pt-10{padding-top:2.5rem}
.pb-2{padding-bottom:.5rem}
.mb-6{margin-bottom:1.5rem}
.text-center{text-align:center}
.flex-1{flex:1 1 0%}
.overflow-hidden{overflow:hidden}
:root{
  color-scheme:dark;
  --banner-h:0px;

  /* ============ Lumen palette — restored pre-overhaul scheme ============ */
  --paper:#0d0d10;--ink:#f3f1ea;--soft:#8f8a80;--dim:#575349;
  --panel:#121216;--panel2:#1b1b20;--panel3:#232329;
  --bg:radial-gradient(circle at 18% 8%,#1b1a24 0%,#0c0c10 45%);
  --accent:#ff5e3a;
  --accent-h:#ff7a5c;
  --accent2:#7a2e12;
  --accent3:#ff9d7a;
  --accent-ink:#fff;
  --accent-glow:rgba(255,94,58,.45);
  --ok:#4dbb7d;--err:#e0645a;--err2:#7c231d;--warn:#e0a93f;--warn2:#7c5200;
  --focus:#ff7a5c;

  /* ============ Borders ============ */
  --border:#26262c;
  --border-s:rgba(255,255,255,.12);
  --border-strong:#3a3a42;
  --hairline:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.22);

  /* ============ Surfaces ============ */
  --surface:#15151a;--surface-2:#1b1b20;--surface-3:#222228;--surface-4:#2a2a32;
  --fg:#f5f3ef;--muted:#8b8794;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Space Grotesk',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --read:'Source Serif 4',Georgia,serif;

  /* ============ Elevation — old shadow values, full scale kept ============ */
  --shadow-xs:0 1px 2px rgba(0,0,0,.25);
  --shadow-sm:0 2px 6px rgba(0,0,0,.28),0 8px 22px -6px rgba(0,0,0,.36);
  --shadow-md:0 10px 26px -8px rgba(0,0,0,.6),0 3px 8px -3px rgba(0,0,0,.4);
  --shadow:0 12px 34px -14px rgba(0,0,0,.65),0 24px 74px -22px rgba(255,94,58,.16);
  --shadow-lg:0 30px 80px -20px rgba(0,0,0,.72);
  --shadow-xl:0 40px 96px -24px rgba(0,0,0,.8),0 16px 36px -12px rgba(0,0,0,.55);
  --shadow-glow:0 0 0 1px rgba(255,94,58,.22),0 12px 40px -8px rgba(255,94,58,.38);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.04);

  /* ============ Radii ============ */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  /* ============ Motion ============ */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-instant:.1s; --dur-fast:.15s; --dur-base:.24s; --dur-slow:.42s;

  /* ============ Type scale ============ */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px;

  /* ============ Focus ring ============ */
  --ring:0 0 0 3px rgba(255,122,92,.34);
  --ring-soft:0 0 0 2px rgba(255,122,92,.22);

  --viewer-bg:var(--bg);
}

/* ============ Base typography: crisper across the whole app ============ */
html,body{
  font-feature-settings:"ss01" on,"cv11" on,"ss03" on;
  letter-spacing:-.005em;
}
body{background:var(--bg);}
body::after{
  /* Very subtle radial highlight at the top of the viewport, a hallmark
     of apps like Linear. Cheap (one paint) and adds real depth. */
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255,94,58,.07), transparent 60%),
    radial-gradient(900px 400px at 90% 5%, rgba(110,168,254,.05), transparent 65%);
}
/* Light skins must not carry the cool blue highlight — on cream paper it
   reads as a grey cast behind the (translucent) top bar. Warm tint only. */
[data-skin="paper"] body::after,
[data-skin="comfy"] body::after,
[data-skin="contrast"] body::after{
  background:radial-gradient(900px 380px at 50% -10%, rgba(179,64,42,.05), transparent 60%);
}
[data-skin="comfy"] body::after{
  background:radial-gradient(900px 380px at 50% -10%, rgba(184,80,27,.07), transparent 60%);
}

/* ============ Refined scrollbar — Linear/Vercel feel ============ */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.08);
  border-radius:99px;
  border:3px solid transparent;
  background-clip:padding-box;
  transition:background var(--dur-fast);
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.2);
  background-clip:padding-box;
  border-width:2px;
}
::-webkit-scrollbar-corner{background:transparent}

/* ============ Better selection ============ */
::selection{
  background:rgba(255,94,58,.32);
  color:var(--fg);
}
[data-skin="paper"]{
  color-scheme:light;
  --paper:#f3eddd;--panel:#faf6ea;--panel2:#efe8d6;--ink:#26211a;--soft:#6b6250;--dim:#948a73;
  --line:rgba(38,33,26,.16);--line2:rgba(38,33,26,.42);
  --accent:#b3402a;--accent2:#8f2f1d;--accent-ink:#fff6ec;--ok:#3c6e47;--warn:#8a5a00;--err:#a02f22;
  --serif:'Fraunces',Georgia,serif;--sans:'Space Grotesk',sans-serif;--mono:'Spline Sans Mono',ui-monospace,monospace;--read:'Source Serif 4',Georgia,serif;
  --shadow:0 12px 34px -14px rgba(35,28,15,.45);
  --bg:var(--paper);--surface:var(--panel);--surface-2:var(--panel2);--surface-3:#e4ddc8;
  --fg:var(--ink);--muted:var(--soft);--accent-h:var(--accent2);--border:var(--line);--border-s:var(--line2);
  --viewer-bg:#fff;

  /* ---- Tokens that were still inheriting dark values from :root, which is
          why borders/focus rings and grey surfaces leaked through in paper.
          All of these now carry warm-brown values that match the theme. ---- */
  --surface-4:#d8cfb5;
  --border-strong:rgba(38,33,26,.5);
  --hairline:rgba(38,33,26,.06);
  --accent-glow:rgba(179,64,42,.35);
  --shadow-xs:0 1px 2px rgba(35,28,15,.12);
  --shadow-sm:0 2px 6px rgba(35,28,15,.14),0 8px 22px -6px rgba(35,28,15,.20);
  --shadow-md:0 10px 26px -8px rgba(35,28,15,.28);
  --shadow-lg:0 20px 48px -16px rgba(35,28,15,.35);
  --shadow-xl:0 30px 72px -20px rgba(35,28,15,.4),0 10px 22px -10px rgba(35,28,15,.28);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --ring:0 0 0 3px rgba(179,64,42,.28);
  --ring-soft:0 0 0 2px rgba(179,64,42,.22);
}
[data-skin="midnight"]{
  color-scheme:dark;
  --paper:#0e1117;--panel:#151a21;--panel2:#1d242d;--ink:#e7ecf3;--soft:#9aa8b8;--dim:#5f6d7d;
  --line:rgba(231,236,243,.13);--line2:rgba(231,236,243,.38);
  --accent:#e8a33d;--accent2:#c9852a;--accent-ink:#171208;--ok:#57b884;--warn:#d9a13f;--err:#e0645a;
  --serif:'Space Grotesk',sans-serif;--sans:'Space Grotesk',sans-serif;--mono:'Space Mono',ui-monospace,monospace;--read:'Lora',Georgia,serif;
  --shadow:0 14px 40px -12px rgba(0,0,0,.65);
  --bg:var(--paper);--surface:var(--panel);--surface-2:var(--panel2);--surface-3:#28303a;
  --fg:var(--ink);--muted:var(--soft);--accent-h:var(--accent2);--border:var(--line);--border-s:var(--line2);
  --viewer-bg:var(--paper);
}
/* FIX: 4th aesthetic — high contrast */
[data-skin="contrast"]{
  color-scheme:dark;
  --bg:#000;--surface:#000;--surface-2:#111;--surface-3:#1e1e1e;--fg:#fff;--muted:#e6e6e6;
  --accent:#ffd400;--accent-h:#ffe14d;--border:#fff;--border-s:#fff;
  --paper:#000;--panel:#000;--panel2:#111;--ink:#fff;--soft:#ddd;--dim:#aaa;
  --line:#fff;--line2:#fff;
  --accent2:#ffe14d;--accent-ink:#000;--ok:#00ff87;--warn:#ffd400;--err:#ff5555;
  --serif:'Fraunces',Georgia,serif;--sans:'Space Grotesk',sans-serif;--mono:'Spline Sans Mono',ui-monospace,monospace;--read:'Source Serif 4',Georgia,serif;
  --shadow:0 0 0 1px #fff;
  --viewer-bg:#000;
}
[data-skin="comfy"]{
  color-scheme:light;
  --paper:#ead5ae;--panel:#f6e7c8;--panel2:#e6cda2;--ink:#402a16;--soft:#6b4e2e;--dim:#84663f;
  --line:rgba(64,42,22,.20);--line2:rgba(64,42,22,.50);
  --accent:#b8501b;--accent2:#963e10;--accent-ink:#fff2e0;--ok:#556a31;--warn:#9a6f16;--err:#a2351c;
  --serif:'Fraunces',Georgia,serif;--sans:'Space Grotesk',sans-serif;--mono:'Spline Sans Mono',ui-monospace,monospace;--read:'Source Serif 4',Georgia,serif;
  --shadow:0 12px 34px -14px rgba(112,60,22,.45);
  --bg:var(--paper);--surface:var(--panel);--surface-2:var(--panel2);--surface-3:#dfbe8e;
  --fg:var(--ink);--muted:var(--soft);--accent-h:var(--accent2);--border:var(--line);--border-s:var(--line2);
  --viewer-bg:#f6e7c8;

  --surface-4:#c7a26a;
  --border-strong:rgba(64,42,22,.52);
  --hairline:rgba(64,42,22,.06);
  --accent-glow:rgba(184,80,27,.32);
  --shadow-xs:0 1px 2px rgba(112,60,22,.12);
  --shadow-sm:0 2px 6px rgba(112,60,22,.14),0 8px 22px -6px rgba(112,60,22,.2);
  --shadow-md:0 10px 26px -8px rgba(112,60,22,.26);
  --shadow-lg:0 20px 48px -16px rgba(112,60,22,.32);
  --shadow-xl:0 30px 72px -20px rgba(112,60,22,.36),0 10px 22px -10px rgba(112,60,22,.24);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.55);
  --ring:0 0 0 3px rgba(184,80,27,.30);
  --ring-soft:0 0 0 2px rgba(184,80,27,.22);
}
[data-skin="paper"] #space-canvas,[data-skin="midnight"] #space-canvas,[data-skin="contrast"] #space-canvas,[data-skin="comfy"] #space-canvas{display:none}

html[data-skin="paper"],
html[data-skin="comfy"]{
  color-scheme:only light !important;
  forced-color-adjust:none;
  -webkit-filter:none !important;
  filter:none !important;
  background:#f3eddd !important;
}
html[data-skin="paper"] *,
html[data-skin="comfy"] *{
  forced-color-adjust:none;
}
/* Defeat Samsung Internet / forced-dark auto-inversion by explicitly declaring
   a light page and a media-query guard. Chrome, Safari and Firefox ignore
   these because the theme is already light; Samsung Internet respects them. */
@media (prefers-color-scheme: dark){
  html[data-skin="paper"],
  html[data-skin="comfy"]{
    color-scheme:only light !important;
    background:#f3eddd !important;
  }
  html[data-skin="paper"] body,
  html[data-skin="comfy"] body{
    background:var(--bg) !important;
    color:var(--fg) !important;
  }
}
html[data-skin="comfy"]{background:#ead5ae !important}
html[data-skin="paper"] body,
html[data-skin="comfy"] body{
  background:var(--bg) !important;
  filter:none !important;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:'Space Grotesk',sans-serif;-webkit-font-smoothing:antialiased;user-select:none;touch-action:manipulation}
input,textarea,select,.tl,.md,.dtext,.narticle,.dx,.msg,.bubble,.rqc-msg,.wb-chat-msg,.dg-msg,.dg-doc{user-select:text}
#space-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

.view{position:fixed;inset:0;z-index:1;display:none;overflow:hidden;flex-direction:column;
  padding-top:calc(56px + env(safe-area-inset-top,0px) + var(--banner-h));
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.view.active{display:flex;animation:viewIn .3s cubic-bezier(.2,.8,.2,1)}
.view.scroll{overflow-y:auto}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@supports (padding-top:env(safe-area-inset-top,0px)){
  #view-study .topbar{min-height:calc(58px + env(safe-area-inset-top,0px));padding-top:calc(env(safe-area-inset-top,0px)*0.15)}
  .tool-head{min-height:calc(56px + env(safe-area-inset-top,0px));padding-top:calc(env(safe-area-inset-top,0px)*0.35)}
}
[hidden]{display:none!important}

button:focus,.btn:focus,.ibtn:focus,.micbtn:focus,.nplay:focus,.rail button:focus,.rtabs button:focus,.seg button:focus{outline:none!important;box-shadow:none!important}
.btn:focus-visible,.ibtn:focus-visible,.micbtn:focus-visible,.nplay:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none!important}
.pomo-btn,.pomo-btn *,.pomo-btn *::before,.pomo-btn *::after{outline:none!important;box-shadow:none!important}
.pomo-btn:focus,.pomo-btn:focus-visible,.pomo-btn:active,.pomo-btn:hover,
.pomo-btn *:focus,.pomo-btn *:focus-visible,.pomo-btn *:active{outline:none!important;box-shadow:none!important}
.pomo-btn::-moz-focus-inner{border:0!important}
/* ============ Buttons — refined, layered, alive ============ */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  /* Flat surface base — every theme gets its own surface colour, no
     gradient mixing that goes muddy in the paper theme. The depth is
     added by an inset highlight below, which works on any colour. */
  background:var(--surface-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--shadow-xs);
  color:var(--fg);
  font:500 var(--fs-sm)/1 var(--sans);
  letter-spacing:-.005em;
  cursor:pointer;
  white-space:nowrap;flex:none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{
  border-color:var(--border-strong);
  background:var(--surface-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--shadow-sm);
}
.btn:active{
  transform:translateY(.5px) scale(.985);
  box-shadow:var(--shadow-inset),var(--shadow-xs);
}
.btn:focus-visible{
  outline:none;
  box-shadow:var(--ring),var(--shadow-inset);
}
.btn:disabled{
  opacity:.4;
  pointer-events:none;
  filter:grayscale(.3);
}
.btn svg{width:14px;height:14px;flex:none}

/* ============ Primary — theme-aware and depth-first ============
   The gradient used to run top→bottom through --accent-h. In the
   noir theme that reads as a lighter-to-saturated orange, but in
   the paper theme --accent-h aliases to --accent2 which is DARKER
   than --accent, so the button went brown on top and terracotta on
   the bottom. That is why it looked wrong.
   Fix: run the gradient in the other direction — bottom->top pulls
   the pure accent colour upward, and use --accent-h only as a
   hover/prelight so the terracotta is never mixed with a darker
   alias. */
.btn.primary{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 92%,white 8%) 0%,
    var(--accent) 100%);
  border-color:color-mix(in srgb,var(--accent) 84%,black 16%);
  color:var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 8px 20px -6px var(--accent-glow),
    var(--shadow-xs);
  font-weight:600;
}
.btn.primary:hover{
  background:linear-gradient(180deg,
    var(--accent) 0%,
    color-mix(in srgb,var(--accent) 92%,black 8%) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 12px 28px -6px var(--accent-glow),
    var(--shadow-sm);
}
.btn.primary:active{
  background:var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 4px 12px -4px var(--accent-glow);
}

/* Paper & comfy: pure terracotta, no gradient. The flat colour is the
   whole point of these themes and any linear-gradient runs into the
   warm brown under-lighting the user disliked. */
[data-skin="paper"] .btn.primary,
[data-skin="comfy"] .btn.primary{
  background:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 78%,black 22%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 18px -6px color-mix(in srgb,var(--accent) 45%,transparent);
}
[data-skin="paper"] .btn.primary:hover,
[data-skin="comfy"] .btn.primary:hover{
  background:var(--accent-h);
  border-color:var(--accent-h);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 10px 24px -8px color-mix(in srgb,var(--accent) 55%,transparent);
}
[data-skin="paper"] .btn.primary:active,
[data-skin="comfy"] .btn.primary:active{
  background:var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 3px 10px -3px color-mix(in srgb,var(--accent) 45%,transparent);
}

/* Midnight keeps its gold, but flat too — the two-tone gradient with
   --accent-h being a darker alias also muddied this theme. */
[data-skin="midnight"] .btn.primary{
  background:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 80%,black 20%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 6px 18px -6px color-mix(in srgb,var(--accent) 40%,transparent);
}
[data-skin="midnight"] .btn.primary:hover{background:var(--accent-h)}

.btn.danger{
  border-color:color-mix(in srgb,var(--err) 55%,var(--border));
  color:var(--err);
}
.btn.danger:hover{
  background:color-mix(in srgb,var(--err) 14%,var(--surface-2));
  border-color:var(--err);
  color:var(--err);
  box-shadow:var(--shadow-inset),0 8px 20px -8px rgba(240,115,106,.4);
}

.btn.sm{padding:6px 11px;font-size:var(--fs-xs);border-radius:var(--r-xs);gap:5px}
.btn.sm svg{width:12px;height:12px}
.btn.icon{padding:0;width:36px;height:36px}
.btn.icon svg{width:16px;height:16px}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);box-shadow:none;border-color:var(--border)}

/* ============ Icon buttons — theme-safe ============ */
.ibtn{
  position:relative;
  width:36px;height:36px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--shadow-xs);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.ibtn:hover{
  color:var(--fg);
  border-color:var(--border-strong);
  background:var(--surface-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--shadow-sm);
}
/* Paper & comfy: icons need a soft outline, not a fill — the cream
   surface-on-cream background made the icons look like dull brown tiles. */
[data-skin="paper"] .ibtn,
[data-skin="comfy"] .ibtn{
  background:transparent;
  border-color:color-mix(in srgb,var(--border) 140%,var(--fg));
}
[data-skin="paper"] .ibtn:hover,
[data-skin="comfy"] .ibtn:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  color:var(--accent);
}
[data-skin="paper"] .ibtn.active,
[data-skin="comfy"] .ibtn.active{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 45%,transparent);
}
[data-skin="midnight"] .ibtn{
  background:transparent;
  border-color:color-mix(in srgb,var(--border) 160%,var(--fg));
}
[data-skin="midnight"] .ibtn:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  color:var(--accent);
}
.ibtn:active{transform:scale(.94)}
.ibtn:focus-visible{outline:none;box-shadow:var(--ring),var(--shadow-inset)}
.ibtn.active{
  background:linear-gradient(180deg,var(--accent-h),var(--accent));
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 14px -4px var(--accent-glow);
}
.ibtn svg{width:17px;height:17px}
.ibtn.disabled{opacity:.35;pointer-events:none}

/* Chip — refined */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  background:var(--surface-2);
  border-radius:var(--r-full);
  padding:6px 12px 6px 10px;
  font:500 var(--fs-xs)/1 var(--sans);
  color:var(--fg);
  cursor:pointer;
  max-width:230px;flex:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    var(--shadow-xs);
  transition:all var(--dur-fast) var(--ease-out);
}
.chip:hover{
  border-color:var(--border-strong);
  background:var(--surface-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    var(--shadow-sm);
}
/* Paper & comfy — soft outline style for chips too */
[data-skin="paper"] .chip,
[data-skin="comfy"] .chip,
[data-skin="midnight"] .chip{
  background:transparent;
  border-color:color-mix(in srgb,var(--border) 140%,var(--fg));
}
[data-skin="paper"] .chip:hover,
[data-skin="comfy"] .chip:hover,
[data-skin="midnight"] .chip:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
}
.chip .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--dim);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dim) 22%,transparent);
  transition:all var(--dur-fast);
  flex:none;
}
.chip .dot.on{
  background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 24%,transparent);
}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=time],input[type=date],input[type=datetime-local],input:not([type]),textarea,select{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--fg);
  font-family:inherit;
  font-size:var(--fs-base);
  padding:10px 12px;
  outline:none;
  resize:vertical;
  width:100%;
  box-shadow:var(--shadow-inset);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:.85}
input:hover:not(:focus):not(:disabled),textarea:hover:not(:focus):not(:disabled),select:hover:not(:focus):not(:disabled){
  border-color:var(--border-s);
  background:var(--surface-2);
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:var(--ring-soft),var(--shadow-inset);
}
input:disabled,textarea:disabled,select:disabled{
  opacity:.55;
  cursor:not-allowed;
  background:var(--surface);
}
textarea{line-height:1.55}

/* Select: arrow refinement */
select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f8d99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:32px;
}

/* Range: refined thumb and track */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  height:6px;background:var(--surface-3);
  border-radius:99px;outline:none;cursor:pointer;flex:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,var(--accent-h),var(--accent));
  cursor:pointer;
  border:2px solid var(--surface);
  box-shadow:
    0 0 0 1px var(--accent),
    0 4px 12px -2px var(--accent-glow);
  transition:transform var(--dur-fast) var(--ease-out);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,var(--accent-h),var(--accent));
  border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--accent),0 4px 12px -2px var(--accent-glow);
}

/* Checkbox */
input[type=checkbox]{
  accent-color:var(--accent);
  width:16px;height:16px;
  cursor:pointer;
}

/* Color */
input[type=color]{
  width:38px;height:32px;padding:3px;
  border-radius:var(--r-xs);
  border:1px solid var(--border);
  background:var(--surface-2);
  cursor:pointer;
}

.toast{
  position:fixed;
  bottom:calc(28px + env(safe-area-inset-bottom,0px));
  left:50%;
  transform:translateX(-50%) translateY(18px) scale(.96);
  color:var(--fg);
  padding:12px 18px;
  border-radius:var(--r-full);
  font:500 var(--fs-sm) var(--sans);
  letter-spacing:-.002em;
  border:1px solid var(--border-s);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  box-shadow:
    var(--shadow-inset),
    var(--shadow-lg);
  z-index:10002;
  opacity:0;pointer-events:none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  text-align:center;
  white-space:nowrap;max-width:90vw;
  display:flex;align-items:center;gap:10px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .toast{background:var(--surface)}
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.ok{border-color:color-mix(in srgb,var(--ok) 60%,transparent);color:var(--ok)}
.toast.err{border-color:color-mix(in srgb,var(--err) 60%,transparent);color:var(--err)}
.toast svg{width:17px;height:17px;flex:none}
/* Light skins: solid warm cream, no blur — this is what was making the
   toast look grey. */
[data-skin="paper"] .toast,
[data-skin="comfy"] .toast,
[data-skin="contrast"] .toast{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:
    0 0 0 1px var(--border) inset,
    0 12px 28px -12px rgba(35,28,15,.32);
}
[data-skin="paper"] .toast.ok,
[data-skin="comfy"] .toast.ok{border-color:color-mix(in srgb,var(--ok) 70%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
[data-skin="paper"] .toast.err,
[data-skin="comfy"] .toast.err{border-color:color-mix(in srgb,var(--err) 70%,transparent);background:color-mix(in srgb,var(--err) 8%,var(--surface))}

.top-nav{
  position:fixed;top:0;left:0;right:0;box-sizing:border-box;
  height:calc(56px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px)
           calc(14px + env(safe-area-inset-right,0px))
           0
           calc(14px + env(safe-area-inset-left,0px));
  /* Glassmorphic backdrop — the signature move of every premium app */
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border);
  z-index:50;
  display:flex;align-items:center;gap:14px;
  /* Fallback for browsers that do not support backdrop-filter */
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top-nav{background:var(--surface)}
}
.ai-model-select{width:auto;max-width:250px;font-size:12px;padding:7px 9px;flex:none}
.brand{
  font-family:'Instrument Serif',serif;
  font-size:30px;
  line-height:1;
  color:var(--fg);
  cursor:pointer;
  display:flex;align-items:center;
  height:56px;
  letter-spacing:-.02em;
  transition:opacity var(--dur-fast);
}
.brand:hover{opacity:.85}
.brand em{
  color:var(--accent);
  font-style:italic;
  /* Animated accent dot — subtle breathing, a hallmark detail */
  animation:brandPulse 4s var(--ease-in-out) infinite;
  display:inline-block;
  margin-left:1px;
}
@keyframes brandPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.75;transform:scale(.88)}
}
.brand .brand-back{
  width:22px;height:22px;margin-right:8px;
  color:var(--muted);
  transition:color var(--dur-fast),transform var(--dur-fast);
  flex:none;
}
.brand:hover .brand-back{color:var(--accent);transform:translateX(-2px)}
.mono{font-family:var(--mono)}.dim{color:var(--dim)}.spacer{flex:1}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>span{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.lbl{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.hint{font-size:12.5px;color:var(--soft);line-height:1.55}
.guide{margin:4px 0 0;border:1px dashed var(--line2);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--soft);line-height:1.6}
.guide summary{cursor:pointer;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);list-style:none}
.guide summary::before{content:'▸ '}.guide[open] summary::before{content:'▾ '}
.guide ol{margin:7px 0 0;padding-left:1.35em}.guide li{margin:.3em 0}
.hint a{color:var(--accent)}
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;color:var(--soft);user-select:none}
.sw input{position:absolute;opacity:0;width:0}
.sw .knob{width:30px;height:17px;border:1px solid var(--line2);border-radius:99px;position:relative;flex:none;transition:.18s}
.sw .knob::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--soft);transition:.18s}
.sw input:checked+.knob{border-color:var(--accent)}
.sw input:checked+.knob::after{left:15px;background:var(--accent)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.chip span.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.dot.on{background:var(--ok)}
.pad{padding:16px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;flex:none}
.seg button{padding:5px 11px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:none;border:none;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--paper)}
.seg button:not(.on):hover{color:var(--ink)}

/* ============ Contextual Top Bar ============ */
.top-contextual{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:0 1 auto;
  max-width:min(58vw,760px);
  /* Scroll rather than clip. Controls used to disappear with no way to reach
     them on a narrow window; the bar is the one row that must never hide a
     control the page itself no longer shows. */
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:2px 0;
  scroll-padding-inline:8px;
}
.top-contextual::-webkit-scrollbar{display:none}
.top-contextual > *{flex:none}
/* Controls the bar has no room for are parked in the feature's overflow menu.
   They leave the bar entirely rather than sitting in it out of sight, so the
   row never looks full while hiding half its tools. */
.top-contextual > .ctx-parked{display:none!important}
.top-contextual .ibtn{
  width:34px;height:34px;min-width:34px;min-height:34px;
  display:flex;align-items:center;justify-content:center;
}
.top-contextual .ibtn svg{width:16px;height:16px}
.top-contextual .btn{padding:6px 10px;font-size:12px;min-height:32px}
/* An adopted control keeps its identity but presents as a compact bar button,
   so moving it up a row never makes the bar taller than the chrome around it. */
.top-contextual .ctx-adopted{min-height:32px}
.top-contextual .ctx-adopted.ctx-icon{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.top-contextual .ctx-adopted.ctx-icon svg{width:16px;height:16px}
.top-contextual .chip{padding:5px 10px;font-size:11px}
.top-contextual .seg{border-radius:6px}
.top-contextual .seg button{padding:4px 9px;font-size:10px;min-height:30px}
.top-contextual .fld{padding:0}
/* A field is label-above-control in a form, which is right there and wrong in a
   one-row bar: the stacked label pushed the control down, the row grew taller
   than the chrome around it, and the label text got clipped against the top
   edge. Inline puts the label beside its control so every bar item is the same
   height as the buttons next to it. */
.top-contextual .fld{
  flex-direction:row;align-items:center;gap:6px;
  min-height:32px;
}
.top-contextual .fld>span{font-size:9px;white-space:nowrap;flex:none}
/* A field's control keeps its intrinsic width: as a flex row item the select
   was free to shrink below its content, which cut the dropdown arrow off. */
.top-contextual .fld>select,
.top-contextual .fld>input,
.top-contextual .fld>.seg{flex:none}
.top-contextual .lbl{font-size:9px}
.top-contextual select{padding:5px 8px;font-size:11px;min-height:30px}
.top-contextual input[type="range"]{width:80px}
/* More menu for controls the bar has no room for. It reuses .pop so it matches
   every other popup in the app; only the placement is fixed to the viewport
   because the bar itself scrolls and would clip a menu opened inside it. */
.ctx-more-btn{cursor:pointer}
.ctx-more-btn.ctx-idle{display:none!important}
.ctx-menu{position:fixed;left:0;top:0;right:auto;width:auto;min-width:210px;max-width:min(330px,92vw);padding:8px;gap:2px;z-index:130}
.ctx-menu>*{width:100%;justify-content:flex-start}
/* Inside the menu an adopted control is a named list row, not the square icon
   button it has to be in the bar. Keyed on the classes themselves rather than
   .ctx-icon: a control only gets that class when it was adopted icon-only, and
   the whiteboard's tools reach the bar as .ibtn squares instead — which left
   them zero-padded and butted against their own labels. */
.ctx-menu .ctx-adopted,
.ctx-menu .ibtn{
  width:auto;height:auto;min-width:0;min-height:30px;
  padding:5px 10px;display:flex;align-items:center;gap:10px;
  justify-content:flex-start;
}
.ctx-menu .ctx-adopted svg,
.ctx-menu .ibtn svg{width:16px;height:16px;flex:none;margin:0}
.ctx-menu .seg{width:100%}
.ctx-menu .seg button{flex:1}
.ctx-menu-label{
  font:500 var(--fs-sm)/1 var(--sans);
  color:var(--fg);letter-spacing:-.005em;
  padding-left:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Collapsed state for mobile */
@media (max-width:900px){
  .top-contextual{max-width:38vw}
}

/* A toolbar whose controls have all moved into the contextual bar collapses to
   nothing, so the feature gets the space back instead of showing an empty
   strip. */
.tool-head.ctx-collapsed,
.vbar.ctx-collapsed,
header.ctx-collapsed{display:none!important}
@media (max-width:640px){
  .top-contextual{max-width:26vw;gap:4px}
  .top-contextual .ibtn{width:32px;height:32px;min-width:32px;min-height:32px}
  .top-contextual .btn{padding:5px 8px;font-size:11px}
  .top-contextual .chip{padding:4px 8px;font-size:10px}
}

/* ============ Whiteboard Contextual Controls ============ */
.wb-ctx-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.wb-ctx-controls .seg{border-radius:6px;border:1px solid var(--line2);background:var(--surface-2)}
.wb-ctx-controls .wb-ctx-tool{
  width:32px;height:32px;min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--ink);font:600 14px var(--sans);
  cursor:pointer;border-radius:4px;padding:0;
}
.wb-ctx-controls .wb-ctx-tool svg{width:16px;height:16px;flex:none}
.wb-ctx-controls .wb-ctx-tool:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2))}
.wb-ctx-controls .wb-ctx-tool.active{background:var(--accent);color:var(--accent-ink)}
.wb-ctx-controls .wb-ctx-shapes .wb-ctx-tool{font-size:13px}
.wb-ctx-controls .wb-ctx-colors{display:flex;gap:3px}
.wb-ctx-controls .wb-ctx-colors .swatch{width:20px;height:20px;min-width:20px;min-height:20px}
.wb-ctx-controls #wbTopSize{width:70px}
.wb-ctx-controls .wb-ctx-pages{display:flex;align-items:center;gap:4px}
.wb-ctx-controls .wb-ctx-btn{
  width:32px;height:32px;min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line2);border-radius:4px;
  color:var(--ink);cursor:pointer;padding:0;
}
.wb-ctx-controls .wb-ctx-btn:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));border-color:var(--accent)}
.wb-ctx-controls .wb-ctx-page-label{font:600 11px var(--mono);color:var(--ink);min-width:80px;text-align:center}
.wb-ctx-controls .ibtn{width:32px;height:32px;min-width:32px;min-height:32px}
.wb-ctx-controls .ibtn svg{width:16px;height:16px}
.wb-ctx-controls .btn{padding:6px 10px;font-size:12px}

/* Mobile adjustments */
@media (max-width:900px){
  .wb-ctx-controls .wb-ctx-shapes{display:none}
  .wb-ctx-controls .wb-ctx-page-label{min-width:60px;font-size:10px}
}
@media (max-width:640px){
  .wb-ctx-controls .wb-ctx-colors{display:none}
  .wb-ctx-controls #wbTopSize{display:none}
  .wb-ctx-controls .wb-ctx-btn{width:28px;height:28px;min-width:28px;min-height:28px}
  .wb-ctx-controls .wb-ctx-tool{width:28px;height:28px;min-width:28px;min-height:28px}
}

/* ============ Diagram Contextual Controls ============ */
.dg-ctx-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.dg-ctx-controls .seg{border-radius:6px;border:1px solid var(--line2);background:var(--surface-2)}
.dg-ctx-controls .dg-ctx-btn{
  width:32px;height:32px;min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--ink);font:600 11px var(--mono);text-transform:uppercase;
  cursor:pointer;border-radius:4px;padding:0 8px;
}
.dg-ctx-controls .dg-ctx-btn:hover{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2))}
.dg-ctx-controls .dg-ctx-btn.active{background:var(--accent);color:var(--accent-ink)}
.dg-ctx-controls .dg-ctx-btn.danger{color:var(--err)}
.dg-ctx-controls .dg-ctx-btn.danger:hover{background:color-mix(in srgb,var(--err) 12%,var(--surface-2))}
.dg-ctx-controls .dg-ctx-btn svg{width:14px;height:14px}
.dg-ctx-controls .dg-ctx-modes .dg-ctx-btn{font-size:10px;padding:0 6px}
.dg-ctx-controls .dg-ctx-zoom{display:flex;align-items:center;gap:4px}
.dg-ctx-controls .dg-ctx-zoomv{font:600 11px var(--mono);color:var(--ink);min-width:45px;text-align:center}
.dg-ctx-controls .dg-ctx-actions{display:flex;gap:2px}

/* Mobile adjustments */
@media (max-width:900px){
  .dg-ctx-controls .dg-ctx-modes{display:none}
  .dg-ctx-controls .dg-ctx-btn{font-size:10px;padding:0 6px}
}
@media (max-width:640px){
  .dg-ctx-controls .dg-ctx-zoom{display:none}
  .dg-ctx-controls .dg-ctx-btn{width:28px;height:28px;min-width:28px;min-height:28px}
}

.file-banner{position:fixed;top:calc(56px + env(safe-area-inset-top,0px));left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);z-index:49;display:none;align-items:center;gap:10px;padding:6px 14px;background:var(--accent);color:var(--accent-ink);font:600 11.5px var(--mono)}
.file-banner.show{display:flex}
.file-banner svg{flex:none}
.file-banner span{min-width:0;overflow-wrap:anywhere}
.file-banner button{margin-left:auto;flex:none;background:none;border:1px solid currentColor;color:inherit;border-radius:5px;padding:2px 9px;cursor:pointer;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.08em}

.cat-label{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:14px;
  margin-top:34px;
  display:flex;align-items:center;gap:12px;
}
.cat-label::after{
  content:'';
  flex:1;height:1px;
  background:linear-gradient(90deg,var(--border) 0%,transparent 100%);
}
.cat-label:first-of-type{margin-top:0}
body.has-bg{position:relative}
body.has-bg::before{content:'';position:fixed;inset:0;background:var(--home-bg,url('')) center/cover no-repeat;opacity:0.18;pointer-events:none;z-index:-1}
.tool-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-2) 62%,transparent),
      color-mix(in srgb,var(--surface) 82%,transparent));
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:16px;
  cursor:pointer;
  display:flex;align-items:center;gap:14px;
  text-align:left;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:
    var(--shadow-inset),
    0 4px 16px -12px rgba(0,0,0,.6);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.tool-card::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(400px 200px at 20% 0%,
    color-mix(in srgb,var(--accent) 18%,transparent),
    transparent 55%);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.tool-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-3) 75%,transparent),
      color-mix(in srgb,var(--surface-2) 90%,transparent));
  box-shadow:
    var(--shadow-inset),
    0 20px 42px -20px color-mix(in srgb,var(--accent) 32%,transparent),
    0 6px 20px -10px rgba(0,0,0,.6);
}
.tool-card:hover::before{opacity:1}
.tool-card:active{transform:translateY(-1px) scale(.995)}

/* Icon badge — gradient tile, feels crafted */
.tool-card .tc-icon{
  position:relative;
  width:42px;height:42px;
  border-radius:var(--r-sm);
  /* Flat accent tint — no diagonal gradient. The two-stop mix used to
     fall to var(--surface) which in paper theme is a warm cream, so
     the icon tile looked like a light brown blemish on the card. */
  background:color-mix(in srgb,var(--accent) 12%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 10px -4px rgba(0,0,0,.35);
  transition:
    transform var(--dur-base) var(--ease-spring),
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
/* Paper/comfy/midnight: neutral tile outline, accent icon only — this is
   the look the app had before the premium pass and it is cleaner on the
   light backgrounds. */
[data-skin="paper"] .tool-card .tc-icon,
[data-skin="comfy"] .tool-card .tc-icon,
[data-skin="midnight"] .tool-card .tc-icon{
  background:transparent;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
}
[data-skin="paper"] .tool-card:hover .tc-icon,
[data-skin="comfy"] .tool-card:hover .tc-icon,
[data-skin="midnight"] .tool-card:hover .tc-icon{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 6px 14px -4px color-mix(in srgb,var(--accent) 45%,transparent);
}
.tool-card .tc-icon svg{
  width:20px;height:20px;
  stroke-width:1.9;
  transition:transform var(--dur-base) var(--ease-spring);
}
.tool-card:hover .tc-icon{
  transform:rotate(-3deg) scale(1.05);
  background:linear-gradient(160deg,var(--accent-h) 0%,var(--accent) 100%);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    0 8px 20px -6px var(--accent-glow);
}
.tool-card:hover .tc-icon svg{transform:scale(1.08)}

.tool-card > div:last-child{min-width:0;flex:1}

.tool-card h3{
  font-size:var(--fs-base);
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.3;
  margin-bottom:3px;
  color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color var(--dur-fast);
}
.tool-card p{
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.002em;
  transition:color var(--dur-fast);
}
.tool-card:hover p{color:color-mix(in srgb,var(--fg) 55%,var(--muted))}
.hero-title{
  font-family:'Instrument Serif',serif;
  font-weight:400;
  font-size:clamp(64px,9vw,116px);
  line-height:.9;
  letter-spacing:-.03em;
  /* Subtle gradient on the accent dot only — keeps the word clean */
}
.hero-title i{
  color:var(--accent);
  font-style:normal;
  display:inline-block;
  /* Halos the accent dot, a proper Linear-grade detail */
  text-shadow:0 0 40px color-mix(in srgb,var(--accent) 55%,transparent);
  animation:heroPulse 4s var(--ease-in-out) infinite;
}
@keyframes heroPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.82;transform:scale(.94)}
}
.hero-sub{
  color:var(--muted);
  letter-spacing:-.005em;
  margin-top:18px;
  font-size:var(--fs-lg);
  font-weight:400;
  max-width:52ch;margin-left:auto;margin-right:auto;
  text-wrap:balance;
}
.hero-note{
  color:var(--dim);
  font:600 var(--fs-2xs) var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:22px;
  display:inline-flex;align-items:center;gap:8px;
  justify-content:center;
  padding:5px 12px;
  border-radius:var(--r-full);
  background:color-mix(in srgb,var(--surface-2) 60%,transparent);
  border:1px solid var(--border);
}
.hero-note::before{
  content:'';
  width:5px;height:5px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent);
}

/* Home search — Linear-grade command palette feel */
.home-search{
  display:flex;align-items:center;gap:10px;
  max-width:600px;margin:36px auto 0;
  padding:12px 14px 12px 16px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:
    var(--shadow-inset),
    0 12px 32px -16px rgba(0,0,0,.6);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.home-search:focus-within{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow:
    var(--ring-soft),
    var(--shadow-inset),
    0 16px 44px -18px var(--accent-glow);
}
.home-search svg{width:18px;height:18px;color:var(--muted);flex:none;transition:color var(--dur-fast)}
.home-search:focus-within svg{color:var(--accent)}
.home-search input{
  background:none;border:none;box-shadow:none;padding:0;
  font-size:var(--fs-md);
  flex:1;min-width:0;
  letter-spacing:-.005em;
}
.home-search input:focus{border-color:transparent;box-shadow:none}
.home-search kbd{
  font:600 var(--fs-2xs) var(--mono);
  letter-spacing:.06em;
  border:1px solid var(--border-s);
  background:var(--surface-2);
  border-radius:var(--r-xs);
  padding:3px 7px;
  color:var(--muted);
  flex:none;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 1px 2px rgba(0,0,0,.25);
}
.mobile-note{display:none;align-items:center;gap:10px;margin:18px auto 0;max-width:560px;padding:10px 14px;border:1px solid var(--line2);border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:12.5px;color:var(--soft);line-height:1.5}
.mobile-note svg{flex:none;color:var(--accent)}
.mobile-note button{margin-left:auto;flex:none;background:none;border:1px solid var(--line2);border-radius:6px;padding:3px 10px;color:var(--soft);cursor:pointer;font:600 10px var(--mono);text-transform:uppercase}
@media(max-width:720px){.mobile-note.show{display:flex}}

.tool-head{display:flex;align-items:center;gap:14px;padding:11px 20px;border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap;min-height:56px}
.tool-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:27px;line-height:1.05}
.tool-sub{font-size:12px;color:var(--muted);margin-top:2px}
.tool-body{flex:1;overflow:auto;padding:24px 22px}
.twrap{max-width:880px;margin:0 auto}
.guide-wrap{max-width:860px;margin:0 auto;padding:24px 22px 60px;overflow:auto}
.guide-wrap h2{font:italic 600 28px var(--serif);margin:24px 0 8px;color:var(--ink)}
.guide-wrap h2:first-child{margin-top:0}
.guide-wrap p,.guide-wrap li{font-size:14px;line-height:1.65;color:var(--soft)}
.guide-wrap ul,.guide-wrap ol{padding-left:24px;margin:8px 0 18px}
.guide-wrap code{font:12px var(--mono);color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 5px;overflow-wrap:anywhere}
.guide-code{display:block;margin:10px 0 18px;padding:12px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:12px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.library-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.library-tools input{flex:1;min-width:220px}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(410px,100%),1fr));gap:16px}
.library-grid .lib-sub{grid-template-columns:repeat(auto-fill,minmax(min(410px,100%),1fr));gap:16px}
.library-grid .lib-sub .library-item{padding:16px}
.lib-section{margin-bottom:6px}
.lib-section h3{display:flex;align-items:baseline;gap:8px;font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lib-section h3:first-child{margin-top:0}
.lib-section h3 .count{color:var(--accent)}
.library-item{display:flex;flex-direction:column;gap:11px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0}
.library-item .lib-icon{height:150px;display:grid;place-items:center;background:var(--panel2);border-radius:9px;color:var(--accent);font:italic 600 27px var(--serif);overflow:hidden}
.library-item .lib-icon img,.library-item .lib-icon video{width:100%;height:100%;object-fit:cover}
.library-item .lib-icon.has-thumb{position:relative}
.library-item .lib-icon .thumb-x{position:absolute;top:5px;right:5px;width:22px;height:22px;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font:600 14px/1 var(--mono);cursor:pointer;opacity:0;transition:opacity .15s}
.library-item .lib-icon.has-thumb:hover .thumb-x{opacity:1}
.library-item .lib-icon .thumb-x:hover{background:rgba(0,0,0,.75)}
.library-item .lib-name{font:600 14px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-item .lib-meta{font:11px var(--mono);color:var(--soft)}
.library-item .lib-actions{display:flex;gap:6px;margin-top:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.library-item .lib-actions::-webkit-scrollbar{display:none}
.library-item .lib-actions .btn{flex:0 0 auto;justify-content:center;font-size:11px;padding:7px 11px;min-width:0;white-space:nowrap}
.library-grid .lib-sub .notebook-item{flex-direction:row;align-items:stretch}
.notebook-item .lib-icon{width:190px;height:auto;min-height:138px;flex:none;border-radius:9px}
.notebook-item .lib-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.notebook-item .lib-name{font-size:15px}
.notebook-item .lib-sets{display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:2px}
.notebook-item .lset{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel2);border-radius:7px;padding:7px 10px;font:12px var(--mono);color:var(--soft);min-width:0}
.notebook-item .lset b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600}
.notebook-item .lset span{flex:none;color:var(--dim)}
.notebook-item .lset .btn{flex:none;font-size:10px;padding:4px 10px}
.notebook-item .lib-actions{margin-top:auto}
@media(max-width:700px){
  .library-grid .lib-sub .notebook-item{flex-direction:column}
  .notebook-item .lib-icon{width:100%;min-height:150px}
}
@media(pointer:coarse){.library-item .lib-icon.has-thumb .thumb-x{opacity:1}}
.notebar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel2);flex:none}
.notebar .nb-label{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);flex:none}
.notebar .seg{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.notebar .seg::-webkit-scrollbar{display:none}
.rpSpin{width:13px;height:13px;border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:rspin .8s linear infinite;vertical-align:-3px;margin-right:3px}
#rpGenMode button.spinning{color:var(--accent);pointer-events:none}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vsep{width:1px;height:22px;background:var(--border);margin:0 4px;flex:none}
.minsel{padding:6px 8px;font-size:12px;width:auto;flex:none}
.drop{border:1.5px dashed var(--line2);border-radius:14px;padding:48px 20px;text-align:center;transition:.15s;cursor:pointer}
.rv-drop{position:relative}
.rv-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.rv-native-file{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;border:0;opacity:.001;cursor:pointer;z-index:2;font-size:100px;-webkit-appearance:none;appearance:none;touch-action:manipulation}
.drop svg{width:30px;height:30px;color:var(--soft)}
.drop .serif{font:italic 600 25px var(--serif);margin:12px 0 8px}
.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.ext{font:600 11px var(--mono);letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:4px 9px;border-radius:6px;flex:none}
.frow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);margin-bottom:8px}
.frow img{width:46px;height:46px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none;background:var(--panel2)}
.frow .meta{flex:1;min-width:0}
.frow .nm{font:600 13px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .sz{font:11px var(--mono);color:var(--soft)}
.frow .tb{display:flex;gap:6px;flex:none}
.mini-ic{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:none;color:var(--soft);cursor:pointer;display:grid;place-items:center;flex:none}
.mini-ic:hover{color:var(--ink);border-color:var(--line2)}
.mini-ic svg{width:13px;height:13px}
.copt{display:flex;gap:16px;align-items:flex-end;padding:15px 18px;margin-top:14px;margin-bottom:10px;flex-wrap:wrap}
.copt.busy{opacity:.55;pointer-events:none}
.copt-title{font:italic 600 17px var(--serif)}
.copt-opts{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap;align-items:flex-end}
.mini{display:flex;align-items:center;gap:7px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.mini select{padding:4px 7px;font:12px var(--sans);width:auto}
.mini input[type=number]{width:74px;padding:4px 7px;text-align:center;font:12px var(--mono)}
.cprog{padding:16px 18px;margin:14px 0}
.pbar{height:7px;border:1px solid var(--line2);border-radius:99px;overflow:hidden;margin-top:9px}
.pbar i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}
.pbar.ind i{width:38%;animation:sweep 1.1s ease-in-out infinite alternate}
@keyframes sweep{from{margin-left:0;width:30%}to{margin-left:65%;width:35%}}
.cres{padding:18px;margin-top:14px}
.cres b.r-name{font:600 14px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cres .r-size{font:11.5px var(--mono);color:var(--soft);flex:none}
.cres img{max-width:100%;max-height:420px;display:block;border:1px solid var(--line);margin-top:12px}
.cres pre{font:12px var(--mono);max-height:260px;overflow:auto;white-space:pre-wrap;background:var(--paper);padding:12px;border:1px solid var(--line);border-radius:8px;margin-top:12px}
.res-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* whiteboard compact toolbar — slightly bigger per request */
.tool-head.compact{padding:7px 12px;gap:7px;min-height:52px}
.tool-head.compact .tool-title{font-size:19px;line-height:1.1}
.tool-head.compact .tool-sub{display:none}
.tool-head.compact .btn{padding:6px 11px;font-size:12.5px;gap:5px}
.tool-head.compact .ibtn{width:38px;height:38px;border-radius:8px}
.tool-head.compact .ibtn svg{width:18px;height:18px}
.tool-head.compact .vsep{height:18px;margin:0 1px}
.tool-head.compact .swatch{width:20px;height:20px;border-width:2px}
.tool-head.compact .mini{font-size:9.5px}
.tool-head.compact .top-actions{gap:6px}


#view-study{background:var(--paper)}
.vbar{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line);flex:none;min-height:54px;flex-wrap:wrap}
.vtitle{font:italic 600 20px var(--serif)}
.vbody{flex:1;overflow:auto;position:relative;padding:20px 22px 70px}
.rname{font:11.5px var(--mono);color:var(--soft);border-left:1px solid var(--line);padding-left:12px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#studyMain{flex:1;min-width:0;position:relative;overflow:hidden;background:var(--paper)}
.shell{flex:1;display:flex;min-height:0}
/* Ten destinations plus the calendar footer do not fit on short viewports, and
   overflow:hidden clipped the last entries with no way to reach them. Scroll
   the rail instead; the bar stays visually identical because the scrollbar is
   hidden until the pointer is actually over it. */
.rail{
  width:78px;border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:10px 0;gap:2px;flex:none;
  min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:transparent transparent;
}
.rail:hover{scrollbar-color:var(--line2) transparent}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail::-webkit-scrollbar-thumb{background:transparent;border-radius:99px}
.rail:hover::-webkit-scrollbar-thumb{background:var(--line2)}
/* The footer pins to the bottom only while there is room for it. */
.rail .foot{flex:none;margin-top:auto}
.rail button{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 2px 11px;background:none;border:none;color:var(--soft);cursor:pointer}
.rail button svg{width:19px;height:19px}
.rail button span{
  font:600 8px var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.4;
  text-align:center;
}
.rail button:hover{color:var(--ink)}
.rail button.on{color:var(--accent)}
.rail button.on::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.rail .foot{margin-top:auto;text-align:center;font:600 8.5px var(--mono);letter-spacing:.1em;color:var(--dim);padding:0 2px}
section.study-view{position:absolute;inset:0;display:flex;flex-direction:column}
#view-study .topbar{min-height:54px;display:flex;align-items:center;gap:14px;padding:0 14px 0 16px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
#view-study .brand{font:italic 600 25px/1 var(--serif);position:relative;padding-bottom:4px;letter-spacing:-.01em;background:none;border:none;color:var(--ink);cursor:default}
#view-study .brand .scrawl{position:absolute;left:-1px;bottom:-2px;width:calc(100% - 25px);height:8px}
.pgnav,.zgroup{display:flex;align-items:center;gap:6px}
.pgnav input{width:44px;text-align:center;padding:5px 6px;font:600 12px var(--mono)}
.zgroup .dim{font:600 11px var(--mono);min-width:38px;text-align:center}
.pomo{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border:1px solid var(--line2);border-radius:99px;position:relative}
.pomo-btn{position:relative;width:38px;height:38px;border-radius:50%;background:none;border:none;cursor:pointer;display:grid;place-items:center;outline:none}
.pomo-btn svg.ring{position:absolute;inset:0;width:38px;height:38px;transform:rotate(-90deg)}
.pomo-btn .rbg{fill:none;stroke:var(--line);stroke-width:3}
.pomo-btn .rfg{fill:none;stroke:var(--accent);stroke-width:3;transition:stroke-dashoffset .3s linear}
.pomo-ic{display:grid;place-items:center}
.pomo-ic svg{width:13px;height:13px}
.pomo.running .pi-a{display:none}.pomo:not(.running) .pi-b{display:none}
.pomo-meta{display:flex;flex-direction:column;line-height:1.2}
.pomo-meta b{font:600 14px var(--mono)}
.pomo-meta .lbl{font-size:8.5px}
.pop{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:80;
  width:262px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid var(--border-s);
  border-radius:var(--r-md);
  box-shadow:
    var(--shadow-inset),
    var(--shadow-xl);
  padding:16px;
  display:flex;flex-direction:column;gap:11px;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  animation:popIn var(--dur-base) var(--ease-out);
}
[data-skin="paper"] .pop,
[data-skin="comfy"] .pop,
[data-skin="contrast"] .pop{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:
    0 0 0 1px var(--border) inset,
    0 12px 32px -12px rgba(35,28,15,.32);
}
@keyframes popIn{
  from{opacity:0;transform:translateY(6px) scale(.98)}
  to{opacity:1;transform:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pop{background:var(--surface)}
}
.pop-head{font:italic 600 17px var(--serif)}
.pop .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pop .row input[type=number]{width:74px;text-align:center}
.pop .row2{display:flex;gap:8px}
.pop .row2 .btn{flex:1}
.dotsline{display:flex;align-items:center;gap:6px;font:12px var(--mono)}
.dotsline .mark{color:var(--accent);letter-spacing:2px}
.rbody{flex:1;display:flex;min-height:0;position:relative;overflow:hidden}
.rbody.night .pg{background:#141414}
.rbody.night .pg canvas{filter:invert(1) hue-rotate(180deg)}
.rbody.night .pg.dx{filter:invert(1) hue-rotate(180deg)}
/* FIX: hide the reader top toolbar AND the side panel together */
.study-view.ui-hidden .vbar{display:none}
.study-view.ui-hidden .rside{display:none}
#rRestore{display:none;position:absolute;top:14px;right:14px;z-index:8;opacity:.65;background:var(--surface)}
#rRestore:hover{opacity:1}
.rbody.ui-hidden #rRestore{display:flex}
#pages{flex:1;overflow:auto;padding:26px 18px 70px;display:block}
.pg{position:relative;margin:0 auto 24px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06),var(--shadow)}
.pg canvas{display:block}
.pg.flash{box-shadow:0 0 0 4px var(--accent),var(--shadow)}
.pg.dx{max-width:840px;padding:44px 52px;font-family:var(--read);font-size:15.5px;line-height:1.7;color:#161616;overflow-wrap:anywhere}
.pg.dx h1,.pg.dx h2,.pg.dx h3,.pg.dx h4{font-family:var(--serif);margin:.9em 0 .4em;line-height:1.25}
.pg.dx h1{font-size:24px}.pg.dx h2{font-size:20px}.pg.dx h3{font-size:17px}
.pg.dx p{margin:0 0 .85em}
.pg.dx ul,.pg.dx ol{padding-left:1.5em;margin:0 0 .9em}
.pg.dx li{margin:.25em 0}
.pg.dx table{border-collapse:collapse;margin:0 0 1em}
.pg.dx th,.pg.dx td{border:1px solid #bbb;padding:5px 9px;font-size:13px}
.pg.dx img{max-width:100%;height:auto;margin:.4em 0}
#rBody.docx .pgnav,#rBody.docx .zgroup{display:none}
.tl{position:absolute;inset:0;overflow:visible;line-height:1;cursor:text;user-select:text}
.tl span{position:absolute;color:transparent;white-space:pre;font-family:var(--read);transform-origin:0 0}
.tl span::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:transparent}
.empty{max-width:440px;margin:9vh auto 0;text-align:center;padding:20px}
.empty h2{font:italic 600 34px/1.15 var(--serif);margin:14px 0 10px}
.empty p{color:var(--soft);font-size:14px;margin:0 0 22px}
.empty .inkart{width:130px;color:var(--soft);opacity:.85;margin:0 auto;display:block}
.rside{width:var(--rsideW,292px);flex:none;position:relative;border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;transition:margin-right .28s cubic-bezier(.4,0,.2,1),opacity .28s,transform .28s;min-height:0}
#rSideGrip{position:absolute;left:-6px;top:0;bottom:0;width:12px;cursor:col-resize;z-index:6;background:none;border:none;padding:0;touch-action:none}
#rSideGrip::after{content:'';position:absolute;left:5px;top:0;bottom:0;width:2px;border-radius:2px;background:transparent;transition:background .15s}
#rSideGrip:hover::after,#rSideGrip.dragging::after{background:var(--accent)}
.rbody.side-closed #rSideGrip{display:none}
.rbody.side-closed .rside{margin-right:calc(-1*var(--rsideW,292px));opacity:0;pointer-events:none}
.rbody:not(.side-closed) .when-closed{display:none}
.rbody.side-closed .when-open{display:none}
.rtabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.rtabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 0;background:none;border:none;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);cursor:pointer;box-shadow:inset 0 -2px transparent}
.rtabs button svg{width:13px;height:13px}
.rtabs button.on{color:var(--ink);box-shadow:inset 0 -2px var(--accent)}
.rtab-body{flex:1;overflow:auto;min-height:0}
#rtThumbs{display:grid;gap:14px;padding:14px;justify-items:center}
.thumb{width:138px;background:#fff;border:1px solid var(--line);position:relative;cursor:pointer}
.thumb:hover{border-color:var(--line2)}
.thumb.cur{outline:2px solid var(--accent);outline-offset:-1px}
.thumb canvas{width:100%;display:block}
.thumb span{position:absolute;right:4px;bottom:3px;font:600 9px var(--mono);background:var(--paper);padding:1px 5px;border-radius:4px}
.ol-item button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font:13px var(--sans);padding:7px 12px 7px 10px;cursor:pointer;border-radius:6px;overflow-wrap:anywhere}
.ol-item button:hover{background:var(--panel2)}
.rt-search{padding:12px;border-bottom:1px solid var(--line)}
.hit{display:flex;gap:9px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);padding:10px 12px;cursor:pointer;font:12.5px var(--read);color:var(--ink)}
.hit:hover{background:var(--panel2)}
.hit .pgn{font:600 9.5px var(--mono);color:var(--accent);flex:none;margin-top:3px}
.hit mark{background:color-mix(in srgb,var(--accent) 28%,transparent);color:inherit}
.rside-foot{border-top:1px solid var(--line);padding:11px 12px;display:flex;gap:8px;flex:none}
.rside-foot .btn{flex:1;min-width:0;padding:8px 6px;font-size:11px;line-height:1.15;white-space:normal;text-align:center}
.selpop{position:fixed;z-index:500;display:flex;border:1px solid var(--line2);border-radius:9px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
.selpop button{display:flex;gap:6px;align-items:center;padding:9px 13px;background:none;border:none;border-right:1px solid var(--line);font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.selpop button:last-child{border-right:none}
.selpop button:hover{background:var(--ink);color:var(--paper)}
/* FIX: chat covers the page; optional Focus mode centers it */
.chat-wrap{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}
.chat-wrap.focus{max-width:900px;margin:0 auto}
.msgs{flex:1;overflow:auto;padding:26px 28px;min-height:0;scroll-behavior:smooth}
.chat-empty{max-width:520px;margin:10vh auto 0;text-align:center}
.chat-empty h2{font:italic 600 32px/1.15 var(--serif);margin:0 0 10px}
.chat-empty p{color:var(--soft);margin:0 0 20px}
.sugs{display:flex;flex-direction:column;gap:9px;align-items:center}
.msg{
  margin:0 0 26px;
  max-width:78%;
  animation:msgIn var(--dur-base) var(--ease-out);
}
@keyframes msgIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.msg.user{margin-left:auto}
.msg .who{
  margin-bottom:5px;
  font:600 var(--fs-2xs) var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dim);
}
.msg.user .bubble{
  border:1px solid var(--border-s);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface-2) 90%,transparent),
    var(--surface));
  padding:12px 15px;
  border-radius:var(--r-md);
  border-top-right-radius:6px;
  white-space:pre-wrap;
  font-size:var(--fs-base);
  box-shadow:
    var(--shadow-inset),
    0 4px 14px -10px rgba(0,0,0,.5);
}
.msg.ai .bubble{
  border-left:2px solid var(--accent);
  padding:2px 4px 2px 16px;
}
.msg.ai.err .bubble{border-left-color:var(--err);opacity:.8}
.msg.ai.typing .bubble::after{
  content:'';display:inline-block;
  width:13px;height:13px;
  border:2px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:rspin .7s linear infinite;
  vertical-align:-2px;margin-left:6px;
}
.msg.typing .bubble::after{
  content:'';display:inline-block;
  width:13px;height:13px;
  border:2px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:rspin .7s linear infinite;
  vertical-align:-2px;margin-left:6px;
}
@keyframes blink{50%{opacity:0}}
@keyframes rspin{to{transform:rotate(360deg)}}
.msg.err .bubble{border-left-color:var(--err)}
.quiz-card{border:1px solid var(--line2);border-radius:12px;background:var(--panel);padding:16px;max-width:620px}
.quiz-card h3{font:italic 600 21px var(--serif);margin:0 0 12px;line-height:1.25}
.quiz-options{display:grid;gap:8px;margin-top:14px}
.quiz-option{width:100%;text-align:left;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);padding:10px 12px;font:14px var(--sans);cursor:pointer}
.quiz-option:hover{border-color:var(--accent)}
.quiz-option.correct{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface-2))}
.quiz-option.wrong{border-color:var(--err);background:color-mix(in srgb,var(--err) 14%,var(--surface-2))}
.quiz-option:disabled{opacity:.75;cursor:default}
.quiz-feedback{margin-top:12px;color:var(--soft);font-size:13px;line-height:1.5}
.qz-wrap{display:flex;flex-direction:column;align-items:center;padding-top:34px}
.qz-card{width:100%;max-width:680px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);padding:22px 24px}
.qz-card h3{margin:0 0 6px;font:italic 600 20px var(--serif);line-height:1.3}
.qz-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:11px var(--mono);color:var(--soft);margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:12px}
.qz-meta b{color:var(--accent)}
.qz-tag{border:1px solid var(--line2);border-radius:99px;padding:2px 9px;background:var(--surface-2)}
.qz-mc{display:grid;gap:9px;margin:14px 0 0}
.qz-fill{font:16px var(--read);line-height:1.75;color:var(--fg)}
.ar-blk{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border:1px solid var(--line2);border-radius:9px;background:var(--surface-2);margin:0 0 9px}
.ar-blk b{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ar-blk span{font:15px var(--read);line-height:1.5;color:var(--fg)}
.qz-blank{display:inline-block;border:0;border-bottom:1.5px dashed var(--accent);background:transparent;color:var(--fg);font:inherit;min-width:130px;text-align:center;outline:none;padding:0 4px}
.qz-blank:focus{border-bottom-style:solid}
.qz-in{width:100%;resize:vertical;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--fg);padding:11px 13px;font:15px var(--read);min-height:64px}
.qz-in:focus{outline:none;border-color:var(--accent)}
.qz-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.qz-ans{background:color-mix(in srgb,var(--ok) 10%,var(--surface-2));border:1px solid var(--ok);border-radius:9px;padding:11px 13px;font:14px var(--read);line-height:1.55;margin-top:14px}
.qz-ans b{color:var(--ok)}
.qz-gpoints{font:600 13px var(--mono);color:var(--accent)}
.qz-missed .qz-ans b{color:var(--err)}
.qz-stream{font:12px var(--mono);color:var(--soft);margin-top:10px}
.fpop{position:fixed;inset:0;z-index:160;background:color-mix(in srgb,var(--ink) 22%,transparent);display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 20px}
.fpop .pop{position:static;width:min(780px,94vw);max-width:94vw;max-height:80vh;overflow:auto;box-shadow:var(--shadow);overscroll-behavior:contain;opacity:1}
.fpop[hidden]{display:none}
.fpop .saved-row{flex-wrap:wrap;gap:6px 9px}
.fpop .saved-row .t{flex:1 1 160px}
body:has(.fpop:not([hidden])){overflow:hidden}
.fpop.sidepane{justify-content:flex-end;align-items:stretch;padding:0;z-index:200;background:color-mix(in srgb,var(--ink) 34%,transparent)}
.fpop.sidepane .pop{width:min(400px,94vw);max-width:94vw;max-height:none;align-self:stretch;border-radius:0;border-left:1px solid var(--line2);background:var(--surface);box-shadow:var(--shadow);opacity:1}
@media (prefers-reduced-motion: reduce){.fpop .pop,.fpop.sidepane .pop{animation:none}}
.fpop.sidepane .pop-head{padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
#qzSavedModal .pop-head{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 14px;z-index:1}
#qzSavedModal #qzSavedRows{padding:6px 14px 12px}
#qzSavedModal .pop{min-height:168px}
#qzSavedModal.saved-z2{justify-content:center;align-items:flex-start}
.fpop.sidepane .hint{padding:10px 14px;line-height:1.5}
.saved-row, .set-row{display:flex;align-items:center;gap:9px;padding:9px 4px;border-bottom:1px solid var(--line)}
.saved-row .t{flex:1;min-width:0;font:600 14px var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-row .sc, .set-row .sc{font:11px var(--mono);color:var(--soft);white-space:nowrap}
.saved-row .saved-acts{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%;-webkit-overflow-scrolling:touch}
.saved-row .saved-acts::-webkit-scrollbar{display:none}
.saved-row .saved-acts .btn{flex:0 0 auto}
.skillchip{font:600 11px var(--mono);white-space:nowrap}
.saved-state{font:600 11px var(--mono);color:var(--warn);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.saved-state.done{color:var(--ok)}
.saved-hist{padding:6px 4px 10px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.saved-hist-row{display:flex;gap:12px;align-items:center;font:11px var(--mono);color:var(--soft)}
.saved-hist-row span:first-child{flex:1}
.saved-hist-row span:last-child{white-space:nowrap}
.nt-split{flex:1;display:flex;min-height:0;overflow:hidden}
.nt-pane{width:250px;border-right:1px solid var(--line);min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.nt-pane-head{padding:10px 12px;border-bottom:1px solid var(--line)}
.nt-pane-rows{flex:1;overflow:auto;padding:2px 8px}
.nt-main{flex:1;min-width:0;display:flex;flex-direction:column}
#ntEmpty{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px}
#ntEditor{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-height:0}
.nt-title{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--fg);font:700 18px var(--serif);padding:9px 12px;width:100%}
.nt-title:focus,.nt-body:focus{outline:none;border-color:var(--accent)}
.nt-body{flex:1;resize:none;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--fg);font:15px/1.7 var(--read);padding:12px 14px;min-height:180px}
.nt-row{cursor:pointer}
.nt-row.on{background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));border-radius:8px}
@media (max-width:760px){.nt-split{flex-direction:column}.nt-pane{width:100%;max-height:34vh;border-right:none;border-bottom:1px solid var(--line)}}
.nb-title{flex:0 1 300px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);font:600 15px var(--serif);padding:6px 10px;min-width:120px}
.nb-title:focus{outline:none;border-color:var(--accent)}
.nb-pdf-host{flex:1;position:relative;min-height:0;display:flex;flex-direction:column}
.nb-quiz-host{flex:1;overflow:auto;padding:22px}
.nb-quiz-host .empty{width:100%;max-width:680px;margin:0 auto}
.nb-qz-list{width:100%;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
#readerHold{display:none}
#qzPasteWrap{width:min(760px,calc(100% - 40px));margin:12px auto 0}
#qzPasteWrap:not([hidden]){display:block}
.qz-prompt{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px 16px;box-shadow:var(--shadow)}
.qz-prompt-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.qz-prompt-title{display:flex;align-items:baseline;gap:10px;font:600 13px var(--sans)}
.qz-prompt-head label.chk{font-size:12px;color:var(--mut);white-space:nowrap}
.qz-prompt textarea{width:100%;min-height:76px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:13px/1.5 var(--sans);color:var(--fg);resize:vertical;outline:none}
.qz-prompt textarea:focus{border-color:var(--accent)}
.qz-prompt-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
#qzSavedModal .hint{padding:10px 16px;line-height:1.5}
.md{font-family:var(--read);font-size:15.5px;line-height:1.68;word-wrap:break-word}
.md p{margin:.5em 0}.md h1,.md h2,.md h3{font-family:var(--serif);margin:.9em 0 .4em;line-height:1.2}.md h1{font-size:22px}.md h2{font-size:19px}.md h3{font-size:16px}
.md ul,.md ol{padding-left:1.35em;margin:.5em 0}.md li{margin:.22em 0}
.md code{font:12.5px var(--mono);background:var(--panel2);padding:1px 5px;border-radius:4px}
.md pre{background:var(--ink);color:var(--paper);padding:13px 15px;border-radius:9px;overflow:auto;margin:.6em 0}
.md pre code{background:none;color:inherit;font-size:12.5px;padding:0}
.md blockquote{border-left:2px solid var(--accent);padding-left:13px;color:var(--soft);margin:.6em 0;font-style:italic}
.md table{border-collapse:collapse;margin:.6em 0}.md th,.md td{border:1px solid var(--line2);padding:4px 9px;font-size:13px}
.md hr{border:none;border-top:1px solid var(--line)}
.md a{color:var(--accent)}
.md .dimline{color:var(--dim);font-style:italic}
/* Sandboxed chat visualisations — ```viz fenced blocks become live cards */
.sim-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:.8em 0;overflow:hidden;max-width:640px}
.sim-card .sim-top{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.sim-card .sim-title{font:600 13px var(--ui,var(--sans));letter-spacing:.02em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim-card .sim-kind{font:600 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:2px 8px;white-space:nowrap}
.sim-card .sim-act{display:flex;gap:4px}
.sim-card .sim-mini{font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft);background:none;border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer}
.sim-card .sim-mini:hover{color:var(--accent);border-color:var(--accent)}
.sim-card .sim-frame{position:relative}
.sim-card .sim-frame iframe{display:block;width:100%;height:320px;border:0;background:#fff;color:#17130c}
.sim-card.sim-fullscreen{position:fixed;inset:0;z-index:9999;max-width:none;border-radius:0;display:flex;flex-direction:column;background:var(--surface);overflow:hidden}
.sim-card.sim-fullscreen .sim-frame{flex:1;min-height:0}
.sim-card.sim-fullscreen .sim-frame iframe{height:100%}
.sim-card.sim-fullscreen .sim-ctrls{flex:none}
body.sim-fullscreen-lock{overflow:hidden}
.sim-card.sim-fullscreen .sim-top{padding:12px 16px}
.sim-card.sim-fullscreen .sim-title{font-size:15px}
.sim-card .sim-ctrls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line)}
.sim-card .sim-ctrls label{display:flex;align-items:center;gap:6px;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.sim-card .sim-ctrls input[type=range]{width:110px}
.sim-card .sim-ctrls b{font:600 11px var(--mono);color:var(--fg);min-width:20px;text-align:right}
.sim-card .sim-more{display:flex;gap:4px;margin-left:auto}
.sim-card .sim-err{display:none;padding:10px 14px;font:12px var(--mono);color:var(--dim);line-height:1.5}
.sim-card.bad .sim-frame{display:none}
.sim-card.bad .sim-err{display:block}
.sim-card.collapsed .sim-frame,.sim-card.collapsed .sim-ctrls{display:none}
.sim-card .sim-state{font:600 11px var(--mono);color:var(--accent);min-width:34px;text-align:center;text-transform:uppercase;letter-spacing:.06em}
.sp-widget{position:fixed;z-index:300;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border-s);box-shadow:0 24px 70px rgba(0,0,0,.45);border-radius:14px;padding:16px 18px;min-width:240px;max-width:80vw;font:500 14px var(--font)}
.sp-widget h4{margin:0 0 6px;font:600 15px var(--serif);color:var(--fg)}
.sp-widget p{margin:0 0 12px;color:var(--fg2);font-size:13px;line-height:1.45}
.sp-widget .wbtn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:7px 14px;font:600 13px var(--font);cursor:pointer}
.sp-widget .wbtn.ghost{background:transparent;color:var(--fg2);margin-left:8px}
.ibtn.disabled{opacity:.38;pointer-events:none}

.errline{color:var(--err);font-family:var(--sans);font-size:13px}
.md-tools{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.mini-btn{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:none;border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer}
.mini-btn:hover{color:var(--ink);border-color:var(--line2)}
.tp-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tp-panes{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;min-width:0}
.tp-pane{display:flex;flex-direction:column;gap:6px;min-width:0}
.tp-prev{border:1px solid var(--line);border-radius:9px;background:var(--surface-2);padding:16px 18px;overflow:auto;min-height:420px;max-height:620px;scrollbar-gutter:stable}
@media (max-width:880px){.tp-panes{grid-template-columns:1fr}}
.composer{
  border-top:1px solid var(--border);
  padding:12px 28px 16px;
  flex:none;
  /* Slightly milky glass — composer is a foreground layer */
  background:color-mix(in srgb,var(--surface) 68%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .composer{background:var(--surface)}
}
.sysdet{margin-bottom:10px}
.sysdet summary{cursor:pointer;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);list-style:none}
.sysdet summary::before{content:'▸ '}.sysdet[open] summary::before{content:'▾ '}
.sysdet textarea{margin-top:8px}
.ctxrow{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.inputrow{
  display:flex;gap:10px;align-items:flex-end;
}
#chatIn{
  flex:1;
  min-height:52px;max-height:200px;
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface-3) 40%,var(--surface));
  color:var(--fg);
  border:1px solid var(--border-s);
  padding:14px 16px;
  font-size:var(--fs-base);
  line-height:1.5;
  letter-spacing:-.005em;
  box-shadow:
    var(--shadow-inset),
    inset 0 2px 4px rgba(0,0,0,.18);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
#chatIn:hover:not(:focus){border-color:var(--border-strong)}
#chatIn:focus{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:var(--ring-soft),var(--shadow-inset);
}
#chatSend{
  width:44px;height:44px;
  border-radius:var(--r-md);
  border:none;
  background:linear-gradient(180deg,var(--accent-h) 0%,var(--accent) 100%);
  color:var(--accent-ink);
  cursor:pointer;
  display:grid;place-items:center;
  flex:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 8px 20px -6px var(--accent-glow);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
#chatSend svg{width:18px;height:18px}
#chatSend:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-h) 92%,white 8%) 0%,var(--accent-h) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 12px 28px -8px var(--accent-glow);
}
#chatSend:active{transform:translateY(1px) scale(.96)}
#chatSend:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-md)}

#chatSend[disabled]{
  opacity:.4;
  pointer-events:none;
  filter:saturate(.5);
}
.nwrap{max-width:860px;margin:0 auto}
.nctl{padding:16px 18px;display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.nbanner{font-size:13px;line-height:1.55;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:8px;padding:10px 14px}
.nctl-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.nplay{width:56px;height:56px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.nplay:hover{background:var(--accent2)}
.nplay:disabled{opacity:.4;pointer-events:none}
.nplay svg{width:20px;height:20px}
.nplay .pb{display:none}.nctl-row.playing .nplay .pb{display:block}.nctl-row.playing .nplay .pa{display:none}
.nprog{flex:1;min-width:220px}
.nprog-meta{display:flex;justify-content:space-between;margin-top:4px;font:600 11px var(--mono);color:var(--soft)}
.nctl-row2{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.nctl-row2 .fld{min-width:180px;flex:1}
.nctl-row2 .fld.slim{flex:0 0 200px}
#nWpmV{color:var(--accent)}
.npaste{display:flex;gap:10px;align-items:flex-end}
.npaste .fld{flex:1}
.narticle{font-family:var(--read);font-size:17px;line-height:1.9;max-width:720px;margin:0 auto;padding:8px 6px 40px}
.narticle p{margin:0 0 1em}
.snt{cursor:pointer;border-radius:3px}
.snt:hover{background:var(--panel2)}
.snt.speaking{background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 45%,transparent)}
.snt.hdg{display:block;font-family:var(--serif);font-weight:700;color:var(--ink);margin:.45em 0 .2em;line-height:1.25}
.snt.hdg.h1{font-size:23px;margin-top:.75em}
.snt.hdg.h2{font-size:20px}
.snt.hdg.h3{font-size:17px}
.snt.hdg.h4{font-size:15px}
.snt.hdg.h5,.snt.hdg.h6{font-size:14px}
.snt.hdg.speaking{color:var(--accent)}
/* dictation — transcript front and center, diagnostics collapsed */
.dict-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.dict-stage{display:flex;align-items:center;gap:18px;padding:18px;flex-wrap:wrap}
.dict-stage h3{font:italic 600 21px var(--serif);margin:0 0 4px}
.micbtn{width:72px;height:72px;border-radius:50%;border:1.5px solid var(--line2);background:var(--paper);cursor:pointer;display:grid;place-items:center;position:relative;flex:none;color:var(--ink)}
.micbtn svg{width:26px;height:26px}
.micbtn:hover{border-color:var(--ink)}
.micbtn.rec{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.micbtn.rec::after{content:'';position:absolute;inset:-8px;border:1.5px solid var(--accent);border-radius:50%;animation:ringp 1.5s ease-out infinite}
/* Loading state: a spinning ring around the mic, so the user knows the
   model is downloading or the audio device is initialising. Clicks are
   ignored while this class is present — see the click handler. */
.micbtn.loading{opacity:.9;cursor:wait}
.micbtn.loading::after{content:'';position:absolute;inset:-8px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:rspin .8s linear infinite}
.micbtn.loading .loadlbl{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
@keyframes ringp{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.28);opacity:0}}
.dlive{font:italic 17px var(--read);color:var(--accent);margin-top:6px;min-height:26px;overflow-wrap:anywhere}
#dMeter{display:block;margin-top:8px;width:200px;height:14px;flex:none}
.dta{font-size:17px;line-height:1.6;min-height:230px}
.dact{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.diagrows{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:11.5px}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;margin-top:16px}
.rd-item{position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel);cursor:grab;display:flex;flex-direction:column;align-items:center;padding-top:6px}
.rd-item.dragging{opacity:.35}
.rd-item.over{outline:2px solid var(--accent);outline-offset:-2px}
.rd-item canvas{max-width:100%;height:118px;display:block}
.rd-num{position:absolute;left:6px;top:6px;font:600 10px var(--mono);background:var(--paper);color:var(--soft);padding:1px 6px;border-radius:5px;border:1px solid var(--line)}
.rd-acts{position:absolute;right:4px;top:4px;display:flex;gap:4px;opacity:0;transition:.15s}
.rd-item:hover .rd-acts{opacity:1}
.ptwrap{max-width:940px;margin:0 auto}
.ptcfg{padding:18px;display:flex;flex-direction:column;gap:12px}
.ptrow{display:flex;align-items:center;gap:6px;min-width:0}
.ptrow input[type="number"]{width:74px}
.ptrow select{width:auto;flex:none}
.ptrow .dim{color:var(--dim);font:12px var(--mono)}
#ptPreview,#ptTilerPreview{padding:20px;margin-top:18px}
#ptCv{max-width:100%;display:block;margin:0 auto;border:1px solid var(--line);background:#fff}
#ptSum{margin-top:12px;font:11.5px var(--mono);color:var(--soft);text-align:center}
#ptWarn{margin:8px 0 0;font-size:12.5px;color:var(--accent);text-align:center}
#ptLayout{font:600 12px var(--mono);color:var(--ink);padding:9px 0}
#ptOrientNote{margin:0}
#ivStage{flex:1;position:relative;overflow:hidden;background:var(--viewer-bg);touch-action:none}
#ivCv{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--viewer-bg);box-shadow:0 0 0 1px rgba(128,128,128,.15),var(--shadow)}
#ivOv{position:absolute;inset:0;pointer-events:none}
.iv-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--viewer-bg)}
.ivbar{display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap}
#ivCropBar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--border-s);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);z-index:5}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);cursor:pointer;flex:none}
.swatch.on{outline:2px solid var(--accent);outline-offset:2px}
#view-viewer.simple .iv-edit{display:none!important}
#view-viewer.simple .ivbar{display:none}
#view-viewer.hide-ui .tool-head{display:none}
#view-viewer.hide-ui .ivbar{display:none}
#ivRestore{display:none;position:absolute;top:12px;right:12px;z-index:6;opacity:.4;background:var(--surface)}
#ivRestore:hover{opacity:1}
#view-viewer.hide-ui #ivRestore{display:flex}
#wbStage{flex:1;position:relative;overflow:hidden;background:var(--bg)}
#wbGrid{position:absolute;inset:0;background-image:radial-gradient(var(--line2) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
#wbCv{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.wb-label-inline{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;z-index:120;cursor:text;white-space:pre-wrap;word-break:break-word;outline:1.5px dashed var(--accent);outline-offset:3px;border-radius:6px;background:transparent;font-family:"Space Grotesk",sans-serif}
.wb-label-inline:focus{outline:2px solid var(--accent);outline-offset:2px;background:rgba(0,0,0,.03)}
.wb-tbl-inline{position:absolute;z-index:120;overflow:hidden;background:var(--bg)}
.wb-tbl-inline table{width:100%;height:100%;table-layout:fixed;border-collapse:collapse;font-family:"Space Grotesk",sans-serif}
.wb-tbl-inline td{position:relative;border:1px solid var(--tblb,#555);padding:3px 5px;text-align:center;vertical-align:middle;overflow:hidden;color:var(--tblc,#333);cursor:text;white-space:pre-wrap;word-break:break-word}
.wb-tbl-inline td.hdr{background:rgba(0,0,0,.06);font-weight:600}
.wb-tbl-inline td:focus{outline:2px solid var(--accent);outline-offset:-1px;background:rgba(0,0,0,.03);z-index:1}
.wb-tbl-inline td.editing{outline:2px solid var(--accent);outline-offset:-1px;background:rgba(0,0,0,.03)}
.wb-tbl-inline td.rg{user-select:none;cursor:pointer;color:var(--soft);border-style:dashed;opacity:.75;font-size:13px}
.wb-tbl-inline td.rg:hover{opacity:1;color:var(--accent);background:rgba(0,0,0,.04)}
.wb-tbl-inline .addcol{width:22px;min-width:22px;max-width:22px}
.wb-tbl-inline .addrow{height:20px;min-height:20px;text-align:center}
#view-whiteboard.hide-ui .tool-head{display:none}
#view-whiteboard.hide-ui #wbStage{padding-top:0}
#wbRestore{display:none;position:absolute;right:14px;top:14px;z-index:8;opacity:.65;background:var(--surface)}
#wbRestore:hover{opacity:1}
#view-whiteboard.hide-ui #wbRestore{display:flex}
.wb-pages-bar{position:absolute;right:14px;bottom:14px;z-index:8;display:flex;gap:6px}
#wbPages{background:var(--surface);opacity:.85;gap:6px}
#wbPages:hover{opacity:1}
#wbPages svg{width:13px;height:13px}
#wbPages b{min-width:14px;text-align:center;font:600 11px var(--mono);background:var(--accent);color:var(--on-accent);border-radius:8px;padding:1px 5px}
.wb-pages-bar .wb-pg{padding:0 8px;background:var(--surface);opacity:.85}
.wb-pages-bar .wb-pg:hover{opacity:1}
.wb-pages-bar .wb-pg svg{width:13px;height:13px}
.dg-split{display:grid;grid-template-columns:230px 1fr;gap:0;height:76vh;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.dg-pane{display:flex;flex-direction:column;border-right:1px solid var(--line);min-height:0;background:var(--surface)}
.dg-pane .nt-pane-head{flex:none}
.dg-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.dg-toolbar{flex:none;display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dg-toolbar .hint{color:var(--soft)}
.dg-canvas{flex:1;position:relative;overflow:hidden;background:var(--bg);min-height:0}
.dg-canvas svg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
.dg-canvas svg.dg-drag{cursor:grabbing}
.dg-box{stroke:#1d2a22;stroke-width:2.2;rx:10}
.dg-node{stroke:#1d2a22;stroke-width:2.2}
.dg-leg{fill:none;stroke:#1d2a22;stroke-width:2.2}
.dg-lab{font:600 14px var(--sans);fill:#10211a;paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:4px;user-select:none;pointer-events:none}
.dg-inf{font:500 11px var(--sans);fill:#55624d;pointer-events:none}
.dg-selbox{stroke:#0f6fc0;stroke-width:2.4}
.dg-selnode{stroke:#0f6fc0;stroke-width:2.4}
.dg-good{stroke:#2fa05c !important;stroke-width:3}
.dg-bad{stroke:#d44c40 !important;stroke-width:3}
.dg-info{flex:none;font:400 12px/1.5 var(--sans);color:var(--ink);padding:9px 14px;border-top:1px solid var(--line);background:var(--surface);max-height:120px;overflow:auto}
.dg-bar{display:flex;align-items:center;gap:8px;max-width:860px;margin:0 auto;padding:0 22px 14px;flex-wrap:wrap}
.dg-topic{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:500 13px var(--sans)}
.dg-topic:focus{outline:none;border-color:var(--line2)}
.dg-row{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.dg-row:hover{background:var(--panel)}
.dg-row.cur{background:rgba(87,184,132,.12)}
.dg-row b{display:block;font:600 12.5px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-row span{display:block;font:400 10.5px var(--mono);color:var(--soft);margin-top:2px}
.dg-row .dg-del{float:right;border:none;background:none;color:var(--soft);cursor:pointer;font:600 12px var(--sans);padding:2px 6px;border-radius:6px}
.dg-row .dg-del:hover{color:var(--err);background:rgba(212,76,64,.12)}
.dg-toolbar .seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dg-toolbar .seg button{padding:5px 12px;border:none;background:var(--surface);color:var(--soft);font:500 12px var(--sans);cursor:pointer;border-right:1px solid var(--line);transition:background .12s,color .12s}
.dg-toolbar .seg button:last-child{border-right:none}
.dg-toolbar .seg button.on{background:var(--ink);color:var(--paper)}
.dg-toolbar .seg button:hover:not(.on){background:var(--panel)}
.dg-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:10}
.dg-overlay[hidden]{display:none}
.dg-recall-card{background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 12px 40px -8px rgba(20,15,5,.25);padding:24px 32px;text-align:center;max-width:420px;width:90%}
.dg-recall-card .q{font:600 16px var(--sans);color:var(--ink);margin-bottom:14px;min-height:44px}
.dg-recall-card input{width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:500 14px var(--sans);margin-bottom:10px}
.dg-recall-card input:focus{outline:none;border-color:var(--line2)}
.dg-recall-card .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.dg-recall-card .acts button{padding:7px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 12.5px var(--sans);cursor:pointer}
.dg-recall-card .acts button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dg-recall-card .score{font:600 28px var(--sans);color:var(--accent);margin-bottom:8px}
.dg-recall-card .score-sub{font:400 13px var(--sans);color:var(--soft)}
.dg-node.dg-highlight{stroke:var(--accent)!important;stroke-width:4;filter:drop-shadow(0 0 8px rgba(87,184,132,.4))}
.dg-node.dg-dim{opacity:.3}
.dg-box.dg-highlight{stroke:var(--accent)!important;stroke-width:4;filter:drop-shadow(0 0 8px rgba(87,184,132,.4))}
.dg-box.dg-dim{opacity:.3}
.dg-leg.dg-dim{opacity:.15}
.dg-leg.dg-highlight{stroke:var(--accent)!important;stroke-width:3}
.wb-pop{position:fixed;z-index:500;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 50px -10px rgba(20,15,5,.45);width:260px;max-height:76vh;overflow:auto;padding:8px 0}
.wb-pop button{display:block;width:100%;text-align:left;padding:10px 16px;background:none;border:none;font:500 12.5px var(--sans);color:var(--ink);cursor:pointer}
.wb-pop button:hover{background:var(--ink);color:var(--paper)}
.wb-pop button .sub{display:block;font:400 10.5px var(--sans);color:var(--soft);margin-top:2px}
.wb-pop-head{padding:10px 16px 6px;font:600 11px var(--mono);color:var(--soft);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--line)}
.wb-ctx{position:fixed;z-index:600;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 16px 48px -8px rgba(20,15,5,.5);min-width:200px;max-width:280px;padding:6px 0;user-select:none;animation:ctxFadeIn .12s ease}
@keyframes ctxFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.wb-ctx-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font:500 12.5px var(--sans);color:var(--ink);cursor:pointer;border:none;background:none;width:100%;text-align:left}
.wb-ctx-item:hover{background:var(--ink);color:var(--paper)}
.wb-ctx-item svg{width:15px;height:15px;flex:none;opacity:.6}
.wb-ctx-sep{height:1px;background:var(--line);margin:4px 10px}
.wb-ctx-label{padding:5px 14px 2px;font:600 9.5px var(--mono);color:var(--soft);text-transform:uppercase;letter-spacing:.06em}
.wb-ctx-swatches{display:flex;gap:4px;padding:4px 14px 6px;flex-wrap:wrap}
.wb-ctx-swatches button{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;flex:none}
.wb-ctx-swatches button:hover{transform:scale(1.15)}
.wb-ctx-swatches button.on{border-color:var(--fg);box-shadow:0 0 0 2px var(--paper)}
.wb-ctx-row{display:flex;align-items:center;gap:6px;padding:4px 14px}
.wb-ctx-row label{font:500 11px var(--sans);color:var(--soft);min-width:44px}
.wb-ctx-row input[type=range]{flex:1;height:4px;accent-color:var(--accent)}
.wb-ctx-row input[type=color]{width:28px;height:28px;border:none;border-radius:6px;padding:0;cursor:pointer;background:none}
.wb-ctx-row .val{font:600 10px var(--mono);color:var(--soft);min-width:26px;text-align:right}
.wb-ctx-toggle{display:flex;align-items:center;gap:6px;padding:5px 14px}
.wb-ctx-toggle button{border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 11px var(--sans);padding:4px 10px;border-radius:6px;cursor:pointer}
.wb-ctx-toggle button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.wb-ctx-toggle button:hover:not(.on){background:var(--surface-2)}
.wb-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px}
.wb-tpl-card{border:1px solid var(--line);border-radius:8px;padding:8px;text-align:center;cursor:pointer;background:var(--surface);transition:all .15s}
.wb-tpl-card:hover{border-color:var(--accent);background:var(--surface-2);transform:translateY(-1px)}
.wb-tpl-card svg{width:32px;height:32px;margin:0 auto 4px;display:block}
.wb-tpl-card span{font:500 10px var(--sans);color:var(--soft);display:block}
.wb-tpl-cats{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line)}
.wb-tpl-cats button{border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 10px var(--sans);padding:4px 10px;border-radius:20px;cursor:pointer}
.wb-tpl-cats button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.wb-tbl-editor{position:fixed;z-index:250;display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--accent);border-radius:10px;box-shadow:0 12px 40px -6px rgba(20,15,5,.45);overflow:hidden;min-width:200px}
.wb-tbl-editor table{border-collapse:collapse;width:100%}
.wb-tbl-editor td,.wb-tbl-editor th{border:1px solid var(--line2);padding:4px 8px;font:400 13px "Space Grotesk",sans-serif;min-width:60px;min-height:28px;cursor:text;position:relative}
.wb-tbl-editor th{background:var(--surface-2);font-weight:600;color:var(--soft)}
.wb-tbl-editor td:focus{outline:2px solid var(--accent);outline-offset:-2px}
.wb-tbl-editor .col-resize{position:absolute;right:-3px;top:0;width:6px;height:100%;cursor:col-resize;z-index:2}
.wb-tbl-editor .row-resize{position:absolute;bottom:-3px;left:0;width:100%;height:6px;cursor:row-resize;z-index:2}
.wb-tbl-editor .row-resize:hover{background:var(--accent);opacity:.3}
.wb-tbl-editor td.rg,.wb-tbl-editor th.rg{position:relative;width:14px;min-width:14px;max-width:14px;padding:0;background:var(--surface-2)}
.wb-tbl-editor th.rg{cursor:default}
.wb-tbl-editor tr[data-row]{height:32px}
.wb-pages-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px}
.wb-page-card{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:var(--surface);transition:border-color .15s}
.wb-page-card:hover{border-color:var(--accent)}
.wb-page-card.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.wb-page-card img{display:block;width:100%;height:108px;object-fit:cover;background:#080b12}
.wb-page-meta{padding:4px 6px;display:flex;align-items:center;justify-content:space-between;gap:4px}
.wb-page-meta b{font:600 11px var(--sans)}
.wb-page-del{position:absolute;top:4px;right:4px;width:18px;height:18px;line-height:16px;text-align:center;border-radius:50%;background:rgba(8,11,18,.75);color:#ff8a80;font:700 12px var(--sans);cursor:pointer;border:1px solid var(--line)}
.wb-page-del:hover{background:var(--err);color:#fff}
.wb-tbl-editor .col-resize:hover{background:var(--accent);opacity:.3}
.wb-tbl-editor .row-ops{display:flex;gap:2px;padding:4px 8px;border-top:1px solid var(--line);background:var(--surface)}
.wb-tbl-editor .row-ops button{border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 10px var(--sans);padding:3px 8px;border-radius:5px;cursor:pointer}
.wb-tbl-editor .row-ops button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tbl-toolbar{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--surface);flex:none}
.tbl-title{font:600 11px var(--sans);color:var(--soft);flex:1}
.tbl-ops{display:flex;gap:4px}
.tbl-ops button{border:1px solid var(--line2);background:var(--surface);color:var(--ink);font:600 10px var(--sans);padding:3px 8px;border-radius:5px;cursor:pointer;transition:background .12s}
.tbl-ops button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tbl-color{font-size:0;cursor:pointer}
.tbl-color input[type=color]{width:22px;height:22px;border:1px solid var(--line2);border-radius:4px;padding:0;background:var(--surface);cursor:pointer}
.tbl-scroll{overflow:auto;flex:1;min-height:0}
.tbl-cell-menu{position:fixed;z-index:700;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:4px 0;box-shadow:0 8px 24px rgba(10,10,14,.5);min-width:150px}
.tbl-cell-menu button{display:block;width:100%;text-align:left;border:none;background:none;padding:6px 14px;font:400 12px var(--sans);color:var(--ink);cursor:pointer}
.tbl-cell-menu button:hover{background:var(--accent);color:#fff}
.wb-tbl-editor .rg{position:relative;width:26px;min-width:26px;max-width:26px;padding:0;background:var(--surface-2);font:600 10px var(--sans);color:var(--soft);text-align:center;cursor:default;overflow:visible}
.wb-tbl-editor .rg.b{color:var(--accent);font-size:13px}
.wb-tbl-editor .row-handle{cursor:default}
.wb-tbl-editor .col-handle{width:26px;min-width:26px;max-width:26px;text-align:center;color:var(--accent);font:600 13px var(--sans);cursor:pointer}
.wb-tbl-editor td.hdr{background:rgba(0,0,0,.04);font-weight:600}
.wb-tbl-editor td.editing{outline:2px solid var(--accent);outline-offset:-2px;background:rgba(255,255,255,.06);z-index:1}
.wb-tbl-editor .addrow td{padding:0}
.row-plus{height:14px;display:flex;align-items:center;justify-content:center;font:600 11px var(--sans);color:var(--accent);cursor:pointer;transition:background .12s;border-top:1px dashed var(--line2)}
.row-plus:hover{background:rgba(0,0,0,.05)}
.cal-wrap{flex:1;display:flex;gap:0;height:100%;overflow:hidden}
.cal-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(74px,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:12px;overflow:hidden;padding:1px}
.cal-side{width:280px;border-left:1px solid var(--line);padding:14px 16px;overflow-y:auto;flex-shrink:0;background:color-mix(in srgb,var(--surface) 55%,transparent);display:flex;flex-direction:column;gap:8px}
.cal-dow{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 0;background:var(--surface)}
.cal-cell{background:var(--surface);min-height:74px;padding:6px;position:relative;display:flex;flex-direction:column;gap:3px;border-radius:2px}
.cal-cell.off{opacity:.38}
.cal-cell.today{border:1px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-cell .cday{font-size:12.5px;font-weight:600;color:var(--ink);display:flex}
.cal-cell.today .cday{color:var(--accent)}
.cal-cell button.cday{padding:2px 7px;border-radius:20px;align-self:flex-start;background:transparent;border:0;color:inherit;cursor:pointer;font:inherit}
.cal-cell.today button.cday{background:var(--accent);color:#fff}
.cal-cell .cev{font-size:11px;line-height:1.25;padding:2px 5px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.cal-cell .cev.cev-task{background:#eef1f6;border-left:3px solid #8ab4f8}
.cal-cell .cev.cev-red{background:#fdecea;border-left:3px solid #f28b82}
.cal-cell .cev.cev-amber{background:#fef7e0;border-left:3px solid #fdd663}
.cal-cell .cev.cev-green{background:#e6f4ea;border-left:3px solid #81c995}
.cal-cell .cev.cev-done{text-decoration:line-through;opacity:.55}
.cal-cell .cev button{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;padding:0 2px;line-height:1}
.cal-side h4{font-size:12.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:space-between;margin:2px 0 2px}
.cal-side h4 .hint{font-weight:400}
.cal-side .up-item{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.cal-side .up-item b{font-size:12.5px;color:var(--ink)}
.cal-side .up-item .hint{font-size:11px}
.cal-side .up-item.urgent{border-color:#f28b82;background:#fdecea}
.cal-side .up-item .row{display:flex;gap:6px;align-items:center}
.cal-side .up-item button{margin-left:auto;background:var(--surface-2);border:1px solid var(--line2);color:var(--ink);border-radius:6px;font-size:11px;padding:3px 8px;cursor:pointer}
.cal-side .empty2{padding:10px 2px;color:var(--muted);font-size:12px}
.cal-add-form{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--line2);border-radius:10px;padding:10px;background:var(--surface)}
.cal-add-form input,.cal-add-form select{border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:6px;padding:6px 8px;font:400 13px var(--sans);outline:none}
.cal-add-form input:focus,.cal-add-form select:focus{border-color:var(--accent)}
.cal-add-form label{font-size:11px;color:var(--muted)}
.cal-add-form .row{display:flex;gap:6px}
.cal-add-form .row>*{flex:1}
.cal-add-actions{display:flex;gap:6px}
.cal-add-actions .btn{flex:1}
.ts-wrap{display:flex;flex-direction:column;gap:0;padding:0 16px;overflow:hidden;height:100%}
.ts-addbar{display:flex;gap:6px;padding:10px 0;align-items:center;border-bottom:1px solid var(--line);flex-shrink:0}
.ts-addbar input,.ts-addbar select{border:1px solid var(--line2);background:var(--surface);color:var(--ink);border-radius:6px;padding:6px 8px;font:400 13px var(--sans);outline:none}
.ts-addbar input:focus{border-color:var(--accent)}
#tsNewTask{flex:1;min-width:120px}
#tsDue{width:160px;flex-shrink:0}
#tsPriority{width:90px;flex-shrink:0}
.ts-list{overflow-y:auto;flex:1;padding:6px 0;display:flex;flex-direction:column;gap:0}
.ts-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid transparent;border-radius:6px;transition:background .12s,border-color .12s}
.ts-item:hover{border-color:var(--line2);background:rgba(0,0,0,.03)}
.ts-item input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;cursor:pointer}
.ts-item .ts-txt{flex:1;cursor:text;word-break:break-word;transition:opacity .2s}
.ts-item.done .ts-txt{text-decoration:line-through;opacity:.55}
.ts-item .ts-due{font:400 11px var(--sans);color:var(--soft);flex-shrink:0;white-space:nowrap}
.ts-item .ts-due.overdue{color:var(--err);font-weight:600}
.ts-item .ts-pri{border:1px solid var(--line2);border-radius:4px;padding:0 6px;font:600 10px var(--sans);color:var(--soft);flex-shrink:0}
.ts-item .ts-pri[data-v="1"]{border-color:#e08a3e;color:#e08a3e}
.ts-item .ts-pri[data-v="2"]{border-color:var(--err);color:var(--err)}
.ts-item .ts-del{background:none;border:none;color:var(--soft);cursor:pointer;padding:2px 4px;font-size:14px;line-height:1;opacity:0;transition:opacity .15s}
.ts-item:hover .ts-del{opacity:1}
.ts-empty{padding:30px 0;color:var(--soft);font:400 13px var(--sans);text-align:center}
.ts-filters{display:flex;gap:6px;padding:8px 0;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:6px}
.ts-filter{border:1px solid var(--line2);background:transparent;color:var(--ink);font:600 11px var(--sans);padding:5px 10px;border-radius:20px;cursor:pointer}
.ts-filter.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ts-search{flex:1;min-width:140px;max-width:260px;margin-left:auto;padding:5px 10px;font-size:12px}
.ts-tag{display:inline-flex;font:600 10px var(--mono);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:99px;padding:1px 7px}
.ts-item.dragging{opacity:.4}
.ts-item.over{border-top:2px solid var(--accent)}
.ts-timer{position:fixed;bottom:16px;right:16px;z-index:500;background:var(--panel);border:2px solid var(--accent);border-radius:12px;padding:10px 14px;box-shadow:0 10px 32px rgba(10,10,14,.55);width:180px;display:none}
.ts-timer.on{display:block}
.ts-timer-head{display:flex;align-items:center;justify-content:space-between;font:600 12px var(--sans);margin-bottom:6px;color:var(--soft)}
.ts-close-ts{background:none;border:none;color:var(--soft);cursor:pointer;font-size:16px;padding:0 2px}
.ts-timer-display{font:700 36px var(--mono);text-align:center;letter-spacing:2px}
.ts-timer-label{font:400 11px var(--sans);text-align:center;color:var(--soft);margin:4px 0 8px}
.ts-timer-btns{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.ts-timer-btns .btn{font-size:11px;padding:3px 6px}
.ts-timer-btns .on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ts-sticky-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:12px 0}
.ts-sticky{background:#f5f06f;border-radius:3px;min-height:110px;position:relative;box-shadow:2px 3px 8px rgba(0,0,0,.15);font:400 13px var(--sans);overflow:hidden}
.ts-sticky-title{border:none;border-bottom:1px solid rgba(0,0,0,.08);padding:8px 10px 4px;font:600 13px var(--sans);background:transparent;width:100%;color:#333;outline:none}
.ts-sticky-body{border:none;border:none;padding:4px 10px 20px;background:transparent;width:100%;min-height:70px;resize:vertical;font:400 13px var(--sans);color:#333;outline:none;overflow:hidden}
.ts-sticky-del{position:absolute;top:3px;right:4px;background:none;border:none;color:rgba(0,0,0,.3);cursor:pointer;font-size:16px;line-height:1}
.ts-sticky-del:hover{color:rgba(0,0,0,.8)}
.ts-sticky select.ts-sticky-color{position:absolute;bottom:3px;left:4px;font-size:10px;border:none;background:transparent;color:rgba(0,0,0,.3);cursor:pointer}

/* --- tasks polish --- */
.ts-item:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ts-item .ts-due.overdue{text-decoration:underline;text-underline-offset:2px}
.ts-item.done .ts-due{opacity:.45}
.ts-item.done .ts-pri{opacity:.45;border-color:var(--line2);color:var(--soft)}
.ts-filter{transition:background .12s,color .12s,box-shadow .12s}
.ts-filter:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ts-addbar input:focus-visible,.ts-addbar select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ts-sticky{transition:transform .15s,box-shadow .15s}
.ts-sticky:hover{transform:translateY(-2px);box-shadow:2px 5px 12px rgba(0,0,0,.2)}
.ts-empty{opacity:.7}
.ts-timer{backdrop-filter:blur(14px)}
.ts-timer .btn{transition:background .12s,color .12s}
.ts-timer-btns .on{box-shadow:0 0 0 1px var(--accent)}
dialog{
  border:1px solid var(--border-s);
  border-radius:var(--r-lg);
  padding:0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface-2) 40%,transparent),
      color-mix(in srgb,var(--surface) 90%,transparent));
  color:var(--ink);
  width:min(680px,94vw);
  max-height:86vh;
  display:flex;flex-direction:column;
  box-shadow:
    var(--shadow-inset),
    var(--shadow-xl);
  margin:auto;
  box-sizing:border-box;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  animation:dialogIn var(--dur-base) var(--ease-out);
}
@keyframes dialogIn{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}
dialog::backdrop{
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  -webkit-backdrop-filter:blur(6px) saturate(.9);
  backdrop-filter:blur(6px) saturate(.9);
  animation:backdropIn var(--dur-base) var(--ease-out);
}
[data-skin="paper"] dialog,
[data-skin="comfy"] dialog,
[data-skin="contrast"] dialog{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:
    0 0 0 1px var(--border) inset,
    0 30px 70px -20px rgba(35,28,15,.4);
}
[data-skin="paper"] dialog::backdrop,
[data-skin="comfy"] dialog::backdrop,
[data-skin="contrast"] dialog::backdrop{
  background:rgba(35,28,15,.42);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
@keyframes backdropIn{from{opacity:0}to{opacity:1}}
dialog:not([open]){display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  dialog{background:var(--surface)}
}
.dlg-head{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 14px;
  border-bottom:1px solid var(--border);
}
.dlg-title{
  font:italic 600 clamp(20px,2.4vw,24px) var(--serif);
  flex:1;
  letter-spacing:-.005em;
}
.dlg-hint{font-size:12px;line-height:1.45;color:var(--soft);background:var(--surface-2);padding:10px 14px;border-radius:9px;margin:12px 20px 4px;border:1px solid var(--line);flex:none}
.prov-guide{flex:none;margin:6px 20px 4px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden}
.prov-guide summary{cursor:pointer;padding:9px 14px;font:600 12px var(--sans);color:var(--fg);list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.prov-guide summary::before{content:'▶';font-size:9px;color:var(--muted);transition:transform .2s}
.prov-guide[open] summary::before{transform:rotate(90deg)}
.prov-guide-badge{font:600 10px var(--mono);background:color-mix(in srgb,var(--accent) 14%,var(--surface-3));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:20px;padding:1px 7px;letter-spacing:.04em;text-transform:uppercase}
.prov-guide-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:12px}
.prov-guide-section{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface)}
.prov-guide-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.prov-guide-logo{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font:700 12px sans-serif;color:#fff;flex:none}
.prov-guide-tag{font:600 10px var(--mono);border-radius:20px;padding:1px 7px;text-transform:uppercase;letter-spacing:.04em}
.prov-guide-tag.free{background:color-mix(in srgb,var(--ok) 14%,var(--surface-3));color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)}
.prov-guide-tag.paid{background:color-mix(in srgb,var(--warn) 14%,var(--surface-3));color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)}
.prov-guide-section ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.prov-guide-section li{font-size:12px;line-height:1.5;color:var(--fg)}
.prov-guide-section a{color:var(--accent);text-decoration:underline}
.prov-guide-section code{font:11px var(--mono);background:var(--surface-2);padding:1px 5px;border-radius:4px}
.prov-guide-note{font:12px var(--sans);color:var(--soft);margin:6px 0 0;line-height:1.45}
.dlg-body{flex:1 1 auto;min-height:140px;max-height:55vh;overflow-y:auto;padding:12px 20px;display:flex;flex-direction:column;gap:12px}
.dlg-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid var(--line);background:var(--panel)}
.dlg-foot .btn{padding:11px 16px;font-size:13px}
.dlg-foot .primary{min-width:170px;justify-content:center}
.dlg-foot .hint{flex:1;min-width:0}
.prov{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px;background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.prov-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.radio{position:relative;display:inline-flex;cursor:pointer;flex:none}
.radio input{position:absolute;opacity:0;width:0}
.radio .mark{width:18px;height:18px;border:1.5px solid var(--line2);border-radius:50%;display:inline-grid;place-items:center}
.radio input:checked+.mark::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent)}
.prov-name-in{max-width:170px;font-weight:600}
.prov-kind{font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:2px 6px;border-radius:5px}
.prov-status{margin-left:auto;font:11px var(--mono);color:var(--soft);display:flex;gap:7px;align-items:center}
.prov-status .dot{width:8px;height:8px}
.prov-status.ok .dot{background:var(--ok)}.prov-status.err .dot{background:var(--err)}.prov-status.testing .dot{background:var(--warn)}
.prov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.prov-actions{display:flex;align-items:center;gap:10px;margin-top:2px}
.keyrow{display:flex;gap:8px}
.keyrow .fld{flex:1}
.keyeye{flex:none}
.pmrow{display:flex;gap:8px;align-items:center}
.pmrow .pm{flex:1;min-width:0}

.flipwrap{width:100%;max-width:620px;perspective:1400px}
.flipcard{position:relative;width:100%;cursor:pointer}
.flip-inner{position:relative;width:100%;min-height:340px;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flipcard.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 30px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:auto}
.flip-face.back{transform:rotateY(180deg);justify-content:flex-start;align-items:stretch}
.flip-q{font-family:var(--read);font-size:20px;line-height:1.55;text-align:center;overflow-wrap:anywhere}
.flip-tag{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:14px;flex:none;text-align:center;overflow:hidden;max-height:2.8em}
.flip-a{font-family:var(--read);font-size:17px;line-height:1.65;overflow-wrap:anywhere}

@media (max-width:720px){
  .ai-model-select{max-width:150px;font-size:11px;padding:6px 7px}
  .dlg-foot{align-items:stretch;flex-wrap:wrap}
  .dlg-foot .primary{min-width:0;flex:1}
  .dlg-foot .hint{flex-basis:100%;text-align:center}
  .rside{position:absolute;right:0;top:0;bottom:0;z-index:45;width:var(--rsideW,330px);max-width:330px;box-shadow:var(--shadow)}
  #rSideGrip{display:none}
  .rbody.side-closed .rside{margin-right:0;transform:translateX(108%)}
  .rail{width:60px}
  .rail button{padding:10px 0 9px}
  .rail button span{font-size:7px;letter-spacing:.03em}
  .tool-head{padding:8px 10px;gap:8px}
  .tool-head>div:not(.top-actions){min-width:0;flex:1}
  .tool-title{font-size:19px}
  .tool-sub{display:none}
  .top-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;margin-left:0;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top-actions::-webkit-scrollbar{display:none}
  .top-actions .ibtn{width:32px;height:32px}
  .top-actions .ibtn svg{width:15px;height:15px}
  .top-actions .btn{padding:6px 10px;font-size:12px}
  .tool-head.compact .ibtn{width:40px;height:40px}
  .ivbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ivbar::-webkit-scrollbar{display:none}
  #view-study .topbar{gap:8px;padding:0 10px}
  #view-study .brand{font-size:19px}
  #view-study .brand .scrawl{display:none}
  .pomo{gap:6px}
  .pomo-meta b{font-size:12px}
  .vbar{padding:8px 10px;gap:8px}
  .rname{max-width:150px}
  .pg.dx{padding:26px 20px}
  #pages{padding:16px 10px 60px}
  .dict-stage{flex-direction:column;text-align:center;gap:14px}
  .home-search{margin:20px auto 0}
  .flip-inner{min-height:380px}
  .chat-wrap .msgs{padding:16px 12px}
  .composer{padding:10px 12px 12px}
  .tool-body{padding:16px 12px}
  .tool-card{backdrop-filter:none;background:var(--surface)}
}
/* ============ Interactive Diagrams — redesign ============ */
.dg-shell{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg);overflow:hidden}
.dg-hero{padding:16px 22px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent);flex:none}
.dg-hero-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1180px;margin:0 auto}
.dg-hero-secondary{margin-top:8px;gap:8px}
.dg-hero-icon{width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.dg-topic{flex:1;min-width:220px;padding:11px 16px;border:1px solid var(--line2);border-radius:11px;background:var(--surface);color:var(--ink);font:500 14.5px var(--sans);box-shadow:inset 0 1px 0 rgba(255,255,255,.02);transition:border-color .15s,box-shadow .15s}
.dg-topic:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.dg-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:99px;padding:7px 14px;background:transparent;font:600 12px var(--sans);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .1s;white-space:nowrap}
.dg-pill:hover{background:var(--surface-2);border-color:var(--accent)}
.dg-pill:active{transform:scale(.97)}
.dg-pill.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:9px 20px;font-size:13px}
.dg-pill.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
.dg-pill.primary:disabled{opacity:.55;cursor:default}
.dg-export{font-size:11.5px;padding:6px 12px}
.dg-stream{font:600 11.5px var(--mono);color:var(--accent);letter-spacing:.02em}
.dg-split{flex:1;display:grid;grid-template-columns:252px 1fr;min-height:0;overflow:hidden}
.dg-pane{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--surface);min-height:0;overflow:hidden}
.dg-pane-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);flex:none}
.dg-pane-title{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.dg-pane-count{font:600 10px var(--mono);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-radius:99px;padding:2px 8px;min-width:20px;text-align:center}
.dg-rows{flex:1;overflow:auto;padding:6px 8px}
.dg-empty-hint{padding:20px 16px;font:12.5px var(--sans);color:var(--soft);line-height:1.6;text-align:center}
.dg-row{padding:10px 12px;border-radius:9px;cursor:pointer;transition:background .12s;border:1px solid transparent}
.dg-row:hover{background:var(--panel2)}
.dg-row.cur{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.dg-row b{display:block;font:600 13px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}
.dg-row span{display:block;font:11px var(--mono);color:var(--soft)}
.dg-row .dg-del{float:right;border:none;background:none;color:var(--soft);cursor:pointer;font:600 14px var(--sans);padding:2px 6px;border-radius:6px;line-height:1;margin-top:-2px}
.dg-row .dg-del:hover{color:var(--err);background:rgba(212,76,64,.12)}
.dg-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg);position:relative}
.dg-toolbar{flex:none;display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.dg-seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--panel)}
.dg-seg button{padding:6px 14px;border:none;background:transparent;color:var(--soft);font:600 11.5px var(--sans);cursor:pointer;transition:background .12s,color .12s}
.dg-seg button.on{background:var(--accent);color:var(--accent-ink)}
.dg-seg button:not(.on):hover{color:var(--ink);background:var(--panel2)}
.dg-zoomgrp{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--panel)}
.dg-ibtn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--soft);cursor:pointer;transition:color .12s,background .12s}
.dg-ibtn:hover{color:var(--ink);background:var(--panel2)}
.dg-zoomv{min-width:46px;text-align:center;font:600 11.5px var(--mono);color:var(--ink);padding:0 4px}
.dg-canvas{flex:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 65%),var(--bg);min-height:0}
.dg-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(var(--line2) 1px,transparent 1px);background-size:22px 22px;opacity:.35}
.dg-canvas svg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;user-select:none}
.dg-canvas svg.dg-drag{cursor:grabbing}
.dg-box{stroke-width:1.5;stroke-linejoin:round;transition:filter .15s}
.dg-node{stroke-width:1.5;transition:filter .15s}
.dg-leg{fill:none;stroke:#a49c8c;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:none;transition:opacity .2s}
.dg-lab{font:600 14px var(--sans);fill:#10211a;paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:4px;user-select:none;pointer-events:none}
.dg-inf{font:500 11px var(--sans);fill:#55624d;pointer-events:none}
.dg-selbox{stroke:var(--accent)!important;stroke-width:2.6!important;stroke-dasharray:6 4}
.dg-selnode{stroke:var(--accent)!important;stroke-width:2.6!important;stroke-dasharray:6 4}
.dg-good{stroke:#2fa05c!important;stroke-width:3!important}
.dg-bad{stroke:#d44c40!important;stroke-width:3!important}
.dg-node.dg-highlight,.dg-box.dg-highlight{stroke:var(--accent)!important;stroke-width:3.5!important;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 65%,transparent))}
.dg-node.dg-dim,.dg-box.dg-dim{opacity:.22}
.dg-leg.dg-dim{opacity:.12}
.dg-leg.dg-highlight{stroke:var(--accent)!important;stroke-width:3!important}
.dg-info{flex:none;font:400 13px/1.55 var(--sans);color:var(--ink);padding:11px 18px;border-top:1px solid var(--line);background:var(--surface);max-height:120px;overflow:auto}
.dg-info b{color:var(--accent);font-weight:600}
@media(max-width:820px){
  .dg-split{grid-template-columns:1fr;grid-template-rows:minmax(0,148px) 1fr}
  .dg-pane{border-right:none;border-bottom:1px solid var(--line)}
  .dg-hero-row{flex-wrap:wrap}
  .dg-topic{min-width:0}
  .dg-export{display:none}
}
.dg-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden}
.dg-scene svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block}
.dg-scene [data-part]{transition:filter .2s}
.dg-canvas .dg-loader{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--bg) 88%,transparent)}
.dg-canvas .dg-loader[hidden]{display:none}
.dg-loader-spin{width:40px;height:40px;border:3px solid color-mix(in srgb,var(--accent) 26%,transparent);border-top-color:var(--accent);border-radius:50%;animation:dgSpin .8s linear infinite}
.dg-loader-msg{font:600 13px var(--sans);color:var(--soft);letter-spacing:.02em;text-align:center;padding:0 16px}
@keyframes dgSpin{to{transform:rotate(360deg)}}
.dg-scene [data-part]:hover{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 60%,transparent))}
/* ============ Whiteboard pages panel ============ */
.wb-page-acts{position:absolute;top:6px;right:6px;display:flex;gap:4px;z-index:2}
.wb-page-ic{width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);background:rgba(8,11,18,.82);color:#fff;font:600 13px/1 var(--sans);cursor:pointer;display:grid;place-items:center;padding:0;backdrop-filter:blur(8px);transition:background .12s,color .12s,border-color .12s,transform .1s}
.wb-page-ic:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-1px)}
.wb-page-ic.danger{color:#ff8a80}
.wb-page-ic.danger:hover{background:var(--err);color:#fff;border-color:var(--err)}
.wb-page-cur{position:absolute;bottom:6px;right:6px;font:600 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);padding:2px 7px;border-radius:99px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent)}
.wb-page-add{width:100%;padding:13px;border:none;background:transparent;color:var(--accent);font:600 12.5px var(--sans);cursor:pointer;border-top:1px solid var(--line);transition:background .15s;letter-spacing:.02em}
.wb-page-add:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.wb-page-card{transition:border-color .15s,transform .12s}
.wb-page-card:hover{border-color:var(--accent);transform:translateY(-1px)}
/* ============ Diagram Save to Library ============ */
.dg-save{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 42%,transparent);color:var(--accent);font-size:11.5px;padding:6px 13px;font-weight:600}
.dg-save:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
/* ============ Reader quick-chat popup ============ */
#rqc{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 32px));z-index:95;box-shadow:var(--shadow)}
#rqc[hidden]{display:none!important}
#rqc .rqc-card{background:var(--surface);border:1px solid var(--line2);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;max-height:min(70vh,520px)}
#rqc .rqc-head{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);font:600 13px var(--sans);color:var(--ink);flex:none}
#rqc .rqc-sub{margin-left:auto;font:600 9.5px var(--mono);color:var(--soft);text-transform:uppercase;letter-spacing:.08em}
#rqc .rqc-head .ibtn{width:28px;height:28px}
#rqc .rqc-msgs{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:90px}
#rqc .rqc-msg{max-width:92%;padding:8px 11px;border-radius:12px;font:14px/1.5 var(--read);white-space:pre-wrap;word-wrap:break-word}
#rqc .rqc-msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
#rqc .rqc-msg.ai{align-self:flex-start;background:var(--panel2);color:var(--ink)}
#rqc .rqc-msg.ai .md p{margin:0 0 .4em}
#rqc .rqc-msg.ai .md p:last-child{margin-bottom:0}
#rqc .rqc-msg.typing{color:var(--soft);font-style:italic}
#rqc .rqc-msg.placeholder{color:var(--soft);text-align:center;font-style:italic;background:none}
#rqc .rqc-msg.err .errline{color:var(--err);font:12px var(--sans)}
#rqc .rqc-in{display:flex;gap:8px;border-top:1px solid var(--line);padding:10px 12px;flex:none}
#rqc .rqc-in input{flex:1;min-width:0;font-size:16px}
@media (max-width:600px){#rqc{right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:calc(100vw - 16px)}}
/* ============ Mobile / iPad polish ============ */
@media (max-width:900px){
  html{touch-action:manipulation}
  .btn{min-height:42px;min-width:44px;padding:10px 15px;font-size:13.5px}
  .btn.sm{min-height:38px;min-width:0;padding:8px 13px}
  .ibtn,.btn.icon{width:44px;height:44px;min-width:44px;min-height:44px}
  .ibtn svg,.btn.icon svg{width:19px;height:19px}
  input,select,textarea{font-size:16px!important}
  .tool-head{min-height:52px;padding:8px 12px}
  #view-study .topbar{min-height:52px;padding:0 10px}
  .vbar{min-height:50px;padding:8px 10px}
  .rail .rail-group{flex:1;overflow-y:auto}
  .rail button{min-height:44px;padding:12px 0}
  .rail button span{font-size:7.5px}
  .composer textarea{font-size:16px}
  .msgs .msg{font-size:15.5px}
  .chat-wrap .msgs{padding:14px 12px}
  .twrap{max-width:100%}
  .dg-hero-row{gap:6px}
  .dg-toolbar{padding:8px 10px;gap:7px}
  .dg-toolbar>*{flex:none}
  .dg-pane-head{padding:10px 12px}
  .dg-rows{padding:4px 6px}
  .tabs-scroll,.ivbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .msg-actions{flex-wrap:wrap}
  .guide-wrap{padding:20px 16px 60px}
}
@media (min-width:901px) and (max-width:1280px) and (pointer:coarse){
  .rail{width:72px}
  .dg-split{grid-template-columns:220px 1fr}
}
@media (max-width:820px){.dg-save{font-size:11px;padding:5px 10px}}
/* ===== Whiteboard AI chat panel ===== */
.wb-chat-fab{position:absolute;right:18px;bottom:64px;z-index:7;width:44px;height:44px;border-radius:50%;border:1px solid var(--border-s);background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,color .15s,transform .12s;touch-action:none;user-select:none}
.wb-chat-fab:active{cursor:grabbing}
.wb-chat-fab.dragging{transform:scale(1.06);box-shadow:0 10px 28px -6px rgba(0,0,0,.55)}
.wb-chat.dragging{box-shadow:0 24px 60px -10px rgba(0,0,0,.55)}
.wb-chat .wb-chat-head{cursor:grab;user-select:none;touch-action:none}
.wb-chat.dragging .wb-chat-head{cursor:grabbing}
body.wb-chat-dragging,body.wb-chat-dragging *{user-select:none!important}
body.wb-chat-dragging .wb-chat-fab,body.wb-chat-dragging .wb-chat{transition:none!important}
.wb-chat-fab:hover{border-color:var(--accent);color:var(--accent)}
.wb-chat-fab svg{width:20px;height:20px}
.wb-chat{position:absolute;right:18px;bottom:64px;z-index:9;width:min(380px,calc(100% - 36px));max-height:min(560px,calc(100% - 80px));background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.wb-chat[hidden]{display:none!important}
.wb-chat-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font:600 13px var(--sans);color:var(--ink);flex:none}
.wb-chat-head span{flex:1}
.wb-chat-head button{background:none;border:1px solid var(--line);color:var(--soft);border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:14px;line-height:1;padding:0}
.wb-chat-head button:hover{color:var(--accent);border-color:var(--accent)}
.wb-chat-msgs{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.wb-chat-msg{max-width:92%;padding:8px 11px;border-radius:12px;font:13.5px/1.5 var(--read);white-space:pre-wrap;word-wrap:break-word}
.wb-chat-msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.wb-chat-msg.ai{align-self:flex-start;background:var(--panel2);color:var(--ink)}
.wb-chat-msg.ai.typing{color:var(--soft);font-style:italic}
.wb-chat-msg.ai .md p:first-child{margin-top:0}
.wb-chat-msg.ai .md p:last-child{margin-bottom:0}
.wb-chat-msg.ai .md pre{margin:.4em 0}
.wb-chat-msg.err .errline{color:var(--err);font:12px var(--sans)}
.wb-chat-in{display:flex;gap:8px;border-top:1px solid var(--line);padding:10px 12px;flex:none}
.wb-chat-in input{flex:1;min-width:0;font-size:14px}
@media(max-width:600px){
  .wb-chat{right:8px;left:8px;width:auto;bottom:56px}
  .wb-chat-fab{right:12px;bottom:56px}
}
/* ============ P9 — Micro-interactions, flat surfaces, misc ============ */

.view.active{animation:viewInPremium var(--dur-base) var(--ease-out)}
@keyframes viewInPremium{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ============ Tool-card stagger — first impressions matter ============ */
#view-home .grid > .tool-card:nth-child(1){animation:cardIn var(--dur-slow) var(--ease-out) both}
#view-home .grid > .tool-card:nth-child(2){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.04s}
#view-home .grid > .tool-card:nth-child(3){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.08s}
#view-home .grid > .tool-card:nth-child(4){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.12s}
#view-home .grid > .tool-card:nth-child(5){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.16s}
#view-home .grid > .tool-card:nth-child(6){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.2s}
#view-home .grid > .tool-card:nth-child(7){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.24s}
#view-home .grid > .tool-card:nth-child(8){animation:cardIn var(--dur-slow) var(--ease-out) both;animation-delay:.28s}
@keyframes cardIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}

/* ============ Focus shapes ============ */
.btn:focus-visible,.ibtn:focus-visible{
  box-shadow:var(--ring);
  border-color:transparent;
}
.btn.primary:focus-visible{
  box-shadow:var(--ring);
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  border-color:var(--accent);
  box-shadow:var(--ring);
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ============ Shimmer ============ */
.shimmer{
  position:relative;
  overflow:hidden;
}
.shimmer::before{
  content:'';
  position:absolute;
  top:0;left:-150%;
  width:120%;height:100%;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);
  transform:skewX(-18deg);
  animation:shimmerSweep 2.8s var(--ease-in-out) infinite;
  pointer-events:none;
}
@keyframes shimmerSweep{
  0%{left:-150%}
  55%,100%{left:150%}
}

/* ============ Overscroll ============ */
.rbody,.msgs,.vbody,.tool-body,.guide-wrap,.dash-grid,.library-grid,.ts-list,.cal-side,.chat-nav-list,.dg-rows,.htmlview-wrap{
  overscroll-behavior:contain;
}

/* ============ Primitives ============ */
kbd{
  font:600 var(--fs-2xs) var(--mono);
  border:1px solid var(--border-s);
  border-radius:var(--r-xs);
  background:var(--surface-2);
  color:var(--soft);
  padding:2px 6px;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
hr{border:none;border-top:1px solid var(--border);margin:10px 0}
a,a:visited{color:var(--accent-h);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}

/* ============ Drop zones ============ */
.drop{
  transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);
}
.drop.serif{
  font-family:var(--serif);
  font-style:italic;
}
.drop svg{color:var(--accent)}
.drop.dragover{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:var(--ring-soft),var(--shadow-inset);
}

/* ============ Empty ============ */
.empty h2{
  font-size:var(--fs-2xl);
  font-weight:500;
  letter-spacing:-.02em;
}
.empty p{
  color:var(--muted);
  max-width:46ch;
  margin-left:auto;margin-right:auto;
  font-size:var(--fs-sm);
  font-weight:400;
  line-height:1.55;
}

/* ============ Rail ============ */
.rail{
  width:52px;
  display:flex;flex-direction:column;align-items:center;
  gap:8px;padding:10px 0;
  border-right:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
}
.rail button{
  position:relative;
  width:38px;height:38px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur-fast) var(--ease-out);
}
.rail button:hover{
  color:var(--fg);
  background:var(--surface-2);
  border-color:var(--border);
  transform:translateX(1px);
}
.rail button.active,
.rail button.on{
  background:linear-gradient(180deg,var(--accent-h),var(--accent));
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 6px 16px -4px var(--accent-glow);
}
.rail button[disabled]{opacity:.35;pointer-events:none}
.rail button svg{width:17px;height:17px}
.rail button.on::before{
  content:'';
  position:absolute;
  left:-10px;top:50%;
  transform:translateY(-50%);
  width:3px;height:16px;
  border-radius:99px;
  background:var(--accent);
}

/* ============ Bars ============ */
.vbar,.tool-head{
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--border);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vbar,.tool-head{background:var(--surface)}
}

/* ============ P10 — Mobile + final polish ============ */

@media (max-width:720px){
  .hero-title{font-size:clamp(40px,14vw,56px)}
  .hero-sub{font-size:var(--fs-base);margin-top:12px}
  .hero-note{font-size:var(--fs-2xs);letter-spacing:.12em;margin-top:16px}
  .tool-card{padding:13px}
  .tool-card p{font-size:var(--fs-xs)}
  .tool-card .tc-icon{
    box-shadow:0 4px 10px -4px rgba(0,0,0,.4);
  }
  .tool-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -18px color-mix(in srgb,var(--accent) 40%,transparent);
  }
  .home-search{margin-top:28px;padding:11px 12px 11px 14px}
  .btn:hover{transform:none}
  .ibtn:hover{transform:none}
  .btn:active{transform:translateY(.5px) scale(.985)}
  .ibtn:active{transform:scale(.94)}
  .toast{bottom:16px;width:calc(100vw - 32px);max-width:none;font-size:var(--fs-sm)}
  dialog{width:min(560px,96vw);max-height:92vh;border-radius:var(--r-lg)}
  .dlg-head{padding:16px 18px 12px}
  .dlg-title{font-size:19px}
  .dlg-body{padding:14px 16px;gap:10px}
  .dlg-foot{padding:14px 16px}
}

@media (max-width:400px){
  .hero-title{font-size:clamp(34px,13vw,44px)}
  .tool-card h3{font-size:var(--fs-base)}
  .tool-card .tc-icon{width:36px;height:36px}
}

/* ============ View-chrome entrance ============ */
.view.active > header,
.view.active > .topbar,
.view.active > .vbar{
  animation:chromeIn var(--dur-base) var(--ease-out);
}
@keyframes chromeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
.view.active > .tool-body,
.view.active > .vbody,
.view.active > .guide-wrap{
  animation:contentIn var(--dur-base) var(--ease-out);
}
@keyframes contentIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ============ Text rendering ============ */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ============ Shared form controls inherit type ============ */
input,textarea,select,button{
  font-family:inherit;
  font-feature-settings:inherit;
}

/* ============ Model selector polish ============ */
.ai-model-select{
  max-width:none;
  font-size:var(--fs-sm);
  padding:7px 12px;
  border-radius:var(--r-md);
  background:var(--surface-2);
  border:1px solid var(--border-s);
  color:var(--fg);
  cursor:pointer;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.ai-model-select:hover:not(:focus){border-color:var(--border-strong)}
[data-skin="paper"] .ai-model-select,
[data-skin="comfy"] .ai-model-select,
[data-skin="contrast"] .ai-model-select{
  background:var(--surface);
  border-color:var(--border);
}
.ai-model-select:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:var(--ring-soft);
}

/* ============================================================
   Light skins (paper, comfy, contrast): solid chrome, no blur.
   The glassmorphic top bar, tool-head, vbar and composer were desaturating
   warm cream into grey because backdrop-filter's saturate(180%) pushed
   the warm tones toward neutral. Solid warm cream fixes it and looks
   identical in intent — a paper theme should not have translucent chrome.
   ============================================================ */
[data-skin="paper"] .top-nav,
[data-skin="comfy"] .top-nav,
[data-skin="contrast"] .top-nav{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 1px 0 var(--border) inset;
}
[data-skin="paper"] .tool-head,
[data-skin="comfy"] .tool-head,
[data-skin="contrast"] .tool-head,
[data-skin="paper"] .vbar,
[data-skin="comfy"] .vbar,
[data-skin="contrast"] .vbar{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-skin="paper"] .rail,
[data-skin="comfy"] .rail,
[data-skin="contrast"] .rail{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-skin="paper"] .composer,
[data-skin="comfy"] .composer,
[data-skin="contrast"] .composer{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-skin="paper"] .home-search,
[data-skin="comfy"] .home-search,
[data-skin="contrast"] .home-search{
  background:var(--surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-skin="paper"] .chat-nav-shell,
[data-skin="comfy"] .chat-nav-shell,
[data-skin="contrast"] .chat-nav-shell{
  background:var(--surface-2);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
[data-skin="paper"] .tool-card,
[data-skin="comfy"] .tool-card,
[data-skin="contrast"] .tool-card{
  background:var(--surface-2);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Whiteboard & any tool-head: keep the icon buttons warm-outlined in
   paper / comfy — the default .ibtn border-strong hover was leaking
   rgba(255,255,255,.2) which showed as a cold grey ring on cream. */
[data-skin="paper"] .tool-head .ibtn,
[data-skin="comfy"] .tool-head .ibtn,
[data-skin="contrast"] .tool-head .ibtn{
  background:transparent;
  border-color:color-mix(in srgb,var(--border) 140%,var(--fg));
  color:var(--soft);
  box-shadow:none;
}
[data-skin="paper"] .tool-head .ibtn:hover,
[data-skin="comfy"] .tool-head .ibtn:hover,
[data-skin="contrast"] .tool-head .ibtn:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  color:var(--accent);
  box-shadow:none;
}
[data-skin="paper"] .tool-head .ibtn.active,
[data-skin="comfy"] .tool-head .ibtn.active,
[data-skin="contrast"] .tool-head .ibtn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* The whiteboard's clear/delete button in the danger state — keep it clearly
   red-outlined rather than grey. */
[data-skin="paper"] .tool-head .ibtn.danger,
[data-skin="comfy"] .tool-head .ibtn.danger,
[data-skin="contrast"] .tool-head .ibtn.danger{
  border-color:color-mix(in srgb,var(--err) 55%,var(--border));
  color:var(--err);
}

/* ============================================================
   PAPER / COMFY / CONTRAST — COMPREHENSIVE LIGHT-SKIN FIX
   ------------------------------------------------------------
   Three different leaks were greying the entire UI in the light
   aesthetic modes, not just the whiteboard:

     1. Missing tokens. --surface-4, --border-strong, --hairline,
        --ring, --ring-soft, --shadow-*, --accent-glow were never
        redefined per skin, so the dark-theme values leaked through.
        Every hovered button showed an invisible white border; every
        focused input showed a pink-tinted ring; every shadow was
        cold black.

     2. backdrop-filter:saturate(180%). On warm cream surfaces this
        filter pushes the colour toward neutral grey. Every element
        that used it — top nav, vbar, tool-head, composer, popovers,
        dialog, toast, diagram legend, task timer, home search, chat
        rail, tool cards — came out looking like brushed aluminium.

     3. Hardcoded rgba(0,0,0,.0x) tints and hardcoded blue / red /
        green calendar chips that do not respond to the theme.

   This block patches all three at once, on every component in the
   app. It is scoped to the three light skins; noir and midnight
   keep their glassy look untouched.
   ============================================================ */

/* ---- 1. Kill backdrop-filter everywhere on light skins ----
       This single rule removes the desaturation filter from every
       chrome element at once. It also makes light skins faster —
       no per-scroll-frame re-blur. */
[data-skin="paper"] *,
[data-skin="comfy"] *,
[data-skin="contrast"] *{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
/* Explicitly cover the ::backdrop pseudo-element (it is not matched by `*`). */
[data-skin="paper"] dialog::backdrop,
[data-skin="comfy"] dialog::backdrop,
[data-skin="contrast"] dialog::backdrop{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:rgba(35,28,15,.44);
}

/* ---- 2. Solid warm chrome for every translucent surface ---- */
[data-skin="paper"] .top-nav,
[data-skin="comfy"] .top-nav,
[data-skin="contrast"] .top-nav,
[data-skin="paper"] .tool-head,
[data-skin="comfy"] .tool-head,
[data-skin="contrast"] .tool-head,
[data-skin="paper"] .vbar,
[data-skin="comfy"] .vbar,
[data-skin="contrast"] .vbar,
[data-skin="paper"] .rail,
[data-skin="comfy"] .rail,
[data-skin="contrast"] .rail,
[data-skin="paper"] .composer,
[data-skin="comfy"] .composer,
[data-skin="contrast"] .composer,
[data-skin="paper"] .home-search,
[data-skin="comfy"] .home-search,
[data-skin="contrast"] .home-search,
[data-skin="paper"] .chat-nav,
[data-skin="comfy"] .chat-nav,
[data-skin="contrast"] .chat-nav,
[data-skin="paper"] .chat-nav-shell,
[data-skin="comfy"] .chat-nav-shell,
[data-skin="contrast"] .chat-nav-shell,
[data-skin="paper"] .dg-toolbar,
[data-skin="comfy"] .dg-toolbar,
[data-skin="contrast"] .dg-toolbar,
[data-skin="paper"] .dg-info,
[data-skin="comfy"] .dg-info,
[data-skin="contrast"] .dg-info,
[data-skin="paper"] .exam-bar,
[data-skin="comfy"] .exam-bar,
[data-skin="contrast"] .exam-bar,
[data-skin="paper"] .exam-aside,
[data-skin="comfy"] .exam-aside,
[data-skin="contrast"] .exam-aside,
[data-skin="paper"] .notebar,
[data-skin="comfy"] .notebar,
[data-skin="contrast"] .notebar,
[data-skin="paper"] .dg-pane,
[data-skin="comfy"] .dg-pane,
[data-skin="contrast"] .dg-pane,
[data-skin="paper"] .rside,
[data-skin="comfy"] .rside,
[data-skin="contrast"] .rside,
[data-skin="paper"] .nt-pane,
[data-skin="comfy"] .nt-pane,
[data-skin="contrast"] .nt-pane{
  background:var(--surface);
}

/* ---- 3. Black-tinted hover / focus → warm accent tint ---- */
[data-skin="paper"] .ts-item:hover,
[data-skin="comfy"] .ts-item:hover,
[data-skin="contrast"] .ts-item:hover,
[data-skin="paper"] .dash-row:hover,
[data-skin="comfy"] .dash-row:hover,
[data-skin="contrast"] .dash-row:hover,
[data-skin="paper"] .wb-tbl-inline td.hdr,
[data-skin="comfy"] .wb-tbl-inline td.hdr,
[data-skin="paper"] .wb-tbl-editor td.hdr,
[data-skin="comfy"] .wb-tbl-editor td.hdr,
[data-skin="paper"] .wb-tbl-inline td:focus,
[data-skin="comfy"] .wb-tbl-inline td:focus,
[data-skin="paper"] .wb-tbl-inline td.editing,
[data-skin="comfy"] .wb-tbl-inline td.editing,
[data-skin="paper"] .wb-tbl-editor td.editing,
[data-skin="comfy"] .wb-tbl-editor td.editing,
[data-skin="paper"] .wb-tbl-inline td.rg:hover,
[data-skin="comfy"] .wb-tbl-inline td.rg:hover,
[data-skin="paper"] .row-plus:hover,
[data-skin="comfy"] .row-plus:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}

/* ---- 4. Calendar event chips — replace hardcoded blue with warm tokens ---- */
[data-skin="paper"] .cal-cell .cev,
[data-skin="comfy"] .cal-cell .cev,
[data-skin="contrast"] .cal-cell .cev{
  color:var(--ink);
}
[data-skin="paper"] .cal-cell .cev.cev-task,
[data-skin="comfy"] .cal-cell .cev.cev-task{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-left-color:color-mix(in srgb,var(--accent) 65%,transparent);
}
[data-skin="paper"] .cal-cell .cev.cev-red,
[data-skin="comfy"] .cal-cell .cev.cev-red{
  background:color-mix(in srgb,var(--err) 12%,transparent);
  border-left-color:color-mix(in srgb,var(--err) 70%,transparent);
}
[data-skin="paper"] .cal-cell .cev.cev-amber,
[data-skin="comfy"] .cal-cell .cev.cev-amber{
  background:color-mix(in srgb,var(--warn) 14%,transparent);
  border-left-color:color-mix(in srgb,var(--warn) 70%,transparent);
}
[data-skin="paper"] .cal-cell .cev.cev-green,
[data-skin="comfy"] .cal-cell .cev.cev-green{
  background:color-mix(in srgb,var(--ok) 12%,transparent);
  border-left-color:color-mix(in srgb,var(--ok) 65%,transparent);
}
[data-skin="paper"] .cal-side .up-item.urgent,
[data-skin="comfy"] .cal-side .up-item.urgent{
  border-color:color-mix(in srgb,var(--err) 55%,var(--border));
  background:color-mix(in srgb,var(--err) 8%,var(--surface));
}

/* ---- 5. Notebook banner — hue-204 fallback was blue. Neutralise. ---- */
[data-skin="paper"] .nb-banner,
[data-skin="comfy"] .nb-banner,
[data-skin="contrast"] .nb-banner{
  background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  border-color:color-mix(in srgb,var(--accent) 30%,var(--border));
}
[data-skin="paper"] .nb-banner .nb-crumb,
[data-skin="comfy"] .nb-banner .nb-crumb,
[data-skin="paper"] .nb-banner .nb-info,
[data-skin="comfy"] .nb-banner .nb-info{
  color:var(--ink);
  opacity:.9;
}

/* ---- 6. Diagram legend and task timer — remove glassy backdrop ---- */
[data-skin="paper"] .dg-legend,
[data-skin="comfy"] .dg-legend,
[data-skin="contrast"] .dg-legend,
[data-skin="paper"] .ts-timer,
[data-skin="comfy"] .ts-timer,
[data-skin="contrast"] .ts-timer{
  background:var(--surface);
  box-shadow:0 0 0 1px var(--border) inset,0 12px 30px -12px rgba(35,28,15,.3);
}

/* ---- 7. Toast, dialog, popover — solid warm ---- */
[data-skin="paper"] .toast,
[data-skin="comfy"] .toast,
[data-skin="contrast"] .toast{
  background:var(--surface);
  box-shadow:0 0 0 1px var(--border) inset,0 12px 28px -12px rgba(35,28,15,.32);
}
[data-skin="paper"] dialog,
[data-skin="comfy"] dialog,
[data-skin="contrast"] dialog{
  background:var(--surface);
  box-shadow:0 0 0 1px var(--border) inset,0 30px 70px -20px rgba(35,28,15,.42);
}
[data-skin="paper"] .pop,
[data-skin="comfy"] .pop,
[data-skin="contrast"] .pop{
  background:var(--surface);
  box-shadow:0 0 0 1px var(--border) inset,0 12px 30px -12px rgba(35,28,15,.3);
}

/* ---- 8. Icon buttons everywhere — never show the white hover ring ---- */
[data-skin="paper"] .ibtn,
[data-skin="comfy"] .ibtn,
[data-skin="contrast"] .ibtn{
  background:transparent;
  border-color:color-mix(in srgb,var(--border) 140%,var(--fg));
  color:var(--soft);
  box-shadow:none;
}
[data-skin="paper"] .ibtn:hover,
[data-skin="comfy"] .ibtn:hover,
[data-skin="contrast"] .ibtn:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  color:var(--accent);
  box-shadow:none;
}
[data-skin="paper"] .ibtn.active,
[data-skin="comfy"] .ibtn.active,
[data-skin="contrast"] .ibtn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 45%,transparent);
}
[data-skin="paper"] .ibtn.disabled,
[data-skin="comfy"] .ibtn.disabled,
[data-skin="contrast"] .ibtn.disabled{
  opacity:.4;
}

/* ---- 9. Secondary buttons — flat warm, no black inner shadow ---- */
[data-skin="paper"] .btn:not(.primary),
[data-skin="comfy"] .btn:not(.primary),
[data-skin="contrast"] .btn:not(.primary){
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--fg);
  box-shadow:none;
}
[data-skin="paper"] .btn:not(.primary):hover,
[data-skin="comfy"] .btn:not(.primary):hover,
[data-skin="contrast"] .btn:not(.primary):hover{
  background:var(--surface-3);
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  color:var(--accent);
  box-shadow:none;
}
[data-skin="paper"] .btn.danger,
[data-skin="comfy"] .btn.danger,
[data-skin="contrast"] .btn.danger{
  background:transparent;
  border-color:color-mix(in srgb,var(--err) 55%,var(--border));
  color:var(--err);
  box-shadow:none;
}
[data-skin="paper"] .btn.danger:hover,
[data-skin="comfy"] .btn.danger:hover,
[data-skin="contrast"] .btn.danger:hover{
  background:color-mix(in srgb,var(--err) 12%,var(--surface-2));
  border-color:var(--err);
  color:var(--err);
}

/* ---- 10. Chip (AI provider / connection / notebook save) ---- */
[data-skin="paper"] .chip,
[data-skin="comfy"] .chip,
[data-skin="contrast"] .chip{
  background:transparent;
  border-color:color-mix(in srgb,var(--border) 140%,var(--fg));
  color:var(--fg);
  box-shadow:none;
}
[data-skin="paper"] .chip:hover,
[data-skin="comfy"] .chip:hover,
[data-skin="contrast"] .chip:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
}

/* ---- 11. Inputs, textareas, selects — solid warm, warm focus ring ---- */
[data-skin="paper"] input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
[data-skin="comfy"] input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
[data-skin="contrast"] input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),
[data-skin="paper"] textarea,
[data-skin="comfy"] textarea,
[data-skin="contrast"] textarea,
[data-skin="paper"] select,
[data-skin="comfy"] select,
[data-skin="contrast"] select{
  background:var(--surface);
  border-color:var(--border);
  color:var(--fg);
  box-shadow:none;
}
[data-skin="paper"] input:focus,
[data-skin="comfy"] input:focus,
[data-skin="contrast"] input:focus,
[data-skin="paper"] textarea:focus,
[data-skin="comfy"] textarea:focus,
[data-skin="contrast"] textarea:focus,
[data-skin="paper"] select:focus,
[data-skin="comfy"] select:focus,
[data-skin="contrast"] select:focus{
  border-color:var(--accent);
  box-shadow:var(--ring-soft);
}

/* ---- 12. Cards, dashboard tiles, library items, list rows ---- */
[data-skin="paper"] .card,
[data-skin="comfy"] .card,
[data-skin="contrast"] .card,
[data-skin="paper"] .dash-card,
[data-skin="comfy"] .dash-card,
[data-skin="contrast"] .dash-card,
[data-skin="paper"] .library-item,
[data-skin="comfy"] .library-item,
[data-skin="contrast"] .library-item,
[data-skin="paper"] .frow,
[data-skin="comfy"] .frow,
[data-skin="contrast"] .frow,
[data-skin="paper"] .exam-q,
[data-skin="comfy"] .exam-q,
[data-skin="contrast"] .exam-q,
[data-skin="paper"] .exam-cfg,
[data-skin="comfy"] .exam-cfg,
[data-skin="contrast"] .exam-cfg,
[data-skin="paper"] .qz-card,
[data-skin="comfy"] .qz-card,
[data-skin="contrast"] .qz-card,
[data-skin="paper"] .prov,
[data-skin="comfy"] .prov,
[data-skin="contrast"] .prov,
[data-skin="paper"] .flip-face,
[data-skin="comfy"] .flip-face,
[data-skin="contrast"] .flip-face,
[data-skin="paper"] .sp-widget,
[data-skin="comfy"] .sp-widget,
[data-skin="contrast"] .sp-widget,
[data-skin="paper"] .sim-card,
[data-skin="comfy"] .sim-card,
[data-skin="contrast"] .sim-card,
[data-skin="paper"] .cal-side .up-item,
[data-skin="comfy"] .cal-side .up-item,
[data-skin="contrast"] .cal-side .up-item,
[data-skin="paper"] .cal-add-form,
[data-skin="comfy"] .cal-add-form,
[data-skin="contrast"] .cal-add-form,
[data-skin="paper"] .cal-cell,
[data-skin="comfy"] .cal-cell,
[data-skin="contrast"] .cal-cell,
[data-skin="paper"] .cal-dow,
[data-skin="comfy"] .cal-dow,
[data-skin="contrast"] .cal-dow,
[data-skin="paper"] .wb-pop,
[data-skin="comfy"] .wb-pop,
[data-skin="contrast"] .wb-pop,
[data-skin="paper"] .wb-ctx,
[data-skin="comfy"] .wb-ctx,
[data-skin="contrast"] .wb-ctx,
[data-skin="paper"] .wb-chat,
[data-skin="comfy"] .wb-chat,
[data-skin="contrast"] .wb-chat,
[data-skin="paper"] .calc-panel,
[data-skin="comfy"] .calc-panel,
[data-skin="contrast"] .calc-panel{
  background:var(--surface);
  border-color:var(--border);
}
[data-skin="paper"] .cal-cell,
[data-skin="comfy"] .cal-cell,
[data-skin="contrast"] .cal-cell,
[data-skin="paper"] .cal-dow,
[data-skin="comfy"] .cal-dow,
[data-skin="contrast"] .cal-dow{
  background:var(--surface-2);
}

/* ---- 13. Tool cards — hover must be warm, not a grey gradient ---- */
[data-skin="paper"] .tool-card:hover,
[data-skin="comfy"] .tool-card:hover,
[data-skin="contrast"] .tool-card:hover{
  background:var(--surface-3);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--border));
}
[data-skin="paper"] .tool-card .tc-icon,
[data-skin="comfy"] .tool-card .tc-icon,
[data-skin="contrast"] .tool-card .tc-icon{
  background:transparent;
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
}

/* ---- 14. Segmented controls & tab strips ---- */
[data-skin="paper"] .seg button,
[data-skin="comfy"] .seg button,
[data-skin="contrast"] .seg button{
  background:var(--surface-2);
  color:var(--soft);
}
[data-skin="paper"] .seg button.on,
[data-skin="comfy"] .seg button.on,
[data-skin="contrast"] .seg button.on{
  background:var(--accent);
  color:var(--accent-ink);
}
[data-skin="paper"] .rtabs button.on,
[data-skin="comfy"] .rtabs button.on,
[data-skin="contrast"] .rtabs button.on{
  color:var(--accent);
}

/* ---- 15. Chips, tags, badges — warm everywhere ---- */
[data-skin="paper"] .vision-badge,
[data-skin="comfy"] .vision-badge,
[data-skin="contrast"] .vision-badge,
[data-skin="paper"] .qz-tag,
[data-skin="comfy"] .qz-tag,
[data-skin="contrast"] .qz-tag,
[data-skin="paper"] .ts-tag,
[data-skin="comfy"] .ts-tag,
[data-skin="contrast"] .ts-tag{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  color:var(--accent);
}

/* ---- 16. Scrollbars — dark warm thumbs on light skins ---- */
[data-skin="paper"],
[data-skin="comfy"],
[data-skin="contrast"]{
  scrollbar-color:rgba(38,33,26,.24) transparent;
}
[data-skin="paper"] ::-webkit-scrollbar-thumb,
[data-skin="comfy"] ::-webkit-scrollbar-thumb,
[data-skin="contrast"] ::-webkit-scrollbar-thumb{
  background:rgba(38,33,26,.2);
  background-clip:padding-box;
  border:3px solid transparent;
}
[data-skin="paper"] ::-webkit-scrollbar-thumb:hover,
[data-skin="comfy"] ::-webkit-scrollbar-thumb:hover,
[data-skin="contrast"] ::-webkit-scrollbar-thumb:hover{
  background:rgba(38,33,26,.36);
  background-clip:padding-box;
  border-width:2px;
}

/* ---- 17. Net badge — warm cream, warm pulse ring ---- */
[data-skin="paper"] .net-badge,
[data-skin="comfy"] .net-badge,
[data-skin="contrast"] .net-badge{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--soft);
}
[data-skin="paper"] .net-badge:hover,
[data-skin="comfy"] .net-badge:hover,
[data-skin="contrast"] .net-badge:hover{
  border-color:var(--accent);
  color:var(--accent);
}

/* ---- 18. Home search — warm border, no cool glass ---- */
[data-skin="paper"] .home-search,
[data-skin="comfy"] .home-search,
[data-skin="contrast"] .home-search{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 1px 2px rgba(35,28,15,.06);
}
[data-skin="paper"] .home-search:focus-within,
[data-skin="comfy"] .home-search:focus-within,
[data-skin="contrast"] .home-search:focus-within{
  border-color:var(--accent);
  box-shadow:var(--ring-soft);
}

/* ---- 19. Composer / chat input ---- */
[data-skin="paper"] #chatIn,
[data-skin="comfy"] #chatIn,
[data-skin="contrast"] #chatIn{
  background:var(--surface-2);
  border-color:var(--border);
  box-shadow:none;
}
[data-skin="paper"] #chatIn:focus,
[data-skin="comfy"] #chatIn:focus,
[data-skin="contrast"] #chatIn:focus{
  background:var(--surface);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:var(--ring-soft);
}

/* ---- 20. Rail buttons — outline style, not pill grey ---- */
[data-skin="paper"] .rail button:hover,
[data-skin="comfy"] .rail button:hover,
[data-skin="contrast"] .rail button:hover{
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
  color:var(--accent);
}
[data-skin="paper"] .rail button.on,
[data-skin="comfy"] .rail button.on,
[data-skin="contrast"] .rail button.on{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
}

/* ---- 21. Chat message bubbles ---- */
[data-skin="paper"] .msg.user .bubble,
[data-skin="comfy"] .msg.user .bubble,
[data-skin="contrast"] .msg.user .bubble{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0%,
    color-mix(in srgb,var(--accent) 8%,var(--surface)) 100%);
  border-color:color-mix(in srgb,var(--accent) 24%,var(--border));
}
[data-skin="paper"] .msg.ai .bubble,
[data-skin="comfy"] .msg.ai .bubble,
[data-skin="contrast"] .msg.ai .bubble{
  border-left-color:var(--accent);
}

/* ---- 22. Saved quiz rows, notebook set rows, notes list rows ---- */
[data-skin="paper"] .saved-row,
[data-skin="comfy"] .saved-row,
[data-skin="contrast"] .saved-row,
[data-skin="paper"] .set-row,
[data-skin="comfy"] .set-row,
[data-skin="contrast"] .set-row,
[data-skin="paper"] .notebook-item .lset,
[data-skin="comfy"] .notebook-item .lset,
[data-skin="contrast"] .notebook-item .lset{
  border-color:var(--border);
}
[data-skin="paper"] .notebook-item .lset,
[data-skin="comfy"] .notebook-item .lset,
[data-skin="contrast"] .notebook-item .lset{
  background:var(--surface-2);
}

/* ---- 23. WB table editor — warm header, warm editing highlight ---- */
[data-skin="paper"] .wb-tbl-editor,
[data-skin="comfy"] .wb-tbl-editor,
[data-skin="contrast"] .wb-tbl-editor{
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--border) inset,0 12px 30px -10px rgba(35,28,15,.35);
}
[data-skin="paper"] .wb-tbl-editor th,
[data-skin="comfy"] .wb-tbl-editor th,
[data-skin="contrast"] .wb-tbl-editor th{
  background:color-mix(in srgb,var(--accent) 8%,var(--surface-2));
  color:var(--soft);
}
[data-skin="paper"] .tbl-cell-menu,
[data-skin="comfy"] .tbl-cell-menu,
[data-skin="contrast"] .tbl-cell-menu{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 12px 30px -10px rgba(35,28,15,.35);
}
[data-skin="paper"] .tbl-cell-menu button:hover,
[data-skin="comfy"] .tbl-cell-menu button:hover,
[data-skin="contrast"] .tbl-cell-menu button:hover{
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);
}

/* ---- 24. Colour-scheme guarantee for embedded inputs ---- */
[data-skin="paper"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-skin="comfy"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-skin="contrast"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-skin="paper"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-skin="comfy"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-skin="contrast"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-skin="paper"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-skin="comfy"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-skin="contrast"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(.7) sepia(.3) saturate(2) hue-rotate(-20deg);
}

/* ============ Study rail — stacked icon + label, no overlap ============
   The premium pass compacted the rail to 52px with 38px icon squares,
   which crushed the stacked icon+label buttons into overlapping text.
   Widen just enough for icon + one-line label and let each button size
   to its content. Labels already use nowrap+ellipsis. */
.rail{
  width:88px;
  align-items:stretch;
}
.rail button{
  width:auto;
  height:auto;
  min-height:48px;
  flex-direction:column;
  gap:4px;
  padding:8px 2px;
  border-radius:var(--r-sm);
}
.rail button svg{width:19px;height:19px}
.rail button span{
  max-width:calc(100% - 4px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rail button.on::before{
  left:-10px;
  top:10px;
  bottom:10px;
  height:auto;
  transform:none;
}
.rail button.icon-only{
  gap:0;
  min-height:44px;
  width:calc(100% - 12px);
  margin:4px 6px 8px;
}
@media (max-width:720px){
  .rail{width:80px}
}