:root{color-scheme:light;--paper:#fbfaf7;--ink:#171d25;--muted:#455260;--line:#d7dce0;--accent:#1354aa;--dark:#142941}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:1rem/1.65 Inter,system-ui,sans-serif}a{color:var(--accent);text-underline-offset:.2em}a:focus-visible,input:focus-visible{outline:3px solid #1b6ad3;outline-offset:4px}.frame{width:min(1100px,calc(100% - 2.5rem));margin-inline:auto}
header{border-bottom:1px solid var(--line)}.masthead,.brand,nav{display:flex;align-items:center;flex-wrap:wrap}.masthead{justify-content:space-between;gap:1rem;padding-block:.9rem}.brand{gap:.65rem;color:var(--ink);font-weight:750;text-decoration:none}nav{gap:.35rem 1.2rem}nav a{text-decoration:none;color:var(--muted)}nav a[aria-current]{color:var(--accent);text-decoration:underline;font-weight:650}
main{padding-block:clamp(2rem,7vw,6rem);min-height:72vh}h1,h2{line-height:1.12;letter-spacing:-.035em}h1{font-size:clamp(2.3rem,7vw,4.8rem);margin:0 0 1.2rem;overflow-wrap:anywhere}h2{margin:2rem 0 .75rem}p{max-width:65ch}.lead{font-size:clamp(1.15rem,2.7vw,1.65rem);color:var(--muted)}.hero,.features{display:grid;gap:2rem}.hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}.features{grid-template-columns:repeat(3,1fr);margin-top:3.5rem;border-top:1px solid var(--line)}.sample{border:1px solid var(--line);background:white;border-radius:12px;overflow:hidden}.sample>a{display:block;font-weight:650;padding:.8rem 1rem;border-bottom:1px solid var(--line)}.sample .example{padding:1rem}.sample canvas{margin-inline:auto}.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}.button{display:inline-block;padding:.55rem 1rem;border:1px solid var(--accent);border-radius:6px;text-decoration:none;font-weight:650}.button.primary{color:white;background:var(--accent)}.button:hover{box-shadow:0 0 0 2px #1354aa35}footer{border-top:1px solid var(--line);padding-block:1.5rem;color:var(--muted)}footer span{margin-inline:.5rem}
pre{overflow:auto;border-radius:8px;background:var(--dark);color:#eef5ff;padding:1rem;max-width:100%;line-height:1.5}code{font-family:ui-monospace,monospace}h1 code{font-size:.8em}.back{display:inline-block;margin-bottom:1rem}.class-list{padding-left:1.3rem;columns:3;overflow-wrap:anywhere}.class-list li{break-inside:avoid}.jsdoc{white-space:pre-wrap}.member,.release{border-top:1px solid var(--line);padding-block:.5rem}.meta{color:var(--muted)}label{display:block;font-weight:650}input{display:block;margin-top:.35rem;padding:.55rem;width:min(100%,26rem);border:1px solid #737e8b;border-radius:5px;font:inherit}.example canvas{display:block;width:min(100%,288px);height:auto;border:1px solid var(--line);background:white}
@media(max-width:760px){.hero,.features{grid-template-columns:1fr}.features{gap:0}.class-list{columns:2}}@media(max-width:470px){.class-list{columns:1}}

.usage-example{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start;gap:1rem}
.usage-example pre{margin:0}
.usage-preview{min-width:0;padding:1rem;border:1px solid var(--line);border-radius:8px;background:white}
.usage-preview h3{margin:0 0 .75rem}
.usage-preview canvas{width:min(100%,320px)}
@media(max-width:760px){.usage-example{grid-template-columns:minmax(0,1fr)}}