/* ════════════════════════════════════════════════════════════════════════
   BOYDLee Scratchpad Console — console.v1.css — v1.0.0
   The shared engine stylesheet for console scratchpads (interactive
   mini-app messages). Pairs with console.v1.js. Scratchpad pages link
   both and carry only content config — see templates/console-scratchpad.html.

   VERSIONING: v1 is FROZEN once the first real message ships on it.
   Bugfixes + additive changes only; breaking changes go to console.v2.css.

   §1–§7 are carried from the BOYDLee design system —
   hermes/agent-kernel/skills/boydlee-design-system/ (v1.0.0).
   Sections marked VERBATIM must only change by re-syncing from source.
   ════════════════════════════════════════════════════════════════════════ */

/* ▼▼▼ §1 TOKENS — pasted VERBATIM from boydlee-design-system/css/tokens.css ▼▼▼ */
@property --angle        { syntax:'<angle>'; initial-value:0deg;  inherits:false; }
@property --streak-angle { syntax:'<angle>'; initial-value:95deg; inherits:false; }

:root {
  /* ── SURFACES ── */
  --bg: #050505;
  --bg-elevated: #15151b;
  --border: #27272A;

  /* ── GOLD (accent / bezel only — NOT part of the holo spectrum) ── */
  --gold: #C5A028;
  --gold-light: #E5C158;
  --gold-dark: #A87D1F;

  /* ── SILVER / ZINC (structure) ── */
  --silver-1: #FFFFFF;
  --silver-2: #E4E4E7;
  --silver-3: #71717A;
  --silver-4: #52525B;

  /* ── C PALETTE (the holo spectrum) ── */
  --ruby: #DC143C;
  --magenta: #ff0080;
  --amethyst: #9944FF;
  --indigo: #3F2785;
  --sapphire: #0070f3;
  --cyan: #00dfd8;
  --jade: #00B894;

  /* ── SIGNATURE HOLO GRADIENT ── */
  --holo-stops: transparent 0%, transparent 8%, #DC143C 14%, #ff0080 19%, #9944FF 25%, rgba(0,0,0,0.7) 28%, rgba(0,0,0,0.7) 30%, #3F2785 33%, #0070f3 36.5%, #00dfd8 39.5%, #00B894 42.5%, rgba(0,184,148,0.4) 43.5%, transparent 45%, transparent 55%, rgba(0,184,148,0.4) 56.5%, #00B894 57.5%, #00dfd8 60%, #0070f3 62.5%, #3F2785 65%, rgba(0,0,0,0.7) 67%, rgba(0,0,0,0.7) 68.5%, #9944FF 70%, #ff0080 72%, #DC143C 74.5%, transparent 80%, transparent 100%;
  --holo-grad: linear-gradient(95deg, var(--holo-stops));

  --holo-text-stops: transparent 0%, rgba(220,20,60,0.18) 4%, rgba(220,20,60,0.6) 8%, #DC143C 13%, #ff0080 21%, #9944FF 30%, rgba(0,0,0,0.2) 31.5%, rgba(0,0,0,0.5) 33.5%, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0.9) 37%, rgba(0,0,0,0.5) 38.5%, rgba(0,0,0,0.2) 40.5%, #3F2785 42.5%, #0070f3 53%, #00dfd8 64%, #00B894 75%, rgba(0,184,148,0.6) 81%, rgba(0,184,148,0.18) 87%, transparent 95%, transparent 100%;
  --holo-text-grad: linear-gradient(95deg, var(--holo-text-stops));

  --conic-holo: conic-gradient(from var(--angle), var(--ruby), var(--magenta), var(--amethyst), var(--sapphire), var(--cyan), var(--jade), var(--ruby));
  --ring-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);

  /* ── CRYSTAL PANEL (locked) ── */
  --panel-blur: 5px;
  --panel-radius: 10px;
  --panel-shadow: 0 8px 6px rgba(0,0,0,0.40);

  /* ── TYPE SCALE (responsive) ── */
  --fs-display: clamp(2.5rem, 6vw, 4.25rem);
  --fs-h1: clamp(2rem, 4.2vw, 2.85rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;

  --maxw: 1080px;
}
*, *::before, *::after { box-sizing: border-box; }
/* ▲▲▲ end §1 tokens ▲▲▲ */

