/* ==========================================================================
   CAS · Introduction to NLP — section visuals
   ========================================================================== */

/* =============================== 01 · HERO =============================== */
.sec-hero{padding-top:clamp(4rem,10vh,7rem);min-height:92vh;display:flex;flex-direction:column;justify-content:center}
.hero-title{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:700;letter-spacing:-.02em;margin:0 0 1rem}
.hero-title .grad{
  color:transparent;background:linear-gradient(96deg,var(--teal) 5%,var(--sky) 45%,var(--indigo) 90%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 26px rgba(94,234,212,.18));
}
.hero-sub{font-size:clamp(1.15rem,2.2vw,1.45rem);color:var(--text-2);max-width:58ch}
.hero-sub strong{color:var(--text)}
.def-banner{
  display:flex;gap:1.2rem;align-items:baseline;max-width:760px;margin-top:1.6rem;
  border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius-s);
  background:var(--panel);padding:1rem 1.3rem;
}
.def-banner p{margin:0;color:var(--text-2)}
.def-banner strong{color:var(--text)}
.def-banner em{color:var(--teal);font-style:normal;border-bottom:1px dashed rgba(94,234,212,.5)}
.cap-tags{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 0}
.cap-tag{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;letter-spacing:.12em;font-size:.88rem;
  border:1px solid var(--line-2);border-radius:999px;padding:.5rem 1.15rem;color:var(--text);
  background:rgba(8,13,24,.5);position:relative;overflow:hidden;
}
.cap-tag::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(94,234,212,.16) 50%,transparent 70%);
  transform:translateX(-110%);animation:capSweep 4.5s ease-in-out infinite;
}
.cap-tag:nth-child(2)::after{animation-delay:.4s}
.cap-tag:nth-child(3)::after{animation-delay:.8s}
.cap-tag:nth-child(4)::after{animation-delay:1.2s}
@keyframes capSweep{0%,55%{transform:translateX(-110%)}80%,100%{transform:translateX(110%)}}
.cap-idx{color:var(--teal);font-size:.62rem;border:1px solid rgba(94,234,212,.4);border-radius:5px;padding:.05rem .3rem}

.hero-grid{display:grid;grid-template-columns:minmax(300px,5fr) minmax(340px,7fr);gap:1.6rem;margin-top:3rem;align-items:start}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

.sent-list{display:flex;flex-direction:column;gap:.6rem}
.sent-card{
  text-align:left;border:1px solid var(--line);border-radius:var(--radius-s);
  background:rgba(8,13,24,.55);padding:.8rem 1rem;width:100%;
  transition:border-color .2s,background .2s,transform .2s;position:relative;
}
.sent-card:hover{border-color:var(--line-2);transform:translateX(3px)}
.sent-card.active{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.06)}
.sent-card.active::before{content:"";position:absolute;left:-1px;top:14%;bottom:14%;width:3px;border-radius:3px;background:var(--teal)}
.sent-quote{font-family:var(--font-display);font-size:1.06rem}
.sent-peek{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.sent-peek>div{overflow:hidden}
.sent-card.active .sent-peek,.sent-card:hover .sent-peek,.sent-card:focus-visible .sent-peek{grid-template-rows:1fr}
.peek-rows{padding-top:.55rem;display:flex;flex-direction:column;gap:.3rem}
.peek-row{display:flex;gap:.6rem;font-size:.85rem;color:var(--text-2)}
.peek-row .pk{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--teal);min-width:5.6rem;text-transform:uppercase;padding-top:.15em}

/* hero stream */
.stream{border:1px solid var(--line);border-radius:var(--radius);background:rgba(6,10,18,.65);padding:1rem 1.1rem;overflow:hidden}
.stream-flow{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem;align-items:stretch}
@media (max-width:1200px){.stream-flow{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.stream-flow{grid-template-columns:repeat(2,1fr)}}
.stage{
  border:1px solid var(--line);border-radius:10px;background:rgba(8,13,24,.6);
  padding:.6rem .7rem;min-height:150px;display:flex;flex-direction:column;gap:.45rem;overflow:hidden;
  opacity:.35;transition:opacity .5s;
}
.stage.in{opacity:1}
.stage-k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.stage-body{flex:1;display:flex;flex-wrap:wrap;gap:.3rem;align-content:flex-start;font-size:.8rem;overflow:hidden;max-height:130px}
.stage-body .chars{font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);word-break:break-all;line-height:1.7}
.stage-body .tok{font-size:.68rem;padding:.14rem .4rem}
.stage-body .tok.id{color:var(--sky);border-color:rgba(56,189,248,.35)}
.vec-bars{display:flex;gap:.25rem;align-items:flex-end;height:52px}
.vec-bars .vb{width:7px;border-radius:3px;background:linear-gradient(180deg,var(--teal),rgba(94,234,212,.15));min-height:4px}
.vec-bars .vb.g2{background:linear-gradient(180deg,var(--indigo),rgba(129,140,248,.15))}
.model-core{
  align-self:center;justify-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(94,234,212,.5);color:var(--teal);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  position:relative;background:radial-gradient(circle at 50% 40%,rgba(94,234,212,.18),transparent 70%);
}
.model-core::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(94,234,212,.35);
  animation:pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.35);opacity:0}}
.out-chip{
  border:1px solid rgba(52,211,153,.5);background:rgba(52,211,153,.1);border-radius:8px;
  padding:.35rem .55rem;font-family:var(--font-mono);font-size:.68rem;color:#a7f3d0;letter-spacing:.05em;line-height:1.5;
}
.out-chip b{display:block;color:#d1fae5;font-size:.78rem}
.stream-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.7rem;gap:1rem}
.stream-sent{font-size:.88rem;color:var(--text-2);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stream-dots{display:flex;gap:.35rem}
.stream-dots i{width:.45rem;height:.45rem;border-radius:50%;background:rgba(148,163,184,.3);transition:background .3s,transform .3s}
.stream-dots i.on{background:var(--teal);transform:scale(1.2)}
.arw-h{align-self:center;color:var(--text-3);font-size:.7rem;text-align:center}

.scroll-cue{display:flex;justify-content:center;padding:2.2rem 0 .6rem}
.scroll-cue span{
  width:1.4rem;height:2.3rem;border:1px solid var(--line-2);border-radius:99px;position:relative;
}
.scroll-cue span::after{
  content:"";position:absolute;left:50%;top:.45rem;width:4px;height:8px;border-radius:3px;background:var(--teal);
  transform:translateX(-50%);animation:cueDrop 1.8s ease-in-out infinite;
}

/* mismatch diagram */
.mismatch{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:1.6rem;
}
@media (max-width:860px){.mismatch{grid-template-columns:1fr}.mis-mid{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:.8rem}}
.mis-col{border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:1.1rem 1.3rem}
.mis-human{background:rgba(94,234,212,.04)}
.mis-comp{background:rgba(129,140,248,.05)}
.mis-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.mis-list li{
  font-family:var(--font-display);font-size:1rem;border:1px solid var(--line);border-radius:8px;
  padding:.35rem .75rem;background:rgba(8,13,24,.5);
}
.mis-human .mis-list li{color:#c9f7ee;border-color:rgba(94,234,212,.3)}
.mis-comp .mis-list li{color:#d3d9ff;border-color:rgba(129,140,248,.35);font-family:var(--font-mono);font-size:.85rem}
.mis-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding-inline:.4rem}
.mis-q{
  width:3.4rem;height:3.4rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(251,191,36,.55);color:var(--amber);font-family:var(--font-display);
  font-size:1.6rem;font-weight:700;background:rgba(251,191,36,.07);
  animation:qPulse 2.6s ease-in-out infinite;
}
@keyframes qPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.25)}50%{box-shadow:0 0 24px 4px rgba(251,191,36,.22)}}
.mis-flow{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.7rem}
.mf.w{color:#c9f7ee}.mf.a{color:var(--text-3);animation:mfSlide 2.8s ease-in-out infinite}
.mf.n{color:#d3d9ff;border:1px solid rgba(129,140,248,.4);border-radius:6px;padding:.1rem .4rem}
@keyframes mfSlide{0%,100%{transform:translateX(-4px);opacity:.5}50%{transform:translateX(4px);opacity:1}}
.big-statement{
  text-align:center;font-family:var(--font-display);font-size:clamp(1.25rem,2.8vw,1.75rem);
  margin:2.4rem auto 1.6rem;max-width:46ch;color:var(--text-2);
}
.big-statement strong{color:var(--teal);font-weight:600}
.anchor-q{
  max-width:680px;margin:0 auto;text-align:center;border:1px solid rgba(94,234,212,.4);border-radius:var(--radius);
  padding:1.6rem 1.8rem;background:radial-gradient(420px 160px at 50% 0%,rgba(94,234,212,.08),transparent);
  position:relative;
}
.anchor-q::before,.anchor-q::after{content:"";position:absolute;width:16px;height:16px;border-color:var(--teal);border-style:solid}
.anchor-q::before{top:-1px;left:-1px;border-width:2px 0 0 2px;border-top-left-radius:var(--radius)}
.anchor-q::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;border-bottom-right-radius:var(--radius)}
.anchor-q p{margin:.4rem 0 0;font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.6rem)}

