@font-face{font-family:"Anton";src:url("../fonts/anton.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}
html{-webkit-text-size-adjust:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:8px}
.skip:focus{left:12px}
/* Layout: cinematic monochrome — giant condensed wordmark behind the designer cutout under a spotlight beam; sections follow the 8-stage process */
:root {
  --paper:#F4F4F2; --surface:#FFFFFF; --ink:#0F0F0F; --muted:#61615D; --line:#DEDEDA; --grid:#C4C4BF;
  --accent:#0F0F0F; --accent-ink:#FFFFFF; --soft:#EAEAE6; --tile:#FFFFFF;
  --display:"Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --ui:"Inter", system-ui, sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --mega:#D3D3CE; --beam:rgba(0,0,0,.045); --glow:transparent;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#0C0C0C; --surface:#161616; --ink:#F2F2EF; --muted:#9A9A95; --line:#2A2A28; --grid:#3A3A37;
  --accent:#F2F2EF; --accent-ink:#0C0C0C; --soft:#222220; --tile:#F2F2EF; --mega:#F2F2EF; --beam:rgba(255,255,255,.085); --glow:rgba(255,255,255,.28); color-scheme:dark; } }
:root[data-theme="dark"] {
  --paper:#0C0C0C; --surface:#161616; --ink:#F2F2EF; --muted:#9A9A95; --line:#2A2A28; --grid:#3A3A37;
  --accent:#F2F2EF; --accent-ink:#0C0C0C; --soft:#222220; --tile:#F2F2EF; --mega:#F2F2EF; --beam:rgba(255,255,255,.085); --glow:rgba(255,255,255,.28); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before { animation:none!important; transition:none!important; } }
body { background:var(--paper); color:var(--ink); font:16px/1.6 var(--body); }
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--paper); }
a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); }
h1,h2,h3 { text-wrap:balance; margin:0; }
h1,h2 { font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; }
h2 { font-size:clamp(36px,5.6vw,68px); line-height:.98; }
h3 { font-family:var(--ui); font-weight:700; letter-spacing:-.01em; }
p { margin:0; }
.eyebrow { font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.lead { color:var(--muted); font-size:18px; max-width:60ch; }
section { padding-block:clamp(64px,9vw,112px); }
.shead2 { display:grid; gap:14px; margin-bottom:40px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* nav */
header.nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(12px); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand .bm { height:30px; width:auto; } .brand .bw { height:15px; width:auto; }
.brand .co { font:700 13px/1 var(--mono); letter-spacing:.06em; margin-left:-4px; }
.nact { display:flex; align-items:center; gap:10px; }
.tgl { position:relative; width:58px; height:30px; border-radius:999px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; padding:0; }
.tgl .knob { position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:var(--ink); display:grid; place-items:center; transition:transform .25s cubic-bezier(.3,1.4,.5,1); }
:root[data-dark] .tgl .knob { transform:translateX(28px); }
.tgl svg { width:13px; height:13px; fill:none; stroke:var(--paper); stroke-width:2.2; stroke-linecap:round; }
.tgl .moon { fill:var(--paper); stroke:none; }
.tgl .moon, :root[data-dark] .tgl .sun { display:none; }
:root[data-dark] .tgl .moon { display:block; }
.tlab { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:520px) { .brand .bw { height:12px; } .brand .co { display:none; } }
.nav ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:14px; font-weight:500; }
.nav ul a { text-decoration:none; color:var(--ink); opacity:.72; } .nav ul a:hover { opacity:1; }
.nav ul a:hover { color:var(--ink); }
@media (max-width:820px) { .nav ul { display:none; } }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/1 var(--body); padding:14px 22px; border-radius:999px; text-decoration:none; border:1.5px solid var(--ink); cursor:pointer; background:transparent; color:var(--ink); transition:transform .15s, background .15s; }
.btn:hover { transform:translateY(-1px); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.dark { background:var(--ink); color:var(--paper); }
.btn.sm { padding:10px 16px; font-size:14px; }

/* hero */
.hero { position:relative; overflow:hidden; padding-block:0; height:clamp(560px, 64vw, 800px); isolation:isolate; }
.beam { position:absolute; inset:0; z-index:-1; background:
   linear-gradient(118deg, transparent 38%, var(--beam) 46%, var(--beam) 58%, transparent 66%),
   radial-gradient(60% 50% at 50% 42%, var(--beam), transparent 70%); }
.mega { position:absolute; left:0; right:0; top:clamp(150px, 21vw, 290px); text-align:center; font-family:var(--display); font-weight:400; text-transform:uppercase;
   font-size:clamp(118px, 30vw, 430px); line-height:.82; letter-spacing:.01em; color:var(--mega); text-shadow:0 0 60px var(--glow); margin:0; white-space:nowrap; z-index:0; animation:megaIn 1.1s cubic-bezier(.2,.8,.2,1) both; }
.person { position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:94%; width:auto; max-width:none; z-index:1;
   -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent); mask-image:linear-gradient(to bottom, #000 82%, transparent); filter:contrast(1.05); animation:personIn 1.2s .1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes megaIn { from { opacity:0; letter-spacing:.08em; } }
@keyframes personIn { from { opacity:0; transform:translate(-50%, 24px); } }
.hcap { position:absolute; z-index:2; left:0; right:0; top:calc(clamp(150px, 21vw, 290px) + clamp(118px, 30vw, 430px)*.86); }
.hcap .wrap { display:flex; justify-content:space-between; gap:16px; font-weight:500; font-size:clamp(14px,1.4vw,17px); }
.hfoot { position:absolute; z-index:2; left:0; right:0; bottom:28px; }
.hfoot .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.soc { display:flex; gap:10px; }
.soc a, .soc button { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--ink); color:var(--ink); background:color-mix(in srgb, var(--paper) 60%, transparent); cursor:pointer; padding:0; }
.soc svg { width:17px; height:17px; fill:currentColor; }
.hlink { font-size:14px; font-weight:500; text-decoration:none; background:color-mix(in srgb, var(--paper) 60%, transparent); padding:8px 12px; border-radius:99px; }
@media (max-width:700px) { .hcap { top:auto; bottom:84px; } .hcap .wrap { font-size:12px; } .hcap span { background:color-mix(in srgb, var(--paper) 75%, transparent); padding:6px 10px; border-radius:99px; backdrop-filter:blur(6px); } .hlink { display:none; } .person { height:84%; } .mega { top:150px; } }
/* intro */
.intro .wrap { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:48px; align-items:end; }
.intro h1 { font-size:clamp(44px,6.6vw,92px); line-height:.94; }
.intro h1 em { font-style:normal; color:transparent; -webkit-text-stroke:2px var(--ink); }
.intro .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.facts { display:flex; flex-wrap:wrap; gap:28px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.facts div { display:grid; gap:2px; }
.facts b { font:400 40px/1 var(--display); font-variant-numeric:tabular-nums; }
.facts span { font-size:13px; color:var(--muted); }
@media (max-width:820px) { .intro .wrap { grid-template-columns:1fr; } }
/* about */
.about .wrap { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:56px; align-items:center; }
.about figure { margin:0; position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:864/1090; max-width:100%; background:#111; }
.about figure img { width:100%; height:100%; object-fit:cover; display:block; }
.about figcaption { position:absolute; left:18px; bottom:16px; right:18px; color:#F2F2EF; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; display:flex; justify-content:space-between; }
.about .txt { display:grid; gap:18px; }
.about .sig { display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--line); }
.about .sig .bm { height:44px; width:auto; color:var(--ink); }
.about .sig b { display:block; font-size:16px; } .about .sig span { color:var(--muted); font-size:14px; }
.vals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.vals div { border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--surface); }
.vals b { font:400 26px/1 var(--display); display:block; margin-bottom:6px; }
.vals span { font-size:13px; color:var(--muted); }
@media (max-width:860px) { .about .wrap { grid-template-columns:1fr; } .about figure { max-width:440px; } }
@media (max-width:480px) { .vals { grid-template-columns:1fr; } }

/* types */
.types { background:var(--surface); border-block:1px solid var(--line); }
.ltiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:980px) { .ltiles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .ltiles { grid-template-columns:1fr; } }
.ltile { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper); }
.lart { background:var(--tile); aspect-ratio:240/140; max-width:100%; border-bottom:1px solid var(--line); }
.lart svg { width:100%; height:100%; display:block; }
.lmeta { padding:16px 18px 20px; display:grid; gap:6px; min-width:0; }
.lno { font:500 11px var(--mono); color:var(--accent); }
.lmeta h3 { font-size:19px; }
.lalias { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:-4px; }
.lmeta p { font-size:14px; color:var(--muted); }
.lfit { font-size:13px!important; padding-top:8px; border-top:1px dashed var(--line); }
.lfit b, .lreal b { color:var(--ink); font-weight:600; }
.lreal { font-size:13px!important; padding:8px 10px; margin-top:4px; background:var(--soft); border-radius:8px; color:var(--ink)!important; }
.lreal b { display:block; font:500 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }

/* process */
.proc-grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:56px; align-items:start; }
.proc-side { position:sticky; top:calc(env(safe-area-inset-top,0px) + 96px); display:grid; gap:18px; }
.rule { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; gap:10px; font-size:14px; }
.rule b { font-family:var(--ui); font-size:16px; }
.rule ul { margin:0; padding-left:18px; color:var(--muted); display:grid; gap:6px; }
.pay { display:flex; height:10px; border-radius:99px; overflow:hidden; }
.pay i { flex:1; background:var(--accent); } .pay i + i { background:var(--ink); }
.paylab { display:flex; justify-content:space-between; font:500 12px var(--mono); color:var(--muted); }
ol.stages { list-style:none; margin:0; padding:0; display:grid; }
.stage { display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; position:relative; padding-bottom:34px; }
.stage::before { content:""; position:absolute; left:23px; top:50px; bottom:4px; border-left:1.5px dashed var(--grid); }
.stage:last-child { padding-bottom:0; } .stage:last-child::before { display:none; }
.snum { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font:500 14px var(--mono); border:1.5px solid var(--ink); background:var(--paper); }
.stage:last-child .snum { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.sbody { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; display:grid; gap:14px; min-width:0; }
.shead { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.shead h3 { font-size:22px; }
.sdur { font:500 12px var(--mono); color:var(--muted); background:var(--paper); border:1px solid var(--line); padding:5px 10px; border-radius:99px; }
.scols { display:grid; grid-template-columns:1fr 1fr; gap:18px; font-size:14.5px; color:var(--muted); }
.who { display:inline-block; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:4px; }
.who.studio { color:var(--accent); }
.sout { font-size:14px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding-top:12px; border-top:1px dashed var(--line); }
.sout span { font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px) { .proc-grid { grid-template-columns:1fr; } .proc-side { position:static; } }
@media (max-width:560px) { .scols { grid-template-columns:1fr; } .stage { grid-template-columns:48px minmax(0,1fr); gap:12px; } .snum { width:40px; height:40px; } .stage::before { left:19px; top:44px; } }

/* files */
.files, footer { --accent:var(--paper); --accent-ink:var(--ink); }
.files { background:var(--ink); color:var(--paper); }
.files .lead { color:color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.fgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:color-mix(in srgb, var(--paper) 18%, var(--ink)); border:1px solid color-mix(in srgb, var(--paper) 18%, var(--ink)); border-radius:var(--r); overflow:hidden; }
.ffile { background:var(--ink); padding:26px; display:grid; gap:6px; }
.fext { font:500 13px var(--mono); color:var(--accent); }
.ffile b { font:700 20px var(--ui); }
.ffile p { font-size:14px; color:color-mix(in srgb, var(--paper) 65%, var(--ink)); }
@media (max-width:820px) { .fgrid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .fgrid { grid-template-columns:1fr; } }

/* packs */
.packs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
@media (max-width:900px) { .packs { grid-template-columns:1fr; max-width:520px; } }
.pack { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; display:grid; gap:14px; position:relative; }
.pack.best { border:2px solid var(--accent); }
.pack .tag { position:absolute; top:-12px; left:24px; background:var(--accent); color:var(--accent-ink); font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:99px; }
.pack h3 { font-size:28px; }
.pdesc { color:var(--muted); font-size:14.5px; }
.pack ul { list-style:none; margin:4px 0 8px; padding:0; display:grid; gap:9px; font-size:15px; }
.pack li { display:flex; gap:10px; }
.pack li::before { content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:2px; background:var(--accent); transform:rotate(45deg); }
.pnote { margin-top:22px; color:var(--muted); font-size:14px; }

/* brief */
.brief { background:var(--surface); border-block:1px solid var(--line); }
.bgrid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:start; }
@media (max-width:960px) { .bgrid { grid-template-columns:1fr; } }
.steps-nav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.steps-nav button { font:500 13px var(--body); padding:9px 14px; border-radius:99px; border:1px solid var(--line); background:var(--paper); color:var(--muted); cursor:pointer; }
.steps-nav button[aria-current="step"] { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.steps-nav button.done { color:var(--ink); border-color:var(--ink); }
.steps-nav button[aria-current="step"].done { color:var(--paper); }
fieldset { border:0; padding:0; margin:0; display:grid; gap:20px; min-width:0; }
legend { font:700 24px var(--ui); margin-bottom:6px; padding:0; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px) { .row2 { grid-template-columns:1fr; } }
.fld { display:grid; gap:7px; min-width:0; }
.fld > label, .fld > .lab { font-weight:600; font-size:14px; }
.fld small { color:var(--muted); font-weight:400; }
.req { color:var(--accent); }
input[type=text], input[type=tel], input[type=email], textarea, select { width:100%; font:15px/1.5 var(--body); color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; }
textarea { min-height:96px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip span { display:inline-flex; align-items:center; gap:8px; font-size:14px; padding:8px 14px; border:1.5px solid var(--line); border-radius:99px; cursor:pointer; background:var(--paper); }
.chip input:checked + span { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.cchip i { width:14px; height:14px; border-radius:50%; border:1px solid var(--line); }
.rng { display:grid; grid-template-columns:96px minmax(0,1fr) 96px; gap:12px; align-items:center; font-size:14px; }
.rng span:last-child { text-align:right; }
.rng input { accent-color:var(--accent); width:100%; }
.bnav { display:flex; justify-content:space-between; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }
.err { color:var(--accent); font-size:14px; font-weight:500; }
.aside { position:sticky; top:calc(env(safe-area-inset-top,0px) + 96px); background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:grid; gap:14px; }
.aside h3 { font-size:18px; }
.prog { height:6px; background:var(--line); border-radius:99px; overflow:hidden; }
.prog i { display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }
.aside dl { margin:0; display:grid; gap:10px; font-size:14px; }
.aside dt { font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.aside dd { margin:2px 0 0; overflow-wrap:anywhere; }
.saved { font-size:12px; color:var(--muted); }
@media (max-width:960px) { .aside { position:static; } }
.done-box { display:grid; gap:16px; }
.done-box pre { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.6 var(--mono); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:16px; max-height:340px; overflow:auto; margin:0; }
.done-acts { display:flex; gap:10px; flex-wrap:wrap; }
.toast { font-size:14px; color:var(--muted); }

/* faq + footer */
.faq-grid { display:grid; grid-template-columns:320px minmax(0,1fr); gap:48px; }
@media (max-width:900px) { .faq-grid { grid-template-columns:1fr; } }
details { border-bottom:1px solid var(--line); padding-block:18px; }
details:first-child { border-top:1px solid var(--line); }
summary { cursor:pointer; font:700 18px var(--ui); list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-family:var(--mono); color:var(--accent); }
details[open] summary::after { content:"−"; }
details p { margin-top:10px; color:var(--muted); max-width:62ch; }
footer { background:var(--ink); color:var(--paper); }
.contacts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:640px) { .contacts { grid-template-columns:1fr; } }
.ct { border:1px solid color-mix(in srgb, var(--paper) 18%, var(--ink)); border-radius:var(--r); padding:20px; display:grid; gap:6px; min-width:0; }
.ctl { font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.ctv { font:700 22px var(--ui); overflow-wrap:anywhere; user-select:all; }
.cta2 { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.btn.inv { color:var(--paper); border-color:color-mix(in srgb, var(--paper) 45%, var(--ink)); }
footer .wrap { padding-block:56px; display:grid; gap:28px; }
.ftop { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; }
.ftop h2 { font-size:clamp(28px,4vw,44px); max-width:16ch; }
.fbot { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font:500 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 60%, var(--ink)); border-top:1px solid color-mix(in srgb, var(--paper) 18%, var(--ink)); padding-top:22px; }
.fbot .brand { color:var(--paper); } .fbot .brand .bm { height:34px; } .fbot .brand .bw { height:16px; }
/* utilities */
[data-u="u1"]{margin-top:14px}
[data-u="u2"]{font-size:17px}
[data-u="u3"]{margin:0}
[data-u="u4"]{font-size:16px}
[data-u="u5"]{background:#D63031}
[data-u="u6"]{background:#F2711C}
[data-u="u7"]{background:#F6C23E}
[data-u="u8"]{background:#2E8B57}
[data-u="u9"]{background:#16A3A3}
[data-u="u10"]{background:#1F5FAD}
[data-u="u11"]{background:#6C3FB5}
[data-u="u12"]{background:#E86A92}
[data-u="u13"]{background:#7A4E2D}
[data-u="u14"]{background:#C3A26A}
[data-u="u15"]{background:#141414}
[data-u="u16"]{background:#9A958E}
[data-u="u17"]{font:700 24px var(--ui)}
[data-u="u18"]{justify-self:start}
[data-u="u19"]{color:color-mix(in srgb, var(--paper) 65%, var(--ink))}
.e404{min-height:100vh;display:grid;align-content:center;justify-items:start;gap:18px;max-width:720px;margin:0 auto;padding:48px max(16px,env(safe-area-inset-left,0px))}
.e404 h1{font-size:clamp(48px,9vw,110px);line-height:.92}

/* app additions */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.alert-err{background:var(--soft);border:1.5px solid var(--ink);border-radius:10px;padding:12px 14px;font-weight:500;margin:0 0 18px}
.sent{min-height:100vh;max-width:640px;margin:0 auto;display:grid;align-content:center;justify-items:start;gap:16px;padding:48px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}
.sent h1{font-size:clamp(56px,11vw,120px);line-height:.9}
.sent-mark svg{height:44px;width:auto;color:var(--ink);display:block}
.sent-code{font:500 clamp(22px,4vw,30px)/1 var(--mono);letter-spacing:.06em;padding:14px 18px;border:1.5px dashed var(--ink);border-radius:12px;user-select:all}
.sent-step{display:grid;gap:12px;justify-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;width:100%}
.done-box button[disabled]{opacity:.6;cursor:progress}