:root { --bg:#fff; --fg:#1d1d1f; --mut:#6e6e73; --card:#f5f5f7; --acc:#0066cc; --ok:#1a7f37; --warn:#b35900; --bad:#c62828; --code:#1e1e24; }
  @media (prefers-color-scheme: dark) { :root { --bg:#161618; --fg:#f2f2f4; --mut:#9a9aa2; --card:#232327; --acc:#4da3ff; --ok:#4cc26a; --warn:#ffb454; --bad:#ff7b72; --code:#0d0d10; } }
  * { box-sizing:border-box; }
  body { margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; background:var(--bg); color:var(--fg); display:flex; }
  nav { position:sticky; top:0; align-self:flex-start; width:250px; height:100vh; overflow:auto; padding:24px 16px; border-right:1px solid var(--card); font-size:14px; flex-shrink:0; }
  nav a { display:block; padding:4px 8px; color:var(--mut); text-decoration:none; border-radius:6px; }
  nav a:hover { background:var(--card); color:var(--fg); }
  nav .part { margin:16px 8px 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); }
  main { max-width:820px; padding:32px 40px 120px; }
  h1 { font-size:34px; line-height:1.2; margin:0 0 8px; }
  h2 { margin-top:56px; padding-top:16px; border-top:1px solid var(--card); font-size:26px; }
  h3 { margin-top:28px; }
  .sub { color:var(--mut); font-size:18px; margin-bottom:24px; }
  code { font:13px ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--card); padding:1px 5px; border-radius:4px; }
  pre { position:relative; background:var(--code); color:#e6e6ea; padding:14px 16px; border-radius:10px; overflow:auto; font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
  pre code { background:none; padding:0; color:inherit; }
  pre button { position:absolute; top:8px; right:8px; font-size:11px; padding:3px 8px; border-radius:6px; border:1px solid #444; background:#2c2c32; color:#ddd; cursor:pointer; }
  .box { border-left:4px solid var(--acc); background:var(--card); padding:12px 16px; border-radius:0 8px 8px 0; margin:16px 0; }
  .box.warn { border-color:var(--warn); } .box.bad { border-color:var(--bad); } .box.ok { border-color:var(--ok); }
  .box b:first-child { display:block; margin-bottom:2px; }
  table { border-collapse:collapse; width:100%; margin:16px 0; font-size:14px; }
  th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--card); vertical-align:top; }
  th { color:var(--mut); font-weight:600; }
  .out { background:var(--code); color:#9fe3a8; }
  .task { display:flex; gap:10px; align-items:flex-start; background:var(--card); padding:12px 14px; border-radius:10px; margin:12px 0; }
  .task input { margin-top:6px; transform:scale(1.2); }
  svg text { font:12px -apple-system,sans-serif; fill:currentColor; }
  details { background:var(--card); border-radius:8px; padding:8px 14px; margin:12px 0; }
  summary { cursor:pointer; font-weight:600; }
  ::highlight(user-hl) { background:#ffd54a88; color:inherit; }
  #tb { position:absolute; display:none; gap:4px; background:#222; padding:4px; border-radius:8px; z-index:9; box-shadow:0 2px 10px #0006; }
  #tb button { font-size:13px; padding:4px 10px; border:0; border-radius:6px; background:#3a3a40; color:#fff; cursor:pointer; }
  #tb button:hover { background:var(--acc); }
  #clr { position:fixed; right:12px; bottom:12px; font-size:12px; color:var(--mut); cursor:pointer; }
  @media (max-width:900px) { nav { display:none; } main { padding:20px; } }
  .quiz { margin:28px 0; padding:16px 18px; border:2px solid var(--acc); border-radius:12px; }
  .quiz h4 { margin:0 0 8px; color:var(--acc); }
  .quiz .q { margin:14px 0 4px; font-weight:600; }
  .quiz label.o { display:block; padding:6px 10px; margin:4px 0; border-radius:8px; cursor:pointer; background:var(--card); }
  .quiz label.o:hover { outline:1px solid var(--acc); }
  .quiz label.o.right { background:#1a7f3733; outline:1px solid var(--ok); }
  .quiz label.o.wrong { background:#c6282833; outline:1px solid var(--bad); }
  .quiz .why { display:none; font-size:14px; color:var(--mut); margin:4px 0 0 4px; }
  .quiz .score { font-size:14px; color:var(--mut); margin-top:10px; }
  nav .cross { margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--card); }