@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=DM+Mono:wght@300;400&family=Fredoka:wght@500;600;700&family=Manrope:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap");

:root {
  color-scheme: dark;
  --panel: rgba(24, 18, 25, 0.78);
  --line: rgba(255,255,255,.11);
  --text: #f2ede9;
  --muted: rgba(242,237,233,.58);
  --accent: #a995ff;
  --timer-color: hsl(22 34% 43%);
  --clock-color: hsl(205 58% 62%);
  --timer-font: "Fredoka", sans-serif;
  --clock-font: "Fredoka", sans-serif;
}

@property --timer-progress {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --tutorial-aura-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: #050610;
  color: var(--text);
  font-family: "Manrope", sans-serif;
}

button, input { font: inherit; }

.aura-loader {
  position: fixed;
  z-index: 5000;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(2, 3, 11, 0.68);
  -webkit-backdrop-filter: blur(14px) saturate(105%);
  backdrop-filter: blur(14px) saturate(105%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}

.aura-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.aura-loader-welcome {
  --loader-logo-size: clamp(180px, min(25vw, 38vh), 310px);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.aura-loader-logo {
  position: relative;
  display: grid;
  width: var(--loader-logo-size);
  aspect-ratio: 1;
  place-items: center;
  isolation: isolate;
  border-radius: 50%;
  background: #0B0D22;
  box-shadow: inset 0 0 38px rgba(20, 26, 54, 0.42);
}

.aura-loader-copy {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.58);
}

.aura-loader-copy strong {
  position: absolute;
  top: calc(50% - var(--loader-logo-size) / 2 - clamp(81px, 11.8vh, 114px));
  left: 50%;
  width: min(430px, calc(100vw - 36px));
  transform: translateX(-50%);
  color: rgba(255,255,255,.92);
  font: 700 clamp(24px, 4vw, 32px)/1.12 "Manrope", sans-serif;
}

.aura-loader-copy p {
  position: absolute;
  top: calc(50% + var(--loader-logo-size) / 2 + clamp(34px, 6.8vh, 57px));
  left: 50%;
  width: min(320px, calc(100vw - 40px));
  max-width: 320px;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255,255,255,.68);
  font: 400 13px/1.6 "Manrope", sans-serif;
}

@media (max-height: 520px) {
  .aura-loader-welcome {
    --loader-logo-size: clamp(150px, 42vh, 218px);
  }

  .aura-loader-copy strong {
    top: calc(50% - var(--loader-logo-size) / 2 - 64px);
    font-size: 22px;
  }

  .aura-loader-copy p {
    top: calc(50% + var(--loader-logo-size) / 2 + 23px);
    font-size: 12px;
  }
}

.aura-loader-logo::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1.35%;
  border-radius: 50%;
  background: #0B0D22;
  box-shadow: inset 0 0 38px rgba(20, 26, 54, 0.42);
}

.aura-loader-ring,
.aura-loader-glow {
  position: absolute;
  inset: -2.5%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffe75f, #52ff87, #18efff, #4967ff, #ef45ff, #ff4f7e, #ff894a, #ffe75f);
  animation: aura-loader-spin 5.6s linear infinite;
}

.aura-loader-ring {
  z-index: 1;
  padding: 5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: brightness(1.48) saturate(1.25) drop-shadow(0 0 8px rgba(255,255,255,.78));
}

.aura-loader-glow {
  z-index: 0;
  inset: -7%;
  opacity: 0.82;
  filter: blur(20px) saturate(190%) brightness(1.22);
  animation: aura-loader-spin 7.7s linear infinite, aura-loader-pulse 3.8s ease-in-out infinite;
}

.aura-loader-glow-wide {
  inset: -13%;
  opacity: 0.46;
  filter: blur(38px) saturate(180%) brightness(1.18);
  animation: aura-loader-spin 10.5s linear infinite reverse, aura-loader-pulse-wide 5.2s ease-in-out infinite;
}

.aura-loader-logo img {
  position: relative;
  z-index: 3;
  display: block;
  width: 78%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.3));
}

@keyframes aura-loader-spin {
  to { transform: rotate(1turn); }
}

@keyframes aura-loader-pulse {
  0%, 100% { opacity: 0.68; }
  50% { opacity: 0.92; }
}

@keyframes aura-loader-pulse-wide {
  0%, 100% { opacity: 0.34; }
  50% { opacity: 0.56; }
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #050610;
}

.youtube-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #050610;
  pointer-events: none;
}

.youtube-background iframe,
.youtube-background > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.78vh) !important;
  height: max(56.25vw, 100vh) !important;
  min-width: 200px;
  min-height: 200px;
  transform: translate(-50%, -50%);
  border: 0;
}

.video-white-wash {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: #fff;
}

.room {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 6, 12, .1), transparent 40%, rgba(8, 5, 10, .22)),
    radial-gradient(circle at center, transparent 48%, rgba(8, 5, 10, .2));
}

.sky-tint {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 38% at 72% 82%, rgba(90, 99, 190, .16), transparent 72%),
    linear-gradient(180deg, #030718 0%, #091237 26%, #162054 52%, #392b5c 76%, #090d21 100%);
  transition: background .35s ease, opacity .35s ease;
  opacity: .6;
}

.sky-tint.disabled { opacity: 0; }

.music-shell {
  position: fixed;
  z-index: 10;
  left: max(16px, 2.2vw, env(safe-area-inset-left));
  bottom: max(16px, 3.2vh, env(safe-area-inset-bottom));
}

:root {
  --control-edge-x: max(16px, 2.2vw, env(safe-area-inset-right));
  --control-edge-y: max(16px, 3.2vh, env(safe-area-inset-bottom));
  --control-size: 41px;
  --control-gap: 8px;
  --category-gap: 7px;
  --effects-anchor: calc(var(--control-size) + var(--control-gap));
  --sound-anchor: calc(var(--effects-anchor) + var(--control-size) + var(--category-gap));
  --widgets-anchor: calc(var(--sound-anchor) + var(--control-size) + var(--category-gap));
}

.sound-shell {
  position: fixed;
  z-index: 10;
  right: calc(var(--control-edge-x) + var(--effects-anchor));
  bottom: calc(var(--control-edge-y) + var(--sound-anchor));
  left: auto;
}

.sound-shell:has(.station-picker .custom-select.open) {
  z-index: 1000;
}

.sound-shell:has(.station-picker .custom-select.open) .music-player {
  z-index: 1001;
}

.sound-shell:has(.station-picker .custom-select.open) .custom-select-menu {
  z-index: 1002;
}

.menu-shell .sound-mute-toggle {
  position: absolute;
  z-index: 40;
  right: calc(100% + 48px);
  bottom: 4.5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.78);
  background: rgba(21,16,24,.2);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(.88);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease;
}

.menu-shell.auxiliary-visible .sound-mute-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.language-control {
  position: absolute;
  z-index: 42;
  right: calc(100% + 88px);
  bottom: 4.5px;
}

.gallery-control {
  position: absolute;
  z-index: 43;
  right: calc(100% + 128px);
  bottom: 4.5px;
}

.music-widget-control {
  position: absolute;
  z-index: 44;
  right: calc(100% + 168px);
  bottom: 4.5px;
}

.music-widget-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.78);
  background: rgba(21,16,24,.2);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(.88);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease;
}

.menu-shell.auxiliary-visible .music-widget-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.music-widget-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--clock-color) 22%, rgba(21,16,24,.2));
}

.music-widget-icon {
  height: 13px;
  display: flex;
  align-items: end;
  gap: 2px;
}

.music-widget-icon i {
  width: 2px;
  border-radius: 2px;
  background: currentColor;
}

.music-widget-icon i:nth-child(1) { height: 7px; }
.music-widget-icon i:nth-child(2) { height: 13px; }
.music-widget-icon i:nth-child(3) { height: 9px; }

.gallery-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.78);
  background: rgba(21,16,24,.2);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(.88);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease;
}

.menu-shell.auxiliary-visible .gallery-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.gallery-toggle:hover,
.gallery-toggle[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(190,174,255,.5);
  background: rgba(126,101,197,.3);
}

.gallery-icon {
  position: relative;
  width: 14px;
  height: 11px;
  border: 1px solid currentColor;
  border-radius: 2px;
  overflow: hidden;
}

.gallery-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
}

.gallery-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 1px;
  bottom: -2px;
  height: 7px;
  border: 1px solid currentColor;
  transform: rotate(35deg) skewX(-18deg);
}

