:root { color-scheme: light; --paper:#edf5f2; --raised:#f8fbf9; --ink:#102b2d; --muted:#4e696b; --line:rgba(16,43,45,.3); --cyan:#22b8d6; --cyan-soft:#b8ecf1; --pink:#d90b75; --note:#fff2a8; --max:1120px; }
* { box-sizing:border-box; }
html { overflow-x:clip; scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font:500 1rem/1.58 Arial,Helvetica,sans-serif; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--pink); outline-offset:4px; }
.skip-link { position:fixed; z-index:5; top:.5rem; left:.5rem; padding:.7rem 1rem; background:var(--ink); color:var(--raised); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.site-header, main > section, footer { width:min(var(--max),calc(100% - 3rem)); margin-inline:auto; }
.site-header { display:flex; min-height:4.5rem; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand span { display:grid; width:2.4rem; aspect-ratio:1; place-items:center; border:2px solid var(--ink); background:var(--cyan); box-shadow:.2rem .2rem 0 var(--pink); font-weight:950; transform:rotate(-2deg); }
.brand strong { letter-spacing:-.04em; }
.header-action { padding:.55rem .1rem .25rem; border-bottom:2px solid var(--ink); font-size:.82rem; font-weight:900; text-decoration:none; }
h1,h2,p { margin-top:0; }
h1,h2 { font-weight:950; letter-spacing:-.065em; line-height:.94; }
h1 { max-width:10ch; margin-bottom:1.5rem; font-size:clamp(3.4rem,7vw,6.8rem); }
h2 { margin-bottom:1rem; font-size:clamp(2.35rem,5vw,4.7rem); }
.eyebrow { color:var(--pink); font-size:.72rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.hero { display:grid; min-height:calc(100dvh - 4.5rem); grid-template-columns:1.25fr .75fr; gap:clamp(2rem,7vw,7rem); align-items:center; padding:4rem 0 5rem; }
.lead { max-width:42rem; color:var(--muted); font-size:clamp(1.08rem,2vw,1.3rem); }
.state-card { position:relative; padding:1.4rem; border:2px solid var(--ink); background:var(--note); box-shadow:.55rem .55rem 0 var(--ink); transform:rotate(1deg); }
.state-card::before { position:absolute; top:-.9rem; left:30%; width:6rem; height:1.7rem; content:""; background:rgba(34,184,214,.48); clip-path:polygon(2% 7%,99% 0,96% 94%,0 100%); }
.state-card span { display:block; margin-bottom:.45rem; font-size:.7rem; font-weight:900; text-transform:uppercase; }
.state-card strong { display:block; margin-bottom:.75rem; font-size:1.55rem; letter-spacing:-.04em; }
.state-card p { margin:0; font-size:.88rem; }
.license { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,7vw,7rem); padding:clamp(5rem,9vw,8rem) 0; border-top:2px solid var(--ink); }
.license-copy { max-width:42rem; }
.license-copy p { margin-bottom:1.35rem; }
.license-copy a { font-weight:800; text-decoration-thickness:2px; text-underline-offset:.2rem; }
.method { width:auto; max-width:none; padding:clamp(5rem,9vw,8rem) max(1.5rem,calc((100vw - var(--max))/2)); background:var(--ink); color:var(--raised); }
.method header { max-width:48rem; }
.method header > p:last-child { color:#b9cbca; }
.method ol { margin:3.5rem 0 0; padding:0; list-style:none; border-top:1px solid rgba(248,251,249,.35); }
.method li { display:grid; grid-template-columns:4rem 1fr; gap:1rem; padding:1.4rem 0; border-bottom:1px solid rgba(248,251,249,.35); }
.method li > span { color:var(--cyan); font-size:.8rem; font-weight:950; }
.method li strong { display:block; margin-bottom:.25rem; font-size:1.2rem; }
.method li p { margin:0; color:#b9cbca; }
code { padding:.1rem .3rem; background:rgba(184,236,241,.18); font:700 .82em/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.downloads { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,7vw,7rem); padding:clamp(5rem,9vw,8rem) 0; }
.downloads > div > p:last-child { color:var(--muted); }
.downloads ul { margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.downloads li { border-bottom:1px solid var(--line); }
.downloads a { display:grid; grid-template-columns:.75fr 1.25fr; gap:1rem; padding:1.15rem 0; text-decoration:none; }
.downloads a:hover strong { color:var(--pink); }
.downloads span { color:var(--muted); font-size:.88rem; }
.boundary { margin-bottom:clamp(5rem,10vw,9rem); padding:clamp(2rem,5vw,4rem); border:2px solid var(--ink); background:var(--cyan-soft); box-shadow:.65rem .65rem 0 var(--pink); }
.boundary h2 { max-width:12ch; }
.boundary > p:last-child { max-width:48rem; margin-bottom:0; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem 0 3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; }
footer a { font-weight:900; }
@media (max-width:800px) { .hero,.license,.downloads { grid-template-columns:1fr; } .hero { min-height:auto; padding-top:4rem; } .license,.downloads { gap:2rem; } }
@media (max-width:600px) { .site-header,main > section,footer { width:min(100% - 2rem,42rem); } h1 { font-size:clamp(3rem,15vw,5rem); } .method { padding-inline:1rem; } .downloads a { grid-template-columns:1fr; gap:.25rem; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .site-header { display:none; } body { background:#fff; } .hero { min-height:auto; } .method { background:#fff; color:var(--ink); } .method header > p:last-child,.method li p { color:var(--muted); } }