/* Страницы модулей платформы: /platform/<модуль>/.
   Токены и язык — как у схемы на /platform/ (там стили в самой странице):
   ночная шапка, Unbounded в заголовках, три цвета данных — операции, развитие
   ребёнка, общение и обучение. Полосу «Все модули» (.pm-*) пишет
   internal/build-platform-mods.py, её вид — здесь. */

.md{ --ink:#0F1A24; --ink2:#2a3744; --mute:#46586B; --line:#E2E9F0; --paper:#F4F7FA; --card:#fff;
     --night:#0C1620; --night2:#13212E; --night3:#1B2C3B; --mist:#a8c8e0; --star:#f0f6fc;
     --ops:#6E76F0; --dev:#0E9C8C; --com:#D27A2A; --brand:#5B63E6; --ok:#0E9C8C; --bad:#D9534F;
     background:var(--paper); color:var(--ink); }
[data-theme="dark"] .md{ --paper:#0B141C; --card:#152230; --ink:#f0f6fc; --ink2:#cdd9e6; --mute:#a8c8e0; --line:rgba(168,200,224,.14); }

.md-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 28px; }

/* шапка */
.md-hero{ background:var(--night); color:var(--star); padding:104px 0 64px; position:relative; overflow:hidden; }
.md-hero::before{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(168,200,224,.09) 1px, transparent 1.2px); background-size:26px 26px; pointer-events:none; }
.md-hero .md-wrap{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center; }
.md-crumb{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--mist); text-decoration:none; margin:0 0 22px; }
.md-crumb:hover{ color:var(--star); }
.md-crumb svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.md-eye{ display:flex; align-items:center; gap:12px; margin:0 0 18px; font-size:14.5px; font-weight:800; color:var(--mist); }
.md-eye img{ width:40px; height:40px; padding:6px; border-radius:12px; background:var(--night2); border:1.5px solid rgba(240,246,252,.5); box-sizing:border-box; }
.md-eye b{ color:var(--star); font-weight:800; }
.md-h1{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,48px); line-height:1.1; letter-spacing:-.025em; margin:0 0 20px; overflow-wrap:break-word; }
.md-h1 span{ display:block; margin-top:.1em; }
.md-lead{ font-size:18px; line-height:1.6; color:var(--mist); margin:0 0 26px; max-width:560px; }
.md-acts{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
.md-btn{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; padding:13px 22px; border-radius:999px; text-decoration:none; color:var(--star); border:1px solid rgba(168,200,224,.3); }
.md-btn:hover{ border-color:rgba(168,200,224,.6); }
.md-btn.main{ background:var(--brand); border-color:var(--brand); color:#fff; }
.md-btn.main:hover{ background:#4951d6; }
.md-btn:focus-visible, .md a:focus-visible{ outline:2px solid #A5B4FC; outline-offset:3px; }
.md-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin:0; padding:0; list-style:none; max-width:560px; }
.md-facts li{ font-size:14.5px; line-height:1.45; color:var(--mist); padding-left:20px; position:relative; }
.md-facts li::before{ content:""; position:absolute; left:0; top:.45em; width:9px; height:9px; border-radius:3px; background:var(--fam,var(--brand)); }

/* макет экрана */
.mk{ background:#fff; color:#0F1A24; border-radius:20px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(168,200,224,.18); overflow:hidden; font-size:13px; line-height:1.4; transform:rotate(-.4deg); }
.mk-top{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #E8EEF4; background:#F7F9FB; }
.mk-dots{ display:flex; gap:5px; } .mk-dots i{ width:9px; height:9px; border-radius:50%; background:#D5DEE7; }
.mk-title{ font-weight:800; font-size:13px; color:#2a3744; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-top .mk-tag{ flex:0 0 auto; }
.mk-b{ padding:14px; }
.mk-h{ font-weight:800; font-size:14px; margin:0 0 10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mk-k{ font-size:11.5px; font-weight:700; color:#7C8EA0; text-transform:none; }
.mk-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #EEF2F6; min-width:0; }
.mk-row:first-child{ border-top:0; }
.mk-row .grow{ flex:1; min-width:0; }
.mk-row .grow b{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-row .grow small{ display:block; font-size:11.5px; color:#7C8EA0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-av{ flex:0 0 30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; background:var(--c,#6E76F0); }
.mk-tag{ display:inline-flex; align-items:center; font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; background:#EEF0FF; color:#4951d6; white-space:nowrap; }
.mk-tag.dev{ background:#E1F5F2; color:#0B7D70; } .mk-tag.com{ background:#FCEEDF; color:#A35A17; }
.mk-tag.bad{ background:#FDECEC; color:#B23B37; } .mk-tag.mute{ background:#EEF2F6; color:#5b6d7f; }
.mk-bar{ height:7px; border-radius:7px; background:#EEF2F6; overflow:hidden; position:relative; }
.mk-bar i{ position:absolute; left:0; top:0; bottom:0; width:var(--v); border-radius:7px; background:var(--c,#0E9C8C); }
.mk-bar i + i{ background:var(--c2,rgba(14,156,140,.35)); z-index:-0; }
.mk-sph{ display:grid; grid-template-columns:max-content 1fr 30px; gap:7px 10px; align-items:center; }
.mk-sph span{ font-size:12px; font-weight:700; color:#2a3744; }
.mk-sph em{ font-style:normal; font-size:11.5px; font-weight:800; color:#0B7D70; text-align:right; }
.mk-two{ position:relative; height:9px; border-radius:9px; background:#EEF2F6; }
.mk-two i{ position:absolute; left:0; top:0; bottom:0; border-radius:9px; }
.mk-two i.p{ width:var(--p); background:rgba(14,156,140,.28); }
.mk-two i.s{ width:var(--s); background:#0E9C8C; }
.mk-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 12px; }
.mk-kpis div{ background:#F4F7FA; border-radius:12px; padding:9px 10px; }
.mk-kpis b{ display:block; font-family:'Unbounded',sans-serif; font-size:17px; line-height:1.1; }
.mk-kpis span{ font-size:11px; color:#7C8EA0; font-weight:700; }
.mk-grid{ display:grid; gap:4px; }
.mk-cell{ border-radius:7px; padding:5px 6px; font-size:10.5px; font-weight:700; line-height:1.25; min-height:30px; background:#F4F7FA; color:#5b6d7f; overflow:hidden; }
.mk-cell.ops{ background:#EEF0FF; color:#3d44b8; box-shadow:inset 3px 0 #6E76F0; }
.mk-cell.dev{ background:#E1F5F2; color:#0B6B60; box-shadow:inset 3px 0 #0E9C8C; }
.mk-cell.com{ background:#FCEEDF; color:#8f4e14; box-shadow:inset 3px 0 #D27A2A; }
.mk-cell.free{ background:repeating-linear-gradient(135deg,#F4F7FA 0 6px,#fff 6px 12px); color:#9AAABB; }
.mk-cell.hd{ background:none; color:#7C8EA0; min-height:0; padding:0 2px; }
.mk-msg{ max-width:82%; padding:8px 11px; border-radius:14px; margin:0 0 7px; font-size:12.5px; }
.mk-msg.in{ background:#F1F4F8; border-bottom-left-radius:4px; }
.mk-msg.out{ background:#5B63E6; color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.mk-msg small{ display:block; font-size:10.5px; font-weight:700; opacity:.7; margin-bottom:2px; }
.mk-note{ background:#F7F9FB; border:1px solid #E8EEF4; border-radius:12px; padding:9px 11px; font-size:12.5px; color:#2a3744; }
.mk-btn{ display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; padding:7px 12px; border-radius:10px; background:#5B63E6; color:#fff; }
.mk-btn.ghost{ background:#EEF0FF; color:#4951d6; }
.mk-split{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mk-line{ height:8px; border-radius:6px; background:#EEF2F6; margin:6px 0; }
.mk-line.s{ width:60%; } .mk-line.m{ width:80%; }

/* разделы */
.md-sec{ padding:80px 0 0; }
.md-kick{ font-size:14px; font-weight:800; color:var(--brand); margin:0 0 10px; }
.md-h2{ font-family:'Unbounded',sans-serif; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; color:var(--ink); margin:0 0 14px; line-height:1.15; }
.md-p{ font-size:17px; line-height:1.7; color:var(--mute); max-width:760px; margin:0 0 26px; }

.md .art-link{ color:var(--brand); font-weight:700; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
[data-theme="dark"] .md .art-link{ color:#A5B4FC; }

/* было — стало */
.md-ba{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.md-ba > div{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px 26px 20px; }
.md-ba > div:last-child{ background:var(--night); border-color:var(--night); color:var(--star); }
.md-ba h3{ font-family:'Unbounded',sans-serif; font-size:17px; margin:0 0 14px; }
.md-ba ul{ list-style:none; margin:0; padding:0; }
.md-ba li{ position:relative; padding:9px 0 9px 32px; border-top:1px solid var(--line); font-size:15.5px; line-height:1.55; color:var(--mute); }
.md-ba > div:last-child li{ border-color:rgba(168,200,224,.12); color:var(--mist); }
.md-ba li:first-child{ border-top:0; }
.md-ba li::before{ content:""; position:absolute; left:0; top:12px; width:20px; height:20px; border-radius:7px; background:rgba(217,83,79,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9534F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center/12px no-repeat; }
.md-ba > div:last-child li::before{ background:rgba(14,156,140,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FE3D3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat; }

/* главные смыслы */
.md-ideas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.md-idea{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:28px 26px; position:relative; overflow:hidden; }
.md-idea::before{ content:""; position:absolute; left:0; top:0; right:0; height:5px; background:var(--fam,var(--brand)); }
.md-idea .n{ font-family:'Unbounded',sans-serif; font-size:13px; font-weight:700; color:var(--fam,var(--brand)); margin:0 0 12px; }
.md-idea h3{ font-family:'Unbounded',sans-serif; font-size:19px; line-height:1.3; color:var(--ink); margin:0 0 10px; }
.md-idea p{ font-size:15.5px; line-height:1.65; color:var(--mute); margin:0; }
.md-idea.wide{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:10px 40px; align-items:start; background:var(--night); border-color:var(--night); }
.md-idea.wide h3{ color:var(--star); font-size:22px; } .md-idea.wide p{ color:var(--mist); }
.md-quote{ font-family:'Unbounded',sans-serif; font-size:clamp(20px,2.4vw,28px); line-height:1.3; letter-spacing:-.015em; color:var(--ink); max-width:900px; margin:0 0 6px; }

/* фичи */
.md-feats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.md-feat{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 22px 22px; }
.md-feat svg{ width:40px; height:40px; padding:9px; box-sizing:border-box; border-radius:12px; background:color-mix(in srgb, var(--fam,var(--brand)) 13%, transparent); stroke:var(--fam,var(--brand)); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin:0 0 14px; display:block; }
.md-feat h3{ font-size:17px; font-weight:800; line-height:1.35; color:var(--ink); margin:0 0 8px; }
.md-feat p{ font-size:15px; line-height:1.6; color:var(--mute); margin:0; }

/* связи с модулями */
.md-links{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.md-links > div{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:24px; }
.md-links h3{ font-size:14.5px; font-weight:800; color:var(--mute); margin:0 0 12px; }
.md-links ul{ list-style:none; margin:0; padding:0; }
.md-links li{ border-left:4px solid var(--c,var(--ops)); border-radius:4px; padding:6px 0 6px 14px; margin:0 0 10px; }
.md-links li.ops{ --c:var(--ops); } .md-links li.dev{ --c:var(--dev); } .md-links li.com{ --c:var(--com); }
.md-links li b{ display:block; font-size:15.5px; color:var(--ink); line-height:1.4; }
.md-links li a{ font-size:14px; font-weight:700; color:var(--brand); text-decoration:none; }
.md-links li a:hover{ text-decoration:underline; }
[data-theme="dark"] .md-links li a, [data-theme="dark"] .md-kick{ color:#A5B4FC; }

/* границы */
.md-nots{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.md-not{ border:1px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius:18px; padding:20px 22px; }
.md-not b{ display:block; font-size:16px; color:var(--ink); margin:0 0 6px; }
.md-not p{ font-size:15px; line-height:1.6; color:var(--mute); margin:0; }

/* призыв */
.md-cta{ margin:80px 0 0; padding:34px; border-radius:24px; background:var(--night); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.md-cta h3{ font-family:'Unbounded',sans-serif; font-size:21px; color:var(--star); margin:0 0 6px; }
.md-cta p{ color:var(--mist); margin:0; font-size:15.5px; max-width:560px; }
.md-cta nav{ display:flex; gap:10px; flex-wrap:wrap; }

/* полоса «Все модули» — internal/build-platform-mods.py */
.pm-nav{ padding:64px 0 90px; }
.pm-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.pm-head h2{ font-family:'Unbounded',sans-serif; font-size:20px; color:var(--ink); margin:0; }
.pm-head a{ font-size:14.5px; font-weight:700; color:var(--brand); text-decoration:none; }
.pm-head a:hover{ text-decoration:underline; }
.pm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pm-tile{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px; text-decoration:none; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.pm-tile::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--ops); }
.pm-tile.dev::before{ background:var(--dev); } .pm-tile.com::before{ background:var(--com); }
.pm-tile:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -20px rgba(15,26,36,.3); }
.pm-tile img{ flex:0 0 32px; }
.pm-tile b{ display:block; font-size:14.5px; color:var(--ink); line-height:1.3; }
.pm-tile small{ display:block; font-size:12.5px; color:var(--mute); }
.pm-tile[aria-current="page"]{ background:var(--night); border-color:var(--night); }
.pm-tile[aria-current="page"] b{ color:var(--star); } .pm-tile[aria-current="page"] small{ color:var(--mist); }
[data-theme="dark"] .pm-head a{ color:#A5B4FC; }

@media (max-width:980px){
  .md-hero .md-wrap{ grid-template-columns:1fr; gap:36px; }
  .mk{ max-width:560px; }
  .md-ideas, .md-feats{ grid-template-columns:1fr 1fr; }
  .md-idea.wide{ grid-template-columns:1fr; }
  .pm-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .md-wrap{ padding:0 16px; }
  .md-hero{ padding:92px 0 48px; }
  .md-facts{ grid-template-columns:1fr; }
  .md-sec{ padding-top:60px; }
  .md-ba, .md-links, .md-nots, .md-ideas, .md-feats{ grid-template-columns:1fr; }
  .md-cta{ padding:24px 20px; margin-top:60px; }
  .pm-grid{ grid-template-columns:1fr; }
  .mk{ transform:none; font-size:12.5px; }
  .mk-sph{ column-gap:8px; }
}
@media (prefers-reduced-motion:reduce){ .pm-tile{ transition:none; } }
[data-theme="dark"] .md-feat svg{ stroke:color-mix(in srgb, var(--fam,var(--brand)) 55%, #fff); background:color-mix(in srgb, var(--fam,var(--brand)) 22%, transparent); }
[data-theme="dark"] .md-idea .n{ color:color-mix(in srgb, var(--fam,var(--brand)) 55%, #fff); }