/* Generated raster artwork retains its own paper and pencil pixels. */
:root {--paper:#faf6ec; --ink:#5e665c; --muted:#818778; --line:#d8dbca; --green:#7b927d; --bg:#f8f3e9}
.room {background:#f8f3e9}
.room-wall {inset:0;bottom:0;background:none;z-index:-4}
.room-wall::before,.room-wall::after,.room-floor::after {display:none}
.room-floor {background:none;pointer-events:none}
.room-art {display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-select:none}
.room-wall picture {display:block;width:100%;height:100%}
.desk,.desk-stool,.timer-support,.side-table {position:absolute;z-index:2;background:none;box-shadow:none;border:0;border-radius:0;translate:none;transform:none;pointer-events:none}
.room .desk,.room .computer,.room .desk-stool,.room .timer-support,.room .side-table,.room .calendar-object {filter:none}
.room[data-direct-light=yes] .desk,.room[data-direct-light=yes] .computer,.room[data-direct-light=yes] .desk-stool,.room[data-direct-light=yes] .timer-support,.room[data-direct-light=yes] .side-table {filter:drop-shadow(var(--shadow-x,0px) var(--shadow-y,3px) 4px #786b5518)}
.computer {position:absolute;z-index:3;pointer-events:none}
.desk-stool {z-index:3}
.side-table i,.desk i,.wall-shelf,.plant {display:none}
.window {z-index:1;background:transparent;border:0;border-radius:0;box-shadow:none}
.window-sky {inset:auto;left:15.581854%;top:8.704% ;width:64.69428%;height:82.987398%;clip-path:polygon(0 0,100% 9.31574%,100% 90.19064%,0 100%);border-radius:0;background:linear-gradient(var(--sky-top,#d4e6e9),var(--sky-bottom,#edf0df));overflow:hidden}
.window-sky::after,.window-cross,.window-sill,.cloud {display:none}
.window-frame {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.window-landscape {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--outside-x,80%) 50%;pointer-events:none;opacity:var(--outdoor-light,1)}
.window-plant {position:absolute;pointer-events:none}
.room-object {padding:0;background:transparent;border:0;box-shadow:none;border-radius:6px;transform:none;translate:none;z-index:4;min-width:0;min-height:0}
.object-art {position:absolute;inset:auto;left:calc(50% - var(--art-width,100%)/2);top:calc(50% - var(--art-height,100%)/2);width:var(--art-width,100%);height:var(--art-height,100%);pointer-events:none}
.timer-knob,.notebook-spine,.notebook-ribbon,.notebook-title,.calendar-rings,.calendar-bottom {display:none}
.notebook-art img {position:absolute;pointer-events:none}
.notebook-paper {left:0;top:0;width:77.04545%;height:98.72%}
.notebook-pencil {left:68.0303%;top:30.72%;width:31.9697%;height:69.28%}
.timer-object-face {position:absolute;inset:0;border-radius:0;background:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:12%;pointer-events:none}
.timer-object small {font-size:6px;line-height:1;color:#784f42;opacity:.75}
.timer-object #timer-prop-clock {font-size:clamp(11px,1vw,16px);line-height:1.3;letter-spacing:-.5px;color:#765749;text-shadow:none}
.calendar-object {display:block;padding:0}
.calendar-object small {position:absolute;top:61%;left:0;right:0;font-size:6px;letter-spacing:2px;color:#8c8d73;pointer-events:none}
.calendar-object #calendar-prop-date {position:absolute;top:73%;left:0;right:0;font:clamp(11px,1.15vw,18px)/1.4 var(--serif);color:#737e6b;pointer-events:none}
.object-tooltip {background:#fbf6e9ed;border:1px solid #e0dac9;padding:4px 10px;font-size:11px;top:calc(100% + 5px)}
.rug {z-index:1;border:0;border-radius:0;box-shadow:none;background:transparent;pointer-events:none;transform:none}
.room .pet-button {z-index:5}
.room .green-jelly {z-index:4;border-radius:28%;text-decoration:none;transform:none}
.green-jelly::before {inset:0;border-radius:28%}
.jelly-nest {position:absolute;left:0;bottom:0;width:100%;height:43%;pointer-events:none}
.room .jelly-body {left:17%;top:0;bottom:auto;width:63%;height:70%;transform-origin:50% 80%;overflow:visible;animation:raster-jelly-sway 5.8s ease-in-out infinite}
.jelly-body img {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jelly-closed {visibility:hidden}
.is-blinking .jelly-open {visibility:hidden}
.is-blinking .jelly-closed {visibility:visible}
.jelly-play-mark {right:2%;bottom:3%;background:#faf3e3;border-color:#b5c1a1;width:22px;height:22px;font-size:10px;color:#839675}
@keyframes raster-jelly-sway {0%,30%,70%,100%{transform:rotate(0deg)}38%{transform:rotate(-.4deg)}46%{transform:rotate(.3deg)}54%{transform:rotate(-.2deg)}}
@media(prefers-reduced-motion:reduce){.room .jelly-body{animation:none}}
.room-toolbar {left:var(--chrome-left); right:24px; top:max(22px,env(safe-area-inset-top))}
.room-name {font-size:19px; letter-spacing:3px; color:#75816f}
.icon-button {width:40px; height:40px; font-size:24px; background:#faf5e899; box-shadow:none; border:1px solid #b9c1ac70}
.world-clocks {left:var(--chrome-left); top:74px; gap:24px; color:#798575}
.world-clocks > div {min-width:89px; align-items:flex-start}
.world-clocks time {font-size:27px; line-height:1.25; font-weight:300}
.world-clocks small {font-size:7px; letter-spacing:.3px; color:#9ba48f}
.clock-city {font-size:8px; color:#99a18d}
.room .pet-controls {left:24px}
.pet-controls summary {border:1px solid #b6bfa66b; border-radius:15px; background:#faf4e7a8; box-shadow:none; color:#849477}
.pet-controls[open] {background:#faf6eaf5; border-color:#cbd2bc}
.stick-base {border-color:#9cac896b; border-width:1.3px}
.stick-knob {background:#8fa17bcc}
.pat-button {background:#faf5e599; border:1px solid #b5bea564; color:#90a17f; box-shadow:none}
.room-hint {font-size:10px; letter-spacing:2px; color:#a3aa96}
.speech {bottom:calc(var(--character-bottom) + var(--character-w) * 1.08); color:#7e8b73; background:#faf6eaf2; border:1px solid #d6ddc4; box-shadow:none}
.room-dialog {background:#faf6ec; border:1px solid #d6dcc8; box-shadow:0 16px 60px #53614928}
.room-dialog::backdrop {background:#53644b30; backdrop-filter:blur(3px)}
button:focus-visible, a:focus-visible, textarea:focus-visible, summary:focus-visible {outline-color:#82976d}
@media (max-width:900px) {
  .room-toolbar {right:18px; top:max(20px,env(safe-area-inset-top))}
  .room-name {font-size:16px; letter-spacing:2px}
  .world-clocks {top:65px; gap:16px}
  .world-clocks > div {min-width:72px}
  .world-clocks time {font-size:23px}
  .world-clocks small {font-size:6px}
  .clock-city {font-size:7px}
  .room .pat-button {left:calc(50% + 68px)}
  .room .pet-controls {left:18px}
  .timer-object #timer-prop-clock {font-size:14px}
  .notebook-title {font-size:10px; letter-spacing:.5px}
  .calendar-object #calendar-prop-date {font-size:15px}
  .calendar-object small {font-size:6px; letter-spacing:1px}
  .jelly-play-mark {width:19px; height:19px; font-size:9px}
}
@media (max-width:359px) {
  .world-clocks {gap:11px}
  .world-clocks > div {min-width:63px}
  .world-clocks time {font-size:21px}
  .world-clocks small {font-size:5.5px}
}
@media (max-height:540px) and (max-width:600px) {
  .room-toolbar {top:14px; right:14px}
  .room-name {font-size:14px}
  .world-clocks {top:52px}
  .world-clocks time {font-size:19px}
  .icon-button {width:34px; height:34px; font-size:20px}
  .calendar-object #calendar-prop-date {font-size:12px}
  .calendar-object small {font-size:5px}
  .notebook-title {font-size:9px}
  .room .pet-controls {left:12px}
}
@media (max-height:650px) and (min-width:601px) {
  .room-toolbar {top:15px}
  .room-name {font-size:16px}
  .world-clocks {top:52px; gap:16px}
  .world-clocks > div {min-width:74px}
  .world-clocks time {font-size:22px}
  .timer-object #timer-prop-clock {font-size:14px}
}
.room-wall,.room-floor,.lit .room-wall,.lit .room-floor {background:none;filter:none}
.lamp-glow {position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 260px 200px at calc(var(--desk-x) + var(--desk-w)*.48) calc(var(--desk-y) + var(--desk-w)*.17),#fff1c678,transparent 75%);opacity:0;transition:opacity .6s ease-out}
.lit .lamp-glow {opacity:calc((1 - var(--outdoor-light,1))*.28)}
.room[data-daylight=night] .room-name,.room[data-daylight=night] .world-clocks {color:#485840}
.room[data-daylight=night] .clock-city,.room[data-daylight=night] .world-clocks small {color:#626f56}
@media(max-width:900px){.timer-object #timer-prop-clock{font-size:11px}.calendar-object #calendar-prop-date{font-size:12px}.calendar-object small{font-size:5px}}
@media(max-height:540px){.timer-object #timer-prop-clock{font-size:11px}.calendar-object #calendar-prop-date{font-size:11px}}

/* Ambient illumination belongs to each artwork layer. UI and hit targets do
   not receive a whole-page black overlay. Daytime reproduces the source art. */
.room{--wall-ambient:calc(.84 + var(--outdoor-light,1)*.16);--desk-ambient:calc(.86 + var(--outdoor-light,1)*.14);--near-ambient:calc(.87 + var(--outdoor-light,1)*.13);--far-ambient:calc(.83 + var(--outdoor-light,1)*.17);--cloth-ambient:calc(.88 + var(--outdoor-light,1)*.12);--art-saturation:calc(.92 + var(--outdoor-light,1)*.08)}
.room.lit{--wall-ambient:calc(.92 + var(--outdoor-light,1)*.08);--desk-ambient:calc(.98 + var(--outdoor-light,1)*.02);--near-ambient:calc(.96 + var(--outdoor-light,1)*.04);--far-ambient:calc(.91 + var(--outdoor-light,1)*.09);--cloth-ambient:calc(.95 + var(--outdoor-light,1)*.05);--art-saturation:calc(.97 + var(--outdoor-light,1)*.03)}
#room-background{filter:brightness(var(--wall-ambient)) saturate(var(--art-saturation))}
.desk .room-art,.desk-stool .room-art{filter:brightness(var(--desk-ambient)) saturate(var(--art-saturation))}
.room[data-direct-light] .computer{filter:brightness(var(--desk-ambient)) saturate(var(--art-saturation)) drop-shadow(var(--shadow-x,0px) var(--shadow-y,3px) 4px #786b5518)}
.window-frame,.window-plant,.calendar-object .object-art,.timer-support .room-art,.timer-object .object-art{filter:brightness(var(--far-ambient)) saturate(var(--art-saturation))}
.side-table .room-art,.notebook-art{filter:brightness(var(--near-ambient)) saturate(var(--art-saturation))}
.rug .room-art,.jelly-nest,.jelly-body,.pet-sprite,.pet-button>img{filter:brightness(var(--cloth-ambient)) saturate(var(--art-saturation))}
.room.lit .desk .room-art,.room.lit .desk-stool .room-art{filter:brightness(var(--desk-ambient)) saturate(var(--art-saturation)) sepia(calc((1 - var(--outdoor-light,1))*.03))}
.room.lit .rug .room-art,.room.lit .jelly-nest,.room.lit .jelly-body,.room.lit .pet-sprite,.room.lit .pet-button>img{filter:brightness(var(--cloth-ambient)) saturate(var(--art-saturation)) sepia(calc((1 - var(--outdoor-light,1))*.015))}
/* Fade illumination only; position, sprite frames and input stay immediate. */
.room-world #room-background,.room-world .room-furniture-group .room-art,.room-world .window-frame,.room-world .window-plant,.room-world .calendar-object .object-art,.room-world .rug .room-art,.room-world .jelly-nest,.room-world .jelly-body,.room-world .pet-sprite,.room-world .pet-button>img{transition:filter .6s ease-out}
@media(prefers-reduced-motion:reduce){.room-world #room-background,.room-world .room-furniture-group .room-art,.room-world .window-frame,.room-world .window-plant,.room-world .calendar-object .object-art,.room-world .rug .room-art,.room-world .jelly-nest,.room-world .jelly-body,.room-world .pet-sprite,.room-world .pet-button>img{transition:none}}