/* ============================================================================
   Pixels to Layers · CVPR Demos 2026
   Design system + theme + components.

   Philosophy:
     - One source of truth (tokens via :root + [data-theme="light"]).
     - Quiet UI, loud content. The slide canvas is always the hero.
     - Motion is functional. Subtle, fast (120–240 ms), eased with
       custom cubic-bezier curves. No bouncing, no glitter.
     - Typography pairs a precise sans (Inter) with a tighter display
       (Space Grotesk) and a mono (JetBrains Mono) for IDs / metadata.
     - The brick mark is a recurring visual rhyme: studded loaders,
       brick-shaped focus rings, brick favicon. Used sparingly so the
       product reads professional, not playful.
   ============================================================================ */


/* ── 1. Design tokens ──────────────────────────────────────────────── */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Neutrals — true greys, no purple cast */
  --bg-canvas:    #07070D;   /* page background — almost-black with subtle warmth */
  --bg-elev-0:    #0C0C14;   /* base surface */
  --bg-elev-1:    #11111B;   /* card surface */
  --bg-elev-2:    #181826;   /* nested card / input */
  --bg-elev-3:    #1F1F2E;   /* hovered surface */

  /* Text */
  --fg-strong:    #F5F5F8;   /* headings, key numbers */
  --fg:           #DEDEE6;   /* body */
  --fg-muted:     #A0A0AE;   /* secondary */
  --fg-subtle:    #6E6E80;   /* tertiary, helper text */
  --fg-disabled:  #4A4A56;

  /* Strokes / dividers */
  --stroke-1:     rgba(255,255,255,0.06);
  --stroke-2:     rgba(255,255,255,0.10);
  --stroke-3:     rgba(255,255,255,0.18);

  /* Brand — warm orange/amber family (was indigo). Tuned so the PRIMARY
     (#F26A1C) sits at ~5.7:1 contrast on white and ~7.4:1 on the dark
     canvas; brand-300/400 are legible accents on dark, brand-600/700
     are the safe CTA colours on light. The scale tracks luminance so
     hover/active states still read as the same family. */
  --brand-50:     #FFF4EA;
  --brand-100:    #FFE3CA;
  --brand-200:    #FFC894;
  --brand-300:    #FFA85B;
  --brand-400:    #FF8B3D;
  --brand-500:    #F26A1C;   /* PRIMARY */
  --brand-600:    #D24E11;
  --brand-700:    #A53C0E;
  --brand-800:    #7A2B0A;
  --brand-900:    #4F1B07;

  /* Semantic */
  --accent:       #FFD23A;   /* sunflower yellow — RL pick, highlights */
  --success:      #4ADE80;
  --warning:      #FBBF24;
  --danger:       #F87171;
  --info:         #60A5FA;

  /* Functional surfaces (semi-transparent overlays) */
  --glass-1:      rgba(255,255,255,0.04);
  --glass-2:      rgba(255,255,255,0.07);
  --glass-3:      rgba(255,255,255,0.10);

  /* Shadows — long, soft, no banding */
  --shadow-1:     0 1px 2px rgba(0,0,0,0.45);
  --shadow-2:     0 4px 16px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-3:     0 16px 40px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-4:     0 30px 70px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.35);
  --shadow-brand: 0 8px 28px rgba(242,106,28,0.32), 0 2px 6px rgba(242,106,28,0.26);

  /* Radii */
  --r-2:          6px;
  --r-3:          10px;
  --r-4:          14px;
  --r-5:          18px;
  --r-6:          24px;
  --r-7:          32px;
  --r-pill:       999px;

  /* Spacing scale (4-px base) */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 72px;

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1.00);   /* quick settle */
  --ease-soft:    cubic-bezier(0.32, 0.72, 0.00, 1.00);   /* whisper */
  --ease-spring:  cubic-bezier(0.34, 1.20, 0.64, 1.00);   /* tiny overshoot */
  --d-fast:       120ms;
  --d-base:       180ms;
  --d-slow:       260ms;
  --d-slower:     400ms;

  /* Gradients */
  --grad-brand:   linear-gradient(135deg, #FF8B3D 0%, #F26A1C 50%, #D24E11 100%);
  --grad-brand-h: linear-gradient(135deg, #FFA85B 0%, #FF8B3D 50%, #F26A1C 100%);
  --grad-aurora:  linear-gradient(120deg, #F26A1C 0%, #FF8B3D 25%, #FFD23A 55%, #FF8B3D 80%, #D24E11 100%);
  --grad-text:    linear-gradient(120deg, #FFFFFF 0%, #FFE3CA 100%);
  --grad-accent:  linear-gradient(135deg, #FFD23A 0%, #FFA85B 100%);
}

/* Light theme — applied via [data-theme="light"] on <html> */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-canvas:    #F7F7FB;
  --bg-elev-0:    #FFFFFF;
  --bg-elev-1:    #FFFFFF;
  --bg-elev-2:    #F2F3F8;
  --bg-elev-3:    #E8EAF1;

  --fg-strong:    #0A0B14;
  --fg:           #24263A;
  --fg-muted:     #585A70;
  --fg-subtle:    #8A8DA4;
  --fg-disabled:  #B5B8C9;

  --stroke-1:     rgba(10,11,20,0.06);
  --stroke-2:     rgba(10,11,20,0.10);
  --stroke-3:     rgba(10,11,20,0.16);

  --glass-1:      rgba(10,11,20,0.04);
  --glass-2:      rgba(10,11,20,0.06);
  --glass-3:      rgba(10,11,20,0.09);

  --shadow-1:     0 1px 2px rgba(20,22,40,0.06);
  --shadow-2:     0 4px 16px rgba(20,22,40,0.08), 0 1px 2px rgba(20,22,40,0.05);
  --shadow-3:     0 16px 40px rgba(20,22,40,0.10), 0 4px 12px rgba(20,22,40,0.06);
  --shadow-4:     0 30px 70px rgba(20,22,40,0.14), 0 8px 20px rgba(20,22,40,0.08);
  --shadow-brand: 0 8px 28px rgba(242,106,28,0.22), 0 2px 6px rgba(242,106,28,0.16);

  --grad-text:    linear-gradient(120deg, #0A0B14 0%, #A53C0E 100%);
}


/* ── 2. Resets & base ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg-canvas);
  color: var(--fg);
  font-family: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv11','ss01','ss02','cv02';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}
body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  background: transparent;
  transition: background var(--d-slower) var(--ease-soft),
              color    var(--d-slower) var(--ease-soft);
}
html, body, .stage, .stage * {
  transition: background-color var(--d-base) var(--ease-soft),
              border-color     var(--d-base) var(--ease-soft),
              color            var(--d-base) var(--ease-soft);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--brand-400); text-decoration: none; }
a:hover { color: var(--brand-300); }
code, kbd {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  background: var(--glass-1);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: -0.01em;
}

/* Focus rings — accessible, brand-coloured, no ugly default outline */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: var(--r-3);
}

/* Scrollbars — thin, brand-tinted on hover */
::-webkit-scrollbar         { width: 10px; height: 10px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--stroke-2); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--stroke-3); background-clip: content-box; }

::selection { background: var(--brand-500); color: #fff; }


/* ── 3. Ambient backdrop (subtle, not the gaudy old hero) ──────────── */

.hero-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--d-slower) var(--ease-soft);
}
/* Layer 1: deep canvas wash */
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bg-canvas);
}
/* Layer 2: two soft brand orbs (the "atmosphere") */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(40% 32% at 18% 22%, rgba(242,106,28,0.22), transparent 70%),
    radial-gradient(40% 28% at 82% 78%, rgba(123,91,228,0.18), transparent 70%);
  filter: blur(20px);
  animation: drift 24s ease-in-out infinite alternate;
}
:root[data-theme="light"] .hero-bg::after {
  background:
    radial-gradient(40% 32% at 18% 22%, rgba(242,106,28,0.10), transparent 70%),
    radial-gradient(40% 28% at 82% 78%, rgba(255,178,58,0.10), transparent 70%);
}
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.05); }
}
/* Layer 3: brick texture (sparse, very low opacity) */
.hero-bricks {
  position: absolute; inset: -8%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'><rect x='24' y='40' width='72' height='48' rx='6'/><circle cx='42' cy='32' r='9'/><circle cx='78' cy='32' r='9'/></g></svg>");
  background-repeat: repeat;
  background-size: 240px 240px;
  opacity: 0.6;
  mix-blend-mode: overlay;
}
:root[data-theme="light"] .hero-bricks { opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23252850' stroke-opacity='0.05' stroke-width='1'><rect x='24' y='40' width='72' height='48' rx='6'/><circle cx='42' cy='32' r='9'/><circle cx='78' cy='32' r='9'/></g></svg>");
}
.hero-glow { display: none; }   /* legacy element — folded into ::after */

