/* ═══════════════════════════════════════════════════════════
   界面志 · The Interface Archive — Design System
   纸 / 墨 / 印 × 极光流光 · 玻璃质感 · 无外部依赖
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F2EC;
  --paper-2:#EFEAE1;
  --card:#FBF9F4;
  --ink:#1B1712;
  --ink-2:#6E675B;
  --ink-3:#9B9484;
  --line:#DDD5C6;
  --line-soft:#E7E1D4;
  --seal:#A5402D;
  --seal-deep:#7E2F21;
  --seal-soft:rgba(165,64,45,.10);
  --shadow:0 30px 70px -38px rgba(43,35,24,.35);
  --serif:Georgia,"Times New Roman","Songti SC","STSong","Noto Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,"Courier New",monospace;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --glass:rgba(255,255,255,.52);
  --glass-deep:rgba(255,255,255,.34);
  --glass-line:rgba(255,255,255,.66);
  --aur-1:#E8685A;
  --aur-2:#4FA398;
  --aur-3:#B678C8;
  --aur-4:#E5A44C;
  --grad-flow:linear-gradient(100deg,var(--seal),#D97941 30%,var(--aur-3) 62%,var(--aur-2) 100%);
}
html[data-theme="dark"]{
  --paper:#17140F;
  --paper-2:#12100B;
  --card:#1E1A13;
  --ink:#EDE6D7;
  --ink-2:#A89F8E;
  --ink-3:#7C7365;
  --line:#322C21;
  --line-soft:#282318;
  --seal:#C25A43;
  --seal-deep:#D97A62;
  --seal-soft:rgba(194,90,67,.14);
  --shadow:0 30px 70px -38px rgba(0,0,0,.6);
  --glass:rgba(40,35,27,.46);
  --glass-deep:rgba(40,35,27,.28);
  --glass-line:rgba(255,255,255,.09);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .5s var(--ease-out),color .5s var(--ease-out);
}
::selection{background:var(--seal);color:#F5F2EC}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px;border-radius:2px}
section{scroll-margin-top:76px}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}

/* ── 极光流光背景 ─────────────────────── */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.a-blob{position:absolute;width:56vmax;height:56vmax;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.a-blob.a1{left:-16vmax;top:-18vmax;background:radial-gradient(circle at 35% 35%,var(--aur-1),transparent 62%);animation:drift1 46s ease-in-out infinite alternate}
.a-blob.a2{right:-20vmax;top:6vmax;background:radial-gradient(circle at 60% 40%,var(--aur-2),transparent 60%);animation:drift2 58s ease-in-out infinite alternate}
.a-blob.a3{left:14vmax;bottom:-24vmax;background:radial-gradient(circle at 50% 50%,var(--aur-3),transparent 62%);animation:drift3 52s ease-in-out infinite alternate}
html[data-theme="dark"] .a-blob{opacity:.34}
@keyframes drift1{to{transform:translate(16vmax,10vmax) scale(1.18) rotate(24deg)}}
@keyframes drift2{to{transform:translate(-14vmax,14vmax) scale(1.22) rotate(-18deg)}}
@keyframes drift3{to{transform:translate(10vmax,-14vmax) scale(1.15)}}
.a-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
html[data-theme="dark"] .a-noise{mix-blend-mode:screen;opacity:.06}

/* ── 阅读进度 ─────────────────────────── */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:1000;background:transparent}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--seal),var(--aur-4),var(--aur-3),var(--aur-2));background-size:220% 100%;animation:flowbg 8s linear infinite;transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 12px rgba(230,120,90,.5)}
@keyframes flowbg{to{background-position:220% 0}}

/* ── 自定义光标 ───────────────────────── */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:2000;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;background:radial-gradient(circle at 35% 35%,#E8685A,var(--seal));box-shadow:0 0 10px rgba(232,104,90,.8)}
.cursor-ring{width:34px;height:34px;border:1px solid var(--ink);opacity:.45;transition:width .25s var(--ease-out),height .25s var(--ease-out),opacity .25s}
.cursor-ring.is-hover{width:52px;height:52px;opacity:.9;border-color:var(--seal)}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ── 顶栏 ─────────────────────────────── */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(20px,4vw,40px);
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid var(--glass-line);
}
.brand{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:.06em;display:inline-flex;align-items:baseline;gap:10px}
.topnav{display:flex;gap:clamp(14px,2.4vw,30px)}
.topnav a{font-size:13.5px;letter-spacing:.14em;color:var(--ink-2);position:relative;padding:4px 0}
.topnav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--seal);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out)}
.topnav a:hover{color:var(--ink)}
.topnav a:hover::after{transform:scaleX(1);transform-origin:left}

