@font-face{font-family:Sergio;src:url(assets/fonts/Sergio-Regular.woff) format('woff');font-display:swap;font-weight:400}@font-face{font-family:Sergio;src:url(assets/fonts/Sergio-Bold.woff) format('woff');font-display:swap;font-weight:700}
:root{color-scheme:light;--ink:#38382f;--cream:#f7f0e1;--sage:#697664;--panel:rgba(249,244,232,.97)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#d9d1be;color:var(--ink);font-family:Sergio,system-ui,sans-serif}button,input,textarea{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ad773d;outline-offset:5px}button{min-height:44px}button[aria-pressed=true]{background:#6a776529;color:#344c37}button:hover{background:#76836b22}a{color:inherit;text-underline-offset:5px}#street{position:relative;width:100%;height:100%;isolation:isolate}#landscape{position:absolute;inset:0;background:#d9d1be url(assets/city.png) center bottom/cover no-repeat;transition:filter 5s}.light-wash{position:absolute;inset:0;pointer-events:none;background:transparent;transition:background 5s;mix-blend-mode:multiply}body[data-light=dusk] #landscape{filter:brightness(.75) saturate(.72)}body[data-light=dusk] .light-wash{background:#a599b755}body[data-light=night] #landscape{filter:brightness(.38) saturate(.58)}body[data-light=night] .light-wash{background:#53617b88}#city{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.paper{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 160px #50442c19;background:linear-gradient(180deg,#fbf3e4a6 0%,transparent 20%,transparent 80%,#f3e8dba8 100%)}.chrome{transition:opacity .8s,transform .8s}header{position:absolute;left:36px;right:36px;top:28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.wordmark{font-size:29px;white-space:nowrap;text-decoration:none;display:flex;align-items:center;gap:10px;text-shadow:0 1px 8px #f9f0d9}.house-mark{font:42px Georgia}.dot{color:#8b6646}.top-actions{display:flex;align-items:center;gap:10px}.top-actions button{padding:8px 16px;border-radius:8px;background:#f7f0e1de;box-shadow:0 2px 20px #342c1b0a;font-size:18px}.top-actions #motion{font:20px system-ui;padding:8px 15px}.welcome{position:absolute;left:5vw;top:21%;pointer-events:none;padding:22px 28px 22px 0;filter:drop-shadow(0 1px 9px #f6eedbc0);color:#32352d}.eyebrow{font-family:Sergio;font-size:12px;letter-spacing:2.2px;margin:0 0 20px}h1{font-weight:400;line-height:1.3;font-size:clamp(34px,4.2vw,66px);letter-spacing:-.8px;margin:0 0 15px}h2{font-size:28px;font-weight:400;margin:0 0 18px;line-height:1.4}.welcome>p:last-child{font-size:19px;line-height:1.55;margin:0}footer{position:absolute;left:35px;right:35px;bottom:28px;display:flex;justify-content:space-between;align-items:end;gap:20px}.place-note{font-size:18px;line-height:1.6}.place-note small{display:block;font-size:12px;margin-top:3px}.dock-area{text-align:center;position:absolute;left:50%;transform:translateX(-50%);bottom:0}.hint{display:block;font-size:13px;margin-bottom:14px;text-shadow:0 1px 10px #fff}.dock{display:flex;gap:4px;background:#f7f0e1ed;padding:7px 10px;border:1px solid #fff8;border-radius:14px;box-shadow:0 8px 35px #49381e1a}.dock button{padding:7px 18px;font-size:16px;border-radius:8px;white-space:nowrap}.dock button span{display:block;font:22px Georgia;margin-bottom:4px}.bottom-actions{display:flex;gap:15px;font-size:15px}.bottom-actions button{background:#f7f0e1a8;border-radius:8px;padding:5px 12px}#fullscreen{font:26px system-ui}.panel{position:absolute;z-index:5;right:36px;top:92px;width:min(385px,calc(100vw - 28px));max-height:calc(100dvh - 125px);overflow:auto;background:var(--panel);border:1px solid #fff9;box-shadow:0 14px 60px #201c2133;padding:22px 24px;border-radius:14px;font-size:16px}.panel-heading{display:flex;justify-content:space-between;gap:10px;align-items:start}.panel-heading h2{font-size:22px}.panel-heading button,.dialog-close{font:30px system-ui;width:34px}fieldset{border:0;border-top:1px solid #5d5a4922;padding:17px 0 12px;margin:0}legend{padding:0 8px 0 0;font-size:17px}.segmented{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.segmented button{font-size:13px;padding:5px 4px;border-radius:6px}.sound-list{display:grid;gap:4px;margin:8px 0 16px}.sound-list button{padding:10px 12px;text-align:left;border-radius:8px;line-height:1.4;font-size:17px}.sound-list small,.explicit{display:block;font-size:12px;margin-top:4px;opacity:.75}.explicit{color:#845b3b}.slider{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;margin:15px 0}.slider input{width:53%;accent-color:#65775d;min-height:22px}.check{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:15px}.check small{font-size:11px;display:block;width:100%;padding-left:25px}.check input{accent-color:#63775b}#audio-status,.panel a{font-size:12px;line-height:1.5}.text-button{font-size:13px;text-decoration:underline}.quiet .chrome{opacity:0;pointer-events:none}.quiet .welcome{transform:translateY(-5px)}#return{position:absolute;bottom:25px;left:25px;border-radius:50%;background:#f7f0e1ce;width:47px;font:30px Georgia;opacity:.6}#breathing{position:absolute;inset:0;z-index:8;background:#eee7dc88;backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center}#breathing[hidden]{display:none}#close-breathe{position:absolute;right:35px;top:30px;font:36px system-ui}.breath-ring{width:140px;height:140px;border:1px solid #5c6c5d;border-radius:50%;background:#6c7d6522;box-shadow:0 0 60px #f6eddc;animation:breathe 10s infinite ease-in-out}#breath-text{margin-top:55px;font-size:29px}#breathing small{font-size:14px}@keyframes breathe{0%,100%{transform:scale(.8)}40%{transform:scale(1.4)}}#toast{position:absolute;bottom:140px;left:50%;transform:translateX(-50%);background:#f8f2e6ed;border-radius:10px;padding:12px 18px;opacity:0;transition:opacity .4s;pointer-events:none;font-size:15px;text-align:center}#toast.visible{opacity:1}dialog{border:1px solid #ded4bf;background:#faf4e7;color:#34382e;border-radius:16px;padding:35px;max-width:min(540px,92vw);max-height:85dvh;font-size:17px;line-height:1.7}dialog::backdrop{background:#23251c66;backdrop-filter:blur(4px)}.dialog-close{float:right}.inline{font-size:inherit;text-decoration:underline;padding:0}textarea{width:100%;margin:15px 0;border:1px solid #aaa28e;background:#fff9;padding:12px;font-size:18px}form button{padding:8px 16px;background:#68745d;color:#fff;border-radius:7px}form label{display:block;font-size:15px}body[data-light=night] .chrome,body[data-light=dusk] .chrome{color:#f8f0df}body[data-light=night] .wordmark,body[data-light=dusk] .wordmark,body[data-light=night] .welcome,body[data-light=dusk] .welcome{filter:none;text-shadow:0 2px 12px #151c23;color:#fff4df}body[data-light=night] .top-actions,body[data-light=dusk] .top-actions,body[data-light=night] .dock,body[data-light=dusk] .dock,body[data-light=night] .bottom-actions,body[data-light=dusk] .bottom-actions{color:#34382e}[hidden]{display:none!important}@media(max-width:900px){.place-note small{display:none}.place-note{font-size:14px}.bottom-actions{gap:3px}footer{left:18px;right:18px;bottom:23px}.dock button{padding:5px 11px}.dock-area{bottom:45px}.hint{font-size:11px}.welcome{top:20%;left:6vw}header{left:20px;right:20px;top:20px}.wordmark{font-size:24px}.top-actions{gap:5px}.top-actions button{font-size:14px;padding:7px 9px}.panel{right:18px;top:80px}.paper{background:linear-gradient(#f6eedbaa,transparent 30%,transparent 70%,#ece1ce9c)}}@media(max-width:580px){header{align-items:start;gap:10px;flex-wrap:wrap}.wordmark{font-size:25px}.house-mark{font-size:32px}.top-actions{margin-left:auto}.top-actions #motion{font-size:16px}.top-actions button{min-height:39px}.welcome{top:23%;max-width:90%;}.welcome h1{font-size:39px}.welcome .eyebrow{font-size:10px}.welcome>p:last-child{font-size:16px}.panel{top:125px;max-height:calc(100dvh - 140px)}.dock{gap:0;padding:5px}.dock button{padding:6px 12px;font-size:14px}.place-note{font-size:13px}.bottom-actions button{font-size:13px}.bottom-actions #fullscreen{font-size:22px}.hint{max-width:90vw;white-space:nowrap}#toast{width:85vw;bottom:170px}}@media(prefers-reduced-motion:reduce){.breath-ring{animation:none}.chrome,#landscape,.light-wash{transition:none}}
/* Let the street show through the controls. */
:root{--panel:rgba(249,244,232,.22)}
.top-actions button,.bottom-actions button{background:rgba(247,240,225,.16);border:1px solid #f9f2e345;backdrop-filter:blur(10px);box-shadow:none}
.panel{background:var(--panel);backdrop-filter:blur(22px) saturate(.7);-webkit-backdrop-filter:blur(22px) saturate(.7);border:1px solid #f9f2e352;box-shadow:0 12px 50px #25251e20}
.dock{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:none;text-shadow:0 1px 9px #f7f0e1aa}
button[aria-pressed=true]{background:rgba(90,112,81,.15);box-shadow:inset 0 0 0 1px #64735d40}
.sound-list button{transition:background .2s}.sound-list small{opacity:.9}
body[data-light=night] .panel,body[data-light=dusk] .panel{color:#faf1df;background:rgba(30,39,42,.25)}
body[data-light=night] .panel button[aria-pressed=true],body[data-light=dusk] .panel button[aria-pressed=true]{color:#fff6e3;background:#f9eddc18;box-shadow:inset 0 0 0 1px #f5e8ce4a}
body[data-light=night] .explicit,body[data-light=dusk] .explicit{color:#e5cfad}
body[data-light=night] .top-actions,body[data-light=dusk] .top-actions,body[data-light=night] .dock,body[data-light=dusk] .dock,body[data-light=night] .bottom-actions,body[data-light=dusk] .bottom-actions{color:#fff2dd}
body[data-light=night] .dock button[aria-pressed=true],body[data-light=dusk] .dock button[aria-pressed=true]{color:#fff7e9;background:#f9eddc18;box-shadow:inset 0 0 0 1px #f5e8ce4a}
body[data-light=night] fieldset,body[data-light=dusk] fieldset{border-color:#f9eddc25}
body[data-light=night] .paper{background:linear-gradient(180deg,#b7b4ac22,transparent 22%,transparent 78%,#c3bcaa22)}

body[data-light=night] .dock,body[data-light=dusk] .dock{text-shadow:0 2px 9px #151c23}

#credits-dialog{width:min(660px,92vw);font-size:16px;line-height:1.65}#credits-dialog .credit-recording{padding:16px 0;border-top:1px solid #6a69502b}#credits-dialog h3{font-size:21px;font-weight:400;margin:0 0 5px}#credits-dialog p{margin:5px 0}#credits-dialog .credit-use,#credits-dialog .credits-note{font-size:13px}#credits-dialog .credit-links{display:flex;flex-wrap:wrap;gap:8px 20px}#credits-dialog a{display:inline-block;min-height:40px;padding-top:7px}#preview-neighbour{padding:8px 12px;border:1px solid #847f6355;border-radius:7px;text-decoration:none;margin-bottom:4px}#preview-neighbour:disabled{opacity:.55;cursor:wait}