.background-gallery {
  position: fixed;
  z-index: 500;
  left: 50%;
  right: auto;
  bottom: max(72px, 11vh);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  display: block;
  padding: 8px;
  border: 1px solid rgba(183,165,255,.28);
  border-radius: 18px;
  color: var(--text);
  background: rgba(40,28,75,.24);
  box-shadow: inset 0 0 28px rgba(126,101,197,.08), 0 0 0 3px rgba(169,149,255,.035), 0 10px 30px rgba(5,2,8,.2);
  backdrop-filter: blur(7px) saturate(112%);
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.background-gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--timer-color) 72%, #c9baff 28%), rgba(211,200,255,.16) 46%, color-mix(in srgb, var(--timer-color) 58%, #f18ac8 42%));
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.background-gallery > * { position: relative; z-index: 1; }

.gallery-header {
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 3px 7px;
  color: rgba(255,255,255,.56);
  font: 300 8px "DM Mono", monospace;
  letter-spacing: .18em;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.gallery-heading {
  min-width: 0;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
}

.gallery-heading > span { flex: 0 0 auto; }

.gallery-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  cursor: default;
}

.gallery-tabs::-webkit-scrollbar { display: none; }

.gallery-tabs button {
  flex: 0 0 auto;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255,255,255,.42);
  background: transparent;
  font: 500 6px/1 "DM Mono", monospace;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.gallery-tabs button:hover { color: rgba(255,255,255,.82); }
.gallery-tabs button.active {
  color: #fff;
  border-color: rgba(196,180,255,.34);
  background: rgba(126,101,197,.25);
}

.background-gallery.dragging { z-index: 510; }

.gallery-close {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: 15px;
  cursor: pointer;
}

.gallery-carousel {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 25px;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.background-gallery.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 7px) scale(.97);
}

.gallery-track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 5);
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}

.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery-track.empty {
  min-height: 54px;
  display: grid;
  grid-auto-flow: row;
  place-items: center;
  cursor: default;
}

.gallery-empty {
  margin: 0;
  color: rgba(255,255,255,.42);
  font: 500 7px/1.3 "DM Mono", monospace;
  letter-spacing: .12em;
  text-align: center;
}

.gallery-item {
  position: relative;
  width: 100%;
  height: clamp(48px, 5vw, 54px);
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gallery-item:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.32); }
.gallery-item.active {
  border-color: rgba(199,184,255,.95);
  box-shadow: 0 0 0 2px rgba(147,119,255,.25), 0 0 14px rgba(169,149,255,.38);
}

.gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.personalized-action {
  position: relative;
  width: 100%;
  height: clamp(48px, 5vw, 54px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 4px 5px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px dashed rgba(199,184,255,.34);
  border-radius: 10px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.025);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, opacity .18s ease;
}

.personalized-action:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(199,184,255,.75);
  background: rgba(126,101,197,.18);
  transform: translateY(-1px);
}

.personalized-action > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  pointer-events: none;
}

.personalized-action.ready::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,8,20,.05), rgba(11,8,20,.66));
  pointer-events: none;
}

.personalized-action strong,
.personalized-action span {
  position: relative;
  z-index: 2;
}

.personalized-action strong {
  font: 300 22px/.8 "Manrope", sans-serif;
  transform: scaleX(1.28);
}

.personalized-action span {
  max-width: 100%;
  font: 500 5.5px/1.15 "DM Mono", monospace;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.personalized-action:disabled {
  opacity: .28;
  cursor: default;
}

.personalized-action.error {
  border-color: rgba(255,126,150,.7);
  color: #ffb4c1;
}

.gallery-arrow {
  width: 25px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.045);
  font: 300 20px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: color .18s ease, background .18s ease;
}

.gallery-arrow:hover { color: #fff; background: rgba(126,101,197,.22); }

/* Los cierres permanecen discretos hasta interactuar con su widget. */
:is(
  #stage-timer-close,
  #task-close,
  #gallery-close,
  #clock-close,
  #pomodoro-close,
  #quote-card-close,
  #weather-card-close,
  #stage-clock-close,
  #weather-widget-close,
  #quote-widget-close,
  #music-widget-close
) {
  opacity: 0;
  pointer-events: none;
  transform: scale(.78);
  transition: opacity .18s ease, transform .18s ease, color .18s ease, background .18s ease;
}

.stage-timer:hover #stage-timer-close,
.stage-timer:focus-within #stage-timer-close,
.task-widget:hover #task-close,
.task-widget:focus-within #task-close,
.background-gallery:hover #gallery-close,
.background-gallery:focus-within #gallery-close,
.clock-card:hover #clock-close,
.clock-card:focus-within #clock-close,
.pomodoro-card:hover #pomodoro-close,
.pomodoro-card:focus-within #pomodoro-close,
.quote-card:hover #quote-card-close,
.quote-card:focus-within #quote-card-close,
.weather-card:hover #weather-card-close,
.weather-card:focus-within #weather-card-close,
.stage-clock:hover #stage-clock-close,
.stage-clock:focus-within #stage-clock-close,
.weather-widget:hover #weather-widget-close,
.weather-widget:focus-within #weather-widget-close,
.quote-widget:hover #quote-widget-close,
.quote-widget:focus-within #quote-widget-close,
.music-player:hover #music-widget-close,
.music-player:focus-within #music-widget-close,
:is(
  #stage-timer-close,
  #task-close,
  #gallery-close,
  #clock-close,
  #pomodoro-close,
  #quote-card-close,
  #weather-card-close,
  #stage-clock-close,
  #weather-widget-close,
  #quote-widget-close,
  #music-widget-close
):focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

@media (hover: none) {
  :is(
    #stage-timer-close,
    #task-close,
    #gallery-close,
    #clock-close,
    #pomodoro-close,
    #quote-card-close,
    #weather-card-close,
    #stage-clock-close,
    #weather-widget-close,
    #quote-widget-close,
    #music-widget-close
  ) {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .music-controls-row {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.language-toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.78);
  background: rgba(21,16,24,.2);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(.88);
  backdrop-filter: blur(12px);
  font: 600 8px/1 "DM Mono", monospace;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease;
}

.menu-shell.auxiliary-visible .language-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.language-toggle:hover,
.language-toggle[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(190,174,255,.5);
  background: rgba(126,101,197,.3);
}

.language-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 92px;
  display: grid;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(203,190,255,.2);
  border-radius: 12px;
  background: rgba(24,16,38,.72);
  box-shadow: 0 12px 30px rgba(5,2,8,.28);
  backdrop-filter: blur(14px) saturate(120%);
  transform-origin: right bottom;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.language-menu.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px) scale(.96);
}

.language-menu button {
  min-height: 27px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  color: rgba(255,255,255,.68);
  background: transparent;
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
}

.language-menu button:hover,
.language-menu button.active {
  color: #fff;
  background: rgba(126,101,197,.3);
}

.sound-mute-toggle:hover,
.sound-mute-toggle.active {
  color: #fff;
  border-color: rgba(239,121,121,.5);
  background: rgba(172,71,91,.3);
}

.speaker-icon {
  position: relative;
  width: 16px;
  height: 15px;
  display: block;
}

.speaker-icon::before {
  content: "";
  position: absolute;
  inset: 3px 6px 3px 0;
  background: currentColor;
  clip-path: polygon(0 32%, 38% 32%, 100% 0, 100% 100%, 38% 68%, 0 68%);
}

.speaker-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  width: 7px;
  height: 11px;
  border-right: 1.5px solid currentColor;
  border-radius: 50%;
}

.sound-mute-toggle.muted .speaker-icon::after {
  content: "×";
  top: -1px;
  right: -2px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font: 500 13px/1 "Manrope", sans-serif;
}

.menu-shell .sound-mute-toggle::after {
  z-index: 200;
  top: calc(100% + 5px);
  right: auto;
  bottom: auto;
  left: 50%;
  color: #fff;
  background: rgba(21,16,24,.88);
  text-align: center;
  transform: translate(-50%, -3px);
}

.menu-shell .sound-mute-toggle:hover::after,
.menu-shell .sound-mute-toggle:focus-visible::after { transform: translate(-50%, 0); }

.ambient-panel {
  position: absolute;
  z-index: 30;
  right: 0;
  left: auto;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--category-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform-origin: right center;
  transition: opacity .22s, transform .22s, visibility .22s;
}

.ambient-control {
  position: relative;
  width: var(--control-size);
  height: var(--control-size);
  flex: 0 0 auto;
}