/* 主题切换（本身就是一件交互组件） */
.theme-toggle{display:inline-flex;align-items:center}
.tt-track{width:60px;height:30px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);display:block;padding:3px;transition:background .4s}
.tt-thumb{position:relative;display:flex;width:24px;height:22px;border-radius:999px;background:var(--card);border:1px solid var(--line);transition:transform .45s var(--ease-spring);box-shadow:0 2px 8px rgba(0,0,0,.10)}
html[data-theme="dark"] .tt-thumb{transform:translateX(29px)}
.tt-sun,.tt-moon{position:absolute;top:50%;translate:0 -50%;width:8px;height:8px;border-radius:50%}
.tt-sun{left:5px;background:var(--seal)}
.tt-moon{right:5px;background:transparent;border:2px solid var(--ink-3);border-radius:50% 50% 50% 0;rotate:-40deg;opacity:0}
html[data-theme="dark"] .tt-sun{opacity:.25}
html[data-theme="dark"] .tt-moon{opacity:1}

/* ── 右侧章节圆点 ─────────────────────── */
.dots{position:fixed;right:26px;top:50%;translate:0 -50%;z-index:900;display:flex;flex-direction:column;gap:16px}
.dots a{position:relative;width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.dots a span{position:absolute;right:22px;top:50%;translate:0 -50%;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-2);opacity:0;transition:opacity .3s;white-space:nowrap}
.dots a:hover span,.dots a.is-active span{opacity:1}
.dots a.is-active{background:linear-gradient(135deg,#C24B36,var(--aur-3));transform:scale(1.35);box-shadow:0 0 12px rgba(194,75,54,.45)}
@media (max-width:900px){.dots{display:none}}

/* ── 序 · HERO ────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:120px 0 130px;overflow:hidden}
.hero-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.34em;color:var(--ink-3);margin-bottom:clamp(18px,3vh,30px)}
.hero-title{font-family:var(--serif);line-height:1.02;font-weight:700}
.ht-zh{display:block;font-size:clamp(64px,13.5vw,168px);letter-spacing:.04em;background:linear-gradient(105deg,var(--ink) 8%,var(--seal) 30%,#D97941 44%,var(--aur-3) 60%,var(--ink) 92%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flowpan 13s ease-in-out infinite alternate}
@keyframes flowpan{from{background-position:0% 0}to{background-position:100% 0}}
.hero::after{content:"";position:absolute;width:640px;height:640px;left:var(--mx,50%);top:var(--my,42%);translate:-50% -50%;background:radial-gradient(circle,rgba(232,104,90,.14),rgba(182,120,200,.08) 42%,transparent 68%);pointer-events:none}
.hero-sub{margin-top:clamp(26px,4.5vh,44px);font-size:clamp(15.5px,1.6vw,19px);color:var(--ink-2);max-width:46em}
.hero-meta{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,58px);margin-top:clamp(34px,5.5vh,58px)}
.hm-item{display:flex;flex-direction:column;gap:2px}
.hm-item b{font-family:var(--serif);font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1;color:var(--ink)}
.hm-item b::after{content:"";display:block;width:22px;height:2px;background:var(--grad-flow);background-size:200% 100%;animation:flowbg 6s linear infinite;margin-top:8px}
.hm-item span{font-size:12.5px;letter-spacing:.16em;color:var(--ink-3)}

.marquee{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--glass-line);overflow:hidden;padding:13px 0;background:var(--glass);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5)}
.marquee-track{display:flex;align-items:center;gap:26px;width:max-content;animation:marquee 44s linear infinite}
.marquee-track span{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;color:var(--ink-2);white-space:nowrap}
.marquee-track i{color:var(--seal);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

.scroll-hint{position:absolute;bottom:64px;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint span{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink-3)}
.scroll-hint em{width:1px;height:34px;background:var(--ink-3);overflow:hidden;position:relative;display:block}
.scroll-hint em::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--aur-1),var(--aur-3));animation:drop 1.8s var(--ease-out) infinite}
@keyframes drop{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ── 章节 ─────────────────────────────── */
.chapter{padding:clamp(92px,13vh,150px) 0 0}
.chapter-last{padding-bottom:0}
.ch-head{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,52px);align-items:end;border-bottom:1px solid var(--line);padding-bottom:clamp(26px,4vh,40px);margin-bottom:clamp(40px,7vh,72px)}
.ch-head::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,transparent 30%,var(--seal) 46%,var(--aur-3) 54%,transparent 70%);background-size:260% 100%;animation:headflow 7s linear infinite;pointer-events:none}
@keyframes headflow{from{background-position:130% 0}to{background-position:-30% 0}}
.ch-no{font-family:var(--serif);font-size:clamp(52px,7vw,96px);font-weight:700;line-height:.8;color:transparent;-webkit-text-stroke:1px var(--ink-3);background:linear-gradient(120deg,var(--seal-soft),transparent 62%);-webkit-background-clip:text;background-clip:text}
.ch-title{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.1}
.ch-lede{margin-top:14px;color:var(--ink-2);max-width:44em;font-size:15.5px}

