/* Where Your AI Sits · design tokens and components (shared with What Your AI Can See)
   Signature: context is light. The model sits in a dark room. Lit = visible to the model. */

:root {
  --ink: #050912;
  --surface: #0b1020;
  --surface-2: #10172b;
  --line: #232c44;
  --line-2: #2f3a58;
  --text: #f4f6fa;
  --muted: #a6adba;
  --faint: #8189a0;   /* raised from #697181 for AA contrast on 10-12px labels */

  --prompt: #ffffff;
  --durable: #f2b84b;      /* what stays true: warm paper */
  --live: #4f8cff;         /* what is true now: cobalt */
  --tool: #4fd6e3;         /* what it can fetch: cool cyan (temperature scale with amber and cobalt) */
  --stale: #8a7f6a;        /* photocopy */
  --problem: #ff6b6b;
  --good: #7ee08a;

  --durable-dim: rgba(242, 184, 75, .16);
  --live-dim: rgba(79, 140, 255, .16);
  --tool-dim: rgba(79, 214, 227, .16);
  --problem-dim: rgba(255, 107, 107, .16);

  --display: 'Fraunces', Georgia, serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --bar-h: 60px;
  --stage-h: 540px;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
::selection { background: rgba(79,140,255,.35); }

a { color: var(--live); text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--live); outline-offset: 3px; border-radius: 4px;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--live); color: var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- slide host ---------- */
.slide-host {
  position: fixed; inset: 0 0 var(--bar-h) 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.slide {
  min-height: 100%;
  display: grid;
  align-content: center;
  padding: 48px clamp(20px, 5vw, 72px);
  animation: slide-in .5s var(--ease);
}
@keyframes slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.slide-inner { width: 100%; max-width: 1120px; margin: 0 auto; min-width: 0; }
.slide-inner > *, .stage-grid > *, .stage > * { min-width: 0; }

/* Layouts: let the idea choose */
.layout-center .slide-inner { max-width: 760px; text-align: center; }
.layout-center .prose { margin-left: auto; margin-right: auto; }
.layout-split .slide-inner { display: grid; grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr); gap: 48px; align-items: center; }
.layout-split.flip .slide-inner { grid-template-columns: minmax(320px, 7fr) minmax(280px, 5fr); }
.layout-stage .slide-inner { display: grid; gap: 28px; }
.layout-stage .prose { max-width: 720px; }
@media (max-width: 860px) {
  .layout-split .slide-inner, .layout-split.flip .slide-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px;
}
h1, h2, .display {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96, 'SOFT' 40, 'WONK' 1;
  font-weight: 500; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 20px;
}
h1 { font-size: clamp(34px, 5vw, 62px); }
h2 { font-size: clamp(30px, 4.6vw, 54px); }
.big { font-size: clamp(28px, 4.2vw, 54px); }
.prose { max-width: 620px; }
.prose p { margin: 0 0 16px; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); }
.prose p.lead { color: var(--text); font-size: clamp(18px, 1.5vw, 22px); }
.prose strong { color: var(--text); font-weight: 600; }
.prose .small, .small { font-size: 14px; color: var(--faint); }
.mono { font-family: var(--mono); }
.q { font-family: var(--display); font-style: italic; font-size: clamp(20px, 2vw, 26px); color: var(--text); }

.c-durable { color: var(--durable); }
.c-live { color: var(--live); }
.c-tool { color: var(--tool); }
.c-stale { color: var(--stale); }
.c-problem { color: var(--problem); }