.ambient-slider {
  position: absolute;
  left: 50%;
  bottom: calc(var(--control-size) + 6px);
  width: 28px;
  height: 104px;
  display: grid;
  place-items: center;
  padding: 9px 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(21,16,24,.34);
  box-shadow: 0 7px 25px rgba(5,2,8,.18);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 5px) scale(.9);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.ambient-control:hover .ambient-slider,
.ambient-control:focus-within .ambient-slider {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.ambient-slider input[type="range"] {
  appearance: slider-vertical;
  width: 2px;
  height: 82px;
  writing-mode: vertical-lr;
  direction: rtl;
}

.ambient-panel.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px) scale(.96);
  pointer-events: none;
}

.ambient-choice {
  width: var(--control-size);
  height: var(--control-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.76);
  background: rgba(21,16,24,.16);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  backdrop-filter: blur(10px);
  font-size: 16px;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s;
}

.ambient-choice:hover { transform: translateY(-2px); }
.ambient-choice.active {
  border-color: var(--clock-color);
  color: #fff;
  background: color-mix(in srgb, var(--clock-color) 22%, rgba(21,16,24,.16));
  box-shadow: 0 0 15px color-mix(in srgb, var(--clock-color) 18%, transparent);
}

.ambient-glyph {
  display: block;
  color: currentColor;
  font: 400 18px/1 "Times New Roman", serif;
  text-shadow: none;
}

.ambient-panel .ambient-choice::after {
  z-index: 100;
  color: #fff;
  background: rgba(21,16,24,.9);
  box-shadow: 0 7px 22px rgba(5,2,8,.36);
}

.music-player {
  position: fixed;
  z-index: 20;
  right: auto;
  left: 50%;
  bottom: max(22px, 2.5vh);
  width: min(360px, calc(100vw - 104px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  transform-origin: left center;
  transition: opacity .22s, transform .22s, visibility .22s;
  cursor: default;
}

.music-player .music-visualizer { cursor: move; touch-action: none; }

#music-widget-close {
  top: -80px;
  right: -2px;
}

.music-player.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px) scale(.96);
  pointer-events: none;
}

.music-menu-toggle {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  background: rgba(21,16,24,.12);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  backdrop-filter: blur(10px);
  font-size: 21px;
  cursor: pointer;
  transition: transform .25s, background .25s, border-color .25s;
}

.music-menu-toggle:hover {
  transform: translateY(-3px);
}

.music-menu-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(126,101,197,.32);
}

.music-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  background: transparent;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.music-button:hover,
.music-button:focus-visible {
  outline: 0;
  color: #fff;
  background: rgba(255,255,255,.08);
}

.music-button[aria-pressed="true"] {
  color: var(--clock-color);
  background: color-mix(in srgb, var(--clock-color) 14%, transparent);
}

.music-play {
  width: 38px;
  height: 38px;
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--clock-color) 72%, transparent);
  background: color-mix(in srgb, var(--clock-color) 20%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--clock-color) 18%, transparent);
  font-size: 12px;
}

.music-visualizer {
  height: 35px;
  display: flex;
  align-items: end;
  gap: 2px;
  overflow: hidden;
  padding: 0 2px;
}

.music-visualizer span {
  flex: 1 1 0;
  min-width: 2px;
  height: var(--bar-height);
  border-radius: 999px;
  background: linear-gradient(to top, color-mix(in srgb, var(--clock-color) 68%, #fff), rgba(255,255,255,.9));
  opacity: .5;
  transform-origin: bottom;
}

.music-player.playing .music-visualizer span {
  animation: music-wave var(--bar-speed) ease-in-out infinite alternate;
  animation-delay: var(--bar-delay);
  opacity: .86;
}

@keyframes music-wave {
  from { transform: scaleY(.35); opacity: .48; }
  to { transform: scaleY(1); opacity: .95; }
}

.music-progress {
  width: 100%;
  height: 3px;
  margin: 1px 0 3px;
  background: linear-gradient(to right, var(--clock-color) 0 var(--music-progress, 0%), rgba(255,255,255,.18) var(--music-progress, 0%) 100%);
}

.music-progress::-webkit-slider-thumb { width: 0; height: 0; opacity: 0; }
.music-progress::-moz-range-thumb { width: 0; height: 0; border: 0; opacity: 0; }

.music-controls-row {
  position: absolute;
  z-index: 4;
  top: auto;
  right: 8px;
  bottom: 100%;
  left: 8px;
  display: grid;
  grid-template-columns: 28px 38px minmax(64px, 1fr) 28px minmax(58px, 86px);
  align-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.youtube-url-form {
  position: absolute;
  z-index: 4;
  right: 8px;
  bottom: calc(100% + 42px);
  left: 8px;
  height: 30px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 27px;
  align-items: center;
  gap: 7px;
  padding: 0 4px 0 10px;
  border: 1px solid color-mix(in srgb, var(--clock-color) 36%, rgba(255,255,255,.14));
  border-radius: 15px;
  color: rgba(255,255,255,.66);
  background: rgba(11,13,34,.54);
  box-shadow: 0 6px 20px rgba(3,4,17,.22);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease, border-color .2s ease;
}

.youtube-url-form label {
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: .12em;
}

.youtube-url-form input {
  width: 100%;
  min-width: 0;
  padding: 3px 0;
  border: 0;
  outline: 0;
  color: rgba(255,255,255,.9);
  background: transparent;
  font: 400 10px/1.2 "Manrope", sans-serif;
}

.youtube-url-form input::placeholder { color: rgba(255,255,255,.34); }
.youtube-url-form:has(input[aria-invalid="true"]) { border-color: rgba(255,100,126,.9); }

.youtube-url-form button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: color-mix(in srgb, var(--clock-color) 20%, transparent);
  cursor: pointer;
}

.music-player:hover .music-controls-row,
.music-player:focus-within .music-controls-row,
.music-player:hover .youtube-url-form,
.music-player:focus-within .youtube-url-form,
.music-player.controls-visible .music-controls-row,
.music-player.controls-visible .youtube-url-form {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (hover: none) {
  .music-controls-row,
  .youtube-url-form {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.music-controls-row > .music-button:not(.music-play) { width: 28px; height: 28px; }

.station-picker {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.station-picker > span {
  overflow: hidden;
  color: rgba(255,255,255,.48);
  font: 300 7px/1 "DM Mono", monospace;
  letter-spacing: .14em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.station-picker select {
  width: 100%;
  padding: 0 18px 0 0;
  border: 0;
  outline: 0;
  color: rgba(255,255,255,.9);
  background: transparent;
  font: 500 11px/1.4 "Manrope", sans-serif;
  cursor: pointer;
}

.station-picker option {
  color: #f4eff8;
  background: #2a2038;
}

.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select {
  position: relative;
  min-width: 0;
}

.custom-select-trigger {
  width: 100%;
  height: 25px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  color: var(--text);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
  font: 400 10px "Manrope", sans-serif;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color .18s ease, background .18s ease;
}

.custom-select-trigger:hover,
.custom-select.open .custom-select-trigger {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
}

.custom-select-trigger > span:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-select-chevron {
  opacity: .62;
  transform: translateY(-1px);
  transition: transform .18s ease;
}

.custom-select.open .custom-select-chevron { transform: rotate(180deg) translateY(1px); }

.custom-select-menu {
  position: absolute;
  z-index: 80;
  right: 0;
  bottom: calc(100% + 6px);
  width: max(100%, 180px);
  max-height: 210px;
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(28,21,38,.88);
  box-shadow: 0 14px 35px rgba(13,8,21,.34), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(125%);
  transform-origin: bottom center;
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.custom-select-menu.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(5px) scale(.98);
}

.custom-select-option {
  width: 100%;
  min-height: 28px;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  color: rgba(255,255,255,.72);
  background: transparent;
  font: 400 10px/1.35 "Manrope", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}

.custom-select-option:hover,
.custom-select-option:focus-visible,
.custom-select-option.active {
  outline: 0;
  color: #fff;
  background: rgba(139,111,207,.3);
}

.station-picker .custom-select-trigger {
  height: auto;
  padding: 0 2px 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 500 11px/1.4 "Manrope", sans-serif;
  backdrop-filter: none;
}

.station-picker .custom-select-trigger:hover,
.station-picker .custom-select.open .custom-select-trigger { background: transparent; }

.station-picker .custom-select-menu {
  right: auto;
  left: 0;
  width: max(220px, 100%);
  bottom: calc(100% + 8px);
}

.volume-control {
  display: grid;
  grid-template-columns: 12px 1fr;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
}

.volume-control input[type="range"] {
  height: 3px;
  background: rgba(255,255,255,.18);
}

/* El lienzo principal cubre toda la escena. */
.window-effects {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0);
  mix-blend-mode: screen;
}

#particle-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#ground-particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  object-fit: cover;
  object-position: center center;
  transition: opacity .26s ease, transform .32s ease;
}

.scene-background { z-index: 1; }
.scene-foreground { z-index: 7; }

.scene-layer.changing {
  opacity: 0;
  transform: scale(1.015);
}

.camera-effect {
  --camera-opacity: .5;
  --camera-duration: 5s;
  --camera-shift: 8px;
  position: fixed;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--camera-opacity);
  visibility: visible;
  background:
    repeating-linear-gradient(90deg, rgba(255,40,95,.018) 0 1px, rgba(30,225,255,.018) 1px 2px, transparent 2px 4px),
    rgba(12,18,34,.025);
  backdrop-filter: saturate(1.3) contrast(1.1) hue-rotate(2deg);
  transition: opacity .25s, visibility .25s;
}
.camera-effect.hidden { opacity: 0; visibility: hidden; }
.camera-effect::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.065) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(4,7,16,.18));
  opacity: .64;
}
.camera-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow: inset 5px 0 rgba(255,45,92,.34), inset -5px 0 rgba(35,225,255,.36);
  animation: camera-flicker .18s steps(2) infinite;
}
.camera-glitch {
  position: absolute;
  z-index: 2;
  left: -4%;
  width: 108%;
  height: 5vh;
  opacity: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(255,42,105,.16), transparent 34%, rgba(33,225,255,.18));
  box-shadow: 0 2px 0 rgba(40,230,255,.22), 0 -2px 0 rgba(255,38,98,.2);
  backdrop-filter: saturate(2.1) contrast(1.55) hue-rotate(14deg) blur(.7px);
  animation: camera-glitch 4.6s steps(1, end) infinite;
}
.camera-glitch-one { top: 18%; animation-delay: -.7s; }
.camera-glitch-two { top: 52%; height: 8vh; animation-duration: 5.8s; animation-delay: -2.2s; }
.camera-glitch-three { top: 78%; height: 3.5vh; animation-duration: 3.9s; animation-delay: -1.4s; }
.camera-sweep {
  position: absolute;
  z-index: 4;
  top: -24vh;
  left: -5%;
  width: 110%;
  height: 24vh;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,.14) 4px 5px),
    linear-gradient(180deg, transparent, rgba(65,235,255,.24) 42%, rgba(255,58,124,.2) 58%, transparent);
  box-shadow: 0 -12px 34px rgba(255,46,112,.18), 0 14px 40px rgba(40,225,255,.26);
  backdrop-filter: saturate(2) contrast(1.4) hue-rotate(12deg) blur(1px);
  animation: camera-scan var(--camera-duration) linear infinite;
}
.camera-toggle.active {
  color: #fff;
  border-color: rgba(80,225,255,.62);
  background: rgba(86,65,120,.22);
  box-shadow: 0 0 0 3px rgba(70,220,255,.08), 0 8px 28px rgba(8,3,12,.22);
}
@keyframes camera-scan {
  0% { transform: translate3d(-1.5%, 0, 0) skewX(-1deg); }
  24% { transform: translate3d(.8%, 30vh, 0) skewX(.6deg); }
  49% { transform: translate3d(-.5%, 62vh, 0) skewX(-.4deg); }
  73% { transform: translate3d(1.2%, 92vh, 0) skewX(.8deg); }
  100% { transform: translate3d(-1%, 124vh, 0) skewX(-.8deg); }
}
@keyframes camera-flicker {
  0%, 100% { opacity: .62; transform: translateX(0); }
  50% { opacity: .38; transform: translateX(1px); }
}
@keyframes camera-glitch {
  0%, 68%, 76%, 88%, 96%, 100% { opacity: 0; transform: translateX(0) scaleX(1); }
  69% { opacity: .82; transform: translateX(calc(0px - var(--camera-shift))) scaleX(1.025); }
  71% { opacity: .38; transform: translateX(var(--camera-shift)) scaleX(.985); }
  73% { opacity: .72; transform: translateX(calc(0px - var(--camera-shift))) scaleX(1.012); }
  89% { opacity: .64; transform: translateX(var(--camera-shift)) scaleX(1.018); }
  92% { opacity: .26; transform: translateX(calc(0px - var(--camera-shift))) scaleX(.99); }
}

