/* ==========================================================================
   Solar Open 2 완전정복 — 공통 디자인 시스템
   ========================================================================== */

:root{
  --bg: #0b0f17;
  --bg-soft: #0f141f;
  --card: #131a26;
  --card-hover: #171f2d;
  --border: #232d3d;
  --text: #f3f6fa;
  --sub: #9aa8bc;
  --muted: #64738a;
  --accent: #8a6dfa; /* Upstage brand purple, sampled from the official Solar Open 2 release asset */
  --accent-soft: rgba(138,109,250,.16);
  --radius: 16px;
  --maxw: 980px;
  font-size: 17px;
}

*,*::before,*::after{ box-sizing:border-box; }
html, body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}

::selection{ background:var(--accent); color:#0b0f17; }

a{ color:inherit; text-decoration:none; }

/* ---------------- Top nav ---------------- */
.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px clamp(18px,4vw,40px);
  background:rgba(11,15,23,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topnav .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; font-size:.95rem; color:var(--sub); }
.topnav .brand b{ color:var(--text); }
.topnav .lec-tag{
  flex:0 0 auto;
  font-size:.78rem; font-weight:800; color:var(--accent);
  background:var(--accent-soft); padding:4px 10px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.topnav .lec-title{
  flex:1 1 auto; min-width:0; text-align:center;
  font-size:.86rem; font-weight:700; color:var(--sub);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 12px;
}
.topnav .lec-title b{ color:var(--text); font-weight:800; }
.topnav .dots{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.topnav .dots span{
  width:8px; height:8px; border-radius:50%; background:var(--border);
  transition:background .25s, transform .25s;
  cursor:pointer;
}
.topnav .dots span:hover{ background:color-mix(in srgb, var(--accent) 50%, var(--border)); }
.topnav .dots span.active{ background:var(--accent); transform:scale(1.35); }
.topnav .nav-links{ flex:0 0 auto; display:flex; gap:18px; font-size:.85rem; color:var(--sub); font-weight:700; white-space:nowrap; }
.topnav .nav-links a:hover{ color:var(--text); }
@media (max-width:920px){
  .topnav .lec-title{ display:none; }
}
.topnav .dots span{ cursor:pointer; }
.topnav{ position:fixed; top:3px; left:0; right:0; }

/* progress bar (slide N of total) */
.progress-rail{ position:fixed; top:0; left:0; right:0; z-index:70; height:3px; background:var(--border); }
.progress-rail > i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, white));
  transition:width .35s ease;
}

/* ---------------- Layout: carousel deck ---------------- */
html{ scroll-behavior:smooth; }
.section{
  position:fixed; inset:0;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:104px 0 132px;
  overflow-y:auto;
  overflow-anchor:none; /* stop the browser from silently re-scrolling a few px when
                           reveal/transform animations shift content height mid-transition */
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateX(3vw);
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
  background:var(--bg);
}
/* margin:auto (not justify-content:center) so overflowing slides stay scrollable from their true top */
.section > .wrap{ margin-top:auto; margin-bottom:auto; flex-shrink:0; }
.hero.section > .wrap{ margin-top:0; margin-bottom:0; }
/* bottom vignette: only shown (by JS toggling .has-more) while a slide
   actually has more content below the fold that hasn't been scrolled to yet */
.section::after{
  content:""; position:fixed; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(to bottom, transparent, var(--bg) 92%);
  pointer-events:none; z-index:3; opacity:0; transition:opacity .3s;
}
.section.active.has-more::after{ opacity:1; }
.hero.section::after{ display:none; }
.section.active{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0); z-index:5;
  transition:opacity .5s ease, transform .5s ease;
}
.section.prev{ transform:translateX(-3vw); }
.section.next{ transform:translateX(3vw); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,28px); width:100%; }

