/* Standalone longread styles — mobile-first */

:root{
  --bg:#ffffff; --fg:#121212; --muted:#60646b; --soft:#f3f4f6; --card:#ffffff;
  --border:rgba(0,0,0,.12); --shadow:0 10px 30px rgba(0,0,0,.08);
  --accent:#1a5cff; --accent-2:#0ea5e9; --warn:#b45309; --danger:#b91c1c;
  --radius:18px; --radius-sm:12px; --wrap:980px; --leading:1.65;
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  --font-heading:ui-sans-serif,system-ui,-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  --font-body:'Noto Serif','Literata','Merriweather',Georgia,serif;
}

/* @media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0d10; --fg:#e8eaf0; --muted:#a3a8b3; --soft:#11151c; --card:#0f141b;
    --border:rgba(255,255,255,.12); --shadow:0 16px 40px rgba(0,0,0,.45);
    --accent:#74a6ff; --accent-2:#7dd3fc; --warn:#f59e0b; --danger:#fb7185;
  }
  p, .prose li {
    font-weight: 350;
  }
  .prose strong {
    font-weight: 600 !important;
  }
} */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-ui); line-height:var(--leading);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.wrap{width:min(100% - 2rem,var(--wrap)); margin-inline:auto; padding: 1.25rem 0 2.25rem}
.prose{max-width: var(--wrap); margin-inline:auto}

.doc-title{
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.1;
  font-size: clamp(1.75rem, 2.8vw, 2.65rem);
  margin: 0 0 1rem 0;
  text-wrap: balance;
}

.prose h2{
  font-family: var(--font-heading);
  margin-top: 2.2rem;
  margin-bottom: .75rem;
  font-size: clamp(1.35rem, 1.9vw, 1.95rem);
  line-height: 1.25;
  text-wrap: balance;
  scroll-margin-top: 100px;
}
.prose h3{
  font-family: var(--font-heading);
  margin-top: 1.35rem;
  margin-bottom: .5rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.3;
  scroll-margin-top: 100px;
}
.prose h4{
  font-family: var(--font-heading);
  margin-top: 1.1rem;
  margin-bottom: .35rem;
  font-size: 1.05rem;
  line-height: 1.25;
}
.prose p{ margin: .75rem 0; font-size: clamp(1.02rem, .35vw + 1rem, 1.14rem); font-family: var(--font-body); }
.prose a{ color: var(--accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.prose a:hover{ text-decoration-thickness: .12em; }
.prose strong{ font-weight: 800; }
.prose em{ font-style: italic; }

.prose ul,
.prose ol{
  margin: .75rem 0;
  padding-left: 1.75rem;
}
.prose li{ margin: .4rem 0; }

@media (min-width: 980px){
  .prose ul,
  .prose ol{
    padding-left: 2.5rem;
  }
}
.list{
  padding-left: 1.35rem;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, .35vw + 1rem, 1.14rem);
}

.divider{
  border:0;
  height:1px;
  margin: 1.35rem 0;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.preface{
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent-2);
  border-radius: var(--radius);
  background: var(--soft);
  padding: .95rem 1rem;
  margin: 0 0 1rem 0;
}
.preface__kicker{
  margin: 0 0 .35rem 0;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-ui);
}
.preface__text{
  margin: 0;
  color: var(--fg);
}

.spacer{ height: .75rem; }

.toc{
  position: sticky;
  top: 12px;
  z-index: 10;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--card) 88%, transparent);
  box-shadow: var(--shadow);
  margin: 0 0 1.35rem 0;
  overflow: clip;
}

.toc__summary{
  list-style: none;
  cursor: pointer;
  padding: .85rem 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
}
.toc__summary::-webkit-details-marker{ display:none; }

.toc__summaryTitle{
  font-size: 1.05rem;
  font-family: var(--font-heading);
  font-weight: 900;
}
.toc__summaryHint{
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
}

.toc[open] .toc__summaryHint{ opacity: .85; }

.toc__panel{
  border-top: 1px solid var(--border);
  padding: .75rem 1rem .95rem;
  max-height: min(64vh, calc(100svh - 84px));
  overflow: auto;
  overscroll-behavior: contain;
}

.toc__panel ol{
  margin: 0;
  padding-left: 1.1rem;
}

.toc__panel li{ margin: .35rem 0; }
.toc__panel a{ color: var(--fg); text-decoration: none; border-bottom: 1px solid transparent; }
.toc__panel a:hover{ border-bottom-color: var(--border); }

@media (min-width: 980px){
  .toc{ top: 14px; }
  .toc__panel{ max-height: min(74vh, calc(100vh - 120px)); }
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .toc{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

.insert{
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 6%, var(--bg)), color-mix(in oklab, var(--accent-2) 3%, var(--bg)));
  padding: 1.35rem 1.25rem;
  margin: 1.5rem 0;
  position: relative;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.04);
}

/* .insert::before{
  content: '✦';
  position: absolute;
  top: -12px;
  left: 24px;
  font-size: 1.35rem;
  color: var(--accent);
  background: var(--bg);
  padding: 0 6px;
} */

.insert p{
  margin: .65rem 0;
  font-family: var(--font-body);
  color: var(--fg);
  font-size: clamp(0.92rem, 0.32vw + 0.9rem, 1.03rem);
  line-height: var(--leading);
}

.insert p:first-child{
  margin-top: 0.5rem;
}

.insert p:last-child{
  margin-bottom: 0;
}

.insert strong{
  font-weight: 800;
  color: var(--fg);
}

.doc-footer{
  margin-top: 1.25rem;
}
.doc-footer__text{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  font-family: var(--font-ui);
}

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