/* 数形实验室 · 深空墨蓝 + 青蓝主光 + 赭金强调 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#05080e;
  --panel:rgba(11,19,30,.78);
  --panel-solid:#0b131e;
  --line:rgba(122,170,214,.14);
  --line2:rgba(122,170,214,.3);
  --txt:#e7eef7;
  --dim:#8497ab;
  --cyan:#3ed2e8;
  --gold:#e8b96a;
  --red:#e2604f;
  --green:#6edb9b;
  --serif:"Songti SC","Noto Serif SC","SimSun",Georgia,"Times New Roman",serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Consolas,monospace;
  --fs-hud:1;--fs-study:1;--fs-panel:1;
}
html,body{height:100%}
body{
  background:var(--ink);color:var(--txt);overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.lab{overflow:hidden}
::selection{background:rgba(62,210,232,.3)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}

/* ---------- 背景 ---------- */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none}
#veil{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity .6s;
  background:radial-gradient(ellipse at 50% 42%,rgba(5,8,14,0) 0%,rgba(5,8,14,.42) 56%,rgba(5,8,14,.93) 100%)}
body.lab #veil{opacity:.38}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(1px 1px at 12% 18%,rgba(190,225,255,.7) 50%,transparent 50%),
    radial-gradient(1px 1px at 78% 12%,rgba(190,225,255,.5) 50%,transparent 50%),
    radial-gradient(1px 1px at 32% 72%,rgba(190,225,255,.45) 50%,transparent 50%),
    radial-gradient(1px 1px at 88% 62%,rgba(190,225,255,.55) 50%,transparent 50%),
    radial-gradient(1px 1px at 57% 38%,rgba(190,225,255,.35) 50%,transparent 50%),
    radial-gradient(1px 1px at 22% 46%,rgba(190,225,255,.4) 50%,transparent 50%);
  background-size:520px 420px,680px 560px,760px 620px,900px 700px,1100px 820px,1300px 940px}
body.lab #stars{opacity:.16}

/* ---------- 顶栏 ---------- */
#topbar{position:fixed;top:0;left:0;right:0;z-index:30;height:62px;display:flex;align-items:center;
  gap:26px;padding:0 clamp(16px,4vw,54px);
  background:linear-gradient(180deg,rgba(5,8,14,.92),rgba(5,8,14,.55) 70%,transparent);
  border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:11px;cursor:pointer;white-space:nowrap}
.brand svg{width:27px;height:27px;fill:none;stroke:var(--cyan);stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(62,210,232,.5))}
.brand svg path:last-child{stroke:var(--gold);stroke-width:1.1;opacity:.75}
.brand span{font-family:var(--serif);font-size:19px;letter-spacing:.14em;font-weight:600;display:flex;flex-direction:column;line-height:1.25}
.brand b{font-family:var(--mono);font-size:8px;letter-spacing:.24em;color:var(--dim);font-weight:400}
#nav{display:flex;gap:4px;margin-left:auto}
#nav button{padding:8px 15px;font-size:13px;color:var(--dim);letter-spacing:.06em;border-radius:6px;transition:.2s}
#nav button:hover{color:var(--txt);background:rgba(122,170,214,.08)}
#nav button.on{color:var(--cyan);background:rgba(62,210,232,.08)}
.top-act{display:flex;align-items:center;gap:14px}
.live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.08em}
.live i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
#fsBtn{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;color:var(--dim);font-size:15px}
#fsBtn:hover{border-color:var(--cyan);color:var(--cyan)}

/* ---------- 首页 ---------- */
#home{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:142px clamp(18px,4vw,54px) 0}
.hero{position:relative;padding:36px 0 54px;text-align:center}
.hero::before{content:"";position:absolute;inset:-40px -14vw -20px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%,rgba(5,8,14,.80) 0%,rgba(5,8,14,.62) 42%,rgba(5,8,14,.18) 72%,transparent 100%)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;color:var(--dim);
  border:1px solid var(--line);border-radius:100px;padding:8px 20px;background:rgba(11,19,30,.5)}
