:root{--bg:#070d1c;--panel:#101c35;--line:#2b4268;--text:#f1f6ff;--muted:#a7b8d5;--cyan:#39e7ff;--blue:#5795ff;--violet:#b18cff;--green:#4df0b5;--amber:#ffd166;--pink:#ff78d2;--orange:#ff9e57}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 0%,#153454 0,transparent 38%),radial-gradient(ellipse at 92% 22%,#34204d 0,transparent 34%),var(--bg);color:var(--text);font:15px/1.55 Inter,system-ui,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}.shell{max-width:1320px;margin:auto;padding:22px}.top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:24px}.brand{display:flex;gap:11px;align-items:center;font-weight:900;letter-spacing:.1em}.mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#07111f;background:linear-gradient(135deg,var(--cyan),var(--violet),var(--pink));font-size:20px}.brand small{display:block;font-size:10px;color:var(--muted);letter-spacing:.18em}.pill{border:1px solid #365779;border-radius:999px;padding:7px 12px;font-size:11px;color:#cfe1f6;background:#0b1a2b}.hero{padding:32px;border:1px solid #52649a;border-radius:22px;background:linear-gradient(120deg,#102d4c,#1d2450 60%,#3a1e50);box-shadow:0 20px 60px #0004}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.045em;margin:12px 0}.hero p{color:#b7c8df;max-width:800px}.metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.metric{border:1px solid #46638a;background:#101f3b;padding:12px 16px;border-radius:14px}.metric b{font-size:22px;color:var(--cyan);display:block}.section{margin:30px 0 12px;display:flex;justify-content:space-between;align-items:end;gap:10px}.section h2{margin:0;font-size:21px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{position:relative;overflow:hidden;border:1px solid #2e4a70;border-radius:17px;padding:18px;background:linear-gradient(145deg,#122744,#111a32 65%,#211d43);transition:.2s}.card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink),var(--orange))}.card:hover{transform:translateY(-3px);border-color:#6b8fb9}.card .no{font-size:10px;color:var(--cyan);font-weight:900;letter-spacing:.16em}.card h3{font-size:17px;margin:8px 0 4px}.card p{color:var(--muted);font-size:12px;margin:0 0 14px}.card-foot{display:flex;justify-content:space-between;color:#bcd0e8;font-size:11px}.arrow{color:var(--cyan);font-size:18px}.footer{border-top:1px solid #263f60;margin-top:38px;padding:20px 0;color:#8298b5;font-size:11px}
.breadcrumb{font-size:12px;color:var(--muted);margin:8px 0 18px}.head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.head h1{font-size:clamp(28px,4vw,42px);line-height:1.08;margin:7px 0}.head p{margin:0;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr);gap:16px}.panel{background:linear-gradient(145deg,#101f37,#0c192c);border:1px solid #2d496c;border-radius:20px;padding:20px;box-shadow:0 15px 45px #0003}.panel h2{font-size:17px;margin:0 0 13px}.workarea{background:radial-gradient(circle at 12% 20%,#163d5d 0,transparent 35%),radial-gradient(circle at 86% 80%,#3a2451 0,transparent 34%),linear-gradient(140deg,#0a192c,#172341);border:1px solid #41648d;border-radius:17px;padding:16px;min-height:390px;display:flex;flex-direction:column}.workhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.workhead b{font-size:14px}.workhead span{font-size:11px;color:var(--muted)}#scene{width:100%;min-height:285px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:1}#scene svg{width:100%;height:auto;max-height:360px;display:block;overflow:visible}.status{background:#081726;border:1px solid #29445f;border-radius:12px;padding:11px 13px;font-size:12px;color:#d5e5f7;margin-top:8px;min-height:43px}.progress{height:5px;border-radius:9px;background:#1d344f;margin-top:13px;overflow:hidden}.progress span{height:100%;display:block;width:0;background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet),var(--pink));transition:width .4s}.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.btn{border:1px solid #3a5a7c;border-radius:11px;padding:10px 14px;background:#142a44;color:#edf6ff;font-weight:750;cursor:pointer}.btn.primary{border:0;background:linear-gradient(100deg,#0daec4,#5069df,#9258d9)}.btn:disabled{opacity:.4;cursor:not-allowed}.control{margin:15px 0}.control label{display:flex;justify-content:space-between;font-size:12px;color:#c9d9eb;margin-bottom:7px}.control output{color:var(--cyan);font-weight:900}.range{width:100%;accent-color:var(--cyan)}select,input[type=text]{width:100%;background:#071626;border:1px solid #34516f;color:white;padding:10px;border-radius:10px}.objective{color:var(--muted);font-size:13px}.steps{display:grid;gap:8px}.step{display:flex;gap:10px;padding:10px;border:1px solid #263f5d;background:#0b1a2c;border-radius:11px}.step.current{border-color:var(--cyan);background:linear-gradient(100deg,#12344a,#292344);transform:translateX(2px)}.num{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#1b6a83,#5b438c);display:grid;place-items:center;font-size:11px;font-weight:900;flex:none}.step b{font-size:12px}.step p{font-size:11px;color:var(--muted);margin:2px 0 0}.analogy{padding:14px;border:1px solid #554c82;border-radius:13px;background:linear-gradient(120deg,#182b4b,#332349);font-size:12px;color:#dce8f8}.output{min-height:65px;border:1px solid #2b4867;background:#091a2c;border-radius:13px;padding:12px;margin-top:14px}.output b{color:var(--green)}.quiz{border-top:1px solid #29435e;margin-top:18px;padding-top:15px}.quiz button{width:100%;text-align:left;margin:5px 0;padding:10px;background:#0b1b2d;border:1px solid #29445f;border-radius:10px;color:#e4effc;cursor:pointer}.quiz button.correct{border-color:var(--green);background:#10352d}.quiz button.wrong{border-color:var(--pink);background:#3a1c2a}.small{font-size:11px;color:var(--muted)}.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
svg .node{fill:#162e4d;stroke:#587ca7;stroke-width:1.6}svg .input{fill:#103d55;stroke:var(--cyan);stroke-width:2}svg .process{fill:#2c2450;stroke:var(--violet);stroke-width:2}svg .outputnode{fill:#124438;stroke:var(--green);stroke-width:2}svg .warning{fill:#48351e;stroke:var(--amber);stroke-width:2}svg .branch{fill:#3b2343;stroke:var(--pink);stroke-width:2}svg .label{fill:#f1f6ff;font:700 13px system-ui,sans-serif}svg .tiny{fill:#b9cbe2;font:600 10px system-ui,sans-serif}svg .line{fill:none;stroke:#5b7da5;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}svg .moving{fill:none;stroke:url(#grad);stroke-width:4;stroke-dasharray:12 9;animation:dash 1.2s linear infinite}svg .packet{fill:white;stroke:var(--cyan);stroke-width:4;filter:drop-shadow(0 0 7px var(--cyan))}svg .block{fill:#1a3152;stroke:#6488b2;stroke-width:1.5}svg .selected{fill:#105445;stroke:var(--green);stroke-width:2.5}svg .ring{fill:none;stroke:#395b84;stroke-width:8}svg .ringmove{fill:none;stroke:url(#grad);stroke-width:5;stroke-dasharray:34 15;animation:orbit 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-42}}@keyframes orbit{to{stroke-dashoffset:-196}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.layout{grid-template-columns:1fr}}@media(max-width:560px){.shell{padding:13px}.grid{grid-template-columns:1fr}.panel{padding:14px}.workarea{min-height:340px}.head{display:block}.top .pill{display:none}}


/* V7 interactive experiment layer – additive; V6 workflow remains intact */
.v7lab{margin-top:20px;border:1px solid #315477;border-radius:16px;padding:16px;background:linear-gradient(145deg,#101e35,#0a1426);box-shadow:0 12px 34px #0003}.v7head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.v7head h2{margin:0}.v7tag{font-size:10px;letter-spacing:.12em;color:#43d9f5;border:1px solid #315477;border-radius:999px;padding:5px 9px}.v7grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.72fr);gap:12px}.v7stage,.v7side{background:#091426;border:1px solid #263e5e;border-radius:13px;padding:13px;min-width:0}.v7controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}.v7lab button,.v7lab select,.v7lab input,.v7lab textarea{font:inherit}.v7lab button{background:#172b48;border:1px solid #3a587d;color:#edf6ff;border-radius:9px;padding:8px 11px;cursor:pointer}.v7lab button:hover{border-color:#43d9f5}.v7lab input,.v7lab select,.v7lab textarea{background:#0c1a30;color:#eef5ff;border:1px solid #355274;border-radius:8px;padding:8px;max-width:100%}.v7lab input[type=range]{accent-color:#43d9f5;padding:0}.v7lab label{font-size:12px;color:#a9bdd8;display:grid;gap:5px}.v7out{font:13px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow:auto;background:#050b16;border:1px solid #294260;border-radius:10px;padding:12px;color:#a7f3d0;min-height:62px}.v7muted{font-size:12px;color:#9db0ca}.v7cells{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.v7cell{display:grid;gap:4px;text-align:center;min-width:50px}.v7cell b{padding:11px 13px;border:1px solid #3b6085;border-radius:9px;background:#17304c;color:#e9f5ff}.v7cell small{font-size:10px;color:#9db0ca}.v7cell.active b{border-color:#fbbf24;background:#4a3515}.v7table{width:100%;border-collapse:collapse;font-size:12px}.v7table td,.v7table th{padding:7px;border-bottom:1px solid #263957;text-align:center}.v7table tr.hit{background:#153c50}.v7badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#123c34;color:#a7f3d0;font-size:11px}.v7warn{color:#fbbf24}.v7gate{cursor:grab;user-select:none;background:#172943;border:1px solid #466184;border-radius:10px;padding:9px 12px;font-weight:800}.v7drop{border:2px dashed #426184;border-radius:12px;min-height:90px;display:grid;place-items:center;padding:10px;text-align:center}.v7drop.over{border-color:#43d9f5;background:#12334a}.v7wire{height:3px;min-width:25px;flex:1;background:linear-gradient(90deg,#43d9f5,#a78bfa)}.v7circuit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#0b172b;padding:12px;border-radius:12px}.v7result{font-size:22px;font-weight:900;color:#4ade80}.v7lab .v7feedback{min-height:22px;font-size:12px;color:#b9cde8;margin-top:8px}@media(max-width:760px){.v7grid{grid-template-columns:1fr}.v7lab{padding:12px}}