:root {
  color-scheme: dark;
  --bg: #061426;
  --bg-deep: #031020;
  --surface: #0a1d34;
  --surface-high: #102944;
  --line: rgba(149, 190, 225, .18);
  --text: #f4f8ff;
  --muted: #a7bbd3;
  --blue: #098fff;
  --cyan: #29d4f0;
  --container: 1240px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: #2dbfff; color: #031020; }
:focus-visible { outline: 3px solid #65deff; outline-offset: 4px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 30; background: #fff; color: #061426; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-shell { overflow: clip; background: radial-gradient(circle at 77% 3%, rgba(0, 128, 226, .18), transparent 31rem), var(--bg); }
.container { width: min(calc(100% - 64px), var(--container)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; border-bottom: 1px solid rgba(183, 216, 246, .1); background: rgba(4, 17, 32, .72); backdrop-filter: blur(18px); }
.header-inner { min-height: 82px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; flex: none; align-items: center; gap: 9px; font-size: 27px; letter-spacing: -.065em; line-height: 1; white-space: nowrap; }
.brand img { display: block; width: 42px; height: 42px; object-fit: contain; }
.brand strong { font-weight: 800; }
.desktop-nav { display: flex; align-items: center; gap: 36px; margin-left: auto; }
.desktop-nav a { color: #c9d7e9; font-size: 14px; font-weight: 600; transition: color .2s ease; }
.desktop-nav a:hover { color: #fff; }
.header-link { display: inline-flex; align-items: center; gap: 19px; padding: 11px 16px; margin-left: 16px; border: 1px solid rgba(87, 160, 228, .45); border-radius: 8px; color: #dcecff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: border-color .2s, background .2s; }
.header-link:hover { border-color: var(--cyan); background: rgba(23, 139, 222, .12); }
.header-link span { color: var(--cyan); font-size: 18px; font-weight: 400; }
.mobile-nav { display: none; }

.hero { min-height: 738px; display: grid; grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); align-items: center; gap: clamp(30px, 4vw, 70px); padding-block: 88px 100px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 16px; }
.eyebrow, .section-label { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 11px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(41, 212, 240, .09), 0 0 13px var(--cyan); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 27px 0 22px; font-size: clamp(58px, 6vw, 96px); font-weight: 760; letter-spacing: -.075em; line-height: .99; }
h1 span, h2 span { color: #56caff; }
.hero-lead { max-width: 570px; color: #ecf3fb; font-size: clamp(20px, 2.05vw, 28px); font-weight: 500; letter-spacing: -.025em; line-height: 1.42; }
.hero-detail { max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button { min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 27px; padding: 13px 22px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 750; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(110deg, #078ffa, #0b6ff5); color: white; box-shadow: 0 10px 30px rgba(4, 121, 244, .23); }
.button-primary:hover { box-shadow: 0 12px 37px rgba(4, 121, 244, .36); }
.button-secondary { background: rgba(29, 69, 105, .24); border-color: rgba(119, 173, 220, .28); color: #edf7ff; }
.button-secondary:hover { border-color: #5abce8; background: rgba(29, 69, 105, .5); }
.button span { font-size: 19px; font-weight: 400; line-height: 1; }
.release-note { display: flex; gap: 8px; margin: 22px 0 0; color: #8ca9c7; font-size: 12px; line-height: 1.55; }
.release-note span { color: var(--cyan); font-size: 18px; line-height: .7; }
.hero-visual { position: relative; min-width: 0; padding: 24px 0 0; }
.visual-glow { position: absolute; inset: 11% -8% -8% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(2, 142, 255, .29), rgba(20, 94, 162, .13) 43%, transparent 72%); filter: blur(35px); pointer-events: none; }
.tv-frame { position: relative; padding: 9px; background: linear-gradient(140deg, #2c5776, #0c1725 23%, #263c52 80%, #060e19); border: 1px solid rgba(178, 225, 255, .45); border-radius: 18px; box-shadow: 0 55px 65px rgba(0, 0, 0, .42), 0 15px 65px rgba(0, 141, 255, .16), inset 0 0 0 2px rgba(255,255,255,.08); transform: perspective(1300px) rotateY(-5deg) rotateX(2deg); transform-origin: center; }
.tv-frame::after { content: ""; position: absolute; width: 23%; height: 8px; left: 39%; bottom: -10px; background: linear-gradient(#1e344a, #0a1724); clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); }
.tv-screen { position: relative; height: 460px; overflow: hidden; border: 1px solid rgba(117, 181, 231, .32); border-radius: 10px; background: linear-gradient(90deg, rgba(3, 14, 29, .91), rgba(4, 17, 35, .56) 47%, rgba(5, 19, 36, .12)), linear-gradient(0deg, #031225 1%, transparent 38%), url("assets/nordlicht.jpg") 56% center / cover; }
.screen-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; font-size: 11px; color: #d6e9ff; }
.screen-mark { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: 13px; }
.screen-mark img { width: 21px; height: 21px; object-fit: contain; }
.screen-story { position: absolute; left: 6%; top: 23%; display: flex; flex-direction: column; align-items: start; max-width: 60%; }
.screen-kicker { color: #53cfff; font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.screen-story strong { margin: 9px 0 4px; font-size: clamp(35px, 4vw, 57px); letter-spacing: -.055em; line-height: 1; }
.screen-story > span:nth-child(3) { color: #d1dfed; font-size: 13px; }
.screen-play { margin-top: 22px; padding: 9px 14px; border-radius: 5px; background: #087ffc; box-shadow: 0 2px 15px rgba(0, 132, 255, .47); color: white; font-size: 11px; font-weight: 700; }
.screen-rail { position: absolute; left: 6%; right: 6%; bottom: 19px; color: white; font-size: 12px; font-weight: 700; }
.screen-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 9px; }
.screen-thumbs img { display: block; width: 100%; height: 83px; object-fit: cover; border: 1px solid rgba(165, 211, 245, .35); border-radius: 5px; }
.visual-caption { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 24px 3px 0; color: #91acc8; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.caption-line { width: 36px; height: 1px; background: #1683d4; }

.principles { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(4, 18, 34, .72); }
.principles-inner { min-height: 80px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.principles span { color: #a4bfd9; font-size: 11px; font-weight: 760; letter-spacing: .2em; }
.section { padding-block: 136px; }
.section-heading { max-width: 770px; margin-bottom: 52px; }
.section-heading h2, .experience-copy h2, .formats-intro h2, .status-section h2, .closing-inner h2 { margin: 17px 0 22px; font-size: clamp(42px, 4.8vw, 66px); font-weight: 740; letter-spacing: -.06em; line-height: 1.05; }
.section-heading > p:last-child, .section-heading-split > p, .experience-copy > p:not(.section-label), .formats-intro > p:not(.section-label), .status-section > div:first-child > p:not(.section-label) { max-width: 610px; margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-card { position: relative; min-height: 284px; overflow: hidden; padding: 29px 30px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(146deg, rgba(26, 69, 112, .33), rgba(8, 31, 54, .66) 45%, rgba(7, 28, 49, .88)); }
.feature-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, rgba(24, 158, 239, .13), transparent 56%); pointer-events: none; }
.feature-card > * { position: relative; z-index: 1; }
.feature-wide { grid-column: span 3; display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(230px, .65fr); align-items: center; gap: 26px; min-height: 225px; background: linear-gradient(115deg, #0d345b, #071d37 68%, #082543); }
.feature-index { display: block; color: #44c8ff; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.feature-card h3 { max-width: 320px; margin: 31px 0 14px; font-size: 24px; letter-spacing: -.035em; line-height: 1.18; }
.feature-card p { max-width: 380px; margin-bottom: 0; color: #abc1d9; font-size: 14px; line-height: 1.7; }
.feature-wide h3 { max-width: 490px; margin-top: 0; font-size: 31px; }
.feature-wide p { max-width: 560px; }
.feature-art-source { justify-self: end; display: flex; gap: 10px; align-items: center; padding: 18px; transform: rotate(-8deg); }
.feature-art-source i { display: block; width: 68px; height: 104px; border: 1px solid rgba(123, 210, 255, .54); border-radius: 9px; box-shadow: 0 15px 28px rgba(0, 0, 0, .25); background: linear-gradient(150deg, rgba(21, 133, 218, .25), rgba(2, 17, 39, .85)), url("assets/tiefen.jpg") center / cover; }
.feature-art-source i:nth-child(2) { width: 84px; height: 124px; background-image: linear-gradient(150deg, rgba(21, 133, 218, .25), rgba(2, 17, 39, .5)), url("assets/nordlicht.jpg"); }
.feature-art-source i:nth-child(3) { background-image: linear-gradient(150deg, rgba(21, 133, 218, .25), rgba(2, 17, 39, .5)), url("assets/wuesten.jpg"); }
.profile-dots { display: flex; margin-top: 23px; }
.profile-dots span { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -7px; border: 2px solid #0b2542; border-radius: 50%; background: linear-gradient(140deg, #21bdeb, #0a4aa6); color: white; font-size: 14px; font-weight: 700; }
.profile-dots span:nth-child(2) { background: linear-gradient(140deg, #e781aa, #6252c1); }
.profile-dots span:nth-child(3) { background: linear-gradient(140deg, #e3b479, #986b8c); }
.profile-dots span:last-child { background: #12344f; }
.progress-illustration { height: 6px; margin-top: 33px; border-radius: 10px; background: #31526c; }
.progress-illustration span { display: block; width: 63%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0996ff, #34d2ec); box-shadow: 0 0 18px rgba(7, 185, 255, .48); }
.device-line { display: flex; align-items: center; gap: 7px; margin-top: 32px; color: #b5e8ff; }
.device-line span { padding: 6px 8px; border: 1px solid #377599; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.device-line b { width: 13px; height: 1px; background: #2daee0; }

.experience-section { padding-block: 105px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(95deg, rgba(7, 32, 57, .95), rgba(5, 20, 38, .88)), radial-gradient(circle at 12% 50%, #0a5a86, transparent 40%); }
.experience-grid { display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: clamp(55px, 7vw, 120px); }
.experience-image { position: relative; height: 445px; overflow: hidden; border: 1px solid #436b8b; border-radius: 15px; box-shadow: 0 25px 65px rgba(0, 0, 0, .3), 0 0 60px rgba(0, 142, 216, .12); }
.experience-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(1, 11, 24, .82), transparent 42%); }
.experience-image img { width: 100%; height: 100%; object-fit: cover; }
.experience-image span { position: absolute; left: 28px; bottom: 26px; z-index: 1; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.experience-copy h2 { font-size: clamp(38px, 4vw, 55px); }
.check-list { display: grid; gap: 14px; margin: 25px 0 20px; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 13px; color: #d8e8f5; font-size: 14px; line-height: 1.5; }
.check-list li::before { content: "✓"; display: grid; flex: none; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(25, 186, 238, .16); color: #40d5fa; font-size: 12px; font-weight: 800; }
.experience-copy .fine-print { color: #819db9 !important; font-size: 12px !important; }
.section-heading-split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 50px; }
.section-heading-split h2 { margin-bottom: 0; }
.section-heading-split > p { max-width: 420px; padding-bottom: 6px; }
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.device-card { display: flex; flex-direction: column; min-height: 257px; padding: 27px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(13, 48, 79, .8), rgba(6, 28, 50, .86)); }
.device-type { color: #48c5fb; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.device-card h3 { margin: 28px 0 10px; font-size: 24px; letter-spacing: -.04em; }
.device-card p { margin: 0 0 22px; color: #a8c0d9; font-size: 13px; line-height: 1.65; }
.status { align-self: flex-start; margin-top: auto; padding: 7px 10px; border-radius: 99px; font-size: 10px; font-weight: 750; }
.status-tested { background: rgba(23, 185, 177, .12); color: #63dccb; }
.status-build { background: rgba(58, 151, 255, .14); color: #83c8ff; }
.status-planned { background: rgba(156, 169, 198, .11); color: #bac7d9; }

.sync-section { padding-block: 120px; border-top: 1px solid var(--line); background: radial-gradient(circle at 52% 16%, rgba(9, 143, 255, .13), transparent 42%), #051526; }
.sync-section .section-heading-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: end; }
.sync-section .section-heading-split > p { max-width: none; }
.sync-panel { overflow: hidden; border: 1px solid rgba(82, 166, 233, .36); border-radius: 16px; background: linear-gradient(145deg, rgba(13, 42, 70, .96), rgba(4, 23, 42, .96)); box-shadow: 0 25px 60px rgba(0, 0, 0, .17); }
.sync-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 24px 27px; border-bottom: 1px solid var(--line); }
.sync-panel-heading strong { font-size: 20px; letter-spacing: -.03em; }
.sync-panel-heading span, .sync-note { color: #9eb9d3; font-size: 12px; line-height: 1.65; }
.sync-scroll-hint { display: none; margin: 13px 22px 0; color: #91cdee; font-size: 12px; }
.sync-table-scroll { overflow-x: auto; }
.sync-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; text-align: center; }
.sync-table caption { caption-side: bottom; padding: 13px 23px 3px; color: #acc3d8; font-size: 12px; text-align: left; }
.sync-table th, .sync-table td { padding: 14px 11px; border-right: 1px solid rgba(149, 190, 225, .1); border-bottom: 1px solid rgba(149, 190, 225, .1); }
.sync-table thead th { background: rgba(27, 76, 116, .38); color: #f2f8ff; font-size: 12px; line-height: 1.4; }
.sync-table thead th small { color: #98c1df; font-size: 10px; font-weight: 500; }
.sync-table th:first-child { width: 186px; position: sticky; left: 0; z-index: 1; background: #0c2a47; text-align: left; }
.sync-table tbody th { font-size: 12px; font-weight: 650; }
.sync-table td { color: #50d8aa; font-size: 17px; font-weight: 800; }
.sync-table tbody tr:nth-child(even) { background: rgba(32, 83, 125, .13); }
.sync-note { margin: 0; padding: 12px 27px 24px; }
@media (max-width: 1100px) { .sync-scroll-hint { display: block; } }

.formats-section { padding-block: 132px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(125deg, #09223d, #061728 54%, #092743); }
.formats-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(60px, 8vw, 125px); }
.formats-intro h2 { font-size: clamp(39px, 4vw, 57px); }
.format-callout { max-width: 410px; margin-top: 56px; padding: 21px 22px; border-left: 2px solid var(--cyan); background: rgba(7, 74, 113, .27); }
.format-callout strong { color: #64dfff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.format-callout p { margin: 7px 0 0; color: #bdd1e2; font-size: 13px; line-height: 1.6; }
.format-list { align-self: center; }
.format-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 0; border-bottom: 1px solid rgba(146, 187, 223, .21); }
.format-row:first-child { border-top: 1px solid rgba(146, 187, 223, .21); }
.format-row div { display: grid; gap: 5px; }
.format-row strong { font-size: 16px; font-weight: 700; }
.format-row div span { color: #a9c0d6; font-size: 12px; line-height: 1.4; }
.format-state { flex: none; padding: 7px 10px; border: 1px solid #286692; border-radius: 6px; color: #8ddaff; font-size: 10px; font-weight: 750; white-space: nowrap; }
.format-row-muted .format-state { border-color: #425e76; color: #a1b6c8; }
.format-footnote { margin: 19px 0 0; color: #829eb8; font-size: 11px; line-height: 1.6; }
.status-section { display: grid; grid-template-columns: 1fr .76fr; align-items: center; gap: 12%; }
.status-section h2 { font-size: clamp(42px, 4.1vw, 60px); }
.status-section > div:first-child > p:not(.section-label) { max-width: 610px; }
.text-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 27px; color: #61d7fa; font-size: 14px; font-weight: 750; }
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translateX(4px); }
.status-panel { position: relative; min-height: 350px; overflow: hidden; display: flex; align-items: end; padding: 35px; border: 1px solid #3d6b91; border-radius: 17px; background: radial-gradient(circle at 85% 15%, rgba(4, 139, 226, .36), transparent 50%), linear-gradient(130deg, #0b3255, #07182d 80%); box-shadow: 0 25px 60px rgba(0, 0, 0, .2); }
.status-orbit { position: absolute; width: 330px; height: 330px; right: -97px; top: -125px; border: 1px solid rgba(87, 204, 255, .48); border-radius: 50%; box-shadow: 0 0 0 34px rgba(52, 168, 244, .04), 0 0 0 87px rgba(52, 168, 244, .035), inset 0 0 80px rgba(42, 174, 253, .12); }
.status-panel-content { position: relative; z-index: 1; }
.status-panel-kicker { color: #5ed7fc; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.status-panel strong { display: block; margin: 12px 0 11px; font-size: 29px; letter-spacing: -.04em; }
.status-panel p { max-width: 300px; margin-bottom: 23px; color: #bbd1e4; font-size: 13px; line-height: 1.65; }
.status-divider { width: 100%; height: 1px; margin-bottom: 16px; background: rgba(149, 194, 225, .25); }
.status-panel-content > span:last-child { color: #9db5ce; font-size: 11px; }
.faq-section { padding-top: 40px; }
.faq-list { max-width: 920px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; cursor: pointer; color: #eaf3ff; font-size: 18px; font-weight: 650; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #5fc8f0; font-size: 27px; font-weight: 300; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 730px; margin: -5px 0 24px; color: #a9c0d8; font-size: 14px; line-height: 1.75; }
.closing-section { position: relative; overflow: hidden; padding: 105px 0 120px; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 0, rgba(12, 144, 237, .2), transparent 43%), linear-gradient(180deg, #071e36, #03101f); text-align: center; }
.closing-inner { position: relative; }
.closing-inner > img { width: 74px; height: 74px; object-fit: contain; margin-bottom: 22px; filter: drop-shadow(0 0 26px rgba(0, 156, 255, .36)); }
.closing-inner h2 { margin: 16px 0 19px; }
.closing-inner > p:not(.section-label) { max-width: 570px; margin: 0 auto 29px; color: #aec4da; font-size: 16px; line-height: 1.65; }
.site-footer { background: #030f1c; border-top: 1px solid var(--line); }
.footer-inner { min-height: 105px; display: flex; align-items: center; gap: 26px; }
.brand-footer { font-size: 21px; }
.brand-footer img { width: 34px; height: 34px; }
.footer-inner p { margin: 0; padding-left: 25px; border-left: 1px solid #31506c; color: #9db2c9; font-size: 12px; }
.footer-inner > span { margin-left: auto; color: #839cb6; font-size: 11px; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 18px; }
  .header-link { margin-left: 0; }
  .hero { min-height: 620px; gap: 32px; padding-block: 60px 75px; }
  h1 { font-size: clamp(55px, 6vw, 75px); }
  .tv-screen { height: 365px; }
  .screen-thumbs img { height: 58px; }
  .screen-story { top: 23%; }
  .screen-story strong { font-size: 41px; }
  .feature-card { padding: 25px; }
  .feature-card h3 { font-size: 21px; }
  .feature-wide h3 { font-size: 29px; }
  .experience-grid { gap: 55px; }
}
@media (max-width: 800px) {
  .container { width: min(calc(100% - 40px), var(--container)); }
  .header-inner { min-height: 68px; }
  .brand { font-size: 23px; }
  .brand img { width: 36px; height: 36px; }
  .desktop-nav, .header-link { display: none; }
  .mobile-nav { display: block; margin-left: auto; }
  .mobile-nav summary { display: grid; align-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; list-style: none; cursor: pointer; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary span { width: 100%; height: 2px; border-radius: 2px; background: #dceeff; }
  .mobile-nav nav { position: absolute; top: 62px; right: 20px; left: 20px; z-index: 20; display: grid; padding: 9px; border: 1px solid #315d7e; border-radius: 12px; background: #0b2139; box-shadow: 0 25px 35px rgba(0,0,0,.35); }
  .mobile-nav nav a { padding: 13px 15px; border-radius: 7px; color: #e6f3ff; font-size: 14px; }
  .mobile-nav nav a:hover { background: #153e62; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-block: 76px 74px; }
  .hero-copy { max-width: 680px; padding-bottom: 0; }
  h1 { font-size: clamp(55px, 9vw, 82px); }
  .hero-visual { width: min(100%, 680px); margin-inline: auto; padding-top: 14px; }
  .tv-screen { height: 440px; }
  .screen-thumbs img { height: 75px; }
  .principles-inner { flex-wrap: wrap; justify-content: center; padding-block: 22px; }
  .principles span { flex: 0 1 43%; text-align: center; }
  .section { padding-block: 100px; }
  .feature-grid, .device-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-wide { grid-column: span 2; }
  .feature-card:last-child { grid-column: span 2; min-height: 235px; }
  .experience-grid, .formats-grid, .status-section { grid-template-columns: 1fr; gap: 55px; }
  .experience-image { height: 410px; }
  .experience-copy { max-width: 670px; }
  .section-heading-split { display: block; }
  .sync-section .section-heading-split { display: block; }
  .section-heading-split > p { max-width: 600px; margin-top: 18px; }
  .formats-section { padding-block: 105px; }
  .sync-section { padding-block: 95px; }
  .sync-scroll-hint { display: block; }
  .format-callout { margin-top: 28px; }
  .status-panel { max-width: 600px; }
}
@media (max-width: 560px) {
  .container { width: min(calc(100% - 36px), var(--container)); }
  .hero { padding-top: 67px; gap: 42px; }
  .eyebrow { font-size: 9px; letter-spacing: .13em; }
  h1 { margin: 24px 0 20px; font-size: clamp(52px, 13vw, 72px); }
  .hero-lead { font-size: 20px; }
  .hero-detail { font-size: 14px; }
  .hero-actions { gap: 10px; }
  .button { width: 100%; justify-content: space-between; }
  .release-note { font-size: 11px; }
  .tv-frame { padding: 6px; border-radius: 12px; transform: none; }
  .tv-screen { height: 302px; border-radius: 6px; background-position: 61% center; }
  .screen-top { padding: 10px 12px; font-size: 9px; }
  .screen-mark { font-size: 10px; }
  .screen-mark img { width: 17px; height: 17px; }
  .screen-story { top: 27%; }
  .screen-kicker { font-size: 7px; }
  .screen-story strong { font-size: 31px; }
  .screen-story > span:nth-child(3) { font-size: 9px; }
  .screen-play { margin-top: 12px; padding: 7px 9px; font-size: 8px; }
  .screen-rail { bottom: 12px; font-size: 9px; }
  .screen-thumbs { gap: 5px; margin-top: 5px; }
  .screen-thumbs img { height: 48px; }
  .visual-caption { font-size: 9px; }
  .principles-inner { gap: 15px 5px; }
  .principles span { font-size: 9px; letter-spacing: .14em; }
  .section { padding-block: 82px; }
  .section-heading { margin-bottom: 32px; }
  .section-heading h2, .experience-copy h2, .formats-intro h2, .status-section h2, .closing-inner h2 { font-size: clamp(40px, 9vw, 53px); }
  .section-heading > p:last-child, .section-heading-split > p, .experience-copy > p:not(.section-label), .formats-intro > p:not(.section-label), .status-section > div:first-child > p:not(.section-label) { font-size: 15px; }
  .feature-grid, .device-grid { grid-template-columns: 1fr; }
  .sync-section { padding-block: 80px; }
  .sync-panel-heading { display: grid; padding: 22px; }
  .sync-note { padding: 12px 22px 22px; }
  .feature-wide, .feature-card:last-child { grid-column: auto; }
  .feature-wide { display: block; min-height: 290px; }
  .feature-wide h3 { margin-top: 27px; }
  .feature-art-source { position: absolute; right: 8px; bottom: -48px; opacity: .4; }
  .feature-card { min-height: 235px; }
  .feature-card h3 { margin-top: 25px; }
  .experience-section { padding-block: 75px; }
  .experience-grid { gap: 42px; }
  .experience-image { height: 310px; }
  .experience-image span { left: 18px; bottom: 17px; font-size: 15px; }
  .device-card { min-height: 220px; }
  .device-card h3 { margin-top: 22px; }
  .formats-section { padding-block: 82px; }
  .formats-grid { gap: 36px; }
  .format-row { align-items: start; flex-direction: column; gap: 11px; }
  .status-section { gap: 40px; }
  .status-panel { min-height: 320px; }
  .faq-section { padding-top: 12px; }
  .faq-list summary { font-size: 16px; }
  .closing-section { padding-block: 85px 100px; }
  .footer-inner { align-items: start; flex-direction: column; gap: 12px; padding-block: 28px; }
  .footer-inner p { padding-left: 0; border-left: 0; }
  .footer-inner > span { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.legal-main { padding-block: clamp(75px, 10vw, 145px); }
.legal-header .header-link { margin-left: auto; }
.legal-main h1 { margin: 14px 0 24px; font-size: clamp(48px, 8vw, 88px); line-height: 1.03; }
.legal-intro { max-width: 780px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.65; }
.legal-card { max-width: 860px; margin-top: 28px; padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(103, 177, 237, .18); border-radius: 24px; background: rgba(8, 34, 60, .76); }
.legal-card h2 { margin: 0 0 16px; font-size: clamp(22px, 3vw, 29px); }
.legal-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.72; }
.legal-card p:last-child { margin-bottom: 0; }
.legal-card a, .footer-links a { color: #75d9ff; text-underline-offset: 4px; }
.legal-updated { margin-top: 34px; color: var(--muted); }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; }
.legal-draft { max-width: 860px; margin-top: 32px; padding: 17px 20px; border: 1px solid #d69b48; border-radius: 14px; background: rgba(104, 62, 19, .25); color: #ffe7bb; line-height: 1.55; }
.legal-placeholder { color: #ffca82; }
.footer-inner > .footer-links + span { margin-left: 0; }
@media (max-width: 560px) { .legal-main { padding-block: 68px; } .legal-card { border-radius: 18px; } .legal-header .header-link { display: inline-flex; font-size: 11px; padding: 9px 11px; } .footer-links { margin-left: 0; } }

/* Shared Glassy palette, matching player and account management. */
:root{--bg:#060e19;--bg-deep:#060e19;--surface:#172438;--surface-high:#243347;--line:#d3e6ff29;--muted:#b3c2d4;--blue:#69dcf3;--cyan:#69dcf3;--glass:linear-gradient(125deg,#ffffff12,#ffffff04),#172438bf}
body,.site-shell{background:radial-gradient(ellipse at 80% 0,#55438c36,transparent 55%),radial-gradient(ellipse at 0 45%,#087b8d22,transparent 55%),#060e19}
.site-header{background:#172438b3;border-color:var(--line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.button,.header-link{border-radius:12px}.button-primary,.screen-play{background:linear-gradient(120deg,#e6faff,#d5edf5);color:#102532;border-color:#e2f6ff;box-shadow:inset 0 1px #fff8,0 12px 32px #0002}.button-primary:hover{background:#f0fcff;box-shadow:0 16px 36px #0003}.button-secondary,.header-link{background:#ffffff09;border-color:var(--line)}.button-secondary:hover,.header-link:hover{background:#ffffff15;border-color:#69dcf370}
.feature-card,.feature-wide,.device-card,.sync-panel,.status-panel,.legal-card{background:var(--glass);border-color:var(--line);border-radius:20px;box-shadow:0 16px 40px #0002,inset 0 1px #ffffff0c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.principles,.experience-section,.sync-section,.formats-section,.closing-section,.site-footer{background:#ffffff03;border-color:var(--line)}
h1 span,h2 span,.feature-index,.device-type,.screen-kicker{color:var(--cyan)}.format-callout{background:#69dcf30d;border-radius:0 14px 14px 0}.format-state{border-color:#c9e3f238;color:#c3e8f4}.sync-table thead th{background:#ffffff0b}.sync-table th:first-child{background:#1b2b3e}.sync-table tbody tr:nth-child(even){background:#ffffff03}.sync-table th,.sync-table td{border-color:#d3e6ff18}.sync-table thead th small{color:#b3c2d4}
.mobile-nav nav{background:linear-gradient(125deg,#ffffff0d,#ffffff02),#172438f5;border-color:#cde2fb40;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.mobile-nav nav a:hover{background:#ffffff0f}.mobile-nav summary{width:44px;height:44px;border-radius:12px}
.visual-glow{background:radial-gradient(ellipse,#69dcf31f,#a58aff15 43%,transparent 72%)}.screen-play{border-radius:8px}.status-panel p,.feature-card p,.device-card p{color:var(--muted)}
@media(prefers-reduced-transparency:reduce){.site-header,.feature-card,.device-card,.sync-panel,.status-panel,.legal-card,.mobile-nav nav{background:#19283a;backdrop-filter:none;-webkit-backdrop-filter:none}}