/* ---------- buttons, doors ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  border: 1.5px solid var(--text); color: var(--text);
  font-family: var(--display); font-size: 19px; font-variation-settings: 'opsz' 40, 'SOFT' 60;
  transition: transform .25s var(--ease), background .25s, color .25s, opacity .25s;
}
.btn:hover { background: var(--text); color: var(--ink); transform: translateY(-1px); }
.btn.primary { background: var(--text); color: var(--ink); }
.btn.primary:hover { background: #fff; }
.btn.locked { opacity: .35; pointer-events: none; }
.btn.subtle { border-color: var(--line-2); color: var(--muted); font-family: var(--body); font-size: 15px; padding: 9px 16px; }
.btn.subtle:hover { background: var(--surface-2); color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.layout-center .btn-row { justify-content: center; }
.gate-hint { font-family: var(--mono); font-size: 12.5px; color: var(--faint); letter-spacing: .04em; }
.gate-hint::before { content: '· '; }

.door {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--display); font-style: italic; font-size: 17px;
  color: var(--durable); text-decoration: none; border-bottom: 1px dashed rgba(242,184,75,.5);
  padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.door:hover { color: #ffd88a; border-bottom-style: solid; }
.door::after { content: '→'; font-style: normal; transition: transform .25s var(--ease); display: inline-block; }
.door:hover::after { transform: translateX(4px); }
.door.on-live { color: var(--live); border-color: rgba(79,140,255,.5); }
.door.on-live:hover { color: #8fb5ff; }
.door.on-tool { color: var(--tool); border-color: rgba(79,214,227,.5); }
.door-note { font-size: 14px; color: var(--faint); margin-top: 6px; }

/* ---------- the stage ---------- */
.stage {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: var(--stage-h);
  overflow: hidden;
  isolation: isolate;
}
.stage.tall { height: 620px; }
.stage-grid { display: grid; height: 100%; }
.stage-grid.two { grid-template-columns: 1fr 1.2fr; gap: 16px; padding: 16px; position: relative; z-index: 1; }
.stage-grid.three { grid-template-columns: 220px 1fr 1.15fr; gap: 14px; padding: 14px; position: relative; z-index: 1; }
@media (max-width: 860px) {
  .stage-grid.two, .stage-grid.three { grid-template-columns: 1fr; height: auto; }
  .stage-grid.two > *, .stage-grid.three > * { min-height: 220px; max-height: 420px; }
  .layout-split.flip .slide-inner > :first-child { order: 2; }
}
.stage-caption { font-size: 14px; color: var(--faint); margin-top: 10px; }
@media (max-width: 860px) {
  .stage, .stage.tall { height: auto; min-height: 520px; }
}
@media (min-width: 861px) and (max-height: 960px) {
  :root { --stage-h: 460px; }
  .slide { padding-top: 28px; padding-bottom: 28px; }
  h2 { margin-bottom: 12px; }
  .layout-stage .slide-inner { gap: 18px; }
  .prose p { margin-bottom: 10px; }
}

/* room lighting */
.stage .glow {
  position: absolute; inset: -40%; pointer-events: none; z-index: 0;
  --lit: .35;   /* 0 = dark room, 1 = fully lit; decks set this from sources wired in / 6 */
  background:
    radial-gradient(ellipse 55% 60% at var(--gx, 50%) var(--gy, 45%), rgba(120,170,255,calc(.30 * var(--lit))), rgba(79,140,255,calc(.10 * var(--lit))) 45%, transparent 72%),
    radial-gradient(ellipse 90% 80% at var(--gx, 50%) var(--gy, 45%), rgba(79,140,255,calc(.06 * var(--lit) + .03)), transparent 70%);
  opacity: var(--glow, 1); transition: opacity .6s, background .6s;
}

/* ---------- the Brief pane ---------- */
.pane {
  --pane-accent: var(--prompt);
  background: #070b16;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 12.5px; line-height: 1.5;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 30px 60px -30px rgba(0,0,0,.8), 0 0 80px -30px rgba(79,140,255,.25);
}
.pane-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.pane-head > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; contain: inline-size; flex: 1; }
.pane-head .pane-count { color: var(--muted); letter-spacing: 0; text-transform: none; flex: none; }
.pane-body { padding: 12px 14px; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pane-entry { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--line-2); color: var(--muted); animation: entry-in .35s var(--ease); }
@keyframes entry-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.pane-entry .k { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.pane-entry.kind-prompt { border-color: var(--prompt); color: var(--text); }
.pane-entry.kind-durable { border-color: var(--durable); }
.pane-entry.kind-live { border-color: var(--live); }
.pane-entry.kind-tool { border-color: var(--tool); }
.pane-entry.kind-stale { border-color: var(--stale); color: var(--stale); }
.pane-entry.kind-junk { border-color: var(--stale); color: var(--stale); }
.pane-entry.kind-durable .k { color: var(--durable); }
.pane-entry.kind-live .k { color: var(--live); }
.pane-entry.kind-tool .k { color: var(--tool); }
.pane-entry .lines { white-space: pre-wrap; }
.pane-entry .bulk { color: var(--faint); font-size: 11px; }
.pane-empty { color: var(--faint); font-style: italic; }
.pane-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* focus meter */
.meter { display: flex; align-items: center; gap: 8px; }
.meter-track { width: 120px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; position: relative; }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--good); transition: width .5s var(--ease), background .5s; border-radius: 3px; }
.meter[data-level="guessing"] .meter-fill { background: var(--problem); }
.meter[data-level="focused"] .meter-fill { background: var(--good); }
.meter[data-level="busy"] .meter-fill { background: var(--durable); }
.meter[data-level="drowning"] .meter-fill { background: var(--problem); }
.meter-label { min-width: 62px; text-transform: lowercase; }