/* ── 01 定律 ──────────────────────────── */
.law{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4.5vw,64px);padding:clamp(36px,5.5vh,56px) 0;border-bottom:1px solid var(--line-soft)}
.law-year{font-family:var(--mono);font-size:11px;letter-spacing:.26em;display:inline-block;margin-bottom:14px;background:var(--grad-flow);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flowbg 7s linear infinite}
.law-copy h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);font-weight:700;margin-bottom:12px}
.law-copy p{color:var(--ink-2);font-size:15px;margin-bottom:10px}
.law-formula{font-family:var(--mono);font-size:14.5px;color:var(--ink);background:var(--glass-deep);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:inline-block;padding:10px 18px;border-radius:8px;margin:6px 0 10px}
.law-hint{font-size:13px!important;color:var(--ink-3)!important}
.law-quote{display:block;border-bottom:1px solid var(--line-soft)}
.law-quote blockquote{font-family:var(--serif);font-size:clamp(22px,3.4vw,40px);line-height:1.45;font-weight:700;max-width:22em;padding:clamp(28px,4vh,44px) 0}
.law-quote blockquote small{display:block;font-family:var(--sans);font-size:clamp(13px,1.4vw,15px);font-weight:400;color:var(--ink-2);margin-top:16px;letter-spacing:.02em}

