:root{--letterbox: #1c120d;--ink: #2e1a10;--note-bg: #fff6e6}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;background:var(--letterbox);overflow:hidden;overscroll-behavior:none}.viewport{position:relative;width:100vw;height:100vh;height:100dvh}.stage{position:absolute;left:50%;top:50%;overflow:hidden;transform-origin:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.sticker{position:absolute;display:block;height:auto}.scenery{object-fit:cover;object-position:left bottom}.bg-slice{position:absolute;top:0;overflow:hidden}.bg-slice img{position:absolute;top:0;max-width:none}.hotspot{position:absolute;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;touch-action:manipulation;transition:translate .25s ease,filter .25s ease}.hotspot img{display:block;width:100%;height:auto;pointer-events:none}.hotspot:focus-visible{outline:3px solid rgba(255,236,200,.9);outline-offset:6px;border-radius:8px}.wall-name{position:absolute;margin:0;text-align:center;font-family:Libre Caslon Text,Georgia,serif;font-weight:700;line-height:1.2;white-space:nowrap;color:var(--ink);text-shadow:0 1px 0 rgba(255,220,180,.35),0 2px 6px rgba(60,25,5,.18)}.wall-name span{display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1),color .35s ease}.wall-name span:hover{transform:translateY(-7px) rotate(-3deg);color:#6b3418;transition-duration:.12s}.clock{transform-origin:50% 2%}.calendar{transform-origin:50% 4%;filter:drop-shadow(3px 6px 6px rgba(50,20,5,.25))}.calendar-month,.calendar-day,.calendar-weekday{position:absolute;left:0;right:0;text-align:center;line-height:1;font-family:Libre Caslon Text,Georgia,serif;font-weight:700;pointer-events:none;transform:translateY(-50%)}.calendar-month{top:22.4%;color:#f6e3c3;text-transform:uppercase;letter-spacing:.08em}.calendar-month span{padding:.15em .45em;background:#5d2409}.calendar-day{top:56%;color:var(--ink)}.calendar-weekday{top:80%;color:#7a4a26;font-style:italic;font-weight:400}.clock img{filter:drop-shadow(4px 8px 10px rgba(50,20,5,.35))}.clock-hands{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(1px 2px 1.5px rgba(0,0,0,.3));pointer-events:none}.pinboard{cursor:default;filter:drop-shadow(6px 12px 14px rgba(50,20,5,.4))}.shelf{height:100%}.pinboard-art{display:block;box-sizing:border-box;width:100%;height:100%;border-style:solid;border-color:transparent}.bookshelf{filter:drop-shadow(6px 12px 14px rgba(50,20,5,.4))}.desk-object{transform-origin:50% 100%;filter:drop-shadow(-6px 6px 6px rgba(40,15,0,.45))}.mug:hover{filter:drop-shadow(0 0 10px rgba(255,214,150,.6)) brightness(1.06)}.calendar:hover,.clock:hover{translate:0 -3px;filter:drop-shadow(-6px 10px 9px rgba(40,15,0,.4)) brightness(1.04)}.window{border-radius:2px;transition:background .8s ease}.window:hover{background:radial-gradient(ellipse at 40% 60%,rgba(255,210,150,.1),transparent 70%)}.window-open{background:radial-gradient(ellipse at 40% 60%,rgba(255,200,130,.18),transparent 75%)}.vine{position:absolute;filter:drop-shadow(8px 10px 10px rgba(40,25,5,.3))}.vine-band{position:absolute;left:0;width:100%;overflow:hidden;transform-origin:0 0;will-change:transform;pointer-events:none}.vine-band img{position:absolute;left:0;max-width:none}.vine-button{position:absolute;top:0;right:25%;bottom:0;left:15%;border:0;background:none;cursor:pointer}.steam{position:absolute;left:calc(59% - 32px);top:-82px;width:64px;height:90px;pointer-events:none;opacity:.35;transition:opacity .6s ease}.steam-strong{opacity:.9}.wisp{fill:none;stroke:#fff8ecbf;stroke-width:3.5;stroke-linecap:round;filter:blur(1.6px);animation:rise 2.7s ease-in-out infinite;opacity:0}@keyframes rise{0%{opacity:0;transform:translateY(6px) scaleX(.8)}35%{opacity:1}to{opacity:0;transform:translateY(-14px) scaleX(1.3)}}.note{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 6px;padding:.45em .8em;border-radius:.65em;background:var(--note-bg);color:var(--ink);font:600 max(15px,calc(15px / var(--stage-scale, 1))) / 1.2 Georgia,serif;white-space:nowrap;box-shadow:0 6px 16px #280f004d;opacity:0;pointer-events:none;transition:opacity .25s ease,translate .25s ease}.note-visible{opacity:1;translate:-50% 0}.hotspot:has(>.note-visible){z-index:50}.clock .note,.calendar .note,.shelf .note{left:auto;right:0;bottom:auto;top:calc(100% + 10px);translate:0 -6px}.clock .note-visible,.calendar .note-visible,.shelf .note-visible{translate:0 0}.shelf .note{bottom:auto;top:40%}.bookshelf .note{bottom:auto;top:42%}.light{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse 900px 850px at 8% 45%,rgba(255,170,90,.28),transparent 70%),radial-gradient(ellipse 120% 100% at 50% 45%,transparent 55%,rgba(30,10,0,.35) 100%);mix-blend-mode:soft-light}.sound-toggle{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:44px;height:44px;z-index:20;display:grid;place-items:center;border:0;border-radius:50%;background:#1e0f088c;color:#fbe9d2;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease}.sound-toggle:hover{background:#1e0f08cc}.sound-toggle svg{width:22px;height:22px}@media(prefers-reduced-motion:reduce){.wisp{animation:none;opacity:.4}}.sound-lab{max-width:520px;margin:0 auto;padding:48px 16px;color:#fbe9d2;font:16px/1.5 Georgia,serif;height:100%;overflow:auto}.sound-lab ul{list-style:none;padding:0;display:grid;gap:10px}.sound-lab li{display:flex;gap:8px}.sound-lab button{flex:1;padding:12px 16px;border:0;border-radius:10px;background:#f3dcbc;color:#2e1a10;font:600 16px Georgia,serif;cursor:pointer}.sound-lab button.secondary{flex:0 0 64px;background:#8a5a3a;color:#fbe9d2}.sound-lab a{color:#f3dcbc}.arrange-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;background:#140a051f}.arrange-box{position:absolute;border:calc(2px / var(--stage-scale, 1)) dashed rgba(255,245,225,.85);border-radius:4px;cursor:move;touch-action:none}.arrange-box:hover{background:#fff0d214}.arrange-selected{border-style:solid;border-color:#ffd27a;background:#ffd27a1a}.arrange-label{--px: calc(1px / var(--stage-scale, 1));position:absolute;left:calc(4 * var(--px));top:calc(4 * var(--px));padding:calc(2 * var(--px)) calc(8 * var(--px));border-radius:calc(6 * var(--px));background:#1e0f08cc;color:#fbe9d2;font:600 calc(13 * var(--px)) / 1.4 system-ui,sans-serif;pointer-events:none}.arrange-handle{--size: calc(24px / var(--stage-scale, 1));position:absolute;right:calc(var(--size) / -2);bottom:calc(var(--size) / -2);width:var(--size);height:var(--size);border-radius:50%;background:#ffd27a;border:calc(2px / var(--stage-scale, 1)) solid #3a1f10;touch-action:none;cursor:nwse-resize}.arrange-toggle,.arrange-panel{position:fixed;left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));z-index:20;font:14px/1.4 system-ui,sans-serif;color:#fbe9d2}.arrange-toggle{padding:9px 14px;border:0;border-radius:999px;background:#1e0f088c;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.arrange-panel{left:50%;translate:-50% 0;width:min(380px,calc(100vw - 32px));padding:14px;border-radius:14px;background:#1e0f08e0;box-shadow:0 10px 30px #0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.arrange-panel-top{top:calc(16px + env(safe-area-inset-top));bottom:auto}.arrange-panel-folded{display:flex;align-items:center;gap:10px;width:auto;padding:8px 10px 8px 14px}.arrange-panel-folded button{white-space:nowrap}.arrange-panel{max-height:calc(100dvh - 32px);overflow-y:auto}.arrange-panel p{margin:6px 0;opacity:.85}.arrange-chips,.arrange-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.arrange-panel button{padding:6px 10px;border:1px solid rgba(251,233,210,.3);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}.arrange-panel button[aria-pressed=true],.arrange-panel button.primary{background:#ffd27a;border-color:#ffd27a;color:#2e1a10;font-weight:600}.arrange-sliders{display:grid;gap:6px;margin-top:8px}.arrange-slider{display:grid;gap:2px;font-variant-numeric:tabular-nums}.arrange-slider input{width:100%;accent-color:#ffd27a}.arrange-readout{font-variant-numeric:tabular-nums}.arrange-status{font-weight:600}
