/* Time machine: scrubber, rebuilt numbers and an optional CSS 3D archive shelf. */
.tm-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.tm-stage { display: grid; gap: 18px; overflow: hidden; position: relative; }
.tm-shelf { display: none; height: 120px; position: relative; perspective: 900px; transform-style: preserve-3d; margin: 4px 0 -6px; }
.tm-room-on .tm-shelf { display: block; }
.tm-plaque { --d: calc(var(--i) - var(--at, 0)); position: absolute; left: 50%; top: 10px; width: 104px; height: 92px; margin-left: -52px; display: grid; align-content: center; justify-items: center; gap: 4px; border-radius: 14px; border: 1px solid #36433c; background: linear-gradient(160deg, #1d2823, #0f1512); box-shadow: 0 16px 30px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(241, 240, 230, .08); transform: translateX(calc(var(--d) * 92px)) translateZ(calc(-1 * max(var(--d), -1 * var(--d)) * 60px)) rotateY(calc(var(--d) * -24deg)); opacity: calc(1 - max(var(--d), -1 * var(--d)) * .16); transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, border-color .3s ease; }
.tm-plaque small { color: var(--muted); font-size: .7rem; letter-spacing: .06em; }
.tm-plaque b { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tm-plaque.is-current { border-color: #d7fa81; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(215, 250, 129, .4); }
.tm-date { display: grid; gap: 4px; }
.tm-date strong { font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -.02em; }
.tm-flash strong { animation: tm-flash .5s ease both; }
@keyframes tm-flash { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.tm-controls { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.tm-play { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d7fa81; background: rgba(215, 250, 129, .1); color: #d7fa81; font-size: 1rem; cursor: pointer; }
.tm-play:focus-visible { outline: 2px solid #d7fa81; outline-offset: 3px; }
.tm-controls input[type=range] { width: 100%; accent-color: #d7fa81; min-height: 32px; }
.tm-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: .76rem; margin-top: -10px; padding-left: 58px; }
.tm-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tm-stat { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, .02); }
.tm-stat span { color: var(--muted); font-size: .72rem; }
.tm-stat b { font-size: 1.4rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tm-session { display: grid; gap: 8px; }
.tm-session-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-session-strip .chip { cursor: pointer; }
.tm-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.tm-contributors ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tm-contributors li { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; gap: 10px; align-items: center; font-size: .85rem; }
.tm-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-bar { height: 8px; border-radius: 6px; background: linear-gradient(90deg, #d7fa81, #88c6ac); transition: width .55s cubic-bezier(.2, .8, .2, 1); min-width: 2px; }
.tm-contributors b { font-variant-numeric: tabular-nums; font-size: .82rem; }
.tm-milestones ul, .tm-evidence ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 5px; font-size: .84rem; color: var(--ink-2); }
.tm-milestones li.tm-new .text-link { color: #d7fa81; }
.tm-evidence { border-top: 1px solid var(--border); padding-top: 14px; }
@media (max-width: 760px) { .tm-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tm-columns { grid-template-columns: 1fr; } .tm-plaque { width: 84px; margin-left: -42px; } }
@media (prefers-reduced-motion: reduce) { .tm-plaque, .tm-bar { transition: none; } .tm-flash strong { animation: none; } }