/* Слой демо приложения поверх главной (#app-layer, скрипты слоя и загрузчик demo.js — web/scripts/landing/demo-layer.html, demo-extern.mjs). */
html.app-open,html.app-open body {overflow:hidden}
.app-layer {position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:48px minmax(0,1fr);background:var(--ink);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .32s ease,transform .52s var(--ease-spring)}
.app-layer.is-open {opacity:1;transform:none}
.app-layer[hidden] {display:none}
.al-bar {display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;color:#fffc;font-size:13px;font-weight:600}
.al-bar .logo {width:28px;height:28px;border-radius:9px;font-size:13px;box-shadow:none;background:none}
.al-bar b {color:#fff;font-family:var(--font-display);font-size:14px;letter-spacing:0}
.al-tag {padding:3px 9px;border-radius:999px;background:#ffffff1a;font-size:12px}
.al-modes {display:flex;gap:4px;margin-left:12px}
.al-modes button {-webkit-appearance:none;appearance:none;white-space:nowrap;padding:6px 11px;border:0;border-radius:999px;background:none;color:#ffffffb3;font:700 12.5px var(--font-sans);cursor:pointer}
.al-modes button:hover {background:#ffffff14;color:#fff}
.al-modes button.is-on {background:var(--marker);color:var(--ink)}
.al-close {-webkit-appearance:none;appearance:none;white-space:nowrap;margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border:0;border-radius:999px;background:var(--paper);color:var(--ink);font:700 13px var(--font-sans);cursor:pointer;transition:transform .2s var(--ease-spring)}
.al-close:hover {transform:translate(-2px)}
.al-close svg {width:16px;height:16px}
.al-body {position:relative;border-radius:16px 16px 0 0;overflow:hidden;background:var(--canvas)}
#al-app {position:absolute;inset:0}
@media(max-width:1180px) {.al-tag {display:none}
}
.al-sel {display:none;margin-left:8px;max-width:46vw;padding:6px 10px;border:0;border-radius:999px;background:#ffffff1a;color:#fff;font:700 12.5px var(--font-sans)}
.al-sel option {color:#141311}
@media(max-width:1060px) {.al-modes {display:none}
.al-sel {display:block}
}
@media(prefers-reduced-motion:reduce) {.app-layer {transition:none}
}
.al-fake  { flex: none; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--marker, #d9ff43); color: #141311; font-size: 12px; font-weight: 800; white-space: nowrap; }
.al-soon  { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #ffffff26; font-size: 11px; font-weight: 700; }
@media (max-width: 520px)  { .al-fake  { margin-left: 4px; padding: 2px 7px; font-size: 11px; }
 }
.app-layer  { grid-template-columns: minmax(0, 1fr); }
.al-bar  { min-width: 0; }
.al-close-s  { display: none; }
@media (max-width: 520px)  {
  .al-bar  { gap: 8px; padding: 0 8px 0 10px; }
  .al-bar > b, .al-bar .logo  { display: none; }
  .al-sel  { flex: 1 1 0; min-width: 64px; max-width: none; margin-left: 0; text-overflow: ellipsis; }
  .al-close  { flex: none; padding: 7px 11px 7px 8px; gap: 4px; }
  .al-close-l  { display: none; }
 .al-close-s  { display: inline; }
}