@layer brand{
/* Тема «Prompt Hospital» (bareLayout, areas: custom). Токены --c-* и --font-* задаёт движок из настроек
   носителя (фон #f3ead6, текст #2a1c10, акцент #f0d23c, fontHead Press Start 2P, font Golos Text, radius 0).
   Цвета ИГРОВОГО МИРА (газон, дерево, Надзиратель, статусы) — --brand-* с пометкой brand-asset: это краски
   спрайтов офиса, владелец их не настраивает и движок из них ничего не выводит. */

.ph{
  --brand-wood:#5a3a1e /* brand-asset */;
  --brand-night:#1e140c /* brand-asset */;
  --brand-grass:#6aa84f /* brand-asset */;
  --brand-warden:#b8321f /* brand-asset */;
  --brand-work:#4a90d9 /* brand-asset */;
  --brand-done:#5cb85c /* brand-asset */;
  --brand-block:#d9534f /* brand-asset */;
  --brand-sand:#cbb892 /* brand-asset */;
  --brand-dash:#a8906e /* brand-asset */;
  --brand-paper:#fff /* brand-asset */;
  --brand-on-red:#fbf3e2 /* brand-asset */;
  --brand-tile:#d8d4e6 /* brand-asset */;
  --brand-tile-dark:#c3bdd8 /* brand-asset */;
  --brand-muted:color-mix(in srgb,var(--c-ink) 72%,var(--c-bg));
  --brand-soft:color-mix(in srgb,var(--c-ink) 82%,var(--c-bg));
  --brand-px:4px;
  --brand-line:3px solid var(--c-ink);
  --brand-shadow:var(--brand-px) var(--brand-px) 0 var(--c-ink);
  --brand-shadow-lg:8px 8px 0 var(--c-ink);
  --brand-mono:var(--font-mono,ui-monospace,Menlo,monospace);
  margin:0;background:var(--c-bg);color:var(--c-ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.ph *,.ph *::before,.ph *::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
:where(.ph) a{color:var(--brand-wood)}
:where(.ph) a:hover{color:var(--brand-warden)}
.ph :focus-visible{outline:3px solid var(--c-accent);outline-offset:3px}
.ph h1,.ph h2,.ph h3,.ph p,.ph figure,.ph ul,.ph ol{margin:0}
.ph ul,.ph ol{padding:0;list-style:none}
.ph-wrap{max-width:1280px;margin-inline:auto;padding-inline:24px}
.ph-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:center}
.ph-px{font-family:var(--font-head);font-weight:400;letter-spacing:0}
.ph-h2{font-family:var(--font-head);font-weight:400;font-size:24px;line-height:1.4;margin:0 0 36px;text-wrap:balance}
.ph-section{padding-block:88px}

/* ── Шапка ── */
.ph-head{position:sticky;top:0;z-index:10;background:var(--brand-wood);border-bottom:var(--brand-px) solid var(--c-ink)}
.ph-head__in{display:flex;align-items:center;gap:20px;min-height:60px;padding-block:8px}
.ph-logo{font-family:var(--font-head);font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--c-accent);text-decoration:none;text-shadow:2px 2px 0 var(--c-ink);white-space:nowrap}
.ph-nav{display:flex;gap:18px;flex-wrap:wrap;flex:1}
.ph-nav a{color:var(--c-bg);text-decoration:none;font-size:14px;padding-block:10px}
.ph-nav a:hover{color:var(--c-accent)}
.ph-lang{display:flex;margin-left:auto;border:2px solid var(--c-ink);box-shadow:2px 2px 0 var(--c-ink)}
.ph-lang a{display:grid;place-items:center;min-width:44px;min-height:36px;padding:0 10px;font-family:var(--font-head);font-size:11px;color:var(--c-ink);background:var(--c-bg);text-decoration:none}
.ph-lang a+a{border-left:2px solid var(--c-ink)}
.ph-lang a[aria-current]{background:var(--c-accent)}
@media (max-width:760px){.ph-nav{display:none}}

/* ── Первый экран ── */
.ph-hero{background-color:var(--brand-grass);background-image:linear-gradient(45deg,color-mix(in srgb,var(--c-ink) 6%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--c-ink) 6%,transparent) 75%),linear-gradient(45deg,color-mix(in srgb,var(--c-ink) 6%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--c-ink) 6%,transparent) 75%);background-size:32px 32px;background-position:0 0,16px 16px;border-bottom:var(--brand-px) solid var(--c-ink)}
.ph-hero__in{padding-block:64px 72px}
.ph-hero__copy{background:var(--c-bg);border:var(--brand-line);box-shadow:6px 6px 0 var(--c-ink);padding:36px 32px;display:flex;flex-direction:column;gap:20px}
.ph-hero h1{font-family:var(--font-head);font-weight:400;font-size:clamp(24px,3vw,38px);line-height:1.35;text-wrap:balance}
.ph-hero__sub{font-size:18px;line-height:1.55;color:var(--brand-soft);text-wrap:pretty}
.ph-hero__meta{font-size:13px;color:var(--brand-muted);letter-spacing:.3px}
.ph-actions{display:flex;gap:12px;flex-wrap:wrap}
.ph-btn{flex:1 1 180px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;font-family:var(--font-head);font-size:14px;line-height:1.2;padding:14px 22px;color:var(--c-ink);border:var(--brand-line);box-shadow:var(--brand-shadow);text-decoration:none;transition:transform .08s ease,box-shadow .08s ease}
.ph-btn--main{background:var(--c-accent)}
.ph-btn--main:hover{background:color-mix(in srgb,var(--c-accent) 80%,var(--brand-paper))}
.ph-btn--alt{background:var(--brand-paper);flex-basis:140px}
.ph-btn--alt:hover{background:color-mix(in srgb,var(--c-bg) 40%,var(--brand-paper))}
.ph-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--c-ink)}

