:root{
  --bg:#0b0b0d;
  --bg-2:#111114;
  --panel:#151518;
  --panel-2:#1a1b20;
  --ink:#f3f3f3;
  --muted:#c8c8c8;
  --muted-2:#9ea0a8;
  --accent:#e51016;
  --accent-2:#b40d12;
  --accent-soft:rgba(229,16,22,.18);
  --ring:#2b2b2f;
  --ring-strong:#3a3d45;
  --shadow:0 18px 40px rgba(0,0,0,.34);
  --radius:18px;
  --max:1160px;
}

@font-face{
  font-family:"ReLiANT";
  src:url("assets/fonts/ReLiANT.otf") format("opentype");
  font-display:swap;
}

*{box-sizing:border-box}
html{
  color-scheme:dark;
  scroll-behavior:smooth;
  background:var(--bg);
}

html,body{
  max-width:100%;
  overflow-x:hidden;
  /* Keep horizontal bounce/chain contained without disrupting native vertical trackpad scroll. */
  overscroll-behavior-x: contain;
}

body{
  margin:0;
  background:
    radial-gradient(1100px 760px at 14% 8%,
      rgba(229,16,22,.92) 0%,
      rgba(229,16,22,.78) 22%,
      rgba(180,13,18,.28) 38%,
      rgba(11,11,13,.02) 58%),
    radial-gradient(900px 620px at 82% 18%,
      rgba(229,16,22,.18) 0%,
      rgba(229,16,22,.08) 28%,
      rgba(11,11,13,0) 60%),
    linear-gradient(180deg, rgba(17,17,20,.24), rgba(11,11,13,0)),
    var(--bg);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
  background-size:140% 140%, 120% 120%, 100% 100%, auto;
  background-position:10% 8%, 85% 12%, 50% 0%, 0 0;
  color:var(--ink);
  font-family:"Avenir Next","Segoe UI","Trebuchet MS",Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.65;
  letter-spacing:.01em;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  animation:ambient-red-drift 18s ease-in-out infinite alternate;
}

main{
  font-family:"Avenir Next","Segoe UI","Trebuchet MS",Roboto,Ubuntu,Arial,sans-serif;
  text-align:center;
}

img,svg,video{max-width:100%;height:auto;display:block}

::selection{
  background:rgba(229,16,22,.28);
  color:#fff;
}

.container{width:min(100%,var(--max));margin-inline:auto;padding:0 1.25rem}
.section{padding:4.5rem 0}
.muted{color:var(--muted)}
.bullets{padding-left:1.25rem}
.bullets li + li{margin-top:.55rem}

h1,h2,h3{
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0 0 .85rem;
  font-family:"Avenir Next","Segoe UI","Trebuchet MS",Roboto,Ubuntu,Arial,sans-serif;
}

.hero-title{
  font-family:"ReLiANT","Avenir Next","Segoe UI","Trebuchet MS",sans-serif;
}

h1{
  font-size:clamp(2.25rem,5vw,3.85rem);
  margin-bottom:1rem;
}

h2{
  font-size:clamp(1.5rem,3vw,2.2rem);
  margin-top:2.75rem;
}

h3{
  font-size:1.15rem;
}

p{
  margin:0 0 1rem;
  color:#dddddf;
  overflow-wrap:anywhere;
}

main p,
main li,
main h1,
main h2,
main h3{
  max-width:none;
}

a{
  color:#ff5a5f;
  text-decoration:none;
  text-underline-offset:3px;
}

a:hover{opacity:1;text-decoration:underline}

:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
}

/* prevent underline on nav links & buttons */
.nav a:hover,
.btn:hover,
.btn:focus-visible{ text-decoration:none }

/* ===== HEADER (GRID LAYOUT): left logo + right nav ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(10,10,13,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.02);

  display:grid;
  grid-template-columns:max-content 1fr;
  align-items:center;
  gap:1rem;
  padding:.85rem clamp(1rem, 4vw, 1.35rem);
  padding-top: calc(.75rem + env(safe-area-inset-top)); /* extra comfy under iOS notch */
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

/* Logo */
.brand{
  position:static;
  transform:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; box-shadow:none; padding:0; border-radius:0;
  transition:transform .18s ease, opacity .18s ease;
}
.brand:hover{transform:translateY(-1px)}
.brand img{
  height:46px;
  width:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));
}

/* Nav */
.nav{
  display:flex; gap:.65rem; flex-wrap:wrap; justify-content:center; width:100%;
  min-width:0;
  align-items:center;
}