/* ▼▼▼ §2 GLASS CALIBRATIONS — adapted from boydlee-design-system/css/shell.css (SPEC §11)
       for a standalone full-viewport console page ▼▼▼ */
:root {
  --glass-content: rgba(255,255,255,0.045);
  --glass-chrome:  rgba(12,14,20,0.42);
  --glass-panel:   rgba(10,12,18,0.62);
  --glass-border:  rgba(255,255,255,0.10);
  --chrome-blur: 12px;

  /* Console-layer knobs */
  --sp-accent: var(--cyan);              /* engine maps meta.accent name here */
  --sp-maxw: 680px;
  --sp-pad: clamp(14px, 3vw, 26px);
  --sp-title-fs: clamp(1.35rem, 4.6vw, 1.9rem);
  --sp-body-fs: clamp(1rem, 2.9vw, 1.14rem);
  --sp-quote-fs: clamp(1.08rem, 3.4vw, 1.34rem);
  --sp-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-mono: 'JetBrains Mono', Consolas, monospace;
}
/* ▲▲▲ end §2 ▲▲▲ */

/* ── §3 BASE ── */
html { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--silver-2);
  font-family: var(--sp-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(0,223,216,0.25); }

/* No-JS fallback block (lives in the scratchpad file's <noscript>) */
.ns { max-width: 560px; margin: 18vh auto 0; padding: 26px; border: 1px solid var(--glass-border);
  border-radius: 16px; background: var(--glass-content); color: var(--silver-2); }
.ns strong { color: var(--silver-1); }

/* ▼▼▼ §4 TYPOGRAPHY — pasted VERBATIM from boydlee-design-system/css/typography.css ▼▼▼ */
.t-display { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--silver-1); }
.t-h1 { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--silver-1); }
.t-h2 { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--silver-1); }
.t-h3 { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; color: var(--silver-1); }
.t-body { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--silver-2); }
.t-small { font-family:'Inter',system-ui,sans-serif; font-size: var(--fs-small); font-weight: 400; color: var(--silver-3); }
.t-label { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
/* ▲▲▲ end §4 ▲▲▲ */

/* ▼▼▼ §5 BUTTONS — pasted VERBATIM from boydlee-design-system/css/buttons.css
       (reduced-motion freeze moved to §12) ▼▼▼ */
.btn {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  padding: 13px 22px; min-height: 44px; border-radius: 8px; border: none; cursor: pointer;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap; color: var(--silver-1); background: transparent;
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn--icon { padding: 0; width: 44px; height: 44px; gap: 0; }
.btn--icon svg { width: 18px; height: 18px; }
.btn .lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; }

.btn-primary { background: #0a0a0f; overflow: hidden; }
.btn-primary .holo-fill { position: absolute; inset: 0; background: var(--holo-grad); background-size: 200% 100%; mix-blend-mode: screen; opacity: 0; background-position: 160% 0; pointer-events: none; z-index: 0; }

.sig-bezel { border: 1px solid var(--gold); }
.sig-beam { border: 1px solid rgba(255,255,255,0.07); }
.sig-beam::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--angle), transparent 0deg, transparent 248deg, var(--cyan) 288deg, var(--sapphire) 318deg, rgba(0,0,0,0.92) 333deg, var(--amethyst) 348deg, var(--magenta) 357deg, transparent 360deg); -webkit-mask:var(--ring-mask); mask:var(--ring-mask); -webkit-mask-composite:xor; mask-composite:exclude; animation:spin 3s linear infinite; }

.btn-crystal-silver {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(5px) saturate(220%); backdrop-filter: blur(5px) saturate(220%);
  border: 1px solid rgba(255,255,255,0.12);
}
.btn-outline-gold { border: 1px solid var(--gold); color: var(--gold-light); }
.btn-ghost { color: var(--silver-3); border-radius: 8px; min-height: 44px; }
.btn-ghost .arr { display: inline-flex; transition: transform .2s ease; }

