:root {
  color-scheme: light;
  --bg: #f1eee7;
  --stage: #fffdf7;
  --stage-soft: #eef6f6;
  --ink: #202326;
  --muted: #74716a;
  --line: rgba(32, 35, 38, 0.14);
  --accent: #3478f6;
  --accent-2: #5dbeb2;
  --fan-shell: #fafaf7;
  --fan-glass: #dcecf8;
  --fan-rim: #20282d;
  --blade: #82add7;
  --base: #1f2830;
  --base-mid: #47535b;
  --base-shell: #ede9df;
  --base-shell-2: #c9c2b3;
  --base-trim: #a79f90;
  --button: #fbfaf5;
  --wind: rgba(52, 120, 246, 0.34);
  --spin-duration: 0.86s;
  --wind-duration: 2.8s;
  --wind-size: 1;
  --wind-opacity: 0.48;
  --wind-spread: 1.4;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.7), transparent 36%),
    radial-gradient(circle at 72% 18%, rgba(93, 190, 178, 0.15), transparent 30%),
    var(--bg);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow-x: hidden;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.app-shell {
  width: min(1180px, calc(100vw - 32px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: 18px;
  align-items: stretch;
}

.fan-stage,
.design-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.84);
  box-shadow:
    0 28px 78px rgba(35, 32, 25, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.fan-stage {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.96), transparent 33%),
    radial-gradient(circle at 50% 41%, color-mix(in srgb, var(--wind), transparent 82%), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.16)),
    var(--stage);
}

.room-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.room-lines span {
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(32, 35, 38, 0.12), transparent);
}

.room-lines span:nth-child(1) {
  top: 28%;
}

.room-lines span:nth-child(2) {
  top: 53%;
}

.room-lines span:nth-child(3) {
  top: 78%;
}

.fan-unit {
  --fan-scale: 1;
  position: relative;
  z-index: 1;
  width: calc(460px * var(--fan-scale));
  height: calc(660px * var(--fan-scale));
}

.fan-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(380px * var(--fan-scale));
  height: calc(380px * var(--fan-scale));
  transform: translateX(-50%);
  border-radius: 50%;
  filter: drop-shadow(0 30px 30px rgba(35, 32, 25, 0.15));
}

.fan-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(255, 255, 255, 0.28) 18.5% 24%, transparent 24.5%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(255, 255, 255, 0.74) 28.5% 31%, transparent 31.5%),
    radial-gradient(circle at 50% 50%, var(--fan-glass) 0 56.5%, var(--fan-shell) 57% 61.7%, var(--fan-rim) 62.2% 64.4%, var(--fan-shell) 65% 100%);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 0 0 11px rgba(255, 255, 255, 0.36),
    inset 0 -28px 38px rgba(32, 35, 38, 0.08),
    inset 0 0 0 3px rgba(255, 255, 255, 0.7);
  overflow: hidden;
}

.fan-ring::before {
  content: "";
  position: absolute;
  inset: 17px;
  z-index: 4;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(32, 35, 38, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.fan-ring::after {
  content: "";
  position: absolute;
  inset: 31px;
  z-index: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from -2deg,
      rgba(32, 35, 38, 0.11) 0deg 0.65deg,
      transparent 0.65deg 10deg
    );
  mask-image: radial-gradient(circle, transparent 0 18%, #000 18.5% 100%);
  opacity: 0.52;
  pointer-events: none;
}

.fan-grille {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(32, 35, 38, 0.11);
  border-radius: 50%;
}

.grille-a {
  inset: 52px;
}

.grille-b {
  inset: 88px;
}

.grille-c {
  inset: 124px;
}

.spoke {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  background: rgba(32, 35, 38, 0.1);
  transform: translate(-50%, -50%);
}

.spoke-vertical {
  width: 1px;
  height: 240px;
}

.spoke-horizontal {
  width: 240px;
  height: 1px;
}

.fan-mesh {
  position: absolute;
  z-index: 3;
  inset: 38px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      transparent 0deg 4.6deg,
      rgba(255, 255, 255, 0.38) 4.6deg 5.3deg,
      transparent 5.3deg 9.2deg
    );
  opacity: 0.34;
  mask-image: radial-gradient(circle, transparent 0 21%, #000 21.5% 100%);
  pointer-events: none;
}

.fan-blades {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(292px * var(--fan-scale));
  height: calc(292px * var(--fan-scale));
  z-index: 2;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  animation: rotorSpin var(--spin-duration) linear infinite;
  animation-play-state: paused;
  backface-visibility: hidden;
  will-change: transform;
}

.fan-blades::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      color-mix(in srgb, var(--blade), transparent 72%) 0deg 8deg,
      transparent 8deg 18deg
    );
  opacity: 0;
  filter: blur(9px);
  transition: opacity 0.22s ease;
}

