:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color-scheme: light;
  --page: #fafafa;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #475569;
  --border: #8794a5;
  --surface-hover: #eef4fd;
  --blue: #075cc5;
  --notice-bg: #eaf2ff;
  --pill-bg: #d8f7e7;
  --pill-fg: #075637;
  --focus: #0056bf;
  --shadow: 0 12px 34px rgba(15,23,42,.07);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0a1020;
  --surface: #121b2b;
  --ink: #f1f5fa;
  --muted: #bdcbe0;
  --border: #74869c;
  --surface-hover: #23334a;
  --blue: #9bc8ff;
  --notice-bg: #182c4a;
  --pill-bg: #134434;
  --pill-fg: #bef7dd;
  --focus: #a4cfff;
  --shadow: 0 12px 34px rgba(0,0,0,.24);
}
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:var(--page); line-height:1.45; -webkit-font-smoothing:antialiased; }
button { font:inherit; }
button:focus-visible, a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.page-shell { width:min(100% - 28px,760px); margin:clamp(12px,3vw,28px) auto 32px; }
.course { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; box-shadow:var(--shadow); }
.topbar { display:flex; justify-content:space-between; align-items:center; min-height:34px; margin-bottom:12px; gap:12px; }
.brand { display:flex; align-items:center; gap:8px; min-width:0; }
.brand-mark { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:7px; color:#fff; background:#075ed5; }
.brand h1 { font-size:clamp(14px,2.5vw,16px); font-weight:650; line-height:1.2; margin:0; overflow-wrap:anywhere; }
.actions { display:flex; align-items:center; gap:4px; flex:none; }
.icon-btn,.theme-button { border:0; background:transparent; border-radius:7px; color:var(--muted); min-height:36px; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.icon-btn { width:36px; }
.theme-button { padding:0 9px; font-size:12px; font-weight:650; }
.icon-btn:hover,.theme-button:hover { background:var(--surface-hover); color:var(--ink); }
.icon-btn svg,.theme-button svg { width:19px; height:19px; flex:none; }
.video-frame { width:100%; aspect-ratio:16/9; background:#181e2c; border-radius:9px; display:block; overflow:hidden; position:relative; }
#bunny-player { display:block; width:100%; height:100%; border:0; }
#bunny-player[hidden], .video-placeholder[hidden],.toast[hidden] { display:none; }
.video-placeholder { height:100%; width:100%; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px; gap:7px; }
.placeholder-mark { border-radius:50%; width:38px; height:38px; display:grid; place-items:center; background:#fff; color:#182033; }
.placeholder-mark svg { width:21px; height:21px; }
.video-placeholder strong { font-size:13px; font-weight:650; }
.video-placeholder span:last-child { font-size:12px; color:#d8e4f4; }
.helper-text { font-size:12.5px; color:var(--muted); margin:8px 0 12px; }
.lessons { display:flex; flex-direction:column; gap:7px; }
.lesson,.material { width:100%; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:7px; padding:11px 12px; text-align:left; display:flex; align-items:center; justify-content:space-between; min-height:46px; gap:10px; cursor:pointer; transition:background .15s,border-color .15s; }
.lesson:hover,.material:hover { background:var(--surface-hover); }
.lesson-left { display:flex; align-items:center; gap:9px; min-width:0; }
.lesson-icon { display:flex; align-items:center; justify-content:center; flex:none; color:var(--muted); }
.lesson-icon svg { width:17px; height:17px; }
.lesson-name { font-weight:450; font-size:13px; }
.lesson.active .lesson-icon { color:var(--blue); }
.lesson.active .lesson-name { font-weight:650; }
.current-pill { display:none; background:var(--pill-bg); color:var(--pill-fg); padding:3px 7px; border-radius:99px; font-size:11px; font-weight:650; white-space:nowrap; }
.lesson.active .current-pill { display:inline-flex; margin-left:auto; }
.chevron { color:var(--muted); font-size:23px; line-height:1; font-weight:350; margin-left:auto; }
.lesson.active .chevron { display:none; }
.material { margin-top:9px; min-height:61px; padding-top:12px; padding-bottom:12px; text-decoration:none; }
.material-icon { color:var(--muted); width:19px; height:19px; flex:none; }
.material-info { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.material-info strong { font-size:13px; font-weight:650; }
.material-info span { color:var(--muted); font-size:12px; }
.download-icon { color:var(--muted); width:18px; height:18px; flex:none; }
.demo-notice { margin:13px 3px 2px; padding:9px 10px; display:flex; align-items:flex-start; gap:7px; border-radius:7px; background:var(--notice-bg); color:var(--ink); font-size:12px; }
.demo-notice svg { flex:none; color:var(--blue); margin-top:1px; }
.page-footer { text-align:center; color:var(--muted); font-size:11px; margin-top:15px; }
.page-footer span { padding:0 3px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:99; background:var(--surface); border:1px solid var(--border); color:var(--ink); border-radius:10px; padding:12px 18px; max-width:min(440px,calc(100% - 30px)); width:max-content; text-align:center; font-size:13px; box-shadow:0 8px 30px rgba(0,0,0,.15); }
@media (max-width:480px) {
  .page-shell {width:calc(100% - 16px);margin:8px auto 24px;}
  .course {padding:9px;border-radius:11px;}
  .lesson {padding:10px 9px;}
  .lesson-name{font-size:12.5px;}
  .current-pill {font-size:10px;}
  .topbar {gap:4px;}
  .brand h1 {font-size:13px;}
  .brand-mark {width:29px;height:29px;flex-basis:29px;}
  .actions {gap:0;}
  .icon-btn {width:33px;}
  .theme-button {padding:0 6px;}
  .demo-notice {font-size:11.5px;}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}