/* ---------- source cards ---------- */
.card {
  --c: var(--durable);
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px; text-align: left; width: 100%;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .3s, color .2s, opacity .3s;
  user-select: none;
}
.card .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); flex: none; opacity: .45; transition: opacity .2s, box-shadow .3s; }
.card .name { flex: 1; }
.card .tag { font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .06em; text-transform: uppercase; }
.card:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-1px); }
.card.in { border-color: var(--c); color: var(--text); box-shadow: 0 0 24px -8px var(--c); }
.card.in .dot { opacity: 1; box-shadow: 0 0 10px 0 var(--c); }
.card.kind-durable { --c: var(--durable); }
.card.kind-live { --c: var(--live); }
.card.kind-tool { --c: var(--tool); }
.card.kind-junk { --c: var(--stale); }
.card.pulse .dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--c); opacity: .6; } 50% { box-shadow: 0 0 0 7px transparent; opacity: 1; } }
.card.dragging { opacity: .5; }
.shelf { display: grid; gap: 7px; align-content: start; }
.shelf-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 8px 0 4px; }

/* ---------- the Draft ---------- */
.draft {
  background: #fbf9f4; color: #1c1f2a;
  border-radius: 8px; padding: 18px 20px;
  font-family: var(--body); font-size: 13px; line-height: 1.5;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.9), 0 0 90px -25px rgba(255,232,190,.42), inset 0 0 0 1px rgba(0,0,0,.05);
  overflow: auto; min-height: 0; position: relative;
}
.draft::after, .paper-grain::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: .055; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.draft.stale::after { display: none; }
.paper-grain { position: relative; }
.draft h4 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 0 0 10px; color: #0f1320; }
.draft .draft-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8a8f9c; margin-bottom: 12px; }
.draft section { margin: 0 0 12px; }
.draft section h5 { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #6d7280; margin: 0 0 3px; font-weight: 600; }
.draft section p { margin: 0; }
.draft .prob { text-decoration: underline wavy var(--problem); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; position: relative; background: rgba(255,107,107,.08); border-radius: 2px; }
.draft .prob:hover::after, .draft .prob:focus::after {
  content: attr(data-why); position: absolute; left: 0; top: calc(100% + 6px); z-index: 5;
  background: var(--ink); color: var(--text); font-size: 12px; line-height: 1.4; padding: 8px 10px; border-radius: 8px; width: 240px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); text-decoration: none; font-family: var(--body);
}
.draft .vague { color: #7a7f8c; }
.draft .stamp {
  display: inline-block; transform: rotate(-3deg); margin: 0 0 10px; vertical-align: middle;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border: 1.5px solid; border-radius: 4px; opacity: 0; transition: opacity .4s;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.9'/%3E%3C/filter%3E%3Crect width='90' height='90' fill='%23000' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.9'/%3E%3C/filter%3E%3Crect width='90' height='90' fill='%23000' filter='url(%23m)'/%3E%3C/svg%3E");
  text-shadow: .3px .2px 0 currentColor;
}
.draft h4 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.draft .stamp.ok { color: #1f8a4c; border-color: #1f8a4c; opacity: 1; }
.draft .stamp.bad { color: var(--problem); border-color: var(--problem); opacity: 1; }
.draft.stale { filter: sepia(.7) contrast(.9); background: #efe9dc; }
.draft.stale::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

/* ---------- switches, sliders, inputs ---------- */
.switch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; transition: border-color .2s, color .2s; }
.switch .knob { width: 34px; height: 20px; border-radius: 10px; background: var(--line); position: relative; transition: background .25s; flex: none; }
.switch .knob::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .25s var(--ease), background .25s; }
.switch[aria-checked="true"] { color: var(--text); border-color: var(--c, var(--live)); }
.switch[aria-checked="true"] .knob { background: var(--c, var(--live)); }
.switch[aria-checked="true"] .knob::after { transform: translateX(14px); background: var(--ink); }
.switch.c-durable { --c: var(--durable); }
.switch.c-live { --c: var(--live); }
.switch.c-tool { --c: var(--tool); }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--line); border-radius: 2px; outline-offset: 6px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--text); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--line-2); cursor: grab; }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--text); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--line-2); cursor: grab; }
.range-row { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.range-row .val { min-width: 64px; text-align: right; color: var(--text); }

.field { display: grid; gap: 6px; }
.field label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.field input, .field textarea {
  width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 11px 13px; font: inherit; font-size: 15px; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); font-style: italic; }
