:root{--color-bg:#0d1117;--color-surface:#1e1e2e;--color-surface-2:#2a2a3e;--color-border:#ffffff14;--color-text:#e0e8ff;--color-text-muted:#fff6;--color-accent:#7c9dff;--color-correct:#4ade80;--color-incorrect:#f87171;--color-quiz-bg:#2a2a3e;--sidebar-width:320px;--navbar-height:48px;--timeline-height:64px;--radius:8px;--transition:.25s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);height:100dvh;font-family:system-ui,-apple-system,sans-serif;font-size:14px;overflow:hidden}#root{flex-direction:column;height:100dvh;display:flex}.navbar{height:var(--navbar-height);background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.navbar__title{font-size:16px;font-weight:700}.navbar__actions{gap:8px;display:flex;position:relative}.navbar__btn{border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;background:0 0;border-radius:4px;padding:4px 12px}.navbar__btn:hover{background:var(--color-surface-2)}.navbar__dropdown{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);z-index:100;min-width:200px;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 8px);right:0}.navbar__dropdown li button{text-align:left;width:100%;color:var(--color-text);cursor:pointer;background:0 0;border:none;flex-direction:column;padding:8px 14px;display:flex}.navbar__dropdown li button:hover{background:var(--color-surface-2)}.navbar__lesson-chapter{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}.navbar__menu-wrapper{position:relative}.map-area{flex:1;position:relative;overflow:hidden}.layer-controls{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);z-index:5;min-width:160px;padding:12px 14px;position:absolute;top:12px;right:12px}.layer-controls h3{text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:8px;font-size:11px}.layer-toggle{cursor:pointer;align-items:center;gap:8px;padding:4px 0;display:flex}.layer-toggle input{accent-color:var(--color-accent)}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-left:1px solid var(--color-border);z-index:5;transition:transform var(--transition);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%)}.sidebar--open{transform:translate(0)}.sidebar--closed{transform:translate(100%)}.lesson-step{flex-direction:column;height:100%;display:flex}.lesson-step__header{border-bottom:1px solid var(--color-border);padding:14px 14px 10px}.lesson-step__chapter{text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);font-size:10px}.lesson-step__close{float:right;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;font-size:16px}.lesson-step__title{margin:6px 0 8px;font-size:16px;font-weight:600}.lesson-step__body{color:#fffc;flex-direction:column;flex:1;gap:12px;padding:14px;line-height:1.6;display:flex;overflow-y:auto}.lesson-step__map-cue{border-left:3px solid var(--color-accent);border-radius:0 var(--radius) var(--radius) 0;background:#7c9dff1a;padding:8px 10px;font-size:12px}.lesson-step__nav{border-top:1px solid var(--color-border);justify-content:space-between;padding:10px 14px;display:flex}.lesson-step__nav-btn{border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;background:0 0;border-radius:4px;padding:6px 14px}.lesson-step__nav-btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:#0d1117;font-weight:600}.lesson-step__nav-btn:disabled{opacity:.3;cursor:not-allowed}.progress-bar{gap:3px;margin-top:8px;display:flex}.progress-bar__segment{background:var(--color-border);border-radius:2px;flex:1;height:3px}.progress-bar__segment--done{background:var(--color-accent)}.quiz-block{background:var(--color-quiz-bg);border-radius:var(--radius);padding:12px}.quiz-block__question{margin-bottom:10px;font-weight:600}.quiz-block__options{flex-direction:column;gap:6px;display:flex}.quiz-block__option{border:1px solid var(--color-border);color:var(--color-text);text-align:left;cursor:pointer;background:#ffffff0f;border-radius:4px;padding:8px 10px}.quiz-block__option:not(:disabled):hover{background:#ffffff1a}.quiz-block__option--neutral:disabled{opacity:.45;cursor:not-allowed}.quiz-block__option--correct{border-color:var(--color-correct)!important;color:var(--color-correct)!important;background:#4ade8026!important}.quiz-block__option--incorrect{border-color:var(--color-incorrect)!important;color:var(--color-incorrect)!important;background:#f8717126!important}.quiz-block__explanation{color:var(--color-correct);margin-top:10px;font-size:12px}.timeline{height:var(--timeline-height);background:var(--color-surface);border-top:1px solid var(--color-border);z-index:5;flex-direction:column;flex-shrink:0;justify-content:center;gap:4px;padding:0 16px;display:flex}.timeline--unavailable{color:var(--color-text-muted);align-items:center;font-size:13px}.timeline__controls{align-items:center;gap:10px;display:flex}.timeline__play-btn,.timeline__speed-btn,.timeline__jump-btn{border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;background:0 0;border-radius:4px;padding:2px 8px;font-size:12px}.timeline__label{min-width:60px;color:var(--color-accent);font-size:12px;font-weight:600}.timeline__scrubber{accent-color:var(--color-accent);flex:1}.timeline__age-ends{color:var(--color-text-muted);white-space:nowrap;font-size:10px}.timeline__jump-buttons{gap:6px;display:flex}