.tv-app{display:flex;font-family:Arial,sans-serif}.tv-nav{width:12%;flex-shrink:0;background:#141414;padding-top:4%;display:flex;flex-direction:column;gap:1%;border-right:1px solid #ffffff18}.tv-nav button{padding:9% 8%;border:0;background:none;text-align:left;font-size:1.45cqw;white-space:nowrap}.tv-nav button[aria-current=page]{background:#343434}.tv-app button:disabled{opacity:.4;cursor:default}.tv-content{position:relative;flex:1;min-width:0;overflow:auto;background:#121416}.splash-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.splash-copy{position:absolute;inset:0;padding:6%;display:flex;flex-direction:column;justify-content:end;align-items:start;background:linear-gradient(0deg,#000c,transparent 80%)}.trilogy-title{font-family:Georgia,serif;font-size:6cqw;font-weight:400;line-height:.95;margin:0 0 3%;text-shadow:0 2px 8px #0005}.trilogy-title small{display:block;font-size:2.8cqw;letter-spacing:.1cqw;margin-top:.7cqw}.splash-logo{width:49%;max-height:24%;object-fit:contain;object-position:left center;margin-bottom:2%}.splash-copy>p{font-size:1.65cqw;line-height:1.55;max-width:62%;color:#d5d7d7;margin:1% 0 4%}.splash-actions{display:flex;gap:1.4cqw}.splash-actions button{padding:1.1cqw 1.9cqw;font-size:1.7cqw;font-weight:600;border:1px solid #ffffff35;border-radius:1cqw;background:#27282c}.splash-actions button:hover:not(:disabled){background:#464a51}.library-title{font-size:3cqw;margin:4% 5% 1%}.library-subtitle{font-size:1.45cqw;color:#aeb9c0;margin:0 5% 3%}.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;padding:0 5% 4%}.media-card{background:#252b30;border:1px solid #ffffff20;border-radius:.8cqw;padding:0;overflow:hidden;text-align:left}.media-card:hover{border-color:#a9dcf1}.media-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.media-card strong{font-size:1.5cqw;display:block;padding:8%;font-weight:500}.media-back{background:#2b333a;border:1px solid #ffffff30;border-radius:.5cqw;font-size:1.5cqw;padding:.8cqw 1.4cqw;margin:2% 3%}.album-player{display:flex;gap:3%;padding:1% 4% 4%;align-items:start}.album-player>img{width:34%;border-radius:.8cqw}.album-info{flex:1;min-width:0}.album-info h1{font-size:2.5cqw;margin:0 0 3%}.track-title{font-size:1.8cqw}.album-info audio{width:100%;height:4.5cqw;min-height:24px}.track-list{display:grid;gap:.5cqw;margin-top:1cqw}.track-list button{text-align:left;background:#21292f;border:0;padding:.7cqw;font-size:1.3cqw}.track-list button[aria-pressed=true]{background:#344e5c;color:#c5eeff}.playback-message{font-size:1.2cqw;color:#dfcbb6}.video-player{display:block;width:94%;height:76%;margin:0 3%;border:0}.video-external{display:block;color:#add6ef;font-size:1.2cqw;margin:1% 3%}.tv-message{font-size:2cqw;padding:5%}

.album-visual{position:relative;width:42%;flex-shrink:0}.album-visual>img{display:block;width:100%;border-radius:.8cqw}.song-overlay{position:relative;margin-top:1cqw;padding:1.3cqw;background:#192832ed;border:1px solid #ffffff30;border-radius:.7cqw;color:#fff}.song-overlay[hidden]{display:none}.song-overlay strong{font-size:1.5cqw;color:#a9dcf1}.song-overlay p{font-size:1.5cqw;line-height:1.45;margin:.7cqw 0 0}

.immersive .tv-nav{display:none}.immersive .tv-content{overflow:hidden}.stage.expanded.playback-active .tv{inset:0;width:100%;height:100%;transform:none;aspect-ratio:auto}.immersive-player{position:absolute;inset:0;background:#000}.immersive-art{width:100%;height:100%;object-fit:cover}.immersive-overlay{position:absolute;right:5%;top:10%;width:40%;padding:2.5cqw;background:#07141de6;color:#fff;border:1px solid #ffffff40;border-radius:1cqw;box-shadow:0 1cqw 4cqw #0005;pointer-events:none}.immersive-overlay strong{font-size:2cqw;color:#bce7fb}.immersive-overlay p{font-size:2.4cqw;line-height:1.45;margin:1cqw 0 0}.reveal-controls{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}.immersive-controls{position:absolute;left:0;right:0;bottom:0;padding:2cqw 4cqw;background:linear-gradient(#07111beb,#07111b);max-height:65%;overflow:auto}.immersive-controls h1{font-size:2.2cqw;margin:0 0 1cqw}.immersive-actions{display:flex;flex-wrap:wrap;gap:1cqw;margin-bottom:1cqw}.immersive-actions button,.overlay-options button{font-size:1.5cqw;padding:.7cqw 1.4cqw;border:1px solid #ffffff50;background:#223b4c;border-radius:.5cqw}.immersive-controls audio{width:100%;height:36px}.immersive-controls .track-list{grid-template-columns:repeat(3,1fr)}.overlay-options{position:absolute;right:4%;top:5%;max-height:88%;width:40%;overflow:auto;padding:2cqw;background:#0d202df5;border:1px solid #bad7e5;border-radius:1cqw;box-shadow:0 1cqw 4cqw #0008}.overlay-options h2{font-size:2.2cqw;margin:0}.overlay-options p{font-size:1.4cqw;color:#c7dce6}.overlay-options label{display:flex;gap:1cqw;align-items:center;font-size:1.8cqw;padding:1cqw;background:#ffffff0d;margin:.6cqw 0}.overlay-options input{width:1.7cqw;height:1.7cqw;accent-color:#90d6f2}.overlay-options button{margin-top:1cqw}body:has(.immersive)>.close-expanded{display:none}

@media(max-width:600px){.immersive-overlay{right:5%;top:5%;width:90%;padding:18px}.immersive-overlay strong{font-size:15px}.immersive-overlay p{font-size:19px;margin-top:10px}.immersive-controls{padding:18px;max-height:65%}.immersive-controls h1{font-size:20px}.immersive-actions{gap:8px}.immersive-actions button,.overlay-options button{font-size:14px;padding:9px 12px}.immersive-controls .track-list{grid-template-columns:1fr;gap:6px}.immersive-controls .track-list button,.immersive-controls .playback-message{font-size:14px;padding:8px}.overlay-options{width:90%;padding:18px}.overlay-options h2{font-size:22px}.overlay-options p{font-size:14px}.overlay-options label{font-size:18px;padding:12px;gap:12px}.overlay-options input{width:20px;height:20px}}

.immersive-art{opacity:0;transition:opacity .7s}.art-ready .immersive-art{opacity:1}.immersive-player:not(.art-ready){background:#101923}.immersive-player:not(.art-ready):before{content:"Now playing";position:absolute;left:6%;top:12%;font-size:3cqw;color:white}.immersive-overlay{background:transparent;border:0;box-shadow:none;padding:0;pointer-events:none}.immersive-overlay .content-overlay{position:relative}body:has(.immersive)>.close-expanded{display:block}

.immersive-player:not(.art-ready) .immersive-overlay{visibility:hidden}

.immersive-overlay{inset:0;width:100%;height:100%;max-width:none}.immersive-overlay .content-overlay{position:absolute}.immersive-overlay .content-overlay--fullscreen{inset:0;width:100%;height:100%;max-width:100%;max-height:100%}

/* Fill the TV with complete visual slides, including their text. */
.immersive-overlay .content-overlay--visual-sequence.content-overlay--fullscreen .content-overlay-media-asset{width:100%;height:100%;max-width:none;max-height:none;object-fit:fill;transform:none;flex:none}

/* The TV overlay stays clickable above every full-screen visual and below the menu. */
.immersive-overlay{z-index:1}.reveal-controls{z-index:5}.immersive-controls{z-index:10;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(36%,32cqw);max-height:92%;padding:1.1cqw .5cqw;background:rgba(15,20,30,.92);border-radius:1cqw;box-shadow:0 .8cqw 3cqw #0008}.demo-menu-title{padding:.5cqw 1.5cqw 1cqw;margin:0;color:#ffffff80;font-size:1.1cqw;letter-spacing:.15cqw;text-transform:uppercase;font-weight:400}.demo-menu-item{display:block;width:calc(100% - 1.5cqw);margin:.25cqw .75cqw;padding:.8cqw 1.5cqw;border:0;border-radius:.4cqw;background:transparent;color:#ffffffbf;text-align:left;font-size:1.5cqw;font-weight:400}.demo-menu-item:focus,.demo-menu-item:hover{background:#ffffff2e;color:#fff}.overlay-options{z-index:12}.immersive-overlay.menu-open{visibility:hidden}

/* Overlay settings fills the TV, following the Music app category grid. */
.overlay-options{inset:0;width:100%;max-height:none;height:100%;padding:0;border:0;border-radius:0;background:#141416;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.overlay-options[hidden]{display:none}.demo-settings-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1cqw;padding:1cqw 2cqw;background:#000;border-bottom:1px solid #ffffff29}.demo-settings-header h2{font-size:1cqw;letter-spacing:.17cqw;text-align:center;text-transform:uppercase;color:#c4c2b7}.demo-settings-nav{display:flex;gap:.45cqw}.demo-settings-nav button{margin:0;padding:.65cqw .8cqw;font-size:1.05cqw;background:#272b32;border:1px solid #ffffff30;border-radius:.5cqw;white-space:nowrap}.demo-settings-tabs{display:flex;border:1px solid #ffffff30;border-radius:2cqw;padding:.2cqw;background:#ffffff12}.demo-settings-tab{margin:0!important;padding:.55cqw 1cqw!important;border:0!important;border-radius:2cqw!important;background:transparent!important;font-size:1.05cqw!important}.demo-settings-tab[aria-selected=true]{background:#ffffff30!important;color:#fff}.demo-settings-body{min-height:0;overflow:auto;padding:1.2cqw 2cqw 2cqw}.demo-settings-summary{margin:0 0 1cqw;font-size:1.1cqw;color:#c3c3bc}.demo-settings-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1cqw}.demo-settings-tile{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid #ffffff20;border-radius:.6cqw;padding:0;background:#292929;text-align:left}.demo-settings-tile img{width:100%;height:100%;object-fit:cover}.demo-settings-tile:disabled{opacity:.35}.demo-settings-label{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:.4cqw;padding:.45cqw .6cqw;background:#000b;font-size:1.05cqw;color:white;white-space:nowrap;overflow:hidden}.demo-settings-label>span:last-child{overflow:hidden;text-overflow:ellipsis}.demo-settings-check{background:#39ed79;color:#052411;border-radius:50%;width:1.15cqw;height:1.15cqw;display:grid;place-items:center;flex:none}.demo-settings-tile[aria-pressed=true]{outline:2px solid #39ed79;outline-offset:-2px}

/* Category settings opens above the whole page for comfortable browsing. */
.overlay-options.demo-settings-fullscreen{position:fixed;inset:0;z-index:100;width:100vw;height:100dvh;max-height:none;max-width:none;padding:0;border:0;border-radius:0;box-shadow:none;background:#141416;container-type:inline-size}
.demo-settings-fullscreen .demo-settings-header h2{font-size:clamp(12px,1cqw,16px)}
.demo-settings-fullscreen .demo-settings-nav button,.demo-settings-fullscreen .demo-settings-tab{font-size:clamp(12px,1.05cqw,16px)!important}
.demo-settings-fullscreen .demo-settings-summary,.demo-settings-fullscreen .demo-settings-label{font-size:clamp(12px,1.05cqw,16px)}
@media(max-width:700px){.demo-settings-fullscreen .demo-settings-header{grid-template-columns:1fr auto;gap:8px;padding:10px}.demo-settings-fullscreen .demo-settings-header h2{grid-column:1;grid-row:1;text-align:left}.demo-settings-fullscreen .demo-settings-tabs{grid-column:2;grid-row:1}.demo-settings-fullscreen .demo-settings-nav{grid-column:1 / -1;grid-row:2;flex-wrap:wrap}.demo-settings-fullscreen .demo-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.demo-settings-fullscreen .demo-settings-body{padding:12px}.demo-settings-fullscreen .demo-settings-check{width:16px;height:16px}}

/* Zoom the room and its TV together while keeping the settings legible. */
.overlay-options.demo-settings-fullscreen{display:block;overflow:hidden;background:#080e11;container-type:normal}
.overlay-options.demo-settings-fullscreen[hidden]{display:none}
.settings-zoom-stage{position:absolute;left:50%;top:50%;width:min(160vw,285dvh);aspect-ratio:1672/941;transform:translate(-38.76%,-40.86%)}
.settings-zoom-room{display:block;width:100%;height:100%;object-fit:fill}
.settings-zoom-screen{position:absolute;left:10.89%;top:14.45%;width:55.74%;height:52.82%;background:#141416;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;container-type:inline-size}

.overlay-options.demo-settings-fullscreen{background-size:cover;background-position:center}

/* Prominent group and mode toggles with full-bleed preview tiles. */
.demo-settings-fullscreen .demo-settings-header{display:flex;justify-content:space-between;align-items:center;gap:.7cqw;flex-wrap:wrap;padding:.7cqw 1.2cqw}.demo-settings-leading{display:flex;align-items:center;gap:.7cqw;flex-wrap:wrap}.demo-settings-leading>button,.demo-sample-header button,.demo-sample-actions button{margin:0;padding:.65cqw .9cqw;font-size:clamp(11px,1.05cqw,16px);background:#272b32;border:1px solid #ffffff30;border-radius:.5cqw}.demo-settings-fullscreen .demo-settings-nav{margin-left:auto;flex-wrap:wrap}.demo-settings-fullscreen .demo-settings-tab{font-size:clamp(12px,1.2cqw,18px)!important;font-weight:650}.demo-settings-fullscreen .demo-settings-modes{border-color:#81b9de77}.overlay-options .demo-settings-tile{padding:0;border:0}.overlay-options .demo-settings-tile img{display:block;width:100%;height:100%;object-fit:cover}.demo-sample-view{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:.6cqw}.demo-sample-header{display:flex;align-items:center;justify-content:space-between;gap:1cqw;color:#fff;font-size:clamp(12px,1.3cqw,18px)}.demo-sample-image{display:block;min-height:0;width:100%;height:100%;object-fit:contain;background:#000}.demo-sample-actions{display:flex;justify-content:center;gap:1cqw}.demo-sample-actions button:disabled{opacity:.35}

.overlay-options.demo-settings-fullscreen::before{content:"";position:absolute;inset:-30px;background-image:inherit;background-size:cover;background-position:center;filter:blur(22px) brightness(.55)}.settings-zoom-stage{z-index:1}

/* Keep the category grid within the TV; page rather than vertically scroll. */
.demo-settings-body:not(:has(.demo-sample-view)){display:flex;flex-direction:column;overflow:hidden}.demo-settings-grid{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr))}.demo-settings-grid .demo-settings-tile{height:100%;min-height:0;aspect-ratio:auto}.demo-settings-pages{flex:none;display:flex;justify-content:center;align-items:center;gap:1cqw;padding-top:.5cqw;font-size:clamp(10px,1cqw,15px);color:#d3d8db}.demo-settings-pages button{margin:0;padding:.35cqw .8cqw;font-size:clamp(10px,1cqw,15px)}.demo-settings-pages button:disabled{opacity:.35}@media(max-width:700px){.demo-settings-fullscreen .demo-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.demo-settings-fullscreen .demo-settings-body{padding:8px}.demo-settings-summary{margin-bottom:5px}}

.demo-settings-fullscreen .demo-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}

/* Samples use the whole screen, with navigation layered over the image. */
.demo-sample-meta{display:flex;align-items:center;justify-content:flex-end;gap:2cqw;color:#eee;font-size:clamp(12px,1.3cqw,18px)}
.demo-settings-body:has(.demo-sample-view){padding:0;overflow:hidden}
.demo-sample-view{position:relative;display:block;width:100%;height:100%;min-height:0}
.demo-sample-image{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.demo-sample-actions{position:absolute;inset:0;display:block;pointer-events:none}
.demo-sample-actions button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;margin:0;padding:.3cqw 1cqw;font-size:clamp(20px,3cqw,42px);line-height:1;background:#07131dc9;border:1px solid #ffffff75;border-radius:.5cqw}
.demo-sample-actions button:first-child{left:1cqw}.demo-sample-actions button:last-child{right:1cqw}.demo-sample-actions button:disabled{opacity:.25}

/* Keep the selected border visible over the tile image and its caption. */
.demo-settings-tile[aria-pressed=true]::after{content:"";position:absolute;inset:0;border:3px solid #39ed79;border-radius:inherit;z-index:2;pointer-events:none}
.demo-settings-tile[aria-pressed=true] .demo-settings-label{left:3px;right:3px;bottom:3px}

/* A quieter glass treatment for the settings navigation. */
.demo-settings-fullscreen .demo-settings-header{background:linear-gradient(180deg,#151b22f7,#0b1118f5);border-bottom:1px solid #ffffff20;gap:1cqw;padding:.8cqw 1.4cqw}
.demo-settings-leading{gap:1cqw}.demo-settings-fullscreen .demo-settings-tabs{gap:.2cqw;padding:.25cqw;border:1px solid #ffffff26;border-radius:999px;background:linear-gradient(145deg,#ffffff1c,#ffffff08);box-shadow:inset 0 1px 0 #ffffff16,0 .2cqw .8cqw #0004;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.demo-settings-fullscreen .demo-settings-header .demo-settings-tabs .demo-settings-tab{padding:.55cqw 1.1cqw!important;border:1px solid transparent!important;border-radius:999px!important;background:transparent!important;color:#c0c9d2!important;font-weight:500;font-size:clamp(11px,1.15cqw,17px)!important;line-height:1.2}
.demo-settings-fullscreen .demo-settings-header .demo-settings-tabs .demo-settings-tab[aria-selected=true]{background:linear-gradient(160deg,#ffffff40,#ffffff1a)!important;border-color:#ffffff35!important;color:#fff!important;box-shadow:inset 0 1px 0 #ffffff38,0 2px 6px #0005}
.demo-settings-fullscreen .demo-settings-header .demo-settings-tabs .demo-settings-tab:hover:not([aria-selected=true]){color:#fff!important;background:#ffffff12!important}
.demo-settings-fullscreen .demo-settings-leading>button,.demo-settings-fullscreen .demo-settings-nav button{background:#ffffff0c;border:1px solid #ffffff24;border-radius:.7cqw;color:#d6dee5;box-shadow:inset 0 1px 0 #ffffff0b;font-weight:500}
.demo-settings-fullscreen .demo-settings-nav button:first-child{background:#b3d9ec24;border-color:#b3d9ec55;color:#edf8ff}.demo-settings-fullscreen .demo-settings-leading>button:hover,.demo-settings-fullscreen .demo-settings-nav button:hover{background:#ffffff20;color:#fff}

/* Contextual guidance stays in the existing settings header and summary. */
.demo-settings-fullscreen .demo-settings-header{position:relative}
.demo-settings-hint{flex:1 1 0;min-width:0;text-align:center;color:#d4e0e8;font-size:clamp(13px,1.25cqw,19px);line-height:1.25;overflow:hidden;white-space:normal;pointer-events:none}
.demo-tile-shell{min-width:0;min-height:0;height:100%}
.demo-tile-shell .demo-settings-tile{display:block;width:100%;height:100%}

.demo-settings-tile[aria-pressed=true]{outline:none}
.demo-settings-tile[aria-pressed=true]::after{border-width:1.5px}
.demo-settings-tile[aria-pressed=true] .demo-settings-label{left:2px;right:2px;bottom:2px}

.demo-settings-tile-hint{flex:none;min-height:2.7em;padding:.45cqw .3cqw 0;color:#d4e0e8;font-size:clamp(13px,1.2cqw,18px);line-height:1.25;text-align:left;overflow:hidden}

.demo-settings-tile-hint{margin-top:.7cqw}

.settings-exit-home{position:absolute;z-index:3;top:clamp(8px,2vh,20px);left:clamp(12px,5vw,90px);padding:9px 16px;border:1px solid #ffffff70;border-radius:10px;background:linear-gradient(140deg,#ffffff32,#11182099);color:#fff;font-size:clamp(13px,1.1vw,17px);box-shadow:0 4px 18px #0005,inset 0 1px #ffffff33;backdrop-filter:blur(14px);cursor:pointer}.settings-exit-home:hover{background:linear-gradient(140deg,#ffffff40,#111820b0)}.settings-exit-home:focus-visible{outline:2px solid #c9e8f7;outline-offset:2px}

.settings-exit-home{top:6px;padding:5px 12px;font-size:clamp(12px,1vw,15px);line-height:1.2}

.demo-settings-tile-hint{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 .3cqw;color:#a8adb3}

/* Interactive TV navigation feedback. */
.tv-nav button:not(:disabled){cursor:pointer;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}.tv-nav button:not(:disabled):hover,.tv-nav button:not(:disabled):focus-visible{background:#294a70;color:#fff;box-shadow:inset 3px 0 #83cdf4;outline:none}

.settings-exit-home{background:linear-gradient(145deg,rgba(85,100,113,.62),rgba(30,40,49,.76));border-color:rgba(220,232,240,.28);backdrop-filter:blur(18px) saturate(130%);transition:background .18s ease}.settings-exit-home:hover{background:linear-gradient(145deg,rgba(100,116,129,.78),rgba(35,47,58,.9))}

.demo-settings-tile-hint{padding-top:clamp(8px,1cqw,16px)}

.overlay-options .settings-exit-home{margin:0;padding:5px 12px;background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.32);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);backdrop-filter:blur(14px);transition:background-color .18s ease}.overlay-options .settings-exit-home:hover{background:rgba(255,255,255,.32)}

.demo-settings-tile[aria-pressed=true]::after{border-color:rgba(224,228,230,.65)}
.demo-settings-tile[aria-pressed=true] .demo-settings-label::before{content:"";display:block;flex:none;width:clamp(8px,.85cqw,13px);height:clamp(8px,.85cqw,13px);border-radius:50%;background:#39ed79}
.overlay-options .settings-exit-home{top:12px;border:0;background:rgba(255,255,255,.34);font-weight:300;box-shadow:0 4px 18px #0004,inset 0 1px #ffffff24}.overlay-options .settings-exit-home:hover{background:rgba(255,255,255,.46)}

/* Selections show a subtle contrast; sample previews stay unchanged. */
.demo-settings-tile[aria-pressed=false] img{filter:brightness(.82)}

.demo-settings-tile[aria-pressed=true]::after{border:0}

/* White outline indicates hover or keyboard focus, independent of selection. */
.demo-settings-tile:not(:disabled):hover::after,.demo-settings-tile:not(:disabled):focus-visible::after,.demo-settings-tile[aria-pressed=true]:not(:disabled):hover::after,.demo-settings-tile[aria-pressed=true]:not(:disabled):focus-visible::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.9);border-radius:inherit;z-index:2;pointer-events:none}

.demo-settings-tile[aria-pressed=true] .demo-settings-label{left:0;right:0;bottom:0}

.demo-settings-tile:not(:disabled):hover::after,.demo-settings-tile:not(:disabled):focus-visible::after,.demo-settings-tile[aria-pressed=true]:not(:disabled):hover::after,.demo-settings-tile[aria-pressed=true]:not(:disabled):focus-visible::after{border:1px solid #fff}

.tv-nav button:not(:disabled):hover,.tv-nav button:not(:disabled):focus-visible{background:#326aa0;box-shadow:inset 3px 0 #a6d9f6}.splash-actions button{font-weight:400;cursor:pointer;transition:background-color .16s ease}.splash-actions button:hover,.splash-actions button:focus-visible{background:#326aa0;outline:none}.demo-placeholder{padding:5% 5%;color:#fff}.demo-placeholder h1{font-size:2.5cqw;font-weight:500;margin:0 0 1cqw}.demo-placeholder p{font-size:1.5cqw;color:#c2c9ce;line-height:1.5}.demo-placeholder .demo-placeholder-note{color:#8a9ba7}

.demo-settings-tile-hint{white-space:nowrap;text-overflow:ellipsis}

.tv-nav button{display:flex;align-items:center;gap:.65cqw}.tv-nav-icon{display:block;flex:none;width:1.5cqw;height:1.5cqw;fill:currentColor}

.videos-feature-slide{position:absolute;inset:0;background:#03070b url("assets/preview/videos-feature-slide.jpg") center/cover no-repeat;display:flex;align-items:center}.videos-feature-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.04) 75%);pointer-events:none}.videos-feature-copy{position:relative;width:52%;padding:4.5cqw;color:#fff}.videos-feature-eyebrow{font-size:1.05cqw;letter-spacing:.18cqw;color:#a6c9d7;margin-bottom:1.4cqw}.videos-feature-copy h1{font-size:3.7cqw;line-height:1.08;font-weight:400;white-space:pre-line;letter-spacing:-.05cqw;margin:0 0 1.6cqw}.videos-feature-description{font-size:1.5cqw;line-height:1.5;color:#d9e0e3;margin:0 0 2cqw}.videos-feature-topics{font-size:.9cqw;letter-spacing:.12cqw;color:#d0ae75;margin:0 0 2.4cqw}.videos-feature-note{font-size:1.05cqw;color:#a2aeb5;margin:0}

.books-feature-slide{background-image:url("assets/preview/books-feature-slide.jpg")}

.games-feature-slide{background-image:url("assets/preview/games-feature-slide.jpg")}

.pair-feature{position:absolute;inset:0;display:flex;align-items:center;gap:3cqw;padding:5cqw;background:radial-gradient(ellipse at 88% 35%,#18354b 0%,#09121b 40%,#05080d 85%);color:#fff}.pair-feature-intro{width:43%;flex:none}.pair-eyebrow{font-size:1cqw;letter-spacing:.17cqw;color:#9ac2d4;margin-bottom:1.5cqw}.pair-feature h1{font-size:3.4cqw;line-height:1.1;font-weight:400;margin:0 0 1.5cqw}.pair-feature-intro>p{font-size:1.4cqw;line-height:1.5;color:#d0d9de;margin:0 0 1.8cqw}.pair-feature-intro .pair-note{font-size:1.05cqw;color:#9bacb6}.pair-steps{flex:1;display:grid;gap:.8cqw}.pair-step{display:grid;grid-template-columns:3.2cqw 1fr;column-gap:1cqw;padding:1cqw 1.2cqw;background:linear-gradient(130deg,#c2e1ef1c,#5878900d);border:1px solid #c8e0ee35;border-radius:.8cqw}.pair-step-number{grid-row:span 2;font-size:1.4cqw;color:#9bcbe4}.pair-step strong{font-size:1.3cqw;font-weight:500}.pair-step-detail{font-size:1.05cqw;color:#a8bbc7;margin-top:.3cqw}

.access-feature{position:absolute;inset:0;display:flex;align-items:center;gap:3cqw;padding:4cqw;background:radial-gradient(ellipse at 85% 30%,#26343e,#111820 48%,#090c10 90%);color:#fff}.access-feature-copy{width:40%;flex:none}.access-feature h1{font-size:3cqw;font-weight:400;line-height:1.15;margin:0 0 1.5cqw}.access-feature-copy p{font-size:1.35cqw;line-height:1.5;color:#d6dfe3;margin:0 0 1.3cqw}.access-feature-copy .access-security{color:#a9cbd9}.access-feature-copy .pair-note{font-size:1cqw;color:#9cabb5}.access-feature-visual{flex:1;overflow:hidden;border:1px solid #ffffff30;border-radius:1cqw;box-shadow:0 1cqw 3cqw #0007}.access-feature-visual img{display:block;width:100%;height:auto}

.access-feature-copy .access-pilot{font-size:1.18cqw;line-height:1.4;margin-bottom:.7cqw}.access-email{display:inline-block;font-size:1.12cqw;color:#a8d8ee;text-decoration:none;margin:0 0 1cqw}.access-email:hover{text-decoration:underline}

.sites-feature{position:absolute;inset:0;display:flex;align-items:center;gap:3cqw;padding:5cqw;background:radial-gradient(ellipse at 90% 20%,#28465a,#101c25 42%,#080b0f 85%);color:#fff}.sites-feature-copy{width:57%}.sites-feature h1{font-size:3cqw;font-weight:400;line-height:1.1;white-space:pre-line;margin:0 0 1.3cqw}.sites-feature-copy p{font-size:1.25cqw;line-height:1.45;color:#cbd5da;margin:0 0 1.2cqw}.sites-feature-copy .sites-feature-note{font-size:1cqw;color:#91adbc}.sites-feature-cards{flex:1;display:grid;gap:.8cqw}.sites-feature-card{display:grid;grid-template-columns:2.8cqw 1fr;gap:.2cqw .8cqw;padding:1cqw;border:1px solid #a8c8d83b;background:#c0dfee14;border-radius:.7cqw}.sites-feature-icon{grid-row:span 2;font-size:2cqw;color:#a1cde3}.sites-feature-card strong{font-size:1.2cqw;font-weight:500}.sites-feature-card span:last-child{font-size:1cqw;color:#a9bbc4}

.city-wordmark{font-family:Arial,sans-serif;font-size:2.8cqw;font-weight:300;letter-spacing:.22cqw;line-height:1.1}.library-brand .city-wordmark{font-size:2.5cqw}

.sites-back{position:absolute;top:1.4cqw;left:2cqw;padding:.55cqw 1cqw;border:1px solid #aec4d055;border-radius:.5cqw;background:#1a2934;color:#fff;font-size:1.1cqw;cursor:pointer}.sites-back:hover{background:#326aa0}

/* Visual-led community feature slides */
.sites-feature-slide{background-image:url("assets/preview/sites-feature-slide.jpg")}
.menu-feature-slide{background-image:url("assets/preview/menu-feature-slide.jpg")}
.community-feature-copy{position:relative;width:54%;padding:4.5cqw;color:#fff}
.community-feature-kicker{font-size:1.15cqw;letter-spacing:.16cqw;color:#b2d2dd;margin-bottom:1.1cqw}
.community-feature-copy h1{font-size:3.7cqw;line-height:1.08;font-weight:400;white-space:pre-line;margin:0 0 1.5cqw}
.community-feature-description{font-size:1.8cqw;line-height:1.4;color:#e1e6e8;margin:0 0 1.5cqw}
.community-feature-note{font-size:1.42cqw;line-height:1.4;color:#bccbd1;margin:0}
.community-feature-back{position:absolute;z-index:2;top:1.1cqw;left:1.5cqw;font-size:1.2cqw}

.content-overlay--personal-photo::after,.personal-sample-badge{content:"Sample personal photo";position:absolute;right:2%;bottom:3%;z-index:5;padding:.35em .65em;border-radius:.25em;background:#0009;color:#fff;font:500 clamp(10px,1.2cqw,20px)/1.3 sans-serif;text-shadow:0 1px 2px #000;pointer-events:none}

.splash-copy .city-wordmark-dubai{font-size:2.25cqw}
.splash-copy .city-wordmark-paris{font-size:2.5cqw}

.cedar-wordmark{display:flex;flex-direction:column;align-items:center;width:max-content;font-family:Segoe UI,Arial,sans-serif;font-weight:300;letter-spacing:.12em}.cedar-wordmark small{font-size:.4em;font-weight:300;letter-spacing:.09em;text-transform:none;margin-top:.15em}

.song-navigation{position:absolute;z-index:6;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:.7cqw;padding:.5cqw;background:linear-gradient(transparent,#0008)}.song-navigation button{border:1px solid #ffffff55;background:#121d26c9;color:white;border-radius:.45cqw;padding:.4cqw 1cqw;font-size:1.3cqw;line-height:1;cursor:pointer}.song-navigation button:hover{background:#32526b}.song-navigation button:disabled{opacity:.35;cursor:default}.song-navigation button:focus-visible{outline:2px solid white;outline-offset:2px}

.song-navigation{gap:1cqw;padding:.8cqw}.song-navigation button{min-width:4.2cqw;min-height:3.5cqw;padding:.45cqw 1cqw;font-size:2.5cqw;border-radius:1cqw;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28)}.song-navigation button:hover{background:rgba(255,255,255,.32)}

.song-navigation{left:auto;right:1cqw;bottom:.5cqw;justify-content:flex-end;background:none;width:auto}

.song-navigation button{background:rgba(14,22,30,.74);border:1px solid rgba(255,255,255,.72);box-shadow:0 2px 10px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.35);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.song-navigation button:hover{background:rgba(35,51,64,.88)}
 .song-navigation button:disabled{opacity:.65;color:#c4cbd0}

.song-navigation{left:0;right:0;width:auto;justify-content:center}
.song-navigation button:first-child{font-size:1.4cqw;padding:.55cqw 1.2cqw}

/* Identify playable albums without highlighting disabled tiles. */
.album-row .media-card{position:relative}
.album-row .media-card:not(:disabled)::after{content:"";position:absolute;top:.55cqw;right:.55cqw;width:.8cqw;height:.8cqw;min-width:5px;min-height:5px;border-radius:50%;background:#38e57b;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.album-row .media-card:disabled:hover{border-color:#ffffff20;filter:none;transform:none}

/* Place the playable indicator beside the album title. */
.album-row .media-card:not(:disabled)::after{content:none}
.album-row .media-card:not(:disabled) strong::before{content:"";display:inline-block;width:.8cqw;height:.8cqw;min-width:5px;min-height:5px;margin-right:.45cqw;border-radius:50%;background:#38e57b;vertical-align:baseline}

.album-row .tile-rail .media-card:not(:disabled) strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}