@font-face{font-family:"Space Grotesk";src:url(/fonts/SpaceGrotesk-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/Bricolage-latin.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/InstrumentSans-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Martian Mono";src:url(/fonts/MartianMono-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{--k1:#2FCBEE;--k2:#D4FF3A;--bg:#060A0B;--tile:#10181B;--tile2:#192428;--line:#1F2B2F;--ink:#EEF4F3;--ink2:#B7C4C5;--ink3:#8D9C9E;--lime:#D4FF3A;--on:#0A1214;--yes:#5AD8F3;--no:#FF8466;--aqua:#2FCBEE;--amber:#FFB938;--coral:#FF7A5C;--sh:0 24px 60px -20px rgba(0,0,0,.7)}
@media (prefers-color-scheme:light){:root{--k1:#00799A;--k2:#7DA600;--bg:#EEF1F0;--tile:#FFFFFF;--tile2:#E4E9E8;--line:#D8DFDE;--ink:#0A1214;--ink2:#33403F;--ink3:#53625F;--yes:#006B87;--no:#C53A22;--aqua:#00799A;--amber:#E39A00;--coral:#D9452B;--sh:0 24px 50px -24px rgba(10,18,20,.28)}}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.45 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:20px 20px 28px;display:grid;gap:8px}
.top{display:flex;justify-content:space-between;align-items:center;height:44px}
.wm{display:flex;align-items:center;gap:2px;text-decoration:none;font:600 24px/1 "Space Grotesk",sans-serif;letter-spacing:-.03em}
.wm svg{width:1em;height:1.08em;color:var(--ink)}
.chip{font:600 11px/1 "Martian Mono",monospace;letter-spacing:.06em;background:var(--lime);color:var(--on);padding:7px 10px;border-radius:7px}
/* stage of UI fragments */
.stage{position:relative;height:360px;margin:10px -20px 4px;overflow:hidden;-webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.card{position:absolute;background:var(--tile);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:14px;overflow:hidden}
.q{width:250px;left:calc(50% - 150px);top:24px;transform:rotate(-4deg)}
.q .band{height:118px;border-radius:14px;background:url(/img/stage.jpg) center/cover;position:relative}
.q .band:after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(transparent 40%,rgba(6,10,11,.55))}
.tag{position:absolute;left:10px;top:10px;z-index:1;width:54px;height:20px;border-radius:6px;background:var(--lime)}
.sk{height:11px;border-radius:6px;background:var(--tile2);margin-top:9px}
.sk.a{width:92%;margin-top:14px}.sk.b{width:64%}
.pct{display:flex;align-items:baseline;gap:6px;margin-top:12px;font:700 38px/1 "Bricolage Grotesque";letter-spacing:-.04em}
.pct small{font:500 10px "Martian Mono",monospace;color:var(--ink3);letter-spacing:.04em}
.yn{display:flex;gap:8px;margin-top:12px}
.yn b{flex:1;text-align:center;padding:11px 0;border-radius:12px;font:700 14px "Instrument Sans"}
.yes{background:var(--yes);color:var(--on)}.no{background:var(--no);color:var(--on)}
.score{width:170px;right:calc(50% - 190px);top:150px;background:var(--lime);border-color:transparent;color:var(--on);transform:rotate(5deg)}
.score .l{font:600 10px "Martian Mono",monospace;letter-spacing:.06em}
.score .v{font:800 46px/1 "Bricolage Grotesque";letter-spacing:-.05em;margin-top:6px;filter:blur(5px)}
.score svg{display:block;margin-top:8px;width:100%;height:40px}
.acc{width:190px;left:calc(50% - 200px);top:250px;transform:rotate(3deg)}
.bar{display:flex;align-items:center;gap:8px;margin:7px 0}
.bar i{display:block;height:8px;border-radius:4px}
.bar .t{flex:1;height:8px;border-radius:4px;background:var(--tile2);overflow:hidden}
.bar .t i{height:100%}
.ring{width:96px;right:calc(50% - 175px);top:12px;transform:rotate(-7deg);padding:12px}
.ring svg{display:block;width:100%}
/* hero copy */
h1{font:700 clamp(52px,15vw,124px)/1.02 "Bricolage Grotesque",sans-serif;letter-spacing:-.045em;margin-top:2px}
h1 span{background:var(--lime);color:var(--on);padding:0 .12em;border-radius:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sub{color:var(--ink2);font-size:17px;max-width:34ch;margin-top:14px}
form{display:flex;gap:8px;margin-top:20px;max-width:480px}
input[type=email]{flex:1;min-width:0;font:inherit;font-size:16px;padding:15px 14px;border-radius:14px;border:1px solid var(--line);background:var(--tile);color:var(--ink)}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
button{font:700 15px "Instrument Sans";padding:0 18px;border-radius:14px;border:0;background:var(--lime);color:var(--on);white-space:nowrap;cursor:pointer}
button:disabled{opacity:.7}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fine{min-height:20px;margin-top:10px;font-size:14px;color:var(--ink3)}.fine.ok{color:var(--aqua)}.fine.err{color:var(--coral)}
footer{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font:500 11px "Martian Mono",monospace;color:var(--ink3);letter-spacing:.03em}
footer a{text-decoration:none;padding:4px 0}footer a:hover{color:var(--ink)}
@media (min-width:900px){
 .wrap{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;align-items:center;min-height:100vh;padding:32px 48px}
 .top{grid-column:1/-1}
 .hero{grid-row:2}
 .stage{grid-column:2;grid-row:2;height:600px;margin:0;-webkit-mask:none;mask:none;overflow:visible}
 .q{width:320px;top:40px;left:calc(50% - 200px)}.q .band{height:160px}
 .score{width:210px;top:260px;right:calc(50% - 240px)}
 .acc{width:240px;top:400px;left:calc(50% - 250px)}
 .ring{width:120px;top:20px;right:calc(50% - 230px)}
}
@media (prefers-reduced-motion:no-preference){.card{animation:fl 7s ease-in-out infinite alternate}.score{animation-delay:-2s}.acc{animation-delay:-4s}.ring{animation-delay:-5s}
 @keyframes fl{to{translate:0 -8px}}}
/* ===== v4 refinement ===== */
:root{--r:24px;--r2:14px;--sh:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px rgba(0,0,0,.35),0 18px 40px -12px rgba(0,0,0,.55),0 50px 90px -40px rgba(0,0,0,.7)}
@media (prefers-color-scheme:light){:root{--sh:0 1px 2px rgba(10,18,20,.06),0 10px 24px -10px rgba(10,18,20,.14),0 40px 70px -36px rgba(10,18,20,.22)}}
.mono{font-family:"Martian Mono",monospace;font-size:10px;letter-spacing:.06em}.dim{color:var(--ink3)}
.wrap{padding:22px 24px 32px;gap:0}
.top{height:48px}
.stage{height:430px;margin:18px -24px 8px;-webkit-mask:none;mask:none}
.card{border-radius:var(--r);padding:12px;box-shadow:var(--sh);border:1px solid var(--line);animation:none}
.q{width:236px;left:24px;top:8px;transform:rotate(-2.5deg)}
.q .band{height:128px;border-radius:var(--r2);background:url(/img/stage.jpg) 50% 45%/cover;filter:saturate(.85) contrast(1.05)}
.q .band:after{border-radius:var(--r2);background:linear-gradient(180deg,rgba(6,10,11,.05) 30%,rgba(6,10,11,.6));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tag{width:auto;height:auto;display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:6px;font:600 9px "Martian Mono";letter-spacing:.08em;color:var(--on);left:8px;top:8px}
.tag i{width:5px;height:5px;border-radius:50%;background:var(--on)}
.tagr{position:absolute;right:9px;top:9px;z-index:1;font:500 9px "Martian Mono";color:#EEF4F3;opacity:.8;letter-spacing:.06em}
.qb{padding:4px 4px 2px}
.sk{height:8px;border-radius:4px;opacity:.9}.sk.a{width:88%;margin-top:12px}.sk.b{width:58%;margin-top:7px}
.row{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.pct{margin:0;font:700 40px/1 "Bricolage Grotesque";letter-spacing:-.045em}.pct span{font-size:.5em;margin-left:1px;color:var(--ink2)}
.split{height:4px;border-radius:2px;background:var(--no);margin-top:10px;overflow:hidden;display:flex}.split i{background:var(--yes);border-right:2px solid var(--tile)}
.yn{margin-top:10px;gap:6px}.yn b{padding:9px 0;border-radius:10px;font:700 12px "Instrument Sans";letter-spacing:.02em}.yn em{font-style:normal;font-family:"Martian Mono";font-weight:500;font-size:11px;margin-left:4px;opacity:.8}
.cal{width:210px;right:20px;left:auto;top:132px;background:var(--lime);color:var(--on);border-color:rgba(10,18,20,.08);transform:rotate(2deg);padding:14px 14px 12px}
.cal header,.tr header{display:flex;justify-content:space-between;align-items:center;font:600 10px "Martian Mono";letter-spacing:.08em}
.cal header .mono{font-weight:400;font-size:9px;letter-spacing:.02em;opacity:.7}
.calsvg{display:block;width:100%;margin-top:10px;overflow:visible}
.calsvg .gl{stroke:rgba(10,18,20,.12);stroke-width:.6}.calsvg .fr{fill:none;stroke:rgba(10,18,20,.35);stroke-width:.8}
.calsvg .ref{stroke:#0A1214;stroke-width:.9;stroke-dasharray:3 3;opacity:.6}.calsvg .cl{fill:none;stroke:#0A1214;stroke-width:1.4;stroke-linejoin:round}
.calsvg .dt{fill:var(--lime);stroke:#0A1214;stroke-width:1.3}.calsvg .hd{fill:#0A1214;stroke:var(--lime);stroke-width:1.6}
.calsvg .tk{stroke:rgba(10,18,20,.5);stroke-width:.8}.calsvg text{font:500 7px "Martian Mono";fill:rgba(10,18,20,.65)}
.cal footer{display:flex;gap:14px;margin-top:6px;font:500 9px "Martian Mono";letter-spacing:.03em;opacity:.8}
.lg{display:inline-block;vertical-align:middle;margin-right:5px}.lg.d{width:7px;height:7px;border-radius:50%;border:1.3px solid #0A1214}.lg.r{width:12px;border-top:1px dashed #0A1214}
.tr{width:180px;left:44px;top:292px;transform:rotate(-1deg);padding:12px 14px}
.tr .up{color:var(--aqua);font-size:9px}.tr svg{display:block;width:100%;height:54px;margin-top:10px}
.ax{display:flex;justify-content:space-between;margin-top:6px;font-size:8px}
h1{font-size:clamp(54px,15.5vw,128px);line-height:1.02;letter-spacing:-.05em}
h1 span{padding:0 .1em .02em;border-radius:.16em;margin-left:-.06em}
.sub{font-size:17px;line-height:1.45;margin-top:18px;max-width:32ch}
form{margin-top:24px}input[type=email],button{height:52px;border-radius:var(--r2)}
input[type=email]{box-shadow:0 1px 0 rgba(0,0,0,.04) inset}
.note{margin-top:12px}.fine{margin-top:4px;min-height:18px}
footer.f,.hero>footer{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);gap:6px 22px}
@media (min-width:900px){
 .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding:36px 64px 40px;column-gap:40px}
 .hero{padding-bottom:20px}
 .stage{height:620px;margin:0}
 .q{width:330px;left:auto;right:150px;top:30px}.q .band{height:180px}.pct{font-size:52px}
 .cal{width:270px;right:0;top:250px}
 .tr{width:230px;left:auto;right:330px;top:430px}
 .sub{font-size:19px}
}
.pct span{margin-left:-1px}
.stage{height:372px}
.q{width:226px;left:20px;top:6px}.q .band{height:112px}.pct{font-size:36px}
.cal{width:192px;right:16px;top:150px}
.tr{width:168px;left:34px;top:262px}
@media (min-width:900px){
 h1{font-size:104px}
 .stage{height:620px}
 .q{width:320px;right:180px;left:auto;top:40px}.q .band{height:176px}.pct{font-size:50px}
 .cal{width:264px;right:0;top:300px}
 .tr{width:224px;left:auto;right:360px;top:440px}
}
@media (max-width:899px){.tr{display:none}.cal header .mono{display:none}.stage{height:350px}.q{width:236px;left:18px;top:4px}.cal{width:184px;right:18px;top:132px}}
@media (max-width:899px){.stage{overflow:visible}.q{left:40px}.cal{right:40px}}
.cal footer{gap:10px;white-space:nowrap}
/* v4.1 finish */
@media (prefers-color-scheme:light){:root{--yes:#7FD6EC;--no:#FF9478}}
@media (max-width:899px){.stage{height:500px;margin-top:26px}.q{left:28px;top:10px}.cal{right:28px;top:262px}}
@media (min-width:900px){.cal{top:396px}.tr{top:520px;right:330px}.stage{height:660px}}
@media (max-width:899px){.stage{height:420px;margin-top:20px}.q{top:6px}.cal{top:214px;right:22px}}
@media (max-width:899px){.q .band{height:92px}.stage{height:430px;margin-top:14px}.cal{top:236px;right:26px}}.cal footer{opacity:.9;color:#0A1214}
@media (max-width:899px){.cal{top:254px}.stage{height:440px}}