.kicker em{width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.title{font-family:var(--serif);font-weight:600;font-size:clamp(52px,9vw,116px);letter-spacing:.1em;line-height:1.16;margin:30px 0 24px;
  text-shadow:0 0 60px rgba(62,210,232,.18)}
.title .stroke{color:transparent;-webkit-text-stroke:1.4px var(--cyan);text-shadow:0 0 34px rgba(62,210,232,.35)}
.title .thin{display:block;font-family:var(--mono);font-size:clamp(9px,1.2vw,13px);font-weight:400;
  letter-spacing:.56em;color:var(--dim);margin-top:18px;text-shadow:none}
.lead{max-width:660px;margin:0 auto;font-size:15px;line-height:2;color:#b6c6d8}
.lead b{color:var(--gold);font-weight:600}
.hero-meta{display:flex;justify-content:center;gap:clamp(24px,6vw,72px);margin:44px 0 34px}
.hero-meta div{display:flex;flex-direction:column;gap:4px}
.hero-meta b{font-family:var(--mono);font-size:clamp(26px,3.4vw,40px);font-weight:300;color:var(--cyan);line-height:1}
.hero-meta span{font-size:11px;color:var(--dim);letter-spacing:.14em}
.hero-act{display:flex;justify-content:center;gap:12px}
.btn-main,.btn-ghost{padding:12px 26px;border-radius:7px;font-size:13px;letter-spacing:.1em;transition:.22s}
.btn-main{background:linear-gradient(135deg,rgba(62,210,232,.2),rgba(62,210,232,.07));
  border:1px solid rgba(62,210,232,.5);color:var(--cyan);box-shadow:0 0 24px rgba(62,210,232,.12)}
.btn-main:hover{background:rgba(62,210,232,.28);box-shadow:0 0 34px rgba(62,210,232,.3)}
.btn-main span{margin-left:8px}
.btn-ghost{border:1px solid var(--line2);color:var(--dim)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

.howto{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 78px}
.howto>div{background:rgba(9,15,24,.82);padding:26px 22px 28px;transition:.25s}
.howto>div:hover{background:rgba(16,28,42,.9)}
.howto b{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--gold)}
.howto h4{font-family:var(--serif);font-size:21px;margin:12px 0 10px;letter-spacing:.08em}
.howto p{font-size:12px;line-height:1.85;color:var(--dim)}

.sec-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin:0 0 20px}
.sec-head h2{font-family:var(--serif);font-size:30px;letter-spacing:.16em;font-weight:600}
.sec-head h2::before{content:"";display:inline-block;width:3px;height:22px;background:var(--cyan);
  margin-right:14px;vertical-align:-3px;box-shadow:0 0 12px var(--cyan)}
.sec-head p{font-size:12px;color:var(--dim);letter-spacing:.08em}
.catalog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 0 22px;border-bottom:1px solid var(--line);margin-bottom:30px}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filters button{display:flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);
  border-radius:100px;font-size:12px;color:var(--dim);letter-spacing:.06em;transition:.2s;background:rgba(11,19,30,.5)}
.filters button i{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.65}
.filters button:hover{border-color:var(--line2);color:var(--txt)}
.filters button.on{border-color:rgba(62,210,232,.55);color:var(--cyan);background:rgba(62,210,232,.1)}
.cat-count{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}

.cat{margin:0 0 42px}
.cat-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.cat-badge{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--gold);
  border:1px solid rgba(232,185,106,.35);padding:5px 9px;border-radius:4px}
.cat-head h3{font-family:var(--serif);font-size:20px;letter-spacing:.12em}
.cat-en{font-size:11px;color:var(--dim)}
.cat-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);min-width:20px}
.cat-num{font-family:var(--mono);font-size:10px;color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.card{position:relative;border:1px solid var(--line);border-radius:9px;padding:18px 18px 16px;
  background:linear-gradient(160deg,rgba(13,22,34,.9),rgba(8,13,21,.82));
  cursor:pointer;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:.25s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(62,210,232,.09),transparent 65%)}