.glass-shade {
  position: absolute;
  inset: 0;
  opacity: .2;
  background: linear-gradient(115deg, transparent 20%, rgba(187, 191, 255, .12) 48%, transparent 58%);
}

.brand, .window-label {
  position: absolute;
  z-index: 3;
  font-family: "DM Mono", monospace;
  letter-spacing: .32em;
  text-shadow: 0 2px 18px #0c0710;
}

.brand {
  left: 2.7vw;
  bottom: 3.7vh;
  color: #ecd3ac;
  font-size: 12px;
}

.window-label {
  position: fixed;
  z-index: 100;
  top: 3vh;
  left: 2.7vw;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 250, 246, .88);
  font-size: 8px;
  letter-spacing: .18em;
  margin: 0;
  padding: 4px 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-shadow: 0 2px 12px rgba(5,2,8,.9), 0 0 18px rgba(5,2,8,.45);
}
.window-label span { width: 20px; height: 1px; background: #d8c8ff; }
.window-label:hover,
.window-label:focus-visible { color: #fff; background: transparent; }

.quote-widget {
  position: absolute;
  z-index: 12;
  top: 27.5vh;
  left: 50%;
  width: min(700px, calc(100vw - 48px));
  max-width: none;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: #ecd3ac;
  font-family: var(--quote-font, "DM Mono", monospace);
  cursor: move;
  user-select: none;
  touch-action: none;
  transform: translateX(-50%);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.quote-widget.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
}
.quote-widget.changing {
  opacity: 0;
  filter: blur(5px);
}

.weather-widget {
  position: absolute;
  z-index: 12;
  top: max(10px, 1.4vh);
  right: max(24px, 2vw);
  left: auto;
  width: min(193px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 36px 60px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,.9);
  cursor: move;
  user-select: none;
  touch-action: none;
  text-shadow: 0 2px 13px rgba(5,2,8,.72), 0 0 22px rgba(5,2,8,.28);
  transition: opacity .25s ease, transform .25s ease;
}

.widget-direct-close {
  position: absolute;
  z-index: 5;
  top: -5px;
  right: -7px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255,255,255,.65);
  background: rgba(40,28,75,.32);
  box-shadow: 0 5px 18px rgba(5,2,8,.2);
  backdrop-filter: blur(8px);
  font: 400 15px/1 "Manrope", sans-serif;
  cursor: pointer;
}

.quote-widget #quote-widget-close {
  top: -11px;
  right: auto;
  left: 50%;
  translate: -50% 0;
}
.weather-widget.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px);
}
.weather-glyph {
  min-width: 0;
  font: 300 clamp(32px, 3vw, 40px)/.85 "Manrope", sans-serif;
  text-align: center;
}
.weather-widget > strong {
  font: 400 clamp(34px, 3.2vw, 42px)/.85 "Manrope", sans-serif;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.weather-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 2px;
  padding-left: 5px;
  border-left: 1px solid rgba(216,200,255,.48);
}
.weather-copy b {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255,255,255,.94);
  font: 700 9px/1.15 "Manrope", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-copy span {
  max-width: 100%;
  color: rgba(255,255,255,.78);
  font: 500 8px/1.2 "Manrope", sans-serif;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}
