/* Dark UI for the existing study. Room canvases, artwork and documents retain their colors. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] {
  --paper: var(--surface);
  --green: #a2c7b1;
  --study-frost: #141c29ed;
  --study-frost-edge: #39465e;
  --study-computer: #101d1c;
  --study-control: #20302c;
  --study-control-hover: #293e36;
  --study-control-line: #3c5549;
  --study-computer-ink: #edf5ef;
  --study-computer-muted: #b4c7bc;
  --study-green: #a2c7b1;
  --study-green-solid: #365c47;
  --study-green-solid-hover: #426e54;
  color-scheme: dark;
}

/* The background is visible around the scene on tall screens and during loading. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-shell {
  background: var(--bg);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.home-link,.room-title,.quiet-button,.save-status,.points-pill,.roof-clock,.roof-weather,.scene-hint,.scene-conditions,.scene-footnote button) {
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .scene-conditions {
  background: var(--study-frost);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.quiet-button,.text-button,.icon-button,.scene-footnote button,.footnote button):hover {
  background: var(--card-hover);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .scene-hint::before {
  background: #141c29;
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .presence-light {
  background: #8794a8;
  box-shadow: 0 0 0 3px #2b3545;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .presence-light.online {
  background: #99c5a5;
  box-shadow: 0 0 0 3px #20372a;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] #accountButton {
  background: var(--study-frost);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .footnote {
  color: var(--muted);
  text-shadow: none;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .footnote button {
  background: var(--surface);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.save-status.error,.side-panel .sound-status.error) {
  color: #ffb8ab;
}

/* Drawers, account details, settings and inventory controls. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .panel-backdrop {
  background: #03080b73;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .side-panel {
  --muted: #aab5c8;
  background: var(--study-frost);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 #39465e,0 24px 80px #0006;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.side-panel .muted,.overline,.collection-progress,.friend-info p,.empty-state,.roof-wallet>span,.cabinet-heading>span,.sound-detail,.sound-storage-note) {
  color: var(--muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.icon-button,.tab-row,.stats-grid>div,.inbox-card,.sound-storage-note) {
  background: var(--shell);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .tab-row [aria-selected="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: 0 2px 6px #0003;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.item-card,.pet-choice,.sound-card) {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.item-card p,.item-card .level,.pet-choice>span:last-child) {
  color: var(--muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.item-card button,.accessories button,.placement-slots button,.friend-actions button,.inbox-card button,.sound-card button) {
  background: var(--shell);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.item-card button,.accessories button,.placement-slots button,.friend-actions button,.inbox-card button,.sound-card button):hover {
  background: var(--card-hover);
  border-color: var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.pet-choice.selected,.accessories button.selected) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .placement-box {
  background: var(--shell);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.setting-row,.friend-row,.mobile-room-name) {
  border-color: var(--line);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .setting-row select {
  background: var(--shell);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.setting-row input[type="checkbox"],.setting-row input[type="range"],.collection-progress progress) {
  accent-color: var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .collection-progress progress::-webkit-progress-bar {
  background: var(--line);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .collection-progress progress::-webkit-progress-value {
  background: var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .collection-progress progress::-moz-progress-bar {
  background: var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .friend-avatar:not(img) {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .roof-stage {
  background: var(--shell);
  color: var(--muted);
  border-color: var(--line);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .roof-stage.is-unlocked {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .roof-stage.is-next {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 3px 0 var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .weather-free-note {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .free-label {
  background: var(--accent-soft);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sound-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #79a7ff26;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sound-card button[aria-pressed="true"] {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sound-status {
  color: var(--study-green);
}

/* The computer keeps its existing green identity with darker control surfaces. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel {
  background: var(--study-computer);
  color: var(--study-computer-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .timer-controls {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: 0 10px 40px #0004;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.timer-setup input,.timer-setup select) {
  background: var(--shell);
  border-color: var(--line-2);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .timer-setup input::placeholder {
  color: var(--muted);
  opacity: 1;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .primary-button {
  background: var(--study-green-solid);
  border-color: var(--study-control-line);
  color: var(--study-computer-ink);
  box-shadow: none;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .primary-button:hover {
  background: var(--study-green-solid-hover);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .mode-note {
  color: var(--muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .round-summary {
  background: var(--shell);
  border-color: var(--line-2);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .round-summary>button {
  background: var(--accent-soft);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel .timer-controls {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--study-computer-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel :is(.timer-setup input,.timer-setup select,.round-summary,.round-summary>button,.resources-entry) {
  background: var(--study-control);
  border-color: var(--study-control-line);
  color: var(--study-computer-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel :is(.computer-phase,.computer-header .text-button,.mode-note) {
  color: var(--study-computer-muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel .timer-setup input::placeholder {
  color: var(--study-computer-muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel :is(.text-button,.resources-entry,.round-summary>button):hover {
  background: var(--study-control-hover);
  color: var(--study-computer-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .computer-panel .computer-clock {
  color: var(--study-computer-ink);
}

/* Resource chrome is themed; the embedded PDF itself is left untouched. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-resources {
  background: var(--bg);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-header {
  background: var(--surface);
  border-color: var(--line);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-header button {
  color: var(--ink);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.sr-header button:hover,.sr-timer,.sr-load-status button) {
  background: var(--shell);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.sr-timer small,.sr-search p,.sr-resource span,.sr-empty,.sr-load-status) {
  color: var(--muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-search input {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-categories button {
  color: var(--muted);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-categories button[aria-pressed="true"] {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-resource {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-resource:hover {
  background: var(--card-hover);
  border-color: var(--accent);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-viewer {
  background: var(--bg);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .sr-notice {
  background: var(--shell);
  border: 1px solid var(--line-2);
  color: var(--ink);
}

/* Tutorial paper, copy and progress states; the pigeon illustration keeps its palette. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial {
  --guide-paper: #141c29;
  --guide-ink: #d4e2d9;
  --guide-gold: #e9be78;
  color: var(--guide-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-card {
  border-color: var(--line-2);
  outline: 1px solid var(--line-2);
  box-shadow: 0 0 0 3px #202c3e,0 0 0 6px #39465e,7px 9px 0 6px #0005;
  scrollbar-color: var(--line-2) transparent;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-card::before {
  background-image: radial-gradient(#39465e .6px,transparent .6px);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-topline {
  background: var(--shell);
  border-color: var(--line);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.study-tutorial-brand,.study-tutorial-close,.study-tutorial-zone,.study-tutorial-counter,.study-tutorial-copy p,.study-tutorial-tip p,.study-tutorial-status,.study-tutorial-bottom,.study-tutorial-bottom button) {
  color: var(--muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-close:hover {
  background: var(--card-hover);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-map::before {
  background: repeating-linear-gradient(90deg,#53647b 0 5px,transparent 5px 9px);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-map-stop {
  background: var(--shell);
  color: var(--muted);
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-map-stop[data-state="current"] {
  background: #493923;
  color: #f0c88a;
  border-color: #b68b4c;
  box-shadow: 0 0 0 3px var(--guide-paper),0 0 0 4px #8b6939;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.study-tutorial-map-stop[data-state="done"],.study-tutorial[data-step="done"] .study-tutorial-map-stop) {
  background: var(--study-green-solid);
  color: var(--study-computer-ink);
  border-color: #779985;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-tip {
  background: var(--shell);
  border-color: #779985;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-tip-mark {
  color: var(--study-green);
  border-color: #779985;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-actions button {
  border-color: var(--line-2);
  box-shadow: 3px 3px 0 #090f19;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-actions button:active:not(:disabled) {
  box-shadow: 1px 1px 0 #090f19;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-primary {
  background: var(--study-green-solid);
  color: var(--study-computer-ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-primary:hover {
  background: var(--study-green-solid-hover);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-secondary {
  background: var(--shell);
  color: var(--ink);
  border-color: var(--line-2) !important;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-tutorial-secondary:hover {
  background: var(--card-hover);
}

/* A dark loading shell avoids a full-screen flash while restoring the real room. */
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-loading {
  background: var(--bg);
  color: var(--ink);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .study-loading::before {
  background: radial-gradient(ellipse at 50% 35%,#202d3faa,transparent 65%),repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 5px);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-card {
  background: var(--surface);
  border-color: #779985;
  outline-color: var(--line-2);
  box-shadow: 6px 6px 0 #293449,-4px -4px 0 #192536;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] :is(.loading-topline,.loading-topline button,.loading-eyebrow,.loading-stage,.loading-caption,.loading-home) {
  color: var(--muted);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-topline button {
  border-color: var(--line-2);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-progress {
  background: var(--shell);
  color: var(--study-green);
  border-color: #779985;
  box-shadow: 0 3px 0 #293449;
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-progress::-webkit-progress-bar {
  background: var(--shell);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-progress::-webkit-progress-value {
  background: repeating-linear-gradient(90deg,#779985 0 15px,#294333 15px 18px);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-progress::-moz-progress-bar {
  background: repeating-linear-gradient(90deg,#779985 0 15px,#294333 15px 18px);
}
html.theme-dark body.site-visual[data-site-page="pomodoro.html"] .loading-retry {
  background: var(--study-green-solid);
  border-color: #779985;
  color: var(--study-computer-ink);
  box-shadow: 3px 3px 0 #293449;
}

/* The rotated mobile viewport and its safe-area/loading gaps share the same dark surface. */
html.theme-dark:has(> body.site-visual[data-site-page="study-mobile.html"]),
html.theme-dark:fullscreen:has(> body.site-visual[data-site-page="pomodoro.html"]) {
  background: #0d121c;
}
html.theme-dark:fullscreen:has(> body.site-visual[data-site-page="pomodoro.html"])::backdrop {
  background: #0d121c;
}
html.theme-dark body.site-visual[data-site-page="study-mobile.html"] :is(#studyMobileViewport,#studyLandscapeFrame) {
  background: var(--bg);
  color-scheme: dark;
}

@media (prefers-reduced-transparency: reduce) {
  html.theme-dark body.site-visual[data-site-page="pomodoro.html"] {
    --study-frost: var(--surface);
  }
}