.blade-slot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--i) * 51.4285714286deg));
  transform-origin: 0 0;
}

.blade {
  position: absolute;
  left: calc(24px * var(--fan-scale));
  top: calc(-24px * var(--fan-scale));
  width: calc(112px * var(--fan-scale));
  height: calc(48px * var(--fan-scale));
  border-radius: 74% 24% 72% 30% / 64% 42% 60% 38%;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(255, 255, 255, 0.62), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.58), transparent 63%),
    linear-gradient(135deg, color-mix(in srgb, var(--blade), white 24%), var(--blade) 58%, color-mix(in srgb, var(--blade), black 8%));
  box-shadow:
    inset -12px -9px 18px rgba(32, 35, 38, 0.13),
    inset 9px 8px 13px rgba(255, 255, 255, 0.22),
    0 0 12px rgba(255, 255, 255, 0.16);
  opacity: 0.94;
}

.blade::after {
  content: "";
  position: absolute;
  inset: 8px 22px 9px 16px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0.8;
}

.fan-core {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: calc(72px * var(--fan-scale));
  height: calc(72px * var(--fan-scale));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 38% 28%, rgba(255, 255, 255, 0.94), transparent 30%),
    radial-gradient(circle at 53% 64%, rgba(255, 255, 255, 0.08), transparent 28%),
    var(--fan-rim);
  box-shadow:
    0 0 0 calc(10px * var(--fan-scale)) rgba(255, 255, 255, 0.58),
    0 0 0 calc(18px * var(--fan-scale)) color-mix(in srgb, var(--fan-glass), transparent 35%),
    inset 0 -12px 18px rgba(0, 0, 0, 0.26);
}

.forward-wind {
  position: absolute;
  z-index: 6;
  inset: calc(-120px * var(--fan-scale));
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  contain: paint;
}

.forward-wind::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--wind), transparent 22%) 0 9%, transparent 10% 100%),
    repeating-radial-gradient(circle, transparent 0 30px, color-mix(in srgb, var(--wind), transparent 18%) 31px 33px, transparent 34px 52px);
  opacity: calc(var(--wind-opacity) * 0.42);
  animation: airGlow calc(var(--wind-duration) * 1.4) ease-in-out infinite;
}

.forward-wind::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(
    from 12deg,
    transparent 0deg 18deg,
    color-mix(in srgb, var(--wind), transparent 48%) 20deg 30deg,
    transparent 32deg 72deg,
    color-mix(in srgb, var(--wind), transparent 54%) 74deg 84deg,
    transparent 86deg 146deg,
    color-mix(in srgb, var(--wind), transparent 60%) 148deg 158deg,
    transparent 160deg 360deg
  );
  opacity: calc(var(--wind-opacity) * 0.34);
  animation: windSweep calc(var(--wind-duration) * 1.15) linear infinite;
  will-change: transform, opacity;
}

.forward-wind span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(190px * var(--fan-scale));
  height: calc(112px * var(--fan-scale));
  margin: calc(-56px * var(--fan-scale)) 0 0 calc(-95px * var(--fan-scale));
  border: 0;
  border-top: 2px solid var(--wind);
  border-right: 2px solid color-mix(in srgb, var(--wind), transparent 24%);
  border-radius: 50%;
  box-shadow: 0 -2px 8px rgba(255, 255, 255, 0.55);
  animation: windCurve var(--wind-duration) ease-out infinite;
  opacity: var(--wind-opacity);
  transform: scale(0.18) rotate(-6deg);
  will-change: transform, opacity;
}

.forward-wind span:nth-child(2) {
  animation-delay: -0.55s;
  transform: scale(0.24) rotate(8deg);
}

.forward-wind span:nth-child(3) {
  animation-delay: -1.1s;
  transform: scale(0.3) rotate(-14deg);
}