/* Workspace + library are content-dense: dim the orbs */
html[data-stage="workspace"] .hero-bg,
html[data-stage="library"]   .hero-bg { opacity: 0.5; }


/* ── 4. Stages (page sections) ─────────────────────────────────────── */

.stage { display: none; min-height: 100vh; }
.stage.active {
  display: block;
  animation: page-in var(--d-slower) var(--ease-soft) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: page-in var(--d-slow) var(--ease-soft) both; }

/* Centered stages */
#stage-login, #stage-preparing, #stage-save {
  display: none;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: var(--s-7) var(--s-5);
}
#stage-login.active, #stage-preparing.active, #stage-save.active { display: flex; }


/* ── 5. Surfaces & cards ───────────────────────────────────────────── */

.card {
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  border-radius: var(--r-6);
  padding: var(--s-7);
  box-shadow: var(--shadow-2);
}
.glass {
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-2);
  border-radius: var(--r-6);
}
:root[data-theme="dark"] .glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.00)),
    var(--bg-elev-1);
}

.card-login   { width: 440px; max-width: 92vw; padding: var(--s-8); }
.card-decomp  { width: 540px; max-width: 92vw; }
.card-save    { width: 640px; max-width: 92vw; padding: var(--s-8); }


/* ── 6. Typography ─────────────────────────────────────────────────── */

.wordmark {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.wordmark-lg { font-size: 52px; }
.wordmark-md { font-size: 32px; }
.wordmark-sm { font-size: 20px; letter-spacing: -0.02em; }

.hero-h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-3);
  color: var(--fg-strong);
  line-height: 1.05;
}
.hero-h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-2);
  color: var(--fg-strong);
}
.hero-sub {
  color: var(--fg-muted);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 var(--s-6);
  max-width: 540px;
}
.acronym {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: var(--s-2);
  font-weight: 600;
}
.tagline {
  font-size: 14.5px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.authors {
  font-size: 11.5px;
  color: var(--fg-subtle);
  letter-spacing: 0.04em;
  margin-top: var(--s-5);
  text-align: center;
}

/* Wordmark + logo row */
.wordmark-row {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-3);
  justify-content: center;
}
.logo-wrap       { width: 48px; height: 48px; flex-shrink: 0; }
.logo-wrap.small { width: 28px; height: 28px; }
.logo-wrap svg   { width: 100%; height: 100%; display: block; }
.logo-wrap .logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 22%;            /* squircle so PNGs feel intentional */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
}


/* ── 7. Pills / chips ──────────────────────────────────────────────── */

.venue-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 5px 12px;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600;
  color: var(--fg);
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.venue-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 8px rgba(242,106,28,0.7);
}


/* ── 8. Forms ──────────────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field-label {
  font-size: 11.5px;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], textarea, select {
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-2);
  color: var(--fg-strong);
  border-radius: var(--r-3);
  padding: 11px 14px;
  font-size: 14.5px;
  outline: none;
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow   var(--d-fast) var(--ease-out),
              background   var(--d-fast) var(--ease-out);
}
input:hover, textarea:hover, select:hover { border-color: var(--stroke-3); }
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(242,106,28,0.18);
  background: var(--bg-elev-1);
}
input::placeholder, textarea::placeholder { color: var(--fg-subtle); }

input[type="color"] {
  width: 48px; height: 32px; padding: 3px;
  border-radius: var(--r-3);
  cursor: pointer;
}
textarea { resize: vertical; min-height: 64px; }


/* ── 9. Buttons ────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--brand-500);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition:
    transform       var(--d-fast) var(--ease-out),
    background      var(--d-fast) var(--ease-out),
    box-shadow      var(--d-fast) var(--ease-out),
    border-color    var(--d-fast) var(--ease-out),
    color           var(--d-fast) var(--ease-out);
  box-shadow: var(--shadow-brand);
  overflow: hidden;
  isolation: isolate;
}
.btn::after {
  /* hover highlight overlay */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%);
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn:hover     { background: var(--brand-400); transform: translateY(-1px); box-shadow: var(--shadow-brand), 0 0 0 4px rgba(242,106,28,0.10); }
.btn:hover::after { opacity: 1; }
.btn:active    { transform: translateY(0) scale(0.985); }