/* Mobile header behavior */
@media (max-width:560px){
  .brand img{ height:36px }
  .site-header{ gap:.65rem; padding:.72rem clamp(.7rem, 4vw, 1rem) }
  .nav{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
    padding-bottom:.25rem;
  }
  .nav::-webkit-scrollbar{display:none}
}

/* Nav pills */
.nav a{
  --btn-bg: rgba(255,255,255,.035);
  --btn-border: rgba(255,255,255,.08);
  --btn-shadow: 0 10px 22px rgba(0,0,0,.24);
  display:inline-block;
  padding:.52rem .92rem;
  border-radius:999px;
  background:linear-gradient(180deg, var(--btn-bg), rgba(255,255,255,.01));
  border:1px solid var(--btn-border);
  box-shadow: var(--btn-shadow), inset 0 0 0 1px rgba(255,255,255,.025);
  color:#f4d7d7;
  font-size:.95rem;
  font-weight:600;
  white-space:nowrap;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease, color .2s ease;
}
.nav a:hover,
.nav a:focus-visible{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(229,16,22,.09));
  border-color:rgba(255,255,255,.18);
  color:#fff;
  outline:none;
  transform:translateY(-1px);
}
.nav a:active{ transform:translateY(1px) }
.nav a[aria-current="page"]{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border-color:transparent;
  box-shadow:0 14px 28px rgba(229,16,22,.3), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* ===== HERO ===== */
.hero{
  padding:6rem 0 3rem;
  position:relative;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:160px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.025));
  pointer-events:none;
}

.hero > .container{
  position:relative;
  z-index:1;
}

