@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-700.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--blue:#123d60;--paper:#f7f5f1;--lime:#e8ff70;--ink:#34332f;--orange:#f08557}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#f7f5f1;color:#34332f;font-family:"DM Sans",Arial,sans-serif}
h1{font-size:2rem;line-height:1.1;letter-spacing:-.045em;margin:.4em 0 .6em}
p{line-height:1.45;margin:.65em 0}
.wordmark{color:#fff;font-size:clamp(2.5rem,7vw,7rem);font-weight:700;letter-spacing:-.075em;line-height:1.04}
.wordmark span{color:#f08557}
.tv-setup{min-height:100vh;display:flex}
.brand-panel,.instructions{width:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.brand-panel,.mobile-brand{background:#123d60;color:#fff}
.instructions{text-align:center;padding:2rem 5%;min-height:100vh}
.instructions p{font-size:clamp(.95rem,1.45vw,1.4rem)}
.eyebrow,.instructions .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#123d60;margin:0}
.qr{background:#fff;border:1px solid #deded5;border-radius:10px;width:34vh;max-width:85%;line-height:0;margin:.6rem 0}
.qr svg{display:block;width:100%;height:auto}
.pin{display:inline-block;color:#123d60;font-weight:700;letter-spacing:.13em;font-variant-numeric:tabular-nums;margin:0}
.instructions .pin{font-size:clamp(2rem,4vw,3.7rem);line-height:1.1}
.hint{color:#526258;font-size:.94rem}
.hint:empty{display:none}
button,.button{display:inline-block;padding:.8rem 1.2rem;font:inherit;font-weight:700;color:#123d60;background:#e8ff70;border:1px solid #123d60;border-radius:7px;text-decoration:none;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
#channel,.connected-splash{position:fixed;inset:0;top:0;right:0;bottom:0;left:0}
#channel{background:#000;display:none}
#channel iframe{width:100%;height:100%;border:0;display:block}
.connected-splash{display:none;align-items:center;justify-content:center;text-align:center;padding:1.5rem;color:#fff}
.connected-splash::before{content:"";position:absolute;inset:0;top:0;right:0;bottom:0;left:0;background:#123d60;transform-origin:left}
.splash-content{position:relative}
.previous-brand{position:absolute;left:25%;top:50%;transform:translate(-50%,-50%);opacity:0}
.connecting .previous-brand{animation:disappear .32s ease both}
@keyframes disappear{from{opacity:1}to{opacity:0}}
.connecting #channel,.watching #channel{display:block}
.connecting .tv-setup,.watching .tv-setup,.watching .connected-splash{display:none}
.connecting .connected-splash{display:flex}
.connecting .connected-splash::before{animation:expand .65s ease-out both}
.connecting .splash-content{animation:appear .55s .65s ease-out both}
.connected-splash h1{margin:1.4rem 0 .25rem}
.connected-splash p{color:#e1ebf2}
@keyframes expand{from{transform:scaleX(.5)}to{transform:scaleX(1)}}
@keyframes appear{from{opacity:0}to{opacity:1}}
.mobile-brand{padding:1.25rem 1.5rem}
.mobile-brand .wordmark{font-size:2rem;letter-spacing:-.05em}
.mobile-card{width:calc(100% - 2rem);max-width:480px;margin:2rem auto;padding:1.5rem;background:#fff;border:1px solid #deded5;border-radius:12px}
.mobile-card label{display:block;font-weight:700;margin:1.35rem 0 .45rem}
.mobile-card input{display:block;width:100%;padding:.8rem;border:1px solid #a9b2b6;border-radius:7px;font:inherit;font-size:1rem}
.mobile-card button{width:100%;margin-top:1rem}
.mobile-card .code-input{letter-spacing:.16em;font-size:1.4rem}
.back-to-store{color:#123d60;display:block;text-align:center;margin:1rem 0}
@media(max-width:600px){.tv-setup{display:block}.brand-panel,.instructions{width:100%;min-height:0}.brand-panel{padding:1.5rem}.instructions{padding:1.5rem 1rem}.qr{width:210px}}
@media(prefers-reduced-motion:reduce){.connecting .connected-splash::before{animation:none;transform:none}.connecting .splash-content{animation:none;opacity:1}.connecting .previous-brand{animation:none}}