*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --c-bg:#0d1117;--c-surface:#161b22;--c-surface2:#1c2333;--c-border:#30363d;
  --c-text:#e6edf3;--c-text2:#8b949e;--c-text3:#6e7681;
  --c-primary:#f97316;--c-primary-soft:rgba(249,115,22,.12);
  --c-accent:#38bdf8;--c-accent-soft:rgba(56,189,248,.10);
  --c-success:#22c55e;--c-success-soft:rgba(34,197,94,.12);
  --c-danger:#ef4444;--c-danger-soft:rgba(239,68,68,.12);
  --c-warning:#eab308;--c-warning-soft:rgba(234,179,8,.12);
  --c-code-bg:#0d1117;--c-code-border:#30363d;
  --c-card:#161b22;--c-card-hover:#1c2333;
  --sidebar-w:280px;--topbar-h:56px;
  --radius:10px;--radius-sm:6px;
  --shadow:0 2px 8px rgba(0,0,0,.3);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
  --font-mono:"SF Mono","Fira Code","Fira Mono",Menlo,Consolas,monospace;
  --transition:0.2s cubic-bezier(.4,0,.2,1);
}

[data-theme="light"]{
  --c-bg:#ffffff;--c-surface:#f6f8fa;--c-surface2:#eef1f5;--c-border:#d1d9e0;
  --c-text:#1f2328;--c-text2:#59636e;--c-text3:#8b949e;
  --c-primary:#ea580c;--c-primary-soft:rgba(234,88,12,.08);
  --c-accent:#0284c7;--c-accent-soft:rgba(2,132,199,.08);
  --c-success:#16a34a;--c-success-soft:rgba(22,163,74,.08);
  --c-danger:#dc2626;--c-danger-soft:rgba(220,38,38,.08);
  --c-warning:#ca8a04;--c-warning-soft:rgba(202,138,4,.08);
  --c-code-bg:#f6f8fa;--c-code-border:#d1d9e0;
  --c-card:#ffffff;--c-card-hover:#f6f8fa;
  --shadow:0 2px 8px rgba(0,0,0,.08);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--c-bg);color:var(--c-text);
  line-height:1.7;transition:background var(--transition),color var(--transition);
  overflow-x:hidden}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--c-text3)}

/* ---- Top Bar ---- */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--topbar-h);
  background:var(--c-surface);border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;z-index:100;backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);transition:background var(--transition)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px;min-width:200px}
.topbar-right{justify-content:flex-end}
.topbar-center{flex:1;max-width:400px;padding:0 20px}

.menu-toggle{display:none;background:none;border:none;cursor:pointer;
  padding:6px;flex-direction:column;gap:4px}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--c-text);
  border-radius:1px;transition:var(--transition)}

.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--c-text)}
.logo-icon{font-size:24px}
.logo-text{font-size:18px;font-weight:700;letter-spacing:-.02em}
.logo-sub{color:var(--c-primary);margin-left:2px;font-weight:600}

.progress-bar-container{background:var(--c-bg);border-radius:10px;height:8px;
  position:relative;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--c-primary),var(--c-accent));
  border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1);width:0}
.progress-text{position:absolute;right:0;top:-22px;font-size:12px;
  color:var(--c-text2);font-weight:600}

.theme-toggle{background:none;border:1px solid var(--c-border);border-radius:50%;
  width:36px;height:36px;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-text);transition:var(--transition)}
.theme-toggle:hover{border-color:var(--c-primary);color:var(--c-primary);
  background:var(--c-primary-soft)}

/* ---- Sidebar ---- */
.sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);
  background:var(--c-surface);border-right:1px solid var(--c-border);
  overflow-y:auto;z-index:90;transition:transform var(--transition),background var(--transition);
  display:flex;flex-direction:column}
.sidebar-header{padding:20px 20px 12px;border-bottom:1px solid var(--c-border)}
.sidebar-header h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--c-text3);font-weight:600}
.sidebar-footer{padding:16px 20px;margin-top:auto;border-top:1px solid var(--c-border)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80}

.chapter-nav{flex:1;overflow-y:auto;padding:8px 12px}
.chapter-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);
  text-decoration:none;color:var(--c-text);font-size:14px;margin-bottom:2px;
  border:1px solid transparent}
.chapter-nav-item:hover{background:var(--c-card-hover);border-color:var(--c-border)}
.chapter-nav-item.active{background:var(--c-primary-soft);border-color:var(--c-primary);
  color:var(--c-primary);font-weight:600}
