/* =====================================================================
   首页 · 量化观测站
   ===================================================================== */

.shell{max-width:var(--max);margin:0 auto;padding:0 24px}
@media(max-width:640px){.shell{padding:0 16px}}

/* ---------------------------------------------------------------------
   知识跑马灯
   --------------------------------------------------------------------- */
.tape{
  background:var(--accent);color:var(--accent-ink);
  border-bottom:1px solid rgba(0,0,0,.18);
  overflow:hidden;position:relative;z-index:2;
}
.tape-track{
  display:flex;width:max-content;
  animation:tape 52s linear infinite;
  will-change:transform;
}
.tape:hover .tape-track{animation-play-state:paused}
.tape-group{display:flex;align-items:center;flex-shrink:0}
.tape-item{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 0;margin:0 26px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;
  white-space:nowrap;
}
.tape-item b{font-weight:700;letter-spacing:.08em}
.tape-item span{opacity:.78}
.tape-sep{opacity:.55;font-size:12px}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--panel);color:var(--panel-ink);
  border-bottom:1px solid var(--panel-line);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(237,243,236,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(237,243,236,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 65% 20%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 80% at 65% 20%,#000 20%,transparent 78%);
}
.hero::after{
  content:"";position:absolute;width:680px;height:680px;right:-220px;top:-280px;
  background:radial-gradient(circle,rgba(201,255,94,.16),transparent 62%);
  pointer-events:none;filter:blur(14px);
}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;
  padding:62px 0 48px;
}
.hero-copy{min-width:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;
  color:var(--panel-muted);text-transform:uppercase;margin-bottom:22px;
}
.eyebrow .live{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(201,255,94,.55);
  animation:livePulse 2.4s ease-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(201,255,94,.5)}
  70%{box-shadow:0 0 0 9px rgba(201,255,94,0)}
  100%{box-shadow:0 0 0 0 rgba(201,255,94,0)}
}
.hero h1{
  margin:0 0 24px;
  font-size:clamp(44px,6.4vw,82px);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:800;
}
.hero h1 .hl{
  display:inline-block;
  background:var(--accent);color:var(--accent-ink);
  padding:0 .1em .04em;margin:.06em 0;
  border-radius:7px;
  transform:rotate(-1deg);
  box-shadow:0 10px 40px rgba(201,255,94,.15);
}
.hero h1 .thin{font-weight:300;color:var(--panel-muted)}
.hero-lede{
  max-width:520px;margin:0 0 30px;
  color:var(--panel-muted);font-size:16.5px;line-height:1.85;
}
.hero-lede strong{color:var(--panel-ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;
  font-size:15px;font-weight:650;line-height:1;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:4px 4px 0 rgba(201,255,94,.22)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(201,255,94,.28)}
.btn-ghost{background:transparent;color:var(--panel-ink);border-color:var(--panel-line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.hero-promises{
  display:flex;flex-wrap:wrap;gap:16px;
  margin:0;padding:0;list-style:none;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--panel-muted);
}
.hero-promises li{display:inline-flex;align-items:center;gap:6px}
.hero-promises svg{width:13px;height:13px;color:var(--accent)}

/* 复利实验室 */
.lab{
  position:relative;
  background:linear-gradient(160deg,var(--panel-2),rgba(11,18,16,.7));
  border:1px solid var(--panel-line);
  border-radius:20px;
  padding:18px 18px 16px;
  box-shadow:0 30px 80px rgba(0,0,0,.38);
  min-width:0;
}
.lab::before{
  content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:
    linear-gradient(90deg,var(--accent) 0 12px,transparent 12px) top left/12px 1px no-repeat,
    linear-gradient(180deg,var(--accent) 0 12px,transparent 12px) top left/1px 12px no-repeat,
    linear-gradient(270deg,var(--accent) 0 12px,transparent 12px) top right/12px 1px no-repeat,
    linear-gradient(180deg,var(--accent) 0 12px,transparent 12px) top right/1px 12px no-repeat;
}
.lab-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.lab-dots{display:flex;gap:5px}
.lab-dots i{width:7px;height:7px;border-radius:50%;background:var(--panel-line)}
.lab-dots i:nth-child(1){background:#ff6b5e}
.lab-dots i:nth-child(2){background:#ffc857}
.lab-dots i:nth-child(3){background:var(--accent)}
.lab-title{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--panel-muted);
  margin-left:4px;text-transform:uppercase;
}
.lab-status{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;color:var(--accent);
  border:1px solid rgba(201,255,94,.28);border-radius:999px;padding:3px 8px;
}
.lab-status i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:livePulse 2.4s infinite}
.lab-value-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:var(--panel-muted);
  margin:0 0 4px;
}
.lab-value{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 2px;
  font-family:var(--font-mono);font-size:clamp(30px,3.6vw,42px);
  font-weight:700;line-height:1.1;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.lab-value small{font-size:13px;color:var(--panel-muted);font-weight:400;letter-spacing:0}
.lab-sub{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;color:var(--panel-muted);margin:0 0 12px;
}
.lab-sub .up{color:var(--up)}
.lab-chart{position:relative;height:196px;margin:0 -4px 14px}
.lab-chart canvas{width:100%;height:100%;display:block;touch-action:none}
.lab-tip{
  position:absolute;top:0;left:0;transform:translate(-50%,-6px);
  background:var(--panel-3);color:var(--panel-ink);
  border:1px solid var(--panel-line);border-radius:7px;
  padding:5px 8px;font-family:var(--font-mono);font-size:9.5px;line-height:1.5;
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;
}
.lab-tip.show{opacity:1}
.lab-controls{display:grid;gap:11px;margin-bottom:14px}
.lab-control{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.lab-control label{
  font-size:11.5px;color:var(--panel-muted);
  display:flex;align-items:center;gap:6px;
}
.lab-control label span{font-family:var(--font-mono);font-size:9px;color:var(--faint);letter-spacing:.08em}
.lab-control output{
  font-family:var(--font-mono);font-size:12px;color:var(--panel-ink);
  font-variant-numeric:tabular-nums;
}
.lab-control input[type="range"]{grid-column:1/-1}
.lab-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--panel-line);border:1px solid var(--panel-line);border-radius:10px;overflow:hidden;
}
.lab-metric{background:var(--panel-2);padding:9px 10px}
.lab-metric span{
  display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--panel-muted);text-transform:uppercase;margin-bottom:3px;
}
.lab-metric b{
  font-family:var(--font-mono);font-size:13.5px;font-weight:600;color:var(--panel-ink);
  font-variant-numeric:tabular-nums;
}
.lab-note{
  margin:11px 0 0;font-size:9.5px;line-height:1.6;color:var(--faint);
  font-family:var(--font-mono);letter-spacing:.02em;
}