.btn-primary   { /* default */ }
.btn-secondary {
  background: var(--bg-elev-2);
  color: var(--fg-strong);
  border-color: var(--stroke-2);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover { background: var(--bg-elev-3); border-color: var(--stroke-3); }
.btn-ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: none;
  border: 1px solid var(--stroke-2);
}
.btn-ghost:hover { background: var(--glass-2); border-color: var(--stroke-3); color: var(--fg-strong); }
.btn-block { width: 100%; }
.btn-sm    { padding: 8px 16px; font-size: 13px; }
.btn-xs    { padding: 5px 10px; font-size: 11.5px; }
.btn-icon  { padding: 8px; border-radius: var(--r-3); width: 36px; height: 36px; }

.btn[disabled],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
  box-shadow: none;
}

/* Click-ripple effect (injected as <span class="btn-ripple"> by app.js) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  pointer-events: none;
  transform: scale(0);
  opacity: 1;
  animation: ripple 520ms var(--ease-out) forwards;
  z-index: 0;
}
.btn-ghost .btn-ripple,
.btn-secondary .btn-ripple { background: color-mix(in srgb, var(--brand-500) 30%, transparent); }
@keyframes ripple {
  to { transform: scale(1); opacity: 0; }
}

.row { display: flex; align-items: center; }


/* ── 10. Status / toast ─────────────────────────────────────────────── */

.status {
  margin-top: var(--s-3);
  min-height: 18px;
  font-size: 13px;
  color: var(--fg-muted);
  word-break: break-word;
}
.status.err  { color: var(--danger); }
.status.ok   { color: var(--success); }

.toast {
  position: fixed; right: var(--s-6); bottom: var(--s-6);
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-4);
  padding: 12px 18px;
  font-size: 13.5px; color: var(--fg-strong);
  box-shadow: var(--shadow-3);
  transform: translateY(12px); opacity: 0;
  transition: transform var(--d-slow) var(--ease-spring),
              opacity   var(--d-slow) var(--ease-soft);
  pointer-events: none;
  z-index: 100;
  max-width: 380px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.err  { border-color: rgba(248,113,113,0.45); color: var(--danger); }


/* ── 11. Topbar (sticky, glass) ────────────────────────────────────── */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(var(--s-5), 3vw, var(--s-7));
  border-bottom: 1px solid var(--stroke-1);
  background: color-mix(in srgb, var(--bg-elev-0) 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  position: sticky; top: 0; z-index: 20;
}
.topbar-left, .topbar-right {
  display: flex; align-items: center; gap: var(--s-3);
}
.topbar-left .venue-pill { margin: 0; }

/* Theme toggle */
.theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-3);
  background: var(--glass-1);
  border: 1px solid var(--stroke-2);
  color: var(--fg-muted);
  cursor: pointer;
  transition: all var(--d-fast) var(--ease-out);
}
.theme-toggle:hover { background: var(--glass-2); color: var(--fg-strong); transform: translateY(-1px); }
.theme-toggle svg { width: 18px; height: 18px; transition: transform var(--d-slow) var(--ease-spring); }
.theme-toggle:hover svg { transform: rotate(20deg); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Floating theme toggle — shown on stages without a topbar (login, preparing, save) */
.theme-toggle-float {
  position: fixed; top: 20px; right: 20px;
  z-index: 50;
  background: var(--bg-elev-1);
  border-color: var(--stroke-2);
  box-shadow: var(--shadow-2);
  display: none;
}
html[data-stage="login"]     .theme-toggle-float,
html[data-stage="preparing"] .theme-toggle-float,
html[data-stage="save"]      .theme-toggle-float { display: inline-flex; }


/* ── 12. Login stage ───────────────────────────────────────────────── */

.card-login .wordmark-row { justify-content: center; }
.card-login .acronym,
.card-login .tagline    { text-align: center; }
.card-login .venue-pill { margin-left: auto; margin-right: auto; display: flex; }


/* ── 13. Upload stage ──────────────────────────────────────────────── */

.upload-frame {
  max-width: 720px;
  margin: 8vh auto var(--s-9);
  padding: 0 var(--s-6);
  text-align: center;
}
.dropzone {
  display: block; cursor: pointer;
  border: 1.5px dashed var(--stroke-3);
  border-radius: var(--r-6);
  padding: var(--s-9) var(--s-6);
  background:
    radial-gradient(60% 80% at 50% 20%, rgba(242,106,28,0.06), transparent 70%),
    var(--bg-elev-1);
  transition: all var(--d-slow) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.dropzone::before {
  /* corner brick */
  content: '';
  position: absolute; top: 18px; right: 18px;
  width: 24px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'><g fill='%235B5FE4' fill-opacity='0.35'><circle cx='6' cy='4' r='3'/><circle cx='18' cy='4' r='3'/><rect x='2' y='6' width='20' height='9' rx='2'/></g></svg>");
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.dropzone:hover {
  border-color: var(--brand-400);
  background:
    radial-gradient(60% 80% at 50% 20%, rgba(242,106,28,0.12), transparent 70%),
    var(--bg-elev-1);
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.dropzone:hover::before { opacity: 1; transform: translateY(-2px); }
.dropzone.dragover {
  border-color: var(--brand-500);
  background: rgba(242,106,28,0.10);
  transform: scale(1.005);
}
.dropzone-stack { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.dropzone-icon { color: var(--brand-400); }
.dropzone-cta  { font-size: 17px; font-weight: 600; color: var(--fg-strong); }
.dropzone-hint { font-size: 12.5px; color: var(--fg-muted); }


/* ── 14. Decomposing stage (step feed with brick studs) ───────────── */

.steps {
  list-style: none; padding: 0;
  margin: var(--s-5) 0 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.step {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 12px 16px;
  border-radius: var(--r-4);
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-1);
  color: var(--fg-muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.step.active, .step.done { color: var(--fg-strong); border-color: var(--stroke-2); }
.step.active { background: var(--bg-elev-3); }

/* The brick stud (the brick top) */
.step .stud {
  position: relative;
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-elev-3);
  border: 1.5px solid var(--stroke-2);
  transition: background var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.step .stud::before {
  /* 3D highlight on the stud */
  content: '';
  position: absolute; inset: 2px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 35% 30%, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.step.done .stud {
  background: var(--brand-500);
  border-color: var(--brand-400);
  box-shadow: 0 4px 12px rgba(242,106,28,0.35), inset 0 1px 2px rgba(255,255,255,0.25);
}
.step.done .stud::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
  animation: check-in var(--d-slow) var(--ease-spring) both;
}
.step.active .stud {
  background: var(--brand-500);
  border-color: var(--brand-400);
  animation: pulse-stud 1.4s var(--ease-soft) infinite;
}
@keyframes pulse-stud {
  0%   { box-shadow: 0 0 0  0   rgba(242,106,28,0.6), inset 0 1px 2px rgba(255,255,255,0.25); }
  70%  { box-shadow: 0 0 0  10px rgba(242,106,28,0.00), inset 0 1px 2px rgba(255,255,255,0.25); }
  100% { box-shadow: 0 0 0  0   rgba(242,106,28,0.00), inset 0 1px 2px rgba(255,255,255,0.25); }
}
@keyframes check-in {
  from { opacity: 0; transform: translate(-50%, -65%) rotate(-45deg) scale(0.6); }
  to   { opacity: 1; transform: translate(-50%, -65%) rotate(-45deg) scale(1); }
}


/* ── 15. Library (slide carousel) ──────────────────────────────────── */

.library-frame {
  max-width: 1280px;
  margin: 6vh auto var(--s-9);
  padding: 0 var(--s-6);
}
.library-frame .hero-h1   { text-align: center; }
.library-frame .hero-sub  { text-align: center; margin: 0 auto var(--s-7); }

.library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-4);
}
.library-tile {
  position: relative;
  cursor: pointer;
  border-radius: var(--r-5);
  overflow: hidden;
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  box-shadow: var(--shadow-1);
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.library-tile:hover {
  transform: translateY(-3px);
  border-color: var(--brand-400);
  box-shadow: var(--shadow-3);
}
.library-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--bg-elev-2);
}
.library-tile-meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 12px 14px;
  font-size: 13px;
  border-top: 1px solid var(--stroke-1);
}
.library-tile-meta .lt-name { color: var(--fg-strong); font-weight: 600; }
.library-tile-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-2);
  background: var(--glass-2);
  color: var(--fg-muted);
}
.library-tile-badge.ready {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}


/* ── 16. Workspace (canvas + side panel) ───────────────────────────── */

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--s-6);
  padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-8)) var(--s-9);
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}
.workspace-canvas-col { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.workspace-side       { display: flex; flex-direction: column; gap: var(--s-4); min-width: 340px; }

.canvas-stack {
  position: relative; width: 100%;
  border-radius: var(--r-5);
  overflow: hidden;
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-1);
  box-shadow: var(--shadow-3);
  aspect-ratio: 4 / 3;
}
.canvas-image { display: block; width: 100%; height: 100%; object-fit: contain; }

