/* Mock Anything. One face (Archivo), mono only inside real code. One motif: the twin's square notch. */
@font-face{font-family:"Archivo";src:url(/mockanything/fonts/Archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/mockanything/fonts/IBMPlexMono-400.woff2) format("woff2");font-weight:400;font-display:swap} /* taste-skill-ignore: the face for real code and literal API values only */

:root{
  --bg:#0c0c0b;--s1:#171716;--s2:#22221f;--s3:#2e2e2a;
  --ink:#ecebe7;--muted:#a6a59f;
  --acc:#ff5a1f;--acc-ink:#140904;
  --paper:#e9e9e6;--p-ink:#121211;--p-muted:#55544e;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* taste-skill-ignore: code only */
  --x-display:clamp(44px,7.6vw,124px);
  --x-head:clamp(30px,4.4vw,68px);
  --x-lead:clamp(22px,1.9vw,30px);
  --x-body:clamp(17px,1.1vw,19px);
  --x-small:14px;
  --m:max(clamp(20px,3vw,40px),env(safe-area-inset-left),env(safe-area-inset-right));
  --gap:clamp(120px,14vw,200px);
  --n:clamp(56px,9vw,152px);
  --ease:cubic-bezier(.16,1,.3,1);
  --t-hover:180ms;
  color-scheme:dark
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media (pointer:fine){html{overscroll-behavior:none}}
button,a,input,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--x-body)/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--acc);color:var(--acc-ink)}
a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover){a:hover{text-decoration-color:currentColor}}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
p,h1,h2,h3,figure,ol,ul,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
code,pre{font-family:var(--mono);font-size:.9em}
img,video{display:block;max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:9}
.skip:focus{left:8px}
h1,h2{font-weight:600;letter-spacing:-.035em;line-height:1;text-wrap:balance}
h2{font-size:var(--x-head)}