.card:hover{transform:translateY(-4px);border-color:rgba(62,210,232,.42);box-shadow:0 12px 40px rgba(0,0,0,.45)}
.card:hover::after{opacity:1}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-no{font-family:var(--mono);font-size:11px;color:var(--dim)}
.card-tag{font-size:10px;padding:4px 9px;border-radius:100px;letter-spacing:.06em;
  border:1px solid rgba(122,170,214,.24);color:#a8bdd2;background:rgba(122,170,214,.06)}
.card-tag.t-geo{color:#8fd8e8;border-color:rgba(62,210,232,.3)}
.card-tag.t-alg{color:var(--gold);border-color:rgba(232,185,106,.3)}
.card-tag.t-prob{color:var(--green);border-color:rgba(110,219,155,.3)}
.card-tag.t-linear{color:#c6a8f0;border-color:rgba(198,168,240,.3)}
.thumb{height:74px;display:flex;align-items:center;justify-content:center;color:var(--cyan);margin:8px 0 6px;opacity:.85}
.thumb svg{width:120px;height:60px;filter:drop-shadow(0 0 7px rgba(62,210,232,.35))}
.card h3{font-family:var(--serif);font-size:21px;letter-spacing:.08em;display:flex;align-items:baseline;gap:9px}
.card h3 span{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim);font-weight:400}
.card p{font-size:12px;line-height:1.8;color:var(--dim);margin-top:9px;min-height:43px}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.card-foot span{font-size:10px;color:var(--dim);letter-spacing:.05em}
.card-foot b{font-family:var(--mono);font-size:10px;color:var(--cyan);font-weight:400;letter-spacing:.08em}

.about{margin:64px 0 20px;border:1px solid var(--line);border-radius:10px;padding:30px;background:rgba(9,15,24,.7)}
.about h3{font-family:var(--serif);font-size:22px;letter-spacing:.12em;margin-bottom:12px}
.about p{font-size:13px;line-height:2;color:var(--dim);max-width:820px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.about-grid div{border:1px solid var(--line);border-radius:7px;padding:16px;display:flex;flex-direction:column;gap:6px}
.about-grid b{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:.12em;font-weight:400}
.about-grid span{font-size:11px;color:var(--dim)}
.signature{display:flex;align-items:center;gap:18px;margin:56px 0 20px}
.signature .rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2))}
.signature p{font-family:var(--serif);font-size:13px;color:var(--dim);letter-spacing:.16em}
.signature .sep{color:var(--gold);margin:0 8px}
footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:22px 0 34px;border-top:1px solid var(--line);font-size:11px;color:#5f7186;letter-spacing:.06em}

/* ---------- 实验页浮层 ---------- */
.hidden{display:none!important}
#hud{position:fixed;z-index:22;top:76px;left:50%;transform:translateX(-50%);
  width:min(600px,calc(100vw - 60px));padding:12px 18px 14px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
  background:rgba(7,12,20,.82);border:1px solid var(--line2);border-radius:9px;
  backdrop-filter:blur(14px);font-size:calc(13px * var(--fs-hud));pointer-events:none}
.hud-top{grid-column:1/-1;display:flex;align-items:baseline;justify-content:center;
  gap:10px;flex-wrap:wrap;margin-bottom:2px}
.hud-top span:first-child{font-family:var(--mono);font-size:11px;color:var(--gold);
  border:1px solid rgba(232,185,106,.4);padding:3px 7px;border-radius:3px}
.hud-top b{font-family:var(--serif);font-size:22px;letter-spacing:.1em}
.hud-top span:last-child{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.12em}
.hud-f{font-family:var(--mono);font-size:11px;color:var(--cyan);line-height:1.8;white-space:pre-line;
  padding:7px 12px;border-left:2px solid var(--cyan);background:rgba(11,19,30,.6);border-radius:0 5px 5px 0;
  text-align:left}
