:root{
  --cs-navy:#18181b; --cs-blue:#3f3f46; --cs-cyan:#52525b; --cs-teal:#27272a;
  --cs-green:#3f3f46; --cs-amber:#71717a; --cs-red:#27272a; --cs-purple:#52525b;
  --cs-ink:#27272a; --cs-muted:#71717a; --cs-line:#d4d4d8; --cs-soft:#fafafa; --cs-white:#fff;
  --cs-shadow:0 14px 34px rgba(24,24,27,.10);
}

/* Computer Science subject theme: Zinc */
body > header{background-color:#27272a}
.global-site-nav{background:#f4f4f5;border-bottom-color:#d4d4d8}
.global-site-nav a{color:#27272a}
.global-site-nav a:hover,.global-site-nav a:focus{background:#fff}
.global-site-nav .subject-menu{border-color:#d4d4d8}
.breadcrumb-nav{background:#fafafa;border-bottom-color:#e4e4e7}
.breadcrumb-nav a{color:#3f3f46}
html{scroll-behavior:smooth;scroll-padding-top:18px}
.cs-home,.cs-page{max-width:1160px;margin:0 auto;padding:20px 16px 58px;color:var(--cs-ink)}
.cs-hero{background:linear-gradient(135deg,#09090b 0%,#27272a 58%,#52525b 130%);border-radius:28px;padding:34px;color:#fff;box-shadow:0 20px 48px rgba(9,9,11,.24);position:relative;overflow:hidden;margin:18px 0 24px}
.cs-hero:after{content:"01";position:absolute;right:24px;bottom:-40px;font:900 180px/1 system-ui;color:rgba(255,255,255,.06);letter-spacing:-.08em}
.cs-hero .eyebrow{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);padding:7px 12px;border-radius:999px;font-weight:850;font-size:.86rem}
.cs-hero h2{font-size:clamp(2.1rem,5vw,3.55rem);line-height:1.04;margin:14px 0 12px;color:#fff;max-width:890px}
.cs-hero p{font-size:1.07rem;line-height:1.75;color:#f4f4f5;max-width:910px;position:relative;z-index:1}
.cs-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}.cs-badges span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:7px 10px;border-radius:999px;font-size:.86rem;font-weight:800}
.cs-intro-card,.cs-toc-intro{background:#fff;border:1px solid var(--cs-line);border-radius:20px;padding:21px;box-shadow:var(--cs-shadow);margin:18px 0}
.cs-intro-card p,.cs-toc-intro p{line-height:1.75;color:#52525b}
.cs-jump{background:linear-gradient(180deg,#fafafa,#f4f4f5);border:1px solid #d4d4d8;border-radius:20px;padding:20px;margin:18px 0 24px;box-shadow:0 8px 24px rgba(39,39,42,.07)}
.cs-jump h3{margin:0 0 12px;color:var(--cs-navy)}
.cs-jump-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:9px}.cs-jump a{display:flex;gap:9px;align-items:flex-start;background:#fff;border:1px solid #e4e4e7;border-radius:13px;padding:11px 12px;text-decoration:none;color:#3f3f46;font-weight:800;line-height:1.35}.cs-jump a:hover{border-color:#a1a1aa;transform:translateY(-1px)}
.cs-section{background:#fff;border:1px solid var(--cs-line);border-radius:22px;padding:24px;margin:22px 0;box-shadow:var(--cs-shadow)}
.cs-section h2{font-size:clamp(1.45rem,3vw,2rem);color:var(--cs-navy);margin:.1rem 0 10px}.cs-section h3{color:#3f3f46;margin-top:24px}.cs-section p,.cs-section li{line-height:1.72}.cs-section ul,.cs-section ol{padding-left:1.35rem}.cs-section li{margin:.35rem 0}
.section-kicker{display:inline-block;background:#f4f4f5;color:#3f3f46;border:1px solid #d4d4d8;border-radius:999px;padding:5px 10px;font-size:.8rem;font-weight:900;margin-bottom:7px}
.key-point{background:#fafafa;border:1px solid #e4e4e7;border-left:6px solid var(--cs-cyan);border-radius:14px;padding:15px 16px;margin:15px 0}.exam-tip{background:#f4f4f5;border:1px solid #d4d4d8;border-left:6px solid #71717a;border-radius:14px;padding:15px 16px;margin:15px 0}.warning-box{background:#fafafa;border:1px solid #d4d4d8;border-left:6px solid var(--cs-red);border-radius:14px;padding:15px 16px;margin:15px 0}.remember-box{background:#f4f4f5;border:1px solid #d4d4d8;border-left:6px solid var(--cs-green);border-radius:14px;padding:15px 16px;margin:15px 0}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#18181b;color:#f4f4f5;border-radius:12px;padding:13px 14px;overflow:auto;margin:12px 0}.binary{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;font-weight:800}
.cs-table-wrap{overflow:auto;margin:16px 0;border:1px solid var(--cs-line);border-radius:15px}.cs-table{border-collapse:collapse;width:100%;min-width:520px;background:#fff}.cs-table th{background:var(--cs-navy);color:#fff;padding:11px;text-align:left}.cs-table td{padding:10px 11px;border-top:1px solid #e4e4e7}.cs-table tr:nth-child(even) td{background:#fafafa}.cs-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.method-grid,.use-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:13px;margin:15px 0}.method-card,.use-card{background:#fafafa;border:1px solid #e4e4e7;border-radius:15px;padding:15px}.method-card h4,.use-card h4{margin:.05rem 0 .45rem;color:#27272a}.use-card.error{border-top:5px solid #27272a}.use-card.network{border-top:5px solid #52525b}.use-card.web{border-top:5px solid #71717a}
.worked{border:1px solid #d4d4d8;border-radius:15px;overflow:hidden;margin:15px 0}.worked h4{margin:0;background:#f4f4f5;color:#27272a;padding:10px 13px}.worked .body{padding:14px}.worked .steps{margin:8px 0}
.book-figure{margin:18px auto;max-width:900px;background:#fff;border:1px solid #d4d4d8;border-radius:16px;padding:12px;box-shadow:0 8px 22px rgba(24,24,27,.08)}.book-figure img{display:block;max-width:100%;height:auto;margin:auto}.book-figure figcaption{font-size:.86rem;color:#71717a;line-height:1.45;margin-top:8px;text-align:center}
.practice-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fafafa;border:1px dashed #d4d4d8;border-radius:14px;padding:13px 14px;margin-top:20px}.practice-row strong{margin-right:auto;color:#3f3f46}.practice-trigger{border:0;background:#3f3f46;color:#fff;font-weight:900;border-radius:11px;padding:10px 14px;cursor:pointer;box-shadow:0 6px 16px rgba(39,39,42,.18)}.practice-trigger:hover{background:#27272a}.practice-trigger.final{background:#27272a}.practice-trigger.final:hover{background:#18181b}
.cs-checklist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.cs-checklist div{background:#fafafa;border:1px solid #e4e4e7;border-radius:13px;padding:12px}.cs-checklist div:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#3f3f46;color:#fff;font-weight:900;margin-right:8px}
.final-panel{background:linear-gradient(135deg,#f4f4f5,#fafafa);border:1px solid #d4d4d8;border-radius:22px;padding:24px;margin:24px 0;box-shadow:var(--cs-shadow)}.final-panel h2{margin-top:0;color:#27272a}
.cs-page-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:28px 0}.cs-page-nav a{background:#fff;border:1px solid #d4d4d8;border-radius:13px;padding:10px 14px;text-decoration:none;font-weight:850;color:#3f3f46}
/* TOC */
.cs-section-band{background:linear-gradient(90deg,#18181b,#3f3f46);color:#fff;border-radius:18px;padding:15px 18px;margin:24px 0 12px}.cs-section-band h2{margin:0;color:#fff;font-size:1.35rem}.cs-section-band p{margin:.3rem 0 0;color:#e4e4e7}
.cs-chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px}.cs-chapter-card{background:#fff;border:1px solid var(--cs-line);border-top:6px solid #3f3f46;border-radius:18px;padding:18px;box-shadow:0 10px 26px rgba(24,24,27,.07)}.cs-chapter-card h3{color:var(--cs-navy);margin:.1rem 0 8px}.cs-topic-list{list-style:none;padding:0;margin:10px 0 0}.cs-topic-list li{margin:7px 0}.cs-topic-list a,.cs-topic-list span{display:block;border-radius:10px;padding:9px 10px;text-decoration:none}.cs-topic-list a{background:#f4f4f5;color:#3f3f46;font-weight:850;border:1px solid #d4d4d8}.cs-topic-list a:hover{background:#e4e4e7}.cs-topic-list span{background:#fafafa;color:#71717a;border:1px solid #e4e4e7}.live-pill{display:inline-block;background:#f4f4f5;color:#3f3f46;border:1px solid #d4d4d8;border-radius:999px;font-weight:900;font-size:.78rem;padding:4px 8px}
/* Quiz modal */
.quiz-overlay{position:fixed;inset:0;background:rgba(9,9,11,.76);display:none;align-items:center;justify-content:center;padding:18px;z-index:99999}.quiz-overlay.open{display:flex}.quiz-modal{width:min(760px,100%);max-height:min(88vh,850px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.35);position:relative}.quiz-head{position:sticky;top:0;z-index:2;background:#18181b;color:#fff;padding:16px 54px 14px 18px;border-radius:20px 20px 0 0}.quiz-head h2{font-size:1.25rem;margin:0 0 4px;color:#fff}.quiz-head p{margin:0;color:#d4d4d8;font-size:.9rem}.quiz-close{position:absolute;right:13px;top:11px;width:36px;height:36px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.35rem;cursor:pointer}.quiz-body{padding:20px}.quiz-progress{font-size:.84rem;font-weight:850;color:#71717a;margin-bottom:9px}.quiz-question{font-size:1.08rem;line-height:1.55;font-weight:850;color:#27272a;margin:8px 0 14px}.quiz-options{display:grid;gap:9px}.quiz-option{display:flex;gap:9px;align-items:flex-start;border:1px solid #e4e4e7;background:#fafafa;border-radius:12px;padding:11px;cursor:pointer}.quiz-option:hover{border-color:#a1a1aa}.quiz-option input{margin-top:4px}.quiz-short{width:100%;font:inherit;padding:11px 12px;border:1px solid #d4d4d8;border-radius:11px}.quiz-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}.quiz-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}.quiz-check{background:#3f3f46;color:#fff}.quiz-next{background:#27272a;color:#fff}.quiz-feedback{display:none;margin-top:15px;border-radius:13px;padding:13px 14px;line-height:1.6}.quiz-feedback.show{display:block}.quiz-feedback.correct{background:#ecfdf3;border:1px solid #a6f4c5;color:#075e3c}.quiz-feedback.incorrect{background:#fff4ed;border:1px solid #ffd6ae;color:#7a2e0e}.quiz-result{text-align:center;padding:10px 0 2px}.quiz-result .score{font-size:2rem;font-weight:950;color:#27272a}
@media(max-width:720px){.cs-home,.cs-page{padding:12px 10px 42px}.cs-hero,.cs-section,.final-panel{padding:19px}.cs-hero:after{font-size:110px}.cs-jump-grid{grid-template-columns:1fr}.cs-chapter-grid{grid-template-columns:1fr}.cs-table{font-size:.9rem}.book-figure{padding:7px}.quiz-overlay{padding:8px}.quiz-body{padding:16px}.practice-row{align-items:stretch}.practice-trigger{width:100%}}
.cs-page.topic-12 .cs-hero:after{content:"1.2"}

.cs-page.topic-13 .cs-hero:after{content:"1.3"}

.cs-page.topic-34 .cs-hero:after{content:"3.4"}