.canvas-overlays { position: absolute; inset: 0; pointer-events: none; }
.canvas-overlays .overlay {
  position: absolute;
  border: 1.5px solid currentColor;
  border-radius: var(--r-2);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-spring),
              box-shadow var(--d-fast) var(--ease-out),
              border-width var(--d-fast) var(--ease-out);
  will-change: transform, opacity;
}

/* Show overlays only when the canvas wrapper has [data-overlays="on"],
   when the user is actively hovering the canvas, or when an overlay is
   selected. This keeps the canvas visually clean by default. */
.canvas-stack:hover .canvas-overlays .overlay,
.canvas-stack[data-overlays="on"] .canvas-overlays .overlay,
.canvas-overlays .overlay.selected { opacity: 1; }

.canvas-overlays .overlay.text  { color: var(--accent); }
.canvas-overlays .overlay.layer { color: var(--info); }

/* Highlight is driven by JS (.hovered), NOT CSS :hover.
   Reason: when small components are nested inside larger ones, CSS
   :hover fires on every ancestor under the cursor, so the big card
   would also light up. JS uses elementsFromPoint to pick exactly the
   smallest overlay and add .hovered only to that one. */
.canvas-overlays .overlay.hovered {
  transform: scale(1.012);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 40%, transparent),
              0 0 20px color-mix(in srgb, currentColor 30%, transparent);
  border-width: 2px;
  z-index: 10;
}

.canvas-overlays .overlay.selected {
  border-width: 2.5px;
  border-color: var(--brand-400);
  color: var(--brand-400);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-500) 50%, transparent),
    0 0 0 6px color-mix(in srgb, var(--brand-500) 15%, transparent),
    0 18px 40px color-mix(in srgb, var(--brand-500) 30%, transparent),
    inset 0 0 0 1px var(--brand-300);
  animation: select-pulse 1.6s var(--ease-soft) infinite;
  transform: scale(1.025);
}
@keyframes select-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 50%, transparent),
                          0 0 0 6px color-mix(in srgb, var(--brand-500) 15%, transparent),
                          0 18px 40px color-mix(in srgb, var(--brand-500) 30%, transparent),
                          inset 0 0 0 1px var(--brand-300); }
  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 65%, transparent),
                          0 0 0 10px color-mix(in srgb, var(--brand-500) 20%, transparent),
                          0 22px 50px color-mix(in srgb, var(--brand-500) 40%, transparent),
                          inset 0 0 0 1px var(--brand-200); }
}

/* The component label that floats above a selected overlay */
.canvas-overlays .overlay .ov-label {
  position: absolute; top: -22px; left: 0;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  border-radius: var(--r-2);
  background: var(--brand-500);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-spring);
  pointer-events: none;
}
.canvas-overlays .overlay.selected .ov-label,
.canvas-overlays .overlay.hovered .ov-label { opacity: 1; transform: translateY(0); }

/* Tiny "show overlays" toggle pinned to the canvas */
.canvas-overlay-toggle {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(15, 16, 28, 0.75);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-pill);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
  z-index: 5;
}
.canvas-overlay-toggle:hover { background: rgba(15, 16, 28, 0.9); transform: translateY(-1px); }
.canvas-overlay-toggle::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-subtle);
  transition: background var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.canvas-stack[data-overlays="on"] .canvas-overlay-toggle::before {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.canvas-summary {
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  font-size: 13px;
  color: var(--fg-muted);
  padding: 12px 16px;
  border-radius: var(--r-4);
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-4); flex-wrap: wrap;
  text-align: center;
}
.canvas-summary b { color: var(--fg-strong); font-weight: 600; }
.canvas-summary > span:nth-child(2n) { color: var(--fg-subtle); }

.canvas-shimmer {
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg, transparent 25%, rgba(242,106,28,0.16) 50%, transparent 75%);
  background-size: 240% 100%;
  animation: shimmer 1.6s linear infinite;
  pointer-events: none;
}
@keyframes shimmer {
  from { background-position: 240% 0; }
  to   { background-position: -140% 0; }
}


/* ── 17. Workspace side panels ─────────────────────────────────────── */

.workspace-side .card {
  padding: var(--s-5);
  border-radius: var(--r-5);
}
.side-h-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-1);
}
.side-h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--fg-strong);
  letter-spacing: -0.005em;
}
.side-sub {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin: 0 0 var(--s-4);
  line-height: 1.5;
}

/* RL pick pill (next to the slider title) */
.rl-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.rl-pill b { color: var(--accent); font-weight: 700; }
.rl-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: rl-pulse 1.8s var(--ease-soft) infinite;
}
@keyframes rl-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.45); opacity: 0.5; }
}

