:root{--ink: rgba(240, 228, 210, .82);--ink-dim: rgba(240, 228, 210, .5);--glass: rgba(18, 14, 12, .42);--line: rgba(240, 228, 210, .14);--on: rgba(240, 220, 190, .16)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#120e0c;overflow:hidden;color:var(--ink);font-family:IBM Plex Mono,ui-monospace,Cascadia Mono,Menlo,Consolas,monospace;-webkit-tap-highlight-color:transparent}#view{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;height:100dvh;display:block}#loading{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:13px;letter-spacing:.08em;color:var(--ink-dim);background:#120e0c;transition:opacity 1.6s ease}#loading.gone{opacity:0;pointer-events:none}#loading .lbox{display:grid;justify-items:center;gap:10px;width:min(260px,70vw)}#loading .lbar{width:100%;height:3px;border-radius:2px;background:#f0e4d21f;overflow:hidden}#loading .lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c88a4a,#f0d2a0);box-shadow:0 0 10px #f0c88c80;transition:width .25s ease}#loading .lpct{font-size:11px;letter-spacing:.1em;color:var(--ink-dim);font-variant-numeric:tabular-nums}#loading.done .lpct{color:var(--ink)}.ui{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));display:flex;justify-content:center;padding:0 16px;opacity:0;transform:translateY(6px);transition:opacity .9s ease,transform .9s ease;pointer-events:none}.ui.awake{opacity:1;transform:none;pointer-events:auto}.bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;padding:7px 10px;border-radius:12px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);max-width:100%}.group{display:flex;gap:2px}.bar button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--ink-dim);font:inherit;font-size:12px;letter-spacing:.04em;padding:6px 9px;border-radius:8px;cursor:pointer;transition:color .3s,background .3s}.bar button:hover{color:var(--ink)}.bar button.on{color:var(--ink);background:var(--on)}.bar button:focus-visible{outline:1px solid var(--ink-dim);outline-offset:1px}.bar .toggle{border:1px solid var(--line)}@media (max-width: 560px){.bar{gap:4px 8px}.bar button{font-size:11px;padding:6px}}.slider{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.04em;color:var(--ink-dim);padding:0 6px}.slider input{width:110px;accent-color:#e8d2b0}.dialbox{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(-6px);transition:opacity .9s ease,transform .9s ease;pointer-events:none}.dialbox.awake{opacity:1;transform:none;pointer-events:auto}.dialbox .preset{-moz-appearance:none;appearance:none;-webkit-appearance:none;font:inherit;font-size:11px;letter-spacing:.04em;color:var(--ink);background:var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23f0e4d2' fill-opacity='.6'/%3E%3C/svg%3E") no-repeat right 8px center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:8px;padding:5px 24px 5px 10px;min-width:132px;cursor:pointer;outline:none}.dialbox .preset:focus-visible{box-shadow:0 0 0 1px var(--ink-dim)}.dialbox .preset option{background:#1c1714;color:#f0e4d2}.dial{--a: 0deg;position:relative;width:132px;height:132px;border-radius:50%;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);cursor:grab;touch-action:none;outline:none}.dial:focus-visible{box-shadow:0 0 0 1px var(--ink-dim)}.dial .ring{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;background:conic-gradient(from 180deg,#121830,#18213f 20%,#b8785a,#8fb0d6 34%,#cfe1f2 50%,#e6c58c 67%,#c4643f 76%,#2a2b52 82%,#121830);-webkit-mask:radial-gradient(circle,transparent 0 calc(100% - 14px),#000 calc(100% - 13px));mask:radial-gradient(circle,transparent 0 calc(100% - 14px),#000 calc(100% - 13px));opacity:.85}.dial .ticks i{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-37px) rotate(calc(-1 * var(--a)));font-style:normal;font-size:9px;color:var(--ink-dim);display:grid;place-items:center}.dial .ticks i:not(.big):before{content:"";width:2px;height:2px;border-radius:1px;background:var(--ink-dim)}.dial .knob{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;transform:rotate(var(--a)) translateY(-56px);background:radial-gradient(circle,#fff6d8 0,#fff6d8 40%,#ffc65a 60%,#ffbe5000 72%);box-shadow:0 0 14px 4px #ffc45a73;transition:background .6s,box-shadow .6s}.dial.night .knob{background:radial-gradient(circle,#f2f4ff 0,#f2f4ff 45%,#b8c4e8 62%,#b4c4f000 72%);box-shadow:0 0 12px 3px #aabeff59}.dial .readout{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;pointer-events:none}.dial .hh{font-size:17px;letter-spacing:.04em;color:var(--ink)}.dial .mood{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);min-height:11px}@media (max-width: 560px){.dial{width:108px;height:108px}.dial .knob{transform:rotate(var(--a)) translateY(-45px)}.dial .ticks i{transform:rotate(var(--a)) translateY(-29px) rotate(calc(-1 * var(--a)))}}