.btn:active { transform: translateY(1px); }
.btn-primary:active { box-shadow: inset 0 0 0 100px rgba(255,255,255,0.06); }
.btn-crystal-silver:active, .btn-outline-gold:active, .btn-ghost:active { background: rgba(255,255,255,0.08); }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-primary:hover .holo-fill { animation: sweep-once 1.1s cubic-bezier(0.2,0.7,0.8,0.2) forwards; }
  .sig-bezel:hover, .sig-beam:hover { border-color: var(--gold-light); }
  .btn-crystal-silver:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
  .btn-outline-gold:hover { background: rgba(229,193,88,0.20); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-color: var(--gold-light); transform: translateY(-1px); }
  .btn-ghost:hover { color: var(--silver-1); background: rgba(255,255,255,0.05); }
  .btn-ghost.fwd:hover .arr { transform: translateX(4px); }
  .btn-ghost.back:hover .arr { transform: translateX(-4px); }
}
@keyframes spin { to { --angle: 360deg; } }
@keyframes glint { 0%{left:-60%} 32%{left:130%} 100%{left:130%} }
@keyframes sweep-once { 0%{background-position:160% 0;opacity:0} 10%{opacity:1} 100%{background-position:-80% 0;opacity:1} }
/* ▲▲▲ end §5 ▲▲▲ */

/* ▼▼▼ §6 HOLO — subset pasted VERBATIM from boydlee-design-system/css/holo.css
       (holo-text · holo-streak · holo-line; phase-lock: delays 0, harmonic durations) ▼▼▼ */
.holo-text {
  display: inline-block;
  background: var(--holo-text-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holo-flow 6s linear infinite;
}
@keyframes holo-flow { from { background-position: 0% 0; } to { background-position: -200% 0; } }

.holo-streak {
  display: inline-block;
  background: var(--holo-grad), linear-gradient(var(--silver-1), var(--silver-1));
  background-size: 200% 100%, 100% 100%;
  background-position: -100% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holo-streak-sweep 3s ease-in-out infinite;
}
@keyframes holo-streak-sweep {
  0%   { background-position: -100% 0, 0 0; }
  8%   { background-position: -100% 0, 0 0; }
  54%  { background-position: 170% 0, 0 0; }
  100% { background-position: 170% 0, 0 0; }
}

.holo-line { height:2px; border-radius:2px; background: var(--holo-grad); background-size:200% 100%; animation: holo-line-sweep 4s linear infinite; }
@keyframes holo-line-sweep { to { background-position:-200% 0; } }
/* ▲▲▲ end §6 ▲▲▲ */

/* ▼▼▼ §7 CRYSTAL PANELS — pasted VERBATIM from boydlee-design-system/css/crystal.css (panels only) ▼▼▼ */
.crystal-panel {
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(220%);
  backdrop-filter: blur(var(--panel-blur)) saturate(220%);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), var(--panel-shadow);
}
/* ▲▲▲ end §7 ▲▲▲ */

/* ── §8 BACKGROUND FIELD — aurora + grid subset, from boydlee-design-system/css/background.css.
      Fixed behind everything; the glass chrome refracts it. No scroll parallax (console doesn't scroll). ── */
.bg-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0.8; }
.drift-orb { position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none; }
.bg-field .o1 { background: var(--sapphire); width: 48vw; height: 48vw; min-width:320px; min-height:320px; top:-12%; left:-6%;  opacity:0.075; animation: drift-a 26s ease-in-out infinite; }
.bg-field .o2 { background: var(--amethyst); width: 44vw; height: 44vw; min-width:300px; min-height:300px; top:28%;  right:-8%; opacity:0.065; animation: drift-b 31s ease-in-out infinite; }
.bg-field .o3 { background: var(--cyan);     width: 40vw; height: 40vw; min-width:280px; min-height:280px; bottom:-14%; left:24%; opacity:0.055; animation: drift-c 24s ease-in-out infinite; }
.bg-field .o4 { background: var(--magenta);  width: 36vw; height: 36vw; min-width:260px; min-height:260px; top:52%;  left:6%;   opacity:0.05; animation: drift-a 33s ease-in-out infinite reverse; }
.bg-grid { position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 18%, black 10%, transparent 86%);
  mask-image: radial-gradient(ellipse at 50% 18%, black 10%, transparent 86%);
  animation: pan-grid 26s linear infinite; }