.forward-wind span:nth-child(4) {
  animation-delay: -1.65s;
  transform: scale(0.36) rotate(15deg);
}

.fan-neck {
  position: absolute;
  z-index: 2;
  top: calc(348px * var(--fan-scale));
  left: 50%;
  width: calc(92px * var(--fan-scale));
  height: calc(105px * var(--fan-scale));
  transform: translateX(-50%);
  border-radius: 18px 18px 38px 38px / 18px 18px 42px 42px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(90deg, color-mix(in srgb, var(--base), black 8%), var(--base-mid) 50%, color-mix(in srgb, var(--base), black 8%));
  box-shadow:
    inset 12px 0 18px rgba(255, 255, 255, 0.06),
    inset -12px 0 18px rgba(0, 0, 0, 0.1),
    0 10px 16px rgba(35, 32, 25, 0.12);
}

.fan-neck::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-16px * var(--fan-scale));
  width: calc(122px * var(--fan-scale));
  height: calc(32px * var(--fan-scale));
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--base-mid), white 14%), var(--base));
  box-shadow:
    inset 0 6px 8px rgba(255, 255, 255, 0.12),
    0 -3px 0 rgba(255, 255, 255, 0.18);
}

.fan-neck::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-11px * var(--fan-scale));
  width: calc(66px * var(--fan-scale));
  height: calc(24px * var(--fan-scale));
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--base-mid), var(--base));
  box-shadow: inset 0 -5px 9px rgba(0, 0, 0, 0.15);
}

.fan-stand {
  position: absolute;
  z-index: 1;
  top: calc(435px * var(--fan-scale));
  left: 50%;
  width: calc(40px * var(--fan-scale));
  height: calc(134px * var(--fan-scale));
  transform: translateX(-50%);
  border-radius: 22px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--base), black 10%), var(--base-mid) 48%, color-mix(in srgb, var(--base), black 10%));
  box-shadow:
    inset 9px 0 12px rgba(255, 255, 255, 0.06),
    inset -10px 0 14px rgba(0, 0, 0, 0.12),
    0 10px 16px rgba(35, 32, 25, 0.12);
}

.fan-stand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-8px * var(--fan-scale));
  width: calc(56px * var(--fan-scale));
  height: calc(28px * var(--fan-scale));
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--base-mid), white 10%), var(--base));
  box-shadow: inset 0 5px 7px rgba(255, 255, 255, 0.08);
}

.fan-base {
  position: absolute;
  top: calc(500px * var(--fan-scale));
  left: 50%;
  width: calc(440px * var(--fan-scale));
  height: 158px;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--base-trim), white 12%);
  border-radius: 50% 50% 22px 22px / 36% 36% 22px 22px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 18% 82%, rgba(255, 255, 255, 0.18)),
    radial-gradient(ellipse at 50% 5%, rgba(255, 255, 255, 0.96), transparent 46%),
    radial-gradient(ellipse at 18% 22%, rgba(255, 255, 255, 0.4), transparent 24%),
    radial-gradient(ellipse at 74% 102%, rgba(90, 84, 72, 0.2), transparent 42%),
    linear-gradient(180deg, var(--base-shell), var(--base-shell-2));
  box-shadow:
    inset 0 10px 20px rgba(255, 255, 255, 0.48),
    inset 0 -18px 24px rgba(80, 76, 68, 0.18),
    0 22px 30px rgba(35, 32, 25, 0.17),
    0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 52px 28px 20px;
  color: #272926;
  overflow: visible;
}

.fan-base::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 14px;
  height: 38px;
  border-radius: 50%;
  border-top: 1px solid rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid rgba(80, 76, 68, 0.09);
  box-shadow:
    inset 0 8px 10px rgba(255, 255, 255, 0.22),
    0 10px 20px rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.fan-base::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -16px;
  height: 22px;
  border-radius: 50%;
  background: rgba(35, 32, 25, 0.16);
  filter: blur(12px);
  pointer-events: none;
}

.status-dot {
  position: absolute;
  top: 28px;
  left: 34px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888a82;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.36),
    inset 0 1px 2px rgba(0, 0, 0, 0.26);
}

