.wbt-tv *{box-sizing:border-box}.wbt-tv{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 40%,#242020,#080909 68%);color:#c9c4b9;font:13px system-ui;display:grid;place-content:center;padding:30px}.wbt-tv .set{width:min(900px,92vw);padding:26px 24px 30px;border-radius:24px;background:linear-gradient(125deg,#655448,#302a25 40%,#211e1b);box-shadow:0 32px 80px #000,inset 1px 2px 3px #af968066,inset -3px -4px 6px #000;display:grid;grid-template-columns:1fr 95px;gap:22px;border:3px solid #221f1a}.wbt-tv .bezel{padding:15px;border-radius:45px;background:linear-gradient(130deg,#121716,#5c5f5355);box-shadow:inset 0 0 15px #000;border:1px solid #776c5b55}.wbt-tv .glass{position:relative;overflow:hidden;border-radius:45% / 8%;background:#080e0d;aspect-ratio:4/3;box-shadow:0 0 25px #729b7020,inset 0 0 28px #000}.wbt-tv canvas{width:100%;height:100%;display:block;filter:contrast(1.1) saturate(.6) sepia(.15)}.wbt-tv .glass:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0004 0px,#0004 1px,transparent 1px,transparent 4px),radial-gradient(ellipse,transparent 45%,#000a 100%);box-shadow:inset 0 0 42px #000;border-radius:inherit}.wbt-tv .shine{position:absolute;inset:0;background:linear-gradient(125deg,#fff1,transparent 38%);pointer-events:none}.wbt-tv .side{display:flex;align-items:center;flex-direction:column;gap:24px;padding-top:18px}.wbt-tv .dial{height:57px;width:57px;border-radius:50%;background:repeating-conic-gradient(#242525 0deg 8deg,#40413d 9deg 13deg);box-shadow:2px 4px 5px #000,inset 0 0 0 9px #292b28;border:2px solid #686b5f;position:relative}.wbt-tv .dial:after{transition:transform .3s ease;content:"";position:absolute;width:5px;height:37px;background:#53574d;left:24px;top:8px;transform:rotate(var(--dial-angle,30deg));box-shadow:1px 1px 3px #000}.wbt-tv .speaker{flex:1;min-height:100px;width:66px;background:repeating-linear-gradient(0deg,#0c0e0c 0 3px,#4b463a 4px 7px);border-radius:6px}.wbt-tv .lamp{width:6px;height:6px;background:#e88843;border-radius:50%;box-shadow:0 0 9px #ff903b}.wbt-tv .brand{font:9px monospace;letter-spacing:2px;color:#9b9279}.wbt-tv .feet{height:16px;margin:0 55px;background:linear-gradient(90deg,#1a1815 0 8%,transparent 8% 92%,#1a1815 92%);filter:drop-shadow(0 5px 4px #000)}.wbt-tv footer{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin:27px auto 0;max-width:800px;text-align:center;color:#9e9e94;line-height:1.6}.wbt-tv button{border:1px solid #5b5b50;background:#151815;color:#e1ddce;border-radius:18px;padding:8px 16px;cursor:pointer}.wbt-tv button:focus-visible{outline:2px solid #e4c875}.wbt-tv small{display:block;text-align:center;color:#74786f;margin-top:13px}@media(max-width:550px){.wbt-tv{padding:15px}.wbt-tv .set{padding:13px;gap:10px;grid-template-columns:1fr 40px;border-radius:17px}.wbt-tv .bezel{padding:8px;border-radius:25px}.wbt-tv .side{gap:14px;padding-top:5px}.wbt-tv .dial{transform:scale(.6);margin:-10px}.wbt-tv .speaker{width:30px;min-height:70px}.wbt-tv .brand{font-size:6px;letter-spacing:0}.wbt-tv .glass{border-radius:32% / 7%}}@media(prefers-reduced-motion:reduce){.wbt-tv canvas{filter:saturate(.5)}}.wbt-tv .tv-brand{display:flex;align-items:center;justify-content:center;gap:5px;color:#9b9279;font:bold 12px system-ui;letter-spacing:1px}.wbt-tv .tv-brand svg{width:53px;height:40px;flex-shrink:0}.wbt-tv .tv-brand svg>path:nth-child(-n+3){fill:#0d1117;stroke:#9b9279;stroke-width:2}.wbt-tv .tv-brand .brand-mark-detail{fill:none;stroke:#9b9279;stroke-width:1.5}.wbt-tv .tv-brand text{fill:#9b9279;font:900 17px system-ui;letter-spacing:-1px}.wbt-tv .tv-brand .brand-mark-star{fill:#9b9279;stroke:none}@media(max-width:550px){.wbt-tv .tv-brand{gap:2px;font-size:8px;letter-spacing:0}.wbt-tv .tv-brand svg{width:27px;height:24px}}@media(prefers-reduced-motion:reduce){.wbt-tv .dial:after{transition:none}}@media(max-width:550px){}@media(max-width:550px){.wbt-tv .set{align-items:stretch}.wbt-tv .side{min-height:0;gap:8px;padding:3px 0;overflow:hidden}.wbt-tv .dial{width:32px;height:32px;flex:0 0 32px;transform:none;margin:0;box-shadow:1px 2px 3px #000,inset 0 0 0 5px #292b28;border-width:1px}.wbt-tv .dial:after{width:3px;height:21px;left:13px;top:4px}.wbt-tv .speaker{min-height:20px;width:27px;flex:1}.wbt-tv .lamp{flex:0 0 4px;width:4px;height:4px}.wbt-tv .tv-brand{flex:0 0 21px;gap:1px;font-size:7px}.wbt-tv .tv-brand svg{width:25px;height:21px}.wbt-tv .bezel{align-self:start}.wbt-tv .glass{width:100%}.wbt-tv .feet{height:10px;margin:0 35px}}
.wbt-tv{width:100%;min-height:0;padding:12px 0 0;display:block;background:transparent;font:13px system-ui;color:#c9c4b9}.wbt-tv .tv-cabinet{width:100%}.wbt-tv .set{width:100%;grid-template-columns:minmax(0,1fr) 70px}.wbt-tv .bezel{min-width:0}.wbt-tv .tv-controls{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:18px}.wbt-tv .tv-controls button{min-height:40px}.wbt-tv .tv-caption{margin:10px 0;color:var(--muted);font-size:12px;text-align:center}.wbt-tv .tv-status{color:var(--muted);font-size:12px;text-align:center}.wbt-tv canvas{max-width:100%}@media(max-width:550px){.wbt-tv{padding:0}.wbt-tv .set{grid-template-columns:minmax(0,1fr) 40px}}
@media(min-width:551px){.wbt-tv .side{gap:14px;padding-top:8px}.wbt-tv .dial{width:44px;height:44px;flex:0 0 44px}.wbt-tv .dial:after{height:28px;width:4px;left:18px;top:6px}.wbt-tv .speaker{min-height:40px}.wbt-tv .bezel{align-self:start}}.wbt-tv .tv-brand span{color:#9b9279}

/* Keep the mockup uncluttered; reveal playback controls on keyboard focus. */
.wbt-tv .tv-controls{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wbt-tv .tv-controls:focus-within{position:static;width:auto;height:auto;margin:12px 0 0;overflow:visible;clip-path:none;white-space:normal}

/* Native visible video avoids hidden-video autoplay stalls on mobile Safari. */
.wbt-tv .glass video{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:contrast(1.1) saturate(.6) sepia(.15)}.wbt-tv .glass canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:none}.wbt-tv .glass .shine{z-index:2}.wbt-tv .glass:after{z-index:3}.wbt-tv .tv-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;min-height:44px;padding:10px 18px;background:#101410e6;border:1px solid #9b9279;color:#e1ddce;white-space:nowrap}.wbt-tv .tv-start[hidden]{display:none}.wbt-tv .tv-start:focus-visible{outline:2px solid #efb810;outline-offset:4px}