html,body{margin:0;background:#07090d;color:#fff;font-family:Arial,sans-serif;width:1280px;height:720px;overflow:hidden}*{box-sizing:border-box}.hide{display:none!important}header{height:72px;border-bottom:1px solid #3d331a;background:#090a0c;padding:5px 25px}header img{width:64px;height:64px;vertical-align:middle}header span{display:inline-block;vertical-align:middle;font-size:26px;width:660px}header small{display:block;color:#bea55e;font-size:12px;margin-top:3px}button{border:2px solid #51441f;background:#201c13;color:#f5c54c;font-size:16px;padding:9px 16px;margin:4px;border-radius:8px}.focused,:focus{outline:3px solid #f5b800!important;border-color:#f5b800!important}input{background:#11151d;color:#fff;border:2px solid #38404b;border-radius:7px;padding:9px;font-size:20px;height:46px}.muted{color:#999;font-size:15px}#login{width:720px;padding:15px 30px;margin:0 auto}label{display:block;margin-top:8px;font-size:16px}label input{display:block;width:100%}#home{height:648px}nav{float:left;width:190px;height:648px;background:#0c0d11;padding:12px 8px;overflow-y:auto}.nav{display:block;width:165px;margin:5px 0;padding:10px;text-align:left;background:#12151b;color:#ddd;border:2px solid transparent;font-size:18px}.selected{background:#332a13;color:#f5c54c}main{float:left;width:1090px;height:648px;padding:18px 26px;overflow-y:auto}#hero{height:280px;position:relative;border-radius:15px;overflow:hidden;background:#151922 url('../assets/cinema_atlas.png') 0 0 no-repeat;background-size:200% 200%}#heroShade{position:absolute;width:100%;height:100%;background:-webkit-linear-gradient(transparent,#080a10);background:linear-gradient(transparent,#080a10)}#heroInfo{position:absolute;left:25px;bottom:20px}#heroName{font-size:34px;margin:12px 0}#demoBadge{color:#f5c54c;font-size:14px}#toolbar{height:65px;padding-top:14px}#heading{display:inline-block;width:600px;font-size:25px;margin:0}#search{width:400px}#status{padding:8px 0;color:#e7bb58}#grid{padding-bottom:15px}.card{display:inline-block;vertical-align:top;width:235px;height:205px;margin:7px;padding:10px;border:2px solid #292d34;border-radius:12px;background:#11151c;overflow:hidden}.card .art{width:100%;height:140px;background:#1c2430 url('../assets/cinema_atlas.png') no-repeat;background-size:200% 200%;border-radius:8px}.card img{width:100%;height:140px;object-fit:cover}.card strong{display:block;font-size:16px;line-height:20px;margin-top:8px;max-height:40px;overflow:hidden}.card .symbol{font-size:60px;text-align:center;padding-top:30px;color:#f5b800;background:#171b23;height:140px}#player{position:absolute;left:0;top:0;width:1280px;height:720px;background:transparent}#legacyVideo,#browserVideo{position:absolute;top:0;left:0;width:1280px;height:720px;background:transparent}#hud{position:absolute;bottom:0;width:100%;padding:15px 25px;background:rgba(0,0,0,.8)}#hud h2{margin:5px 0;font-size:24px}#playerStatus{color:#bbb}#radioStage{position:absolute;background:#080a10;width:100%;height:100%;text-align:center}#radioStage img{width:320px;height:320px;margin-top:80px}.waves{font-size:65px;color:#f5b800;-webkit-animation:pulse 1.6s infinite;animation:pulse 1.6s infinite}#radioStage p{color:#c7ad61;font-size:14px}@-webkit-keyframes pulse{50%{opacity:.4}}@keyframes pulse{50%{opacity:.4}}@media(max-width:1000px){body{width:960px;height:540px}header span{width:390px}nav{width:160px}.nav{width:140px;font-size:16px}main{width:800px;height:468px;padding:12px}#hero{height:210px}.card{width:170px;height:170px}.card .art,.card img,.card .symbol{height:105px}#heading{width:400px}#search{width:335px}#player,#legacyVideo,#browserVideo{width:960px;height:540px}#hud button{font-size:13px;padding:6px}#radioStage img{margin-top:20px;width:230px;height:230px}}
#login{height:648px;overflow-y:auto}@media(max-width:1000px){#login{height:468px}}
html,body{width:100%;height:100%;min-height:100%;overflow:auto}header{height:auto;min-height:78px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}header span{flex:1;min-width:200px;width:auto}header img{width:90px;object-fit:cover}#home{height:calc(100vh - 78px);display:flex}nav{float:none;width:190px;min-width:190px;height:100%;overflow:auto}main{float:none;width:auto;flex:1;height:100%;overflow:auto}#toolbar{height:auto;display:flex;flex-wrap:wrap;gap:10px;padding-bottom:14px}#heading{width:auto;flex:1}#search{width:min(100%,400px)}#player,#legacyVideo,#browserVideo{width:100%;height:100%;position:fixed}#browserVideo{object-fit:contain}#login{width:min(100%,720px);height:auto;min-height:80vh}#hud{position:fixed;bottom:0}#radioStage{position:fixed}#deviceLibrary{position:fixed;inset:0;padding:30px;overflow:auto;background:#07090d;z-index:10}.card{width:calc(25% - 18px);min-width:150px}#deviceList button{display:block;margin:14px 0;width:min(650px,100%);text-align:left}@media(max-width:900px){.card{width:calc(33.33% - 18px)}nav{width:160px;min-width:160px}#heroName{font-size:28px}}@media(max-width:600px){header{padding:8px 12px}header span{font-size:20px;min-width:110px}header img{width:64px;height:64px}header button{font-size:12px}#home{display:block;height:auto}nav{width:100%;height:auto;display:flex;overflow-x:auto;padding:10px}.nav{min-width:110px;text-align:center;margin-right:8px}main{height:auto;width:100%;padding:14px}.card{width:calc(50% - 18px);min-width:100px}#hero{height:240px}#heroName{font-size:25px}#hud{padding:10px}#hud button{font-size:12px}#login{padding:20px}.card strong{font-size:13px}}
.focused,:focus{background-color:#765b1b!important;color:#fff!important}.card:focus{background-color:#765b1b!important}

#hero{height:clamp(180px,42vh,300px)}#heroName{font-size:clamp(20px,2.4vw,30px);max-width:min(80vw,720px)}header img{width:180px;height:70px;object-fit:contain}header span{display:none}@media(max-width:600px){header img{width:150px;height:64px}#hero{height:clamp(200px,38vh,300px)}}

main{min-width:0;max-width:100%}header{max-width:100%;height:auto}#toolbar>*{min-width:0}#search{max-width:100%}.card .art{background-size:cover;background-position:center}#hero{background-position:center;background-size:cover}#heroInfo{right:20px}#heroName{overflow-wrap:anywhere}@media(max-width:600px){#home main{width:100%}}

/* Safari / safe areas */
html{min-height:100%;-webkit-text-size-adjust:100%}body{padding-bottom:env(safe-area-inset-bottom)}input,select,textarea{font-size:16px}button,input,a{touch-action:manipulation}.safari-help{max-width:660px;margin:16px 0;padding:14px;border:1px solid #705b28;border-radius:12px}.safari-help summary{cursor:pointer;color:#f5c54c}.safari-help p{line-height:1.5}#browserVideo{max-width:100%;object-fit:contain}@media(max-width:600px){header{height:auto!important;min-height:64px;display:flex;flex-wrap:wrap;gap:8px;padding:12px!important}header img{max-width:100px}#login{padding:20px!important}#toolbar{display:flex;flex-wrap:wrap;gap:12px}#toolbar input{max-width:100%;box-sizing:border-box}#hud{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}

#deviceGate{max-width:640px;margin:8vh auto;padding:28px;text-align:center}#deviceGate img{width:180px;object-fit:contain}#deviceGate strong{display:block;font-size:24px;color:#f5c54c;overflow-wrap:anywhere;margin:24px 0}.device-locked> :not(#deviceGate){display:none!important}body:not(.device-locked)>#deviceGate{display:none}#deviceGate p{line-height:1.6}

#localPicker{position:fixed;inset:0;z-index:200;background:#000c;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.local-box{background:#17181e;color:white;max-width:620px;width:100%;padding:24px;border:1px solid #b9913f;border-radius:18px;box-sizing:border-box}.local-box label{display:block;margin:16px 0}.local-box select{display:block;width:100%;padding:12px;font-size:18px;background:#282932;color:white;border:1px solid #787878;border-radius:8px}.local-box p{line-height:1.5}