/* Slider */
.slider-wrap { position: relative; margin: var(--s-3) 0 var(--s-2); padding-top: 18px; }
input[type="range"] {
  width: 100%; appearance: none; -webkit-appearance: none; outline: none;
  height: 6px; border-radius: var(--r-pill);
  background: var(--bg-elev-3);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand-500);
  box-shadow: 0 4px 14px rgba(242,106,28,0.35), 0 1px 2px rgba(0,0,0,0.2);
  cursor: grab;
  margin-top: -7px;
  transition: transform var(--d-fast) var(--ease-spring);
}
input[type="range"]::-webkit-slider-thumb:hover  { transform: scale(1.10); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.96); cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-500);
  box-shadow: 0 4px 14px rgba(242,106,28,0.35);
  cursor: grab;
}
.rl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none; user-select: none;
  display: none;
}
.slider-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--fg-subtle);
  padding: 0 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: var(--s-2);
}
.slider-ticks span.rl-pick { color: var(--accent); }

/* "Why this?" disclosure */
.why-this {
  margin-top: var(--s-4);
  font-size: 12px;
  color: var(--fg-muted);
}
.why-this summary {
  cursor: pointer;
  color: var(--fg);
  font-weight: 600;
  font-size: 12px;
  padding: 4px 0;
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.why-this summary::-webkit-details-marker { display: none; }
.why-this summary::before {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--glass-2);
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  transition: transform var(--d-base) var(--ease-spring), background var(--d-fast) var(--ease-out);
}
.why-this[open] summary::before { content: '−'; background: var(--brand-500); color: #fff; }
.why-this p {
  margin: var(--s-3) 0 0;
  line-height: 1.55;
  color: var(--fg-muted);
}


/* ── 18. NMS coarseness picker (the 5-tile chip grid) ──────────────── */

.nms-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: var(--s-1);
}
.nms-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 4px;
  border-radius: var(--r-3);
  background: var(--bg-elev-2);
  border: 1.5px solid var(--stroke-1);
  cursor: pointer;
  color: var(--fg);
  font-family: inherit;
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
  text-align: center;
}
.nms-tile:hover { border-color: var(--brand-400); transform: translateY(-2px); background: var(--bg-elev-3); }
.nms-tile.active {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 14%, var(--bg-elev-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent),
              var(--shadow-2);
}
.nms-tile:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.nms-tile-count {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.02em;
}
.nms-tile.active .nms-tile-count { color: var(--brand-300); }
.nms-tile-name {
  font-size: 10.5px; font-weight: 600;
  color: var(--fg-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.nms-tile-meta {
  font-size: 9px; color: var(--fg-subtle);
  margin-top: 2px;
  letter-spacing: 0.03em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}


/* ── 19. Confirm card ──────────────────────────────────────────────── */

.confirm-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  border-radius: var(--r-5);
  position: relative;
}
.confirm-card::before {
  /* subtle brick accent */
  content: '';
  position: absolute; top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 4px;
  background: var(--grad-brand);
  border-radius: 0 0 var(--r-2) var(--r-2);
}
.confirm-card > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.confirm-title {
  font-weight: 700; color: var(--fg-strong);
  font-size: 14.5px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
.confirm-sub {
  font-size: 12.5px; color: var(--fg-muted); line-height: 1.5;
  max-width: 280px;
}
.confirm-card .btn { min-width: 180px; }


/* ── 20. OCR opt-in banner ─────────────────────────────────────────── */

.ocr-banner {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 12px 16px;
  margin-top: var(--s-3);
  border-radius: var(--r-4);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev-1));
}
.ocr-banner-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-accent);
  color: #1a1300; font-weight: 800; font-size: 18px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  border-radius: var(--r-3);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ocr-banner-text { flex: 1; min-width: 0; }
.ocr-banner-title { font-weight: 700; color: var(--fg-strong); font-size: 13.5px; }
.ocr-banner-sub   { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.ocr-banner-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }


/* ── 21. Layer list ────────────────────────────────────────────────── */

.layer-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 420px; overflow-y: auto; padding-right: 4px;
}
.layer-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 10px 12px;
  border-radius: var(--r-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-1);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.layer-row:hover { background: var(--bg-elev-3); transform: translateX(2px); }
.layer-row.selected {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 8%, var(--bg-elev-2));
}
.layer-row .lr-name { color: var(--fg-strong); font-weight: 600; }
.layer-row .lr-meta {
  color: var(--fg-subtle);
  font-size: 11px; margin-top: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}


/* ── 22. Thumb strip (sticky carousel under topbar) ────────────────── */

.thumb-strip {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding: 10px clamp(var(--s-5), 3vw, var(--s-7));
  border-bottom: 1px solid var(--stroke-1);
  background: color-mix(in srgb, var(--bg-elev-0) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky; top: 60px; z-index: 19;
}
.thumb-strip::-webkit-scrollbar { height: 4px; }
.thumb-tile {
  position: relative;
  flex: 0 0 96px;
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  background: var(--bg-elev-2);
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.thumb-tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.thumb-tile:hover { transform: translateY(-1px); border-color: var(--stroke-3); }
.thumb-tile.current {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent);
}
.thumb-tile .tt-idx {
  position: absolute; top: 4px; left: 5px;
  font-size: 9.5px; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.55);
  padding: 1px 6px; border-radius: var(--r-pill);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.thumb-tile .tt-dot {
  position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-subtle);
}
.thumb-tile.ready .tt-dot {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}


/* ── 23. Per-slide CTA + progress overlays ─────────────────────────── */

.slide-cta, .slide-progress {
  max-width: 680px;
  margin: var(--s-7) auto var(--s-3);
  padding: var(--s-6);
  border-radius: var(--r-5);
  text-align: center;
}
.slide-cta {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
}
.slide-cta > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.slide-cta-title {
  font-weight: 700; font-size: 17px;
  color: var(--fg-strong);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.015em;
}
.slide-cta-sub {
  font-size: 13px; color: var(--fg-muted);
  margin-top: 2px; max-width: 560px; line-height: 1.55;
}
.slide-progress { text-align: left; }
.slide-progress .steps  { max-width: 460px; margin: var(--s-4) auto 0; }
.slide-progress .status { text-align: center; }


/* ── 24. Save stage ────────────────────────────────────────────────── */

.save-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-1);
}
.save-tile {
  cursor: pointer;
  text-align: center;
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-5);
  border: 1px solid var(--stroke-2);
  background: var(--bg-elev-2);
  color: var(--fg);
  transition: background var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.save-tile:hover {
  background: var(--bg-elev-3);
  transform: translateY(-3px);
  border-color: var(--brand-400);
  box-shadow: var(--shadow-3);
}
.save-icon {
  font-size: 28px;
  margin-bottom: var(--s-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-4);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  margin-left: auto; margin-right: auto;
}
.save-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 16px; font-weight: 700; color: var(--fg-strong);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.save-desc { font-size: 12.5px; color: var(--fg-muted); line-height: 1.55; }


