:root {
  --bg: #030615;
  --panel-edge: #25283a;
  --text: #f1f1f6;
  --muted: #7f8398;
  --red: #e34f5f;
  --red-bright: #ff6978;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 16% 32%, rgba(51, 59, 105, .11), transparent 24rem),
    radial-gradient(circle at 84% 74%, rgba(133, 39, 67, .07), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}
button { font: inherit; }
.page-shell { min-height: 100vh; display: grid; place-items: center; padding: 7vh 20px; }
.prototype { width: min(100%, 990px); }
.eyebrow { color: #8d91a8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 650; letter-spacing: .17em; margin: 0 0 16px 3px; }
.eyebrow span { color: #a2a6bb; font-size: 16px; margin-right: 8px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 0 3px 20px; }
h1 { font-size: clamp(20px, 2.3vw, 29px); font-weight: 620; letter-spacing: -.025em; margin: 0 0 7px; }
h1 span { color: #8a8da0; font-weight: 500; }
.section-heading p { color: var(--muted); font-size: 14px; margin: 0; }
.legend { display: flex; align-items: center; gap: 8px; color: #8c8fa4; font: 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; white-space: nowrap; }
.legend i { display: block; width: 2px; height: 17px; background: var(--red); box-shadow: 0 0 8px rgba(227, 79, 95, .5); }
.timeline-card { overflow: hidden; background: linear-gradient(180deg, rgba(14, 17, 33, .98), rgba(8, 11, 25, .98)); border: 1px solid var(--panel-edge); border-radius: 13px; box-shadow: 0 18px 70px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.025); }
.timeline-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 14px 4px; }
.range-title { display: flex; align-items: baseline; gap: 10px; }
.range-title strong { font-size: 15px; font-weight: 600; }
.range-title span { color: var(--muted); font-size: 12px; }
.controls { display: flex; align-items: center; gap: 4px; }
.controls button { height: 29px; border: 1px solid transparent; border-radius: 6px; padding: 0 9px; background: transparent; color: #8e92a8; cursor: pointer; font-size: 11px; }
.controls button:hover, .controls button:focus-visible { color: #fff; background: #171a2a; border-color: #2a2e41; outline: none; }
.controls .icon-button { width: 29px; padding: 0; font-size: 16px; }
.timeline-stage { position: relative; height: 158px; margin: 0 14px 10px; overflow: hidden; border-radius: 8px; background: linear-gradient(180deg, rgba(20, 23, 41, .46), rgba(9, 12, 27, .15)), repeating-linear-gradient(90deg, transparent 0, transparent 69px, rgba(109,114,141,.028) 70px); cursor: grab; touch-action: none; user-select: none; }
.timeline-stage.is-dragging { cursor: grabbing; }
.plot-area { position: absolute; inset: 0 10px; }
.axis-line { position: absolute; left: 0; right: 0; top: 105px; height: 1px; background: #85899c; box-shadow: 0 1px 0 rgba(0,0,0,.7); }
.month-boundary { position: absolute; top: 14px; bottom: 3px; width: 1px; background: linear-gradient(180deg, transparent, rgba(173,178,200,.17) 32%, rgba(173,178,200,.3) 66%, transparent); pointer-events: none; }
.month-boundary span { position: absolute; top: 0; left: 7px; max-width: 90px; overflow: hidden; color: #a2a6b8; font-size: 10px; white-space: nowrap; }
.today-marker { position: absolute; z-index: 5; top: 14px; bottom: 3px; width: 1px; margin-left: -.5px; pointer-events: none; }
.today-marker::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(226,229,242,.82) 0 4px, transparent 4px 8px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent); filter: drop-shadow(0 0 3px rgba(208,213,235,.24)); }
.today-marker span { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); padding: 2px 5px; border: 1px solid rgba(165,171,197,.25); border-radius: 4px; background: rgba(16,19,34,.88); color: #c8ccdb; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; white-space: nowrap; }
.reset-marker { position: absolute; z-index: 4; top: 67px; width: 2px; height: 39px; margin-left: -1px; border-radius: 1px 1px 0 0; background: linear-gradient(180deg, var(--red-bright), #b83242); box-shadow: 0 0 7px rgba(227, 79, 95, .4); pointer-events: none; }
.interval-segment { position: absolute; top: 82px; z-index: 3; height: 18px; border-block: 1px solid rgba(221, 119, 72, .24); background: linear-gradient(90deg, rgba(166, 69, 48, .12), rgba(211, 109, 59, .22), rgba(166, 69, 48, .12)); color: #c8b3aa; font: 9px/16px ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; pointer-events: none; }
.interval-segment span { display: inline-block; min-width: 31px; padding: 0 4px; background: rgba(31, 20, 26, .7); }
.tick { position: absolute; top: 99px; width: 1px; height: 7px; background: #606477; pointer-events: none; }
.tick.major { top: 94px; height: 12px; background: #9b9eae; }
.tick span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: #777b90; font: 9px ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.tick .time-label { top: 20px; color: #8d91a5; }
.tick .time-label small { display: block; margin-top: 4px; color: #5f6378; font: 8px ui-monospace, SFMono-Regular, Consolas, monospace; }
@media (max-width: 640px) {
  .page-shell { padding: 36px 12px; align-items: start; }
  .section-heading { align-items: start; }
  .legend { display: none; }
  .timeline-toolbar { align-items: center; flex-direction: row; gap: 8px; padding: 10px 8px 4px; }
  .range-title { display: flex; flex-wrap: wrap; gap: 3px 8px; }
  .range-title span { white-space: nowrap; }
  .controls { justify-content: flex-end; }
  .timeline-stage { height: 158px; margin: 0 8px 8px; }
  .plot-area { inset-inline: 7px; }
  .controls button:first-child { display: none; }
  .tick span { top: 18px; font-size: 8px; }
  .tick .time-label { top: 17px; }
}