:root{--navy:#14274d;--ink:#1e3359;--blue:#4168dc;--lightblue:#e6efff;--aqua:#1cae9b;--yellow:#ffd66a;--pink:#f775a1;--paper:#fff;--bg:#edf4ff;--muted:#627391;--border:#d9e4f5;--shadow:0 18px 55px rgba(31,61,105,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:radial-gradient(ellipse at 6% 5%,#f9e7f2,transparent 31%),radial-gradient(ellipse at 90% 3%,#ddf5ee,transparent 34%),linear-gradient(155deg,#f3f7ff,#ecf1ff 66%,#f9f6f2);min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible{outline:4px solid #f6b94c;outline-offset:3px}.app-shell{max-width:1190px;margin:0 auto;padding:20px 26px 22px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:2px 1px 19px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{height:43px;width:43px;background:var(--navy);border-radius:13px;display:grid;place-items:center;box-shadow:0 5px 0 #b8c9ea}.brand-mark svg{width:30px;height:30px;stroke:#fff;stroke-width:2;fill:none}.brand b{display:block;font-size:13px;letter-spacing:.12em}.brand span{font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:800}.top-actions{display:flex;align-items:center;gap:10px}.sound-status{font-size:11px;letter-spacing:.11em;font-weight:850;color:var(--muted)}.icon-button{border:2px solid var(--border);border-radius:50%;height:34px;width:34px;background:#fff;color:var(--navy);font-weight:1000;font-size:20px}.progress-trail{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}.trail-item{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.08em;font-weight:900;color:#8b99b0}.trail-num{height:29px;min-width:29px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid #cad6ea;font-size:11px}.trail-line{width:7%;height:2px;background:#c5d5ea}.trail-item.active{color:#325bc4}.trail-item.active .trail-num{background:#4168dc;border-color:#4168dc;color:#fff}.trail-item.done{color:#239586}.trail-item.done .trail-num{background:#d6f7e8;border-color:#51b99f;color:#167260}.trail-expert.active{color:#a8780b}.trail-expert.active .trail-num{background:var(--yellow);border-color:#edb624;color:var(--navy)}#app{min-height:565px}.screen{animation:rise .36s ease both}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tag{display:inline-flex;align-items:center;gap:7px;background:#e8effe;color:#3558ad;font-size:11px;font-weight:900;letter-spacing:.12em;border-radius:50px;padding:8px 13px}.tag.turq{background:#d8f7ef;color:#117b6d}.tag.pink{background:#ffe5ee;color:#b93968}.tag.gold{background:#fff1bd;color:#97670a}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,4.2vw,57px);line-height:1.07;letter-spacing:-.045em;margin:16px 0}h2{font-size:clamp(24px,3vw,37px);letter-spacing:-.035em;line-height:1.16;margin:10px 0}h3{font-size:19px;letter-spacing:-.015em}.lead{font-size:16px;color:#485e7b;line-height:1.6;max-width:57ch}.card{background:#fff;border:1.5px solid #dce7f6;border-radius:22px;box-shadow:var(--shadow)}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:13px;background:var(--blue);color:white;font-weight:850;font-size:14px;box-shadow:0 6px 0 #294da9;transition:transform .12s,box-shadow .12s;min-height:48px;text-align:center}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 #294da9}.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #294da9}.btn.teal{background:#16a78f;box-shadow:0 6px 0 #0a796a}.btn.teal:hover:not(:disabled){box-shadow:0 8px 0 #0a796a}.btn.gold{background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 #d7a83c}.btn.gold:hover:not(:disabled){box-shadow:0 8px 0 #d7a83c}.btn.ghost{background:white;box-shadow:none;color:#3256ad;border:2px solid #c8d8f4}.btn.small{padding:10px 14px;font-size:12px;min-height:39px}.button-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:23px}.pill{font-size:12px;font-weight:800;border-radius:999px;background:#f1f6fe;padding:9px 13px;color:#48618f}.welcome{display:grid;grid-template-columns:1fr 1.02fr;overflow:hidden;min-height:505px}.welcome-copy{padding:clamp(28px,4.5vw,55px) 28px clamp(28px,4vw,50px) clamp(28px,4vw,55px);position:relative;z-index:2}.welcome-copy p{font-size:16px;line-height:1.6;color:#526582}.welcome-art{position:relative;background:linear-gradient(139deg,#bed9ff 0%,#d9f2ed 53%,#fff2cc 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}.welcome-art:before{content:'';position:absolute;height:440px;width:440px;border-radius:50%;background:rgba(255,255,255,.33);border:2px dashed rgba(63,113,190,.18);top:-90px;left:-50px}.welcome-art > svg{width:100%;height:auto;max-height:440px;position:relative;filter:drop-shadow(0 15px 15px rgba(45,93,141,.10))}.swoosh{position:absolute;background:#ffb5ce;border-radius:30px;transform:rotate(9deg);padding:12px 17px;right:24px;bottom:33px;font-weight:950;font-size:13px;box-shadow:0 5px 0 rgba(172,68,108,.25)}.mini-skills{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}.mini-skills span{font-weight:800;font-size:11px;background:#f0f5ff;padding:9px 11px;border-radius:11px;color:#466398}.panel-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px}.panel-main{padding:clamp(18px,3vw,35px)}.panel-aside{padding:24px;background:linear-gradient(165deg,#eef6ff,#fff);align-self:stretch}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.question-title{margin:14px 0 16px;font-size:clamp(22px,2.6vw,33px);line-height:1.22;font-weight:900;max-width:25ch;letter-spacing:-.03em}.question-visual{border-radius:17px;background:linear-gradient(137deg,#ecf4ff,#f8efff);border:1px solid #d9e5fa;display:flex;justify-content:center;align-items:center;height:173px;margin:0 0 17px;overflow:hidden}.question-visual svg{height:148px;width:min(370px,90%)}.question-visual .visual-caption{color:#6a789a;font-size:12px}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.answer{min-height:67px;text-align:left;padding:16px 17px;border-radius:13px;background:#fff;border:2px solid #d9e4f6;font-weight:800;color:#2a4068;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:background .15s,border-color .15s}.answer:hover:not(:disabled){background:#eff5ff;border-color:#719cf0}.answer.correct{border-color:#41b39c;background:#e0f7ee;color:#145d4f}.answer.incorrect{border-color:#ec729b;background:#ffeff5;color:#ad335c}.answer:disabled{opacity:1;cursor:default}.feedback{padding:13px 16px;border-radius:13px;margin-top:16px;line-height:1.5;font-size:14px;border:1px solid #d1dfee;background:#f0f7ff;color:#284766}.feedback.ok{background:#e8fbf3;border-color:#b9e8d2;color:#176d58}.feedback.no{background:#fff0f4;border-color:#ffc7d6;color:#8e3756}.progress-slim{height:11px;border-radius:20px;background:#e6edf8;overflow:hidden;margin:16px 0 7px}.progress-slim>div{height:100%;background:linear-gradient(90deg,#4168dc,#19b7a7);border-radius:20px;transition:width .4s}.aside-heading{font-size:12px;font-weight:950;letter-spacing:.14em;color:#7890b5}.little-list{padding:0;list-style:none;display:grid;gap:12px;margin:22px 0}.little-list li{display:flex;gap:9px;font-size:13px;line-height:1.5;color:#4d6384}.bubble{height:26px;min-width:26px;display:grid;place-items:center;border-radius:10px;background:#dfeafe;color:#3f64b0;font-size:12px;font-weight:900}.score-big{font-size:34px;font-weight:950;letter-spacing:-.05em;color:#2d52ad;margin:5px 0}.note{font-size:12px;color:#637593;line-height:1.6}.builder-top{padding:26px 30px 12px}.builder-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px}.builder-board{padding:18px;overflow:hidden}.network-board{width:100%;aspect-ratio:860/520;background:linear-gradient(155deg,#e8f3ff,#f4fbff 60%,#f2f8ea);border:2px dashed #bad3ee;border-radius:19px;position:relative;overflow:hidden}.network-board:before{content:"";background-image:linear-gradient(#a8c8e92b 1px,transparent 1px),linear-gradient(90deg,#a8c8e92b 1px,transparent 1px);background-size:28px 28px;position:absolute;inset:0;pointer-events:none}.wire-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.wire-layer line{stroke:#3476d7;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 2px 1px #96b9e6);stroke-dasharray:1 0}.wire-layer line.wire-wireless{stroke:#19b69f;stroke-dasharray:12 10}.wire-layer line.wire-off{stroke:#e2a9ac}.netnode{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:clamp(68px,11%,100px);min-height:76px;border:2.5px solid #b5cbea;box-shadow:0 5px 0 #b1c4db;background:white;border-radius:15px;padding:8px 5px;display:flex;align-items:center;flex-direction:column;gap:3px;color:#2c4776;z-index:3;transition:transform .13s,border-color .13s}.netnode svg{width:35px;height:35px}.netnode span{font-size:10px;font-weight:950;text-transform:uppercase;line-height:1.15}.netnode small{font-size:9px;color:#6c7f9d}.netnode.selected{border-color:#ffb922;background:#fff9e3;box-shadow:0 5px 0 #e4bd67;transform:translate(-50%,-52%) scale(1.07)}.netnode:focus-visible{z-index:10}.netnode:hover{transform:translate(-50%,-53%)}.netnode.dim{opacity:.65}.board-caption{font-size:12px;color:#5c708e;margin-top:13px;line-height:1.5}.step-index{font-size:12px;font-weight:900;color:#4370ba;margin-bottom:8px}.board-aside{padding:24px}.board-aside h3{font-size:21px;line-height:1.25}.checklist{padding:0;list-style:none;display:grid;gap:9px;margin:15px 0}.checklist li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5}.checklist li:before{content:'○';font-size:19px;color:#8eabc9;line-height:1}.checklist li.met:before{content:'✓';color:#16a483;font-size:16px;font-weight:950}.test-status{padding:12px;border:1px solid #cbdcf4;border-radius:13px;background:#f5f9ff;font-size:13px;line-height:1.5;margin-top:12px}.test-status.ok{background:#e2f9ef;border-color:#9edfc5}.test-status.fail{background:#fff1f2;border-color:#ffccd1}.test-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.builder-guide{font-size:13px;background:#fff8df;border-radius:11px;padding:13px;line-height:1.45;color:#75531a;margin-top:15px}.diag-shell{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:18px}.scenario{padding:27px 29px}.test-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:16px 0}.test-item{background:#eff5ff;border:2px solid #d3e2fb;border-radius:12px;padding:13px 10px;text-align:left;font-weight:850;color:#385785;min-height:88px}.test-item:hover{border-color:#6f9be8}.test-item.revealed{background:#ecf9f2;border-color:#86cbb5}.test-item .result{display:block;font-size:12px;margin-top:9px;font-weight:800;color:#176c56}.test-item .result.fail{color:#b34d6c}.diagnosis-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.diag-option{border:2px solid #d7e4f7;border-radius:13px;padding:15px;background:white;text-align:left;font-size:13px;font-weight:800;color:#355376;line-height:1.45}.diag-option:hover{background:#f5f9ff;border-color:#8aa9ed}.diag-option.correct{border-color:#2fbb95;background:#e7fff2}.diag-option.incorrect{border-color:#f49eb8;background:#fff0f4}.case-status{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:0 0 19px}.evidence-note{border:1px solid #bedaf3;padding:14px 17px;border-radius:14px;background:#f0f8ff;color:#476180;font-size:13px;line-height:1.6}.completed-screen{padding:40px clamp(25px,5vw,58px);text-align:center;overflow:hidden;position:relative}.completed-screen:before,.completed-screen:after{content:'★';position:absolute;font-size:90px;color:#ffe2a4;opacity:.5;left:2%;top:0;transform:rotate(-12deg)}.completed-screen:after{left:auto;right:3%;top:20%;color:#c6f3ed;transform:rotate(15deg)}.big-illustration{font-size:75px;line-height:1.2;margin:0 auto 8px}.score-circle{height:124px;width:124px;border-radius:50%;border:9px solid #bce9db;background:#e7fff6;margin:20px auto;display:flex;align-items:center;justify-content:center;flex-direction:column}.score-circle strong{font-size:31px;color:#127c6a}.score-circle small{font-size:11px;color:#42675d;font-weight:900}.evidence-tile{background:#eff6ff;border:1px solid #cdddff;border-radius:14px;padding:16px 20px;text-align:left;max-width:730px;margin:22px auto}.evidence-tile strong{display:block;margin-bottom:8px}.evidence-tile p{margin:5px 0;color:#4c6484;line-height:1.5;font-size:14px}.evidence-tile ul{margin:7px 0;padding-left:20px;font-size:13px;line-height:1.6;color:#4c6484}.check-option{display:flex;gap:11px;align-items:center;padding:13px 15px;border:2px solid #d5e2f5;border-radius:12px;background:#fff;font-size:13px;font-weight:760;line-height:1.4}.check-option input{width:19px;height:19px;accent-color:#456cdd;flex-shrink:0}.check-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.hero-stripe{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}.progress-badge{color:#2f658d;background:#e8f4ff;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900}.footer{display:flex;justify-content:space-between;gap:12px;margin-top:23px;color:#506989;font-size:11px;font-weight:900;letter-spacing:.08em;line-height:1.5;border-top:2px solid #d3e2f4;padding-top:17px}.footer i{color:#ef72a0;font-style:normal;padding:0 6px}.modal-backdrop{position:fixed;inset:0;background:#0a214c9c;display:grid;place-items:center;z-index:50;padding:18px}.modal-backdrop.hidden{display:none}.modal{width:min(500px,100%);position:relative;border-radius:22px;background:white;padding:28px;box-shadow:0 25px 70px #0b244458}.modal h2{font-size:27px;margin:4px 0 15px}.modal p,.modal li{font-size:14px;line-height:1.6}.modal-close{position:absolute;right:15px;top:10px;background:#eff4fd;border:0;border-radius:50%;width:34px;height:34px;font-size:25px;color:#384f70}.teacher-code{border:2px solid #c9d8ec;border-radius:12px;padding:10px 13px;width:100%;margin:8px 0;font-size:15px}.hidden{display:none!important}.sr-only{position:absolute;left:-9999px}.keyline{background:#ffefbd;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:850;color:#886316}.fade-in{animation:rise .3s ease both}
@media (max-width:850px){.welcome{grid-template-columns:1fr}.welcome-art{min-height:240px}.welcome-art > svg{max-height:300px}.panel-layout,.builder-layout,.diag-shell{grid-template-columns:1fr}.panel-aside{display:none}.builder-board{order:1}.board-aside{order:0}.board-aside h3{margin:5px 0}.builder-board{padding:10px}.network-board{min-height:310px}.test-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.app-shell{padding:12px}.brand-mark{height:37px;width:37px}.brand b{font-size:11px}.brand span{font-size:8px}.sound-status{display:none}.progress-trail{gap:4px;margin:10px -6px 18px}.trail-line{width:2%}.trail-item{gap:3px;font-size:8px}.trail-num{height:22px;min-width:22px;font-size:9px}.welcome-copy{padding:24px 18px}.welcome{min-height:unset}.welcome-art{min-height:195px}.welcome-art > svg{max-height:210px}.swoosh{font-size:10px;padding:8px;right:10px;bottom:10px}.panel-main,.scenario{padding:20px 15px}.answer-grid,.diagnosis-choices,.check-options{grid-template-columns:1fr}.question-visual{height:150px}.builder-top{padding:20px 15px 9px}.network-board{min-height:244px}.netnode{min-height:52px;padding:4px 2px;border-radius:10px;border-width:2px;box-shadow:0 3px 0 #b1c4db}.netnode svg{height:25px;width:25px}.netnode span{font-size:8px}.netnode small{display:none}.board-aside{padding:18px}.test-list{grid-template-columns:1fr}.test-item{min-height:45px}.test-item .result{display:inline;margin-left:8px}.footer{font-size:9px}.footer span:last-child{display:none}.completed-screen{padding:24px 12px}.mini-skills{margin-top:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}