.law-demo{display:flex;align-items:center}
.fitts-stage{position:relative;width:100%;height:340px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);overflow:hidden}
.fitts-target{position:absolute;border-radius:10px;font-family:var(--serif);transition:background .25s,color .25s}
.fitts-target.far{top:26px;right:30px;width:64px;height:32px;font-size:11px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2)}
.fitts-target.near{bottom:74px;left:30px;width:168px;height:96px;font-size:17px;background:linear-gradient(135deg,#C24B36,#8F3423);color:#F5F2EC;box-shadow:0 16px 40px -14px rgba(165,64,45,.55)}
.fitts-target.far:hover{background:var(--seal);color:#F5F2EC;border-color:var(--seal)}
.fitts-readout{position:absolute;left:30px;top:26px;display:flex;flex-direction:column;gap:8px}
.fr-row{display:flex;flex-direction:column;gap:1px}
.fr-row b{font-size:11.5px;letter-spacing:.14em;color:var(--ink-3)}
.fr-row span{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);min-width:230px}
.fitts-flag{position:absolute;bottom:26px;left:30px;font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em}

.hick-panel{width:100%}
.hick-picker{display:flex;gap:10px;margin-bottom:14px}
.hick-btn{flex:1;padding:10px 0;border:1px solid var(--line);border-radius:10px;font-size:13px;letter-spacing:.1em;color:var(--ink-2);background:var(--card);transition:all .25s}
.hick-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.hick-btn.is-active{background:linear-gradient(120deg,var(--ink),#413527);color:var(--paper);border-color:var(--ink)}
.hick-stage{border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);min-height:220px;display:grid;gap:10px;padding:14px;align-content:center}
.hick-stage.cols-2{grid-template-columns:repeat(2,1fr)}
.hick-stage.cols-4{grid-template-columns:repeat(4,1fr)}
.hick-stage.cols-8{grid-template-columns:repeat(4,1fr)}
.hick-msg{grid-column:1/-1;text-align:center;color:var(--ink-3);font-size:13.5px;letter-spacing:.05em}
.hick-cell{aspect-ratio:5/3;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);transition:background .12s,border-color .12s,transform .12s}
.hick-cell.is-target{background:linear-gradient(135deg,#C24B36,var(--seal));border-color:var(--seal);box-shadow:0 0 0 0 rgba(165,64,45,.4);animation:hickpop .25s var(--ease-spring),hickglow 1.3s ease-in-out .25s infinite alternate}
@keyframes hickglow{to{box-shadow:0 0 26px rgba(194,75,54,.5)}}
.hick-cell.is-wrong{background:var(--line);border-color:var(--ink-3)}
@keyframes hickpop{from{transform:scale(.85)}to{transform:scale(1)}}
.hick-stats{display:flex;gap:22px;margin-top:14px;font-size:12px;color:var(--ink-3);letter-spacing:.06em;flex-wrap:wrap}
.hick-stats b{font-family:var(--mono);color:var(--seal);font-weight:400}

.miller-panel{width:100%}
.miller-digits{display:flex;align-items:center;justify-content:center;min-height:110px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);padding:20px;font-family:var(--mono);font-size:clamp(22px,3vw,32px);letter-spacing:.14em;flex-wrap:wrap;gap:2px}
.miller-digits .grp{display:flex}
.miller-digits .gap{width:0}
.miller-panel.is-chunked .miller-digits .gap{width:.7em}
.miller-actions{display:flex;gap:10px;margin-top:14px}
.miller-note{margin-top:12px;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}

.ghost-btn{padding:11px 22px;border:1px solid var(--ink);border-radius:999px;font-size:13px;letter-spacing:.12em;transition:all .3s var(--ease-out);background:transparent}
.ghost-btn:hover{background:var(--ink);color:var(--paper)}
.ghost-btn:disabled{opacity:.4;cursor:not-allowed}
.ghost-btn.is-small{padding:7px 16px;font-size:12px}
.ghost-btn.is-on{background:linear-gradient(120deg,#B0432F,var(--seal));border-color:transparent;color:#F5F2EC}
.ghost-btn.is-on:hover{background:var(--seal-deep);color:#F5F2EC}

.doherty-panel{width:100%;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.doherty-result{width:100%;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);min-height:96px;padding:20px 24px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.doherty-idle{color:var(--ink-3);font-size:13px;letter-spacing:.06em}
.doherty-bar{height:2px;background:var(--line-soft);border-radius:2px;overflow:hidden;position:relative}
.doherty-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--seal),var(--aur-4));transform-origin:0 50%;transform:scaleX(0)}
.doherty-bar.run i{animation:dohertyFill var(--dur,400ms) linear forwards}
@keyframes dohertyFill{to{transform:scaleX(1)}}
.doherty-done{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.doherty-done b{color:var(--seal);font-weight:400}

/* ── 02 原则 ──────────────────────────── */
.pr-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px)}
.pr-title{font-family:var(--serif);font-size:clamp(21px,2.3vw,27px);font-weight:700}
.pr-src{font-size:12.5px;color:var(--ink-3);margin:10px 0 22px;letter-spacing:.02em}

.nielsen{list-style:none}
.nielsen li{border-bottom:1px solid var(--line-soft)}
.nielsen button{width:100%;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:baseline;text-align:left;padding:13px 6px;transition:background .25s;border-radius:8px}
.nielsen button:hover{background:var(--glass-deep)}
.nielsen button b{grid-row:1/3;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--seal)}
.nielsen button span{font-size:15px;font-weight:600;letter-spacing:.02em}
.nielsen button small{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;margin-top:2px}
.nielsen li p{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease-out),opacity .35s,padding .45s;font-size:13.5px;color:var(--ink-2);padding:0 6px 0 52px}
.nielsen li.is-open p{max-height:120px;opacity:1;padding:2px 6px 16px 52px}
.nielsen button::after{content:"+";grid-column:2;justify-self:end;font-family:var(--mono);color:var(--ink-3);transition:transform .35s var(--ease-out),color .3s;margin-top:-30px}
.nielsen li.is-open button::after{transform:rotate(45deg);color:var(--seal)}

.rams{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.rams li{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:11px 4px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.rams li b{grid-row:1/3;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-3)}
.rams li span{font-size:13.5px;font-weight:600}
.rams li.is-key{background:linear-gradient(120deg,rgba(165,64,45,.14),rgba(182,120,200,.12));border-radius:10px;border-bottom:0;padding:14px 12px;margin-top:6px}
.rams li.is-key b{color:var(--seal)}
.rams-note{margin-top:18px;font-size:12.5px;color:var(--ink-3);line-height:1.8}

/* ── 03 编年 ──────────────────────────── */
.timeline{list-style:none;position:relative;padding-left:clamp(86px,12vw,150px)}
.timeline::before{content:"";position:absolute;left:clamp(58px,8.6vw,108px);top:6px;bottom:6px;width:1px;background:var(--line)}
.tl-item{position:relative;padding-bottom:clamp(34px,5vh,52px)}
.tl-item::before{content:"";position:absolute;left:calc(clamp(58px,8.6vw,108px) - clamp(86px,12vw,150px) - 5.5px);top:14px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid transparent;background-clip:padding-box;box-shadow:0 0 0 2px var(--seal),0 0 14px rgba(232,104,90,.35)}
.tl-year{position:absolute;left:calc(clamp(86px,12vw,150px) * -1);top:2px;width:clamp(66px,9vw,120px);font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:700;color:var(--ink);line-height:1}
.tl-item:nth-child(odd) .tl-year{color:var(--ink)}
.tl-body h3{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);font-weight:700;margin-bottom:8px}
.tl-body p{color:var(--ink-2);font-size:14.5px;max-width:40em}
.tl-src{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);background:var(--glass-deep);border:1px solid var(--glass-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 12px;border-radius:999px}

/* ── 04 模式 ──────────────────────────── */
.pt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px)}
.pt-card{position:relative;overflow:hidden;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.55);-webkit-backdrop-filter:blur(20px) saturate(1.55);padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:16px;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .4s}
.pt-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-135%);transition:transform .95s var(--ease-out);pointer-events:none}
.pt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.85)}
.pt-card:hover::after{transform:translateX(135%)}
.pt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pt-head p{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;margin-top:4px}
.pt-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;display:block;margin-bottom:8px;background:var(--grad-flow);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flowbg 7s linear infinite}
.pt-head h3{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);font-weight:700}
.pt-note{font-size:12.8px;color:var(--ink-2);line-height:1.8;border-top:1px dashed var(--line);padding-top:14px;margin-top:auto}