/* ---------- buttons: square, flat, one fill ---------- */
.btn,.cmd,.blank button{font:inherit;cursor:pointer;border:0;border-radius:0;transition:transform 120ms var(--ease),background-color var(--t-hover) ease,color var(--t-hover) ease}
.btn:active,.cmd:active,.blank button:active{transform:scale(.97)}
.btn{display:inline-flex;align-items:center;background:var(--acc);color:var(--acc-ink);text-decoration:none;font-weight:600}
.btn-small{font-size:var(--x-small);padding:10px 14px;font-variant-numeric:tabular-nums}
.cmd{display:inline-flex;align-items:stretch;max-width:100%;background:var(--ink);color:var(--bg);padding:0;text-align:left}
.cmd code{display:block;padding:16px 18px;font-size:var(--x-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-act{display:flex;align-items:center;padding:0 18px;background:var(--acc);color:var(--acc-ink);font-weight:600;font-size:var(--x-small)}
.cmd.done .cmd-act{background:var(--bg);color:var(--ink)}
@media (hover:hover){.cmd:hover .cmd-act{background:#ff7845}.btn:hover{background:#ff7845}}

/* ---------- header ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;gap:32px;padding:24px var(--m)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:var(--x-body);text-decoration:none}
.mark{width:22px;height:22px}
.mark rect,.bigmark rect{fill:var(--ink)}
.mark .m2,.bigmark .m2{fill:var(--acc)}
.nav{display:flex;gap:28px;margin-left:auto;font-size:var(--x-small)}
.nav a{text-decoration:none;color:var(--ink)}
@media (hover:hover){.nav a:hover{color:var(--acc)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(760px,100svh);overflow:hidden}
.sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-text{position:relative;z-index:2;padding:clamp(130px,17vh,170px) var(--m) 0;max-width:1100px}
.hero h1{font-size:var(--x-display);line-height:.94;letter-spacing:-.045em;font-stretch:92%}
.lede{font-size:var(--x-lead);line-height:1.4;max-width:34ch;margin-top:36px}
.hero .cmd{margin-top:36px}
.stage{position:absolute;z-index:1;left:44%;top:50%;right:0;bottom:0;background:var(--acc)}
.stage-fig{position:absolute;left:clamp(32px,4vw,56px);top:clamp(32px,4vw,56px);width:min(900px,90%)}
.stage-fig{display:flex;flex-direction:column-reverse}
.stage-video{width:100%;background:#0c0c0e}
.vid-ctl{font:600 var(--x-small)/1 var(--sans);background:var(--acc-ink);color:var(--acc);border:0;border-radius:0;padding:6px 10px;margin-right:8px;cursor:pointer}
.stage-fig figcaption{margin:0 0 12px;font-size:var(--x-small);color:var(--acc-ink);max-width:60ch}

/* ---------- showcase: one control, blown up ---------- */
.show{position:relative;min-height:92svh;overflow:hidden;padding:var(--m);transition:background-color .5s var(--ease),color .5s var(--ease)}
.show[data-field=ok]{background:var(--paper);color:var(--p-ink)}
.show[data-field=bad]{background:var(--acc);color:var(--acc-ink)}
.show-text{position:relative;z-index:2;padding-top:clamp(48px,6vw,80px);max-width:640px}
.show h2{font-size:var(--x-head)}
.show p{margin-top:20px;max-width:44ch}
.resp{margin-top:28px;font-size:var(--x-small);line-height:1.6;background:rgba(0,0,0,.08);padding:14px 16px;display:inline-block}
.giant{position:absolute;right:var(--m);top:50%;transform:translateY(-42%);display:flex;flex-direction:column;font-size:clamp(24px,3.4vw,60px);background:var(--p-ink);padding:.18em;gap:.18em}
.giant button{font:600 1em/1 var(--sans);letter-spacing:-.02em;border:0;border-radius:0;padding:.7em .8em;background:transparent;color:#8d8c86;cursor:pointer;text-align:left;transition:background-color .35s var(--ease),color .35s var(--ease)}
.giant code{font-size:1em}
.giant-k{display:block;font:500 .28em/1.2 var(--sans);letter-spacing:0;margin-bottom:.5em}
.giant button[aria-checked=true]{background:var(--paper);color:var(--p-ink)}
.show[data-field=bad] .giant button[aria-checked=true]{background:var(--acc);color:var(--acc-ink)}
@media (hover:hover){.giant button[aria-checked=false]:hover{color:var(--paper)}}

/* ---------- one card, four fields ---------- */
.strip4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.f{position:relative;min-height:84svh;padding:var(--m);display:flex;flex-direction:column}
.f1{background:var(--s1)}.f2{background:var(--s3)}.f3{background:var(--paper);color:var(--p-ink)}.f4{background:var(--acc);color:var(--acc-ink)}
.f h2{font-size:var(--x-lead);position:absolute;top:var(--m);left:var(--m);right:var(--m)}
.pi{margin:38svh auto 0;width:min(260px,100%);background:var(--bg);color:var(--ink);padding:18px 18px 16px;font-size:var(--x-small);transition:transform 150ms var(--ease)}
.f3 .pi,.f4 .pi{background:#fff;color:#111}
@media (hover:hover){.f:hover .pi{transform:translateY(-6px)}}
.pi-id{font-family:var(--mono); /* taste-skill-ignore: literal object id inside a data-ui fragment */font-size:var(--x-small);opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-amt{font-size:var(--x-lead);font-weight:600;letter-spacing:-.02em;margin-top:10px;font-variant-numeric:tabular-nums}
.pi-st{display:inline-block;margin-top:8px;font-size:var(--x-small);padding:3px 7px;background:rgba(128,128,128,.18)}
.pi-st.is-ok{background:#1f7a3d;color:#fff}
.pi-row{margin-top:10px;font-size:var(--x-small);opacity:.75}
.clause{margin-top:auto;font-size:var(--x-lead);line-height:1.15;letter-spacing:-.015em;font-weight:500;max-width:14ch}

/* ---------- see every request ---------- */
.see{padding:var(--gap) var(--m) 0}
.see-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);align-items:end}
.see-head p{max-width:46ch}
.gallery{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:8px;margin-top:56px}
.g{background:var(--s1);overflow:hidden}
.g img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.g-big{grid-column:1/-1}
.g-big img{aspect-ratio:auto}
.g figcaption{padding:14px 16px 18px;font-size:var(--x-small)}

/* ---------- line-up ---------- */
.lineup{padding:var(--gap) var(--m) 0}
.lineup-lede{max-width:52ch;margin-top:24px}
.lu{width:100%;border-collapse:collapse;margin-top:48px;font-size:var(--x-lead);letter-spacing:-.01em}
.lu th,.lu td{text-align:left;font-weight:400;padding:0;line-height:1.55;vertical-align:baseline}
.lu tbody th{width:22%}
.lu td:nth-child(2){width:36%}
.lu td:nth-child(3){width:14%;color:var(--muted)}
.lu td:last-child{text-align:right}
.lu code{font-size:var(--x-small);color:var(--muted)}
.lu-copy{background:none;border:0;padding:4px 0;color:inherit;cursor:pointer;display:inline-flex;gap:12px;align-items:baseline;font:inherit}
.lu-act{font-size:var(--x-small);color:var(--acc);opacity:0;transition:opacity .2s var(--ease)}
.lu-copy:focus-visible .lu-act,.lu-copy.done .lu-act{opacity:1}
@media (hover:hover){.lu-copy:hover code{color:var(--ink)}.lu-copy:hover .lu-act{opacity:1}}
.lu-h th{color:var(--acc);padding-top:56px!important;padding-bottom:10px!important}
.lu tbody tr:first-child th{padding-top:0!important}

/* ---------- chaos bands ---------- */
.bands{padding-top:var(--gap)}
.bands-head{display:grid;grid-template-columns:5fr 7fr;gap:var(--m);padding:0 var(--m) 56px;align-items:start}
.bands-head p{margin-top:24px;max-width:44ch}
.chaos-live{background:var(--s1);display:flex;flex-direction:column}
.cl-head{display:flex;justify-content:space-between;gap:16px;padding:14px 16px;font-size:var(--x-small);border-bottom:1px solid var(--s3)}
.cl-head span:last-child{color:var(--muted)}
.cl-log{list-style:none;margin:0;padding:10px 16px;min-height:16.5em;font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow:hidden}
.cl-log li{white-space:pre;overflow:hidden;text-overflow:ellipsis;animation:cl-in .3s var(--ease)}
.cl-log .ok{color:var(--muted)}.cl-log .hook{color:var(--ink)}.cl-log .bad{color:var(--acc)}.cl-log .warn{color:#f2c14e}
@keyframes cl-in{from{opacity:0;transform:translateY(-4px)}}
.band{cursor:pointer}
@media (hover:hover){.band:not(.on):hover .band-s{color:var(--ink)}}
.band{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:24px;min-height:20vh;padding:20px var(--m);transition:background-color .35s var(--ease),color .35s var(--ease)}
.band-s{font-size:var(--x-head);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:#8a8983;transition:color .35s var(--ease)}
.band-c{grid-row:2;max-height:0;opacity:0;overflow:hidden;transition:opacity .35s var(--ease),max-height .35s var(--ease)}
.band .sw{grid-column:2;grid-row:1/span 2}
.band.on{background:var(--s2)}
.band.on .band-s{color:var(--ink)}
.band.on .band-c{max-height:4em;opacity:1;margin-top:8px}
.band[data-mode="5xx"].on{background:var(--acc);color:var(--acc-ink)}.band[data-mode="5xx"].on .band-s{color:var(--acc-ink)}
.band[data-mode="dup"].on{background:var(--paper);color:var(--p-ink)}.band[data-mode="dup"].on .band-s{color:var(--p-ink)}
.band[data-mode="order"].on{background:var(--s3)}
.sw{position:relative;width:2.6em;height:1.4em;font-size:clamp(28px,3vw,48px);border:0;border-radius:999px;background:var(--s3);cursor:pointer;padding:0;transition:background-color .25s var(--ease)}
.sw i{position:absolute;top:.15em;left:.15em;width:1.1em;height:1.1em;border-radius:50%;background:var(--ink);transition:transform .25s var(--ease)}
.sw[aria-checked=true]{background:var(--ink)}
.sw[aria-checked=true] i{transform:translateX(1.2em);background:var(--bg)}
.band[data-mode="5xx"].on .sw[aria-checked=true],.band[data-mode="dup"].on .sw[aria-checked=true]{background:var(--p-ink)}
.band[data-mode="5xx"].on .sw i,.band[data-mode="dup"].on .sw i{background:var(--paper)}
.seed{padding:56px var(--m) 0}
.bars{display:grid;grid-template-columns:repeat(48,minmax(0,1fr));gap:4px}
.bars li{height:96px;background:var(--s3);transform-origin:bottom}
.bars li.x{background:var(--acc)}
.bars li.slow{background:#77766f}
.seed figcaption{margin-top:20px;max-width:60ch}
.seed figcaption code,.blank-help code{white-space:nowrap}

/* ---------- agents ---------- */
.agents{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,96px);padding:var(--gap) var(--m) 0;align-items:start}
.agents-a,.agents-b{min-width:0}
.agents-a p{margin-top:24px;max-width:50ch}
.tabs{margin-top:40px}
.tablist{display:flex;gap:6px;flex-wrap:wrap}
.tablist button{font:500 var(--x-small)/1 var(--sans);color:var(--ink);background:var(--s1);border:0;border-radius:0;padding:12px 14px;cursor:pointer;transition:background-color var(--t-hover) ease}
.tablist button[aria-selected=true]{background:var(--ink);color:var(--bg)}
@media (hover:hover){.tablist button[aria-selected=false]:hover{background:var(--s2)}}
.tabpanel{margin-top:6px}
.tabpanel .cmd{display:flex;width:100%}
.tabpanel .cmd code{flex:1;min-width:0}
.code{margin:0;background:var(--s1);padding:18px;font-size:var(--x-small);line-height:1.7;overflow-x:auto}
.agents-b{background:var(--s1);padding:clamp(28px,3vw,44px)}
.agents-b p{font-size:var(--x-lead);line-height:1.2;letter-spacing:-.02em;font-weight:500;margin-top:0}
.agents-b footer{margin-top:28px;font-size:var(--x-small);color:var(--muted)}

/* ---------- proof tiles ---------- */
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:var(--gap) var(--m) 0}
.tile{background:var(--s1);aspect-ratio:3/2;padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:180px}
.tile-head{grid-column:span 2;aspect-ratio:auto;background:var(--acc);color:var(--acc-ink);justify-content:flex-end}
.tile-head h2{font-size:var(--x-head);max-width:14ch}
.tile-n{font-size:var(--x-lead);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.tile p:not(.tile-n){font-size:var(--x-small)}
.tile-btn{border:0;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:background-color .25s var(--ease)}
.tile-act{font-size:var(--x-small);color:var(--acc);margin-top:12px}
.tile-act code{font-size:inherit}
.tile-btn.done{background:var(--s2)}
@media (hover:hover){.tile-btn:hover{background:var(--s2)}}
.brand span{white-space:nowrap}
.menu-btn{display:none;position:relative;flex:none;width:40px;height:40px;margin-left:auto;background:none;border:1px solid var(--s3);cursor:pointer;padding:0}
.menu-btn i{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .2s var(--ease)}
.menu-btn i:first-child{top:15px}.menu-btn i:last-child{top:22px}
.menu-btn[aria-expanded=true] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- safety ---------- */
.safe{margin-top:var(--gap);background:var(--paper);color:var(--p-ink);padding:clamp(72px,9vw,128px) var(--m)}
.safe h2{max-width:16ch}
.safe-list{display:grid;grid-template-columns:repeat(3,1fr);gap:40px var(--m);margin-top:56px}
.safe-list li{padding-left:30px;position:relative;max-width:36ch}
.safe-list li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;background:var(--p-ink);outline:0}
.safe-list li::after{content:"";position:absolute;left:5px;top:calc(.42em + 5px);width:10px;height:10px;background:var(--acc);z-index:-1}
.safe-list li{z-index:0}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:4fr 8fr;gap:var(--m);padding:var(--gap) var(--m) 0;align-items:start}
.faq h2{position:sticky;top:96px}
.faq-list{display:grid;gap:8px}
.faq details{background:var(--s1);transition:background-color .25s var(--ease),color .25s var(--ease)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:18px 24px;font-size:var(--x-body);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;flex:none;width:16px;height:16px}
.pm::before,.pm::after{content:"";position:absolute;background:currentColor}
.pm::before{left:0;top:6.5px;width:16px;height:3px}
.pm::after{left:6.5px;top:0;width:3px;height:16px;transition:transform .25s var(--ease)}
.faq details[open]{background:var(--acc);color:var(--acc-ink)}
.faq details[open] .pm::after{transform:rotate(90deg)}
.faq details p{padding:0 24px 24px;max-width:52ch}

/* ---------- cta: a sentence with a blank ---------- */
.cta{padding:var(--gap) var(--m)}
.blank{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .25em;font-size:min(var(--x-display),6.2vw);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.blank label{white-space:nowrap}
.blank input{font:inherit;letter-spacing:-.03em;width:4em;max-width:100%;height:1.1em;padding:0 .15em;border:0;border-radius:0;background:var(--s2);color:var(--ink)}
.blank input:focus-visible{outline-offset:6px}
.blank button{font:inherit;letter-spacing:-.04em;height:1.1em;padding:0 .25em;background:var(--acc);color:var(--acc-ink)}
.blank button.done{background:var(--ink);color:var(--bg)}
.blank-help{margin-top:28px;font-size:var(--x-small);color:var(--muted)}
.blank-help code{color:var(--ink)}

/* ---------- footer: the mark, built large ---------- */
.foot{padding:0 var(--m) 48px}
.bigmark{display:block;width:100%;height:34svh;min-height:180px}
.foot-grid{display:grid;grid-template-columns:4fr 8fr;gap:24px var(--m);margin-top:56px}
.foot-name{font-weight:600}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;font-size:var(--x-small)}
.fine{grid-column:2;font-size:var(--x-small);color:var(--muted);max-width:62ch}

/* ---------- documents (privacy, terms, 404) ---------- */
.doc-page .top{position:static}
.doc{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--m) clamp(72px,9vw,120px)}
.doc h1{font-size:clamp(44px,7vw,84px);letter-spacing:-.045em}
.doc .updated{font-size:var(--x-small);color:var(--muted);margin:20px 0 48px}
.doc h2{font-size:24px;letter-spacing:-.015em;margin:48px 0 12px}
.doc p,.doc li{margin:0 0 12px}
.doc ul{list-style:disc;padding-left:20px;margin:0 0 12px}
.doc-wrap{overflow-x:auto;margin:16px 0 24px}
.doc table{width:100%;border-collapse:collapse;font-size:15px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;background:var(--s1)}
.doc tr:nth-child(even) td{background:var(--s2)}
.doc th{background:var(--s3);font-weight:600}
.doc a{text-decoration-color:currentColor}
.doc-page .foot{padding-top:48px}

/* ---------- entrances (JS adds .js; content shows without script) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-r]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
  .js [data-r].in{opacity:1;transform:none}
  .js .shutter{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
  .js .shutter.is-in{clip-path:inset(0)}
  .js .shutter .stage-video{transform:scale(1.12);transform-origin:top left;transition:transform 1.5s var(--ease)}
  .js .shutter.is-in .stage-video{transform:none}
  .js .bars li{transform:scaleY(0);transition:transform .6s var(--ease);transition-delay:var(--d,0ms)}
  .js .bars.in li{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .strip4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f{min-height:64svh}
  .card,.pi{margin-top:26svh}
}
@media (max-width:1000px){
  .nav{display:none}
  .menu-btn{display:block}
  .top.open .nav{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--s3);padding:8px var(--m) 16px;margin:0;font-size:var(--x-lead)}
  .top.open .nav a{padding:12px 0}
  .btn-small{margin-left:0}
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero-text{padding-top:120px}
  .stage{position:relative;left:auto;top:auto;margin-top:56px;height:min(72vw,520px);--n:72px}
  .stage-fig{width:min(760px,calc(100% - 32px))}
  .strip4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f{min-height:64svh}
  .pi{margin-top:26svh}
  .agents,.faq,.see-head,.foot-grid,.bands-head,.gallery{grid-template-columns:minmax(0,1fr)}
  .giant{right:var(--m);bottom:var(--m);top:auto;transform:none}
  .show{min-height:0;padding-bottom:calc(var(--m) + 220px)}
  .faq h2{position:static}
  .fine{grid-column:1}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .safe-list{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .top{gap:12px;padding:18px var(--m)}
  .tabpanel .cmd code{white-space:normal;overflow-wrap:break-word;word-break:normal;text-overflow:clip}
  .hero .cmd{display:flex;width:100%}
  .hero .cmd code{flex:1;min-width:0;padding:14px}
  .stage{height:360px;--n:56px}
  .stage-fig{left:16px;top:16px;width:640px;max-width:none}
  .vid-ctl{font:600 var(--x-small)/1 var(--sans);background:var(--acc-ink);color:var(--acc);border:0;border-radius:0;padding:6px 10px;margin-right:8px;cursor:pointer}
.stage-fig figcaption{max-width:300px}
  .show{min-height:86svh}
  .giant{right:var(--m);left:var(--m);bottom:var(--m);top:auto;transform:none;font-size:clamp(20px,6.4vw,30px)}
  .giant button{width:100%}
  .show{padding-bottom:calc(var(--m) + 230px)}
  .strip4{grid-template-columns:minmax(0,1fr)}
  .f{min-height:0;padding-bottom:48px}
  .f h2{position:static;margin-bottom:12px}
  .pi{margin:24px 0 0}
  .clause{order:-1;margin-top:0}
  .f1 .clause{order:0;margin-top:16px}
  .gallery{grid-template-columns:1fr}
  .g-big img{aspect-ratio:16/10}
  .lu,.lu tbody,.lu tr,.lu th,.lu td{display:block;width:auto!important}
  .lu tr{margin-bottom:18px}
  .lu td{font-size:var(--x-small);color:var(--muted);text-align:left!important;display:inline}
  .lu td:nth-child(3){display:none}
  .lu td:last-child{display:block;margin-top:2px}
  .lu-act{opacity:1}
  .lu-h th{padding-top:32px!important}
  .band{min-height:132px}
  .band-s{max-width:90%}
  .sw{font-size:28px}
  .bars{grid-template-columns:repeat(24,minmax(0,1fr));row-gap:4px}
  .bars li{height:56px}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .tile-head{grid-column:1/-1;min-height:140px}
  .tile{aspect-ratio:auto;min-height:150px;padding:16px}
  .safe-list{grid-template-columns:1fr}
  .blank input{order:2;width:100%;flex-basis:100%}
  .blank button{order:3}
  .bigmark{height:22svh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
main p,main li,main figcaption{text-wrap:pretty}
main p{max-width:68ch}
.lu td,.lu th{max-width:none}

/* the hero text block must not swallow clicks meant for the stage beneath it */
.hero-text{pointer-events:none}
.hero-text>*{pointer-events:auto}

/* the scoped command is long: let it wrap instead of widening the page */
.lu code{overflow-wrap:anywhere}
.lu-copy{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
.lu td:last-child{overflow-wrap:anywhere}
.tile-act{min-width:0;max-width:100%}
.tile-act code{overflow-wrap:anywhere}