@keyframes pan-grid { to { background-position: 46px 46px; } }
@keyframes drift-a { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,40px) scale(1.1)} 66%{transform:translate(-40px,70px) scale(0.95)} }
@keyframes drift-b { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-70px,-50px) scale(1.05)} 66%{transform:translate(50px,-30px) scale(1.15)} }
@keyframes drift-c { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(60px,-60px) scale(1.2)} }

/* ════════════════════════════════════════════════════════════════════════
   §9 CONSOLE LAYER — the mini-app shell (new in console.v1)
   Layout law: console mode = one viewport, zero page scroll.
   Grid rows: top bar / stage / dock. All chrome is glass over the field.
   ════════════════════════════════════════════════════════════════════════ */
body[data-mode="console"] { height: 100svh; height: 100dvh; overflow: hidden; }

.sp-app { height: 100svh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }

/* ── Top bar ── */
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 46px; padding: 6px 14px;
  background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(120%); backdrop-filter: blur(var(--chrome-blur)) saturate(120%);
  border-bottom: 1px solid var(--glass-border); }
.sp-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sp-sigil { width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: var(--holo-grad); background-size: 220% 100%;
  box-shadow: 0 0 18px rgba(0,223,216,.18), inset 0 0 0 1px rgba(255,255,255,.24);
  animation: holo-line-sweep 6s linear infinite; }
.sp-brand strong { color: var(--silver-1); font-weight: 800; letter-spacing: -0.02em; font-size: .92rem; white-space: nowrap; }
.sp-plate { color: var(--gold-light); border: 1px solid rgba(197,160,40,.34); border-radius: 999px; padding: 3px 8px;
  font-family: var(--sp-mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .13em; background: rgba(197,160,40,.055); white-space: nowrap; }
.sp-top .btn-ghost { font-size: .82rem; padding: 8px 12px; }

/* ── Stage ── */
.sp-stage { position: relative; overflow: hidden; display: grid; align-items: center; justify-items: center; padding: var(--sp-pad); }
.sp-scroller { width: min(var(--sp-maxw), 100%); max-height: 100%; overflow: hidden; }
.sp-scroller.is-embed { height: 100%; }
.sp-embed-shell { min-height: 200px; }
.sp-app[data-fit="scroll"] .sp-scroller { overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent);
  mask-image: linear-gradient(180deg, #000 88%, transparent); }

/* Step transitions (directional) */
.sp-anim-next { animation: sp-in-next .16s ease both; }
.sp-anim-back { animation: sp-in-back .16s ease both; }
@keyframes sp-in-next { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes sp-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ── Cards (shared step chrome) ── */
.sp-card { border: 1px solid var(--glass-border); border-radius: 20px; padding: clamp(18px, 4vw, 28px);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), rgba(10,11,16,.34);
  -webkit-backdrop-filter: blur(7px) saturate(180%); backdrop-filter: blur(7px) saturate(180%);
  box-shadow: 0 20px 72px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.09); }
.sp-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.sp-kicker::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--gold); flex: none; }
.sp-title { margin: 0 0 10px; color: var(--silver-1); font-size: var(--sp-title-fs); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.sp-body { margin: 0; color: var(--silver-2); font-size: var(--sp-body-fs); }
.sp-aside { margin: 12px 0 0; color: var(--silver-3); font-size: .95rem; }
.sp-note { margin: 12px 0 0; color: var(--silver-3); font-size: .85rem; }
h1:focus-visible, h2:focus-visible, h3:focus-visible { outline: none; } /* headings receive programmatic focus on step change */

/* script step */
.sp-lead { margin: 0 0 10px; color: var(--silver-3); font-size: .95rem; }
.sp-quote { margin: 0; padding: 14px 16px; border-left: 2px solid var(--sp-accent); border-radius: 6px 14px 14px 6px;
  background: rgba(255,255,255,.03); color: var(--silver-1); font-size: var(--sp-quote-fs); line-height: 1.4; }
.sp-copybtn { margin-top: 14px; }

/* choices step */
.sp-opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 4px; }
.sp-opt { text-align: left; border: 1px solid var(--glass-border); border-radius: 14px; padding: 11px 12px; cursor: pointer;
  background: linear-gradient(145deg, rgba(255,255,255,.039), rgba(255,255,255,.009));
  color: var(--silver-2); min-height: 44px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent; }
