:root{color:#4e463c;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--sage-900:#363d1f;--sage-800:#4a5228;--sage-700:#6f7c33;--sage-600:#8d9b6e;--sage-100:#ebf0df;--panel:#fcfaf4f7;--border:#d7d1c6;--text:#4e463c;--muted:#a9a397;--shadow:0 16px 40px #3a322317;--shadow-sm:0 4px 16px #3a322312;--radius-panel:14px;--radius-card:12px;--radius-btn:12px;background:#f5f2ea;font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,Noto Sans CJK SC,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{min-width:1180px;margin:0;overflow:hidden}button{font:inherit;border:0}h1,h2,h3{font-family:Noto Serif SC,Source Han Serif SC,思源宋体,Songti SC,STSong,Georgia,serif}.app-shell{background:radial-gradient(circle at 22% 8%,#fffdf5bf,#0000 26%),linear-gradient(#f8f5ee 0%,#f0ece2 100%);grid-template-rows:76px minmax(0,1fr) 32px;height:100%;display:grid}.topbar{color:#e8e4d8;background:linear-gradient(90deg,#4e463cfc,#4e463cfc),repeating-linear-gradient(45deg,#0000 0 12px,#ffffff06 12px 13px);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:0 24px;display:grid;box-shadow:0 8px 28px #1e240e38}.brand{align-items:center;gap:16px;min-width:0;display:flex}.brand h1{letter-spacing:.01em;color:#f0ece2;margin:0;font-size:26px;font-weight:700}.brand p{color:#e8e4d894;letter-spacing:.02em;margin:3px 0 0;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12px}.brand-mark{color:#a8b880;width:70px;height:46px;position:relative}.brand-mark:before,.brand-mark:after,.brand-mark span{content:"";background:currentColor;border-radius:2px;position:absolute}.brand-mark:before{height:4px;top:24px;left:2px;right:2px;box-shadow:0 9px #a8b880b3}.brand-mark:after{width:4px;height:38px;top:4px;left:8px;box-shadow:48px 0 #a8b880}.brand-mark span:first-child{transform-origin:top;width:3px;height:38px;top:3px;left:15px;transform:skewY(-36deg)}.brand-mark span:last-child{transform-origin:top;width:3px;height:38px;top:3px;left:39px;transform:skewY(36deg)}.topnav{align-items:stretch;min-width:0;height:100%;display:flex}.nav-item{color:#e8e4d8b8;cursor:pointer;background:0 0;border-left:1px solid #ffffff0f;justify-content:center;align-items:center;gap:8px;min-width:118px;padding:0 14px;transition:background .15s,color .15s;display:inline-flex}.nav-item span{white-space:nowrap;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:14px;font-weight:600}.nav-item.active{color:#f0ece2;background:#8d9b6ed1;box-shadow:inset 0 1px #ffffff24}.nav-item:not(.active):hover{color:#e8e4d8eb;background:#ffffff0f}.top-actions{justify-content:flex-end;gap:10px;display:flex}.icon-action,.small-icon-button{color:currentColor;cursor:pointer;background:#ffffff12;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s;display:inline-flex}.icon-action:hover,.small-icon-button:hover{background:#ffffff24}.workspace{grid-template-columns:292px minmax(620px,1fr) 374px;gap:14px;min-height:0;padding:14px;display:grid}.app-shell.immersive{background:#f5f2ea;grid-template-rows:minmax(0,1fr)}.app-shell.immersive .topbar,.app-shell.immersive .statusbar{display:none}.app-shell.immersive .workspace{height:100vh;padding:0;display:block;position:relative}.app-shell.immersive .viewer-stage{z-index:0;box-shadow:none;border:0;border-radius:0;position:absolute;inset:0}.app-shell.immersive .viewer-title{display:none}.app-shell.immersive .left-panel,.app-shell.immersive .right-panel{z-index:20;background:#fcfaf4f0;position:absolute;top:16px;bottom:16px}.app-shell.immersive .left-panel{width:292px;left:16px}.app-shell.immersive .right-panel{width:374px;right:16px}.app-shell.immersive .toolbar{bottom:76px}.close-immersive-button{z-index:50;color:#f0ece2;cursor:pointer;background:linear-gradient(#8d9b6e,#6f7c33);border:1px solid #ffffff2e;border-radius:999px;justify-content:center;align-items:center;gap:9px;min-width:170px;height:44px;padding:0 18px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:14px;font-weight:600;transition:background .15s;display:inline-flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 16px 32px #323c143d}.close-immersive-button:hover{background:linear-gradient(#9dab7e,#7f8c43)}.panel{border:1px solid var(--border);border-radius:var(--radius-panel);background:var(--panel);min-height:0;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:hidden}.left-panel,.right-panel{flex-direction:column;padding:18px 18px 16px;display:flex}.panel-heading{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;display:flex}.panel-heading h2,.viewer-title h2{color:#363d1f;letter-spacing:.01em;margin:0;font-size:17px;font-weight:600}.panel-heading p,.viewer-title p{color:var(--muted);margin:5px 0 0;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12.5px;line-height:1.55}.left-panel .small-icon-button{color:#6a6050;border:1px solid var(--border);background:#ece7dc}.component-nav{min-height:0;padding:8px 0 12px;overflow-y:auto}.component-group{border-bottom:1px solid #e4ddd4;padding:6px 0 12px}.component-group:last-child{border-bottom:0}.component-group h3{color:#4a5228;letter-spacing:.02em;align-items:center;gap:8px;margin:6px 0 8px;font-size:13px;font-weight:600;display:flex}.group-caret{border-radius:2px;width:7px;height:7px}.group-caret.superstructure{background:#8d9b6e}.group-caret.substructure{background:#7a9080}.group-caret.foundation{background:#b8894a}.component-row{color:#4e463c;border-radius:var(--radius-card);cursor:pointer;text-align:left;background:0 0;align-items:center;gap:10px;width:100%;min-height:42px;padding:7px 10px;transition:background .12s;display:flex}.component-nav-icon{width:25px;height:25px;color:var(--component-accent);flex:none;justify-content:center;align-items:center;display:inline-flex}.component-nav-icon svg{width:24px;height:24px;overflow:visible}.component-nav-icon path,.component-nav-icon rect{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.component-nav-icon rect{fill:#ffffff47}.component-nav-icon .icon-dash{stroke-dasharray:2 2}.component-row span:last-child{font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:14px;font-weight:500}.component-row:hover{background:var(--component-hover)}.component-row.active{color:var(--component-accent-strong);background:linear-gradient(90deg, var(--component-selected), #ffffff26);box-shadow:inset 3px 0 0 var(--component-accent)}.component-number,.detail-number{color:#fff;background:var(--sage-700);flex:none;justify-content:center;align-items:center;display:inline-flex;box-shadow:inset 0 1px #ffffff2e}.component-number{background:var(--component-accent,var(--sage-700));border-radius:50%;width:24px;height:24px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12px;font-weight:700}.teaching-tip{border-radius:var(--radius-card);background:linear-gradient(160deg,#f8f5ee,#ede8de);border:1px solid #ddd8ce;margin-top:auto;padding:16px}.tip-topline{justify-content:space-between;align-items:center;gap:12px;display:flex}.tip-icon{width:36px;height:36px;color:var(--sage-700);background:#dce6c4;border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.tip-actions{gap:6px;display:flex}.tip-actions button,.tip-reopen{color:#6a6050;cursor:pointer;background:#ffffffa6;border:1px solid #d4cec4;border-radius:8px;justify-content:center;align-items:center;transition:background .12s,color .12s;display:inline-flex}.tip-actions button{width:30px;height:30px}.tip-actions button:hover,.tip-reopen:hover{color:var(--sage-700);background:#e4edcc}.tip-reopen{gap:8px;width:100%;min-height:46px;margin-top:auto;padding:0 14px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13.5px;font-weight:600}.teaching-tip h3{color:#363d1f;margin:10px 0 7px;font-size:15px;font-weight:600}.teaching-tip p{color:#6a6050;margin:0;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13px;line-height:1.75}.viewer-stage{border-radius:var(--radius-panel);min-width:0;min-height:0;box-shadow:var(--shadow);background-color:#f5f2ea;background-image:linear-gradient(#504b3706 1px,#0000 1px),linear-gradient(90deg,#504b3706 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #d7d1c6;position:relative;overflow:hidden}.viewer-title{z-index:5;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:18px;display:flex;position:absolute;top:20px;left:24px;right:24px}.mode-switch{box-shadow:var(--shadow-sm);pointer-events:auto;background:#fcfaf4eb;border:1px solid #cec8bc;border-radius:10px;display:flex;overflow:hidden}.mode-switch button{color:#4e463c;cursor:pointer;background:0 0;width:60px;height:40px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:14px;font-weight:700;transition:background .15s,color .15s}.mode-switch button.active{color:#f0ece2;background:linear-gradient(#8d9b6e,#6f7c33)}.bridge-canvas,.diagram-2d{width:100%;height:100%}.scene-label{color:#363d1f;white-space:nowrap;min-width:72px;box-shadow:var(--shadow-sm);cursor:pointer;background:#fcfaf4f2;border:1px solid #6f7c3347;border-radius:999px;align-items:center;gap:6px;padding:5px 10px 5px 5px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12.5px;font-weight:600;display:inline-flex}.scene-label span{color:#fff;background:#6f7c33;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:inline-flex}.scene-label.active{color:#f0ece2;background:#6f7c33}.floating-legend{z-index:4;border-radius:var(--radius-card);width:292px;box-shadow:var(--shadow);background:#fcfaf4f0;border:1px solid #d4cec4;padding:14px 16px;position:absolute;bottom:96px;left:24px}.floating-legend h3{color:#363d1f;margin:0 0 10px;font-size:13.5px;font-weight:600}.floating-legend div{color:#6a6050;align-items:center;gap:8px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13px;line-height:2;display:flex}.legend-dot{border-radius:50%;width:9px;height:9px}.legend-dot.superstructure{background:#8d9b6e}.legend-dot.substructure{background:#7a9080}.legend-dot.foundation{background:#b8894a}.load-path-callout{z-index:6;border-radius:var(--radius-card);width:308px;box-shadow:var(--shadow);background:#fff9eef7;border:1px solid #b8894a47;padding:16px;position:absolute;bottom:102px;right:26px}.load-path-callout span{color:#a06010;letter-spacing:.04em;text-transform:uppercase;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:11.5px;font-weight:700}.load-path-callout strong{color:#363d1f;margin-top:5px;font-family:Noto Serif SC,Source Han Serif SC,Georgia,serif;font-size:18px;font-weight:600;display:block}.load-path-callout p{color:#6a6050;margin:6px 0 0;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13px;line-height:1.65}.toolbar{z-index:40;border-radius:var(--radius-panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fcfaf4f7;border:1px solid #d4cec4;align-items:center;gap:4px;padding:8px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.tool{color:#5a5246;cursor:pointer;background:0 0;border-right:1px solid #ddd8d0;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:82px;min-height:56px;padding:6px 12px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12px;font-weight:500;transition:background .12s,color .12s;display:inline-flex}.tool:hover{color:var(--sage-700);background:#edf2de}.tool.active{color:#f0ece2;background:linear-gradient(160deg,#8d9b6e,#6f7c33)}.toolbar .tool:last-child{border-right:0}.component-detail-title{align-items:center;gap:14px;margin-top:20px;display:flex}.detail-number{border-radius:50%;width:44px;height:44px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:24px;font-weight:800}.detail-number.substructure{background:#7a9080}.detail-number.foundation{background:#b8894a}.component-detail-title h2{color:#363d1f;letter-spacing:.01em;margin:0;font-size:28px;font-weight:600}.component-detail-title p{color:var(--muted);margin:4px 0 0;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12.5px}.detail-summary{color:#4e463c;margin:16px 0;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:14px;line-height:1.8}.mini-diagram{border-radius:var(--radius-card);background:#f5f2ea;border:1px solid #d4cec4;justify-content:center;align-items:center;height:196px;margin-bottom:16px;display:flex}.mini-diagram svg{width:86%;height:78%}.mini-diagram .diagram-shape,.mini-diagram .diagram-muted{fill:#e8e2d4;stroke:#4e463c;stroke-width:1.5px}.mini-diagram .diagram-muted{fill:#e2dcd0;stroke:#9a9084;opacity:.75}.mini-diagram .diagram-highlight{fill:#8d9b6e7a;stroke:#6f7c33;stroke-width:2.5px}.mini-diagram .diagram-highlight.secondary{fill:#8d9b6e38}.mini-diagram .diagram-highlight.thin{stroke-width:1.7px}.mini-diagram .diagram-highlight.ground,.mini-diagram .diagram-fill-soil{fill:#b8894a61;stroke:#9a6820;stroke-width:2px}.mini-diagram .diagram-axis{stroke:#8d9b6e;stroke-dasharray:6 5;stroke-width:1.4px}.mini-diagram .diagram-arrow{fill:none;stroke:#6f7c33;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.2px;marker-end:none}.mini-diagram .diagram-caption{fill:#363d1f;font-size:12px;font-weight:700}.detail-table{border-radius:var(--radius-card);border:1px solid #d4cec4;overflow:hidden}.detail-row{border-bottom:1px solid #ddd8d0;grid-template-columns:78px 1fr;min-height:52px;display:grid}.detail-row:last-child{border-bottom:0}.detail-row strong{color:#4a5228;background:#ece7dc;align-items:center;padding:12px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13px;font-weight:600;display:flex}.detail-row span{color:#4e463c;align-items:center;padding:12px 14px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13px;line-height:1.65;display:flex}.primary-button{color:#f0ece2;border-radius:var(--radius-btn);cursor:pointer;letter-spacing:.02em;background:linear-gradient(#8d9b6e,#6f7c33);justify-content:center;align-items:center;gap:9px;width:100%;height:46px;margin-top:auto;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:14px;font-weight:600;transition:background .15s,box-shadow .15s;display:inline-flex;box-shadow:0 8px 20px #505f2833}.primary-button:hover{background:linear-gradient(#9dab7e,#7f8c43);box-shadow:0 10px 24px #505f2842}.statusbar{color:#a9a397;background:#fcfaf4d1;border-top:1px solid #ddd8d0;align-items:center;gap:22px;padding:0 22px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:12.5px;display:flex}.statusbar span:last-child{margin-left:auto}.diagram-2d{flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:86px 36px 98px;display:flex}.diagram-2d svg{width:min(900px,96%);max-height:100%}.diagram-tabs{z-index:8;box-shadow:var(--shadow-sm);background:#fcfaf4f0;border:1px solid #cec8bc;border-radius:10px;display:flex;position:absolute;top:86px;left:50%;overflow:hidden;transform:translate(-50%)}.diagram-tabs button{color:#4e463c;cursor:pointer;background:0 0;border-right:1px solid #d4cec4;min-width:100px;height:36px;padding:0 14px;font-family:Noto Sans SC,PingFang SC,system-ui,sans-serif;font-size:13.5px;font-weight:600;transition:background .15s,color .15s}.diagram-tabs button:last-child{border-right:0}.diagram-tabs button.active{color:#f0ece2;background:linear-gradient(#8d9b6e,#6f7c33)}.diagram-bg{fill:#fcfaf4f0;stroke:#d4cec4}.diagram-grid{fill:url(#diagramGrid);opacity:.8}.diagram-title{fill:#363d1f;font-size:26px;font-weight:700}.diagram-subtitle,.diagram-label-text{fill:#6a6050;font-size:15px;font-weight:500}.diagram-label-number{fill:#fff;font-size:12px;font-weight:800}.diagram-panel-label{fill:#6f7c33;stroke:#4a5228;stroke-width:1px}.diagram-panel-label-text{fill:#fff;font-size:14px;font-weight:700}.diagram-callout{cursor:pointer}.diagram-callout line{stroke:#8d9b6e;stroke-width:1.8px}.diagram-callout circle{fill:#6f7c33;stroke:#fff;stroke-width:2px}.diagram-label-dot.superstructure{fill:#8d9b6e}.diagram-label-dot.substructure{fill:#7a9080}.diagram-label-dot.foundation{fill:#b8894a}.diagram-shape{cursor:pointer;stroke:#6a6050;stroke-width:1.8px;stroke-linejoin:round}.diagram-shape.deck{fill:#c8c2b2}.diagram-shape.girder,.diagram-shape.beam{fill:#8a9870}.diagram-shape.rail{fill:#e8e4d8}.diagram-shape.bearing{fill:#3a3428}.diagram-shape.concrete{fill:#c4beb0}.diagram-shape.cap{fill:#bab4a6}.diagram-shape.pile{fill:#c0bab0}.diagram-shape.soil{fill:#b08050}.diagram-shape.selected{stroke:#6f7c33;stroke-width:3.5px}.diagram-shape.selected.superstructure{fill:#8d9b6e94}.diagram-shape.selected.substructure{fill:#7a908094}.diagram-shape.selected.foundation{fill:#b8894a94}.road-mark{fill:none;stroke:#ffffffa6;stroke-dasharray:0;stroke-linecap:round;stroke-width:4px}@media (width<=1280px){body{min-width:1080px}.workspace{grid-template-columns:258px minmax(560px,1fr) 330px}.brand{gap:10px}.brand h1{font-size:20px}.brand-mark{transform-origin:0;transform:scale(.86)}.nav-item{min-width:100px;padding:0 10px}.tool{min-width:70px}}