.floating-timeline{
 position:fixed;
 z-index:29;
 left:50%;
 bottom:var(--floating-timeline-bottom,calc(18px + env(safe-area-inset-bottom,0px)));
 transform:translateX(-50%);
 display:grid;
 grid-template-columns:80px minmax(0,1fr) 38px;
 align-items:center;
 gap:18px;
 width:min(620px,calc(100% - 36px));
 padding:12px 18px 10px;
 border:1px solid var(--rule);
 background:var(--paper);
 box-shadow:0 5px 25px #29272420;
 color:var(--ink);
}
.floating-timeline-year{min-width:0;line-height:1.3}
.floating-timeline-year>span{display:block;font-size:10px;color:var(--muted);margin-bottom:3px}
.floating-timeline-year output{display:block;font:29px/1.1 Georgia,serif;font-variant-numeric:tabular-nums}
.floating-timeline-track{min-width:0}
.floating-timeline-track input[type=range]{display:block;height:24px}
.floating-timeline-ticks{display:flex;justify-content:space-between;gap:4px}
.floating-timeline-ticks button{padding:2px 0;min-height:22px;font:10px/1.2 Georgia,serif;color:var(--muted)}
.floating-timeline-play{display:block;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;padding:0;font-size:12px;line-height:1;flex-shrink:0}
.floating-timeline-ticks button:hover,.floating-timeline-play:hover{color:var(--coral)}
@media(max-width:650px){
 .floating-timeline{width:calc(100% - 24px);grid-template-columns:64px minmax(0,1fr) 36px;gap:10px;padding:9px 12px 7px}
 .floating-timeline-year>span{font-size:9px}
 .floating-timeline-year output{font-size:26px}
 .floating-timeline-track input[type=range]{height:28px}
 .floating-timeline-ticks button{min-height:24px;font-size:9px;padding:3px 0}
 .floating-timeline-play{width:36px;height:36px}
}
@media print{.floating-timeline{display:none!important}}

/* Discoverable playback without adding another row to the opening screen. */
.play-control{display:flex;align-items:center;gap:8px;flex:none}
.play-control .play-button,.floating-timeline-play{background:var(--coral);color:#fff;border-color:var(--coral)}
.play-control .play-button{width:34px;height:34px;font-size:12px}
.play-control .play-button:hover,.floating-timeline-play:hover{background:#8d3027;color:#fff;border-color:#8d3027}
.play-control .play-button:focus-visible,.floating-timeline-play:focus-visible{outline:2px solid var(--coral);outline-offset:4px}
.play-control .play-button[aria-pressed=true],.floating-timeline-play[aria-pressed=true]{background:var(--ink);border-color:var(--ink)}
.play-hint{font-size:10px;line-height:1.5;color:var(--coral);max-width:70px}
.play-button[data-invitation=true]{animation:play-invitation 2.4s ease-out 4}
@keyframes play-invitation{0%,100%{box-shadow:0 0 0 0 #a13c2f00}40%{box-shadow:0 0 0 6px #a13c2f26}75%{box-shadow:0 0 0 9px #a13c2f00}}
@media(max-width:650px){.timeline{gap:9px}.play-control{gap:6px}.play-control .play-button{width:32px;height:32px}.play-hint{font-size:9px;max-width:38px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){.play-button[data-invitation=true]{animation:none}}