:root {
  --paper:#fff;
  --cream:#fff;
  --ink:#171717;
  --muted:#555;
  --line:#b6b6b6;
  --red:#c5392f;
  --orange:#c45712;
  --yellow:#f3c641;
}
html,body { overflow-x:hidden; }
body {
  background-color:#fff;
  background-image:linear-gradient(rgba(23,23,23,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,23,.055) 1px,transparent 1px);
  background-size:24px 24px;
}
body::before { display:none; }
.site-head,.timeline-head { background:rgba(255,255,255,.96); }
.asked { color:#1755bd; }
.intro h1 .answered { color:#1755bd; font-size:.56em; font-style:italic; font-weight:400; letter-spacing:-.035em; }
.intro h1 { line-height:.92; }
.intro::after { color:#fafafa; -webkit-text-stroke:1px #dedede; }
.button--secondary { background:#fff; }
a[download] { background:#176b3a; color:#fff; border-color:#104c2a; box-shadow:3px 3px 0 #104c2a; }
a[download]:hover,a[download]:focus-visible { box-shadow:1px 1px 0 #104c2a; }
.timeline-head { grid-template-columns:1fr auto auto; }
.timeline-layout { grid-template-columns:230px minmax(0,1fr); }
.filters { background:#fff; }
.filter-help { margin:0; padding:10px; border-bottom:1px solid #171717; color:#444; font:600 .68rem/1.35 var(--mono); }
.filter-option { opacity:.46; filter:grayscale(1); }
.filter-option[aria-pressed="true"] { opacity:1; filter:none; box-shadow:inset 5px 0 0 var(--filter-color); font-weight:800; }
.filter-dot { background:var(--filter-color); }
.timeline-canvas { background-color:#fff; }
.timeline-canvas::before { background:#171717; }
.ruler-gap { position:absolute; left:0; width:100%; color:#555; font-size:.62rem; line-height:1.15; }
.event-card { background:#fff; }
.event-card--ongoing { padding-bottom:25px; }
.event-status { position:absolute; right:7px; bottom:6px; padding:2px 5px; border:1px solid var(--event-color); color:var(--event-color); background:#fff; font:800 .55rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.event-card:hover,.event-card:focus-visible { background:color-mix(in srgb,var(--event-color) 18%,white); border-color:var(--event-color); outline:3px solid #fff; outline-offset:-6px; }
.event-card:hover .event-tags,.event-card:focus-visible .event-tags { font-weight:900; color:var(--event-color); }
.detail-dialog { background:#fff; border-color:var(--dialog-color,#171717); box-shadow:10px 10px 0 color-mix(in srgb,var(--dialog-color,#171717) 65%,#171717); }
.detail-dialog::backdrop { background:rgba(12,18,25,.76); }
.dialog-close { background:#fff; border-color:var(--dialog-color,#171717); color:var(--dialog-color,#171717); }
.dialog-meta,.stat-grid strong { color:var(--dialog-color,#171717); }
.media-reel,.project-video,.demo-slot { margin:28px 0 0; border:2px solid #171717; background:#fff; }
.media-stage { position:relative; min-height:clamp(240px,50vw,560px); overflow:hidden; background:#f2f2f2; }
.media-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .28s ease; }
.media-stage img.is-active { opacity:1; }
.media-reel figcaption,.project-video figcaption { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 11px; font-size:.72rem; border-top:1px solid #171717; }
.media-controls { display:flex; gap:5px; }
.media-controls button,.demo-head button { min-height:34px; padding:5px 9px; border:1px solid #171717; background:#fff; cursor:pointer; }
.media-controls button:hover,.media-controls button:focus-visible,.demo-head button[aria-pressed="true"] { background:#171717; color:#fff; }
.phone-demo { width:min(410px,100%); margin-inline:auto; padding:12px; border-radius:40px; background:#171717; box-shadow:0 0 0 4px #888; }
.phone-demo .media-stage { aspect-ratio:9/19.5; min-height:0; border-radius:28px; background:#fff; }
.phone-demo .media-stage img { object-fit:cover; object-position:center; }
.phone-demo figcaption { color:#fff; border-top:0; }
.demo-slot { min-height:240px; display:grid; place-items:center; padding:24px; background:repeating-linear-gradient(135deg,#fff,#fff 12px,#f1f1f1 12px,#f1f1f1 24px); }
.demo-slot--live { display:block; padding:0; background:#fff; }
.demo-head { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:10px; border-bottom:1px solid #171717; }
.demo-head div { display:flex; gap:7px; flex-wrap:wrap; }
.demo-slot iframe { display:block; width:100%; height:min(68vh,660px); border:0; background:#fff; }
.project-video video { display:block; width:100%; max-height:70vh; background:#111; }
.dialog-actions { position:sticky; bottom:0; padding:14px 0; background:linear-gradient(transparent,#fff 28%); }
.about-grid p { color:#292929; }
footer { background:#171717; }
@media (max-width:740px) {
  .site-head nav>a:not(.button)[aria-current="page"] { display:none; }
  .site-head nav .button { display:none; }
  .site-head nav { gap:14px; }
  .intro { width:100%; min-width:0; }
  .intro .kicker { max-width:100%; overflow-wrap:anywhere; font-size:.62rem; }
  .intro h1 { max-width:100%; font-size:2.05rem; line-height:.98; letter-spacing:-.045em; }
  .intro h1 span { display:block; max-width:100%; }
  .intro-copy { max-width:100%; overflow-wrap:anywhere; }
  .system-note { white-space:normal; }
  .timeline-head { grid-template-columns:1fr auto; }
  .timeline-layout { display:block; }
  .demo-head { align-items:flex-start; flex-direction:column; }
  .demo-slot iframe { height:62vh; }
  .media-stage { min-height:260px; }
}
@media (prefers-reduced-motion:reduce) {
  .media-stage img { transition:none; }
}