.speaker-hero{--cabinet-width:220px;--cabinet-height:350px;--cabinet-depth:150px;--speaker-turn:-25deg;padding:64px var(--page-pad) 24px;min-height:calc(100svh - var(--nav-height));grid-template-columns:1fr 1.15fr;gap:3vw;display:grid;position:relative;overflow:hidden}.speaker-intro{z-index:1;align-self:center;padding-bottom:32px;position:relative}.speaker-intro>.micro{color:var(--muted);font-size:9px}.speaker-intro h1{letter-spacing:-.065em;margin:40px 0 30px;font-size:clamp(80px,10.7vw,174px);font-weight:400;line-height:.83}.speaker-intro h1>span{color:var(--color-signal-ink)}.speaker-tagline{letter-spacing:-.035em;font-size:clamp(22px,2.5vw,36px);line-height:1.12}.speaker-description{color:var(--muted);margin:24px 0 14px;font-size:13px}.speaker-experience{align-self:center;min-width:0;position:relative}.speaker-meta{color:var(--muted);justify-content:space-between;gap:20px;font-size:8px;display:flex}.speaker-room{perspective:1100px;perspective-origin:50% 0;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;isolation:isolate;height:490px;position:relative}.speaker-room.is-dragging{cursor:grabbing}.speaker-object{width:var(--cabinet-width);height:var(--cabinet-height);left:calc(50% - var(--cabinet-width) / 2);transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(var(--speaker-turn));transition:transform .18s var(--ease);position:absolute;top:48px}.is-dragging .speaker-object{transition:none}.cabinet-face{backface-visibility:hidden;background:var(--color-charcoal);border:1px solid #ffffff12;position:absolute}.cabinet-front,.cabinet-back{width:var(--cabinet-width);height:var(--cabinet-height);border-radius:5px}.cabinet-front{transform:translateZ(calc(var(--cabinet-depth) / 2));background:linear-gradient(125deg,#363638,#171719 65%);flex-direction:column;align-items:center;display:flex;box-shadow:inset 0 0 0 6px #111,inset 0 0 0 7px #555}.cabinet-back{transform:rotateY(180deg) translateZ(calc(var(--cabinet-depth) / 2));color:var(--color-silver);font-family:var(--font-meta);text-align:center;background:linear-gradient(100deg,#18181a,#303032);flex-direction:column;justify-content:center;align-items:center;gap:32px;font-size:10px;display:flex}.cabinet-back small{font-size:6px}.cabinet-back>i{background:#080809;border:4px solid #777;border-radius:50%;width:20px;height:20px}.back-vents{background:repeating-linear-gradient(#0b0b0c 0 3px,#0000 3px 8px);width:100px;height:80px}.cabinet-left,.cabinet-right{width:var(--cabinet-depth);height:var(--cabinet-height);left:calc((var(--cabinet-width) - var(--cabinet-depth)) / 2)}.cabinet-left{transform:rotateY(-90deg) translateZ(calc(var(--cabinet-width) / 2));background:linear-gradient(90deg,#171718,#29292b)}.cabinet-right{transform:rotateY(90deg) translateZ(calc(var(--cabinet-width) / 2));color:#626264;letter-spacing:-.08em;background:linear-gradient(100deg,#353537,#19191b);place-items:center;font-size:44px;display:grid}.cabinet-top,.cabinet-bottom{width:var(--cabinet-width);height:var(--cabinet-depth);top:calc((var(--cabinet-height) - var(--cabinet-depth)) / 2)}.cabinet-top{transform:rotateX(90deg) translateZ(calc(var(--cabinet-height) / 2));background:linear-gradient(120deg, var(--color-signal), var(--color-signal-ink));border-color:#ff6b6155}.cabinet-bottom{transform:rotateX(-90deg) translateZ(calc(var(--cabinet-height) / 2));background:#101012}.speaker-brand{width:calc(100% - 40px);color:var(--color-paper);font-family:var(--font-meta);justify-content:space-between;align-items:center;margin:18px 0 10px;font-size:7px;display:flex}.speaker-brand svg{width:22px;height:22px}.tweeter{background:radial-gradient(circle,#777 0 15%,#111 17% 32%,#424244 34% 42%,#18181a 44% 60%,#555 63%,#111 66%);border-radius:50%;flex-shrink:0;place-items:center;width:60px;height:60px;display:grid;box-shadow:0 4px 7px #0008}.tweeter i{background:radial-gradient(circle at 35% 30%,#888,#151515 70%);border-radius:50%;width:19px;height:19px}.woofer{background:radial-gradient(circle,#242426 0 53%,#090909 54% 59%,#424244 60% 62%,#111 63% 67%,#707073 68%,#141415 69%);border-radius:50%;place-items:center;width:170px;height:170px;margin-top:12px;display:grid;box-shadow:0 6px 10px #0008}.woofer-cone{background:repeating-radial-gradient(circle,#28282a 0 2px,#343436 3px 4px,#29292b 5px 7px);border-radius:50%;place-items:center;width:125px;height:125px;display:grid;box-shadow:inset 5px 5px 20px #000c,inset -4px -6px 15px #7775}.woofer-cone i{background:radial-gradient(circle at 35% 25%,#5f5f62,#171719 65%);border-radius:50%;width:56px;height:56px;box-shadow:0 4px 8px #0008}.speaker-port{background:#080809;border-radius:8px;width:98px;height:12px;margin-top:12px;box-shadow:0 1px #6b6b6d,inset 0 3px 3px #000}.cabinet-label{width:calc(100% - 40px);font-family:var(--font-meta);letter-spacing:.07em;color:#aaa;justify-content:space-between;align-items:center;margin-top:14px;font-size:6px;display:flex}.power-light{background:#69443f;border-radius:50%;width:5px;height:5px}.speaker-is-playing .power-light{background:var(--color-signal);box-shadow:0 0 7px #f0322b80}.cabinet-screw{background:linear-gradient(45deg,#888 45%,#111 45% 65%,#777 65%);border-radius:50%;width:4px;height:4px;position:absolute}.screw-one{top:12px;left:12px}.screw-two{top:12px;right:12px}.screw-three{bottom:12px;left:12px}.screw-four{bottom:12px;right:12px}.speaker-shadow{filter:blur(22px);z-index:-1;background:#1115;height:70px;position:absolute;top:370px;left:20%;right:12%;transform:rotate(-12deg)}.room-orbit{border:1px solid var(--line);z-index:-1;border-radius:50%;width:90%;height:170px;position:absolute;top:310px;left:5%;transform:rotate(-8deg)}.room-orbit:after{content:"";border:1px solid var(--line);opacity:.5;border-radius:50%;position:absolute;inset:22px}.speaker-drag{text-align:center;color:var(--muted);font-size:8px;position:absolute;bottom:14px;left:0;right:0}.speaker-controls{border-top:var(--border);grid-template-columns:1fr auto;align-items:center;gap:32px;padding-top:20px;display:grid}.speaker-angle label{justify-content:space-between;font-size:9px;display:flex}.speaker-angle input{width:100%;height:24px;accent-color:var(--color-signal-ink);cursor:ew-resize;background:0 0;margin:8px 0;display:block}.speaker-angle input:focus-visible{outline:2px solid var(--focus);outline-offset:4px}.speaker-scale{color:var(--muted);justify-content:space-between;font-size:7px;display:flex}.speaker-play{background:var(--color-carbon);min-height:48px;color:var(--color-paper);font:10px var(--font-meta);border-radius:var(--radius-control);transition:background var(--fast), transform var(--fast);justify-content:center;align-items:center;gap:14px;padding:14px 20px;display:flex}.speaker-play[aria-pressed=true]{background:var(--color-signal-ink)}.speaker-footnote{color:var(--muted);justify-content:space-between;gap:20px;margin-top:18px;display:flex}.speaker-footnote p{max-width:260px;font-size:10px;line-height:1.5}.speaker-footnote>.micro{text-align:right;max-width:140px;font-size:7px;line-height:1.5}.speaker-bottom{color:var(--muted);grid-column:1/-1;justify-content:space-between;align-items:end;padding-top:24px;font-size:8px;display:flex}.speaker-bottom a{padding:12px 0}@media (hover:hover) and (pointer:fine){.speaker-play:hover{background:var(--color-signal-ink)}.speaker-bottom a:hover{color:var(--accent-text)}}.speaker-is-playing .woofer-cone{animation:.625s ease-in-out infinite alternate speaker-pulse}@keyframes speaker-pulse{0%{transform:scale(.98)}to{transform:scale(1.015)}}@media (width>=1600px){.speaker-room{height:570px}.speaker-object{top:80px;scale:1.2}.speaker-shadow{top:440px}.room-orbit{top:380px}}@media (width<=1000px){.speaker-hero{grid-template-columns:1fr 1.1fr;gap:28px;padding-top:44px}.speaker-meta>span+span{display:none}.speaker-controls{gap:15px}.speaker-play{padding:14px 12px}.speaker-room{height:440px}.speaker-object{top:30px;scale:.9}.speaker-shadow{top:345px}.room-orbit{top:280px}.speaker-footnote{flex-direction:column;gap:8px}.speaker-footnote>.micro{text-align:left;max-width:none}.speaker-intro h1{font-size:11vw}}@media (width<=700px){.speaker-hero{grid-template-columns:1fr;gap:28px;padding-top:40px}.speaker-intro{padding-bottom:0}.speaker-intro h1{margin:28px 0 22px;font-size:clamp(78px,20vw,132px);line-height:.85}.speaker-tagline{font-size:25px}.speaker-description{margin:18px 0 8px}.speaker-intro>.micro{font-size:8px}.speaker-experience{margin-top:12px}.speaker-room{height:420px}.speaker-object{top:18px;scale:.85}.speaker-shadow{top:320px}.room-orbit{height:120px;top:280px}.speaker-controls{gap:20px}.speaker-footnote{flex-direction:row}.speaker-footnote>.micro{text-align:right;max-width:130px}.speaker-bottom{padding-top:12px}.speaker-meta{font-size:7px}}@media (prefers-reduced-motion:reduce){.speaker-object{transition:none}.speaker-is-playing .woofer-cone{animation:none}}@media (width>=701px) and (height<=800px){.speaker-hero{gap:16px 3vw;padding-top:28px;padding-bottom:16px}.speaker-room{height:365px}.speaker-object{top:-20px;scale:.76}.speaker-shadow{height:45px;top:267px}.room-orbit{height:100px;top:235px}.speaker-drag{bottom:7px}.speaker-intro{padding-bottom:0}.speaker-intro h1{margin:28px 0 22px;font-size:clamp(80px,9vw,140px)}.speaker-description{margin:18px 0 6px}.speaker-controls{padding-top:14px}.speaker-footnote{margin-top:12px}.speaker-bottom{padding-top:8px}}.speaker-canvas{pointer-events:none;width:100%;height:calc(100% - 38px);position:absolute;inset:0}.speaker-webgl .speaker-object,.speaker-webgl .speaker-shadow,.speaker-webgl .room-orbit{display:none}.speaker-room{touch-action:none;height:560px;overflow:hidden}.speaker-object{transform:rotateX(var(--speaker-tilt,-8deg)) rotateY(var(--speaker-turn))}.speaker-drag{pointer-events:none;bottom:3px}.speaker-angle label[for=speaker-tilt]{margin-top:14px}.speaker-reset{color:var(--muted);text-underline-offset:4px;padding:8px 0;font-size:8px;text-decoration:underline}@media (width<=700px){.speaker-room{height:460px}.speaker-controls{align-items:start}.speaker-play{margin-top:14px}}@media (width>=701px) and (height<=800px){.speaker-room{height:430px}.speaker-hero{padding-top:20px}.speaker-controls{align-items:start}.speaker-play{margin-top:14px}}.speaker-poster{pointer-events:none;display:block;position:absolute;inset:0 0 38px}.speaker-poster img{object-fit:contain;width:100%;height:100%}.speaker-experience:not(.speaker-fallback) .speaker-object,.speaker-experience:not(.speaker-fallback) .speaker-shadow,.speaker-experience:not(.speaker-fallback) .room-orbit,.speaker-webgl .speaker-poster,.speaker-fallback .speaker-poster{display:none}
