body.homeActive {overflow:hidden}
body.homeActive .app {height:100dvh;min-height:0;padding-bottom:0}
#home.on {display:flex;flex-direction:column;height:var(--home-height,calc(100dvh - 145px));gap:14px;min-height:0}
#homeBanners {position:relative;flex:none;min-height:0;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:0;background:#090909}
#homeBanners[hidden] {display:none}
#homeVideo {width:100%;height:100%;display:block;object-fit:cover}
.homeVideoMute {position:absolute;bottom:10px;right:10px;width:34px;height:34px;border:1px solid #ffffff30;border-radius:50%;background:#0009;color:white;cursor:pointer}
.homeVideoRetry {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--hub-color-ff9a00,#ff9a00);background:#111d;color:white;padding:12px 18px;border-radius:12px;cursor:pointer}
.homeVideoRetry[hidden] {display:none}
#home .homeGrid {flex:1;min-height:0;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
/* Home media tiles: one preview and a readable footer per destination. */
#home .homeChoice {position:relative;isolation:isolate;min-width:0;min-height:0;padding:0;border:0!important;border-radius:18px;background:#101112!important;box-shadow:none!important;display:flex;flex-direction:column;text-align:left;color:#f6f6f6;font-family:inherit;cursor:pointer;overflow:hidden;transition:transform .16s}
#home .homeChoice:before,#home .homeChoice:after {display:none!important}
#home .homeChoice:active {transform:scale(.98)}
#home .homeChoice:focus-visible {outline:2px solid var(--hub-color-ff9800,#ff9800);outline-offset:3px}
#home .tilePreview {position:relative;display:block;flex:1;min-height:0;width:100%;overflow:hidden;background:radial-gradient(ellipse at 30% 0%,#ffffff03,transparent 70%),#0b0c0d}
#home .tilePreview:after {content:"";position:absolute;inset:0;background:linear-gradient(transparent 48%,#101112);pointer-events:none}
#home .tilePreview>img {display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.86) saturate(.78)}
#home .homeImages .tilePreview>img {object-position:center 40%}
#home .tileFooter {flex:none;min-height:34px;padding:8px 11px;display:flex;align-items:center;justify-content:space-between;gap:4px;background:#101112}
#home .tileFooter b {margin:0;font-size:14px;font-weight:650;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
#home .tileArrow {width:15px;height:15px;flex:none;fill:none;stroke:var(--hub-color-ff9a00,#ff9a00);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tileBubble {position:absolute;border-radius:12px;padding:9px 11px;font-size:12px;line-height:1.2;white-space:nowrap;color:#f3f3f3}
.tileBubbleAssistant {left:10px;top:14%;background:#222426}
.tileBubbleUser {right:10px;top:48%;background:var(--hub-color-713d08,#713d08)}
.tileBubble:before {content:"";position:absolute;bottom:0;width:9px;height:9px;background:inherit}
.tileBubbleAssistant:before {left:-3px;border-radius:0 0 8px 0}
.tileBubbleUser:before {right:-3px;border-radius:0 0 0 8px}
.tileTyping {position:absolute;left:10px;bottom:10%;padding:8px 10px;border-radius:14px;background:#202224;display:flex;gap:4px}
.tileTyping i {width:4px;height:4px;border-radius:50%;background:#a1a3a6}
.tileTyping i:nth-child(2) {background:#d0d1d3}
.tileCode {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:10px;font:10px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.tileCode>div {display:flex;gap:12px}
.tileCode em {font-style:normal;color:var(--hub-color-ffae34,#ffae34)}
.tileLine {color:#666a6d;font-size:9px}
.tilePlay {position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0b0c0db3;border:1px solid #ffffff0c}
.tilePlay svg {width:21px;height:21px;fill:#f4f4f4;transform:translateX(-1px)}
.tileWave {position:absolute;inset:12px 14px;display:flex;gap:4px;align-items:center;justify-content:center}
.tileWave i {display:block;flex:1;max-width:4px;min-width:1px;height:var(--bar);min-height:3px;border-radius:3px;background:var(--hub-color-cd7c22,#cd7c22)}
.tileWave i:nth-child(n+10):nth-child(-n+18) {background:var(--hub-color-f2a030,#f2a030)}
.tileWave i:nth-child(-n+4),.tileWave i:nth-last-child(-n+4) {opacity:.3}
.tileTools {position:absolute;inset:12% 20%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tileTool {min-height:0;display:grid;place-items:center;border:1px solid #ffffff09;border-radius:12px;background:linear-gradient(145deg,#1e2022,#151719)}
.tileTool svg {width:24px;height:24px;fill:none;stroke:#e4e5e6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tileTool-mic svg {stroke:var(--hub-color-ff9a00,#ff9a00)}
#home.homeTight .tileBubble {font-size:11px;padding:7px 9px;border-radius:10px}
#home.homeTight .tileTyping {padding:6px 8px}
#home.homeTight .tileCode {font-size:9px;gap:7px;padding:8px}
#home.homeTight .tileCode>div {gap:8px}
#home.homeVeryTight .tileFooter {min-height:29px;padding:7px 8px}
#home.homeVeryTight .tileFooter b {font-size:12px}
#home.homeVeryTight .tileArrow {width:13px;height:13px}
#home.homeVeryTight .tileBubble {font-size:9px;padding:5px 7px}
#home.homeVeryTight .tileTyping {padding:4px 6px;bottom:7%}
#home.homeVeryTight .tileCode {font-size:8px;gap:5px;padding:6px}
#home.homeVeryTight .tileCode>div {gap:5px}
#home.homeVeryTight .tileTools {inset:10% 20%;gap:4px}
#home.homeVeryTight .tileTool {border-radius:8px}
#home.homeVeryTight .tileTool svg {width:18px;height:18px}
#home.homeVeryTight .tilePlay {width:28px;height:28px}
#home.homeVeryTight .tileWave {inset:8px 10px;gap:3px}
#home.homeVeryTight .homeGrid {gap:8px}
@media(prefers-reduced-motion:reduce) {#home .homeChoice {transition:none}}
.homeVideoAdminRow {display:flex;gap:7px;align-items:center;margin:10px 0;flex-wrap:wrap}
.homeVideoAdminRow span {flex:1;min-width:120px;overflow-wrap:anywhere}
.homeVideoAdminEntry[hidden] {display:none!important}
.homeVideoAdminPanel {padding:16px;margin:16px 0}
.homeVideoAdminPanel h2 {font-size:18px;margin-top:0}

/* Compact previews keep their spacing as the screen height changes. */
#home .homeChat .tilePreview {display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:10px 12px}
#home .tileBubble {position:relative;left:auto;right:auto;top:auto;bottom:auto;max-width:100%;padding:6px 9px}
#home .tileBubbleUser {align-self:flex-end}
#home .tileTyping {position:relative;left:auto;bottom:auto;padding:5px 8px}
#home .tilePreview {container-type:size}
#home .tileTools {inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(58%,90px);width:min(58cqw,84cqh,112px);aspect-ratio:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
#home .tileTool {border:0;border-radius:10px}
#home.homeVeryTight .homeChat .tilePreview {gap:4px;padding:6px 10px}
#home.homeVeryTight .tileBubble {padding:4px 6px}
#home.homeVeryTight .tileTyping {padding:3px 6px}
#home.homeVeryTight .tileTools {gap:4px}
#home.homeVeryTight .tileTool {border-radius:7px}

/* Reveal the existing header glow above the video. */
#homeBanners {margin-top:0}

/* A single shadow follows the player shape; no fixed overlay or extra layers. */
#homeBanners {box-shadow:none;transition:box-shadow .4s ease}
body.homeActive #homeBanners.ambientPlaying {box-shadow:-9px 0 22px -10px rgba(var(--ambient-left,0,0,0),.65),9px 0 22px -10px rgba(var(--ambient-right,0,0,0),.65),0 -7px 18px -10px rgba(var(--ambient-top,0,0,0),.5),0 9px 22px -10px rgba(var(--ambient-bottom,0,0,0),.6)}
@media(prefers-reduced-motion:reduce){#homeBanners{transition:none}}

/* Fit tile illustrations to their actual available area, without cropped bubbles. */
#home .homeChat .tilePreview {display:block;padding:0}
#home .homeChat .tileBubble {position:absolute;flex:none;font-size:clamp(9px,14cqh,12px);line-height:1.15;padding:clamp(3px,6cqh,6px) 9px;border-radius:10px;max-width:85%;white-space:nowrap}
#home .homeChat .tileBubbleAssistant {left:10%;right:auto;top:12%;bottom:auto}
#home .homeChat .tileBubbleUser {left:auto;right:9%;top:auto;bottom:13%}
#home .homeChat .tileTyping {display:none}
#home .tileCode {padding:10px 12px;gap:clamp(4px,9cqh,9px);font-size:clamp(8px,14cqh,11px);line-height:1.25}
#home .tileCode>div {gap:8px}
#home .tileTools {width:min(64cqw,92cqh,104px);gap:7px}
#home .tileTool svg {width:65%;height:65%;max-width:29px;max-height:29px}
#home .tileWave {inset:16% 9%;gap:4px}
#home .tileFooter {padding:9px 12px;min-height:36px}
#home.homeVeryTight .tileFooter {padding:7px 9px;min-height:29px}

/* Home responsive layout: readable minimums and scrolling only when space runs out. */
body.homeActive .app {height:var(--home-viewport,100dvh)}
#homeBanners {width:min(100%,var(--home-video-width,100%));align-self:center}
#home .homeGrid {grid-template-rows:repeat(3,minmax(96px,1fr))}
#home .tileFooter {min-height:42px;padding:8px 10px}
#home .tileFooter b {font-size:14px;white-space:normal;overflow-wrap:normal;line-height:1.15;min-width:0}
#home .tileArrow {flex:none}
#home .homeChat .tileBubble {font-size:clamp(8px,13cqh,12px);padding:clamp(2px,5cqh,6px) 8px}
#home .tileCode {font-size:clamp(8px,12cqh,11px);padding:8px;gap:clamp(3px,8cqh,8px)}
body.homeActive.homeCanScroll {overflow-y:auto}
body.homeActive.homeCanScroll .app {height:auto;min-height:var(--home-viewport,100dvh);padding-bottom:90px}
#home.on.homeScrollable {height:auto;min-height:var(--home-height);padding-bottom:10px}
#home.homeScrollable .homeGrid {flex:none;grid-template-rows:repeat(3,108px)}
@media(max-width:359px){#home .homeGrid{gap:8px}#home .tileFooter b{font-size:12px}#home .tileFooter{padding:7px 8px}}
@media(min-width:640px){
 body.homeActive .app{max-width:860px;padding-left:20px;padding-right:20px}
 body.homeActive .bottom{max-width:860px}
 #home .homeGrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(96px,1fr))}
 #home.homeScrollable .homeGrid{grid-template-rows:repeat(2,120px)}
 #home .tileFooter b{font-size:17px}
 #home .tileFooter{min-height:44px;padding:10px 14px}
 #home .tileCode{font-size:clamp(10px,12cqh,14px)}
 #home .homeChat .tileBubble{font-size:clamp(10px,13cqh,15px)}
}

/* Tap the video to reveal dismissal; tiles expand using the existing grid. */
#home {position:relative}
.homeVideoClose {position:absolute;right:10px;top:10px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff25;border-radius:50%;background:#0009;color:#fff;font:25px/1 system-ui;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .18s;z-index:2}
#homeBanners.videoControlsVisible .homeVideoClose,#homeBanners:focus-within .homeVideoClose {opacity:1;visibility:visible}
.homeVideoClose:focus-visible,.homeVideoRestore:focus-visible {outline:2px solid var(--hub-color-ff9a00,#ff9a00);outline-offset:3px}
.homeVideoRestore {position:absolute;right:0;top:10px;z-index:2;border:0;background:none;color:#b8b8b8;font:12px system-ui;padding:8px;cursor:pointer}
.homeVideoRestore[hidden] {display:none}
#home.homeVideoDismissed .homeGrid {margin-top:var(--home-closed-inset,50px);gap:var(--home-closed-gap,22px)}
#home .homeChoice {transform-origin:top left}
#home.homeVideoDismissed .tileFooter {min-height:46px;padding:12px 14px}
#home.homeVideoDismissed .tileFooter b {font-size:16px}
@media(max-width:359px){#home.homeVideoDismissed .tileFooter b{font-size:13px}#home.homeVideoDismissed .tileFooter{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){.homeVideoClose{transition:none}}

#homeVideoRestore {display:none!important}

/* Selected folded-paper illustrations: contained in compact and expanded tiles. */
#home .tilePaper {background:#0b0c0d}
#home .homeChoice .tilePaper>img {object-fit:contain;object-position:center;filter:none;max-width:100%;max-height:100%}
#home .tilePaper:after {background:linear-gradient(transparent 78%,#101112)}

/* Artwork fills the card; the footer remains readable over its dark fade. */
#home .homeChoice .tilePreview {position:absolute;inset:0;width:100%;height:100%;container-type:normal;padding:0}
#home .homeChoice .tilePreview>img {width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
#home .homeChoice .tilePaper>img {object-position:center 40%;filter:none}
#home .homeChoice .tilePreview:after {background:linear-gradient(transparent 52%,rgba(16,17,18,.4) 72%,#101112 100%)}
#home .homeChoice .tileFooter {position:relative;z-index:2;margin-top:auto;background:transparent}
#homeVideoRetry {display:none!important}

/* Fade artwork backgrounds into one continuous card surface. */
#home .homeChat,#home .homeDeveloper,#home .homeMusic,#home .homeOther {background:#0b0c0d!important}
#home .homeChoice .tilePaper>img {
 -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent);
 mask-composite:intersect;
}
#home .homeChoice .tilePaper:after {background:linear-gradient(transparent 65%,#0b0c0d)}

/* Preserve the artwork's folds and lighting while matching the selected accent. */
:root {--hub-home-icon-filter:none}
:root[data-theme="amethyst"] {--hub-home-icon-filter:hue-rotate(215deg)}
:root[data-theme="ice"] {--hub-home-icon-filter:hue-rotate(160deg)}
:root[data-theme="emerald"] {--hub-home-icon-filter:hue-rotate(100deg)}
:root[data-theme="ruby"] {--hub-home-icon-filter:hue-rotate(300deg)}
#home .homeChoice .tilePaper>img {filter:var(--hub-home-icon-filter,none)}


/* Simple paper icons on a plain black navigation background. */
.bottom.paperNav {border-top:0!important;box-shadow:none!important;background:#050505!important;gap:0;padding:5px 4px calc(7px + env(safe-area-inset-bottom));isolation:isolate;overflow:hidden}
.bottom.paperNav button {position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0;min-height:54px;padding:0 2px;color:#969ba4;font-family:inherit;cursor:pointer;background:transparent}
.bottom.paperNav .paperNavIcon {display:block;width:28px;height:28px;flex:none;filter:none}
.bottom.paperNav #navRadio .paperNavIcon {width:31px;height:31px}
.bottom.paperNav .paperFold {fill:currentColor;stroke:none;opacity:.48}
.bottom.paperNav button.on {color:var(--hub-color-ffae23,#ffae23)}
.bottom.paperNav button[aria-disabled="true"] {cursor:default}
.bottom.paperNav button:focus-visible {outline:1px solid var(--hub-color-ffae23,#ffae23);outline-offset:-3px;border-radius:10px}

/* Animated video destination tile; the original image stays as a lightweight fallback. */
#home .homeVideo .tilePreview>#homeVideoTileLoop {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.86) saturate(.78);opacity:0;transition:opacity .2s;pointer-events:none}
#home .homeVideo .tilePreview.tileLoopReady>#homeVideoTileLoop {opacity:1}

/* The home menu fits between the header and navigation; animation cannot add scroll area. */
body.homeActive{overflow:hidden!important;overscroll-behavior:none}
body.homeActive .app{height:var(--home-viewport,100dvh);min-height:0;padding-bottom:0;overflow:clip}
#home.on,#home.on.homeScrollable{height:var(--home-height);min-height:0;overflow:clip;padding-bottom:0}
#home .homeGrid,#home.homeScrollable .homeGrid{flex:1;min-height:0;grid-template-rows:repeat(3,minmax(0,1fr));overflow:clip}
@media(min-width:640px){#home .homeGrid,#home.homeScrollable .homeGrid{grid-template-rows:repeat(2,minmax(0,1fr))}}