/* =========================== 02 · CHALLENGE LAB =========================== */
.lab-shell{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:clamp(1.1rem,2.6vw,1.8rem)}
.lab-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.lab-count{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);letter-spacing:.14em}
.lab-nav{display:flex;gap:.5rem}
.chal-head{margin-bottom:1.2rem}
.chal-head h4{font-size:1.4rem;margin:0 0 .3rem}
.chal-head .why{color:var(--text-2);font-size:1.02rem;max-width:72ch;margin:0}
.chal-stage{min-height:340px;display:flex;flex-direction:column;gap:1rem;justify-content:center}
.chal-note{
  border-left:3px solid var(--teal);background:rgba(94,234,212,.05);border-radius:0 8px 8px 0;
  padding:.6rem 1rem;font-size:.96rem;color:var(--text-2);margin-top:.4rem;
}
.chal-note b{color:var(--teal);font-weight:600}
.demo-sent{
  font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.65rem);text-align:center;
  border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem 1.2rem;background:rgba(6,10,18,.55);
}
.demo-sent .pivot{color:var(--amber);border-bottom:2px solid var(--amber);padding:0 .1em}
.demo-btnrow{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* ambiguity tree */
.amb-tree{display:flex;flex-direction:column;align-items:center;gap:0}
.amb-root{
  font-family:var(--font-mono);font-weight:700;font-size:1.1rem;letter-spacing:.1em;
  border:1px solid var(--line-2);border-radius:10px;padding:.5rem 1.4rem;background:rgba(8,13,24,.7);
  transition:all .3s;
}
.amb-stem{width:2px;height:26px;background:var(--line-2)}
.amb-cross{position:relative;width:min(420px,80%);height:2px;background:var(--line-2)}
.amb-cross::before,.amb-cross::after{content:"";position:absolute;top:0;width:2px;height:26px;background:var(--line-2)}
.amb-cross::before{left:0}.amb-cross::after{right:0}
.amb-branches{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:560px;margin-top:26px}
.amb-branch{
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.9rem 1rem;text-align:center;
  background:rgba(8,13,24,.55);transition:all .4s;
}
.amb-branch .b-icon{font-size:1.3rem;display:block;margin-bottom:.3rem}
.amb-branch h5{margin:0 0 .25rem;font-size:.95rem}
.amb-branch p{margin:0;font-size:.8rem;color:var(--text-3)}
.amb-branch.lit{border-color:rgba(94,234,212,.65);background:rgba(94,234,212,.08);box-shadow:0 0 24px rgba(94,234,212,.12)}
.amb-branch.lit h5{color:var(--teal)}
.amb-branch.dimmed{opacity:.28;filter:grayscale(.6)}
.amb-cross.fin::before{background:rgba(94,234,212,.7);box-shadow:0 0 12px rgba(94,234,212,.5)}
.amb-cross.riv::before{background:rgba(251,191,36,.7)}
.amb-cross.fin::after{opacity:.25}.amb-cross.riv::after{opacity:.25}

/* polysemy / homonymy / synonymy */
.sense-center{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.poly-word{
  font-family:var(--font-mono);font-size:1.45rem;font-weight:700;color:var(--amber);
  border:1px solid rgba(251,191,36,.5);border-radius:12px;padding:.55rem 1.6rem;background:rgba(251,191,36,.07);
}
.poly-senses{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;width:100%;max-width:640px}
.poly-sense{
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.8rem .9rem;text-align:center;
  background:rgba(8,13,24,.55);font-size:.92rem;transition:transform .2s,border-color .2s;
}
.poly-sense:hover{transform:translateY(-3px);border-color:rgba(251,191,36,.5)}
.poly-sense .s-ico{font-size:1.2rem;display:block;margin-bottom:.3rem}
.poly-sense .s-rel{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;color:var(--teal);display:block;margin-top:.4rem;text-transform:uppercase}
.homo-duo{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;max-width:620px;margin:0 auto;width:100%}
@media (max-width:640px){.homo-duo{grid-template-columns:1fr}}
.homo-card{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem;text-align:center;background:rgba(8,13,24,.55)}
.homo-card h5{margin:.2rem 0;font-size:1.1rem}
.homo-card p{margin:.2rem 0 0;font-size:.88rem;color:var(--text-3)}
.homo-card .s-ico{font-size:1.5rem}
.x-mark{
  width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(251,113,133,.5);color:var(--rose);font-size:1rem;background:rgba(251,113,133,.07);
  justify-self:center;
}
.syn-map{position:relative;width:100%;max-width:560px;height:150px;border:1px solid var(--line);border-radius:var(--radius-s);background:rgba(6,10,18,.55);overflow:hidden}
.syn-axis{position:absolute;left:5%;right:5%;top:56%;height:2px;background:linear-gradient(90deg,transparent,var(--line-2) 15%,var(--line-2) 85%,transparent)}
.syn-dot{position:absolute;top:56%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem}
.syn-dot i{
  display:block;border-radius:50%;background:var(--teal);box-shadow:0 0 14px rgba(94,234,212,.6);
}
.syn-dot.close i{width:14px;height:14px}
.syn-dot.far i{width:11px;height:11px;background:var(--rose);box-shadow:0 0 12px rgba(251,113,133,.5)}
.syn-dot span{font-family:var(--font-mono);font-size:.7rem;color:var(--text-2);white-space:nowrap}
.syn-zone{position:absolute;top:30%;bottom:16%;left:16%;width:38%;border:1px dashed rgba(94,234,212,.35);border-radius:12px}
.syn-zone em{position:absolute;top:.45rem;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--teal);font-style:normal;white-space:nowrap}

/* word order */
.wo-stage{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.wo-row{display:flex;gap:.8rem;position:relative;height:64px;align-items:center}
.wo-chip{
  font-family:var(--font-mono);font-weight:700;letter-spacing:.12em;font-size:1.2rem;
  border:1px solid var(--line-2);border-radius:12px;padding:.75rem 1.6rem;background:rgba(8,13,24,.75);
  transition:transform .55s cubic-bezier(.3,.8,.3,1),border-color .3s,color .3s;will-change:transform;
}
.wo-chip.verb{color:var(--teal);border-color:rgba(94,234,212,.5)}
.wo-caption{min-height:2.6em;text-align:center;font-size:1.05rem;color:var(--text-2);max-width:52ch;transition:opacity .3s}
.wo-caption b{color:var(--rose)}
.wo-tags{display:flex;gap:.8rem;font-family:var(--font-mono);font-size:.7rem;color:var(--text-3);letter-spacing:.14em}

/* negation */
.neg-stage{display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.neg-sent{display:flex;flex-wrap:wrap;gap:.15rem;justify-content:center;align-items:baseline;font-family:var(--font-display);font-size:clamp(1.15rem,2.6vw,1.55rem)}
.neg-sent .w{padding:.05em .18em;border-radius:6px;transition:all .3s}
.not-word{
  color:#fff;background:rgba(251,113,133,.85);font-weight:700;padding:.05em .35em;border-radius:6px;
  box-shadow:0 0 22px rgba(251,113,133,.55);display:inline-block;animation:notPop .4s cubic-bezier(.2,1.6,.4,1);
}
@keyframes notPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.sent-badge{
  font-family:var(--font-mono);letter-spacing:.16em;font-size:.8rem;border-radius:999px;padding:.45rem 1.1rem;
  border:1px solid;transition:all .4s;
}
.sent-badge.pos{color:#a7f3d0;border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.09)}
.sent-badge.neg{color:#ffd7de;border-color:rgba(251,113,133,.6);background:rgba(251,113,133,.1);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sentiment-meter{display:flex;align-items:center;gap:.7rem;width:min(360px,100%)}
.sentiment-meter .meter>i{transition:background .4s,width .5s}
.sentiment-meter.neg .meter>i{background:linear-gradient(90deg,var(--rose),#f43f5e)}
.sentiment-meter .m-label{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);width:3.4rem}

/* sarcasm */
.sarc-split{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;width:100%;max-width:720px;margin:0 auto}
@media (max-width:680px){.sarc-split{grid-template-columns:1fr}}
.sarc-half{border:1px solid var(--line);border-radius:var(--radius-s);padding:1.1rem;background:rgba(8,13,24,.55)}
.sarc-half.words{border-color:rgba(52,211,153,.4)}
.sarc-half.means{border-color:rgba(251,113,133,.45)}
.sarc-half h5{margin:0 0 .5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;font-weight:500}
.sarc-half.words h5{color:var(--green)}
.sarc-half.means h5{color:var(--rose)}
.sarc-quote{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.6rem}
.sarc-quote .lit-word{color:var(--green);border-bottom:2px solid var(--green)}
.vs-mark{align-self:center;font-family:var(--font-mono);color:var(--text-3);font-size:.7rem;letter-spacing:.1em}

/* context */
.ctx-sent{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem;font-family:var(--font-display);font-size:clamp(1.15rem,2.5vw,1.5rem)}
.ctx-ref{color:var(--sky);border-bottom:2px dashed rgba(56,189,248,.7);padding:0 .15em;cursor:help}
.ctx-qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;width:100%;max-width:640px}
.ctx-q{
  border:1px dashed rgba(56,189,248,.45);border-radius:var(--radius-s);padding:.7rem .9rem;text-align:center;
  font-size:.95rem;color:var(--text-2);background:rgba(56,189,248,.04);
}
.ctx-q .qm{display:block;font-family:var(--font-display);font-size:1.2rem;color:var(--sky);margin-bottom:.2rem;animation:qPulse 3s infinite}

/* long range dependency */
.lr-box{position:relative;width:100%}
.lr-sent{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;font-family:var(--font-display);font-size:clamp(1.05rem,2.2vw,1.35rem);padding:2.6rem 0 .4rem}
.lr-sent .end-w{color:var(--teal);border-bottom:2px solid var(--teal);padding:0 .15em}
.lr-sent .start-w{color:var(--indigo);border-top:2px solid var(--indigo);padding:0 .15em}
.lr-svg{position:absolute;inset:0;pointer-events:none;overflow:visible}
.lr-svg path{fill:none;stroke:url(#lrGrad);stroke-width:2;stroke-dasharray:6 7;opacity:.9}
.lr-dist{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--text-3);text-align:center}

/* morphology */
.morph-row{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;align-items:center}
.morph-card{
  border:1px solid var(--line);border-radius:10px;padding:.6rem 1rem;background:rgba(8,13,24,.6);
  font-family:var(--font-mono);font-size:1.05rem;text-align:center;transition:transform .2s,border-color .2s;
}
.morph-card:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.5)}
.morph-card .suffix{color:var(--teal);font-weight:700}
.morph-card small{display:block;font-family:var(--font-body);font-size:.74rem;color:var(--text-3);margin-top:.2rem}
.morph-root{border-color:rgba(251,191,36,.5);color:var(--amber)}
.morph-arrow{color:var(--text-3);font-size:.8rem}

/* multilingual */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem}
.lang-card{
  border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem;background:rgba(8,13,24,.55);
  text-align:center;transition:border-color .2s;
}
.lang-card:hover{border-color:var(--line-2)}
.lang-card .l-name{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--text-3);text-transform:uppercase}
.lang-card .l-sample{font-size:1.4rem;margin:.6rem 0 .4rem;font-family:var(--font-display)}
.lang-card[dir="rtl"] .l-sample{font-size:1.5rem}
.lang-card .l-meta{font-size:.8rem;color:var(--text-3)}
.diff-axes{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.diff-axes .chip{border-color:rgba(167,139,250,.4);color:#d9d2ff}

/* ============================ 03 · AREAS ============================ */
.bifur{display:flex;flex-direction:column;align-items:center;margin-bottom:2rem}
.bifur-node{
  display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;
  border:1px solid var(--line-2);border-radius:12px;padding:.7rem 1.6rem;background:rgba(8,13,24,.7);
  font-family:var(--font-display);font-weight:700;letter-spacing:.1em;font-size:1.15rem;
}
.bifur-node small{font-family:var(--font-mono);font-weight:400;font-size:.64rem;letter-spacing:.14em;color:var(--text-3)}
.bifur-node.root{border-color:rgba(94,234,212,.55);color:var(--teal);box-shadow:0 0 26px rgba(94,234,212,.14)}
.bifur-lines{position:relative;width:min(560px,86%);height:34px}
.bifur-lines span{position:absolute;top:0;width:2px;height:34px;background:var(--line-2)}
.bifur-lines span:first-child{left:25%}
.bifur-lines span:last-child{right:25%}
.bifur-lines::before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:var(--line-2)}
.bifur-kids{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:640px}
@media (max-width:560px){.bifur-kids{grid-template-columns:1fr}}
.bifur-node.nlu{border-color:rgba(94,234,212,.4);color:#c9f7ee}
.bifur-node.nlg{border-color:rgba(167,139,250,.45);color:#e4dcff}
.area-panel{min-height:100%}
.area-def{color:var(--text-2);font-size:1.06rem}

/* NLU extraction */
.nlu-stage{border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:1rem;background:rgba(6,10,18,.5)}
.nlu-tokens{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.9rem}
.nlu-tokens .tok{transition:all .3s}
.nlu-tokens .tok.src-hit{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.1);color:var(--teal)}
.slot-table{display:flex;flex-direction:column;gap:.45rem}
.slot-row{display:grid;grid-template-columns:10rem 1fr;gap:.7rem;align-items:center;font-size:.95rem}
.slot-row .slot-k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
.slot-row .slot-v{
  border:1px solid var(--line);border-radius:8px;padding:.3rem .7rem;background:rgba(8,13,24,.6);
  opacity:0;transform:translateX(-8px);transition:all .45s cubic-bezier(.2,.7,.2,1);
}
.slot-row.filled .slot-v{opacity:1;transform:none;border-color:rgba(94,234,212,.5);color:var(--teal)}

/* NLG flow */
.nlg-flow{display:flex;flex-direction:column;gap:.7rem}
.nlg-box{
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.7rem .9rem;background:rgba(8,13,24,.6);
  font-size:.95rem;
}
.nlg-box .nb-k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase;display:block;margin-bottom:.25rem}
.nlg-box.model{text-align:center;border-color:rgba(167,139,250,.45);color:#d9cdfd;font-family:var(--font-mono);font-size:.88rem;letter-spacing:.12em}
.nlg-down{text-align:center;color:var(--text-3);font-size:.75rem}
.type-line{min-height:1.5em;font-family:var(--font-display)}
.type-line .caret{display:inline-block;width:.55em;border-bottom:2px solid var(--teal);animation:caretBlink 1s steps(1) infinite;margin-left:2px;transform:translateY(2px)}
@keyframes caretBlink{50%{opacity:0}}

/* ====================== 04 · UNITS ZOOM ====================== */
.zoom-shell{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:clamp(1.1rem,2.6vw,1.7rem)}
.zoom-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.zoom-crumb{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.crumb-btn{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);padding:.35rem .7rem;border-radius:7px;border:1px solid transparent;
}
.crumb-btn[aria-current="true"]{color:var(--teal);border-color:rgba(94,234,212,.45);background:rgba(94,234,212,.07)}
.crumb-btn:enabled:hover{color:var(--text)}
.crumb-sep{color:var(--text-3);font-size:.7rem}
.depth-dots{display:flex;gap:.35rem}
.depth-dots i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(148,163,184,.25);transition:all .3s}
.depth-dots i.on{background:var(--teal);transform:scale(1.2)}
.zoom-stage{
  border:1px dashed var(--line-2);border-radius:var(--radius-s);background:rgba(6,10,18,.5);
  padding:clamp(1rem,3vw,1.8rem);min-height:230px;display:flex;flex-direction:column;gap:1rem;justify-content:center;
  animation:zoomIn .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes zoomIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.z-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch}
.z-card{
  border:1px solid var(--line);border-radius:var(--radius-s);background:rgba(8,13,24,.6);
  padding:.75rem 1rem;text-align:left;transition:all .2s;display:flex;flex-direction:column;gap:.2rem;
}
button.z-card:hover{border-color:var(--teal);background:rgba(94,234,212,.06);transform:translateY(-2px)}
.z-card .z-k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
.z-card .z-doc-t{font-family:var(--font-display);font-size:1.05rem}
.z-card .z-sent-t{font-size:1.05rem}
.z-card .hint{font-size:.72rem;color:var(--teal)}
button.z-card .hint{opacity:0;transition:opacity .2s}
button.z-card:hover .hint,button.z-card:focus-visible .hint{opacity:1}
.z-toks{display:flex;flex-wrap:wrap;gap:.4rem}
button.z-tok{transition:all .15s}
button.z-tok:hover{border-color:var(--sky);color:var(--sky);transform:translateY(-2px)}
.z-chars{display:flex;flex-wrap:wrap;gap:.35rem}
.z-chars .ch{
  font-family:var(--font-mono);font-size:1.1rem;border:1px solid rgba(56,189,248,.4);color:var(--sky);
  border-radius:7px;padding:.3rem .55rem;background:rgba(56,189,248,.06);animation:chIn .3s backwards;
}
@keyframes chIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.z-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--text-3);text-transform:uppercase}
.defs-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin-top:1.2rem}
.defcard{border:1px solid var(--line);border-radius:var(--radius-s);padding:.85rem 1rem;background:rgba(8,13,24,.5);transition:border-color .3s,background .3s}
.defcard.hot{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.06)}
.defcard .df-k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;color:var(--teal);text-transform:uppercase;margin-bottom:.3rem;display:block}
.defcard p{margin:0;font-size:.9rem;color:var(--text-2)}
.vocab-note{margin-top:1rem;font-size:.9rem;color:var(--text-2)}
.vocab-note .mono-list{font-family:var(--font-mono);color:var(--sky);font-size:.74rem}

