/* Ранг H1 — самостоятельная дизайн-система прототипов. 8px rhythm, semantic tokens. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Unbounded:wght@500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0b1119;--surface:#121c29;--surface-2:#182638;--surface-3:#20324a;--text:#f3f7fb;--muted:#9eafc1;--line:#2a3b50;--brand:#1f4e79;--brand-hi:#4b9be8;--energy:#f5b544;--success:#54d38a;--danger:#ff7474;--focus:#89c5ff;--r-sm:8px;--r-md:16px;--r-lg:24px;--shadow:0 16px 48px rgba(0,0,0,.28);--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--font-body:Inter,system-ui,sans-serif;--font-display:Unbounded,Inter,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#f5f8fb;--surface:#fff;--surface-2:#edf3f8;--surface-3:#dce9f4;--text:#142334;--muted:#52677a;--line:#cfdae5;--brand:#1f4e79;--brand-hi:#164064;--focus:#1f4e79;--shadow:0 12px 32px rgba(31,78,121,.11)}
*{box-sizing:border-box}html{background:var(--bg);overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{touch-action:manipulation}a{color:inherit}.shell{width:min(1184px,calc(100% - 32px));margin:auto}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px)}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 16px var(--font-display);letter-spacing:-.04em}.logo-mark{width:32px;height:32px;border-radius:10px;background:var(--brand);display:grid;place-items:center;color:white;font:700 13px var(--font-display)}.nav{display:flex;gap:8px;margin-left:auto;align-items:center}.nav a,.nav button{min-height:44px;padding:10px 12px;border:0;background:transparent;color:var(--muted);text-decoration:none;border-radius:10px;cursor:pointer}.nav a:hover,.nav button:hover{background:var(--surface-2);color:var(--text)}.main{padding:48px 0 80px}.eyebrow{color:var(--brand-hi);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}.h1,.h2,.h3{font-family:var(--font-display);letter-spacing:-.045em;line-height:1.15}.h1{font-size:clamp(28px,5vw,52px);margin:0 0 16px}.h2{font-size:clamp(22px,3vw,32px);margin:0 0 12px}.h3{font-size:17px;margin:0 0 6px}.lead{font-size:18px;color:var(--muted);max-width:62ch}.muted{color:var(--muted)}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:48px;align-items:center;padding:48px 0 56px}.hero-art{min-height:320px;border:1px solid var(--line);border-radius:var(--r-lg);background:radial-gradient(circle at 70% 30%,#2b6395 0,#172f48 30%,var(--surface) 70%);display:grid;place-items:center;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero-art:after{content:'';width:180px;height:180px;border:1px solid #8bc8ff66;border-radius:50%;box-shadow:0 0 0 24px #8bc8ff12,0 0 0 48px #8bc8ff0c}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{min-height:48px;border:1px solid transparent;border-radius:var(--r-sm);padding:12px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;transition:transform .18s,background .18s,border-color .18s}.btn:hover{transform:translateY(-1px)}.btn:focus-visible,.nav a:focus-visible,.nav button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.btn-primary{background:var(--brand-hi);color:#07111c}.btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--line)}.btn-energy{background:var(--energy);color:#1d1608}.section{margin-top:56px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;box-shadow:0 4px 20px #00000012}.card-hi{background:var(--surface-2)}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}.metric{font-size:36px;font-weight:700;letter-spacing:-.06em}.metric small{font-size:14px;color:var(--muted);font-weight:500;letter-spacing:0}.progress{height:8px;background:var(--surface-3);border-radius:99px;overflow:hidden}.progress>i{display:block;height:100%;background:var(--brand-hi);border-radius:inherit}.streak{color:var(--energy)}.badge{display:inline-flex;align-items:center;min-height:28px;border-radius:99px;padding:4px 10px;background:var(--surface-3);color:var(--muted);font-size:13px;font-weight:600}.badge.success{background:#54d38a22;color:var(--success)}.badge.energy{background:#f5b54422;color:var(--energy)}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow:auto}.tab{min-height:44px;padding:10px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}.tab.active{color:var(--text);border-color:var(--brand-hi)}.field{display:grid;gap:8px}.field label{font-weight:600;font-size:14px}.input{width:100%;min-height:48px;padding:12px 14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}table{border-collapse:collapse;width:100%;min-width:680px}th,td{text-align:left;padding:16px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-size:13px;font-weight:600}tr:last-child td{border-bottom:0}.heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.heatmap i{aspect-ratio:1;border-radius:4px;background:var(--surface-3)}.heatmap i:nth-child(3n){background:#2b699c}.heatmap i:nth-child(5n){background:#f5b544}.notice{border-left:3px solid var(--energy);padding:14px 16px;background:#f5b54412;border-radius:0 var(--r-sm) var(--r-sm) 0}.empty{padding:48px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-md)}.footer{padding:32px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}.screen-label{display:inline-flex;gap:8px;align-items:center;margin-bottom:24px}.screen-label:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--success)}@media(max-width:800px){.hero{grid-template-columns:1fr;gap:28px}.hero-art{min-height:220px}.span-3,.span-4,.span-5,.span-6,.span-7,.span-8{grid-column:span 6}}@media(max-width:560px){.shell{width:min(100% - 24px,1184px)}.topbar{height:64px}.nav a:not(:last-child){display:none}.main{padding-top:24px}.hero{padding:24px 0 32px}.hero-art{min-height:190px}.bento{gap:12px}.span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-12{grid-column:span 12}.card{padding:18px}.section{margin-top:40px}.section-head{display:block}.section-head .btn{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* ---------- Ссылка внутри текста различима без опоры на цвет (F31-W383) ----------
   WCAG 2.2 1.4.1: ссылка в абзаце, списке, хлебных крошках или таблице
   обязана отличаться от окружающего текста не только цветом. В этом слое
   ссылка брала цвет окружения (contrast 1:1) либо приглушённый оттенок —
   различить её без цвета было нельзя. Подчёркивание снимает зависимость
   от цвета и не меняет палитру. Кнопки, чипы и вкладки — не текстовые
   ссылки, их правило не касается. */
p a[href]:not(.btn):not(.chip):not(.tab),
li a[href]:not(.btn):not(.chip):not(.tab),
td a[href]:not(.btn):not(.chip):not(.tab),
.lead a[href]:not(.btn):not(.chip):not(.tab),
.notice a[href]:not(.btn):not(.chip):not(.tab),
.footer a[href]:not(.btn):not(.chip):not(.tab),
nav.crumb a[href]:not(.btn):not(.chip):not(.tab) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}