/* Сайт v2: меню как у платформы (web/app/site-nav.module.css) и страницы разделов. Цвета — assets/style.css
   (web/brand.json платформы); здесь — те же токены под именами платформы, чтобы её стили библиотеки легли как есть. */
:root{
  --accent:#A4302A; --accent-hover:#8A2621; --accent-ink:#F4EDE3; --accent-soft:rgb(164 48 42 / .10);
  --fg:var(--text); --panel:var(--surface); --surface-3:#E3D7C6; --line-strong:var(--line-2); --logo:#A4302A;
  --ink:#151213; --ink-2:#211C1D; --ink-text:#F4EDE3; --ink-muted:#B9A99A;
  --font-heading:var(--serif); --font-ui:var(--sans);
  --nav-h:60px; --tabbar-h:0px; --screen-h:calc(100dvh - var(--nav-h) - var(--tabbar-h));
}
@media (max-width:640px){
  :root{--nav-h:52px; --tabbar-h:calc(60px + env(safe-area-inset-bottom))}
  body{padding-bottom:var(--tabbar-h)}
}

[hidden]{display:none!important}

/* ---------- меню (логотип — .logo--text из style.css: Young Serif строчными, красный) ---------- */
.logo--text{text-decoration:none}
.logo--foot{font-size:20px}
.topnav{position:sticky;top:0;z-index:30;background:rgb(244 237 227 / .9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topnav__row{display:flex;align-items:center;gap:24px;height:var(--nav-h);max-width:1480px;margin:0 auto;padding:0 24px}
.topnav__links{display:flex;gap:4px;margin-left:auto}
.topnav__link{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;color:var(--muted);
  font:500 15px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.topnav__link svg{width:17px;height:17px;flex:none}
.topnav__link:hover{color:var(--text);background:var(--surface-2)}
.topnav__link[data-active="true"]{color:var(--accent-ink);background:var(--accent)}
.tabbar{display:none}
@media (max-width:900px){.topnav__row{gap:12px;padding:0 16px}.topnav__link{padding:0 11px}}
/* телефон: сверху — только логотип, вкладки — панелью снизу (как на платформе) */
@media (max-width:640px){
  .topnav__links{display:none}
  .topnav__row{justify-content:center}
  .tabbar{position:fixed;inset:auto 0 0 0;z-index:30;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line-2)}
  .tabbar__tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;color:var(--muted);
    font:500 11px/1.2 var(--sans);text-decoration:none}
  .tabbar__tab svg{width:22px;height:22px}
  .tabbar__tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tabbar__tab[data-active="true"]{color:var(--accent);font-weight:600;box-shadow:inset 0 2px 0 var(--accent)}
}

/* ---------- общее для разделов ---------- */
.section-head{padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,32px)}
.section-head h1{font:700 clamp(34px,5vw,56px)/1.08 var(--serif);letter-spacing:-.01em}
.section-head .lead{margin-top:14px;max-width:720px;color:var(--muted);font-size:clamp(16px,1.5vw,18px)}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.closed{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:clamp(32px,5vw,56px) 0;padding:clamp(20px,3vw,28px);
  border:1px solid var(--line-2);border-radius:18px;background:var(--surface)}
.closed__text{flex:1 1 320px}
.closed h2{font:700 clamp(22px,2.4vw,28px)/1.2 var(--serif)}
.closed p{margin-top:6px;color:var(--muted)}
.btn svg{width:20px;height:20px}
.foot a.logo{display:inline-block}

/* ---------- Библиотека (стили — library.module.css платформы, здесь — кнопки, как в её globals.css) ---------- */
:where(#library) button{font:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:6px 10px}
#library{font-size:14px}
#library code{font-family:var(--mono);font-size:.92em}
#library .lib-tools{top:var(--nav-h)}
#library input[type="search"]{-webkit-appearance:none;appearance:none}
.page-library .foot{margin-top:0}

/* ---------- Монтаж ---------- */
.editor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,3vw,32px);align-items:start;padding-bottom:24px}
@media (max-width:900px){.editor{grid-template-columns:1fr}}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;padding:28px 20px;
  border:1.5px dashed var(--line-2);border-radius:18px;background:var(--surface);text-align:center;transition:border-color .2s,background .2s}
