/* =============================================================
   Contour — landing page styles

   SHELL (nav, hero, thread, rows, capture, footer) is ported 1:1
   from the reference implementation (Landing.dc.html): geometry,
   colours, keyframe percentages and font shorthands are verbatim.

   MOCK PANELS are NOT. The reference's four panels were invented
   geometry; they now reproduce the shipped app's surfaces, per the
   fidelity briefs read off `app/src/lib/components/board/*` and
   `app/src/lib/cores/board/*`. Inside a panel the palette, radii,
   type and fonts are the app's; outside it they are the landing's.

   Shell tokens (DOC 13 §2)
     bg #070a10 · panel #0a0f16 · card #101722 · line-blue #7fb0f5
     hover-blue #a8ccff · text #e6edf3 · muted #8b98a5 · faint #3f4c5e

   Panel tokens (board literals — prototype.ts / Board.svelte)
     canvas #04070b + 24px dot grid · shell #0c1015 · card #141c26
     neighbor #131a23 / hot #161f2a · chip+pill #0d131c · well #080c12
     mint #5fd4a4 · purple #b48ce8 · blue #7fb0f5 · amber #f0b269
     (tint #e8963a) · salmon #e88d7e
     text #e6edf3 / #cdd6df / #9fb0c0 / #8b98a5 / #7a8794 / #5c6a78
     fonts system-ui (names) + ui-monospace (every number and label)
   ============================================================= */

