@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Sora:wght@400;600;700;800&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}img,svg{max-width:100%;display:block}button{cursor:pointer;font:inherit;background:0 0;border:none}ul,ol{list-style:none}:root{--bg-primary:#f8f7f4;--bg-secondary:#eeecea;--text-primary:#1a1a1a;--text-secondary:#5c5c5c;--accent:#2a5fa5;--accent-light:#4a7fc5;--accent-bg:#e8f0fb;--success:#2d7a3a;--success-bg:#e8f5ea;--error:#b91c1c;--error-bg:#fef2f2;--warning:#b45309;--warning-bg:#fffbeb;--border:#d4d0cb;--shadow:#00000014;--diagram-node-fill:#dce8f8;--diagram-node-stroke:#2a5fa5;--diagram-hub-fill:#2a5fa5;--diagram-hub-text:#fff;--diagram-link:#9ab4d8;--diagram-packet:#e85d04;--diagram-label:#1a1a1a;--diagram-bg:#f0f4fb;--diagram-dashed:#c8d8ee;--logical-accent:#7c3aed;--physical-accent:#0369a1;--navbar-height:60px;--page-max-width:1200px;--section-gap:2rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--transition-fast:.15s ease;--transition-med:.25s ease}[data-theme=dark]{--bg-primary:#141414;--bg-secondary:#1f1f1f;--text-primary:#f0ede8;--text-secondary:#a0a0a0;--accent:#5b9bd5;--accent-light:#7ab8f5;--accent-bg:#1a2a3a;--success:#4ade80;--success-bg:#052e16;--error:#f87171;--error-bg:#450a0a;--warning:#fbbf24;--warning-bg:#451a03;--border:#333;--shadow:#0000004d;--diagram-node-fill:#1e2f46;--diagram-node-stroke:#5b9bd5;--diagram-hub-fill:#5b9bd5;--diagram-hub-text:#141414;--diagram-link:#3a5070;--diagram-packet:#fb923c;--diagram-label:#f0ede8;--diagram-bg:#1a2030;--diagram-dashed:#2a3a50;--logical-accent:#a78bfa;--physical-accent:#38bdf8}body{background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:DM Sans,system-ui,sans-serif;line-height:1.6}h1,h2,h3,h4{color:var(--text-primary);font-family:Sora,sans-serif;line-height:1.2}h1{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700}h2{font-size:clamp(1.25rem,2.5vw,1.75rem);font-weight:700}h3{font-size:clamp(1.1rem,2vw,1.375rem);font-weight:600}h4{font-size:1.05rem;font-weight:600}p{color:var(--text-secondary);line-height:1.7}code,.code-label{background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border);padding:.1em .35em;font-family:Courier New,Courier,monospace;font-size:.875em}.container{max-width:var(--page-max-width);margin:0 auto;padding:0 1.25rem}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.navbar{height:var(--navbar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);box-shadow:0 2px 8px var(--shadow);z-index:100;position:fixed;top:0;left:0;right:0}.navbar__inner{max-width:var(--page-max-width);justify-content:space-between;align-items:center;gap:1rem;height:100%;margin:0 auto;padding:0 1.25rem;display:flex}.navbar__logo{color:var(--accent);letter-spacing:-.02em;white-space:nowrap;font-family:Sora,sans-serif;font-size:1.1rem;font-weight:800}.navbar__logo span{color:var(--text-secondary);font-size:.8em;font-weight:400}.navbar__nav{align-items:center;gap:.5rem;display:flex}.navbar__btn{border-radius:var(--radius-md);color:var(--text-secondary);transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);background:0 0;border:2px solid #0000;padding:.45rem 1.1rem;font-family:Sora,sans-serif;font-size:.9rem;font-weight:600}.navbar__btn:hover{color:var(--accent);background:var(--accent-bg)}.navbar__btn--active{color:var(--accent);background:var(--accent-bg);border-color:var(--accent)}.navbar__theme-btn{width:38px;height:38px;color:var(--text-secondary);border:1px solid var(--border);background:var(--bg-primary);transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;margin-left:.5rem;font-size:1.15rem;display:flex}.navbar__theme-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)}.page-content{padding-top:calc(var(--navbar-height) + 2rem);min-height:100vh;padding-bottom:4rem}.teaching-section{max-width:var(--page-max-width);margin:0 auto;padding:0 1.25rem}.teaching-section__controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.teaching-section__counter{color:var(--text-secondary);font-family:Sora,sans-serif;font-size:.9rem;font-weight:600}.teaching-section__nav-btns{align-items:center;gap:.5rem;display:flex}.btn-nav{border-radius:var(--radius-md);color:var(--accent);border:2px solid var(--accent);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;align-items:center;gap:.4rem;padding:.5rem 1.25rem;font-family:Sora,sans-serif;font-size:.9rem;font-weight:600;display:inline-flex}.btn-nav:hover:not(:disabled){background:var(--accent);color:#fff}.btn-nav:disabled{opacity:.35;cursor:not-allowed}.slide-wrapper{position:relative}.slide-enter{opacity:0;transform:translateY(10px)}.slide-visible{opacity:1;transform:translateY(0)}.topology-slide{grid-template-columns:1fr 1.2fr;grid-template-areas:"diagram heading""diagram description""diagram features""advantages advantages""disadvantages disadvantages""applications applications";align-items:start;gap:1.5rem 2rem;display:grid}.topology-slide__heading{grid-area:heading}.topology-slide__diagram{background:var(--diagram-bg);border-radius:var(--radius-lg);border:1px solid var(--border);grid-area:diagram;justify-content:center;align-items:center;min-height:280px;padding:1rem;display:flex}.topology-slide__description{grid-area:description}.topology-slide__features{grid-area:features}.topology-slide__advantages{border-left:4px solid var(--success);background:var(--success-bg);border-radius:0 var(--radius-md) var(--radius-md) 0;grid-area:advantages;padding:1rem 1.25rem}.topology-slide__advantages h4{color:var(--success);margin-bottom:.5rem}.topology-slide__disadvantages{border-left:4px solid var(--error);background:var(--error-bg);border-radius:0 var(--radius-md) var(--radius-md) 0;grid-area:disadvantages;padding:1rem 1.25rem}.topology-slide__disadvantages h4{color:var(--error);margin-bottom:.5rem}.topology-slide__applications{background:var(--accent-bg);border-radius:var(--radius-md);border:1px solid var(--border);grid-area:applications;padding:1rem 1.25rem}.topology-slide__applications h4{color:var(--accent);margin-bottom:.5rem}.feature-list{flex-direction:column;gap:.4rem;display:flex}.feature-list li{color:var(--text-secondary);padding-left:1.25rem;font-size:.93rem;line-height:1.5;position:relative}.feature-list li:before{content:"▸";color:var(--accent);font-size:.75em;position:absolute;top:.25em;left:0}.feature-list--tick li:before{content:"✓";color:var(--success)}.feature-list--cross li:before{content:"✕";color:var(--error)}.concept-slide{flex-direction:column;gap:1.5rem;display:flex}.concept-slide__heading{margin-bottom:.25rem}.concept-slide__description{margin-bottom:.5rem}.comparison-table-wrapper{border-radius:var(--radius-md);border:1px solid var(--border);overflow-x:auto}.comparison-table{border-collapse:collapse;width:100%;font-size:.92rem}.comparison-table th,.comparison-table td{text-align:left;border-bottom:1px solid var(--border);vertical-align:top;padding:.75rem 1rem}.comparison-table th{text-transform:uppercase;letter-spacing:.04em;background:var(--bg-secondary);font-family:Sora,sans-serif;font-size:.85rem;font-weight:700}.comparison-table th.logical-header{color:var(--logical-accent)}.comparison-table th.physical-header{color:var(--physical-accent)}.comparison-table tr:last-child td{border-bottom:none}.comparison-table tr:nth-child(2n){background:var(--bg-secondary)}.comparison-table td:first-child{color:var(--text-primary);white-space:nowrap;font-weight:600}.diagram-svg{width:100%;height:auto;overflow:visible}.assessment-section{max-width:var(--page-max-width);margin:0 auto;padding:0 1.25rem}.assessment-section__header{margin-bottom:2rem}.assessment-section__header h2{margin-bottom:.4rem}.assessment-section__header p{font-size:.95rem}.assessment-part{margin-bottom:2.5rem}.assessment-part__heading{color:var(--accent);align-items:center;gap:.5rem;margin-bottom:.4rem;font-family:Sora,sans-serif;font-size:1.1rem;font-weight:700;display:flex}.assessment-part__subheading{color:var(--text-secondary);margin-bottom:1.25rem;font-size:.9rem}.assessment-submit-bar{border-top:1px solid var(--border);justify-content:flex-end;padding-top:1rem;display:flex}.naming-task{flex-direction:column;gap:2rem;display:flex}.naming-question{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);grid-template-columns:240px 1fr;align-items:start;gap:1.5rem;padding:1.25rem;display:grid}.naming-question__label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);grid-column:1/-1;margin-bottom:.75rem;font-family:Sora,sans-serif;font-size:.82rem;font-weight:700}.naming-question__diagram{background:var(--diagram-bg);border-radius:var(--radius-md);border:1px solid var(--border);justify-content:center;align-items:center;min-height:200px;padding:.75rem;display:flex}.naming-question__options{grid-template-columns:1fr 1fr;align-content:start;gap:.65rem;display:grid}.option-card{border-radius:var(--radius-md);border:2px solid var(--border);background:var(--bg-primary);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);padding:.7rem 1rem;font-family:Sora,sans-serif;font-size:.88rem;font-weight:600;line-height:1.3}.option-card:hover{border-color:var(--accent-light);background:var(--accent-bg);color:var(--accent)}.option-card--selected{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}.feature-matching{flex-direction:column;gap:2rem;display:flex}.feature-group{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}.feature-group__heading{color:var(--accent);margin-bottom:.25rem;font-family:Sora,sans-serif;font-size:1rem;font-weight:700}.feature-group__instruction{color:var(--text-secondary);margin-bottom:1rem;font-size:.88rem}.feature-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.55rem;display:grid}.feature-card{border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg-primary);cursor:pointer;transition:border-color var(--transition-fast), background var(--transition-fast);text-align:left;color:var(--text-primary);align-items:flex-start;gap:.6rem;padding:.65rem .85rem;font-size:.875rem;line-height:1.45;display:flex}.feature-card:hover{border-color:var(--accent-light);background:var(--accent-bg)}.feature-card--selected{border-color:var(--accent);background:var(--accent-bg)}.feature-card__checkbox{border:2px solid var(--border);background:var(--bg-primary);width:18px;height:18px;transition:border-color var(--transition-fast), background var(--transition-fast);color:#0000;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;margin-top:2px;font-size:.7rem;display:flex}.feature-card--selected .feature-card__checkbox{border-color:var(--accent);background:var(--accent);color:#fff}.btn-primary{border-radius:var(--radius-md);color:#fff;background:var(--accent);border:2px solid var(--accent);transition:background var(--transition-fast), opacity var(--transition-fast);padding:.65rem 2rem;font-family:Sora,sans-serif;font-size:1rem;font-weight:700}.btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{border-radius:var(--radius-md);color:var(--accent);border:2px solid var(--accent);transition:background var(--transition-fast), color var(--transition-fast);background:0 0;padding:.65rem 1.5rem;font-family:Sora,sans-serif;font-size:.95rem;font-weight:600}.btn-secondary:hover{background:var(--accent-bg)}.results-panel{max-width:860px;margin:0 auto;padding:0 1.25rem}.results-panel__score-card{background:var(--accent-bg);border:2px solid var(--accent);border-radius:var(--radius-lg);text-align:center;margin-bottom:2rem;padding:2rem}.results-panel__score-number{color:var(--accent);margin-bottom:.25rem;font-family:Sora,sans-serif;font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1}.results-panel__score-label{color:var(--text-secondary);font-family:Sora,sans-serif;font-size:1rem}.results-panel__section{margin-bottom:2rem}.results-panel__section h3{border-bottom:2px solid var(--border);margin-bottom:1rem;padding-bottom:.4rem}.part1-results{flex-direction:column;gap:.6rem;display:flex}.part1-item{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-secondary);align-items:center;gap:.75rem;padding:.65rem 1rem;font-size:.9rem;display:flex}.part1-item__icon{flex-shrink:0;font-size:1.1rem}.part1-item--correct{border-color:var(--success);background:var(--success-bg)}.part1-item--incorrect{border-color:var(--error);background:var(--error-bg)}.part1-item__label{color:var(--text-primary);flex:1}.part1-item__answer{color:var(--text-secondary);font-family:Courier New,monospace;font-size:.82rem}.part2-topology{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1rem;padding:1.1rem 1.25rem}.part2-topology__heading{color:var(--accent);justify-content:space-between;align-items:center;margin-bottom:.75rem;font-family:Sora,sans-serif;font-size:.95rem;font-weight:700;display:flex}.part2-topology__score-badge{background:var(--accent-bg);color:var(--accent);border-radius:20px;padding:.2rem .6rem;font-family:DM Sans,sans-serif;font-size:.8rem;font-weight:700}.part2-statements{flex-direction:column;gap:.4rem;display:flex}.part2-statement{border-radius:var(--radius-sm);align-items:flex-start;gap:.6rem;padding:.45rem .65rem;font-size:.875rem;line-height:1.45;display:flex}.part2-statement__icon{flex-shrink:0;margin-top:.1em;font-size:.9rem}.part2-statement--correct-selected{background:var(--success-bg);color:var(--success)}.part2-statement--incorrect-selected{background:var(--error-bg);color:var(--error)}.part2-statement--missed{background:var(--warning-bg);color:var(--warning)}.part2-statement--neutral{color:var(--text-secondary)}.results-actions{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem;display:flex}.diagram-node-circle{fill:var(--diagram-node-fill);stroke:var(--diagram-node-stroke);stroke-width:2px}.diagram-hub-circle{fill:var(--diagram-hub-fill);stroke:var(--diagram-node-stroke);stroke-width:2px}.diagram-link-line{stroke:var(--diagram-link);stroke-width:1.5px}.diagram-link-dashed{stroke:var(--diagram-dashed);stroke-width:1.5px;stroke-dasharray:5 4}.diagram-label{fill:var(--diagram-label);font-family:Courier New,Courier,monospace;font-size:11px}.diagram-hub-label{fill:var(--diagram-hub-text);font-family:Sora,sans-serif;font-size:10px;font-weight:700}.diagram-packet{fill:var(--diagram-packet)}.diagram-split-label{font-family:Sora,sans-serif;font-size:12px;font-weight:700}.diagram-split-label--logical{fill:var(--logical-accent)}.diagram-split-label--physical{fill:var(--physical-accent)}@media (prefers-reduced-motion:no-preference){.slide-visible{transition:opacity .25s,transform .25s}.slide-enter{transition:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=900px){.topology-slide{grid-template-columns:1fr;grid-template-areas:"heading""diagram""description""features""advantages""disadvantages""applications"}.topology-slide__diagram{min-height:220px}.naming-question{grid-template-columns:1fr}.naming-question__diagram{min-height:160px}}@media (width<=600px){:root{--navbar-height:56px;--section-gap:1.25rem}.navbar__logo span{display:none}.naming-question__options,.feature-grid{grid-template-columns:1fr}.teaching-section__controls{flex-direction:column;align-items:flex-start}.results-panel__score-card{padding:1.25rem}}@media print{.navbar,.teaching-section__controls,.assessment-submit-bar,.results-actions{display:none!important}.page-content{padding-top:0}body{color:#000;background:#fff}.results-panel{max-width:100%;padding:0}}