@font-face{font-family:IO Display;src:url('./assets/display.otf') format('opentype');font-weight:700;font-display:swap}
.io-channels{--io-orange:#f76921;--io-ink:#0b0e0d;--io-paper:#f2eee3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.io-channel{position:relative;isolation:isolate;display:grid;grid-template-columns:88px 1fr;align-items:center;gap:22px;min-height:164px;padding:27px 25px 44px;color:var(--io-paper);background:var(--io-ink);border:1px solid #f76921;text-decoration:none;overflow:hidden;transition:color .25s,transform .25s}
.io-channel::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--io-orange);transform:translateX(-101%);transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.io-channel:hover,.io-channel:focus-visible{color:var(--io-ink);transform:translateY(-3px)}
.io-channel:hover::before,.io-channel:focus-visible::before{transform:translateX(0)}
.io-channel:focus-visible{outline:3px solid var(--io-paper);outline-offset:5px}
.io-channel__dial{position:relative;display:grid;place-items:center;width:84px;height:84px;color:var(--io-ink);background:var(--io-paper);border:2px solid var(--io-orange);border-radius:50%;box-shadow:0 0 0 6px var(--io-ink),0 0 0 7px var(--io-orange)}
.io-channel__dial::after{content:'';position:absolute;inset:-11px;border:1px solid currentColor;border-radius:50%;opacity:.3}
.io-channel__dial svg{width:30px;height:30px;fill:currentColor}
.io-channel__name{display:block;font:700 39px/.96 'IO Display','Arial Narrow',Impact,sans-serif;letter-spacing:.01em}
.io-channel__action{display:block;margin-top:12px;font:11px/1.45 'Courier New',monospace;letter-spacing:.075em;max-width:19em}
.io-channel__serial{position:absolute;bottom:17px;left:25px;font:10px/1 'Courier New',monospace;letter-spacing:.10em}
.io-channel__arrow{position:absolute;bottom:15px;right:24px;font:21px/1 Arial,sans-serif}
@media(max-width:800px){.io-channels{grid-template-columns:1fr}.io-channel{min-height:128px;grid-template-columns:72px 1fr;padding-top:24px;padding-bottom:39px}.io-channel__dial{width:68px;height:68px}.io-channel__name{font-size:36px}}
@media(prefers-reduced-motion:reduce){.io-channel,.io-channel::before{transition:none}.io-channel:hover,.io-channel:focus-visible{transform:none}}
/* Integrate the approved channel cards without changing their artwork or destinations. */
.connect{background:var(--ink);color:var(--paper);border-top:1px solid var(--line);padding-top:28px}.connect-top{border-bottom-color:var(--line);color:var(--muted)}.connect-body{display:block;padding-top:38px}.connect h2{font-size:clamp(70px,10vw,148px);line-height:1;letter-spacing:-1px;margin-bottom:22px}.connect h2 span{color:var(--orange)}.connect-intro{font-size:20px;line-height:1.55;margin-bottom:36px;color:var(--muted)}.io-channel__action{font-size:12px}.io-channel__serial{font-size:12px}
@media(max-width:700px){.connect h2{font-size:clamp(58px,15vw,104px);line-height:1;margin-bottom:22px}.connect-intro{font-size:18px}.io-channel{gap:20px;padding-left:23px;padding-right:20px}.io-channel__name{font-size:34px}.io-channel__action{letter-spacing:.025em}}
@media(max-width:380px){.io-channel{grid-template-columns:60px minmax(0,1fr);gap:19px;padding-left:18px;padding-right:14px}.io-channel__dial{width:56px;height:56px}.io-channel__name{font-size:29px}.io-channel__serial{left:18px}}