/* Original welcome map component, using the live animation's DOM and sizing. */
@property --hl { syntax:'<color>'; inherits:false; initial-value:rgba(14,17,22,0); }
.stage { --insp:280px; --faint:#4d5057; --quote:"General Sans",sans-serif; --ease:cubic-bezier(.22,1.12,.36,1); --ease-s:cubic-bezier(.25,1,.3,1); }
/* ── the sample map: a stage holding the canvas, the dump panel (during the intro) and the side panel, like /tree ── */
.stage { position:relative; height:clamp(520px, calc(100vh - 150px), 760px); border-radius:22px; background:#fff; overflow:hidden; box-shadow:0 0 0 1px var(--hair), 0 40px 80px -50px rgba(14,17,22,.35); }
.stage-top { position:absolute; left:0; right:var(--insp); top:0; height:64px; z-index:6; display:flex; align-items:center; gap:12px; padding:0 18px 0 24px; }
.map-title { margin:0; font:600 27px/1 var(--title); letter-spacing:-.02em; white-space:nowrap; }
#replay { margin-left:auto; }
.canvas { position:absolute; left:0; right:var(--insp); top:64px; bottom:0; overflow:hidden; touch-action:pan-y; }
.world { position:absolute; left:0; top:0; width:1px; height:1px; transform-origin:0 0; will-change:transform; }
.world svg.links { position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none; }
.world path { fill:none; stroke-linecap:round; transition:stroke .5s; }
.nodes { position:absolute; left:0; top:0; }
.hint { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 13px/1.3 var(--sans); color:var(--faint); animation:hint-in .5s var(--ease) both; }
@keyframes hint-in { from { opacity:0; transform:translateY(6px); } }

/* nodes: the face carries the colour; two panes sit under it and fan out when the branch is folded */
.nd { position:absolute; left:0; top:0; transform-origin:50% 50%; will-change:transform, opacity; user-select:none; -webkit-user-select:none; cursor:pointer; }
.nd .face, .nd .pane { position:absolute; inset:0; border-radius:inherit; }
.nd .pane { z-index:-1; opacity:0; transition:transform .5s var(--ease), opacity .3s; }
.nd.folded .pane.p1 { opacity:.6; transform:translate(4px, 4px); }
.nd.folded .pane.p2 { opacity:.32; transform:translate(8px, 8px); }
.nd .lb { position:absolute; white-space:pre; pointer-events:none; transition:color .3s; }
.nd .face { transition:background-color .35s, box-shadow .2s; }
.nd.chip .face { box-shadow:0 1px 2px rgba(14,17,22,.08), 0 6px 16px -10px rgba(14,17,22,.35); }
.nd.root .face { box-shadow:0 1px 2px rgba(14,17,22,.2), 0 10px 22px -12px rgba(14,17,22,.6); }
.nd.leaf:hover .face, .nd.leaf.sel .face { background:var(--soft); }
.nd.chip:hover .face { box-shadow:0 1px 2px rgba(14,17,22,.1), 0 10px 22px -10px rgba(14,17,22,.42); }
.nd.sel .face { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ring), 0 8px 18px -10px rgba(14,17,22,.4) !important; }
.nd.dim { filter:saturate(.5) opacity(.28) blur(1px); }
.nd, .nd.dim { transition:filter .4s; }
/* fold: an arrow on a branch, shown on hover; folded, it carries how many are inside */
.nd .fold { position:absolute; top:50%; right:5px; height:20px; min-width:20px; margin-top:-10px; padding:0 4px; display:flex; align-items:center; justify-content:center; gap:3px; border-radius:7px;
  color:inherit; font:650 11px/1 var(--sans); opacity:0; transition:opacity .15s, background .15s; }
.nd .fold svg { transition:transform .35s var(--ease); }
.nd:hover .fold, .nd.folded .fold, .nd .fold:focus-visible { opacity:1; }
.nd .fold:hover { background:rgba(255,255,255,.28); }
.nd.branch .fold:hover { background:rgba(14,17,22,.06); }
.nd:not(.folded) .fold svg { transform:rotate(180deg); }
.nd .fold .n { display:none; padding:0 1px; } .nd.folded .fold .n { display:inline; }
.nd.flash .face { animation:flash .9s ease-out; }
@keyframes flash { 25% { box-shadow:0 0 0 3px rgba(var(--glow), .7), 0 0 22px 6px rgba(var(--glow), .35); } }
.nd.root.thinking .face { animation:breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow:0 0 0 9px rgba(14,17,22,.07); } }