.ptr-device{position:relative;height:300px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass-deep);overflow:hidden;touch-action:pan-y}
.ptr-pull{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;gap:10px;height:64px;margin-top:-64px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink-2)}
.ptr-spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--seal);opacity:0}
.ptr-device.is-refreshing .ptr-spinner{opacity:1;animation:spin .8s linear infinite}
@keyframes spin{to{rotate:360deg}}
.ptr-list{list-style:none;background:var(--glass);border-radius:14px 14px 0 0;min-height:100%;padding:8px 0;will-change:transform}
.ptr-list li{display:flex;align-items:baseline;gap:16px;padding:15px 22px;border-bottom:1px solid var(--line-soft);font-size:14px;font-weight:600}
.ptr-list li b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--seal)}
.ptr-list li:last-child{border-bottom:0}
.ptr-line{position:absolute;left:16px;right:16px;top:76px;border-top:1px dashed var(--seal);opacity:.55;pointer-events:none}
.ptr-line::after{content:"松手刷新";position:absolute;right:0;top:4px;font-family:var(--mono);font-size:10px;color:var(--seal);letter-spacing:.12em}

.inf-device{border:1px solid var(--glass-line);border-radius:14px;overflow:hidden;background:var(--glass-deep);display:flex;flex-direction:column}
.inf-feed{height:250px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin}
.inf-item{background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;padding:14px 16px;font-size:13px;color:var(--ink-2);flex-shrink:0}
.inf-item b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--seal);display:block;margin-bottom:2px}
.inf-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:var(--card)}
.inf-bar span{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em}

.bur-device{position:relative;height:300px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass-deep);overflow:hidden}
.bur-btn{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:12px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:3}
.bur-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease-spring),opacity .3s,translate .4s var(--ease-spring)}
.bur-btn.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bur-btn.is-open span:nth-child(2){opacity:0}
.bur-btn.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.bur-drawer{position:absolute;top:0;right:0;bottom:0;width:64%;background:var(--glass);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-left:1px solid var(--glass-line);display:flex;flex-direction:column;justify-content:center;padding:0 28px;gap:4px;transform:translateX(102%);transition:transform .5s var(--ease-spring);z-index:2}
.bur-device.is-open .bur-drawer{transform:translateX(0)}
.bur-drawer a{font-family:var(--serif);font-size:19px;font-weight:700;padding:9px 0;border-bottom:1px solid var(--line-soft);transition:color .25s,padding-left .3s var(--ease-out)}
.bur-drawer a:hover{color:var(--seal);padding-left:10px}
.bur-hint{position:absolute;left:20px;bottom:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-3)}