/* Окно игры */
.ph-window{display:flex;flex-direction:column;border:var(--brand-px) solid var(--c-ink);box-shadow:var(--brand-shadow-lg);background:var(--c-ink)}
.ph-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px;background:var(--brand-wood);border-bottom:var(--brand-line)}
.ph-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--brand-mono);font-size:12px;color:var(--c-bg);background:var(--c-ink);padding:3px 8px}
.ph-chip i{width:10px;height:10px;border:1px solid var(--c-bg);background:var(--c-ink)}
.ph-chip--work i{background:var(--brand-work)}
.ph-chip--block i{background:var(--brand-block)}
.ph-chip--done i{background:var(--brand-done)}
.ph-log{padding:8px 12px;font-family:var(--brand-mono);font-size:13px;color:var(--c-accent);border-top:var(--brand-line);background:var(--brand-night)}

/* Кадр с роликом: в записях лишние полосы по краям — срезаем масштабом внутри overflow */
.ph-frame{position:relative;overflow:hidden;background:var(--brand-grass);aspect-ratio:16/10}
.ph-frame--4x3{aspect-ratio:4/3}
.ph-frame video{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.18)}
/* Картинка места лежит под роликом: ролика нет (слот пуст, тег убран движком) — видна она. */
.ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-frame img+video{position:absolute;inset:0}

/* ── Как это работает ── */
.ph-how{padding-bottom:40px;counter-reset:ph-step}
.ph-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px}
.ph-step{display:flex;flex-direction:column;gap:14px;counter-increment:ph-step}
.ph-step .ph-frame{border:var(--brand-line);box-shadow:var(--brand-shadow)}
.ph-step__body{display:flex;gap:12px;align-items:baseline}
.ph-step__body::before{content:counter(ph-step);flex:none;font-family:var(--font-head);font-size:11px;background:var(--c-accent);border:2px solid var(--c-ink);padding:2px 8px}
.ph-step h3{font-size:19px;font-weight:600;line-height:1.3}
.ph-step p{margin-top:4px;font-size:15px;color:var(--brand-muted)}

/* ── Что внутри ── */
.ph-inside{padding-top:64px}
.ph-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.ph-feature{display:flex;flex-direction:column;background:var(--brand-paper);border:var(--brand-line);box-shadow:var(--brand-shadow)}
.ph-feature .ph-frame{border-bottom:var(--brand-line)}
.ph-feature__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.ph-feature h3{font-family:var(--font-head);font-weight:400;font-size:14px;line-height:1.5}
.ph-feature p{font-size:15px;color:var(--brand-muted);text-wrap:pretty}

