:root{color-scheme:dark;--bg:#08111d;--panel:#111d2d;--panel2:#0d1725;--line:#2a3e58;--text:#f5f8fc;--muted:#a7b6c8;--blue:#4da5ff;--cyan:#48d8e8;--green:#62d49a}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 85% 0,#183d5e 0,var(--bg) 42%);color:var(--text);font:18px/1.5 Inter,Segoe UI,Arial,sans-serif}
.hero{display:flex;align-items:center;gap:24px;width:min(1400px,calc(100% - 48px));margin:0 auto;padding:48px 0 30px;border-bottom:1px solid var(--line)}
.brand-logo{display:block;flex:0 0 auto;width:auto;height:112px;border-radius:18px;box-shadow:0 14px 34px #0006}
.eyebrow{margin:0;color:var(--cyan);font-size:13px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
h1{margin:2px 0 0;font-size:clamp(34px,5vw,58px);line-height:1.08}.hero p:last-child{margin:8px 0 0;color:var(--muted)}
main{width:min(1400px,calc(100% - 48px));margin:28px auto 60px}
.controls{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
nav{display:flex;gap:10px;flex-wrap:wrap}
button,.download{min-height:50px;border:2px solid var(--line);border-radius:10px;padding:11px 18px;background:#16263a;color:var(--text);font:inherit;font-weight:850;cursor:pointer;text-decoration:none}
button:hover,button:focus-visible,.download:hover,.download:focus-visible{border-color:white;outline:4px solid var(--cyan);outline-offset:3px;background:#224263}
button.active{border-color:var(--cyan);background:#24516a}
.search{display:grid;gap:6px;min-width:min(320px,100%);color:var(--muted);font-size:14px;font-weight:750}
.search input{min-height:50px;border:2px solid var(--line);border-radius:10px;padding:10px 14px;background:#0b1725;color:white;font:inherit}.search input:focus-visible{outline:4px solid var(--cyan);outline-offset:2px}
.catalogue{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px}
.card{display:flex;flex-direction:column;min-height:430px;padding:27px;background:linear-gradient(150deg,var(--panel),var(--panel2));border:2px solid var(--line);border-radius:18px;box-shadow:0 18px 44px #0005}
.card.lead{border-color:var(--blue);box-shadow:0 20px 52px #1b579055}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.icon{display:grid;place-items:center;width:78px;height:78px;flex:0 0 78px;border-radius:18px;background:#1b3049;color:#cfe8ff;font-size:26px;font-weight:900;overflow:hidden}.icon img{width:100%;height:100%;object-fit:contain}
.badge{padding:6px 11px;border-radius:999px;background:#24435f;color:#dcebfa;font-size:12px;font-weight:900;letter-spacing:.1em}.badge.flagship{background:#285d94}.badge.recommended{background:#17513a;color:#baf1d1}.badge.legacy{background:#55451e;color:#ffe3a1}
.card h2{margin:22px 0 5px;font-size:29px;line-height:1.15}.version{margin:0 0 13px;color:var(--muted);font-size:14px}.description{margin:0;color:#dce5ef}
.compatibility{display:grid;gap:7px;margin:18px 0 0}.compatibility p{margin:0;padding:8px 10px;border:1px solid #314963;border-radius:8px;background:#0b1623;font-size:16px}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.tag{padding:4px 8px;border-radius:7px;background:#182b40;color:#bed0e2;font-size:13px}
.download{display:flex;align-items:center;justify-content:center;margin-top:auto;text-align:center;line-height:1.1;border-color:#4bb1c3;background:#176273}
.download.disabled{border-color:#41536a;background:#202b39;color:#91a0b2;cursor:not-allowed;opacity:.78}
.status{color:var(--muted)}.empty{grid-column:1/-1;padding:40px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--muted)}
footer{padding:28px 24px;border-top:1px solid var(--line);text-align:center;color:#8396aa;font-size:15px}
[hidden]{display:none!important}
@media(max-width:720px){body{font-size:16px}.hero,main{width:calc(100% - 28px)}.hero{padding-top:28px}.brand-logo{height:76px;border-radius:13px}.controls{align-items:stretch;flex-direction:column}.search{width:100%}.card{min-height:390px}}
@media(prefers-reduced-motion:no-preference){button,.download,.card{transition:border-color .15s,background .15s,transform .15s}.download:focus-visible{transform:scale(1.02)}}

/* Phone and tablet mode keeps search/touch controls while using space efficiently. */
.mobile-device .hero{padding-top:30px}
.mobile-device main{margin-top:20px}
.mobile-device .catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}
.mobile-device .card{min-width:0}

/* Ten-foot mode is selected by device signals, not viewport width alone. */
.tv-device body{overflow-x:hidden;font-size:16px;line-height:1.35}
.tv-device .hero{gap:14px;width:calc(100% - 44px);padding:14px 0 12px}
.tv-device .brand-logo{height:64px;border-radius:11px;box-shadow:0 8px 20px #0005}
.tv-device .eyebrow{font-size:11px}
.tv-device h1{margin-top:0;font-size:30px}
.tv-device .hero p:last-child{margin-top:3px;font-size:14px}
.tv-device main{width:calc(100% - 44px);margin:10px auto 34px;overflow:visible}
.tv-device .controls{display:block;margin:0 0 5px}
.tv-device nav{flex-wrap:nowrap;gap:7px;overflow-x:auto;padding:5px;scrollbar-width:none}
.tv-device nav::-webkit-scrollbar{display:none}
.tv-device button{min-height:40px;padding:6px 11px;white-space:nowrap;font-size:14px}
.tv-device .search{display:none}
.tv-device .status{margin:2px 5px 7px;font-size:13px}
.tv-device .catalogue{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:8px}
.tv-device .card{min-width:0;min-height:0;padding:12px;border-radius:14px;box-shadow:0 12px 28px #0005}
.tv-device .card.lead{box-shadow:0 14px 32px #1b579044}
.tv-device .icon{width:52px;height:52px;flex-basis:52px;border-radius:11px}
.tv-device .badge{padding:4px 8px;font-size:10px}
.tv-device .card h2{margin:7px 0 2px;font-size:20px}
.tv-device .version{margin:0 0 4px;font-size:12px}
.tv-device .description{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.tv-device .card[data-app="nexusone"] .description{overflow:visible;white-space:normal;text-overflow:clip}
.tv-device .compatibility{gap:3px;margin-top:5px}
.tv-device .compatibility p{padding:3px 6px;font-size:12px;line-height:1.25}
.tv-device .tags{gap:4px;margin:6px 0}
.tv-device .tag{padding:2px 5px;font-size:10px}
.tv-device .download{min-height:42px;padding:6px 10px;font-size:15px}
.tv-device button:focus,.tv-device .download:focus{border-color:#fff;outline:4px solid var(--cyan);outline-offset:4px;background:#224263}
.tv-device .download.disabled:focus{outline:0}
.tv-device footer{padding:18px 24px;font-size:13px}

@media(min-width:1500px){.tv-device .catalogue{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:999px){.tv-device .catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.mobile-device .catalogue{grid-template-columns:1fr}}
@media(max-height:760px){.tv-device .hero{padding:8px 0}.tv-device .brand-logo{height:54px}.tv-device .hero p:last-child{display:none}.tv-device main{margin-top:5px}.tv-device .card{padding:10px}.tv-device .icon{width:48px;height:48px;flex-basis:48px}.tv-device .card h2{font-size:19px}.tv-device .tags{margin:4px 0}.tv-device footer{padding:12px 20px}}

body.modal-open{overflow:hidden}
.compatibility-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;background:#020812e6}
.compatibility-dialog{width:min(640px,100%);max-height:90vh;overflow:auto;padding:28px;border:2px solid var(--cyan);border-radius:20px;background:linear-gradient(150deg,#14253a,#091421);box-shadow:0 24px 70px #000b}
.compatibility-dialog h2{margin:5px 0 14px;font-size:30px;line-height:1.15}
.compatibility-dialog p{margin:0 0 13px}.compatibility-dialog .compatibility-transfer{color:var(--muted)}
.compatibility-actions{display:flex;justify-content:flex-end;gap:14px;margin:18px -5px -5px;padding:5px}
.compatibility-actions .modal-action{display:inline-flex;align-items:center;justify-content:center;min-height:50px;border:2px solid #4bb1c3;border-radius:10px;padding:10px 17px;background:#176273;color:var(--text);font:inherit;font-weight:850;line-height:1.1;cursor:pointer;text-align:center;text-decoration:none}
.compatibility-actions .modal-action.secondary{border-color:var(--line);background:#16263a}
.compatibility-actions .modal-action:hover,.compatibility-actions .modal-action:focus,.compatibility-actions .modal-action:focus-visible{border-color:#fff;outline:4px solid var(--cyan);outline-offset:3px;background:#224263}
@media(max-width:560px){.compatibility-modal{padding:14px}.compatibility-dialog{padding:22px}.compatibility-actions{align-items:stretch;flex-direction:column}.compatibility-actions .modal-action{width:100%}}