.hy-tuner{--tt-paper:#f4f0e8;--tt-ink:#0a0a0c;--tt-signal:.04;position:absolute;inset:0;isolation:isolate;width:100%;height:100%;overflow:hidden;color:var(--tt-paper);background:#e7dfcd;font-family:inherit;margin:0}
.hy-tuner *{box-sizing:border-box}.hy-tuner button,.hy-tuner input{font:inherit}.hy-tuner button{cursor:pointer}.hy-tuner button:focus-visible,.hy-tuner input:focus-visible{outline:2px solid #ffc83d;outline-offset:5px}
.hy-tuner .tt-backdrop{position:absolute;inset:-30px;background-image:var(--tt-backdrop);background-position:center;background-size:cover;filter:blur(26px);opacity:.56;transform:scale(1.08);pointer-events:none}.hy-tuner .tt-view{position:absolute;inset:0;overflow:hidden;background:transparent}.hy-tuner .tt-video{display:block;width:100%;height:100%;object-fit:contain;opacity:1}.hy-tuner .tt-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#0001 3px 4px);opacity:.28;transition:opacity .6s}.hy-tuner .tt-static{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0c55;pointer-events:none;opacity:calc(1 - var(--tt-signal));transition:opacity .2s}.hy-tuner .tt-static svg{width:min(58%,650px);fill:none;stroke:#f4f0e8;stroke-width:1;opacity:.45}.hy-tuner.is-playing .tt-static,.hy-tuner.is-complete .tt-static{opacity:0}.hy-tuner.is-playing .tt-scan{opacity:.06}.hy-tuner .tt-message{position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%);text-align:center;font-size:13px;color:#f4f0e8;text-shadow:0 2px 15px #000}.hy-tuner .tt-reload{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);border:1px solid #f4f0e855;border-radius:99px;background:#141416dd;color:#f4f0e8;padding:10px 20px}
.hy-tuner .tt-controls{position:absolute;bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));left:50%;transform:translateX(-50%);width:min(670px,calc(100% - 48px));display:flex;flex-direction:column;gap:8px;padding:14px 22px 12px;align-items:stretch;border:1px solid #f4f0e82b;border-radius:22px;background:linear-gradient(110deg,#0a0a0cc7,#171713b3);box-shadow:0 8px 45px #0002;backdrop-filter:blur(16px);transition:opacity .4s,background .4s}.hy-tuner .tt-story{display:contents}.hy-tuner .tt-eyebrow,.hy-tuner h3,.hy-tuner .tt-intro{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hy-tuner .tt-eras{display:flex;gap:23px;justify-content:center;margin:0;font-size:10px;color:#f4f0e880}.hy-tuner .tt-eras span{display:inline-flex;align-items:center;gap:7px}.hy-tuner .tt-eras i{height:4px;width:4px;border-radius:50%;border:1px solid currentColor}.hy-tuner .tt-eras .is-current{color:#ffc83d}.hy-tuner .tt-eras .is-done{color:#c3d4a7}.hy-tuner .tt-eras .is-done i{background:currentColor}.hy-tuner .tt-tuning{display:grid;grid-template-columns:1fr auto;gap:0 15px;align-items:center}.hy-tuner .tt-receiver{position:relative;height:23px;border-bottom:1px solid #f4f0e833;direction:ltr;display:flex;justify-content:space-between;align-items:end;grid-column:1/-1;margin:0 0 5px}.hy-tuner .tt-receiver>i{height:5px;width:1px;background:#f4f0e844}.hy-tuner .tt-target{position:absolute;bottom:0;height:18px;width:12%;background:linear-gradient(0deg,#ffc83d33,#ffc83d06);border:1px solid #ffc83d77;border-bottom:0;border-radius:4px 4px 0 0}.hy-tuner .tt-needle{position:absolute;bottom:-4px;height:25px;width:2px;background:#f4f0e8;box-shadow:0 0 14px #f4f0e855}.hy-tuner .tt-dial-row{display:flex;align-items:center;gap:10px;grid-column:1/-1}.hy-tuner .tt-knob{height:28px;width:28px;flex:none;border-radius:50%;border:1px solid #f4f0e844;background:radial-gradient(circle at 35% 30%,#535045,#17171a 70%);transform:rotate(var(--tt-dial,-135deg));position:relative}.hy-tuner .tt-knob i{display:block;width:2px;height:8px;background:#ffc83d;position:absolute;left:calc(50% - 1px);top:3px;border-radius:2px}.hy-tuner .tt-range-label{flex:1;display:block;font-size:9px;color:#f4f0e866}.hy-tuner .tt-range-label span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hy-tuner .tt-range{direction:ltr;display:block;width:100%;height:25px;margin:0;accent-color:#f4f0e8;cursor:ew-resize;touch-action:pan-y}.hy-tuner .tt-resonance{height:1px;background:#f4f0e81a;overflow:hidden;grid-column:1/-1;margin-top:4px}.hy-tuner .tt-resonance>i{height:100%;width:0;background:#ffc83d;display:block}.hy-tuner .tt-status{font-size:10px;line-height:1.6;color:#f4f0e8d9;margin:6px 0 0;min-height:16px;grid-column:1;align-self:center}.hy-tuner .tt-action{border:1px solid #f4f0e8aa;border-radius:99px;padding:8px 17px;color:#0a0a0c;background:#f4f0e8;font-size:11px;grid-column:2;grid-row:4/6;margin-top:7px;max-width:230px}.hy-tuner .tt-links{display:flex;gap:16px;grid-column:1;flex-wrap:wrap;margin-top:4px}.hy-tuner .tt-links button{background:none;color:#f4f0e877;border:0;border-bottom:1px solid #f4f0e82b;padding:0 0 2px;font-size:9px}.hy-tuner [hidden]{display:none!important}.hy-tuner.has-error .tt-static{opacity:.4}.hy-tuner.is-playing .tt-receiver,.hy-tuner.is-playing .tt-dial-row,.hy-tuner.is-playing .tt-resonance{display:none}.hy-tuner.is-playing .tt-controls{background:#0a0a0c8c;opacity:.82}.hy-tuner.is-playing .tt-links{display:none}.hy-tuner.is-playing .tt-status{text-align:center;grid-column:1/-1;margin:2px 0 0}.hy-tuner.is-complete .tt-receiver,.hy-tuner.is-complete .tt-dial-row,.hy-tuner.is-complete .tt-resonance,.hy-tuner[data-tt-state="between"] .tt-receiver,.hy-tuner[data-tt-state="between"] .tt-dial-row,.hy-tuner[data-tt-state="between"] .tt-resonance{display:none}.hy-tuner.is-complete .tt-action,.hy-tuner[data-tt-state="between"] .tt-action{grid-row:1/3}.hy-tuner.is-complete .tt-status,.hy-tuner[data-tt-state="between"] .tt-status{grid-row:1}
@media(max-width:600px){.hy-tuner .tt-controls{width:calc(100% - 28px);bottom:max(17px,calc(env(safe-area-inset-bottom) + 13px));border-radius:19px;padding:12px 15px 10px;gap:7px}.hy-tuner .tt-eras{gap:15px;font-size:9px}.hy-tuner .tt-tuning{gap:0 10px}.hy-tuner .tt-action{font-size:10px;padding:8px 12px;max-width:145px}.hy-tuner .tt-status{font-size:10px}.hy-tuner .tt-links{gap:12px}.hy-tuner .tt-video{padding-bottom:clamp(0px,6vh,45px)}}
@media(orientation:landscape) and (max-height:500px){.hy-tuner .tt-controls{width:min(560px,calc(100% - 180px));bottom:12px;padding:8px 16px;gap:4px;border-radius:17px}.hy-tuner .tt-eras{font-size:9px;gap:20px}.hy-tuner .tt-receiver{height:16px;margin-bottom:2px}.hy-tuner .tt-target{height:14px}.hy-tuner .tt-needle{height:20px}.hy-tuner .tt-dial-row{gap:8px}.hy-tuner .tt-knob{height:22px;width:22px}.hy-tuner .tt-knob i{height:6px;top:3px}.hy-tuner .tt-range{height:19px}.hy-tuner .tt-status{margin-top:4px;font-size:9px}.hy-tuner .tt-links{margin-top:0}.hy-tuner .tt-links button{font-size:8px}.hy-tuner .tt-action{padding:7px 13px;font-size:10px}.hy-tuner .tt-video{padding:0}}
@media(prefers-reduced-motion:reduce){.hy-tuner *{transition:none!important}.hy-tuner .tt-scan{display:none}}
/* Portrait uses a slow camera move from the viewers to their television, filling the scene. */
@media(max-width:600px) and (orientation:portrait){.hy-tuner .tt-video{object-fit:cover;object-position:var(--tt-pan,17%) center;padding:0}.hy-tuner .tt-backdrop{display:none}.hy-tuner .tt-controls{background:linear-gradient(110deg,#0a0a0cc7,#171713b3)}}
@media(max-width:600px) and (orientation:portrait) and (prefers-reduced-motion:reduce){.hy-tuner .tt-video{object-fit:contain;object-position:center}.hy-tuner .tt-backdrop{display:block}}