@import url("/shapeshift/takes.css");
/* The landing page teaches the Words map through small, playable examples. */
:root { --ink:#0e1116; --muted:#4d5057; --hair:#e7e5e0; --sans:"General Sans", ui-sans-serif, system-ui, sans-serif; --title:"Instrument Sans", ui-sans-serif, system-ui, sans-serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { overscroll-behavior-x:none; } /* a sideways trackpad swipe pans, never goes Back */
body { margin:0; background:#f9f8f4; color:var(--ink); font:400 16px/1.5 var(--sans); -webkit-font-smoothing:antialiased; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
#bar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc(50vw - 570px)); }
.logo { display:inline-flex; color:var(--ink); }
.logo .lw { width:190px; height:auto; }
.pill { display:inline-flex; padding:7px 14px; border:1px solid var(--hair); border-radius:5px; text-decoration:none; background:#fff; font-size:14px; }
main { max-width:1180px; margin:auto; padding:0 20px; }
.welcome-intro { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:72px; padding:64px 28px; }
.welcome-intro h1 { margin:0; font:500 clamp(38px,4.5vw,60px)/1.06 var(--title); letter-spacing:-.045em; }
.welcome-start p { margin:0 0 22px; font-size:18px; line-height:1.5; }
.start-link { display:inline-flex; align-items:center; text-decoration:none; padding:16px 30px; border-radius:4px; background:#202124; color:#fff; font:500 18px/1.2 var(--sans); }
.start-link:hover { background:#44464b; }
.interaction-guide { padding:6px 46px; background:#fff; border-radius:5px; }
.guide-row { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(0,1.4fr); gap:50px; align-items:center; min-height:310px; padding:28px 0; }
.guide-row + .guide-row { border-top:1px solid var(--hair); }
.guide-copy h2 { margin:0 0 12px; font:500 26px/1.2 var(--title); letter-spacing:-.025em; }
.guide-copy p { margin:0; max-width:340px; font-size:16px; line-height:1.55; color:var(--muted); }
.guide-action { margin-top:16px; min-height:32px; padding:4px 0; font-size:14px; text-decoration:underline; text-decoration-color:#aaa8a2; text-underline-offset:5px; }
.guide-action:hover { text-decoration-color:currentColor; }
.guide-demo { position:relative; min-width:0; height:280px; overflow:hidden; }
.mini-map { position:absolute; inset:0; }
.mini-map > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.mini-map path { fill:none; stroke:#1e2125; stroke-width:1.3; vector-effect:non-scaling-stroke; }
.demo-node { position:absolute; transform:translate(-50%,-50%); max-width:43%; padding:5px 7px; border-radius:0; font:500 15px/1.2 var(--title); white-space:normal; text-align:left; z-index:1; }
.demo-node.root { font-size:18px; }
.demo-node:hover { outline:1px solid currentColor; outline-offset:2px; }
.demo-node.selected { outline:none; }
.dump-input { position:absolute; inset:35px 14px; padding:20px; background:#f4f1e9; border-radius:4px; }
.dump-input p { margin:0 0 14px; font-size:16px; }
#demo-create { padding:6px 12px; background:var(--ink); color:#fff; border-radius:3px; font-size:14px; }
.demo-loading { position:absolute; inset:0; display:grid; place-items:center; }
.loading-ring { width:25px; height:25px; border:2px solid #deddd8; border-top-color:var(--ink); border-radius:50%; animation:loading-turn .8s linear infinite; }
@keyframes loading-turn { to { transform:rotate(360deg); } }
.demo-cursor { position:absolute; left:0; top:0; width:21px; height:26px; z-index:5; pointer-events:none; opacity:0; filter:drop-shadow(0 1px 1px #fff); }
.demo-cursor path { fill:#202124; stroke:#fff; stroke-width:1.5; stroke-linejoin:round; }
.guide-demo.auto-playing .demo-cursor { opacity:1; }
.explore-quotes { position:absolute; left:48%; right:0; top:34px; background:#fff; z-index:2; padding:4px 8px; }
.explore-quotes blockquote { margin:0 0 16px; font-size:15px; line-height:1.5; }
.explore-quotes mark { color:inherit; background:var(--quote-highlight); padding:0 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.customize-demo .mini-map { bottom:38px; }
.customize-actions { position:absolute; left:0; right:0; bottom:2px; display:flex; justify-content:center; gap:14px; }
.customize-actions button { padding:5px 0; font-size:14px; text-decoration:underline; text-decoration-color:#aaa8a2; text-underline-offset:4px; }
.customize-actions button.active { font-weight:600; text-decoration-color:var(--ink); }
.customize-actions button:disabled { opacity:.5; cursor:default; }
.welcome-end { display:flex; flex-direction:column; align-items:center; gap:36px; padding:150px 20px 180px; text-align:center; }
.welcome-end h2 { margin:0; font:500 40px/1.1 var(--title); letter-spacing:-.04em; }
@media(max-width:820px) {
 .welcome-intro { padding:42px 4px; gap:24px; }
 .welcome-start p { font-size:16px; }
 .interaction-guide { padding:0 24px; }
 .guide-row { grid-template-columns:1fr; gap:20px; padding:30px 0; }
 .guide-copy p { max-width:480px; }
 .guide-demo { width:100%; max-width:560px; justify-self:center; }
}
@media(max-width:520px) {
 main { padding:0 16px; }
 #bar { padding:0 20px; }
 .logo .lw { width:150px; }
 .welcome-intro { grid-template-columns:1fr; padding:30px 4px 38px; gap:20px; }
 .welcome-intro h1 { font-size:43px; }
 .welcome-start p { margin-bottom:18px; }
 .interaction-guide { padding:0 18px; }
 .guide-copy h2 { font-size:25px; }
 .guide-demo { height:300px; }
 .demo-node { font-size:14px; padding:5px; }
 .demo-node.root { font-size:16px; }
 .dump-input { inset:25px 0; padding:16px; }
 .explore-demo.reading { height:450px; }
 .explore-demo.reading .mini-map { height:220px; }
 .explore-quotes { top:220px; left:0; right:0; padding:8px 0; }
 .customize-actions { gap:12px; }
}
@media(prefers-reduced-motion:reduce) {
 *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

/* The transcript stays readable before its phrases gather into the map. */
.dump-demo { height:460px; }
.dump-input { inset:8px 0 auto; padding:18px; }
.dump-input p { line-height:1.65; }
.dump-input mark { color:inherit; background:transparent; box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:background 500ms; }
.dump-input mark.highlighted { background:var(--phrase-color); }
.dump-fragment { position:absolute; z-index:4; pointer-events:none; font:400 16px/1.65 var(--sans); transform-origin:center; }
.dump-demo .demo-cursor { display:none; }
.explore-demo.reading { height:440px; }
.explore-demo.reading .mini-map { height:100%; }
.explore-quotes { inset:0; padding:0; background:transparent; pointer-events:none; }
.explore-quotes blockquote { position:absolute; margin:0; padding:0 3px; font-size:15px; }
@media(max-width:520px) {
  .dump-demo { height:650px; }
  .dump-input { padding:12px; }
  .explore-demo.reading { height:530px; }
  .explore-quotes { inset:0; }
}

.dump-fragment { left:0; top:0; width:max-content; max-width:190px; padding:5px 8px; border-radius:2px; font-size:15px; line-height:1.4; }

/* One combined headline beside the main animation, followed by three features. */
#bar { justify-content:flex-end; height:52px; max-width:1400px; margin:auto; padding:0 32px; }
main { max-width:1400px; }
.welcome-intro { grid-template-columns:minmax(280px,.7fr) minmax(0,1.6fr); align-items:start; gap:48px; padding:36px 12px 60px; }
.welcome-intro h1 { font:500 clamp(42px,4vw,60px)/1.1 var(--title); margin:0 0 24px; letter-spacing:-.045em; }
.headline-brand { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.headline-brand .logo-symbol { display:block; width:1.45em; height:auto; flex:none; overflow:visible; }
.headline-brand .logo-wordmark { display:block; width:3.75em; height:auto; flex:none; }
.welcome-start p { margin:0 0 24px; max-width:320px; font-size:18px; }
.animation-control { display:grid; place-items:center; flex:none; width:34px; height:34px; padding:6px; background:transparent; border-radius:4px; color:var(--ink); }
.animation-control:hover { background:#eeede8; }
.demo-replay { position:absolute; top:0; right:0; z-index:6; }
.call-demo { height:370px; padding:30px 16px 0; }
.call-topic { display:table; margin:0 0 22px; padding:4px 7px; background:#EEF7B5; font:500 18px/1.3 var(--title); }
.call-transcript { display:flex; flex-direction:column; gap:18px; }
.call-turn p { margin:5px 0 0; font-size:16px; line-height:1.5; }
.call-speaker, .call-speaker-label { display:inline-block; padding:3px 6px; font:500 15px/1.3 var(--title); color:var(--ink); background:#f0efeb; }
.call-speaker:hover, .call-speaker[aria-pressed="true"] { outline:1px solid currentColor; outline-offset:2px; }
.call-turn mark { color:inherit; background:transparent; }
.call-turn.active mark { background:#EEF7B5; }
#sound .i-off, #sound[aria-pressed="false"] .i-on { display:none; }
#sound[aria-pressed="false"] .i-off { display:block; }
@media(max-width:1000px) { .welcome-intro { grid-template-columns:1fr; gap:32px; } .welcome-start p { max-width:520px; }  }
@media(max-width:520px) { .welcome-intro { padding:22px 4px 40px; } .welcome-intro h1 { font-size:44px; }  .call-demo { height:440px; padding:32px 0 0; } }

@media(max-width:520px) { #bar { padding:0 24px; } .headline-brand { gap:6px; } }

/* The features: numbered steps on the left that play one after another on the example map at the right. The playing step opens to its
   description and a line under it fills as it plays; any step can be chosen. */
.feature-carousel { display:grid; grid-template-columns:minmax(260px,.62fr) minmax(0,1.4fr); gap:16px 56px; padding:40px 12px 0; align-items:center; }
.feature-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.feature-steps li > button { display:flex; align-items:baseline; gap:14px; width:100%; padding:10px 0; text-align:left; font:500 22px/1.25 var(--title); letter-spacing:-.02em; color:var(--ink); }
.feature-steps .n { flex:none; width:18px; font:500 16px/1 var(--sans); letter-spacing:0; font-variant-numeric:tabular-nums; }
.feature-steps li:not(.on) > button { color:#6a6c71; } .feature-steps li:not(.on) > button:hover { color:var(--ink); }
.feature-steps .more { display:grid; grid-template-rows:0fr; transition:grid-template-rows 480ms cubic-bezier(.2,.8,.25,1); padding-left:32px; }
.feature-steps .more > * { min-height:0; }
.feature-steps li.on .more { grid-template-rows:1fr; }
.feature-steps .more { overflow:hidden; }
.feature-steps p { margin:2px 0 12px; max-width:330px; font:400 17px/1.55 var(--sans); opacity:0; transition:opacity 300ms ease 120ms; }
.feature-steps li.on p { opacity:1; }
.feature-steps .bar { display:block; height:2px; margin:0 0 10px; max-width:330px; background:var(--ink); transform-origin:0 50%; scale:0 1; }
.feature-steps li:not(.playing) .bar { visibility:hidden; }
.feature-demo { position:relative; min-width:0; height:480px; }
#feature-map { position:absolute; inset:48px 0 36px; }
#feature-map>svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#feature-map path { stroke:var(--edge, var(--ink)); stroke-width:3; fill:none; stroke-linecap:round; } /* as on the map: heaviest at the centre, a step lighter below a topic */
#feature-map path[data-edge="next"] { stroke-width:2; }
#feature-map path.cut { stroke:#D94B37; stroke-width:3; stroke-dasharray:.04 .025; }
#feature-map path.edge-draft { stroke-dasharray:6 5; }
#feature-map path.edge-half { stroke-dasharray:1 1; }
#feature-map path.edge-splinter { stroke-width:2; }
#feature-map path.feature-trail { stroke:#D94B37; stroke-opacity:.22; stroke-width:16; }
#feature-map circle.feature-flash { fill:none; stroke:#D94B37; stroke-width:2; transform-box:fill-box; transform-origin:center; }
.feature-node { position:absolute; padding:4px 6px; white-space:nowrap; font:400 25px/1.3 var(--title); background:var(--node-color); color:#111; border:0; border-radius:0; cursor:pointer; z-index:2; }
.feature-node.root { color:#fff; font-size:29px; }
.feature-node.dragging { z-index:3; box-shadow:0 18px 30px -14px rgba(14,17,22,.45); }
.feature-node:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.feature-ring { position:absolute; z-index:1; border:2px solid #202124; pointer-events:none; }
.feature-ripple { position:absolute; z-index:7; width:44px; height:44px; margin:-22px 0 0 -22px; border:2px solid; border-radius:50%; pointer-events:none; }
.feature-quote { position:absolute; width:210px; max-width:42%; margin:0; padding:0; border:0; font:400 15px/1.5 var(--sans); color:var(--ink); z-index:1; }
.feature-quote mark { color:#111; padding:1px 2px; background-repeat:no-repeat; background-size:100% 100%; background-color:transparent; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.feature-speaker { font:500 1em/1 var(--title); letter-spacing:-.005em; color:var(--ink); } /* the speaker's first name, as in the map's quotes */
.feature-pop { position:absolute; z-index:4; display:flex; align-items:center; gap:8px; white-space:nowrap; font:400 15px/1.4 var(--sans); }
.feature-pop button { padding:7px 12px; border:1px solid var(--ink); border-radius:4px; background:#fff; font:500 15px/1.3 var(--sans); color:var(--ink); }
.feature-pop button:hover { background:#f0efea; }
.feature-pop button.solid { background:var(--ink); color:#fff; }
.feature-pop button.danger { border-color:#D94B37; color:#B23A28; }
/* a proposal's Undo: plain text beside the ink Keep */
.feature-pop button.plain { border-color:transparent; background:none; }
.feature-pop button.plain:hover { background:#f0efea; }
.feature-field { min-width:250px; min-height:36px; padding:7px 12px; border:1px solid #c9c7c0; border-radius:4px; background:#fff; color:var(--ink); }
.feature-field[data-placeholder]:empty::before { content:attr(data-placeholder); color:#5f6166; }
.feature-pop.as-dump { flex-direction:column; align-items:flex-start; gap:12px; white-space:normal; }
.feature-pop.as-dump .feature-field { width:300px; min-height:66px; font-size:16px; line-height:1.5; }
.feature-field mark { color:inherit; padding:1px 0; background-repeat:no-repeat; background-size:100% 100%; background-color:transparent; }
.feature-fly { position:absolute; z-index:5; padding:2px 4px; font:400 16px/1.5 var(--sans); pointer-events:none; }
/* selecting, as on the map: a soft painted trail (on this canvas) and the pointer as a brush in the nearest word's colour */
.feature-paint { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
.feature-demo .demo-cursor .brush-tip { display:none; position:absolute; left:-13px; top:-13px; }
.feature-demo .demo-cursor.brush svg:first-child { display:none; }
.feature-demo .demo-cursor.brush .brush-tip { display:block; }
.feature-demo .demo-cursor { z-index:8; transition:opacity .25s; }
.feature-demo .demo-cursor.on { opacity:1; }
.feature-demo .demo-cursor svg { display:block; transform-origin:2px 2px; }
@media(max-width:1000px) { .feature-carousel { grid-template-columns:1fr; gap:8px; } .feature-demo { max-width:760px; width:100%; justify-self:center; } .feature-steps { order:2; max-width:560px; width:100%; justify-self:center; margin-top:28px; } .feature-steps p, .feature-steps .bar { max-width:none; } }
@media(max-width:520px) { .feature-carousel { padding:24px 4px 0; } .feature-demo { height:520px; } .feature-steps li > button { font-size:20px; padding:9px 0; } .feature-steps p { font-size:16px; } #feature-map { inset:44px 0 20px; } .feature-node { font-size:17px; min-height:32px; } .feature-node.root { font-size:19px; } .feature-quote { font-size:14px; width:160px; max-width:46%; } .feature-pop.as-dump .feature-field { width:168px; min-width:0; font-size:15px; } .feature-field { min-width:150px; } .welcome-end { padding:96px 12px 120px; } .welcome-end h2 { font-size:34px; } }
.stage .canvas { bottom:52px; }
@media(max-width:820px) { .stage .canvas { bottom:auto; } }
/* 2026-10-16: no selection outlines in the hero animation (a ring with a gap showed the line underneath); a reconnect target reads by a richer fill */
.stage .nd.sel .face, .nd.sel .face { box-shadow:none !important; outline:none !important; }
.feature-node.target { outline:none; filter:saturate(1.6) brightness(.94); }
/* 2026-10-22: the demo selects and proposes as the map does: a selected word wears a thin ink outline right on its block (no gap for a line
   to show through); a proposal's outline is ink a little off the block */
.feature-node.selected { outline:none; box-shadow:0 0 0 2px var(--ink); }
.feature-node.proposed { outline:none; box-shadow:0 0 0 3px #f9f8f4, 0 0 0 5px #202124; }
/* the second dump's new quotes: their phrase swept in fully in the topic's colour, and their words lifted for a moment */
.stage .hero-quote.fresh mark { background-image:linear-gradient(var(--quote-accent), var(--quote-accent)); background-repeat:no-repeat; background-size:100% 100%; animation:fresh-sweep 900ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes fresh-sweep { from { background-size:0% 100%; } }
.stage .nd.fresh .face { animation:fresh-lift 1600ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes fresh-lift { 0%, 100% { transform:none; } 30% { transform:translateY(-4px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .stage .hero-quote.fresh mark, .stage .nd.fresh .face { animation:none; } }
/* the top bar: About and Sign in as plain ink text, no boxes (2026-10-16) */
#bar .bar-r { display:flex; align-items:center; gap:28px; }
.bar-link { padding:8px 0; font:500 16px/1 var(--sans); color:var(--ink); text-decoration:none; text-underline-offset:4px; }
.bar-link:hover, .bar-link[aria-current="page"] { text-decoration:underline; }
/* About: one readable column, the welcome's two faces, the same ink CTA at the end */
.about .home { display:inline-flex; color:var(--ink); text-decoration:none; }
.about .home .headline-brand { display:inline-flex; align-items:center; gap:6px; }
.about .home .logo-symbol { width:46px; height:auto; } .about .home .logo-wordmark { width:96px; height:auto; }
.about-main { max-width:680px; padding:72px 24px 140px; }
.about-main h1 { margin:0 0 40px; font:500 clamp(38px,4.5vw,56px)/1.06 var(--title); letter-spacing:-.04em; }
.about-main p { margin:0 0 24px; font:400 19px/1.65 var(--sans); }
.about-main p a { text-underline-offset:3px; }
.about-main .start-link { margin-top:24px; }
@media(max-width:520px) { .bar-link { font-size:15px; } #bar .bar-r { gap:20px; } .about-main { padding:40px 20px 96px; } .about-main p { font-size:17px; } }
.about #bar { justify-content:space-between; }
/* About is the map (2026-10-17), compact and nodes only (2026-10-19: "too fanned out and big", "make the quotes appear on click, just
   show the nodes"). Four columns read left to right; a word's quote opens under it on click, one at a time. Lines run from a word's right
   side to the next word's left side, so none crosses a quote. A label longer than its column wraps to two even lines (2026-10-22: her own
   statements as labels). Below 1140px it stacks: indent and colour carry the tree. */
.about-only-map { max-width:1240px; padding:40px 24px 120px; }
.about-only-map .am-title { margin:0 0 40px; font:500 clamp(38px,4.5vw,56px)/1.06 var(--title); letter-spacing:-.04em; }
.am-tree { --gap:44px; --pw:240px; --lw:300px; --gw:290px; position:relative; display:grid; grid-template-columns:max-content 1fr; column-gap:var(--gap); align-items:center; margin-bottom:56px; }
.am-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.am-lines path { fill:none; stroke:var(--ink); stroke-linecap:round; stroke-linejoin:round; }
.am-rootcol, .am-branches, .am-branch, .am-kids, .am-leaf, .am-own { position:relative; z-index:1; }
.am-node { display:inline-block; max-width:100%; padding:5px 9px; border:0; border-radius:0; white-space:normal; text-wrap:balance; text-align:left; font:500 17px/1.25 var(--title); letter-spacing:-.01em; }
.am-root { font-size:24px; background:#0E1116; color:#fff; white-space:nowrap; } /* the centre word is ink, as on the welcome maps (2026-10-29) */
.am-node { user-select:none; -webkit-user-select:none; } /* (a drag never starts a text selection) */
.am-node.am-dragging { cursor:grabbing; z-index:3; position:relative; }
.am-parent { font-size:19px; }
.am-grand .am-node { font-size:16px; }
button.am-node { cursor:pointer; transition:filter .15s; }
@media (hover:hover) { button.am-node:hover { filter:brightness(.95); } }
.am-branches { display:flex; flex-direction:column; gap:28px; }
.am-branch { display:grid; grid-template-columns:var(--pw) 1fr; column-gap:var(--gap); align-items:center; }
.am-kids { display:flex; flex-direction:column; gap:10px; }
.am-kids > .am-leaf:has(> .am-sub) { display:grid; grid-template-columns:var(--lw) 1fr; column-gap:var(--gap); align-items:center; }
.am-sub { display:flex; flex-direction:column; gap:10px; }
.am-own { width:var(--lw); }
.am-grand .am-own { width:var(--gw); }
.am-tree blockquote { margin:14px 0 24px; font:400 15px/1.5 var(--sans); color:var(--ink); } /* 2026-10-22: "the quotes and the nodes are too close to each other": clear space above and below an open quote */
.am-own:has(> button[aria-expanded="true"]) { margin-top:12px; } /* the open word stands apart from the word above it too */
.am-tree mark { color:inherit; padding:1px 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
@media (max-width:1279px) { .am-tree { --gap:40px; --pw:240px; --lw:270px; --gw:250px; } }
@media (max-width:1139px) {
  .about-only-map .am-title { margin-bottom:28px; }
  .am-tree, .am-branch, .am-kids > .am-leaf:has(> .am-sub) { grid-template-columns:1fr; row-gap:8px; }
  .am-rootcol { justify-self:start; }
  .am-branches { gap:18px; margin-top:12px; padding-left:20px; }
  .am-kids, .am-sub { gap:8px; padding-left:20px; }
  .am-own, .am-grand .am-own { width:auto; max-width:420px; }
}
@media (max-width:520px) { .about-only-map { padding:28px 20px 96px; } }
/* The CTA sits centred under the map. Hovered, a few small words grow out of it on short lines, like a word's children out of their parent
   (2026-10-22), and fold back into it when the pointer leaves. Pointers that hover only; reduced motion shows none. */
.am-cta { position:relative; display:flex; justify-content:center; }
.am-cta .start-link { position:relative; z-index:1; margin-top:0; }
.am-burst { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.am-burst svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.am-burst path { fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; }
.am-pop { position:absolute; left:0; top:0; padding:4px 8px; white-space:nowrap; font:500 15px/1.25 var(--title); letter-spacing:-.01em; color:var(--ink); }
/* Phones (2026-10-22, Defne: "on mobile that tree is too low; 'You catch my drift' takes up too much space"): the headline a step smaller and
   tighter (still the loudest thing), less air around it and the CTA, so the sample tree starts in the first screen. */
@media(max-width:520px) {
  #bar { height:44px; }
  .welcome-intro { padding:6px 4px 32px; gap:14px; }
  .welcome-intro h1 { font-size:34px; line-height:1.04; margin:0 0 12px; }
  .welcome-start p { margin:0 0 16px; font-size:16px; line-height:1.45; }
  .welcome-start .start-link { padding:13px 24px; font-size:16px; }
}

.feature-node.take { min-height:32px; background:#202124; color:#fff; font-size:16px; padding:6px 9px; }
.feature-take-quote { z-index:3; background:var(--page, #f9f8f4); padding:8px 12px; border:1px solid var(--ink); }
.feature-take-quote .take-quote mark { background:var(--take-mark, #FFD43B); color:#202124; }

.feature-node.take .tk-label { display:inline-flex; align-items:center; gap:7px; }
.feature-node.take .tk-icon { display:inline-grid; place-items:center; width:1em; height:1em; line-height:1; }
/* the map's blocks (what stands out): an unusual take in its word's colour, a question in ink; the card beside it (note-card.css) */
.feature-node.take.note-block { background:var(--node-color); color:#202124; }
.feature-node.take.note-block.ink { color:#fff; }
.feature-node.take.note-block.selected { box-shadow:0 0 0 2px var(--page, #f9f8f4), 0 0 0 4px var(--ink); }
.feature-note { position:absolute; z-index:4; width:min(290px, calc(100% - 8px)); box-sizing:border-box; padding:18px 20px 16px; background:#fff; color:#202124; box-shadow:0 0 0 1px #E4E2DC, 0 18px 40px -22px rgba(14,17,22,.35); }
.feature-note .say { margin:0; font:600 17px/1.3 var(--title); letter-spacing:-.01em; }
.feature-note .her { margin:10px 0 0; font:400 14px/1.5 var(--sans); }
.feature-note .her.quoted { font-style:italic; } /* her words, italic as on the map */
.feature-note .her mark { color:#202124; padding:0 2px; }
.feature-note .acts { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.feature-note button { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px; border:0; border-radius:4px; font:500 14px/1 var(--sans); }
.feature-note .wide { flex:1 0 100%; justify-content:center; min-height:40px; } /* the map's card: its acts the same size, one above the other */
.feature-note .back { margin:0 0 6px; font:400 14px/1.4 var(--sans); }
.feature-note .opt { margin:12px 0 0; font:600 15px/1.3 var(--title); }
.feature-note .check { margin-top:8px; min-height:32px; }
.feature-note .solid { background:#202124; color:#fff; } .feature-note .outline { background:#fff; color:#202124; box-shadow:inset 0 0 0 1.5px #202124; } .feature-note .plain { background:none; color:#202124; text-decoration:underline; text-underline-offset:4px; }
.feature-note .wave { display:inline-flex; align-items:center; gap:2px; height:14px; } .feature-note .wave i { width:2px; border-radius:2px; background:currentColor; height:30%; }
.feature-note .wave i:nth-child(2) { height:65%; } .feature-note .wave i:nth-child(3) { height:100%; } .feature-note .wave i:nth-child(4) { height:55%; }