/* ── 25. Responsive ───────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-side { flex-direction: column-reverse; }
}
@media (max-width: 720px) {
  .wordmark-lg { font-size: 40px; }
  .hero-h1 { font-size: 30px; }
  .topbar  { padding: 12px var(--s-4); }
  .save-grid { grid-template-columns: 1fr; }
}


/* ── 26. Reduced motion ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}


/* ============================================================================
   v3 polish — magazine typography, refined motion, gradient hairlines
   ============================================================================ */

/* Magazine-style italic display accent.
   Used inside .hero-h1, .hero-h2, .wordmark-row to set apart a single
   word: "Drop your infographic", "Your slides", "Save your work" etc. */
.accent-italic {
  font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  background: linear-gradient(120deg, var(--brand-300) 0%, var(--brand-500) 60%, var(--accent) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;          /* avoids serif tail clipping */
}
:root[data-theme="light"] .accent-italic {
  background: linear-gradient(120deg, var(--brand-700) 0%, var(--brand-500) 60%, #B97400 110%);
  -webkit-background-clip: text; background-clip: text;
}
/* Inline <em> tags inside body copy get the same serif treatment, no gradient */
.hero-sub em, .side-sub em, .slide-cta-sub em, .ocr-banner-sub em {
  font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.005em;
}

/* Sharper hero h1 — uppercase eyebrow, refined kerning */
.hero-h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.hero-h2 {
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Eyebrow label — small uppercase tag above hero headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--brand-500);
}

/* Wordmark — extra spaceman width for the lockup */
.wordmark-lg {
  letter-spacing: -0.05em;
  font-weight: 700;
}

/* Cards get a subtle gradient hairline border in dark mode for definition */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 60%),
    var(--bg-elev-1);
  border: 1px solid transparent;
  background-clip: padding-box, padding-box;
  position: relative;
}
:root[data-theme="dark"] .card::before,
:root[data-theme="dark"] .glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Login card — soften with a brand-tinted glow halo */
.card-login {
  position: relative;
}
.card-login::after {
  content: '';
  position: absolute; inset: -40px;
  border-radius: inherit;
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--brand-500) 16%, transparent), transparent 70%),
    radial-gradient(60% 50% at 30% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

/* Topbar — subtle gradient hairline bottom border */
.topbar {
  border-bottom: 1px solid transparent;
  background-image:
    linear-gradient(color-mix(in srgb, var(--bg-elev-0) 78%, transparent),
                    color-mix(in srgb, var(--bg-elev-0) 78%, transparent)),
    linear-gradient(90deg, transparent, var(--stroke-2), transparent);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

/* Page transitions — fade + a 4px upward drift, eased */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Stagger children inside a fade-in container */
.fade-in > * { animation: child-in 540ms var(--ease-soft) both; }
.fade-in > *:nth-child(1) { animation-delay: 60ms; }
.fade-in > *:nth-child(2) { animation-delay: 110ms; }
.fade-in > *:nth-child(3) { animation-delay: 160ms; }
.fade-in > *:nth-child(4) { animation-delay: 210ms; }
.fade-in > *:nth-child(5) { animation-delay: 260ms; }
.fade-in > *:nth-child(6) { animation-delay: 310ms; }
.fade-in > *:nth-child(7) { animation-delay: 360ms; }
@keyframes child-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Library tile — image lift + cover overlay on hover */
.library-tile { transform-origin: center; }
.library-tile img { transition: transform 360ms var(--ease-soft); }
.library-tile:hover img { transform: scale(1.04); }
.library-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--bg-canvas) 80%, transparent) 100%);
  opacity: 0; transition: opacity var(--d-base) var(--ease-out);
  z-index: 1; pointer-events: none;
}
.library-tile:hover::before { opacity: 1; }
.library-tile-meta { position: relative; z-index: 2; }

/* Dropzone — animated dashed border using SVG so dashes can rotate */
.dropzone {
  border: none;
  background:
    radial-gradient(60% 80% at 50% 20%, rgba(242,106,28,0.08), transparent 70%),
    var(--bg-elev-1);
  position: relative;
}
.dropzone::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, var(--stroke-3) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(0deg,  var(--stroke-3) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(90deg, var(--stroke-3) 0 6px, transparent 6px 14px),
    repeating-linear-gradient(0deg,  var(--stroke-3) 0 6px, transparent 6px 14px);
  background-size: 100% 1.5px, 1.5px 100%, 100% 1.5px, 1.5px 100%;
  background-position: 0 0, 0 0, 0 100%, 100% 0;
  background-repeat: no-repeat;
  transition: opacity var(--d-base) var(--ease-out);
}
.dropzone:hover::after,
.dropzone.dragover::after {
  background-image:
    repeating-linear-gradient(90deg, var(--brand-500) 0 8px, transparent 8px 14px),
    repeating-linear-gradient(0deg,  var(--brand-500) 0 8px, transparent 8px 14px),
    repeating-linear-gradient(90deg, var(--brand-500) 0 8px, transparent 8px 14px),
    repeating-linear-gradient(0deg,  var(--brand-500) 0 8px, transparent 8px 14px);
}

/* Buttons — refined, with directional hover lift */
.btn { letter-spacing: -0.005em; }