.saf-device{display:flex;flex-direction:column;gap:14px;align-items:center}
.saf-btn{width:168px;height:56px;border-radius:999px;background:linear-gradient(120deg,#241F17,#413527);color:var(--paper);font-family:var(--serif);font-size:16px;letter-spacing:.14em;position:relative;overflow:hidden;transition:transform .18s var(--ease-out),background .3s}
.saf-btn:hover{transform:translateY(-2px)}
.saf-btn:active{transform:scale(.96)}
.saf-btn .saf-ripple{position:absolute;border-radius:50%;background:rgba(245,242,236,.35);transform:scale(0);animation:safRipple .7s var(--ease-out) forwards;pointer-events:none}
@keyframes safRipple{to{transform:scale(3.2);opacity:0}}
.saf-log{list-style:none;width:100%;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass-deep);min-height:120px;max-height:150px;overflow-y:auto;padding:12px 16px;font-family:var(--mono);font-size:11.5px;line-height:2;color:var(--ink-2)}
.saf-log li::before{content:"— ";color:var(--seal)}
.saf-log li.is-empty::before{content:""}
.saf-log li b{color:var(--seal);font-weight:400}
.saf-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.saf-legend span{border:1px solid var(--glass-line);border-radius:8px;padding:8px 6px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em;display:flex;flex-direction:column;gap:2px}
.saf-legend b{font-family:var(--sans);font-size:12px;color:var(--ink);font-weight:600}

/* ── 05 实验室 ────────────────────────── */
.lab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.lab-card{position:relative;overflow:hidden;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);backdrop-filter:blur(20px) saturate(1.55);-webkit-backdrop-filter:blur(20px) saturate(1.55);padding:22px;display:flex;flex-direction:column;gap:14px;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .4s}
.lab-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);transform:translateX(-135%);transition:transform .95s var(--ease-out);pointer-events:none}
.lab-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.85)}
.lab-card:hover::after{transform:translateX(135%)}
.lab-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.lab-tag{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--seal);border:1px solid var(--glass-line);background:linear-gradient(90deg,rgba(232,104,90,.12),rgba(182,120,200,.12));border-radius:999px;padding:5px 12px}
.lab-stage{height:190px;border:1px dashed var(--line);border-radius:12px;background:var(--glass-deep);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.lab-stage-col{flex-direction:column;gap:10px;padding:0 26px}
.lab-card h3{font-family:var(--serif);font-size:18px;font-weight:700}
.lab-card p{font-size:12.8px;color:var(--ink-2);line-height:1.8}

.magnet-btn{width:120px;height:48px;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:14px;letter-spacing:.14em;will-change:transform;transition:background .3s}
.magnet-btn:hover{background:linear-gradient(120deg,#C24B36,var(--seal))}

.spring-toggle{width:74px;height:40px;border-radius:999px;background:var(--line);border:1px solid var(--line);padding:4px;transition:background .4s}
.spring-toggle[aria-checked="true"]{background:linear-gradient(120deg,#C24B36,var(--seal));box-shadow:0 6px 18px -6px rgba(165,64,45,.6)}
.st-knob{display:block;width:30px;height:30px;border-radius:50%;background:var(--card);box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .5s var(--ease-spring)}
.spring-toggle[aria-checked="true"] .st-knob{transform:translateX(34px)}

.hold-btn{position:relative;width:120px;height:120px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none}
.hold-text{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);pointer-events:none;transition:color .3s}
.hold-ring{position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from -90deg,#C24B36,var(--aur-3) calc(var(--p,0)*1%),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 5px));pointer-events:none}
.hold-btn.is-done .hold-text{color:var(--seal)}

.tick-slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;background:linear-gradient(to right,#B0432F,var(--aur-4) var(--fill,60%),var(--line) var(--fill,60%));outline-offset:6px}
.tick-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--seal);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:grab;transition:transform .15s}
.tick-slider::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.tick-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--seal);cursor:grab}
.ts-scale{display:flex;justify-content:space-between;width:100%}
.ts-scale i{width:1px;height:8px;background:var(--line)}
.tick-slider~.ts-scale i{background:var(--line)}
#tickOut{font-family:var(--mono);font-size:22px;color:var(--seal);letter-spacing:.1em}

.tilt-card{width:170px;height:118px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.35));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-line);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.2em;will-change:transform}
.tilt-card small{font-family:var(--mono);font-size:9px;letter-spacing:.4em;color:var(--seal);font-weight:400}

