:root{color-scheme:dark;--bg:#0b1420;--panel:#101d2b;--panel2:#0d1925;--border:#203244;--muted:#8295a8;--text:#e6edf4;--green:#40d9b0;--red:#f0717b;--mono:'DM Mono',Consolas,monospace;--sans:'DM Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 75% 5%,#172b3c 0,transparent 38%),var(--bg);color:var(--text);font-family:var(--sans)}button,input{font:inherit}.app{max-width:1540px;min-height:100vh;margin:auto;padding:0 34px;display:flex;flex-direction:column}.topbar{height:76px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;font:700 15px var(--display);letter-spacing:1.7px}.brand b{color:var(--green)}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border:1px solid #3c917e;border-radius:8px;color:var(--green);font:700 16px var(--display);box-shadow:inset 0 0 15px #40d9b01a}.top-actions{display:flex;align-items:center;gap:12px}.mission-count,.live-indicator,.activity-label{font:500 10px var(--mono);letter-spacing:1px;color:var(--green);background:#40d9b010;border:1px solid #40d9b02e;padding:7px 10px;border-radius:5px}.quiet-button{border:1px solid transparent;background:transparent;color:#a8b6c4;padding:8px 10px;border-radius:5px;cursor:pointer;font-size:12px}.quiet-button:hover{border-color:var(--border);color:var(--text)}.workspace{display:grid;grid-template-columns:minmax(350px,.78fr) minmax(0,1.42fr);gap:17px;margin-top:20px;min-height:492px;flex:1}.panel{border:1px solid var(--border);background:linear-gradient(145deg,#12202e,#0f1b28);border-radius:10px;box-shadow:0 12px 30px #00000015}.terminal-panel,.network-panel{min-width:0;display:flex;flex-direction:column;overflow:hidden}.panel-heading{height:78px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.eyebrow{font:500 9px var(--mono);letter-spacing:1.4px;color:#7f94a8}.panel-heading h1,.panel-heading h2{font:600 19px var(--display);margin:4px 0 0}.live-indicator{font-size:9px;color:#a5b4c2;background:#ffffff06;border-color:#ffffff12}.terminal{flex:1;min-height:300px;background:#09121b;padding:20px 20px 16px;overflow-y:auto;font:12px/1.8 var(--mono);color:#d5e0ea}.welcome{display:flex;gap:12px;align-items:center;margin-bottom:17px}.terminal-symbol{color:var(--green);font-size:20px;font-weight:bold}.welcome strong{font:600 13px var(--display)}.welcome p{margin:2px 0 0;color:var(--muted);font:11px var(--sans)}.terminal-line{min-height:21px;white-space:pre-wrap;overflow-wrap:anywhere}.terminal-line.muted{color:#73879a}.terminal code{color:var(--green)}.command-echo{color:var(--green);margin-top:9px}.success-line{color:#b6f2de}.failure-line{color:#ff9ba2}.command-form{height:54px;margin:0 14px 10px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #294254;background:#101e2a;border-radius:6px}.command-form label{font:12px var(--mono);color:var(--green);white-space:nowrap}.command-form input{min-width:0;flex:1;background:transparent;border:0;outline:0;color:#fff;font:12px var(--mono);caret-color:var(--green)}.command-form button{border:1px solid #365365;background:#172838;color:var(--green);border-radius:5px;width:29px;height:29px;cursor:pointer}.terminal-footer{display:flex;justify-content:space-between;padding:0 19px 13px;color:#718396;font:9px var(--mono);letter-spacing:.7px}.terminal-footer i,.caption-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:var(--green);margin-right:6px}.network-panel .panel-heading{flex:none}.activity-label{color:#9fb0c0;border-color:#ffffff15;background:#ffffff08;font-size:9px}.map-scroll{flex:1;min-height:0;display:flex;align-items:center;overflow:auto;background:#0c1722}.network-map{width:100%;height:100%;min-height:385px;max-height:500px}.zone{fill:#11202a66;stroke:#2a3e4d;stroke-width:1;stroke-dasharray:4 5}.internet-zone{fill:#14203355;stroke:#30405a}.zone-label{font:9px var(--mono);fill:#8195a8;letter-spacing:1px}.link path{fill:none;stroke:#42586b;stroke-width:2;marker-end:url(#arrow);transition:stroke .2s,filter .2s}.link text{font:8px var(--mono);fill:#71879b}.link.active path{stroke:var(--green);stroke-width:3;filter:drop-shadow(0 0 4px #40d9b055);marker-end:url(#arrow-active)}.link.failed path{stroke:var(--red);stroke-dasharray:5 4;marker-end:url(#arrow)}.device-box{fill:#142333;stroke:#40576a;stroke-width:1.3;transition:stroke .2s,fill .2s,filter .2s}.device-icon{font:18px var(--sans);text-anchor:middle;fill:#a8bdcf}.device-name{text-anchor:middle;fill:#d7e2eb;font:600 9px var(--display);letter-spacing:.4px}.device-ip{text-anchor:middle;fill:#8da4b8;font:8px var(--mono)}.device.active .device-box{stroke:var(--green);fill:#123129;filter:drop-shadow(0 0 7px #40d9b044)}.device.failed .device-box{stroke:var(--red);fill:#321f29;filter:drop-shadow(0 0 7px #f0717b44)}.device.dns .device-box{stroke:#a28cff}.device.dns.active .device-box{stroke:var(--green)}.device.isp .device-box{stroke:#698ba4}.device.internet .device-box{fill:#182842;stroke:#7184b6}.device.host .device-box{stroke:#7184b6}.offline-label{text-anchor:middle;fill:var(--red);font:7px var(--mono);letter-spacing:.4px;display:none}.device.failed .offline-label{display:block}.legend text{font:8px var(--mono);fill:#9babb9;letter-spacing:.5px}.packet{fill:var(--green);stroke:#e4fff7;stroke-width:1.5;filter:drop-shadow(0 0 6px #40d9b0);pointer-events:none}.packet.dns-packet{fill:#ae92ff;stroke:#f2eaff;filter:drop-shadow(0 0 6px #ae92ff)}.packet-failed{fill:var(--red);stroke:#ffe1e2;filter:drop-shadow(0 0 6px #f0717b)}.packet-label{fill:#c6f9ea;font:8px var(--mono);text-anchor:middle;pointer-events:none}.map-caption{height:36px;padding:0 17px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;color:#8497a8;font:9px var(--mono)}.map-caption>span:last-child{font-size:8px;letter-spacing:.7px}.mission-panel{margin-top:16px;min-height:158px;padding:21px 25px;display:flex;justify-content:space-between;gap:20px;background:linear-gradient(110deg,#122231,#102029)}.mission-copy{max-width:760px}.mission-title-row{display:flex;align-items:center;gap:10px;margin-top:8px}.mission-number{font:500 11px var(--mono);color:var(--green)}.mission-title-row h2{font:600 20px var(--display);margin:0}.mission-title-row h2.solved{color:var(--green)}.mission-copy>p{margin:6px 0 0 30px;color:#b8c5d0;font-size:13px}.mission-controls{position:relative;display:flex;align-items:flex-start;gap:14px;padding-top:10px}.hint-button{background:#1b2b39;border:1px solid #354b5e;color:#dbe6ef;border-radius:5px;padding:8px 13px;cursor:pointer;font-size:11px;white-space:nowrap}.hint-button:hover:not(:disabled){border-color:var(--green)}.hint-button:disabled{opacity:.5;cursor:default}.stars{color:#f2c66d;letter-spacing:3px;font-size:19px;white-space:nowrap}.hint-text{position:absolute;top:48px;right:0;max-width:280px;width:max-content;color:#b9c7d3;text-align:right;font-size:11px;line-height:1.5}.explanation{margin:13px 0 0 30px;color:#91b5aa;font-size:11px;line-height:1.5;max-width:700px}.footer{height:42px;display:flex;justify-content:space-between;align-items:center;color:#62778a;font:9px var(--mono);letter-spacing:.7px}.footer-sep{color:#314454;margin:0 6px}button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:950px){.app{padding:0 18px}.workspace{grid-template-columns:minmax(310px,.86fr) minmax(0,1.14fr)}.map-scroll{overflow-x:auto}.network-map{min-width:600px}.mission-panel{padding:19px}.mission-controls{flex-direction:column;gap:7px}.hint-text{top:82px}}
@media(max-width:700px){.topbar{height:64px}.app{padding:0 12px}.top-actions{gap:3px}.quiet-button{font-size:10px;padding:7px 5px}.mission-count{font-size:8px;padding:6px}.workspace{grid-template-columns:1fr;min-height:0;margin-top:12px}.terminal-panel{min-height:400px}.terminal{min-height:260px}.network-panel{min-height:425px}.network-map{min-height:370px}.mission-panel{margin-top:12px;flex-direction:column;gap:5px}.mission-controls{flex-direction:row;align-items:center}.hint-text{position:static;text-align:left;width:auto}.footer{font-size:7px}.map-caption{font-size:8px}.map-caption>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
.mission-panel.complete{border-color:#3a987d;background:linear-gradient(110deg,#12352f,#102a2a);box-shadow:0 0 28px #40d9b019}.mission-success{margin:12px 0 0 30px;color:#80e3bd;font:600 12px var(--display);letter-spacing:.2px}
.mission-feedback{display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(100% - 30px);margin:12px 0 0 30px;padding:9px 13px;border:1px solid #40d9b05c;border-radius:7px;background:linear-gradient(100deg,#40d9b020,#40d9b008);color:#b6f2de;font:600 12px var(--display);opacity:0;transform:translateY(7px) scale(.98);box-shadow:0 0 0 #40d9b000;transition:opacity .22s ease,transform .22s ease,box-shadow .22s ease}.mission-feedback.show{opacity:1;transform:translateY(0) scale(1);box-shadow:0 0 24px #40d9b022}.mission-feedback-check{display:grid;place-items:center;width:21px;height:21px;flex:0 0 21px;border-radius:50%;background:#40d9b025;color:#70ebc5;font-size:14px}
.workspace{grid-template-columns:minmax(350px,.78fr) minmax(0,1.42fr)}
.terminal{height:50vh;min-height:0;max-height:50vh;flex:0 0 50vh;overflow-y:auto;overflow-x:hidden}
.terminal-line{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:700px){.workspace{grid-template-columns:minmax(0,1fr)}.terminal{height:50vh;min-height:0;max-height:50vh;flex:0 0 50vh}}