@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&family=Playfair+Display:wght@400;500&display=swap');
:root{color-scheme:dark;--bg:#0e1012;--gold:#c4a36b;--text:#efe8dc;--muted:#8e8c84;--line:#c4a36b30}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 41%,#2927214d,transparent 53%),var(--bg);color:var(--text);font:14px/1.7 'Noto Serif SC','Songti SC',serif}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.27' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:2px solid #e3c48e;outline-offset:5px}button{border:1px solid var(--line);background:transparent;padding:11px 18px;min-height:44px}button:hover{color:#e3c48e;border-color:#c4a36b88}a{color:inherit}header,main,footer{position:relative}header{display:flex;justify-content:space-between;align-items:center;padding:25px 3.8%;border-bottom:1px solid var(--line);gap:20px}.brand{text-decoration:none;letter-spacing:2.5px;font:18px Georgia,serif}.brand span{font:11px monospace;letter-spacing:1.5px;color:#b1a48c}.edition{font-size:11px;color:var(--muted);letter-spacing:1px}.edition b{font-weight:400;color:var(--gold);margin-left:18px}header button{border:0;border-bottom:1px solid var(--line);font-size:11px;padding:6px 0}.intro{text-align:center;padding:49px 16px 0}.eyebrow{font:9px/1.6 monospace;letter-spacing:2.8px;color:var(--gold)}h1{font-size:clamp(26px,3.4vw,42px);letter-spacing:5px;font-weight:400;margin:16px 0 0}.tagline{font:italic 21px 'Playfair Display',Georgia,serif;color:#b4a48a;margin:5px 0 20px}.lead{font-size:14px;letter-spacing:2px;margin:0}.instruction{font-size:11px;color:var(--muted);margin:8px 0 0;letter-spacing:.6px}.instruction span{display:block;font-size:10px;color:#77766f;margin-top:3px}.workbench{position:relative;max-width:1300px;margin:-15px auto -17px;display:flex;justify-content:center;align-items:center}#machine{width:min(650px,70vw);flex-shrink:0;position:relative}#board{width:100%;height:auto;display:block;overflow:visible}.margin-note{position:absolute;width:170px;color:#726f66;font:9px/2.1 monospace;letter-spacing:1.4px;top:40%}.left-note{left:5%}.right-note{right:3%;text-align:right}.margin-note p{font:11px/2 'Noto Serif SC',serif;letter-spacing:1px}.hairline{height:1px;width:60px;background:var(--line);margin:22px 0}.right-note .hairline{margin-left:auto}.signal{display:inline-block;width:4px;height:4px;background:var(--gold);border-radius:100%;box-shadow:0 0 7px var(--gold)}svg text{fill:var(--gold);text-anchor:middle;pointer-events:none}.core-name{font:36px Georgia,serif;letter-spacing:5px;fill:#efe8dc}.core-kicker{font:7px monospace;letter-spacing:2px}.core-state{font:7px monospace;letter-spacing:1px}.core-count{font:7px monospace;fill:#8d877b}.slot{cursor:pointer;outline:none}.slot .outline{fill:#c4a36b03;stroke:#a48b6159;stroke-width:1;stroke-dasharray:3 4;transition:fill .2s,stroke .2s}.slot:hover .outline,.slot.near .outline,.slot:focus-visible .outline{fill:#c4a36b20;stroke:#e3c48e;stroke-dasharray:none}.slot text{font:9px monospace;letter-spacing:1px;fill:#7e725e}.slot.near text{fill:#e3c48e}.installed{cursor:pointer;outline:none}.installed:hover .gear-face,.installed:focus-visible .gear-face{stroke:#ffe0aa;stroke-width:2}.gear-num{font:20px Georgia,serif;fill:#e3c48e}.gear-label{font:10px 'Noto Serif SC',serif;fill:#b9aa90}.gear-small-en{font:6px monospace;letter-spacing:1px;fill:#a08a68}.bench-caption{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid var(--line);font:8px/1.5 monospace;letter-spacing:1.7px;color:#7f786b}.bench-caption #hint{font:11px/1.5 'Noto Serif SC',serif;letter-spacing:1px;color:#b8a888}#tray{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;padding:8px 5px 15px}.component{border:0;position:relative;padding:0 0 10px;display:flex;align-items:center;flex-direction:column;touch-action:none;user-select:none;min-width:0;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}.component svg{width:92px;height:92px;overflow:visible;transition:transform .2s;filter:drop-shadow(0 4px 7px #000)}.component:nth-child(even){padding-top:13px}.component .en{font:8px monospace;letter-spacing:1px;color:#99856a;margin-top:4px}.component .zh{font-size:12px;letter-spacing:.5px;white-space:nowrap}.component:hover svg,.component.selected svg{transform:translateY(-5px);filter:drop-shadow(0 0 9px #c4a36b55)}.component.selected{background:#c4a36b0a;border-bottom-color:#c4a36b}.component.is-installed{opacity:.45;touch-action:auto}.component.is-installed svg{filter:none}.component .component-status{font:8px monospace;color:#8d805f;margin-top:4px;letter-spacing:1px}.component.read .component-status{color:#c4a36b}.controls{display:flex;justify-content:center;gap:12px;margin:17px auto;flex-wrap:wrap}.controls button{font-size:10px;border:0;color:#918a7e}.controls #readAll{color:#d2b989;border-bottom:1px solid #9b81564d}.controls #readAll span{margin-left:22px}.final-wrap{text-align:center}#final,.gold-button{background:linear-gradient(135deg,#af8b50,#d5b67a);border:1px solid #e3c48e;color:#161514;padding:15px 29px;font-size:13px;letter-spacing:1px;box-shadow:0 3px 25px #c4a36b17}#final{animation:reveal 1s ease both;margin:12px 0}.small-note{text-align:center;font-size:10px;color:#676760;margin:20px 0 40px;letter-spacing:1px}footer{border-top:1px solid var(--line);margin:0 3.8%;padding:22px 0;display:flex;justify-content:space-between;color:#756f63;font:9px monospace;gap:14px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;transition:.25s;z-index:30;background:#29251e;border:1px solid #957b50;padding:11px 21px;pointer-events:none;font-size:12px;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.drag-ghost{position:fixed;pointer-events:none;z-index:50;width:110px;height:110px;filter:drop-shadow(0 0 12px #c4a36b80);transform:translate(-50%,-50%) scale(1.08)}.dragging{opacity:.25!important}dialog{border:1px solid #786346;background:#141719;color:var(--text);padding:0;box-shadow:-30px 0 90px #0008;max-height:none}dialog::backdrop{background:#050608b8;backdrop-filter:blur(3px)}#reader{position:fixed;inset:0 0 0 auto;margin:0;width:min(540px,100%);height:100dvh;max-width:none}#reader[open]{display:flex;flex-direction:column;animation:drawer .28s ease}.drawer-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:13px 26px;flex-shrink:0;font:9px monospace;letter-spacing:1.4px;color:#a78c61}.close{border:0;padding:5px 10px;font-size:16px;min-width:44px}#chapterNav{display:flex;border-bottom:1px solid var(--line);padding:12px 22px;gap:6px;flex-shrink:0}#chapterNav button{flex:1;font:11px monospace;padding:8px 0;min-width:0;border:1px solid transparent;color:#837b6e}#chapterNav button.active{border-color:#92764b;color:#e3c48e;background:#c4a36b0c}.reader-scroll{padding:30px 35px;overflow:auto;overscroll-behavior:contain;flex:1}h2{font-size:29px;font-weight:400;letter-spacing:2px;margin:12px 0 18px}#summary{font-size:15px;color:#c6b597;line-height:1.9;border-left:2px solid #977c50;padding-left:18px;margin:0 0 22px}#keywords{display:flex;gap:8px;margin-bottom:28px}#keywords span{font-size:10px;border:1px solid var(--line);padding:3px 10px;color:#a5957d}#body{font-family:'Noto Serif SC','Songti SC',serif;font-size:14px;line-height:2;color:#c9c6bd}#body p{margin:0 0 18px}#body h3{color:#d3b887;font-size:14px;font-weight:500;margin:32px 0 12px}#body ul{padding-left:20px;margin-bottom:22px}#body li{padding-bottom:7px}.drawer-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:14px 20px max(14px,env(safe-area-inset-bottom));flex-shrink:0}.drawer-bottom button{font-size:11px;border:0}.drawer-bottom span{font:10px monospace;color:#8b7757}#archive,#welcome{width:min(580px,calc(100% - 30px));max-height:88dvh;overflow:auto}#archive[open],#welcome[open]{animation:reveal .3s ease}.archive-body{padding:30px 35px}.archive-body p{color:#bebbb2;line-height:1.95;font-size:13px}.archive-body article{border-top:1px solid var(--line);padding:18px 0 7px}.archive-body article b{font-size:12px;color:#c4a36b;font-weight:400}.muted{color:#918a7e!important}.evidence{border:1px dashed #7a684744;padding:22px;margin-top:20px;color:#9e8b6d;text-align:center;font-size:12px}.evidence span{display:block;font-size:10px;color:#746e63;margin-top:6px}.seal{color:#c4a36b;font-size:35px}.portfolio-card{padding:25px 20px;border:1px solid var(--line);background:radial-gradient(at top right,#6e56322b,transparent);margin:25px 0}.portfolio-card span{font:7px monospace;letter-spacing:1.5px;color:#9e8865}.portfolio-card h3{font:24px Georgia,serif;letter-spacing:1px;margin:12px 0}.portfolio-card p{font:10px monospace}.gold-button{display:block;text-align:center;text-decoration:none}.return{border:0;width:100%;font-size:11px;margin-top:10px;color:#a2937d}.lock-in{animation:lock .5s ease-out}.ready-segment{transition:stroke .7s;transition-delay:calc(var(--i)*120ms)}@keyframes drawer{from{transform:translateX(100%)}to{transform:none}}@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes lock{0%{opacity:.3;scale:1.1}65%{scale:.98}100%{opacity:1;scale:1}}@media(min-width:1500px){#machine{width:700px}}@media(max-width:1050px){.margin-note{width:120px}.left-note{left:2%}.right-note{right:2%}.bench-caption,#tray{margin-left:4%;margin-right:4%}.brand span{display:block;margin-top:5px}.edition{font-size:10px}.edition b{display:block;margin:0}#machine{width:min(640px,77vw)}.margin-note{font-size:8px}}@media(max-width:700px){header{padding:17px 5%;gap:10px}.brand{font-size:16px;letter-spacing:2px}.brand span{font-size:8px}.edition{display:none}header button{font-size:10px}.intro{padding-top:31px}h1{letter-spacing:3px;margin-top:15px;font-size:28px}.eyebrow{font-size:7px;letter-spacing:2px}.tagline{font-size:19px;margin-bottom:20px}.lead{font-size:12px;letter-spacing:1px}.instruction{font-size:10px}.instruction span{font-size:9px}#machine{width:100%}.workbench{margin:0 -1% -4px}.margin-note{display:none}.bench-caption{padding:12px 0;gap:12px}.bench-caption>span:first-child{font-size:7px}.bench-caption>span:last-child{display:none}.bench-caption #hint{font-size:10px;letter-spacing:0}#tray{grid-template-columns:repeat(4,1fr);gap:12px 3px;padding-top:8px}.component:nth-child(even){padding-top:0}.component svg{width:68px;height:68px}.component .en{font-size:6px;letter-spacing:.2px}.component .zh{font-size:10px}.component .component-status{font-size:6px}.component:nth-child(5){grid-column:1}.controls{gap:3px;margin:10px}.controls button{padding:9px 13px;font-size:10px}.small-note{font-size:9px;letter-spacing:0;margin-bottom:28px}footer{font-size:8px;flex-wrap:wrap;padding:18px 0}footer span:nth-child(2){display:none}#reader{inset:auto 0 0;margin:0;width:100%;height:88dvh;border-radius:20px 20px 0 0}#reader[open]{animation:reveal .3s ease}.reader-scroll{padding:24px}.drawer-top{padding:12px 19px}#chapterNav{padding:9px 18px;gap:4px}h2{font-size:25px}#body{font-size:15px}#summary{font-size:14px}.drawer-bottom{padding-left:10px;padding-right:10px}.archive-body{padding:23px}.archive-body p{font-size:14px}.core-state{font-size:8px}.core-count{font-size:8px}.gear-label{font-size:12px}.slot text{font-size:10px}.core-kicker{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(min-width:701px){.margin-note{display:none}.workbench{margin-top:-30px;min-height:600px}#tray{position:absolute;inset:20px 0 0;display:block;max-width:none;margin:0;padding:0;pointer-events:none}.component{position:absolute;width:145px;pointer-events:auto;padding:0 0 8px!important}.component:nth-child(1){left:7%;top:0}.component:nth-child(2){right:7%;top:10%}.component:nth-child(3){left:3%;top:29%}.component:nth-child(4){right:3%;top:41%}.component:nth-child(5){left:7%;top:60%}.component:nth-child(6){right:7%;top:72%}.component:nth-child(7){left:27%;top:86%;flex-direction:row;flex-wrap:wrap;width:195px;justify-content:center}.component:nth-child(7) svg{width:70px;height:70px;grid-row:span 3}.component:nth-child(7) .zh{margin-left:7px}.component:nth-child(7) .en{position:absolute;left:82px;top:3px}.component:nth-child(7) .component-status{position:absolute;left:82px;top:45px}.bench-caption{margin-top:42px}.component svg{width:88px;height:88px}.intro{padding-top:36px}.tagline{margin-bottom:15px}.workbench #machine{width:600px}.bench-caption>span:first-child{visibility:hidden}}
@media(min-width:701px) and (max-width:1000px){.component{width:110px}.component svg{width:70px;height:70px}.component .zh{font-size:10px}.component .en{font-size:6px}.component:nth-child(1),.component:nth-child(5){left:1%}.component:nth-child(2),.component:nth-child(6){right:1%}.component:nth-child(3){left:0}.component:nth-child(4){right:0}.workbench #machine{width:70vw}.workbench{min-height:0}.component:nth-child(7){top:87%;left:21%}}
.slot .outline{stroke:#b294677d;fill:#c4a36b06}.slot text{fill:#ab946e}.core-state{fill:#cbb790}.core-count{fill:#afa38c}

@media(max-width:700px){.workbench{display:block;margin-left:0;margin-right:0}#tray{margin:0 5%;position:relative}#tray:before{content:'COMPONENT TRAY / 选择一枚齿轮';grid-column:1/-1;font:8px monospace;letter-spacing:1px;color:#a38a64;border-top:1px solid var(--line);padding:13px 0 5px;margin-bottom:3px}.bench-caption{margin-top:8px}#board .gear-label{font-size:11px}.component{min-height:112px}}
.slot .outline{stroke:#b99c6d;stroke-opacity:.65;fill:#c4a36b0b;stroke-width:1.2}.slot circle{stroke:#a48b6166}

/* Reading permissions and external navigation fallback. */
.reading-mode{font-size:10px;line-height:1.8;color:#a5957d;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#chapterNav button:disabled{color:#6f6a60;border-color:transparent;cursor:not-allowed;opacity:.7}
.drawer-bottom button:disabled{opacity:.35;cursor:not-allowed}
.copy-status{font-size:11px!important;margin:0!important;color:#b7a382!important}
#portfolioFallback{font-size:11px;color:#a5957d;margin-top:10px}
#portfolioUrl{width:100%;background:#0e1012;border:1px solid var(--line);color:var(--text);font:12px monospace;padding:12px;margin:6px 0;min-height:44px}
