:root{color-scheme:dark;--bone:#e7deca;--ash:#a89d89;--ink:#080907;--moss:#66704d;--ember:#bd6c2d;--panel:rgba(10,11,9,.86)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:Georgia,"Times New Roman",serif;color:var(--bone)}
button,select,input{font:inherit}
button,select{color:var(--bone)}
.world{position:relative;width:100%;height:100%;isolation:isolate;background:#050604}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.06) brightness(.82);animation:breathe 18s ease-in-out infinite alternate}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 54% 43%,transparent 30%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.77) 110%)}
.firelight{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 14% 52%,rgba(218,109,30,.21),transparent 31%);animation:flicker 4.6s steps(1) infinite}
.weather{position:absolute;inset:-12%;pointer-events:none;opacity:.18;background-image:repeating-linear-gradient(105deg,transparent 0 21px,rgba(205,220,216,.35) 22px,transparent 23px 44px);background-size:140% 200%;animation:rain 1.1s linear infinite;mask-image:linear-gradient(to right,transparent 0 36%,#000 48% 83%,transparent 94%)}
.world[data-rain="storm"] .weather{opacity:.34;animation-duration:.58s}
.world[data-rain="off"] .weather{opacity:0}
.brand{position:absolute;top:max(24px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));text-shadow:0 2px 18px #000}
.brand p{margin:0 0 .35rem;text-transform:uppercase;letter-spacing:.2em;font:600 .72rem/1.2 system-ui,sans-serif;color:var(--ash)}
.brand p span{color:#b18355}
.brand h1{margin:0;font-size:clamp(2rem,4.6vw,4.8rem);font-weight:400;letter-spacing:-.035em}
.enter{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);min-width:240px;padding:1rem 1.5rem;border:1px solid rgba(231,222,202,.45);border-radius:2px;background:rgba(8,9,7,.78);backdrop-filter:blur(12px);box-shadow:0 18px 60px #000;cursor:pointer;transition:.2s ease}
.enter:hover,.enter:focus-visible{background:rgba(39,32,23,.9);border-color:var(--bone);transform:translateX(-50%) translateY(-2px)}
.enter span,.enter small{display:block}.enter span{font-size:1.12rem;letter-spacing:.04em}.enter small{margin-top:.35rem;color:var(--ash);font:400 .75rem/1.2 system-ui,sans-serif}
.mixer{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:min(370px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;padding:1.15rem;border:1px solid rgba(231,222,202,.24);border-radius:4px;background:var(--panel);backdrop-filter:blur(20px) saturate(.8);box-shadow:0 24px 80px rgba(0,0,0,.65)}
.mixer-head{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid rgba(231,222,202,.16);padding-bottom:.85rem}
.eyebrow{margin:0 0 .2rem;color:#b38b62;text-transform:uppercase;letter-spacing:.18em;font:650 .68rem/1 system-ui,sans-serif}
.mixer h2{margin:0;font-size:1.3rem;font-weight:400}.icon-btn{border:0;background:transparent;font:300 1.7rem/1 system-ui;cursor:pointer;color:var(--ash)}
.channel{display:grid;grid-template-columns:1fr 1.45fr;gap:.55rem 1rem;align-items:center;padding:.85rem 0;border-bottom:1px solid rgba(231,222,202,.11)}
.channel>label:first-child{font-size:.96rem}.channel select{width:100%;padding:.45rem .55rem;border:1px solid rgba(231,222,202,.22);border-radius:2px;background:#171813;font:500 .82rem/1.3 system-ui,sans-serif}
.volume{grid-column:1/-1;display:grid;grid-template-columns:48px 1fr 26px;gap:.6rem;align-items:center;color:var(--ash);font:500 .7rem/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em}.volume input{accent-color:#a56b36;width:100%}.volume output{text-align:right;font-variant-numeric:tabular-nums}
.master-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}.master-row button,.reopen{padding:.62rem;border:1px solid rgba(231,222,202,.25);border-radius:2px;background:#25251d;cursor:pointer;font:600 .78rem/1 system-ui,sans-serif}.master-row button:hover{border-color:#b88b5d}
.hint{margin:.75rem 0 0;color:var(--ash);font:italic .75rem/1.3 Georgia,serif}.reopen{position:absolute;right:20px;bottom:20px;background:var(--panel);backdrop-filter:blur(15px)}
[hidden]{display:none!important}
.channel select,.volume,.master-row button,.reopen,.enter small{font-size:.875rem}
.volume{grid-template-columns:65px 1fr 32px;letter-spacing:.02em}
.brand p,.eyebrow,.hint{font-size:.8125rem}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
@keyframes rain{to{background-position:-90px 260px}}@keyframes flicker{0%,100%{opacity:.9}20%{opacity:.72}21%{opacity:1}61%{opacity:.78}62%{opacity:.95}75%{opacity:.7}}@keyframes breathe{to{transform:scale(1.012);filter:saturate(.88) contrast(1.08) brightness(.86)}}
@media(max-width:620px){.scene{object-position:48% center}.brand{top:20px;left:20px}.brand h1{font-size:2.25rem}.mixer{right:10px;bottom:10px;width:calc(100vw - 20px);max-height:68vh}.channel{padding:.7rem 0}.enter{bottom:9%}}
@media(prefers-reduced-motion:reduce){.scene,.firelight,.weather{animation:none}}

/* Contain oversized weather so control focus cannot scroll the scene. */
.world{overflow:hidden;height:100dvh}
@media(max-width:620px){.mixer{max-height:68dvh}}