/* 区间滑杆（全站复用） */
input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;border-radius:3px;outline:none;
  background:rgba(237,243,236,.18);
  margin:7px 0;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:2px solid var(--panel);
  box-shadow:0 0 0 1px var(--accent),0 0 14px rgba(201,255,94,.35);
  cursor:grab;
}
input[type="range"]::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--panel);
  box-shadow:0 0 0 1px var(--accent);cursor:grab;
}
input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}

/* Hero 底部数据 */
.hero-stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--panel-line);
}
.hero-stat{padding:20px 18px 22px;border-right:1px solid var(--panel-line)}
.hero-stat:last-child{border-right:0}
.hero-stat b{
  display:block;font-family:var(--font-mono);font-size:25px;font-weight:600;
  color:var(--panel-ink);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.hero-stat b em{font-style:normal;color:var(--accent);font-size:13px;margin-left:2px}
.hero-stat span{
  display:block;margin-top:7px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.12em;color:var(--panel-muted);text-transform:uppercase;
}

/* ---------------------------------------------------------------------
   通用 section / 标题
   --------------------------------------------------------------------- */
.section{padding:86px 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.section.tint{background:var(--paper-2)}
.section:last-of-type{border-bottom:0}
.sec-head{
  display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.75fr);
  gap:24px;align-items:end;margin-bottom:38px;
}
.sec-no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
  padding-bottom:8px;border-bottom:1px solid var(--line-2);
}
.sec-head h2{
  margin:0;font-size:clamp(30px,4vw,46px);line-height:1.08;
  letter-spacing:-.03em;font-weight:800;
}
.sec-head h2 .dot{color:var(--brand)}
.sec-desc{
  margin:0 0 4px;color:var(--muted);font-size:14.5px;line-height:1.75;
  max-width:420px;justify-self:end;text-align:right;
}
@media(max-width:820px){
  .sec-head{grid-template-columns:1fr;gap:10px;align-items:start}
  .sec-desc{justify-self:start;text-align:left;max-width:none}
  .sec-no{width:52px}
}

