body{background:#201f22;color:#ece5d9;font:19px/1.2 'VT323',monospace;background-image:repeating-linear-gradient(45deg,#252427 0 2px,#1e1d21 2px 4px)}
main{max-width:1130px;margin:50px auto;padding:0 22px}
h1,h2,p{margin:0}
.tv-header{font:10px/1.5 monospace;color:#c0b4a6;display:flex;justify-content:space-between;gap:20px;padding:0 15px 12px}
.tv-set{display:grid;grid-template-columns:1fr 165px;gap:30px;padding:35px;background:linear-gradient(135deg,#897f6e,#453e37);border:4px ridge #847b6b;border-radius:35px 35px 15px 15px;box-shadow:12px 15px 0 #0d0d0f,inset 0 0 0 8px #564f44;position:relative}
.tv-screen{background:#08110f;border:12px solid #211e1b;border-radius:35px;box-shadow:inset 0 0 0 2px #8d876c,inset 0 0 30px #000;overflow:hidden;padding:22px 27px;position:relative}
.tv-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000030 3px 4px)}
.teletext-top{display:flex;justify-content:space-between;gap:12px;color:#ddd;font:15px 'VT323';border-bottom:2px solid #27372d;padding-bottom:10px}
.teletext-top>span:first-child{color:#f66e40}
.tv-screen h1{font:bold 86px/.78 'VT323';letter-spacing:6px;margin:22px 0;color:#67cbca;text-shadow:4px 0 #082822}
.tv-screen h1>span{color:#efbf4b;font-size:120px;letter-spacing:20px}
.tv-content{min-height:315px}
.teletext-banner{background:#df6c3d;color:#0d1713;font-size:20px;letter-spacing:1px;padding:5px 8px;margin-bottom:20px}
.teletext-home{display:grid;grid-template-columns:130px 1fr;gap:22px;align-items:center}
.teletext-home h2,.tv-content h2{font-size:25px;color:#efbf4b;letter-spacing:1px;margin-bottom:15px}
.teletext-home p,.tv-content p{font-size:20px;line-height:1.3}
.teletext-home p+p{margin-top:12px}
.teletext-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,27px);gap:3px;transform:skewY(-5deg)}
.teletext-mosaic i{background:#67cbca}
.teletext-mosaic i:nth-child(2n){background:#ebbd51}
.teletext-mosaic i:nth-child(3n){background:#dc6947}
.teletext-mosaic i:nth-child(5){background:#171e18}
.teletext-mosaic i:nth-child(8){background:#1e615b}
.tv-list{display:grid;grid-template-columns:50px 1fr;font-size:20px;margin:25px 0 0}
.tv-list dt{color:#efbf4b}
.tv-list dd{margin:0;letter-spacing:1px}
.teletext-bottom{display:flex;justify-content:space-between;gap:10px;font-size:14px;border-top:2px solid #27372d;margin-top:20px;padding-top:12px}
.teletext-bottom span:nth-child(1){color:#ef7956}
.teletext-bottom span:nth-child(2){color:#7aca89}
.teletext-bottom span:nth-child(3){color:#efbf4b}
.tv-remote{background:#373230;color:#d9cbbb;align-self:center;padding:22px 18px;border-radius:18px;border:3px ridge #5d554d;box-shadow:6px 8px #211d1b}
.remote-brand{font:21px 'VT323';letter-spacing:3px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #746457}
.tv-remote>span{font:9px monospace}
.remote-buttons{display:grid;gap:15px;margin:20px 0 30px}
.remote-buttons button{border:2px outset #8a6755;border-radius:8px;background:#764635;color:#e8d9c0;padding:12px 5px;font:14px 'VT323';box-shadow:3px 5px #201c1b}
.remote-buttons button:nth-child(2){background:#496449;border-color:#6e886b}
.remote-buttons button:nth-child(3){background:#8e7843;border-color:#b69b61}
.remote-buttons b{font:25px 'VT323';display:block}
.remote-buttons button[aria-pressed=true]{transform:translate(2px,3px);box-shadow:1px 1px #201c1b;border-style:inset;filter:brightness(1.2)}
.remote-grille{height:70px;background:repeating-linear-gradient(0deg,#181716 0 3px,#4b4540 3px 7px);border-radius:10px}
.tv-remote p{font:10px/1.6 monospace;text-align:center;margin-top:18px;color:#a5998c}
.tv-weather{display:flex;gap:30px;align-items:center;margin:18px 0}
.tv-weather>span{font:90px/1 Georgia;color:#67cbca}
.tv-weather b{font-size:65px;color:#efbf4b;font-weight:400}
.tv-weather p{font-size:15px}
.tv-yellow{color:#efbf4b;margin-top:20px}
.tv-stations{display:grid;gap:15px;margin:30px 0}
.tv-stations a{font-size:21px;color:#67cbca;text-underline-offset:4px}
.tv-footnote{display:flex;justify-content:space-between;gap:25px;margin:25px 15px;color:#a79986;font:9px/1.6 monospace}
.ring{border-bottom:1px solid #514b42;color:#b7aa98}
.mock-note{color:#9b9288;font-size:9px}
@media(max-width:950px){.tv-set{padding:25px;gap:20px;grid-template-columns:1fr 140px}
.tv-screen{padding:20px;border-width:9px}
.tv-screen h1{font-size:70px}
.tv-screen h1>span{font-size:95px}
.teletext-home{grid-template-columns:85px 1fr;gap:15px}
.teletext-home p{font-size:18px}
.tv-remote{padding:18px 12px}
.teletext-top{font-size:12px}
.teletext-bottom{font-size:11px}
}
@media(max-width:700px){main{padding:0 12px;margin:25px auto}
.tv-header{font-size:7px;padding:0 5px 12px}
.tv-set{grid-template-columns:1fr;padding:15px 10px;gap:20px;border-radius:24px 24px 12px 12px}
.tv-screen{padding:20px 13px;border-width:6px;border-radius:24px}
.tv-screen h1{font-size:65px;letter-spacing:1px;margin:20px 0}
.tv-screen h1>span{font-size:90px;letter-spacing:14px}
.teletext-top{font-size:11px;gap:5px}
.teletext-top>span:nth-child(2){display:none}
.teletext-banner{font-size:16px;padding:5px}
.tv-content{min-height:340px}
.teletext-home{grid-template-columns:1fr}
.teletext-mosaic{width:100%;grid-template-columns:repeat(12,1fr);grid-template-rows:22px;gap:2px;transform:none}
.teletext-home h2{font-size:23px}
.teletext-home p{font-size:18px}
.tv-list{font-size:19px}
.teletext-bottom{font-size:10px;gap:5px}
.tv-remote{display:grid;grid-template-columns:1fr;gap:0;padding:12px 16px;border-radius:12px}
.remote-brand{font-size:17px;padding:0 0 10px;margin:0 0 10px}
.remote-buttons{grid-template-columns:repeat(3,1fr);margin:10px 0;gap:12px}
.remote-buttons button{padding:6px 10px}
.remote-grille,.tv-remote p{display:none}
.tv-footnote{font-size:8px;display:block;margin:20px 10px}
.tv-footnote p{margin-top:12px}
.tv-stations a{font-size:17px}
.tv-weather>span{font-size:75px}
}