/* 启微分子工作台 · 样式（读 W6A 读本 token；三维原子色沿用组件库 vx.css） */
:root{
  --vx-atom-c:#3E4A56; --vx-atom-o:#C6613F; --vx-atom-n:#2F74B5;
  --vx-atom-h:#E8ECEF; --vx-atom-s:#B08A1E; --vx-atom-x:#6E7B75; --vx-bond:#8794A1;
  --mw:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w6a-canvas);color:var(--w6a-ink-900);font:var(--w6a-fs-body)/var(--w6a-lh-body) var(--w6a-font-cn);overflow-x:hidden}
a{color:var(--w6a-brand)}
.wrap{max-width:var(--mw);margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--w6a-ink-300);font-size:var(--w6a-fs-note)}

.top{background:var(--w6a-paper);border-bottom:1px solid var(--w6a-hairline);position:sticky;top:0;z-index:5}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--w6a-nav-h);flex-wrap:wrap}
.brand{font-weight:700;color:var(--w6a-ink-900);text-decoration:none;display:flex;gap:10px;align-items:baseline}
.back{font-weight:400;font-size:var(--w6a-fs-small);color:var(--w6a-brand)}
.badge{margin:0;font-size:var(--w6a-fs-note);color:var(--w6a-ok);background:#EAF3EC;border:1px solid #CFE3D5;border-radius:var(--w6a-radius-pill);padding:2px 10px}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--w6a-sp-2xl);align-items:center;padding-top:40px;padding-bottom:24px}
.eyebrow{margin:0 0 6px;font:600 var(--w6a-fs-note)/1 var(--w6a-font-en);letter-spacing:.12em;color:var(--w6a-accent)}
h1{font-size:34px;line-height:var(--w6a-lh-tight);margin:0 0 12px}
h1 small{font-size:18px;font-weight:400;color:var(--w6a-ink-500)}
.lede{color:var(--w6a-ink-500);margin:0 0 12px;max-width:40em}
.status{font-size:var(--w6a-fs-small);margin:0;color:var(--w6a-ink-300)}
.status[data-state=ready]{color:var(--w6a-ok)}
.status[data-state=error]{color:var(--w6a-danger)}
.hero-3d{margin:0;background:var(--w6a-paper);border:1px solid var(--w6a-hairline);border-radius:var(--w6a-radius);padding:8px}
.hero-3d canvas{width:100%;height:300px;display:block;cursor:grab;touch-action:none}
.hero-3d figcaption,.note{font-size:var(--w6a-fs-note);color:var(--w6a-ink-300);margin-top:6px}

.panel{padding-top:28px;padding-bottom:12px}
h2{font-size:var(--w6a-fs-h1);margin:0 0 12px;padding-top:12px;border-top:2px solid var(--w6a-ink-900);display:inline-block}
.sub{color:var(--w6a-ink-500);margin:0 0 10px;font-size:var(--w6a-fs-small)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
input[type=text],textarea{flex:1 1 240px;min-width:0;font:15px/1.4 var(--w6a-font-mono);padding:9px 10px;border:1px solid var(--w6a-border);border-radius:var(--w6a-radius-s);background:var(--w6a-paper);color:var(--w6a-ink-900)}
textarea{width:100%;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--w6a-brand);outline-offset:1px}
.btn{font:600 var(--w6a-fs-small) var(--w6a-font-cn);padding:9px 16px;border-radius:var(--w6a-radius-s);border:1px solid var(--w6a-brand);background:var(--w6a-brand);color:#fff;cursor:pointer}
.btn:hover{background:var(--w6a-brand-deep)}
.btn.ghost{background:var(--w6a-paper);color:var(--w6a-brand)}
.btn.ghost:hover{background:var(--w6a-brand-tint)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.chip{font-size:13px;padding:3px 10px;border-radius:var(--w6a-radius-pill);border:1px solid var(--w6a-hairline);background:var(--w6a-paper);cursor:pointer;color:var(--w6a-ink-700)}
.chip:hover,.chip[aria-pressed=true]{border-color:var(--w6a-brand);color:var(--w6a-brand);background:var(--w6a-brand-tint)}
.msg{min-height:1.4em;margin:4px 0;font-size:var(--w6a-fs-small)}
.msg.err{color:var(--w6a-danger);font-weight:600}
.msg.ok{color:var(--w6a-ok)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.card{background:var(--w6a-paper);border:1px solid var(--w6a-hairline);border-radius:var(--w6a-radius);padding:14px;min-width:0}
.card-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;margin-bottom:8px}
.svg2d{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--w6a-paper)}
.svg2d svg{width:100%;height:100%}
.svg2d.draw path[class^=bond-]{animation:draw 1.1s ease-out forwards}
.svg2d.draw path[class^=atom-],.svg2d.draw text{opacity:0;animation:fade .5s .7s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.props div{background:var(--w6a-sunk);border-radius:var(--w6a-radius-s);padding:8px 10px;min-width:0}
.props dt{font-size:var(--w6a-fs-note);color:var(--w6a-ink-500)}
.props dd{margin:2px 0 0;font:600 20px/1.2 var(--w6a-font-en);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.props div.wide{grid-column:span 3}
.props dd.f{font-family:var(--w6a-font-mono);font-size:16px}
.rules{list-style:none;margin:0;padding:0}
.rules li{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--w6a-hairline);font-size:var(--w6a-fs-small)}
.rules li.grp{display:block;border:0;font-weight:700;padding-top:10px;color:var(--w6a-ink-500)}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--w6a-border)}
.lamp.pass{background:var(--w6a-ok);box-shadow:0 0 0 3px #D8EBDD}
.lamp.fail{background:var(--w6a-danger);box-shadow:0 0 0 3px #F1DADA}
.rules .v{font-family:var(--w6a-font-mono);color:var(--w6a-ink-500)}
.d3{height:280px;display:flex;align-items:center;justify-content:center;background:var(--w6a-sunk);border-radius:var(--w6a-radius-s)}
.d3 canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.d3 .plan{color:var(--w6a-ink-500);font-size:var(--w6a-fs-small);padding:16px;text-align:center}
.tag{display:inline-block;margin-left:8px;font-size:12px;padding:1px 8px;border-radius:var(--w6a-radius-pill);background:var(--w6a-accent-tint);color:var(--w6a-accent-ink);font-weight:600}

.tbl-wrap{overflow-x:auto;border:1px solid var(--w6a-hairline);border-radius:var(--w6a-radius-s);background:var(--w6a-paper);max-height:520px;overflow-y:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid var(--w6a-hairline);text-align:right;white-space:nowrap}
th{position:sticky;top:0;background:var(--w6a-panel);cursor:pointer;user-select:none}
th[aria-sort=ascending]::after{content:" ▲"} th[aria-sort=descending]::after{content:" ▼"}
td.l,th.l{text-align:left}
td.smi{font-family:var(--w6a-font-mono);max-width:260px;overflow:hidden;text-overflow:ellipsis}
tr.bad td{color:var(--w6a-danger)}

.road{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.road li{background:var(--w6a-paper);border:1px dashed var(--w6a-border);border-radius:var(--w6a-radius);padding:12px}
.road p{margin:6px 0 0;font-size:var(--w6a-fs-small);color:var(--w6a-ink-500)}
.foot{padding-top:24px;padding-bottom:40px;font-size:var(--w6a-fs-note);color:var(--w6a-ink-300)}

@media (max-width:860px){
  .hero,.grid2{grid-template-columns:1fr}
  .road{grid-template-columns:1fr}
  .hero{padding-top:24px}
  h1{font-size:26px}
  .hero-3d canvas{height:240px}
}
@media (max-width:420px){
  .props{grid-template-columns:repeat(2,1fr)}
  .props div.wide{grid-column:span 2}
  .badge{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .svg2d.draw path,.svg2d.draw text{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
}
.row.sma{flex-wrap:nowrap}
.row.sma input{flex:1 1 120px}
.row.sma .btn{flex:none;padding:9px 12px}

/* ===== V2 ===== */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--w6a-nav-h) + 12px)}
.nav{display:flex;gap:14px;font-size:var(--w6a-fs-small);flex-wrap:wrap}
.nav a{color:var(--w6a-ink-500);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--w6a-brand);border-bottom-color:var(--w6a-brand)}
.nav a.nav-cta{color:var(--w6a-accent-ink);font-weight:600}
.engine{margin-top:8px;max-width:30em;transition:opacity .6s}
.bar{height:4px;background:var(--w6a-hairline);border-radius:2px;overflow:hidden;margin:4px 0}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--w6a-brand),var(--w6a-accent));transition:width .25s ease-out}
.engine.done .bar{opacity:0;transition:opacity .6s}
.batch-bar{max-width:420px}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease-out,transform .7s ease-out}
.rv.in{opacity:1;transform:none}

