:root{--bg:5 7 11;--panel:14 18 26;--line:40 52 70;--ink:226 232 240;--muted:130 146 168;--accent:120 180 255;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;--sans:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden}body{background:rgb(var(--bg));color:rgb(var(--ink));font-family:var(--sans);-webkit-font-smoothing:antialiased}#app{position:relative}.stage{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.panel{z-index:2;background:rgb(var(--panel) / .82);border:1px solid rgb(var(--line) / .7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-direction:column;gap:.8rem;width:250px;padding:.9rem;display:flex;position:absolute;top:16px;left:16px}.brand-name{font-family:var(--mono);letter-spacing:.12em;font-size:1.25rem;font-weight:600}.brand-sub{color:rgb(var(--muted));margin-top:2px;font-size:.7rem}.field{flex-direction:column;gap:.35rem;display:flex}.field-head{justify-content:space-between;align-items:baseline;display:flex}.field label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:rgb(var(--muted));font-size:.6rem}.value{font-family:var(--mono);font-variant-numeric:tabular-nums;color:rgb(var(--accent));font-size:.72rem}.seg{grid-template-columns:repeat(4,1fr);gap:2px;display:grid}.seg button{font-family:var(--mono);background:rgb(var(--bg) / .8);color:rgb(var(--ink));border:1px solid rgb(var(--line));cursor:pointer;padding:.4rem .2rem;font-size:.68rem}.seg button:hover{border-color:rgb(var(--accent) / .6)}.seg button.active{background:rgb(var(--accent) / .18);border-color:rgb(var(--accent));color:rgb(var(--accent))}input[type=range]{width:100%;accent-color:rgb(var(--accent))}.btn-row{grid-template-columns:1fr 1fr;gap:2px;display:grid}.action{font-family:var(--mono);background:rgb(var(--bg) / .8);color:rgb(var(--ink));border:1px solid rgb(var(--line));cursor:pointer;padding:.45rem;font-size:.74rem}.action:hover{border-color:rgb(var(--accent) / .6)}.action.active{background:rgb(var(--accent) / .18);border-color:rgb(var(--accent));color:rgb(var(--accent))}.hint{color:rgb(var(--muted));font-size:.68rem;line-height:1.4}.unsupported{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.8rem;padding:2rem;display:flex;position:absolute;inset:0}.unsupported h1{font-family:var(--mono);letter-spacing:.08em;font-size:1.4rem}.unsupported p{max-width:34rem;color:rgb(var(--muted));font-size:.9rem;line-height:1.6}.unsupported .detail{font-family:var(--mono);color:rgb(var(--line));font-size:.72rem}@media (max-width:560px){.panel{width:calc(100% - 32px)}}