html,body{margin:0;width:100%;height:100%;background:#070912;color:#f0ead6;font-family:Arial,sans-serif}
*{box-sizing:border-box} [hidden]{display:none!important}
#video{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;object-fit:contain}
#start-screen{position:absolute;top:0;left:0;width:100%;min-height:100%;padding:6% 8%;text-align:center;background:#10121a}
h1{font-size:36px;color:#e8c547}h2{font-size:32px;margin:0 0 12px}p{font-size:22px;line-height:1.4}
button{font:22px Arial,sans-serif;min-height:52px;padding:12px 20px;margin:6px;border:2px solid #a88d3d;border-radius:9px;background:#20232d;color:#f0ead6;cursor:pointer}
button:focus{outline:4px solid #fff;background:#66561e}button:disabled{opacity:.5;cursor:default}#start{background:#e8c547;color:#10121a}
#panel{position:fixed;top:4%;left:5%;max-width:90%;padding:8px;background:#111820;background:rgba(7,9,18,.85)}
#captions{position:fixed;bottom:4%;left:5%;max-width:90%;padding:8px 14px;border-radius:6px;background:rgba(0,0,0,.48);text-shadow:0 1px 3px #000;pointer-events:none}
#captions h2{font-size:24px;margin:0 0 4px;line-height:1.25}
#captions p{font-size:18px;margin:0;line-height:1.3;white-space:pre-line}
#captions.large h2{font-size:32px}#captions.large p{font-size:24px}
#panel p{margin:5px 0;overflow-wrap:break-word}#work{color:#e8c547}#position,.small{font-size:16px;color:#adb5c3;word-wrap:break-word}
#problem{position:fixed;top:10%;left:8%;width:84%;padding:24px;background:#241b1b;border:2px solid #f4a5a5;text-align:center}
@media(max-width:650px){h1{font-size:26px}h2{font-size:22px}p,button{font-size:18px}#panel{max-height:80%;overflow:auto}.small{font-size:14px}}

#tv-logo { position:absolute; z-index:10; max-width:20vw; max-height:10vh; pointer-events:none; }
#start-logo{max-width:240px;max-height:100px;object-fit:contain}#start-screen{background:radial-gradient(ellipse at top,#242333,#070912);overflow:auto}#problem{max-height:80%;overflow:auto}button:focus-visible{outline:4px solid #fff}
.app-mode #start,.app-mode #reload,.app-mode #caption-size,.app-mode #diagnostic-button,.app-mode #start-screen>p:not(#status),.app-mode #menu,.app-mode #fullscreen,.app-mode #skip{display:none}
.web-mode #start-screen>p:not(#status),.web-mode #diagnostic-button,.web-mode #diagnostic{display:none}
.web-mode #start-screen{padding:24px 16px}
.web-mode #start-screen h1{font-size:clamp(20px,4vw,30px);overflow-wrap:break-word}
.web-mode #start-screen button{font-size:18px;min-height:44px}
.web-mode #captions{left:3%;right:3%;bottom:3%;max-width:94%;padding:6px 10px}
.web-mode #captions h2,.web-mode #captions.large h2{font-size:clamp(12px,2.5vw,22px);line-height:1.2;margin:0 0 3px;overflow-wrap:anywhere}
.web-mode #captions p,.web-mode #captions.large p{font-size:clamp(11px,2vw,17px);line-height:1.2;max-height:3.6em;overflow:hidden}
.web-mode #panel{top:3%;left:3%;max-width:94%;padding:2px;display:flex;flex-wrap:wrap}
.web-mode #panel button{min-height:44px;font-size:clamp(12px,2.5vw,18px);padding:6px 10px;margin:2px}