:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.vintage-button{width:clamp(38px,5vw,54px);height:clamp(38px,5vw,54px);border-radius:50%;background:linear-gradient(145deg,#d2691e 60%,#8b4513);border:clamp(2px,.4vw,3px) solid #2F1B14;cursor:pointer;position:relative;transition:all .18s cubic-bezier(.77,0,.18,1);display:flex;align-items:center;justify-content:center;box-shadow:0 2.5px 8px #00000052,0 1.5px 3px #0000002e,0 .5px .5px #0004,inset 0 1.5px 3px #ffffff21;z-index:1}.vintage-button:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 4px 12px #00000061,0 2px 6px #00000038,0 0 8px 1px #ffd70033,0 .5px .5px #0004,inset 0 2px 4px #ffffff2e}.vintage-button:active{transform:translateY(2px) scale(.98);box-shadow:0 1.5px 4px #00000052,0 .5px 2px #0000002e,0 .5px .5px #0004,inset 0 2.5px 5px #00000021;background:linear-gradient(145deg,#8b4513 70%,#654321);animation:click-flash .12s ease}@keyframes click-flash{0%{background:linear-gradient(145deg,#d2691e,#8b4513)}50%{background:linear-gradient(145deg,#ff8c00,#d2691e)}to{background:linear-gradient(145deg,#d2691e,#8b4513)}}.button-icon{font-size:clamp(22px,3vw,30px);color:#fff8dc;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}.button-icon svg{width:clamp(22px,3vw,30px);height:clamp(22px,3vw,30px);stroke:#fff8dc;fill:none;stroke-width:2;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.7))}.plus-icon:before{content:"+";font-size:clamp(26px,3vw,30px);color:#fff8dc;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.minus-icon:before{content:"−";font-size:clamp(26px,3vw,30px);color:#fff8dc;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.button-label{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);font-size:clamp(10px,1.2vw,13px);color:#333;text-transform:uppercase;letter-spacing:1px;font-weight:700;text-shadow:none;pointer-events:none;white-space:nowrap;z-index:2;background:none;padding:0 2px}.vintage-button:hover .button-icon{text-shadow:2px 2px 4px rgba(0,0,0,.7),0 0 10px rgba(255,248,220,.5)}@media (max-width: 900px){.tv-controls-vertical.left,.tv-controls-vertical.right{left:0;right:0;position:static;top:unset;transform:none;display:none}.tv-controls-mobile{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1vw,1.2rem);margin:1.2rem 0 0;width:100%;z-index:20;position:relative;order:2}.tv-scene{flex-direction:column;align-items:center;gap:.2rem;height:100dvh;min-height:100dvh;padding:0}.tv-container{order:1}.tv-controls-mobile .button-row{width:100%;max-width:340px;display:flex;flex-direction:row;justify-content:center;gap:clamp(.4rem,1vw,1.2rem)}.tv-controls-mobile .vintage-button{width:clamp(38px,8vw,54px);height:clamp(38px,8vw,54px)}.tv-controls-mobile .button-label{display:none!important}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}body{background:orange;margin:0;min-height:100vh;font-family:Inter,Segoe UI,Arial,sans-serif}.bonk-welcome{color:#fff;font-size:4.5rem;font-weight:900;letter-spacing:.08em;text-align:center;margin-top:15vh;line-height:1.1;filter:drop-shadow(0 0 32px #fff8);display:flex;justify-content:center;flex-wrap:wrap;gap:.2em;-webkit-user-select:none;user-select:none}.bonk-welcome span{display:inline-block;opacity:0;transform:scale(.2) translateY(60px) rotate(-10deg);animation:bonk-fluffy .7s cubic-bezier(.68,-.55,.27,1.55) forwards;background:linear-gradient(90deg,#fff 60%,#ffe5b4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 4px 24px #fff8,0 1px 0 #fff,0 0 0 #fff;border-radius:1.2em;padding:0 .08em}.bonk-welcome span.fluffy{filter:blur(1.5px) drop-shadow(0 0 18px #fff8)}@keyframes bonk-fluffy{0%{opacity:0;transform:scale(.2) translateY(60px) rotate(-10deg)}60%{opacity:1;transform:scale(1.25) translateY(-10px) rotate(2deg)}80%{transform:scale(.95) translateY(2px) rotate(-2deg)}to{opacity:1;transform:scale(1) translateY(0) rotate(0)}}.door-transition{position:fixed;inset:0;z-index:1000;display:flex;pointer-events:none;transition:none}.door-left,.door-right{flex:1;background:#d35400;transition:transform 1.6s cubic-bezier(.77,0,.18,1);will-change:transform;box-shadow:0 0 40px #b8733380 inset}.door-left{border-right:6px solid #fff7;transform:translate(0)}.door-right{border-left:6px solid #fff7;transform:translate(0)}.door-open .door-left{transform:translate(-102%)}.door-open .door-right{transform:translate(102%)}.tv-scene{display:flex;align-items:center;justify-content:center;height:100vh;gap:2rem}.tv-controls{display:flex;flex-direction:column;gap:1.5rem}.tv-controls-vertical{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:clamp(1.2rem,2vw,2.2rem);z-index:20}.tv-controls-vertical.left{left:clamp(-90px,-12vw,-60px)}.tv-controls-vertical.right{right:clamp(-90px,-12vw,-60px)}.tv-controls-mobile{display:none}@media (max-width: 900px){.tv-controls-vertical.left,.tv-controls-vertical.right{left:0;right:0;position:static;top:unset;transform:none;display:none}.tv-controls-mobile{display:flex;flex-direction:column;align-items:center;gap:clamp(.5rem,1vw,1.2rem);margin:.5rem 0 .2rem;width:100%;z-index:20}.tv-controls-mobile .button-row{width:100%;max-width:340px;display:flex;flex-direction:row;justify-content:center;gap:clamp(.4rem,1vw,1.2rem)}.tv-controls-mobile .vintage-button{width:clamp(38px,8vw,54px);height:clamp(38px,8vw,54px)}.tv-controls-mobile .button-label{font-size:clamp(8px,2vw,11px);bottom:-16px}}@media (max-width: 600px){html{font-size:13px}#root{padding:.5rem;max-width:100vw}.bonk-welcome{font-size:2.1rem;margin-top:7vh;gap:.08em}.tv-scene{flex-direction:column;gap:.2rem;height:100dvh;min-height:100dvh;padding:0}.tv-container{width:98vw;max-width:340px;height:200px;min-height:180px}.tv-controls-vintage{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:.7rem auto .2rem;gap:.2rem;width:100%;max-width:340px;top:unset;left:unset;right:unset;transform:none;z-index:10;order:2}.tv-body{border-radius:8px}.tv-screen-container{padding:5px}.tv-screen-outer{border-radius:10px;padding:5px}.tv-screen{border-radius:18px;border-width:2px}.tv-links{gap:.4rem;bottom:8px}.tv-link{font-size:.85rem;padding:.3rem .7rem;border-radius:.7rem}.tv-controls-vintage{position:static;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:.5rem 0 .2rem;gap:.2rem;width:100%;top:unset;left:unset;right:unset;transform:none;z-index:20}.tv-controls-vintage.left,.tv-controls-vintage.right{left:unset;right:unset;position:static;width:auto;margin:0}.vintage-btn-row{display:flex;flex-direction:row!important;gap:.4rem;width:100%;justify-content:center;align-items:center}.tv-controls-vintage{flex-wrap:nowrap}.tv-controls-vintage .vintage-btn-row{flex-direction:row!important;display:flex!important;width:100%;max-width:300px;justify-content:center;align-items:center;margin:0 auto}.tv-controls-vintage .vintage-btn-row{width:100%;max-width:300px}.tv-controls-vintage .vintage-btn-row+.vintage-btn-row{margin-top:.2rem}.tv-controls-vintage .vintage-button{flex:1 1 0;min-width:0}.vintage-button{width:clamp(60px,10vw,80px);height:clamp(60px,10vw,80px);border-radius:50%;background:linear-gradient(145deg,#d2691e,#8b4513);border:clamp(3px,.5vw,4px) solid #2F1B14;cursor:pointer;position:relative;transition:all .18s cubic-bezier(.77,0,.18,1);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 16px #0009,0 4px 8px #0006,inset 0 2px 4px #fff3;z-index:1;margin:0 .1rem}.vintage-button:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 24px #000000b3,0 6px 12px #00000080,0 0 10px 2px #ffd70055,inset 0 2px 4px #ffffff4d}.vintage-button:active{transform:translateY(2px) scale(.98);box-shadow:0 4px 8px #0009,0 2px 4px #0006,inset 0 4px 8px #0000004d;background:linear-gradient(145deg,#8b4513,#654321);animation:click-flash .12s ease}@keyframes click-flash{0%{background:linear-gradient(145deg,#d2691e,#8b4513)}50%{background:linear-gradient(145deg,#ff8c00,#d2691e)}to{background:linear-gradient(145deg,#d2691e,#8b4513)}}.vintage-button .button-icon{font-size:clamp(22px,3vw,30px);color:#fff8dc;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}.vintage-button .button-icon svg{width:clamp(22px,3vw,30px);height:clamp(22px,3vw,30px);stroke:#fff8dc;fill:none;stroke-width:2;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.7))}.vintage-button .plus-icon:before{content:"+";font-size:clamp(26px,3vw,30px);color:#fff8dc;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.vintage-button .minus-icon:before{content:"−";font-size:clamp(26px,3vw,30px);color:#fff8dc;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.7)}.vintage-button .button-label{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);font-size:clamp(10px,1.2vw,13px);color:#333;text-transform:uppercase;letter-spacing:1px;font-weight:700;text-shadow:none;pointer-events:none;white-space:nowrap;z-index:2;background:none;padding:0 2px}.vintage-button:hover .button-icon{text-shadow:2px 2px 4px rgba(0,0,0,.7),0 0 10px rgba(255,248,220,.5)}.tv-stand{height:7px;border-radius:0 0 5px 5px}.speaker{height:90px;padding:2px;border-radius:2px;gap:1px}.speaker-hole{border-radius:1px}.knob-container{margin:2px 0}.channel-dial{width:22px;height:22px;border-radius:50%}.channel-dial:before{width:8px;height:8px}.channel-number{font-size:5px}.power-light{width:4px;height:4px;bottom:4px;right:7px;box-shadow:0 0 2px #ff6b4a}.control-label{font-size:4px;margin-bottom:0}.tv-screen img,.tv-screen video{width:98%!important;height:98%!important;min-width:0!important;min-height:0!important;border-radius:12px!important}}.tv-btn{background:radial-gradient(circle at 60% 40%,#d0b078 70%,#a18452);color:#333;border:4px solid #b87333;border-radius:50%;width:60px;height:60px;font-size:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px #0002,0 0 0 4px #fff2 inset;transition:background .2s,color .2s,transform .1s,border .2s;margin:.2rem 0;outline:none}.tv-btn:hover,.tv-btn:focus{background:radial-gradient(circle at 60% 40%,#a18452 70%,#d0b078);color:#fff;border-color:#fff7;transform:scale(1.12)}.tv-btn svg{width:32px;height:32px;pointer-events:none}.antique-tv{background:#222;border:8px solid #b87333;border-radius:2.5rem;width:420px;height:320px;box-shadow:0 8px 40px #0007,0 0 0 12px #fff2 inset;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.tv-screen{background:#111;border:4px solid #fff8;border-radius:1.2rem;width:340px;height:220px;margin:1.2rem auto 0;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}.tv-links{position:absolute;left:50%;transform:translate(-50%);bottom:18px;display:flex;flex-wrap:wrap;gap:.5rem .25rem;justify-content:center;z-index:10;width:95vw;max-width:100vw;pointer-events:auto;padding:0 .5rem;box-sizing:border-box}.tv-link{color:#fff;background:#d35400;padding:.45rem .9rem;border-radius:1.2rem;text-decoration:none;font-weight:600;font-size:1.02rem;letter-spacing:.04em;transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 2px 8px #0002;border:2px solid #fff3;margin-bottom:0;margin-top:.3rem;white-space:nowrap}.tv-link:hover{background:#fff;color:#d35400;box-shadow:0 4px 16px #d3540055}@media (max-width: 600px){.tv-links{left:0;transform:none;width:100vw;max-width:100vw;padding:0 .2rem;gap:.3rem .1rem;justify-content:center}.tv-link{font-size:.92rem;padding:.38rem .6rem;margin:.1rem}}.vintage-button .button-label{position:absolute;bottom:-18px;left:50%;transform:translate(-50%);font-size:9px;color:#333;text-transform:uppercase;letter-spacing:1px;font-weight:700;text-shadow:none;pointer-events:none;white-space:nowrap;z-index:2;background:none;padding:0 2px}.vintage-btn-row{position:relative;z-index:1}.tv-container{position:relative;width:clamp(300px,90vw,600px);height:clamp(175px,52.5vw,350px);perspective:500px;max-width:90vw}.tv-body{position:absolute;width:100%;height:100%;background-color:#8b6b3d;border-radius:clamp(8px,2.5vw,15px);display:flex}.tv-screen-container{flex:5;padding:clamp(8px,2.5vw,15px)}.tv-screen-outer{background-color:#5d4827;height:100%;border-radius:clamp(10px,3.33vw,20px);padding:clamp(8px,2.5vw,15px);box-sizing:border-box;display:flex;align-items:center;justify-content:center}.tv-screen{position:relative;width:100%;height:100%;background:#5e5e5e;border-radius:clamp(30px,10vw,60px);overflow:hidden;border:clamp(2px,.83vw,5px) solid #333}.tv-screen:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#121010cc 50%,#000c)}.static{position:relative;width:100%;height:100%}.static:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-radial-gradient(circle at 17% 32%,#ffffff1a,#fff0 1%),repeating-radial-gradient(circle at 82% 65%,#ffffff1a,#fff0 1%);opacity:.2;animation:staticAnimation .5s infinite}.vignette{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 0 clamp(45px,15vw,90px) #000c;border-radius:clamp(28px,9.17vw,55px);pointer-events:none}.tv-controls{flex:1;background-color:#5f4a25;border-radius:0 clamp(8px,2.5vw,15px) clamp(8px,2.5vw,15px) 0;padding:clamp(10px,3.33vw,20px) clamp(8px,2.5vw,15px);display:flex;flex-direction:column;justify-content:space-between}.speaker{height:clamp(115px,38.33vw,230px);background-color:#5d4827;border-radius:clamp(3px,.83vw,5px);display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(25,1fr);gap:clamp(1px,.5vw,3px);padding:clamp(3px,.83vw,5px)}.speaker-hole{background-color:#3d3019;border-radius:clamp(1px,.5vw,3px)}.knob-container{display:flex;flex-direction:column;align-items:center;margin:clamp(5px,1.67vw,10px) 0}.knob{width:clamp(20px,6.67vw,40px);height:clamp(20px,6.67vw,40px);background:radial-gradient(#d0b078,#a18452);border-radius:50%;position:relative;box-shadow:0 clamp(1px,.33vw,2px) clamp(2px,.67vw,4px) #0006}.knob:after{content:"";position:absolute;top:50%;left:45%;width:40%;height:clamp(2px,.83vw,5px);background-color:#333;transform:translateY(-50%);border-radius:clamp(2px,.83vw,5px)}.knob-label{font-size:clamp(5px,1.67vw,10px);color:#d0b078;margin-top:clamp(2px,.83vw,5px);text-transform:uppercase;letter-spacing:1px}.channel-dial{width:clamp(25px,8.33vw,50px);height:clamp(25px,8.33vw,50px);background:radial-gradient(#d0b078,#a18452);border-radius:50%;position:relative;display:flex;justify-content:center;align-items:center;box-shadow:0 clamp(1px,.33vw,2px) clamp(2px,.67vw,4px) #0006}.channel-dial:before{content:"";position:absolute;width:clamp(10px,3.33vw,20px);height:clamp(10px,3.33vw,20px);background-color:#333;border-radius:50%}.channel-numbers{position:absolute;width:100%;height:100%}.channel-number{position:absolute;font-size:clamp(4px,1.33vw,8px);color:#333;font-weight:700}.channel-number:nth-child(1){top:clamp(2px,.83vw,5px);left:50%;transform:translate(-50%)}.channel-number:nth-child(2){top:15%;right:15%}.channel-number:nth-child(3){top:50%;right:clamp(2px,.83vw,5px);transform:translateY(-50%)}.channel-number:nth-child(4){bottom:15%;right:15%}.channel-number:nth-child(5){bottom:clamp(2px,.83vw,5px);left:50%;transform:translate(-50%)}.channel-number:nth-child(6){bottom:15%;left:15%}.channel-number:nth-child(7){top:50%;left:clamp(2px,.83vw,5px);transform:translateY(-50%)}.channel-number:nth-child(8){top:15%;left:15%}.tv-stand{position:absolute;bottom:clamp(-6px,-2vw,-12px);left:50%;z-index:-1;transform:translate(-50%);width:70%;height:clamp(8px,2.5vw,15px);background-color:#5d4827;border-radius:0 0 clamp(5px,1.67vw,10px) clamp(5px,1.67vw,10px)}.power-light{position:absolute;bottom:clamp(5px,1.67vw,10px);right:clamp(10px,3.33vw,20px);width:clamp(4px,1.17vw,7px);height:clamp(4px,1.17vw,7px);background-color:#ff6b4a;border-radius:50%;margin:clamp(5px,1.67vw,10px) auto;box-shadow:0 0 clamp(2px,.83vw,5px) #ff6b4a}.control-label{font-size:clamp(3px,1vw,6px);color:#d0b078;text-align:center;text-transform:uppercase;letter-spacing:.5px;margin-bottom:clamp(1px,.33vw,2px)}