/* ---------------------------------------------------------------------
   Bento 四大入口
   --------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}
.bento-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:24px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);
  color:var(--ink);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  min-height:196px;
}
.bento-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(201,255,94,.2),transparent 62%);
  transition:opacity .25s ease;
}
.bento-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow-hard)}
.bento-card:hover::before{opacity:1}
.bento-card.dark{background:var(--panel);color:var(--panel-ink);border-color:var(--panel)}
.bento-card.dark:hover{box-shadow:5px 5px 0 var(--accent);border-color:var(--accent)}
.bento-card.lime{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bento-card.lime:hover{box-shadow:5px 5px 0 var(--ink)}
.bento-card.learn{grid-column:span 6;min-height:340px}
.bento-card.tool{grid-column:span 3}
.bento-card.lab{grid-column:span 3;min-height:340px}
.bento-card.quiz{grid-column:span 3}
.bento-card.play{grid-column:span 6;min-height:200px}
.bento-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;position:relative;z-index:1}
.bento-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  opacity:.55;
}
.bento-arrow{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;opacity:.35;
  transition:transform .2s ease,opacity .2s ease,background .2s ease,color .2s ease;
}
.bento-arrow svg{width:14px;height:14px}
.bento-card:hover .bento-arrow{opacity:1;transform:rotate(-45deg);background:currentColor}
.bento-card:hover .bento-arrow svg{color:var(--card)}
.bento-card.dark:hover .bento-arrow svg{color:var(--panel)}
.bento-card.lime:hover .bento-arrow svg{color:var(--accent)}
.bento-card h3{
  position:relative;z-index:1;
  margin:0 0 9px;font-size:clamp(24px,2.5vw,32px);line-height:1.12;
  letter-spacing:-.025em;font-weight:800;
}
.bento-card p{
  position:relative;z-index:1;
  margin:0 0 18px;font-size:13.5px;line-height:1.7;opacity:.66;max-width:420px;
}
.bento-card.learn p{max-width:340px}
.bento-tags{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;margin-bottom:14px;
}
.bento-tags span{
  font-size:11.5px;padding:4px 9px;border-radius:6px;
  border:1px solid currentColor;opacity:.5;
}
.bento-viz{position:relative;z-index:1;margin-top:auto}
.bento-viz svg{display:block;width:100%;height:auto}
.bento-big{
  position:relative;z-index:1;display:flex;align-items:baseline;gap:6px;
  margin-top:auto;font-family:var(--font-mono);
}
.bento-big b{font-size:38px;font-weight:600;line-height:1;letter-spacing:-.03em}
.bento-big span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.55}
.bento-note{
  position:relative;z-index:1;margin-top:12px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;opacity:.5;
}
.bento-card.dark .bento-tags span{opacity:.65}
.bento-card.lime .bento-viz svg .stroke{stroke:var(--accent-ink)}
@media(max-width:980px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .bento-card.learn{grid-column:span 6;grid-row:auto;min-height:320px}
  .bento-card.tool,.bento-card.lab,.bento-card.quiz{grid-column:span 3}
  .bento-card.lab{min-height:300px}
  .bento-card.play{grid-column:span 6;min-height:180px}
}
@media(max-width:600px){
  .bento{grid-template-columns:1fr}
  .bento-card.learn,.bento-card.tool,.bento-card.lab,.bento-card.quiz,.bento-card.play{grid-column:span 1}
  .bento-card.learn{min-height:300px}
}

/* ---------------------------------------------------------------------
   概念解剖台
   --------------------------------------------------------------------- */
