@import"https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Patrick+Hand&family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{--bg0: #ffffff;--bg1: #fdfdfd;--bg2: #f8fafc;--panel: rgba(0, 0, 0, .03);--panel2: rgba(0, 0, 0, .05);--border: #e2e8f0;--text: #0f172a;--muted: #475569;--muted2: #94a3b8;--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--sans: "Patrick Hand", cursive, ui-sans-serif, system-ui;--hand: "Gochi Hand", cursive;--accent: #2563eb;--accent2: #059669;--warn: #d97706;--bad: #e11d48;--shadow: 0 8px 30px rgba(0, 0, 0, .04);--sidebarW: 300px;--doodle-border: 255px 15px 225px 15px/15px 225px 15px 255px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:var(--sans);color:var(--text);background:#fff;background-image:radial-gradient(#e2e8f0 1px,transparent 1px);background-size:40px 40px;-webkit-font-smoothing:antialiased}a{color:inherit}.app{min-height:100vh;display:grid;grid-template-columns:var(--sidebarW) 1fr}.topbar{display:none}.sidebar{position:sticky;top:0;height:100vh;border-right:2px solid var(--text);background:#fff;display:flex;flex-direction:column;z-index:50}.sidebar-head{padding:18px 18px 14px;border-bottom:1px solid var(--border)}.sidebar-brand{display:flex;gap:12px;align-items:center}.brand-mark{width:44px;height:44px;border-radius:var(--doodle-border);display:grid;place-items:center;background:var(--text);border:2px solid var(--text)}.brand-title{font-family:var(--hand);font-weight:800;font-size:24px;letter-spacing:-.01em;line-height:1.1}.brand-meta{font-size:12px;color:var(--muted2);margin-top:2px}.nav{padding:12px;display:flex;flex-direction:column;gap:6px}.navlink{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;color:var(--muted);border:1px solid transparent;background:transparent;transition:transform .12s ease,background .12s ease,border .12s ease,color .12s ease}.navlink:hover{color:var(--accent);background:var(--panel);transform:rotate(-1deg) scale(1.02)}.navlink.active{color:var(--accent);background:var(--panel2);border:2px solid var(--text);border-radius:var(--doodle-border)}.sidebar-foot{margin-top:auto;padding:12px;border-top:1px solid var(--border)}.sidebar-note{margin-top:10px;color:var(--muted2);font-size:12px;line-height:1.4}.main{min-width:0}.content{max-width:980px;padding:52px 28px 80px;margin:0 auto}.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--doodle-border);border:2px solid var(--text);background:#fff;color:var(--text);font-family:var(--hand);font-weight:800;font-size:14px;margin-bottom:18px;box-shadow:3px 3px 0 var(--text)}h1{font-family:var(--hand);font-size:clamp(32px,4vw,54px);letter-spacing:-.02em;line-height:1;margin-bottom:20px}.p{color:var(--muted);font-size:16px;line-height:1.75;margin-bottom:14px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card{border:2px solid var(--text);background:#fff;border-radius:var(--doodle-border);padding:24px;box-shadow:6px 6px 0 var(--text)}.card-title{font-family:var(--hand);font-size:22px;font-weight:800;margin-bottom:12px}.course-steps{display:grid;gap:12px;margin:10px 0 14px}.course-step{border:2px solid var(--text);border-radius:var(--doodle-border);background:#fff;padding:18px}.course-step-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.course-step-badge{font-family:var(--mono);font-size:11px;color:var(--text);padding:4px 10px;border-radius:999px;border:2px solid var(--text);background:#fff}.course-step-title{margin:0;font-size:18px;letter-spacing:-.03em}.course-step-action{font-weight:700;color:#ffffffe0;margin:0 0 10px}.course-step-result{font-family:var(--mono);font-size:12px;color:var(--muted2);margin-top:10px}.form{display:grid;gap:10px}.form-row{grid-template-columns:1.4fr 1.4fr .8fr 1fr auto;align-items:end}.field{display:grid;gap:6px}.field>span{font-family:var(--mono);font-size:11px;color:var(--muted2)}.input,.select{width:100%;border-radius:var(--doodle-border);padding:12px 14px;border:2px solid var(--text);background:#fff;color:var(--text);outline:none;font-family:var(--mono);font-size:13px}.select option{background:#fff;color:#000}.input:focus,.select:focus{border-color:#63a9ff59;box-shadow:0 0 0 3px #63a9ff24}.btn{cursor:pointer;border-radius:var(--doodle-border);padding:12px 20px;border:2px solid var(--text);background:var(--text);color:#fff;font-family:var(--hand);font-size:18px;font-weight:800;transition:transform .1s ease;box-shadow:4px 4px #0000001a}.btn:hover{transform:scale(1.05) rotate(1deg)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-ghost{background:#fff;color:var(--text);border:2px solid var(--text)}.btn-ghost:hover{background:var(--panel)}.preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.choices{display:grid;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#00000024}.choice{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}.result{margin-top:12px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}.result-head{font-weight:900;letter-spacing:-.03em;margin-bottom:8px}.topology{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top-node{font-family:var(--mono);font-size:12px;color:#ffffffdb;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:#0003}.top-arrow{color:var(--muted2);font-family:var(--mono)}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.chip{font-family:var(--mono);font-size:11px;color:#ffffffd1;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#0000002e}.map{display:grid;gap:10px;margin-top:8px}.map-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0000002e}.map-k{font-family:var(--mono);font-size:12px;color:#ffffffdb}.map-v{color:var(--muted);font-size:14px;line-height:1.5}.kv{display:grid;gap:10px;margin-top:10px}.kv-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#00000029}.kv-k{font-family:var(--mono);font-size:12px;color:#ffffffdb}.kv-v{color:var(--muted);font-size:14px;line-height:1.5}.callout{border-radius:16px;padding:14px;border:1px solid var(--border);background:#ffffff0f;margin:14px 0}.callout-title{font-weight:800;letter-spacing:-.03em;margin-bottom:6px}.callout-info{border-color:#63a9ff47;background:#63a9ff1a}.callout-warn{border-color:#ffcc664d;background:#ffcc661a}.callout-bad{border-color:#ff6b8b4d;background:#ff6b8b14}.terminal{border-radius:12px;overflow:hidden;border:2px solid var(--text);background:#1e293b;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;margin:20px 0 10px}.terminal-header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);background:#00000073}.terminal-dots{display:flex;gap:6px}.terminal-dot{width:10px;height:10px;border-radius:999px;opacity:.9}.dot-red{background:#ff5f56}.dot-amber{background:#ffbd2e}.dot-green{background:#27c93f}.terminal-title{font-family:var(--mono);font-size:12px;color:#ffffffbf;flex:1}.terminal-copy{font-family:var(--mono);font-size:12px;color:#ffffffdb;border:1px solid rgba(255,255,255,.14);background:#ffffff0f;padding:6px 10px;border-radius:10px;cursor:pointer}.terminal-copy:hover{background:#ffffff1a}.terminal-body{padding:14px;margin:0;font-family:var(--mono);font-size:13px;color:#ffffffeb;line-height:1.55;white-space:pre-wrap}.prompt{color:var(--accent);margin-right:8px;-webkit-user-select:none;user-select:none}.check{margin-top:24px;border:2px solid var(--text);border-radius:var(--doodle-border);background:#fff;overflow:hidden;box-shadow:6px 6px 0 var(--text)}.check-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:2px solid var(--text);background:var(--panel)}.check-title{font-family:var(--hand);font-size:20px;font-weight:800}.check-meta{font-family:var(--mono);font-size:12px;color:var(--muted2)}.check-body{padding:12px 14px;display:grid;gap:10px}.check-item{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14px;line-height:1.45}.check-item input{margin-top:3px}.lab{border:2px solid var(--text);border-radius:var(--doodle-border);background:#fff;overflow:hidden}.lab-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--text);background:#fff}.lab-title{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.03em;font-size:14px}.pill{font-family:var(--mono);font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}.pill-ok{background:#2de2b71a;border-color:#2de2b733}.pill-bad{background:#ff6b8b1a;border-color:#ff6b8b33}.lab-controls{padding:10px 12px;display:grid;gap:10px}.lab-label{display:grid;gap:6px;font-size:12px;color:var(--muted2)}.lab-input{border-radius:12px;padding:9px 10px;border:1px solid rgba(255,255,255,.12);background:#00000038;color:#ffffffeb;outline:none;font-family:var(--mono);font-size:12px}.lab-input:focus{border-color:#63a9ff59;box-shadow:0 0 0 3px #63a9ff24}.lab-toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted2)}.lab-error{display:flex;gap:10px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}.lab-error-title{font-weight:800;letter-spacing:-.03em;font-size:13px}.lab-error-body{color:var(--muted);font-size:12px;line-height:1.45;margin-top:2px}.lab-grid{display:grid;gap:10px;padding:10px 12px}.lab-metric{border:1px solid rgba(255,255,255,.1);background:#00000029;border-radius:14px;padding:10px}.lab-metric-k{font-family:var(--mono);font-size:11px;color:var(--muted2)}.lab-metric-v{font-size:20px;font-weight:900;letter-spacing:-.04em;margin-top:2px}.lab-metric-i{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:12px;margin-top:8px}.lab-logs{padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.1)}.lab-logs-title{font-family:var(--mono);font-size:11px;color:var(--muted2);margin-bottom:8px}.lab-logs-body{display:grid;gap:6px}.lab-log{font-family:var(--mono);font-size:11px;color:#ffffffc7;padding:6px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:#0003;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.muted{color:var(--muted2)}.step-actions{display:flex;justify-content:flex-end;margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}.next-btn{text-decoration:none;font-weight:900;letter-spacing:-.02em;padding:10px 14px;border-radius:14px;border:1px solid rgba(99,169,255,.3);background:linear-gradient(135deg,#63a9ff42,#2de2b724);box-shadow:0 12px 30px #00000059}.next-btn:hover{border-color:#63a9ff6b}@media(max-width:980px){.app{grid-template-columns:1fr}.topbar{display:flex;position:sticky;top:0;z-index:60;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--border);background:#00000073;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.topbar-title{display:grid;gap:2px;align-items:center;justify-items:center;text-align:center}.brand{font-weight:900;letter-spacing:-.04em}.brand-sub{font-size:12px;color:var(--muted2)}.hint{display:none}.iconbtn{border:1px solid rgba(255,255,255,.14);background:#ffffff0f;color:#ffffffeb;border-radius:12px;padding:8px 10px;cursor:pointer}.sidebar{position:fixed;left:0;top:0;height:100vh;width:min(var(--sidebarW),92vw);transform:translate(-110%);transition:transform .16s ease}.sidebar-open{transform:translate(0)}.content{padding:22px 16px 70px}.grid2,.form-row,.map-row,.kv-row{grid-template-columns:1fr}.backdrop{position:fixed;inset:0;z-index:45;background:#0006}}