/* ── Надзиратель ── */
.ph-warden{background:var(--brand-warden);border-block:var(--brand-px) solid var(--c-ink);color:var(--brand-on-red)}
.ph-warden .ph-split{padding-block:80px}
.ph-warden .ph-frame{border:var(--brand-px) solid var(--c-ink);box-shadow:var(--brand-shadow-lg)}
.ph-soon{position:absolute;z-index:2;top:12px;right:12px;font-family:var(--font-head);font-size:11px;letter-spacing:1px;text-transform:uppercase;background:var(--c-accent);color:var(--c-ink);border:2px solid var(--c-ink);box-shadow:3px 3px 0 var(--c-ink);padding:6px 10px}
.ph-warden__copy{display:flex;flex-direction:column;gap:20px}
.ph-tag{align-self:flex-start;font-family:var(--font-head);font-size:11px;letter-spacing:1px;text-transform:uppercase;background:var(--c-accent);color:var(--c-ink);border:2px solid var(--c-ink);padding:4px 10px}
.ph-warden h2{font-family:var(--font-head);font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1.35}
.ph-warden__text{font-size:20px;line-height:1.5;text-wrap:pretty;max-width:40ch}
.ph-term{display:flex;flex-direction:column;gap:6px;font-family:var(--brand-mono);font-size:14px;background:var(--brand-night);color:var(--c-accent);border:var(--brand-line);padding:14px 16px}
.ph-term li::before{content:'▸ '}

/* ── Для кого ── */
.ph-who{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.ph-who li{display:flex;gap:16px;align-items:flex-start;padding:20px;border:3px dashed var(--brand-dash);font-size:18px;line-height:1.45;text-wrap:pretty}
.ph-who li::before{content:'';flex:none;width:44px;height:44px;border:var(--brand-line);box-shadow:3px 3px 0 var(--c-ink);background:var(--brand-work)}
.ph-who li:nth-child(3n+2)::before{background:var(--c-accent)}
.ph-who li:nth-child(3n)::before{background:var(--brand-done)}

/* ── Подключение ── */
.ph-connect{background:var(--brand-wood);border-block:var(--brand-px) solid var(--c-ink);color:var(--c-bg)}
.ph-connect__in{display:flex;flex-direction:column;gap:40px;padding-block:80px}
.ph-connect__copy{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px 48px;align-items:center}
.ph-connect__copy .ph-h2{grid-column:1/-1}
.ph-connect .ph-h2{margin:0;color:var(--c-accent)}
.ph-code{margin:0;font-family:var(--brand-mono);font-size:15px;line-height:1.8;background:var(--brand-night);border:var(--brand-line);box-shadow:var(--brand-shadow);padding:18px 20px;overflow-x:auto;color:var(--c-bg);white-space:pre}
.ph-code span{display:block}
.ph-code span::before{content:'$ ';color:var(--brand-grass)}
.ph-connect__text{font-size:17px;line-height:1.55;max-width:52ch}
/* Коридор во всю ширину: двери в ряд на стене, пол в клетку. Табличка — на двери.
   Дверь открывается при наведении; раз в цикл одна приоткрывается сама (только без reduced-motion). */
.ph-hall{--door-w:88px;--door-h:124px;display:flex;gap:22px;justify-content:space-between;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px 28px 0;margin:0;background:linear-gradient(var(--c-bg),var(--c-bg)) top/100% 14px no-repeat,color-mix(in srgb,var(--c-bg) 86%,var(--brand-wood));border:var(--brand-line);box-shadow:var(--brand-shadow);position:relative;scrollbar-width:thin}
.ph-hall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;background-color:var(--brand-tile);background-image:linear-gradient(45deg,var(--brand-tile-dark) 25%,transparent 25%,transparent 75%,var(--brand-tile-dark) 75%),linear-gradient(45deg,var(--brand-tile-dark) 25%,transparent 25%,transparent 75%,var(--brand-tile-dark) 75%);background-size:22px 22px;background-position:0 0,11px 11px;border-top:4px solid var(--brand-wood);pointer-events:none}
.ph-door{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;padding-bottom:22px}
.ph-door__plate{position:relative;z-index:3;display:flex;gap:6px;align-items:center;margin-bottom:-12px;font-family:var(--font-head);font-size:10px;line-height:1.3;white-space:nowrap;background:var(--c-accent);color:var(--c-ink);border:var(--brand-line);box-shadow:3px 3px 0 var(--c-ink);padding:5px 8px}
.ph-door__plate::after{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand-done);border:2px solid var(--c-ink)}
.ph-door__frame{position:relative;display:block;width:var(--door-w);height:var(--door-h);border:4px solid var(--c-ink);border-bottom:0;background:var(--brand-night);perspective:420px}
.ph-door__room{position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--c-accent) 55%,var(--c-bg)) 0 62%,var(--brand-tile) 62%)}
.ph-door__room::before{content:'';position:absolute;left:14%;right:14%;bottom:18%;height:14%;background:var(--brand-wood);border:2px solid var(--c-ink)}
.ph-door__room::after{content:'';position:absolute;left:34%;width:32%;bottom:33%;height:20%;background:var(--brand-work);border:2px solid var(--c-ink);box-shadow:0 0 12px color-mix(in srgb,var(--brand-work) 60%,transparent)}
.ph-door__leaf{position:absolute;inset:0;z-index:2;background:var(--brand-wood);transform-origin:left center;transition:transform .35s cubic-bezier(.3,.7,.3,1);box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--brand-wood) 80%,var(--brand-night)),inset 0 0 0 9px var(--brand-wood),inset 0 0 0 12px color-mix(in srgb,var(--brand-wood) 80%,var(--brand-night))}
.ph-door__leaf::after{content:'';position:absolute;right:10px;top:52%;width:7px;height:7px;background:var(--c-accent);border:1px solid var(--c-ink)}
.ph-door:hover .ph-door__leaf{transform:rotateY(-72deg)}
@media (prefers-reduced-motion:no-preference){
  .ph-door .ph-door__leaf{animation:ph-peek 18s steps(1,end) infinite}
  .ph-door:nth-child(2) .ph-door__leaf{animation-delay:-4s}
  .ph-door:nth-child(3) .ph-door__leaf{animation-delay:-8s}
  .ph-door:nth-child(4) .ph-door__leaf{animation-delay:-12s}
  .ph-door:nth-child(5) .ph-door__leaf{animation-delay:-2s}
  .ph-door:nth-child(6) .ph-door__leaf{animation-delay:-14s}
  .ph-door:nth-child(7) .ph-door__leaf{animation-delay:-6s}
  .ph-door:nth-child(8) .ph-door__leaf{animation-delay:-10s}
  .ph-door:nth-child(9) .ph-door__leaf{animation-delay:-16s}
  .ph-door:hover .ph-door__leaf{animation:none}
}
@keyframes ph-peek{0%,92%{transform:none}93%,99%{transform:rotateY(-38deg)}}