.concept{
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--shadow);
}
.concept-left{padding:32px 34px 30px;display:flex;flex-direction:column;min-width:0}
.concept-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.concept-tab{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:999px;padding:6px 12px;font-size:12px;line-height:1.2;
  transition:all .16s ease;
}
.concept-tab:hover{border-color:var(--ink);color:var(--ink)}
.concept-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.concept-kicker{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;color:var(--muted);
  text-transform:uppercase;margin-bottom:8px;
}
.concept-term{margin:0 0 4px;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.03em;font-weight:800}
.concept-en{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;margin-bottom:18px;
}
.concept-formula{
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin-bottom:16px;color:var(--ink-2);
  overflow-x:auto;
}
.concept-plain{font-size:14.5px;line-height:1.8;color:var(--ink-2);margin:0 0 14px}
.concept-plain strong{background:linear-gradient(transparent 62%,var(--accent) 62%);font-weight:650}
.concept-read{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;
  font-size:13px;font-weight:650;color:var(--brand);
}
.concept-read svg{width:15px;height:15px;transition:transform .2s ease}
.concept-read:hover svg{transform:translateX(4px)}
.concept-right{
  position:relative;background:var(--panel);color:var(--panel-ink);
  padding:24px;display:flex;flex-direction:column;min-height:380px;
}
.concept-right::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(237,243,236,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(237,243,236,.05) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 80%);
}
.concept-chart{position:relative;z-index:1;flex:1;min-height:250px}
.concept-chart canvas{width:100%;height:100%;display:block}
.concept-output{
  position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding-top:14px;border-top:1px solid var(--panel-line);
}
.concept-output .lbl{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--panel-muted);
  text-transform:uppercase;
}
.concept-output .val{
  font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1;
}
.concept-ctrl{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:5px 12px;
  align-items:center;margin-top:13px;
}
.concept-ctrl label{font-size:10.5px;color:var(--panel-muted)}
.concept-ctrl output{font-family:var(--font-mono);font-size:11px;color:var(--panel-ink)}
.concept-ctrl input[type="range"]{grid-column:1/-1}
.concept-btn{
  position:relative;z-index:1;margin-top:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  width:100%;min-height:36px;border-radius:8px;
  background:transparent;border:1px solid var(--panel-line);color:var(--panel-ink);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  transition:all .16s ease;
}
.concept-btn:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:900px){
  .concept{grid-template-columns:1fr}
  .concept-right{min-height:330px}
}

/* ---------------------------------------------------------------------
   知识路径 / 精选笔记
   --------------------------------------------------------------------- */
