:root{color-scheme:dark light;--bg: #0b1220;--bg-raised: #131c30;--bg-sunken: #080e1a;--surface: #182338;--line: #2b3a55;--line-strong: #3d5273;--text: #e6edf7;--text-muted: #94a5bf;--text-inverse: #0b1220;--accent: #4da3ff;--accent-strong: #2b8cff;--accent-soft: rgba(77, 163, 255, .16);--success: #3ddc97;--success-soft: rgba(61, 220, 151, .16);--danger: #ff6b6b;--danger-soft: rgba(255, 107, 107, .16);--warning: #ffc857;--vlan-1: #4da3ff;--vlan-2: #3ddc97;--vlan-3: #ffc857;--vlan-4: #c792ea;--vlan-5: #ff8fab;--radius-sm: 8px;--radius: 14px;--radius-lg: 22px;--shadow: 0 12px 32px rgba(0, 0, 0, .34);--shadow-sm: 0 4px 14px rgba(0, 0, 0, .24);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace}@media (prefers-color-scheme: light){:root{--bg: #f4f7fc;--bg-raised: #ffffff;--bg-sunken: #e6ecf6;--surface: #ffffff;--line: #d3ddec;--line-strong: #b3c2d8;--text: #16233a;--text-muted: #5b6b85;--text-inverse: #ffffff;--accent: #1d6fd0;--accent-strong: #14539f;--accent-soft: rgba(29, 111, 208, .12);--success: #12855c;--success-soft: rgba(18, 133, 92, .12);--danger: #c62f2f;--danger-soft: rgba(198, 47, 47, .12);--vlan-1: #1d6fd0;--vlan-2: #12855c;--vlan-3: #b07400;--vlan-4: #7b3fbf;--vlan-5: #c2185b;--shadow: 0 12px 32px rgba(20, 40, 70, .12);--shadow-sm: 0 4px 14px rgba(20, 40, 70, .08)}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{background:radial-gradient(1200px 600px at 10% -10%,var(--accent-soft),transparent 60%),var(--bg);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.app{max-width:1400px;margin:0 auto;padding:var(--space-5) var(--space-4) var(--space-7)}h1,h2,h3{margin:0;line-height:1.2;font-weight:650}p{margin:0}.mono{font-family:var(--font-mono);font-variant-ligatures:none}.muted{color:var(--text-muted)}.hint{color:var(--text-muted);font-size:.85rem}.is-emphasis{color:var(--accent);font-weight:650;font-size:1.05rem}table{width:100%;border-collapse:collapse;font-size:.9rem}th,td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line)}th{color:var(--text-muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.home-header,.exercise-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}.home-title{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em}.home-subtitle{color:var(--text-muted);margin-top:var(--space-2)}.section-title{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--space-4)}.exercise-title{font-size:1.6rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.switch-layout,.router-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);gap:var(--space-4);align-items:start}.switch-side,.router-side{display:flex;flex-direction:column;gap:var(--space-4)}.quiz-layout{max-width:760px;margin:0 auto}@media (max-width: 1000px){.switch-layout,.router-layout{grid-template-columns:1fr}}.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow-sm)}.card{display:flex;flex-direction:column;gap:var(--space-3);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}.card-art{height:110px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent-soft),transparent 70%);border:1px solid var(--line);overflow:hidden;display:block}.card-art .art{width:100%;height:100%;display:block}.art-text{fill:var(--text);font-family:var(--font-mono);font-size:15px;font-weight:700}.art-caption{fill:var(--text-muted);font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.card-art-switch{background:linear-gradient(135deg,rgba(77,163,255,.18),transparent 70%)}.card-art-router{background:linear-gradient(135deg,rgba(61,220,151,.18),transparent 70%)}.card-art-quiz{background:linear-gradient(135deg,rgba(199,146,234,.18),transparent 70%)}.card-options{border-top:1px solid var(--line);margin-top:var(--space-2);padding-top:var(--space-2)}.card-options-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);cursor:pointer;list-style:none;font-size:.85rem;font-weight:600;color:var(--text-muted);padding:var(--space-1) 0}.card-options-summary::-webkit-details-marker{display:none}.card-options-summary:before{content:"▸";transition:transform .16s ease;color:var(--accent)}.card-options[open] .card-options-summary:before{transform:rotate(90deg)}.card-options-summary:hover{color:var(--accent)}.card-options-state{margin-left:auto;font-family:var(--font-mono);font-size:.76rem;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px var(--space-2)}.card-options-body{margin-top:var(--space-3);animation:slide-up .18s ease-out}.card-options .field-group{margin-bottom:var(--space-2)}.exam-panel{margin-top:var(--space-6)}.exam-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}.exam-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-left:3px solid var(--success);border-radius:var(--radius-sm);background:var(--bg-raised)}.exam-badge{color:var(--success);font-weight:700}.exam-main{display:flex;flex-direction:column;flex:1;min-width:0}.exam-name{font-weight:650}.exam-detail{font-size:.8rem;color:var(--text-muted)}.exam-score{font-weight:650;color:var(--success);white-space:nowrap}.exam-date{font-size:.8rem;color:var(--text-muted);white-space:nowrap}@media (max-width: 560px){.exam-date{display:none}}.site-footer{margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:.72rem;color:var(--text-muted)}.footer-link{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}.footer-link:hover{color:var(--accent)}.footer-sep{opacity:.5}.footer-version{opacity:.8}.home-controls{display:flex;align-items:center;gap:var(--space-2)}.toggle-button{letter-spacing:.04em}.card-title{font-size:1.15rem}.card-description{color:var(--text-muted);font-size:.92rem;flex:1}.card-progress{font-family:var(--font-mono);font-size:.82rem;color:var(--accent)}.panel-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--space-3)}.topology-panel{background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-3);overflow:hidden}.btn{appearance:none;border:1px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);font:inherit;font-weight:600;cursor:pointer;transition:background .14s ease,transform .14s ease,border-color .14s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--text-inverse)}.btn-primary:hover{background:var(--accent-strong)}.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}.actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}.lang-switch{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden}.lang-button{appearance:none;border:0;background:transparent;color:var(--text-muted);font:inherit;font-weight:600;padding:var(--space-2) var(--space-3);cursor:pointer}.lang-button.is-active{background:var(--accent);color:var(--text-inverse)}.input{background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--text);font:inherit;padding:var(--space-2) var(--space-3);width:100%}.input:disabled{opacity:.6}.input-answer{font-size:1.05rem}.input-number{width:5.5rem}.labelled{display:flex;flex-direction:column;gap:var(--space-1);font-size:.85rem;color:var(--text-muted)}.labelled-text{font-size:.85rem;color:var(--text-muted)}.field-group{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);margin:0 0 var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.field-group legend{padding:0 var(--space-2);font-size:.82rem;color:var(--text-muted)}.radio,.check{display:flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;font-size:.92rem}.radio small,.check small{display:block;color:var(--text-muted);font-size:.78rem}.entry-inputs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-2)}.goal-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}.goal-row .hint{flex-basis:100%}.score-bar{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-5);background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);overflow:hidden}.stat{display:flex;flex-direction:column}.stat-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.stat-value{font-family:var(--font-mono);font-size:1.1rem;font-weight:650}.score-progress{position:absolute;inset:auto 0 0;height:3px;background:var(--line)}.score-progress-fill{height:100%;width:calc(var(--progress) * 100%);background:var(--accent);transition:width .32s ease}.banner{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);background:var(--bg-raised);border:1px solid var(--line);color:var(--text-muted)}.banner-frame{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);color:var(--text)}.banner-payload{color:var(--text-muted);font-size:.88rem}.chip{display:inline-block;padding:2px var(--space-2);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:650}.chip-ipv6{background:#c792ea2e;color:var(--vlan-4)}.result{margin-top:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--line)}.result.is-correct{background:var(--success-soft);border-color:var(--success)}.result.is-wrong{background:var(--danger-soft);border-color:var(--danger)}.result-detail{margin-top:var(--space-2);font-size:.88rem}.port-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-2)}.port-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-2);background:var(--bg-raised)}.port-card.is-correct{border-color:var(--success)}.port-card.is-wrong{border-color:var(--danger);background:var(--danger-soft)}.port-card-title{font-weight:650;font-size:.9rem}.port-card-role{font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2)}.port-card-expected{margin-top:var(--space-2);font-size:.76rem;color:var(--danger)}.mac-table+.mac-table{margin-top:var(--space-4)}.mac-table-title{font-size:.82rem;color:var(--vlan-colour, var(--accent));border-left:3px solid var(--vlan-colour, var(--accent));padding-left:var(--space-2);margin-bottom:var(--space-2)}.mac-table td{font-family:var(--font-mono)}.route-table td{font-family:var(--font-mono);font-size:.84rem}.route-table tr.is-default td{color:var(--text-muted)}.route-table tr.is-match td{background:var(--accent-soft)}.route-table tr.is-winner td{background:var(--success-soft);font-weight:650}.route-table tr.is-evaluating td{background:var(--warning);color:var(--text-inverse);transition:background .12s ease}.explain{margin-top:var(--space-4);background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow);animation:slide-up .22s ease-out}.explain-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.explain-table td{font-size:.82rem}.explain-table tr.is-match td{background:var(--accent-soft)}.explain-table tr.is-nomatch td{color:var(--text-muted)}.explain-table tr.is-winner td{background:var(--success-soft);font-weight:650}.explain-verdict{margin-top:var(--space-3);font-weight:650;color:var(--success)}@keyframes slide-up{0%{opacity:0;transform:translateY(14px)}}.quiz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--space-4)}.quiz-question{font-size:1.25rem;line-height:1.4}.choice-group{display:flex;flex-direction:column;gap:var(--space-2)}.choice{display:flex;align-items:center;gap:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3);cursor:pointer;transition:border-color .14s ease,background .14s ease}.choice:hover{border-color:var(--accent)}.choice.is-expected{border-color:var(--success);background:var(--success-soft)}.choice.is-wrong{border-color:var(--danger);background:var(--danger-soft)}.summary{display:grid;place-items:center;min-height:60vh}.summary-card{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:var(--radius-lg);padding:var(--space-6);text-align:center;max-width:460px;box-shadow:var(--shadow);animation:slide-up .28s ease-out}.summary-card.is-passed{border-top-color:var(--success)}.summary-card.is-failed{border-top-color:var(--danger)}.summary-eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.summary-heading{font-size:1.8rem;margin:var(--space-2) 0 var(--space-4)}.summary-line{color:var(--text-muted)}.summary-points{font-family:var(--font-mono);font-size:2rem;font-weight:700;margin:var(--space-3) 0}.summary-goal{font-size:.85rem;color:var(--text-muted)}.summary-actions{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-5)}.kv{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);margin:0}.kv dt{color:var(--text-muted);font-size:.82rem}.kv dd{margin:0;font-family:var(--font-mono)}.fatal{max-width:640px;margin:10vh auto;padding:var(--space-5);border:1px solid var(--danger);border-radius:var(--radius);background:var(--danger-soft)}.fatal pre{white-space:pre-wrap;font-size:.8rem;color:var(--text-muted)}.topology{width:100%;height:auto;display:block;overflow:visible}.cable{fill:none;stroke:var(--line-strong);stroke-width:2.5;stroke-linecap:round;opacity:.55;transition:opacity .2s ease,stroke-width .2s ease}.cable-host{stroke-dasharray:4 6;opacity:.4}.cable.is-active{opacity:1;stroke-width:4;filter:drop-shadow(0 0 6px currentColor)}.chassis-body{fill:var(--bg-raised);stroke:var(--line-strong);stroke-width:2}.chassis-label,.router-label{fill:var(--text-muted);font-family:var(--font-mono);font-size:15px;letter-spacing:.18em}.router-circle{fill:var(--bg-raised);stroke:var(--line-strong);stroke-width:2}.port,.interface{transform-box:fill-box;transform-origin:center}.port-body,.interface-body{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5;transition:stroke .2s ease,fill .2s ease}.port-label,.interface-name{fill:var(--text);font-family:var(--font-mono);font-size:15px;font-weight:650}.port-role{fill:var(--text-muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.interface-addr{fill:var(--text-muted);font-family:var(--font-mono);font-size:10px}.vlan-badge{font-family:var(--font-mono);font-size:11px;font-weight:650}.vlan-badge.is-tagged{font-style:italic}.port.is-expected .port-body,.interface.is-expected .interface-body{stroke:var(--success);stroke-width:3}.port.is-mistake .port-body,.interface.is-mistake .interface-body{stroke:var(--danger);stroke-width:3}.interface.is-interactive{cursor:pointer}.interface.is-interactive:hover .interface-body{stroke:var(--accent)}.interface.is-selected .interface-body{fill:var(--accent-soft);stroke:var(--accent);stroke-width:3}.host-body{fill:var(--bg-raised);stroke-width:2.5}.host-label{fill:var(--text);font-family:var(--font-mono);font-size:13px;font-weight:700}.host.is-unknown .host-body{fill:var(--bg-sunken);stroke-dasharray:3 3;opacity:.7}.host.is-unknown .host-label{fill:var(--text-muted);font-weight:500}.host.is-known .host-label{animation:host-reveal .42s ease-out}@keyframes host-reveal{0%{opacity:0;transform:scale(.6)}}.host.is-sending .host-body{filter:drop-shadow(0 0 8px var(--accent))}.frame-token,.packet-token{pointer-events:none}.frame-body,.packet-body{fill:var(--accent);stroke:var(--accent-strong);stroke-width:1.5;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.frame-text,.packet-text{fill:var(--text-inverse);font-family:var(--font-mono);font-size:12px;font-weight:700}.frame-tag,.packet-sub{fill:var(--text-inverse);font-family:var(--font-mono);font-size:9px;opacity:.85}.packet-token.is-parked .packet-body{fill:var(--warning)}.frame-token.is-discarded,.packet-token.is-dropped{opacity:.55}.frame-token.is-discarded .frame-body,.packet-token.is-dropped .packet-body{fill:var(--text-muted);stroke:var(--text-muted)}