.drop[data-over="true"]{border-color:var(--accent);background:var(--accent-soft)}
.drop svg{width:40px;height:40px;color:var(--accent)}
.drop b{font:700 20px/1.25 var(--serif)}
.drop p{color:var(--muted);font-size:15px;max-width:440px}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.picked{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none}
.picked li{display:flex;flex-direction:column;gap:4px;min-width:0}
.picked__thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--ink);display:grid;place-items:center;color:var(--ink-text)}
.picked__thumb video,.picked__thumb img{width:100%;height:100%;object-fit:cover}
.picked__thumb span{position:absolute;left:6px;bottom:6px;padding:2px 6px;border-radius:5px;background:rgb(21 18 19 / .7);font:500 11px/1.3 var(--sans);color:var(--ink-text)}
.picked__name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked__size{font:500 11px/1 var(--mono);color:var(--muted)}
.counter{margin-top:10px;font:500 13px/1.4 var(--mono);color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.field label,.field .label{font-weight:600;font-size:15px}
.field .opt{font-weight:400;color:var(--muted);margin-left:6px;font-size:13px}
.field textarea{font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;resize:vertical;min-height:84px}
.field textarea:focus{outline:none;border-color:var(--accent)}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.formats button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);
  font:500 14px/1.2 var(--sans);color:var(--text);cursor:pointer}
.formats button small{font-size:12px;color:var(--muted)}
.formats button[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.formats i{display:block;border:2px solid currentColor;border-radius:3px;color:var(--accent)}
.hints{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hints button{font:inherit;font-size:13px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);cursor:pointer}
.hints button:hover{color:var(--text);border-color:var(--muted)}
.go{width:100%;margin-top:22px;position:relative;overflow:hidden}
.go[disabled]{opacity:.5;cursor:not-allowed}
.progress{margin-top:22px;padding:18px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface)}
.progress__top{display:flex;align-items:center;gap:14px}
.anim-cube{position:relative;flex:none;display:block;width:72px;height:72px;overflow:hidden;line-height:0}
.progress__pct{font:700 28px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--text)}
.progress__steps{display:grid;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.progress__steps li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:15px}
.progress__steps li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2)}
.progress__steps li[data-state="run"]{color:var(--text)}
.progress__steps li[data-state="run"]::before{border-color:var(--accent);border-right-color:transparent;animation:spin .8s linear infinite}
.progress__steps li[data-state="done"]{color:var(--text)}
.progress__steps li[data-state="done"]::before{background:var(--accent);border-color:var(--accent);
  -webkit-mask:none;box-shadow:inset 0 0 0 3px var(--surface)}
