/* Website finder: demo A (channel surfer) built into the season page as #finder.
   Generated from mockup/quiz/demo-a-channel-surfer.html by a scoped port: every rule sits under .fdr,
   keyframes are fdr-*, and .q/.cue/.nav became .f-q/.f-cue/.f-nav because the page already uses them.
   Edit this file directly from here on; the demo is the reference, not the source. */
.fdr{--scr:#060606; --art:#D9D5D3; --art-dim:#5E5859;
  padding:var(--sec-y) 0; background:var(--paper); border-top:1px solid var(--line-2); scroll-margin-top:4rem}
/* the stage lines up with the section title, and its own head already carries space above the set */
.fdr .sec-head{margin-bottom:clamp(1rem,2.5vw,2rem)}
.fdr button{font:inherit; color:inherit}
.fdr :focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.fdr [hidden]{display:none !important}
.fdr .stage{max-width:1180px; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,720px) 276px;
  justify-content:start; align-items:end; column-gap:clamp(36px,5vw,72px); row-gap:30px}
.fdr .head{display:flex; flex-direction:column; justify-content:flex-end; min-height:calc(2.1 * clamp(1.45rem,3.2vw,2.5rem) + 4rem); margin-bottom:clamp(16px,2vw,24px)}
.fdr .kick{display:flex; align-items:center; gap:.6rem; font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.fdr .f-q{margin-top:.6rem;font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.45rem,3.2vw,2.5rem);
  letter-spacing:-.03em; line-height:1.05; text-wrap:balance}
