body{color:#e0e0e0;background-color:#121212;margin:0;padding:0;overflow:hidden}#container{width:100%;height:100%;position:absolute}#ui{border-radius:var(--radius-md);box-shadow:none;background-color:#1e1e28cc;max-width:300px;padding:20px;position:absolute;top:20px;left:20px}h1{color:var(--accent);margin-top:0;margin-bottom:15px;font-size:1.5em}.control-group{margin-bottom:15px}.control-group h3{color:#8a8aff;margin:0 0 10px;font-size:1em}.slider-container{margin-bottom:10px}.slider-label{justify-content:space-between;margin-bottom:5px;font-size:.9em;display:flex}input[type=range]{border-radius:var(--radius-sm);-webkit-appearance:none;background:#2d3746;outline:none;width:100%;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:16px;height:16px}.buttons{gap:10px;margin-top:15px;display:flex}button{color:#e0e0e0;border-radius:var(--radius-sm);cursor:pointer;background-color:#2d3746;border:none;flex:1;padding:8px 12px;transition:background-color .2s}button:hover{background-color:var(--accent);color:#121212}.legend{color:#8a8aff;justify-content:space-between;margin-top:5px;font-size:.8em;display:flex}#instructions{border-radius:var(--radius-md);box-shadow:none;background-color:#1e1e28cc;max-width:300px;padding:15px;font-size:.9em;position:absolute;bottom:20px;left:20px}#instructions h3{color:var(--accent);margin-top:0}#instructions ul{margin:0;padding-left:20px}#instructions li{margin-bottom:5px}a:link{color:#fff;text-decoration:none}a:visited{color:#fff}html,body{--page-bg:#0f1115;--surface:#171a20;--surface-strong:#1b1f26;--surface-soft:#14171c;--text-main:#e7e9ee;--text-subtle:#a3adbb;--text-soft:#828c9a;--line:#2a2f37;--line-strong:#3a404a;--line-soft:#23272e;--accent:#7aa2ff;--accent-soft:#7aa2ff24;--accent-2:#4fd1c5;color-scheme:dark;background:var(--page-bg);color:var(--text-main)}body{background:var(--page-bg);color:var(--text-main)}#ui,#instructions{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;background:#14171cf0}h1{color:var(--text-main);letter-spacing:-.01em;font-size:17px;font-weight:600}.control-group h3,#instructions h3{color:var(--text-soft);letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:600}input[type=range]{background:var(--line)}input[type=range]::-webkit-slider-thumb{background:var(--accent)}button{background:var(--surface-strong);color:var(--text-main);border:1px solid var(--line);border-radius:var(--radius-sm)}button:hover{background:var(--surface-soft);color:var(--text-main);border-color:var(--line-strong)}.legend{color:var(--text-soft)}a:link,a:visited{color:var(--accent)}a:hover{color:var(--text-main)}