/* deck nav arrows */
.deck-nav{ position:fixed; z-index:80; inset:0; pointer-events:none; }
.deck-nav button{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; pointer-events:auto; cursor:pointer;
  background:var(--card); border:1px solid var(--border); color:var(--text);
  font-size:1.1rem; display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, opacity .2s;
}
.deck-nav button:hover{ background:var(--card-hover); border-color:var(--accent); }
.deck-nav button.disabled{ opacity:.25; pointer-events:none; }
.deck-nav .prev-btn{ left:14px; }
.deck-nav .next-btn{ right:14px; }
.slide-counter{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:80;
  font-size:.78rem; font-weight:800; color:var(--muted); letter-spacing:.05em;
  background:var(--card); border:1px solid var(--border); padding:5px 12px; border-radius:999px;
}
@media (max-width:760px){
  .deck-nav button{ width:38px; height:38px; }
  .deck-nav .prev-btn{ left:6px; } .deck-nav .next-btn{ right:6px; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; font-weight:800; letter-spacing:.08em; color:var(--accent);
  text-transform:uppercase; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:3px; background:var(--accent); display:inline-block; }

h1.headline, h2.headline{
  font-size:clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight:800; letter-spacing:-.01em; margin:0 0 16px;
  color:var(--text);
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.22s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.32s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.42s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.52s; }

/* ---------------- Bullets ----------------
   NOTE: li is intentionally NOT display:flex. Flexbox turns every inline
   child (each <b>...</b> and each surrounding text run) into its own
   separate flex item, which breaks normal text wrapping whenever a bullet
   contains inline markup. Plain block flow + an absolutely-positioned
   ::before dot keeps the text flowing as one paragraph. */
ul.bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
ul.bullets li{
  position:relative; padding-left:21px;
  font-size:.96rem; line-height:1.45; color:var(--text);
}
ul.bullets li::before{
  content:""; position:absolute; left:0; top:.5em; width:9px; height:9px; border-radius:50%;
  background:var(--accent);
}
ul.bullets b{ color:var(--accent); font-weight:800; }

/* ---------------- Analogy callout ---------------- */
.analogy{
  margin-top:16px; padding:13px 18px; border-radius:12px;
  background:var(--bg-soft); border:1px solid var(--border); border-left:3px solid var(--accent);
  display:flex; gap:12px; align-items:flex-start;
}
.analogy .icon{ font-size:1.2rem; line-height:1.4; }
.analogy .label{ font-weight:800; color:var(--accent); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.analogy p{ margin:0; color:var(--sub); }

/* ---------------- Stat cards ---------------- */
.stat-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); margin:16px 0; }
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px 14px; border-top:3px solid var(--accent);
  transition:transform .25s ease, background .25s ease;
}
.stat-card:hover{ transform:translateY(-4px); background:var(--card-hover); }
.stat-card .value{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.stat-card .label{ margin-top:6px; font-size:.88rem; color:var(--sub); }

/* ---------------- Cards / compare ---------------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }

table.compare{ width:100%; border-collapse:collapse; margin:14px 0; border-radius:var(--radius); overflow:hidden; }
table.compare th, table.compare td{ padding:9px 14px; text-align:center; font-size:.86rem; }
table.compare th{ background:var(--bg-soft); color:var(--accent); font-weight:800; }
table.compare td:first-child, table.compare th:first-child{ text-align:left; color:var(--text); font-weight:700; }
table.compare tbody tr:nth-child(odd){ background:var(--card); }
table.compare tbody tr:nth-child(even){ background:var(--bg-soft); }
table.compare td{ color:var(--sub); }
.note{ margin-top:14px; color:var(--sub); font-size:.92rem; }
.note b{ color:var(--text); }

/* ---------------- Flow / timeline ---------------- */
.timeline{ position:relative; display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:18px; }
.timeline::before{
  content:""; position:absolute; top:26px; left:0; right:0; height:2px;
  background:var(--border);
}
.timeline .rail{ position:absolute; top:26px; left:0; height:2px; background:var(--accent); width:0%; transition:width 1.1s ease; }
.tl-step{ position:relative; z-index:2; }
.tl-step .dot{
  width:52px; height:52px; border-radius:50%; background:var(--card); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--muted);
  margin-bottom:14px; transition:.35s;
}
.tl-step.on .dot{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.tl-step .tag{ font-size:.78rem; color:var(--accent); font-weight:800; text-transform:uppercase; }
.tl-step h4{ margin:6px 0 6px; font-size:1.05rem; }
.tl-step p{ margin:0; color:var(--sub); font-size:.9rem; }

/* ---------------- Bar chart ---------------- */
.barchart{ margin:14px 0; display:flex; flex-direction:column; gap:8px; }
.bar-row{ display:grid; grid-template-columns:150px 1fr 64px; align-items:center; gap:12px; }
.bar-row .name{ font-size:.88rem; color:var(--sub); text-align:right; }
.bar-row .name.me{ color:var(--text); font-weight:800; }
.bar-track{ height:14px; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; width:0%; border-radius:999px; background:var(--muted); transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.bar-fill.me{ background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); }
.bar-row .val{ font-size:.85rem; color:var(--sub); font-variant-numeric:tabular-nums; }
.bar-row .val.me{ color:var(--text); font-weight:800; }

/* ---------------- Checklist (summary) ---------------- */
ul.checklist{ list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:9px; }
ul.checklist li{ display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; }
ul.checklist .tick{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent);
  color:#0b0f17; font-size:.75rem; font-weight:900; display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.nextup{
  margin-top:24px; padding:18px 22px; border-radius:14px; background:var(--bg-soft); border:1px solid var(--border);
  border-left:3px solid var(--accent);
}
.nextup .label{ font-size:.78rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; }
.nextup p{ margin:8px 0 0; color:var(--sub); }