.quote-line {
  width: clamp(10px, 1.5vw, 21px);
  height: 1px;
  flex: 0 0 auto;
  background: rgba(216,200,255,.78);
  box-shadow: 0 0 12px rgba(169,149,255,.25);
}
.quote-widget p {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  min-height: 38px;
  max-width: calc(100% - 64px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(8px, .78vw, 12px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .18em;
  display: grid;
  place-items: center;
  text-align: center;
  overflow-wrap: anywhere;
  text-shadow:
    0 2px 3px rgba(55, 57, 66, .98),
    0 0 7px rgba(86, 88, 98, .94),
    0 3px 12px rgba(0, 0, 0, .84);
}

.stage-timer {
  position: absolute;
  z-index: 8;
  top: 29vh;
  left: 8px;
  display: grid;
  justify-items: center;
  transform: none;
  color: var(--timer-color);
  pointer-events: auto;
  cursor: move;
  user-select: none;
  touch-action: none;
  transition: opacity .25s, transform .25s;
}
.stage-timer.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}
.timer-dial {
  position: relative;
  width: min(193px, calc(100vw - 32px));
  height: clamp(112px, 10vw, 126px);
  border-radius: 18px;
  border: 1px solid rgba(183,165,255,.28);
  background: rgba(40,28,75,.24);
  box-shadow:
    inset 0 0 28px rgba(126,101,197,.08),
    0 0 0 3px rgba(169,149,255,.035),
    0 10px 30px rgba(5,2,8,.2);
  backdrop-filter: blur(7px) saturate(112%);
  transition: --timer-progress .45s linear;
}
.timer-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--timer-color) 82%, #c9baff 18%) 0deg var(--timer-progress, 0deg),
    rgba(211,200,255,.16) var(--timer-progress, 0deg) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.timer-dial > #stage-mode {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 50%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: rgba(255,255,255,.8);
  background: transparent;
  font: 600 clamp(7px, .62vw, 10px)/1 "Fredoka", sans-serif;
  letter-spacing: .2em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.timer-dial::after {
  content: none;
}
.stage-timer-actions {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.stage-timer-actions button {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.035);
  font: 400 11px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.stage-timer-actions button:hover,
.stage-timer-actions button:focus-visible {
  color: #fff;
  background: rgba(126,101,197,.25);
  transform: scale(1.06);
  outline: 0;
}
.timer-dial > strong {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  color: rgba(255,255,255,.84);
  font: 700 clamp(34px, 3vw, 46px)/.9 var(--timer-font);
  letter-spacing: .045em;
  text-shadow:
    0 2px 0 rgba(255, 239, 215, .92),
    0 5px 18px rgba(71, 42, 50, .16);
  white-space: nowrap;
  transform: translate(-50%, -48%);
}
.timer-dial .cycle-hearts {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 50%;
  min-height: 0;
  gap: 4px;
  margin: 0;
  padding: 4px 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  transform: translateX(-50%);
}
.timer-dial .cycle-heart {
  font-size: clamp(11px, 1vw, 15px);
  filter: none;
}
.stage-clock {
  position: absolute;
  z-index: 8;
  top: 6.5vh;
  left: 50%;
  color: var(--clock-color);
  pointer-events: auto;
  cursor: move;
  user-select: none;
  touch-action: none;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  transition: opacity .25s, transform .25s;
}
.stage-clock.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, -10px); }
.clock-time-line {
  position: relative;
  display: block;
}
.stage-clock strong {
  position: relative;
  display: block;
  font: 700 clamp(70px, 10vw, 154px)/.9 var(--clock-font);
  letter-spacing: .06em;
  text-shadow: 0 2px 0 rgba(255,255,255,.42), 0 8px 28px rgba(5,2,8,.2);
  white-space: nowrap;
}
.clock-period {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 8%;
  color: var(--clock-color);
  font: 600 clamp(9px, 1vw, 15px)/1 var(--clock-font);
  letter-spacing: .08em;
  opacity: .78;
  text-shadow: 0 3px 12px rgba(5,2,8,.45);
}
.clock-period.hidden { display: none; }
.clock-date {
  margin-top: 8px;
  color: var(--clock-color);
  font: 600 clamp(10px, 1.05vw, 17px)/1.2 var(--clock-font);
  letter-spacing: .045em;
  opacity: .8;
  text-align: center;
  text-shadow: 0 3px 14px rgba(5,2,8,.5);
  white-space: nowrap;
}

.task-widget {
  position: absolute;
  z-index: 12;
  top: 6.5vh;
  right: auto;
  left: 8px;
  width: min(193px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid rgba(183,165,255,.28);
  border-radius: 18px;
  color: var(--text);
  background: rgba(40,28,75,.24);
  box-shadow:
    inset 0 0 28px rgba(126,101,197,.08),
    0 0 0 3px rgba(169,149,255,.035),
    0 10px 30px rgba(5,2,8,.2);
  backdrop-filter: blur(7px) saturate(112%);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.task-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--timer-color) 72%, #c9baff 28%),
    rgba(211,200,255,.16) 46%,
    color-mix(in srgb, var(--timer-color) 58%, #f18ac8 42%)
  );
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.task-widget > * {
  position: relative;
  z-index: 1;
}

.task-widget.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(.98);
}

.task-widget.dragging,
.draggable-widget.dragging {
  z-index: 70;
  transition: none;
}

.task-widget header {
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 3px 7px;
  color: rgba(255,255,255,.56);
  font: 300 8px "DM Mono", monospace;
  letter-spacing: .18em;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.task-widget header button {
  width: 23px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,.045);
  font-size: 15px;
  cursor: pointer;
}

.task-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-count-control {
  height: 23px;
  display: grid;
  grid-template-columns: 18px 17px 18px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}

.task-count-control button {
  width: 18px !important;
  height: 21px !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: 14px !important;
}

.task-count-control button:disabled {
  opacity: .22;
  cursor: default;
}

.task-count-control output {
  color: rgba(255,255,255,.72);
  font: 500 8px/1 "DM Mono", monospace;
  letter-spacing: 0;
  text-align: center;
  user-select: none;
}

.task-list {
  display: grid;
  gap: 3px;
}

.task-row {
  min-height: 35px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 5px;
  border-radius: 10px;
  background: rgba(255,255,255,.012);
  transition: background .16s ease, opacity .16s ease;
}

.task-row:focus-within { background: rgba(126,101,197,.2); }

.task-row input {
  appearance: none;
  width: 14px;
  height: 14px;
  justify-self: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 4px;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.task-check {
  position: relative;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  justify-self: center;
}

.task-check-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(255,255,255,.94);
  font: 600 12px/1 "Manrope", sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -52%) scale(.65);
  transition: opacity .15s ease, transform .15s ease;
}

.task-row input:checked {
  border-color: rgba(183,165,255,.82);
  background: rgba(126,101,197,.72);
  box-shadow: inset 0 0 0 3px rgba(24,16,31,.62);
}
.task-row input:checked + .task-check-mark {
  opacity: 1;
  transform: translate(-50%, -52%) scale(1);
}

.task-text {
  min-width: 0;
  padding: 4px 2px;
  outline: 0;
  color: rgba(255,255,255,.86);
  font: 400 11px/1.35 "Manrope", sans-serif;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-text:empty::before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,.3);
  pointer-events: none;
}

.task-row.completed { opacity: .62; }
.task-row.completed .task-text {
  text-decoration-line: line-through;
  text-decoration-color: rgba(255,255,255,.28);
  text-decoration-thickness: 1px;
}
.cycle-hearts {
  min-height: 18px;
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
.cycle-heart {
  color: rgba(255, 225, 234, .68);
  font-size: clamp(15px, 1.4vw, 22px);
  filter: drop-shadow(0 1px 4px rgba(106, 74, 126, .28));
  transition: color .3s, filter .3s, transform .3s;
}
.cycle-heart.completed {
  color: #f08b94;
  transform: scale(1.08);
  filter: drop-shadow(0 2px 6px rgba(240,139,148,.48));
}

.pomodoro, .clock-control, .quote-control, .weather-control {
  position: relative;
}

.pomodoro-toggle, .clock-toggle, .task-toggle, .quote-toggle, .weather-toggle {
  width: var(--control-size);
  height: var(--control-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(21,16,24,.12);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  backdrop-filter: blur(10px);
  font: 300 10px "DM Mono", monospace;
  cursor: pointer;
}
.clock-icon {
  font: 600 10px/1 "DM Mono", monospace;
  letter-spacing: -.08em;
}
.clock-toggle.active {
  color: #fff;
  border-color: var(--clock-color);
  background: rgba(126,101,197,.2);
  box-shadow: 0 0 0 3px rgba(169,149,255,.1), 0 8px 28px rgba(8,3,12,.28);
}
.pomodoro-toggle.active {
  color: #fff;
  border-color: var(--timer-color);
  background: rgba(126,101,197,.22);
  box-shadow: 0 0 0 3px rgba(169,149,255,.1), 0 8px 28px rgba(8,3,12,.28);
}
.task-toggle.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(126,101,197,.22);
}
.task-toggle { font-size: 18px; }
.quote-toggle { font-size: 20px; }
.quote-toggle.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(126,101,197,.22);
  box-shadow: 0 0 0 3px rgba(169,149,255,.1), 0 8px 28px rgba(8,3,12,.28);
}
.weather-toggle { font-size: 19px; }
.weather-toggle.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(126,101,197,.22);
  box-shadow: 0 0 0 3px rgba(169,149,255,.1), 0 8px 28px rgba(8,3,12,.28);
}