/* -------- annotated structure sentence / POS colors -------- */
.pos-NOUN    {--c:#60a5fa;--cb:rgba(96,165,250,.45);--cf:rgba(96,165,250,.12)}
.pos-PROPN   {--c:#a5b4fc;--cb:rgba(165,180,252,.5);--cf:rgba(165,180,252,.13)}
.pos-VERB    {--c:#34d399;--cb:rgba(52,211,153,.45);--cf:rgba(52,211,153,.12)}
.pos-ADJ     {--c:#c084fc;--cb:rgba(192,132,252,.45);--cf:rgba(192,132,252,.12)}
.pos-ADV     {--c:#fbbf24;--cb:rgba(251,191,36,.45);--cf:rgba(251,191,36,.12)}
.pos-PRON    {--c:#f472b6;--cb:rgba(244,114,182,.45);--cf:rgba(244,114,182,.12)}
.pos-DET     {--c:#94a3b8;--cb:rgba(148,163,184,.45);--cf:rgba(148,163,184,.12)}
.pos-ADP     {--c:#22d3ee;--cb:rgba(34,211,238,.45);--cf:rgba(34,211,238,.12)}
.pos-CONJ    {--c:#fb7185;--cb:rgba(251,113,133,.45);--cf:rgba(251,113,133,.12)}
.pos-NUM     {--c:#a3e635;--cb:rgba(163,230,53,.45);--cf:rgba(163,230,53,.12)}
.pos-X       {--c:#64748b;--cb:rgba(100,116,139,.45);--cf:rgba(100,116,139,.12)}

.annot-sent{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;padding:1rem 0}
.aw{
  border:1px solid var(--cb);border-radius:8px;padding:.3rem .55rem;background:var(--cf);
  color:var(--c);font-family:var(--font-display);font-size:clamp(1.05rem,2.2vw,1.35rem);
  transition:transform .18s,box-shadow .18s;
}
button.aw:hover,button.aw:focus-visible,button.aw[aria-expanded="true"]{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.aw .aw-tag{display:block;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;opacity:.85;text-align:center;margin-top:.15rem}
.pos-legend{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.8rem}
.lg-item{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-2)}
.lg-item i{width:.7rem;height:.7rem;border-radius:3px;background:var(--c);border:1px solid var(--cb)}

/* POS inspector */
.insp-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(240px,4fr);gap:1.3rem;align-items:start}
@media (max-width:880px){.insp-wrap{grid-template-columns:1fr}}
.insp-detail{
  border:1px solid var(--line);border-radius:var(--radius-s);background:rgba(6,10,18,.6);
  padding:1rem 1.1rem;position:sticky;top:90px;min-height:170px;
}
.insp-detail .d-word{font-family:var(--font-display);font-size:1.7rem;margin-bottom:.2rem}
.insp-detail .d-tag{margin-bottom:.6rem;display:inline-block}
.insp-detail dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.93rem}
.insp-detail dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;padding-top:.2em;white-space:nowrap}
.insp-detail dd{margin:0;color:var(--text-2)}
.insp-hint{font-size:.86rem;color:var(--text-3);margin-top:.8rem;text-align:center}

/* POS category grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.8rem;margin-top:1rem}
.cat-card{
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.85rem 1rem;background:rgba(8,13,24,.55);
  transition:border-color .2s,background .2s,transform .2s;cursor:default;
}
.cat-card:hover,.cat-card.hl{border-color:var(--cb);background:var(--cf);transform:translateY(-2px)}
.cat-card h5{margin:0 0 .2rem;font-family:var(--font-mono);font-size:.88rem;letter-spacing:.12em;color:var(--c)}
.cat-card .cat-def{font-size:.88rem;color:var(--text-2);margin:0 0 .45rem}
.cat-card .cat-ex{font-family:var(--font-mono);font-size:.8rem;color:var(--text-3)}
.cat-extra{margin-top:.9rem;text-align:center;font-size:.86rem;color:var(--text-3)}
.cat-extra .chip{margin-inline:.15rem}

/* contextual flips */
.flip-demo{display:flex;flex-direction:column;gap:.8rem}
.flip-row{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;width:100%;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.85rem 1rem;background:rgba(8,13,24,.55);
  transition:border-color .25s,background .25s;
}
.flip-row:hover,.flip-row.active{border-color:var(--cb);background:var(--cf)}
.flip-sent{font-family:var(--font-display);font-size:clamp(1.05rem,2.2vw,1.28rem)}
.flip-sent .pv{color:var(--c);font-weight:700;border-bottom:2px solid var(--c);padding:0 .1em}
.flip-chip{perspective:500px;width:6.4rem;height:2.8rem;flex:none}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.8,.3,1)}
.flip-row.active .flip-inner,.flip-row:hover .flip-inner{transform:rotateX(180deg)}
.flip-face{
  position:absolute;inset:0;display:grid;place-items:center;border-radius:9px;backface-visibility:hidden;
  font-family:var(--font-mono);font-size:.92rem;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--line-2);background:rgba(6,10,18,.7);color:var(--text-3);
}
.flip-face.back{transform:rotateX(180deg);color:var(--c);border-color:var(--cb);background:var(--cf)}
.flip-caption{font-size:.95rem;color:var(--text-2);margin:.2rem 0 0}

/* sequence labeling */
.seq-wrap{display:flex;flex-direction:column;gap:1.1rem;align-items:center}
.seq-pair{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center}
.seq-item{display:flex;flex-direction:column;align-items:center;gap:.45rem}
.seq-item .lab{
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--c);
  border:1px solid var(--cb);background:var(--cf);border-radius:6px;padding:.16rem .5rem;
  opacity:0;transform:translateY(-8px);transition:all .4s;
}
.seq-item .lab.on{opacity:1;transform:none}
.seq-item .tok.on{border-color:var(--cb);color:var(--c)}
.seq-term{
  font-family:var(--font-mono);letter-spacing:.22em;color:var(--teal);font-size:.85rem;
  border:1px dashed rgba(94,234,212,.5);border-radius:999px;padding:.5rem 1.3rem;background:rgba(94,234,212,.05);
}
.seq-def{font-size:1rem;color:var(--text-2);text-align:center;max-width:60ch;margin:0}

/* linguistic levels */
.ling-tree{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:1rem}
.ling-root{
  font-family:var(--font-mono);font-size:.88rem;letter-spacing:.2em;border:1px solid var(--line-2);
  border-radius:10px;padding:.45rem 1.3rem;background:rgba(8,13,24,.7);
}
.ling-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;width:100%;max-width:760px;margin-top:26px;position:relative}
.ling-branches::before{content:"";position:absolute;top:-26px;left:16.6%;right:16.6%;height:2px;background:var(--line-2)}
.ling-branches::after{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;background:var(--line-2);transform:translateX(-50%)}
.ling-node{border:1px solid var(--line);border-radius:var(--radius-s);padding:.9rem 1rem;background:rgba(8,13,24,.55);position:relative}
.ling-node::before{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;background:var(--line-2)}
.ling-node h5{margin:0 0 .25rem;font-family:var(--font-mono);font-size:.88rem;letter-spacing:.14em}
.ling-node p{margin:0;font-size:.9rem;color:var(--text-2)}
.ling-node .ln-focus{
  display:inline-block;margin-top:.5rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  color:var(--teal);border:1px solid rgba(94,234,212,.45);border-radius:999px;padding:.14rem .6rem;background:rgba(94,234,212,.06);
}
.ling-node.focus{border-color:rgba(94,234,212,.55);background:rgba(94,234,212,.05)}
@media (max-width:640px){
  .ling-branches{grid-template-columns:1fr}
  .ling-branches::before,.ling-branches::after,.ling-node::before{display:none}
}

/* ============================== 06 · NER ============================== */
.ner-sents{display:flex;flex-direction:column;gap:1.1rem}
.ner-line{font-family:var(--font-display);font-size:clamp(1.12rem,2.4vw,1.5rem);text-align:center;line-height:2.4}
.ent{
  position:relative;padding:.14em .3em;border-radius:7px;border:1px solid;cursor:help;white-space:nowrap;
  transition:box-shadow .2s;
}
.ent:hover{box-shadow:0 0 18px -4px var(--c)}
.ent .et{
  position:absolute;top:-1.5em;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;color:var(--c);white-space:nowrap;
}
.ner-PERSON{--c:#2dd4bf;--cb:rgba(45,212,191,.55);--cf:rgba(45,212,191,.1)}
.ner-ORGANIZATION{--c:#a78bfa;--cb:rgba(167,139,250,.55);--cf:rgba(167,139,250,.1)}
.ner-LOCATION{--c:#4ade80;--cb:rgba(74,222,128,.55);--cf:rgba(74,222,128,.1)}
.ner-DATE{--c:#fbbf24;--cb:rgba(251,191,36,.55);--cf:rgba(251,191,36,.1)}
.ner-TIME{--c:#fb923c;--cb:rgba(251,146,60,.55);--cf:rgba(251,146,60,.1)}
.ner-MONEY{--c:#facc15;--cb:rgba(250,204,21,.55);--cf:rgba(250,204,21,.1)}
.ner-PRODUCT{--c:#38bdf8;--cb:rgba(56,189,248,.55);--cf:rgba(56,189,248,.1)}
.ner-EVENT{--c:#f472b6;--cb:rgba(244,114,182,.55);--cf:rgba(244,114,182,.1)}
.ner-O{--c:#64748b;--cb:rgba(100,116,139,.5);--cf:rgba(100,116,139,.1)}
.ent{color:var(--c);border-color:var(--cb);background:var(--cf)}
.ner-toggle-row{display:flex;justify-content:center}
.tok-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.45rem;margin-top:1rem}
.tt-cell{
  border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem;text-align:center;background:rgba(8,13,24,.6);
  animation:chIn .3s backwards;
}
.tt-cell .t-w{font-family:var(--font-mono);font-size:.88rem;display:block}
.tt-cell .t-l{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;display:block;margin-top:.15rem;color:var(--c)}
.tt-cell.is-o .t-l{color:var(--text-3)}
.tt-cell:not(.is-o){border-color:var(--cb)}
.ner-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem;margin-top:1rem}
.cat-pill{
  border:1px solid var(--cb);border-radius:999px;padding:.42rem .8rem;text-align:center;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;color:var(--c);background:var(--cf);
  transition:transform .15s;cursor:default;
}
.cat-pill:hover{transform:translateY(-2px)}
.cat-pill small{display:block;font-family:var(--font-body);font-size:.7rem;color:var(--text-3);letter-spacing:0;text-transform:none;margin-top:.1rem}

/* POS vs NER compare */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:840px){.cmp-grid{grid-template-columns:1fr}}
.cmp-panel{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--panel)}
.cmp-panel.nlu-side{border-top:3px solid var(--teal)}
.cmp-panel.ner-side{border-top:3px solid var(--violet)}
.cmp-panel h4{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.18em;margin-bottom:.15rem}
.cmp-panel .cmp-sub{font-size:.88rem;color:var(--text-3);margin:0 0 1rem}
.cmp-rows{display:flex;flex-direction:column;gap:.45rem}
.cmp-row{
  display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;
  border:1px solid var(--line);border-radius:9px;padding:.45rem .8rem;background:rgba(8,13,24,.55);
  transition:border-color .2s,background .2s;
}
.cmp-row .cmp-w{font-family:var(--font-mono);font-size:1rem}
.cmp-row.hl{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.07)}
.cmp-tag{font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.1em;color:var(--c);border:1px solid var(--cb);background:var(--cf);border-radius:6px;padding:.18rem .55rem}
.cmp-banner{
  margin-top:1.2rem;display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;text-align:center;
  border:1px solid rgba(94,234,212,.4);border-radius:var(--radius);padding:1.1rem 1.4rem;
  background:radial-gradient(500px 160px at 50% 0%,rgba(94,234,212,.07),transparent);
}
@media (max-width:680px){.cmp-banner{grid-template-columns:1fr}}
.cmp-banner .cb-side h5{margin:0 0 .2rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em}
.cmp-banner .cb-side p{margin:0;font-size:.9rem;color:var(--text-2)}
.cmp-banner .cb-pos h5{color:var(--teal)}
.cmp-banner .cb-ner h5{color:var(--violet)}
.cmp-banner .cb-vs{font-family:var(--font-mono);color:var(--text-3);font-size:.72rem}

/* ============================ 07 · TASK WEB ============================ */
.web-stage{position:relative;height:700px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(6,10,18,.5);overflow:hidden}
.web-svg{position:absolute;inset:0;width:100%;height:100%}
.web-svg line{stroke:var(--line-2);stroke-width:1;stroke-dasharray:3 5;transition:stroke .3s}
.web-svg line.lit{stroke:var(--teal);filter:drop-shadow(0 0 6px rgba(94,234,212,.6))}
.web-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(300px,44%);border:1px solid rgba(94,234,212,.55);border-radius:14px;padding:.9rem 1rem;text-align:center;
  background:radial-gradient(260px 120px at 50% 20%,rgba(94,234,212,.12),rgba(8,13,24,.92));z-index:2;
  box-shadow:0 0 40px rgba(94,234,212,.12);
}
.web-center .wc-k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--teal);text-transform:uppercase;display:block;margin-bottom:.35rem}
.web-center .wc-sent{font-family:var(--font-display);font-size:1.05rem;line-height:1.45}
.web-node{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:999px;padding:.6rem 1.1rem;color:var(--text-2);
  background:rgba(8,13,24,.9);transition:all .25s;white-space:nowrap;
}
.web-node:hover,.web-node[aria-pressed="true"]{border-color:var(--teal);color:var(--teal);background:rgba(94,234,212,.1);box-shadow:0 0 20px rgba(94,234,212,.2)}
@media (max-width:760px){
  .web-stage{display:block;height:auto;padding:1rem}
  .web-svg{display:none}
  .web-center{position:static;transform:none;width:auto;margin-bottom:1rem}
  .web-node{position:static;transform:none;display:inline-block;margin:.2rem .25rem}
}
.web-out{margin-top:1.1rem;border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem 1.2rem;background:rgba(8,13,24,.6);animation:panelIn .3s}
.web-out .wo-head{display:flex;gap:.7rem;align-items:baseline;margin-bottom:.6rem;flex-wrap:wrap}
.web-out .wo-head h4{margin:0;font-family:var(--font-mono);font-size:.86rem;letter-spacing:.16em;color:var(--teal)}
.web-out .wo-head span{font-size:.86rem;color:var(--text-3)}
.wo-body{font-size:1.02rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.wo-body .demo-line{font-family:var(--font-display);font-size:1.12rem}
.task-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem;margin-top:1.2rem}
.tx-card{border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:1rem;background:rgba(8,13,24,.4)}
.tx-card h5{margin:0 0 .3rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;color:var(--sky)}
.tx-card p{margin:0;font-size:.88rem;color:var(--text-2)}
.speech-note{margin-top:1.1rem;text-align:center;font-size:.9rem;color:var(--text-3);font-style:italic}

/* task type map */
.ttm{display:flex;flex-direction:column;gap:.7rem}
.ttm-row{
  display:grid;grid-template-columns:minmax(190px,240px) 1fr minmax(180px,240px);gap:1rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius-s);padding:.85rem 1.1rem;background:rgba(8,13,24,.5);
}
@media (max-width:820px){.ttm-row{grid-template-columns:1fr}}
.ttm-pattern{font-family:var(--font-mono);font-size:.9rem;color:var(--teal);letter-spacing:.04em}
.ttm-pattern b{color:var(--text);font-weight:700}
.ttm-ex{font-size:.95rem;color:var(--text-2)}
.ttm-ex .ex-io{font-family:var(--font-mono);font-size:.8rem;color:var(--text-3)}
.ttm-tasks{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
.ttm-tasks .chip{font-size:.75rem}

/* ========================== 08 · DATASETS ========================== */
.ds-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.ds-formula{font-family:var(--font-mono);font-size:.7rem;color:var(--sky);letter-spacing:.06em}
.ds-table{width:100%;border-collapse:collapse;font-size:.97rem}
.ds-table th{
  text-align:left;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--text-3);
  text-transform:uppercase;padding:.4rem .7rem;border-bottom:1px solid var(--line-2);
}
.ds-table td{padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.ds-table tr td:first-child{font-family:var(--font-display)}
.ds-table .lbl{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;border-radius:6px;padding:.14rem .5rem;border:1px solid var(--cb);color:var(--c);background:var(--cf);white-space:nowrap}
.lbl.pos-lbl{--c:#a7f3d0;--cb:rgba(52,211,153,.55);--cf:rgba(52,211,153,.09)}
.lbl.neg-lbl{--c:#ffd7de;--cb:rgba(251,113,133,.55);--cf:rgba(251,113,133,.09)}
.lbl.neu-lbl{--c:#d3d9ff;--cb:rgba(129,140,248,.55);--cf:rgba(129,140,248,.09)}
.pair-card{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;max-width:680px;margin:0 auto}
@media (max-width:620px){.pair-card{grid-template-columns:1fr}}
.pair-box{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem;text-align:center;background:rgba(8,13,24,.6)}
.pair-box .pb-k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;color:var(--text-3);display:block;margin-bottom:.4rem;text-transform:uppercase}
.pair-box .pb-t{font-family:var(--font-display);font-size:1.3rem}
.pair-arrow{color:var(--teal);font-size:1.1rem}
.qa-card{display:flex;flex-direction:column;gap:.7rem;max-width:640px;margin:0 auto}
.qa-box{border:1px solid var(--line);border-radius:var(--radius-s);padding:.8rem 1rem;background:rgba(8,13,24,.6);font-size:1rem}
.qa-box .qb-k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;color:var(--text-3);display:block;margin-bottom:.3rem;text-transform:uppercase}
.qa-box.ans{border-color:rgba(94,234,212,.55)}
.qa-box .span-ans{color:var(--teal);font-weight:600;border-bottom:2px solid var(--teal)}
.lm-windows{display:flex;flex-direction:column;gap:.5rem;max-width:560px;margin:0 auto}
.lm-win{
  display:flex;align-items:center;gap:.6rem;border:1px solid var(--line);border-radius:9px;
  padding:.45rem .8rem;background:rgba(8,13,24,.6);animation:chIn .4s backwards;
}
.lm-win .lm-in{font-family:var(--font-mono);font-size:.88rem;color:var(--text-2)}
.lm-win .lm-arr{color:var(--teal)}
.lm-win .lm-out{font-family:var(--font-mono);font-size:.88rem;font-weight:700;color:var(--teal);border:1px solid rgba(94,234,212,.5);border-radius:6px;padding:.05rem .45rem;background:rgba(94,234,212,.08)}
.ds-note{margin-top:1rem;font-size:.86rem;color:var(--text-2);border-left:3px solid var(--sky);padding:.5rem .9rem;background:rgba(56,189,248,.05);border-radius:0 8px 8px 0}
.ds-note b{color:var(--sky)}

/* label types */
.lt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.lt-card{border:1px solid var(--line);border-radius:var(--radius-s);padding:1.05rem 1.1rem;background:rgba(8,13,24,.5);display:flex;flex-direction:column;gap:.5rem}
.lt-card .lt-k{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;color:var(--teal);text-transform:uppercase}
.lt-card .lt-def{font-size:.93rem;color:var(--text-2);margin:0}
.lt-card .lt-ex{border:1px dashed var(--line-2);border-radius:8px;padding:.55rem .75rem;font-size:.88rem;margin-top:auto}

/* split viz */
.split-shell{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:clamp(1.1rem,2.6vw,1.7rem)}
.split-bar{
  display:flex;height:86px;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);
  background:rgba(8,13,24,.7);margin:1rem 0 .5rem;
}
.split-seg{
  display:flex;flex-direction:column;justify-content:center;padding-inline:.9rem;min-width:0;
  transition:flex 1s cubic-bezier(.3,.8,.3,1);position:relative;overflow:hidden;white-space:nowrap;
}
.split-seg .sg-k{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;font-weight:700}
.split-seg .sg-v{font-size:.8rem;opacity:.85}
.seg-whole{flex:100;background:rgba(148,163,184,.12)}
.seg-whole .sg-k{color:var(--text-2)}
.split-bar.split .seg-train{flex:70;background:linear-gradient(180deg,rgba(129,140,248,.32),rgba(129,140,248,.16))}
.split-bar.split .seg-val{flex:15;background:linear-gradient(180deg,rgba(94,234,212,.3),rgba(94,234,212,.14))}
.split-bar.split .seg-test{flex:15;background:linear-gradient(180deg,rgba(251,191,36,.28),rgba(251,191,36,.13))}
.split-bar.split .seg-whole{flex:0;display:none}
.seg-train .sg-k{color:#c7cdff}.seg-val .sg-k{color:#a7f3e6}.seg-test .sg-k{color:#fde5b0}
.role-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin-top:1.2rem}
.role-card{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem;background:rgba(8,13,24,.5)}
.role-card h5{margin:0 0 .3rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em}
.role-card.train h5{color:#c7cdff}.role-card.val h5{color:#a7f3e6}.role-card.test h5{color:#fde5b0}
.role-card p{margin:0;font-size:.93rem;color:var(--text-2)}
.leak-strip{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:1.1rem;align-items:center}
.sample-dot{
  width:1.05rem;height:1.05rem;border-radius:4px;background:rgba(148,163,184,.25);position:relative;
  font-size:0;transition:background .3s;
}
.sample-dot.tr{background:rgba(129,140,248,.55)}
.sample-dot.va{background:rgba(94,234,212,.6)}
.sample-dot.te{background:rgba(251,191,36,.55)}
.sample-dot.dup{background:var(--rose);box-shadow:0 0 12px rgba(251,113,133,.7);animation:notPop .4s}
.split-legend{display:flex;gap:1.1rem;margin-top:.7rem;font-size:.8rem;color:var(--text-3)}
.split-legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.35rem;vertical-align:-1px}

/* =========================== 09 · METRICS =========================== */
.mmap-wrap{display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,7fr);gap:1.6rem;align-items:start}
@media (max-width:980px){.mmap-wrap{grid-template-columns:1fr}}
.mmap{border:1px solid rgba(94,234,212,.35);border-radius:var(--radius);background:rgba(6,10,18,.7);padding:1.1rem 1.2rem}
@media (min-width:981px){.mmap{position:sticky;top:84px}}
.mmap h4{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.2em;color:var(--teal);margin-bottom:.9rem}
.mmap-row{
  display:flex;justify-content:space-between;gap:.8rem;align-items:center;width:100%;text-align:left;
  padding:.5rem .3rem;border-bottom:1px dashed var(--line);transition:background .2s;border-radius:6px;
}
.mmap-row:hover{background:rgba(94,234,212,.05)}
.mmap-row .mt{font-size:.95rem;color:var(--text)}
.mmap-row .mm{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end}
.mmap-row .chip{font-size:.62rem;padding:.12rem .5rem;border-color:rgba(94,234,212,.3);color:var(--teal)}
.mmap-foot{font-size:.78rem;color:var(--text-3);margin-top:.8rem}
.mmap-intro p{color:var(--text-2);max-width:60ch}

/* confusion matrix + metric cards */
.cm-grid{display:grid;grid-template-columns:auto minmax(240px,1fr);gap:1.6rem;align-items:center}
@media (max-width:860px){.cm-grid{grid-template-columns:1fr}}
.cmx-wrap{display:grid;grid-template-columns:auto auto;gap:.5rem;align-items:end;justify-content:center;max-width:100%;overflow-x:auto}
@media (max-width:560px){
  .cmx td,.cmx th{width:98px;height:76px}
  .cmx td .cx-n{font-size:1.5rem}
}
.cmx-axis{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center}
.cmx-axis.h{writing-mode:horizontal-tb;transform:none;grid-column:2}
.cmx{border-collapse:collapse;border:1px solid var(--line-2)}
.cmx td,.cmx th{
  border:1px solid var(--line);width:124px;height:88px;text-align:center;vertical-align:middle;padding:.4rem;
}
.cmx th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;color:var(--text-3);background:rgba(8,13,24,.7);height:auto}
.cmx td .cx-k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;display:block;color:var(--text-2)}
.cmx td .cx-n{font-family:var(--font-display);font-size:1.85rem;font-weight:700;display:block}
.cmx td.tp{background:rgba(52,211,153,.12)}.cmx td.tp .cx-n{color:var(--green)}
.cmx td.fn{background:rgba(251,113,133,.12)}.cmx td.fn .cx-n{color:var(--rose)}
.cmx td.fp{background:rgba(251,191,36,.1)}.cmx td.fp .cx-n{color:var(--amber)}
.cmx td.tn{background:rgba(148,163,184,.1)}.cmx td.tn .cx-n{color:#c3cede}
.pred-strip{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;justify-content:center}
.pred-chip{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.05em;border-radius:7px;padding:.3rem .45rem;
  border:1px solid var(--line);color:var(--text-3);animation:chIn .35s backwards;
}
.pred-chip .pc-a{opacity:.7}
.pred-chip.ok{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.07)}
.pred-chip.ok .pc-v{color:var(--green)}
.pred-chip.bad{border-color:rgba(251,113,133,.55);background:rgba(251,113,133,.08)}
.pred-chip.bad .pc-v{color:var(--rose)}
.metric-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-top:1.4rem}
.mcard{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem 1.05rem;background:rgba(8,13,24,.55);display:flex;flex-direction:column;gap:.4rem}
.mcard .mc-q{font-size:.78rem;color:var(--text-3);margin:0;font-style:italic}
.mcard h5{margin:0;font-family:var(--font-mono);font-size:.84rem;letter-spacing:.14em;color:var(--teal)}
.mcard .mc-val{font-family:var(--font-display);font-size:2.15rem;font-weight:700;color:var(--text)}
.mcard .mc-formula{font-family:var(--font-mono);font-size:.72rem;color:var(--text-3);line-height:1.6}
.f1-scale{display:flex;gap:1.2rem;align-items:center;margin-top:1.2rem;border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:1rem 1.2rem;flex-wrap:wrap}
.f1-scale svg{width:230px;height:110px;flex:none}
.f1-scale p{margin:0;font-size:.93rem;color:var(--text-2);flex:1;min-width:220px}
.f1-scale b{color:var(--teal)}