/* ── Дорожная карта ── */
.ph-road{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:3px;border:var(--brand-line);box-shadow:var(--brand-shadow);background:var(--c-ink)}
.ph-road li{padding:22px 20px;display:flex;flex-direction:column;gap:12px;background:var(--brand-paper)}
.ph-road h3{font-size:18px;font-weight:600}
.ph-road p{font-size:15px;color:var(--brand-muted)}
.ph-state{align-self:flex-start;font-family:var(--brand-mono);font-size:12px;font-weight:700;padding:3px 8px;border:2px solid var(--c-ink);background:var(--c-bg);color:var(--c-ink)}
.ph-state--done{background:var(--brand-done);color:var(--brand-night)}
.ph-state--wip{background:var(--brand-work);color:var(--brand-paper)}

/* ── Текст страницы (тело из админки) ── */
.ph-prose{max-width:74ch;font-size:17px;line-height:1.6;padding-block:0 88px}
.ph-prose>*+*{margin-top:1em}
.ph-prose h2{font-family:var(--font-head);font-weight:400;font-size:20px;line-height:1.4}
.ph-prose pre,.ph-prose code{font-family:var(--brand-mono)}
.ph-prose pre{background:var(--brand-night);color:var(--c-bg);padding:16px 18px;overflow-x:auto;border:var(--brand-line)}
.ph-prose blockquote{margin:0;padding:16px 20px;border:3px dashed var(--brand-dash)}

/* ── Подвал ── */
.ph-foot{background:var(--brand-night);color:var(--brand-sand);border-top:var(--brand-px) solid var(--c-ink)}
.ph-foot__in{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding-block:32px}
.ph-foot .ph-logo{font-size:13px}
.ph-foot__links{display:flex;gap:18px;flex:1;flex-wrap:wrap;align-items:center}
.ph-foot__links a{color:var(--c-bg);display:inline-flex;min-height:44px;align-items:center}
.ph-foot .ph-lang{border-color:var(--brand-sand);box-shadow:none}
.ph-foot .ph-lang a{background:transparent;color:var(--brand-sand)}
.ph-foot .ph-lang a+a{border-left-color:var(--brand-sand)}
.ph-foot .ph-lang a[aria-current]{background:var(--brand-sand);color:var(--brand-night)}