.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.task{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--w6a-paper);border:1px solid var(--w6a-hairline);border-radius:var(--w6a-radius);padding:14px 16px 16px;cursor:pointer;font:inherit;color:var(--w6a-ink-900);transition:transform .2s,box-shadow .2s,border-color .2s}
.task:hover,.task:focus-visible{transform:translateY(-3px);box-shadow:var(--w6a-shadow-pop);border-color:var(--w6a-brand)}
.task svg{width:120px;height:80px;margin-bottom:2px}
.task b{font-size:var(--w6a-fs-h3)}
.task span{font-size:var(--w6a-fs-small);color:var(--w6a-ink-500)}
.task em{font-style:normal;font-size:var(--w6a-fs-small);color:var(--w6a-brand);font-weight:600;margin-top:auto}
.t-zone{fill:var(--w6a-brand-tint);stroke:var(--w6a-brand);stroke-dasharray:4 3}
.t-shape{fill:rgba(198,97,63,.25);stroke:var(--w6a-accent);stroke-width:2;transform-origin:60px 42px;animation:breathe 3.2s ease-in-out infinite}
.t-dot{fill:var(--w6a-accent)}
.t-ring{fill:none;stroke:var(--w6a-ink-500);stroke-width:2.2}
.t-hl{stroke:var(--w6a-accent);stroke-width:4;stroke-linecap:round;animation:blink 2.4s ease-in-out infinite}
.t-warn{fill:var(--w6a-accent)}
.task svg text{fill:#fff;font:700 13px var(--w6a-font-en)}
.t-b1,.t-b2,.t-b3{fill:var(--w6a-brand);transform-origin:20px 0;animation:grow 2.8s ease-out infinite}
.t-b2{fill:#4F7DB8;animation-delay:.2s}.t-b3{fill:#94AFD3;animation-delay:.4s}
@keyframes breathe{50%{transform:scale(.9)}}
@keyframes blink{50%{opacity:.25}}
@keyframes grow{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}
.more{margin-top:12px}

.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.btn.sm{padding:5px 10px;font-size:13px;font-weight:500}
.radar{width:100%;max-height:330px;display:block}
.radar .rg{fill:none;stroke:var(--w6a-hairline)}
.radar .ra{stroke:var(--w6a-hairline)}
.radar .rz{fill:var(--w6a-brand-tint);fill-opacity:.7;stroke:var(--w6a-brand);stroke-dasharray:5 4;stroke-width:1.4}
.radar .rv-shape{fill:rgba(26,107,50,.18);stroke:var(--w6a-ok);stroke-width:2}
.radar .rv-shape.warn{fill:rgba(198,97,63,.2);stroke:var(--w6a-accent)}
.radar .rd{fill:var(--w6a-ok)}.radar .rd.o{fill:var(--w6a-danger)}
.radar .rl{font:600 12px var(--w6a-font-en);fill:var(--w6a-ink-500)}
.radar .rl tspan+tspan{font-weight:400;fill:var(--w6a-ink-300)}
.radar .rl.o,.radar .rl.o tspan{fill:var(--w6a-danger)}

.alerts{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto}
.alerts li{margin:0 0 6px}
.alerts li.none{color:var(--w6a-ok);font-size:var(--w6a-fs-small);padding:8px 0}
.al{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;font:inherit;font-size:var(--w6a-fs-small);background:var(--w6a-sunk);border:1px solid transparent;border-radius:var(--w6a-radius-s);padding:6px 10px;cursor:pointer;color:var(--w6a-ink-900);animation:slidein .4s ease-out both}
.al:hover,.al[aria-pressed=true]{border-color:var(--w6a-accent);background:var(--w6a-accent-tint)}
.al .set{font:700 11px var(--w6a-font-en);padding:1px 6px;border-radius:4px;color:#fff;background:var(--w6a-danger)}
.al.b .set{background:var(--w6a-warn)}
.al .nm{font-family:var(--w6a-font-mono);overflow-wrap:anywhere}
.al .go{color:var(--w6a-brand);font-size:12px}
@keyframes slidein{from{opacity:0;transform:translateX(-8px)}}

.fil{margin:4px 0 8px}
.simlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.simlist li{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;background:var(--w6a-paper);border:1px solid var(--w6a-hairline);border-radius:var(--w6a-radius);padding:8px 12px 8px 8px;min-width:0}
.simlist.grow li{animation:slidein .45s ease-out both;animation-delay:var(--d)}
.thumb{width:150px;height:110px}
.thumb svg{width:100%;height:100%}
.si{min-width:0;display:flex;flex-direction:column;gap:3px}
.si .muted{overflow-wrap:anywhere}
.tc{display:flex;align-items:center;gap:8px}
.tc i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--w6a-brand),var(--w6a-accent));width:0;flex:none;max-width:calc(100% - 44px)}
.simlist.grow .tc i{width:var(--w);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.tc span{font:600 13px var(--w6a-font-en);font-variant-numeric:tabular-nums}
.file{position:relative;overflow:hidden;display:inline-flex;align-items:center}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
td.al-c{max-width:220px;overflow:hidden;text-overflow:ellipsis;font-family:var(--w6a-font-mono);font-size:12px}
.road{grid-template-columns:repeat(4,1fr)}

.custom{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:center;background:var(--w6a-paper);border:1px solid var(--w6a-hairline);border-radius:var(--w6a-radius);padding:18px 20px}
.custom p{margin:0 0 8px}
.custom .contact a{font-family:var(--w6a-font-en)}
.custom-art{width:100%}
.custom-art rect{fill:var(--w6a-brand-tint);stroke:var(--w6a-brand)}
.custom-art path{stroke:var(--w6a-accent);stroke-width:2;stroke-dasharray:4 4;animation:dash 1.6s linear infinite}
.custom-art text{font:600 13px var(--w6a-font-cn);fill:var(--w6a-brand-deep);text-anchor:middle}
@keyframes dash{to{stroke-dashoffset:-16}}
a.btn{text-decoration:none;display:inline-block}

@media (max-width:1000px){.road{grid-template-columns:repeat(2,1fr)}.simlist{grid-template-columns:1fr}}
@media (max-width:860px){
  .tasks{grid-template-columns:1fr}
  .task{flex-direction:row;flex-wrap:wrap;align-items:center}
  .task svg{width:84px;height:56px}
  .task b{flex:1 1 60%}
  .task span,.task em{flex-basis:100%}
  .custom{grid-template-columns:1fr}
  .custom-art{max-width:260px}
  .nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:12px;padding-bottom:4px}
  .nav a{white-space:nowrap}
}
@media (max-width:420px){
  .road{grid-template-columns:1fr}
  .simlist li{grid-template-columns:96px 1fr;padding-right:8px}
  .simlist li .btn{grid-column:1 / -1}
  .thumb{width:96px;height:72px}
  .radar .rl{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .t-shape,.t-hl,.t-b1,.t-b2,.t-b3,.custom-art path,.al,.simlist.grow li{animation:none!important}
  .simlist .tc i{width:var(--w)!important;transition:none}
}
@media (max-width:860px){.top .badge{display:none}.top-in{row-gap:0;padding-top:4px}}