.chapter-nav-item .ch-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.chapter-nav-item .ch-title{flex:1;line-height:1.3}
.chapter-nav-item .ch-check{font-size:14px;color:var(--c-success);opacity:0;
  transition:opacity var(--transition)}
.chapter-nav-item .ch-check.done{opacity:1}

.reset-btn{width:100%;padding:8px;background:none;border:1px solid var(--c-border);
  border-radius:var(--radius-sm);color:var(--c-text3);cursor:pointer;
  font-size:12px;transition:var(--transition)}
.reset-btn:hover{border-color:var(--c-danger);color:var(--c-danger);
  background:var(--c-danger-soft)}

/* ---- Main Content ---- */
.content{margin-left:var(--sidebar-w);margin-top:var(--topbar-h);min-height:calc(100vh - var(--topbar-h));
  padding:40px 48px 80px;max-width:960px;transition:margin var(--transition)}

/* ---- Home Page ---- */
.home-hero{text-align:center;padding:60px 0 40px}
.home-hero h1{font-size:clamp(28px,5vw,42px);font-weight:800;
  background:linear-gradient(135deg,var(--c-primary),var(--c-accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;margin-bottom:12px;letter-spacing:-.03em}
.home-hero p{font-size:18px;color:var(--c-text2);max-width:560px;margin:0 auto 32px;line-height:1.6}
.home-stats{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.stat-card{background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:20px 28px;min-width:140px;text-align:center}
.stat-card .stat-num{font-size:28px;font-weight:800;color:var(--c-primary)}
.stat-card .stat-label{font-size:13px;color:var(--c-text2);margin-top:4px}

.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.chapter-card{background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:24px;cursor:pointer;
  transition:var(--transition);position:relative;overflow:hidden}
.chapter-card:hover{border-color:var(--c-primary);transform:translateY(-2px);
  box-shadow:var(--shadow)}
.chapter-card .card-icon{font-size:32px;margin-bottom:12px}
.chapter-card h3{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--c-text)}
.chapter-card p{font-size:13px;color:var(--c-text2);line-height:1.5;margin-bottom:16px}
.chapter-card .card-footer{display:flex;align-items:center;justify-content:space-between}
.chapter-card .card-badge{font-size:11px;padding:3px 10px;border-radius:20px;
  font-weight:600;background:var(--c-primary-soft);color:var(--c-primary)}
.chapter-card .card-badge.complete{background:var(--c-success-soft);color:var(--c-success)}
.chapter-card .card-progress{width:60px;height:4px;background:var(--c-bg);
  border-radius:2px;overflow:hidden}
.chapter-card .card-progress-fill{height:100%;background:var(--c-primary);
  border-radius:2px;transition:width .4s}

/* ---- Chapter Content ---- */
.chapter-header{margin-bottom:40px;padding-bottom:24px;border-bottom:1px solid var(--c-border)}
.chapter-header .ch-number{font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--c-primary);margin-bottom:8px}
.chapter-header h1{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.02em;
  margin-bottom:8px}
.chapter-header .ch-desc{font-size:16px;color:var(--c-text2);line-height:1.6}

.section{margin-bottom:48px}
.section h2{font-size:22px;font-weight:700;margin-bottom:16px;padding-bottom:8px;
  border-bottom:2px solid var(--c-primary-soft);display:flex;align-items:center;gap:8px}
.section h3{font-size:17px;font-weight:600;margin:24px 0 12px;color:var(--c-text)}
.section p{margin-bottom:14px;color:var(--c-text);font-size:15px}
.section ul,.section ol{margin:0 0 16px 20px;font-size:15px}
.section li{margin-bottom:6px;color:var(--c-text)}
.section li::marker{color:var(--c-primary)}

.callout{border-radius:var(--radius-sm);padding:16px 20px;margin:16px 0 20px;
  font-size:14px;line-height:1.6;border-left:3px solid}
.callout-info{background:var(--c-accent-soft);border-color:var(--c-accent)}
.callout-warning{background:var(--c-warning-soft);border-color:var(--c-warning)}
.callout-tip{background:var(--c-success-soft);border-color:var(--c-success)}
.callout-danger{background:var(--c-danger-soft);border-color:var(--c-danger)}
.callout-title{font-weight:700;margin-bottom:4px;font-size:13px;text-transform:uppercase;
  letter-spacing:.05em}

.inline-code{background:var(--c-code-bg);border:1px solid var(--c-code-border);
  padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:0.88em;
  color:var(--c-primary)}

/* ---- Code Blocks ---- */
.code-block{margin:16px 0 24px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--c-code-border);background:var(--c-code-bg)}
.code-header{display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;background:var(--c-surface2);border-bottom:1px solid var(--c-code-border);
  font-size:13px;color:var(--c-text2)}
