:root{color-scheme:dark;--bg:#101820;--panel:#19252e;--line:#364650;--text:#e6ece6;--muted:#a4b8bc;--accent:#efd3a0}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,sans-serif}a{color:var(--accent);text-underline-offset:3px}header,footer{padding:20px max(24px,calc((100vw - 1280px)/2));border-bottom:1px solid var(--line)}header{display:flex;justify-content:space-between;gap:20px}header nav{display:flex;gap:24px}header>a{font-weight:700;text-decoration:none}main{max-width:1328px;margin:auto;padding:42px 24px 70px}h1{font-size:clamp(36px,5vw,64px);line-height:1.05;margin:12px 0 20px;letter-spacing:-.04em}h2{margin:0 0 10px;font-size:25px}h3{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.eyebrow{color:var(--accent);text-transform:uppercase;font-size:12px;letter-spacing:.16em}.lead{font-size:20px;max-width:820px;color:var(--muted)}.controls{display:grid;grid-template-columns:280px 1fr 130px;gap:18px;margin:32px 0}label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}select,input{min-height:42px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--text);font:inherit;padding:8px 10px;min-width:0}input{font-size:16px}.summary{display:grid;grid-template-columns:1fr 200px;gap:30px;background:var(--panel);padding:24px;border:1px solid var(--line);border-radius:8px}.summary p{margin:7px 0}.muted{color:var(--muted);font-size:14px}.exports{display:flex;flex-direction:column;gap:8px;justify-content:center}.exports a{font-size:14px}.previews{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}.previews>div{min-width:0}.samplebox{overflow:auto;min-height:116px;background:#080f15;padding:18px;border:1px solid var(--line);white-space:pre;color:#e2edc9}canvas{display:block;image-rendering:pixelated}.pixel-grid{display:block;position:relative;flex:none}.pixel-grid>canvas{position:absolute;left:0;top:0;transform-origin:0 0}.table-heading{display:flex;align-items:end;gap:24px;margin-top:38px;flex-wrap:wrap}.table-heading h2{margin-right:auto}.glyphs{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}.glyph{cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--text);height:94px;padding:4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden}.glyph:hover,.glyph:focus-visible,.glyph.selected{border-color:var(--accent);outline:1px solid var(--accent)}.glyph span{font:11px/1.2 ui-monospace,monospace;color:var(--muted)}.glyph .state{color:var(--accent)}aside{min-height:68px;margin:15px 0;padding:15px 18px;border-left:3px solid var(--accent);background:var(--panel);white-space:pre-wrap;font:13px/1.6 ui-monospace,monospace}.legend{color:var(--muted);font-size:13px}.reading{max-width:880px;margin-top:48px}.reading p{max-width:80ch}.reading h3{margin-top:28px}footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:13px}code{color:var(--accent)}@media(max-width:900px){.controls{grid-template-columns:1fr 1fr}.controls label:nth-child(2){grid-column:1/-1;grid-row:2}.previews{grid-template-columns:1fr}.glyphs{grid-template-columns:repeat(8,minmax(0,1fr))}}@media(max-width:560px){header{flex-wrap:wrap}.summary{grid-template-columns:1fr}.exports{flex-direction:row;flex-wrap:wrap}.glyphs{grid-template-columns:repeat(4,minmax(0,1fr))}main{padding:28px 15px}.table-heading{gap:12px}}