/* accuracy trap */
.trap-stage{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:var(--panel);text-align:center;position:relative;overflow:hidden}
.trap-scenario{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.2rem;font-size:.95rem;color:var(--text-2)}
.trap-scenario b{color:var(--text)}
.trap-display{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
.trap-num{font-family:var(--font-display);font-size:clamp(3.2rem,8vw,5.2rem);font-weight:700;color:var(--green);text-shadow:0 0 34px rgba(52,211,153,.4);line-height:1}
.trap-k{font-family:var(--font-mono);letter-spacing:.24em;font-size:.78rem;color:var(--text-3);text-transform:uppercase}
.trap-flip .trap-num{color:var(--rose);text-shadow:0 0 34px rgba(251,113,133,.4)}
.trap-sub{font-size:1rem;color:var(--text-2);max-width:52ch;margin:0 auto}
.trap-chips{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.6rem}
.trap-stage.alarm{border-color:rgba(251,113,133,.6);animation:alarmIn .5s}
@keyframes alarmIn{0%{box-shadow:0 0 0 0 rgba(251,113,133,.4)}100%{box-shadow:0 0 60px 6px rgba(251,113,133,.18)}}

/* pos / ner metric tables */
.tagcheck{width:100%;max-width:640px;border-collapse:collapse;margin:0 auto;font-size:1rem}
.tagcheck td,.tagcheck th{border:1px solid var(--line);padding:.5rem .8rem;text-align:center}
.tagcheck th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase;background:rgba(8,13,24,.6)}
.tagcheck .ok-t{color:var(--green);font-family:var(--font-mono);font-size:.8rem}
.tagcheck .bad-t{color:var(--rose);font-family:var(--font-mono);font-size:.8rem}
.tagcheck .mis{background:rgba(251,113,133,.12);color:var(--rose);font-weight:700}
.span-demo{display:flex;flex-direction:column;gap:.9rem;max-width:640px;margin:0 auto}
.span-line{font-family:var(--font-display);font-size:1.15rem;display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;justify-content:center}
.span-line .sl-k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:var(--text-3);min-width:8.2rem;text-transform:uppercase}
.span-ent{border:1px solid var(--cb);background:var(--cf);color:var(--c);border-radius:8px;padding:.15em .4em;margin-inline:.1em}
.span-miss{color:var(--text-3);border-bottom:2px dashed var(--line-2)}
.verdict{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.bio-note{margin-top:1rem;display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.88rem;color:var(--text-3)}
.bio-chip{font-family:var(--font-mono);font-size:.74rem;border:1px solid var(--line-2);border-radius:6px;padding:.14rem .45rem;color:var(--text-2)}

/* BLEU / ROUGE */
.bleu-block{display:flex;flex-direction:column;gap:1rem;max-width:720px;margin:0 auto}
.bleu-line{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;border:1px solid var(--line);border-radius:var(--radius-s);padding:.8rem 1rem;background:rgba(8,13,24,.55)}
.bleu-line .bl-k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--text-3);min-width:8.6rem;text-transform:uppercase}
.w-chip{font-family:var(--font-mono);font-size:.92rem;border:1px solid var(--line);border-radius:6px;padding:.12rem .4rem;color:var(--text-3)}
.w-chip.hit{color:#a7f3d0;border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.09)}
.overlap-bar{display:flex;align-items:center;gap:.8rem}
.overlap-bar .meter>i.gold{background:linear-gradient(90deg,var(--green),var(--teal))}
.overlap-bar .meter>i.zero{background:var(--rose)}
.overlap-bar .ob-v{font-family:var(--font-mono);font-size:.8rem;color:var(--text-2);width:8rem;text-align:right}
.rouge-ref mark{background:rgba(94,234,212,.22);color:#c9f7ee;border-radius:4px;padding:0 .12em}
.rouge-box{border:1px solid var(--line);border-radius:var(--radius-s);padding:.9rem 1.1rem;background:rgba(8,13,24,.55);font-size:1.02rem;line-height:1.8}
.rouge-box .rb-k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--text-3);display:block;margin-bottom:.4rem;text-transform:uppercase}