.hero-title{font-size:clamp(2.6rem,8vw,5.25rem);margin:0 0 .35rem;letter-spacing:.02em}
.hero-sub{
  margin:.25rem 0 1rem;
  font-size:clamp(1.15rem,2.5vw,1.5rem);
  color:#fff;
  font-weight:700;
}
.hero-tag{
  color:#d0d1d6;
  font-size:1.08rem;
}
.hero-cta{
  display:flex;
  gap:.85rem;
  margin:1.75rem 0 2.4rem;
  flex-wrap:wrap;
  justify-content:center;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.82rem 1.15rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  color:var(--ink);
  font-weight:700;
  letter-spacing:.01em;
  transition:background .2s ease, transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover,.btn:focus-visible{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border-color:rgba(255,255,255,.2);
  box-shadow:0 14px 26px rgba(0,0,0,.25);
}
.btn:active{ transform:translateY(1px) }
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 16px 30px rgba(229,16,22,.28);
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:linear-gradient(90deg,#ff3a3f,#c80f14);
}
.btn-outline{
  background:rgba(255,255,255,.02);
}

/* ===== CARDS ===== */
.cards{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:var(--shadow);
  min-width:0;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.card:hover,
.member:hover,
.figure:hover,
.timeline:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 22px 42px rgba(0,0,0,.38);
}
.card-spot{
  height:120px;border-radius:12px;
  background:repeating-linear-gradient(45deg,#101014,#101014 10px,#0e0e11 10px,#0e0e11 20px);
  border:1px dashed #2a2a2e;margin-bottom:.75rem
}

.card-img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:0;
  margin-bottom:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.home .cards{
  align-items:start;
}

.card{
  text-align:center;
}

.home .card-img{
  width:auto;
  max-width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border:none;
  background:transparent;
  box-shadow:none;
}

/* ===== SPLIT / FIGURE ===== */
.split{
  display:grid;
  gap:2.25rem;
  grid-template-columns:1.15fr .85fr;
  align-items:start;
}

.home .split{
  text-align:center;
}

.home .split > div{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.bullets{
  list-style-position:inside;
  padding-left:0;
}
.figure{
  margin:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;
  padding:.7rem;
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.figure img,
.figure video{
  width:100%;
  height:auto;
  border-radius:0;
}
.figure figcaption{
  padding:.85rem .35rem .2rem;
  color:var(--muted-2);
  font-size:.95rem;
}

/* ===== TEAM GRID ===== */
.team-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.member{
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1.25rem;
  min-width:0;
  box-shadow:var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.member img{
  width:min(200px, 70vw);
  height:min(200px, 70vw);
  object-fit:cover;border-radius:0;
  border:2px solid rgba(255,255,255,.12);background:#0f0f12;
  display:block; margin-inline:auto; /* center the headshot */
  box-shadow:0 14px 26px rgba(0,0,0,.3);
}
.role{
  color:var(--muted);
  margin:.35rem 0 .65rem;
  font-weight:600;
  min-height:2.8em;
}

/* Social icon row under each member */
.socials{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;   /* center the icons in the card */
  margin:4px 0 10px;
}

/* Icon links */
.icon{
  display:inline-flex;
  width:34px; height:34px;
  border-radius:50%;
  align-items:center; justify-content:center;
  text-decoration:none;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition: transform 120ms ease, opacity 120ms ease, border-color 120ms ease, background 120ms ease;
}
.icon svg{ width:18px; height:18px; display:block }

/* Brand fills */
.icon.linkedin svg path{ fill:#0A66C2 }   /* LinkedIn */
.icon.github   svg path{ fill:#f3f3f3 }   /* GitHub on dark bg */

/* Hover/focus feedback */
.icon:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15);
}
.icon:active{ transform:translateY(0) }
.icon:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* keep buttons centered inside cards */
.member .btn{ display:inline-block }

/* ===== FOOTER ===== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:2.5rem 1rem;
  color:var(--muted);
  text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.02));
}

@keyframes ambient-red-drift{
  0%{
    background-position:10% 8%, 85% 12%, 50% 0%, 0 0;
  }
  50%{
    background-position:18% 16%, 76% 24%, 50% 0%, 0 0;
  }
  100%{
    background-position:4% 22%, 90% 6%, 50% 0%, 0 0;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .section{padding:4rem 0}
}

@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .demo-grid,
  .demo-results{grid-template-columns:1fr}
}

@media (max-width:740px){
  .hero{padding:4rem 0 2rem}
  .hero-title{font-size:clamp(1.8rem,7.2vw,2.4rem)}
  .hero-sub{font-size:1rem}
  .hero-tag{font-size:1rem}
  .cards{grid-template-columns:1fr}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member{padding:.85rem}
  .member img{
    width:min(170px, 60vw);
    height:min(170px, 60vw);
  }
}

@media (max-width:520px){
  .section{padding:3rem 0}
  .team-grid{grid-template-columns:1fr}
  .container{padding:0 1rem}
  .site-header{
    grid-template-columns:1fr;
    justify-items:center;
    gap:.55rem;
    padding:.7rem .8rem;
  }
  .nav{
    width:100%;
    justify-content:flex-start;
    padding-bottom:.15rem;
  }
  .nav a{
    font-size:.88rem;
    padding:.48rem .78rem;
  }
  h1{font-size:clamp(1.9rem,9vw,2.5rem)}
  h2{font-size:clamp(1.3rem,6vw,1.75rem)}
  p, li{font-size:.98rem}
  .hero-cta{
    flex-direction:column;
    align-items:stretch;
    gap:.7rem;
  }
  .hero-cta .btn{
    width:100%;
  }
  .card,
  .member,
  .timeline{
    padding:1rem;
  }
  .split{
    gap:1.5rem;
  }
  .demo-panel{
    padding:1rem;
  }
  .demo-panel-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .demo-head-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .demo-head-actions .btn{
    width:100%;
  }
  .demo-actions{
    flex-direction:column;
  }
  .demo-actions .btn{
    width:100%;
  }
  .demo-stats{
    grid-template-columns:1fr;
  }
  .demo-summary{
    grid-template-columns:1fr;
  }
  .demo-check{
    flex-direction:column;
    align-items:flex-start;
  }
  .demo-diagram{
    min-height:calc(560px * var(--diagram-scale) + 1.5rem);
    align-items:center;
    justify-content:center;
    padding:.75rem;
  }
  .member img{
    width:min(150px, 70vw);
    height:min(150px, 70vw);
  }
}

/* Home page: underline regular text links (but not nav/hero buttons) */
.home a:not(.btn):not(.nav a){text-decoration:underline;text-underline-offset:3px}

/* Header “scrolled” state */
.site-header.scrolled{
  background:rgba(10,10,13,.9);
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Reveal animations (progressive; JS disables for reduced-motion) */
.reveal{
  opacity:0;
  transform: translateY(16px) scale(.98);
  will-change: transform, opacity;
}
.reveal.reveal-in{
  opacity:1;
  transform:none;
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Button ripple (contained) */
.btn{ position:relative; overflow:hidden }
.ripple{
  position:absolute;
  border-radius:50%;
  transform: scale(0);
  background: rgba(255,255,255,.25);
  animation: ripple .6s ease-out forwards;
  pointer-events:none;
}
@keyframes ripple{
  to { transform: scale(1); opacity: 0; }
}

/* Toast (with screen-reader-only helper) */
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  padding: .5rem .75rem;
  border-radius: 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
  backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid var(--ring);
  z-index: 50;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Timeline / Gantt-style calendar
   -------------------------------------------------- */

.timeline {
  margin-top: 2.5rem;
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.75rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Header + legend */

.timeline-title {
  margin: 0 0 0.5rem;
}

.timeline-header .muted {
  max-width: 52rem;
}

.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.timeline-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--ring);
  background: rgba(255,255,255,.02);
  color: var(--muted);
}

.timeline-pill--modeling   { border-color: rgba(229,16,22,.7); color: var(--ink); }
.timeline-pill--rust       { border-color: rgba(255,184,77,.7); }
.timeline-pill--concurrency{ border-color: rgba(39,213,255,.7); }
.timeline-pill--ui         { border-color: rgba(52,235,158,.7); }
.timeline-pill--delivery   {}

/* Month ruler */

.timeline-months {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ring);
  font-size: 0.82rem;
  text-align: center;
  color: var(--muted);
}

.timeline-months span {
  white-space: nowrap;
}

/* Rows */

.timeline-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.timeline-row {
  /* single track column */
}

.timeline-row-track {
  position: relative;
  height: 1.5rem;
  border-radius: 999px;
  background: #111116;
  border: 1px solid var(--ring);
  overflow: visible; /* allow tooltips outside track */
}

/* Bars (1–10 = Aug–May) */

.timeline-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  width: calc((var(--end) - var(--start) + 1) * 10%);
  left: calc((var(--start) - 1) * 10%);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;          /* important for tooltip */
  color: #fff;
  background: var(--accent);
  border: none;
  cursor: pointer;
  z-index: 1;
}

/* Category colors (optional) */
.timeline-bar--modeling    { background: var(--accent); }
.timeline-bar--rust        { background: #ffb84d; color: #111; }
.timeline-bar--concurrency { background: #27d5ff; color: #111; }
.timeline-bar--ui          { background: #34eb9e; color: #111; }
.timeline-bar--delivery    { background: #8a93a3; color: #111; }

/* Tooltip on hover/focus */

.timeline-bar::after {
  content: attr(data-title) " — " attr(data-detail);
  position: absolute;
  left: 50%;
  bottom: 110%;
  transform: translateX(-50%) translateY(4px);
  display: block;
  max-width: min(420px, calc(100vw - 3rem)); /* keep inside viewport */
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.9);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: left;
  box-shadow: 0 12px 30px rgba(0,0,0,.75);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  border: 1px solid var(--ring);
  z-index: 20;
  white-space: normal;          /* allow wrapping */
  word-wrap: break-word;
}

.timeline-bar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 105%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.9) transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  pointer-events: none;
}

.timeline-bar:hover::after,
.timeline-bar:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.timeline-bar:hover::before,
.timeline-bar:focus-visible::before {
  opacity: 1;
}

/* Nudge tooltips for very-left rows so they never fall off panel */
.timeline-row:first-child .timeline-bar::after,
.timeline-row:nth-child(2) .timeline-bar::after {
  left: 0.5rem;
  transform: translateX(0) translateY(4px);
}

.timeline-row:first-child .timeline-bar::before,
.timeline-row:nth-child(2) .timeline-bar::before {
  left: 1.4rem;
  transform: translateX(0);
}

/* Keyboard focus */
.timeline-bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Note text */

.timeline-note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* TLC demo page */
.demo-hero{
  margin-bottom:2rem;
}

.demo-lead{
  max-width:58rem;
  margin:0 auto;
  color:#d8dade;
}

.demo-grid,
.demo-results{
  display:grid;
  gap:1.25rem;
  margin-top:1.5rem;
}

.demo-grid{
  grid-template-columns:1.15fr .85fr;
}

.demo-results{
  grid-template-columns:1fr;
}

.demo-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  padding:1.25rem;
  text-align:left;
}

.demo-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.demo-panel-head h2{
  margin:0;
}

.demo-head-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}

.demo-chip{
  display:inline-flex;
  align-items:center;
  padding:.32rem .75rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}

.demo-spec{
  margin:0;
  padding:1rem;
  overflow:auto;
  background:#0f1014;
  border:1px solid rgba(255,255,255,.08);
  color:#f1f1f2;
  font-family:"SFMono-Regular","Consolas","Menlo",monospace;
  font-size:.9rem;
  line-height:1.6;
  text-align:left;
}

.demo-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}

.demo-summary-item{
  padding:1rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.demo-summary-item strong{
  display:block;
  margin-bottom:.4rem;
  color:#fff;
}

.demo-summary-item p{
  margin:0;
  color:#d8dade;
}

.demo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-bottom:1.1rem;
}

.demo-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:1rem;
}

.demo-stat{
  padding:.9rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.demo-stat-label{
  display:block;
  margin-bottom:.35rem;
  color:var(--muted);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.demo-stat strong{
  font-size:1.35rem;
}

.demo-invariants{
  display:grid;
  gap:.65rem;
}

.demo-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem .9rem;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.demo-check strong{
  color:#fff;
}

.demo-diagram{
  --diagram-scale:1;
  position:relative;
  min-height:calc((560px * var(--diagram-scale)) + 2rem);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:
    radial-gradient(circle at top, rgba(229,16,22,.08), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    rgba(9,10,14,.62);
  border:1px solid rgba(255,255,255,.08);
}

.demo-diagram-canvas{
  position:relative;
  width:calc(980px * var(--diagram-scale));
  height:calc(560px * var(--diagram-scale));
  flex:0 0 auto;
}

.demo-diagram-stage{
  position:relative;
  width:980px;
  height:560px;
  transform:scale(var(--diagram-scale));
  transform-origin:top left;
}

.demo-diagram-svg,
.demo-diagram-nodes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.demo-flow{
  position:relative;
}

.demo-flow-node{
  position:absolute;
  width:168px;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:.9rem .85rem;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  text-align:center;
  box-shadow:0 20px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, opacity .25s ease;
}

.demo-flow-node strong{
  display:block;
  margin-bottom:.45rem;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:-.02em;
  color:#fff;
}

.demo-flow-node p{
  margin:0;
  font-size:.82rem;
  line-height:1.35;
  color:#dfe1e6;
}

.demo-flow-node.is-complete{
  border-color:rgba(52,235,158,.55);
  background:linear-gradient(180deg, rgba(52,235,158,.2), rgba(255,255,255,.03));
  box-shadow:0 20px 36px rgba(0,0,0,.26), 0 0 0 1px rgba(52,235,158,.12);
}

.demo-flow-node.is-active{
  border-color:rgba(255,255,255,.35);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.14), transparent 52%),
    linear-gradient(180deg, rgba(229,16,22,.3), rgba(255,255,255,.04));
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 26px 42px rgba(0,0,0,.34), 0 0 28px rgba(229,16,22,.18);
  transform:translateY(-4px) scale(1.015);
}

.demo-node-id{
  display:inline-flex;
  align-self:center;
  justify-content:center;
  min-width:2.5rem;
  margin-bottom:.55rem;
  padding:.18rem .5rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.demo-loop-count{
  display:inline-flex;
  align-self:center;
  margin-top:.65rem;
  padding:.18rem .55rem;
  border-radius:999px;
  background:rgba(229,16,22,.2);
  border:1px solid rgba(229,16,22,.38);
  color:#fff;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
}

.demo-edge{
  fill:none;
  stroke:rgba(255,255,255,.18);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:none;
  transition:stroke .35s ease, filter .35s ease, opacity .35s ease;
}

.demo-edge--loop{
  stroke:rgba(255,140,140,.22);
  stroke-dasharray:12 9;
}

.demo-edge.is-fresh{
  stroke:rgba(255,255,255,.9);
  filter:drop-shadow(0 0 12px rgba(255,255,255,.14));
}

.demo-edge--loop.is-fresh{
  stroke:rgba(255,120,120,.96);
  filter:drop-shadow(0 0 12px rgba(229,16,22,.24));
}

/* Mobile */

@media (max-width: 768px) {
  .timeline{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:1rem;
  }

  .timeline-months,
  .timeline-grid{
    min-width:680px;
  }

  .timeline-header{
    min-width:680px;
  }

  .timeline-row-track {
    height: 1.6rem;
  }

  .timeline-bar {
    font-size: 0.75rem;
  }

  .timeline-bar::after,
  .timeline-bar::before{
    display:none;
  }

  .demo-diagram{
    min-height:calc(560px * var(--diagram-scale) + 2rem);
    align-items:center;
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior:auto;
  }

  body{
    animation:none;
  }

  .reveal,
  .reveal.reveal-in,
  .btn,
  .card,
  .member,
  .figure,
  .timeline,
  .nav a{
    transition:none;
    transform:none;
  }
}