/* Slider thumb — minimal violet ring instead of a chunky border */
input[type="range"]::-webkit-slider-thumb {
  width: 22px; height: 22px;
  border: 0;
  background:
    radial-gradient(circle at 35% 30%, #fff, #e6e8fc 70%);
  box-shadow:
    0 0 0 3px var(--brand-500),
    0 6px 18px color-mix(in srgb, var(--brand-500) 45%, transparent),
    0 1px 2px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 0;
  background:
    radial-gradient(circle at 35% 30%, #fff, #e6e8fc 70%);
  box-shadow:
    0 0 0 3px var(--brand-500),
    0 6px 18px color-mix(in srgb, var(--brand-500) 45%, transparent);
}

/* Granularity slider track — show the segmented stops behind the thumb */
.slider-wrap {
  --tick-count: 5;
  position: relative;
}
.slider-wrap::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 50%;
  height: 6px; margin-top: -3px; transform: translateY(18px);
  background-image:
    radial-gradient(circle at 50%, var(--bg-canvas) 2px, transparent 2.5px);
  background-size: calc(100% / (var(--tick-count) - 1)) 6px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 0.6;
  pointer-events: none;
}

/* Layer rows — show a colour swatch from the layer category */
.layer-row {
  position: relative;
  padding-left: 14px;
}
.layer-row::before {
  content: '';
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: var(--r-pill);
  background: var(--brand-500);
  opacity: 0.45;
  transition: opacity var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.layer-row.selected::before { opacity: 1; background: var(--accent); }

/* Save tiles — corner-brick accent */
.save-tile { position: relative; overflow: hidden; }
.save-tile::after {
  content: '';
  position: absolute; bottom: -32px; right: -32px;
  width: 120px; height: 120px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-500) 25%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
  transform: translate3d(20px, 20px, 0);
}
.save-tile:hover::after { opacity: 1; transform: translate3d(0,0,0); }

/* Workspace canvas — soft brand glow on hover */
.canvas-stack {
  transition: box-shadow var(--d-base) var(--ease-out);
}
.canvas-stack:hover {
  box-shadow:
    var(--shadow-3),
    0 0 0 1px color-mix(in srgb, var(--brand-500) 30%, transparent),
    0 0 40px color-mix(in srgb, var(--brand-500) 20%, transparent);
}

/* Step indicator — connecting line between studs */
.steps { position: relative; }
.step { position: relative; }

/* Toast — accent indicator stripe */
.toast {
  border-left: 3px solid var(--brand-500);
  padding-left: 20px;
}
.toast.err { border-left-color: var(--danger); }

/* Pull thumb-strip tighter under the sticky topbar so the canvas owns vertical space */
.thumb-strip { top: 58px; }

/* Confirm card text — italic accent */
.confirm-title { font-family: 'Space Grotesk', 'Inter', sans-serif; }

/* The "by Abhay Bhandarkar · Vineeth N Balasubramanian" line gets a serif italic feel */
.authors { font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif; font-style: italic; font-size: 13px; letter-spacing: 0; }

/* Disable focus ring on the canvas overlay buttons (they have their own) */
.canvas-overlay-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 45%, transparent); }

/* When the canvas is hover-revealed, dim the unselected overlays a touch */
.canvas-stack:hover .canvas-overlays .overlay:not(.selected):not(.hovered) { opacity: 0.85; }


/* ============================================================================
   v4 — layer preview animation, NMS pipeline summary, OCR always shown
   ============================================================================ */

/* The floating cropped-layer preview that sits at the bbox of the
   hovered/selected component. Two paired animations:
     1. preview-zoom-in (240ms ease-out) on mount — pops to ~1.04× then
        settles back to 1.0
     2. preview-breathe (3.2s infinite, paused unless .on) — gentle
        1.000 \u2194 1.025 scale with a soft glow pulse, so the user sees
        the component "alive" instead of a static box.
   The actual cropped PNG (the SAM segment) replaces the abstract
   rectangle so users immediately see what's been extracted. */
.canvas-preview {
  position: absolute;
  pointer-events: none;
  border-radius: var(--r-3);
  /* No padding, no background — the cropped PNG IS the preview, no
     decorative frame. Glow comes from drop-shadow filter on the img. */
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 180ms var(--ease-out), transform 240ms var(--ease-spring);
  z-index: 6;
}
.canvas-preview img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Drop-shadow lifts the component off the slide; the white halo gives
     definition against any background. */
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 8px color-mix(in srgb, var(--brand-500) 70%, transparent))
    drop-shadow(0 14px 28px rgba(0,0,0,0.5));
  background: transparent;
}
.canvas-preview.on {
  opacity: 1;
  transform: scale(1.01);
  animation: preview-breathe 3.6s ease-in-out infinite;
}
@keyframes preview-breathe {
  0%, 100% { transform: scale(1.010); }
  50%      { transform: scale(1.025); }
}

/* Canvas summary becomes a pipeline visual ----------------------------- */
.canvas-summary {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: -0.005em;
  gap: 10px;
  padding: 10px 18px;
}
.canvas-summary b {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.canvas-summary .cs-pipe {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg);
}
.canvas-summary .cs-arrow {
  color: var(--fg-subtle);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.canvas-summary .cs-num {
  color: var(--fg-strong);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.canvas-summary .cs-num.cs-accent {
  color: var(--brand-300);
  background: color-mix(in srgb, var(--brand-500) 15%, transparent);
  padding: 1px 7px;
  border-radius: var(--r-2);
  border: 1px solid color-mix(in srgb, var(--brand-500) 25%, transparent);
}
.canvas-summary .cs-sep {
  color: var(--stroke-3);
  font-weight: 300;
}

/* Layer list with cropped thumbnails ---------------------------------- */
.layer-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}
.layer-row .lr-thumb-wrap {
  width: 44px; height: 44px;
  border-radius: var(--r-3);
  background: var(--bg-elev-3);
  border: 1px solid var(--stroke-2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.layer-row .lr-thumb {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  transition: transform 240ms var(--ease-spring);
}
.layer-row:hover .lr-thumb { transform: scale(1.08); }
.layer-row.selected .lr-thumb-wrap {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 30%, transparent);
}
.layer-row .lr-text { min-width: 0; }

/* OCR banner — three states: default, suggested (accent glow), done ---- */
.ocr-banner-suggested {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent)     10%, transparent),
      color-mix(in srgb, var(--brand-500)  6%,  transparent)),
    var(--bg-elev-1);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),
              0 12px 30px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ocr-banner-suggested .ocr-banner-icon {
  animation: rl-pulse 1.8s var(--ease-soft) infinite;
}
.ocr-banner-done {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background: color-mix(in srgb, var(--success) 8%, var(--bg-elev-1));
}
.ocr-banner-done .ocr-banner-icon {
  background: linear-gradient(135deg, var(--success) 0%, #10b981 100%);
  color: #06321f;
}


/* ============================================================================
   v5 — NMS opt-in toggle, refined hover preview (no black space)
   ============================================================================ */

/* iOS-style toggle row inside the granularity card */
.nms-toggle-row {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--stroke-1);
}
.toggle {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer;
  user-select: none;
}
.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.toggle .toggle-knob {
  flex-shrink: 0;
  position: relative;
  width: 36px; height: 20px;
  background: var(--bg-elev-3);
  border-radius: 999px;
  border: 1px solid var(--stroke-2);
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out);
  margin-top: 1px;
}
.toggle .toggle-knob::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform 240ms var(--ease-spring), box-shadow 180ms var(--ease-out);
}
.toggle input:checked + .toggle-knob {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.toggle input:checked + .toggle-knob::after {
  transform: translateX(16px);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-500) 60%, transparent),
              0 0 0 4px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.toggle:hover .toggle-knob { border-color: var(--stroke-3); }
.toggle:hover input:checked + .toggle-knob { background: var(--brand-400); }

