:root{--bg:#0c1220;--bg2:#101827;--panel:#151f30;--line:#263247;--text:#e9eef7;--muted:#8e9bb0;--cyan:#5be0be;--purple:#aa99ff;--side:290px;--radius:18px}
html{color-scheme:dark;scrollbar-color:#35435a #101827}
body{font-family:Inter,"Microsoft YaHei","PingFang SC",sans-serif}
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.sidebar{background:linear-gradient(180deg,#111c2c,#0e1624)}
.brand{padding:26px 20px 22px;gap:11px;border-bottom:0}
.brand .logo{background:linear-gradient(135deg,#65e5c1,#79b9fb);color:#0d1b27;box-shadow:none;border-radius:13px;font-size:23px}
.brand h1{font-size:17px;letter-spacing:1px}.brand p{font-size:10px;letter-spacing:.3px;margin-top:7px}
.subject-bar{padding:4px 16px 15px;gap:8px}.subject{border-radius:12px;background:#162234;padding:12px 14px}.subject.active{background:#153332;border-color:#387769;box-shadow:none}.subject .ic{font-weight:700}
.search-box{position:relative;margin:0 16px 14px}.search-box svg{position:absolute;left:12px;top:13px;width:16px;height:16px;stroke:var(--muted);pointer-events:none}.search-box input{width:100%;padding:11px 10px 11px 37px;border:1px solid var(--line);background:#0d1625;border-radius:10px;color:var(--text);font:inherit;font-size:12px;outline:none}.search-box input:focus{border-color:var(--cyan)}
.search-results{padding:0 10px 20px;overflow:auto;flex:1}.search-results:empty{display:none}.search-results button{display:block;width:100%;text-align:left;padding:12px;border-radius:10px;font-size:13px}.search-results button:hover{background:#1a2e3a}.search-results small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.no-results{font-size:12px;color:var(--muted);padding:15px}
.tree{padding-left:12px;padding-right:12px}.cat{margin:3px 0}.cat.active{background:#142133}.cat-head{padding-top:14px;padding-bottom:14px}.cat-name{font-size:13px}.cat-name small{font-size:10px;margin-top:5px}.model{border-radius:9px}.model.active{background:#173b37}.model b{background:#223045}.model.active b{background:var(--cyan);color:#0d1b27}
.sidebar-footer{padding:15px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.9}.sidebar-footer strong{color:#b8c6d9;font-weight:500}.sidebar-footer a{color:var(--muted);text-decoration:none}
.main{min-width:0;background:radial-gradient(ellipse at 70% 0%,#14223870,transparent 60%),var(--bg)}.topbar{background:#0c1422db;backdrop-filter:blur(14px);min-height:66px}.crumb{font-size:12px}.icon-btn{border-radius:10px;background:#142032;border:1px solid var(--line)}
.workspace{padding:30px;column-gap:25px;row-gap:20px}.model-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}.model-head h2{font-size:26px;letter-spacing:.8px}.model-head p{font-size:12px;line-height:1.8;color:var(--muted)}
.chip{border-radius:9px;background:#152033;border:1px solid #263247;font-size:12px}.chip.active{background:#153833;border-color:#3d8b77;color:#76e8c7;box-shadow:none}.lbl{font-size:11px;letter-spacing:1px;color:var(--muted)}
.stage{border-radius:18px}.canvas-wrap{background:radial-gradient(ellipse at 50% 50%,#1b263c,#111b2d 75%);border:1px solid #2a3850;border-radius:18px;overflow:hidden}.canvas-message{border:1px solid #35435b;background:#101b2cec;box-shadow:none;color:#d6e4f2;font-size:12px;font-weight:500;backdrop-filter:blur(8px)}
.btn{border-radius:10px;box-shadow:none;border:1px solid #2b3a50;background:#17243a;font-size:12px}.btn:hover{border-color:#54766e;background:#1b3539}.btn.demo.on{background:#1b4b40;border-color:#55c5a5}.reset{background:transparent;color:#a4b2c6}.hint{font-size:11px;color:#8292ab;margin:12px 0 16px}.readout{gap:10px}.ro{border-radius:12px;background:#142033;border:1px solid #26354c}.ro span{font-size:10px;letter-spacing:.3px}.ro b{font-size:15px;font-weight:600}.ro.ok{background:#11332d;border-color:#245e4e}
.card{background:#131e30;border:1px solid #26354b;border-radius:15px;padding:19px 20px;box-shadow:none}.card h3{font-size:12px;color:#99a9c0;gap:10px;margin-bottom:15px}.card li{font-size:12px;line-height:1.9;color:#c5d1e3}.badge{font-size:11px;border-radius:6px}.result{font-size:14px;line-height:1.9}.steps li::marker{color:#6cddba}
.share-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;font-size:16px;color:var(--muted)}.share-btn:hover{color:var(--cyan)}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);border:1px solid #3c6d60;padding:12px 20px;background:#16392f;color:#a1f2d6;border-radius:12px;font-size:13px;z-index:100;box-shadow:0 8px 35px #0007}.toast[hidden]{display:none}
@media(min-width:1450px){.workspace{max-width:1500px;margin:0 auto;padding:35px 40px}.canvas-wrap{min-height:500px}}
@media(max-width:1100px){.workspace{padding:24px}.panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel .card{margin:0}}
@media(max-width:900px){.brand{padding:22px 16px}.workspace{padding:20px 16px}.topbar{min-height:58px}.model-head{gap:5px}.model-head h2{font-size:22px}.model-head p{width:100%;font-size:11px}.canvas-wrap{height:clamp(330px,53vh,560px)}.sidebar-footer{font-size:10px}.crumb .fig{display:none}}
@media(max-width:550px){.workspace{padding:18px 12px;gap:15px}.panel{grid-template-columns:1fr}.model-head h2{font-size:21px}.toolbar{gap:10px}.demos{gap:7px}.canvas-message{font-size:11px}.ro b{font-size:13px}.card{padding:17px}.topbar .crumb{min-width:0}.share-btn{flex-shrink:0}.sidebar{width:min(89vw,340px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}