.field input:focus, .field textarea:focus { border-color: var(--live); }

.choice { display: grid; gap: 10px; }
.choice button {
  text-align: left; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--muted);
  transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease);
}
.choice button:hover { color: var(--text); border-color: var(--text); transform: translateX(3px); }
.choice button[aria-pressed="true"] { color: var(--ink); background: var(--text); border-color: var(--text); }
.choice.row { grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 600px) { .choice.row { grid-auto-flow: row; } }

.pill { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.pill.good { color: var(--good); border-color: rgba(126,224,138,.4); }
.pill.bad { color: var(--problem); border-color: rgba(255,107,107,.4); }
.pill.warn { color: var(--durable); border-color: rgba(242,184,75,.4); }

/* ---------- drop zones ---------- */
.dropzone { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 14px; transition: border-color .2s, background .2s; }
.dropzone.over { border-color: var(--live); background: var(--live-dim); }
.dropzone.trap.over { border-color: var(--problem); background: var(--problem-dim); }

/* ---------- reveal / notes ---------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.show { opacity: 1; transform: none; }
.note { border-left: 2px solid var(--line-2); padding: 4px 0 4px 14px; color: var(--muted); font-size: 15px; }
.note.durable { border-color: var(--durable); }
.note.live { border-color: var(--live); }
.note.tool { border-color: var(--tool); }
.caveat { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: .02em; }

/* ---------- bottom bar ---------- */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 18px; gap: 12px;
  background: rgba(5,9,18,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); z-index: 20;
}
.bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bar-mark { color: var(--text); display: inline-flex; }
.bar-deck { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-deck b { color: var(--muted); font-weight: 500; }
.bar-mid { display: flex; align-items: center; gap: 10px; }
.bar-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); display: inline-grid; place-items: center; transition: background .2s, color .2s, opacity .2s; }
.bar-arrow:hover { background: var(--surface-2); color: var(--text); }
.bar-arrow[disabled] { opacity: .25; pointer-events: none; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.dots button::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--faint); background: transparent; transition: background .2s, border-color .2s, transform .2s; }
.dots button.seen::before { border-color: var(--live); box-shadow: 0 0 6px 0 rgba(79,140,255,.55); }
.dots button[aria-current="true"]::before { background: var(--text); border-color: var(--text); transform: scale(1.15); }
.dots button:hover::before { border-color: var(--text); }
.dots button[disabled] { opacity: .35; pointer-events: none; }
.bar-right { display: flex; justify-content: flex-end; }
.bar-map { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.bar-map:hover { color: var(--text); background: var(--surface-2); }
.key { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 4px; color: var(--faint); }
@media (max-width: 640px) {
  .bar { grid-template-columns: auto 1fr auto; padding: 0 12px; }
  .bar-deck { display: none; }
  .dots button { width: 18px; height: 18px; }
  .dots button::before { width: 8px; height: 8px; }
  .bar-map .key { display: none; }
}

/* ---------- map ---------- */
.map { position: fixed; inset: 0; z-index: 30; background: rgba(5,9,18,.975); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: grid; place-items: center; padding: 20px; animation: map-in .3s var(--ease); }
.map[hidden] { display: none; }
@keyframes map-in { from { opacity: 0; } to { opacity: 1; } }
.map-inner { width: min(100%, 1000px); max-height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.map-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: start; }
.map-head h2 { margin: 0; font-size: 28px; }
.map-head p { margin: 0; color: var(--muted); font-size: 14px; grid-column: 1; }
.map-close { grid-column: 2; grid-row: 1 / span 2; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.map-close:hover { color: var(--text); }
.map-svg { width: 100%; height: auto; max-height: calc(100vh - 180px); }
.map-svg .edge { stroke: var(--line-2); stroke-width: 1.5; fill: none; }
.map-svg .edge.seen { stroke: var(--muted); }
.map-svg .edge.door { stroke-dasharray: 4 5; }
.map-svg .edge-label { font-family: var(--display); font-style: italic; font-size: 13px; fill: var(--faint); }
.map-svg .edge-label.seen { fill: var(--muted); }
.map-svg .node { cursor: pointer; }
.map-svg .node circle { fill: var(--surface-2); stroke: var(--line-2); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.map-svg .node.seen circle { fill: var(--surface-2); stroke: var(--muted); }
.map-svg .node.current circle { fill: var(--text); stroke: var(--text); }
.map-svg .node.current .num { fill: var(--ink); }
.map-svg .node.locked { cursor: not-allowed; opacity: .45; }
.map-svg .node:hover:not(.locked) circle { stroke: var(--text); }
.map-svg .node .num { font-family: var(--mono); font-size: 13px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.map-svg .node .title { font-family: var(--display); font-size: 16px; fill: var(--text); text-anchor: middle; }
.map-svg .node .sub { font-family: var(--mono); font-size: 10.5px; fill: var(--faint); text-anchor: middle; letter-spacing: .06em; }
.map-svg .node .ring { fill: none; stroke: var(--live); stroke-width: 1; opacity: 0; }
.map-svg .node.current .ring { opacity: .6; animation: ring 2s ease-out infinite; }
@keyframes ring { from { r: 24; opacity: .6; } to { r: 40; opacity: 0; } }
.map-foot { text-align: center; }
.linkish { color: var(--faint); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--muted); }

/* ---------- misc ---------- */
.hr { height: 1px; background: var(--line); margin: 28px 0; border: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.typing::after { content: '▍'; animation: blink 1s steps(1) infinite; color: var(--live); }
@keyframes blink { 50% { opacity: 0; } }

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

/* ---------- the dark: anything unlit is an outline ---------- */
.unlit { fill: none; stroke: currentColor; opacity: .12; }
.halftone { position: relative; }
.halftone::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: radial-gradient(circle at 1px 1px, rgba(60,40,10,.9) .6px, transparent 1.2px);
  background-size: 3px 3px; mix-blend-mode: multiply; opacity: calc(var(--age, 0) * .35);
}

/* identity */
/* One light source per scene (lib/util.js roomLight()). Shared by decks 0 and 9. */
.room-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Light power follows sources. The original .stage .glow rule declares its own --lit,
   which shadows any value a deck sets on the .stage element (custom properties only
   inherit when nothing in the cascade targets the element itself). Move the default up
   to .stage and have .glow inherit, so stage.style.setProperty('--lit', ...) actually
   reaches the gradient. Decks that never set --lit keep the original .35 default. */
.stage { --lit: .35; }
.stage .glow { --lit: inherit; }

/* The call to action sits below the fold at 1440x900 on the tallest slides. Tighten the
   stage and slide vertical rhythm on short-viewport laptops. This rule comes after the
   earlier @media (min-width: 861px) and (max-height: 960px) block above the identity
   marker, so it wins on equal specificity and further reduces --stage-h and slide padding. */
@media (min-width: 861px) and (max-height: 960px) {
  :root { --stage-h: 420px; }
  .slide { padding-top: 22px; padding-bottom: 22px; }
}

/* Map illegible at 375 wide (engine-level, shared with the sibling explorable). Free up
   vertical space, raise the SVG text sizes in user units, and thicken node strokes so the
   constellation stays legible without pinch-zoom. */
@media (max-width: 640px) {
  .map-head p { display: none; }
  .map-svg { max-height: calc(100vh - 120px); }
  /* the SVG is scaled to a ~0.335 fraction of its 1000-unit viewBox at 375px wide (the
     narrow dimension, not the height budget above, is what actually limits it), so a
     font-size that looks reasonable in user units can still render under 11px on
     screen. Measured live at the mobile preset: 26px rendered a 10.5px title bounding
     box, short of the 11px bar, so title goes to 30px (renders 14px, comfortably
     clear). Edge-label stays at 20px rather than scaling with it: it carries full
     sentences, not short node names, and growing it further starts colliding with
     neighbouring node titles on this fixed layout. */
  .map-svg .node .title { font-size: 28px; }
  .map-svg .node .num { font-size: 20px; }
  .map-svg .node .sub { font-size: 14px; }
  .map-svg .edge-label { font-size: 20px; }
  .map-svg .node circle { stroke-width: 3; }
}

/* Mobile dots: 18px is a small touch target. Bump to 24px. */
@media (max-width: 640px) {
  .dots button { width: 24px; height: 24px; }
}

/* architecture: concrete. value only, never a hue (creative-direction.md section 3).
   A third material alongside glass (what the model reads) and paper (what a person
   writes): concrete is only ever the thing that holds other things up. Reused directly
   by decks/4-build.js (the workspace wall and root slab), decks/2-brutalism.js (the
   tower and the footing) and decks/9-yours.js (the reader's plinth). */
:root {
  --slab-body: #0e1425;   /* the mass */
  --slab-face: #1b2338;   /* the edge the light lands on */
  --slab-edge: #2b3653;   /* the exposed edge of a lit slab */
  --slab-lit:  #232d47;   /* the mass, once the room is up */
  --settle: cubic-bezier(.3, 1.35, .5, 1);
}
.slab {
  position: relative; border-radius: 2px;
  background: var(--slab-body);
  box-shadow: inset -1px 0 0 var(--slab-face), -5px 4px 12px -8px rgba(0,0,0,.9);
}
.slab.in { background: var(--slab-lit); box-shadow: inset -1px 0 0 var(--slab-edge), -5px 4px 12px -8px rgba(0,0,0,.9); }
.slab::after {                                  /* the tooth: the paper-grain feTurbulence
   asset reused at low opacity in overlay blend instead of multiply, so concrete
   scatters light where paper absorbs it */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The workspace tree reads as slabs everywhere it is drawn: build, map and shared all
   call the same makeTree(), so this is scoped to .tree .tnode (two classes) rather than
   duplicated in each deck's own css('<id>', ...) block. That beats TREE_CSS's own
   .tnode rule (one class) on specificity, so decks 3 and 7 inherit the slab look without
   either file changing. Concrete never takes a hue, so the kind-durable / kind-live /
   kind-tool accent colours on .in keep meaning exactly what they meant before. */
.tree .tnode {
  position: relative; border-radius: 2px; border: 0;
  background: var(--slab-body);
  box-shadow: inset -1px 0 0 var(--slab-face), -5px 4px 12px -8px rgba(0,0,0,.9);
}
.tree .tnode::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tree .tnode.in {
  background: var(--slab-lit);
  box-shadow: inset -2px 0 0 var(--c), -5px 4px 12px -8px rgba(0,0,0,.9), 0 0 20px -12px var(--c);
}

/* the fourth and final motion verb: a block settles, when structure is created. It
   overshoots by 1px and the shadow shortens as it lands, because a block has mass and
   paper does not. Fires only at three named moments: Ridgeway's folder created on
   build/2, the tower put back on brutalism/1, and the reader's own map landing on its
   plinth on yours/2. Every caller guards it with ctx.reduced, same as the other verbs. */
@keyframes slab-settle {
  0%   { transform: translateY(-14px); box-shadow: 0 22px 26px -14px rgba(0,0,0,.9); }
  70%  { transform: translateY(1px);   box-shadow: 0 7px 13px -9px rgba(0,0,0,.9); }
  100% { transform: none;              box-shadow: 0 3px 8px -6px rgba(0,0,0,.9); }
}
.slab.settle { animation: slab-settle .42s var(--settle) both; }