/* Визуальная система «Профиль»: бумага, чернила, мох; лимонный маркер — «вы здесь» */
:root{
--paper:#F2F3EE; --surface:#FFFFFF; --ink:#16231C; --ink-2:#56635B; --ink-3:#86918A; --line:#DCE0D6;
--moss:#2F6A4D; --moss-soft:#E1ECE4; --citron:#D9F06A; --amber:#B86E00; --amber-soft:#FBEBCB;
--graphite:var(--ink); --graphite-2:var(--ink-2); --stroke:var(--line); --white:#FFFFFF;
--red:var(--ink); --violet:var(--moss); --red-l:var(--amber); --red-l2:var(--amber-soft); --violet-l:var(--moss); --violet-l2:var(--moss-soft);
--red-bg:var(--amber-soft); --red-web:var(--amber-soft); --violet-bg:var(--moss-soft); --violet-web:var(--moss-soft); --plate:var(--surface); --plate-2:var(--paper);
--bg:var(--paper); --text:var(--ink); --text-2:var(--ink-2);
--font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--display:"Unbounded","Golos Text",system-ui,sans-serif;
--r-xl:24px; --r-l:18px; --r-m:14px; --r-s:10px;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--paper:#0F1612; --surface:#18221C; --ink:#E7ECE5; --ink-2:#A3AEA6; --ink-3:#76817A; --line:#2A362F;
--moss:#7CC79C; --moss-soft:#1F3328; --citron:#D9F06A; --amber:#F0B551; --amber-soft:#3A2D13;
}
}
:root[data-theme="dark"]{
--paper:#0F1612; --surface:#18221C; --ink:#E7ECE5; --ink-2:#A3AEA6; --ink-3:#76817A; --line:#2A362F;
--moss:#7CC79C; --moss-soft:#1F3328; --citron:#D9F06A; --amber:#F0B551; --amber-soft:#3A2D13;
}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3,p{margin:0}
h1{font-weight:500;font-size:clamp(36px,5vw,60px);line-height:.95;letter-spacing:-.02em}
h2{font-weight:500;font-size:30px;line-height:1.05;letter-spacing:-.01em}
h3{font-weight:500;font-size:20px;line-height:1.2}
.t2{color:var(--text-2)}
.c1{font-size:14px;color:var(--text-2);line-height:1.4}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:12px}
/* теги по шаблону */
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 14px;font-size:15px;line-height:1.2;white-space:nowrap}
.tag.n{background:var(--violet-web);color:var(--violet)}
.tag.a{background:var(--red);color:#fff}
.tag.o{border:1.5px solid var(--stroke);color:var(--text)}
.tag.s{padding:3px 10px;font-size:13px}
.filters .tag.s{white-space:normal}
.proof .tag[aria-pressed="true"]{background:var(--violet-web);color:var(--violet);border-color:transparent}
button.tag.o:hover{border-color:var(--violet)}
button.tag[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
/* шапка */
.hero{padding:48px 0 28px}
.hero .lead{font-size:20px;line-height:1.4;color:var(--text-2);margin-top:16px;max-width:52ch}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--stroke)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:68px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tabs button{border-radius:999px;padding:9px 16px;font-size:15px;color:var(--text-2);background:var(--plate);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--graphite);color:#fff}
:root[data-theme="dark"] .tabs button[aria-selected="true"]{background:#fff;color:var(--graphite)}
.lvl-pick{display:flex;align-items:center;gap:8px}
.lvl-pick select{font:inherit;font-size:15px;font-weight:500;color:#fff;background:var(--red);border:0;border-radius:999px;padding:9px 14px}
.round{width:40px;height:40px;border-radius:50%;background:var(--plate);display:grid;place-items:center;flex:none}
.round svg{width:18px;height:18px}
/* панели */
.panel{display:none;padding:36px 0 8px}
.panel.on{display:block}
.intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.intro p{max-width:58ch;margin-top:10px}
.plate{background:var(--plate);border-radius:var(--r-l);padding:22px}
.card{border:1.5px solid var(--stroke);border-radius:var(--r-l);padding:22px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.hint{margin:12px 0 0}
/* задачи */
.stage{margin-top:28px}
.stage > .c1{margin-top:2px}
.list{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.item{background:var(--plate);border-radius:var(--r-m);overflow:hidden}
.item > button{width:100%;text-align:left;display:flex;gap:14px;align-items:center;padding:16px 18px}
.item > button .x{flex:1;min-width:0;font-size:16px;line-height:1.35}
.item > button .tag.n{width:118px;justify-content:center;flex:none}
.item > button .c1{flex:none;width:150px;text-align:right}
.item > button .chev{width:20px;height:20px;flex:none;color:var(--text-2);transition:transform .2s}
.item.open > button .chev{transform:rotate(180deg)}
.item.later{background:transparent;border:1.5px dashed var(--stroke)}
.item.later .x{color:var(--text-2)}
.det{padding:0 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.det .box{background:var(--bg);border-radius:var(--r-s);padding:16px}
.arrow{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.arrow li{display:grid;grid-template-columns:22px 1fr;gap:6px;font-size:15px;line-height:1.4}
.arrow li::before{content:"";width:14px;height:14px;margin-top:4px;background:var(--red);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.skl{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--stroke);font-size:15px}
.skl:last-child{border-bottom:0}
.more-btn{margin-top:16px;color:var(--violet);font-size:15px}
.tdesc{margin-top:8px;font-size:15px;line-height:1.45}
.ai-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-h h3{font-size:17px;margin-right:auto}
.prompts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.prompt{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--plate);border-radius:var(--r-s);padding:12px 14px;font-size:15px;line-height:1.4}
.prompt .tag{width:118px;justify-content:center}
.check-ai{margin-top:12px}
.check-ai b{font-weight:500;color:var(--text)}
.exc{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--stroke);font-size:14px}
.exc:first-of-type{border-top:0}
.linkish{color:var(--violet);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.exc .linkish{font-size:14px;text-align:left}
.tag.top{vertical-align:2px;margin-left:6px}
/* шкала уровня */
.skl-r{display:flex;align-items:center;gap:10px}
.skl-r .mk{width:76px;display:flex;justify-content:flex-end}
.skl .c1{white-space:nowrap;text-align:right;width:190px}
.lvl{display:inline-grid;grid-template-columns:44px 96px;align-items:center;column-gap:10px;white-space:nowrap;font-size:14px;color:var(--text-2);flex:none}
.dots{display:inline-flex;gap:3px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--stroke)}
.dots i.on{background:var(--violet)}
/* навыки */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.sgroup{padding:20px 22px}
.srow{border-top:1px solid var(--stroke)}
.srow:first-of-type{border-top:0}
.srow > button{width:100%;text-align:left;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;font-size:15px;line-height:1.35}
.srow .body{padding:0 0 14px;font-size:14px;color:var(--text-2);display:flex;flex-direction:column;gap:8px}
.scale-box{margin-top:16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.scale-box div{background:var(--plate);border-radius:var(--r-s);padding:12px;font-size:13px;color:var(--text-2);line-height:1.35}
.scale-box b{display:block;font-weight:500;font-size:15px;color:var(--text);margin:6px 0 2px}
details.disc > summary{cursor:pointer;color:var(--violet);font-size:15px;list-style:none}
details.disc > summary::-webkit-details-marker{display:none}
/* AI-покрытие навыка */
.ai{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.02em;flex:none}
.ai svg{width:14px;height:14px}
.ai-partial{background:var(--violet);color:#fff}
.ai-speeds{background:var(--violet-web);color:var(--violet)}
.ai-human{border:1.5px solid var(--stroke);color:var(--text-2)}
.srow .rt{display:flex;align-items:center;gap:12px;flex:none}
.ai-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ai-legend button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--stroke);border-radius:999px;padding:4px 14px 4px 4px;font-size:15px}
.ai-legend button[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-web)}
.ai-legend .cnt{color:var(--text-2);font-size:14px}
.ai-note{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border-radius:var(--r-s);padding:10px 12px;color:var(--text)}
.ai-note b{font-weight:500}
.tool-box{display:flex;flex-direction:column;gap:8px;background:var(--bg);border-radius:var(--r-s);padding:12px}
.tool{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;color:var(--text)}
.tool .tag{justify-content:center;min-width:132px}
.tt-h{display:flex;align-items:center;gap:10px;justify-content:space-between}
.trow{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--stroke);font-size:14px;line-height:1.4}
.trow:first-child{border-top:0}
.trow .tn{font-weight:500}
.note-hr{background:var(--red-web);border-radius:var(--r-m);padding:14px 18px;font-size:14px;line-height:1.45}
.note-hr b{font-weight:500}
/* профессии */
.prof-sw{margin-bottom:22px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--violet);font-size:15px;margin-bottom:20px}
.back svg{width:18px;height:18px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding-bottom:24px}
.cat-card{text-align:left;background:var(--plate);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-height:250px;border:1.5px solid transparent}
button.cat-card:hover{border-color:var(--violet)}
.cat-card h3{font-size:24px}
.cat-card.soon{background:transparent;border:1.5px dashed var(--stroke)}
.cat-card.soon h3,.cat-card.soon p{color:var(--text-2)}
.cat-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--text-2);margin-top:auto}
.cat-go{color:var(--red);font-weight:500}
.cat-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:4px 0 8px}
.cat-hint{flex-basis:100%}
.cat-group{padding-top:28px}
.cat-gh{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.cat-gh h2{font-size:26px}
.cat-card .c1{line-height:1.4}
/* сравнение */
.cmp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.big-s{font-weight:500;font-size:48px;line-height:1;letter-spacing:-.02em}
.cmp-stats p{margin-top:6px}
.cmp-sk{display:grid;grid-template-columns:1fr 170px 170px;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--stroke);font-size:15px}
.cmp-sk:last-child{border-bottom:0}
.cmp-sk.h{font-size:13px;color:var(--text-2);padding-top:12px}
/* рост */
.cmp{display:flex;flex-direction:column;gap:8px}
.cmp-row{display:grid;grid-template-columns:180px 1fr 1fr;gap:16px;padding:14px 18px;background:var(--plate);border-radius:var(--r-m);font-size:15px;line-height:1.4}
.cmp-row.h{background:transparent;padding-top:0;padding-bottom:0;font-size:14px;color:var(--text-2)}
.cmp-row .k{color:var(--text-2)}
.cmp-row .nx{color:var(--text)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.check{display:flex;gap:12px;align-items:flex-start;padding:10px 0;font-size:15px;line-height:1.4;border-bottom:1px solid var(--stroke)}
.check:last-child{border-bottom:0}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--violet);flex:none}
/* проверка себя */
.self{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.rate{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--stroke)}
.rate:first-of-type{border-top:0}
.rate .x{font-size:15px;line-height:1.35}
.rate .x small{display:block;font-size:13px;color:var(--text-2)}
.seg{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px;gap:2px;flex:none}
.seg button{width:34px;height:30px;border-radius:999px;font-size:14px;color:var(--text-2);position:relative}
.seg button.need::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--red)}
.seg button[aria-checked="true"]{background:var(--violet);color:#fff}
.res{position:sticky;top:92px;display:flex;flex-direction:column;gap:16px}
.big{font-weight:500;font-size:64px;line-height:.9;letter-spacing:-.03em}
.bar{height:8px;border-radius:999px;background:var(--violet-web);overflow:hidden}
.bar i{display:block;height:100%;background:var(--violet);border-radius:999px}
.step{background:var(--bg);border-radius:var(--r-s);padding:14px 16px;font-size:14px;line-height:1.4}
.step b{display:block;font-weight:500;font-size:15px;margin-bottom:4px}
.proof{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* о профессии */
.dom{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--stroke);font-size:15px}
.dom:last-child{border-bottom:0}
details.acc{border-bottom:1px solid var(--stroke)}
details.acc > summary{cursor:pointer;padding:14px 0;font-weight:500;list-style:none;display:flex;justify-content:space-between}
details.acc > summary::after{content:"+";color:var(--violet);font-size:20px;line-height:1}
details.acc[open] > summary::after{content:"−"}
details.acc p,details.acc .in{padding:0 0 14px;font-size:15px;color:var(--text-2)}
.pole{display:flex;justify-content:space-between;font-weight:500;margin-bottom:6px}
.axis{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--red-l2),var(--plate-2) 50%,var(--violet-bg))}
footer{margin-top:64px;padding:28px 0 48px;border-top:1px solid var(--stroke)}
footer p{font-size:14px;color:var(--text-2);max-width:70ch}
footer p+p{margin-top:6px}
@media (max-width:900px){
.sgrid,.self,.two,.det{grid-template-columns:minmax(0,1fr)}
.res{position:static;order:-1}
.scale-box{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
.cmp-stats{grid-template-columns:1fr}
.cmp-sk{grid-template-columns:1fr}
.cmp-sk.h{display:none}
.cat-card h3{font-size:20px}
.prompt{grid-template-columns:1fr}
.prompt .tag{justify-self:start}
.trow{grid-template-columns:1fr;gap:2px}
.tool{grid-template-columns:1fr;gap:4px}
.tool .tag{justify-self:start;min-width:0}
.det{padding:0 12px 12px;gap:12px}
.det .skl{grid-template-columns:1fr;gap:6px}
.det .skl-r{justify-content:flex-start}
.det .skl-r .mk{width:auto;order:2}
.srow > button{flex-direction:column;align-items:flex-start;gap:6px}
.ai-legend button{font-size:14px}
.item > button .c1{display:none}
.item > button .tag.n{width:108px}
.item > button{flex-wrap:wrap;row-gap:8px}
.item > button .x{flex:1 1 calc(100% - 40px);order:1}
.item > button .chev{order:2}
.item > button .tag.n{order:3}
.lvl{grid-template-columns:44px 88px}
.skl .c1{width:auto;white-space:normal}
#p-growth .skl{grid-template-columns:1fr;gap:2px}
#p-growth .skl .c1{text-align:left}
body{font-size:15px}
.hero .lead{font-size:17px}
h2{font-size:25px}
.cmp-row{grid-template-columns:1fr;gap:4px}
.cmp-row.h{display:none}
.cmp-row .cu::before{content:"Сейчас: ";color:var(--text-2)}
.cmp-row .nx::before{content:"Дальше: ";color:var(--moss)}
.rate{flex-direction:column;align-items:flex-start}
.seg button{width:40px;height:34px}
.top .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px}
.tabs{order:3;flex-basis:100%}
.lvl-pick{flex:1}
.lvl-pick select{flex:1}
.scale-box{grid-template-columns:1fr}
}
/* ===== Каталог и сравнение ===== */
.search{display:flex;align-items:center;gap:12px;margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0 18px;max-width:760px}
.search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--moss-soft)}
.search svg{width:20px;height:20px;color:var(--ink-2);flex:none}
.search input{flex:1;border:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);padding:16px 0;min-width:0}
.search input:focus{outline:none}
.cat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:36px;align-items:start;padding-bottom:96px}
.facets{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.ffold > summary{display:none}
.fbox > summary{cursor:pointer;font-weight:600;list-style:none;margin-bottom:10px}
.fbox > summary::-webkit-details-marker{display:none}
.fam-list{display:flex;flex-direction:column}
.fam-list button{display:flex;justify-content:space-between;gap:10px;text-align:left;padding:7px 10px;border-radius:10px;font-size:15px;color:var(--ink-2)}
.fam-list button:hover{background:var(--surface)}
.fam-list button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.fam-list button.zero{opacity:.45}
.fam-list .n{font-size:13px;opacity:.8}
.fswitch{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.fswitch input{width:18px;height:18px;margin-top:2px;accent-color:var(--moss)}
.res-head{font-size:14px;color:var(--ink-2);margin-bottom:6px;min-height:20px}
.fam-sec{margin-bottom:28px}
.fam-sec .cat-gh{margin-bottom:4px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:12px}
.prow:hover{background:var(--surface)}
.prow:focus-visible{outline:2px solid var(--moss)}
.ptitle{font-weight:600;font-size:17px;letter-spacing:-.01em}
.pshort{margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pshort b{font-weight:600;color:var(--ink)}
.pmeta{display:flex;align-items:center;gap:16px}
.pmeta .c1:first-child{width:170px;text-align:right;line-height:1.3}
.pmeta .c1:nth-child(2){width:84px;text-align:right}
.badge-full{display:inline-block;vertical-align:2px;margin-left:8px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--citron);color:#16231C}
.cmp-add{font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);white-space:nowrap;width:118px}
.cmp-add:hover{border-color:var(--ink)}
.cmp-add[aria-pressed="true"]{background:var(--moss);border-color:var(--moss);color:#fff}
.cmp-add:disabled{opacity:.4;cursor:not-allowed}
.empty{padding:32px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tray{position:fixed;left:0;right:0;bottom:16px;z-index:30;pointer-events:none}
.tray-in{pointer-events:auto;display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--ink);color:var(--paper);border-radius:18px;padding:10px 12px 10px 18px;box-shadow:0 10px 30px rgba(10,20,15,.25)}
.tray-in .c1{color:inherit;opacity:.7;margin-right:4px}
.tray-l{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.tray-r{display:flex;gap:8px;flex:none}
.tray-chip{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--paper) 14%,transparent);border-radius:999px;padding:4px 6px 4px 12px;font-size:14px}
.tray-chip button{width:22px;height:22px;border-radius:50%;line-height:1;font-size:16px}
.tray-chip.big{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:15px;padding:6px 8px 6px 14px}
.tray-clear{font-size:14px;opacity:.8;padding:8px 10px}
.tray-go{background:var(--citron);color:#16231C;font-weight:600;border-radius:12px;padding:10px 16px;font-size:15px}
.tray-go:disabled{opacity:.6;cursor:default}
.note-basic{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:14px 18px;font-size:15px;margin-bottom:28px}
.note-basic b{font-weight:600}
.basic-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:36px;align-items:start;padding-bottom:96px}
.dgroup{margin-bottom:12px;padding:16px 20px}
.dgroup h3{font-size:16px;margin-bottom:6px}
.srow-b{padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.near{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.near .linkish{text-align:left;font-size:16px;font-weight:500}
.near .c1{grid-column:1}
.near .tag{grid-row:1/3;grid-column:2}
.add-prof input{font:inherit;font-size:15px;padding:8px 14px;border-radius:999px;border:1px dashed var(--ink-3);background:transparent;color:var(--ink);width:240px}
.pairs{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:32px;overflow-x:auto}
.pair-grid{display:grid;gap:4px;margin-top:14px;align-items:center}
.pg-h{font-size:13px;color:var(--ink-2);text-align:center;line-height:1.2}
.pg-h.l{text-align:left;font-size:14px;color:var(--ink)}
.pg-c{text-align:center;padding:10px 0;border-radius:8px;font-weight:600;font-size:14px;background:color-mix(in srgb,var(--moss) calc(var(--v) * 85%),var(--paper));color:var(--ink)}
.pg-c.self{background:transparent;color:var(--ink-3)}
.mx-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.toggle-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px}
.toggle-seg button{padding:7px 14px;border-radius:999px;font-size:14px;color:var(--ink-2)}
.toggle-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.mx{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow-x:auto;margin-bottom:96px}
.mx-row{display:grid;gap:8px;align-items:center;padding:9px 18px;border-top:1px solid var(--line);font-size:15px;min-width:fit-content}
.mx-head{position:sticky;top:0;background:var(--surface);border-top:0;font-size:14px;font-weight:600;z-index:1;align-items:end}
.mx-head > span{display:flex;flex-direction:column;gap:2px}
.mx-head > span:not(:first-child){align-items:center;text-align:center}
.mx-head .linkish{font-size:14px;font-weight:600;line-height:1.2}
.mx-group{padding:14px 18px 6px;border-top:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink-2);background:var(--paper)}
.mx-c{display:flex;justify-content:center}
.mx-c i{display:block;width:14px;height:14px;border-radius:4px}
.mx-c i.yes{background:var(--moss)}
.mx-c i.no{border:1px solid var(--line)}
@media (max-width:900px){
.ffold > summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;font-weight:600;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.ffold > summary::after{content:'+';color:var(--moss)}
.ffold[open] > summary{margin-bottom:10px}
.ffold[open] > summary::after{content:'−'}
.cat-layout,.basic-grid{grid-template-columns:minmax(0,1fr);gap:20px}
.facets{position:static;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.fam-list{flex-direction:row;flex-wrap:wrap;gap:6px}
.fam-list button{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:14px}
.pmeta .c1:first-child{display:none}
}
@media (max-width:600px){
.prow{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 8px}
.pmeta{justify-content:space-between}
.pmeta .c1:nth-child(2){width:auto;text-align:left}
.pshort{white-space:normal}
.search input{font-size:16px}
.tray-in{flex-direction:column;align-items:stretch;border-radius:16px}
.tray-r{justify-content:space-between}
.tray{bottom:8px}
.add-prof input{width:100%}
.pg-h{font-size:11px;overflow-wrap:anywhere}
.pair-grid{gap:3px}
.mx-row{padding:9px 12px;font-size:14px}
}
#p-compare .tag{max-width:100%;white-space:normal;text-align:left}
.cmp-any{font:inherit;font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);max-width:100%}
/* ===== Редизайн: переопределения компонентов ===== */
body{font-feature-settings:"tnum" 1,"ss01" 1}
h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.4vw,64px);line-height:1;letter-spacing:-.035em}
h2{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.1;letter-spacing:-.025em}
h3{font-weight:600;font-size:18px;letter-spacing:-.01em}
.big,.big-s{font-family:var(--display);font-weight:500;letter-spacing:-.04em}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
a{color:inherit}
/* поверхности: белые листы на бумаге, тонкая линия вместо заливки */
.plate,.item,.cat-card,.scale-box div,.cmp-row:not(.h){background:var(--surface);border:1px solid var(--line)}
.card{border:1px solid var(--line);background:transparent}
.det .box,.step,.ai-note,.tool-box{background:var(--paper)}
.item{border-radius:var(--r-m)}
.item.later{background:transparent;border:1px dashed var(--line)}
/* шапка и вкладки */
.hero{padding:56px 0 32px}
.top{background:color-mix(in srgb,var(--paper) 88%,transparent);border-bottom:1px solid var(--line)}
.tabs{gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;flex:0 1 auto}
.tabs button{background:transparent;padding:8px 14px;color:var(--ink-2)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"],:root[data-theme="dark"] .tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.top .wrap{justify-content:space-between}
.lvl-pick select{background:var(--citron);color:#16231C;font-weight:600;padding:9px 34px 9px 16px;appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
.round{background:var(--surface);border:1px solid var(--line)}
/* теги */
.tag.n{background:var(--moss-soft);color:var(--moss)}
.tag.o{border:1px solid var(--line);background:var(--surface)}
button.tag.o:hover{border-color:var(--ink)}
.tag.a,button.tag[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.proof .tag[aria-pressed="true"]{background:var(--moss-soft);color:var(--moss)}
/* подпись уровня: «ступени» вместо точек — фирменный элемент */
.dots{gap:3px;align-items:flex-end;height:16px}
.dots i{width:5px;border-radius:1.5px;background:var(--line)}
.dots i:nth-child(1){height:6px} .dots i:nth-child(2){height:9px} .dots i:nth-child(3){height:12px} .dots i:nth-child(4){height:15px}
.dots i.on{background:var(--moss)}
.lvl{grid-template-columns:30px 96px}
/* ссылки и акценты */
.more-btn,.linkish,details.disc > summary,.back{color:var(--moss)}
.arrow li::before{background:var(--moss)}
details.acc > summary::after{color:var(--moss)}
.cat-go{color:var(--moss)}
/* AI-отметки */
.ai{border-radius:8px;font-family:var(--display);font-size:10px;font-weight:600}
.ai-partial{background:var(--ink);color:var(--citron)}
.ai-speeds{background:var(--moss-soft);color:var(--moss)}
.ai-human{border:1px solid var(--line);background:var(--surface)}
.ai-legend button{border:1px solid var(--line);background:var(--surface)}
.ai-legend button[aria-pressed="true"]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
/* проверка себя */
.seg{background:var(--paper);border:1px solid var(--line)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.seg button.need::after{background:var(--amber)}
.bar{background:var(--moss-soft);height:10px}
.bar i{background:var(--moss)}
.res{border:1px solid var(--line)}
.res .big{font-size:72px}
.check input{accent-color:var(--moss)}
/* каталог */
.cat-card{min-height:240px;transition:border-color .15s,transform .15s}
button.cat-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.cat-card h3{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:-.02em;line-height:1.15}
.cat-gh h2{font-size:22px}
.cat-gh{border-bottom:1px solid var(--line);padding-bottom:10px}
.cmp-stats .big-s{color:var(--moss)}
.axis{background:linear-gradient(90deg,var(--amber-soft),var(--line) 50%,var(--moss-soft));height:4px}
.note-hr{background:var(--amber-soft)}
footer{border-top:1px solid var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ai-partial{background:var(--moss);color:#0F1612}}
:root[data-theme="dark"] .ai-partial{background:var(--moss);color:#0F1612}
@media (prefers-reduced-motion: reduce){button.cat-card:hover{transform:none}}
@media (max-width:600px){
.hero{padding:32px 0 20px}
.tabs{border-radius:14px}
.lvl{grid-template-columns:30px 88px}
.res .big{font-size:56px}
}
/* ================= Бренд «Профиль» ================= */
:root{
--paper:#F6F0E6; --surface:#FFFCF6; --ink:#121A33; --ink-2:#555A6C; --ink-3:#8B8E9B; --line:#E6DCCB;
--moss:#1E4D3A; --moss-soft:#DCEADF; --citron:#DDF26B; --amber:#E0741B; --amber-soft:#FCE6CF;
--cobalt:#2C49F0; --berry:#8A1D45; --lav:#C8BEFF; --peach:#FFD9B8;
--glass:rgba(255,252,246,.66); --shadow:0 1px 0 rgba(18,26,51,.03),0 18px 40px -24px rgba(18,26,51,.35);
--serif:"Playfair Display",Georgia,serif; --r-xl:28px; --r-l:22px; --r-m:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--paper:#0D1122; --surface:#161B30; --ink:#F3EEE5; --ink-2:#AEB1C1; --ink-3:#7D8196; --line:#272D46;
--moss:#8FD3AE; --moss-soft:#18302A; --amber:#F3A15A; --amber-soft:#3A2614; --glass:rgba(22,27,48,.7);
--shadow:0 18px 40px -24px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{
--paper:#0D1122; --surface:#161B30; --ink:#F3EEE5; --ink-2:#AEB1C1; --ink-3:#7D8196; --line:#272D46;
--moss:#8FD3AE; --moss-soft:#18302A; --amber:#F3A15A; --amber-soft:#3A2614; --glass:rgba(22,27,48,.7);
--shadow:0 18px 40px -24px rgba(0,0,0,.8);
}
body{background:var(--paper);color:var(--ink)}
body{position:relative}
body::before{content:"";position:absolute;left:0;right:0;top:0;height:1100px;z-index:-1;pointer-events:none;
background:radial-gradient(60vw 40vw at 85% -5%,color-mix(in srgb,var(--peach) 70%,transparent),transparent 70%),
radial-gradient(50vw 36vw at -10% 30%,color-mix(in srgb,var(--lav) 45%,transparent),transparent 70%)}
:root[data-theme="dark"] body::before{opacity:.12}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::before{opacity:.12} }
/* бегущая строка */
.marq{background:var(--citron);color:#121A33;border-bottom:1.5px solid #121A33;overflow:hidden;white-space:nowrap;font-weight:600;font-size:14px}
.marq-in{display:inline-flex;gap:28px;padding:9px 0;animation:marq 38s linear infinite}
.marq-in span{display:inline-flex;gap:28px;align-items:center}
.marq-in i{font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marq-in{animation:none}}
/* шапка */
.site{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--ink);text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--citron);display:grid;place-items:center;font-size:18px;letter-spacing:0}
.pills{display:flex;gap:8px;align-items:center}
.pill{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);background:transparent;cursor:pointer}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill b{font-weight:700}
.site .round{border:1.5px solid var(--ink)}
/* hero каталога */
.cat-hero{position:relative;padding:8px 0 28px}
.wordmark{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--ink);line-height:.82;letter-spacing:-.045em;
font-size:100px;margin:6px 0 26px;white-space:nowrap;text-align:center}
.wm-in{display:inline-block;line-height:.86}
.wordmark{line-height:.86}
body:has(#catalog:not([hidden])) .brand-txt{display:none}
.wm-o{position:relative;display:inline-block}
.wm-o::after{content:"✦";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:.42em;color:var(--citron);
text-shadow:0 0 0 var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:stretch}
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:28px}
.hero-card .hero-h{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,38px);line-height:1.06;letter-spacing:-.035em}
.hero-card .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.hero-card h1 em,.serif{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em}
.hero-card .lead{margin-top:12px;max-width:52ch}
.hero-card .search{margin-top:20px;max-width:none}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.feat{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.feat svg{width:30px;height:30px}
.stat-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:var(--ink);color:var(--paper);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat-card::after{content:"✦";position:absolute;right:-30px;bottom:-60px;font-size:190px;line-height:1;color:var(--citron);opacity:.95}
.stat-card .k{font-family:var(--display);font-weight:800;font-size:clamp(44px,5vw,64px);letter-spacing:-.05em;line-height:.9}
.stat-card .stats{display:grid;grid-template-columns:repeat(3,auto);gap:18px;justify-content:start;position:relative;z-index:1}
.stat-card .stats p{font-size:13px;opacity:.75;margin-top:6px}
.stat-card .q{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.25;max-width:22ch;position:relative;z-index:1}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.btn-p{display:inline-flex;align-items:center;gap:10px;background:var(--citron);color:#121A33;border-radius:999px;padding:12px 20px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:14px}
.btn-o{display:inline-flex;align-items:center;gap:10px;border:1.5px solid currentColor;border-radius:999px;padding:11px 20px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:14px;color:inherit}
.btn-p svg,.btn-o svg{width:16px;height:16px}
/* полоса доверия */
.trust{background:var(--moss);color:#F6F0E6;border-radius:var(--r-l);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:14px 26px;margin:4px 0 36px;font-weight:500;font-size:15px}
:root[data-theme="dark"] .trust{background:#1E4D3A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .trust{background:#1E4D3A} }
.trust span{display:inline-flex;align-items:center;gap:10px}
.trust svg{width:18px;height:18px}
/* каталог */
.facets .fbox,.ffold>summary{border-radius:var(--r-l)}
.fam-list button{align-items:center}
.fam-list .dot{width:10px;height:10px;border-radius:50%;background:var(--fc);flex:none;margin-right:10px;box-shadow:0 0 0 2px color-mix(in srgb,var(--fc) 25%,transparent)}
.fam-list button>span:first-child{display:inline-flex;align-items:center}
.fam-list button[aria-checked="true"] .dot{box-shadow:0 0 0 2px var(--paper)}
.cat-gh{display:flex;align-items:center;gap:12px;border-bottom:1.5px solid var(--ink);padding-bottom:10px;margin-bottom:10px}
.cat-gh h2{display:inline-flex;align-items:center;gap:12px}
.cat-gh h2::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--fc);transform:rotate(45deg)}
.cat-gh .c1{border:1.5px solid var(--ink);border-radius:999px;padding:1px 10px;font-weight:600;color:var(--ink)}
.prow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:8px;padding:14px 18px 14px 22px;position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--fc)}
.prow:hover{background:var(--surface);transform:translateY(-1px);box-shadow:var(--shadow)}
.ptitle{font-weight:700;font-size:17px}
.more-btn{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:13px}
.tag.o{border-color:var(--ink)}
.tag.o:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.search{background:var(--surface);border:1.5px solid var(--ink);border-radius:999px}
.tray{border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.tray-go{background:var(--citron)!important;color:#121A33!important;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
/* профиль */
#hero{position:relative;padding:28px 0 30px}
.fam-chip{display:inline-flex;align-items:center;gap:8px;background:var(--fc);color:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin:14px 0 14px}
.fam-chip i{font-style:normal}
#title{font-family:var(--display);font-weight:800;letter-spacing:-.045em;font-size:clamp(38px,6.6vw,92px);line-height:.92;text-transform:none}
#mission{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,24px);color:var(--ink-2);max-width:40ch;margin-top:14px}
.top{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1.5px solid var(--ink)}
.tabs{border:1.5px solid var(--ink);background:var(--surface)}
.tabs button{font-weight:600}
.lvl-pick select{border:1.5px solid #121A33;border-radius:999px}
.plate,.item,.cat-card,.scale-box div,.cmp-row:not(.h){border-radius:var(--r-l);box-shadow:0 1px 0 rgba(18,26,51,.03)}
.card{border-radius:var(--r-l)}
.intro h2,.panel h2{letter-spacing:-.035em}
.big,.big-s{font-weight:800}
/* подвал */
footer{background:var(--ink);color:var(--paper);margin-top:72px;padding:48px 0 36px;overflow:hidden}
footer p{color:color-mix(in srgb,var(--paper) 70%,transparent);max-width:70ch}
.foot-wm{font-family:var(--display);font-weight:900;font-size:clamp(40px,8vw,118px);line-height:.86;letter-spacing:-.05em;color:var(--citron);margin-bottom:28px;white-space:nowrap;text-transform:uppercase}
.foot-wm span{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--paper) 45%,transparent)}
@media (max-width:900px){
.hero-grid{grid-template-columns:minmax(0,1fr)}
.feats{grid-template-columns:repeat(3,minmax(0,1fr))}
.site .pills .pill.hide-m{display:none}
.trust{justify-content:flex-start;font-size:14px}
}
@media (max-width:520px){
.glass,.stat-card{padding:20px}
.feat{font-size:11px}
.pill{padding:7px 12px;font-size:12px}
.brand-txt{display:none}
.stat-card .stats{gap:12px}
.stat-card::after{font-size:120px;right:-30px;bottom:-50px;opacity:.5}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== UX-слой ===== */
.brand-txt{font-family:var(--display);font-weight:900;letter-spacing:-.03em;font-size:19px;text-transform:uppercase}
.facets .tag,.facets .filters .tag{width:auto;justify-content:flex-start;text-align:left}
.facets .filters{justify-content:flex-start;flex-direction:row;flex-wrap:wrap;gap:6px}
.facets .filters .tag{white-space:nowrap}
.f-hint{font-size:13px;color:var(--ink-2);margin:2px 0 10px;line-height:1.35}
.pmeta{display:grid;grid-template-columns:190px 96px auto;align-items:center;gap:16px;justify-items:start;text-align:left}
.pmeta .c1,.pmeta .c1:first-child,.pmeta .c1:nth-child(2){text-align:left;width:auto}
@media (max-width:640px){.pmeta .c1:first-child{display:block}}
.pmeta>:last-child{justify-self:end}
@media (max-width:900px){.pmeta{grid-template-columns:auto auto 1fr;gap:12px}}
@media (max-width:520px){.pmeta{grid-template-columns:1fr auto}.pmeta>span:first-child{grid-column:1/-1}}
.list-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px 24px;margin:8px 0 18px}
.list-head h2{font-size:clamp(26px,3vw,36px)}
.list-head p{max-width:62ch}
.foot-line{font-size:15px}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.sub{margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 12px;font-size:14px;line-height:1.25}
.chip.strong{border-color:var(--ink);background:var(--surface);font-weight:600}
.ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.dif{padding:14px 0;border-bottom:1px solid var(--line)}.dif:last-child{border-bottom:0;padding-bottom:0}
.dif p{color:var(--ink-2);margin-top:4px;font-size:15px}
.dom-box{margin-bottom:16px}
.dom-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.dlegend{display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:var(--r-m);padding:14px 16px}
.dlegend div{display:grid;grid-template-columns:34px 84px 1fr;gap:10px;align-items:baseline;font-size:13.5px}
.dlegend span{color:var(--ink-2)}
.dbars{display:inline-flex;gap:3px;align-items:flex-end}
.dbars i{width:7px;border-radius:2px;background:var(--line)}
.dbars i:nth-child(1){height:7px}.dbars i:nth-child(2){height:11px}.dbars i:nth-child(3){height:15px}
.dbars i.on{background:var(--moss)}
.dlv{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;white-space:nowrap}
.drows{margin-top:22px;border-top:1.5px solid var(--ink)}
.drow{display:grid;grid-template-columns:240px minmax(0,1fr) 140px;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.drow:last-child{border-bottom:0}
.dk{display:flex;flex-direction:column;gap:4px}.dk span{font-size:13.5px;color:var(--ink-2)}
.dv.chips{margin-top:0}
.dlist{display:flex;flex-direction:column;gap:10px}
.dlist{grid-column:2/4}
.dlist div{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:20px;align-items:center}
.from{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:14px}
.from-i{background:var(--paper);border-radius:var(--r-m);padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.from-i p{color:var(--ink-2);font-size:14.5px}
.btn-line{margin-top:auto;font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding:2px 0}
.style-box{margin-top:16px}
.style-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:10px}
.how3{list-style:none;counter-reset:h;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.how3 li{counter-increment:h;position:relative;padding:3px 0 0 38px;min-height:26px;font-size:14.5px;color:var(--ink-2)}
.how3 li::before{content:counter(h);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700;font-size:13px}
.how3 b{color:var(--ink)}
.scales{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px;margin-top:12px}
.scale{background:var(--paper);border-radius:var(--r-m);padding:16px}
.sc-name{font-weight:600;margin-bottom:10px}
.sc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-items:center;font-size:13.5px;font-weight:600}
.sc-row .pb{text-align:right;grid-column:2;grid-row:1}
.sc-row .pa{grid-column:1;grid-row:1}
.sc-seg{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 2px}
.sc-seg::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--line);z-index:0}
.sc-seg button{position:relative;z-index:1}
.sc-seg button{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-3);background:var(--surface)}
.sc-seg button:nth-child(3){width:14px;height:14px;align-self:center}
.sc-seg button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 3px var(--citron)}
.sc-res{margin-top:10px;font-size:14px;min-height:20px}
.sc-res.on{font-weight:600}
.legend05{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:10px 14px;margin:0 0 14px;font-size:14px}
.legend05 b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--paper);margin-right:6px;font-size:12px}
.need-k{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.need-k i{width:14px;height:14px;border-radius:4px;border:2px solid var(--amber)}
.sc-lead{margin:18px 0 0;font-size:15px}
.sc-ex{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.sc-ex p{font-size:13.5px;line-height:1.4;color:var(--ink-2);background:var(--surface);border-radius:10px;padding:8px 10px;border:1px solid transparent}
.sc-ex p b{display:block;color:var(--ink);font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.sc-ex p.hl{border-color:var(--ink);color:var(--ink)}
.sc-res{margin-top:10px;font-size:14px}
/* как читать профиль */
.howto{margin-top:22px;background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-l);padding:16px 18px}
.howto-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.howto-h b{font-size:15px}
.howto-x{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.howto ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:hw}
.howto li{counter-increment:hw;font-size:13.5px;color:var(--ink-2);line-height:1.35}
.howto li::before{content:counter(hw);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--citron);color:#121A33;font-weight:800;font-size:12px;margin-bottom:6px}
.howto li b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.howto[hidden]{display:none}
/* как пользоваться (главная) */
.how{margin:0 0 40px}
.how-top{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.how-top h2{font-size:clamp(26px,3vw,36px)}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.how-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;display:flex;flex-direction:column;gap:10px}
.how-c .n{font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.how-c h3{font-size:17px}
.how-c p{color:var(--ink-2);font-size:14.5px}
.who{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.who .c1{margin-right:4px}
@media (max-width:900px){
.ab-grid,.dom-head,.style-head{grid-template-columns:minmax(0,1fr)}
.drow{grid-template-columns:minmax(0,1fr);gap:8px}
.dlist{grid-column:auto}
.dlist div{grid-template-columns:minmax(0,1fr) auto}
.howto ol{grid-template-columns:repeat(2,minmax(0,1fr))}
.how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){ .how-grid,.howto ol{grid-template-columns:minmax(0,1fr)} }
/* ===== Мобильная версия (≤640px). Десктоп не затрагивается ===== */
.m-only{display:none}
.res-bar{display:none}
@media (max-width:640px){
.m-only{display:inline}.d-only{display:none}
html{-webkit-text-size-adjust:100%}
.marq{font-size:12px}.marq-in{padding:7px 0}
.site{padding:10px 0}
.brand-mark{width:34px;height:34px;font-size:16px}
.brand-txt{font-size:15px}
.pill{padding:7px 12px;font-size:12px}
/* главная */
.cat-hero{padding-bottom:18px}
.wordmark{margin:4px 0 18px}
.glass,.stat-card{padding:20px;border-radius:22px}
.hero-card .hero-h{font-size:27px}
.hero-card .lead{font-size:15.5px}
.feats{gap:8px}
.stat-card{gap:14px}
.stat-card .q{font-size:19px}
.stat-card::after{display:none}
.cta-row{flex-direction:column;align-items:stretch}
.btn-p,.btn-o{justify-content:center;padding:13px 18px}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 16px;font-size:13px;margin-bottom:28px}
.trust span{align-items:flex-start}
.how{margin-bottom:28px}
.how-top{margin-bottom:12px}
.how-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
.how-grid::-webkit-scrollbar{display:none}
.how-c{flex:0 0 78%;scroll-snap-align:start;padding:18px}
.how-c .n{font-size:32px}
.who{flex-wrap:nowrap;overflow-x:auto;margin:14px -16px 0;padding:0 16px 4px;scrollbar-width:none}
.who::-webkit-scrollbar{display:none}
.who .chip{flex:none}
.who .c1{flex:none;white-space:nowrap}
.list-head{margin-bottom:12px}
.ffold>summary{padding:12px 16px}
.prow{padding:14px 14px 14px 18px}
.ptitle{font-size:16px}
.cat-gh h2{font-size:22px}
/* панель сравнения внизу */
.tray{background:transparent!important;box-shadow:none!important;border-radius:0!important;bottom:10px}
.tray-in{border-radius:18px;margin:0 10px;flex-direction:row;align-items:center;gap:8px;padding:8px 8px 8px 14px}
.tray-l{flex-wrap:nowrap;counter-reset:sel;position:relative;font-size:14px}
.tray-l .c1{display:none}
.tray-chip{position:absolute;opacity:0;pointer-events:none;counter-increment:sel}
.tray-l::after{content:"Выбрано: " counter(sel);font-weight:600;white-space:nowrap}
.tray-r{gap:4px;align-items:center}
.tray-clear{font-size:13px;padding:6px 8px}
.tray-go{padding:9px 14px!important;font-size:13px!important;white-space:nowrap}
/* профиль: шапка */
#hero{padding:14px 0 16px}
.fam-chip{font-size:11px;padding:5px 11px;margin:10px 0 10px;line-height:1.3}
#title{font-size:clamp(32px,10vw,44px)}
#mission{font-size:17px;margin-top:8px}
.howto{margin-top:16px;padding:12px 0 12px 14px;border-radius:18px}
.howto-h{padding-right:14px;margin-bottom:8px}
.howto-x{font-size:11px;white-space:nowrap}
.howto ol{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-right:14px;scrollbar-width:none}
.howto ol::-webkit-scrollbar{display:none}
.howto li{flex:0 0 70%;scroll-snap-align:start;background:var(--paper);border-radius:14px;padding:10px 12px}
.howto-h b::after{content:" · листайте →";font-weight:400;color:var(--ink-3);font-size:12px}
/* липкая панель: компактно */
.top .wrap{padding-top:8px;padding-bottom:8px;gap:6px;min-height:0}
.lvl-pick .c1{font-size:13px}
.lvl-pick select{padding:6px 30px 6px 12px;font-size:14px}
.top .round{width:34px;height:34px}
.tabs{padding:3px;border-radius:999px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.tabs button{padding:6px 12px;font-size:14px;flex:none}
.panel{padding-top:22px}
.intro h2,.panel h2{font-size:24px}
/* навыки, рост, сравнение */
.skl{flex-direction:column;align-items:flex-start;gap:2px}
#p-compare .filters{flex-wrap:nowrap;overflow-x:auto;margin-left:-16px;margin-right:-16px;padding:0 16px 4px;scrollbar-width:none}
#p-compare .filters::-webkit-scrollbar{display:none}
#p-compare .filters .tag{flex:none;white-space:nowrap}
#p-compare .filters .c1{flex:none}
.cmp-any{width:100%;margin-top:8px}
.mx-head{font-size:12px}
.mx-head .linkish{font-size:12px;hyphens:auto;word-break:break-word}
.mx-row{padding:9px 12px;font-size:14px}
/* о профессии */
.dlegend{padding:12px}
.dlegend div{grid-template-columns:34px 1fr;gap:4px 10px}
.dlegend div span{grid-column:1/-1}
.drow{padding:14px 0}
.from{grid-template-columns:1fr}
.scales{grid-template-columns:1fr}
.sc-ex{grid-template-columns:1fr}
.sc-seg button{width:28px;height:28px}
.sc-seg button:nth-child(3){width:18px;height:18px}
/* самопроверка: плашка результата внизу */
.legend05{font-size:13px;gap:6px 12px}
.res-bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:25;display:none;align-items:center;justify-content:space-between;gap:12px;
background:var(--ink);color:var(--paper);border-radius:18px;padding:10px 12px 10px 16px;box-shadow:0 10px 30px rgba(10,20,15,.3);font-size:14px;text-align:left}
.res-bar.on{display:flex}
.res-bar b{font-family:var(--display);font-size:22px;letter-spacing:-.04em;margin-right:6px}
.res-bar .go{background:var(--citron);color:#121A33;border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;flex:none}
#p-self{padding-bottom:70px}
#p-self .res{position:static!important;top:auto!important}
footer{margin-top:48px;padding:36px 0 28px}
}
/* ===== План развития ===== */
.pl-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pl-mini .chip{font-size:12.5px;padding:3px 10px;border-width:1px}
.pl-open{margin-top:14px;width:100%;justify-content:center}
.pl-empty{max-width:560px}
.pl-set{display:flex;flex-direction:column;gap:14px}
.pl-set .c1{margin:0 0 8px}
.pl-set .tag{width:auto!important;min-width:0!important;flex-direction:column;align-items:flex-start;white-space:normal;border-radius:14px;padding:8px 14px;text-align:left}
.pl-set .tag.s{border-radius:999px;align-items:center}
.pl-set .tag small{font-size:12px;opacity:.75;margin-top:2px}
.pl-set-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-end}
.pl-tg{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer;padding-bottom:6px}
.pl-tg input{width:18px;height:18px;accent-color:var(--moss)}
.pl-h{margin:32px 0 12px}
.pl-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pl-act{display:flex;flex-direction:column;gap:2px}
.pl-act h3{font-size:17px;line-height:1.3;margin-top:8px}
.pl-act-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl-act-top .c1{margin:0}
.pl-cov{margin-top:10px!important;color:var(--text)!important}
.pl-swap{margin-top:auto;padding-top:12px;align-self:flex-start;font-size:13px;text-decoration:underline;color:var(--text-2);background:none;border:0;cursor:pointer}
.pl-n{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:var(--text);color:var(--plate);font-size:12.5px;font-weight:700;padding:0 6px}
.pl-n.s{min-width:20px;height:20px;font-size:11px;margin-right:6px}
.pl-tag{font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;letter-spacing:.01em}
.k-pr{background:var(--moss-soft);color:var(--moss)}
.k-le{background:var(--amber-soft);color:var(--amber)}
.k-pe{background:var(--violet-web);color:var(--violet)}
.k-cr{background:transparent;border:1.5px dashed var(--stroke);color:var(--text-2)}
.pl-mx-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pl-mx{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
.pl-mx th,.pl-mx td{border-bottom:1px solid var(--line);padding:9px 8px;text-align:center;vertical-align:middle}
.pl-mx th:first-child,.pl-mx td:first-child{text-align:left;min-width:200px}
.pl-mx th:nth-child(2),.pl-mx td:nth-child(2){white-space:nowrap;color:var(--text-2)}
.pl-mx th{font-weight:500;color:var(--text-2);font-size:13px}
.pl-mx td:last-child,.pl-mx th:last-child{text-align:left;white-space:nowrap}
.pl-dot{display:inline-block;border-radius:50%;background:var(--moss);vertical-align:middle}
.pl-dot.d3{width:14px;height:14px}
.pl-dot.d2{width:10px;height:10px;opacity:.75}
.pl-dot.d1{width:6px;height:6px;opacity:.5}
.pl-legend{margin-top:8px!important}
.pl-head2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:32px}
.pl-head2 .pl-h{margin:0 0 10px}
.pl-month{margin-top:22px}
.pl-month h4{font-size:15px;font-weight:600;margin-bottom:10px}
.pl-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pl-check li{background:var(--plate);border-radius:var(--r-m,14px);padding:12px 14px}
.pl-check label{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.45;cursor:pointer}
.pl-check input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--moss)}
.pl-check b{font-weight:600}
.pl-meta{display:flex;align-items:center;margin-top:6px;font-size:12.5px;color:var(--text-2)}
.pl-check input:checked + .pl-st{opacity:.5}
.pl-check input:checked + .pl-st b{text-decoration:line-through}
.pl-note{margin-top:16px}
.pl-skills{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.pl-skills li{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-top:1px solid var(--line);padding-top:6px}
.pl-skills li .c1{white-space:nowrap;margin:0}
@media (max-width:640px){
.pl-acts{grid-template-columns:minmax(0,1fr)}
.pl-set-row{flex-direction:column;align-items:flex-start}
.pl-check li{padding:10px 12px}
}
/* ===== web-сборка ===== */
.foot-links{margin-top:10px;font-size:14px}
.foot-links a{color:inherit;text-decoration:underline;text-underline-offset:3px}
footer p.foot-author{margin-top:14px;font-size:15px;color:color-mix(in srgb,var(--paper) 88%,transparent)}
.foot-author a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pp-loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--paper);color:var(--ink-2);font-size:16px;z-index:100}
.pp-loading[hidden]{display:none}
.pp-loading .brand-mark{animation:pp-spin 1.2s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
.pp-cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;z-index:60;background:var(--ink);color:var(--paper);border-radius:18px;padding:16px 18px;box-shadow:0 10px 30px rgba(10,20,15,.3);font-size:14px;line-height:1.45}
.pp-cookie a{color:var(--citron)}
.pp-cookie .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pp-cookie button{border-radius:999px;padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer;border:1px solid var(--paper);background:transparent;color:var(--paper)}
.pp-cookie button.yes{background:var(--citron);color:#121A33;border-color:var(--citron)}
.pp-err{max-width:560px;margin:80px auto;padding:0 16px;font-size:16px;line-height:1.5}