:root{--n-1:#faf9f6;--n-2:#f1f0ec;--n-3:#e4e2dc;--n-4:#d2d0c8;--n-5:#aaa8a1;--n-6:#7a7872;--n-7:#5e5c57;--n-8:#42413c;--n-9:#262521;--n-10:#151413;--accent:#c56473;--accent-deep:#a84a59;--accent-soft:#c5647314;--accent-mid:#c5647324;--accent-border:#c5647352;--accent-glow:#c564732e;--info:#3d6896;--success:#5e9f7e;--warning:#a87a3d;--error:#a64953;--font-sans:"Inter", "pingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;--font-serif:"Noto Serif SC", "Source Han Serif", "SongTi SC", "Georgia", serif;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;--r-3xl:20px;--ring:0 0 0 1px var(--n-4);--whisper:0 2px 8px #24231f0a, 0 8px 28px #24231f0d;--whisper-lg:0 4px 12px #24231f0f, 0 16px 40px #24231f12;--inset-hi:inset 0 1px 0 #fff9;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--n-1);color:var(--n-9);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px;line-height:1.55}::selection{background:var(--accent-mid);color:var(--n-10)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--n-4);background-clip:padding-box;border:2px solid #0000;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--n-5);background-clip:padding-box}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-md)}.app{height:100vh;flex-direction:column;height:100dvh;display:flex}.topbar{background:var(--n-1);border-bottom:1px solid var(--n-4);z-index:10;flex:none;justify-content:space-between;align-items:center;height:60px;padding:0 32px;display:flex;position:relative}.topbar:after{content:"";background:linear-gradient(90deg, transparent, var(--accent-border) 30%, var(--accent-border) 70%, transparent);opacity:.4;height:1px;position:absolute;bottom:-1px;left:0;right:0}.brand{align-items:baseline;gap:14px;display:flex}.brand-mark{background:radial-gradient(circle at 35% 30%, var(--accent), var(--accent-deep));width:22px;height:22px;box-shadow:0 0 0 3px var(--accent-soft), 0 2px 6px var(--accent-glow);border-radius:50%;align-self:center;position:relative}.brand-mark:after{content:"";border:1.5px solid #ffffff80;border-radius:50%;position:absolute;inset:4px}.brand h1{font-family:var(--font-serif);color:var(--n-10);letter-spacing:-.02em;font-size:1.2rem;font-weight:500}.brand span{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}.top-meta{color:var(--n-7);align-items:center;gap:20px;font-size:.8rem;display:flex}.top-meta>span:not(.badge){font-family:var(--font-mono);letter-spacing:.04em}.badge{background:var(--n-2);border:1px solid var(--n-4);color:var(--n-8);font-size:.72rem;font-weight:500;font-family:var(--font-mono);letter-spacing:.06em;box-shadow:var(--inset-hi);border-radius:999px;align-items:center;gap:7px;padding:5px 11px;display:inline-flex}.badge:before{content:"";background:var(--accent);width:6px;height:6px;box-shadow:0 0 0 2px var(--accent-soft);animation:pulse 2.4s var(--ease-in-out) infinite;border-radius:50%}@keyframes pulse{0%,to{box-shadow:0 0 0 2px var(--accent-soft)}50%{box-shadow:0 0 0 5px #0000}}.layout{flex:1;grid-template-columns:280px 1fr 360px;min-height:0;display:grid}.sidebar{background:var(--n-2);border-right:1px solid var(--n-4);flex-direction:column;display:flex;overflow-y:auto}.sidebar-header{border-bottom:1px solid var(--n-3);padding:22px 24px 18px;position:relative}.sidebar-header h2{font-family:var(--font-serif);color:var(--n-10);letter-spacing:-.01em;margin-bottom:4px;font-size:1rem;font-weight:500}.sidebar-header p{color:var(--n-6);font-size:.7rem;font-family:var(--font-mono);letter-spacing:.1em}.nav-list{flex-direction:column;gap:4px;padding:14px 12px;display:flex}.nav-item{border-radius:var(--r-lg);text-align:left;transition:all .22s var(--ease-out);background:0 0;border:1px solid #0000;align-items:center;gap:14px;width:100%;padding:12px 14px;display:flex;position:relative}.nav-item:hover{background:var(--n-3)}.nav-item.active{background:var(--n-1);border-color:var(--accent-border);box-shadow:var(--whisper)}.nav-item.active:before{content:"";background:var(--accent);border-radius:0 2px 2px 0;width:3px;height:22px;position:absolute;top:50%;left:-12px;transform:translateY(-50%)}.nav-index{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.04em;width:18px;font-size:.72rem}.nav-item.active .nav-index{color:var(--accent);font-weight:500}.nav-content{flex:1;min-width:0}.nav-title{color:var(--n-9);margin-bottom:2px;font-size:.875rem;font-weight:500;transition:color .2s;display:block}.nav-item.active .nav-title{color:var(--n-10)}.nav-sub{color:var(--n-6);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.sidebar-footer{border-top:1px solid var(--n-3);color:var(--n-7);margin-top:auto;padding:20px 24px;font-size:.8rem;line-height:1.65}.sidebar-footer strong{color:var(--n-9);letter-spacing:.1em;text-transform:uppercase;font-size:.7rem;font-weight:500;font-family:var(--font-mono);margin-bottom:8px;display:block}.stage{background:var(--n-1);isolation:isolate;position:relative;overflow:hidden}.stage:before{content:"";pointer-events:none;z-index:1;background:radial-gradient(at 50% 45%,#0000 35%,#d0cec62e 100%),radial-gradient(circle at 20% 20%,#c5647306,#0000 40%);position:absolute;inset:0}.stage:after{content:"";pointer-events:none;z-index:1;background-image:linear-gradient(#a8a69f0f 1px,#0000 1px),linear-gradient(90deg,#a8a69f0f 1px,#0000 1px);background-position:50%;background-size:48px 48px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 30%,#0000 75%);mask-image:radial-gradient(#000 30%,#0000 75%)}#webglHost{z-index:2;touch-action:none;cursor:grab;position:absolute;inset:0}#webglHost:active{cursor:grabbing}#webglHost canvas{width:100%;height:100%;display:block}.stage-overlay{z-index:5;pointer-events:none;position:absolute;top:28px;left:32px}.stage-code{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;font-size:.72rem}.stage-title{font-family:var(--font-serif);color:var(--n-10);letter-spacing:-.02em;font-size:1.85rem;font-weight:500;line-height:1.15}.stage-subtitle{color:var(--n-7);font-size:.85rem;font-family:var(--font-mono);letter-spacing:.02em;margin-top:6px}.toolbar{z-index:5;-webkit-backdrop-filter:blur(10px);border:1px solid var(--n-4);border-radius:var(--r-xl);box-shadow:var(--whisper);background:#faf9f6d9;gap:2px;padding:5px;display:flex;position:absolute;top:28px;right:32px}.tool{border-radius:var(--r-md);color:var(--n-7);transition:all .18s var(--ease-out);letter-spacing:.01em;align-items:center;gap:6px;padding:7px 12px;font-size:.8rem;font-weight:500;display:flex}.tool:hover{background:var(--n-3);color:var(--n-9)}.tool.active{background:var(--accent-soft);color:var(--accent)}.tool-icon{font-size:.95rem;line-height:1}.pins{z-index:4;pointer-events:none;position:absolute;inset:0}.pin{pointer-events:auto;transition:opacity .3s var(--ease-out);align-items:center;gap:8px;display:flex;position:absolute;transform:translate(-12px,-50%)}.pin-dot{background:var(--accent);border:2px solid var(--n-1);width:12px;height:12px;box-shadow:0 0 0 1px var(--accent-border), 0 2px 6px var(--accent-glow);cursor:pointer;transition:transform .2s var(--ease-out);border-radius:50%;position:relative}.pin-dot:after{content:"";border:1.5px solid var(--accent);opacity:0;animation:pinRipple 1.8s var(--ease-out) infinite;border-radius:50%;position:absolute;inset:-4px}@keyframes pinRipple{0%{opacity:.5;transform:scale(.8)}to{opacity:0;transform:scale(1.8)}}.pin:hover .pin-dot,.pin.active .pin-dot{transform:scale(1.35)}.pin.active .pin-dot:after{opacity:1}.pin-label{-webkit-backdrop-filter:blur(6px);border:1px solid var(--n-4);border-radius:var(--r-md);color:var(--n-9);white-space:nowrap;box-shadow:var(--whisper);opacity:0;transition:all .2s var(--ease-out);pointer-events:none;background:#faf9f6eb;padding:5px 11px;font-size:.74rem;font-weight:500;transform:translate(-8px)}.pin:hover .pin-label,.pin.active .pin-label{opacity:1;transform:translate(0)}.pin.active .pin-label{background:var(--accent);color:var(--n-1);border-color:var(--accent)}.stage-footer{z-index:5;color:var(--n-6);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.04em;pointer-events:none;justify-content:space-between;display:flex;position:absolute;bottom:22px;left:32px;right:32px}.stage-footer span{align-items:center;gap:6px;display:inline-flex}.stage-footer span:before{content:"";background:var(--n-5);opacity:.6;border-radius:50%;width:4px;height:4px}.detail{background:var(--n-1);border-left:1px solid var(--n-4);padding:36px 32px;overflow-y:auto}.detail-meta{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.1em;text-transform:uppercase;justify-content:space-between;align-items:center;margin-bottom:28px;font-size:.72rem;display:flex}.detail h2{font-family:var(--font-serif);color:var(--n-10);letter-spacing:-.02em;margin-bottom:6px;font-size:1.85rem;font-weight:500;line-height:1.15}.detail-english{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.02em;margin-bottom:20px;font-size:.82rem}.detail-scale{background:var(--n-2);border:1px solid var(--n-4);border-radius:var(--r-md);color:var(--n-8);box-shadow:var(--inset-hi);align-items:center;gap:6px;margin-bottom:22px;padding:5px 11px;font-size:.74rem;display:inline-flex}.detail-scale:before{content:"⤢";color:var(--n-6);font-size:.9rem}.detail-desc{color:var(--n-8);margin-bottom:36px;font-size:.95rem;line-height:1.6}.divider{background:linear-gradient(90deg, var(--n-3), transparent);height:1px;margin:0 0 28px}.section-header{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.section-title{font-family:var(--font-serif);color:var(--n-10);letter-spacing:-.01em;font-size:1.2rem;font-weight:500}.section-sub{color:var(--n-6);font-size:.72rem;font-family:var(--font-mono);letter-spacing:.04em}.features{flex-direction:column;gap:6px;margin-bottom:20px;display:flex}.feature{background:var(--n-2);border:1px solid var(--n-4);border-radius:var(--r-lg);text-align:left;transition:all .2s var(--ease-out);width:100%;box-shadow:var(--inset-hi);align-items:center;gap:12px;padding:12px 14px;display:flex}.feature:hover{background:var(--n-3);border-color:var(--n-5);transform:translate(2px)}.feature.active{background:var(--accent-soft);border-color:var(--accent-border);box-shadow:var(--inset-hi), 0 0 0 1px var(--accent-border)}.feature-index{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.04em;width:18px;font-size:.72rem}.feature.active .feature-index{color:var(--accent);font-weight:500}.feature-name{color:var(--n-9);font-size:.86rem;font-weight:500}.feature.active .feature-name{color:var(--accent)}.feature-arrow{color:var(--n-5);transition:transform .2s var(--ease-out);margin-left:auto;font-size:.86rem}.feature:hover .feature-arrow{color:var(--n-7);transform:translate(2px)}.feature.active .feature-arrow{color:var(--accent)}.feature-detail{background:var(--n-2);border:1px solid var(--n-4);border-left:3px solid var(--accent);border-radius:var(--r-lg);min-height:110px;box-shadow:var(--inset-hi);margin-bottom:32px;padding:18px 20px;position:relative}.feature-detail:before{content:"";background:linear-gradient(180deg, var(--accent), var(--accent-deep));border-radius:3px 0 0 3px;width:3px;position:absolute;top:0;bottom:0;left:0}.feature-detail h4{font-family:var(--font-serif);color:var(--n-10);letter-spacing:-.01em;margin-bottom:6px;font-size:1rem;font-weight:500}.feature-detail p{color:var(--n-8);font-size:.86rem;line-height:1.6}.concept{background:linear-gradient(135deg, var(--n-2), var(--n-1));border:1px solid var(--n-4);border-radius:var(--r-xl);box-shadow:var(--inset-hi);margin-bottom:32px;padding:22px 24px;position:relative;overflow:hidden}.concept:before{content:"";background:radial-gradient(circle, var(--accent-soft), transparent 70%);pointer-events:none;width:80px;height:80px;position:absolute;top:-20px;right:-20px}.concept-label{font-family:var(--font-mono);color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-size:.7rem;font-weight:500}.concept p{font-family:var(--font-serif);color:var(--n-9);font-size:.98rem;line-height:1.65;position:relative}.disclaimer{color:var(--n-6);border-top:1px solid var(--n-3);padding-top:20px;font-size:.74rem;font-style:italic;line-height:1.65}#loader{z-index:20;background:var(--n-1);transition:opacity .5s var(--ease-out);place-items:center;display:grid;position:absolute;inset:0}#loader[hidden]{display:none}.loader-content{text-align:center}.spinner{border:2px solid var(--n-3);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;margin:0 auto 18px;animation:.7s linear infinite spin}.loader-text{font-family:var(--font-mono);color:var(--n-6);letter-spacing:.06em;font-size:.82rem}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:1024px){.layout{grid-template-columns:240px 1fr 300px}.topbar,.stage-overlay,.toolbar,.stage-footer,.detail{padding-left:24px;padding-right:24px}}@media (max-width:820px){.app{height:auto;overflow:visible}.layout{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--n-4)}.nav-list{flex-direction:row;gap:12px;padding:16px;overflow-x:auto}.nav-item{flex:none;min-width:200px}.stage{height:60vh;min-height:400px}.detail{border-left:none;border-top:1px solid var(--n-4)}}