.library-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 22px;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease;
}
.path-card:hover{border-color:var(--ink);transform:translateY(-3px)}
.path-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.path-badge{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.12em;
  border:1px solid var(--line-2);border-radius:999px;padding:3px 8px;color:var(--muted);
}
.path-badge.hot{border-color:var(--brand);color:var(--brand)}
.path-card h3{margin:8px 0 6px;font-size:19px;letter-spacing:-.02em}
.path-card > p{margin:0 0 18px;font-size:12.5px;color:var(--muted);line-height:1.6}
.path-steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.path-steps li{position:relative;counter-increment:step;padding:0 0 15px 30px}
.path-steps li:not(:last-child)::before{
  content:"";position:absolute;left:8px;top:21px;bottom:0;width:1px;background:var(--line-2);
}
.path-steps li::after{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:7.5px;color:var(--muted);
}
.path-steps a{display:block;font-size:13px;font-weight:600;line-height:1.45;transition:color .15s}
.path-steps a:hover{color:var(--brand)}
.path-steps small{display:block;font-size:11px;color:var(--faint);margin-top:2px;font-weight:400}
.path-more{
  margin-top:auto;padding-top:10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.08em;color:var(--brand);display:inline-flex;gap:6px;align-items:center;
}
.note-list{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;
}
.note-list-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.note-list-head h3{margin:0;font-size:15px}
.note-list-head a{font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.08em}
.note-list-head a:hover{color:var(--ink)}
.note-item{
  display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start;
  padding:14px 0;border-bottom:1px dashed var(--line);
}
.note-item:last-child{border-bottom:0;padding-bottom:0}
.note-item .no{font-family:var(--font-mono);font-size:9px;color:var(--faint);padding-top:3px}
.note-item .tag{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;color:var(--brand);text-transform:uppercase}
.note-item h4{margin:3px 0 0;font-size:13.5px;line-height:1.5;font-weight:600;letter-spacing:-.01em}
.note-item:hover h4{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media(max-width:1020px){
  .library-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .paths{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------
   工具
   --------------------------------------------------------------------- */
.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tool-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:20px 18px 16px;display:flex;flex-direction:column;min-height:190px;
  transition:all .2s ease;
}
.tool-card:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:translateY(-4px);box-shadow:5px 5px 0 var(--ink)}
.tool-no{font-family:var(--font-mono);font-size:9px;color:var(--faint);letter-spacing:.1em}
.tool-card h3{margin:12px 0 5px;font-size:17px;letter-spacing:-.02em}
.tool-card p{margin:0;font-size:11.5px;line-height:1.55;color:var(--muted)}
.tool-card:hover p,.tool-card:hover .tool-no{color:rgba(19,29,6,.62)}
.tool-viz{margin-top:auto;padding-top:14px;opacity:.75}
.tool-viz svg{width:100%;height:46px;display:block}
.tool-card .go{
  position:absolute;right:15px;top:15px;width:22px;height:22px;
  display:grid;place-items:center;opacity:.3;transition:transform .2s ease,opacity .2s ease;
}
.tool-card:hover .go{opacity:1;transform:rotate(-45deg)}
.tool-card .go svg{width:13px;height:13px}
@media(max-width:900px){.tool-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tool-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   测一测 / 玩一下
   --------------------------------------------------------------------- */
.play-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px}
.test-feature{
  position:relative;overflow:hidden;
  background:var(--panel);color:var(--panel-ink);
  border:1px solid var(--panel);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;min-height:320px;
}
.test-feature::before{
  content:"?";position:absolute;right:8px;bottom:-56px;
  font-family:var(--font-mono);font-size:250px;line-height:1;font-weight:700;
  color:rgba(237,243,236,.04);pointer-events:none;
}
.test-feature .tf-label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;
  color:var(--accent);margin-bottom:18px;
}
.test-feature h3{margin:0 0 10px;font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.03em}
.test-feature p{margin:0 0 22px;font-size:13px;line-height:1.7;color:var(--panel-muted);max-width:330px}
.test-feature .tf-meta{
  display:flex;gap:18px;margin-bottom:24px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.08em;color:var(--panel-muted);
}
.test-feature .tf-meta b{color:var(--panel-ink);font-weight:600}
.test-feature .btn{margin-top:auto;align-self:flex-start}
.game-list{display:grid;gap:10px}
.game-card{
  display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 17px;transition:all .18s ease;
}
.game-card:hover{border-color:var(--ink);transform:translateX(4px)}
.game-ico{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line);
}
.game-ico svg{width:23px;height:23px}
.game-card h3{margin:0 0 2px;font-size:15px;letter-spacing:-.01em}
.game-card p{margin:0;font-size:11.5px;color:var(--muted)}
.game-card .arrow{font-family:var(--font-mono);color:var(--faint);transition:transform .18s,color .18s}
.game-card:hover .arrow{color:var(--ink);transform:translateX(2px)}
@media(max-width:860px){.play-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   最新笔记
   --------------------------------------------------------------------- */
.notes-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:10px}
.notes-head .more{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.notes-head .more:hover{color:var(--ink)}
.note-row{
  display:grid;grid-template-columns:58px minmax(0,1fr) 160px 34px;gap:18px;align-items:center;
  padding:24px 4px;border-top:1px solid var(--line);
  transition:background .18s ease,padding .18s ease;
}
.note-row:hover{background:var(--card);padding-left:14px;padding-right:14px}
.note-row .idx{font-family:var(--font-mono);font-size:10px;color:var(--faint);letter-spacing:.08em}
.note-row .tag{
  display:inline-block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;
  color:var(--brand);text-transform:uppercase;margin-bottom:5px;
}
.note-row h3{margin:0;font-size:17px;line-height:1.45;letter-spacing:-.015em;font-weight:650}
.note-row p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
.note-row .go{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);
  transition:all .18s ease;
}
.note-row .go svg{width:13px;height:13px}
.note-row:hover .go{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-45deg)}
@media(max-width:760px){
  .note-row{grid-template-columns:36px minmax(0,1fr) 30px;gap:12px}
  .note-row p{display:none}
}

