:root {
  color-scheme: light;
  --bg: #f5f7f6;
  --panel: #ffffff;
  --ink: #1d2424;
  --muted: #5a6670;
  --line: #d8e0dc;
  --accent: #145c63;
  --accent-2: #7a5a12;
  --green: #2f684b;
  --blue: #315f8f;
  --rose: #94483d;
  --code: #eef2f0;
  --radius: 8px;
  --sans: "Segoe UI", "Noto Sans KR", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.62; }
main { max-width: 1240px; margin: 0 auto; padding: 28px 20px 72px; }
.hero { border-bottom: 1px solid var(--line); margin-bottom: 14px; padding-bottom: 18px; }
.eyebrow { color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: 0; margin: 0 0 8px; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.22; letter-spacing: 0; margin-top: 0; }
h1 { font-size: 2.35rem; margin-bottom: 10px; }
h2 { font-size: 1.35rem; margin-bottom: 10px; }
.lead { color: #3f4c50; font-size: 1.06rem; max-width: 850px; }
a { color: #0f607f; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.quick-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.quick-nav a, .path-list a { background: #eef6f5; border: 1px solid #c8dcda; border-radius: var(--radius); color: #10484d; font-weight: 700; padding: 8px 10px; text-decoration: none; }
.panel, .stats article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20, 35, 35, .05); margin-bottom: 16px; padding: 20px; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stats article { margin: 0; }
.stats strong { display: block; font-size: 1.8rem; }
.stats span { color: var(--muted); }
.today-next { border-top: 4px solid var(--accent); }
.today-layout { display: grid; gap: 12px; grid-template-columns: minmax(280px, 1.1fr) minmax(280px, .9fr); }
.today-supporting { display: grid; gap: 10px; }
.today-card { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.today-card-primary { background: #eef6f5; border-color: #b9d4d0; }
.today-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.today-card-primary h3 { font-size: 1.28rem; }
.today-rank { color: var(--accent-2); font-size: .74rem; font-weight: 800; margin: 0 0 5px; text-transform: uppercase; }
.today-card dl { display: grid; gap: 8px; margin: 0; }
.today-card div { border-top: 1px solid #dfe7e3; padding-top: 8px; }
.today-card dt { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.today-card dd { margin: 2px 0 0; }
.workflows-panel { border-top: 4px solid var(--blue); }
.workflow-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.workflow-card { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.workflow-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.workflow-tag { color: var(--blue); font-size: .74rem; font-weight: 800; margin: 0 0 5px; text-transform: uppercase; }
.workflow-card dl { display: grid; gap: 9px; margin: 0; }
.workflow-card div { border-top: 1px solid #dfe7e3; padding-top: 8px; }
.workflow-card dt { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.workflow-card dd { margin: 2px 0 0; }
.workflow-card ul, .workflow-card ol { margin: 5px 0 0; padding-left: 20px; }
.workflow-links { display: flex; flex-wrap: wrap; gap: 6px; }
.workflow-links a { background: #eef6f5; border: 1px solid #c8dcda; border-radius: var(--radius); color: #10484d; font-size: .9rem; font-weight: 700; padding: 4px 7px; text-decoration: none; }
.latest-exam-panel { border-top: 4px solid var(--accent-2); }
.exam-overview-link { background: #fff8e7; border: 1px solid #dbc88d; border-radius: var(--radius); color: #5d4210; display: inline-block; font-weight: 800; margin-bottom: 12px; padding: 8px 10px; text-decoration: none; }
.exam-status-list { columns: 2; margin-bottom: 0; }
.exam-hero { border-bottom-color: #cddbd7; }
.exam-task-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.exam-task-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20, 35, 35, .05); padding: 18px; }
.exam-card-top { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.exam-task-card h3 { font-size: 1.16rem; margin-bottom: 10px; }
.exam-task-card h4 { color: var(--accent); font-size: .9rem; margin: 12px 0 6px; }
.exam-facts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); margin: 0; }
.exam-facts div { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.exam-facts dt { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.exam-facts dd { margin: 2px 0 0; }
.status-badge { border-radius: 999px; display: inline-block; font-size: .76rem; font-weight: 900; line-height: 1; padding: 7px 9px; text-transform: uppercase; }
.status-badge.ok { background: #e9f6ef; border: 1px solid #b9d8c7; color: #245a3d; }
.status-badge.warning { background: #fff4d8; border: 1px solid #dfc474; color: #684b0e; }
.status-badge.danger { background: #fff0ed; border: 1px solid #e0b8b1; color: #8a3529; }
.exam-warning-badge { background: #fff4d8; border: 1px solid #dfc474; border-left: 5px solid var(--accent-2); border-radius: var(--radius); color: #5d4210; font-weight: 800; margin: 10px 0; padding: 9px 10px; }
.source-chip-grid, .task-link-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 10px; }
.source-chip, .task-link-row a { background: #eef6f5; border: 1px solid #c8dcda; border-radius: var(--radius); color: #10484d; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; padding: 5px 8px; text-decoration: none; }
.source-chip span { color: var(--accent-2); display: block; font-size: .68rem; text-transform: uppercase; }
.exam-source-panel { border-left: 5px solid var(--accent); }
.section-jump { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 16px; }
.section-jump a { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); color: #174f57; font-size: .9rem; font-weight: 700; padding: 6px 8px; text-decoration: none; }
.exam-section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(20, 35, 35, .05); margin-bottom: 16px; padding: 20px; }
.exam-section h2 { color: var(--accent); }
.exam-section h3 { border-top: 1px solid var(--line); font-size: 1.05rem; margin-top: 18px; padding-top: 14px; }
.exam-section blockquote { background: #fbfcfc; border-left: 4px solid var(--accent-2); margin: 10px 0; padding: 8px 12px; }
.subpart-study-section { border-top: 5px solid var(--blue); margin-top: 16px; }
.subpart-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 16px; }
.subpart-nav a { background: #edf3fb; border: 1px solid #c4d3e5; border-radius: 999px; color: #244e79; font-weight: 800; padding: 6px 10px; text-decoration: none; }
.subpart-study-card { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 18px; overflow: hidden; }
.subpart-card-heading { align-items: center; background: #f5f8fb; border-bottom: 1px solid var(--line); display: flex; gap: 10px; padding: 12px 14px; }
.subpart-card-heading .eyebrow { margin: 0; }
.subpart-card-heading h3 { font-size: 1.25rem; margin: 0 auto 0 0; }
.subpart-card-heading span { color: var(--muted); font-size: .86rem; font-weight: 800; }
.subpart-content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subpart-content { min-width: 0; padding: 16px; }
.subpart-content + .subpart-content { border-left: 1px solid var(--line); }
.subpart-content h4 { color: var(--accent); font-size: 1rem; margin: 0 0 10px; }
.subpart-content.original { background: #fff; }
.subpart-content.translation { background: #fbfcfc; }
.subpart-content.concept { background: #f2f8f5; }
.subpart-content pre { max-height: 280px; }
.subpart-guide-grid { background: #fffaf0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subpart-guide { min-width: 0; padding: 16px 18px; }
.subpart-guide:nth-child(even) { border-left: 1px solid #eadfca; }
.subpart-guide:nth-child(n+3) { border-top: 1px solid #eadfca; }
.subpart-guide h4 { color: #76511a; font-size: 1rem; margin: 0 0 9px; }
.subpart-guide p, .subpart-guide ol { margin-bottom: 0; }
.subpart-guide.solution-method { background: #fffdf7; }
.subpart-guide.why-it-works { background: #f6fbf8; }
.subpart-guide.mistake-check { background: #fff6f2; }
.subpart-deep-lecture { border-top: 1px solid var(--line); background: #fff; }
.subpart-deep-lecture > summary { background: #173f46; color: #fff; cursor: pointer; font-size: 1.05rem; font-weight: 850; padding: 14px 18px; }
.subpart-deep-lecture > div, .subpart-deep-lecture > section { padding: 15px 20px; }
.subpart-deep-lecture > section + section { border-top: 1px solid var(--line); }
.subpart-deep-lecture h4 { color: var(--accent); margin: 0 0 10px; }
.subpart-deep-lecture li + li { margin-top: 8px; }
.deep-lecture-intro { background: #edf7f5; border-left: 5px solid var(--green); }
.deep-lecture-intro p:last-child { font-size: 1.02rem; font-weight: 700; margin-bottom: 0; }
.subpart-deep-lecture .answer-template { background: #f7f4ff; }
.subpart-deep-lecture blockquote { border-left: 4px solid #6f5aa8; margin: 0; padding: 10px 14px; }
.subpart-deep-lecture .deep-mistakes { background: #fff6f2; }
.subpart-deep-lecture .deep-checks { background: #f8fbfd; }
.subpart-deep-lecture .absolute-beginner-start { background: #fffbea; }
.subpart-deep-lecture .slow-solution { background: #f2fbf7; }
.subpart-deep-lecture .beginner-final-answer { background: #eef6ff; border-left: 5px solid #2c6fa3; }
.beginner-term-list { display: grid; gap: 10px; margin: 0; }
.beginner-term { border: 1px solid var(--line); border-radius: 10px; display: grid; grid-template-columns: minmax(150px, 0.35fr) 1fr; overflow: hidden; }
.beginner-term dt { background: #edf5f6; font-weight: 850; padding: 10px 12px; }
.beginner-term dd { margin: 0; padding: 10px 12px; }
.deep-check-answers { border-top: 1px solid var(--line); padding: 14px 20px; }
.deep-check-answers > summary { color: var(--accent); cursor: pointer; font-weight: 800; }
@media (max-width: 640px) {
  .beginner-term { grid-template-columns: 1fr; }
}
.exam-widget { background: #f8fbfd; border-top: 1px solid var(--line); padding: 18px; }
.widget-heading { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.widget-heading h4 { color: var(--blue); font-size: 1.08rem; margin: 0; }
.widget-instruction { color: var(--muted); margin: 8px 0 14px; }
.widget-stage { min-width: 0; }
.widget-action, .widget-reset, .mini-action, .tab-action, .layer-node { background: #244e79; border: 1px solid #244e79; border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-weight: 800; padding: 7px 11px; }
.widget-reset { background: #fff; color: #244e79; }
.mini-action { min-width: 34px; padding: 4px 7px; }
.widget-action:hover, .widget-reset:hover, .mini-action:hover, .tab-action:hover, .layer-node:hover { filter: brightness(.94); }
.widget-action:focus-visible, .widget-reset:focus-visible, .mini-action:focus-visible, .tab-action:focus-visible, .layer-node:focus-visible, .flashcard:focus-visible { outline: 3px solid #e9b949; outline-offset: 2px; }
.widget-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.widget-feedback { border-radius: 6px; font-weight: 800; margin: 12px 0 0; min-height: 24px; padding: 7px 9px; }
.widget-feedback:empty { padding: 0; }
.widget-feedback[data-state="ok"] { background: #e9f6ef; color: #245a3d; }
.widget-feedback[data-state="error"] { background: #fff0ed; color: #8a3529; }
.widget-feedback[data-state="info"] { background: #edf3fb; color: #244e79; }
.order-widget { display: grid; gap: 7px; list-style-position: inside; margin: 0 0 10px; padding: 0; }
.order-row { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 7px; display: flex; gap: 8px; padding: 8px 10px; }
.order-label { flex: 1; font-weight: 800; }
.checklist-widget { display: grid; gap: 7px; }
.check-row { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 7px; display: flex; gap: 9px; padding: 9px; }
.check-row[data-state="ok"] { border-color: #79ac8c; }
.check-row[data-state="error"] { background: #fff4f1; border-color: #d69a90; }
.compare-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.tab-action { background: #fff; color: #244e79; }
.tab-action.active { background: #244e79; color: #fff; }
.compare-panel { background: #fff; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; padding: 14px; }
.layer-stack { display: grid; gap: 5px; max-width: 620px; }
.layer-node { background: #fff; border-color: #91a9c1; color: #244e79; min-height: 50px; }
.layer-node.active { background: #244e79; color: #fff; }
.layer-detail { background: #fff; border-left: 4px solid var(--blue); padding: 10px; }
.quiz-grid, .formula-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.quiz-row, .number-field { background: #fff; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 7px; padding: 10px; }
.quiz-row span, .number-field span { color: var(--muted); font-size: .84rem; font-weight: 800; }
.quiz-row select, .number-field input, .decoder-input input, .widget-stage > select { border: 1px solid #b9c8d7; border-radius: 6px; font: inherit; padding: 7px; width: 100%; }
select[data-state="ok"], input[data-state="ok"] { border-color: #58a06f; background: #eff9f2; }
select[data-state="error"], input[data-state="error"] { border-color: #c56d5f; background: #fff4f1; }
.formula-output { background: #102f3a; border-radius: 7px; color: #fff; display: block; font-family: var(--mono); margin-top: 10px; padding: 12px; }
.flashcard { background: #244e79; border: 0; border-radius: 12px; color: #fff; cursor: pointer; font: inherit; font-size: 1.35rem; font-weight: 900; min-height: 160px; padding: 24px; width: 100%; }
.flashcard.flipped { background: #28624b; }
.memory-cells { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.memory-cell { background: #fff; border: 1px solid var(--line); border-radius: 6px; font-family: var(--mono); padding: 14px 6px; text-align: center; }
.memory-cell.active { background: #fff1c7; border-color: #d6a52d; transform: translateY(-3px); }
.decoder-input { display: grid; gap: 5px; max-width: 360px; }
.bit-strip, .address-strip { display: flex; margin: 12px 0; overflow-x: auto; }
.bit-segment, .address-strip span { display: grid; min-width: max-content; padding: 8px; text-align: center; }
.bit-segment small, .address-strip small { font-weight: 900; }
.field-a, .address-tag { background: #fce8c8; }.field-b, .address-set { background: #d8ecf5; }.field-c { background: #e6def7; }.field-d, .address-offset { background: #dcefdc; }.field-e { background: #f7dadd; }
.decoder-result { background: #fff; border: 1px solid var(--line); border-radius: 7px; font-family: var(--mono); padding: 10px; }
.trace-progress { display: flex; gap: 4px; margin-bottom: 10px; overflow-x: auto; }
.trace-dot { align-items: center; background: #dbe5e9; border-radius: 999px; display: inline-flex; flex: 0 0 28px; height: 28px; justify-content: center; }
.trace-dot.active { background: #244e79; color: #fff; }
.trace-table { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.trace-cell { background: #fff; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 4px; padding: 9px; }
.trace-cell small { color: var(--muted); font-weight: 800; }
.stack-visual { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.stack-pointer { color: var(--rose); font-family: var(--mono); font-weight: 900; }
.stack-slots { display: grid; gap: 4px; margin-top: 8px; }
.stack-slot, .stack-empty { background: #edf3fb; border: 1px solid #c4d3e5; padding: 9px; text-align: center; }
.technical-svg { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: block; min-height: 220px; width: 100%; }
.diagram-edge { stroke: #9aaeb5; stroke-width: 3; }
.diagram-edge.active { stroke: #d18a00; stroke-width: 5; }
.arrow-head { fill: #9aaeb5; }
.diagram-node { cursor: pointer; }
.diagram-node rect { fill: #f7faf9; stroke: #55727a; stroke-width: 2; }
.diagram-node text { fill: #183a42; font-size: 14px; font-weight: 800; }
.diagram-node.active rect { fill: #fff1c7; stroke: #d18a00; stroke-width: 4; }
.control-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.control-chips span { background: #e9f6ef; border: 1px solid #b9d8c7; border-radius: 999px; font-family: var(--mono); padding: 4px 7px; }
.fsm-detail { align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 7px; margin-top: 8px; padding: 12px; }
.path-builder { display: grid; gap: 7px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.path-component { background: #fff; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 4px; padding: 9px; }
.pipeline-wrap { overflow-x: auto; }
.pipeline-table { min-width: 620px; }
.pipeline-table th, .pipeline-table td { min-width: 48px; text-align: center; }
.stage-cell { background: #dbeaf6; font-weight: 900; }.stall-cell { background: #ffe0d9; color: #8a3529; font-weight: 900; }
.address-strip span { flex: 1; }
.cache-access { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 7px; display: flex; flex-wrap: wrap; gap: 12px; min-height: 50px; padding: 10px; }
.cache-result { border-radius: 999px; font-weight: 900; padding: 5px 8px; }.cache-result.hit { background: #e9f6ef; color: #245a3d; }.cache-result.miss { background: #fff0ed; color: #8a3529; }
.cache-sets { display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin: 10px 0; }
.cache-set { background: #fff; border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 4px; padding: 9px; text-align: center; }
.cache-set.active { background: #fff1c7; border-color: #d6a52d; }
.solution-section summary { color: var(--green); cursor: pointer; font-size: 1.25rem; font-weight: 900; margin-bottom: 10px; }
.solution-section[open] summary { margin-bottom: 14px; }
.weakness-panel { border-top: 4px solid var(--rose); }
.weakness-summary { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 12px; }
.weakness-summary article { background: #fff7f5; border: 1px solid #ebd1cc; border-radius: var(--radius); padding: 12px; }
.weakness-summary strong { display: block; font-size: 1.5rem; }
.weakness-summary span { color: var(--muted); }
.weakness-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.weakness-card { background: #fbfcfc; border: 1px solid var(--line); border-left: 4px solid var(--rose); border-radius: var(--radius); padding: 14px; }
.weakness-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.weakness-card p { margin: 0 0 10px; }
.weakness-status { color: var(--rose); font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.weakness-card dl { display: grid; gap: 9px; margin: 0; }
.weakness-card div { border-top: 1px solid #dfe7e3; padding-top: 8px; }
.weakness-card dt { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.weakness-card dd { margin: 2px 0 0; }
.weakness-card ul { margin: 5px 0 0; padding-left: 20px; }
.weakness-empty { border-left-color: var(--green); }
.weakness-support { margin-top: 12px; }
.path-list { display: grid; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.path-list a { align-items: flex-start; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr); }
.path-list span { align-items: center; background: var(--accent); border-radius: 999px; color: #fff; display: inline-flex; font-weight: 800; height: 32px; justify-content: center; width: 32px; }
.path-list small, .concept-card small { color: var(--muted); display: block; font-size: .92rem; font-weight: 400; margin-top: 3px; }
.concept-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 12px; }
.concept-card { background: #fbfcfc; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); color: var(--ink); min-height: 126px; padding: 14px; text-decoration: none; }
.concept-card span { color: var(--accent-2); display: block; font-size: .76rem; font-weight: 800; margin-bottom: 6px; text-transform: uppercase; }
.concept-map { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 12px; }
.concept-map span { background: #eef6f5; border: 1px solid #c8dcda; border-radius: var(--radius); color: #10484d; font-weight: 800; min-height: 42px; padding: 9px 10px; text-align: center; }
.search-label { display: block; font-weight: 700; margin-bottom: 6px; }
input[type="search"] { border: 1px solid #bdcbc8; border-radius: var(--radius); font: inherit; max-width: 520px; padding: 9px 11px; width: 100%; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
ul { padding-left: 22px; }
li { margin: 6px 0; }
code, pre { background: var(--code); border: 1px solid #dbe3df; border-radius: 5px; font-family: var(--mono); }
code { padding: .08em .3em; }
pre { max-height: 360px; overflow: auto; padding: 12px; white-space: pre-wrap; word-break: break-word; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; min-width: 1060px; width: 100%; }
th, td { border: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
th { background: #eef4f2; }
.source-browser { list-style: none; padding: 0; }
.source-browser li { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; }
.source-browser code { overflow-wrap: anywhere; }
.source-browser span { color: var(--muted); font-size: .9rem; }
.grounding-level { color: var(--accent-2); font-weight: 800; }
@media (max-width: 860px) { .today-layout { grid-template-columns: 1fr; } .exam-status-list { columns: 1; } .subpart-content-grid, .subpart-guide-grid { grid-template-columns: 1fr; } .subpart-content + .subpart-content, .subpart-guide:nth-child(even) { border-left: 0; border-top: 1px solid var(--line); } .subpart-guide:nth-child(n+2) { border-top: 1px solid #eadfca; } }
@media (max-width: 720px) { main { padding: 18px 12px 48px; } h1 { font-size: 2rem; } .panel { padding: 16px; } .cache-sets, .memory-cells { grid-template-columns: repeat(2, 1fr); } .widget-heading { display: grid; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

.concept-hero { border-bottom: 1px solid var(--line); margin-bottom: 12px; padding-bottom: 18px; }
.home-link { display: inline-block; font-weight: 700; margin-bottom: 14px; }
.concept-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.concept-nav a { background: #eef6f5; border: 1px solid #c8dcda; border-radius: var(--radius); color: #10484d; font-size: .92rem; font-weight: 700; padding: 6px 9px; text-decoration: none; }
.concept-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lecture { border-left: 5px solid var(--accent); }
.lecture h2 { font-size: 1.6rem; margin-top: 0; }
.lecture h3 { border-top: 1px solid var(--line); font-size: 1.22rem; margin-top: 26px; padding-top: 18px; }
.lecture h4 { color: var(--accent); font-size: 1.05rem; margin: 18px 0 8px; }
.lecture p { max-width: 920px; }
.lecture li { margin: 8px 0; max-width: 920px; }
.lecture-code { max-height: 520px; white-space: pre; word-break: normal; }
.lecture-table { min-width: 620px; }
.recall-answer { background: #f3f8f6; border: 1px solid #c8dcda; border-radius: 7px; margin-top: 8px; padding: 0 10px; }
.recall-answer summary { color: var(--accent); cursor: pointer; font-weight: 800; padding: 8px 0; }
.recall-answer p { margin: 0 0 10px; }
.example-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mini-example { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); margin: 0; padding: 14px; }
.mini-example h3 { color: var(--accent); font-size: 1rem; margin: 0 0 8px; }
.mini-example p { margin: 0; }
.practice li { background: #f8fbfa; border: 1px solid var(--line); border-radius: var(--radius); list-style: none; margin: 8px 0; padding: 10px; }
.practice ul { padding-left: 0; }
.warn { border-left: 4px solid var(--rose); }
.source-list code { overflow-wrap: anywhere; }
.grounded-source-list { list-style: none; padding-left: 0; }
.grounded-source-list li { border-top: 1px solid var(--line); display: grid; gap: 5px; margin: 0; padding: 10px 0; }
.grounded-source-list li:first-child { border-top: 0; padding-top: 0; }
.grounded-source-list strong { color: var(--accent); }
.grounded-source-list span { color: var(--muted); font-size: .92rem; }
.visual-panel { background: #fbfdfc; }
.caption { color: var(--muted); font-size: .92rem; margin: 10px 0 0; }
.exam-prep { border-top: 4px solid var(--green); }
.exam-prep-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.exam-prep-grid article, .completion-check {
  background: #fbfcfc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.exam-prep-grid h3, .completion-check h3 { color: var(--green); font-size: 1rem; margin-bottom: 8px; }
.exam-prep-grid p { margin: 0 0 8px; }
.term-checklist, .related-ubung { list-style: none; padding-left: 0; }
.term-checklist li, .related-ubung li { border-top: 1px solid #dfe7e3; margin: 0; padding: 8px 0; }
.term-checklist li:first-child, .related-ubung li:first-child { border-top: 0; padding-top: 0; }
.term-checklist span, .related-ubung span { color: var(--muted); display: block; font-size: .92rem; margin-top: 3px; }
.completion-check { margin-top: 12px; }
.glossary-list, .method-list { display: grid; gap: 9px; list-style: none; padding: 0; }
.glossary-list li, .method-list li { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.glossary-list strong, .method-list strong { color: var(--accent); display: block; margin-bottom: 4px; }
.glossary-list span, .method-list span { color: #2d383a; display: block; }
.visual-scroll { max-width: 100%; overflow-x: auto; }
.bitfield, .bit-row, .byte-lane, .flow, .formula-panel, .state-board, .stack-diagram { display: grid; gap: 8px; }
.bitfield { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.bitfield span, .bit-row span, .byte-lane b, .flow span, .formula-panel code, .state-board span, .stack-diagram span {
  background: #eef6f5;
  border: 1px solid #c7ddda;
  border-radius: var(--radius);
  color: #173f43;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 10px;
  text-align: center;
}
.bit-row { grid-template-columns: repeat(8, minmax(54px, 1fr)); overflow-x: auto; }
.byte-lane { align-items: center; grid-template-columns: minmax(130px, 1.5fr) repeat(4, minmax(54px, 1fr)); }
.byte-lane span { color: var(--muted); font-weight: 700; }
.flow { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.flow span::after { color: var(--accent); content: " ->"; }
.flow span:last-child::after { content: ""; }
.formula-panel { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.state-board { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.stack-diagram { margin: 0 auto; max-width: 420px; }
.stack-diagram span { display: block; }
.bitfield-diagram, .cache-split {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(32, minmax(16px, 1fr));
  min-width: 720px;
}
.bitfield-diagram span, .bitfield-diagram strong, .cache-split span, .cache-split strong {
  background: #eef6f5;
  border: 1px solid #c7ddda;
  border-radius: 5px;
  color: #173f43;
  min-height: 34px;
  padding: 6px 8px;
  text-align: center;
}
.bitfield-diagram strong, .cache-split strong { align-items: center; display: flex; font-weight: 800; justify-content: center; }
.bit-range { color: var(--muted); font-family: var(--mono); font-size: .78rem; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: span 12; }
.span-17 { grid-column: span 17; }
.stack-frame-visual { display: grid; gap: 6px; margin: 0 auto; max-width: 520px; }
.stack-frame-visual span {
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 10px;
  text-align: center;
}
.stack-frame-visual .addr { background: #f1f4f3; color: var(--muted); font-size: .86rem; font-weight: 800; }
.stack-frame-visual .saved { background: #eef6f5; }
.stack-frame-visual .locals { background: #f8f5ec; }
.stack-frame-visual .caller { background: #f7faf9; }
.control-table { min-width: 760px; table-layout: fixed; }
.control-table th, .control-table td { overflow-wrap: anywhere; }
.fsm-board { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); margin-bottom: 12px; }
.fsm-board span {
  background: #eef6f5;
  border: 1px solid #c7ddda;
  border-radius: var(--radius);
  color: #173f43;
  font-weight: 800;
  min-height: 58px;
  padding: 9px 10px;
  text-align: center;
}
.fsm-board small { color: var(--muted); display: block; font-weight: 700; margin-top: 3px; }
.pipeline-mini { display: grid; gap: 4px; grid-template-columns: 90px repeat(6, minmax(54px, 1fr)); overflow-x: auto; }
.pipeline-grid { display: grid; gap: 4px; grid-template-columns: 150px repeat(7, minmax(54px, 1fr)); min-width: 650px; }
.pipeline-mini span, .pipeline-mini b, .pipeline-mini strong, .pipeline-grid span, .pipeline-grid b, .pipeline-grid strong {
  background: #f1f4f3;
  border: 1px solid var(--line);
  border-radius: 5px;
  min-height: 32px;
  padding: 6px 8px;
  text-align: center;
}
.pipeline-mini strong, .pipeline-grid strong { background: #e8f0ef; color: var(--accent); }
.pipeline-grid .stall { background: #fff2cf; border-color: #e4c46b; color: #6b4d00; font-weight: 800; }
.interactive-panel { border-top: 4px solid var(--blue); }
.interactive-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.interactive-heading h2 { margin-bottom: 5px; }
.lab-status { background: #e8f0ef; border: 1px solid #c8dcda; border-radius: 999px; color: var(--accent); font-size: .76rem; font-weight: 800; padding: 5px 9px; text-transform: uppercase; }
.interactive-lab-root { display: grid; gap: 14px; margin-top: 14px; }
.lab-controls { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lab-controls label { color: var(--muted); display: grid; font-size: .86rem; font-weight: 800; gap: 5px; text-transform: uppercase; }
.lab-controls input, .lab-controls select, .lab-controls button, .lab-controls textarea {
  border: 1px solid #bdcbc8;
  border-radius: var(--radius);
  font: inherit;
  min-height: 40px;
  padding: 8px 10px;
}
.lab-controls textarea { font-family: var(--mono); min-height: 110px; resize: vertical; }
.weak-preview {
  border: 1px solid #dbe3df;
  border-radius: var(--radius);
  font-family: var(--mono);
  min-height: 96px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}
.lab-controls button { background: var(--accent); color: #fff; cursor: pointer; font-weight: 800; }
.lab-controls input[type="checkbox"] { min-height: auto; width: auto; }
.lab-output { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lab-card { background: #fbfcfc; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.lab-card h3 { color: var(--accent); font-size: 1rem; margin-bottom: 8px; }
.lab-card p { margin: 0 0 8px; }
.lab-card code { display: inline-block; margin: 2px 0; overflow-wrap: anywhere; }
.lab-bits { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); }
.lab-bits span { background: #eef6f5; border: 1px solid #c7ddda; border-radius: 5px; font-family: var(--mono); font-weight: 800; min-height: 34px; padding: 6px; text-align: center; }
.lab-bits .hot, .lab-grid .hot { background: #fff2cf; border-color: #e4c46b; color: #6b4d00; }
.lab-grid { display: grid; gap: 4px; overflow-x: auto; }
.lab-grid span, .lab-grid strong { background: #f1f4f3; border: 1px solid var(--line); border-radius: 5px; min-height: 32px; padding: 6px 8px; text-align: center; }
.lab-grid strong { background: #e8f0ef; color: var(--accent); }
.pipe-cell {
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  min-height: 32px;
  min-width: 68px;
  padding: 6px 7px;
  text-align: center;
}
.pipe-cell.hot { background: #fff2cf; border-color: #e4c46b; color: #6b4d00; font-weight: 800; }
.lab-stack { display: grid; gap: 6px; margin: 0 auto; max-width: 520px; }
.lab-stack span { border: 1px solid var(--line); border-radius: 6px; min-height: 36px; padding: 8px; text-align: center; }
.lab-stack .sp { background: #fff2cf; border-color: #e4c46b; }
.lab-stack .saved { background: #eef6f5; }
.lab-stack .local { background: #f8f5ec; }
.lab-flow { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.lab-flow span { background: #eef6f5; border: 1px solid #c7ddda; border-radius: var(--radius); color: #173f43; font-weight: 800; padding: 9px; text-align: center; }
.lab-flow .active { background: var(--accent); border-color: var(--accent); color: #fff; }
.signal-list { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.signal-list span { background: #f7faf9; border: 1px solid var(--line); border-radius: 5px; font-family: var(--mono); padding: 7px; text-align: center; }
.signal-list .on { background: #eef6f5; border-color: #b9d4d0; color: var(--accent); font-weight: 800; }
@media (max-width: 720px) { .interactive-heading { display: block; } .lab-status { display: inline-block; margin-top: 8px; } }