:root{--paper:#f5f5ef;--stage:#ecede3;--ink:#1d2112;--muted:#5d6350;--line:#dcdfcf;--accent:#4f5f00;--accent-ink:#fff;--glow:#034e64;--glow-bg:#d4eef5;--panel:#fbfbf7;--tile:#e2e8c9;--tile-ink:#384300;--mark-warm:#0994b9;--ring:#1f2600;--shadow:0 1px 2px #1d21120f, 0 8px 24px #1d21120f;--stage-serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace}@media (prefers-color-scheme:dark){:root{--paper:#11130d;--stage:#191c13;--ink:#e7ebdf;--muted:#9da28e;--line:#2c3022;--accent:#a9bf4a;--accent-ink:#151a04;--glow:#8ddefd;--glow-bg:#0d2a33;--panel:#161910;--tile:#2e3618;--tile-ink:#e2ecc0;--mark-warm:#8ddefd;--ring:#0f1300;--shadow:0 1px 2px #0006, 0 10px 30px #00000059}}:root[data-theme=light]{--paper:#f5f5ef;--stage:#ecede3;--ink:#1d2112;--muted:#5d6350;--line:#dcdfcf;--accent:#4f5f00;--accent-ink:#fff;--glow:#034e64;--glow-bg:#d4eef5;--panel:#fbfbf7;--tile:#e2e8c9;--tile-ink:#384300;--mark-warm:#0994b9;--ring:#1f2600}:root[data-theme=dark]{--paper:#11130d;--stage:#191c13;--ink:#e7ebdf;--muted:#9da28e;--line:#2c3022;--accent:#a9bf4a;--accent-ink:#151a04;--glow:#8ddefd;--glow-bg:#0d2a33;--panel:#161910;--tile:#2e3618;--tile-ink:#e2ecc0;--mark-warm:#8ddefd;--ring:#0f1300}.logo .t-pri{stroke:var(--accent)}.logo .t-warm{stroke:var(--mark-warm)}.logo .t-hub{fill:var(--accent)}.logo .t-halo{fill:var(--paper)}.logo .t-ring{stroke:var(--ring)}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;padding:clamp(16px,4vw,48px);line-height:1.5}.wrap{max-width:920px;margin:0 auto}header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:13px;display:flex}.brand .logo{flex-shrink:0;width:46px;height:46px}h1{font-family:var(--stage-serif);letter-spacing:-.01em;margin:0;font-size:clamp(28px,5vw,40px);font-weight:600}.tag{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:3px 8px;font-size:11px;font-weight:600}.promise{font-family:var(--stage-serif);text-wrap:balance;max-width:34ch;margin:14px 0 0;font-size:clamp(21px,3vw,27px);line-height:1.3}.sub{color:var(--muted);max-width:64ch;margin:8px 0 0;font-size:15px}.sub b{color:var(--ink);font-weight:600}.theme{border:1px solid var(--line);color:var(--muted);cursor:pointer;font-size:11px;font-family:var(--sans);background:0 0;border-radius:999px;padding:5px 11px}.tabs{flex-wrap:wrap;gap:8px;margin:26px 0 0;display:flex}.tab{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 13px var(--sans);cursor:pointer;border-radius:999px;padding:8px 16px}.tab[aria-selected=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.stage{background:var(--stage);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;margin:12px 0 0;padding:clamp(16px,4vw,32px)}.controls{flex-wrap:wrap;align-items:center;gap:10px 18px;display:flex}.group{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.group .lbl{font:600 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:2px}.chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);font:600 12px var(--mono);cursor:pointer;border-radius:999px;min-height:32px;padding:6px 11px}.chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent)}.chip:disabled{opacity:.4;cursor:default}.slider input{accent-color:var(--accent);width:104px;margin:0}.slider output{font:12px var(--mono);color:var(--ink);min-width:4.5ch}.frame{background:var(--panel);border:1px dashed var(--line);border-radius:10px;width:100%;max-height:62vh;margin:20px auto 0;position:relative;overflow:hidden}.frame .box{cursor:pointer;background:linear-gradient(150deg, var(--tile), color-mix(in srgb, var(--tile) 70%, var(--accent)));color:var(--tile-ink);font:600 12px var(--mono);border:0;border-radius:6px;place-items:center;padding:0;transition:left .25s,top .25s,width .25s,height .25s,filter .12s;display:grid;position:absolute}.frame .box:hover{filter:brightness(1.04)}.frame .box:disabled{cursor:default;filter:none}@media (width<=560px){.frame .box{font-size:10px}}.frame .box.warm{background:linear-gradient(150deg, var(--glow-bg), color-mix(in srgb, var(--glow-bg) 70%, var(--glow)));color:var(--glow)}.frame .inset{border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent);pointer-events:none;border-radius:4px;position:absolute}.frame .cell{border:1px dashed color-mix(in srgb, var(--muted) 45%, transparent);border-radius:6px;position:absolute}.stats{font:12px var(--mono);color:var(--muted);flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;display:flex}.stats b{color:var(--ink);font-weight:600}.note{color:var(--muted);max-width:70ch;margin:10px 0 0;font-size:13px}.panel[hidden]{display:none}.block{margin:44px 0 0}.block h2{font-family:var(--stage-serif);letter-spacing:-.005em;margin:0;font-size:clamp(22px,3.2vw,28px);font-weight:600}.block .lede{color:var(--muted);max-width:64ch;margin:6px 0 0;font-size:15px}.block .lede b{color:var(--ink);font-weight:600}.block .lede code{font-family:var(--mono);font-size:13px}.tries{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none;display:grid}.try{text-align:left;background:var(--panel);border:1px solid color-mix(in srgb, var(--muted) 70%, var(--line));cursor:pointer;width:100%;height:100%;color:var(--ink);font:14px/1.45 var(--sans);border-radius:12px;padding:12px 14px}.try:hover{border-color:var(--accent)}.try b{margin-bottom:2px;font-weight:600;display:block}.try span{color:var(--muted);font-size:13px}pre.css{background:var(--panel);border:1px solid var(--line);font:12.5px/1.6 var(--mono);color:var(--ink);white-space:pre;border-radius:12px;margin:16px 0 0;padding:14px 16px;overflow-x:auto}pre.css .c{color:var(--muted)}.run{flex-wrap:wrap;align-items:center;gap:10px 14px;margin:16px 0 0;display:flex}.run .stats{margin:0}.run .chip{font-family:var(--sans)}.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px;margin:16px 0 0;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}.card .k{color:var(--muted);font-size:12px;display:block}.card .v{font:600 20px/1.3 var(--mono);margin-top:2px;display:block}.card .d{color:var(--muted);margin-top:4px;font-size:12.5px;display:block}.table-wrap{border:1px solid var(--line);background:var(--panel);border-radius:12px;margin:16px 0 0;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:top;padding:9px 12px}tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}thead th{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}tbody th{white-space:nowrap;font-weight:600}td.num{font-family:var(--mono);white-space:nowrap}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.note code{font-family:var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:12px}.foot{color:var(--muted);margin-top:26px;font-size:12px;line-height:1.7}.foot a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*{transition:none!important}}