#warp,#warp *{box-sizing:border-box}:where(#warp,#warp *){margin:0;padding:0}body{background:#04030a}.page{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;background:#04030a;cursor:grab;touch-action:none;--coral: #F0473C;--lav: #C9A8FF;--acc: oklch(.72 .2 300);--text: oklch(.95 .008 295);--muted: oklch(.8 .02 295);--dim: oklch(.64 .025 295);--faint: oklch(.55 .025 295);--surface: oklch(.16 .02 290 / .9);--hair: oklch(.82 .09 300 / .15);--fill: oklch(.82 .09 300 / .08);color:var(--text);font:13px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}.page.dragging{cursor:grabbing}.page canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}.page .ui{cursor:default}.warp-chrome{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:40;display:inline-flex;align-items:center;gap:8px}.warp-chrome .wchip{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;color:#cfd3e0;background:#0d0c15b3;border:1px solid oklch(.82 .09 300 / .15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-decoration:none;cursor:pointer}.warp-chrome .wchip:hover{color:#fff}.warp-chrome .wchip--icon{width:34px;height:30px;padding:0}#sound svg[data-on]{display:none}#sound.on svg[data-on]{display:block}#sound.on svg[data-off]{display:none}.console{position:absolute;top:40px;z-index:5;background:var(--surface);border:1px solid var(--hair);border-radius:16px;box-shadow:0 20px 56px #0009,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(11px) saturate(135%);backdrop-filter:blur(11px) saturate(135%)}.console-body{animation:console-in .24s cubic-bezier(.22,1,.36,1)}@keyframes console-in{0%{opacity:0}to{opacity:1}}.console-chevron{transition:transform .22s cubic-bezier(.22,1,.36,1)}.console[data-open=false] .console-body{display:none}.console[data-open=false] .console-chevron{transform:rotate(180deg)}.console--steps{left:40px;width:400px;max-width:calc(100vw - 80px)}.console--steps .console-head{display:flex;align-items:stretch;padding:16px 18px 0}.stepper{display:flex;flex:1;gap:8px}.tab{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:5px 0 12px;background:none;border:0;cursor:pointer;text-align:left}.tab .t-num{font-family:var(--font-mono);font-size:14px;font-weight:650;letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums}.tab .t-lab{font-size:14px;font-weight:650;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.tab:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--hair);transition:background .2s}.tab:hover .t-num,.tab:hover .t-lab{color:var(--muted)}.tab.on .t-num,.tab.on .t-lab{color:var(--text)}.tab.on:after{background:var(--coral);box-shadow:0 0 10px #ee35378c}.console--steps .console-body{padding:20px 22px 22px}.c-title{font-size:14px;font-weight:650;color:var(--text);letter-spacing:.2px;margin-bottom:10px}.c-body{font-size:13px;line-height:1.5;color:var(--muted)}.c-src{font-family:var(--font-mono);font-size:10px;letter-spacing:.03em;line-height:1.5;color:var(--faint);margin-top:14px}.console--field{right:40px;width:292px}.console-head--btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;cursor:pointer;padding:17px 19px}.field-title{font-size:14px;font-weight:650;letter-spacing:.2px;color:var(--text)}.console--field .console-chevron{display:inline-flex;color:var(--dim)}.console-head--btn:hover .console-chevron,.console-head--btn:hover .field-title{color:var(--text)}.console--field .console-body{padding:8px 19px 20px}.ctl-row{margin-bottom:17px}.r-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.r-top label{font-size:11.5px;color:var(--muted)}.r-top output{font-size:11.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}.console--field input[type=range]{width:100%;height:16px;accent-color:var(--acc);background:transparent;cursor:pointer}.legend{display:grid;gap:10px;margin-top:17px;padding-top:15px;border-top:1px solid var(--hair)}.legend div{font-size:11.5px;color:var(--muted);display:flex;align-items:center}.legend kbd{display:inline-flex;justify-content:center;min-width:54px;padding:3px 7px;margin-right:9px;border-radius:6px;background:var(--fill);border:1px solid var(--hair);color:var(--muted);font-size:9.5px;font-weight:600;letter-spacing:.02em}.ctl-src{margin-top:14px;font-size:10.5px;color:var(--faint);line-height:1.5}.ctl-src a{color:var(--acc);text-decoration:none}.ctl-src a:hover{text-decoration:underline}@media(max-width:820px){.console--steps{inset:auto auto 10px 50%;transform:translate(-50%);width:calc(100vw - 20px);max-width:420px}.console--field{inset:52px 10px auto;width:auto}.console--field .console-body{padding-bottom:16px}.legend{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.console-body{animation:none}.console-chevron{transition:none}}