/* The public page (R23), from design/preview/site.html: its rules, on the product's tokens
   (public/tokens.css). The preview's own names for the colours are kept as aliases so its rules read as
   they were designed; the fonts are ours (/fonts.css), never a font service. */

:root {
  --bg: var(--paper); --bg2: var(--paper-2); --mut: var(--muted); --acc: var(--accent); --acc-ink: var(--accent-ink);
  --ln: var(--line); --shell: #10131a;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --shell: #2a3142; } }
:root[data-theme=dark] { --shell: #2a3142; }

*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
html::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
.serif{font-family:var(--serif)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ---------- text morph ---------- */
[data-k]{position:relative}
span[data-k],b[data-k],small[data-k]{display:inline-block}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;animation:chIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) + 90ms)}
.ch.st{animation:none}
@keyframes chIn{from{opacity:0;transform:translateY(.55em) rotate(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes chOut{from{opacity:1}to{opacity:0;transform:translateY(-.5em);filter:blur(6px)}}
.ghost{position:absolute;left:0;top:0;width:100%;pointer-events:none;text-align:inherit}
.ghost .ch{animation:chOut .3s cubic-bezier(.5,0,.8,.4) both;animation-delay:calc(var(--d) * .35)}
.ghost .fx{visibility:hidden}
.ghost.plain{animation:chOut .25s both}
.lw{position:relative;display:inline-block;white-space:nowrap;cursor:default}
.lp,.lq{display:inline-block}
.lr{position:absolute;top:0;bottom:0;pointer-events:none}
.lr i{position:absolute;top:0;font-style:normal;opacity:0;transform:translateY(.18em) scale(.55);transform-origin:50% 80%}
.ghost .lr{display:none}
.lws{transform-origin:0 50%}
.lws{position:absolute;left:-.06em;bottom:-.2em;width:calc(100% + .32em);height:.3em;overflow:visible;pointer-events:none}
.lws path{fill:none;stroke:var(--acc);stroke-width:max(3px,.07em);stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:pen 1.25s cubic-bezier(.55,.05,.2,1) .95s forwards}
@keyframes pen{to{stroke-dashoffset:0}}
.ghost .lws{display:none}
/* While the words change language (client/morph.ts) the arriving stroke waits and is drawn once, under the settled
   words, not begun under the arriving glyphs and then replaced; the leaving stroke stays drawn and blurs out with its words. */
.morphing .lws path{animation:none}
.morph-ghost .lws path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.lws path{animation:none;stroke-dashoffset:0}}
.fx{display:inline-block;white-space:nowrap;border-radius:4px;padding:0 .14em;
  background:linear-gradient(to top,color-mix(in srgb,var(--pin) 46%,transparent) 0 42%,transparent 42%)}
.fx-code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.82em;background:color-mix(in srgb,var(--pin) 26%,transparent);padding:.1em .4em}

/* ---------- nav ---------- */
.offer{background:color-mix(in srgb,var(--acc) 9%,var(--bg));border-bottom:1px solid var(--rule);font-size:14px}
.offer[hidden]{display:none}
.offer-in{display:flex;align-items:center;gap:14px;min-height:44px;padding-top:6px;padding-bottom:6px}
.offer-go{font-weight:600;color:var(--acc);padding:6px 12px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.offer-go:hover{background:color-mix(in srgb,var(--acc) 12%,transparent)}
.offer-x{margin-inline-start:auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--mut)}
.offer-x:hover{background:var(--tint);color:var(--ink)}
@media (max-width:600px){.offer-in{flex-wrap:wrap;gap:8px 10px;font-size:13.5px;padding-top:12px;padding-bottom:12px;padding-inline-end:44px}.offer-in>span{flex:1 1 100%;order:0}.offer-x{position:absolute;right:10px;top:8px}.offer{position:relative}}
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid color-mix(in srgb,var(--rule) 70%,transparent)}
.nav-in{display:flex;align-items:center;gap:16px;height:58px}
  transform-origin:3px 11px;animation:orb 5s linear infinite}
  transition:transform .5s cubic-bezier(.3,1.3,.4,1),width .5s cubic-bezier(.3,1.3,.4,1)}
.tgl{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--mut);flex:0 0 auto;transition:background .2s,color .2s,transform .5s cubic-bezier(.3,1.3,.4,1)}
.tgl:hover{background:var(--tint);color:var(--ink);transform:rotate(40deg)}

/* ---------- hero ---------- */
.hero{position:relative;padding:74px 0 60px}
.marq{position:absolute;left:0;right:0;top:8px;overflow:hidden;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-in{display:flex;gap:56px;width:max-content;animation:marq 70s linear infinite;font-family:var(--serif-60);font-size:118px;line-height:1;font-weight:700;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--ink) 22%,transparent);white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}
.hero-g{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
h1{font-size:clamp(40px,6.1vw,76px);line-height:1.04;letter-spacing:-.028em;font-weight:700;margin-top:64px}
h1.serif{font-family:var(--serif-display)}
html:is([lang^=zh],[lang=ja],[lang=ko]) h1{line-height:1.22;letter-spacing:0}
.nw{white-space:nowrap}html[lang=ja] h1{word-break:auto-phrase}html[lang=ko] h1{word-break:keep-all}
html:is([lang^=zh],[lang=ja],[lang=ko]) h1 .lws{bottom:-.1em}
.sub{font-size:18px;line-height:1.62;color:var(--mut);margin-top:22px;max-width:33em}
.paste{display:flex;margin-top:30px;max-width:500px;border-radius:15px;background:var(--bg);border:1.5px solid var(--rule);
  padding:5px;transition:border-color .25s,box-shadow .25s}
.paste:hover{border-color:var(--faint)}
.paste:focus-within{border-color:var(--acc);box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 16%,transparent)}
.paste input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15.5px;color:var(--ink);padding:0 13px;outline:none}
.paste input::placeholder{color:var(--faint)}
.go{position:relative;overflow:hidden;padding:12px 20px;border-radius:11px;background:var(--acc);color:var(--acc-ink);font-weight:600;font-size:15px;
  transition:transform .3s cubic-bezier(.3,1.4,.4,1),filter .2s}
