@font-face{font-family:Unbounded;src:url(/fonts/unbounded.woff2) format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:Figtree;src:url(/fonts/figtree.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Fragment Mono';src:url(/fonts/fragment-mono.woff2) format('woff2');font-display:swap}
:root{--sky:#3ec6ff;--inside:#0f5c9e;--tile:#1f8fe0;--cream:#f4ead4;--ink:#06263f;--pay:#c8321a;--pad:clamp(16px,3vw,56px)}
*{box-sizing:border-box}
html{background:var(--sky)}
body{margin:0;background:var(--sky);color:var(--ink);font:500 clamp(17px,1.15vw,20px)/1.55 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;font-family:Unbounded,'Arial Black',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0}
h1{font-size:clamp(36px,5vw,96px)}
h2{font-size:clamp(24px,2.5vw,44px);margin:1.8em 0 .5em}
h3{font-size:clamp(21px,1.7vw,30px);margin:1.4em 0 .4em}
a{color:inherit}
code,.mono{font-family:'Fragment Mono',monospace;font-size:.92em;overflow-wrap:anywhere}
.nav{display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,1.6vw,24px) var(--pad)}
.brand{display:flex;align-items:center;gap:.5em;font:800 clamp(18px,1.5vw,26px) Unbounded,sans-serif;letter-spacing:-.03em;text-decoration:none}
.brand img{height:1.7em;width:auto}
.right{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px)}
.right a.t{text-decoration:none;font-weight:600}
.btn{display:inline-block;background:var(--ink);color:var(--cream);font:700 clamp(15px,1.1vw,19px) Figtree,sans-serif;padding:.72em 1.2em;border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform .15s;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.xl{display:grid;place-items:center;min-width:44px;min-height:44px}
.xl svg{width:1.2em;height:1.2em;fill:var(--ink);display:block}
.ca{font:400 .8em 'Fragment Mono',monospace;background:var(--ink);color:var(--cream);border:0;border-radius:999px;padding:.6em 1em;cursor:pointer;min-height:44px;white-space:nowrap}
.skip{position:fixed;left:-999px;top:8px;z-index:9;background:var(--ink);color:var(--cream);padding:.6em 1em;border-radius:999px}.skip:focus{left:8px}
[hidden]{display:none!important}
.wrap{padding:clamp(20px,4vh,56px) var(--pad) 10vh}
.panel{background:var(--cream);border-radius:20px;padding:clamp(18px,2vw,34px)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,32px)}
@media (max-width:900px){.cols{grid-template-columns:1fr}.right a.t{display:none}}
label{display:block;font-weight:700;margin:16px 0 6px}
input{width:100%;font:500 18px Figtree,sans-serif;padding:.7em .85em;border-radius:14px;border:2px solid var(--ink);background:#fff8e8;color:var(--ink)}
input:focus-visible{outline:3px solid var(--tile);outline-offset:1px}
.help{font-size:.88em;margin-top:6px}
.err{color:var(--pay);font-weight:700;margin-top:6px}
footer{padding:24px var(--pad) 36px;display:flex;gap:20px;flex-wrap:wrap;font-weight:600}
@media (max-width:480px){.right:has(.ca:not([hidden])) .btn{display:none}}