.topbar-actions{display:flex;align-items:center;gap:25px}.theme-toggle{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:7px;background:var(--paper);padding:7px 11px;font-size:10px;color:#718266;min-height:32px}.theme-toggle svg{width:15px;height:15px}.theme-toggle:hover{border-color:#8da478}.theme-toggle:focus-visible{outline:3px solid #8da478;outline-offset:3px}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark;--bg:#141c17;--paper:#1d2820;--ink:#deead7;--muted:#a7b39c;--line:#34432e;--green:#a3c683;--lime:#3b522e;--dark:#142f29}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .layer-detail,
html[data-theme="dark"] .journey-card,
html[data-theme="dark"] .lab-panel,
html[data-theme="dark"] .quiz-card,
html[data-theme="dark"] .cheat-sheet,
html[data-theme="dark"] .quiz-option,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .secondary{background:var(--paper);color:var(--ink)}
html[data-theme="dark"] input,
html[data-theme="dark"] select{border-color:#4b5e41}
html[data-theme="dark"] .primary{background:#c1dfa1;color:#203b16}
html[data-theme="dark"] .primary:hover{background:#d3edb8}
html[data-theme="dark"] .nav-item.active{background:#2b3d25;color:#cae4b0}
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .icon-button:hover{background:#2d4026;color:#cde5b8}
html[data-theme="dark"] .highlight::after{background:#435f2c}
html[data-theme="dark"] .nav-count{background:#3e5432;color:#c6dfaf}
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .journey-progress,
html[data-theme="dark"] .quiz-meter{background:#30412a}
html[data-theme="dark"] .strip-icon,
html[data-theme="dark"] .layer-list,
html[data-theme="dark"] .segmented,
html[data-theme="dark"] .detail-badge,
html[data-theme="dark"] .protocol-chips span,
html[data-theme="dark"] .note,
html[data-theme="dark"] .packet-envelope span,
html[data-theme="dark"] .packet-icon,
html[data-theme="dark"] .binary-box,
html[data-theme="dark"] .ipv6-anatomy,
html[data-theme="dark"] .protocol-detail,
html[data-theme="dark"] .memory-note,
html[data-theme="dark"] .terminal,
html[data-theme="dark"] .dora-explanation{background:#23321f;border-color:#3b4d32}
html[data-theme="dark"] .layer-button:hover{background:#2a3c23}
html[data-theme="dark"] .layer-button[aria-selected="true"],
html[data-theme="dark"] .segmented button.selected,
html[data-theme="dark"] .dora-step.selected,
html[data-theme="dark"] .protocol-picker button.selected{background:#354d29;border-color:#6c8c51;color:#d8edc4}
html[data-theme="dark"] .layer-badge{background:#394332;color:#e0e5d9;border-color:#5e6e50}
html[data-theme="dark"] .mini-layer,
html[data-theme="dark"] .dora-step,
html[data-theme="dark"] .protocol-picker button,
html[data-theme="dark"] th,
html[data-theme="dark"] .result-cell{background:#202e21;border-color:#3b4a33;color:#b4c7a2}
html[data-theme="dark"] .mini-layer.current{background:#3a542b;border-color:#89aa67;color:#e0efcf}
html[data-theme="dark"] .result-grid{background:#3c4c32;border-color:#3c4c32}
html[data-theme="dark"] .bit{background:#354c2b;color:#d1e6bb}
html[data-theme="dark"] .bit.host{background:#514a2a;color:#e6dba7}
html[data-theme="dark"] .example-box{background:#304326;border-left-color:#91af70;color:#c2d5ae}
html[data-theme="dark"] .lab-watermark{color:#35472c}
html[data-theme="dark"] .detail-tabs,
html[data-theme="dark"] .detail-neighbors,
html[data-theme="dark"] td{border-color:#33452c}
html[data-theme="dark"] .detail-tabs button.selected,
html[data-theme="dark"] .lab-tabs button.selected{color:#c0dfa5;border-color:#a0c381}
html[data-theme="dark"] .quiz-option:hover:not(:disabled){background:#2b3e24}
html[data-theme="dark"] .quiz-option.correct{background:#334e25;border-color:#83ae5e;color:#d1e8bc}
html[data-theme="dark"] .quiz-option.wrong{background:#4a3026;border-color:#b07a5d;color:#edc7b1}
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .section-heading p:not(.eyebrow),
html[data-theme="dark"] .layer-detail .detail-copy,
html[data-theme="dark"] .function-list li,
html[data-theme="dark"] .journey-center p,
html[data-theme="dark"] .lab-intro p,
html[data-theme="dark"] .concept-grid p,
html[data-theme="dark"] .protocol-detail p,
html[data-theme="dark"] .quiz-feedback,
html[data-theme="dark"] .quiz-result>p,
html[data-theme="dark"] .cheat-bottom p,
html[data-theme="dark"] .memory-note p,
html[data-theme="dark"] td,
html[data-theme="dark"] .dora-explanation,
html[data-theme="dark"] .ipv6-anatomy,
html[data-theme="dark"] .terminal,
html[data-theme="dark"] .note,
html[data-theme="dark"] .learn-more{color:#aebe9f}
html[data-theme="dark"] .note strong,
html[data-theme="dark"] .ipv6-anatomy strong,
html[data-theme="dark"] .cheat-bottom b,
html[data-theme="dark"] .cheat-table td:first-child,
html[data-theme="dark"] .memory-note strong,
html[data-theme="dark"] .dora-explanation h4,
html[data-theme="dark"] .dora-explanation code,
html[data-theme="dark"] .quiz-feedback strong,
html[data-theme="dark"] .compare-row .good{color:#c4e2a8}
html[data-theme="dark"] .compare-row .bad,
html[data-theme="dark"] .form-error{color:#e2aa86}
html[data-theme="dark"] .topbar strong{color:#adbf9c}
html[data-theme="dark"] .hero-meta,
html[data-theme="dark"] .learning-strip p>span,
html[data-theme="dark"] .layer-button small,
html[data-theme="dark"] .result-cell>span,
html[data-theme="dark"] .result-cell small,
html[data-theme="dark"] .binary-box>p,
html[data-theme="dark"] .detail-neighbors,
html[data-theme="dark"] .quiz-bottom small,
html[data-theme="dark"] .journey-footnote,
html[data-theme="dark"] .sidebar-bottom,
html[data-theme="dark"] .progress-box p,
html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .theme-toggle{color:#9bad8a}
html[data-theme="dark"] .switch-chassis select{background:#314d3b;color:#c8dab8;border-color:#50674a}
html[data-theme="dark"] .inline-note{background:transparent}
@media(max-width:760px){.topbar-actions{gap:12px}.theme-toggle{font-size:9px;padding:6px 8px}.theme-toggle svg{width:13px;height:13px}}
@media(max-width:380px){.topbar-link{display:none}.topbar-actions{gap:0}}
@media print{html[data-theme="dark"]{color-scheme:light;--ink:#111;--line:#ccc;--bg:#fff}html[data-theme="dark"] .cheat-sheet,html[data-theme="dark"] .memory-note,html[data-theme="dark"] th,html[data-theme="dark"] td{background:#fff!important;border-color:#ccc!important}#spickzettel *{color:#222!important}.theme-toggle{display:none!important}}