:root{
  --page:#F4F2FB; --card:#fff; --ink:#17152B; --muted:#6B6885; --line:#E2DEF2;
  --accent:#5B3DF5; --accent-d:#4528D6; --hot:#FF5C7A; --ok:#12A594; --warn:#F5A524;
  --r-lg:22px; --r-md:12px; --r-sm:8px;
}
@media (prefers-color-scheme:dark){:root{
  --page:#100F1E; --card:#1A1930; --ink:#EEEBFF; --muted:#9E9BBD; --line:#2C2A4A; --accent:#8B73FF; --accent-d:#7A5FFF;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.55 Manrope,system-ui,sans-serif;min-height:100vh}
h1,h2,h3{font-family:Unbounded,Manrope,sans-serif;font-weight:700;line-height:1.15;margin:0}
h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em}
h2{font-size:1.5rem}h3{font-size:1.05rem}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,40px)}
.logo{font:700 1.4rem Unbounded;color:var(--ink);text-decoration:none;cursor:pointer}
.logo i{display:inline-block;width:.5em;height:.18em;background:var(--hot);margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.logo i{animation:none}}
.who{display:flex;gap:12px;align-items:center;font-size:.9rem;color:var(--muted)}
.wrap{max-width:820px;margin:0 auto;padding:12px clamp(16px,4vw,32px) 80px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.stack>*+*{margin-top:18px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.muted{color:var(--muted);font-size:.92rem}

/* кнопки и поля */
button,.btn{font:700 .95rem Manrope;border:0;border-radius:var(--r-md);padding:11px 18px;background:var(--accent);color:#fff;cursor:pointer;transition:background .15s,transform .1s}
button:hover{background:var(--accent-d)}button:active{transform:scale(.97)}
button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}
button.danger{background:transparent;color:var(--hot);border:1.5px solid var(--line)}
button.danger:hover{border-color:var(--hot)}
button.sm{padding:6px 11px;font-size:.82rem}
input,textarea,select{width:100%;font:inherit;color:var(--ink);background:var(--page);border:1.5px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
input:focus,textarea:focus,select:focus{border-color:var(--accent);outline:none}
input[type=radio],input[type=checkbox]{width:20px;height:20px;accent-color:var(--accent);flex:none}
textarea{min-height:110px;resize:vertical}
label.f{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
.err{color:var(--hot);font-weight:700;font-size:.9rem;min-height:1.3em}

/* вход */
.hero{display:grid;gap:36px;grid-template-columns:1.15fr 1fr;align-items:center;max-width:1040px;margin:4vh auto 0;padding:0 clamp(16px,4vw,32px)}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.hero p{font-size:1.1rem;color:var(--muted);max-width:44ch;margin:18px 0 0}
.tabs{display:flex;gap:4px;background:var(--page);padding:4px;border-radius:var(--r-md);margin-bottom:20px}
.tabs button{flex:1;background:transparent;color:var(--muted)}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px #0002}

/* панель */
.test-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.test-row:first-of-type{border-top:0}
.badge{font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--page);border:1px solid var(--line);color:var(--muted)}

/* конструктор: цвет полосы = тип вопроса */
.q{border-left:6px solid var(--c,var(--accent));border-radius:var(--r-md) var(--r-lg) var(--r-lg) var(--r-md)}
.t-single{--c:#5B3DF5}.t-wires{--c:#3B9BFF}.t-short{--c:#F5A524}.t-long{--c:#FF5C7A}
.qhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px}
.qtype{font-weight:700;font-size:.88rem;color:var(--c)}
.opt{display:flex;gap:10px;align-items:center;margin-top:8px}
.addq{display:flex;gap:8px;flex-wrap:wrap}
.addq button{background:var(--card);color:var(--ink);border:1.5px dashed var(--c);}
.addq button:hover{background:var(--c);color:#fff}
.pts{width:76px}
.link{display:flex;gap:8px;margin-top:6px}.link input{font-size:.85rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{display:inline-flex;gap:8px;align-items:center;background:var(--page);border:1px solid var(--line);padding:4px 6px 4px 12px;border-radius:99px;font-size:.85rem}
.chip button{padding:0 8px;background:none;color:var(--hot);font-size:1.1rem}
.choice{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-md);margin-top:8px;cursor:pointer}
.choice:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.sticky{position:sticky;bottom:0;padding:14px 0;background:linear-gradient(transparent,var(--page) 40%);display:flex;gap:10px;justify-content:flex-end}
.score{font:700 3rem Unbounded;color:var(--accent)}
.ans{padding:10px 14px;border-radius:var(--r-sm);background:var(--page);margin-top:6px;white-space:pre-wrap}
.ok{color:var(--ok)}.bad{color:var(--hot)}
details{border-top:1px solid var(--line);padding:14px 0}summary{cursor:pointer;font-weight:700}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--ink);color:var(--page);padding:12px 20px;border-radius:99px;font-weight:700;opacity:0;transition:.25s;z-index:9}
#toast.show{transform:translate(-50%,0);opacity:1}

/* сопоставление в стиле blueprint */
.bp{position:relative;display:flex;justify-content:space-between;gap:clamp(56px,16vw,170px);margin-top:12px;padding:22px 24px;border-radius:var(--r-md);background-color:#13121F;
  background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:24px 24px;user-select:none;-webkit-user-select:none}
.bp .col{flex:1;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2;min-width:0}
.bp .col.one{justify-content:center}
.bp .wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.wires path{fill:none;stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 6px currentColor)}
.wires path.tmp{stroke-dasharray:2 9;opacity:.85}
.bp .node{position:relative;display:flex;align-items:center;padding:12px 16px;border-radius:10px;background:#25233B;color:#EEEBFF;font-weight:700;font-size:.92rem;
  border:1.5px solid #3A3760;transition:border-color .2s,box-shadow .2s;overflow-wrap:anywhere}
.bp .node.l{padding-right:22px}.bp .node.r{padding-left:22px}
.bp .node.on{border-color:var(--pc);box-shadow:0 0 14px color-mix(in srgb,var(--pc) 45%,transparent)}
.bp .node.hover{border-color:#fff}
.bp .pin{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2.5px solid var(--pc,#8C89B5);background:#13121F;cursor:crosshair;touch-action:none;transition:background .2s,box-shadow .2s}
.bp .pin::after{content:"";position:absolute;inset:-12px}
.bp .pin.out{right:-9px}.bp .pin.in{left:-9px}
.bp .node.on .pin{background:var(--pc);box-shadow:0 0 12px var(--pc)}
.bp .node.hover .pin{border-color:#fff}
@media(max-width:560px){.bp{padding:16px 14px}}