/* perplexity */
.ppl-answer{text-align:center;margin-bottom:1.2rem}
.answer-chip{
  display:inline-block;font-family:var(--font-mono);font-size:1.15rem;font-weight:700;color:#05231f;
  background:var(--teal);border-radius:9px;padding:.3rem .9rem;box-shadow:0 0 26px rgba(94,234,212,.35);
}
.ppl-models{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:720px){.ppl-models{grid-template-columns:1fr}}
.ppl-model{border:1px solid var(--line);border-radius:var(--radius-s);padding:1rem 1.1rem;background:rgba(8,13,24,.55);transition:border-color .4s}
.ppl-model.win{border-color:rgba(52,211,153,.55)}
.ppl-model.lose{border-color:rgba(251,191,36,.4)}
.ppl-model h5{margin:0 0 .7rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;color:var(--text-2)}
.prow{display:grid;grid-template-columns:6.2rem 1fr 3.4rem;gap:.7rem;align-items:center;margin-bottom:.5rem;font-size:.9rem}
.prow .pw{font-family:var(--font-mono)}
.prow .pw.real{color:var(--teal);font-weight:700}
.prow .pnum{font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);text-align:right}
.prow .pf{height:10px;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--indigo));transition:width .8s cubic-bezier(.2,.7,.2,1);min-width:2px}
.prow.dim .pf{background:rgba(148,163,184,.4)}
.ppl-verdict{margin-top:1rem;text-align:center;font-size:1rem;color:var(--text-2)}
.ppl-verdict b{color:var(--green)}
details.math{max-width:640px;margin:1.2rem auto 0;border:1px dashed var(--line-2);border-radius:var(--radius-s);padding:.7rem 1rem}
details.math summary{cursor:pointer;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;color:var(--text-3);text-transform:uppercase}
details.math[open] summary{margin-bottom:.6rem;color:var(--teal)}
details.math p{font-size:.95rem;color:var(--text-2);margin:.4rem 0}

