/* ===================================================================
   Bluffy v3 design system.
   Five inks, two lines, one pink. A 12-column spine. One light source.
   Shared by index, film-production, freeform and agentic.
   The access and auth pages still run on main.css.
   =================================================================== */
/* ===== TOKENS: five inks, two lines, one scale ===== */
:root{
  --ink-1:#f6f4f1; --ink-2:rgba(246,244,241,.74); --ink-3:rgba(246,244,241,.52);
  --ink-4:rgba(246,244,241,.34); --ink-5:rgba(246,244,241,.16);
  --line-1:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055);
  --ac:#ff5e8a;
  --ground:#0a0a0c; --panel:#101013; --sunk:#08080a;
  --t-display:clamp(2.1rem,4.4vw,3.6rem); --t-lede:clamp(1.05rem,1.5vw,1.3rem); --t-body:.95rem;
  --gut:clamp(1.25rem,4vw,4rem);
}
body{background:var(--ground);color:var(--ink-2);font-family:'Instrument Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;}
/* one light source, top of page */
body::before{content:"";position:fixed;inset:0 0 auto;height:70vh;pointer-events:none;z-index:0;
  background:radial-gradient(120% 70% at 50% -25%,rgba(255,94,138,.10),transparent 60%);}
main{position:relative;z-index:1;}

/* ===== 12-COL SPINE ===== */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gut);}
.sec{padding:clamp(5rem,10vw,9rem) 0;}
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:center;}
.col-text{grid-column:1/6;}
.col-vis{grid-column:7/13;}
.flip .col-text{grid-column:8/13;order:2;}
.flip .col-vis{grid-column:1/7;order:1;}

/* ===== FOLIO (replaces pink eyebrow) ===== */
.folio{display:flex;align-items:center;gap:.75rem;margin-bottom:1.6rem;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;}
.folio i{font-style:normal;color:var(--ac);}
.folio b{font-weight:400;color:var(--ink-4);}
.folio::after{content:"";flex:1;height:1px;background:var(--line-2);}
.folio.mid{justify-content:center;}
.folio.mid::after{display:none;}
.folio.mid::before{content:"";flex:none;}

/* ===== TWO-BEAT TITLES ===== */
.h2{font-family:'Instrument Serif',serif;font-size:var(--t-display);line-height:1.03;
  letter-spacing:-.012em;color:var(--ink-1);margin-bottom:1.1rem;}
.h2 em{font-style:italic;color:var(--ink-3);}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:34ch;}
.pull{font-family:'Instrument Serif',serif;font-style:italic;font-size:1.35rem;line-height:1.3;
  color:var(--ink-3);border-left:1px solid var(--ac);padding-left:1rem;margin:2rem 0 0;}

/* bullets: Instrument Sans, sentence case, numbered */
.pts{margin-top:2rem;display:flex;flex-direction:column;gap:.85rem;}
.pts li{display:grid;grid-template-columns:1.6rem 1fr;font-size:var(--t-body);line-height:1.45;color:var(--ink-2);}
.pts li::before{content:counter(b,decimal-leading-zero);counter-increment:b;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-5);padding-top:.28em;}
.pts{counter-reset:b;}

/* ===== PANEL SYSTEM (credibility) ===== */
.panel{position:relative;background:var(--panel);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 2px 4px rgba(0,0,0,.4),
             0 12px 28px rgba(0,0,0,.45), 0 40px 80px -30px rgba(0,0,0,.8);}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");}
.phead{display:flex;align-items:center;gap:.6rem;height:30px;padding:0 .8rem;
  background:rgba(255,255,255,.028);border-bottom:1px solid var(--line-2);}
.phead .sq{width:5px;height:5px;background:var(--ac);border-radius:1px;}
.phead .lb{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);}
.phead .rt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-5);
  font-variant-numeric:tabular-nums;}
.pbody{padding:14px;}
.panel, .panel *{font-variant-numeric:tabular-nums;}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.95);}
/* Scrim: dark enough for the copy, light enough to read the film. */
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 38% at 50% 68%,rgba(8,8,10,.93) 0%,rgba(8,8,10,.80) 48%,rgba(8,8,10,0) 100%),
    linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.22) 26%,rgba(8,8,10,.80) 78%,rgba(8,8,10,.97) 100%);}
