:root{--page:#fff;--ink:#1c1c1c;--muted:#5a5a5a;--line:#00000026;--panel:#ffffffd1}html.dark{--page:#121212;--ink:#e8e8e8;--muted:#9a9a9a;--line:#ffffff2e;--panel:#121212d1}*{box-sizing:border-box}body{-webkit-user-select:none;user-select:none;background:var(--page);min-height:100vh;color:var(--ink);margin:0;font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}#background{z-index:-1;pointer-events:none;width:100%;height:100%;image-rendering:pixelated;display:block;position:fixed;inset:0}main{max-width:40rem;margin:0 auto;padding:18vh 1.5rem 6rem}h1{letter-spacing:-.02em;margin:0 0 1.5rem;font-size:clamp(2rem,6vw,3rem)}#copy p:first-child{font-size:1.15rem}#copy p{margin:0 0 1rem}#copy strong{color:var(--ink)}.small{color:var(--muted);font-size:.9rem}code{border:1px solid var(--line);border-radius:3px;padding:.1em .35em;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em}#panel{border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:6px;width:17rem;max-height:calc(100vh - 2rem);padding:.9rem;font-size:.8rem;position:fixed;top:1rem;right:1rem;overflow-y:auto}#reveal{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex:none;padding:.4rem .7rem;font-size:.8rem;position:fixed;top:1rem;right:1rem}.row{flex-wrap:wrap;gap:.4rem;margin-bottom:.5rem;display:flex}button{border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;background:0 0;border-radius:4px;flex:4.5rem;padding:.4rem}button:hover{border-color:var(--ink)}button.active{background:var(--ink);color:var(--page)}label{margin-top:.7rem;display:block}label span{color:var(--muted);justify-content:space-between;margin-bottom:.15rem;display:flex}label span b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}input[type=range]{width:100%;accent-color:var(--ink)}.pick{margin:.2rem 0 .6rem;display:block}.pick select{border:1px solid var(--line);width:100%;color:var(--ink);font:inherit;background:0 0;border-radius:4px;padding:.35rem;font-size:.8rem}.pick select option{background:var(--page);color:var(--ink)}.fps{color:var(--muted);font-variant-numeric:tabular-nums;margin:1rem 0 0}.note{color:var(--muted);margin:.15rem 0 0;font-size:.72rem}@media (width<=40rem){#panel{width:auto;max-height:none;margin:0 1rem 2rem;position:static}}