.fdr .hint{margin-top:.55rem; font-size:1.0625rem; color:var(--ink-2)}
.fdr .tv{position:relative; isolation:isolate}
.fdr .tv::after{content:""; position:absolute; z-index:-1; left:5%; right:5%; bottom:-18px; height:30px; background:radial-gradient(50% 50% at 50% 50%,rgba(35,31,32,.3),rgba(35,31,32,0) 72%)}
.fdr .tv__body{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:14px; padding:14px; border:1px solid #000; border-radius:10px;
  background:linear-gradient(180deg,#242122 0%,#161415 38%,#0E0C0D 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.04)}
.fdr .tv__glass{container-type:inline-size; padding:10px; border-radius:20px/17px; background:#030303;
  box-shadow:inset 0 0 0 1px #000, inset 0 3px 12px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.07)}
.fdr .screen{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:26px/20px; background:var(--scr); isolation:isolate; color:var(--on-black)}
.fdr .screen.is-guide{aspect-ratio:auto; min-height:75cqw}
.fdr .tv__feet{display:flex; justify-content:space-between; padding:0 13%}
.fdr .tv__feet::before, .fdr .tv__feet::after{content:""; width:64px; height:9px; background:linear-gradient(180deg,#0B0A0A,#1C191A); border:1px solid #000; border-top:0; border-radius:0 0 3px 3px}
.fdr .tv__side{display:flex; flex-direction:column; gap:12px; min-width:0}
.fdr .grille{flex:1; min-height:60px; border:1px solid #000; border-radius:3px; background:repeating-linear-gradient(180deg,#050404 0 3px,#1E1B1C 3px 6px); box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.fdr .tv__lcd{display:flex; align-items:baseline; justify-content:center; gap:.35rem; padding:.55rem .3rem .5rem; border:1px solid #000; border-radius:2px; background:var(--lcd-bg);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.85); font-family:var(--f-mono); color:var(--lcd); text-shadow:0 0 8px rgba(245,154,98,.5); font-variant-numeric:tabular-nums; white-space:nowrap}
.fdr .tv__lcd small{font-size:.625rem; font-weight:600; letter-spacing:.14em}
.fdr .tv__lcd b{font-size:1.65rem; font-weight:600; line-height:1; letter-spacing:.02em}
.fdr .tv__lcd.is-word small{display:none}
.fdr .tv__lcd.is-word b{font-size:1rem; letter-spacing:.1em; line-height:1.65rem}
.fdr .leds{list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:9px 4px}
.fdr .leds li{display:flex; flex-direction:column; align-items:center; gap:4px; font-family:var(--f-mono); font-size:.625rem; font-weight:600; line-height:1; color:#6F6A6B}
.fdr .leds i{width:12px; height:5px; border-radius:1px; background:#3a1d12; box-shadow:inset 0 1px 1px rgba(0,0,0,.6); transition:background .15s, box-shadow .15s}
.fdr .leds li.is-cur{color:#fff}
.fdr .leds li.is-cur i{background:#77716F}
.fdr .leds li.is-done i{background:var(--accent); box-shadow:var(--glow)}
.fdr .lamp{display:flex; align-items:center; justify-content:center; gap:.45rem; font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6F6A6B; transition:color .3s}
.fdr .lamp.is-on{color:#fff}
.fdr .lamp.is-on .tally{background:var(--accent); box-shadow:0 0 10px rgba(247,126,45,.95)}
.fdr .pic{position:absolute; inset:0; display:flex; flex-direction:column; transform-origin:50% 50%}
.fdr .screen.is-guide .pic{position:relative; inset:auto; min-height:75cqw}
.fdr .osd{position:absolute; z-index:4; top:5cqw; left:6cqw; padding:.12em .42em; background:rgba(0,0,0,.72); font-family:var(--f-mono); font-weight:600; font-size:clamp(.9rem,3cqw,1.35rem);
  letter-spacing:.06em; line-height:1.3; color:var(--lcd); text-shadow:0 0 8px rgba(245,154,98,.6); transform-origin:0 0; pointer-events:none; font-variant-numeric:tabular-nums}
.fdr .osd.pop{animation:fdr-pop .55s var(--ease)}
@keyframes fdr-pop{0%{transform:scale(1.8); opacity:0} 25%{opacity:1} 100%{transform:none}}
.fdr .bug{position:absolute; z-index:4; top:5.4cqw; right:6.4cqw; width:clamp(13px,4cqw,24px); height:auto; fill:#fff; opacity:.62; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events:none}
.fdr .screen.is-guide .osd, .fdr .screen.is-guide .bug{display:none}
.fdr .scan{position:absolute; inset:0; z-index:7; pointer-events:none; border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,0) 1px 3px),
             radial-gradient(130% 110% at 50% 50%,rgba(0,0,0,0) 58%,rgba(0,0,0,.6) 100%),
             linear-gradient(155deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 32%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.fdr .noise{position:absolute; inset:0; z-index:6; width:100%; height:100%; opacity:0; image-rendering:pixelated; pointer-events:none}
.fdr .screen.is-static .noise{opacity:.9}
.fdr .screen.is-static .pic{transform:translate(-1%,5%) skewX(-3deg); filter:brightness(1.5) contrast(1.3)}
.fdr .pic.settle{animation:fdr-settle .34s var(--ease)}
@keyframes fdr-settle{0%{transform:translateY(-7%) scaleY(1.06); filter:brightness(1.8) contrast(1.25)} 45%{transform:translateY(1.4%)} 100%{transform:none; filter:none}}
.fdr .screen.tunein .pic{animation:fdr-tunein .8s var(--ease) both}
@keyframes fdr-tunein{0%{transform:scale(1.02,.006); filter:brightness(5)} 32%{transform:scale(1,.006); filter:brightness(5)} 62%{transform:scale(1,1.03); filter:brightness(1.5)} 100%{transform:none; filter:none}}
.fdr .screen.tunein::before{content:""; position:absolute; z-index:8; left:0; right:0; top:50%; height:2px; margin-top:-1px; background:#fff; box-shadow:0 0 18px 4px rgba(255,255,255,.55); animation:fdr-tline .8s ease both}
@keyframes fdr-tline{0%{transform:scaleX(0); opacity:1} 30%{transform:scaleX(1); opacity:1} 55%,100%{opacity:0}}
.fdr .tcard{position:absolute; inset:0; display:grid; grid-template-rows:62% 9% 1fr; opacity:.84}
.fdr .tcard__bars{background:linear-gradient(90deg,#CFCBCA 0 14.3%,#A6A2A1 0 28.6%,#7E797A 0 42.9%,var(--lcd) 0 57.1%,#5A5556 0 71.4%,#3A3536 0 85.7%,#1F1C1D 0)}
.fdr .tcard__cast{background:repeating-linear-gradient(90deg,#1F1C1D 0 7.143%,#CFCBCA 0 14.286%)}
.fdr .tcard__ramp{background:linear-gradient(90deg,#000 0 25%,#0E0D0D 0 50%,#1C1A1A 0 75%,#000 0)}
.fdr .tcard__box{position:absolute; z-index:2; left:50%; top:52%; transform:translate(-50%,-50%); display:grid; gap:.35rem; justify-items:center; padding:.85rem 1.3rem;
  background:#070606; border:1px solid #000; box-shadow:0 0 0 3px rgba(0,0,0,.45); text-align:center; white-space:nowrap}
.fdr .tcard__box b{font-family:var(--f-mono); font-size:clamp(.7rem,2.6cqw,1rem); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lcd); text-shadow:0 0 8px rgba(245,154,98,.55)}
.fdr .tcard__box span{font-family:var(--f-mono); font-size:clamp(.6rem,2cqw,.75rem); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-2)}
.fdr .pic__art{position:relative; flex:1; min-height:0}
.fdr .pic__art .art{position:absolute; top:13cqw; left:14cqw; width:calc(100% - 28cqw); height:calc(100% - 16cqw); stroke-width:2}
.fdr .mv{flex:1; min-height:0; display:grid; gap:3px; padding:12cqw 4.5cqw 2.5cqw; grid-template-columns:repeat(var(--c,2),minmax(0,1fr)); grid-auto-rows:minmax(0,1fr)}
.fdr .mv[data-n="3"]{--c:3}
.fdr .mv[data-n="5"]{--c:6}
.fdr .mv[data-n="5"] .mv__t{grid-column:span 2}
.fdr .mv[data-n="5"] .mv__t:nth-child(n+4){grid-column:span 3}
.fdr .mv__t{min-width:0; min-height:0; display:flex; flex-direction:column; gap:3px; padding:4px; background:#0B0A0A; border:1px solid #1E1B1C}
.fdr .mv__t .art{flex:1; min-height:0; width:100%; stroke-width:1.5}
.fdr .mv__t.is-on{border-color:#6F6A6B}
.fdr .mv__l{display:flex; align-items:center; gap:.4rem; padding:.22rem .38rem; background:var(--umd); font-family:var(--f-mono); font-size:clamp(.5rem,1.8cqw,.6875rem); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--umd-ink); line-height:1.2}
.fdr .mv__l span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fdr .mv__l .tally{width:6px; height:6px}
.fdr .lower{flex:none; margin:0 4.5cqw 4.5cqw}
.fdr .lower__strap{display:flex; align-items:center; gap:.55rem; padding:.42rem .7rem; background:var(--umd); border:1px solid #000; font-family:var(--f-mono);
  font-size:clamp(.625rem,2.2cqw,.8125rem); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#fff}
.fdr .lower__strap span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fdr .lower__strap em{margin-left:auto; font-style:normal; color:var(--lcd); white-space:nowrap}
.fdr .lower__eg{padding:.5rem .7rem .6rem; background:rgba(8,7,7,.94); border:1px solid #000; border-top:0; font-size:clamp(.78rem,2.7cqw,1.02rem); line-height:1.42; color:#D8D4D3; text-wrap:pretty}
.fdr .msg{position:absolute; z-index:5; left:50%; top:47%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:#070606;
  border:1px solid var(--accent); font-family:var(--f-mono); font-size:clamp(.7rem,2.5cqw,.95rem); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; white-space:nowrap}
.fdr .art{display:block; fill:none; stroke:var(--art); stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; overflow:visible}
.fdr .art *{vector-effect:non-scaling-stroke}
.fdr .art .d{stroke:var(--art-dim)}
.fdr .art .o{stroke:var(--lcd); filter:drop-shadow(0 0 3px rgba(245,154,98,.6))}
.fdr .art .of{fill:var(--lcd); stroke:none; filter:drop-shadow(0 0 4px rgba(245,154,98,.6))}
.fdr .art .lf{fill:var(--art); stroke:none}
.fdr .art .df{fill:#262223}
.fdr .art .bg{fill:var(--scr)}
.fdr .art .k{stroke:var(--scr)}
.fdr .epg{flex:1; display:flex; flex-direction:column; font-size:clamp(.82rem,2.5cqw,1rem)}
.fdr .epg__bar{display:flex; align-items:center; gap:.6rem; padding:.75rem 6cqw .65rem; background:var(--umd); border-bottom:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink)}
.fdr .epg__bar b{color:#fff; font-size:.8125rem; letter-spacing:.12em}
.fdr .epg__bar .dp{margin-left:auto; color:var(--lcd); text-shadow:0 0 6px rgba(245,154,98,.4); white-space:nowrap}
.fdr .epg__main{display:grid; grid-template-columns:minmax(0,36%) minmax(0,1fr); gap:5cqw; padding:5cqw 6cqw 3.5cqw; align-items:start}
.fdr .epg__still{display:flex; flex-direction:column; gap:3px}
.fdr .epg__still div{aspect-ratio:4/3; padding:7%; background:#0B0A0A; border:1px solid #2A2627}
.fdr .epg__still .art{width:100%; height:100%; stroke-width:1.6}
.fdr .epg__still p{display:flex; align-items:center; gap:.45rem; padding:.24rem .45rem; background:var(--umd); border:1px solid #000; font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--umd-ink)}
.fdr .epg__name{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.4rem,6cqw,2.5rem); letter-spacing:-.03em; line-height:1.02; color:#fff; outline:none}
.fdr .epg__meta{display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem; margin-top:.8rem}
.fdr .price{display:inline-flex; align-items:baseline; gap:.45rem; padding:.42rem .7rem; background:var(--lcd-bg); border:1px solid #000; border-radius:2px; box-shadow:inset 0 2px 6px rgba(0,0,0,.85);
  font-family:var(--f-mono); font-size:clamp(.95rem,3.1cqw,1.25rem); font-weight:600; letter-spacing:.04em; color:var(--lcd); text-shadow:0 0 6px rgba(245,154,98,.45); white-space:nowrap}
.fdr .price small{font-size:.6em; letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-2); text-shadow:none}
.fdr .run{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-black-2)}
.fdr .run b{display:block; margin-top:.1rem; font-size:.8125rem; letter-spacing:.06em; color:#fff}
.fdr .epg__why{margin-top:.8rem; line-height:1.45; color:#D8D4D3; text-wrap:pretty}
.fdr .epg__time{display:flex; align-items:baseline; gap:.55rem; margin-top:.65rem; line-height:1.4; color:#fff}
.fdr .epg__time .tally{transform:translateY(-1px)}
.fdr .epg__rows{list-style:none; margin:0 6cqw; padding:0; border-top:1px solid #2A2627}
.fdr .epg__rows li{display:grid; grid-template-columns:7.5em minmax(0,1fr) auto; gap:.25rem 1rem; align-items:baseline; padding:.62rem 0; border-bottom:1px solid #1B1819}
.fdr .f-cue{font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lcd)}
.fdr .epg__rows b{font-family:var(--f-head); font-weight:700; line-height:1.3; color:#fff}
.fdr .epg__rows .v{text-align:right; color:#C9C5C4; font-variant-numeric:tabular-nums}
.fdr .epg__foot{margin-top:auto; padding:.8rem 6cqw .9rem; font-size:.8125rem; line-height:1.45; color:var(--on-black-2)}
@container (max-width:480px){
  .fdr .epg__main{grid-template-columns:minmax(0,30%) minmax(0,1fr); gap:4cqw; padding:5cqw 5cqw 3cqw}
  .fdr .epg__still p{display:none}
  .fdr .epg__rows{margin:0 5cqw}
  .fdr .epg__rows li{grid-template-columns:minmax(0,1fr) auto; gap:.15rem .8rem}
  .fdr .epg__rows .f-cue{grid-column:1 / -1}
  .fdr .epg__bar, .fdr .epg__foot{padding-inline:5cqw}
}
.fdr .remote{position:relative; isolation:isolate; width:100%; padding:16px 14px 20px; border:1px solid #000; border-radius:34px 34px 26px 26px / 26px 26px 40px 40px; color:var(--on-black);
  background:linear-gradient(90deg,#121011 0%,#221F20 9%,#1B1819 50%,#221F20 91%,#0F0D0E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 0 rgba(0,0,0,.55)}
.fdr .remote::after{content:""; position:absolute; z-index:-1; left:8%; right:8%; bottom:-16px; height:26px; background:radial-gradient(50% 50% at 50% 50%,rgba(35,31,32,.28),rgba(35,31,32,0) 72%)}
.fdr .remote :focus-visible{outline:2px solid #fff; outline-offset:2px}
.fdr .rtop{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 10px; padding:0 4px 10px}
.fdr .ir{width:46px; height:12px; border-radius:6px; background:linear-gradient(180deg,#1C0E0A,#0B0605); box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); transition:background .08s, box-shadow .08s}
.fdr .ir.tx{background:var(--accent); box-shadow:0 0 14px rgba(247,126,45,.95), inset 0 1px 2px rgba(0,0,0,.3)}
.fdr .pwr{display:flex; align-items:center; gap:.6rem; padding:0; background:none; border:0; cursor:pointer; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-black-2); -webkit-tap-highlight-color:transparent}
.fdr .pwr i{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid #000; border-bottom-width:3px; background:linear-gradient(180deg,#322D2E,#1D1A1B); box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.fdr .pwr svg{width:14px; height:14px; fill:none; stroke:#E8E5E4; stroke-width:2; stroke-linecap:round}
.fdr .pwr:hover{color:#fff}
.fdr .pwr:active i{transform:translateY(1px); border-bottom-width:2px}
.fdr .mode{order:3; flex:1 0 100%; padding-top:11px; border-top:1px solid #2A2627;font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-2)}
.fdr .pad{display:grid; gap:8px}
.fdr .pad.nudge{animation:fdr-nudge .32s}
@keyframes fdr-nudge{20%{transform:translateX(-5px)} 45%{transform:translateX(4px)} 70%{transform:translateX(-2px)}}
.fdr .k{position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) 10px; align-items:center; gap:10px; width:100%; min-height:54px; padding:8px 12px; text-align:left; cursor:pointer;
  border:1px solid #000; border-bottom-width:4px; border-radius:7px; background:linear-gradient(180deg,#312D2E,#211E1F); color:#ECE9E8;
  font-family:var(--f-body); font-size:.9375rem; font-weight:600; line-height:1.25; box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-tap-highlight-color:transparent; transition:transform .06s, border-bottom-width .06s, margin .06s, background .15s, color .15s}
.fdr .k:hover{background:linear-gradient(180deg,#393435,#262223)}
.fdr .k__n{font-family:var(--f-mono); font-size:.875rem; font-weight:600; color:#8A8485; text-align:center; font-variant-numeric:tabular-nums}
.fdr .k__t{width:10px; height:10px; border-radius:1px; background:#3a1d12; box-shadow:inset 0 1px 1px rgba(0,0,0,.7); transition:background .15s, box-shadow .15s}
.fdr .k:active, .fdr .k.is-down, .fdr .k[aria-pressed="true"]{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
.fdr .k[aria-pressed="true"]{background:linear-gradient(180deg,#161314,#100E0F); color:#fff; box-shadow:inset 0 2px 6px rgba(0,0,0,.75)}
.fdr .k[aria-pressed="true"] .k__n{color:var(--lcd); text-shadow:0 0 6px rgba(245,154,98,.5)}
.fdr .k[aria-pressed="true"] .k__t{background:var(--accent); box-shadow:var(--glow)}
.fdr .f-nav{display:grid; grid-template-columns:1fr 1.5fr; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid #2A2627}
.fdr .f-nav.has-skip{grid-template-columns:1fr 1fr 1.3fr}
.fdr .f-nav.is-result{grid-template-columns:1fr}
.fdr .ck{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:58px; padding:6px 8px; cursor:pointer;
  border:1px solid #000; border-bottom-width:4px; border-radius:7px; background:linear-gradient(180deg,#312D2E,#211E1F); color:#ECE9E8; box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-tap-highlight-color:transparent; transition:transform .06s, border-bottom-width .06s, margin .06s, background .2s, color .2s}
.fdr .ck b{font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.14em; color:var(--on-black-2)}
.fdr .ck span{font-family:var(--f-head); font-size:1rem; font-weight:700; line-height:1.15}
.fdr .ck:hover{background:linear-gradient(180deg,#393435,#262223)}
.fdr .ck:active, .fdr .ck.is-down{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
.fdr .ck:disabled{opacity:.32; cursor:default; transform:none; border-bottom-width:4px; margin-bottom:0}
.fdr .ck .led{position:absolute; top:9px; right:10px; width:7px; height:7px; background:#4A4748; transition:background .15s, box-shadow .15s}
.fdr .ck--next.is-armed{background:#fff; border-color:#fff; border-bottom-color:#8E898A; color:var(--black)}
.fdr .ck--next.is-armed b{color:var(--ink-2)}
.fdr .ck--next.is-armed .led{background:var(--accent); box-shadow:var(--glow)}
.fdr .answers{padding:11px 12px; border:1px solid #000; border-radius:3px; background:var(--lcd-bg); box-shadow:inset 0 2px 8px rgba(0,0,0,.9)}
.fdr .answers ol{list-style:none; padding:0; display:grid; gap:6px}
.fdr .answers li{display:grid; grid-template-columns:1.5em minmax(0,1fr); font-family:var(--f-mono); font-size:.75rem; line-height:1.4; color:var(--lcd); text-shadow:0 0 6px rgba(245,154,98,.35)}
.fdr .answers li b{font-weight:600; color:#9C7660}
.fdr .acts{display:grid; gap:8px; margin-top:12px}
.fdr .rk{display:flex; align-items:center; gap:.7rem; min-height:54px; padding:.75rem 1rem; border:1px solid #000; border-bottom-width:4px; border-radius:7px; cursor:pointer;
  background:linear-gradient(180deg,#312D2E,#211E1F); color:#ECE9E8; font-family:var(--f-head); font-size:1rem; font-weight:700; line-height:1.15; text-align:left; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1); -webkit-tap-highlight-color:transparent; transition:transform .06s, border-bottom-width .06s, margin .06s, background .2s}
.fdr .rk::before{content:""; flex:none; width:7px; height:7px; background:#4A4748; transition:background .15s, box-shadow .15s}
.fdr .rk:hover{background:linear-gradient(180deg,#393435,#262223)}
.fdr .rk:active{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px}
.fdr .rk--send, .fdr .rk--send:hover{background:#fff; border-color:#fff; border-bottom-color:#8E898A; color:var(--black)}
.fdr .rk--send:hover{background:var(--paper-2)}
.fdr .rk--send::before, .fdr .rk.is-lit::before{background:var(--accent); box-shadow:var(--glow)}
.fdr .brand{display:block; width:84px; height:auto; margin:18px auto 0; fill:#fff; opacity:.7}
.fdr .kbd{grid-column:2; margin-top:-10px; text-align:center; font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--ink-3)}
@media not ((hover:hover) and (pointer:fine)){
  .fdr .kbd{display:none}
}
@media (max-width:860px){
  .fdr .stage{grid-template-columns:minmax(0,1fr); row-gap:28px}
  .fdr .remote{max-width:460px; justify-self:center}
  .fdr .pad{grid-template-columns:1fr 1fr}
  .fdr .pad .k:last-child:nth-child(odd){grid-column:1 / -1}
  .fdr .k{grid-template-columns:16px minmax(0,1fr) 9px; gap:8px; padding:8px 10px; min-height:58px; font-size:.875rem}
  .fdr .kbd{display:none}
}
@media (max-width:600px){
  .fdr .stage{row-gap:16px}
  .fdr .head{min-height:0; margin-bottom:12px}
  .fdr .f-q{margin-top:.4rem}
  .fdr .hint{margin-top:.35rem; font-size:.9375rem}
  .fdr .tv__body{grid-template-columns:minmax(0,1fr); gap:8px; padding:8px; border-radius:8px}
  .fdr .tv__glass{padding:6px; border-radius:15px/13px}
  .fdr .screen{border-radius:18px/14px}
  .fdr .tv__side{flex-direction:row; align-items:center; gap:10px; padding:0 2px}
  .fdr .grille{flex:0 0 34px; min-height:0; height:24px}
  .fdr .tv__lcd{padding:.28rem .5rem; min-width:4.6rem}
  .fdr .tv__lcd b{font-size:1.05rem}
  .fdr .tv__lcd.is-word b{font-size:.75rem; line-height:1.05rem}
  .fdr .leds{display:flex; gap:7px; margin-left:auto}
  .fdr .leds li{gap:3px}
  .fdr .leds i{width:10px; height:4px}
  .fdr .tv__feet{padding:0 16%}
  .fdr .tv__feet::before, .fdr .tv__feet::after{width:44px; height:7px}
  .fdr .remote{border-radius:26px 26px 20px 20px / 20px 20px 30px 30px; padding:12px 12px 14px}
  .fdr .rtop{flex-wrap:nowrap; margin-bottom:10px; padding:0 2px 10px; border-bottom:1px solid #2A2627}
  .fdr .ir{width:30px; height:10px; flex:none}
  .fdr .mode{order:1; flex:1 1 auto; min-width:0; padding:0; border:0; text-align:center; font-size:.625rem}
  .fdr .pwr{order:2; font-size:.625rem; gap:.45rem}
  .fdr .pwr i{width:32px; height:32px}
  .fdr .k{min-height:52px}
  .fdr .f-nav{margin-top:10px; padding-top:10px}
  .fdr .ck{min-height:54px}
  .fdr .brand{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fdr *, .fdr *::before, .fdr *::after{animation:none !important; transition:none !important}
  .fdr .screen.is-static .pic{transform:none; filter:none}
}

/* ---------- real builds next to the options ---------- */
.fdr .k__l{min-width:0}
.fdr .k__x{display:block; margin-top:3px; text-wrap:balance;  /* wraps on the phone's two-up keys rather than cutting the name */
  font-family:var(--f-mono); font-size:.6875rem; font-weight:500; letter-spacing:.02em; color:#8F898A}
.fdr .k[aria-pressed="true"] .k__x{color:#C9A48D}
/* the picked build fills the set as footage, the drawing waits for options with no build on record */
.fdr .pic__shot{position:absolute; inset:0; z-index:0; overflow:hidden; background:#0B0A0A}
.fdr .pic__shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:0 0; filter:saturate(.92) contrast(1.04)}
.fdr .pic__shot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,6,6,.25) 0,rgba(6,6,6,0) 22%,rgba(6,6,6,0) 48%,rgba(6,6,6,.82) 100%)}
.fdr .pic__shot + .lower{position:relative; z-index:1; margin-top:auto}
.fdr .mv__t img{flex:1; min-height:0; width:100%; object-fit:cover; object-position:0 0; display:block}
.fdr .lower__strap em{display:flex; align-items:center; gap:.4rem}
.fdr .lower__eg b{font-weight:600; color:#fff}
.fdr .lower__eg .plat{font-family:var(--f-mono); font-size:.85em; letter-spacing:.04em; color:var(--lcd)}

/* the rate-card row the result points at (the card is dark, so the flash is a light tint plus an accent bar) */
.rc__row.is-found{animation:fdr-found 3s var(--ease)}
@keyframes fdr-found{0%,35%{background:rgba(255,255,255,.1); box-shadow:inset 4px 0 0 var(--accent)} 100%{background:transparent; box-shadow:inset 4px 0 0 transparent}}
@media (prefers-reduced-motion:reduce){ .rc__row.is-found{animation:none; box-shadow:inset 4px 0 0 var(--accent)} }

/* the note on pitch step 1 once the finder's answers ride along with it */
.fnote{display:flex; align-items:center; gap:.55rem; margin:0 0 1rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--on-black-2)}
.fnote[hidden]{display:none}
.fnote b{font-weight:600; color:var(--lcd)}