:root{--bg:#0d0b12;--panel:#15121c;--panel-2:#1d1926;--line:#ffecd214;--text:#efe4d4;--muted:#efe4d48c;--accent:#f2a33a;--accent-2:#e2484d;--mono:"IBM Plex Mono", ui-monospace, monospace;--sans:"Inter", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font:13px/1.4 var(--sans);margin:0}.app{grid-template-columns:1fr 320px;height:100vh;display:grid}.stage{min-width:0;min-height:0;position:relative}#view{width:100%;height:100%;display:block;position:absolute;inset:0}.title{z-index:1;pointer-events:none;position:absolute;top:14px;left:20px}.title h1{letter-spacing:.01em;margin:0;font:500 22px/1 Fraunces,Georgia,serif}.title h1 em{color:var(--accent);font-style:italic}.title p{color:var(--muted);margin:4px 0 0;font-size:12px}.stats{z-index:1;border:1px solid var(--line);font:12px/1.35 var(--mono);font-variant-numeric:tabular-nums;background:#15121cd1;border-radius:10px;flex-wrap:wrap;gap:6px 22px;padding:9px 14px;display:flex;position:absolute;bottom:30px;left:20px;right:20px}.stat{flex-direction:column;display:flex}.stat span{color:var(--muted);font:10px var(--sans);letter-spacing:.04em;text-transform:uppercase}.stat b{white-space:nowrap;font-weight:500}.stat.ratio b{color:var(--accent)}.keys{color:var(--muted);margin:0;font-size:11px;position:absolute;bottom:6px;left:20px}kbd{font:10px var(--mono);border:1px solid var(--line);background:var(--panel-2);border-radius:4px;padding:1px 5px}.panel{background:var(--panel);border-left:1px solid var(--line);padding:14px 16px 24px;overflow-y:auto}.group{border-bottom:1px solid var(--line);padding:12px 0}.group:first-child{padding-top:0}.group.transport{z-index:3;background:var(--panel);margin:-14px -16px 0;padding:14px 16px 12px;position:sticky;top:-14px}.group h3{font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}.group>summary{cursor:pointer;justify-content:space-between;align-items:center;margin-bottom:10px;list-style:none;display:flex}.group>summary::-webkit-details-marker{display:none}.group>summary h3{margin:0}.group>summary:after{content:"";border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);width:6px;height:6px;margin-right:3px;transition:transform .15s;transform:rotate(45deg)}.group:not([open])>summary{margin-bottom:0}.group:not([open])>summary:after{transform:rotate(-45deg)}.group>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.buttons{gap:8px;margin-bottom:12px;display:flex}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);font:500 12px var(--sans);white-space:nowrap;cursor:pointer;border-radius:8px;flex:1;padding:8px 10px;line-height:1.2}.btn:hover{border-color:#f2a33a80}.btn.primary{background:var(--accent);color:#1b1208;border-color:#0000}.btn.ghost{background:0 0}.btn.preset{appearance:none;text-align:left;text-overflow:ellipsis;background-color:var(--panel-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f2a33a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;background-size:10px 6px;flex:1.4;min-width:0;padding-right:26px}select.btn option{background:var(--panel);color:var(--text)}.btn:focus-visible,.seg:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.slider{cursor:default;margin-bottom:12px;display:block}.slider-head{justify-content:space-between;align-items:baseline;display:flex}.slider-label{color:var(--text)}.slider output{font:12px var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}.slider-hint{color:var(--muted);margin-top:1px;font-size:11px;display:block}input[type=range]{width:100%;accent-color:var(--accent);height:18px;margin:6px 0 2px}.segmented{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px;display:grid}.seg{color:var(--muted);font:500 12px var(--sans);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:6px 0}.seg[aria-checked=true]{background:var(--accent);color:#1b1208}.legend{margin:10px 0 12px}.legend-bar{border-radius:4px;height:8px}.legend-labels{font:10px var(--mono);color:var(--muted);justify-content:space-between;margin-top:3px;display:flex}.legend-note{color:var(--muted);font-size:11px}.toggle{cursor:pointer;align-items:center;gap:10px;margin:8px 0;display:flex}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{background:var(--panel-2);border:1px solid var(--line);border-radius:9px;flex:none;width:30px;height:17px;transition:background .15s;position:relative}.toggle-track:after{content:"";background:var(--muted);border-radius:50%;width:11px;height:11px;transition:transform .15s,background .15s;position:absolute;top:2px;left:2px}.toggle input:checked+.toggle-track{background:#f2a33a40}.toggle input:checked+.toggle-track:after{background:var(--accent);transform:translate(13px)}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--accent);outline-offset:2px}@media (width<=820px),(orientation:landscape) and (height<=500px){.stage{flex-direction:column;display:flex}#view{position:relative}.title{padding:12px 16px 0;position:static}.stats,.keys{display:none}}@media (width<=820px){.app{flex-direction:column;height:100svh;display:flex}.stage{flex:none}#view{height:min(64vw,45svh);min-height:200px}.panel{border-left:0;border-top:1px solid var(--line);flex:1;min-height:0}}@media (orientation:landscape) and (height<=500px){.app{grid-template-columns:1fr min(320px,42vw);height:100svh;display:grid}.stage{min-height:0}#view{flex:1;height:auto;min-height:0}.panel{border-top:0;border-left:1px solid var(--line)}.title{padding-top:8px}.title h1{font-size:18px}.title p{display:none}}@media (pointer:coarse){.btn{padding:11px 12px;font-size:13px}.seg{padding:10px 0;font-size:13px}input[type=range]{height:32px;margin:2px 0 0}.toggle{min-height:40px;margin:2px 0}.toggle-track{border-radius:12px;width:40px;height:24px}.toggle-track:after{width:16px;height:16px;top:3px;left:3px}.toggle input:checked+.toggle-track:after{transform:translate(16px)}.group>summary{min-height:36px;margin-bottom:4px}.group:not([open])>summary{margin-bottom:0}.group{padding:6px 0}.group[open]{padding-bottom:12px}}