/* ---------------------------------------------------------------------
   宣言 / 关于
   --------------------------------------------------------------------- */
.manifesto{
  background:var(--panel);color:var(--panel-ink);
  padding:88px 0;position:relative;overflow:hidden;
}
.manifesto::before{
  content:"α";position:absolute;right:-30px;top:-90px;
  font-family:var(--font-mono);font-size:420px;line-height:1;font-weight:700;
  color:rgba(201,255,94,.05);pointer-events:none;
}
.manifesto-in{position:relative;z-index:1}
.manifesto-kicker{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--accent);
  text-transform:uppercase;margin-bottom:22px;
}
.manifesto h2{
  max-width:900px;margin:0 0 34px;
  font-size:clamp(30px,4.6vw,56px);line-height:1.15;letter-spacing:-.035em;font-weight:800;
}
.manifesto h2 em{font-style:normal;color:var(--accent)}
.manifesto-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding-top:30px;border-top:1px solid var(--panel-line);
}
.manifesto-item .n{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--panel-muted);
  margin-bottom:10px;
}
.manifesto-item h3{margin:0 0 7px;font-size:16px}
.manifesto-item p{margin:0;font-size:12.5px;line-height:1.75;color:var(--panel-muted)}
.manifesto-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:38px;padding-top:24px;border-top:1px solid var(--panel-line);
}
.terminal{
  font-family:var(--font-mono);font-size:10.5px;color:var(--panel-muted);letter-spacing:.02em;
}
.terminal b{color:var(--accent);font-weight:500}
.terminal .cursor{
  display:inline-block;width:7px;height:13px;background:var(--accent);
  vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.manifesto-foot .btn{min-height:42px;font-size:13px}
@media(max-width:760px){
  .manifesto{padding:64px 0}
  .manifesto-grid{grid-template-columns:1fr;gap:20px}
}

/* ---------------------------------------------------------------------
   页脚
   --------------------------------------------------------------------- */
.foot{background:var(--panel);color:var(--panel-ink);padding:54px 0 26px;border-top:1px solid var(--panel-line)}
.foot-top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  padding-bottom:32px;border-bottom:1px solid var(--panel-line);flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand .brand-mark{width:44px;height:44px;flex-basis:44px}
.foot-brand h2{margin:0;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;line-height:1}
.foot-brand p{
  margin:7px 0 0;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  color:var(--panel-muted);text-transform:uppercase;
}
.foot-tagwrap{max-width:320px}
.foot-tagline{
  max-width:300px;margin:0;font-size:12.5px;line-height:1.8;color:var(--panel-muted);
}
.foot-en{
  margin:9px 0 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.02em;
  color:var(--panel-muted);
}
.foot-mail{margin:10px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.foot-mail a{
  color:var(--panel-muted);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--panel-muted) 50%,transparent);
  text-underline-offset:2px;transition:color .15s ease,text-decoration-color .15s ease;
}
.foot-mail a:hover{color:var(--accent);text-decoration-color:currentColor}
.foot-mail a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.foot-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  padding:34px 0;border-bottom:1px solid var(--panel-line);
}
.foot-col h3{
  margin:0 0 13px;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;
  color:var(--panel-muted);font-weight:500;text-transform:uppercase;
}
.foot-col a{display:block;font-size:13px;color:var(--panel-ink);opacity:.82;margin-bottom:9px;transition:opacity .15s,color .15s}
.foot-col a:hover{opacity:1;color:var(--accent)}
/* 底部只留一行：左边免责声明，右边「© + 备案号」。
   以前这里是三行右对齐堆叠（备案号 / © / 英文标语），
   但 © 和标语写在同一个 <p> 里是左对齐的，只有备案号被右对齐，
   三行各对各的，所以看起来歪。 */
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
  padding-top:22px;font-size:11px;color:var(--panel-muted);line-height:1.8;
}
.foot-bottom .disc{max-width:640px;margin:0}
.foot-legal{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin:0;
}
.foot-bottom .copy{
  margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;white-space:nowrap;
}

