@font-face{font-family:"ANR CRT Pixel";src:url("./anr-roster-vt323.v1.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
.anr-crt-roster{--crt-paper:#f2efdf;--crt-acid:#d7ff45;--crt-lilac:#b999ff;display:block;min-height:100svh;padding:12px;background:#1b1c19;color:var(--crt-paper);font:400 20px/1.15 'ANR CRT Pixel','Courier New',monospace;isolation:isolate;box-sizing:border-box}
.anr-crt-roster *{box-sizing:border-box}
.anr-crt-roster a{color:inherit;text-decoration:none}
.anr-crt-roster a:focus-visible{outline:3px solid var(--crt-acid);outline-offset:3px}
.anr-crt-roster__cabinet{position:relative;max-width:2000px;margin-inline:auto;padding:clamp(28px,5.1vw,82px) clamp(24px,5.4vw,88px) 0;background:linear-gradient(135deg,#b2b09c 0%,#797969 4%,#7b7d6a 9%,#aaa993 48%,#8e8e7c 85%,#656a5b 100%);border:2px solid #51564a;border-radius:9px;box-shadow:inset 0 2px 4px #e9e6c39c,inset 0 -4px 12px #242a21,0 16px 35px #0008}
.anr-crt-roster__cabinet:before{content:'';position:absolute;inset:13px 13px 66px;border-radius:50% / 8%;border:1px solid #d1d0b040;box-shadow:inset 8px 14px 18px #2e3427b3,inset -8px -10px 15px #dddcc05c;pointer-events:none}
.anr-crt-roster__screen{position:relative;min-height:680px;height:calc(100svh - 150px);max-height:1080px;border:5px solid #191d17;border-radius:6% / 5%;background:#0c1210;overflow:hidden;isolation:isolate;box-shadow:0 0 0 2px #444b39,inset 0 0 45px #000}
.anr-crt-roster__screen:before{content:'';position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 35px 18px #0009,inset 0 2px 4px #ffffff4d;background:linear-gradient(135deg,#ffffff12,transparent 25%,transparent 80%,#ffffff06)}
.anr-crt-roster__backdrop{position:absolute;inset:-5%;z-index:-3;background:#1c2525;overflow:hidden}
.anr-crt-roster__backdrop img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.68) brightness(.52) contrast(1.06);animation:anr-roster-drift 28s ease-in-out infinite alternate}
.anr-crt-roster__backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#17272677,#15192444 35%,#10141c77),radial-gradient(ellipse at center,transparent,#0007);mix-blend-mode:multiply}
.anr-crt-roster__raster{position:absolute;inset:0;pointer-events:none;z-index:7;opacity:.32;background:repeating-linear-gradient(0deg,#0008 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ef235b12 0 1px,#69cf0012 1px 2px,#45baff12 2px 3px);mix-blend-mode:overlay}
.anr-crt-roster__top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:22px 30px}
.anr-crt-roster__home{display:flex;align-items:center;gap:9px;min-height:44px;font:900 17px/.83 'Courier New',monospace;letter-spacing:-1.1px;text-shadow:2px 0 #000,0 2px #000}
.anr-crt-roster__home>span:first-child{font:43px/1 Arial,sans-serif;color:var(--crt-acid);text-shadow:3px 3px #111}
.anr-crt-roster__top nav{display:flex;gap:20px;font-size:18px;text-transform:uppercase;letter-spacing:.08em}
.anr-crt-roster__top nav a{display:flex;align-items:center;min-height:44px;min-width:44px;text-shadow:0 2px 8px #000}
.anr-crt-roster__transmission{position:absolute;left:30px;top:calc(50% - 120px);display:flex;flex-direction:column;gap:7px;writing-mode:vertical-rl;font-size:16px;letter-spacing:.18em;opacity:.85}
.anr-crt-roster__transmission span:last-child{color:var(--crt-acid)}
.anr-crt-roster__menu{position:relative;z-index:4;width:min(420px,44%);margin:clamp(6px,3vh,45px) auto 90px;padding:22px 16px 14px;border:1px solid #f2efdf61;border-radius:16px;background:#17201eab;box-shadow:0 12px 30px #0005,inset 0 1px #fff4;backdrop-filter:blur(13px)}
.anr-crt-roster__menu-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-inline:8px}
.anr-crt-roster__menu-heading>span{font-size:16px;color:var(--crt-acid)}
.anr-crt-roster__menu-heading>span:last-child{font:25px Arial,sans-serif}
.anr-crt-roster__menu-heading h1{font:400 clamp(33px,3vw,45px)/1.1 'ANR CRT Pixel',monospace;text-transform:uppercase;letter-spacing:.06em;text-shadow:2px 0 #f2efdf33,-2px 0 #b999ff33;margin:0!important}
.anr-crt-roster__instruction{margin:12px 0 18px!important;text-align:center;font-size:16px;line-height:1.5;opacity:.9}
.anr-crt-roster__channels{max-height:min(36svh,375px);min-height:220px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#d7ff4599 #f2efdf14;border:1px solid #f2efdf55;border-radius:6px;scroll-padding-block:8px}
.anr-crt-roster__channels ol{list-style:none;margin:0!important;padding:7px!important}
.anr-crt-roster__channel{position:relative;display:grid;grid-template-columns:15px minmax(0,1fr) 22px;align-items:center;min-height:44px;gap:6px;padding:7px 9px;border:1px solid transparent;border-radius:2px;font-size:clamp(21px,1.7vw,26px);line-height:1.4;letter-spacing:.015em;text-shadow:1px 1px #000;overflow-wrap:anywhere}
.anr-crt-roster__channel>span:nth-child(2){text-align:center}
.anr-crt-roster__cursor{font-size:16px;visibility:hidden;color:var(--crt-acid)}
.anr-crt-roster__number{font-size:15px;color:#dad9c0;text-align:end}
.anr-crt-roster__channel:hover,.anr-crt-roster__channel:focus-visible,.anr-crt-roster__channel[data-selected]{background:#d7ff451e;border-color:#d7ff458f;color:#fff;outline-offset:-3px}
.anr-crt-roster__channel[data-selected] .anr-crt-roster__cursor{visibility:visible}
.anr-crt-roster__selected{display:flex;justify-content:space-between;gap:12px;font-size:16px;text-transform:uppercase;padding:15px 5px 12px}
.anr-crt-roster__selected>span:last-child{overflow-wrap:anywhere;text-align:end;min-width:0}
.anr-crt-roster__selected>span:first-child{color:var(--crt-acid);white-space:nowrap}
.anr-crt-roster__enter{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:46px;padding:10px 15px;border:1px solid var(--crt-acid);background:var(--crt-acid);color:#171817!important;text-shadow:none;font-size:19px;letter-spacing:.14em}
.anr-crt-roster__enter>span:last-child{font:25px/1 Arial,sans-serif}
.anr-crt-roster__enter:hover{background:var(--crt-paper);border-color:var(--crt-paper)}
.anr-crt-roster__status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.anr-crt-roster__portrait{position:absolute;right:4%;top:21%;width:26%;max-width:390px;aspect-ratio:4/5;transform:rotate(7deg);border:6px solid var(--crt-paper);background:var(--crt-lilac);box-shadow:9px 14px 0 #080e0b88;isolation:isolate}
.anr-crt-roster__portrait:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,#0002 2px 3px);mix-blend-mode:multiply}
.anr-crt-roster__portrait>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:saturate(.8) contrast(1.03)}
.anr-crt-roster__portrait-label{position:absolute;left:-6px;right:-6px;bottom:-57px;min-height:57px;display:flex;flex-direction:column;gap:4px;justify-content:center;padding:8px 12px;background:var(--crt-paper);color:#171817;text-transform:uppercase;font-size:clamp(19px,1.7vw,25px);line-height:1.15;overflow-wrap:anywhere}
.anr-crt-roster__portrait-label small{font-size:14px;letter-spacing:.08em}
.anr-crt-roster__no-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;width:100%;height:100%;padding:20px;color:#171817;font:900 clamp(26px,5vw,70px)/.9 Impact,sans-serif;text-transform:uppercase;overflow-wrap:anywhere}
.anr-crt-roster__no-photo i{font:normal 90px/1 Arial,sans-serif;color:var(--crt-acid)}
.anr-crt-roster[data-changing] .anr-crt-roster__portrait{animation:anr-roster-tune .22s steps(3,end)}
.anr-crt-roster__footer{position:absolute;inset:auto 35px 20px;z-index:5;display:flex;justify-content:center;align-items:center;gap:10px 25px;flex-wrap:wrap;font-size:15px;text-align:center;text-shadow:0 2px 8px #000}
.anr-crt-roster__footer a{min-height:44px;display:inline-flex;align-items:center}
.anr-crt-roster__hardware{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:15px;height:70px;padding-inline:12px;color:#4d5343}
.anr-crt-roster__emboss{font:900 clamp(24px,3.6vw,48px)/1 Impact,'Arial Narrow',sans-serif;letter-spacing:-.055em;font-style:italic;text-shadow:0 1px #d9dac08c,0 -1px #343d2b}
.anr-crt-roster__emboss span{font-weight:400}
.anr-crt-roster__speaker{width:130px;height:29px;border-radius:10%;background:repeating-linear-gradient(0deg,#393f32 0 2px,#b1b298 2px 4px);opacity:.6;transform:skewY(-3deg)}
.anr-crt-roster__power{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.1em}
.anr-crt-roster__power i{width:9px;height:9px;border-radius:50%;background:#d7ff45;box-shadow:0 0 8px #d7ff4566,inset 0 0 2px #333}
.anr-crt-roster-copy{max-width:900px;padding:50px 25px;margin:auto}
@keyframes anr-roster-drift{from{transform:scale(1.06) translate(-1%,1%)}to{transform:scale(1.16) translate(2%,-1%)}}
@keyframes anr-roster-tune{0%{opacity:.2;filter:contrast(2);transform:rotate(7deg) translateX(-6px)}100%{opacity:1;filter:none;transform:rotate(7deg)}}
@media(min-width:1700px){.anr-crt-roster__menu{margin-top:6vh}.anr-crt-roster__channels{max-height:430px}.anr-crt-roster__portrait{right:5%;width:27%}}
@media(max-width:1000px){.anr-crt-roster__cabinet{padding:35px 35px 0}.anr-crt-roster__screen{min-height:700px}.anr-crt-roster__menu{width:48%;margin-left:10%;margin-right:0}.anr-crt-roster__portrait{right:3%;width:32%;top:26%}.anr-crt-roster__top{padding:20px}.anr-crt-roster__transmission{left:15px}.anr-crt-roster__channel{font-size:23px}.anr-crt-roster__speaker{width:90px}}
@media(max-width:600px){.anr-crt-roster{padding:7px;min-height:100svh}.anr-crt-roster__cabinet{padding:17px 13px 0;border-radius:12px}.anr-crt-roster__cabinet:before{inset:5px 5px 48px;border-radius:16px}.anr-crt-roster__screen{min-height:810px;height:auto;max-height:none;border-width:3px;border-radius:16px}.anr-crt-roster__top{padding:13px 13px 0;align-items:center}.anr-crt-roster__home{font-size:15px}.anr-crt-roster__home>span:first-child{font-size:32px}.anr-crt-roster__top nav{gap:13px;font-size:15px;letter-spacing:0}.anr-crt-roster__transmission{top:85px;left:15px;right:15px;writing-mode:horizontal-tb;flex-direction:row;justify-content:space-between;font-size:14px}.anr-crt-roster__portrait{inset:118px 21px auto auto;width:calc(100% - 56px);max-width:300px;height:255px;aspect-ratio:auto;transform:rotate(4deg);border-width:5px;opacity:.75}.anr-crt-roster__portrait>img{object-position:center 20%}.anr-crt-roster__portrait-label{left:-5px;right:-5px;bottom:auto;top:0;min-height:38px;padding:7px 9px;background:#171817b3;color:var(--crt-paper);font-size:19px}.anr-crt-roster__portrait-label small{font-size:13px}.anr-crt-roster__menu{width:calc(100% - 26px);margin:220px 13px 102px;padding:16px 11px 12px;background:#111a16e8;border-radius:11px;backdrop-filter:blur(14px)}.anr-crt-roster__menu-heading h1{font-size:36px}.anr-crt-roster__menu-heading{padding-inline:4px;gap:8px}.anr-crt-roster__menu-heading>span{font-size:14px}.anr-crt-roster__menu-heading>span:last-child{font-size:20px}.anr-crt-roster__instruction{font-size:15px;margin:9px 0 12px!important}.anr-crt-roster__channels{max-height:264px;min-height:220px}.anr-crt-roster__channels ol{padding:4px!important}.anr-crt-roster__channel{grid-template-columns:11px minmax(0,1fr) 18px;padding:7px 5px;gap:3px;font-size:22px;min-height:44px}.anr-crt-roster__number{font-size:14px}.anr-crt-roster__selected{font-size:15px;padding-block:12px}.anr-crt-roster__enter{min-height:48px;font-size:18px}.anr-crt-roster__footer{left:15px;right:15px;bottom:13px;font-size:14px;gap:0 12px}.anr-crt-roster__footer>span{flex-basis:100%}.anr-crt-roster__footer a{min-height:44px}.anr-crt-roster__hardware{height:49px;padding-inline:3px}.anr-crt-roster__emboss{font-size:25px}.anr-crt-roster__speaker{width:55px;height:20px}.anr-crt-roster__power{font-size:19px;gap:5px}.anr-crt-roster__power i{width:6px;height:6px}.anr-crt-roster__backdrop img{object-position:45% center}.anr-crt-roster[data-changing] .anr-crt-roster__portrait{animation:none}}
@media(prefers-reduced-motion:reduce){.anr-crt-roster__backdrop img,.anr-crt-roster[data-changing] .anr-crt-roster__portrait{animation:none}.anr-crt-roster *{scroll-behavior:auto!important}}