:root{color-scheme:dark;--lab-bg:#09111f;--lab-panel:#111d30;--lab-line:rgba(159,184,222,.17);--lab-text:#f1f5ff;--lab-muted:#a4b2ca;--lab-blue:#83aaff;--lab-mint:#81edcf;--lab-purple:#c6a7ff}
.lab-page{background:radial-gradient(ellipse at 80% 0%,rgba(73,103,187,.17),transparent 35%),var(--lab-bg);color:var(--lab-text);min-height:100vh}.lab-main{max-width:1120px;margin:auto;padding:22px 24px 64px}.skip-link{position:absolute;left:-9999px;top:8px}.skip-link:focus{left:12px;z-index:30;background:#fff;color:#111;padding:10px}.back-link{color:var(--lab-blue);text-decoration:none}.lab-hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:28px;padding:52px 0 34px}.eyebrow{color:var(--lab-mint);font-size:.75rem;letter-spacing:.15em;font-weight:800;margin:0 0 12px}.lab-hero h1{font-size:clamp(2.8rem,7vw,5.7rem);letter-spacing:-.065em;line-height:.99;margin:0;max-width:720px}.gradient-word{background:linear-gradient(100deg,#8eb4ff,#c3a6ff 55%,#82efd2);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy-block>p:not(.eyebrow){font-size:1.08rem;line-height:1.7;color:var(--lab-muted);max-width:590px}.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.hero-badges span,.difficulty-pill{border:1px solid var(--lab-line);background:rgba(255,255,255,.035);border-radius:999px;padding:9px 12px;font-size:.82rem;color:#d9e5fb}.orbit-scene{height:300px;position:relative;display:grid;place-items:center;isolation:isolate}.orbit-ring{position:absolute;border:1px solid rgba(132,171,255,.23);border-radius:50%;animation:spin 24s linear infinite}.ring-one{width:245px;height:245px}.ring-two{width:180px;height:180px;border-style:dashed;animation-direction:reverse;animation-duration:18s}.orbit-device{position:absolute;width:58px;height:58px;border:1px solid rgba(153,185,255,.35);border-radius:19px;background:linear-gradient(145deg,#1b2d49,#101a2b);display:grid;place-items:center;font-size:1.7rem;box-shadow:0 12px 35px rgba(0,0,0,.22);animation:bob 4s ease-in-out infinite}.device-laptop{top:24px;left:calc(50% - 29px)}.device-switch{right:28px;top:calc(50% - 29px);animation-delay:-1s}.device-router{bottom:25px;left:calc(50% - 29px);animation-delay:-2s}.device-server{left:28px;top:calc(50% - 29px);animation-delay:-3s}.orbit-packet{position:absolute;width:10px;height:10px;border-radius:50%;background:#8ff2d8;box-shadow:0 0 20px #8ff2d8;animation:packet-orbit 5s linear infinite}.mission-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;border:1px solid var(--lab-line);border-radius:24px;background:linear-gradient(115deg,rgba(36,60,94,.78),rgba(18,29,47,.9));box-shadow:0 18px 50px rgba(0,0,0,.12)}.mission-strip>div:first-child{display:flex;align-items:center;gap:15px}.mission-icon{font-size:2rem}.mission-strip strong{font-size:1.03rem}.mission-strip p,.score-meter small{color:var(--lab-muted);margin:5px 0 0;font-size:.88rem}.score-meter{width:230px;flex-shrink:0}.score-meter>strong{display:block;text-align:right;margin-bottom:8px}.meter-track{height:8px;background:#27364c;border-radius:99px;overflow:hidden}.meter-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#83aaff,#81edcf);border-radius:99px;transition:width .7s cubic-bezier(.2,.8,.2,1)}.score-meter small{display:block;text-align:right;font-size:.72rem;margin-top:7px}.mission-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}.mission-tab{position:relative;text-align:left;display:flex;flex-direction:column;gap:5px;min-width:0;border:1px solid var(--lab-line);border-radius:18px;padding:17px 18px;background:#101b2c;color:#e8efff;font-weight:750;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}.mission-tab>span{font-size:.72rem;color:var(--lab-mint);letter-spacing:.12em}.mission-tab small{font-weight:400;color:var(--lab-muted)}.mission-tab:hover{transform:translateY(-3px);border-color:rgba(131,170,255,.65)}.mission-tab.is-active{border-color:#82aaff;background:linear-gradient(145deg,rgba(64,91,143,.4),rgba(18,29,47,.96));box-shadow:inset 0 0 0 1px rgba(131,170,255,.13)}.mission-panel{border:1px solid var(--lab-line);border-radius:26px;background:rgba(16,27,44,.84);padding:clamp(18px,4vw,34px);animation:rise-in .4s ease both}.mission-panel[hidden]{display:none}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.panel-heading h2,.finish-card h2{font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.04em;margin:0 0 8px;overflow-wrap:anywhere}.panel-heading p:not(.eyebrow),.finish-card p:not(.eyebrow){color:var(--lab-muted);line-height:1.65;max-width:680px;margin:0}.difficulty-pill{white-space:nowrap;font-size:.74rem;color:var(--lab-mint)}.challenge-card{max-width:820px;margin:auto;padding:clamp(17px,3vw,28px);border:1px solid rgba(142,177,255,.2);border-radius:22px;background:radial-gradient(ellipse at 95% 0%,rgba(95,128,202,.14),transparent 43%),#0d1727}.challenge-top{display:flex;justify-content:space-between;gap:10px;color:var(--lab-muted);font-size:.8rem}.challenge-label{color:var(--lab-mint);font-weight:800;font-size:.72rem;letter-spacing:.12em}.subnet-question{text-align:center;padding:25px 10px 18px}.ip-chip{display:inline-block;padding:12px 19px;border-radius:14px;background:#1c2e4a;border:1px solid rgba(130,170,255,.3);font:700 clamp(1.2rem,3vw,1.8rem)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.04em}.subnet-question p{font-size:1.13rem;color:#d9e4f8;margin:18px 0 0}.answer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.answer-option,.scenario-option{border:1px solid var(--lab-line);border-radius:13px;background:#152238;color:var(--lab-text);padding:15px;text-align:left;font:600 1rem ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer;transition:transform .16s,border-color .16s,background .16s;overflow-wrap:anywhere}.answer-option:hover,.scenario-option:hover{transform:translateY(-2px);border-color:#82aaff}.answer-option:disabled,.scenario-option:disabled{cursor:default;opacity:1}.answer-option.correct{border-color:#62d8b5;background:rgba(41,143,113,.2)}.answer-option.incorrect{border-color:#ff9caa;background:rgba(171,62,82,.17)}.feedback-panel{display:flex;gap:12px;align-items:flex-start;padding:15px 17px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--lab-line);margin-top:17px;min-height:70px}.feedback-emoji{font-size:1.4rem}.feedback-panel strong{display:block}.feedback-panel p{margin:5px 0 0;color:var(--lab-muted);line-height:1.55;font-size:.92rem}.feedback-panel.good{border-color:rgba(98,216,181,.4);background:rgba(41,143,113,.09)}.feedback-panel.try-again{border-color:rgba(255,156,170,.4);background:rgba(171,62,82,.08)}.challenge-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.primary-btn,.secondary-btn{border:0;border-radius:12px;padding:12px 17px;font-weight:800;cursor:pointer;transition:transform .18s,filter .18s}.primary-btn{background:linear-gradient(105deg,#8db2ff,#9debd8);color:#0b1525}.secondary-btn{border:1px solid var(--lab-line);background:#17243a;color:#e7efff}.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}button:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.hint-box{padding:12px 14px;margin-top:12px;border-radius:12px;background:rgba(198,167,255,.08);border:1px solid rgba(198,167,255,.2);color:#ded3ff;line-height:1.5}.scenario-card{border:1px solid var(--lab-line);border-radius:20px;overflow:hidden;background:#0d1727}.scenario-scene{display:flex;align-items:center;justify-content:center;gap:0;padding:26px 16px;background:radial-gradient(ellipse at center,rgba(82,118,188,.2),transparent 72%);border-bottom:1px solid var(--lab-line)}.scene-device{font-size:2rem;width:64px;height:64px;display:grid;place-items:center;background:#1a2a43;border:1px solid var(--lab-line);border-radius:18px;flex-shrink:0;animation:bob 3.4s ease-in-out infinite}.scene-device:nth-of-type(3){animation-delay:-1.2s}.scene-device.dimmed{opacity:.45;filter:grayscale(1)}.scene-cable{height:3px;width:clamp(24px,8vw,80px);background:#69d9b5;position:relative;overflow:hidden}.scene-cable.broken{background:repeating-linear-gradient(90deg,#ff9caa 0 8px,transparent 8px 14px)}.scene-pulse{position:absolute;width:10px;height:10px;top:-3px;left:-12px;border-radius:50%;background:#c6fff0;box-shadow:0 0 12px #81edcf;animation:travel 1.8s linear infinite}.scene-pulse.delay{animation-delay:-.9s}.scenario-body{padding:clamp(18px,3vw,28px)}.scenario-body h3{font-size:clamp(1.25rem,3vw,1.8rem);margin:10px 0}.scenario-symptom{line-height:1.65;color:var(--lab-muted)}.scenario-question{font-weight:800;margin-top:22px}.scenario-options{display:grid;gap:9px}.scenario-option{font:500 .98rem/1.5 inherit;font-family:inherit}.scenario-option.correct{border-color:#62d8b5;background:rgba(41,143,113,.2)}.scenario-option.incorrect{border-color:#ff9caa;background:rgba(171,62,82,.17)}.studio-layout{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);gap:16px}.config-form,.config-preview{border:1px solid var(--lab-line);border-radius:18px;background:#0d1727;padding:19px;min-width:0}.config-form{display:grid;gap:14px}.config-form label{display:grid;gap:7px;font-size:.86rem;color:#cbd8ee}.config-form input:not([type=checkbox]),.config-form select{width:100%;min-width:0;border:1px solid #34455e;border-radius:10px;background:#121f33;color:#f1f5ff;padding:11px;font:inherit}.toggle-row{display:flex!important;align-items:flex-start;gap:10px!important;line-height:1.45}.toggle-row input{margin-top:4px;accent-color:#81edcf}.form-note{font-size:.79rem;color:#d8c8a0;line-height:1.55;margin:0}.terminal-bar{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--lab-line);padding-bottom:14px}.terminal-bar>span{width:8px;height:8px;border-radius:50%;background:#7285a1}.terminal-bar>strong{margin-left:8px;font-size:.67rem;letter-spacing:.12em;color:var(--lab-muted);flex:1}.terminal-bar button{background:#1d304c;border:1px solid var(--lab-line);color:#dfeaff;border-radius:8px;padding:6px 10px;cursor:pointer}.config-preview pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#a9f4d8;font: .86rem/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:240px;margin:16px 0}.config-preview>p{color:var(--lab-muted);font-size:.8rem;line-height:1.5}.config-checklist{margin-top:18px;padding:19px;border:1px solid var(--lab-line);border-radius:16px;display:grid;gap:12px}.config-checklist h3{margin:0 0 3px}.config-checklist label{display:flex;gap:10px;align-items:flex-start;color:#cbd8ee;font-size:.9rem;line-height:1.5}.config-checklist input{accent-color:#81edcf;margin-top:4px}.finish-card{display:flex;gap:22px;align-items:center;padding:25px;margin-top:25px;border-radius:23px;border:1px solid rgba(129,237,207,.22);background:linear-gradient(120deg,rgba(30,72,79,.38),rgba(20,30,48,.9))}.finish-art{font-size:3rem;animation:bob 3s ease-in-out infinite}.text-link{display:inline-block;margin-top:15px;color:var(--lab-mint);font-weight:750;text-decoration:none}.lab-footer{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:22px 0 0;color:var(--lab-muted);font-size:.8rem}.lab-footer a{color:var(--lab-blue);text-decoration:none}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes packet-orbit{0%{transform:rotate(0deg) translateX(117px) rotate(0deg)}100%{transform:rotate(360deg) translateX(117px) rotate(-360deg)}}@keyframes travel{to{left:calc(100% + 12px)}}@keyframes rise-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.lab-main{padding:16px 17px 45px}.lab-hero{grid-template-columns:1fr;padding:38px 0 20px;gap:0}.lab-hero h1{font-size:clamp(2.7rem,12vw,4.5rem)}.orbit-scene{height:230px;max-width:360px;width:100%;margin:0 auto}.ring-one{width:200px;height:200px}.ring-two{width:150px;height:150px}.device-laptop{top:8px}.device-router{bottom:8px}.device-server{left:calc(50% - 122px)}.device-switch{right:calc(50% - 122px)}.mission-strip{align-items:flex-start;flex-direction:column}.score-meter{width:100%}.score-meter>strong,.score-meter small{text-align:left}.mission-tabs{grid-template-columns:1fr;gap:8px}.mission-tab{display:grid;grid-template-columns:42px 1fr;align-items:center;column-gap:8px;padding:13px 15px}.mission-tab>span{grid-row:span 2}.mission-tab small{grid-column:2}.panel-heading{flex-direction:column;gap:12px}.studio-layout{grid-template-columns:1fr}.finish-card{align-items:flex-start;padding:19px}.finish-art{font-size:2.2rem}.lab-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:420px){.lab-main{padding-left:13px;padding-right:13px}.hero-badges span{font-size:.75rem;padding:7px 9px}.mission-panel{padding:15px;border-radius:19px}.answer-options{grid-template-columns:1fr}.challenge-actions{align-items:stretch;flex-direction:column}.challenge-actions button{width:100%}.scenario-scene{padding:20px 8px}.scene-device{width:48px;height:48px;font-size:1.6rem;border-radius:14px}.scene-cable{width:clamp(12px,5vw,30px)}.config-form,.config-preview{padding:14px}.finish-card{gap:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}