.sp-opt .tag { display: block; color: var(--silver-4); font-family: var(--sp-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.sp-opt strong { display: block; color: var(--silver-1); font-size: .92rem; line-height: 1.22; }
.sp-opt .sub { display: block; color: var(--silver-3); font-size: .8rem; margin-top: 4px; }
.sp-opt:active { transform: scale(.985); }
.sp-opt[aria-pressed="true"] { border-color: var(--sp-accent);
  background: linear-gradient(135deg, rgba(0,223,216,.085), rgba(153,68,255,.05)), rgba(255,255,255,.018); }
.sp-opt[aria-pressed="true"] .tag { color: var(--sp-accent); }
@media (hover: hover) and (pointer: fine) { .sp-opt:hover { transform: translateY(-2px); border-color: var(--sp-accent); } }
.sp-live { margin: 14px 0 0; padding: 11px 13px; border: 1px solid rgba(0,223,216,.22); border-radius: 12px;
  background: rgba(0,223,216,.05); color: var(--silver-1); font-size: .95rem; }

/* reveal step */
.sp-reveals { display: grid; gap: 9px; margin-top: 4px; }
.sp-reveal { text-align: left; border: 1px solid var(--glass-border); border-radius: 14px; padding: 13px 15px; cursor: pointer;
  background: linear-gradient(145deg, rgba(255,255,255,.039), rgba(255,255,255,.009)); color: var(--silver-2);
  -webkit-tap-highlight-color: transparent; }
.sp-reveal .q { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--silver-1); font-weight: 700; }
.sp-reveal .q::after { content: "tap"; color: var(--silver-4); font-family: var(--sp-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.sp-reveal[aria-expanded="true"] { border-color: var(--sp-accent); }
.sp-reveal[aria-expanded="true"] .q::after { content: "–"; color: var(--sp-accent); }
.sp-reveal .a { display: none; margin: 9px 0 0; color: var(--silver-2); font-size: .95rem; }
.sp-reveal[aria-expanded="true"] .a { display: block; }

/* compare step */
.sp-compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 4px; }
.sp-listbox { border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.038), rgba(255,255,255,.009)); }
.sp-listbox.good { border-color: rgba(0,184,148,.34); }
.sp-listbox.careful { border-color: rgba(255,0,128,.3); }
.sp-listbox h3 { margin: 0 0 9px; color: var(--silver-1); font-size: .98rem; }
.sp-listbox ul { margin: 0; padding-left: 1.05rem; color: var(--silver-3); font-size: .92rem; }
.sp-listbox li { margin: 6px 0; }

/* visual step */
.sp-visual { display: grid; justify-items: center; gap: 16px; padding: 10px 0 4px; }
.sp-visual svg { max-width: 100%; height: auto; }
.sp-caption { margin: 0; color: var(--silver-3); font-size: .9rem; text-align: center; }
.sp-motif-spectrum { display: flex; gap: 10px; align-items: center; }
.sp-motif-spectrum i { width: 12px; height: 12px; border-radius: 999px; }
.sp-motif-steps { display: flex; gap: 0; align-items: center; }
.sp-motif-steps i { width: 11px; height: 11px; border-radius: 999px; border: 1px solid var(--silver-3); background: rgba(255,255,255,.06); }
.sp-motif-steps i.on { background: var(--sp-accent); border-color: var(--sp-accent); }
.sp-motif-steps em { width: 26px; height: 1px; background: var(--glass-border); }
.sp-motif-line { width: min(280px, 70%); }
.sp-motif-orbit { width: 84px; height: 84px; border-radius: 999px; position: relative; border: 1px solid rgba(255,255,255,.07); }
.sp-motif-orbit::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: conic-gradient(from var(--angle), transparent 0deg, transparent 248deg, var(--cyan) 288deg, var(--sapphire) 318deg, rgba(0,0,0,0.92) 333deg, var(--amethyst) 348deg, var(--magenta) 357deg, transparent 360deg);
  -webkit-mask: var(--ring-mask); mask: var(--ring-mask);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite; }