/* calculator */
.calc-grid{display:grid;grid-template-columns:minmax(280px,5fr) minmax(300px,7fr);gap:1.5rem}
@media (max-width:880px){.calc-grid{grid-template-columns:1fr}}
.calc-sliders{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--line);border-radius:var(--radius-s);padding:1.1rem 1.2rem;background:rgba(8,13,24,.55)}
.slider-row{display:grid;grid-template-columns:3.2rem 1fr 3.4rem;gap:.8rem;align-items:center}
.slider-row label{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em}
.slider-row output{font-family:var(--font-mono);font-size:.88rem;text-align:right;color:var(--text-2)}
.slider-row input[type="range"]{width:100%;accent-color:var(--teal)}
.sl-tp label{color:var(--green)}.sl-fp label{color:var(--amber)}.sl-fn label{color:var(--rose)}.sl-tn label{color:#c3cede}
.calc-presets{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.calc-cards{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:520px){.calc-cards{grid-template-columns:1fr}}
.calc-card{border:1px solid var(--line);border-radius:var(--radius-s);padding:.9rem 1rem;background:rgba(8,13,24,.55)}
.calc-card h5{margin:0 0 .1rem;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.16em;color:var(--teal)}
.calc-card .cc-v{font-family:var(--font-display);font-size:2.25rem;font-weight:700}
.calc-card .cc-b{height:7px;border-radius:99px;background:rgba(148,163,184,.14);overflow:hidden;margin-top:.45rem}
.calc-card .cc-b i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--indigo));transition:width .35s}
.calc-warn{margin-top:1rem}

