/* Выбор темы — карусель как на omarchy.org (js/theme-picker.js). Размеры сняты с сайта:
   карточка min(72vw, 736px) 16:9; соседи — стопкой за ней: 0.88 и сдвиг на 18% и 30% ширины; вся стопка наклонена назад на 9° (трапеция),
   притушены до яркости 0.55; у текущей — рамка цвета акцента; фон — 55% чёрного с размытием 4px. */
#theme-pick{ position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  font-family:"Geist","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow:hidden; user-select:none; }
#theme-pick[hidden]{ display:none; }
.tp-stage{ position:absolute; inset:0; perspective:1100px; perspective-origin:50% calc(50% - 30px); }
.tp-card{ --cw:min(72vw, 736px); position:absolute; left:50%; top:calc(50% - 30px); width:var(--cw); aspect-ratio:16/9;
  cursor:pointer; container-type:inline-size;
  transition:transform .45s cubic-bezier(.22,.8,.24,1), opacity .3s; }
.tp-card .tp-mock{ outline:1px solid #71717a; box-shadow:0 25px 50px -12px rgba(0,0,0,.6);
  filter:brightness(.55); transition:filter .2s, outline-color .2s; }
.tp-card:hover .tp-mock{ filter:brightness(.78); }
.tp-card.on .tp-mock{ outline:2px solid var(--a); filter:none; }
.tp-name{ position:absolute; left:50%; transform:translateX(-50%); top:calc(50% - 30px + min(72vw, 736px) * .28125 + 14px);
  padding:14px 16px; background:none; border:0; cursor:pointer; font-family:inherit; font-size:24px; font-weight:600;
  line-height:1.3; letter-spacing:-.01em;
  color:#fff; transition:filter .15s; white-space:nowrap; }
.tp-name:hover{ filter:brightness(1.25); }
.tp-hint{ position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#ffffff80;
  font:12px "JetBrains Mono",ui-monospace,monospace; }
.tp-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; z-index:20; display:grid; place-items:center;
  background:#000; color:#fff; border:1px solid #1a1a1a; cursor:pointer; transition:background .15s; padding:0; }
.tp-nav:hover{ background:#111; }
.tp-nav svg{ width:20px; height:20px; }
.tp-nav.prev{ left:12px; } .tp-nav.next{ right:12px; }

/* макет песочницы в цветах темы — шрифт от ширины карточки (cqw), чтобы и крупная, и соседние были похожи */
.tp-mock{ position:relative; width:100%; height:100%; display:grid; grid-template-columns:4.2% 21% 1fr; grid-template-rows:1fr 3.6%;
  background:var(--dd); color:var(--f); font:1.28cqw/1.5 "JetBrains Mono",ui-monospace,monospace; overflow:hidden; }
.tp-mock p{ margin:0; }
.tp-act{ grid-row:1 / 3; background:var(--b); border-right:1px solid var(--l); display:flex; flex-direction:column; align-items:center;
  gap:1.6cqw; padding:1.6cqw 0; }
.tp-act i{ width:1.9cqw; aspect-ratio:1; border-radius:.3cqw; border:.18cqw solid var(--g); opacity:.8; }
.tp-act i.on{ border-color:var(--f); background:var(--l); opacity:1; outline:.5cqw solid var(--l); }
.tp-act span{ flex:1; }
.tp-side{ background:var(--b); border-right:1px solid var(--l); padding:1.1cqw .8cqw; font-family:system-ui,sans-serif; font-size:1.2cqw;
  border-radius:0 .5cqw .5cqw 0; }
.tp-side b{ display:block; margin:0 0 1cqw .4cqw; font-weight:600; }
.tp-side p{ padding:.15cqw .4cqw .15cqw 1.6cqw; white-space:nowrap; overflow:hidden; }
.tp-side p.dir{ padding-left:.4cqw; }
.tp-side p.on{ background:var(--l); outline:1px solid var(--a); }
.tp-main{ display:grid; grid-template-rows:1fr 36%; gap:.5cqw; padding:.6cqw .6cqw 0; min-width:0; }
.tp-ed, .tp-term{ background:var(--b); border:1px solid var(--l); border-radius:.5cqw; overflow:hidden; min-width:0; }
.tp-tabs{ display:flex; align-items:stretch; border-bottom:1px solid var(--l); font:1.2cqw/2.6cqw system-ui,sans-serif; }
.tp-tabs span{ padding:0 1.6cqw; box-shadow:inset 0 1px 0 var(--a); border-right:1px solid var(--l); }
.tp-tabs span.off{ box-shadow:none; color:var(--g); }
.tp-tabs em{ margin-left:auto; font-style:normal; padding:0 1.2cqw; color:var(--g); }
.tp-crumb{ padding:.2cqw 1.6cqw; color:var(--g); font:1.05cqw system-ui,sans-serif; }
.tp-code{ padding:.2cqw 0; }
.tp-code p{ white-space:pre; padding-right:1cqw; }
.tp-code p.cur{ background:var(--d); }
.tp-code u{ display:inline-block; width:4.2cqw; padding-right:1.4cqw; text-align:right; text-decoration:none; color:var(--m); }
.tp-code p.cur u{ color:var(--f); }
.tp-ptabs{ display:flex; gap:.4cqw; padding:.6cqw 1cqw .2cqw; font:1.1cqw system-ui,sans-serif; }
.tp-ptabs span{ padding:.2cqw .8cqw; border-radius:.3cqw; background:var(--l); }
.tp-ptabs span.off{ background:none; color:var(--g); }
.tp-term pre{ margin:0; padding:.3cqw 1.6cqw; font:inherit; white-space:pre; }
.tp-mock k{ color:var(--k); } .tp-mock s{ color:var(--s); text-decoration:none; } .tp-mock fn{ color:var(--fn); }
.tp-mock n{ color:var(--n); } .tp-mock g{ color:var(--g); font-style:italic; } .tp-mock y{ color:var(--y); }
.tp-term i.cur{ display:inline-block; width:.75cqw; height:1.4cqw; vertical-align:-.25cqw; background:var(--a); }
.tp-status{ grid-column:2 / 4; display:flex; align-items:center; gap:1.6cqw; padding:0 1cqw; color:var(--g);
  font:1cqw system-ui,sans-serif; }
.tp-status em{ margin-left:auto; font-style:normal; }
@media (max-width:760px){
  .tp-card{ --cw:86vw; width:86vw; } .tp-name{ top:calc(50% - 30px + 86vw * .28125 + 10px); font-size:20px; }
}

/* кнопка «тема» в шапке — только в виде «терминал» (в виде VS Code тема в меню настроек) */
#theme-btn{ display:none; }
:root[data-ui="term"] #theme-btn{ display:inline-block; }

/* Темы Omarchy в видах «VS Code» и «терминал»: то, что в общем CSS задано числом, а не переменной.
   data-theme ставит js/themes.js; у «Стандартной» ничего не меняем. */
:root[data-theme]:not([data-theme="default"]) .md code{ background:var(--well); color:var(--code); }
:root[data-theme]:not([data-theme="default"]) .md pre{ background:var(--well); border-color:var(--line); }
:root[data-theme]:not([data-theme="default"]) .md pre code{ background:none; color:var(--ink); }
:root[data-theme]:not([data-theme="default"]) .md pre.terminal{ color:var(--ink); }
:root[data-theme]:not([data-theme="default"]) .md strong{ color:var(--strong); }
:root[data-theme]:not([data-theme="default"]) .badge{ background:var(--well); }
:root[data-theme]:not([data-theme="default"]) #answer-row input{ background:var(--well); }
:root[data-theme]:not([data-theme="default"]) #term-wrap{ background:var(--bg); }
:root[data-theme]:not([data-theme="default"]) .a-msg b{ color:var(--strong); }
:root[data-theme]:not([data-theme="default"]) .a-msg code,
:root[data-theme]:not([data-theme="default"]) .a-msg pre{ background:var(--well); }
:root[data-ui="term"][data-theme]:not([data-theme="default"]) .btn-check.big{ background:var(--accent); color:var(--on-accent); }