/* embed step */
.sp-embed { display: flex; flex-direction: column; width: min(var(--sp-maxw), 100%); height: 100%; min-height: 0; }
.sp-embed .sp-card-head { flex: none; margin-bottom: 10px; }
.sp-embed-shell { position: relative; flex: 1; min-height: 0; border: 1px solid var(--glass-border); border-radius: 18px; overflow: hidden;
  background: rgba(8,8,12,.5); }
.sp-embed-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #050505; }
.sp-embed-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 22px;
  background: radial-gradient(110% 100% at 50% 0%, rgba(0,112,243,.06), transparent 62%); }
.sp-embed-poster strong { color: var(--silver-1); font-size: 1.15rem; letter-spacing: -0.02em; }
.sp-embed-poster p { margin: 0 0 6px; color: var(--silver-3); font-size: .93rem; max-width: 38ch; }
.sp-embed-tabs { display: flex; gap: 6px; flex: none; margin-bottom: 8px; }
.sp-embed-tabs button { flex: 1; min-height: 44px; border: 1px solid var(--glass-border); border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.03); color: var(--silver-3); font-family: var(--sp-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  -webkit-tap-highlight-color: transparent; }
.sp-embed-tabs button[aria-selected="true"] { color: var(--silver-1); border-color: var(--sp-accent); background: rgba(0,223,216,.07); }
.sp-embed-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.sp-embed-foot a { color: var(--silver-3); font-size: .85rem; text-decoration: none; border-bottom: 1px solid var(--glass-border); padding-bottom: 1px; white-space: nowrap; flex: none; }
.sp-embed-foot a:active { color: var(--silver-1); }
.sp-embed-foot .sp-caption { text-align: right; }

/* ── Cover ── */
.sp-cover { display: grid; justify-items: center; text-align: center; gap: 13px; width: min(560px, 100%); padding: 10px 0; }
.sp-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); border: 1px solid rgba(197,160,40,.4);
  border-radius: 999px; padding: 7px 13px; font-family: var(--sp-mono); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase;
  background: rgba(197,160,40,.06); }
.sp-cover-title { margin: 0; font-size: clamp(2.1rem, 8vw, 3.3rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: 850; text-wrap: balance; }
.sp-from { margin: 0; color: var(--silver-2); font-size: 1rem; }
.sp-time { display: inline-flex; align-items: center; gap: 7px; color: var(--silver-3); font-family: var(--sp-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--glass-border); border-radius: 999px; padding: 6px 11px;
  background: rgba(255,255,255,.03); }
.sp-time::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--sp-accent); }
.sp-promise { margin: 4px 0 0; color: var(--silver-2); font-size: clamp(1rem, 3vw, 1.12rem); max-width: 42ch; }
.sp-hint { margin: 0; color: var(--silver-3); font-size: .92rem; }
.sp-start { min-height: 58px; width: min(320px, 86%); font-size: 1.1rem; border-radius: 999px; margin-top: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.34), 0 0 0 1px rgba(197,160,40,.2); }
.sp-readall { border: none; background: none; cursor: pointer; color: var(--silver-3); font-size: .9rem; min-height: 44px; padding: 8px 14px;
  text-decoration: underline; text-decoration-color: var(--glass-border); text-underline-offset: 4px; -webkit-tap-highlight-color: transparent; }
.sp-readall:active { color: var(--silver-1); }

/* ── End screen ── */
.sp-end { display: grid; gap: 13px; width: min(560px, 100%); text-align: center; justify-items: center; }
.sp-end .holo-line { width: min(240px, 60%); }
.sp-end-head { margin: 0; color: var(--silver-1); font-size: clamp(1.5rem, 5.4vw, 2.1rem); letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; }
.sp-got { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 8px; width: min(420px, 100%); }
.sp-got li { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--glass-border); border-radius: 12px;
  padding: 11px 13px; background: rgba(255,255,255,.03); color: var(--silver-1); font-size: .97rem; }