.ripple-btn{position:relative;overflow:hidden;width:150px;height:52px;border-radius:999px;background:linear-gradient(120deg,#C24B36,#8F3423 60%,#7C5CA8);background-size:200% 100%;animation:flowbg 6s linear infinite;color:#F5F2EC;font-size:13.5px;letter-spacing:.18em}
.ripple-btn .rp{position:absolute;border-radius:50%;background:rgba(245,242,236,.4);transform:scale(0);animation:rp .65s var(--ease-out) forwards;pointer-events:none}
@keyframes rp{to{transform:scale(3);opacity:0}}

/* ── 06 尾注 ──────────────────────────── */
.colo-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,5vw,72px);padding-bottom:clamp(70px,10vh,110px)}
.src-list{list-style:none;margin-top:22px}
.src-list li{display:grid;grid-template-columns:1fr;padding:11px 0;border-bottom:1px solid var(--line-soft);gap:2px}
.src-list b{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--seal);letter-spacing:.02em}
.src-list span{font-size:12.8px;color:var(--ink-2)}
.note-list{list-style:none;margin-top:22px}
.note-list li{position:relative;padding:0 0 14px 20px;font-size:13px;color:var(--ink-2);line-height:1.85}
.note-list li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--seal)}
.seal-zone{margin-top:34px;display:flex;align-items:center;gap:22px}
.seal{width:92px;height:92px;background:linear-gradient(135deg,#C24B36,#8F3423 70%,#6E2A1E);color:#F5F2EC;border-radius:10px;font-family:var(--serif);font-size:26px;font-weight:700;line-height:1.25;letter-spacing:.1em;rotate:-4deg;box-shadow:0 14px 40px -10px rgba(165,64,45,.6),0 0 0 1px rgba(255,255,255,.2) inset;transition:transform .18s var(--ease-out),rotate .3s}
.seal:hover{rotate:-1deg;transform:scale(1.03)}
.seal:active{transform:scale(.94) rotate(1deg)}
.seal-cap{font-size:12.5px;color:var(--ink-3);max-width:14em;line-height:1.9}

.footer{border-top:1px solid var(--line);padding:26px clamp(20px,5vw,48px);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}

/* ── Toast ────────────────────────────── */
.toast{position:fixed;left:50%;bottom:36px;translate:-50% 16px;z-index:1500;background:rgba(30,25,19,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.14);color:#EDE6D7;font-size:13px;letter-spacing:.08em;padding:12px 26px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .35s,translate .35s var(--ease-out);box-shadow:var(--shadow)}
.toast.show{opacity:1;translate:-50% 0}

/* ── 渐入 ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal[data-delay="1"]{transition-delay:.12s}
.reveal[data-delay="2"]{transition-delay:.24s}
.reveal[data-delay="3"]{transition-delay:.36s}
.reveal.in{opacity:1;transform:none}

/* ── 响应式 ───────────────────────────── */
@media (max-width:1020px){
  .law{grid-template-columns:1fr;gap:24px}
  .pr-cols{grid-template-columns:1fr}
  .pt-grid{grid-template-columns:1fr}
  .lab-grid{grid-template-columns:1fr 1fr}
  .colo-cols{grid-template-columns:1fr}
}
@media (max-width:680px){
  .topnav{display:none}
  .ch-head{grid-template-columns:1fr;align-items:start;gap:10px}
  .ch-no{font-size:44px}
  .timeline{padding-left:20px}
  .timeline::before{left:5px}
  .tl-item{padding-left:26px}
  .tl-item::before{left:-19.5px;top:12px}
  .tl-year{position:static;display:block;margin-bottom:6px}
  .lab-grid{grid-template-columns:1fr}
  .rams{grid-template-columns:1fr}
  .saf-legend{grid-template-columns:repeat(2,1fr)}
  .hero{padding-bottom:150px}
}


/* ── V3 · 画布层：墨息流场 / 千字聚散 / 玻璃体 ── */
.a-gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.aurora.gl-on .a-gl{opacity:1}
.aurora.gl-on .a-blob{display:none}
.hero-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.orb-stage{cursor:grab;position:relative;overflow:hidden}
.orb-stage.orb-ready{cursor:grabbing}
.orb-stage canvas{display:block;width:100%!important;height:100%!important}
.orb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.orb-fallback span{width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;color:var(--ink-2);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),rgba(255,255,255,.25) 42%,rgba(165,64,45,.18) 70%,rgba(79,163,152,.22));border:1px solid var(--glass-line);letter-spacing:.2em}
.orb-ready .orb-fallback{display:none}


/* ── V4 · 实验室触屏修正与扩展 ─────────── */
#lab-magnet .lab-stage,#lab-tilt .lab-stage,.orb-stage,.ink-stage,.rubber-stage,
.swipe-stage,.radial-stage,.sort-stage,.marble-stage{touch-action:none;user-select:none;-webkit-user-select:none}
.hold-btn{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.orb-stage.orb-ready{cursor:grab}
.orb-stage.orb-ready:active{cursor:grabbing}
.stage-clear{position:absolute;top:10px;right:10px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;padding:5px 12px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.stage-clear:hover{color:var(--seal);border-color:var(--seal)}
.stage-clear.at-bottom{top:auto;bottom:10px}

.ink-stage{position:relative;overflow:hidden}
.ink-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.rubber-stage{position:relative;overflow:hidden}
.rubber-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab}
.marble-stage{position:relative;overflow:hidden}
.marble-stage canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}

.swipe-stage{position:relative;overflow:hidden}
.swipe-stack{position:relative;width:200px;height:132px}
.swipe-card{position:absolute;inset:0;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;box-shadow:0 14px 30px -18px rgba(43,35,24,.4)}
.swipe-card b{font-family:var(--serif);font-size:16px;color:var(--ink)}
.swipe-card span{font-size:11px;color:var(--ink-3);line-height:1.5}
.sc-mark{position:absolute;top:12px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.2em;padding:3px 8px;border-radius:8px;border:1.5px solid currentColor;opacity:0;transition:opacity .2s}
.sc-keep{left:12px;color:#4FA398;rotate:-8deg}
.sc-drop{right:12px;color:#C24B36;rotate:8deg}

.radial-stage{position:relative;overflow:hidden}
.radial-dot{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:11.5px;letter-spacing:.16em;border:0;cursor:pointer;transition:transform .25s}
.radial-dot.is-holding{animation:radialCharge .45s linear forwards}
@keyframes radialCharge{to{transform:scale(.86);box-shadow:0 0 0 10px var(--seal-soft)}}
.radial-menu{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none}
.radial-menu.is-open{pointer-events:auto}
.radial-menu button{position:absolute;left:0;top:0;translate:-50% -50%;transform:scale(0);width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:12px;cursor:pointer;transition:transform .32s var(--ease-spring),background .2s}
.radial-menu.is-open button{transform:scale(1)}
.radial-menu.is-open button:nth-child(1){translate:-50% calc(-50% - 68px)}
.radial-menu.is-open button:nth-child(2){translate:calc(-50% + 68px) -50%}
.radial-menu.is-open button:nth-child(3){translate:-50% calc(-50% + 68px)}
.radial-menu.is-open button:nth-child(4){translate:calc(-50% - 68px) -50%}
.radial-menu button:hover{background:var(--seal-soft);border-color:var(--seal)}

.sort-stage{position:relative;overflow:hidden;padding:14px}
.sort-list{position:relative;width:100%}
.sort-item{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--ink);cursor:grab;user-select:none;-webkit-user-select:none}
.sort-item .si-no{font-family:var(--mono);font-size:10px;color:var(--ink-3);font-weight:400}
.sort-item.is-drag{box-shadow:0 18px 34px -16px rgba(43,35,24,.45);border-color:var(--seal);cursor:grabbing}

.load-box{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:0 30px}
.lb-bar{height:12px;border-radius:6px;width:100%;background:linear-gradient(90deg,var(--line-soft) 25%,var(--glass) 50%,var(--line-soft) 75%);background-size:200% 100%;animation:lbShimmer 1.2s linear infinite}
.lb-bar.short{width:62%}
@keyframes lbShimmer{to{background-position:-200% 0}}
.lb-ring{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--seal);animation:lbSpin .8s linear infinite}
@keyframes lbSpin{to{rotate:360deg}}
.lb-check{width:54px;height:54px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lb-check circle{stroke:var(--line);stroke-dasharray:151;stroke-dashoffset:151;animation:lbDash .5s ease-out forwards}
.lb-check path{stroke:var(--seal);stroke-dasharray:36;stroke-dashoffset:36;animation:lbDash .35s .4s ease-out forwards}
@keyframes lbDash{to{stroke-dashoffset:0}}
.load-box em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink-3)}

