#al-tv-concept .tv-stage{display:flex;justify-content:center;align-items:center;padding-top:23px}
#al-tv-concept .tv{position:relative;width:var(--tv-width,178px);max-width:100%;transform:rotate(var(--tv-tilt,-5deg));margin:20px 0 13px}
#al-tv-concept .antenna{position:absolute;width:2px;height:42px;background:#deded5;bottom:100%;left:49%;transform:rotate(-38deg);transform-origin:bottom;border-radius:2px}
#al-tv-concept .antenna.right{transform:rotate(42deg);height:35px}
#al-tv-concept .antenna:before{content:'';position:absolute;width:5px;height:5px;background:#deded5;border-radius:50%;top:-2px;left:-1.5px}
#al-tv-concept .case{position:relative;display:grid;grid-template-columns:1fr 27px;gap:9px;padding:12px 8px 12px 12px;background:#171715;border:2px solid #e8e7e2;border-radius:20px 20px 17px 17px;box-shadow:4px 5px 0 #0c0c0b,5px 6px 0 #96968d}
#al-tv-concept .screen{aspect-ratio:1.22;position:relative;overflow:hidden;border-radius:36% / 12%;background:#272724;border:2px solid #77776f;box-shadow:0 0 0 3px #090909}




#al-tv-concept .screen:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0002 0px,#0002 1px,transparent 1px,transparent 3px);box-shadow:inset 0 0 16px 5px #0009;pointer-events:none;border-radius:inherit}
#al-tv-concept .channel{position:absolute;left:9px;top:8px;font-family:monospace;font-size:11px;color:white;text-shadow:1px 1px 2px black;z-index:2}
#al-tv-concept canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:3;pointer-events:none}
#al-tv-concept .side{display:flex;align-items:center;flex-direction:column;gap:9px;padding-top:5px}
#al-tv-concept .knob{width:23px;height:23px;min-height:0;border:1.5px solid #e8e7e2;border-radius:50%;padding:0;background:#292925;color:#e8e7e2;cursor:pointer;position:relative}
#al-tv-concept .knob:before{content:'';height:14px;width:2px;background:#e8e7e2;position:absolute;top:3px;left:9px;transform:rotate(35deg)}
#al-tv-concept .power{width:12px;height:12px;min-height:0;border:1px solid #b8b8b0;border-radius:50%;padding:0;background:#e8e7e2;cursor:pointer;margin-top:1px}
#al-tv-concept .speaker{width:17px;height:35px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#77776d 3px,#77776d 4px);margin-top:2px}
#al-tv-concept .foot{position:absolute;top:100%;width:5px;height:10px;background:#e8e7e2;left:22%;transform:rotate(20deg)}
#al-tv-concept .foot.last{left:auto;right:18%;transform:rotate(-20deg)}
/* A compact monochrome television with a restrained metal housing. */
#al-tv-concept .tv{--tv-tilt:-1.5deg}
#al-tv-concept .case{grid-template-columns:1fr 21px;gap:8px;padding:10px 7px 10px 10px;background:linear-gradient(145deg,#242424,#131313 75%);border:1px solid #777;border-radius:7px;box-shadow:inset 0 1px 0 #ffffff15,2px 3px 0 #080808,3px 4px 0 #353535,0 8px 14px #0005}
#al-tv-concept .screen{aspect-ratio:1.5;border-radius:7px;border:1px solid #494949;box-shadow:0 0 0 2px #0a0a0a;background:#050505}
#al-tv-concept .screen:after{background:linear-gradient(125deg,#ffffff06,transparent 45%);box-shadow:inset 0 0 5px #0006}
#al-tv-concept .antenna{width:1px;height:29px;background:#888;left:65%;transform:rotate(-21deg)}
#al-tv-concept .antenna.right{height:25px;transform:rotate(30deg)}
#al-tv-concept .antenna:before{display:none}
#al-tv-concept .side{gap:7px;padding-top:2px}
#al-tv-concept .knob{width:18px;height:18px;border:1px solid #898989;background:radial-gradient(circle at 35% 25%,#535353,#262626);box-shadow:0 1px 2px #0008}
#al-tv-concept .knob:before{width:1px;height:10px;left:7px;top:3px;background:#bbb}
#al-tv-concept .power{width:7px;height:7px;border:1px solid #aaa;background:#bcbcbc}
#al-tv-concept .power[aria-pressed=true]{background:#333}
#al-tv-concept .speaker{width:15px;height:20px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#646464 2px,#646464 3px)}
#al-tv-concept .foot{height:4px;width:12px;background:#494949;transform:none;left:15%}
#al-tv-concept .foot.last{right:15%;left:auto;transform:none}
#al-tv-concept .channel{font-size:8px;left:6px;top:5px;color:#ddd9}
#native-screen{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(1.07)}
.preview-tools label{display:flex;gap:8px;align-items:center;color:#aaa}
.preview-tools select{max-width:100%;width:310px;background:#191919;color:#e8e7e2;border:1px solid #555;border-radius:4px;padding:9px;font:inherit}
.preview-tools .archive-note{flex-basis:100%;margin:0;font-size:12px;color:#999}
@container(max-width:500px){#al-tv-concept .case{grid-template-columns:1fr 18px;gap:6px;padding:8px 6px 8px 8px}#al-tv-concept .knob{width:16px;height:16px}#al-tv-concept .knob:before{left:6px;top:3px;height:8px}#al-tv-concept .antenna{height:23px}#al-tv-concept .antenna.right{height:20px}}
/* Larger screen for recognising the archive footage. */
#al-tv-concept .tv{--tv-width:230px}

#al-tv-concept .zap-noise{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;image-rendering:pixelated;border-radius:inherit}
#al-tv-concept .zap-noise[hidden]{display:none}

#al-tv-concept .zap-noise{opacity:1}

.hero-title-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:22px}
.hero-title-row h1{margin-bottom:0!important}
#al-tv-concept{flex:0 0 34%;display:flex;justify-content:center;color:#e8e7e2;container-type:inline-size}
#al-tv-concept *{box-sizing:border-box}
#al-tv-concept .tv-stage{width:100%}
#al-tv-concept .zap-noise{opacity:1}
#al-tv-concept .start-preview{position:absolute;inset:0;z-index:6;border:0;background:#0008;color:#fff;font:500 12px Archivo,sans-serif;cursor:pointer}
#al-tv-concept .start-preview[hidden]{display:none}
#al-tv-concept .video-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#al-tv-concept button:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:620px){.hero-title-row{gap:12px}.hero .hero-title-row h1{font-size:13vw!important}#al-tv-concept{flex-basis:37%}#al-tv-concept .tv{--tv-width:160px}#al-tv-concept .tv-stage{padding-top:8px}#al-tv-concept .case{grid-template-columns:1fr 16px;gap:5px;padding:6px}#al-tv-concept .knob{width:16px;height:16px}#al-tv-concept .speaker{height:12px}#al-tv-concept .side{gap:5px}}

/* 150% television size; narrow layouts place it below the name. */
#al-tv-concept{flex-basis:345px}
#al-tv-concept .tv{--tv-width:345px}
@media(max-width:900px){.hero-title-row{flex-wrap:wrap}#al-tv-concept{flex:0 0 100%;justify-content:flex-end}#al-tv-concept .tv-stage{width:auto;padding-top:10px}#al-tv-concept .tv{width:345px;max-width:calc(100vw - 56px)}}
@media(max-width:620px){#al-tv-concept .tv{--tv-width:240px;width:240px;max-width:calc(100vw - 40px)}}

/* Ornamental clock-hand cursor, fine mouse pointers only. */
@media (hover:hover) and (pointer:fine) {
 html, body, body * {cursor:url("/tv-assets/clock-hand.svg?v=1") 4 4, auto!important}
 input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true] {cursor:text!important}
 [disabled], [aria-disabled=true] {cursor:not-allowed!important}
}