/* ---------------- Hero ---------------- */
.hero{ display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero .num-wm{
  position:absolute; right:clamp(-40px,-2vw,0); top:50%; transform:translateY(-50%);
  font-size:min(40vw,420px); font-weight:900; color:rgba(255,255,255,.03); line-height:1; user-select:none;
  pointer-events:none;
}
.hero .course{ font-size:.95rem; font-weight:800; color:var(--sub); margin-bottom:10px; }
.hero .brand-gif{
  width:300px; max-width:56vw; border-radius:16px; margin-bottom:22px; display:block;
  box-shadow:0 14px 48px rgba(138,109,250,.38), 0 2px 10px rgba(0,0,0,.4);
}
.hero .lec-num{ font-size:.9rem; font-weight:800; color:var(--accent); margin-bottom:18px; }
.hero h1{ font-size:clamp(2.1rem,5vw,3.4rem); font-weight:800; letter-spacing:-.02em; margin:0 0 18px; max-width:820px; }
.hero .subtitle{ font-size:1.15rem; color:var(--sub); max-width:640px; margin:0 0 28px; }
.hero .accentline{ width:64px; height:4px; background:var(--accent); border-radius:2px; margin-bottom:20px; }
.hero .meta{ color:var(--muted); font-size:.9rem; }
.scrolldown{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted); font-size:.78rem;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* ---------------- MoE diagram ---------------- */
.moe{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin:16px 0; }
.moe .router{
  flex:0 0 auto; width:120px; height:120px; border-radius:20px; background:var(--accent-soft);
  border:2px solid var(--accent); display:flex; align-items:center; justify-content:center;
  font-weight:800; color:var(--accent); text-align:center; font-size:.9rem; padding:10px;
}
.moe .experts{ flex:1 1 320px; display:grid; grid-template-columns:repeat(20,1fr); gap:6px; }
.moe .experts i{ display:block; width:100%; padding-top:100%; border-radius:3px; background:var(--border); position:relative; }
.moe .experts i.active{ background:var(--accent); box-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); }
.moe .caption{ flex:0 0 100%; color:var(--sub); font-size:.88rem; }