.timer-icon {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.timer-icon::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -4px;
  width: 3px;
  height: 3px;
  border-top: 1px solid currentColor;
}
.timer-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 1px;
  height: 5px;
  background: currentColor;
  transform-origin: bottom;
  transform: rotate(35deg);
}

.pomodoro-card, .clock-card, .quote-card, .weather-card {
  position: absolute;
  right: 0;
  bottom: 58px;
  width: min(190px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(21,16,24,.42);
  box-shadow: 0 18px 55px rgba(5,2,8,.28);
  backdrop-filter: blur(18px) saturate(115%);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.pomodoro-card.hidden, .clock-card.hidden, .quote-card.hidden, .weather-card.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px) scale(.98);
}
.pomodoro-card header, .clock-card header, .quote-card header, .weather-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font: 300 8px "DM Mono", monospace;
  letter-spacing: .18em;
}
.pomodoro-card header button, .clock-card header button, .quote-card header button, .weather-card header button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  font-size: 17px;
  cursor: pointer;
}
.clock-card { width: min(180px, calc(100vw - 32px)); }
.quote-card { width: min(190px, calc(100vw - 32px)); }
.weather-card { width: min(190px, calc(100vw - 32px)); }
.weather-city-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29px;
  gap: 5px;
  margin-top: 9px;
}
.weather-city-editor input {
  min-width: 0;
  height: 29px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  color: var(--text);
  background: rgba(255,255,255,.05);
  font: 400 10px "Manrope", sans-serif;
}
.weather-city-editor input:focus { border-color: var(--accent); }
.weather-card.weather-invalid { animation: weather-card-shake .46s ease; }
.weather-card.weather-invalid .weather-city-editor input {
  border-color: rgba(255, 92, 112, .9);
  box-shadow: 0 0 0 2px rgba(255, 75, 99, .11), 0 0 14px rgba(255, 75, 99, .13);
}
.weather-card.weather-invalid .weather-status { color: rgba(255, 150, 163, .82); }

@keyframes weather-card-shake {
  0%, 100% { translate: 0 0; }
  20% { translate: -5px 0; }
  40% { translate: 5px 0; }
  60% { translate: -3px 0; }
  80% { translate: 3px 0; }
}
.weather-city-editor button {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #fff;
  background: rgba(126,101,197,.28);
  cursor: pointer;
}
.weather-city-editor button:disabled { opacity: .4; cursor: wait; }
.weather-status {
  min-height: 10px;
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.42);
  font: 300 7px/1.2 "DM Mono", monospace;
  letter-spacing: .12em;
  text-align: right;
}
.quote-interval {
  display: grid;
  grid-template-columns: 1fr 42px auto;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font: 300 7px "DM Mono", monospace;
  letter-spacing: .12em;
}
.quote-interval input {
  width: 42px;
  height: 27px;
  padding: 0 4px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  color: var(--text);
  background: rgba(255,255,255,.045);
  text-align: center;
  font: 400 10px "DM Mono", monospace;
}
.quote-interval input:focus { border-color: var(--accent); }
.quote-interval input::-webkit-inner-spin-button,
.quote-interval input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.quote-interval input[type="number"] { appearance: textfield; }
.quote-custom-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 29px;
  gap: 5px;
  margin-top: 8px;
}
.quote-custom-editor input {
  min-width: 0;
  height: 29px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  color: var(--text);
  background: rgba(255,255,255,.05);
  font: 400 9px "Manrope", sans-serif;
}
.quote-custom-editor input:focus { border-color: var(--accent); }
.quote-custom-editor button {
  width: 29px;
  height: 29px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #fff;
  background: rgba(126,101,197,.28);
  cursor: pointer;
}
.time-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.time-fields label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font: 300 8px "DM Mono", monospace;
}
.time-fields input {
  width: 38px;
  height: 28px;
  display: inline-block;
  margin: 0;
  padding: 0 3px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: none;
  color: var(--text);
  background: rgba(255,255,255,.045);
  text-align: center;
  font: 300 11px "DM Mono", monospace;
}
.time-fields input:focus { border-color: var(--accent); }
.time-fields input::-webkit-inner-spin-button,
.time-fields input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.time-fields input[type="number"] { appearance: textfield; }
.timer-color {
  height: 20px;
  display: grid;
  place-items: center;
  margin-top: 8px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}
.timer-color input[type="range"] {
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ef7979,
    #efcf79,
    #80dc86,
    #77d9dd,
    #8293ef,
    #c982ef,
    #ef79aa,
    #ef7979
  );
}
.timer-color input[type="range"]::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.9);
  background: var(--timer-color);
  box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.clock-color input[type="range"]::-webkit-slider-thumb { background: var(--clock-color); }
.font-picker {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: var(--muted);
  font: 300 7px "DM Mono", monospace;
  letter-spacing: .12em;
}
.font-picker select {
  min-width: 0;
  height: 25px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  color: var(--text);
  background: rgba(255,255,255,.06);
  font: 400 10px "Manrope", sans-serif;
}
.font-picker option { color: #f4eff8; background: #2a2038; }
.font-picker .custom-select { width: 100%; }
.clock-format {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 7px;
}
.clock-format-choice {
  height: 25px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font: 400 9px "DM Mono", monospace;
  cursor: pointer;
}
.clock-format-choice.active {
  color: #fff;
  border-color: var(--clock-color);
  background: rgba(126,101,197,.24);
}
.heart-preview {
  min-height: 25px;
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 5px 0 3px;
}
.heart-choice {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  color: rgba(240,139,148,.28);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: color .18s, transform .18s;
}
.heart-choice:hover { transform: scale(1.12); }
.heart-choice.selected {
  color: #f08b94;
  filter: drop-shadow(0 2px 5px rgba(240,139,148,.28));
}
.menu-shell {
  position: fixed;
  z-index: 100;
  right: var(--control-edge-x);
  bottom: var(--control-edge-y);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.menu-shell .settings-reset {
  position: absolute;
  z-index: 3;
  right: calc(100% + 8px);
  left: auto;
  bottom: 4.5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.78);
  background: rgba(21,16,24,.2);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px) scale(.88);
  backdrop-filter: blur(12px);
  font: 400 20px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease, background .18s ease;
}

.menu-shell.auxiliary-visible .settings-reset {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.settings-reset:hover,
.settings-reset:focus-visible {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: rgba(126,101,197,.3);
  outline: 0;
}

.menu-shell .settings-reset::after {
  z-index: 200;
  top: calc(100% + 5px);
  right: auto;
  bottom: auto;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -3px);
}

.menu-shell .settings-reset:hover::after,
.menu-shell .settings-reset:focus-visible::after { transform: translate(-50%, 0); }

.category-stack {
  position: absolute;
  z-index: 120;
  right: 0;
  bottom: calc(100% + var(--control-gap));
  display: grid;
  gap: var(--category-gap);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.category-stack.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.96);
}

.category-button {
  width: var(--control-size);
  height: var(--control-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.72);
  background: rgba(21,16,24,.16);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  backdrop-filter: blur(10px);
  font: 400 17px/1 "Times New Roman", serif;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.category-button::after {
  top: 50%;
  right: calc(100% + 8px);
  bottom: auto;
  left: auto;
  transform: translate(4px, -50%);
}

.category-button:hover::after,
.category-button:focus-visible::after {
  transform: translate(0, -50%);
}

.menu-shell [data-tooltip]:hover,
.menu-shell [data-tooltip]:focus-visible,
.sound-shell [data-tooltip]:hover,
.sound-shell [data-tooltip]:focus-visible,
.effect-control:hover,
.effect-control:focus-within,
.ambient-control:hover,
.ambient-control:focus-within {
  z-index: 200;
}

.category-button:hover { color: #fff; transform: translateY(-2px); }
.category-button.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(126,101,197,.28);
}

.category-hidden,
.legacy-sound-toggle { display: none !important; }

.floating-controls {
  position: absolute;
  right: var(--effects-anchor);
  bottom: var(--effects-anchor);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  max-width: calc(100vw - 90px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.floating-controls[data-category="effects"] { bottom: var(--effects-anchor); }
.floating-controls[data-category="widgets"] { bottom: var(--widgets-anchor); }
.floating-controls.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px) scale(.97);
}

.effect-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px;
  max-width: calc(100vw - 90px);
}

