:root { --navy: #07101e; --navy-2: #0d1b30; --navy-3: #111f37; --paper: #f5efe5; --paper-2: #fffaf1; --ink: #1d1812; --muted: #736a5e; --gold: #d39a4a; --gold-bright: #ffd184; --indigo: #6174dc; --teal: #72cbbf; --line: #263653; --line-light: rgba(98,75,41,.22); --serif: Georgia, "Times New Roman", serif; --ui: Arial, Helvetica, sans-serif; }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--navy); color: #f4e8cd; font-family: var(--ui); }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    h1, h2, h3, h4, p { margin: 0; }
    .app-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 28px; background: rgba(7,16,30,.97); border-bottom: 1px solid #1f2d45; }
    .brand { display: inline-flex; align-items: center; gap: 12px; }
    .brand-mark { color: var(--gold-bright); font: 700 24px var(--serif); letter-spacing: .16em; }
    .brand-copy { display: grid; gap: 3px; }
    .brand-copy strong { color: #f8edda; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
    .brand-copy small { color: #8d99ad; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
    .header-actions { display: flex; align-items: center; gap: 16px; }
    .site-nav { display: flex; align-items: center; gap: 20px; color: #9ca9bb; font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
    .site-nav a:hover { color: #fff; }
    .theme-toggle, .menu-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #36435e; border-radius: 50%; background: transparent; color: var(--gold-bright); cursor: pointer; }
    .theme-toggle { font-size: 16px; }
    .menu-toggle { display: none; width: auto; padding: 0 11px; border-radius: 4px; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
    .app-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: calc(100vh - 70px); }
    .sidebar { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #1f2d45; background: #091525; }
    .sidebar-intro { padding: 28px 23px 21px; border-bottom: 1px solid #1f2d45; }
    .sidebar-intro h1 { margin-top: 11px; font: 400 32px/1 var(--serif); }
    .sidebar-intro p:last-child { margin-top: 11px; color: #9ca9bb; font-size: 11px; line-height: 1.5; }
    .progress { padding: 18px 23px; border-bottom: 1px solid #1f2d45; }
    .progress-top { display: flex; justify-content: space-between; margin-bottom: 9px; color: #9ca9bb; font-size: 8px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
    .progress-track { height: 5px; background: #1a2942; }
    .progress-track span { display: block; width: 24%; height: 100%; background: var(--teal); }
    .lesson-list { display: grid; gap: 5px; padding: 17px 11px; overflow: auto; }
    .lesson-button { display: grid; grid-template-columns: 36px 1fr; gap: 11px; align-items: start; width: 100%; padding: 11px 9px; border: 1px solid transparent; background: transparent; color: #aeb9c8; text-align: left; cursor: pointer; }
    .lesson-button:hover, .lesson-button.active { border-color: #465ba8; background: #101e34; color: #fff; }
    .lesson-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #34425e; color: #9ca9bb; font-size: 10px; }
    .lesson-button.active .lesson-number { border-color: var(--indigo); background: var(--indigo); color: #fff; }
    .lesson-button b { display: block; font-size: 11px; line-height: 1.3; }
    .lesson-button small { display: block; margin-top: 4px; color: #718097; font-size: 9px; line-height: 1.3; }
    .sidebar-foot { margin-top: auto; padding: 18px 23px; border-top: 1px solid #1f2d45; }
    .sidebar-foot p { color: #8390a3; font-size: 10px; line-height: 1.5; }
    .sidebar-foot a { display: inline-flex; margin-top: 14px; color: var(--gold-bright); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
    .main { min-width: 0; background: #0b1729; }
    .main-inner { width: min(920px, calc(100% - 58px)); margin: 0 auto; padding: 55px 0 80px; }
    .breadcrumb { color: var(--teal); font-size: 9px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
    .main h2 { max-width: 790px; margin-top: 15px; font: 400 clamp(41px, 5.6vw, 72px)/.95 var(--serif); letter-spacing: -.035em; }
    .lesson-intro { max-width: 700px; margin-top: 20px; color: #aeb9c8; font: 17px/1.65 var(--serif); }
    .lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
    .lesson-meta span { padding: 8px 10px; border: 1px solid #30405c; color: #aeb9c8; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
    .lesson-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 35px; padding-bottom: 14px; border-bottom: 1px solid #273750; }
    .lesson-tab { padding: 11px 13px; border: 1px solid #2e3c59; background: transparent; color: #8995a7; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
    .lesson-tab.active, .lesson-tab:hover { border-color: var(--indigo); background: var(--indigo); color: #fff; }
    .lesson-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: 14px; margin-top: 14px; }
    .panel-card { min-height: 190px; padding: 22px; border: 1px solid #293956; background: var(--navy-3); }
    .panel-card h3 { margin-bottom: 11px; color: #f8e5be; font: 400 26px/1.05 var(--serif); }
    .panel-card p, .panel-card li { color: #a8b4c7; font-size: 12px; line-height: 1.6; }
    .panel-card ul { display: grid; gap: 8px; padding-left: 17px; margin: 0; }
    .panel-card li::marker { color: var(--teal); }
    .lesson-callout { margin-top: 15px; padding: 18px 21px; border-left: 2px solid var(--gold-bright); background: #101e34; color: #d3dbe5; font: 16px/1.55 var(--serif); }
    .lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
    .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 21px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease; }
    .button:hover { transform: translateY(-2px); }
    .button-primary { background: var(--gold-bright); color: #131a26; }
    .button-outline { border-color: #445371; background: transparent; color: #e6d4b3; }
    .public-note { margin-top: 53px; padding-top: 25px; border-top: 1px solid #273750; color: #8794a7; font-size: 11px; line-height: 1.6; }
    body.page-light { background: var(--paper); color: var(--ink); }
    body.page-light .app-header { background: rgba(255,250,241,.97); border-color: var(--line-light); }
    body.page-light .brand-mark { color: #8b5b22; }
    body.page-light .brand-copy strong { color: var(--ink); }
    body.page-light .brand-copy small, body.page-light .site-nav { color: var(--muted); }
    body.page-light .site-nav a:hover { color: var(--ink); }
    body.page-light .theme-toggle, body.page-light .menu-toggle { border-color: rgba(98,75,41,.28); color: #8b5b22; }
    body.page-light .sidebar { background: #fffaf1; border-color: var(--line-light); }
    body.page-light .sidebar-intro, body.page-light .progress, body.page-light .sidebar-foot { border-color: var(--line-light); }
    body.page-light .sidebar-intro p:last-child, body.page-light .progress-top, body.page-light .sidebar-foot p { color: var(--muted); }
    body.page-light .progress-track { background: #e4d8c6; }
    body.page-light .lesson-button { color: var(--muted); }
    body.page-light .lesson-button:hover, body.page-light .lesson-button.active { background: #f0e9dc; border-color: #8b78cf; color: var(--ink); }
    body.page-light .main { background: var(--paper); }
    body.page-light .main h2 { color: var(--ink); }
    body.page-light .lesson-intro, body.page-light .lesson-meta span, body.page-light .panel-card p, body.page-light .panel-card li { color: var(--muted); }
    body.page-light .lesson-meta span, body.page-light .lesson-tabs, body.page-light .panel-card, body.page-light .public-note { border-color: var(--line-light); }
    body.page-light .panel-card { background: #fffaf1; }
    body.page-light .panel-card h3 { color: var(--ink); }
    body.page-light .lesson-callout { background: #f1e8d8; color: #4a3824; }
    body.page-light .public-note { color: var(--muted); }
    @media (max-width: 900px) {
      .app-layout { grid-template-columns: 220px minmax(0,1fr); }
      .main-inner { width: min(100% - 38px, 920px); }
    }
    @media (max-width: 720px) {
      .app-header { flex-wrap: wrap; gap: 10px; padding: 12px 17px; }
      .header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
      .menu-toggle { display: inline-grid; }
      .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; border-top: 1px solid #1f2d45; }
      .app-header.menu-open .site-nav { display: flex; }
      .site-nav a { display: flex; align-items: center; min-height: 43px; border-bottom: 1px solid #1f2d45; }
      body.page-light .site-nav { border-color: var(--line-light); }
      body.page-light .site-nav a { border-color: var(--line-light); }
      .app-layout { display: block; }
      .sidebar { border-right: 0; border-bottom: 1px solid #1f2d45; }
      .sidebar-intro { padding: 22px 17px 18px; }
      .sidebar-intro h1 { font-size: 27px; }
      .progress { padding: 15px 17px; }
      .lesson-list { display: flex; overflow-x: auto; padding: 12px 10px; }
      .lesson-button { min-width: 224px; }
      .sidebar-foot { display: none; }
      .main-inner { width: min(100% - 28px, 920px); padding: 37px 0 55px; }
      .lesson-panel { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .main h2 { font-size: 47px; }
      .lesson-intro { font-size: 16px; }
      .lesson-tabs { margin-top: 27px; }
      .lesson-tab { flex: 1 1 calc(50% - 7px); }
      .panel-card { min-height: 0; }
    }
  
*{letter-spacing:0!important} [hidden]{display:none!important}
.brand{max-width:430px;min-width:0}.brand-mark{font-size:24px;line-height:1.1;max-width:270px}.brand-copy{flex-shrink:0}
.site-nav{font-size:14px;gap:16px;flex-wrap:wrap}.header-actions{min-width:0}.app-header{gap:20px;padding:16px 24px;flex-wrap:wrap}
.sidebar-intro p:last-child,.sidebar-foot p,.lesson-button b,.lesson-button small,.lesson-number,.breadcrumb,.lesson-meta span,.lesson-tab,.button,.public-note{font-size:16px;line-height:1.5}
.main h2{font-size:46px;line-height:1.12}.public-note h2{font-size:24px;margin-bottom:16px}
.lesson-intro,.panel-card p,.panel-card li,.lesson-callout{font-size:19px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.panel-card{background:transparent;border:0;padding:20px 0;min-height:0}.lesson-panel{gap:32px}.lesson-button small{color:#b2bdce}
.button-outline{color:#f4e8cd}.page-light .button-outline{color:#30281c;border-color:#8b7e6e}.page-light .lesson-tab{color:#554b3d}.page-light .lesson-tab.active{color:white}
.page-light .lesson-button small{color:#5f564a}.page-light .breadcrumb{color:#246658}.page-light .sidebar-foot a{color:#704509}
.main-inner{max-width:1000px}.editor{display:grid;gap:20px}.editor label{display:grid;gap:8px;font-size:16px}.editor textarea,.editor input,.editor select{width:100%;min-width:0;border:1px solid #5b6a80;background:#0a1524;color:#f4e8cd;padding:12px;font:17px/1.5 Arial;border-radius:4px}.editor textarea{resize:vertical;min-height:100px}.editor input,.editor select{min-height:46px}.editor .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.editor .actions{display:flex;flex-wrap:wrap;gap:12px;position:sticky;bottom:0;padding:18px 0;background:#0b1729;border-top:1px solid #56627a}.page-light .editor input,.page-light .editor textarea,.page-light .editor select{background:white;color:#211e1a;border-color:#8d847a}.page-light .editor .actions{background:#f5efe5}
.gateway{max-width:1100px;margin:auto;padding:60px 28px}.gateway h1{font:46px/1.15 Georgia}.gateway>p{font:20px/1.6 Georgia;max-width:700px;margin:20px 0 36px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:40px}.choice{border-top:1px solid #766039;padding:28px 0}.choice h2{font:32px/1.15 Georgia;margin-bottom:18px}.choice p{font-size:19px;line-height:1.6;margin-bottom:24px}.choice .button{display:flex;margin:14px 0;min-height:48px}.gateway .account-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:40px;border-top:1px solid #766039;padding-top:24px}.gateway a:not(.button){text-decoration:underline}
#status{font-size:17px;line-height:1.6;margin-bottom:20px}button:disabled{opacity:.6;cursor:wait}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #77c9c1;outline-offset:3px}
@media(max-width:720px){.brand-mark{font-size:22px;max-width:230px}.brand-copy{display:none}.app-header{padding:14px 16px}.header-actions{margin-left:auto}.site-nav{font-size:16px}.main h2{font-size:32px}.main-inner{padding-top:24px}.lesson-button{min-width:220px}.editor .row{grid-template-columns:1fr}.choices{grid-template-columns:1fr;gap:16px}.gateway{padding:36px 20px}.gateway h1{font-size:36px}.lesson-panel{grid-template-columns:1fr}.lesson-tab{padding:10px}.editor .actions .button{flex:1 1 140px}}