/* 首页自定义页脚里的 ICP 备案号（工信部要求页脚悬挂 + 链接到 beian.miit.gov.cn） */
.foot-icp{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;
  color:var(--panel-muted);
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--panel-muted) 50%,transparent);
  text-underline-offset:2px;
  white-space:nowrap;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.foot-icp:hover{color:var(--accent);text-decoration-color:currentColor}
.foot-icp:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
@media(max-width:760px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:22px}
  .foot-top{align-items:flex-start;flex-direction:column}
  .foot-tagwrap{max-width:none}
  .foot-tagline{max-width:none}
  /* 右下角有固定的「返回顶部」按钮（bottom:20px，42px 见方），
     不留出这 66px 的话，滚到底时它会压住免责声明的最后几个字 */
  .foot{padding-bottom:74px}
}

/* ---------------------------------------------------------------------
   进场动画
   --------------------------------------------------------------------- */
html.js-reveal [data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0ms);
}
html.js-reveal [data-reveal].in{opacity:1;transform:none}

/* ---------------------------------------------------------------------
   响应式
   --------------------------------------------------------------------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:34px;padding:48px 0 34px}
  .hero h1{font-size:clamp(42px,8vw,66px)}
  .lab{max-width:620px}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .hero-stat:nth-child(3n){border-right:0}
  .hero-stat:nth-child(6){border-right:0}
  .hero-stat:nth-child(n+4){border-top:1px solid var(--panel-line)}
}
@media(max-width:640px){
  .section{padding:62px 0}
  .hero-grid{padding:38px 0 28px;gap:28px}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .hero-lede{font-size:15px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stat{border-right:0!important;border-top:1px solid var(--panel-line);padding:15px 12px 17px}
  .hero-stat:nth-child(1),.hero-stat:nth-child(2){border-top:0}
  .hero-stat b{font-size:21px}
  .lab{padding:15px 13px 13px}
  .lab-chart{height:170px}
  .lab-value{font-size:32px}
  .concept-left{padding:24px 20px}
  .concept-right{padding:18px;min-height:300px}
  .concept-chart{min-height:210px}
  .test-feature{min-height:280px;padding:24px 20px}
}

/* 关于卡片 */
.bento-card.about{
  grid-column:span 6;
  background:var(--card);
  border:1px solid var(--line);
}
.bento-card.about h3{font-size:clamp(24px,2.4vw,30px)}
.bento-card.about .bento-note{
  margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);opacity:.7;
}
@media(max-width:980px){.bento-card.about{grid-column:span 6}}
@media(max-width:600px){.bento-card.about{grid-column:span 1}}
/* hero 句号 */
.hero h1 .thin{font-weight:800;color:var(--panel-ink);font-size:.92em}
@media(max-width:640px){
  .hero-stat:last-child{grid-column:span 2}
}
/* 小卡片中的迷你图 */
.bento-card.tool .bento-viz,
.bento-card.quiz .bento-viz{margin-top:16px;flex:1;display:flex;align-items:center;min-height:40px}
.bento-card.tool .bento-viz svg{height:52px}
.bento-card.quiz .bento-viz svg{height:58px}