/* pipeline */
.pipe-scenarios{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.3rem}
.pipe-flow{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem}
@media (max-width:1080px){.pipe-flow{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){.pipe-flow{grid-template-columns:repeat(2,1fr)}}
.pipe-step{
  border:1px solid var(--line);border-radius:10px;padding:.7rem .75rem;background:rgba(8,13,24,.6);
  min-height:124px;opacity:.35;transition:opacity .5s,transform .4s;display:flex;flex-direction:column;gap:.35rem;overflow:hidden;
}
.pipe-step.in{opacity:1;transform:translateY(0)}
.pipe-step .ps-k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}
.pipe-step .ps-v{font-size:.87rem;color:var(--text-2);line-height:1.45;overflow:hidden}
.pipe-step .ps-v b{color:var(--text)}

/* =========================== 10 · TIMELINE =========================== */
.timeline{position:relative;max-width:780px;margin:0 auto;padding-left:1.6rem}
.timeline::before{content:"";position:absolute;left:.45rem;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--teal),var(--indigo),var(--violet),rgba(167,139,250,.15))}
.era-tag{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.24em;color:var(--text-3);text-transform:uppercase;
  margin:1.8rem 0 .8rem;display:block;
}
.era-tag:first-child{margin-top:0}
.tl-item{position:relative;padding:.35rem 0 .35rem 1.2rem}
.tl-item::before{
  content:"";position:absolute;left:-1.45rem;top:.95rem;width:.72rem;height:.72rem;border-radius:50%;
  background:var(--bg0);border:2px solid var(--line-2);transition:all .3s;
}
.tl-item:hover::before{border-color:var(--teal);box-shadow:0 0 12px rgba(94,234,212,.5)}
.tl-item .tl-name{font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.tl-item .tl-when{font-family:var(--font-mono);font-size:.66rem;color:var(--text-3);letter-spacing:.1em;margin-left:.5rem}
.tl-item p{margin:.15rem 0 0;font-size:.9rem;color:var(--text-2);max-width:60ch}
.tl-item.next .tl-name{color:var(--amber)}
.tl-item.next::before{border-color:var(--amber);box-shadow:0 0 12px rgba(251,191,36,.4)}
.badge-now,.badge-next{
  display:inline-block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;
  border-radius:999px;padding:.14rem .6rem;margin-left:.5rem;vertical-align:.15em;
}
.badge-now{color:#05231f;background:var(--teal);box-shadow:0 0 16px rgba(94,234,212,.4)}
.badge-next{color:#422c05;background:var(--amber)}
.journey-foot{margin-top:2rem;text-align:center;font-size:1rem;color:var(--text-2)}
.journey-foot b{color:var(--teal)}

/* CAS logo in hero (visible where the side rail is hidden) */
.hero-brand{display:flex;align-items:center;gap:.85rem;margin-bottom:2.2rem}
.hero-brand img{width:3.1rem;height:3.1rem;object-fit:contain;border-radius:10px;background:rgba(8,13,24,.5)}
.hero-brand .hb-t{display:flex;flex-direction:column;line-height:1.3}
.hero-brand .hb-t strong{font-family:var(--font-display);letter-spacing:.05em;font-size:1.1rem}
.hero-brand .hb-t small{color:var(--text-3);font-size:.82rem;letter-spacing:.04em}
@media (min-width:1100px){.hero-brand{display:none}}