:root{--ui-ivory: rgba(255, 248, 225, .88);--glass-bg: rgba(18, 17, 12, .24);--glass-bg-night: rgba(18, 17, 12, .29);--glass-bg-hover: rgba(18, 17, 12, .3);--glass-bg-hover-night: rgba(18, 17, 12, .34);--glass-border: rgba(255, 248, 225, .22);--focus-ring: rgba(244, 220, 164, .65);--shadow-soft: 0 8px 24px rgba(0, 0, 0, .14);--control-size: 3rem;--safe-top: max(16px, env(safe-area-inset-top));--safe-left: max(16px, env(safe-area-inset-left));--safe-right: max(16px, env(safe-area-inset-right));--safe-bottom: max(16px, env(safe-area-inset-bottom));--fade-speed: .92s}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100vh;height:100svh;overflow:hidden}@supports (height: 100dvh){html,body,#app{height:100dvh}}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#161616;color:var(--ui-ivory)}body.modal-open{overflow:hidden}.ambient{position:relative;width:100%;height:100%;isolation:isolate;background:#141414}.scene{position:absolute;top:0;right:0;bottom:0;left:0;background-position:center;background-size:cover;opacity:0;transition:opacity var(--fade-speed) ease-in-out}.ambient[data-mode=day] .scene-day,.ambient[data-mode=night] .scene-night{opacity:1}.scene-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#0c0b0a29,#0c0b0a12 28%,#0c0b0a24);pointer-events:none}.control{position:fixed;z-index:5;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--ui-ivory);backdrop-filter:blur(14px) saturate(118%);-webkit-backdrop-filter:blur(14px) saturate(118%);box-shadow:var(--shadow-soft);display:grid;place-items:center;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}.ambient[data-mode=night] .control{background:var(--glass-bg-night)}.control:hover{background:var(--glass-bg-hover)}.ambient[data-mode=night] .control:hover{background:var(--glass-bg-hover-night)}.control:active{transform:translateY(1px)}.control:focus-visible,.settings-modal button:focus-visible,.settings-modal input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.control-play{top:calc(var(--safe-top) + 4px);left:calc(var(--safe-left) + 4px);width:var(--control-size);height:var(--control-size);border-radius:999px}.control-play svg,.control-settings svg{width:1.15rem;height:1.15rem;fill:currentColor}.control-toggle{top:calc(var(--safe-top) + 4px);right:calc(var(--safe-right) + 4px);border-radius:999px;padding:.3rem}.toggle-track{width:3.75rem;height:2rem;border-radius:999px;border:1px solid rgba(255,248,225,.2);position:relative;display:block}.toggle-knob{position:absolute;top:50%;left:.2rem;width:1.55rem;height:1.55rem;border-radius:999px;transform:translateY(-50%);transition:transform .32s ease;background:#12110c40;border:1px solid rgba(255,248,225,.22)}.ambient[data-mode=night] .toggle-knob{transform:translate(1.75rem,-50%)}.icon{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;transition:opacity .24s ease}.icon svg{width:.9rem;height:.9rem;fill:none;stroke:var(--ui-ivory);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-moon svg{fill:var(--ui-ivory);stroke:none}.icon-sun{opacity:1}.icon-moon,.ambient[data-mode=night] .icon-sun{opacity:0}.ambient[data-mode=night] .icon-moon{opacity:1}.control-settings{right:calc(var(--safe-right) + 4px);bottom:calc(var(--safe-bottom) + 4px);width:2.55rem;height:2.55rem;border-radius:999px;opacity:.92}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#0506086b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.settings-modal{position:fixed;z-index:21;top:50%;left:50%;transform:translate(-50%,-50%);width:min(92vw,560px);max-height:min(82vh,760px);overflow:auto;border:1px solid var(--glass-border);border-radius:18px;padding:1rem;background:#13110eb8;-webkit-backdrop-filter:blur(16px) saturate(116%);backdrop-filter:blur(16px) saturate(116%);box-shadow:0 16px 44px #0000005c}.settings-modal h2{margin:.15rem 0 .75rem;font-size:1.1rem;font-weight:600}.settings-close{position:absolute;top:.4rem;right:.55rem;border:0;background:transparent;color:var(--ui-ivory);font-size:1.45rem;cursor:pointer}.settings-form label{display:block;font-size:.95rem;margin-top:.7rem}.settings-form input{width:100%;margin-top:.35rem;color:var(--ui-ivory)}.field-meta,.storage-note,.status-msg,.idb-warning,.field-error{margin:.35rem 0 0;font-size:.79rem;color:#fff8e1c2}.field-error{min-height:1.2rem;border-radius:8px;padding:.2rem .45rem}.field-error.is-idle{color:#fff8e1bd;background:#fff8e10a}.field-error.is-valid{color:#efe1b7fa;background:#9c79341f}.field-error.is-saved{color:#d9f0c5fa;background:#507e4c29}.field-error.is-error{color:#fbcbb7fa;background:#8742282e}.status-msg{min-height:1rem;color:#fff8e1e6}.idb-warning{color:#f4d49e}.settings-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.9rem}.settings-actions button{border-radius:999px;border:1px solid var(--glass-border);background:#1f1c16bf;color:var(--ui-ivory);padding:.48rem .95rem}.btn-save{background:#59492dcc}@media (min-width: 768px){:root{--control-size: 3.15rem;--safe-top: max(24px, env(safe-area-inset-top));--safe-left: max(24px, env(safe-area-inset-left));--safe-right: max(24px, env(safe-area-inset-right));--safe-bottom: max(24px, env(safe-area-inset-bottom))}}@media (prefers-reduced-motion: reduce){:root{--fade-speed: 20ms}.scene,.toggle-knob,.icon,.control{transition-duration:20ms}}