.hud-v{font-family:var(--mono);font-size:11px;color:var(--gold);line-height:1.8;
  white-space:pre-line;text-align:left}
.hud-hint{display:none;grid-column:1/-1;font-size:10px;color:#62758a;letter-spacing:.08em}

#panel,#study{position:fixed;z-index:25;background:var(--panel);backdrop-filter:blur(18px);
  border:1px solid var(--line2);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
#panel{top:220px;right:clamp(16px,3vw,40px);width:288px;max-height:calc(100vh - 308px);
  display:flex;flex-direction:column;font-size:calc(12px * var(--fs-panel))}
.panel-title{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line)}
.panel-title span{font-family:var(--serif);font-size:15px;letter-spacing:.1em}
.panel-title b{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.14em;font-weight:400;margin-left:auto}
.panel-title button{color:var(--dim);font-size:13px;padding:2px 4px}
.panel-title button:hover{color:var(--red)}
#ctrl{overflow-y:auto;padding:6px 16px 14px;flex:1}
#ctrl::-webkit-scrollbar,.st-body::-webkit-scrollbar{width:5px}
#ctrl::-webkit-scrollbar-thumb,.st-body::-webkit-scrollbar-thumb{background:rgba(122,170,214,.25);border-radius:5px}
.ctrl-row{padding:13px 0 4px;border-bottom:1px dashed rgba(122,170,214,.12)}
.ctrl-row:last-child{border-bottom:0}
.ctrl-lab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.ctrl-lab span{font-size:12px;color:#b6c6d8}
.ctrl-lab b{font-family:var(--mono);font-size:11px;color:var(--cyan);font-weight:400}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--cyan) var(--p,50%),rgba(122,170,214,.2) var(--p,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:2px solid var(--cyan);box-shadow:0 0 9px rgba(62,210,232,.6);cursor:pointer}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--ink);
  border:2px solid var(--cyan);cursor:pointer}