.go:hover{transform:scale(1.045);filter:brightness(1.1)}
.go:active{transform:scale(.97)}
html,body{overflow-x:clip}
.navsp{flex:1}
.lbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 11px;border-radius:999px;border:1.5px solid var(--rule);color:var(--ink);font-size:14px;transition:border-color .2s,background .2s}
.lbtn b{font-weight:500}.lbtn:hover{border-color:var(--acc);background:var(--tint)}
.lcv{color:var(--mut);flex:0 0 auto}
.paste{display:block;padding:0}
.prow{display:flex;padding:5px}
.into{display:flex;align-items:center;gap:7px;width:100%;padding:11px 16px 12px 18px;border-top:1.5px solid var(--rule);border-radius:0 0 13px 13px;font-size:14.5px;color:var(--mut);text-align:start;transition:background .2s}
.into:hover{background:var(--tint)}
.into b{font-weight:600;color:var(--ink)}
.into .in{margin-inline-start:auto;font-size:13px;color:var(--faint);white-space:nowrap}
@media (hover:none){.lpk-k{display:none}}
@media (hover:none){.lo.act::after{content:none}}
@media (max-width:600px){
}
.free{font-size:13.5px;color:var(--faint);margin-top:13px}
.sc{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--rule);font-size:14.5px;font-weight:500;text-decoration:none;transition:border-color .2s,background .2s,transform .3s cubic-bezier(.3,1.4,.4,1)}
.sc:hover{border-color:var(--acc);background:var(--tint);transform:translateY(-2px)}

.spec{position:relative;background:var(--bg);border:1px solid var(--rule);border-radius:20px;padding:30px 30px 26px;margin-top:40px;
  box-shadow:0 1px 2px rgba(16,19,26,.04),0 26px 60px -34px rgba(16,19,60,.38);min-height:270px}
.spec-tag{position:absolute;right:18px;top:-13px;background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px}
.spec h2{font-size:27px;line-height:1.2;letter-spacing:-.015em;font-weight:700}
.spec p{font-size:18px;line-height:1.75;margin-top:14px}
.spec-c{font-size:13.5px;color:var(--faint);margin-top:16px;padding-left:4px}

/* ---------- sections ---------- */
section{padding:70px 0}
.h2{font-size:clamp(28px,3.7vw,44px);line-height:1.1;letter-spacing:-.022em;font-weight:700;max-width:18em}

/* ---------- film ---------- */
.stage{position:relative;margin-top:34px;border-radius:26px;overflow:hidden;border:1px solid var(--rule);
  background:radial-gradient(90% 70% at 50% 8%,var(--tint),var(--bg2))}
.comp{position:absolute;left:0;top:0;transform-origin:0 0;perspective:1700px}
/* The film's size is reserved from the first paint, before its code arrives (spec/motion.md, Loading): its
   two layouts' proportions (client/site/film.ts LAYOUTS), switching where the script does, at 760 px of
   stage inside its border. Content-box, so the ratio is of the same box the script scales the film into. */
#loop .wrap{container-type:inline-size}
.stage{box-sizing:content-box;aspect-ratio:400/716}
@container (min-width:762px){.stage{aspect-ratio:1120/720}}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit .trk{fill:none;stroke:var(--rule);stroke-width:1.5}
.orbit .prg{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round}
.orbit .nd{cursor:pointer}
.orbit .nd circle{fill:var(--bg);stroke:var(--faint);stroke-width:1.5;transition:fill .3s,stroke .3s,r .3s cubic-bezier(.3,1.5,.4,1)}
.orbit .nd:hover circle{stroke:var(--acc);r:8}
.orbit .nd.on circle{fill:var(--acc);stroke:var(--acc);r:7}
.orbit .nd text{font-size:15px;font-weight:500;fill:var(--faint);transition:fill .3s}
.orbit .nd:hover text{fill:var(--ink)}
.orbit .nd.on text{fill:var(--ink);font-weight:600}
.orbit .nd .num{font-size:10px;font-weight:600;fill:var(--faint)}
.orbit .nd.on .num{fill:var(--acc-ink)}
.orbit .dot{fill:var(--acc)}
.orbit .halo{fill:var(--acc);opacity:.18}
.stepname{position:absolute;left:24px;top:22px;font-size:34px;font-weight:700;letter-spacing:-.02em;display:none}
[data-lay=p] .stepname{display:block}
.odo{position:absolute;z-index:2;display:flex;flex-direction:column;gap:2px}
[data-lay=l] .odo{left:36px;top:310px}
[data-lay=p] .odo{right:24px;top:24px;align-items:flex-end}
.odo-n{display:flex;font-size:62px;line-height:1;font-weight:700;letter-spacing:-.03em;height:1em;overflow:hidden}
[data-lay=p] .odo-n{font-size:38px}
.od{display:block;height:1em;overflow:hidden}
.od span{display:block;height:1em;line-height:1}
.odo-l{font-size:13px;color:var(--mut)}
.pp{position:absolute;left:16px;bottom:16px;z-index:9;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--rule);
  display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.5,.4,1),border-color .2s}
