*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#92acbe;color:#f3f7f6;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}button,select,input{font:inherit}button,select{color:#f3f7f6}button{cursor:pointer}#viewport{position:fixed;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}canvas:focus-visible{outline:2px solid #d9f0ea;outline-offset:-3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}#interface{position:fixed;z-index:10;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px)}.dock{display:flex;gap:6px;align-items:center;padding:6px;border-radius:14px;background:#102b36f5;border:1px solid #728c94;box-shadow:0 6px 24px #102b3629}.dock-primary,.dock-secondary{display:flex;align-items:center;gap:3px}.icon-button,.panel-header button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border:1px solid transparent;border-radius:8px;background:transparent;color:#e4f0ee}.icon-button:hover,.panel-header button:hover{background:#304c59}.icon-button[aria-pressed=true]{background:#365866;border-color:#bddad8}.icon-button[aria-pressed=true]::after{content:"";position:absolute;margin-top:30px;width:12px;height:2px;background:#ecf7ed}.separator{width:1px;height:21px;background:#6c8792;margin:0 3px}select{height:44px;border:1px solid #819ca5;border-radius:7px;background-color:#173540;color:#f3f7f6;padding:8px 28px 8px 12px;font-size:15px;line-height:1.4;cursor:pointer;color-scheme:dark}#view{width:210px}option,optgroup{color:#f3f7f6;background:#102b36;font-size:15px;line-height:1.6}option:checked{color:#fff;background:#355c70}option:hover{background:#426877}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e5f6bb;outline-offset:3px}.panel{position:absolute;bottom:calc(100% + 12px);right:0;width:330px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:16px 20px 20px;border:1px solid #819ca5;border-radius:13px;background:#102b36;box-shadow:0 8px 32px #0b222b38}.panel-header{display:flex;justify-content:space-between;align-items:center;margin:-7px -9px 12px 0;font-size:16px;font-weight:600}.panel-header button{font-size:25px;font-weight:400}.panel>label{display:flex;justify-content:space-between;gap:12px;margin-top:16px;color:#f3f7f6;font-size:14px}.panel output{color:#cbdfdf;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:32px;margin:5px 0 0;background:transparent;cursor:pointer;accent-color:#d2e8df}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#75969f}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#e5f1e7;margin-top:-6px}input[type=range]{-webkit-appearance:none}input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#75969f}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;background:#e5f1e7}.select-row{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:14px;font-size:14px}.select-row select{width:171px;padding-left:9px;padding-right:20px;font-size:14px}.help-panel{width:340px;line-height:1.65}.help-panel p{color:#d5e3e2;font-size:14px;margin:12px 0 0}kbd{font-family:inherit;font-size:13px;background:#35515e;padding:2px 4px;border-radius:3px}.restore{position:fixed;bottom:20px;right:20px;z-index:12;border:1px solid #8ba3aa;background:#102b36;border-radius:10px;width:44px;height:44px;display:grid;place-items:center}.restore:hover{background:#304c59}.status-card{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);background:#102b36;border:1px solid #80979e;border-radius:14px;padding:26px 32px;max-width:calc(100vw - 32px);width:330px;text-align:center;box-shadow:0 20px 80px #16272b30}.status-card svg{display:block;margin:0 auto 18px;width:40px;height:24px;stroke:#d5e9e1}.status-card span{font-size:15px}.progress{height:2px;border-radius:2px;background:#6a858c;margin-top:20px;overflow:hidden}.progress i{display:block;height:100%;width:4%;background:#e1efe1;transition:width .4s}.status-card p{font-size:14px;line-height:1.6;color:#d5e3e2}.status-card a{color:#e5f6bb}.status-card details{margin-top:18px;font-size:13px;text-align:left}.status-card pre{font-size:12px;white-space:pre-wrap;word-break:break-word}#touch-pad{display:none;position:fixed;left:16px;bottom:134px;z-index:8;grid-template-columns:repeat(3,44px);gap:4px;padding:6px;border-radius:12px;background:#102b36e8}#touch-pad button{width:44px;height:44px;background:#304c59;color:#f3f7f6;border:1px solid #819ca5;border-radius:7px;font-size:20px}#touch-pad button:first-child{grid-column:2;grid-row:1}#touch-pad button:nth-child(2){grid-column:1;grid-row:2}#touch-pad button:nth-child(3){grid-column:2;grid-row:2}#touch-pad button:nth-child(4){grid-column:3;grid-row:2}[hidden]{display:none!important}@media(pointer:coarse){#touch-pad{display:grid}}@media(max-width:580px){#interface{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px)}.dock{flex-direction:column;gap:2px}.dock-primary{width:100%}#view{flex:1;min-width:0;width:auto}.dock-secondary{width:100%;justify-content:center;border-top:1px solid #557381;padding-top:3px}.separator{display:none}.panel{width:330px;right:0;max-height:calc(100dvh - 138px)}.restore{bottom:14px;right:14px}}@media(max-width:330px){.dock-primary{display:grid;grid-template-columns:1fr 1fr}#view{grid-row:1;grid-column:1/-1;width:100%;padding-left:9px;font-size:15px}.dock-primary>.icon-button{justify-self:center}.panel{padding:12px}.select-row{flex-wrap:wrap}.select-row select{width:100%}.panel{max-height:calc(100dvh - 190px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
#fps-counter{position:fixed;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:11;display:flex;flex-direction:column;gap:3px;min-width:126px;padding:10px 14px;border:1px solid #728c94;border-radius:10px;background:#102b36ed;color:#f3f7f6;pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:0 3px 14px #102b3629}
#fps-value{font-size:19px;line-height:1.2;font-weight:650}
#frame-time{font-size:12px;color:#cbdfdf}
.credits a{color:#e5f6bb;text-underline-offset:3px}
#touch-pad button[data-move=up]{grid-column:3;grid-row:1;font-size:13px}
#touch-pad button[data-move=down]{grid-column:1;grid-row:1;font-size:13px}
/* Keep the browser's select semantics, keyboard handling and selected checkmark.
   The native base picker also gives Escape true cancellation on macOS Chromium. */
@supports (appearance:base-select){
 select,select::picker(select){appearance:base-select}
 select{align-items:center;padding-right:12px;gap:12px}
 select::picker-icon{color:#d6e8e8}
 select::picker(select){background:#102b36;color:#f3f7f6;border:1px solid #819ca5;border-radius:10px;padding:6px;box-shadow:0 8px 28px #081b2b55;max-height:min(540px,calc(100dvh - 24px));max-width:calc(100vw - 24px);overflow:auto;overscroll-behavior:contain}
 select optgroup{padding:6px 0;font-weight:600}
 select optgroup+optgroup{border-top:1px solid #66838f}
 select option{min-height:44px;padding:9px 12px;gap:10px;border-radius:5px;font-weight:400;font-size:15px}
 select option:checked{background:#355c70;color:#fff}
 select option:hover{background:#426877;color:#fff}
 select option:focus-visible{outline:3px solid #e5f6bb;outline-offset:-3px}
 select option::checkmark{color:#fff;order:1;margin-left:auto}
}