:root{
  --bg:#fff; --side:#f7f7f7; --line:#e2e2e2; --text:#1b1b1b; --muted:#666;
  --accent:#245a87; --accent-soft:#eef5fb; --nav:#1f3b5b; --good:#2f6f4e;
  --forest:#7a4eb3; --forest-soft:#f3eef9;
  --domain:#2c72b8; --domain-soft:#edf5fc;
  --ou:#2f8f68; --ou-soft:#eef8f3;
  --object:#b86b2c; --object-soft:#fbf2ea;
  --site:#9c5a74; --site-soft:#fbf0f4;
  --dc:#4c6fae; --dc-soft:#eef2fa;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)}
button{font:inherit}
.top{min-height:64px;border-bottom:1px solid #17324d;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--nav);gap:22px;color:#fff}
.brand{display:flex;align-items:center;gap:12px;min-width:300px}
.logo{width:40px;height:40px;display:block;flex:0 0 40px;border:0;border-radius:8px}
.brand strong{display:block;font-size:17px;color:#fff}.brand small{color:#d9e3ec}
.topnav{display:flex;gap:24px;font-size:14px;color:#dce6ef;flex:1}.topnav .active{font-weight:650;color:#fff}
.pill{border:1px solid rgba(255,255,255,.45);border-radius:15px;padding:6px 10px;font-size:12px;color:#fff;background:rgba(255,255,255,.08)}
.subbar{height:42px;border-bottom:1px solid #ececec;background:#fafafa;display:flex;justify-content:space-between;align-items:center;padding:0 22px;font-size:13px;color:#555}
.layout{display:grid;grid-template-columns:280px minmax(650px,1fr) 360px;min-height:790px}
.sidebar{background:var(--side);border-right:1px solid var(--line);padding:20px 16px}.module-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#777;margin:0 8px 10px}
.lesson{width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:5px;font-size:14px;color:#444;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.lesson:hover{background:#f0f0f0}.lesson.active{background:#e8edf2;color:#173b5a;font-weight:650}
.num{width:22px;height:22px;border:1px solid #c8c8c8;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:0 0 auto;background:#fff}.lesson.active .num{background:var(--nav);color:#fff;border-color:var(--nav)}
.progress{margin:20px 8px 0;border-top:1px solid #ddd;padding-top:14px;font-size:12px;color:#666}.bar{height:4px;background:#ddd;margin-top:8px}.bar i{display:block;height:4px;background:var(--nav);width:14%}
.main{padding:28px 34px 40px;min-width:0}.crumb{font-size:13px;color:#777;margin-bottom:14px}.head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.head h1{font-size:31px;line-height:1.15;margin:0;font-weight:650;letter-spacing:-.3px}.head p{font-size:15px;color:#666;line-height:1.5;margin:8px 0 0;max-width:790px}
.badge{border:1px solid #cfcfcf;border-radius:3px;padding:7px 9px;font-size:12px;color:#555;white-space:nowrap}.canvas{margin-top:24px;border:1px solid var(--line);padding:18px;background:#fff;min-height:470px}
.canvas-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.canvas-head h2{margin:0;font-size:18px}.canvas-head p{margin:4px 0 0;color:#666;font-size:13px}
.hint{font-size:12px;color:#777}.view-toggle{display:flex;gap:4px;background:#f2f2f2;border-radius:7px;padding:3px;margin-top:8px}.view-btn{border:0;background:transparent;padding:6px 10px;border-radius:5px;font-size:12px;color:#666;cursor:pointer}.view-btn.on{background:#fff;color:#173b5a;font-weight:650;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.stage{min-height:340px;display:flex;align-items:center;justify-content:center;position:relative;overflow:auto}.note{margin-top:16px;background:#f7f7f7;border-left:3px solid #777;padding:10px 12px;font-size:13px;color:#555;line-height:1.45}
.right{border-left:1px solid var(--line);padding:24px 22px;background:#fff}.ey{font-size:11px;color:#777;text-transform:uppercase;letter-spacing:.07em}.right h2{margin:5px 0 3px;font-size:25px}.sub{font-size:13px;color:#666;line-height:1.45}
.sec{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}.sec h3{font-size:14px;margin:0 0 6px}.sec p{font-size:13px;color:#4e4e4e;line-height:1.6;margin:0}.quote{background:#f5f9fd;border-left:3px solid var(--accent);padding:9px 10px;font-size:13px;line-height:1.55;color:#444}.source{margin-top:18px;font-size:11px;color:#777;line-height:1.45}.source a{color:#245a87;text-decoration:none}.source a:hover{text-decoration:underline}
.tree{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:560px}.box{border:1px solid #bdbdbd;background:#fff;padding:12px 16px;min-width:160px;text-align:center;cursor:pointer;border-radius:6px;box-shadow:0 2px 7px rgba(0,0,0,.035)}
.box.sel{border:2px solid var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px rgba(36,90,135,.08)}.box.forest-box{border-color:#c8b4df;background:var(--forest-soft)}.box.domain-box{border-color:#b7d1ea;background:var(--domain-soft)}.box.ou-box{border-color:#b9dfcc;background:var(--ou-soft)}.box.object-box{border-color:#e1c4ad;background:var(--object-soft)}.box b{display:block;font-size:14px}.box span{display:block;color:#666;font-size:12px;margin-top:4px}
.row{display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap}.line{font-size:22px;color:#777;line-height:1}.forest{border:2px dashed #b69ad1;padding:18px 24px;min-width:600px;background:linear-gradient(180deg,#fff,var(--forest-soft))}.domain{border:1px solid #b7d1ea;padding:16px 20px;margin-top:12px;background:linear-gradient(180deg,#fff,var(--domain-soft))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;min-width:620px;width:100%}.panel{border:1px solid #c9c9c9;padding:16px;background:#fff;min-height:240px;border-radius:6px}.panel h3{font-size:15px;margin:0 0 12px}.site{border:1px solid #d7b8c4;padding:12px;margin:10px 0;background:var(--site-soft);border-radius:6px}.site b{display:block;color:#7a3e57;margin-bottom:8px}.site>.dc-chip{margin-top:0}.dc-chip{display:inline-block;margin:6px 6px 0 0;padding:5px 8px;border-radius:12px;background:var(--dc-soft);border:1px solid #bfd0ee;color:#355b96;font-size:11px;font-weight:600}
.warning{font-weight:700;text-align:center;margin-top:14px;color:#804000}.object-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-width:560px}.object{border:1px solid #e1c4ad;padding:16px;background:var(--object-soft);text-align:center;cursor:pointer;border-radius:6px;box-shadow:0 2px 7px rgba(0,0,0,.035)}.object.sel{border:2px solid var(--accent);background:#eef5fb;box-shadow:0 0 0 3px rgba(36,90,135,.08)}
.icon{width:38px;height:38px;border:1px solid #bbb;display:grid;place-items:center;margin:0 auto 8px;font-size:12px;font-weight:700;background:#fafafa}.check{max-width:720px;width:100%}.q{font-size:18px;font-weight:600;line-height:1.4}.answers{display:grid;gap:10px;margin-top:18px}.ans{border:1px solid #c8c8c8;background:#fff;padding:12px;text-align:left;cursor:pointer}.ans:hover{background:#fafafa}.feedback{margin-top:14px;padding:11px 12px;background:#f3f7f4;border-left:3px solid var(--good);font-size:13px;color:#445;display:none}.icon-note{margin-top:12px;font-size:11px;color:#888;text-align:center}
.obj-caption{font-size:12px;color:#666;margin-top:5px}.center{text-align:center}.spaced-top{margin-top:18px}.spaced-top-sm{margin-top:14px}.fixed-domain{width:250px}.micro{font-size:11px;color:#666;margin-top:8px}.wide{width:100%}.compact{min-width:0}.wan{text-align:center;color:#8a5b70;font-weight:600}.master{min-width:620px}.centered{margin:auto}.separate-layer{margin:24px auto 0;border-top:1px dashed #aaa;padding-top:16px;max-width:600px;text-align:center;color:#555;font-size:13px}.deployment{margin:24px auto 0;max-width:620px}.fixed-site{width:250px}
@media(max-width:1200px){.layout{grid-template-columns:240px minmax(580px,1fr) 320px}.main{padding-left:24px;padding-right:24px}.topnav{gap:14px}}