/* ------------------------------------------------- 0 · globals */
html{background:#070a10}
*{box-sizing:border-box}
body{margin:0;background:#070a10;font-family:system-ui,-apple-system,sans-serif}
a{color:#7fb0f5;text-decoration:none}
a:hover{color:#a8ccff}
::selection{background:rgba(127,176,245,.3)}
input::placeholder{color:#3f4c5e}
[hidden]{display:none !important}
.wv-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------------------------------------------- 1 · keyframes */
@keyframes lp-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lp-breathe{0%,100%{opacity:.55}50%{opacity:.85}}
@keyframes lp-nodepulse{0%,100%{box-shadow:0 0 5px rgba(127,176,245,.35)}50%{box-shadow:0 0 16px rgba(127,176,245,.85)}}

/* --- 01 chaining (10s): select → fan → pick → join.
       The fan is gone by 48%; the pick is still travelling until 58%,
       so the fan never outlives the pick (DOC 13 §5 M1). */
@keyframes m1tip{0%,4%{box-shadow:0 0 0 4px rgba(47,127,246,.16),0 12px 28px rgba(0,0,0,.6)}9%,17%{box-shadow:0 0 0 7px rgba(47,127,246,.32),0 12px 28px rgba(0,0,0,.6)}25%,100%{box-shadow:0 0 0 4px rgba(47,127,246,.16),0 12px 28px rgba(0,0,0,.6)}}
@keyframes m1fan{0%,10%{opacity:0}18%,42%{opacity:1}48%,100%{opacity:0}}
@keyframes m1card{0%,10%{opacity:0;transform:translateX(14px)}18%,42%{opacity:1;transform:none}48%,100%{opacity:0;transform:translateX(14px)}}
@keyframes m1pick{0%,10%{opacity:0;transform:translate(14px,0)}18%,44%{opacity:1;transform:none}52%{opacity:0}58%,100%{opacity:0;transform:translate(40px,94px) scale(.72)}}
@keyframes m1join{0%,26%{background:rgba(95,212,164,.16);border-color:rgba(95,212,164,.6);color:#5fd4a4}31%,38%{background:rgba(95,212,164,.5);border-color:#5fd4a4;color:#04070b}44%,100%{background:rgba(95,212,164,.16);border-color:rgba(95,212,164,.6);color:#5fd4a4}}
@keyframes m1wire2{0%,50%{opacity:0}58%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes m1chip2{0%,52%{opacity:0;transform:translate(-50%,-50%) scale(.8)}60%,90%{opacity:1;transform:translate(-50%,-50%) scale(1)}96%,100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
@keyframes m1new{0%,48%{opacity:0;transform:translateY(6px) scale(.97)}56%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(6px) scale(.97)}}

/* --- 02 junctions (12s): ◇ blend → | cut → ◐ peek → ↺ loop, 3s each.
       Tab, drawer body, drawer chrome and the on-board chip all switch
       on the same clock; colour is the whole grammar. */
@keyframes m2v1{0%,22%{opacity:1}26%,96%{opacity:0}100%{opacity:1}}
@keyframes m2v2{0%,22%{opacity:0}26%,47%{opacity:1}51%,100%{opacity:0}}
@keyframes m2v3{0%,47%{opacity:0}51%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes m2v4{0%,72%{opacity:0}76%,97%{opacity:1}100%{opacity:0}}
/* the wire chip only changes label when the junction TYPE changes: peek is
   an overlay above the chain and loop is a property of the entry, so the
   ◇ chip stays put through both — only `| cut` replaces it. */
@keyframes m2c1{0%,22%{opacity:1}26%,47%{opacity:0}51%,100%{opacity:1}}
@keyframes m2t1{0%,22%{background:rgba(95,212,164,.13);border-color:#5fd4a4;color:#5fd4a4}26%,96%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}100%{background:rgba(95,212,164,.13);border-color:#5fd4a4;color:#5fd4a4}}
@keyframes m2t2{0%,22%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}26%,47%{background:rgba(240,178,105,.13);border-color:#f0b269;color:#f0b269}51%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}}
@keyframes m2t3{0%,47%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}51%,72%{background:rgba(180,140,232,.13);border-color:#b48ce8;color:#b48ce8}76%,100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}}
@keyframes m2t4{0%,72%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}76%,97%{background:rgba(240,178,105,.13);border-color:#f0b269;color:#f0b269}100%{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);color:#9fb0c0}}
@keyframes m2dw{0%,22%{background:#141c26;border-color:rgba(95,212,164,.6)}26%,47%{background:#141c26;border-color:rgba(240,178,105,.6)}51%,72%{background:#171526;border-color:rgba(180,140,232,.6)}76%,97%{background:#141c26;border-color:rgba(240,178,105,.6)}100%{background:#141c26;border-color:rgba(95,212,164,.6)}}

/* --- 03 the contour (9s): the playhead sweeps once; between 15% and
       85% the middle segment morphs to a deeper duck. The authored
       diamond and the riding ball share those percentages exactly. */
@keyframes m3a{0%,15%{opacity:1}40%,60%{opacity:0}85%,100%{opacity:1}}
@keyframes m3b{0%,15%{opacity:0}40%,60%{opacity:1}85%,100%{opacity:0}}
@keyframes m3pt{0%,15%{top:52.4%}40%,60%{top:73.8%}85%,100%{top:52.4%}}
@keyframes m3play{0%{left:2%}100%{left:97%}}
/* the ball is sampled off the same 416×84 polylines the curve draws,
   so it is ON the line at every stop — including through the morph. */
@keyframes m3ball{
  0%{left:2%;top:68.7%}5%{left:6.75%;top:45.1%}10%{left:11.5%;top:28.4%}
  15%{left:16.25%;top:24.7%}20%{left:21%;top:24%}25%{left:25.75%;top:24.6%}
  30%{left:30.5%;top:26%}35%{left:35.25%;top:27.1%}40%{left:40%;top:65.4%}
  45%{left:44.75%;top:72.1%}50%{left:49.5%;top:72.1%}55%{left:54.25%;top:65.7%}
  60%{left:59%;top:29.4%}65%{left:63.75%;top:24.5%}70%{left:68.5%;top:23.8%}
  75%{left:73.25%;top:23.8%}80%{left:78%;top:24.3%}85%{left:82.75%;top:24.9%}
  90%{left:87.5%;top:38.8%}95%{left:92.25%;top:59.5%}100%{left:97%;top:74.3%}}

/* --- 04 the board (10s): lift-out → join at the END of the chain →
       hull retracts past the slot → ONLY THEN the original fades.
       Removal is the hull's act, not the drag's (crate.ts:214-236). */
@keyframes m4sel{0%,6%{box-shadow:0 5px 14px rgba(0,0,0,.45)}10%,26%{box-shadow:0 0 0 3px rgba(95,212,164,.3),0 5px 14px rgba(0,0,0,.45)}32%,100%{box-shadow:0 5px 14px rgba(0,0,0,.45)}}
@keyframes m4move{0%,12%{opacity:0;transform:none}18%{opacity:1;transform:none}42%,46%{opacity:1;transform:translate(204px,142px)}52%,100%{opacity:0;transform:translate(204px,142px)}}
@keyframes m4new{0%,44%{opacity:0;transform:translateY(6px) scale(.97)}52%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes m4wire3{0%,46%{opacity:0}54%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes m4chip3{0%,48%{opacity:0;transform:translate(-50%,-50%) scale(.8)}56%,92%{opacity:1;transform:translate(-50%,-50%) scale(1)}97%,100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
/* the tip is always the LAST entry in the chain, so the join hands the tip
   treatment over: Every Day drops to the non-tip dim, Get Up takes the blue
   1.5px border + 4px ring. Both reverse before the 0% resting frame. */
@keyframes m4demote{0%,52%{border-color:rgba(96,165,250,.75);box-shadow:0 0 0 4px rgba(47,127,246,.16),0 12px 28px rgba(0,0,0,.6);opacity:1}60%,92%{border-color:rgba(255,255,255,.14);box-shadow:0 0 0 0 rgba(47,127,246,0),0 5px 14px rgba(0,0,0,.45);opacity:.8}100%{border-color:rgba(96,165,250,.75);box-shadow:0 0 0 4px rgba(47,127,246,.16),0 12px 28px rgba(0,0,0,.6);opacity:1}}
@keyframes m4promote{0%,52%{border-color:rgba(255,255,255,.12);box-shadow:0 5px 14px rgba(0,0,0,.45)}60%,92%{border-color:rgba(96,165,250,.75);box-shadow:0 0 0 4px rgba(47,127,246,.16),0 12px 28px rgba(0,0,0,.6)}100%{border-color:rgba(255,255,255,.12);box-shadow:0 5px 14px rgba(0,0,0,.45)}}
@keyframes m4pillout{0%,52%{opacity:1}60%,92%{opacity:0}100%{opacity:1}}
@keyframes m4pillin{0%,52%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
@keyframes m4hull{0%,58%{width:364px}68%,94%{width:186px}100%{width:364px}}
@keyframes m4orig{0%,70%{opacity:.74}78%,94%{opacity:0}100%{opacity:.74}}

/* the thread pauses every choreography whose panel it has not reached */
.lp-paused,.lp-paused *{animation-play-state:paused !important}

/* ---------------------------------------------------- 2 · page */
.lp-page{min-height:100vh;display:flex;flex-direction:column;background:#070a10}
.lp-spacer{flex:1}

.lp-nav{display:flex;align-items:center;gap:14px;padding:22px 40px;position:relative;z-index:3}
.lp-nav-mark{font:500 13px 'Space Grotesk',sans-serif;letter-spacing:.3em;color:#e6edf3;text-indent:.3em}
.lp-nav-cta{white-space:nowrap;font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#7fb0f5;border:1px solid rgba(127,176,245,.4);border-radius:999px;padding:7px 16px}
.lp-nav-cta:hover{border-color:#7fb0f5;color:#a8ccff}

/* ---------------------------------------------------- 3 · hero */
.lp-hero{position:relative;height:520px;margin-top:-64px}
.lp-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;animation:lp-fade 1.1s ease .7s both}
.lp-wordmark{display:flex;margin:0;font-weight:500}
.lp-letter{display:inline-block;position:relative;font:500 52px 'Space Grotesk',sans-serif;letter-spacing:.32em;background-image:linear-gradient(0deg,#7fb0f5 0%,#9cc4ff 0%,#e6edf3 10%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lp-thesis{margin:0;font:400 13px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#7fb0f5;text-shadow:0 0 16px rgba(7,10,16,.95)}
.lp-sub{margin:0;font:400 13.5px/1.6 system-ui;color:#8b98a5;max-width:440px;text-align:center;text-shadow:0 0 16px rgba(7,10,16,.95)}
.lp-hero-cta{pointer-events:auto;margin-top:6px;font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#070a10;background:#7fb0f5;border-radius:999px;padding:11px 26px}
.lp-hero-cta:hover{background:#a8ccff;color:#070a10}
.lp-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font:400 9.5px 'IBM Plex Mono',monospace;color:#3f4c5e;letter-spacing:.14em}

/* ------------------------------------------------- 4 · moments */
.lp-moments{width:100%;max-width:1060px;margin:0 auto;padding:80px 40px 0;display:flex;flex-direction:column;gap:110px;position:relative}
.lp-thread-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lp-thread-under{fill:none;stroke:rgba(127,176,245,.13);stroke-width:1.5}
.lp-thread{fill:none;stroke:rgba(127,176,245,.6);stroke-width:1.5;animation:lp-breathe 6s ease-in-out infinite}
.lp-nodes{position:absolute;inset:0;pointer-events:none}
.lp-node{position:absolute;width:10px;height:10px;transform:translate(-50%,-50%) rotate(45deg);border:1.5px solid #7fb0f5;background:#070a10;transition:background .4s,box-shadow .4s}

.lp-row{display:flex;gap:56px;align-items:center}
.lp-row--flip{flex-direction:row-reverse}
.lp-block{transition:opacity .7s ease,transform .7s ease}
.lp-dim{opacity:.45;transform:translateY(10px)}

.lp-copy{flex:1;display:flex;flex-direction:column;gap:14px;min-width:300px}
.lp-eyebrow{margin:0;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.18em;color:#7fb0f5}
.lp-head{margin:0;font:500 30px/1.2 'Space Grotesk',sans-serif;color:#e6edf3;text-wrap:balance}
.lp-body{margin:0;font:400 14px/1.7 system-ui;color:#8b98a5;max-width:420px;text-wrap:pretty}

/* ============================================================
   5 · MOCK PANELS — shared app chrome
   ============================================================ */
.mk{flex:none;width:460px;height:250px;border-radius:12px;background:#0a0f16;border:1px solid rgba(127,176,245,.18);position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.45);transition:box-shadow .7s,border-color .7s}
.mk1,.mk2,.mk4{background:#04070b}         /* Board.svelte:2446 canvas */
.mk3{background:#0c1015;font-family:system-ui,-apple-system,sans-serif} /* :2354 shell */
.mk-cap{position:absolute;left:36px;bottom:14px;font:400 8.5px 'IBM Plex Mono',monospace;color:#3f4c5e;z-index:9}
.mk-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

/* Real-px stage: build at the component's own pixel sizes, then scale
   the whole crop into the 460×250 panel. Every value inside a stage is
   copied verbatim from geometry.ts / the board components. */
.mk-stage{position:absolute;left:0;top:0;transform-origin:0 0;font-family:system-ui,-apple-system,sans-serif;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px}

/* waveforms — one stroked open polyline, never bar columns
   (cores/graph/waveform-paint.ts:98-115) */
.wv{position:absolute;display:block}
.wv-line{fill:none;stroke:currentColor;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* chain card — BoardCard.svelte:471-477 */
.bc{position:absolute;border-radius:10px;background:#141c26;border:1px solid rgba(255,255,255,.12);box-shadow:0 5px 14px rgba(0,0,0,.45);padding:8px 9px 0;overflow:hidden;z-index:2}
.bc--dim{opacity:.74}
.bc--tip{border:1.5px solid rgba(96,165,250,.75);box-shadow:0 0 0 4px rgba(47,127,246,.16),0 12px 28px rgba(0,0,0,.6);opacity:1}
.bc--tip .bc-title{font-size:11.5px}
.bc-row{display:flex;align-items:center;gap:7px}
.bc-art{flex:none;width:26px;height:26px;border-radius:5px}
.bc-art--s{width:22px;height:22px;border-radius:4px}
.art1{background:linear-gradient(135deg,hsl(206,45%,32%),hsl(246,50%,15%))}
.art2{background:linear-gradient(135deg,hsl(28,45%,32%),hsl(68,50%,15%))}
.art3{background:linear-gradient(135deg,hsl(150,45%,32%),hsl(190,50%,15%))}
.art4{background:linear-gradient(135deg,hsl(276,45%,32%),hsl(316,50%,15%))}
.art5{background:linear-gradient(135deg,hsl(0,45%,32%),hsl(40,50%,15%))}
.bc-names{min-width:0;overflow:hidden}
.bc-title{display:block;font:600 11px system-ui;color:#e6edf3;white-space:nowrap}
.bc-artist{display:block;margin-top:1px;font:400 9px system-ui;color:#8b98a5;white-space:nowrap}
.bc-facts{display:flex;align-items:center;gap:4px;margin-top:7px}
.bc-facts--rec{margin-top:5px}
.tip-pill{margin-left:auto;flex:none;font:600 7.5px ui-monospace,monospace;background:rgba(47,127,246,.18);border:1px solid rgba(96,165,250,.5);color:#7fb0f5;border-radius:9px;padding:1px 6px}

/* fact badges — radius 3, 700 8px mono. Camelot has exactly two
   colours: A-keys green, B-keys violet (prototype.ts KEYC). */
.bd{flex:none;font:700 8px/1.35 ui-monospace,monospace;padding:1px 5px;border-radius:3px;white-space:nowrap}
.bd--bpm{background:rgba(255,255,255,.07);color:#9fb0c0}
.bd--ka{background:#1e6f4c;color:#7ee2b0}
.bd--kb{background:#7c3aed;color:#ede9fe}
.bd--en{background:rgba(95,212,164,.16);color:#5fd4a4}
.bd--am{background:rgba(240,178,105,.16);color:#f0b269}
.bd--pu{background:rgba(180,140,232,.16);color:#b48ce8}
.bd--bl{background:rgba(47,127,246,.16);color:#7fb0f5}
.spark{width:64px;height:12px;opacity:.4}
.spark polyline{fill:none;stroke:#f0b269;stroke-width:1;vector-effect:non-scaling-stroke}

/* wires + junction chips — the app has no circular nodes on wires */
.wire{fill:none;stroke:rgba(127,176,245,.6);stroke-width:1.7}
.fanwire{fill:none;stroke:rgba(95,212,164,.38);stroke-width:1.4;stroke-dasharray:4 4}
.fanwire--hot{stroke:rgba(95,212,164,.75);stroke-width:1.8;stroke-dasharray:none}
.jc{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;white-space:nowrap;font:700 7.5px ui-monospace,monospace;padding:3px 8px;border-radius:10px;background:#0d131c;color:#5fd4a4;border:1.5px solid rgba(95,212,164,.72);box-shadow:0 3px 9px rgba(0,0,0,.5);z-index:5}
.jc--open{border-color:#5fd4a4;box-shadow:0 0 0 4px rgba(95,212,164,.22),0 3px 9px rgba(0,0,0,.5)}
.jc--amber{color:#f0b269;border-color:rgba(240,178,105,.72)}
.jc-aud{color:#b48ce8;font-size:8px}

/* verb pills — a sibling row 114px below the card top */
.vb{position:absolute;white-space:nowrap;font:700 7.5px ui-monospace,monospace;padding:3px 8px;border-radius:9px;background:#0d131c;border:1px solid rgba(255,255,255,.14);color:#9fb0c0;z-index:3}
.vb--cue,.vb--peek{color:#b48ce8;border-color:rgba(180,140,232,.4)}

/* neighbor card — NeighborCard.svelte:222-291. Wider than the tip. */
.nc{position:absolute;width:230px;height:81px;border-radius:10px;background:#131a23;border:1px solid rgba(255,255,255,.13);padding:8px 9px 0;overflow:hidden;z-index:3}
.nc--hot{background:#161f2a;border:1.5px solid rgba(95,212,164,.7);box-shadow:0 10px 26px rgba(0,0,0,.6)}
.nc-row{display:flex;align-items:center;gap:6px}
.nc-title{display:block;font:600 10.5px system-ui;color:#e6edf3;white-space:nowrap}
.nc-facts{display:flex;align-items:center;gap:4px;margin-top:6px}
.nc-reason{font:500 7.5px ui-monospace,monospace;color:#5c6a78;white-space:nowrap}
.nc-join{margin-left:auto;flex:none;font:700 7.5px ui-monospace,monospace;border-radius:4px;padding:2px 6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#7a8794}
.nc-join--hot{background:rgba(95,212,164,.16);border-color:rgba(95,212,164,.6);color:#5fd4a4}
.nc-btn{position:absolute;top:6px;width:17px;height:17px;border-radius:5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#b48ce8;font:700 7.5px ui-monospace,monospace;display:flex;align-items:center;justify-content:center;z-index:4}
.nc-btn--aud{right:27px}
.nc-btn--park{right:6px}

/* ---------------------------------------- 6 · mock 1 chaining
   Real cluster is ~520×267 (TIP 214 + TRAY_GAP_X + NEIGHBOR 230),
   so the crop runs at 0.78: the previous entry is cut by the frame
   exactly as it is on a real board, and the fan stays the dominant
   mass on the right. TRAY_GAP_X is 38 here rather than 76 and the
   slot pitch 84 rather than 93 — the only two geometry values that
   could not survive a 460×250 frame. */
.m1-stage{width:590px;height:320px;transform:scale(.78)}
.m1-prev{left:-124px;top:130px;width:154px;height:72px}
.m1-jc{left:65px;top:146px}
.m1-tip{left:100px;top:116px;width:214px;height:110px;animation:m1tip 10s ease-in-out infinite}
.wv--tip{left:9px;bottom:8px;width:196px;height:16px;color:#7fb0f5;opacity:.7}
.m1-vb1{left:100px;top:230px}
.m1-vb2{left:232px;top:230px}
.m1-fan{animation:m1fan 10s ease-in-out infinite}
.m1-head{position:absolute;left:352px;top:2px;width:230px;display:flex;align-items:center;padding:2px 5px;border-radius:4px;background:#04070b;font:600 7.5px ui-monospace,monospace;color:#5c6a78;opacity:0;animation:m1fan 10s ease-in-out infinite;z-index:3}
.m1-count{margin-left:auto;color:#3f4c5e}
.m1-n0{left:352px;top:22px;opacity:0;transform-origin:0 0;animation:m1pick 10s ease-in-out infinite}
.m1-n0 .nc-join{animation:m1join 10s ease-in-out infinite}
.m1-n1{left:352px;top:106px;opacity:0;animation:m1card 10s ease-in-out infinite}
.m1-n2{left:352px;top:190px;opacity:0;animation:m1card 10s ease-in-out infinite}
.wv--nc{left:9px;bottom:7px;width:212px;height:14px;color:#7fb0f5;opacity:.55}
.m1-wire2{opacity:0;animation:m1wire2 10s ease-in-out infinite}
.m1-jc2{left:353px;top:146px;opacity:0;animation:m1chip2 10s ease-in-out infinite}
.m1-new{left:392px;top:116px;width:154px;height:72px;opacity:0;transform-origin:0 0;animation:m1new 10s ease-in-out infinite}

/* --------------------------------------- 7 · mock 2 junctions
   Defining a join happens in the 270px junction drawer anchored beside
   the incoming entry (JunctionDrawer.svelte:800-806) — never in a row
   of floating verb pills. Fragment runs at 0.85 of real px. */
.m2-stage{width:541px;height:294px;transform:scale(.85)}
.m2-a{left:-139px;top:100px;width:154px;height:72px}
.m2-b{left:91px;top:84px;width:154px;height:72px}
.wv--b{left:9px;bottom:6px;width:136px;height:12px;color:#7fb0f5;opacity:.5}
.m2-chip1{left:53px;top:114px;animation:m2c1 12s ease-in-out infinite}
.m2-chip2{left:53px;top:114px;opacity:0;animation:m2v2 12s ease-in-out infinite}
.m2-chip4{left:168px;top:78px;opacity:0;animation:m2v4 12s ease-in-out infinite}
.m2-tether{opacity:0;animation:m2v3 12s ease-in-out infinite;z-index:3}
.m2-ov{position:absolute;left:108px;top:22px;width:120px;padding:5px 7px;border-radius:8px;background:#171526;border:1.5px dashed rgba(180,140,232,.75);opacity:0;animation:m2v3 12s ease-in-out infinite;z-index:4}
.m2-ov-l{display:block;font:700 8px ui-monospace,monospace;color:#b48ce8}
.m2-ov-m{display:block;margin-top:2px;font:500 6.5px ui-monospace,monospace;color:#7a8794}

.dw{position:absolute;left:263px;top:8px;width:270px;height:245px;border-radius:10px;background:#141c26;border:1.5px solid rgba(95,212,164,.6);box-shadow:0 14px 34px rgba(0,0,0,.7);overflow:hidden;animation:m2dw 12s ease-in-out infinite;z-index:6}
.dw-grip{position:absolute;left:9px;right:9px;top:8px;height:16px}
.dw-g{position:absolute;left:0;top:1px;font:700 10px ui-monospace,monospace}
.dw-g1{color:#5fd4a4;animation:m2v1 12s ease-in-out infinite}
.dw-g2{color:#f0b269;opacity:0;animation:m2v2 12s ease-in-out infinite}
.dw-g3{color:#b48ce8;opacity:0;animation:m2v3 12s ease-in-out infinite}
.dw-g4{color:#f0b269;opacity:0;animation:m2v4 12s ease-in-out infinite}
.dw-lab{position:absolute;left:16px;top:2px;white-space:nowrap;font:600 10px system-ui;color:#e6edf3}
.dw-lab1{animation:m2v1 12s ease-in-out infinite}
.dw-lab2{opacity:0;animation:m2v2 12s ease-in-out infinite}
.dw-lab3{opacity:0;animation:m2v3 12s ease-in-out infinite}
.dw-lab4{opacity:0;animation:m2v4 12s ease-in-out infinite}
.dw-knob{position:absolute;right:24px;top:-1px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%)}
.dw-esc{position:absolute;right:0;top:4px;font:500 7.5px ui-monospace,monospace;color:#5c6a78}

/* four glyph-only tabs, flex:1, radius 4, each lit in its own accent */
.dw-tabs{position:absolute;left:9px;right:9px;top:28px;display:flex;gap:4px}
.dw-tab{flex:1;text-align:center;font:700 11px ui-monospace,monospace;padding:4px 0;border-radius:4px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.13);color:#9fb0c0}
.dw-tab1{animation:m2t1 12s ease-in-out infinite}
.dw-tab2{animation:m2t2 12s ease-in-out infinite}
.dw-tab3{animation:m2t3 12s ease-in-out infinite}
.dw-tab4{animation:m2t4 12s ease-in-out infinite}

.dwb{position:absolute;left:9px;right:9px;top:54px;bottom:0}
.dwb1{animation:m2v1 12s ease-in-out infinite}
.dwb2{opacity:0;animation:m2v2 12s ease-in-out infinite}
.dwb3{opacity:0;animation:m2v3 12s ease-in-out infinite}
.dwb4{opacity:0;animation:m2v4 12s ease-in-out infinite}

.dw-row{position:absolute;left:0;right:0;display:flex;align-items:center;gap:4px}
.dw-row--bars{top:0;height:26px}
.dw-row--fx{top:30px;height:16px}
.dw-row--step{top:100px;height:14px}
.dw-row--ov{top:0;height:16px}
.dw-row--l1{top:70px;height:14px}
.dw-row--l2{top:94px;height:14px}
.dw-k{flex:none;font:700 7px ui-monospace,monospace;letter-spacing:.08em;color:#7a8794}
.dw-k--r{margin-left:8px}
.dw-chip{flex:none;font:700 7.5px ui-monospace,monospace;padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#9fb0c0}
.dw-chip--on{background:rgba(95,212,164,.16);border-color:rgba(95,212,164,.6);color:#5fd4a4}
.dw-chip--am{background:rgba(240,178,105,.14);border-color:rgba(240,178,105,.5);color:#f0b269}
.dw-chip--pu{background:rgba(180,140,232,.16);border-color:rgba(180,140,232,.6);color:#b48ce8}
.dw-step{flex:none;width:13px;text-align:center;font:700 8px ui-monospace,monospace;color:#9fb0c0}
.dw-val{flex:none;font:700 9px ui-monospace,monospace;color:#5fd4a4}
.dw-val--am{color:#f0b269}
.dw-ring{margin-left:auto;position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:2px solid rgba(95,212,164,.75);background:radial-gradient(circle,rgba(95,212,164,.18),transparent 70%)}
.dw-ring-in{position:absolute;inset:5px;border-radius:50%;background:rgba(95,212,164,.35)}
.dw-cap{position:absolute;left:0;white-space:nowrap;font:600 7px ui-monospace,monospace;letter-spacing:.06em;color:#7a8794}
.dw-cap--at{top:50px}
.dw-cap--in{top:118px}
.dw-cap--at2{top:67px}
.dw-cap--in2{top:119px}
.dw-cap--host{top:44px;color:#7fb0f5}
.dw-cap--peek{top:96px;color:#b48ce8}
.dw-cap--from{top:148px;color:#b48ce8}
.dw-cap--loop{top:4px;color:#f0b269}
.dw-cap--exit{top:122px}
.dw-hint{position:absolute;left:0;right:0;top:172px;font:500 6.5px/1.4 ui-monospace,monospace;color:#5c6a78}
.dw-hint--loop{top:162px}

/* waveform strips — RegionWaveStrip.svelte:121-137 */
.st{position:absolute;left:0;right:0;height:36px;border-radius:5px;background:#080c12;border:1px solid rgba(255,255,255,.08);overflow:hidden}
.st--out{top:61px}
.st--in{top:129px}
.st--out2{top:78px}
.st--in2{top:130px}
.st--host{top:55px}
.st--peek{top:107px;background:#0d0a16}
.st--from{top:159px;height:22px}
.st--loop{top:16px;height:44px}
.wv--st{left:0;top:0;width:100%;height:100%}
.st-am{color:#f0b269;opacity:.85}
.st-am2{color:#f0b269;opacity:.8}
.st-bl{color:#7fb0f5;opacity:.85}
.st-bl2{color:#7fb0f5;opacity:.9}
.st-pu{color:#b48ce8;opacity:.7}
/* the blend window is a SOLID fill painted inside the outgoing strip.
   Window + AT marker sit in the left half so the bottom-right honesty
   badge stays fully legible (RegionWaveStrip.svelte:132-137). */
.st-win{position:absolute;left:16%;top:0;bottom:0;width:29%;background:rgba(95,212,164,.16);border-left:1px solid rgba(95,212,164,.5);z-index:2}
.st-in{position:absolute;left:16%;top:0;bottom:0;width:7px;background:rgba(95,212,164,.9);z-index:3}
.st-at{position:absolute;left:43%;top:0;bottom:0;width:7px;background:#f0b269;z-index:4}
.st-mark{position:absolute;left:22%;top:0;bottom:0;width:7px;background:#7fb0f5;z-index:4}
.st-shade{position:absolute;left:18%;right:0;top:0;bottom:0;background:rgba(180,140,232,.18);z-index:2}
.st-edge{position:absolute;left:18%;top:0;bottom:0;width:1.5px;background:#b48ce8;z-index:3}
.st-honest{position:absolute;right:4px;bottom:2px;font:600 6.5px ui-monospace,monospace;color:#7a8794;z-index:5}
.pkb{position:absolute;left:34%;top:3px;bottom:3px;width:32%;border-radius:3px;background:rgba(180,140,232,.2);border:1px solid rgba(180,140,232,.7);overflow:hidden}
.wv--pk{left:0;top:0;width:100%;height:100%;color:#b48ce8;opacity:.9}
.lo-region{position:absolute;left:28%;top:0;bottom:0;width:40%;background:rgba(240,178,105,.14);z-index:2}
.lo-h1{position:absolute;left:28%;top:0;bottom:0;width:4px;background:#f0b269;z-index:3}
.lo-h2{position:absolute;left:68%;margin-left:-4px;top:0;bottom:0;width:4px;background:#f0b269;z-index:3}

.dw-note{position:absolute;left:0;right:0;top:0;padding:6px 7px;border-radius:5px;background:rgba(240,178,105,.08);border:1px solid rgba(240,178,105,.35)}
.dw-note-h{display:block;font:700 8px ui-monospace,monospace;color:#f0b269}
.dw-note-b{display:block;margin-top:3px;font:500 6.5px/1.45 ui-monospace,monospace;color:#9fb0c0}
.dw-note-c{display:inline-block;margin-top:5px}
.dw-search{position:absolute;left:0;right:0;top:20px;height:18px;line-height:17px;padding:0 7px;border-radius:5px;background:rgba(180,140,232,.06);border:1px solid rgba(180,140,232,.45);font:500 7.5px ui-monospace,monospace;color:#5c6a78}
.dw-seg{position:absolute;left:0;right:0;top:134px;display:flex;gap:3px}
.dw-sg{flex:1;text-align:center;font:700 7px ui-monospace,monospace;padding:3px 0;border-radius:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#9fb0c0}
.dw-sg--on{background:rgba(240,178,105,.14);border-color:rgba(240,178,105,.5);color:#f0b269}

/* ----------------------------------- 8 · mock 3 — the contour
   Frame 1 of ContourEditor.svelte: param tab chips over N stacked
   per-param lanes, the focused one amber-tinted, the rest at .62.
   Well is 84px (CONTOUR_EDITOR_HEIGHT_PX) — app-exact. */
.m3-tabs{position:absolute;left:16px;right:16px;top:12px;display:flex;align-items:center;gap:4px}
.pt{font:600 7.5px ui-monospace,monospace;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);color:#9fb0c0}
.pt--on{background:rgba(232,150,58,.12);border:1.5px solid rgba(232,150,58,.6);color:#f0b269}
.m3-bars{margin-left:auto;font:600 7px ui-monospace,monospace;color:#5c6a78}
.ln{position:absolute;left:16px;right:16px;border-radius:6px;padding:5px}
.ln--own{border:1px solid rgba(240,178,105,.38);background:rgba(240,178,105,.06)}
.ln--ghost{border:1px solid rgba(122,135,148,.38);background:rgba(122,135,148,.06);opacity:.62}
.m3-ln1{top:32px}
.m3-ln2{top:148px}
.ln-head{display:flex;align-items:center;gap:5px;height:12px}
.ln-eye{font:400 8px ui-monospace,monospace;color:#5c6a78}
.ln-name{font:700 7px ui-monospace,monospace;letter-spacing:.08em;color:#f0b269}
.ln--ghost .ln-name{color:#7a8794}
.ln-anch{font:700 7px ui-monospace,monospace;color:#b48ce8}
.ln-id{font:600 6.5px ui-monospace,monospace;color:#5c6a78}
.ln-read{margin-left:auto;font:600 7.5px ui-monospace,monospace;font-variant-numeric:tabular-nums;color:#f0b269}
.ln--ghost .ln-read{color:#7a8794}
.ln-lens{font:700 8px ui-monospace,monospace;color:#5c6a78}
.well{position:relative;margin-top:2px;border:1px solid rgba(255,255,255,.1);border-radius:5px;background:rgba(0,0,0,.28);overflow:hidden}
.m3-well{height:84px}
.m3-well2{height:30px}
.m3-svg{position:absolute;left:0;top:0;width:100%;height:100%}
.wv--well{left:0;top:0;width:100%;height:100%;color:#5c6a78;opacity:.35}
.m3-win{fill:rgba(240,178,105,.1);stroke:rgba(240,178,105,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.m3-grid{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.m3-curve{fill:none;stroke:#f0b269;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.m3-curve--a{animation:m3a 9s ease-in-out infinite}
.m3-curve--b{opacity:0;animation:m3b 9s ease-in-out infinite}
.m3-flat{fill:none;stroke:rgba(159,176,192,.45);stroke-width:1.5;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.m3-anch{fill:#b48ce8;font:700 8px ui-monospace,monospace;text-anchor:middle}
/* A STEM, not the playhead — the position is the ball (J16). */
.m3-stem{position:absolute;left:2%;top:0;bottom:0;width:1px;background:#5fd4a4;opacity:.45;animation:m3play 9s linear infinite;z-index:3}
.m3-ball{position:absolute;left:2%;top:68.7%;width:8px;height:8px;border-radius:50%;background:#f0b269;border:1px solid rgba(0,0,0,.6);transform:translate(-50%,-50%);animation:m3ball 9s linear infinite;z-index:4}
.m3-pt{position:absolute;left:47.1%;top:52.4%;width:8px;height:8px;background:#1a2029;border:1.5px solid #f0b269;transform:translate(-50%,-50%) rotate(45deg);animation:m3pt 9s ease-in-out infinite;z-index:4}
.m3-ax{position:absolute;right:4px;font:600 7px ui-monospace,monospace;color:#5c6a78;z-index:2}
.m3-ax--hi{top:3px}
.m3-ax--lo{bottom:3px}
.m3-join{position:absolute;top:3px;white-space:nowrap;font:600 6.5px ui-monospace,monospace;color:#5fd4a4;z-index:2}
.m3-join--in{left:5px}
.m3-join--out{right:28px}
.m3-duck{position:absolute;left:32%;bottom:3px;font:600 7px ui-monospace,monospace;color:#f0b269;z-index:2}

/* ------------------------------------- 9 · mock 4 — the board
   Canvas crop at 0.719. Chain gaps are 28 rather than the app's 76 so
   that a four-entry chain plus the crate hull fits one 460×250 frame;
   everything else is real px. */
.m4-stage{width:640px;height:348px;transform:scale(.71875)}
.hl{position:absolute;border-radius:14px;background:rgba(95,212,164,.045);border:1.5px dashed rgba(95,212,164,.4);z-index:0}
.m4-hull{left:80px;top:14px;width:364px;height:116px;animation:m4hull 10s ease-in-out infinite}
.hl-pill{position:absolute;font:700 8px ui-monospace,monospace;padding:2px 7px;border-radius:9px;background:#0d131c;border:1px solid rgba(95,212,164,.55);color:#5fd4a4;z-index:1}
.m4-pill{left:90px;top:5px}
.m4-m1{left:96px;top:44px;width:154px;height:72px}
.m4-m2{left:274px;top:44px;width:154px;height:72px;animation:m4sel 10s ease-in-out infinite,m4orig 10s ease-in-out infinite}
.pk{position:absolute;width:178px;border-radius:10px;background:#131a23;border:1.5px dashed rgba(232,150,58,.5);padding:7px 8px 8px;overflow:hidden;z-index:2}
.m4-park{left:452px;top:40px}
.pk-title{display:block;font:600 10px system-ui;color:#e6edf3;white-space:nowrap}
.pk-artist{display:block;margin-top:1px;font:400 8.5px system-ui;color:#8b98a5;white-space:nowrap}
.pk-pill{margin-left:auto;flex:none;font:700 7px ui-monospace,monospace;padding:1px 5px;border-radius:9px;background:rgba(232,150,58,.16);border:1px solid rgba(232,150,58,.45);color:#f0b269}
.pk-join{margin-left:auto;flex:none;font:700 7.5px ui-monospace,monospace;padding:2px 6px;border-radius:4px;background:rgba(47,127,246,.16);border:1px solid rgba(96,165,250,.5);color:#7fb0f5}
.m4-c1{left:-128px;top:186px;width:154px;height:72px}
.m4-c2{left:54px;top:186px;width:154px;height:72px}
.m4-tip{left:236px;top:186px;width:214px;height:110px;animation:m4demote 10s ease-in-out infinite}
.m4-tip .tip-pill{animation:m4pillout 10s ease-in-out infinite}
.m4-jc1{left:40px;top:216px}
.m4-jc2{left:222px;top:216px}
.m4-jc3{left:464px;top:216px;opacity:0;animation:m4chip3 10s ease-in-out infinite}
.m4-wire3{opacity:0;animation:m4wire3 10s ease-in-out infinite}
.m4-lift{left:274px;top:44px;width:154px;height:72px;opacity:0;transform-origin:0 0;box-shadow:0 12px 26px rgba(0,0,0,.6);animation:m4move 10s ease-in-out infinite;z-index:6}
/* border-width stays 1.5 through the handoff so the ring cannot reflow it */
.m4-new{left:478px;top:186px;width:154px;height:72px;border-width:1.5px;opacity:0;transform-origin:0 0;animation:m4new 10s ease-in-out infinite,m4promote 10s ease-in-out infinite}
.m4-new .tip-pill{opacity:0;animation:m4pillin 10s ease-in-out infinite}

/* ------------------------------------------------ 10 · capture */
.lp-capture{width:100%;max-width:1060px;margin:0 auto;padding:120px 40px 90px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.lp-capture-head{margin:0;font:500 24px 'Space Grotesk',sans-serif;color:#e6edf3}
.lp-capture-body{margin:0;font:400 13.5px/1.65 system-ui;color:#8b98a5;max-width:420px}
.lp-capture-form{display:flex;gap:10px;margin:10px 0 0}
.lp-email{width:280px;font:400 12px 'IBM Plex Mono',monospace;color:#e6edf3;background:#0a0f16;border:1px solid rgba(127,176,245,.3);border-radius:999px;padding:12px 20px;outline:none}
.lp-email:focus{border-color:#7fb0f5}
.lp-submit{font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#070a10;background:#7fb0f5;border:0;border-radius:999px;padding:12px 24px;cursor:pointer;user-select:none;-webkit-appearance:none;appearance:none}
.lp-submit:hover{background:#a8ccff}
.lp-done{margin:10px 0 0;font:500 12px 'IBM Plex Mono',monospace;color:#5fd4a4;border:1px solid rgba(95,212,164,.35);border-radius:999px;padding:12px 26px}
.lp-micro{margin:4px 0 0;font:400 9px 'IBM Plex Mono',monospace;color:#3f4c5e}

/* ------------------------------------------------- 11 · footer */
.lp-footer{border-top:1px solid rgba(255,255,255,.06);padding:26px 40px;display:flex;align-items:center;gap:12px}
.lp-footer-text{font:400 10px 'IBM Plex Mono',monospace;color:#3f4c5e}

/* --------------------------------------- 12 · reduced motion
   DOC 13 §6: no moving pixels anywhere, all content readable.
   The field renders one settled frame (landing.js), the thread
   reveal is instant, letters go plain, choreographies stay frozen
   at their 0% keyframe (a clean resting state for every mock).  */
@media (prefers-reduced-motion: reduce){
  .lp-hero-inner{animation:none}
  .lp-thread{animation:none;opacity:.7}
  .lp-letter{background-image:none !important;-webkit-text-fill-color:#e6edf3;color:#e6edf3}
  .lp-block{transition:none}
  .lp-node{transition:none}
  .mk{transition:none}
  .mk,.mk *{animation-play-state:paused !important}
  /* Mock 1's whole point is the fan, and the fan is a BEAT — its 0% frame
     is the chain alone. With motion off, show the fan statically instead of
     an empty right half; nothing moves, and more content is readable. */
  .m1-fan,.m1-head,.m1-n0,.m1-n1,.m1-n2{opacity:1 !important;transform:none !important}
}