@media (max-width:600px){
  .ph-section{padding-block:64px}
  .ph-hero__in{padding-block:32px 48px}
  .ph-hero__copy{padding:24px 20px}
  .ph-btn{flex-basis:100%}
  .ph-warden__text{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .ph-btn{transition:none}
  html{scroll-behavior:auto}
}

/* ==== Шапка и подвал ДВИЖКА в стиле Prompt Hospital (areas: engine) ====
   Шапку и подвал рисует движок: пункты меню, кнопка, колонки подвала — из админки.
   Переключатель языка — два пункта меню («RU» → /, «EN» → /en); текущий отмечен
   aria-current движком. Цвета — токенами темы и брендовыми --brand-*. */
.site-header{background:var(--brand-wood);border-bottom:var(--brand-px) solid var(--c-ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header .header-in{min-height:60px;gap:20px}
.site-header .logo{font-family:var(--font-head);font-size:15px;letter-spacing:1px;text-transform:uppercase;color:var(--c-accent);text-decoration:none;text-shadow:2px 2px 0 var(--c-ink);white-space:nowrap}
/* Меню шапки как в макете: разделы — простыми ссылками сразу за логотипом; пункты RU и EN
   (ссылки на / и /en) — плашкой-переключателем справа. Переключатель — те же пункты меню:
   отдельного места под языки у шапки движка пока нет. */
.site-header nav.menu{flex:1;justify-content:flex-start;align-items:center;gap:0 18px;margin:0}
.site-header nav.menu a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--c-bg);text-decoration:none}
.site-header nav.menu a:hover{color:var(--c-accent)}
.site-header nav.menu a[href="/"],.site-header nav.menu a[href="/en"]{justify-content:center;min-width:44px;min-height:36px;padding:0 10px;font-family:var(--font-head);font-size:11px;color:var(--c-ink);background:var(--c-bg);border:2px solid var(--c-ink);box-shadow:2px 2px 0 var(--c-ink)}
.site-header nav.menu a[href="/"]{margin-left:auto}
.site-header nav.menu a[href="/"]+a[href="/en"]{margin-left:-18px;border-left:0}
.site-header nav.menu a[href="/"][aria-current],.site-header nav.menu a[href="/en"][aria-current]{background:var(--c-accent)}
.site-header .m-nav summary{color:var(--c-ink);background:var(--c-accent);border:2px solid var(--c-ink);border-radius:0;box-shadow:2px 2px 0 var(--c-ink)}
.site-header .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;font-family:var(--font-head);font-size:11px;color:var(--c-ink);background:var(--c-accent);border:2px solid var(--c-ink);border-radius:0;box-shadow:2px 2px 0 var(--c-ink);text-decoration:none}
.site-header .btn:hover{background:color-mix(in srgb,var(--c-accent) 80%,var(--brand-paper))}
.footer{background:var(--brand-night);color:var(--brand-sand);border-top:var(--brand-px) solid var(--c-ink)}
/* Подвал как в макете — одной строкой: логотип · ссылки · «сделано в …» · RU/EN справа.
   Содержимое — из админки (Внешний вид → Подвал): колонка ссылок без заголовка (GitHub,
   Telegram), колонка «RU → /», «EN → /en» и копирайт-подпись. Пакет только раскладывает. */
.footer .footer-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-block:14px}
.footer .f-brand{display:contents}
.footer .f-brand p{order:2;margin:0;font-size:14px;color:var(--brand-sand)}
.footer .f-col{order:1}
.footer .f-col h4:empty{display:none}
.footer .f-col ul{display:flex;flex-wrap:wrap;gap:0 18px;margin:0;padding:0;list-style:none}
.footer .f-col a{text-decoration:underline;text-underline-offset:3px}
.footer .f-col:has(a[href="/en"]){order:3;margin-left:auto}
.footer .f-col:has(a[href="/en"]) ul{gap:0;border:2px solid var(--brand-sand)}
.footer .f-col a[href="/"],.footer .f-col a[href="/en"]{justify-content:center;min-width:44px;min-height:36px;padding:0 10px;font-family:var(--font-head);font-size:11px;text-decoration:none}
.footer .f-col a[href="/"][aria-current],.footer .f-col a[href="/en"][aria-current]{background:var(--brand-sand);color:var(--brand-night)}
.footer .footer-bottom{font-size:12px;opacity:.85}
/* Копирайт уже стоит в строке выше подписью; внизу — только обязательная ссылка на политику. */
.footer .footer-bottom>span{display:none}
.footer .logo{font-family:var(--font-head);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--c-accent);text-shadow:2px 2px 0 var(--c-ink)}
.footer a{color:var(--c-bg);display:inline-flex;min-height:44px;align-items:center}
.footer .f-col h4,.footer .footer-bottom{color:var(--brand-sand)}

}