.sp-got li::before { content: "✓"; color: var(--jade); font-weight: 800; flex: none; }
.sp-nudge { margin-top: 6px; display: grid; gap: 3px; justify-items: center; border: 1px solid rgba(0,223,216,.26); border-radius: 14px;
  padding: 13px 18px; cursor: pointer; background: rgba(0,223,216,.05); color: var(--silver-1); min-height: 44px; width: min(420px, 100%);
  -webkit-tap-highlight-color: transparent; }
.sp-nudge small { color: var(--silver-3); font-size: .82rem; }
.sp-nudge:active { background: rgba(0,223,216,.1); }

/* ── Bottom dock (thumb zone) ── */
.sp-dock { background: var(--glass-chrome);
  -webkit-backdrop-filter: blur(var(--chrome-blur)) saturate(120%); backdrop-filter: blur(var(--chrome-blur)) saturate(120%);
  border-top: 1px solid var(--glass-border);
  padding: 8px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right)); }
.sp-dock-inner { width: min(var(--sp-maxw), 100%); margin: 0 auto; display: grid; gap: 8px; }
.sp-dock-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; }
.sp-dots { display: flex; align-items: center; gap: 7px; }
.sp-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s ease, transform .2s ease; }
.sp-dots i.on { background: var(--sp-accent); }
.sp-dots i.now { transform: scale(1.45); background: var(--sp-accent); }
.sp-more { border: 1px solid rgba(197,160,40,.36); border-radius: 999px; background: rgba(197,160,40,.06); color: var(--gold-light);
  font-family: var(--sp-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; min-height: 34px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-more:active { background: rgba(197,160,40,.13); }
.sp-more[hidden] { display: none; }
.sp-dock-main { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: 10px; }
.sp-dock-main .btn { min-height: 56px; font-size: 1.02rem; border-radius: 14px; }
.sp-dock-main .btn:disabled { opacity: .38; cursor: default; transform: none; }
.sp-app[data-view="cover"] .sp-dock { display: none; }

/* visually hidden (a11y text) */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Dive-deeper bottom sheet ── */
.sp-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; }
.sp-sheet[hidden] { display: none; }
.sp-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.52); }
.sp-sheet-panel { position: relative; width: min(680px, 100%); max-height: 72dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--glass-border); border-bottom: none; border-radius: 20px 20px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  animation: sp-sheet-up .2s ease both; }
@keyframes sp-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp-sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); margin: 4px auto 10px; }
.sp-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sp-sheet-close { border: 1px solid var(--glass-border); background: rgba(255,255,255,.04); color: var(--silver-2); border-radius: 10px;
  width: 44px; height: 44px; cursor: pointer; font-size: 1.05rem; -webkit-tap-highlight-color: transparent; }
.sp-sheet-section { margin: 14px 0 0; }
.sp-sheet-section h3 { margin: 0 0 8px; color: var(--silver-1); font-size: 1.02rem; letter-spacing: -0.02em; }
.sp-block-p { margin: 0 0 10px; color: var(--silver-2); font-size: .97rem; }
.sp-block-list { margin: 0 0 10px; padding-left: 1.1rem; color: var(--silver-2); }
.sp-block-list li { margin: 6px 0; }
.sp-block-quote { margin: 0 0 10px; padding: 11px 13px; border-left: 2px solid var(--sp-accent); border-radius: 6px 12px 12px 6px;
  background: rgba(255,255,255,.03); color: var(--silver-1); }
.sp-block-copy { margin: -2px 0 12px; }
.sp-block-embed { display: grid; gap: 6px; justify-items: start; border: 1px solid var(--glass-border); border-radius: 14px; padding: 14px;
  margin: 0 0 10px; background: rgba(8,8,12,.4); }
.sp-block-embed strong { color: var(--silver-1); }
.sp-block-embed p { margin: 0; color: var(--silver-3); font-size: .9rem; }

/* ── Toast ── */
.sp-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(14px);
  opacity: 0; pointer-events: none; z-index: 90; color: var(--silver-1); background: rgba(10,12,18,.9);
  border: 1px solid rgba(0,223,216,.38); border-radius: 999px; padding: 10px 15px; font-weight: 700; font-size: .92rem;
  transition: opacity .18s ease, transform .18s ease; }
