@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;450;500;600;700;800&display=swap');

:root{color-scheme:dark;--ink:#e9e8df;--muted:#9baaaa;--warm:#e9c397;--surface:#16262a;--line:#ffffff16;font-family:'Golos Text',sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:#101e21;color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:2px solid var(--warm);outline-offset:6px}button{border:0}a{color:inherit;text-decoration:none}button svg,.mix-control svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.world{min-height:820px;height:100svh;position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(130deg,#14272a 0%,#172b2c 48%,#1c3030 100%)}.sky-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 68% 35%,#78948b18,transparent 55%)}.scene{position:absolute;width:max(1300px,100vw);height:100%;right:-3%;top:0}.scene>svg{width:100%;height:100%;overflow:visible}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#101f25bb,transparent 57%),linear-gradient(0deg,#0d1d25 0%,transparent 27%,transparent 80%,#10202644)}#rain{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.44}.header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:38px 4.4%}.brand{display:flex;gap:12px;align-items:center;font-size:23px;font-weight:600;letter-spacing:-1px}.brand svg{width:29px;height:29px;fill:var(--warm)}.brand .drop{fill:none;stroke:var(--warm);stroke-width:1.7}.brand-dot{color:var(--warm)}.header-right{display:flex;align-items:center;gap:30px;color:#c4ceca;font-size:12px}.weather{display:flex;align-items:center;gap:9px}.live-dot{width:5px;height:5px;border-radius:50%;background:#b6c7b3;box-shadow:0 0 9px #c4e6d447}#clock{font-variant-numeric:tabular-nums;letter-spacing:1px;font-size:14px}.icon-button{background:transparent;display:grid;place-items:center;width:32px;height:32px;color:#afbfbb}.help-button{border:1px solid #92a4a554;border-radius:50%;width:22px;height:22px;font-size:12px}.intro{position:absolute;z-index:1;left:7.2%;top:26%;transition:opacity .6s,transform .6s;pointer-events:none}.intro>*{pointer-events:auto}.place-label{display:flex;align-items:center;gap:10px;color:#b6c1ba;font-size:11px;letter-spacing:.5px;margin-bottom:27px}.place-label>span{width:20px;height:1px;background:var(--warm)}h1{font-size:clamp(42px,4.8vw,76px);font-weight:450;letter-spacing:-3px;line-height:1.12;margin:0 0 27px} .intro p{font-size:14px;line-height:1.95;color:#a8b7b7;margin-bottom:30px}.wander{display:flex;align-items:center;gap:12px;padding:0;background:transparent;font-size:13px;font-weight:500}.wander-icon{display:grid;place-items:center;width:37px;height:37px;border:1px solid #a3b4ae55;border-radius:50%;font-size:20px;color:var(--warm);transition:background .2s}.wander:hover .wander-icon{background:#e9c39725}.sound-hint{display:flex;align-items:center;gap:8px;font-size:10px;color:#849999;margin:19px 0 0 49px}.sound-hint svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.2}.city-caption{position:absolute;right:10.5%;bottom:24%;display:flex;gap:13px;color:#b6c3bb;line-height:1.7;font-size:10px;pointer-events:none}.city-caption strong{font-weight:400;color:#dee0d3}.caption-line{width:27px;height:1px;background:#9dad9d7a;margin-top:8px}.sound-dock{position:absolute;z-index:3;bottom:65px;left:4.4%;right:4.4%;display:flex;align-items:center;gap:30px;padding:18px 24px;background:#182a2edb;border:1px solid #9fb3b122;box-shadow:0 10px 50px #05101333;border-radius:12px;backdrop-filter:blur(20px)}.radio-info{display:flex;align-items:center;gap:14px;min-width:218px}.record-art{display:grid;place-items:center;width:43px;height:43px;flex-shrink:0;border-radius:6px;background:linear-gradient(145deg,#8a9a8b,#385750);position:relative;overflow:hidden}.record-art:before,.record-art:after{content:'';position:absolute;width:90px;height:1px;background:#d6dfb955;transform:rotate(-42deg);top:13px}.record-art:after{top:32px}.record-art span{width:25px;height:25px;border-radius:50%;border:7px solid #1c3430;box-shadow:0 0 0 1px #b9bc9455;background:#d4bc81;z-index:1}.dock-caption{display:block;color:#93a6a6;font-size:10px;margin-bottom:6px}.station-button{background:none;padding:0;font-size:12px;display:flex;align-items:center;gap:14px}.station-arrow{color:#8eaaa5}.equalizer{height:20px;display:flex;gap:3px;align-items:center;margin-left:7px}.equalizer i{width:2px;height:4px;background:#c5cfb2}.equalizer.active i{animation:equalize 1.2s ease-in-out infinite alternate}.equalizer i:nth-child(2){height:13px;animation-delay:-.5s}.equalizer i:nth-child(3){height:8px;animation-delay:-.8s}.equalizer i:nth-child(4){height:16px;animation-delay:-.2s}.play-button{width:39px;height:39px;display:grid;place-items:center;flex-shrink:0;border:1px solid #96b2a740;border-radius:50%;background:#bed1b60c}.play-button svg{width:17px;height:17px;fill:var(--ink);stroke-width:0}.mix-control{display:flex;align-items:center;gap:11px;color:#9eafad;font-size:11px}.mix-control svg{width:19px;height:19px;color:#b8c7bf}.mix-control input{width:80px;cursor:pointer;accent-color:#c1c9ad;height:16px}input[type=range]{appearance:none;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#c1c9ad var(--value,50%),#6f85864a var(--value,50%));border-radius:2px}input[type=range]::-webkit-slider-thumb{appearance:none;width:7px;height:7px;border-radius:50%;margin-top:-2.5px;background:#d7ddc6}input[type=range]::-moz-range-track{height:2px;background:#6f8586}input[type=range]::-moz-range-thumb{height:7px;width:7px;border:0;background:#d7ddc6}.dock-end{margin-left:auto;display:flex;align-items:center;gap:25px}.dock-end>span{font-size:10px;color:#93a6a6}.dock-end svg{width:18px;height:18px}.bottom-note{position:absolute;left:4.4%;right:4.4%;bottom:27px;display:flex;justify-content:space-between;color:#718a8b;font-size:10px}.return-button{position:absolute;top:130px;left:4.4%;background:#15282ac9;padding:10px 14px;border-radius:30px;z-index:2;font-size:11px}.immersive .intro{opacity:0;transform:translateY(10px);visibility:hidden}.immersive .city-caption{opacity:0}.city-place{cursor:pointer;outline:none}.city-place .place-marker{transition:opacity .2s,transform .2s;transform-box:fill-box;transform-origin:center}.city-place:hover .place-marker,.city-place:focus-visible .place-marker{transform:translateY(-5px)}.city-place:focus-visible .marker-bg{stroke:#f3d7ab;stroke-width:2}.city-place .window-light{transition:opacity .3s}.city-place:hover .window-light{opacity:1}.toast{position:absolute;bottom:175px;left:50%;transform:translateX(-50%) translateY(8px);padding:12px 22px;background:#263c3d;border:1px solid #acbc9c33;border-radius:30px;z-index:10;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translateX(-50%)}dialog{width:min(460px,calc(100vw - 32px));color:var(--ink);background:#1a2c2e;border:1px solid #91a8a53b;border-radius:16px;padding:40px;box-shadow:0 30px 120px #0006}dialog::backdrop{background:#07141899;backdrop-filter:blur(9px)}.close-dialog{position:absolute;top:13px;right:13px;font-size:16px}.room-eyebrow{color:var(--warm);font-size:12px;display:block;margin-bottom:18px}dialog h2{font-weight:450;font-size:30px;letter-spacing:-1px;margin:0 0 16px}dialog p{font-size:13px;color:#a9b9b4;line-height:1.8}dialog textarea{width:100%;height:180px;resize:vertical;border:1px solid #8ea49e38;background:#0f23254d;color:var(--ink);padding:15px;border-radius:8px;line-height:1.8;font:inherit;font-size:14px;margin:10px 0}dialog textarea:focus{outline:1px solid var(--warm)}.saved-label{color:#9eafa3;font-size:11px}.dialog-action{padding:12px 20px;background:#d4c5a4;border-radius:6px;color:#233331;font-size:12px;margin:10px 6px 0 0}.dialog-action.secondary{background:#c2d2bb10;color:#b7c5bd;border:1px solid #a1b5a329}.timer-display{font-size:68px;letter-spacing:-3px;font-variant-numeric:tabular-nums;margin:25px 0;text-align:center}.station-list{display:grid;gap:8px;margin:24px 0}.station-choice{background:#a0b5a608;text-align:left;border:1px solid #a1b5a322;padding:15px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;font-size:13px}.station-choice.selected{border-color:#d4c5a4;color:var(--warm)}.station-choice span{font-size:10px;color:#97ada4}.help-keys{display:flex;gap:22px;font-size:11px;color:#a9b9b4;margin-top:25px}kbd{border:1px solid #8ea49e38;border-radius:4px;padding:4px 7px;margin-right:5px;font:inherit;color:var(--warm)}
.world{min-height:620px}
.sound-dock{background:#182a2ef5;backdrop-filter:none}
dialog::backdrop{background:#071418b8;backdrop-filter:none}
.world.scene-paused .equalizer.active .eq-bar{animation-play-state:paused}
.immersive .city-caption{visibility:hidden}
.city-caption button{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:-5px;padding:0;background:none;color:#dee0d3;font:inherit;pointer-events:auto}
.city-caption button svg{width:14px;height:14px}
.resident-window{cursor:pointer;outline:none}
.resident-light{opacity:0;transition:opacity 250ms cubic-bezier(.23,1,.32,1)}
.resident-window.is-lit .resident-light,.resident-window:focus-visible .resident-light{opacity:.9}
.resident-frame{stroke-opacity:.35}
.resident-window:focus-visible .resident-frame{stroke:#f3d7ab;stroke-width:3;stroke-opacity:1}
.resident-letter{opacity:.5;transition:opacity 180ms cubic-bezier(.23,1,.32,1)}
.resident-window.is-lit .resident-letter,.resident-window:focus-visible .resident-letter{opacity:1}
.resident-illustration{display:block;width:100%;height:120px;margin:4px 0 16px}
.resident-note{margin:0;color:#d8ded3;font-size:18px;line-height:1.8;font-weight:400}
.resident-signature{display:flex;flex-direction:column;gap:5px;margin:24px 0}
.resident-signature strong{color:var(--warm);font-size:13px;font-weight:500}
.resident-signature span{font-size:11px;color:#9eb2a6}
.resident-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:8px}
.resident-actions .dialog-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:0;min-height:44px;padding:12px 10px;white-space:nowrap}
.resident-actions .mix-clear{grid-column:1 / -1;justify-self:center;min-height:44px}
.resident-actions .ui-icon{width:15px;height:15px}
@media(hover:hover) and (pointer:fine){.resident-window:hover .resident-light{opacity:1}.resident-window:hover .resident-letter{opacity:1}.city-caption button:hover{color:var(--warm)}}
@media(max-width:760px){.resident-note{font-size:16px;line-height:1.8}.resident-illustration{height:100px;margin-bottom:12px}.resident-actions{gap:8px}.resident-actions .mix-clear{font-size:11px}.resident-actions .dialog-action{font-size:12px;padding:12px}}
@media(orientation:landscape) and (max-height:540px) and (max-width:1100px){.resident-hit{transform:scale(1.4);transform-box:fill-box;transform-origin:center}.resident-illustration{height:65px}.resident-note{font-size:14px}.resident-signature{margin:14px 0}}
.intro .place-label,.intro h1,.intro p,.intro .sound-hint{pointer-events:none}
.ui-icon{display:inline-block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex-shrink:0}
.wander-icon{border:0}
.wander .wander-icon svg{width:100%;height:100%;stroke-width:1.4}
.return-button:not([hidden]){display:inline-flex;align-items:center;gap:8px}
button .station-arrow{width:14px;height:14px}
.help-button svg{width:18px;height:18px}
.record-art{background:none}
.record-art::before,.record-art::after{content:none}
.record-art>svg{display:block;width:100%;height:100%}
.live-dot{background:none;box-shadow:none;color:#b6c7b3;flex-shrink:0}
.equalizer{display:block;width:18px;flex-shrink:0}
.equalizer .eq-bar{fill:none;stroke:#c5cfb2;stroke-width:2;transform-box:fill-box;transform-origin:center}
.equalizer.active .eq-bar{animation:equalizer-scale 1.2s ease-in-out infinite alternate}
.equalizer .eq-bar:nth-child(2){animation-delay:-.5s}
.equalizer .eq-bar:nth-child(3){animation-delay:-.8s}
.equalizer .eq-bar:nth-child(4){animation-delay:-.2s}
@keyframes equalizer-scale{to{transform:scaleY(.25)}}
.mixer-button{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 0;background:none;color:var(--ink);font-size:11px}
.mixer-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.mixer-button.has-layers{color:var(--warm)}
.dock-end{gap:18px}
.dock-end>span{display:none}
.sound-tabs{display:flex;gap:22px;margin:0 0 27px;border-bottom:1px solid var(--line)}
.sound-tabs button{background:none;font-size:12px;color:#a9bbb5;padding:0 0 12px;border-bottom:2px solid transparent}
.sound-tabs button.current{color:var(--warm);border-bottom-color:var(--warm)}
dialog.mixer-dialog{width:min(550px,calc(100vw - 28px));max-height:calc(100svh - 32px);overflow:auto;scrollbar-width:thin;scrollbar-color:#789185 #1a2c2e}
.mixer-dialog h2{font-size:29px;letter-spacing:-.03em}
.mixer-intro{margin:0 0 17px}
.mixer-list{display:flex;flex-direction:column}
.layer-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.layer-toggle{flex-shrink:0;background:#aec4b309;border:1px solid #a3b6ab29;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:#9fb5ac;transition:background .15s,color .15s}
.layer-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.layer-row.enabled .layer-toggle{background:#e9c39716;color:var(--warm);border-color:#c7b78f69}
.layer-copy{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.layer-name{font-size:12px;color:#d4dfd9}
.layer-detail{font-size:10px;color:#a7bbb2;line-height:1.4}
.layer-row input{width:95px;flex-shrink:0;cursor:pointer;height:24px}
.layer-row output{font-size:10px;font-variant-numeric:tabular-nums;color:#b8c9bc;width:30px;text-align:right;flex-shrink:0}
.mix-actions{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:15px}
.mix-actions .dialog-action{margin:0}
.mix-clear{font-size:11px;background:none;color:#c4cfc5;padding:10px 0;text-decoration:underline;text-decoration-color:#849b8966;text-underline-offset:4px}
.mix-footnote{font-size:10px;line-height:1.7;margin:18px 0 0;color:#acbdb2}
.mix-footnote a{display:inline-block;text-decoration:underline;text-underline-offset:3px}
.mixer-dialog ::selection{background:#e9c39740;color:#f1ebdb}
dialog.mixer-dialog{padding:28px 32px}
.mixer-dialog .sound-tabs{margin-bottom:18px}
.mixer-dialog h2{margin-bottom:12px}
.mixer-dialog .mixer-intro{font-size:12px;line-height:1.6;margin-bottom:14px}
.mixer-dialog .layer-row{padding:7px 0}
.mixer-dialog .layer-toggle{width:36px;height:36px}
.mixer-dialog .mix-actions{margin-top:14px}
.mixer-dialog .mix-footnote{margin-top:13px}
.mixer-dialog .layer-detail,.mixer-dialog .layer-row output,.mixer-dialog .mix-footnote{font-size:11px}
@media(max-width:760px){.dock-end{gap:8px}.mixer-button{padding:6px;width:30px;height:32px;justify-content:center}.mixer-button span{display:none}dialog.mixer-dialog{padding:28px 22px}.layer-row{gap:9px;padding:10px 0}.layer-row input{width:74px}.layer-toggle{width:36px;height:36px}.layer-detail{font-size:9px}.layer-copy{min-width:90px}.layer-row output{font-size:9px;width:25px}.mixer-dialog h2{font-size:27px}}
@media(max-width:360px){dialog.mixer-dialog{padding:28px 16px}.layer-row{gap:7px}.layer-row input{width:55px}.layer-detail{max-width:130px}}
@media(min-width:761px) and (max-height:760px){.intro{top:23%}.intro h1{font-size:clamp(40px,4.5vw,60px);margin-bottom:20px}.intro p{line-height:1.75;margin-bottom:22px}.intro .sound-hint{margin-top:12px}}
@keyframes equalize{to{height:3px}}@media(min-width:1650px){.intro{top:28%}.scene{right:0}.sound-dock{gap:42px}.mix-control input{width:120px}}@media(max-width:1100px){.sound-dock{gap:20px;padding:16px 20px}.radio-info{min-width:190px}.dock-end>span{display:none}.mix-control input{width:65px}.scene{right:-15%}.intro{left:6%}h1{font-size:55px}}@media(max-width:760px){.world{min-height:780px}.header{padding:26px 6%}.brand{font-size:19px;gap:8px}.brand svg{width:24px}.weather{display:none}.header-right{gap:18px}.intro{top:18%;left:7%;right:5%}h1{font-size:clamp(32px,10vw,44px);letter-spacing:-2px}.place-label{font-size:10px;margin-bottom:20px}.intro p{font-size:12px;margin-bottom:22px}.scene{width:1100px;right:-260px;height:80%;top:14%;opacity:.8}.vignette{background:linear-gradient(90deg,#101f2580,transparent),linear-gradient(0deg,#0d1d25,transparent 35%,transparent 55%,#10202680)}.sound-dock{bottom:55px;left:5%;right:5%;padding:15px;gap:15px;flex-wrap:wrap;border-radius:12px}.radio-info{min-width:0;flex:1}.record-art{width:36px;height:36px}.equalizer{margin-left:auto}.play-button{width:34px;height:34px}.mix-control{gap:8px;flex:1;justify-content:space-between;order:3;padding-top:8px;border-top:1px solid var(--line);min-width:40%}.mix-control input{width:75px;flex:1;max-width:100px}.mix-control svg{width:16px}.dock-end{margin-left:0}.dock-end .icon-button{width:25px}.bottom-note{bottom:24px;left:6%;right:6%;font-size:9px}.bottom-note>span:last-child{display:none}.city-caption{right:7%;bottom:29%;font-size:9px}.sound-hint{font-size:9px}.toast{bottom:210px;width:max-content;max-width:90%;font-size:11px}.immersive .scene{opacity:1}.return-button{top:90px}dialog{padding:32px}.timer-display{font-size:60px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}