@keyframes spin{to{transform:rotate(360deg)}}
.gate{margin-top:22px;padding:clamp(20px,3vw,28px);border-radius:18px;background:var(--ink);color:var(--ink-text)}
.gate h2{font:700 clamp(22px,2.6vw,28px)/1.2 var(--serif)}
.gate p{margin-top:8px;color:var(--ink-muted)}
.gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);align-items:center;gap:clamp(16px,3vw,32px)}
.gate__art{position:relative;aspect-ratio:878/960;width:100%;max-width:260px;justify-self:end;overflow:hidden;line-height:0;border-radius:14px;background:rgb(244 237 227 / .06)}
.gate .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.gate .btn--ghost{color:var(--ink-text);border-color:rgb(244 237 227 / .3)}
.gate .btn--ghost:hover{background:rgb(244 237 227 / .08)}
.side{display:flex;flex-direction:column;gap:14px}
.side__card{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.side__card h3{font:700 18px/1.25 var(--serif)}
.side__card p,.side__card li{color:var(--muted);font-size:15px}
.side__card ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.privacy{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.privacy b{color:var(--text)}

/* ---------- Примеры ---------- */
.examples{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(16px,2.4vw,28px);padding-bottom:16px}
.ex{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden}
.ex__media{position:relative;aspect-ratio:9/16;background:var(--ink)}
.ex__media video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.ex__switch{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;background:rgb(21 18 19 / .66);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ex__switch button{border:0;border-radius:999px;padding:7px 12px;background:transparent;color:var(--ink-text);font:600 13px/1 var(--sans);white-space:nowrap;cursor:pointer}
.ex__switch button[aria-pressed="true"]{background:var(--ink-text);color:var(--ink)}
.ex__sound{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;
  background:rgb(21 18 19 / .66);color:var(--ink-text);cursor:pointer}
.ex__sound svg{width:18px;height:18px}
.ex__tag{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:7px;background:rgb(21 18 19 / .66);color:var(--ink-text);font:500 12px/1 var(--mono)}
.ex__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.ex__body h3{font:700 21px/1.2 var(--serif)}
.ex__ask{font-size:15px}
.ex__ask q{color:var(--red-text);quotes:"«" "»"}
.ex__did{color:var(--muted);font-size:14px}
.ex__src{font:500 11px/1.4 var(--mono);color:var(--faint)}
.ex__src a{color:inherit}

/* ---------- Документы → видео ---------- */
.d2v{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:860px){.d2v{grid-template-columns:1fr}}
.d2v__video{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--ink);max-width:360px;width:100%;margin:0 auto}
.d2v__video video{width:100%;height:100%;object-fit:cover;cursor:pointer}
.d2v__cap{margin-top:10px;text-align:center;font:500 12px/1.4 var(--mono);color:var(--muted)}
.files{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.files li{padding:6px 11px;border-radius:9px;border:1px solid var(--line-2);background:var(--surface);font:500 13px/1.2 var(--mono)}
.steps2{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none;counter-reset:s}
.steps2 li{display:grid;grid-template-columns:40px 1fr;gap:12px;counter-increment:s}
.steps2 li::before{content:counter(s,decimal-leading-zero);font:500 14px/1.6 var(--mono);color:var(--red-text)}
.steps2 h3{font:700 18px/1.3 var(--serif)}
.steps2 p{color:var(--muted);font-size:15px}
.viz{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.viz span{padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:13px}

/* ---------- Главная: разделы ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-decoration:none;
  transition:border-color .2s,transform .2s}
.tile:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tile svg{width:26px;height:26px;color:var(--accent)}
.tile b{font:700 20px/1.2 var(--serif)}
.tile span{color:var(--muted);font-size:15px}
.tile i{margin-top:auto;padding-top:6px;font:500 13px/1 var(--mono);font-style:normal;color:var(--red-text)}

/* ---------- Лицензии ---------- */
.lic{max-width:860px;padding-bottom:24px}
.lic h2{font:700 24px/1.25 var(--serif);margin:34px 0 10px}
.lic p,.lic li{color:var(--muted)}
.lic li{margin:4px 0}
.lic code{font:500 13px/1.4 var(--mono);color:var(--text)}
.lic table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.lic th,.lic td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.lic th{font-weight:600}
.lic .tablewrap{overflow-x:auto}

/* главная, «Скульптор…»: Давид рядом с текстом (на телефоне — под ним) */
.how__art{position:relative;width:100%;max-width:380px;aspect-ratio:878/960;margin:0 auto;overflow:hidden;line-height:0;border-radius:18px;background:var(--accent-soft)}
@media (max-width:860px){.how__art{max-width:240px}}

/* телефон: Давид маленький сверху, текст под ним */
@media (max-width:640px){
  .gate{grid-template-columns:1fr}
  .gate__art{order:-1;width:112px;justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  .progress__steps li[data-state="run"]::before{animation:none}
  .tile,.tile:hover{transition:none;transform:none}
}