:root{--bg: #0b0e14;--panel-bg: #0e121a;--card-bg: #12161f;--border: #232a38;--header-border: #1b212c;--text: #e8ecf1;--text-dim: #c7cedb;--text-mute: #8b96a8;--text-faint: #5b6577;--text-ghost: #3a4252;--code-fg: #9ff7c0;--code-bg: #08090d;--accent: #22d3ee;--online: #34d399}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Space Grotesk,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:var(--accent);text-decoration:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.mono{font-family:IBM Plex Mono,monospace}.app-shell{height:100vh;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--header-border);background:var(--panel-bg);flex:none}.header-left{display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:none;padding:0}.brand-mark{width:16px;height:16px;background:var(--accent);border-radius:4px;transform:rotate(45deg)}.brand-name{font-weight:700;font-size:15px;color:var(--text)}.breadcrumb{color:var(--text-ghost)}.breadcrumb-back{font-size:13px;color:var(--text-mute);cursor:pointer;background:none;border:none;font-family:inherit}.breadcrumb-active{font-size:13px;color:var(--text-dim)}.header-tag{font-size:11px;color:var(--text-faint)}.main-grid{display:grid;grid-template-columns:1fr 380px;flex:1;min-height:0}.overview{overflow-y:auto;padding:44px 52px}.eyebrow{font-size:12px;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}.overview h1,.topic-detail h1{font-size:30px;font-weight:700;margin:0 0 10px;letter-spacing:-.01em}.overview-sub{font-size:15px;color:var(--text-mute);margin:0 0 34px;max-width:560px;line-height:1.6}.topic-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.topic-row-item{display:flex;align-items:center;gap:6px}.topic-card{width:190px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:8px;text-align:left;color:inherit;font:inherit}.topic-card-top{display:flex;justify-content:space-between;align-items:center}.topic-card-icon{width:30px;height:30px;border-radius:8px;background:var(--header-border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-dim)}.topic-card-order{font-size:10.5px;color:var(--text-faint)}.topic-card-title{font-size:14px;font-weight:600}.topic-card-desc{font-size:12px;color:var(--text-mute);line-height:1.5}.topic-card-desc.empty{color:var(--text-ghost);font-style:italic}.topic-arrow{color:var(--text-ghost);font-size:16px}.topic-detail{overflow-y:auto;padding:40px 52px}.topic-detail-inner{max-width:660px}.topic-desc{font-size:16px;line-height:1.7;color:var(--text-dim);margin:0 0 26px}.topic-desc.empty{color:var(--text-ghost);font-style:italic}.section-label{font-size:13px;font-weight:600;color:var(--text-mute);margin-bottom:12px}.concepts-list{display:flex;flex-direction:column;gap:8px;margin-bottom:28px}.concept-item{display:flex;align-items:baseline;gap:10px;font-size:14.5px;color:var(--text-dim)}.concept-bullet{color:var(--accent)}.code-block{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:18px 20px;font-size:13px;line-height:1.85;color:var(--code-fg);overflow-x:auto;margin:0 0 30px;white-space:pre}.empty-state{color:var(--text-ghost);font-style:italic;font-size:14px}.section-sublabel{font-size:12.5px;color:var(--text-faint);margin:0 0 8px}.chapter-row{display:flex;align-items:baseline;gap:12px;font-size:14.5px;color:var(--text-dim);background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer;text-align:left;font-family:inherit;width:100%}.chapter-row:hover{border-color:var(--accent);color:var(--text)}.mentor{border-left:1px solid var(--header-border);background:var(--panel-bg);display:flex;flex-direction:column;min-height:0}.mentor-header{padding:16px 18px;border-bottom:1px solid var(--header-border);display:flex;align-items:center;gap:10px}.mentor-status-dot{width:8px;height:8px;border-radius:50%;background:var(--online);flex:none}.mentor-title{font-size:14px;font-weight:600}.mentor-subtitle{font-size:11px;color:var(--text-faint)}.mentor-messages{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}.mentor-msg{max-width:88%;border-radius:12px;padding:11px 14px;font-size:13.5px;line-height:1.55}.mentor-msg.user{align-self:flex-end;background:var(--accent);color:var(--bg)}.mentor-msg.assistant{align-self:flex-start;background:var(--header-border);color:var(--text)}.mentor-typing{align-self:flex-start;color:var(--text-faint);font-size:12px}.mentor-input-row{padding:14px 16px;border-top:1px solid var(--header-border)}.mentor-input-flex{display:flex;gap:8px}.mentor-input{flex:1;font-family:inherit;font-size:13.5px;background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:10px 16px;color:var(--text)}.mentor-input:focus{outline:1px solid var(--accent)}.mentor-send{font-family:inherit;font-size:13px;font-weight:600;color:var(--bg);background:var(--accent);border:none;border-radius:20px;padding:10px 16px;cursor:pointer}.mentor-disclaimer{font-size:10.5px;color:var(--text-ghost);margin-top:8px}.diagram-frame{margin:22px 0 28px;padding:18px 20px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px}.diagram-frame-title{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}.diagram-frame-desc{font-size:13px;color:var(--text-mute);margin:0 0 14px;max-width:80ch}.diagram-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:11.5px;color:var(--text-dim)}.diagram-legend-item{display:flex;align-items:center;gap:6px}.diagram-legend-swatch{width:10px;height:10px;border-radius:3px;flex:none}.diagram-scroll{overflow-x:auto;border-radius:8px}.flow-line{animation:flow-dash 1.1s linear infinite}@keyframes flow-dash{to{stroke-dashoffset:-24}}@media (prefers-reduced-motion: reduce){.flow-line{animation:none}}
