:root {
  --ink:#1a1a18; --ink2:#4a4a46; --ink3:#888880;
  --paper:#f7f5f0; --paper2:#eeeae2;
  --fs-base: 16px;
  --gold:#c8922a; --gold-light:#f2e4c4; --gold-dark:#7a5010;
  --teal:#2a6b6b; --teal-light:#d4eaea; --teal-dark:#1a4040;
  --coral:#c0432a; --coral-light:#f5e0da;
  --blue:#2a4e7a; --blue-light:#d4e0f0;
  --green:#2a6b48; --green-light:#d4eadf;
  --purple:#5a3a7a; --purple-light:#ead4f0;
  --border:rgba(26,26,24,0.11); --border2:rgba(26,26,24,0.18);
  --card-bg: #ffffff;
  --dark-surface: #1a1a18;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* === TOKENS === */
:root {
  --ink:#1a1a18; --ink2:#4a4a46; --ink3:#888880;
  --paper:#f7f5f0; --paper2:#eeeae2;
  --fs-base: 16px;
  --gold:#c8922a; --gold-light:#f2e4c4; --gold-dark:#7a5010;
  --teal:#2a6b6b; --teal-light:#d4eaea; --teal-dark:#1a4040;
  --coral:#c0432a; --coral-light:#f5e0da;
  --blue:#2a4e7a; --blue-light:#d4e0f0;
  --green:#2a6b48; --green-light:#d4eadf;
  --purple:#5a3a7a; --purple-light:#ead4f0;
  --border:rgba(26,26,24,0.11); --border2:rgba(26,26,24,0.18);
  --card-bg: #ffffff;
  --dark-surface: #1a1a18;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.7;overflow-x:hidden}

/* === TOP BAR (progress + shortcuts) === */
#topbar{background:var(--ink);border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top:0;z-index:200}
#topbar-inner{max-width:960px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:16px;justify-content:space-between}
#topbar-left{display:flex;flex-direction:column;gap:3px}
#topbar-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
#topbar-progress-track{width:180px;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden}
#topbar-progress-fill{height:100%;background:var(--gold);width:0%;transition:width .4s ease}
#topbar-label{font-size:10px;color:rgba(255,255,255,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
#topbar-shortcuts{display:flex;gap:5px;flex-wrap:nowrap}

/* === NAV === */
#nav{background:var(--ink);position:sticky;top:49px;z-index:199;border-bottom:2px solid rgba(255,255,255,0.06);overflow:visible}
#nav-bar{display:flex;align-items:stretch;width:100%;padding:0 12px;box-sizing:border-box;overflow:visible}
.nav-item{position:relative;flex:1;min-width:0;overflow:visible}
.nav-item.home-item{flex:0 0 auto}
.nav-btn{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;padding:12px 4px;font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,0.4);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.nav-btn:hover{color:rgba(255,255,255,0.75)}
.nav-btn.active{color:#fff;border-bottom-color:var(--gold)}
.nav-arrow{font-size:7px;opacity:.4;transition:transform .2s;display:inline-block}
.nav-item.open .nav-arrow{transform:rotate(180deg)}
.nav-drop{display:none;position:absolute;top:100%;left:0;min-width:270px;background:#1d1d1b;border:1px solid rgba(255,255,255,0.1);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,0.4);z-index:9999;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.2) transparent}
.nav-item.open .nav-drop{display:block}
.drop-item{display:block;width:100%;padding:9px 16px;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:300;color:rgba(255,255,255,0.6);background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.05);text-align:left;cursor:pointer;line-height:1.4;transition:all .12s}
.drop-item:last-child{border-bottom:none;border-radius:0 0 8px 8px}
.drop-item:hover{background:rgba(255,255,255,0.06);color:#fff}
.drop-item.active{color:var(--gold);font-weight:500}
.drop-num{font-size:9.5px;opacity:.4;margin-right:7px;font-weight:700}
.drop-sep{height:1px;background:rgba(255,255,255,0.1);margin:3px 8px}
.drop-label{font-size:8.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,0.3);padding:7px 14px 2px}

/* === PAGE VISIBILITY === */
.page{display:none}
.page.active{display:block}

/* === MODULE WRAPPER (one per page in page-view) === */
.module{background:var(--card-bg);border:1px solid var(--border);margin-bottom:20px}
.page .module{margin-bottom:0}
.mod-header{background:var(--ink);padding:18px 28px;display:flex;align-items:flex-start;gap:16px;position:relative;cursor:pointer;user-select:none}
.page .mod-header{cursor:default}
.mod-header::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(200,146,42,0.1) 0%,transparent 55%);pointer-events:none}
.mod-header:hover{background:#1d1d1b}
.page .mod-header:hover{background:var(--ink)}
.mod-num{font-family:'DM Serif Display',serif;font-size:26px;color:rgba(200,146,42,0.4);line-height:1;min-width:38px;padding-top:3px;flex-shrink:0}
.mod-meta{flex:1}
.mod-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-bottom:7px}
.tag-gold{background:rgba(200,146,42,0.2);color:#e8c870}
.tag-teal{background:rgba(42,107,107,0.25);color:#7ecece}
.tag-coral{background:rgba(192,67,42,0.2);color:#f0a090}
.tag-blue{background:rgba(42,78,122,0.25);color:#90b0e0}
.tag-green{background:rgba(42,107,72,0.25);color:#80c8a0}
.tag-purple{background:rgba(90,58,122,0.25);color:#c0a0e0}
.mod-title{font-family:'DM Serif Display',serif;font-size:20px;font-weight:400;line-height:1.25;color:#fff;margin-bottom:4px}
.mod-subtitle{font-size:13px;color:rgba(255,255,255,0.5);font-weight:300}
.mod-toggle{font-size:14px;color:rgba(255,255,255,0.4);padding-top:6px;flex-shrink:0;transition:transform .2s}
.module.open .mod-toggle{transform:rotate(180deg)}
.page .mod-toggle{display:none}
.mod-body{display:none;padding:24px 28px;border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.module.open .mod-body{display:block}
.page .mod-body{display:block!important}
.mod-body>p{font-size:15px;font-weight:300;color:var(--ink2);line-height:1.75;padding:16px 0 4px}