/* Reduced motion: poster only, never autoplay. */
@media (prefers-reduced-motion: reduce){ .hero-bg video{display:none;}
  .hero-bg{background:#0a0a0c url(/video/hero-poster.jpg) center/cover;} }
.hero-mid{position:relative;z-index:1;flex:1;display:flex;align-items:flex-end;justify-content:center;
  padding:0 var(--gut) clamp(3.5rem,14vh,9rem);}
.hero-in{width:100%;max-width:640px;text-align:center;}
.hero-mark{font-family:'Gochi Hand',cursive;font-size:clamp(2.6rem,5.2vw,4rem);line-height:1;
  letter-spacing:.08em;color:var(--ac);margin-bottom:1.1rem;user-select:none;
  text-shadow:0 8px 46px rgba(255,94,138,.30), 0 2px 18px rgba(0,0,0,.55);}
/* Mono, not the serif. This line is a positioning statement, not an editorial
   title, and mono ties it to the chrome the rest of the site is built from. */
.hero-ask{font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:clamp(1.05rem,1.9vw,1.45rem);letter-spacing:.005em;line-height:1.35;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.85);}
/* Small and quiet. The film is the hero, not the chrome: a solid white button
   over a moving frame reads as an advert. Two glass chips instead, the primary
   separated by a slightly brighter edge rather than by shouting. The sub-page
   top bar wears the same two chips (owner, 2026-09-03), so the pair a visitor
   met on the hero is the pair that follows them, and the closing Request
   Access is the same chip. */
.hero-cta{display:flex;justify-content:center;gap:.45rem;margin-top:1.5rem;}
.hero-cta .lnk,.tcta .lnk,.cta .lnk,.access .lnk{padding:.55rem 1.05rem;font-size:9.5px;letter-spacing:.18em;
  border-radius:4px;border-color:rgba(255,255,255,.16);color:var(--ink-3);
  background:rgba(10,10,12,.30);backdrop-filter:blur(6px);
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;}
.hero-cta .lnk:hover,.tcta .lnk:hover,.cta .lnk:hover,.access .lnk:hover{color:var(--ink-1);border-color:rgba(255,255,255,.30);}
.hero-cta .lnk.pri,.tcta .lnk.pri,.cta .lnk.pri,.access .lnk.pri{font-weight:500;color:var(--ink-1);
  background:rgba(246,244,241,.09);border-color:rgba(255,255,255,.28);}
.hero-cta .lnk.pri:hover,.tcta .lnk.pri:hover,.cta .lnk.pri:hover,.access .lnk.pri:hover{background:rgba(246,244,241,.15);border-color:rgba(255,255,255,.44);}
@media (prefers-reduced-motion:reduce){ .hero-cta .lnk,.tcta .lnk,.cta .lnk,.access .lnk{transition:none;} }
.lnk{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:.7rem 1.2rem;border-radius:5px;border:1px solid var(--line-1);color:var(--ink-2);text-decoration:none;}
.lnk.pri{background:var(--ink-1);border-color:var(--ink-1);color:#0a0a0c;font-weight:600;}

/* ===== DOORS =====
   Three equal doors, none permanently lit. The hover is the app's own gesture
   (ModeDoors.tsx / .door-card): a 3px lift, the pink edge, a soft pink glow,
   and the poster easing up 4% on a slower clock so the card feels like a
   place rather than a button. No eyebrow, no flagship. */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:310px;
  border:1px solid var(--line-1);border-radius:10px;overflow:hidden;padding:1.4rem;isolation:isolate;}
.door .shot{position:absolute;inset:0;z-index:-2;}
.door .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.door::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,12,.35) 0%,rgba(10,10,12,.88) 55%,rgba(10,10,12,.97) 100%);}
.dname{font-family:'Instrument Serif',serif;font-size:1.5rem;color:var(--ink-1);line-height:1.1;margin-bottom:.5rem;}
.dbody{font-size:.88rem;line-height:1.5;color:var(--ink-3);margin-bottom:1rem;}
/* One mono line per card, always. No boxes, no ragged second row. */
.dlist{padding-top:.85rem;border-top:1px solid var(--line-1);
  font-family:'JetBrains Mono',monospace;font-size:clamp(9px,.82vw,10.5px);letter-spacing:.01em;
  color:var(--ink-3);line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* The narrowest three-up widths (901 to 1000px) squeeze the tag line by a few
   pixels; a touch less side padding keeps it on one line, as the rule says. */
@media (min-width:901px) and (max-width:1000px){ .door{padding:1.4rem 1.05rem;} }
/* ===== THE WAY IN (film-production): the story panel, animated =====
   A twelve-second CSS loop. Every element owns a keyframe set with absolute
   percentages, so the whole panel stays in phase and resets together at the
   end of the cycle. No JavaScript. Reduced motion holds the finished state. */
.story{display:grid;grid-template-columns:1.15fr auto 1fr;gap:10px;align-items:start;min-height:214px;}
.st-doc{background:var(--sunk);border:1px solid var(--line-2);border-radius:4px;padding:10px 12px 12px;}
.st-file{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--line-2);}
.st-line{font-family:'JetBrains Mono',monospace;font-size:9.5px;line-height:1.7;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-line.slug{color:var(--ink-1);}
.st-arrow{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink-4);padding-top:6px;}
.st-scenes{display:flex;flex-direction:column;gap:9px;}
.st-sc{position:relative;display:flex;align-items:baseline;gap:8px;font-size:.86rem;color:var(--ink-2);padding-bottom:5px;}
.st-sc b{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);}
.st-bar{position:absolute;left:0;bottom:0;height:1px;background:var(--ink-4);width:0;}
.st-shots{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.st-shots span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line-1);border-radius:3px;padding:.15rem .4rem;}
.st-note{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-top:2px;}
.story .st-doc,.story .st-line,.story .st-arrow,.story .st-scene,.story .st-shots span,.story .st-note{opacity:0;}
@keyframes st-a2{0%,2%{opacity:0;transform:translateY(4px)}5%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a2{animation:st-a2 12s linear infinite;}
@keyframes st-a6{0%,6%{opacity:0;transform:translateY(4px)}9%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a6{animation:st-a6 12s linear infinite;}
@keyframes st-a11{0%,11%{opacity:0;transform:translateY(4px)}14%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a11{animation:st-a11 12s linear infinite;}
@keyframes st-a16{0%,16%{opacity:0;transform:translateY(4px)}19%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a16{animation:st-a16 12s linear infinite;}
@keyframes st-a21{0%,21%{opacity:0;transform:translateY(4px)}24%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a21{animation:st-a21 12s linear infinite;}
@keyframes st-a26{0%,26%{opacity:0;transform:translateY(4px)}29%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a26{animation:st-a26 12s linear infinite;}
@keyframes st-a32{0%,32%{opacity:0;transform:translateY(4px)}35%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a32{animation:st-a32 12s linear infinite;}
@keyframes st-a36{0%,36%{opacity:0;transform:translateY(4px)}39%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a36{animation:st-a36 12s linear infinite;}
@keyframes st-a42{0%,42%{opacity:0;transform:translateY(4px)}45%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a42{animation:st-a42 12s linear infinite;}
@keyframes st-a48{0%,48%{opacity:0;transform:translateY(4px)}51%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a48{animation:st-a48 12s linear infinite;}
@keyframes st-a52{0%,52%{opacity:0;transform:translateY(4px)}55%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a52{animation:st-a52 12s linear infinite;}
@keyframes st-a55{0%,55%{opacity:0;transform:translateY(4px)}58%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a55{animation:st-a55 12s linear infinite;}
@keyframes st-a58{0%,58%{opacity:0;transform:translateY(4px)}61%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a58{animation:st-a58 12s linear infinite;}
@keyframes st-a61{0%,61%{opacity:0;transform:translateY(4px)}64%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a61{animation:st-a61 12s linear infinite;}
@keyframes st-a64{0%,64%{opacity:0;transform:translateY(4px)}67%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a64{animation:st-a64 12s linear infinite;}
@keyframes st-a67{0%,67%{opacity:0;transform:translateY(4px)}70%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a67{animation:st-a67 12s linear infinite;}
@keyframes st-a70{0%,70%{opacity:0;transform:translateY(4px)}73%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a70{animation:st-a70 12s linear infinite;}
@keyframes st-a73{0%,73%{opacity:0;transform:translateY(4px)}76%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a73{animation:st-a73 12s linear infinite;}
@keyframes st-a76{0%,76%{opacity:0;transform:translateY(4px)}79%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a76{animation:st-a76 12s linear infinite;}
@keyframes st-a86{0%,86%{opacity:0;transform:translateY(4px)}89%,97%{opacity:1;transform:none}100%{opacity:0;transform:translateY(4px)}}
.story .a86{animation:st-a86 12s linear infinite;}
@keyframes st-f79{0%,79%{width:0}83%,97%{width:100%}100%{width:0}}
.story .f79{animation:st-f79 12s linear infinite;}
@keyframes st-f82{0%,82%{width:0}86%,97%{width:100%}100%{width:0}}
.story .f82{animation:st-f82 12s linear infinite;}
@keyframes st-f85{0%,85%{width:0}89%,97%{width:100%}100%{width:0}}
.story .f85{animation:st-f85 12s linear infinite;}
@media (max-width:640px){ .story{grid-template-columns:1fr;} .st-arrow{display:none;} }
@media (prefers-reduced-motion:reduce){
  .story *{animation:none !important;}
  .story .st-doc,.story .st-line,.story .st-arrow,.story .st-scene,.story .st-shots span,.story .st-note{opacity:1 !important;transform:none !important;}
  .story .st-bar{width:100% !important;}
}
/* ===== BOARDS TO FOOTAGE (film-production): the chain plays out =====
   Four quick sketches converge on the approved frame, then the still, then
   the take with a playhead across it. One eight-second CSS clock, no script.
   Reduced motion holds the finished chain (the approved board on top). */
.chain.bf .stage,.chain.bf .arw,.chain.bf .bv,.chain.bf .ok,.chain.bf .ph{opacity:0;}
.chain.bf .bv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.chain.bf .ok{position:absolute;top:5px;right:5px;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-1);background:rgba(10,10,12,.72);border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:.15rem .4rem;}
.chain.bf .ph{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(246,244,241,.85);}
@keyframes bf-b{0%,3%{opacity:0}6%,97%{opacity:1}100%{opacity:0}}
.chain.bf .stage.b{animation:bf-b 8s linear infinite;}
@keyframes bf-v2{0%,14%{opacity:0}17%,97%{opacity:1}100%{opacity:0}}
.chain.bf .bv2{animation:bf-v2 8s linear infinite;}
@keyframes bf-v3{0%,25%{opacity:0}28%,97%{opacity:1}100%{opacity:0}}
.chain.bf .bv3{animation:bf-v3 8s linear infinite;}
@keyframes bf-v4{0%,36%{opacity:0}39%,97%{opacity:1}100%{opacity:0}}
.chain.bf .bv4{animation:bf-v4 8s linear infinite;}
@keyframes bf-ok{0%,44%{opacity:0}47%,97%{opacity:1}100%{opacity:0}}
.chain.bf .ok{animation:bf-ok 8s linear infinite;}
@keyframes bf-a1{0%,48%{opacity:0}50%,97%{opacity:1}100%{opacity:0}}
.chain.bf .arw:nth-of-type(1){animation:bf-a1 8s linear infinite;}
@keyframes bf-s{0%,51%{opacity:0}55%,97%{opacity:1}100%{opacity:0}}
.chain.bf .stage.s{animation:bf-s 8s linear infinite;}
@keyframes bf-a2{0%,62%{opacity:0}64%,97%{opacity:1}100%{opacity:0}}
.chain.bf .arw:nth-of-type(2){animation:bf-a2 8s linear infinite;}
@keyframes bf-t{0%,65%{opacity:0}69%,97%{opacity:1}100%{opacity:0}}
.chain.bf .stage.t{animation:bf-t 8s linear infinite;}
@keyframes bf-ph{0%,68%{opacity:0;left:0}69%{opacity:1;left:0}94%{opacity:1;left:100%}95%,100%{opacity:0;left:100%}}
.chain.bf .ph{animation:bf-ph 8s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .chain.bf .stage,.chain.bf .arw,.chain.bf .bv,.chain.bf .ok{animation:none !important;opacity:1 !important;}
  .chain.bf .ph{animation:none !important;opacity:0 !important;}
}
/* ===== THE SCENE TAKE (film-production): the Slate, animated =====
   Four shots on the strip, three joined into one run, the Slate filling in,
   a playhead across the lot with the cuts inside the run. One twelve-second
   CSS clock, no script. Reduced motion holds the joined state. */
.take.st2{height:58px;}
.take.st2 .bgf{gap:3px;padding:0;}
.take.st2 .bgf img{filter:brightness(.5) saturate(.7);border-radius:2px;}
.take.st2 .run{position:relative;flex:3;display:flex;gap:3px;min-width:0;}
.take.st2 .run img{flex:1;min-width:0;}
.take.st2 .solo{flex:1;}
.take.st2 .run::after{content:"";position:absolute;inset:0;border:1px solid rgba(246,244,241,.8);border-radius:3px;pointer-events:none;opacity:0;}
.take.st2 .brk,.take.st2 .sol{position:absolute;top:6px;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-1);background:rgba(10,10,12,.7);border-radius:3px;padding:.15rem .4rem;opacity:0;white-space:nowrap;}
.take.st2 .brk{left:8px;} .take.st2 .sol{right:8px;}
.take.st2 .brk b,.take.st2 .sol b{font-weight:400;color:var(--ink-3);margin-right:.5em;}
.take.st2 .tick{opacity:0;}
.take.st2 .ph{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(246,244,241,.9);opacity:0;}
.rows.slate .row{opacity:0;}
@keyframes sc-gap{0%,25%{gap:3px}30%,97%{gap:0}100%{gap:3px}}
.take.st2 .run{animation:sc-gap 12s linear infinite;}
@keyframes sc-run{0%,26%{opacity:0}30%,97%{opacity:1}100%{opacity:0}}
.take.st2 .run::after{animation:sc-run 12s linear infinite;}
@keyframes sc-brk{0%,30%{opacity:0}33%,97%{opacity:1}100%{opacity:0}}
.take.st2 .brk{animation:sc-brk 12s linear infinite;}
@keyframes sc-sol{0%,33%{opacity:0}36%,97%{opacity:1}100%{opacity:0}}
.take.st2 .sol{animation:sc-sol 12s linear infinite;}
@keyframes sc-tick{0%,31%{opacity:0}34%,97%{opacity:1}100%{opacity:0}}
.take.st2 .tick{animation:sc-tick 12s linear infinite;}
@keyframes sc-r0{0%,42%{opacity:0}45%,97%{opacity:1}100%{opacity:0}}
.rows.slate .row:nth-child(1){animation:sc-r0 12s linear infinite;}
@keyframes sc-r1{0%,46%{opacity:0}49%,97%{opacity:1}100%{opacity:0}}
.rows.slate .row:nth-child(2){animation:sc-r1 12s linear infinite;}
@keyframes sc-r2{0%,50%{opacity:0}53%,97%{opacity:1}100%{opacity:0}}
.rows.slate .row:nth-child(3){animation:sc-r2 12s linear infinite;}
@keyframes sc-r3{0%,54%{opacity:0}57%,97%{opacity:1}100%{opacity:0}}
.rows.slate .row:nth-child(4){animation:sc-r3 12s linear infinite;}
@keyframes sc-r4{0%,58%{opacity:0}61%,97%{opacity:1}100%{opacity:0}}
.rows.slate .row:nth-child(5){animation:sc-r4 12s linear infinite;}
@keyframes sc-ph{0%,62%{opacity:0;left:0}63%{opacity:1;left:0}95%{opacity:1;left:100%}96%,100%{opacity:0;left:100%}}
.take.st2 .ph{animation:sc-ph 12s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .take.st2 .run,.take.st2 .run::after,.take.st2 .brk,.take.st2 .sol,.take.st2 .tick,.rows.slate .row{animation:none !important;opacity:1 !important;}
  .take.st2 .run{gap:0 !important;}
  .take.st2 .ph{animation:none !important;opacity:0 !important;}
}
/* ===== THE EDITOR (film-production): the Pro timeline, drawn =====
   Lane colours are the app's own timeline tokens (styles.css --tl-*): amber
   playhead #e8b04b, picture #5b8def to #3e66b8, dialogue #58b98a on #1e3a2d,
   music #b87fe0 on #2b213b. Not the site palette on purpose: this is the
   app's editor, and it should look like it. */
.graph.tlx svg{min-width:0;width:100%;height:100%;display:block;}
.graph.tlx{min-width:0;}
.nle{min-width:596px;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-3);
  background:var(--sunk);border:1px solid var(--line-2);border-radius:5px;overflow:hidden;}
.nle-bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.025);}
.nle-bar .tool{letter-spacing:.1em;text-transform:uppercase;font-size:8.5px;color:var(--ink-4);padding:.15rem .4rem;border:1px solid transparent;border-radius:3px;}
.nle-bar .tool.on{color:var(--ink-1);border-color:var(--line-1);background:rgba(255,255,255,.04);}
.nle-bar .keys{margin-left:6px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);border:1px dashed var(--line-1);border-radius:3px;padding:.15rem .45rem;}
.nle-bar .tc{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:#e8b04b;letter-spacing:.06em;}
.nle-grid{display:grid;grid-template-columns:78px 1fr;}
.gut{border-right:1px solid var(--line-2);background:rgba(255,255,255,.015);}
.gut .gr{box-sizing:border-box;height:23px;border-bottom:1px solid var(--line-2);}
.gut .gl{box-sizing:border-box;display:flex;align-items:center;gap:6px;height:40px;padding:0 8px;border-bottom:1px solid var(--line-2);}
.gut .gl b{font-weight:600;font-size:9.5px;color:var(--ink-2);width:16px;}
.gut .gl span{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);flex:1;}
.gut .gl i{width:5px;height:5px;border-radius:50%;background:var(--ink-5);}
.gut .gl.v1 i{background:#5b8def;} .gut .gl.a1 i{background:#58b98a;} .gut .gl.mu i{background:#b87fe0;} .gut .gl.v2 i{background:var(--ink-3);}
.gut .gl.mu,.nle .lane.mu{border-bottom:0;}
.lanes{position:relative;}
.ruler2{box-sizing:border-box;position:relative;height:23px;border-bottom:1px solid var(--line-2);font-size:8.5px;color:var(--ink-4);
  background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 4.545%);}
.ruler2 > span{position:absolute;top:4px;padding-left:4px;font-variant-numeric:tabular-nums;border-left:1px solid var(--line-1);height:14px;line-height:14px;}
.ruler2 .io{position:absolute;bottom:0;height:3px;background:#e8b04b;opacity:.75;}
.ruler2 .mk{position:absolute;top:0;width:1px;height:22px;font-style:normal;}
.ruler2 .mk::before{content:"";position:absolute;top:0;left:-4px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid currentColor;}
.ruler2 .mk u{position:absolute;top:1px;left:6px;text-decoration:none;font-size:8px;letter-spacing:.08em;color:currentColor;white-space:nowrap;}
.ruler2 .m1{color:#e0685f;} .ruler2 .m2{color:#58b98a;}
.nle .lane{box-sizing:border-box;position:relative;display:flex;align-items:stretch;gap:0;height:40px;padding:3px 0;border-bottom:1px solid var(--line-2);background:transparent;border-radius:0;}
.nle .lane .gap{flex:none;}
.oclip{display:flex;align-items:center;justify-content:center;gap:6px;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  background:rgba(255,255,255,.06);border:1px solid var(--line-1);border-radius:3px;}
.oclip img{width:26px;height:16px;object-fit:cover;border-radius:2px;opacity:.9;}
.oclip.ttl{font-family:'Instrument Serif',serif;font-size:11px;letter-spacing:.14em;color:var(--ink-1);}
.vclip{position:relative;flex:none;border-radius:3px;overflow:hidden;background-size:auto 100%;background-repeat:repeat-x;
  box-shadow:inset 0 0 0 1px rgba(91,141,239,.55),inset 0 -8px 0 rgba(62,102,184,.85);}
.vclip::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(91,141,239,.18),rgba(62,102,184,.32));}
.vclip .cn{position:absolute;left:6px;bottom:1px;font-size:8px;letter-spacing:.06em;color:#fff;z-index:1;}
.vclip .cd{position:absolute;right:6px;bottom:1px;font-size:8px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);z-index:1;}
.vclip .spd{position:absolute;right:6px;top:3px;font-size:8px;color:#0a0a0c;background:#e8b04b;border-radius:2px;padding:0 3px;z-index:1;}
.vclip.sel{box-shadow:inset 0 0 0 1px #e8b04b,inset 0 -8px 0 rgba(62,102,184,.85);}
.vclip .h{position:absolute;top:0;bottom:0;width:4px;background:#e8b04b;opacity:.9;z-index:2;}
.vclip .h.l{left:0;} .vclip .h.r{right:0;}
.seam{flex:none;width:2%;margin:0 -1%;position:relative;z-index:2;background:linear-gradient(180deg,#e8b04b,rgba(232,176,75,.55));border-radius:2px;}
.aclip{flex:none;border-radius:3px;background:#1e3a2d;box-shadow:inset 0 0 0 1px rgba(88,185,138,.45);padding:2px 3px;}
.aclip svg,.mclip svg{fill:#58b98a;opacity:.9;}
.mclip{position:relative;flex:none;border-radius:3px;background:#2b213b;box-shadow:inset 0 0 0 1px rgba(184,127,224,.45);padding:2px 3px;}
.mclip svg{fill:#b87fe0;}
.mclip .mn{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#e9dcf7;background:rgba(43,33,59,.85);padding:1px 4px;border-radius:2px;}
.phd{position:absolute;top:0;bottom:0;width:1px;background:#e8b04b;z-index:5;box-shadow:0 0 6px rgba(232,176,75,.6);}
.phd::before{content:"";position:absolute;top:0;left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #e8b04b;}
/* ===== THE EDITOR, animated: one fourteen-second CSS clock, no script.
   The playhead runs the cut, the blade lights, a cut lands on the selected
   clip at the playhead, a dissolve joins it, a marker drops, then one undo
   takes the three back together and the cut plays on. Reduced motion holds
   the still: playhead parked, no edit overlays. */
.nle .tc{position:relative;display:inline-block;min-width:82px;text-align:right;}
.nle .tc i{position:absolute;right:0;top:0;font-style:normal;opacity:0;}
.nle .undo{margin-left:8px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:#0a0a0c;background:#e8b04b;border-radius:3px;padding:.2rem .45rem;opacity:0;white-space:nowrap;}
.nle .cutln{position:absolute;top:0;bottom:0;left:43%;width:2px;margin-left:-1px;background:#fff;opacity:0;z-index:4;}
.nle .cutgap{position:absolute;top:3px;bottom:4px;left:43%;width:3px;margin-left:-1px;background:var(--sunk);opacity:0;z-index:3;}
.nle .cn2{position:absolute;left:calc(43% + 8px);bottom:4px;font-size:8px;letter-spacing:.06em;color:#fff;opacity:0;z-index:3;}
.nle .seam2{position:absolute;top:3px;bottom:4px;left:43%;width:2%;margin-left:-1%;background:linear-gradient(180deg,#e8b04b,rgba(232,176,75,.55));border-radius:2px;opacity:0;z-index:3;}
.nle .m3{color:#5b8def;opacity:0;}
@keyframes ed-ph{0%,2%{left:0}30%,62%{left:43%}92%,100%{left:100%}}
.nle .phd{left:43%;animation:ed-ph 14s linear infinite;}
@keyframes ed-blade{0%,30%{color:var(--ink-4);border-color:transparent;background:transparent}32%,60%{color:var(--ink-1);border-color:var(--line-1);background:rgba(255,255,255,.04)}62%,100%{color:var(--ink-4);border-color:transparent;background:transparent}}
.nle .tool.bld{animation:ed-blade 14s linear infinite;}
@keyframes ed-select{0%,30%{color:var(--ink-1);border-color:var(--line-1);background:rgba(255,255,255,.04)}32%,60%{color:var(--ink-4);border-color:transparent;background:transparent}62%,100%{color:var(--ink-1);border-color:var(--line-1);background:rgba(255,255,255,.04)}}
.nle .tool.sel{animation:ed-select 14s linear infinite;}
@keyframes ed-t1{0%{opacity:1}10%{opacity:1}11%,100%{opacity:0}}
.nle .tc .t1{animation:ed-t1 14s linear infinite;}
@keyframes ed-t2{0%,10%{opacity:0}11%,20%{opacity:1}21%,100%{opacity:0}}
.nle .tc .t2{animation:ed-t2 14s linear infinite;}
@keyframes ed-t3{0%,20%{opacity:0}21%,62%{opacity:1}63%,100%{opacity:0}}
.nle .tc .t3{animation:ed-t3 14s linear infinite;}
@keyframes ed-t4{0%,62%{opacity:0}63%,77%{opacity:1}78%,100%{opacity:0}}
.nle .tc .t4{animation:ed-t4 14s linear infinite;}
@keyframes ed-t5{0%,77%{opacity:0}78%,100%{opacity:1}}
.nle .tc .t5{animation:ed-t5 14s linear infinite;}
@keyframes ed-cutln{0%,34%{opacity:0}35%,37%{opacity:1}38%,100%{opacity:0}}
.nle .cutln{animation:ed-cutln 14s linear infinite;}
@keyframes ed-cut{0%,36%{opacity:0}37%,59%{opacity:1}60%,100%{opacity:0}}
.nle .cutgap,.nle .cn2{animation:ed-cut 14s linear infinite;}
@keyframes ed-seam2{0%,40%{opacity:0}43%,59%{opacity:1}60%,100%{opacity:0}}
.nle .seam2{animation:ed-seam2 14s linear infinite;}
@keyframes ed-m3{0%,46%{opacity:0}48%,59%{opacity:1}60%,100%{opacity:0}}
.nle .m3{animation:ed-m3 14s linear infinite;}
@keyframes ed-undo{0%,54%{opacity:0}56%,68%{opacity:1}69%,100%{opacity:0}}
.nle .undo{animation:ed-undo 14s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .nle .phd,.nle .tool,.nle .tc i,.nle .undo,.nle .cutln,.nle .cutgap,.nle .cn2,.nle .seam2,.nle .m3{animation:none !important;}
  .nle .phd{left:43% !important;} .nle .tc .t3{opacity:1 !important;}
  .nle .undo,.nle .cutln,.nle .cutgap,.nle .cn2,.nle .seam2,.nle .m3{opacity:0 !important;}
}
/* ===== RIPPLE (film-production): the change walks the film =====
   The new face lands, the shots she is in are flagged one by one, the batch
   is priced, one click runs it, the flagged shots resolve in turn, a restore
   point is kept. One twelve-second CSS clock, no script. Reduced motion holds
   the finished state. */
.rp-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:12px;}
.rp-grid .rp{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border-radius:2px;
  border:1px solid var(--line-2);background:var(--sunk);font-family:'JetBrains Mono',monospace;font-style:normal;
  font-size:8px;letter-spacing:.08em;color:var(--ink-5);}
.rp-go{display:inline-block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ac);border:1px solid rgba(255,94,138,.5);border-radius:3px;padding:.3rem .6rem;opacity:0;}
.recast .rc-face.now,.recast .rc-meta,.rows.rp .row{opacity:0;}
.hist-rail i.on2{background:var(--ink-5);width:5px;height:5px;}
@keyframes rp-now{0%,8%{opacity:0}12%,97%{opacity:1}100%{opacity:0}}
.recast .rc-face.now,.recast .rc-meta{animation:rp-now 12s linear infinite;}
@keyframes rp-c1{0%,14%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}16%,58%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}60%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f1{animation:rp-c1 12s linear infinite;}
@keyframes rp-c2{0%,18%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}20%,62%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}64%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f2{animation:rp-c2 12s linear infinite;}
@keyframes rp-c3{0%,22%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}24%,66%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}68%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f3{animation:rp-c3 12s linear infinite;}
@keyframes rp-c4{0%,26%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}28%,70%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}72%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f4{animation:rp-c4 12s linear infinite;}
@keyframes rp-c5{0%,30%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}32%,74%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}76%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f5{animation:rp-c5 12s linear infinite;}
@keyframes rp-c6{0%,34%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}36%,78%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}80%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f6{animation:rp-c6 12s linear infinite;}
@keyframes rp-c7{0%,38%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}40%,82%{border-color:rgba(255,94,138,.75);background:rgba(255,94,138,.14);color:var(--ink-1)}84%,97%{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2)}100%{border-color:var(--line-2);background:var(--sunk);color:var(--ink-5)}}
.rp-grid .rp.f7{animation:rp-c7 12s linear infinite;}
@keyframes rp-r1{0%,42%{opacity:0}45%,97%{opacity:1}100%{opacity:0}}
.rows.rp .row:nth-child(1){animation:rp-r1 12s linear infinite;}
@keyframes rp-r2{0%,45%{opacity:0}48%,97%{opacity:1}100%{opacity:0}}
.rows.rp .row:nth-child(2){animation:rp-r2 12s linear infinite;}
@keyframes rp-r3{0%,48%{opacity:0}51%,97%{opacity:1}100%{opacity:0}}
.rows.rp .row:nth-child(3){animation:rp-r3 12s linear infinite;}
@keyframes rp-go{0%,52%{opacity:0;background:transparent;color:var(--ac)}55%,57%{opacity:1;background:transparent;color:var(--ac)}59%,86%{opacity:1;background:var(--ac);color:#0a0a0c}88%,97%{opacity:1;background:transparent;color:var(--ac)}100%{opacity:0}}
.rp-go{animation:rp-go 12s linear infinite;}
@keyframes rp-h1{0%,84%{background:var(--ac);width:8px;height:8px;box-shadow:0 0 0 3px rgba(255,94,138,.18)}88%,100%{background:var(--ink-4);width:5px;height:5px;box-shadow:none}}
.hist-rail i.on{animation:rp-h1 12s linear infinite;}
@keyframes rp-h2{0%,84%{background:var(--ink-5);width:5px;height:5px;box-shadow:none}88%,97%{background:var(--ac);width:8px;height:8px;box-shadow:0 0 0 3px rgba(255,94,138,.18)}100%{background:var(--ink-5);width:5px;height:5px;box-shadow:none}}
.hist-rail i.on2{animation:rp-h2 12s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .recast .rc-face.now,.recast .rc-meta,.rows.rp .row,.rp-go,.rp-grid .rp,.hist-rail i{animation:none !important;}
  .recast .rc-face.now,.recast .rc-meta,.rows.rp .row,.rp-go{opacity:1 !important;}
  .rp-grid .rp.f1,.rp-grid .rp.f2,.rp-grid .rp.f3,.rp-grid .rp.f4,.rp-grid .rp.f5,.rp-grid .rp.f6,.rp-grid .rp.f7{border-color:var(--ink-3);background:rgba(246,244,241,.05);color:var(--ink-2) !important;}
  .hist-rail i.on{background:var(--ink-4) !important;width:5px !important;height:5px !important;box-shadow:none !important;}
  .hist-rail i.on2{background:var(--ac) !important;width:8px !important;height:8px !important;}
}
/* ===== DELIVERY (film-production): the export runs =====
   Settings settle one by one, the render bar fills on your machine, the file
   lands in the folder you chose. One eight-second CSS clock, no script.
   Reduced motion holds the finished state. */
.rows.xp .row{opacity:0;}
.xp-bar{position:relative;height:20px;margin-top:12px;border:1px solid var(--line-1);border-radius:3px;overflow:hidden;opacity:0;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;}
.xp-bar i{position:absolute;inset:0;width:0;background:rgba(246,244,241,.12);}
.xp-bar span{position:absolute;left:8px;top:0;line-height:20px;color:var(--ink-2);}
.xp-bar em{position:absolute;right:8px;top:0;line-height:20px;font-style:normal;color:var(--ink-4);font-variant-numeric:tabular-nums;}
.xp-done{display:flex;justify-content:space-between;gap:1rem;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;opacity:0;}
.xp-done b{font-weight:400;color:var(--ink-1);white-space:nowrap;}
.xp-done span{color:var(--ink-4);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@keyframes xp-r1{0%,4%{opacity:0}7%,97%{opacity:1}100%{opacity:0}}
.rows.xp .row:nth-child(1){animation:xp-r1 8s linear infinite;}
@keyframes xp-r2{0%,9%{opacity:0}12%,97%{opacity:1}100%{opacity:0}}
.rows.xp .row:nth-child(2){animation:xp-r2 8s linear infinite;}
@keyframes xp-r3{0%,14%{opacity:0}17%,97%{opacity:1}100%{opacity:0}}
.rows.xp .row:nth-child(3){animation:xp-r3 8s linear infinite;}
@keyframes xp-r4{0%,19%{opacity:0}22%,97%{opacity:1}100%{opacity:0}}
.rows.xp .row:nth-child(4){animation:xp-r4 8s linear infinite;}
@keyframes xp-r5{0%,24%{opacity:0}27%,97%{opacity:1}100%{opacity:0}}
.rows.xp .row:nth-child(5){animation:xp-r5 8s linear infinite;}
@keyframes xp-r6{0%,29%{opacity:0}32%,97%{opacity:1}100%{opacity:0}}
.rows.xp .row:nth-child(6){animation:xp-r6 8s linear infinite;}
@keyframes xp-bar{0%,34%{opacity:0}37%,97%{opacity:1}100%{opacity:0}}
.xp-bar{animation:xp-bar 8s linear infinite;}
@keyframes xp-fill{0%,36%{width:0}80%,97%{width:100%}100%{width:0}}
.xp-bar i{animation:xp-fill 8s linear infinite;}
@keyframes xp-done{0%,82%{opacity:0}85%,97%{opacity:1}100%{opacity:0}}
.xp-done{animation:xp-done 8s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .rows.xp .row,.xp-bar,.xp-bar i,.xp-done{animation:none !important;opacity:1 !important;}
  .xp-bar i{width:100% !important;}
}
/* ===== FREEFORM PROJECT (freeform 01): shots, the Asset Grid, the cut ===== */
.wb{display:grid;grid-template-columns:minmax(150px,40%) 1fr;gap:12px;align-items:start;}
.wb-h{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px;}
.wb-shot{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:5px 7px;border:1px solid var(--line-2);border-radius:3px;margin-bottom:4px;background:var(--sunk);}
.wb-shot b{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:9px;color:var(--ink-4);line-height:14px;}
.wb-shot span{font-size:11px;color:var(--ink-1);line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wb-shot i{grid-column:2;display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;font-style:normal;}
.wb-shot u{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);padding:1px 4px;border:1px solid var(--line-2);border-radius:2px;}
.wb-shot.on{border-color:rgba(255,94,138,.5);}
.wb-shot.on u:last-child{color:var(--ac);border-color:rgba(255,94,138,.4);}
.wb-edit{grid-column:1/-1;}
.wb-tl{display:grid;grid-template-columns:44px 1fr;column-gap:6px;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--ink-4);}
.wb-gut,.wb-lanes{display:grid;grid-template-rows:16px 34px 18px;row-gap:3px;}
.wb-gut span{letter-spacing:.1em;text-transform:uppercase;font-size:8px;line-height:34px;overflow:hidden;}
.wb-gut span:first-child{line-height:16px;} .wb-gut span:last-child{line-height:18px;}
.wb-lanes{position:relative;min-width:0;}
.wb-tlr{position:relative;border-bottom:1px solid var(--line-2);}
.wb-tlr span{position:absolute;top:1px;padding-left:3px;border-left:1px solid var(--line-1);height:12px;line-height:12px;font-size:8px;font-variant-numeric:tabular-nums;}
.wb-lane{display:flex;gap:2px;background:var(--sunk);border-radius:3px;padding:2px;min-width:0;}
.wb-lane .g{flex:none;display:block;}
.wb-clip{position:relative;flex:none;min-width:0;border-radius:2px;overflow:hidden;font-style:normal;background:#17171c center/auto 100% repeat-x;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.wb-clip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.55));}
.wb-clip b,.wb-clip u{position:absolute;bottom:2px;z-index:1;font-weight:400;text-decoration:none;font-size:8px;color:#fff;text-shadow:0 1px 2px #000;}
.wb-clip b{left:4px;} .wb-clip u{right:4px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);}
.wb-clip.cc,.wb-clip.ttl{display:flex;align-items:center;justify-content:center;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;}
.wb-clip.cc{background:#26262c;color:var(--ink-4);} .wb-clip.ttl{background:rgba(255,255,255,.09);color:var(--ink-2);}
.wb-clip.cc::after,.wb-clip.ttl::after{display:none;}
.wb-clip.new{box-shadow:inset 0 0 0 1px rgba(255,94,138,.75);}
.wb-seam{flex:none;width:6px;margin:0 -3px;z-index:2;background:linear-gradient(180deg,#e8b04b,rgba(232,176,75,.5));border-radius:2px;}
.wb-ph{position:absolute;top:0;bottom:0;left:46%;width:1px;background:#e8b04b;z-index:5;box-shadow:0 0 6px rgba(232,176,75,.6);}
.wb-edit .wb-h{display:flex;justify-content:space-between;}
.wb-edit .wb-h em{font-style:normal;color:#e8b04b;letter-spacing:.06em;font-variant-numeric:tabular-nums;text-transform:none;}
.wb .fgrid{grid-template-columns:repeat(2,1fr);gap:6px;}
.wb .ftile{aspect-ratio:16/9;}
@media (min-width:561px) and (max-width:900px){.wb .fgrid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.wb{grid-template-columns:1fr;}}
/* ===== FREEFORM PROJECT ANIMATION: a shot is added, its chain runs, the
   results land in the Asset Grid, the clip drops onto the cut. Twelve seconds
   on one clock, no script. Reduced motion holds the finished state. */
.wb-shot.new{opacity:0;animation:wb-row 12s linear infinite,wb-sel 12s linear infinite;}
@keyframes wb-sel{0%,13%{border-color:var(--line-2);box-shadow:0 0 0 0 rgba(255,94,138,0)}
  16%,96%{border-color:rgba(255,94,138,.85);box-shadow:0 0 0 1px rgba(255,94,138,.35),0 0 14px rgba(255,94,138,.28)}
  100%{border-color:var(--line-2);box-shadow:0 0 0 0 rgba(255,94,138,0)}}
.wb-shot.new u{opacity:0;}
.wb-shot.new u:nth-child(1){animation:wb-u1 12s linear infinite;}
.wb-shot.new u:nth-child(2){animation:wb-u2 12s linear infinite;}
.ftile.slot img,.ftile.slot .kind{opacity:0;}
.ftile.slot em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;border:1px dashed var(--line-1);border-radius:3px;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-5);}
.ftile.s1 img,.ftile.s1 .kind{animation:wb-c1 12s linear infinite;}
.ftile.s2 img,.ftile.s2 .kind{animation:wb-c2 12s linear infinite;}
.ftile.s1 em{animation:wb-e1 12s linear infinite;}
.ftile.s2 em{animation:wb-e2 12s linear infinite;}
.wb-clip.new{flex:0 0 0;animation:wb-clip 12s linear infinite;}
.wb-ph{animation:wb-ph 12s linear infinite;}
.wb-tc{position:relative;display:inline-block;min-width:6.5em;text-align:right;}
.wb-tc em{position:absolute;right:0;top:0;}
.wb-tc .tc1{animation:wb-t1 12s linear infinite;}
.wb-tc .tc2{opacity:0;animation:wb-t2 12s linear infinite;}
@keyframes wb-row{0%,8%{opacity:0}12%,96%{opacity:1}100%{opacity:0}}
@keyframes wb-u1{0%,16%{opacity:0}19%,96%{opacity:1}100%{opacity:0}}
@keyframes wb-u2{0%,38%{opacity:0}41%,96%{opacity:1}100%{opacity:0}}
@keyframes wb-c1{0%,28%{opacity:0}31%,96%{opacity:1}100%{opacity:0}}
@keyframes wb-c2{0%,58%{opacity:0}61%,96%{opacity:1}100%{opacity:0}}
@keyframes wb-e1{0%,28%{opacity:1}31%,96%{opacity:0}100%{opacity:1}}
@keyframes wb-e2{0%,58%{opacity:1}61%,96%{opacity:0}100%{opacity:1}}
@keyframes wb-clip{0%,70%{flex-grow:0}74%,96%{flex-grow:7}100%{flex-grow:0}}
@keyframes wb-ph{0%,74%{left:46%}92%,96%{left:78%}100%{left:46%}}
@keyframes wb-t1{0%,72%{opacity:1}74%,96%{opacity:0}100%{opacity:1}}
@keyframes wb-t2{0%,72%{opacity:0}74%,96%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .wb-shot.new,.wb-shot.new u,.ftile.slot img,.ftile.slot .kind,.wb-tc .tc2{animation:none !important;opacity:1 !important;}
  .wb-shot.new{border-color:rgba(255,94,138,.85) !important;box-shadow:0 0 0 1px rgba(255,94,138,.35),0 0 14px rgba(255,94,138,.28) !important;}
  .ftile.slot em,.wb-tc .tc1{animation:none !important;opacity:0 !important;}
  .wb-clip.new{animation:none !important;flex-grow:7 !important;}
  .wb-ph{animation:none !important;left:78% !important;}
}
/* ===== THE CHAIN BUILDS (freeform 02): five steps land one by one, each
   selected in pink as it arrives, each link drawn from the step it draws on,
   then the result. Sixteen seconds on one clock, no script. Reduced motion
   holds the finished chain. */
.cb-rt{display:inline-grid;} .cb-rt i{grid-area:1/1;text-align:right;font-style:normal;white-space:nowrap;}
[class^="cb-s"],[class^="cb-r"],[class^="cb-e"],.cb-on1,.cb-on2,.cb-on3,.cb-on4,.cb-on5,.cb-rt i{opacity:0;}
.cb-l2,.cb-l3,.cb-l5{stroke-dasharray:1;stroke-dashoffset:1;}
.cb-lf4{stroke-dasharray:4 3;stroke-dashoffset:0;opacity:0;}
.cb-s1{animation:cb-s1 16s linear infinite;} @keyframes cb-s1{0%,6%{opacity:0}8.5%,94%{opacity:1}100%{opacity:0}}
.cb-on1{animation:cb-on1 16s linear infinite;} @keyframes cb-on1{0%,6%{opacity:0}8.5%,21%{opacity:1}23.5%,100%{opacity:0}}
.cb-r1{animation:cb-r1 16s linear infinite;} @keyframes cb-r1{0%,14%{opacity:0}16.5%,94%{opacity:1}100%{opacity:0}}
.cb-s2{animation:cb-s2 16s linear infinite;} @keyframes cb-s2{0%,21%{opacity:0}23.5%,94%{opacity:1}100%{opacity:0}}
.cb-on2{animation:cb-on2 16s linear infinite;} @keyframes cb-on2{0%,21%{opacity:0}23.5%,36%{opacity:1}38.5%,100%{opacity:0}}
.cb-l2{animation:cb-l2 16s linear infinite;} @keyframes cb-l2{0%,23.5%{stroke-dashoffset:1}28%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.cb-e2{animation:cb-e2 16s linear infinite;} @keyframes cb-e2{0%,26%{opacity:0}28%,94%{opacity:1}100%{opacity:0}}
.cb-r2{animation:cb-r2 16s linear infinite;} @keyframes cb-r2{0%,29%{opacity:0}31.5%,94%{opacity:1}100%{opacity:0}}
.cb-s3{animation:cb-s3 16s linear infinite;} @keyframes cb-s3{0%,36%{opacity:0}38.5%,94%{opacity:1}100%{opacity:0}}
.cb-on3{animation:cb-on3 16s linear infinite;} @keyframes cb-on3{0%,36%{opacity:0}38.5%,51%{opacity:1}53.5%,100%{opacity:0}}
.cb-l3{animation:cb-l3 16s linear infinite;} @keyframes cb-l3{0%,38.5%{stroke-dashoffset:1}43%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.cb-e3{animation:cb-e3 16s linear infinite;} @keyframes cb-e3{0%,41%{opacity:0}43%,94%{opacity:1}100%{opacity:0}}
.cb-r3{animation:cb-r3 16s linear infinite;} @keyframes cb-r3{0%,44%{opacity:0}46.5%,94%{opacity:1}100%{opacity:0}}
.cb-s4{animation:cb-s4 16s linear infinite;} @keyframes cb-s4{0%,51%{opacity:0}53.5%,94%{opacity:1}100%{opacity:0}}
.cb-on4{animation:cb-on4 16s linear infinite;} @keyframes cb-on4{0%,51%{opacity:0}53.5%,66%{opacity:1}68.5%,100%{opacity:0}}
.cb-lf4{animation:cb-lf4 16s linear infinite;} @keyframes cb-lf4{0%,53.5%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
.cb-e4{animation:cb-e4 16s linear infinite;} @keyframes cb-e4{0%,56%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
.cb-r4{animation:cb-r4 16s linear infinite;} @keyframes cb-r4{0%,59%{opacity:0}61.5%,94%{opacity:1}100%{opacity:0}}
.cb-s5{animation:cb-s5 16s linear infinite;} @keyframes cb-s5{0%,66%{opacity:0}68.5%,94%{opacity:1}100%{opacity:0}}
.cb-on5{animation:cb-on5 16s linear infinite;} @keyframes cb-on5{0%,66%{opacity:0}68.5%,94%{opacity:1}100%{opacity:0}}
.cb-l5{animation:cb-l5 16s linear infinite;} @keyframes cb-l5{0%,68.5%{stroke-dashoffset:1}73%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.cb-e5{animation:cb-e5 16s linear infinite;} @keyframes cb-e5{0%,71%{opacity:0}73%,94%{opacity:1}100%{opacity:0}}
.cb-r5{animation:cb-r5 16s linear infinite;} @keyframes cb-r5{0%,66%{opacity:0}68.5%,94%{opacity:1}100%{opacity:0}}
.cb-rt0{animation:cb-rt0 16s linear infinite;} @keyframes cb-rt0{0%,6%{opacity:1}8.5%,97%{opacity:0}100%{opacity:1}}
.cb-rt1{animation:cb-rt1 16s linear infinite;} @keyframes cb-rt1{0%,6%{opacity:0}8.5%,21%{opacity:1}23.5%,100%{opacity:0}}
.cb-rt2{animation:cb-rt2 16s linear infinite;} @keyframes cb-rt2{0%,21%{opacity:0}23.5%,36%{opacity:1}38.5%,100%{opacity:0}}
.cb-rt3{animation:cb-rt3 16s linear infinite;} @keyframes cb-rt3{0%,36%{opacity:0}38.5%,51%{opacity:1}53.5%,100%{opacity:0}}
.cb-rt4{animation:cb-rt4 16s linear infinite;} @keyframes cb-rt4{0%,51%{opacity:0}53.5%,66%{opacity:1}68.5%,100%{opacity:0}}
.cb-rt5{animation:cb-rt5 16s linear infinite;} @keyframes cb-rt5{0%,66%{opacity:0}68.5%,97%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  [class^="cb-s"],[class^="cb-r"],[class^="cb-e"],.cb-on5,.cb-rt5,.cb-lf4{animation:none !important;opacity:1 !important;}
  .cb-l2,.cb-l3,.cb-l5{animation:none !important;stroke-dashoffset:0 !important;}
  .cb-on1,.cb-on2,.cb-on3,.cb-on4,.cb-rt0,.cb-rt1,.cb-rt2,.cb-rt3,.cb-rt4{animation:none !important;opacity:0 !important;}
}

/* ===== THE EDIT STRIP (freeform 03): the Edit timeline, and a clip being
   sent to it. Fourteen seconds on one clock, no script. Reduced motion holds
   the finished cut. */
.es{display:grid;grid-template-columns:50px 1fr;column-gap:8px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--ink-4);}
.es-gut,.es-lanes{display:grid;grid-template-rows:18px 46px 24px;row-gap:4px;}
.es-gut span{letter-spacing:.1em;text-transform:uppercase;font-size:8.5px;line-height:46px;overflow:hidden;}
.es-gut span:first-child{line-height:18px;} .es-gut span:last-child{line-height:24px;}
.es-lanes{position:relative;min-width:0;}
.es-tlr{position:relative;border-bottom:1px solid var(--line-2);}
.es-tlr span{position:absolute;top:2px;padding-left:3px;border-left:1px solid var(--line-1);height:13px;line-height:13px;font-size:8.5px;font-variant-numeric:tabular-nums;}
.es-lane{display:flex;gap:2px;background:var(--sunk);border-radius:3px;padding:3px;min-width:0;}
.es-lane .g{flex:none;display:block;}
.es-clip{position:relative;flex:none;min-width:0;border-radius:2px;overflow:hidden;font-style:normal;background:#17171c center/auto 100% repeat-x;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);}
.es-clip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55));}
.es-clip b,.es-clip u{position:absolute;bottom:3px;z-index:1;font-weight:400;text-decoration:none;font-size:8.5px;color:#fff;text-shadow:0 1px 2px #000;}
.es-clip b{left:5px;} .es-clip u{right:5px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);}
.es-clip.cc,.es-clip.ttl,.es-clip.pip{display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.12em;text-transform:uppercase;}
.es-clip.cc{background:#26262c;color:var(--ink-4);} .es-clip.ttl{background:rgba(255,255,255,.09);color:var(--ink-2);} .es-clip.pip{background:rgba(91,141,239,.18);color:#9db8ea;box-shadow:inset 0 0 0 1px rgba(91,141,239,.4);}
.es-clip.cc::after,.es-clip.ttl::after,.es-clip.pip::after{display:none;}
.es-seam{flex:none;width:6px;margin:0 -3px;z-index:2;background:linear-gradient(180deg,#e8b04b,rgba(232,176,75,.5));border-radius:2px;}
.es-ph{position:absolute;top:0;bottom:0;left:62%;width:1px;background:#e8b04b;z-index:5;box-shadow:0 0 6px rgba(232,176,75,.6);}
.es-h{position:absolute;top:0;bottom:0;right:0;width:4px;background:#e8b04b;z-index:2;opacity:0;}
.es-drop{position:absolute;right:8px;top:24px;z-index:6;padding:3px 7px;border-radius:3px;background:var(--ac);color:#0a0a0c;font-size:8px;letter-spacing:.12em;text-transform:uppercase;opacity:0;}
.es-rt{display:inline-grid;} .es-rt i{grid-area:1/1;text-align:right;font-style:normal;white-space:nowrap;}
.es-rt2,.es-rt3{opacity:0;}
.tfoot .es-f1,.tfoot .es-f2,.tfoot .es-f3{color:var(--ink-4);}
.es-new{flex:0 0 0;animation:es-new 14s linear infinite,es-sel 14s linear infinite;}
.es-tail{flex:8 0 0;animation:es-tail 14s linear infinite;}
.es-seam2{opacity:0;animation:es-seam2 14s linear infinite;}
.es-ttl{opacity:0;animation:es-ttl 14s linear infinite;}
.es-h{animation:es-h 14s linear infinite;}
.es-ph{animation:es-ph 14s linear infinite;}
.es-drop{animation:es-drop 14s linear infinite;}
.es-rt1{animation:es-rt1 14s linear infinite;} .es-rt2{animation:es-rt2 14s linear infinite;} .es-rt3{animation:es-rt3 14s linear infinite;}
.tfoot .es-f1{animation:es-f1 14s linear infinite;} .tfoot .es-f2{animation:es-f2 14s linear infinite;} .tfoot .es-f3{animation:es-f3 14s linear infinite;} .tfoot .es-f4{animation:es-f4 14s linear infinite;}
@keyframes es-drop{0%,8%{opacity:0}10%,17%{opacity:1}20%,100%{opacity:0}}
@keyframes es-new{0%,12%{flex-grow:0}17%,24%{flex-grow:8}30%,94%{flex-grow:6}100%{flex-grow:0}}
@keyframes es-tail{0%,12%{flex-grow:8}17%,24%{flex-grow:0}30%,94%{flex-grow:2}100%{flex-grow:8}}
@keyframes es-sel{0%,12%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}14%,60%{box-shadow:inset 0 0 0 1px rgba(255,94,138,.9),0 0 10px rgba(255,94,138,.35)}63%,100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}}
@keyframes es-h{0%,22%{opacity:0}24%,32%{opacity:1}34%,100%{opacity:0}}
@keyframes es-seam2{0%,38%{opacity:0}41%,94%{opacity:1}100%{opacity:0}}
@keyframes es-ttl{0%,46%{opacity:0}50%,94%{opacity:1}100%{opacity:0}}
@keyframes es-ph{0%,52%{left:62%}82%,94%{left:98%}100%{left:62%}}
@keyframes es-rt1{0%,17%{opacity:1}19%,97%{opacity:0}100%{opacity:1}}
@keyframes es-rt2{0%,17%{opacity:0}19%,30%{opacity:1}32%,100%{opacity:0}}
@keyframes es-rt3{0%,30%{opacity:0}32%,97%{opacity:1}100%{opacity:0}}
@keyframes es-f1{0%,8%{color:var(--ink-4)}10%,17%{color:var(--ac)}20%,100%{color:var(--ink-4)}}
@keyframes es-f2{0%,22%{color:var(--ink-4)}24%,32%{color:var(--ac)}34%,100%{color:var(--ink-4)}}
@keyframes es-f3{0%,38%{color:var(--ink-4)}40%,48%{color:var(--ac)}50%,100%{color:var(--ink-4)}}
@keyframes es-f4{0%,84%{opacity:1}85%{opacity:.25}86%{opacity:1}87%{opacity:.25}88%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .es-new{animation:none !important;flex-grow:6 !important;} .es-tail{animation:none !important;flex-grow:2 !important;}
  .es-seam2,.es-ttl,.es-rt3{animation:none !important;opacity:1 !important;}
  .es-h,.es-drop,.es-rt1,.es-rt2{animation:none !important;opacity:0 !important;}
  .es-ph{animation:none !important;left:62% !important;}
  .tfoot .es-f1,.tfoot .es-f2,.tfoot .es-f3,.tfoot .es-f4{animation:none !important;}
}
/* ===== THE CONNECTION (agentic 01): the line is pasted, the link to Bluffy
   draws, then Bluffy reaches out to everything, one line at a time. Twelve
   seconds on one clock, no script. Reduced motion holds the connected state. */
.ag .cmd code{opacity:0;animation:ag-cmd 12s linear infinite;}
.ag .cmd code::after{content:"";display:inline-block;width:6px;height:11px;margin-left:2px;vertical-align:-1px;background:var(--ink-2);opacity:0;animation:ag-caret 12s linear infinite;}
.ag-agent,.ag-bluffy{opacity:.45;} .ag-b1,.ag-b2,.ag-b3,.ag-b4,.ag-b5{opacity:.4;}
.ag-mcp,.ag-l1,.ag-l2,.ag-l3,.ag-l4,.ag-l5{stroke-dasharray:1;stroke-dashoffset:1;}
.ag-mcpl{opacity:0;}
.ag-agent{animation:ag-agent 12s linear infinite;} .ag-mcp{animation:ag-mcp 12s linear infinite;} .ag-mcpl{animation:ag-mcpl 12s linear infinite;} .ag-bluffy{animation:ag-bluffy 12s linear infinite;}
@keyframes ag-cmd{0%,6%{opacity:0}9%,94%{opacity:1}100%{opacity:0}}
@keyframes ag-caret{0%,6%{opacity:0}7%{opacity:1}9%{opacity:0}11%{opacity:1}13%{opacity:0}15%{opacity:1}17%{opacity:0}19%{opacity:1}21%{opacity:0}23%{opacity:1}25%,100%{opacity:0}}
@keyframes ag-agent{0%,10%{opacity:.45}13%,94%{opacity:1}100%{opacity:.45}}
@keyframes ag-mcp{0%,16%{stroke-dashoffset:1}24%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes ag-mcpl{0%,22%{opacity:0}24%,94%{opacity:1}100%{opacity:0}}
@keyframes ag-bluffy{0%,24%{opacity:.45}27%,94%{opacity:1}100%{opacity:.45}}
.ag-l1{animation:ag-l1 12s linear infinite;} @keyframes ag-l1{0%,30%{stroke-dashoffset:1}34%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ag-b1{animation:ag-b1 12s linear infinite;} @keyframes ag-b1{0%,33%{opacity:.4}35%,94%{opacity:1}100%{opacity:.4}}
.ag-l2{animation:ag-l2 12s linear infinite;} @keyframes ag-l2{0%,36%{stroke-dashoffset:1}40%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ag-b2{animation:ag-b2 12s linear infinite;} @keyframes ag-b2{0%,39%{opacity:.4}41%,94%{opacity:1}100%{opacity:.4}}
.ag-l3{animation:ag-l3 12s linear infinite;} @keyframes ag-l3{0%,42%{stroke-dashoffset:1}46%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ag-b3{animation:ag-b3 12s linear infinite;} @keyframes ag-b3{0%,45%{opacity:.4}47%,94%{opacity:1}100%{opacity:.4}}
.ag-l4{animation:ag-l4 12s linear infinite;} @keyframes ag-l4{0%,48%{stroke-dashoffset:1}52%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ag-b4{animation:ag-b4 12s linear infinite;} @keyframes ag-b4{0%,51%{opacity:.4}53%,94%{opacity:1}100%{opacity:.4}}
.ag-l5{animation:ag-l5 12s linear infinite;} @keyframes ag-l5{0%,54%{stroke-dashoffset:1}58%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ag-b5{animation:ag-b5 12s linear infinite;} @keyframes ag-b5{0%,57%{opacity:.4}59%,94%{opacity:1}100%{opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .ag .cmd code,.ag-agent,.ag-bluffy,.ag-mcpl,.ag-b1,.ag-b2,.ag-b3,.ag-b4,.ag-b5{animation:none !important;opacity:1 !important;}
  .ag .cmd code::after{animation:none !important;opacity:0 !important;}
  .ag-mcp,.ag-l1,.ag-l2,.ag-l3,.ag-l4,.ag-l5{animation:none !important;stroke-dashoffset:0 !important;}
}

/* ===== AT SCALE (agentic 02): a batch of three hundred, approved once, run
   in chunks while the counter climbs. Twenty seconds on one clock, no script.
   Reduced motion holds the finished batch. */
@property --bt{syntax:'<integer>';inherits:false;initial-value:0;}
.bt-top{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);}
.bt-top .bt-n{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:.06em;}
.bt-ok{font-style:normal;padding:2px 6px;border-radius:3px;background:rgba(255,94,138,.16);color:var(--ac);border:1px solid rgba(255,94,138,.4);font-size:8px;opacity:0;animation:bt-ok 20s linear infinite;}
.bt-c{font-style:normal;counter-reset:bt var(--bt);animation:bt-count 20s linear infinite;} .bt-c::after{content:counter(bt);}
.bt-list{margin-top:10px;}
.bt-row{display:grid;grid-template-columns:10px 1fr 44%;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--ink-3);opacity:.55;}
.bt-row:last-child{border-bottom:0;}
.bt-row b{font-weight:400;letter-spacing:.04em;}
.bt-row s{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--ink-4);background:transparent;text-decoration:none;}
.bt-row i{display:block;height:4px;border-radius:2px;background:var(--line-2);position:relative;overflow:hidden;}
.bt-row i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ac);border-radius:2px;}
.bt-row.r1{animation:bt-r1 20s linear infinite;} @keyframes bt-r1{0%,8%{opacity:.55}9%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r1 s{animation:bt-d1 20s linear infinite;} @keyframes bt-d1{0%,8%{background:transparent;border-color:var(--ink-4)}9%,17%{background:var(--ac);border-color:var(--ac)}18%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r1 i::after{animation:bt-f1 20s linear infinite;} @keyframes bt-f1{0%,8%{width:0;background:var(--ac)}17%{background:var(--ac)}18%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r2{animation:bt-r2 20s linear infinite;} @keyframes bt-r2{0%,18%{opacity:.55}19%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r2 s{animation:bt-d2 20s linear infinite;} @keyframes bt-d2{0%,18%{background:transparent;border-color:var(--ink-4)}19%,27%{background:var(--ac);border-color:var(--ac)}28%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r2 i::after{animation:bt-f2 20s linear infinite;} @keyframes bt-f2{0%,18%{width:0;background:var(--ac)}27%{background:var(--ac)}28%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r3{animation:bt-r3 20s linear infinite;} @keyframes bt-r3{0%,28%{opacity:.55}29%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r3 s{animation:bt-d3 20s linear infinite;} @keyframes bt-d3{0%,28%{background:transparent;border-color:var(--ink-4)}29%,37%{background:var(--ac);border-color:var(--ac)}38%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r3 i::after{animation:bt-f3 20s linear infinite;} @keyframes bt-f3{0%,28%{width:0;background:var(--ac)}37%{background:var(--ac)}38%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r4{animation:bt-r4 20s linear infinite;} @keyframes bt-r4{0%,38%{opacity:.55}39%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r4 s{animation:bt-d4 20s linear infinite;} @keyframes bt-d4{0%,38%{background:transparent;border-color:var(--ink-4)}39%,47%{background:var(--ac);border-color:var(--ac)}48%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r4 i::after{animation:bt-f4 20s linear infinite;} @keyframes bt-f4{0%,38%{width:0;background:var(--ac)}47%{background:var(--ac)}48%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r5{animation:bt-r5 20s linear infinite;} @keyframes bt-r5{0%,48%{opacity:.55}49%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r5 s{animation:bt-d5 20s linear infinite;} @keyframes bt-d5{0%,48%{background:transparent;border-color:var(--ink-4)}49%,57%{background:var(--ac);border-color:var(--ac)}58%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r5 i::after{animation:bt-f5 20s linear infinite;} @keyframes bt-f5{0%,48%{width:0;background:var(--ac)}57%{background:var(--ac)}58%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r6{animation:bt-r6 20s linear infinite;} @keyframes bt-r6{0%,58%{opacity:.55}59%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r6 s{animation:bt-d6 20s linear infinite;} @keyframes bt-d6{0%,58%{background:transparent;border-color:var(--ink-4)}59%,67%{background:var(--ac);border-color:var(--ac)}68%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r6 i::after{animation:bt-f6 20s linear infinite;} @keyframes bt-f6{0%,58%{width:0;background:var(--ac)}67%{background:var(--ac)}68%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r7{animation:bt-r7 20s linear infinite;} @keyframes bt-r7{0%,68%{opacity:.55}69%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r7 s{animation:bt-d7 20s linear infinite;} @keyframes bt-d7{0%,68%{background:transparent;border-color:var(--ink-4)}69%,77%{background:var(--ac);border-color:var(--ac)}78%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r7 i::after{animation:bt-f7 20s linear infinite;} @keyframes bt-f7{0%,68%{width:0;background:var(--ac)}77%{background:var(--ac)}78%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
.bt-row.r8{animation:bt-r8 20s linear infinite;} @keyframes bt-r8{0%,78%{opacity:.55}79%,96%{opacity:1}100%{opacity:.55}}
.bt-row.r8 s{animation:bt-d8 20s linear infinite;} @keyframes bt-d8{0%,78%{background:transparent;border-color:var(--ink-4)}79%,87%{background:var(--ac);border-color:var(--ac)}88%,96%{background:var(--ink-2);border-color:var(--ink-2)}100%{background:transparent;border-color:var(--ink-4)}}
.bt-row.r8 i::after{animation:bt-f8 20s linear infinite;} @keyframes bt-f8{0%,78%{width:0;background:var(--ac)}87%{background:var(--ac)}88%,96%{width:100%;background:var(--ink-4)}100%{width:0;background:var(--ac)}}
@keyframes bt-ok{0%,5%{opacity:0}8%,96%{opacity:1}100%{opacity:0}}
@keyframes bt-count{0%,8%{--bt:0}88%,96%{--bt:300}100%{--bt:0}}
@media (prefers-reduced-motion:reduce){
  .bt-row,.bt-ok{animation:none !important;opacity:1 !important;}
  .bt-row s{animation:none !important;background:var(--ink-2) !important;border-color:var(--ink-2) !important;}
  .bt-row i::after{animation:none !important;width:100% !important;background:var(--ink-4) !important;}
  .bt-c{animation:none !important;--bt:300;}
}

/* ===== SAME PRICE (agentic 03): the bill in order. Rows settle, the quote
   lands, approved, running, settled. Twelve seconds on one clock, no script.
   Reduced motion holds the settled state. */
.rows.pq .row{opacity:0;}
.pq-st{position:relative;display:inline-grid;margin-left:8px;vertical-align:middle;}
.pq-st em{grid-area:1/1;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid var(--line-1);color:var(--ink-3);opacity:0;white-space:nowrap;}
.pq-st .s2{color:var(--ac);border-color:rgba(255,94,138,.4);background:rgba(255,94,138,.12);}
.pq-st .s3{color:var(--ac);border-color:rgba(255,94,138,.4);}
.pq-st .s4{color:var(--ink-1);border-color:var(--line-1);background:rgba(246,244,241,.06);}
.pq-bar{position:relative;height:20px;margin-top:12px;border:1px solid var(--line-1);border-radius:3px;overflow:hidden;opacity:0;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;}
.pq-bar i{position:absolute;inset:0;width:0;background:rgba(246,244,241,.12);}
.pq-bar span{position:absolute;left:8px;top:0;line-height:20px;color:var(--ink-2);}
.pq-bar em{position:absolute;right:8px;top:0;line-height:20px;font-style:normal;color:var(--ink-4);font-variant-numeric:tabular-nums;}
.rows.pq .row:nth-child(1){animation:pq-r1 12s linear infinite;} @keyframes pq-r1{0%,4%{opacity:0}7%,96%{opacity:1}100%{opacity:0}}
.rows.pq .row:nth-child(2){animation:pq-r2 12s linear infinite;} @keyframes pq-r2{0%,8%{opacity:0}11%,96%{opacity:1}100%{opacity:0}}
.rows.pq .row:nth-child(3){animation:pq-r3 12s linear infinite;} @keyframes pq-r3{0%,12%{opacity:0}15%,96%{opacity:1}100%{opacity:0}}
.rows.pq .row:nth-child(4){animation:pq-r4 12s linear infinite;} @keyframes pq-r4{0%,16%{opacity:0}19%,96%{opacity:1}100%{opacity:0}}
.rows.pq .row:nth-child(5){animation:pq-r5 12s linear infinite;} @keyframes pq-r5{0%,20%{opacity:0}23%,96%{opacity:1}100%{opacity:0}}
.pq-st .s1{animation:pq-s1 12s linear infinite;} @keyframes pq-s1{0%,26%{opacity:0}28%,40%{opacity:1}42%,100%{opacity:0}}
.pq-st .s2{animation:pq-s2 12s linear infinite;} @keyframes pq-s2{0%,40%{opacity:0}42%,52%{opacity:1}54%,100%{opacity:0}}
.pq-st .s3{animation:pq-s3 12s linear infinite;} @keyframes pq-s3{0%,52%{opacity:0}54%,78%{opacity:1}80%,100%{opacity:0}}
.pq-st .s4{animation:pq-s4 12s linear infinite;} @keyframes pq-s4{0%,78%{opacity:0}80%,96%{opacity:1}100%{opacity:0}}
.pq-bar{animation:pq-bar 12s linear infinite;} @keyframes pq-bar{0%,52%{opacity:0}54%,96%{opacity:1}100%{opacity:0}}
.pq-bar i{animation:pq-fill 12s linear infinite;} @keyframes pq-fill{0%,54%{width:0}78%,96%{width:100%}100%{width:0}}
@media (prefers-reduced-motion:reduce){
  .rows.pq .row,.pq-st .s4,.pq-bar{animation:none !important;opacity:1 !important;}
  .pq-st .s1,.pq-st .s2,.pq-st .s3{animation:none !important;opacity:0 !important;}
  .pq-bar i{animation:none !important;width:100% !important;}
}

/* ===== APPROVAL (agentic 04): two frames land, the agent waits, you pick
   one, your note goes with it, the agent carries on. Ten seconds on one clock,
   no script. Reduced motion holds the picked state. */
.ap-rt{display:inline-grid;} .ap-rt i{grid-area:1/1;text-align:right;font-style:normal;white-space:nowrap;}
.ap-rt1{animation:ap-rt1 10s linear infinite;} .ap-rt2{opacity:0;animation:ap-rt2 10s linear infinite;}
.stage.ap-a{opacity:0;animation:ap-a 10s linear infinite,ap-sel 10s linear infinite;}
.stage.ap-b{opacity:0;animation:ap-b 10s linear infinite;}
.chips .ap-pick{animation:ap-pick 10s linear infinite;}
.rows.ap .row{opacity:0;}
.rows.ap .row:nth-child(1){animation:ap-n1 10s linear infinite;}
.rows.ap .row:nth-child(2){animation:ap-n2 10s linear infinite;}
@keyframes ap-a{0%,6%{opacity:0}10%,94%{opacity:1}100%{opacity:0}}
@keyframes ap-b{0%,10%{opacity:0}14%,94%{opacity:1}100%{opacity:0}}
@keyframes ap-sel{0%,36%{box-shadow:0 0 0 0 rgba(255,94,138,0)}40%,94%{box-shadow:0 0 0 1px rgba(255,94,138,.9),0 0 14px rgba(255,94,138,.3)}100%{box-shadow:0 0 0 0 rgba(255,94,138,0)}}
@keyframes ap-pick{0%,36%{color:var(--ink-3);border-color:var(--line-1);background:transparent}40%,94%{color:var(--ac);border-color:rgba(255,94,138,.5);background:rgba(255,94,138,.12)}100%{color:var(--ink-3);border-color:var(--line-1);background:transparent}}
@keyframes ap-n1{0%,44%{opacity:0}48%,94%{opacity:1}100%{opacity:0}}
@keyframes ap-n2{0%,54%{opacity:0}58%,94%{opacity:1}100%{opacity:0}}
@keyframes ap-rt1{0%,54%{opacity:1}58%,96%{opacity:0}100%{opacity:1}}
@keyframes ap-rt2{0%,54%{opacity:0}58%,96%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .stage.ap-a,.stage.ap-b,.rows.ap .row,.ap-rt2{animation:none !important;opacity:1 !important;}
  .ap-rt1{animation:none !important;opacity:0 !important;}
  .stage.ap-a{box-shadow:0 0 0 1px rgba(255,94,138,.9),0 0 14px rgba(255,94,138,.3) !important;}
  .chips .ap-pick{animation:none !important;color:var(--ac) !important;border-color:rgba(255,94,138,.5) !important;background:rgba(255,94,138,.12) !important;}
}
/* ===== HOMEPAGE: the folder writes itself (the app) and the receipt runs
   (pricing). CSS only, one clock each, reduced motion holds the end state. */
.tree.tr .rt2:not(.top){opacity:0;transform:translateY(3px);}
.tree.tr .rt2:nth-child(2){animation:tr-1 10s linear infinite;} @keyframes tr-1{0%,6%{opacity:0;transform:translateY(3px)}9%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
.tree.tr .rt2:nth-child(3){animation:tr-2 10s linear infinite;} @keyframes tr-2{0%,14%{opacity:0;transform:translateY(3px)}17%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
.tree.tr .rt2:nth-child(4){animation:tr-3 10s linear infinite;} @keyframes tr-3{0%,22%{opacity:0;transform:translateY(3px)}25%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
.tree.tr .rt2:nth-child(5){animation:tr-4 10s linear infinite;} @keyframes tr-4{0%,30%{opacity:0;transform:translateY(3px)}33%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
.tree.tr .rt2:nth-child(6){animation:tr-5 10s linear infinite;} @keyframes tr-5{0%,38%{opacity:0;transform:translateY(3px)}41%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
.tree.tr .rt2:nth-child(7){animation:tr-6 10s linear infinite;} @keyframes tr-6{0%,46%{opacity:0;transform:translateY(3px)}49%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(3px)}}
@property --sp{syntax:'<integer>';inherits:false;initial-value:0;}
.receipt.pr .rf{opacity:.5;}
.rc{display:block;margin-top:.6rem;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);font-variant-numeric:tabular-nums;opacity:0;}
.rc-live i{font-style:normal;counter-reset:sp var(--sp);animation:pr-sp 12s linear infinite;} .rc-live i::after{content:counter(sp,decimal-leading-zero);}
.receipt.pr .rf-1{animation:pr-l1 12s linear infinite;} @keyframes pr-l1{0%,8%{opacity:.5}11%,94%{opacity:1}100%{opacity:.5}}
.receipt.pr .rf-1 .rc{animation:pr-c1 12s linear infinite;} @keyframes pr-c1{0%,11%{opacity:0}13%,94%{opacity:1}100%{opacity:0}}
.receipt.pr .rf-2{animation:pr-l2 12s linear infinite;} @keyframes pr-l2{0%,26%{opacity:.5}29%,94%{opacity:1}100%{opacity:.5}}
.receipt.pr .rf-2 .rc{animation:pr-c2 12s linear infinite;} @keyframes pr-c2{0%,29%{opacity:0}31%,94%{opacity:1}100%{opacity:0}}
.receipt.pr .rf-3{animation:pr-l3 12s linear infinite;} @keyframes pr-l3{0%,44%{opacity:.5}47%,94%{opacity:1}100%{opacity:.5}}
.receipt.pr .rf-3 .rc{animation:pr-c3 12s linear infinite;} @keyframes pr-c3{0%,47%{opacity:0}49%,94%{opacity:1}100%{opacity:0}}
.receipt.pr .rf-4{animation:pr-l4 12s linear infinite;} @keyframes pr-l4{0%,62%{opacity:.5}65%,94%{opacity:1}100%{opacity:.5}}
.receipt.pr .rf-4 .rc{animation:pr-c4 12s linear infinite;} @keyframes pr-c4{0%,65%{opacity:0}67%,94%{opacity:1}100%{opacity:0}}
@keyframes pr-sp{0%,67%{--sp:0}94%,96%{--sp:99}100%{--sp:0}}
@media (prefers-reduced-motion:reduce){
  .tree.tr .rt2:not(.top){animation:none !important;opacity:1 !important;transform:none !important;}
  .receipt.pr .rf,.rc{animation:none !important;opacity:1 !important;}
  .rc-live i{animation:none !important;--sp:99;}
}

/* ===== NOT FOUND: one screen, the doors as links, the footer kept low ===== */
main.nf{min-height:calc(100vh - 12rem);display:grid;align-items:center;}
.cta .links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;}
/* ===== REQUEST ACCESS (early-access): the form, in the site's own type ===== */
.access{max-width:560px;}
.access .lede{margin-bottom:1.8rem;}
.access-form{display:grid;gap:1.05rem;}
.access-field{display:block;}
.access-label{display:block;margin-bottom:.45rem;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);}
.access-optional{text-transform:none;letter-spacing:.04em;color:var(--ink-5);margin-left:.35rem;}
.access-form input,.access-form select,.access-form textarea{width:100%;padding:.8rem .95rem;background:rgba(255,255,255,.025);border:1px solid var(--line-1);border-radius:6px;
  font-family:inherit;font-size:.95rem;color:var(--ink-1);outline:none;color-scheme:dark;transition:border-color .16s ease,background-color .16s ease;}
.access-form input::placeholder,.access-form textarea::placeholder{color:var(--ink-4);}
.access-form textarea{resize:vertical;min-height:5.2rem;line-height:1.5;}
.access-form input:focus,.access-form select:focus,.access-form textarea:focus{border-color:rgba(255,94,138,.55);background:rgba(255,255,255,.04);}
.access-select-wrap{position:relative;}
.access-select-wrap::after{content:"";position:absolute;right:1rem;top:50%;transform:translateY(-25%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ac);pointer-events:none;}
.access-form select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;}
.access-form select option{background:#101013;color:var(--ink-1);}
.access-submit{margin-top:.4rem;justify-self:start;cursor:pointer;line-height:1.5;}
.access-submit:disabled{opacity:.6;cursor:default;}
.access-error{display:none;margin-top:1rem;font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.02em;color:var(--ac);}
.access-thanks{display:none;}
.access-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.access-captcha{min-height:65px;}
.access-meta{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line-2);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);}
.access-meta a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;}
.access-meta.tight{margin-top:.8rem;padding-top:0;border-top:0;}
.access-note{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);}
@media (prefers-reduced-motion:reduce){ .access-form input,.access-form select,.access-form textarea{transition:none;} }
/* ===== DOWNLOAD: three tiles wired from the release bucket ===== */
.access.dl{max-width:720px;}
.dl-version{margin:-.6rem 0 1.2rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.dl-tile{display:grid;gap:.35rem;padding:1rem 1.05rem 1.1rem;background:var(--panel);border:1px solid var(--line-1);border-radius:8px;text-decoration:none;color:var(--ink-1);
  transition:border-color .2s ease,transform .2s ease,background-color .2s ease;}
.dl-tile:hover{border-color:rgba(255,255,255,.3);background:rgba(246,244,241,.04);transform:translateY(-2px);}
.dl-plat{font-family:'Instrument Serif',serif;font-size:1.55rem;line-height:1.05;}
.dl-arch{font-size:.85rem;color:var(--ink-3);}
.dl-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--line-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);}
.dl-kind{font-style:normal;color:var(--ink-3);}
.dl-tile.off{opacity:.45;cursor:default;} .dl-tile.off:hover{transform:none;border-color:var(--line-1);background:var(--panel);}
.dl-tile.busy{opacity:.7;}
.tcta button.lnk{line-height:1.5;cursor:pointer;}
@media (max-width:640px){ .dl-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){ .dl-tile{transition:none;} .dl-tile:hover{transform:none;} }
/* ===== TOUCH: bigger hit areas on the text links, and 16px inputs on
   phones so iOS does not zoom the page when a field is focused ===== */
.topbar nav a,.foot-nav a,.access-meta a{display:inline-block;padding:.55rem 0;margin:-.55rem 0;}
@media (max-width:640px){
  .access-form input,.access-form select,.access-form textarea{font-size:16px;}
}
/* The hidden attribute must win over any display rule (forms are display:grid). */
[hidden]{display:none !important;}
/* ===== CONTACT SHEET ===== */
.sheet{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;}
.sc{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--sunk);}
.sc img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.9);}
.sc.lead img{filter:brightness(.95) saturate(1);}
.sc.lead::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,94,138,.75);border-radius:2px;}
.sc .slug{position:absolute;left:3px;bottom:2px;font-family:'JetBrains Mono',monospace;font-size:8px;
  color:rgba(255,255,255,.9);text-shadow:0 1px 2px #000;}
.sheet-cap{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--ink-4);}

/* ===== CAST (film-production): the contact sheet builds itself =====
   Each of the 36 stills lands in setup order, then the six lead cells ring
   one after another: the same two faces, every setup. A twenty-second CSS
   loop on one clock, no script. Reduced motion holds the finished sheet. */
.sheet .sc{opacity:0;}
.sheet .sc.lead::after{opacity:0;}
@keyframes sh-c1{0%,3.0%{opacity:0}4.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(1){animation:sh-c1 20s linear infinite;}
@keyframes sh-c2{0%,4.6%{opacity:0}5.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(2){animation:sh-c2 20s linear infinite;}
@keyframes sh-c3{0%,6.2%{opacity:0}7.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(3){animation:sh-c3 20s linear infinite;}
@keyframes sh-c4{0%,7.8%{opacity:0}9.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(4){animation:sh-c4 20s linear infinite;}
@keyframes sh-c5{0%,9.4%{opacity:0}10.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(5){animation:sh-c5 20s linear infinite;}
@keyframes sh-c6{0%,11.0%{opacity:0}12.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(6){animation:sh-c6 20s linear infinite;}
@keyframes sh-c7{0%,12.6%{opacity:0}13.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(7){animation:sh-c7 20s linear infinite;}
@keyframes sh-c8{0%,14.2%{opacity:0}15.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(8){animation:sh-c8 20s linear infinite;}
@keyframes sh-c9{0%,15.8%{opacity:0}17.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(9){animation:sh-c9 20s linear infinite;}
@keyframes sh-c10{0%,17.4%{opacity:0}18.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(10){animation:sh-c10 20s linear infinite;}
@keyframes sh-c11{0%,19.0%{opacity:0}20.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(11){animation:sh-c11 20s linear infinite;}
@keyframes sh-c12{0%,20.6%{opacity:0}21.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(12){animation:sh-c12 20s linear infinite;}
@keyframes sh-c13{0%,22.2%{opacity:0}23.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(13){animation:sh-c13 20s linear infinite;}
@keyframes sh-c14{0%,23.8%{opacity:0}25.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(14){animation:sh-c14 20s linear infinite;}
@keyframes sh-c15{0%,25.4%{opacity:0}26.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(15){animation:sh-c15 20s linear infinite;}
@keyframes sh-c16{0%,27.0%{opacity:0}28.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(16){animation:sh-c16 20s linear infinite;}
@keyframes sh-c17{0%,28.6%{opacity:0}29.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(17){animation:sh-c17 20s linear infinite;}
@keyframes sh-c18{0%,30.2%{opacity:0}31.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(18){animation:sh-c18 20s linear infinite;}
@keyframes sh-c19{0%,31.8%{opacity:0}33.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(19){animation:sh-c19 20s linear infinite;}
@keyframes sh-c20{0%,33.4%{opacity:0}34.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(20){animation:sh-c20 20s linear infinite;}
@keyframes sh-c21{0%,35.0%{opacity:0}36.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(21){animation:sh-c21 20s linear infinite;}
@keyframes sh-c22{0%,36.6%{opacity:0}37.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(22){animation:sh-c22 20s linear infinite;}
@keyframes sh-c23{0%,38.2%{opacity:0}39.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(23){animation:sh-c23 20s linear infinite;}
@keyframes sh-c24{0%,39.8%{opacity:0}41.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(24){animation:sh-c24 20s linear infinite;}
@keyframes sh-c25{0%,41.4%{opacity:0}42.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(25){animation:sh-c25 20s linear infinite;}
@keyframes sh-c26{0%,43.0%{opacity:0}44.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(26){animation:sh-c26 20s linear infinite;}
@keyframes sh-c27{0%,44.6%{opacity:0}45.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(27){animation:sh-c27 20s linear infinite;}
@keyframes sh-c28{0%,46.2%{opacity:0}47.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(28){animation:sh-c28 20s linear infinite;}
@keyframes sh-c29{0%,47.8%{opacity:0}49.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(29){animation:sh-c29 20s linear infinite;}
@keyframes sh-c30{0%,49.4%{opacity:0}50.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(30){animation:sh-c30 20s linear infinite;}
@keyframes sh-c31{0%,51.0%{opacity:0}52.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(31){animation:sh-c31 20s linear infinite;}
@keyframes sh-c32{0%,52.6%{opacity:0}53.8%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(32){animation:sh-c32 20s linear infinite;}
@keyframes sh-c33{0%,54.2%{opacity:0}55.4%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(33){animation:sh-c33 20s linear infinite;}
@keyframes sh-c34{0%,55.8%{opacity:0}57.0%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(34){animation:sh-c34 20s linear infinite;}
@keyframes sh-c35{0%,57.4%{opacity:0}58.6%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(35){animation:sh-c35 20s linear infinite;}
@keyframes sh-c36{0%,59.0%{opacity:0}60.2%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(36){animation:sh-c36 20s linear infinite;}
@keyframes sh-r5{0%,66%{opacity:0}68%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(5).lead::after{animation:sh-r5 20s linear infinite;}
@keyframes sh-r8{0%,71%{opacity:0}73%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(8).lead::after{animation:sh-r8 20s linear infinite;}
@keyframes sh-r13{0%,76%{opacity:0}78%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(13).lead::after{animation:sh-r13 20s linear infinite;}
@keyframes sh-r16{0%,81%{opacity:0}83%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(16).lead::after{animation:sh-r16 20s linear infinite;}
@keyframes sh-r25{0%,86%{opacity:0}88%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(25).lead::after{animation:sh-r25 20s linear infinite;}
@keyframes sh-r29{0%,91%{opacity:0}93%,96%{opacity:1}100%{opacity:0}}
.sheet .sc:nth-child(29).lead::after{animation:sh-r29 20s linear infinite;}
@media (prefers-reduced-motion:reduce){
  .sheet .sc,.sheet .sc.lead::after{animation:none !important;opacity:1 !important;}
}
/* ===== LOOK STRIP (full bleed filmstrip) ===== */
.strip{padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:var(--sunk);}
.strip-h{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  max-width:1240px;margin:0 auto 2rem;padding:0 var(--gut);}
.sprock{height:9px;background-image:radial-gradient(circle,var(--line-1) 1.6px,transparent 1.7px);
  background-size:14px 9px;background-position:center;}
.rail{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;padding:6px 0;}
.rail::-webkit-scrollbar{display:none;}
.fr{position:relative;flex:0 0 clamp(180px,20vw,250px);aspect-ratio:16/9;overflow:hidden;}
.fr img{width:100%;height:100%;object-fit:cover;}
.fr figcaption{position:absolute;left:6px;bottom:6px;right:6px;width:max-content;max-width:calc(100% - 12px);
  font-family:'JetBrains Mono',monospace;font-size:9px;line-height:1.35;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(10,10,12,.62);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);border-radius:3px;padding:.25rem .45rem;}
.fr.more{display:flex;align-items:center;justify-content:center;background:var(--panel);
  border:1px dashed var(--line-1);font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:1rem;}

/* ===== SLATE ===== */
.take{position:relative;height:46px;border-radius:4px;overflow:hidden;border:1px solid var(--line-1);}
.take .bgf{position:absolute;inset:0;display:flex;}
.take .bgf img{flex:1;height:100%;object-fit:cover;filter:brightness(.34) saturate(.6);}
.take .lab{position:absolute;left:8px;top:7px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;color:#fff;}
.tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55);}
.tick::before{content:"";position:absolute;top:0;left:-3px;border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;border-top:5px solid var(--ac);}
.ruler{display:flex;justify-content:space-between;margin-top:5px;font-family:'JetBrains Mono',monospace;
  font-size:9px;color:var(--ink-5);}
.shotchips{display:flex;gap:3px;margin-top:8px;}
.shotchips span{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink-4);background:rgba(255,255,255,.035);border-radius:2px;padding:.25rem 0;}
.rows{margin-top:12px;}
.row{display:grid;grid-template-columns:5.6rem 1fr;gap:.8rem;padding:6px 0;border-bottom:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:11px;}
.row:last-child{border-bottom:0;}
.row .k{color:var(--ink-4);}
.row .v{color:var(--ink-2);text-align:right;}
.quoted{color:var(--ac);border:1px solid rgba(255,94,138,.4);border-radius:2px;padding:.1rem .35rem;font-size:9px;margin-left:.4rem;}
.pfoot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-4);}

/* ===== TIMELINE ===== */
.tl{display:flex;flex-direction:column;gap:4px;position:relative;}
.tlr{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:9px;
  color:var(--ink-5);padding-left:58px;margin-bottom:2px;}
.trk{display:grid;grid-template-columns:54px 1fr;gap:4px;align-items:center;}
.trk .nm{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);}
.lane{display:flex;gap:2px;height:30px;background:var(--sunk);border-radius:3px;padding:2px;
  box-shadow:0 1px 3px rgba(0,0,0,.6) inset;}
.clip{position:relative;border-radius:2px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 1px 2px rgba(0,0,0,.5);}
.clip img{width:100%;height:100%;object-fit:cover;filter:brightness(.5);}
.clip .n{position:absolute;left:3px;top:2px;font-family:'JetBrains Mono',monospace;font-size:8px;color:#fff;text-shadow:0 1px 2px #000;}
/* Dialogue is PERFORMED inside the take (v3.13.0), so it rides the clip rather
   than a lane of its own. This mark says the audio is in there. */
.clip .inwave{position:absolute;right:3px;bottom:3px;width:20px;height:7px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 1px,transparent 1px 3px);opacity:.62;}
/* Overlay is the only free-track kind that materializes: titles and PiP. */
.clip.pip{background:rgba(255,255,255,.05);border:1px solid var(--line-1);display:flex;
  align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.12em;color:var(--ink-4);}
/* cut_audio: one IMPORTED track laid over the whole cut, optionally ducked. */
.clip.mus{background:rgba(255,255,255,.045);display:flex;align-items:center;padding:0 6px;gap:6px;}
.clip.mus .bars{flex:1;height:9px;background:repeating-linear-gradient(90deg,var(--ink-5) 0 1px,transparent 1px 4px);}
.clip.mus span{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--ink-4);white-space:nowrap;}
.clip.ttl{background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--ink-1);}
.gap{flex:none;}
.play{position:absolute;top:12px;bottom:26px;width:1px;background:var(--ac);left:38%;z-index:2;}
.play::before{content:"";position:absolute;top:-4px;left:-3.5px;width:8px;height:6px;background:var(--ac);border-radius:1px;}
.tfoot{display:flex;gap:1rem;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);}
.tfoot .go2{margin-left:auto;color:var(--ac);}

/* ===== FEATURE GRID (inspector, hairlines only) ===== */
.fg{display:grid;grid-template-columns:repeat(3,1fr);}
.ft{padding:1.6rem 1.6rem 1.7rem;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);}
.fg .ft:nth-child(3n){border-right:0;}
.ft .ix{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-5);}
.ft h4{margin:.5rem 0 .5rem;font-size:1rem;font-weight:500;color:var(--ink-1);}
.ft p{font-size:.87rem;line-height:1.5;color:var(--ink-3);}
.ft .meta{margin-top:.9rem;padding-top:.6rem;border-top:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:var(--ink-4);}

/* ===== PRICING: a clearing ===== */
.clearing{background:#060608;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);text-align:center;}
.fig{font-family:'Instrument Serif',serif;font-size:clamp(4.5rem,13vw,9rem);line-height:.9;color:var(--ac);letter-spacing:-.03em;}
.fig .sym{font-family:'JetBrains Mono',monospace;font-size:.34em;color:var(--ink-3);vertical-align:.72em;margin-right:.06em;}
.pclaim{margin-top:1.4rem;font-size:var(--t-lede);color:var(--ink-1);}
.pbody2{max-width:44ch;margin:.9rem auto 0;color:var(--ink-3);font-size:.95rem;line-height:1.6;}
.receipt{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:820px;margin:3.2rem auto 0;text-align:left;}
.rf{padding:1rem 1.1rem;border-top:1px solid var(--line-1);}
.rf b{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-4);font-weight:400;margin-bottom:.45rem;}
.rf span{font-size:.85rem;line-height:1.45;color:var(--ink-3);}
.pnote{margin-top:2rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--ink-4);}

/* ===== CTA ===== */
.cta{text-align:center;}
.cta h2{font-family:'Instrument Serif',serif;font-size:var(--t-display);color:var(--ink-1);margin-bottom:.9rem;}
.cta p{color:var(--ink-3);margin-bottom:2rem;}

/* ===== MOTION: visible by default ===== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .sec > .wrap, .strip-h, .rail{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 42%;}
    @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  }
}

/* ===== MOBILE: photography leads ===== */
@media (max-width:900px){
  .grid12{grid-template-columns:1fr;gap:2rem;}
  .col-text,.col-vis,.flip .col-text,.flip .col-vis{grid-column:1/-1;}
  .col-vis,.flip .col-vis{order:1;} .col-text,.flip .col-text{order:2;}
  .doors{grid-template-columns:1fr;}
  .sheet{grid-template-columns:repeat(5,1fr);}
  .sheet .sc:nth-child(n+31){display:none;}
  .fg{grid-template-columns:1fr;}
  .fg .ft{border-right:0;}
  .receipt{grid-template-columns:repeat(2,1fr);}
  .lede{max-width:none;}
}

/* ===== RECAST + HISTORY ===== */
.recast{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:10px;}
.rc-face{position:relative;width:64px;aspect-ratio:1;border-radius:4px;overflow:hidden;border:1px solid var(--line-1);}
.rc-face img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.8);}
.rc-face.now{border-color:rgba(255,94,138,.7);}
.rc-face.now img{filter:brightness(.95);}
.rc-tag{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.14em;text-transform:uppercase;background:rgba(8,8,10,.8);color:var(--ink-3);padding:1px 0;}
.rc-face.now .rc-tag{color:var(--ac);}
.rc-arrow{font-size:16px;color:var(--ink-5);}
.rc-meta{text-align:right;}
.rc-k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);}
.rc-v{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-1);margin-top:2px;}
.hist{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);}
.hist-k,.hist-v{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap;}
.hist-rail{flex:1;display:flex;align-items:center;justify-content:space-between;position:relative;height:10px;}
.hist-rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-1);}
.hist-rail i{position:relative;width:5px;height:5px;border-radius:50%;background:var(--ink-5);}
.hist-rail i.on{background:var(--ac);width:8px;height:8px;box-shadow:0 0 0 3px rgba(255,94,138,.18);}

/* ===== SPEC BAR ===== */

/* ===== DOORS AS LINKS (the homepage's only navigation) ===== */
a.door{color:inherit;text-decoration:none;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
a.door:hover,a.door:focus-visible{transform:translateY(-3px);border-color:var(--ac);
  box-shadow:0 10px 40px rgba(255,94,138,.15);outline:none;}
a.door:hover .shot img,a.door:focus-visible .shot img{transform:scale(1.04);}
@media (prefers-reduced-motion:reduce){ a.door,a.door .shot img{transition:none;}
  a.door:hover,a.door:focus-visible{transform:none;} a.door:hover .shot img,a.door:focus-visible .shot img{transform:none;} }

/* ===== PROJECT FOLDER (the app section) ===== */
.tree{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.5;}
.tree .rt2{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:5px 0;
  border-bottom:1px solid var(--line-2);}
.tree .rt2:last-child{border-bottom:0;}
.tree .rt2.top{color:var(--ink-1);padding-bottom:7px;}
.tree i{font-style:normal;color:var(--ink-5);margin-right:.5rem;}
.tree .nm2{color:var(--ink-2);}
.tree .ds{color:var(--ink-4);text-align:right;white-space:nowrap;}
@media (max-width:520px){ .tree{font-size:10px;} }
@media (max-width:360px){ .tree .ds{display:none;} }

/* ===== FOOTER ===== */
.foot{border-top:1px solid var(--line-2);padding:clamp(2.4rem,5vw,3.4rem) 0;}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem;}
.foot-mark{font-family:'Gochi Hand',cursive;font-size:1.45rem;line-height:1;letter-spacing:.07em;color:var(--ac);}
.foot-nav{display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;}
.foot-nav a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);}
.foot-nav a:hover{color:var(--ink-1);}
.foot-c{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;color:var(--ink-5);}
@media (max-width:900px){ .foot-c{margin-left:0;width:100%;} }
.stack2{display:flex;flex-direction:column;gap:1rem;}

/* ===== MOBILE FIXES the prototype never had to solve ===== */
/* Narrow, the two hero buttons share the row full width rather than shrinking
   to a pair of stubs in the middle of the frame. */
/* They stay small and centred all the way down rather than stretching into two
   full-width slabs, which is the opposite of subtle. Never let a label wrap. */
.hero-cta .lnk{white-space:nowrap;}
@media (max-width:360px){
  .hero-cta .lnk{padding:.55rem .8rem;letter-spacing:.14em;}
}
/* Strip header: the count line drops under the lede instead of squeezing it. */
@media (max-width:900px){
  .strip-h{flex-direction:column;align-items:flex-start;gap:1rem;}
}
/* Door cards are full width on mobile, so a second row is not ragged. */
@media (max-width:900px){
  .dlist{white-space:normal;}
}

/* ===================================================================
   SUB-PAGE CHROME. The homepage is a launchpad; the depth pages need a
   way back and a way in.
   =================================================================== */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--gut);border-bottom:1px solid var(--line-2);
  background:rgba(10,10,12,.74);backdrop-filter:blur(14px);}
.topbar .tm{font-family:'Gochi Hand',cursive;font-size:1.3rem;line-height:1;letter-spacing:.07em;color:var(--ac);}
.topbar nav{display:flex;gap:1.4rem;}
.topbar nav a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-4);}
.topbar nav a:hover{color:var(--ink-2);}
.topbar nav a[aria-current="page"]{color:var(--ink-1);}
.topbar .tcta{margin-left:auto;display:flex;gap:.45rem;flex:none;}
@media (max-width:760px){
  .topbar{flex-wrap:wrap;gap:.8rem 1.2rem;}
  .topbar nav{order:3;width:100%;justify-content:space-between;gap:.8rem;}
}

/* ===== PAGE HERO (sub-pages open on film, not on a form) ===== */
.phero{position:relative;min-height:60svh;display:flex;align-items:flex-end;overflow:hidden;}
.phero-bg{position:absolute;inset:0;z-index:0;}
/* The poster and the video stack, they do not sit in a column. The poster
   paints first and is the reduced-motion fallback. */
.phero-bg > img,.phero-bg > video{position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;filter:brightness(.66) saturate(.95);}
.phero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.52) 0%,rgba(8,8,10,.26) 30%,rgba(8,8,10,.86) 76%,rgba(8,8,10,.99) 100%);}
@media (prefers-reduced-motion: reduce){ .phero-bg > video{display:none;} }

/* Low-key plate. Footage that arrives already graded down does not want the
   standard darkening on top of it, and the scrim only has to carry the copy
   in the bottom third. Bright stills keep the default treatment. */
.phero.lowkey .phero-bg > img,.phero.lowkey .phero-bg > video{filter:none;}
.phero.lowkey .phero-bg::after{
  background:linear-gradient(180deg,rgba(8,8,10,.34) 0%,rgba(8,8,10,.04) 24%,
    rgba(8,8,10,.58) 66%,rgba(8,8,10,.95) 100%);}
.phero-in{position:relative;z-index:1;width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(4rem,10vw,7rem) var(--gut) clamp(2.6rem,6vw,4.2rem);}
.phero h1{font-family:'Instrument Serif',serif;font-size:clamp(2.3rem,5.2vw,4.2rem);line-height:1.02;
  letter-spacing:-.012em;color:var(--ink-1);margin-bottom:.9rem;}
.phero h1 em{font-style:italic;color:var(--ink-3);}
.phero .lede{max-width:42ch;text-shadow:0 1px 14px rgba(0,0,0,.7);}

/* ===== CHAIN (board to still to take) ===== */
.chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px;}
.stage{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:var(--sunk);}
.stage img{width:100%;height:100%;object-fit:cover;}
.stage .st{position:absolute;left:5px;bottom:4px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(8,8,10,.72);
  border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:.15rem .35rem;}
.stage .dur{position:absolute;right:5px;bottom:4px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  color:var(--ac);background:rgba(8,8,10,.72);border-radius:2px;padding:.15rem .35rem;}
.chain .arw{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink-4);text-align:center;padding:0 2px;}
/* The three stages read as one shot moving forward, so the grammar is the
   frame around it, not a filter faking a sketch. Plan, approved, moving. */
.stage.b{outline:1px dashed var(--line-1);outline-offset:-1px;}
.stage.s{outline:1px solid var(--line-1);outline-offset:-1px;}
.stage.t{outline:1px solid var(--ink-5);outline-offset:-1px;}
.stage .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.stage .pl::before{content:"";width:0;height:0;border-left:12px solid rgba(255,255,255,.92);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.85));}
@media (max-width:520px){ .chain{grid-template-columns:1fr;} .chain .arw{transform:rotate(90deg);padding:2px 0;} }


/* ===== FREEFORM ASSET GRID (tiles letterbox, they are never cropped) ===== */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.ftile{position:relative;aspect-ratio:16/10;background:var(--sunk);border-radius:3px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.ftile img{width:100%;height:100%;object-fit:contain;}
.ftile.on{outline:1px solid rgba(255,94,138,.6);outline-offset:-1px;}
.ftile .kind{position:absolute;left:4px;top:3px;font-family:'JetBrains Mono',monospace;font-size:8px;
  letter-spacing:.1em;color:rgba(255,255,255,.72);text-shadow:0 1px 2px #000;}
.ftile.pending{border:1px dashed var(--line-1);}
.ftile.pending span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;color:var(--ink-5);}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px;}
.chips span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line-1);border-radius:3px;padding:.25rem .5rem;}
.chips span.hot{color:var(--ac);border-color:rgba(255,94,138,.4);}
/* A colour card is a real clip on the strip, so it lives in the video lane. */
.clip.cc{background:#17171c;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);}

/* ===== CONNECTION GRAPH (agentic) =====
   Inline SVG, no library. It scrolls sideways on narrow screens rather than
   shrinking its type past the point of reading. */
.graph{width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.graph::-webkit-scrollbar{display:none;}
.graph svg{display:block;min-width:660px;width:100%;height:auto;}
.g-box{fill:#101013;stroke:var(--line-1);stroke-width:1;}
.g-box-ac{fill:#150f14;stroke:rgba(255,94,138,.5);stroke-width:1;}
.g-t{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;fill:var(--ink-1);}
.g-s{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;fill:var(--ink-4);}
.g-ac{fill:var(--ac);}
.g-l{stroke:var(--line-1);fill:none;stroke-width:1;}
.g-l-ac{stroke:rgba(255,94,138,.45);fill:none;stroke-width:1;}
.g-d{fill:var(--ink-5);}
.graph-cap{margin-top:12px;padding-top:10px;border-top:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--ink-4);}
/* A full-width section still needs its prose to stop at a readable measure. */
.gsplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:1.5rem 3rem;align-items:start;
  margin-bottom:2.8rem;}
.pts.two{margin-top:0;display:grid;grid-template-columns:1fr 1fr;gap:.85rem 2rem;}
@media (max-width:900px){ .gsplit{grid-template-columns:1fr;} .pts.two{grid-template-columns:1fr;} }

/* Anchored sections must clear the sticky sub-page bar. */
section[id]{scroll-margin-top:84px;}

/* The graph scrolls sideways on narrow screens, so say so with an edge fade
   rather than a line of copy. The fade sits outside the scroller. */
.graph-wrap{position:relative;}
.graph-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;pointer-events:none;
  background:linear-gradient(90deg,rgba(16,16,19,0),rgba(16,16,19,.96));opacity:0;transition:opacity .2s;}
@media (max-width:1100px){ .graph-wrap::after{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .graph-wrap::after{transition:none;} }

/* Grid and flex children default to min-width:auto, so one nowrap label inside
   the timeline can push a whole column past the viewport. Let them shrink. */
.grid12 > *{min-width:0;}
.trk,.lane,.clip{min-width:0;}

/* Panel headers stay one line: the label clips, the right-hand data never does. */
.phead .lb{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phead .rt{white-space:nowrap;flex:none;}

/* Page hero on mobile: the film takes its own 16:9 band and the copy sits
   under it. Cover-cropping a landscape frame into a portrait hero throws away
   the sides, which on a two-hander is both the actors. This is the same rule
   the 12-column sections already follow: the visual leads, the text follows. */
@media (max-width:760px){
  .phero{min-height:0;display:block;}
  .phero-bg{position:relative;aspect-ratio:16/9;}
  .phero-bg::after,.phero.lowkey .phero-bg::after{
    background:linear-gradient(180deg,rgba(8,8,10,0) 58%,rgba(8,8,10,.55) 82%,rgba(8,8,10,.97) 100%);}
  .phero-in{padding-top:1.7rem;}
  .phero .lede{text-shadow:none;}
}

/* ===== FLOW (a pipeline stated as labels, not as a fake screenshot) ===== */
.flow{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;}
.flow b{font-weight:400;color:var(--ink-2);background:rgba(255,255,255,.045);
  border:1px solid var(--line-2);border-radius:3px;padding:.4rem .65rem;}
.flow b.on{color:var(--ac);border-color:rgba(255,94,138,.32);}
.flow i{font-style:normal;color:var(--ink-5);font-size:12px;}

/* ===== CONNECT COMMAND (the real one-liner from agent-surface/index.ts) ===== */
.cmd{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
  display:flex;gap:.9rem;align-items:baseline;}
.cmd b{flex:none;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-4);font-weight:400;}
.cmd code{flex:1;min-width:0;font-family:'JetBrains Mono',monospace;font-size:11px;
  line-height:1.65;color:var(--ink-2);word-break:break-all;}
.cmd code i{font-style:normal;color:var(--ink-4);}
@media (max-width:640px){ .cmd{flex-direction:column;gap:.5rem;} .cmd code{font-size:10px;} }

/* ===== THE CHAIN RAIL (freeform) =====
   Drawn the way the app draws it (FreeformChainRail.tsx): a chip per step,
   the links from the bindings, coloured by what they carry. The colours are
   the app's own timeline tokens, not ours: image #8fa0b8, video #5b8def,
   matte #b87fe0. Amber is the app's warning, used for BEHIND only. */
.graph.rail svg{min-width:600px;}
.g-chip{fill:#101013;stroke:var(--line-1);stroke-width:1;}
.g-chip-on{fill:#150f14;stroke:rgba(255,94,138,.6);stroke-width:1;}
.g-chip-d{fill:#0c0c0e;stroke:var(--line-1);stroke-width:1;stroke-dasharray:3 3;}
.g-ct{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;fill:var(--ink-1);}
.g-cg{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;fill:var(--ink-3);}
.g-cm{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;fill:var(--ink-4);}
.g-cm.warn{fill:#e0a13a;}
.g-th{fill:none;stroke:var(--line-1);stroke-width:1;}
.g-dot-ran{fill:var(--ink-3);}
.g-dot-ready{fill:none;stroke:var(--ink-4);stroke-width:1;}
.g-dot-warn{fill:#e0a13a;}
.g-l-img,.g-l-vid,.g-l-key{fill:none;stroke-width:1.5;opacity:.75;}
.g-l-img{stroke:#8fa0b8;} .g-l-vid{stroke:#5b8def;} .g-l-key{stroke:#b87fe0;}
.g-l-pin{stroke-dasharray:4 3;}
.g-lc-img{fill:#8fa0b8;} .g-lc-vid{fill:#5b8def;} .g-lc-key{fill:#b87fe0;}
.g-lt-img,.g-lt-vid,.g-lt-key{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;}
.g-lt-img{fill:#8fa0b8;} .g-lt-vid{fill:#5b8def;} .g-lt-key{fill:#b87fe0;}
/* the signature glyphs: what goes in, what comes out */
.g-gl-img{stroke:#8fa0b8;fill:none;} .g-gf-img{fill:#8fa0b8;stroke:none;}
.g-gl-vid{stroke:#5b8def;fill:none;} .g-gf-vid{fill:#5b8def;stroke:none;}
.g-gl-key{stroke:#b87fe0;fill:none;} .g-gf-key{fill:#b87fe0;stroke:none;}
.g-ga{stroke:var(--ink-4);fill:none;}
.g-gt{font-family:'JetBrains Mono',monospace;font-size:9px;fill:var(--ink-3);}

/* ===== MODELS (homepage): prose rows, a wider key column ===== */
.rows.prose .row{grid-template-columns:7.4rem 1fr;}
.rows.prose .v{text-align:left;color:var(--ink-2);line-height:1.55;}

/* ===== LEGAL: terms / privacy / acceptable-use — GENERATED pages (app repo scripts/render-legal.mjs) ===== */
.legal-sec{padding-top:clamp(3.5rem,7vw,6rem);}
.legal{max-width:72ch;}
.legal h1{font-family:'Instrument Serif',serif;font-size:var(--t-display);line-height:1.03;letter-spacing:-.012em;color:var(--ink-1);margin-bottom:.6rem;}
.legal-version{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:2.2rem;}
.legal h2{font-family:'Instrument Serif',serif;font-size:1.55rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink-1);margin:2.6rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line-2);}
.legal h3{font-size:1.05rem;font-weight:600;color:var(--ink-1);margin:1.8rem 0 .5rem;}
.legal p{font-size:var(--t-body);line-height:1.62;color:var(--ink-2);margin:0 0 1rem;}
.legal strong{color:var(--ink-1);font-weight:600;}
.legal em{font-style:italic;}
.legal code{font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--ink-1);background:rgba(255,255,255,.05);padding:.05em .35em;border-radius:4px;}
.legal a{color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-4);}
.legal a:hover{text-decoration-color:var(--ac);}
.legal ul,.legal ol{margin:0 0 1.1rem 1.25rem;display:grid;gap:.5rem;}
.legal ul{list-style:disc;}
.legal ol{list-style:decimal;}
.legal li{font-size:var(--t-body);line-height:1.55;color:var(--ink-2);}
.legal li p{margin:0 0 .6rem;}
.legal li p:last-child{margin-bottom:0;}
.legal hr{border:0;border-top:1px solid var(--line-1);margin:2.4rem 0;}
.legal-table{overflow-x:auto;margin:0 0 1.4rem;}
.legal table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.45;}
.legal th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);padding:.55rem .7rem .55rem 0;border-bottom:1px solid var(--line-1);}
.legal td{vertical-align:top;padding:.65rem .7rem .65rem 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);}
.legal td:first-child{color:var(--ink-1);}
/* the acceptance line on set-password: the affirmative act at account creation */
.access-consent{display:flex;align-items:flex-start;gap:.7rem;font-size:.9rem;line-height:1.5;color:var(--ink-2);cursor:pointer;}
.access-form .access-consent input{width:auto;padding:0;margin-top:.25rem;background:none;border:0;accent-color:var(--ac);flex:0 0 auto;}
.access-consent a{color:var(--ink-1);text-decoration:underline;text-underline-offset:3px;}