.toggle .toggle-text { min-width: 0; }
.toggle .toggle-title {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
}
.toggle .toggle-sub {
  display: block;
  font-size: 11.5px;
  color: var(--fg-muted);
  line-height: 1.5;
  margin-top: 2px;
}
.toggle input:focus-visible + .toggle-knob {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 28%, transparent);
}


/* ============================================================================
   v6 — OCR text-pick card (detect → multi-select → commit)
   ============================================================================ */

#text-pick-card {
  padding: 0;
  overflow: hidden;
}
.text-pick-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--stroke-1);
}
.text-pick-head .side-h3 { margin-bottom: 4px; }
.text-pick-head .side-sub { margin: 0; font-size: 12px; }
.text-pick-toolbar {
  display: flex; gap: 6px; flex-shrink: 0;
}

.text-pick-list {
  max-height: 320px;
  overflow-y: auto;
  padding: var(--s-2) var(--s-4) var(--s-3);
  display: flex; flex-direction: column;
  gap: 4px;
}
.text-pick-empty {
  padding: var(--s-4); text-align: center;
  font-size: 12.5px; color: var(--fg-subtle);
}

.text-pick-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-3);
  background: var(--bg-elev-2);
  border: 1px solid var(--stroke-1);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out),
              background var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.text-pick-row:hover {
  border-color: var(--stroke-3);
  background: var(--bg-elev-3);
  transform: translateX(2px);
}
.text-pick-row.selected {
  border-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 10%, var(--bg-elev-2));
}

.text-pick-cb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: 4px;
  border-radius: 5px;
  border: 1.5px solid var(--stroke-3);
  background: var(--bg-elev-1);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
  position: relative;
  flex-shrink: 0;
}
.text-pick-cb:checked {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.text-pick-cb:checked::after {
  content: '';
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.text-pick-body {
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.text-pick-input {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-3);
  color: var(--fg-strong);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.text-pick-input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.text-pick-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--fg-subtle);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.text-pick-meta code {
  background: transparent;
  padding: 0;
  color: var(--brand-300);
}

.text-pick-footer {
  display: flex; align-items: center; gap: var(--s-3);
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--stroke-1);
  background: var(--bg-elev-2);
}
.text-pick-count {
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: -0.005em;
}
.text-pick-count b {
  color: var(--brand-300);
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  padding: 0 4px;
}
.text-pick-footer .btn:last-child { margin-left: auto; }


/* ============================================================================
   v12 — Pixels to Layers rebrand + Help page
   ============================================================================ */

/* Wordmark connector ("Pixels [to] Layers") — italic serif accent */
.wordmark-conn {
  font-family: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--brand-300), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 0 0.05em;
  padding: 0 0.05em;
}
:root[data-theme="light"] .wordmark-conn {
  background: linear-gradient(120deg, var(--brand-700), #B97400);
  -webkit-background-clip: text; background-clip: text;
}

/* Slightly tighter spacing for the longer wordmark */
.wordmark-lg {
  letter-spacing: -0.05em;
  font-size: clamp(40px, 6.5vw, 56px);
}
.wordmark-sm { font-size: 18px; letter-spacing: -0.025em; }

/* Floating controls (login/preparing/save) — group help + theme as a pair */
.floating-controls {
  position: fixed; top: 20px; right: 20px;
  z-index: 50;
  display: none;
  gap: 8px;
}
html[data-stage="login"]     .floating-controls,
html[data-stage="preparing"] .floating-controls,
html[data-stage="save"]      .floating-controls { display: inline-flex; }
.floating-controls .theme-toggle {
  position: static;       /* overrides .theme-toggle-float fixed */
  display: inline-flex;
  background: var(--bg-elev-1);
  border-color: var(--stroke-2);
  box-shadow: var(--shadow-2);
}
/* Old single-button .theme-toggle-float hide rule still applies, but the
   floating-controls wrapper supersedes it. */
.theme-toggle-float { position: static; }

/* ── HELP PAGE ────────────────────────────────────────────────────── */

.help-frame {
  max-width: 880px;
  margin: 4vh auto 8vh;
  padding: 0 clamp(var(--s-5), 4vw, var(--s-8));
}
.help-frame .hero-h1 { text-align: center; }
.help-frame .hero-sub { text-align: center; margin: 0 auto var(--s-8); max-width: 540px; }

.help-h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
  color: var(--fg-strong);
  margin: var(--s-9) 0 var(--s-5);
  text-align: center;
}

.help-flow {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.help-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-5);
  border-radius: var(--r-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  box-shadow: var(--shadow-1);
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out),
              box-shadow var(--d-fast) var(--ease-out);
}
.help-step:hover {
  border-color: var(--brand-400);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.help-step-icon {
  width: 64px; height: 64px;
  border-radius: var(--r-4);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-500) 14%, transparent),
    color-mix(in srgb, var(--brand-400) 8%, transparent));
  color: var(--brand-300);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.help-step-icon svg { width: 32px; height: 32px; }
.help-step-body h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--fg-strong);
}
.help-step-body p {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0;
}
.help-pill {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 1px 8px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-subtle);
  background: var(--glass-2);
  border: 1px solid var(--stroke-2);
  border-radius: var(--r-pill);
  vertical-align: middle;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}
.help-card {
  padding: var(--s-5);
  border-radius: var(--r-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  transition: border-color var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.help-card:hover { border-color: var(--brand-400); transform: translateY(-2px); }
.help-card h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
  color: var(--fg-strong);
}
.help-card p {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 0;
}

.help-tips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-2);
}
.help-tips li {
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 16px);
  border-radius: var(--r-3);
  background: var(--bg-elev-1);
  border: 1px solid var(--stroke-1);
  font-size: 13.5px; color: var(--fg);
  line-height: 1.55;
}
.help-tips li::before {
  content: '';
  position: absolute; left: var(--s-4); top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}

.help-footer {
  margin-top: var(--s-8);
  display: flex; justify-content: center;
}


/* ============================================================================
   v17 — Busy-state lockout
   When body.is-busy is on (pipeline running), prevent users from clicking
   buttons that could queue more GPU work mid-flight. Tiles still show, but
   click events are eaten and they fade slightly so the disabled state reads.
   ============================================================================ */
body.is-busy .thumb-tile,
body.is-busy .library-tile {
  pointer-events: none;
  opacity: 0.55;
  cursor: progress;
  filter: saturate(0.7);
}
body.is-busy #slide-cta-go,
body.is-busy #nms-toggle,
body.is-busy #granularity-slider {
  cursor: progress;
}
/* Subtle "loading" cursor anywhere over the canvas + workspace area too */
body.is-busy .canvas-stack,
body.is-busy .workspace-grid {
  cursor: progress;
}