.form-wrap{width:100%;padding:0 26px}
.form-field{position:relative}
.form-field input{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:10px;background:var(--card);padding:16px 14px 6px;font-size:13.5px;color:var(--ink);outline:none;transition:border-color .25s}
.form-field label{position:absolute;left:14px;top:13px;font-size:13px;color:var(--ink-3);pointer-events:none;transition:all .22s var(--ease-out)}
.form-field.is-focus input,.form-field.has-value input{border-color:var(--seal)}
.form-field.is-focus label,.form-field.has-value label{top:4px;font-size:9.5px;letter-spacing:.12em;color:var(--seal);font-family:var(--mono)}
.form-field.is-error input{border-color:#C0392B;animation:formShake .4s}
.form-field.is-ok input{border-color:#4FA398}
@keyframes formShake{20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:3px 0}}
.form-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em}
.form-hint.is-bad{color:#C0392B}
.form-hint.is-good{color:#4FA398}
.form-submit{margin-top:10px;width:100%;height:38px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);font-size:12.5px;letter-spacing:.2em;cursor:pointer;font-family:var(--serif);transition:background .3s}
.form-submit:hover{background:linear-gradient(120deg,#C24B36,var(--seal))}

.kb-board{width:100%;padding:0 14px;display:flex;flex-direction:column;gap:6px}
.kb-row{display:flex;gap:5px;justify-content:center}
.kb-key{flex:1;max-width:34px;height:34px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-family:var(--mono);font-size:11px;cursor:pointer;transition:transform .12s,background .2s,color .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;padding:0}
.kb-key.is-down{background:linear-gradient(120deg,#C24B36,var(--seal));color:#F5F2EC;border-color:transparent;transform:translateY(2px);box-shadow:0 6px 14px -6px rgba(165,64,45,.6)}
.kb-space{max-width:210px;flex:2.8}

/* ── 减弱动态 ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .marquee-track{animation:none}
  .reveal{opacity:1;transform:none}
  .a-blob,.ht-zh,.progress span,.law-year,.pt-no,.ch-head::after,.ripple-btn{animation:none}
  .hero-ink{display:none}
  .aurora.gl-on .a-gl{opacity:.9}
  .aurora .a-blob{transform:none}
  .pt-card::after,.lab-card::after{display:none}
}