/* Only player chrome and its surrounding page change; scene artwork stays untouched. */
body.guide-page { display:block; min-height:100vh; background:var(--paper); color:var(--primary); font:400 var(--fs-body)/var(--lh-body) var(--sans); }
.guide-content { width:min(1120px,calc(100% - 96px)); margin:0 auto; padding:48px 0 80px; }
.guide-intro { max-width:860px; display:grid; gap:24px; margin-bottom:40px; }
.guide-intro h1 { font-family:var(--serif); font-weight:300; font-size:var(--fs-h1); color:var(--primary); }
.guide-page .perennial-explainer-back { position:static; justify-self:start; min-height:44px; padding:8px 0; border:0; border-radius:var(--radius); background:none; box-shadow:none; backdrop-filter:none; color:var(--primary); font:500 var(--fs-small)/1.5 var(--sans); }
.guide-player { position:relative; border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-1); }
.guide-page #explainer-root { position:relative; inset:auto; height:auto; aspect-ratio:16/10; min-height:260px; max-height:800px; width:100%; }
.guide-page [data-om-starter="animations-v2"] > div:last-child { display:flex!important; position:absolute; bottom:0; z-index:5; width:100%!important; max-width:none!important; min-height:56px; background:var(--primary)!important; border-radius:0!important; color:var(--paper)!important; font:400 var(--fs-small)/1.4 var(--sans)!important; }
.guide-page [data-om-starter="animations-v2"] > div:last-child button { min-width:44px; min-height:44px; border-radius:var(--radius)!important; color:var(--paper)!important; }
.guide-page [data-om-starter="animations-v2"] > div:last-child button:hover { background:var(--primary-hover)!important; }
.guide-page .perennial-video-progress { display:none; } /* The visible native timeline already reports progress. */
.guide-page .explainer-fallback { width:100%; margin:32px 0; padding:32px; color:var(--primary); border:0; border-radius:var(--radius); box-shadow:var(--shadow-1); font-family:var(--sans); }
.guide-page .explainer-fallback p { font-size:var(--fs-body); }
.guide-page .explainer-fallback h2 { font-family:var(--serif); font-size:var(--fs-h3); color:var(--primary); }
.embedded-guide .guide-page > :is(header,footer,.closing,.skip-link),.embedded-guide .guide-intro,.embedded-guide .page-next { display:none; }
.embedded-guide .guide-content { width:100%; margin:0; padding:0; }
.embedded-guide .guide-page #explainer-root { height:100vh; }
@media(max-width:767px){.guide-content{width:calc(100% - 40px);padding:32px 0 56px}.guide-page #explainer-root{height:auto}.guide-intro h1{font-size:var(--fs-h2)}}

.guide-page [data-om-starter="animations-v2"] > div:last-child > span { font-size:13px!important; color:var(--paper)!important; }
.embedded-guide .guide-page #explainer-root { height:100vh; min-height:0; max-height:none; aspect-ratio:auto; }
/* Player frame only: the authored scene and its timeline are unchanged. */
.guide-page #explainer-root{min-height:0;max-height:none;aspect-ratio:auto;background:var(--paper)}
.guide-page [data-om-starter="animations-v2"] > div:first-child{background:var(--paper)!important}
.guide-page [data-om-starter="animations-v2"] > div:last-child{position:relative;height:56px;min-height:56px;gap:4px!important;padding:6px!important;box-sizing:border-box}
.guide-page [data-om-starter="animations-v2"] > div:last-child > div{min-width:0}
.guide-page [data-om-exportable-video-with-duration-secs]{transform:scale(var(--guide-fit,1))!important;box-shadow:none!important}
.guide-expand{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;flex-shrink:0}
.guide-expanded{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;z-index:100000;border-radius:0;display:flex;flex-direction:column;background:var(--paper);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box}
.guide-expanded #explainer-root{flex:1;height:auto!important;min-height:0}
.guide-expand-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 12px;color:var(--primary);font:400 var(--fs-small)/1.4 var(--sans);min-height:44px}
.guide-expand-toolbar button{min-width:44px;min-height:44px;border:0;background:none;color:var(--primary);cursor:pointer}
.guide-orientation-hint{display:flex;align-items:center;gap:4px}
@media(orientation:landscape){.guide-orientation-hint{display:none}}
.guide-expand-toolbar [hidden]{display:none}
.guide-expand-toolbar > button:last-child{margin-left:auto}
/* Compact phone transport: one clock, clear separation, and a touchable scrubber. */
.guide-compact-time{display:none}
.guide-expand-toolbar > button:last-child{white-space:nowrap;flex-shrink:0}
.guide-orientation-hint button{text-decoration:underline;white-space:nowrap}
.guide-page .guide-scrubber{height:44px!important;touch-action:none;margin-inline:6px}
.guide-page .guide-scrubber > div:first-child{height:4px!important;background:#8191a2!important}
@media(max-width:479px){
 .guide-page .guide-player:not(.guide-expanded) .guide-original-time{display:none}
 .guide-page .guide-player:not(.guide-expanded) .guide-compact-time{display:block;font:400 11px/1.4 var(--sans)!important;white-space:nowrap;flex-shrink:0;color:var(--paper)}
 .guide-page .guide-player:not(.guide-expanded) .guide-scrubber{min-width:36px;flex:1 1 0!important}
 .guide-page .guide-player:not(.guide-expanded) [data-om-starter="animations-v2"] > div:last-child{gap:2px!important}
}
/* Let the bike's white image background blend into the authored scene. */
.guide-page div:has(> img[src$="/vo2-max-explainer/kickr-bike-final2.png"]){mix-blend-mode:multiply}