/* Compact active session: the primary action stays above the first fold. */
#navigation { position:fixed; left:var(--phone-left); top:var(--phone-top); width:var(--phone-width); height:var(--phone-height); max-width:none; max-height:none; margin:0; padding:0; border-radius:38px; border:0; box-shadow:none; background:#fafcfd; overflow:hidden; }
#navigation[open] { display:flex; flex-direction:column; }
#navigation::backdrop { background:transparent; }
.nav3d-header { display:flex; align-items:center; gap:12px; padding:18px; flex-shrink:0; }
.nav3d-header>div { flex:1; }.nav3d-header small { font-size:12px; }.nav3d-header h2 { font-size:22px; margin:4px 0 0; }
.nav3d-viewport { position:relative; flex:1; min-height:160px; background:#e8f0f4; }
.nav3d-viewport iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
#nav3d-loading:not([hidden]) { position:absolute; inset:0; background:#e8f0f4; padding:30px; display:grid; place-content:center; text-align:center; }
.nav3d-controls { padding:16px 18px max(20px,env(safe-area-inset-bottom)); flex-shrink:0; }
.nav3d-controls>.row strong { font-size:15px; }.nav3d-controls>.row span { font-size:13px; color:var(--muted); }
#nav3d-step { font-size:12px; margin:8px 0 12px; min-height:36px; }
.nav3d-views { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px; }
.nav3d-views button { border:1px solid var(--line); background:white; color:var(--ink); min-height:44px; border-radius:10px; font-size:12px; }
.nav3d-playback { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }.nav3d-playback button { min-height:44px; padding:10px; }
#nav3d-occupy { width:100%; min-height:44px; margin-bottom:10px; }
#nav3d-occupy[hidden] { display:none; }
.nav3d-controls { max-height:55%; overflow:auto; }
@media(max-width:760px) { #navigation { border-radius:0; }.nav3d-header { padding-top:max(16px,env(safe-area-inset-top)); } }
@media(max-height:560px) { .nav3d-controls { max-height:42dvh; overflow:auto; }.nav3d-header { padding:8px 16px; }.nav3d-viewport { min-height:100px; } }
.feature-description { display:grid; gap:18px; margin:28px 0; max-width:360px; }
.feature-description h3 { font-size:15px; margin-bottom:5px; }
.feature-description p { font-size:14px; }
.device > .demo-line { border:0; background:#eef3f8; color:#34516a; margin:0 22px 5px; padding:10px 12px; border-radius:10px; min-height:44px; font-size:12px; flex-shrink:0; }
.demo-line span { margin-left:8px; font-size:17px; }
#sheet { position:fixed; left:var(--phone-left); top:var(--phone-top); width:var(--phone-width); height:var(--phone-height); max-width:none; max-height:none; margin:0; border-radius:38px; padding:24px 22px; box-shadow:none; background:#fafcfd; }
#sheet::backdrop { background:transparent; }
#sheet-content { min-width:0; }
#sheet .row:first-child { margin-bottom:26px; }
.scenario-list { margin-top:20px; }
.scenario-list .list-row { padding:19px 0; }
#toast { position:absolute; left:18px; right:18px; bottom:88px; transform:none; max-width:none; width:auto; padding:14px 16px; font-size:13px; }
@media(max-width:760px) { #sheet { border-radius:0; padding-top:max(20px,env(safe-area-inset-top)); } }
main:has(> .hero-card):not(:has(> .route-step)) { display:flex; flex-direction:column; }
main:has(> .hero-card):not(:has(> .route-step)) > * { flex-shrink:0; }
main:has(> .hero-card):not(:has(> .route-step)) > .overline { order:0; }
main:has(> .hero-card):not(:has(> .route-step)) > h2 { order:1; }
main:has(> .hero-card):not(:has(> .route-step)) > .hero-card { order:2; }
main:has(> .hero-card):not(:has(> .route-step)) > .actions { order:3; }
main:has(> .hero-card):not(:has(> .route-step)) > .map { order:4; }
main:has(> .hero-card):not(:has(> .route-step)) > .card:not(.hero-card) { order:5; }
main:has(> .hero-card):not(:has(> .route-step)) > .list-row { order:6; }
main > h2 { font-size:26px; margin-bottom:16px; }
main > .hero-card { padding:18px; margin-bottom:12px; }
.hero-card .spot { font-size:54px; margin-top:12px; }
.hero-card .stats { margin-top:16px; }
main > .map { height:128px; margin:10px 0; }
main > .actions { margin-top:12px; }
@media(min-width:761px) and (max-height:800px) {
 main > .map { height:100px; }
 main > h2 { font-size:24px; }
 .hero-card .spot { font-size:46px; }
 .hero-card .stats { margin-top:12px; }
}
@media(max-width:760px) and (max-height:740px) {
 main > .map { height:100px; }
 .hero-card .spot { font-size:44px; }
 main > h2 { font-size:24px; }
}