.effect-control {
  position: relative;
  width: var(--control-size);
  height: var(--control-size);
  display: grid;
  place-items: center;
}

.effect, .tone-button {
  width: var(--control-size);
  height: var(--control-size);
  justify-self: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.72);
  background: rgba(21, 16, 24, .12);
  box-shadow: 0 7px 25px rgba(5, 2, 8, .22);
  backdrop-filter: blur(9px);
  cursor: pointer;
  transition: border .2s, color .2s, background .2s, transform .2s;
}
.effect:hover, .tone-button:hover { color: var(--text); transform: translateY(-3px); }
.effect.active {
  color: #fff;
  border-color: var(--accent);
  background: rgba(126, 101, 197, .2);
  box-shadow: 0 0 0 3px rgba(169,149,255,.1), 0 8px 28px rgba(8,3,12,.28);
}
.tone-button {
  border-color: rgba(255, 196, 119, .35);
  background: rgba(92, 69, 112, .16);
}
.gradient-next {
  position: absolute;
  z-index: 3;
  bottom: calc(var(--control-size) + 108px);
  left: 50%;
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  color: rgba(255,255,255,.78);
  background: transparent;
  text-shadow: 0 2px 10px rgba(5,2,8,.7);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: color .2s, opacity .2s, visibility .2s, transform .2s;
}
.effect-control.slider-visible .gradient-next {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.gradient-next:hover { color: #fff; transform: translateX(-50%) scale(1.14); }
.weather-icon { font-size: 20px; line-height: 1; }

.effect-slider {
  position: absolute;
  left: 50%;
  bottom: var(--control-size);
  width: 28px;
  height: 104px;
  display: grid;
  place-items: center;
  padding: 10px 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(21, 16, 24, .27);
  box-shadow: 0 7px 25px rgba(5, 2, 8, .18);
  backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 5px) scale(.9);
  transition: opacity .22s, transform .22s, visibility .22s;
}
.effect-control.slider-visible .effect-slider {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.effect-slider input[type="range"] {
  appearance: slider-vertical;
  width: 2px;
  height: 82px;
  writing-mode: vertical-lr;
  direction: rtl;
}
.effect-control:not(.slider-visible) .effect-slider {
  opacity: 0;
  visibility: hidden;
}

input[type="range"] {
  appearance: none;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.16);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 11px; height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent);
}
#strength-air::-webkit-slider-thumb { background: var(--petal-color, #ffbed8); }
#strength-air {
  background: linear-gradient(
    to top,
    #f3b4ca 0% 8.33%,
    #e88ac4 8.33% 16.66%,
    #bce5a9 16.66% 25%,
    #6f9b79 25% 33.33%,
    #f3dfa0 33.33% 41.66%,
    #b8967d 41.66% 50%,
    #f1b17f 50% 58.33%,
    #f7f4ee 58.33% 66.66%,
    #55545c 66.66% 75%,
    #e88f8b 75% 83.33%,
    #a9dced 83.33% 91.66%,
    #7189b0 91.66% 100%
  );
}

.utility-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.ambient-sound-toggle, .menu-toggle {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  background: rgba(21,16,24,.12);
  box-shadow: 0 7px 25px rgba(5,2,8,.2);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.scene .fullscreen-toggle {
  position: fixed;
  z-index: 60;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  outline: 0;
  color: rgba(255,255,255,.82);
  background: transparent;
  box-shadow: none;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 2px 8px rgba(5,2,8,.5));
  transition: color .18s ease, transform .18s ease;
}
.scene .fullscreen-toggle:hover { color: #fff; transform: scale(1.1); }
.scene .fullscreen-toggle::after { right: 0; left: auto; transform: translateY(-3px); }
.scene .fullscreen-toggle:hover::after,
.scene .fullscreen-toggle:focus-visible::after { transform: translateY(0); }

.ambient-sound-toggle {
  width: 41px;
  height: 41px;
  font-size: 15px;
  transition: transform .25s, background .25s, border-color .25s;
}
.ambient-sound-toggle:hover { transform: translateY(-3px); }
.ambient-sound-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: rgba(126,101,197,.22);
}
.menu-toggle {
  position: relative;
  width: 41px;
  height: 41px;
  gap: 3px;
  align-content: center;
  transition: transform .25s, background .25s;
}
.menu-toggle > span {
  width: 13px;
  height: 2px;
  display: block;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s, opacity .25s;
}
.menu-toggle[aria-expanded="true"] { background: rgba(126,101,197,.22); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  top: calc(100% + 7px);
  left: 50%;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(21,16,24,.52);
  box-shadow: 0 5px 18px rgba(5,2,8,.18);
  backdrop-filter: blur(10px);
  font: 300 8px/1 "DM Mono", monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -3px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.menu-toggle::after {
  right: 0;
  left: auto;
  transform: translateY(-3px);
}
.menu-toggle:hover::after,
.menu-toggle:focus-visible::after {
  transform: translateY(0);
}

/* El selector del reloj controla únicamente el contorno de los botones. */
button {
  border-color: color-mix(in srgb, var(--clock-color) 72%, transparent) !important;
}

button:is(.active, [aria-pressed="true"], [aria-expanded="true"]) {
  border-color: var(--clock-color) !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-intro {
  position: fixed;
  z-index: 101;
  top: calc(3vh + 27px);
  left: 2.7vw;
  width: min(360px, calc(100vw - 56px));
  color: rgba(255, 255, 255, 0.9);
  font-family: ui-sans-serif, system-ui, sans-serif;
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transform-origin: left top;
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.site-intro.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-7px) scale(.985);
}

.site-intro-card {
  position: relative;
  padding: 20px;
  border: 1px solid rgba(183,165,255,.28);
  border-radius: 18px;
  background: rgba(40,28,75,.24);
  box-shadow: inset 0 0 28px rgba(126,101,197,.08), 0 0 0 3px rgba(169,149,255,.035), 0 10px 30px rgba(5,2,8,.2);
  backdrop-filter: blur(9px) saturate(112%);
}

.site-intro-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--timer-color) 72%, #c9baff 28%), rgba(211,200,255,.16) 46%, color-mix(in srgb, var(--timer-color) 58%, #f18ac8 42%));
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.site-intro-card > * { position: relative; z-index: 1; }

.site-intro-close {
  position: absolute !important;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.045);
}

.site-intro h1 {
  margin: 0 28px 8px 0;
  font-size: 18px;
  line-height: 1.2;
}

.site-intro p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.55;
}

.site-intro nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}

.site-intro a,
.site-intro nav button {
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-socials {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.site-intro nav .site-social {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 50%;
  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.035);
  text-decoration: none;
  cursor: default;
}

.site-social svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-social:first-child svg path,
.site-social:last-child svg path:first-child { fill: currentColor; stroke: none; }
.site-social .social-fill { fill: currentColor; stroke: none; }

.site-intro nav button {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

@media (max-width: 640px) {
  .site-intro {
    top: 44px;
    left: 16px;
    width: min(320px, calc(100vw - 32px));
  }
}

.onboarding {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 4, 14, .78);
  backdrop-filter: blur(3px);
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility .28s ease;
}

.onboarding.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.onboarding-card {
  position: fixed;
  z-index: 1105;
  left: 50%;
  top: 50%;
  width: min(330px, calc(100vw - 40px));
  min-height: 196px;
  padding: 22px;
  border: 1px solid transparent;
  border-radius: 22px;
  color: rgba(255,255,255,.92);
  isolation: isolate;
  background: transparent;
  box-shadow: inset 0 0 34px rgba(126,101,197,.1), 0 18px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(15px) saturate(118%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.tutorial-card-surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 22px;
  background: #0B0D22;
  box-shadow: inset 0 0 34px rgba(126,101,197,.1);
  pointer-events: none;
}

.onboarding-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -2px;
  padding: 2px;
  border-radius: 24px;
  background: conic-gradient(from var(--tutorial-aura-angle), #ffe75f, #52ff87, #18efff, #4967ff, #ef45ff, #ff4f7e, #ff894a, #ffe75f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: brightness(1.32) saturate(1.28) drop-shadow(0 0 5px rgba(118,101,255,.42));
  pointer-events: none;
  animation: tutorial-aura-border 5.6s linear infinite;
}

.onboarding-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4%;
  border-radius: 26px;
  background: conic-gradient(from var(--tutorial-aura-angle), #ffe75f, #52ff87, #18efff, #4967ff, #ef45ff, #ff4f7e, #ff894a, #ffe75f);
  opacity: 0.58;
  filter: blur(15px) saturate(1.65) brightness(1.12);
  pointer-events: none;
  animation: tutorial-aura-border 5.6s linear infinite, tutorial-aura-pulse 4.2s ease-in-out infinite;
}

.tutorial-aura-glow {
  position: absolute;
  z-index: 0;
  inset: -8%;
  border-radius: 30px;
  background: conic-gradient(from var(--tutorial-aura-angle), #ffe75f, #52ff87, #18efff, #4967ff, #ef45ff, #ff4f7e, #ff894a, #ffe75f);
  opacity: 0.28;
  filter: blur(28px) saturate(1.55) brightness(1.08);
  pointer-events: none;
  animation: tutorial-aura-border 10.5s linear infinite reverse, tutorial-aura-pulse-wide 5.2s ease-in-out infinite;
}

.onboarding-card > :not(.tutorial-card-surface):not(.tutorial-aura-glow) {
  position: relative;
  z-index: 3;
}

.tutorial-card-surface {
  position: absolute;
  z-index: 1;
}

.tutorial-aura-glow {
  position: absolute;
  z-index: 0;
}

@keyframes tutorial-aura-border {
  to { --tutorial-aura-angle: 360deg; }
}

@keyframes tutorial-aura-pulse {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.62; }
}

@keyframes tutorial-aura-pulse-wide {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.34; }
}

.onboarding-kicker {
  display: none;
}

.onboarding h2 {
  margin: 0;
  font: 700 clamp(24px, 4vw, 32px)/1.12 "Manrope", sans-serif;
  white-space: pre-line;
}

.onboarding h2 strong {
  display: block;
  margin-top: -0.08em;
  color: inherit;
  font: inherit;
}

.onboarding p {
  margin: 13px auto 0;
  max-width: 320px;
  color: rgba(255,255,255,.68);
  font: 400 13px/1.6 "Manrope", sans-serif;
}

.onboarding-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 23px;
}

