@font-face {
  font-family: "Timeline Chicago";
  src: url("assets/fonts/ChicagoFLF.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; color: #292929; background: #fff; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #428edf; outline-offset: 5px; }
[data-pointer-focus]:focus-visible { outline: none; }
.app { min-height: 100svh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: flex-end; padding: max(24px, env(safe-area-inset-top)) 32px 24px; }
.play { width: 36px; height: 36px; padding: 0; border: 1px solid #e9e9eb; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.play:hover { background: #f7f7f8; }
.play svg { width: 11px; height: 11px; fill: #6b6b72; }
.play .pause-icon { display: none; }
.play[aria-pressed="true"] .play-icon { display: none; }
.play[aria-pressed="true"] .pause-icon { display: block; }
main { flex: 1; min-height: 510px; display: grid; place-items: center; padding: 0 24px max(160px, env(safe-area-inset-bottom)); }
.experience { width: 100%; display: flex; align-items: center; flex-direction: column; transform: translateY(-12px); }
.scene-frame { width: min(760px, 100%); height: 276px; flex: 0 0 auto; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.scene-frame.dragging, .ruler.dragging { cursor: grabbing; }
.button-stack { position: relative; width: 264px; height: 58px; }
.button-faces { position: absolute; inset: 0; pointer-events: none; }
.button-faces .mac-button { position: absolute; inset: 0; pointer-events: none; }
.button-faces .mac-button[hidden] { display: none; }
.button-visual { position: absolute; inset: 0; pointer-events: none; transition: transform 100ms ease-out; }
.button-visual.is-pressed { transform: translateY(1px) scale(.99); }
.button-shape { position: absolute; inset: 0; width: 264px; height: 58px; overflow: visible; }
.morph-label { position: absolute; inset: 0; width: 264px; height: 58px; isolation: isolate; font-size: 29px; line-height: 40px; font-weight: 400; font-synthesis: none; font-variant-numeric: lining-nums tabular-nums; }
.period-font { position: absolute; inset: 0; display: grid; place-items: center; mix-blend-mode: plus-lighter; font-kerning: none; }
.button-year { white-space: nowrap; text-align: center; --torph-fade: .1em; }
.button-year [torph-slot] { width: var(--digit-width); text-align: center; }
.specimen-hit { position: absolute; inset: -18px -10px; border: 0; border-radius: 12px; padding: 0; background: transparent; touch-action: manipulation; }
.timeline { width: min(560px, 100%); position: relative; margin-top: 10px; }
.ruler { position: relative; width: 100%; height: 84px; touch-action: pan-y; cursor: grab; border-radius: 12px; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.tick-viewport { position: absolute; inset: 10px 0 12px; pointer-events: none; }
.tick { position: absolute; bottom: 0; width: 1px; height: 60px; background: #a9a9af; border-radius: 1px; transform-origin: bottom center; }
.tick.major { width: 1.6px; }
.playhead { position: absolute; width: 2px; height: 62px; left: 0; bottom: 12px; background: #242426; border-radius: 1px; pointer-events: none; }
.style-stops { display: grid; grid-template-columns: repeat(var(--era-count, 11), minmax(0, 1fr)); margin: 6px 0 0; }
.style-stop { min-width: 0; min-height: 44px; padding: 10px 2px; border: 0; border-radius: 5px; background: transparent; color: #73737b; font-size: 11px; font-variant-numeric: tabular-nums; }
.style-stop:hover { color: #292929; background: #f6f6f7; }
.style-stop[aria-pressed="true"] { color: #202022; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-script { text-align: center; font-size: 14px; }
@media (max-width: 640px) {
  .topbar { padding: max(20px, env(safe-area-inset-top)) 20px 20px; }
  .play { width: 44px; height: 44px; }
  main { min-height: 480px; padding: 0 24px max(104px, env(safe-area-inset-bottom)); }
  .experience { transform: none; }
  .scene-frame { height: 230px; }
  .timeline { width: min(420px, 100%); }
  .style-stops { row-gap: 0; }
  .style-stop { position: relative; left: 50%; transform: translateX(-50%); width: min(44px, calc(200% - 4px)); font-size: 10px; }
  .style-stop:nth-child(odd) { grid-row: 1; }
  .style-stop:nth-child(even) { grid-row: 2; }
}
@media (max-height: 650px) and (min-width: 641px) {
  .topbar { padding-block: 16px; }
  main { min-height: 360px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .experience { transform: none; }
  .scene-frame { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .button-visual { transition: none; }
}