/* ---------------- Attention pattern ---------------- */
.attn{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.attn .blk{
  flex:0 0 auto; width:46px; height:46px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; color:var(--sub); background:var(--card); border:1px solid var(--border);
  transition:transform .3s;
}
.attn .blk.s{ background:var(--accent); color:#0b0f17; border-color:var(--accent); }
/* traveling read-order highlight, one block lit at a time left-to-right.
   S(정독) blocks hold their glow much longer than L(속독) blocks — the animation
   TIMING itself is the "slow careful read vs quick skim" concept, not just a caption. */
.attn.flow .blk:not(.blk-skip):not(.s){ animation:blkflowFast 4.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
.attn.flow .blk.s{ animation:blkflowSlow 4.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * .55s); }
@keyframes blkflowFast{
  0%, 10%, 100%{ box-shadow:none; transform:translateY(0) scale(1); }
  4%{ box-shadow:0 0 0 3px var(--accent-soft), 0 4px 12px rgba(0,0,0,.3); transform:translateY(-3px) scale(1.05); }
}
@keyframes blkflowSlow{
  0%, 2%, 24%, 100%{ box-shadow:none; transform:translateY(0) scale(1); }
  6%, 18%{ box-shadow:0 0 0 5px var(--accent-soft), 0 6px 16px rgba(0,0,0,.4); transform:translateY(-4px) scale(1.1); }
}
.attn .legend{ flex:0 0 100%; display:flex; gap:22px; margin-top:6px; font-size:.85rem; color:var(--sub); }
.attn .legend span{ display:inline-flex; align-items:center; gap:8px; }
.attn .legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.attn .legend i.s{ background:var(--accent); }
.attn .legend i.l{ background:var(--card); border:1px solid var(--border); }

/* ---------------- End-of-lecture links (inside last slide) ---------------- */
.lecfoot{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.lecfoot a.navbtn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px;
  border:1px solid var(--border); background:var(--card); font-weight:700; font-size:.92rem;
  transition:background .2s, border-color .2s;
}
.lecfoot a.navbtn:hover{ background:var(--card-hover); border-color:var(--accent); }

/* ---------------- Concept diagrams (sigmoid / eigenvalue / tokens / kv-graph) ---------------- */
.diagram{
  margin:14px 0; padding:16px clamp(14px,3vw,22px); background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius);
}
.diagram .dg-title{ font-size:.82rem; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.diagram .dg-note{ margin-top:12px; color:var(--sub); font-size:.9rem; }

/* sigmoid curve */
.sigmoid-svg{ width:100%; max-width:420px; height:auto; display:block; margin:0 auto; }
.sigmoid-svg .curve{ fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; }
.sigmoid-svg .axis{ stroke:var(--border); stroke-width:1.5; }
.sigmoid-svg .mid{ stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; }
.sigmoid-svg text{ fill:var(--sub); font-size:9px; font-family:inherit; }
.sigmoid-svg .dot{ fill:var(--accent); }
.sigmoid-svg .mover{ fill:var(--text); filter:drop-shadow(0 0 4px var(--accent)); }
.sigmoid-svg.playing .mover{ animation:sigmove 3s ease-in-out infinite; }
@keyframes sigmove{
  0%   { cx:20;    cy:119.7; }
  8.3% { cx:36.7;  cy:119.3; }
  16.6%{ cx:53.3;  cy:118.0; }
  25%  { cx:70;    cy:114.8; }
  33.3%{ cx:86.7;  cy:106.9; }
  41.6%{ cx:103.3; cy:90.4;  }
  50%  { cx:120;   cy:65;    }
  58.3%{ cx:136.7; cy:39.6;  }
  66.6%{ cx:153.3; cy:23.1;  }
  75%  { cx:170;   cy:15.2;  }
  83.3%{ cx:186.7; cy:12.0;  }
  91.6%{ cx:203.3; cy:10.7;  }
  100% { cx:220;   cy:10.3;  }
}

/* SVG "draw the line" reveal (used by kv-svg growth curves) */
.draw-path{ stroke-dasharray:500; stroke-dashoffset:500; transition:stroke-dashoffset 1.6s ease; }
.draw-path.drawn{ stroke-dashoffset:0; }

/* eigenvalue range lines */
.eigline{ display:flex; flex-direction:column; gap:16px; }
.eigline .row{ display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center; }
.eigline .tag{ font-size:.85rem; font-weight:800; color:var(--sub); }
.eigline .tag.me{ color:var(--accent); }
.eigline .range{ position:relative; height:14px; background:var(--bg-soft); border:1px solid var(--border); border-radius:999px; }
.eigline .range::after{
  content:""; position:absolute; left:50%; top:-5px; bottom:-5px; width:1px; background:var(--border);
}
.eigline .fill{ position:absolute; top:0; bottom:0; border-radius:999px; background:var(--muted); }
.eigline .fill.me{ background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white)); }
.eigline .desc{ margin-top:6px; font-size:.85rem; color:var(--sub); }
/* animated marker: literally shows the value moving inside its allowed range.
   The "old" marker can only drift toward 0 (fade/hold); the "me" marker swings
   across the midline into negative territory and visibly changes color there —
   that color flip *is* the "can erase / flip sign" concept, no caption needed. */