.sound-toggle {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 30px;
  width: 34px;
  height: 28px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.98), transparent 32%),
    linear-gradient(180deg, #fffefa, var(--button) 62%, color-mix(in srgb, var(--button), black 14%));
  box-shadow:
    inset 0 -4px 5px rgba(78, 74, 66, 0.14),
    0 4px 0 color-mix(in srgb, var(--base-shell-2), black 8%),
    0 7px 11px rgba(35, 32, 25, 0.18);
  display: grid;
  place-items: center;
  color: #30332f;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.sound-toggle:hover {
  transform: translateY(-1px);
}

.sound-toggle.is-selected {
  transform: translateY(3px);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.82), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent), white 30%), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.2),
    0 1px 0 #9e998e,
    0 3px 8px rgba(35, 32, 25, 0.16);
}

.sound-symbol {
  position: relative;
  width: 16px;
  height: 14px;
}

.sound-symbol::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 5px -3px 0 -1px currentColor, 5px 3px 0 -1px currentColor;
}

.sound-symbol::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1px;
  width: 8px;
  height: 12px;
  border: 2px solid currentColor;
  border-left: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
}

.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;
}

.button-bank {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 13px;
  min-width: 0;
}

.primary-bank {
  margin-top: 0;
}

.timer-bank {
  margin-top: 12px;
}

.push-button {
  width: 49px;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: #262825;
  text-align: center;
  overflow: visible;
}

.button-top {
  position: relative;
  width: 41px;
  height: 28px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.98), transparent 31%),
    linear-gradient(180deg, #fffefa, var(--button) 58%, color-mix(in srgb, var(--button), black 15%));
  box-shadow:
    inset 0 -4px 5px rgba(78, 74, 66, 0.15),
    0 5px 0 color-mix(in srgb, var(--base-shell-2), black 8%),
    0 8px 13px rgba(35, 32, 25, 0.2);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.push-button:hover .button-top {
  transform: translateY(-1px);
}

.push-button:active .button-top,
.push-button.is-selected .button-top {
  transform: translateY(4px);
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.86), transparent 31%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent), white 30%), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.22),
    0 1px 0 #9e998e,
    0 3px 8px rgba(35, 32, 25, 0.18);
}

.button-label {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  line-height: 1.1;
}

.timer-push .button-top {
  width: 47px;
}

.timer-push {
  width: 54px;
  min-width: 0;
}

.power-symbol {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.power-symbol::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: currentColor;
}

.design-panel {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.design-header p {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.design-header h1 {
  margin: 0 0 5px;
  font-size: 30px;
  line-height: 1;
}

.design-header strong {
  color: var(--muted);
  font-size: 15px;
}

.design-list {
  display: grid;
  gap: 10px;
}

.design-choice {
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
  gap: 6px;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.design-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(32, 35, 38, 0.28);
}

.design-choice.is-selected {
  border-color: transparent;
  background: var(--ink);
  color: #fff;
}

.design-preview {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(32, 35, 38, 0.16);
  border-radius: 50%;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.46);
}

.swatch-aero {
  background: conic-gradient(from 28deg, #3478f6 0 28%, #f7f7f4 28% 52%, #82add7 52% 78%, #20282d 78% 100%);
}

.swatch-mono {
  background: conic-gradient(from 28deg, #22262a 0 28%, #f5f3ed 28% 52%, #b9c2c5 52% 78%, #202326 78% 100%);
}

.swatch-sunset {
  background: conic-gradient(from 28deg, #d45f47 0 28%, #fff3df 28% 52%, #ee8c68 52% 78%, #3a2a25 78% 100%);
}

.swatch-forest {
  background: conic-gradient(from 28deg, #2f7f66 0 28%, #fbfff8 28% 52%, #79a970 52% 78%, #1f332c 78% 100%);
}

.app-shell.is-on .fan-blades {
  animation-play-state: running;
}

.app-shell.is-on .fan-blades::before {
  opacity: calc(var(--wind-opacity) * 0.34);
}

.app-shell.is-on .forward-wind {
  opacity: var(--wind-opacity);
}

.app-shell.is-on .status-dot {
  background: #62e59a;
  box-shadow:
    0 0 0 4px rgba(98, 229, 154, 0.14),
    0 0 18px rgba(98, 229, 154, 0.72);
}

.app-shell.is-on .power-push .button-top {
  transform: translateY(4px);
  background:
    radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.82), transparent 31%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent), white 28%), var(--accent));
  color: #fff;
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.22),
    0 1px 0 #9e998e,
    0 3px 8px rgba(35, 32, 25, 0.18);
}

