:root {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: #0f172a;
  background: radial-gradient(circle at top, #f8fafc, #e2e8f0);
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
}

#root {
  min-height: 100vh;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  padding: 2.5rem 2rem;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(6px);
}

.hero__eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  font-weight: 700;
  color: #0f172a;
}

.hero__subtitle {
  margin: 0;
  font-size: 1rem;
  color: #334155;
}

.card {
  background: rgba(255, 255, 255, 0.86);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(148, 163, 184, 0.25);
}

.card h2 {
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
  color: #0f172a;
}

.card h3 {
  margin-top: 0;
  font-size: 1.125rem;
  color: #1e293b;
}

.card p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #334155;
}

.carousel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
}

.carousel__button {
  background: #0f172a;
  color: #f8fafc;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.carousel__button:hover,
.carousel__button:focus-visible {
  background: #1d4ed8;
}

.carousel__counter {
  font-size: 0.875rem;
  color: #475569;
  font-weight: 600;
}

.carousel__viewport {
  overflow: hidden;
  border-radius: 14px;
  background: rgba(241, 245, 249, 0.58);
}

.carousel__track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.carousel__slide {
  min-width: 100%;
  padding: 1.75rem 1.5rem;
}

.carousel__slide h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: #1e293b;
}

.carousel__slide ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #334155;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.badge {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  background: #0f172a;
  color: #f8fafc;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.list-columns {
  display: grid;
  gap: 1.5rem;
}

.list-columns ul {
  padding-left: 1.25rem;
  margin: 0;
  color: #334155;
}

.card ol {
  padding-left: 1.25rem;
  margin: 0;
  color: #334155;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
  color: #0f172a;
}

.contact-label {
  font-weight: 600;
  color: #334155;
}

a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .list-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


html{scroll-behavior:smooth;scroll-padding-top:24px}body{font-size:16px}.layout{margin-right:270px}.page{max-width:980px;gap:1.8rem;padding-top:2.5rem}.hero{padding:2.5rem 2rem;gap:.5rem}.hero__title{font-size:clamp(2.7rem,6vw,3.8rem)}.hero__eyebrow{font-size:1rem;text-transform:none;letter-spacing:0;margin:0}.hero__summary{max-width:620px;margin:.8rem auto 0;color:#334155;line-height:1.75}.hero__metadata{color:#64748b;font-size:.8rem;margin:1rem 0 0}.card{padding:2rem;line-height:1.75}.card p:last-child{margin-bottom:0}.card h2{font-size:1.5rem}.card h3{font-size:1.05rem;line-height:1.5}.list-columns{gap:2rem}.work-list{list-style:none;padding:0;margin:0;display:grid;gap:1rem}.work-list li{padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.work-list li:last-child{border-bottom:0;padding-bottom:0}.work-list h3{margin-bottom:.35rem}.work-list p{margin:0}.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.5rem}.principle{border:1px solid #e2e8f0;background:#f8fafc;padding:1.1rem;border-radius:12px}.principle h3{margin:0 0 .45rem}.principle p{font-size:.95rem;margin:0}.contact-list a{overflow-wrap:anywhere}.source-link{font-size:.85rem;display:block;margin-top:1.5rem}.timeline{position:fixed;right:0;top:0;width:270px;height:100vh;overflow:auto;padding:2.5rem 1.6rem;border-left:1px solid #cbd5e1;background:rgba(248,250,252,.95);color:#0f172a;z-index:10}.timeline-title{font-size:1rem;font-weight:600;margin:0 0 .7rem}.timeline-description{font-size:.875rem;color:#64748b;line-height:1.7;margin:0}.timeline-list{padding:0;margin:2rem 0 0 .35rem;list-style:none;border-left:1px solid #cbd5e1}.timeline-item{position:relative;padding:0 0 2rem 1.15rem}.timeline-item:before{content:'';position:absolute;left:-5px;top:5px;width:9px;height:9px;background:#94a3b8;border:2px solid #f8fafc;border-radius:50%}.timeline-item.active:before{background:#2563eb;box-shadow:0 0 0 3px #dbeafe}.timeline-item time{font-size:.8rem;color:#64748b}.timeline-item h3{font-size:.95rem;line-height:1.5;margin:.5rem 0}.timeline-item a{display:block;font-size:.875rem;font-weight:500;margin-top:.6rem}.timeline-item a[aria-current=page]{font-weight:700}.timeline-item .pill{font-size:.75rem;color:#2563eb}.timeline-bottom{font-size:.8rem;color:#64748b;line-height:1.7;margin-top:.5rem}.history-toggle{display:none}.diff-intro{font-size:1rem;color:#334155}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}.compare-panel{padding:1.2rem;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc}.compare-panel.after{background:#eff6ff;border-color:#bfdbfe}.compare-panel h3{margin:0 0 .7rem}.compare-label{font-size:.8rem;color:#64748b;margin-bottom:.8rem}.removed{background:#fee2e2;text-decoration:line-through;padding:2px 4px}.added{background:#dcfce7;padding:2px 4px}.version-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}.version-actions a{font-size:.9rem;border:1px solid #cbd5e1;padding:.5rem .9rem;border-radius:8px}a:focus-visible,button:focus-visible{outline:3px solid #2563eb;outline-offset:4px}.card-entry{animation:appear .35s ease both}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.principles{grid-template-columns:1fr}.card{padding:1.5rem}.page{padding:2rem 1.2rem}.hero{padding:2rem 1.3rem}.list-columns{grid-template-columns:1fr}}
@media(max-width:760px){.layout{margin-right:0}.timeline{display:none;box-shadow:-8px 0 30px #0f172a20}.timeline.open{display:block}.history-toggle{display:block;position:fixed;right:18px;bottom:18px;background:#0f172a;color:#f8fafc;border:0;border-radius:999px;padding:.85rem 1.15rem;font:inherit;font-size:.9rem;z-index:20;box-shadow:0 8px 24px #0f172a30}.page{padding-bottom:5.5rem}.compare-grid{grid-template-columns:1fr}.hero__summary{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card-entry{animation:none}}