.eig-marker{
  position:absolute; top:50%; width:16px; height:16px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--muted);
  box-shadow:0 0 0 4px var(--bg-soft), 0 2px 8px rgba(0,0,0,.4);
}
.eig-marker.old{ animation:eigOld 2.6s ease-in-out infinite; }
@keyframes eigOld{
  0%,100%{ left:52%; opacity:.35; }
  50%{ left:96%; opacity:1; }
}
.eig-marker.me{ animation:eigMe 2.6s ease-in-out infinite; background:var(--accent); }
@keyframes eigMe{
  0%{ left:50%; background:var(--muted); }
  25%{ left:94%; background:var(--accent); }
  50%{ left:50%; background:var(--muted); }
  75%{ left:6%; background:#f5734f; }
  100%{ left:50%; background:var(--muted); }
}

/* token / position-encoding row */
.tokrow{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tokrow .tok{
  position:relative; min-width:52px; height:40px; border-radius:8px; background:var(--bg-soft);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--text); font-weight:700;
}
.tokrow .tok .badge{
  position:absolute; top:-9px; right:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--accent); color:#0b0f17; font-size:.65rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.tokrow .arrow{ color:var(--accent); font-size:1.1rem; }
.tokrow-label{ font-size:.82rem; color:var(--sub); margin-top:10px; }
/* traveling highlight: visualizes the recurrent-state "flow" carrying order left-to-right */
.tokrow.flow .tok{ animation:tokflow 2.4s ease-in-out infinite; animation-delay:calc(var(--i,0) * .3s); }
@keyframes tokflow{
  0%, 100%{ background:var(--bg-soft); border-color:var(--border); transform:scale(1); }
  15%{ background:var(--accent-soft); border-color:var(--accent); transform:scale(1.06); }
}

/* KV cache growth mini line-graph */
.kv-svg{ width:100%; height:auto; display:block; }
.kv-svg .axis{ stroke:var(--border); stroke-width:1.5; }
.kv-svg .softmax{ fill:none; stroke:#f5a51d; stroke-width:3; }
.kv-svg .linear{ fill:none; stroke:var(--accent); stroke-width:3; }
.kv-svg text{ fill:var(--sub); font-size:9px; }
.kv-legend{ display:flex; gap:20px; margin-top:10px; font-size:.85rem; color:var(--sub); }
.kv-legend span{ display:inline-flex; align-items:center; gap:8px; }
.kv-legend i{ width:14px; height:3px; border-radius:2px; display:inline-block; }

/* simple gantt-style sync/async bars */
.gantt{ display:flex; flex-direction:column; gap:14px; }
.gantt .lane{ display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:center; }
.gantt .lane .tag{ font-size:.82rem; color:var(--sub); font-weight:800; }
.gantt .track{ position:relative; height:22px; background:var(--bg-soft); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.gantt .seg{ position:absolute; top:2px; bottom:2px; border-radius:5px; background:var(--muted); }
.gantt .seg.busy{ background:var(--accent); }
.gantt .seg.idle{ background:transparent; border:1px dashed var(--border); }
.gantt .caption{ color:var(--sub); font-size:.88rem; margin-top:2px; }

@media (max-width:680px){
  .topnav .nav-links{ display:none; }
  .section{ padding-top:88px; }
  .eigline .row, .gantt .lane{ grid-template-columns:100px 1fr; }
}