.app-shell.sound-on .sound-symbol::after {
  animation: soundWave 1.3s ease-in-out infinite;
}

.app-shell[data-design="mono"] {
  --bg: #eeeeeb;
  --stage: #fbfaf6;
  --accent: #262b2e;
  --accent-2: #a4b0b4;
  --fan-glass: #e6e9e8;
  --fan-shell: #faf9f4;
  --fan-rim: #202326;
  --blade: #b9c2c5;
  --base: #1f2225;
  --base-mid: #464b4e;
  --base-shell: #e7e6e0;
  --base-shell-2: #c9c7bf;
  --base-trim: #98968f;
  --button: #f7f6f0;
  --wind: rgba(32, 35, 38, 0.26);
}

.app-shell[data-design="sunset"] {
  --bg: #f4ede2;
  --stage: #fff9ed;
  --accent: #d45f47;
  --accent-2: #f1ad63;
  --fan-glass: #ffe4c3;
  --fan-shell: #fff5df;
  --fan-rim: #3a2a25;
  --blade: #ee8c68;
  --base: #332822;
  --base-mid: #69514a;
  --base-shell: #f4e3d1;
  --base-shell-2: #d1ad94;
  --base-trim: #b98670;
  --button: #fff6e8;
  --wind: rgba(229, 103, 74, 0.3);
}

.app-shell[data-design="forest"] {
  --bg: #e9eee8;
  --stage: #fbfff8;
  --accent: #2f7f66;
  --accent-2: #95b86d;
  --fan-glass: #dcebd8;
  --fan-shell: #fbfff8;
  --fan-rim: #1f332c;
  --blade: #79a970;
  --base: #21332b;
  --base-mid: #496858;
  --base-shell: #e2e9db;
  --base-shell-2: #bfcbb4;
  --base-trim: #8da181;
  --button: #f7fbf1;
  --wind: rgba(47, 127, 102, 0.3);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotorSpin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes airGlow {
  0%,
  100% {
    transform: scale(0.96);
    opacity: calc(var(--wind-opacity) * 0.32);
  }

  50% {
    transform: scale(1.04);
    opacity: calc(var(--wind-opacity) * 0.62);
  }
}

@keyframes windSweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes windCurve {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.2) rotate(-8deg);
  }

  22% {
    opacity: calc(var(--wind-opacity) * 0.82);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(calc(0.76 + var(--wind-spread) * 0.5)) rotate(12deg);
  }
}

@keyframes windPulse {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }

  20% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;
    transform: scale(calc(1.18 + var(--wind-spread)));
  }
}

@keyframes soundWave {
  0%,
  100% {
    transform: scaleX(0.82);
    opacity: 0.62;
  }

  50% {
    transform: scaleX(1.1);
    opacity: 1;
  }
}

@media (max-width: 920px) {
  .app-shell {
    width: min(720px, calc(100vw - 24px));
    min-height: auto;
    grid-template-columns: 1fr;
    margin: 12px auto;
  }

  .fan-stage {
    min-height: 710px;
  }

  .design-panel {
    padding: 16px;
  }

  .design-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .design-choice {
    min-height: 78px;
  }
}

@media (max-width: 560px) {
  .app-shell {
    width: calc(100vw - 16px);
    margin: 8px auto;
    gap: 10px;
  }

  .fan-stage {
    min-height: 590px;
  }

  .fan-unit {
    --fan-scale: 0.74;
  }

  .fan-base {
    top: calc(508px * var(--fan-scale));
    height: 154px;
    width: calc(100vw - 32px);
    max-width: 390px;
    padding: 48px 14px 18px;
  }

  .button-bank {
    gap: 6px;
  }

  .push-button {
    width: 45px;
    min-width: 0;
  }

  .button-top {
    width: 35px;
    height: 24px;
  }

  .timer-push {
    width: 52px;
    min-width: 0;
  }

  .timer-push .button-top {
    width: 43px;
  }

  .button-label {
    font-size: 11px;
  }

  .design-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports not (color: color-mix(in srgb, white, black)) {
  .blade {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.55), transparent 58%),
      var(--blade);
  }

  .push-button:active .button-top,
  .push-button.is-selected .button-top,
  .app-shell.is-on .power-push .button-top {
    background: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}