.code-header .code-lang{font-weight:600;text-transform:uppercase;font-size:11px;
  letter-spacing:.05em}
.code-copy{background:none;border:1px solid var(--c-border);border-radius:4px;
  padding:3px 10px;cursor:pointer;font-size:11px;color:var(--c-text2);
  transition:var(--transition)}
.code-copy:hover{border-color:var(--c-primary);color:var(--c-primary)}
.code-copy.copied{border-color:var(--c-success);color:var(--c-success)}
.code-body{padding:16px;overflow-x:auto;font-family:var(--font-mono);font-size:13.5px;
  line-height:1.7;tab-size:4}
.code-body pre{margin:0;white-space:pre}
.code-explanation{padding:12px 16px;background:var(--c-surface2);border-top:1px solid var(--c-code-border);
  font-size:13px;color:var(--c-text2);line-height:1.6}
.code-explanation strong{color:var(--c-text)}

/* Syntax highlighting */
.tok-kw{color:#ff7b72}.tok-type{color:#79c0ff}.tok-str{color:#a5d6ff}
.tok-num{color:#79c0ff}.tok-comment{color:#6e7681;font-style:italic}
.tok-fn{color:#d2a8ff}.tok-ann{color:#ffa657}.tok-op{color:#ff7b72}
.tok-bool{color:#79c0ff}.tok-cls{color:#ffa657}
[data-theme="light"] .tok-kw{color:#cf222e}
[data-theme="light"] .tok-type{color:#0550ae}
[data-theme="light"] .tok-str{color:#0a3069}
[data-theme="light"] .tok-num{color:#0550ae}
[data-theme="light"] .tok-comment{color:#6e7681}
[data-theme="light"] .tok-fn{color:#8250df}
[data-theme="light"] .tok-ann{color:#953800}
[data-theme="light"] .tok-op{color:#cf222e}
[data-theme="light"] .tok-bool{color:#0550ae}
[data-theme="light"] .tok-cls{color:#953800}

/* ---- Quiz ---- */
.quiz-section{margin-top:48px;padding-top:32px;border-top:2px solid var(--c-primary-soft)}
.quiz-title{font-size:22px;font-weight:700;margin-bottom:8px;
  display:flex;align-items:center;gap:8px}
.quiz-subtitle{color:var(--c-text2);font-size:14px;margin-bottom:28px}

.quiz-question{background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:24px;margin-bottom:20px;
  transition:border-color var(--transition)}
.quiz-question.answered-correct{border-color:var(--c-success)}
.quiz-question.answered-wrong{border-color:var(--c-danger)}
.quiz-q-header{display:flex;gap:12px;margin-bottom:16px}
.quiz-q-num{background:var(--c-primary);color:#fff;font-size:13px;font-weight:700;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.quiz-q-text{font-size:15px;font-weight:500;line-height:1.6;flex:1}
.quiz-q-text code{background:var(--c-code-bg);border:1px solid var(--c-code-border);
  padding:1px 6px;border-radius:4px;font-family:var(--font-mono);font-size:0.88em}
.quiz-q-code{margin:12px 0;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--c-code-border);background:var(--c-code-bg)}
.quiz-q-code pre{padding:12px 16px;font-family:var(--font-mono);font-size:13px;
  line-height:1.6;overflow-x:auto;margin:0;white-space:pre}

.quiz-options{display:flex;flex-direction:column;gap:8px}
.quiz-option{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  border:1px solid var(--c-border);border-radius:var(--radius-sm);
  cursor:pointer;transition:var(--transition);font-size:14px;line-height:1.5}
.quiz-option:hover:not(.disabled){background:var(--c-card-hover);border-color:var(--c-text3)}
.quiz-option.selected{border-color:var(--c-primary);background:var(--c-primary-soft)}
.quiz-option.correct{border-color:var(--c-success);background:var(--c-success-soft)}
.quiz-option.wrong{border-color:var(--c-danger);background:var(--c-danger-soft)}
.quiz-option.disabled{cursor:default;opacity:.7}
.quiz-option.disabled.correct{opacity:1}
.quiz-option .opt-marker{width:24px;height:24px;border:2px solid var(--c-border);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;transition:var(--transition)}
.quiz-option.selected .opt-marker{border-color:var(--c-primary);color:var(--c-primary)}
.quiz-option.correct .opt-marker{border-color:var(--c-success);background:var(--c-success);color:#fff}
.quiz-option.wrong .opt-marker{border-color:var(--c-danger);background:var(--c-danger);color:#fff}
.quiz-option .opt-text{flex:1}
.quiz-option .opt-text code{background:var(--c-code-bg);border:1px solid var(--c-code-border);
  padding:1px 5px;border-radius:3px;font-family:var(--font-mono);font-size:0.88em}

.quiz-explanation{margin-top:12px;padding:12px 16px;border-radius:var(--radius-sm);
  font-size:13px;line-height:1.6;display:none}
.quiz-explanation.show{display:block}
.quiz-explanation.correct-exp{background:var(--c-success-soft);border-left:3px solid var(--c-success)}
.quiz-explanation.wrong-exp{background:var(--c-danger-soft);border-left:3px solid var(--c-danger)}
.quiz-explanation strong{font-weight:700}

.quiz-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.quiz-submit,.quiz-retry{padding:12px 28px;border-radius:var(--radius-sm);
  font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition);border:none}
.quiz-submit{background:var(--c-primary);color:#fff}
.quiz-submit:hover{opacity:.9;transform:translateY(-1px)}
.quiz-submit:disabled{opacity:.5;cursor:default;transform:none}
.quiz-retry{background:none;border:1px solid var(--c-border);color:var(--c-text)}
.quiz-retry:hover{border-color:var(--c-primary);color:var(--c-primary)}

.quiz-result{background:var(--c-card);border:1px solid var(--c-border);
  border-radius:var(--radius);padding:24px;margin-top:24px;text-align:center;
  display:none}
.quiz-result.show{display:block}
.quiz-result .result-score{font-size:48px;font-weight:800;margin:8px 0}
.quiz-result .result-score.pass{color:var(--c-success)}
.quiz-result .result-score.fail{color:var(--c-danger)}
.quiz-result .result-msg{font-size:15px;color:var(--c-text2);margin-bottom:16px}
.quiz-result .result-detail{font-size:13px;color:var(--c-text3)}

/* ---- Chapter Navigation (bottom) ---- */
.chapter-bottom-nav{display:flex;justify-content:space-between;margin-top:56px;
  padding-top:24px;border-top:1px solid var(--c-border);gap:16px}
.nav-btn{display:flex;flex-direction:column;padding:16px 20px;
  border:1px solid var(--c-border);border-radius:var(--radius);
  text-decoration:none;color:var(--c-text);transition:var(--transition);
  flex:1;max-width:50%}
.nav-btn:hover{border-color:var(--c-primary);background:var(--c-primary-soft)}
.nav-btn .nav-label{font-size:12px;color:var(--c-text3);margin-bottom:4px}
.nav-btn .nav-title{font-size:14px;font-weight:600}
.nav-btn.next{text-align:right;margin-left:auto}

/* ---- Table ---- */
.data-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:14px}
.data-table th,.data-table td{padding:10px 14px;text-align:left;
  border-bottom:1px solid var(--c-border)}
.data-table th{background:var(--c-surface);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--c-text2)}
.data-table tr:hover td{background:var(--c-card-hover)}
.data-table code{background:var(--c-code-bg);padding:1px 5px;border-radius:3px;
  font-family:var(--font-mono);font-size:0.88em}

/* ---- Responsive ---- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .content{margin-left:0;padding:32px 24px 80px}
  .menu-toggle{display:flex}
  .topbar-center{display:none}
}
@media(max-width:600px){
  .content{padding:24px 16px 60px}
  .chapter-grid{grid-template-columns:1fr}
  .home-stats{gap:12px}
  .stat-card{min-width:100px;padding:16px}
  .quiz-question{padding:16px}
  .chapter-bottom-nav{flex-direction:column}
  .nav-btn{max-width:100%}
}

/* ---- Animations ---- */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .35s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
.slide-in{animation:slideIn .3s ease-out}