:root { --site-header-height:80px; }
html { scroll-padding-top:calc(var(--site-header-height) + 20px); }
.prototype-brand { display:none; }
.stage-controls { top:calc(var(--site-header-height) + 16px); }
.style-controls { top:calc(var(--site-header-height) + 72px); }
.feature-showcase .showcase-bridge { top:calc(var(--site-header-height) + 24px); height:calc(var(--intro-top-space) - var(--site-header-height) - 48px); }
.feature-showcase .showcase-window { top:calc(var(--site-header-height) + 20px); height:calc(100vh - var(--site-header-height) - 100px); }
.page-timeline { position:fixed; z-index:110; left:12px; top:50%; transform:translateY(-50%); padding:8px 3px; border-radius:26px; background:rgb(255 255 255 / 93%); box-shadow:0 4px 20px rgb(19 55 100 / 8%); color:#123764; }
.timeline-links { position:relative; display:flex; flex-direction:column; gap:9px; }
.timeline-links a { position:relative; width:40px; height:40px; display:grid; place-items:center; color:#8097b4; text-decoration:none; border-radius:50%; }
.timeline-marker { position:relative; z-index:1; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#fff; font-size:12px; font-weight:750; transition:transform 240ms cubic-bezier(.22,1,.36,1),color 240ms,background 240ms; }
.timeline-links a:first-of-type .timeline-marker,.timeline-links a:nth-of-type(2) .timeline-marker,.timeline-links a:last-of-type .timeline-marker { font-size:8px; }
.timeline-links a[aria-current="location"] .timeline-marker { color:#fff; background:#146eeb; box-shadow:0 2px 8px rgb(20 110 235 / 16%); }
.timeline-links a:hover .timeline-marker,.timeline-links a:focus-visible .timeline-marker { transform:scale(1.1); color:#146eeb; background:#edf5ff; }
.timeline-links a[aria-current="location"]:hover .timeline-marker { color:#fff; background:#146eeb; }
.timeline-label { position:absolute; left:48px; top:50%; transform:translate(0,-50%); opacity:0; pointer-events:none; white-space:nowrap; padding:10px 14px; background:#fff; border-radius:11px; box-shadow:0 4px 18px rgb(18 55 100 / 9%); color:#123764; font-size:14px; font-weight:650; transition:opacity 180ms,transform 240ms cubic-bezier(.22,1,.36,1); }
.timeline-links a:hover .timeline-label,.timeline-links a:focus-visible .timeline-label { opacity:1; transform:translate(3px,-50%); }
.timeline-track { position:absolute; width:2px; top:20px; bottom:20px; left:19px; overflow:hidden; background:#e4ecf7; }
.timeline-track > span { position:absolute; inset:0; background:#146eeb; transform:scaleY(var(--timeline-progress,0)); transform-origin:top; transition:transform 100ms linear; }
.timeline-toggle { display:none; }
.back-to-top { position:fixed; z-index:111; bottom:max(26px,env(safe-area-inset-bottom)); right:26px; display:grid; place-items:center; width:62px; height:62px; padding:17px; border:0; border-radius:50%; background:#146eeb; color:#fff; box-shadow:0 6px 22px rgb(20 110 235 / 22%); cursor:pointer; transition:transform 240ms cubic-bezier(.22,1,.36,1),background 240ms; }
.back-to-top[hidden] { display:none; }
.back-to-top svg { width:100%; height:100%; }
.back-to-top:hover { transform:translateY(-4px); background:#0e5ed0; }
.back-to-top:active { transform:scale(.94); }
@media(max-width:1100px) {
  .page-timeline { left:8px; }
}
@media(max-width:1199px) {
  :root { --site-header-height:72px; }
}
@media(max-width:900px) {
  :root { --site-header-height:72px; }
  .feature-showcase .showcase-intro { --intro-top-space:max(calc(var(--site-header-height) + 100px),21svh); }
  .page-timeline { top:calc(var(--site-header-height) + 12px); left:auto; right:12px; transform:none; padding:4px; border-radius:23px; }
  .timeline-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:#fff; cursor:pointer; color:#123764; }
  .timeline-toggle span { width:16px; height:2px; background:currentColor; border-radius:2px; }
  .timeline-links { display:none; margin-top:5px; gap:4px; }
  .page-timeline.is-open .timeline-links { display:flex; }
  .timeline-label { left:auto; right:45px; }
  .page-timeline.is-open .timeline-label { opacity:1; }
  .timeline-track { left:19px; }
  .back-to-top { width:52px; height:52px; padding:14px; right:16px; bottom:max(18px,env(safe-area-inset-bottom)); }
  .stage-controls { top:calc(var(--site-header-height) + 16px); left:16px; right:66px; }
  .style-controls { top:calc(var(--site-header-height) + 68px); }
}
@media(max-width:900px) and (max-height:720px) {
  .page-timeline.is-open .timeline-links { gap:3px; }
  .page-timeline .timeline-links a { height:36px; }
  .page-timeline .timeline-label { padding:5px 12px; }
}
/* Short windows keep every destination reachable. Labels move into the rows
   while expanded so the scroll container cannot clip their usual tooltips. */
@media(max-height:620px) {
  .page-timeline .timeline-links { max-height:calc(100vh - 32px); max-height:calc(100svh - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
  .page-timeline .timeline-links a { flex-shrink:0; }
  .page-timeline .timeline-track { display:none; }
}
@media(min-width:901px) and (max-height:620px) {
  .page-timeline .timeline-links { width:48px; }
  .page-timeline:is(:hover,:focus-within) .timeline-links { width:270px; max-width:calc(100vw - 32px); }
  .page-timeline:is(:hover,:focus-within) .timeline-links a { display:flex; width:auto; gap:8px; padding:0 6px; border-radius:11px; }
  .page-timeline:is(:hover,:focus-within) .timeline-links .timeline-label { position:static; transform:none; opacity:1; white-space:normal; padding:0; background:transparent; box-shadow:none; }
}
@media(max-width:900px) and (max-height:620px) {
  .page-timeline.is-open { width:min(330px,calc(100vw - 24px)); border-radius:18px; }
  .page-timeline.is-open .timeline-toggle { margin-left:auto; }
  .page-timeline.is-open .timeline-links { max-height:calc(100vh - var(--site-header-height) - 75px); max-height:calc(100svh - var(--site-header-height) - 75px); }
  .page-timeline.is-open .timeline-links a { display:flex; width:auto; height:auto; min-height:42px; gap:8px; padding:2px 6px; border-radius:11px; }
  .page-timeline.is-open .timeline-links .timeline-label { position:static; transform:none; opacity:1; white-space:normal; padding:0; background:transparent; box-shadow:none; }
}
@media(prefers-reduced-motion:reduce) {
  .timeline-marker,.timeline-label,.timeline-track > span,.back-to-top { transition:none; }
}