.seg{display:flex;gap:5px;flex-wrap:wrap}
.seg button{flex:1;min-width:52px;padding:7px 4px;font-size:11px;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;transition:.2s}
.seg button:hover{border-color:var(--line2);color:var(--txt)}
.seg button.on{border-color:rgba(62,210,232,.55);color:var(--cyan);background:rgba(62,210,232,.1)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.switch i{width:34px;height:18px;border-radius:20px;background:rgba(122,170,214,.2);position:relative;transition:.2s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:.2s}
.switch.on i{background:rgba(62,210,232,.35)}
.switch.on i::after{left:18px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.panel-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.panel-foot button{flex:1;padding:8px 4px;font-size:11px;color:var(--dim);
  border:1px solid var(--line);border-radius:5px}
.panel-foot button:hover{border-color:var(--cyan);color:var(--cyan)}

#study{top:220px;left:clamp(16px,3vw,40px);width:min(430px,calc(100vw - 32px));
  height:calc(100vh - 308px);display:flex;flex-direction:column;font-size:calc(13px * var(--fs-study))}
.st-head{padding:16px 20px 0;border-bottom:1px solid var(--line)}
.st-row{display:flex;align-items:center;justify-content:space-between}
.st-row>b{font-size:10px;font-family:var(--mono);letter-spacing:.12em;color:var(--gold);font-weight:400}
.st-right{display:flex;align-items:center;gap:12px}
.st-right u{text-decoration:none;font-family:var(--mono);font-size:10px;color:var(--dim)}
.st-right button{color:var(--dim);font-size:14px}
.st-right button:hover{color:var(--red)}
.st-title{font-family:var(--serif);font-size:25px;letter-spacing:.1em;margin:12px 0 6px}
.st-meta{font-size:11px;color:var(--dim);letter-spacing:.06em;margin-bottom:16px}
.st-tabs{display:flex;gap:2px}
.st-tabs button{padding:9px 15px;font-size:12px;color:var(--dim);border-bottom:2px solid transparent;letter-spacing:.08em}
.st-tabs button:hover{color:var(--txt)}
.st-tabs button.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.st-body{flex:1;overflow-y:auto;padding:20px 22px 26px;line-height:1.95;font-size:13px;color:#c3d2e2}
.st-body h5{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:.08em;margin:20px 0 8px}
.st-body h5:first-child{margin-top:0}
.st-body p{margin-bottom:10px}
.st-body ul{margin:0 0 12px;padding-left:18px}
.st-body li{margin-bottom:7px}
.st-body b{color:var(--txt);font-weight:600}
.st-body code{font-family:var(--mono);font-size:12px;color:var(--cyan);background:rgba(62,210,232,.08);
  padding:1px 5px;border-radius:3px}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding-left:34px;margin-bottom:14px}
.steps li::before{content:"0" counter(s);position:absolute;left:0;top:1px;font-family:var(--mono);
  font-size:10px;color:var(--cyan);border:1px solid rgba(62,210,232,.35);border-radius:4px;padding:3px 5px}
.quiz{border:1px solid var(--line);border-radius:7px;margin-bottom:12px;overflow:hidden}
.quiz-q{padding:13px 15px;font-size:13px;background:rgba(122,170,214,.04)}
.quiz-q em{font-family:var(--mono);font-size:10px;color:var(--gold);font-style:normal;margin-right:9px}
.quiz button{width:100%;text-align:left;padding:9px 15px;font-size:11px;color:var(--cyan);
  border-top:1px solid var(--line);letter-spacing:.08em}
.quiz button:hover{background:rgba(62,210,232,.07)}
.quiz-a{display:none;padding:12px 15px;border-top:1px dashed var(--line);color:var(--dim);font-size:12px;line-height:1.9}
.quiz.open .quiz-a{display:block}
.st-foot{display:flex;border-top:1px solid var(--line)}
.st-foot button{flex:1;padding:13px;font-size:12px;color:var(--dim)}
.st-foot button:first-child{border-right:1px solid var(--line)}
.st-foot button:hover{color:var(--cyan);background:rgba(62,210,232,.06)}

#labbar{position:fixed;z-index:28;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line2);backdrop-filter:blur(16px);
  box-shadow:0 12px 40px rgba(0,0,0,.5);white-space:nowrap}
#labbar button{padding:8px 14px;font-size:12px;color:var(--dim);border:1px solid transparent;border-radius:6px;letter-spacing:.06em}
#labbar button:hover{color:var(--cyan);border-color:rgba(62,210,232,.35)}
#labbar button.on{color:var(--cyan);background:rgba(62,210,232,.1);border-color:rgba(62,210,232,.35)}
.lab-crumb{font-family:var(--mono);font-size:10px;color:#62758a;padding:0 10px;border-left:1px solid var(--line);border-right:1px solid var(--line)}

@media(max-width:900px){
  .howto{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  #nav{display:none}
  #study{top:auto;bottom:0;left:0;right:0;width:100%;height:62vh;border-radius:12px 12px 0 0}
  #panel{top:auto;bottom:0;right:0;left:0;width:100%;max-height:58vh;border-radius:12px 12px 0 0}
  #hud{top:74px;left:16px;transform:none;display:block;text-align:left;
    width:min(560px,calc(100vw - 32px))}
  .hud-top{justify-content:flex-start;margin-bottom:10px}
  .hud-v{margin-top:8px}
  .hud-hint{display:block;margin-top:9px}
  #labbar{bottom:14px;gap:2px;padding:6px}
  #labbar button{padding:8px 9px;font-size:11px}
  .lab-crumb{display:none}
}
@media(max-width:560px){
  #home{padding-top:112px}
  .hero{padding:20px 0 40px}
  .howto{grid-template-columns:1fr;margin-bottom:52px}
  .hero-meta{gap:22px}
  .grid{grid-template-columns:1fr}
  #hud{width:calc(100vw - 32px)}
  .hud-top b{font-size:19px}
}