:root{color-scheme:dark;--bg:#000;--panel:#101612;--raised:#18211b;--line:#29382d;--fg:#ebf4ed;--muted:#849789;--accent:#81d99b;font-family:"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--fg);overflow:hidden;overscroll-behavior:none}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;background:#000}
#fluid{display:block;width:100%;height:100%;touch-action:none;user-select:none}
.toolbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));pointer-events:none}
.toolbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand strong{font-size:17px;font-variant:small-caps;letter-spacing:.16em;font-weight:700}
.brand span{border-radius:20px;background:#14281b;color:#85d79b;font-size:10px;padding:4px 8px;text-transform:lowercase;letter-spacing:.05em}
.brand span.paused{background:#22251e;color:#a4ad9d}
.toolbar-actions{display:flex;gap:5px}
.icon-button{width:40px;height:40px;display:grid;place-items:center;border:1px solid #2d4034;border-radius:12px;background:#101812;color:#d3e6d8;padding:0}
.icon-button svg{width:19px;height:19px}
.icon-button:active,.icon-button.active{background:#21402a;color:#a7efba;border-color:#4f835c}
.settings-button{color:var(--accent)}
.hint{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);white-space:nowrap;pointer-events:none;padding:9px 13px;border:1px solid #263329;border-radius:12px;background:#101612;color:#9aa99e;text-align:center;font-size:11px;letter-spacing:.015em;transition:opacity .25s}
.hint.faded{opacity:0}
.sheet{position:fixed;z-index:20;bottom:0;right:0;left:0;height:min(55dvh,580px);min-height:min(350px,55dvh);display:flex;flex-direction:column;border:1px solid #2b3a2f;border-radius:19px 19px 0 0;background:#101612;overflow:hidden}
.sheet-grab{height:4px;width:46px;flex:none;background:#405a47;border-radius:8px;margin:8px auto 3px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px 12px;flex:none}
.sheet-head>div{display:flex;align-items:baseline;gap:12px}
.sheet-head strong{font-size:17px;font-variant:small-caps;letter-spacing:.12em}
#fps{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.sheet-head .icon-button{height:31px;width:31px;border-radius:9px}
.sheet-head .icon-button svg{width:16px;height:16px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;margin:0 12px 6px;border:1px solid #2b3a2f;border-radius:11px;background:#0b110e;flex:none}
.tabs button{min-height:35px;border:0;border-radius:8px;background:transparent;color:#899b8e;font-size:12px;letter-spacing:.075em;font-weight:600}
.tabs button.selected{background:#254331;color:#b1f2c1}
.setting-rows{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#365041 transparent;padding:5px 15px 10px;flex:1}
.setting{padding:10px 1px 12px;border-bottom:1px solid #253329}
.setting:last-child{border-bottom:0}
.setting-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:20px;margin-bottom:6px}
.setting-label{font-size:12px;color:#cbd8ce}
.setting output{color:#a7eaba;font:12px "Segoe UI",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.setting input[type=range]{display:block;width:100%;height:22px;appearance:none;-webkit-appearance:none;outline:0;border:0;margin:0;padding:0;background:transparent;touch-action:pan-y}
.setting input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:20px;background:linear-gradient(90deg,var(--accent) 0 var(--pct),#2b3a30 var(--pct) 100%)}
.setting input[type=range]::-moz-range-track{height:5px;border-radius:20px;background:#2b3a30}
.setting input[type=range]::-moz-range-progress{height:5px;border-radius:20px;background:var(--accent)}
.setting input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border:0;background:transparent}
.setting input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;background:transparent}
.setting-note{color:#748579;font-size:10px;margin-top:2px}
.setting.toggle-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.toggle-setting .setting-head{margin:0}
.toggle-switch{width:43px;height:24px;flex:none;position:relative;border-radius:20px;border:1px solid #344b3a;background:#253129;cursor:pointer}
.toggle-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:7px;background:#b1bfb4;transition:transform .16s}
.toggle-switch[aria-checked=true]{background:#244c31;border-color:#4c9a62}
.toggle-switch[aria-checked=true]::after{transform:translateX(19px);background:#a0efb7}
.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:6px 0 4px}
.palette-choice{height:47px;display:flex;align-items:end;justify-content:center;padding:0 4px 5px;border:1px solid #354039;border-radius:10px;position:relative;overflow:hidden;color:white;font-size:10px;font-weight:600;letter-spacing:.03em;text-shadow:0 1px 3px #000}
.palette-choice.selected{border:2px solid #c4f5d0}
.palette-choice span{position:relative}
.palette-choice::before{content:"";position:absolute;inset:0;background:var(--swatch);opacity:.9}
.sheet-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #28382c;flex:none}
.sheet-actions button{min-height:35px;padding:0 13px;border:1px solid #3b5041;border-radius:10px;background:#18231b;color:#c3d5c8;font-size:12px}
.sheet-actions button:active{background:#2a4732}
@media(min-width:760px){.sheet{left:auto;bottom:11px;right:11px;width:410px;height:min(65dvh,630px);border-radius:18px}.toolbar{padding:12px 16px}.hint{bottom:18px}}
@media(max-width:370px){.brand span{display:none}.icon-button{width:37px;height:37px}.toolbar-actions{gap:4px}.hint{font-size:10px;padding:8px 9px}}