.pp:hover{transform:scale(1.1);border-color:var(--acc)}
.cap{min-height:62px;margin-top:20px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.cap b{font-size:24px;letter-spacing:-.015em}
.cap span{font-size:16.5px;color:var(--mut);line-height:1.5}

.phone{position:absolute;left:0;top:0;width:270px;height:556px;border-radius:40px;background:var(--bg);z-index:3;
  box-shadow:0 0 0 1px var(--rule),0 0 0 8px var(--shell),0 0 0 9px var(--rule),0 40px 70px -34px rgba(8,12,40,.6);will-change:transform}
.scrn{position:absolute;inset:0;border-radius:40px;overflow:hidden;background:var(--bg)}
.pg{position:absolute;inset:0;background:var(--bg);overflow:hidden;will-change:transform}
.pg.fd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:54px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.doc{position:absolute;left:0;right:0;top:0;padding:30px 18px 34px;will-change:transform}
.au{display:flex;align-items:center;gap:9px}
.av{width:30px;height:30px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--mut);flex:0 0 auto}
.aun b{display:block;font-size:13px;font-weight:600;line-height:1.2}
.aun small{font-size:11px;color:var(--faint)}
.cv{height:84px;border-radius:9px;margin:13px 0 0;border:1px solid var(--rule);background:linear-gradient(115deg,var(--tint),var(--bg2) 55%,var(--tint))}
.ttl{position:relative;margin:14px 0 15px}
.tl{position:absolute;left:0;top:0;right:0;font-size:17.5px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.tc{display:inline-block;will-change:transform,opacity}
.ln{height:7px;display:flex;gap:5px;margin:0 0 9px;overflow:hidden}
.ln i{display:block;height:100%;border-radius:2px;background:var(--lc,var(--ln));flex:0 0 auto}
.ln.cjk{gap:3px}
.hd{height:11px;border-radius:3px;background:var(--lc,var(--ink));opacity:.8;margin:17px 0 13px}
.im{height:82px;border-radius:9px;border:1px solid var(--rule);background:linear-gradient(120deg,var(--tint),var(--bg2));margin:5px 0 15px}
.cd{position:relative;border-radius:9px;background:#151a26;padding:23px 11px 3px;margin:5px 0 15px}
.cd::before{content:'';position:absolute;left:0;right:0;top:0;height:15px;border-bottom:1px solid #293044}
.cd .ln i{background:#4b5873}
.li{display:flex;gap:7px}
.li::before{content:'';width:5px;height:5px;margin-top:1px;border-radius:50%;background:var(--mut);flex:0 0 auto}
.li .ln{flex:1}
.veilw{position:relative}
.veil{position:absolute;inset:-6px -2px -4px;background:linear-gradient(to bottom,transparent,var(--bg) 82%)}
.gate{overflow:hidden}
.gate-in{border:1px solid var(--rule);border-radius:15px;padding:14px 14px 9px;background:var(--bg);margin:4px 0 14px}
.gate-in p{font-size:12.5px;line-height:1.45;margin-bottom:11px}
.fbtn{position:relative;display:flex;align-items:center;justify-content:center;border-radius:11px;border:1px solid var(--rule);
  font-size:13px;font-weight:500;padding:10px;width:100%}
.fbtn.pri{background:var(--acc);color:var(--acc-ink);border-color:transparent;font-weight:600}
.glink{display:block;text-align:center;font-size:11.5px;color:var(--faint);padding:8px 0 3px}
.tap{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--pin);opacity:0;pointer-events:none}
.xbar{display:flex;align-items:center;height:50px;padding:14px 16px 0;gap:10px;border-bottom:1px solid var(--rule)}
.xb-back{width:9px;height:9px;border-left:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);margin-left:3px}
.xb-dom{flex:1;text-align:center;font-size:12px;color:var(--faint)}
.xb-share{position:relative;width:28px;height:28px;display:grid;place-items:center;color:var(--ink)}
.xbody{padding:16px 18px}
.xt{font-size:17.5px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin:14px 0 15px}
.scrim{position:absolute;inset:0;background:#05070d;opacity:0;pointer-events:none;z-index:5}
.fsheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-radius:22px 22px 0 0;padding:9px 14px 26px;
  box-shadow:0 -12px 40px -12px rgba(5,7,20,.4);will-change:transform}
.grab{width:36px;height:4px;border-radius:2px;background:var(--rule);margin:0 auto 14px}
.apps{display:flex;gap:13px;padding:2px 2px 14px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.apps i{width:40px;height:40px;border-radius:11px;background:var(--tint);display:block}
.srow{position:relative;display:flex;align-items:center;gap:10px;font-size:13.5px;padding:12px 8px;border-radius:11px}
.srow.our{font-weight:600}
.srow .mk{width:18px;height:18px;border-radius:50%;border:1.6px solid color-mix(in srgb,var(--ink) 30%,transparent);position:relative;order:2;margin-left:auto}
.srow .mk::after{content:'';position:absolute;left:50%;top:-3px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--acc)}
.si-b{display:flex;flex-direction:column;gap:8px}.si-at{text-align:center;font-size:12px;color:var(--mut);margin-bottom:4px}
.ok{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none}
.ok circle{fill:var(--acc)}
.ok path{fill:none;stroke:var(--acc-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.lh{padding:34px 18px 12px;border-bottom:1px solid var(--rule)}
.lh b{font-size:19px;letter-spacing:-.01em}
  border-radius:11px;padding:9px 11px;display:flex;align-items:center;gap:8px;font-size:12px}
.rw{overflow:hidden;border-bottom:1px solid var(--rule)}
.rw-in{padding:12px 18px;height:58px}
.rw-in i{display:block;height:9px;border-radius:3px;background:var(--ink);opacity:.72;margin-bottom:6px}
.rw-in em{display:block;height:6px;width:46%;border-radius:2px;background:var(--ln);margin-top:9px}
.rw.real .rt{font-size:13px;font-weight:700;line-height:1.3;padding:12px 18px 0}
.rw.real .rm{font-size:10.5px;color:var(--faint);padding:4px 18px 12px}
.added{overflow:hidden}
.added-in{margin:10px 14px 0;border-radius:11px;background:color-mix(in srgb,var(--acc) 13%,var(--bg));color:var(--acc);font-weight:600;font-size:12.5px;padding:10px 12px}
.pk-body{padding:16px 16px}
.pk-body small{font-size:11px;color:var(--faint);display:block}
.pk-title{font-size:15px;line-height:1.3;font-weight:700;margin:6px 0 15px;padding-bottom:15px;border-bottom:1px solid var(--rule)}
.pack{position:relative;display:flex;align-items:center;border:1.5px solid var(--rule);border-radius:13px;padding:14px 14px;margin-bottom:9px;font-size:14px;font-weight:500;overflow:hidden}
.pack b{margin-left:auto;font-size:19px}
.pkc{position:absolute;right:13px;top:50%;width:24px;height:24px;margin-top:-12px}
.pkc path{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pkbar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}

.browser{position:absolute;left:0;top:0;width:440px;height:300px;border-radius:13px;background:var(--bg);z-index:4;overflow:hidden;
  box-shadow:0 0 0 1px var(--rule),0 40px 80px -36px rgba(8,12,40,.62);will-change:transform,opacity}
.bbar{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;background:var(--bg2);border-bottom:1px solid var(--rule)}
.bdots{display:flex;gap:5px}.bdots i{width:8px;height:8px;border-radius:50%;background:var(--rule);display:block}
.burl{position:relative;flex:1;height:20px;border-radius:6px;background:var(--bg);border:1px solid var(--rule);overflow:hidden}
.burl b{position:absolute;left:9px;top:0;line-height:19px;font-size:10.5px;font-weight:400;color:var(--faint);white-space:nowrap}
.bview{position:absolute;left:0;right:0;top:34px;bottom:0}
.bv{position:absolute;inset:0;padding:16px 22px}
.pill{position:relative;display:inline-flex;height:26px;min-width:86px;border-radius:999px;border:1.5px solid var(--acc);color:var(--acc);font-size:11.5px;font-weight:600;margin:2px 0 14px}
.pill span{position:absolute;inset:0;display:grid;place-items:center;white-space:nowrap;padding:0 12px}
.fl{position:relative;height:7px;margin-bottom:9px}
.fl .ln{position:absolute;left:0;top:0;right:0;margin:0}
.btop{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.btop b{font-size:12.5px}
.bseg{position:relative;margin-left:auto;display:flex;background:var(--tint);border-radius:8px;padding:2px}
.bseg span{position:relative;z-index:1;font-size:10.5px;padding:4px 9px;color:var(--mut);white-space:nowrap}
.bseg span.on{color:var(--ink);font-weight:600}
.bthumb{position:absolute;top:2px;bottom:2px;left:0;border-radius:6px;background:var(--bg);box-shadow:0 1px 2px rgba(10,14,30,.14)}
.bcols{position:relative;height:210px}
.bcol{position:absolute;top:0;width:45.5%}
.bcol small{display:block;font-size:9.5px;color:var(--faint);margin-bottom:8px}
/* Bilingual in the film: each paragraph's original opens beneath it (client/site/film.ts). */
.pob{height:0;opacity:0;overflow:hidden;padding-top:0}.pob>.ln:first-child{margin-top:5px}.pob .ln i{opacity:.5}
.pr{position:relative;padding:6px 6px 0;margin:0 -6px 4px;border-radius:7px}
.pr::before{content:'';position:absolute;inset:0;border-radius:7px;background:color-mix(in srgb,var(--pin) 26%,transparent);opacity:var(--h,0)}
.pr>*{position:relative}
.cur{position:absolute;left:0;top:0;width:18px;height:18px;z-index:5;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.curp{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid var(--pin);opacity:0;pointer-events:none;z-index:5}

/* ---------- small things ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.tile{border:1px solid var(--rule);border-radius:20px;padding:20px;background:var(--bg);display:flex;flex-direction:column;min-height:286px;
  transition:transform .5s cubic-bezier(.2,1,.3,1),box-shadow .5s,border-color .3s}
.tile:hover{transform:translateY(-5px);box-shadow:0 26px 50px -30px rgba(16,19,60,.42);border-color:color-mix(in srgb,var(--acc) 40%,var(--rule))}
.tile h3{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:16px;min-height:2.6em}
.demo{flex:1;position:relative;border-radius:13px;background:var(--bg2);padding:15px;overflow:hidden;display:flex;flex-direction:column}
.mbtn{position:relative;margin-top:auto;border-radius:10px;background:var(--acc);color:var(--acc-ink);font-size:13px;font-weight:600;padding:10px;overflow:hidden;
  transition:transform .3s cubic-bezier(.3,1.5,.4,1),filter .2s}
.mbtn:hover{transform:scale(1.03);filter:brightness(1.1)}
.mbtn:active{transform:scale(.96)}
.d1 .ln i{background:var(--ln)}
.d1 .rest{transition:none}
.d1 .rest .ln{opacity:.5;transform:translateY(5px);transition:opacity .5s,transform .6s cubic-bezier(.2,1.2,.3,1)}
.d1.open .rest .ln{opacity:1;transform:none}
.d1 .mveil{position:absolute;left:0;right:0;top:56px;bottom:0;background:linear-gradient(transparent,var(--bg2) 62%);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.d1.open .mveil{opacity:0;transform:translateY(40px)}
.d1 .mbtn{z-index:1}
.d1 .mbtn{transition:transform .5s cubic-bezier(.3,1.3,.4,1),opacity .4s}
.d1.open .mbtn{transform:translateY(60px);opacity:0}
.seg{position:relative;display:flex;background:var(--bg);border-radius:10px;padding:3px;margin-bottom:14px}
.seg button{position:relative;z-index:1;flex:1;font-size:12px;padding:7px 2px;color:var(--mut);transition:color .25s;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{color:var(--ink);font-weight:600}
.seg-th{position:absolute;top:3px;bottom:3px;left:0;border-radius:8px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--rule);
  transition:transform .5s cubic-bezier(.3,1.35,.4,1),width .5s cubic-bezier(.3,1.35,.4,1)}
.d2c{position:relative;flex:1}
.d2c>div{position:absolute;top:0;width:47%;transition:left .6s cubic-bezier(.3,1.2,.4,1),opacity .4s,transform .6s cubic-bezier(.3,1.2,.4,1)}
.code{border-radius:10px;background:#151a26;color:#c9d3ea;font:12px/1.7 ui-monospace,'SF Mono',Menlo,monospace;padding:34px 13px 12px;position:relative;flex:1}
.code::before{content:'';position:absolute;left:0;right:0;top:0;height:27px;border-bottom:1px solid #293044}
.cpy{position:absolute;right:7px;top:4px;display:flex;align-items:center;gap:5px;font:500 11px var(--sans);color:#9fb0d4;padding:3px 7px;border-radius:6px;transition:background .2s,color .2s}
.cpy:hover{background:#263048;color:#fff}
.cpy svg{width:12px;height:12px}
.cpy path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s .05s}
.cpy.done{color:#7ee0a3}.cpy.done path{stroke-dashoffset:0}
.hold{position:relative;margin-top:auto;border-radius:10px;border:1.5px solid var(--danger);color:var(--danger);font-size:12.5px;font-weight:600;padding:10px 8px;overflow:hidden;
  user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .2s}
.hold:hover{transform:scale(1.02)}
.hold i{position:absolute;inset:0;background:var(--danger);transform-origin:0 50%;transform:scaleX(0);opacity:.2}
.hold span{position:relative}
.hold.done{background:var(--danger);color:var(--bg)}
.d4 .who{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;transition:opacity .5s,transform .6s cubic-bezier(.5,0,.8,.4),filter .5s}
.d4.gone .who{opacity:0;transform:scale(.8) translateY(8px);filter:blur(6px)}

/* ---------- compare ---------- */
.cmp{margin-top:34px;border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:var(--bg)}
.cr{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;align-items:center;border-top:1px solid var(--rule);transition:background .25s}
.cr:first-child{border-top:0}
.cr:not(.ch0):hover{background:var(--bg2)}
.cr>div{padding:17px 18px;font-size:15px;line-height:1.4}
.cr>div:not(:first-child){text-align:center;color:var(--mut);font-size:14px}
.ch0>div{font-size:13.5px;font-weight:600;color:var(--mut)}
.ch0>div.us,.cr>div.us{color:var(--ink);background:color-mix(in srgb,var(--acc) 7%,transparent)}
.ch0>div.us{font-size:17px;font-weight:700;letter-spacing:-.02em}
.ck{width:22px;height:22px;vertical-align:middle}
.ck path{fill:none;stroke:var(--acc);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s cubic-bezier(.3,.8,.3,1)}
.cmp.in .ck path{stroke-dashoffset:0}
.cr.lead{position:relative;background:color-mix(in srgb,var(--acc) 7%,transparent)}
.cr.lead::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc);transform-origin:50% 0;transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.9,.2,1) .15s}
.cmp.in .cr.lead::before{transform:none}
.cr.lead>div{padding-top:24px;padding-bottom:24px}
.cr.lead b{display:block;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.cr.lead small{display:block;font-size:14.5px;color:var(--mut);margin-top:5px;line-height:1.45}
.cr.lead>div.us{background:color-mix(in srgb,var(--acc) 13%,transparent)}
.ckb{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--acc);vertical-align:middle;transform:scale(.4);opacity:0;transition:transform .7s cubic-bezier(.3,1.6,.4,1) .35s,opacity .3s .35s}
.ckb svg{width:22px;height:22px}
.ckb path{fill:none;stroke:var(--acc-ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s .7s}
.ckb::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--acc);opacity:0}
.cmp.in .ckb{transform:none;opacity:1}.cmp.in .ckb path{stroke-dashoffset:0}
.cmp.in .ckb::after{animation:ring 1.3s ease-out 1.1s 2}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@media (max-width:600px){.cr.lead b{font-size:16px}.cr.lead small{font-size:12.5px}.ckb{width:32px;height:32px}.ckb svg{width:18px;height:18px}}
@media (prefers-reduced-motion:reduce){.ckb,.ckb path,.cr.lead::before{transform:none;opacity:1;stroke-dashoffset:0}.cmp.in .ckb::after{animation:none}}
.no{display:inline-block;width:14px;height:2px;border-radius:1px;background:var(--faint);opacity:.6;vertical-align:middle}

/* ---------- pricing ---------- */
.prs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.prc{position:relative;border:1px solid var(--rule);border-radius:20px;padding:26px 24px;background:var(--bg);transition:transform .5s cubic-bezier(.2,1,.3,1),box-shadow .5s,border-color .3s}
.prc:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 30px 56px -32px rgba(16,19,60,.45);border-color:var(--acc)}
.prc.feat{border:2px solid var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--bg));box-shadow:0 24px 50px -34px color-mix(in srgb,var(--acc) 70%,transparent)}
.fchip{position:absolute;top:-13px;left:22px;padding:5px 12px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-size:12.5px;font-weight:600;white-space:nowrap}
.prc .q{font-size:15.5px;color:var(--mut);min-height:2.8em;line-height:1.4}
.prc .p{font-size:54px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:22px}
.kp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.kp-seg{position:relative;display:inline-flex;margin-top:28px;padding:4px;border-radius:999px;background:var(--bg2);border:1px solid var(--rule)}
.kp-seg button{position:relative;z-index:1;padding:8px 18px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--mut);transition:color .3s}
.kp-seg button[aria-pressed=true]{color:var(--ink)}
.kp-th{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--bg);box-shadow:0 1px 3px rgba(8,12,30,.18),0 0 0 1px var(--rule);transition:transform .55s cubic-bezier(.3,1.3,.4,1),width .55s cubic-bezier(.3,1.3,.4,1)}
.kp-stage{position:relative;height:350px;perspective:1400px}
.kp-page,.kp-pdf,.kp-md{position:absolute;transition:transform .9s cubic-bezier(.2,.9,.2,1),opacity .6s,filter .6s;will-change:transform}
.kp-page{inset:0 40px 30px 0;border-radius:18px;background:var(--bg);border:1px solid var(--rule);overflow:hidden;box-shadow:0 30px 60px -36px rgba(8,12,40,.55)}
.kp-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--rule)}
.kp-pill{font-size:12.5px;font-weight:500;padding:5px 12px;border-radius:999px;background:var(--bg2)}
.kp-ex{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--acc);border:1.5px solid color-mix(in srgb,var(--acc) 40%,transparent);transition:background .2s,transform .2s}
.kp-ex.press{background:color-mix(in srgb,var(--acc) 18%,transparent);transform:scale(.94)}
.kp-body{padding:22px 24px}
.kp-who{display:flex;align-items:center;gap:9px;font-size:13px}.kp-who i{font-style:normal;color:var(--mut)}
.kp-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--bg2);color:var(--mut)}
.kp-t{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin-top:14px}
.kp-hd{font-size:15.5px;font-weight:700;margin-top:16px}
.kp-p{font-size:14.5px;line-height:1.6;color:var(--ink);margin-top:7px;opacity:.9}
.kp-code{margin-top:12px;border-radius:9px;background:#151a26;color:#c9d3ea;font:12.5px/1 ui-monospace,'SF Mono',Menlo,monospace;padding:12px 14px}
.kp-pdf{left:56px;right:0;top:34px;bottom:0;background:#fff;color:#14161c;padding:28px 30px 44px;border-radius:4px;box-shadow:0 34px 70px -30px rgba(8,12,40,.6),0 2px 6px rgba(8,12,40,.12);--ink:#14161c;--mut:#5b6170;--bg2:#eef0f4}
.kp-pdf .kp-t{font-size:20px}
.kp-foot{position:absolute;left:30px;right:30px;bottom:16px;display:flex;justify-content:space-between;gap:12px;font-size:10.5px;color:#7a8090;border-top:1px solid #e4e6eb;padding-top:8px}
.kp-md{left:56px;right:0;top:34px;bottom:0;border-radius:14px;background:#151a26;color:#c9d3ea;padding:24px 26px;font:13px/1.65 ui-monospace,'SF Mono',Menlo,monospace;box-shadow:0 34px 70px -30px rgba(8,12,40,.7),inset 0 0 0 1px rgba(255,255,255,.07)}
.kp-md .m-s{color:#7f8db8}.kp-md .m-u{color:#8fa6ff}.kp-md .m-g{color:#9aa6c2}.kp-md .m-gap{margin-top:12px}
.kp-tag{position:absolute;right:14px;top:-12px;font:600 11.5px var(--sans);letter-spacing:.02em;padding:5px 10px;border-radius:999px;background:var(--acc);color:var(--acc-ink)}
.kp-stage .kp-pdf,.kp-stage .kp-md{opacity:0;transform:translateY(46px) rotateX(-8deg) scale(.96);pointer-events:none}
.kp-stage[data-s=pdf] .kp-pdf,.kp-stage[data-s=md] .kp-md{opacity:1;transform:none}
.kp-stage[data-s=pdf] .kp-page,.kp-stage[data-s=md] .kp-page{transform:translate(-10px,-12px) scale(.94);opacity:.45;filter:blur(1.5px) saturate(.7)}
.kp-x{position:absolute;left:56px;right:0;top:34px;bottom:0;border-radius:16px;background:var(--bg);border:1px solid var(--rule);padding:20px 20px 64px;box-shadow:0 34px 70px -30px rgba(8,12,40,.6);transition:transform .9s cubic-bezier(.2,.9,.2,1),opacity .6s;opacity:0;transform:translateY(46px) rotateX(-8deg) scale(.96);pointer-events:none}
.kp-xh{display:flex;gap:12px}.kp-xh .po-av{flex:0 0 auto}
.kp-xc{font-size:14px;line-height:1.5}
.kp-xm{color:var(--mut)}
.kp-xb{position:absolute;left:20px;right:20px;bottom:16px;display:flex;align-items:center;justify-content:flex-end;gap:14px;border-top:1px solid var(--rule);padding-top:12px}
.kp-xn{font-size:12.5px;color:var(--mut)}.kp-xp{padding:8px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px}
.kp-stage[data-s=x] .kp-x{opacity:1;transform:none}
.kp-stage[data-s=x] .kp-page{transform:translate(-10px,-12px) scale(.94);opacity:.45;filter:blur(1.5px) saturate(.7)}
@media (max-width:600px){.kp-x{left:18px;top:40px;padding:16px 16px 64px}.kp-xc{font-size:12.5px}.kp-seg button{padding:8px 12px;font-size:13.5px}}
.kp-stage[data-s=md] .kp-pdf{opacity:0;transform:translateY(-20px) scale(.97)}
@media (max-width:920px){.kp{grid-template-columns:1fr;gap:34px}.kp-stage{height:360px}}
@media (max-width:600px){.kp-stage{height:420px}.kp-page{right:14px}.kp-pdf,.kp-md{left:18px;top:40px}.kp-pdf{padding:22px 20px 40px}.kp-md{padding:20px;font-size:12px}.kp-t{font-size:19px}.kp-pdf .kp-t{font-size:17px}.kp-foot{left:20px;right:20px}}
@media (prefers-reduced-motion:reduce){.kp-page,.kp-pdf,.kp-md,.kp-th{transition:none}}
.kp-r{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.po-st{height:400px}
.po-ask,.po-ds,.po-post{position:absolute;transition:transform .8s cubic-bezier(.2,.9,.2,1),opacity .55s,filter .55s}
.po-ask{left:0;right:40px;top:110px;padding:24px;border-radius:18px;background:var(--bg);border:1px solid var(--rule);box-shadow:0 30px 60px -36px rgba(8,12,40,.55)}
.po-q{font-size:15px;font-weight:600}
.po-in{margin-top:12px;min-height:46px;display:flex;align-items:center;padding:0 14px;border-radius:12px;border:1.5px solid var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 15%,transparent);font-size:16px}
.po-caret{display:inline-block;width:2px;height:20px;background:var(--acc);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.po-gen{display:inline-flex;margin-top:16px;padding:10px 18px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font-weight:600;font-size:14.5px;transition:transform .2s}
.po-gen.press{transform:scale(.94)}
.po-ds{left:20px;right:0;top:0;bottom:0;display:flex;flex-direction:column;gap:10px;justify-content:center}
.po-d{position:relative;padding:14px 44px 14px 16px;border-radius:14px;background:var(--bg);border:1px solid var(--rule);font-size:14.5px;line-height:1.5;box-shadow:0 18px 40px -30px rgba(8,12,40,.6);opacity:0;transform:translateY(16px);transition:opacity .45s,transform .6s cubic-bezier(.2,.9,.2,1),border-color .3s,box-shadow .3s}
.po-l{color:var(--acc)}
.po-ck{position:absolute;right:14px;top:14px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rule);transition:background .3s,border-color .3s}
.po-d.on{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 15%,transparent),0 18px 40px -30px rgba(8,12,40,.6)}
.po-d.on .po-ck{background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--acc)}
.po-post{left:30px;right:10px;top:10px;padding:18px 20px;border-radius:18px;background:var(--bg);border:1px solid var(--rule);box-shadow:0 34px 70px -34px rgba(8,12,40,.65)}
.po-ph{display:flex;align-items:center;gap:10px;font-size:14.5px}
.po-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 70%,#fff),var(--acc))}
.po-pt{margin-top:10px;font-size:15px;line-height:1.55}
.po-card{margin-top:12px;border-radius:14px;border:1px solid var(--rule);overflow:hidden;background:#0c0f16;color:#eef1f7;padding:16px 18px}
.po-ct{font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.3}
.po-cm{margin-top:8px;font-size:12px;color:#98a2b5}
.po-x{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;transition:transform .2s}
.po-x.press{transform:scale(.94)}
.po-st .po-ds,.po-st .po-post{opacity:0;pointer-events:none}
.po-st .po-post{transform:translateY(40px) scale(.97)}
.po-st[data-s=drafts] .po-ask,.po-st[data-s=post] .po-ask{opacity:0;transform:translateY(-30px) scale(.96)}
.po-st[data-s=drafts] .po-ds{opacity:1}
.po-st[data-s=drafts] .po-d{opacity:1;transform:none}
.po-st[data-s=drafts] .po-d:nth-child(2){transition-delay:.12s}.po-st[data-s=drafts] .po-d:nth-child(3){transition-delay:.24s}
.po-st[data-s=post] .po-ds{opacity:0;transform:translateY(-24px) scale(.97)}
.po-st[data-s=post] .po-post{opacity:1;transform:none}
@media (max-width:920px){.kp.kp-r{grid-template-columns:1fr}.kp-r .kp-stage{order:2}.po-st{height:420px}}
.po-st[data-s=post] .po-ask,.po-st[data-s=drafts] .po-ask{pointer-events:none}
@media (max-width:600px){.po-st{height:470px}.po-ask{right:0;top:120px}.po-ds{left:0}.po-post{left:0;right:0}.po-d{font-size:13.5px}.po-pt{font-size:14px}}
@media (prefers-reduced-motion:reduce){.po-ask,.po-ds,.po-post,.po-d{transition:none}.po-caret{animation:none}}
.psh{font-size:15px;color:var(--mut);margin-top:20px}
.never{font-size:14px;color:var(--faint);margin-top:18px}

/* ---------- faq ---------- */
.faq{margin-top:28px;border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;width:100%;text-align:left;align-items:center;gap:16px;padding:22px 4px;font-size:19px;font-weight:600;letter-spacing:-.01em;transition:color .2s,padding .4s cubic-bezier(.2,1,.3,1)}
.qa summary:hover{color:var(--acc);padding-left:12px}
.qa .pl{margin-left:auto;width:18px;height:18px;position:relative;flex:0 0 auto}
.qa .pl::before,.qa .pl::after{content:'';position:absolute;left:0;top:8px;width:18px;height:2px;border-radius:1px;background:currentColor;transition:transform .5s cubic-bezier(.3,1.4,.4,1)}
.qa .pl::after{transform:rotate(90deg)}
.qa[open] .pl::after{transform:rotate(0)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,1,.3,1)}
.qa[open] .ans{grid-template-rows:1fr}
.qa .ans>div{overflow:hidden}
.qa .ans p{font-size:16.5px;line-height:1.65;color:var(--mut);padding:0 4px 24px;max-width:44em}


@media (max-width:920px){
  .hero{padding-top:40px}.hero-g{grid-template-columns:minmax(0,1fr);gap:20px}h1{margin-top:44px}
  .tiles{grid-template-columns:1fr 1fr}.marq-in{font-size:76px}
}
@media (max-width:600px){
  .wrap{padding:0 18px}.tiles,.prs{grid-template-columns:1fr}
  .cr{grid-template-columns:1.5fr .8fr .8fr .8fr}.cr>div{padding:13px 8px;font-size:13px}.cr>div:not(:first-child){font-size:11.5px}
  .ch0>div.us{font-size:14px}.spec{padding:26px 20px 22px}.spec p{font-size:16.5px}
  section{padding:52px 0}.qa summary{list-style:none;cursor:pointer;font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .ch,.ghost .ch{animation:none!important}.marq-in,.mark::after{animation:none}
  *{transition-duration:.01ms!important}
}

/* ---------- the product's own pieces on this page ---------- */
.sc-trick{margin-top:20px;font-size:14.5px;color:var(--mut)}
.offer-in form{display:contents}
.qa summary::-webkit-details-marker{display:none}
.lbtn [data-language-name],.into [data-language-name]{font-weight:500}
.into b[data-language-name]{font-weight:600;color:var(--ink)}
/* The film's six steps are the words of the film. The film says them, so its place is held from the first
   paint and the list is there for screen readers and search (spec/motion.md, Loading); without the script
   the list is shown in its place (src/ui/site.ts, NO_FILM). */
.film-steps{list-style:none;margin-top:28px;display:grid;gap:14px;counter-reset:step}
.film-steps li{font-size:16.5px;color:var(--mut);line-height:1.5}
.film-steps b{color:var(--ink);font-size:20px;margin-inline-end:8px}
.film-steps{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
/* The footer at the page's width, as the preview's. */
.site-footer{padding-inline:max(24px,calc((100% - 1160px) / 2 + 24px))}
@media (max-width:600px){.site-footer{padding-inline:18px}}
.lrun{display:inline-block;white-space:nowrap}
/* On a phone the headline stays the largest thing painted (spec/search.md), French's longer lede included. */
@media (max-width:600px){h1{font-size:max(44px,6.1vw)}}

/* The paste box's wait, under it (client/wait.ts). */
.paste + .wait-line{max-width:500px;text-align:start;margin:0}
/* While it shows, it takes the place of the line under the box, so nothing below moves. */
.paste + .wait-line:not([hidden]) + .free{display:none}
.paste + .wait-line{font-size:13.5px;color:var(--faint);margin-top:13px}