:root { color-scheme: dark; --plate-width: min(350px, calc(100vw - 48px), calc((100svh - 120px) * .69)); }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; background: #211c19; }
body { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.room { min-height: 100svh; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; padding: 30px 24px 92px; isolation: isolate; background: radial-gradient(ellipse at 39% 27%, #3c332b 0%, #2b2520 40%, #1b1816 85%); }
.room::after { content: ''; position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: .15; background-image: url('grain.svg'); mix-blend-mode: soft-light; }
.ambient { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 33%, #4e1715 0%, #29100f 70%, #1b0e0e); opacity: 0; transition: opacity 380ms ease-out; }
.faceplate { position: relative; width: var(--plate-width); aspect-ratio: .69; flex-shrink: 0; border-radius: 19px; background: linear-gradient(108deg, #9e9b8e 0%, #8e8c80 25%, #7b796e 67%, #6a685f 100%); border: 1px solid #3d3b34; box-shadow: inset 1px 2px 1px #c5bfb0, inset -2px -3px 2px #44453d, 1px 4px 0 #4b4a41, 2px 8px 0 #2b2b25, 12px 27px 29px #0007, 27px 49px 70px #0006; }
.faceplate::before { content: ''; position: absolute; inset: 7px; border: 1px solid #d6cfb312; border-radius: 13px; box-shadow: 0 0 1px #29291f80; pointer-events: none; }
.faceplate::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 50% 27%, #ff39293d, transparent 58%), linear-gradient(#5c080c19,#5c080c19); opacity: 0; transition: opacity 330ms ease-out; }
.screw { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #aca99a, #65665c 65%, #494b43); box-shadow: 0 1px 1px #c3bc9e75, 0 -1px 2px #262820b0, inset 0 0 0 2px #44463c66, inset 1px 1px 1px #c8c3b0a0; }
.screw::after { content: ''; position: absolute; top: 6px; left: 3px; width: 7px; height: 1.5px; transform: rotate(-29deg); background: #34372f; box-shadow: 0 1px 0 #c4bfa15c; }
.screw-tl { top: 22px; left: 22px; }.screw-tr { top: 22px; right: 22px; transform: rotate(67deg); }.screw-bl { bottom: 22px; left: 22px; transform: rotate(34deg); }.screw-br { bottom: 22px; right: 22px; transform: rotate(-48deg); }
.lamp { position: absolute; top: 12%; left: 50%; width: 35%; height: 22%; transform: translateX(-50%); }
.lamp::before { content: ''; position: absolute; inset: -55% -65%; background: radial-gradient(ellipse, #ed2c1980, #cc1f1920 45%, transparent 70%); opacity: 0; transition: opacity 330ms ease-out; }
.lamp-mount { position: absolute; inset: 0; border-radius: 48% 48% 22% 22% / 14% 14% 15% 15%; background: linear-gradient(100deg,#5c5c51,#232722 22%,#161b17 70%,#33372e); box-shadow: 4px 10px 9px #22251c70, 0 2px 2px #33392c; }
.lens { position: absolute; inset: 0 6% 12%; overflow: hidden; border: 1px solid #270c0d; border-radius: 48% 48% 24% 24% / 20% 20% 12% 12%; background: radial-gradient(ellipse at 49% 70%,#6e161e 0%,#4b0d17 35%,#290b12 80%); box-shadow: inset 4px 1px 6px #f08b7766, inset -8px 0 9px #130b0c, inset 0 5px 5px #1b090e, 0 -1px 1px #d7a79c44; }
.lens::before { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, #ffb3a20c 0px, #ef6a5b22 2px, #16050d7a 4px, #21080d4d 6px, #ea7a5a20 8px); box-shadow: inset 0 9px 3px -7px #d68d7750, inset 0 -10px 4px -8px #e2946c42; }
.lens::after { content: ''; position: absolute; z-index: 3; left: 14%; top: 9%; width: 10%; height: 69%; border-radius: 50%; transform: rotate(2deg); background: linear-gradient(#e7b19a40, #e7b19a0a); filter: blur(1px); }
.filament { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 65%,#ff5b3c 0%, #b92028 7%, #70151f66 17%, transparent 42%); }
.filament::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 65%,#ffe1a6 0%,#ff9370 12%,#f5382b 36%,#b81825 66%,#5d0c18); opacity: 0; transition: opacity 280ms ease-out; }
.lamp-rim { position: absolute; bottom: 0; left: 0; right: 0; height: 15%; border-radius: 15% 15% 33% 33% / 25% 25% 50% 50%; background: linear-gradient(#77786a, #363e33 20%, #292f27 45%, #171e18 80%, #4e5245); box-shadow: inset 2px 0 2px #b4af8a44, 0 2px 1px #141b14; }
.button-mount { position: absolute; width: 68%; aspect-ratio: 1; left: 16%; top: 40%; border-radius: 50%; background: radial-gradient(circle, transparent 65%, #443e2c44 69%, #5d594733 71%, transparent 73%); }
.collar { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 125deg, #1b1d19, #2b2c25 25%, #636359 43%, #3c4037 51%, #191e19 75%, #151914); box-shadow: 2px 8px 8px #25251e90, 0 1px 1px #bbb69b80, inset 1px 2px 1px #9c9a8066, inset -1px -2px 2px #131810; }
.collar::after { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: #140e0e; box-shadow: 0 1px 0 #a19c7e33, 0 -2px 3px #090c09, inset 0 6px 12px #000; }
.main-button { position: absolute; inset: 10%; border: 0; padding: 0; background: transparent; border-radius: 50%; cursor: pointer; outline-offset: 15px; }
.cap { display: block; position: absolute; inset: 0 0 8px; border-radius: 50%; transform: translateY(-3px); background: radial-gradient(ellipse at 36% 23%, #dc493a 0%, #ca3026 32%, #ac201b 65%, #861713 100%); border: 1px solid #661613; box-shadow: inset 1px 2px 2px #f9967066, inset -2px -3px 4px #5b0b0955, 0 2px 0 #8e1b16, 0 5px 0 #7a1712, 0 8px 0 #60120f, 0 10px 1px #410e0d, 2px 14px 8px #000b; transition: transform 90ms cubic-bezier(.17,.9,.37,1.3), box-shadow 90ms ease-out; pointer-events: none; }
.cap::before { content: ''; position: absolute; inset: 5%; border-radius: 50%; border-top: 1px solid #ff9c6730; background: radial-gradient(ellipse at 32% 15%, #ffcd9b10, transparent 65%); }
.main-button.is-down .cap { transform: translateY(5px); box-shadow: inset 1px 2px 2px #f9967044, inset -2px -3px 4px #5b0b0966, 0 1px 0 #60120f, 0 2px 1px #410e0d, 0 3px 3px #000b; transition-duration: 45ms; }
.main-button[aria-disabled="true"] { cursor: default; }
body.is-off .cap { filter: brightness(.77) saturate(.8); }
body.is-off:not(.is-triggered) .filament { opacity: 0; }
.power-switch { position: absolute; left: calc(50% - 24px); bottom: 2.5%; width: 48px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.rocker-mount { position: relative; width: 26px; height: 32px; border-radius: 5px; padding: 3px; background: linear-gradient(130deg,#686b60,#252a23 45%,#111710); box-shadow: 0 1px 1px #c3bea388, 1px 2px 3px #292b2377, inset 0 1px 2px #111; }
.rocker { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 3px; color: #8c8d7a; background: linear-gradient(#242a22,#3a4134 70%,#505643); box-shadow: inset 0 -3px 1px #171e16, inset 0 1px 1px #70746080, 0 1px 2px #0008; transform: perspective(65px) rotateX(-13deg); transition: transform 90ms ease-out; }
.rocker svg { width: 13px; height: 13px; }
.rocker::before { content: ''; position: absolute; width: 8px; height: 2px; top: 4px; left: 6px; border-radius: 1px; background: #161d14; }
.power-switch[aria-checked="true"] .rocker { transform: perspective(65px) rotateX(13deg); background: linear-gradient(#3d4535,#293122); box-shadow: inset 0 3px 1px #161e14, inset 0 -1px 1px #7e826a80, 0 1px 2px #0008; }
.power-switch[aria-checked="true"] .rocker::before { background: #bca56b; box-shadow: 0 0 4px #c9a45066; }
.sound-button { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #aba497; cursor: pointer; opacity: .45; }
.sound-button:hover, .sound-button:focus-visible { opacity: 1; }.sound-button:active { transform: translateY(1px); }.sound-button svg { width: 17px; height: 17px; }.sound-cross { display: none; }.sound-button[aria-pressed="false"] .sound-waves { display: none; }.sound-button[aria-pressed="false"] .sound-cross { display: block; }
button:focus-visible { outline: 2px solid #e4c79e; }
body.is-triggered .ambient, body.is-triggered .faceplate::after, body.is-triggered .lamp::before, body.is-triggered .filament::after { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (max-height: 440px) and (orientation: landscape) { :root { --plate-width: min(245px, calc((100svh - 35px) * .69)); }.room { padding: 12px 90px; } }