/* a quote in flight: a little paper card in the topic's tint */
.fly { position:absolute; left:0; top:0; z-index:20; padding:5px 10px; border-radius:10px; font:400 12.5px/1.35 var(--quote); white-space:nowrap; pointer-events:none; will-change:transform, opacity;
  background:color-mix(in oklab, var(--c) 16%, #fff); color:color-mix(in oklab, var(--c) 55%, #0E1116);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px color-mix(in oklab, var(--c) 28%, transparent), 0 10px 24px -10px rgba(14,17,22,.45); }

/* the dump panel: the transcript lands, quotes are swiped, then they fly into the map */
.dump { position:absolute; left:16px; top:76px; bottom:16px; width:350px; z-index:8; display:flex; flex-direction:column; border-radius:20px; background:#fff; overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(14,17,22,.45), 0 0 0 1px rgba(14,17,22,.07); }
.dump-head { flex:none; padding:16px 20px 8px; }
.step { position:relative; height:20px; display:flex; align-items:center; gap:8px; overflow:hidden; font:650 13px/1 var(--sans); letter-spacing:.01em; }
.step .wave { flex:none; }
.step .slot { position:relative; flex:1; height:20px; }
.step .slot span { position:absolute; left:0; top:3px; white-space:nowrap; }
.step .slot span.work { color:transparent; background:linear-gradient(90deg, var(--ink) 35%, #A9AEB8 50%, var(--ink) 65%); background-size:250% 100%; -webkit-background-clip:text; background-clip:text; animation:shimmer 2.2s linear infinite; }
@keyframes shimmer { from { background-position:100% 0; } to { background-position:-150% 0; } }
.wave rect { fill:var(--ink); transform-box:fill-box; transform-origin:50% 50%; animation:bar .9s ease-in-out infinite; }
.wave rect:nth-child(2) { animation-delay:-.3s; } .wave rect:nth-child(3) { animation-delay:-.6s; } .wave rect:nth-child(4) { animation-delay:-.15s; }
@keyframes bar { 50% { transform:scaleY(.35); } }
.tx { position:relative; flex:1; overflow:auto; padding:4px 22px 40px; font:400 14px/1.62 var(--sans); color:#2E3440; scrollbar-width:none; }
.tx::-webkit-scrollbar { width:0; }
.tx .src { margin:14px 0 4px; font:650 10.5px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.tx .src:first-child { margin-top:4px; }
.tx p { margin:0 0 8px; }
.tx p .who { font-weight:650; color:#4B5260; }
.tx .w { opacity:0; transition:opacity .18s; } .tx .w.on { opacity:1; }
.tx .blk { opacity:0; }
.tx mark { color:inherit; border-radius:4px; padding:1px 0; background:linear-gradient(var(--hl), var(--hl)) no-repeat 0 0 / 0% 100%; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  transition:background-size 420ms cubic-bezier(.2,.9,.25,1), --hl 380ms ease; }
.tx mark.seen { --hl:rgba(14,17,22,.08); background-size:100% 100%; }
.tx mark.hit { --hl:color-mix(in oklab, var(--c) 22%, transparent); background-size:100% 100%; }

/* the side panel: the map, or the selected node and its quotes, tidy or as said */
.insp { position:absolute; right:0; top:0; bottom:0; width:var(--insp); overflow:auto; padding:24px 26px 40px; box-shadow:-1px 0 0 var(--hair); background:#fff; scrollbar-width:thin; }
.insp > * { animation:ins-in .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ins-in { from { opacity:0; transform:translateY(6px); } }
.insp .crumb { display:inline-flex; align-items:center; gap:6px; margin:0 0 6px -8px; padding:4px 8px; border-radius:8px; font:500 13px/1.2 var(--sans); color:var(--muted); }
.insp .crumb:hover { background:#F3F4F6; color:var(--ink); }
.insp h3 { margin:0; font:600 24px/1.15 var(--title); letter-spacing:-.02em; color:var(--hue, var(--ink)); text-wrap:balance; }
.insp .meta { margin:8px 0 0; font:400 14px/1.5 var(--sans); color:var(--muted); text-wrap:pretty; }
.insp .topics { list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.insp .topics button { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:9px 12px; border-radius:11px; text-align:left;
  background:var(--soft); color:var(--deep); font:650 14px/1.25 var(--sans); transition:background .15s, transform .3s var(--ease); }
.insp .topics button:hover { background:color-mix(in srgb, var(--hue) 20%, white); }
.insp .topics button:active { transform:scale(.98); transition-duration:.06s; }
.insp .topics small { font:500 12px/1 var(--sans); color:color-mix(in srgb, var(--deep) 70%, white); }
.insp .sub { display:block; margin:24px 0 2px; font:600 17px/1.25 var(--title); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.q { position:relative; margin:0; padding:8px 0 8px 16px; border-bottom:1px solid var(--hair); }
.q:last-child { border-bottom:0; }
.q::before { content:'\201C'; position:absolute; left:0; top:8px; font:600 17px/1 var(--quote); color:var(--hue); }
.q blockquote { position:relative; margin:0; font:400 13.5px/1.45 var(--quote); color:#2A2F37; letter-spacing:-.006em; text-wrap:pretty; }
.q blockquote b { font-weight:400; padding:0 1px; border-radius:2px; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:font-weight .25s, color .25s, background-size .35s var(--ease-s);
  background:linear-gradient(transparent 50%, color-mix(in srgb, var(--hue) 24%, transparent) 50%) no-repeat 0 0 / 0 100%; }
.q:not(.said) blockquote b { font-weight:550; color:var(--ink); background-size:100% 100%; } /* tidy: what the AI found interesting, highlighted */
.q .fl { display:inline-block; overflow:hidden; white-space:pre; vertical-align:bottom; max-width:var(--w, 10em); transition:max-width .42s var(--ease-s), opacity .3s; }
.q:not(.said) .fl { max-width:0; opacity:0; }
.q figcaption { display:flex; align-items:center; gap:8px; margin-top:4px; font:650 10px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.q figcaption .who { color:var(--muted); }
.q .as-said { margin-left:auto; padding:3px 7px; border-radius:6px; font:550 11.5px/1.2 var(--sans); letter-spacing:0; text-transform:none; color:var(--muted); box-shadow:inset 0 0 0 1px var(--hair); transition:background .15s, color .15s; }
.q .as-said:hover { color:var(--ink); background:#F3F4F6; }

.q.hot { background:var(--soft); box-shadow:0 0 0 8px var(--soft); border-radius:2px; }

/* three short lines under the map */

/* phones and narrow windows: the panels stack under the map */
@media (max-width:820px) {
  :root { --insp:0px; }
  .stage { height:auto; display:flex; flex-direction:column; border-radius:18px; }
  .stage-top { position:relative; right:0; height:auto; min-height:56px; padding:10px 12px 8px 16px; flex-wrap:wrap; row-gap:4px; }
  .stage-top .hint { order:5; flex-basis:100%; white-space:normal; }
  .map-title { font-size:22px; }
  .dump { position:relative; left:auto; top:auto; bottom:auto; width:auto; height:230px; margin:0 10px 6px; transition:height .5s var(--ease-s), margin .5s var(--ease-s), opacity .3s; }
  .dump.shut { height:0; margin:0 10px; opacity:0; }
  .canvas { position:relative; top:auto; right:auto; height:440px; order:3; }
  .insp { position:relative; right:auto; top:auto; bottom:auto; width:auto; order:4; padding:20px 18px 26px; box-shadow:0 -1px 0 var(--hair); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .step .slot span.work, .wave rect, .nd.root.thinking .face { animation:none; }
  .q .fl, .nd .pane, .tx mark { transition:none; }
}


.organize-row { grid-template-columns:1fr; gap:24px; }
.organize-row .guide-copy p { max-width:620px; }
.stage { height:660px; border-radius:4px; box-shadow:0 0 0 1px var(--hair); }
.stage #replay { flex:none; font-size:14px; }
.stage .hint { display:none; }
.stage .dump { border-radius:4px; }
.stage .fly { font-size:14px; border-radius:3px; }
.stage .tx .src { font-size:14px; text-transform:none; letter-spacing:0; }
.stage .q blockquote { font-size:15px; }
.stage .q figcaption, .stage .q .as-said { font-size:14px; letter-spacing:0; text-transform:none; }
.stage .tx mark.seen { --hl:color-mix(in srgb, var(--c) 58%, transparent); }
.stage .tx mark.hit { --hl:color-mix(in srgb, var(--c) 58%, transparent); }
@media(max-width:820px) { .stage { --insp:0px; height:auto; } }

.welcome-intro .sample { min-width:0; }
.welcome-intro .stage { --insp:0px; height:600px; }
.stage .stage-top { padding:12px 16px; right:0; }
.stage .map-title { font-size:18px; }
.stage-controls { display:flex; gap:4px; margin-left:auto; }
.stage .dump { width:260px; left:8px; box-shadow:0 0 0 1px var(--hair); }
.stage .dump-head { padding:12px 14px 6px; }
.stage .tx { padding:4px 14px 24px; }
.stage .insp { display:none; }
.stage .canvas { right:0; }
@media(max-width:820px) { .welcome-intro .stage { height:auto; } .stage .dump { width:auto; left:auto; height:230px; } .stage .dump.shut { height:0; } }

/* The hero map lives directly on the page, like the Words canvas. */
.welcome-intro .stage { background:transparent; box-shadow:none; border:0; border-radius:0; }
.stage .stage-top { padding:0; height:40px; }
.stage .canvas { top:44px; }
.stage .dump { background:transparent; box-shadow:none; border-radius:0; top:48px; }
.stage .dump-head { padding-top:0; }
.stage .tx .src { display:none; }
.stage .nd .face, .stage .nd:hover .face { box-shadow:none; }
.stage .nd.leaf:hover .face, .stage .nd.leaf.sel .face { background:inherit; }
@media(max-width:820px) { .stage .dump { top:auto; } .stage .canvas { top:auto; } }

.stage #hint { display:none; }

/* The final map retains its source words beneath the leaf that holds them. */
.stage .hero-quote { display:none; position:absolute; left:0; top:100%; width:225px; margin:12px 0 0; padding:0; border:0; color:var(--ink); font:400 14px/1.5 var(--sans); white-space:normal; cursor:text; user-select:text; }
.stage.reading-quotes .hero-quote { display:block; }
.stage .hero-quote mark { background:var(--quote-accent); color:var(--ink); padding:1px 0; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.stage.reading-quotes .canvas { overflow:visible; }
@media(max-width:820px) { .stage .hero-quote { width:210px; } }

/* Phones (welcome.js phoneLayout): the hero map as a small top-down tree of flat blocks with straight lines, its quotes under it.
   No fold arrows, counters or stacked panes; the canvas grows to the map's height. */
@media(max-width:820px) {
  .stage .nd .pane, .stage .nd .fold { display:none !important; }
  .stage .canvas { height:auto; min-height:200px; transition:height .45s var(--ease-s); }
  .stage .step { font-size:14px; font-weight:600; }
  .stage .hero-quote { line-height:1.55; }
}
@media(max-width:820px) and (prefers-reduced-motion: reduce) { .stage .canvas { transition:none; } }
@media(max-width:820px) { .stage .nd.sel .face { box-shadow:none !important; outline:2px solid var(--ink); outline-offset:2px; } }
/* card flip (welcome.js flipCard): a turning card changes colour at once, edge-on, not over a fade */
.nd.turning .face, .nd.turning .pane { transition:none; }

@media (hover:hover) {
  .stage .nd:hover .face { box-shadow:0 2px 3px rgba(14,17,22,.12), 0 9px 18px -9px rgba(14,17,22,.35); }
}
.stage .nd.dragging { cursor:grabbing; z-index:3; }