.sp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Dev overflow badge ── */
.sp-devflag { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 95; background: var(--ruby); color: #fff;
  font-family: var(--sp-mono); font-size: .7rem; letter-spacing: .08em; padding: 6px 11px; border-radius: 8px; }

/* ════════════════════════════════════════════════════════════════════════
   §10 EXPLORE MODE — same config rendered as a normal readable document
   ════════════════════════════════════════════════════════════════════════ */
body[data-mode="explore"] { overflow-x: hidden; min-height: 100svh; }
body[data-mode="explore"] .sp-app { display: none; }
.sp-doc { width: min(760px, calc(100vw - 32px)); margin: 0 auto; padding: 18px 0 140px; }
.sp-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 22px; }
.sp-doc-header { display: grid; gap: 12px; justify-items: start; padding: 14px 0 8px; }
.sp-doc-title { margin: 0; color: var(--silver-1); font-size: clamp(1.9rem, 6vw, 2.9rem); letter-spacing: -0.045em; line-height: 1.04; }
.sp-doc-intro { margin: 0; color: var(--silver-2); font-size: 1.05rem; max-width: 60ch; }
.sp-doc-section { margin-top: 34px; scroll-margin-top: 20px; }
.sp-doc-section .sp-card { padding: clamp(18px, 3.4vw, 26px); }
.sp-doc-section .sp-quote { font-size: 1.08rem; }
.sp-doc-deeper { margin-top: 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 14px 16px;
  background: rgba(255,255,255,.022); }
.sp-doc-deeper h4 { margin: 0 0 8px; color: var(--gold-light); font-family: var(--sp-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; }
.sp-doc-opts { display: grid; gap: 7px; margin-top: 6px; }
.sp-doc-opt { border: 1px solid var(--glass-border); border-radius: 12px; padding: 11px 13px; background: rgba(255,255,255,.025); }
.sp-doc-opt strong { color: var(--silver-1); display: block; font-size: .95rem; }
.sp-doc-opt span { color: var(--silver-3); font-size: .85rem; }
.sp-guided-pill { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  border: 1px solid rgba(197,160,40,.5); border-radius: 999px; min-height: 50px; padding: 12px 18px; cursor: pointer;
  background: rgba(10,12,18,.78); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  color: var(--silver-1); font-weight: 700; box-shadow: 0 16px 48px rgba(0,0,0,.4); -webkit-tap-highlight-color: transparent; }
.sp-guided-pill:active { background: rgba(197,160,40,.16); }
body[data-mode="console"] .sp-doc, body[data-mode="console"] .sp-guided-pill { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   §11 COMPACT SCALE + SMALL VIEWPORTS
   data-fit="compact" = type one notch down (runtime overflow guard sets it)
   data-fit="scroll"  = last resort: internal stage scroll with bottom fade
   ════════════════════════════════════════════════════════════════════════ */
.sp-app[data-fit="compact"], .sp-app[data-fit="scroll"] {
  --sp-title-fs: clamp(1.16rem, 4vw, 1.55rem);
  --sp-body-fs: clamp(.93rem, 2.6vw, 1.04rem);
  --sp-quote-fs: clamp(.99rem, 3vw, 1.18rem);
  --sp-pad: clamp(10px, 2.2vw, 18px);
}
.sp-app[data-fit="compact"] .sp-card, .sp-app[data-fit="scroll"] .sp-card { padding: 15px 16px; }
.sp-app[data-fit="compact"] .sp-opt .sub { display: none; }
.sp-app[data-fit="scroll"] .sp-opt .sub { display: none; }

@media (max-width: 480px) {
  .sp-brand strong { font-size: .84rem; }
  .sp-compare { grid-template-columns: 1fr; }
  .sp-opt { padding: 9px 10px; }
  .sp-dock-main .btn { min-height: 54px; }
}
@media (max-height: 600px) {
  .sp-cover { gap: 9px; }
  .sp-cover-title { font-size: clamp(1.7rem, 6.5vw, 2.4rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   §12 REDUCED MOTION — freeze everything (carried from the design system)
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .holo-text { background: linear-gradient(95deg, var(--silver-1), var(--silver-2)); -webkit-background-clip: text; background-clip: text; }
}