.onboarding-actions button {
  min-width: 112px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.055);
  font: 600 11px/1 "Manrope", sans-serif;
}

.onboarding-actions .onboarding-next {
  color: #fff;
  background: color-mix(in srgb, var(--clock-color) 32%, rgba(40,28,75,.72));
}

.onboarding[data-step="settings"] .onboarding-card,
.onboarding[data-step="effects"] .onboarding-card,
.onboarding[data-step="sound"] .onboarding-card,
.onboarding[data-step="widgets"] .onboarding-card {
  top: auto;
  bottom: max(96px, calc(var(--control-edge-y) + 72px));
  transform: translateX(-50%);
}

.onboarding[data-step="fullscreen"] .onboarding-card {
  top: 76px;
  right: 28px;
  left: auto;
  width: min(330px, calc(100vw - 40px));
  transform: none;
}

.onboarding[data-step="settings"] .onboarding-card,
.onboarding[data-step="effects"] .onboarding-card,
.onboarding[data-step="sound"] .onboarding-card,
.onboarding[data-step="widgets"] .onboarding-card,
.onboarding[data-step="fullscreen"] .onboarding-card {
  min-height: 196px;
}

.tutorial-highlight {
  z-index: 1102 !important;
  pointer-events: none !important;
}

.sound-shell.tutorial-highlight .ambient-panel {
  z-index: 1103 !important;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu-shell.tutorial-highlight #menu-toggle,
.fullscreen-toggle.tutorial-highlight {
  color: #fff !important;
  filter: drop-shadow(0 0 7px var(--clock-color)) drop-shadow(0 0 20px var(--clock-color));
  animation: tutorial-glow 1.5s ease-in-out infinite;
}

.category-button.tutorial-demo-highlight {
  z-index: 1104 !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--clock-color) 34%, rgba(40,28,75,.72)) !important;
  filter: drop-shadow(0 0 7px var(--clock-color)) drop-shadow(0 0 18px var(--clock-color));
  animation: tutorial-glow 1.15s ease-in-out infinite;
}

@keyframes tutorial-glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@media (max-width: 640px) {
  .onboarding[data-step="settings"] .onboarding-card,
  .onboarding[data-step="effects"] .onboarding-card,
  .onboarding[data-step="sound"] .onboarding-card,
  .onboarding[data-step="widgets"] .onboarding-card {
    bottom: 140px;
  }

  .onboarding[data-step="fullscreen"] .onboarding-card {
    top: 72px;
    right: 20px;
  }
}

@keyframes slider-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  :root { --control-size: 40px; }
  .background-gallery {
    left: 50%;
    right: auto;
    bottom: 67px;
  }

  .background-gallery { width: calc(100vw - 24px); }
  .gallery-track { grid-auto-columns: calc((100% - 14px) / 3); }
  .gallery-heading { gap: 7px; }
  .gallery-tabs button { padding-inline: 6px; }
  .room { object-position: center; }
  .scene-layer { width: 100vw; }
  .window-effects { width: 100%; height: 100%; }
  .menu-shell { right: 16px; bottom: 18px; }
  .pomodoro-card { right: 0; bottom: 56px; }
  .floating-controls { max-width: calc(100vw - 92px); gap: 6px; }
  .effect-grid { gap: 4px; }
  .effect-control, .effect, .tone-button { width: var(--control-size); height: var(--control-size); }
  .effect-slider { bottom: 40px; }
  .effect-slider { height: 92px; }
  .gradient-next { bottom: 136px; }
  .effect-slider input[type="range"] { height: 70px; }
  .stage-clock { top: 10vh; }
  .stage-timer { top: 24vh; }
  .music-player {
    right: 0;
    left: auto;
    bottom: 0;
    grid-template-columns: 1fr;
    width: min(340px, calc(100vw - 84px));
  }
  .music-shell { left: 16px; bottom: 18px; }
  .sound-shell { right: 65px; bottom: 115px; left: auto; }
  .ambient-panel {
    right: 0;
    left: auto;
    bottom: 0;
    max-width: calc(100vw - 84px);
    gap: 3px;
  }
  .ambient-control, .ambient-choice { width: var(--control-size); height: var(--control-size); }
  .ambient-choice { font-size: 14px; }
  .ambient-slider { bottom: calc(var(--control-size) + 4px); height: 92px; }
  .ambient-slider input[type="range"] { height: 70px; }
  .ambient-sound-toggle { width: 32px; height: 32px; }
  .music-menu-toggle { width: 32px; height: 32px; }
  .music-play { width: 38px; height: 38px; }
  .timer-dial { width: min(193px, calc(100vw - 32px)); height: 112px; }
  .timer-dial > strong { font-size: 40px; }
  .brand { left: 20px; }
  .window-label { left: 20px; }
}

@media (max-width: 480px) {
  :root { --control-size: 30px; }
  .gallery-track { grid-auto-columns: calc((100% - 7px) / 2); }
  .gallery-heading { display: grid; gap: 3px; }
  .gallery-header { align-items: start; }
  .floating-controls { gap: 3px; }
  .effect-grid { gap: 2px; }
  .effect-control, .effect, .tone-button { width: var(--control-size); height: var(--control-size); }
  .effect-slider { bottom: 30px; }
  .gradient-next { bottom: 126px; }
  .weather-icon { font-size: 16px; }
  .utility-row { gap: 4px; }
  .pomodoro-toggle, .clock-toggle, .task-toggle, .quote-toggle, .weather-toggle { width: var(--control-size); height: var(--control-size); min-width: var(--control-size); }
  .ambient-control, .ambient-choice, .category-button { width: var(--control-size); height: var(--control-size); }
  .weather-widget { grid-template-columns: 36px 60px minmax(0, 1fr); }
}

@media (max-height: 430px) {
  .background-gallery {
    bottom: 12px;
    padding: 6px;
  }
  .gallery-header { height: 23px; }
  .gallery-item { height: 42px; }
}

@media (max-width: 360px) {
  :root { --control-size: 25px; }
  .floating-controls { gap: 1px; }
  .effect-grid { gap: 1px; }
  .effect-control, .effect, .tone-button,
  .pomodoro-toggle, .clock-toggle, .task-toggle, .quote-toggle, .weather-toggle,
  .ambient-control, .ambient-choice, .category-button { width: var(--control-size); height: var(--control-size); min-width: var(--control-size); }
  .effect-slider { bottom: 26px; }
  .weather-icon { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .aura-loader-ring,
  .aura-loader-glow { animation: none !important; }
  .onboarding-card::before { animation: none !important; }
  .onboarding-card::after,
  .tutorial-aura-glow { animation: none !important; }
}