/* Shared navigation, cinematic continuity, and the Close-up scene's motion. */
:root {--motion-ease:cubic-bezier(.16,1,.3,1)}
html {scroll-behavior:smooth;scroll-padding-top:30px}
.title-line {display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.title-line>span {display:block}
.header-links {display:flex;align-items:center;gap:22px}
.header-links>a:not(.install) {font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.header-links>a:not(.install):hover {text-decoration:underline}
.motion-toggle {display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:1px solid #d9d6d1;border-radius:999px;min-width:44px;min-height:44px;padding:0 14px;color:var(--muted);font-size:13px}
.motion-toggle[hidden] {display:none}
.motion-toggle:disabled {opacity:.75}
.motion-toggle:not(:disabled):hover {background:#fbf9f5;color:var(--ink)}
[data-motion-icon] {display:block;width:16px;height:16px}
[data-motion-icon] svg {display:block;width:16px;height:16px}
[data-motion-icon] .motion-icon-play,.motion-toggle[aria-pressed="true"] .motion-icon-pause {display:none}
.motion-toggle[aria-pressed="true"] .motion-icon-play {display:block}
.install {transition:transform 180ms var(--motion-ease),background 150ms}
.install:hover {transform:translateY(-2px)}
.install:active,.motion-toggle:active {transform:scale(.97)}
.demo-player {scroll-margin-top:30px}
.hero-stage .peek {transform-origin:70% 90%;animation:milo-sway 6s ease-in-out infinite;animation-play-state:paused}
.hero-stage .sample-callout {animation:entry-breathe 6s ease-in-out infinite;animation-play-state:paused}
html[data-motion="on"] .hero-stage.scene-running .peek,
html[data-motion="on"] .hero-stage.scene-running .sample-callout {animation-play-state:running}
.demo-player[data-state="playing"] .sample-callout {animation-play-state:paused!important}
.demo-chapters {list-style:none;padding:0;margin:24px 20px 12px;display:flex;gap:12px;color:var(--muted);font-size:12px;line-height:1.5}
.demo-chapters li {flex:1;border-top:2px solid #e4dcd6;padding-top:10px;transition:color 250ms,border-color 250ms;position:relative}
.demo-chapters li[aria-current="step"] {color:var(--demo-ink,#4514c1);border-color:var(--purple);font-weight:600}
.demo-chapters li[aria-current="step"]::before {content:"";position:absolute;left:0;top:-4px;width:6px;height:6px;border-radius:50%;background:var(--purple)}
.detail-window img,.journal-window img {transform:translateY(var(--travel,0px));transition:transform 140ms linear}
.questions summary {display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none}
.questions summary::-webkit-details-marker {display:none}
.questions summary::after {content:"+";font-size:28px;line-height:1;font-weight:400;transition:transform 250ms var(--motion-ease)}
.questions details[open] summary::after {transform:rotate(45deg)}
.questions details[open] p {animation:answer-in 300ms var(--motion-ease)}
.footer nav {flex-wrap:wrap}
@keyframes milo-sway {0%,100% {transform:translateY(0) rotate(-2deg)}50% {transform:translateY(-9px) rotate(2deg)}}
@keyframes entry-breathe {0%,100% {transform:translateY(0)}50% {transform:translateY(-5px)}}
@keyframes answer-in {from {opacity:.4;transform:translateY(-6px)}to {opacity:1;transform:translateY(0)}}
@media(max-width:991px) {.nav-demo {display:none!important}.header-links {gap:14px}.motion-label {display:none}.motion-toggle {width:44px;padding:0}.header-links>a:not(.install) {font-size:13px}}
@media(max-width:360px) {.header-links {gap:8px}.header-install {padding:0 14px}.nav-support {display:none!important}.demo-chapters {margin-inline:16px;gap:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important;transition:none!important}
  .detail-window img,.journal-window img {transform:none}
}
html[data-motion="off"] .peek,html[data-motion="off"] .sample-callout {animation-play-state:paused!important}
html[data-motion="off"] .detail-window img,html[data-motion="off"] .journal-window img {transform:none;transition:none}
html[data-motion="off"] .questions details[open] p {animation:none}
/* The stage's entrance may tilt; contain its horizontal ink without clipping Milo above it. */
.hero {overflow-x:clip;overflow-y:visible}