/* Светлая тема «Paper / Studio». Тёмный оригинал — в terminal-mono.css. */

:root { color-scheme: dark; }

/* Переключатель одинаково работает в боковой и верхней панелях. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  font: 500 var(--fs-xs) / 1.2 var(--mono);
  cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--orange); color: var(--orange); }
.theme-toggle svg { display: block; width: 1.15rem; height: 1.15rem; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: inline; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
.rail > .theme-toggle { align-self: flex-start; margin-right: 1.25rem; }
.rail { overflow-y: auto; }
.topbar__in { gap: 0.75rem; }
.topbar__lang { margin-left: auto; }
.topbar .theme-toggle { padding: 0.5rem; flex-shrink: 0; }
.topbar .theme-toggle__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Светлый вариант используется и при отключённом JavaScript. */
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #f6f7f2;
  --bg-2: #eef0e9;
  --panel: #e9ece3;
  --panel-2: #eef0e9;
  --ink: #ffffff;
  --fg: #19231f;
  --dim: #2b352f;
  --faint: #36433b;
  --line: #cdd3c7;
  --line-2: #879482;
  --orange: #234bd1;
  --orange-dim: #2144b5;
  --green: #24613b;
  --cyan: #234bd1;
  --pink: #a92c40;
  --sans: "Helvetica Neue", Arial, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --rail: 13.5rem;
  --pad: clamp(4rem, 8vw, 7rem);
}

/* Все изменения композиции ограничены светлой темой. */
:root:not([data-theme="dark"]) body {
  font-family: var(--sans);
  line-height: 1.65;
  font-variant-ligatures: normal;
}
:root:not([data-theme="dark"]) .wrap { max-width: 78rem; }
:root:not([data-theme="dark"]) .k,
:root:not([data-theme="dark"]) .cmd,
:root:not([data-theme="dark"]) .rail__nav,
:root:not([data-theme="dark"]) .rail__foot,
:root:not([data-theme="dark"]) .topbar__lang,
:root:not([data-theme="dark"]) .hero__boot,
:root:not([data-theme="dark"]) .hero__meta dt,
:root:not([data-theme="dark"]) .tbl__n,
:root:not([data-theme="dark"]) .tbl__tech,
:root:not([data-theme="dark"]) .stack dt,
:root:not([data-theme="dark"]) .proj__bar::before,
:root:not([data-theme="dark"]) .proj__bar .tag,
:root:not([data-theme="dark"]) .spec,
:root:not([data-theme="dark"]) .steps__n,
:root:not([data-theme="dark"]) .shots__cap,
:root:not([data-theme="dark"]) .status,
:root:not([data-theme="dark"]) .endcard { font-family: var(--mono); }

:root:not([data-theme="dark"]) .rail { padding-top: 2.5rem; gap: 2rem; }
:root:not([data-theme="dark"]) .rail__name { font-size: 1.25rem; letter-spacing: -0.045em; }
:root:not([data-theme="dark"]) .rail__name::before,
:root:not([data-theme="dark"]) .topbar__name::before,
:root:not([data-theme="dark"]) .footer__name::before { content: "/"; font-weight: 400; }
:root:not([data-theme="dark"]) .rail__nav a { padding-block: 0.5rem; font-size: 0.875rem; }
:root:not([data-theme="dark"]) .rail__nav a.is-on { background: var(--bg); }
:root:not([data-theme="dark"]) .rail__nav a b { color: var(--cyan); }
:root:not([data-theme="dark"]) .topbar {
  background: var(--bg);
  backdrop-filter: none;
  border-bottom-color: var(--line);
}
:root:not([data-theme="dark"]) .topbar__in { height: auto; min-height: 4.25rem; }
:root:not([data-theme="dark"]) .topbar__name { font-size: 1.25rem; letter-spacing: -0.04em; }
:root:not([data-theme="dark"]) .theme-toggle { background: var(--bg); }

:root:not([data-theme="dark"]) .hero { padding-top: clamp(2.75rem, 6vw, 5.5rem); }
:root:not([data-theme="dark"]) .hero__boot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: clamp(2rem, 4vw, 3.75rem);
  font-size: var(--fs-xs);
}
:root:not([data-theme="dark"]) .hero__boot span b { color: var(--fg); }
:root:not([data-theme="dark"]) .hero__title {
  font-size: clamp(2.25rem, 1rem + 4.05vw, 4.8rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.055em;
  max-width: none;
  text-wrap: balance;
}
:root:not([data-theme="dark"]) .hero__title .hl::before,
:root:not([data-theme="dark"]) .hero__title .hl::after { content: none; }
:root:not([data-theme="dark"]) .hero__lede {
  max-width: 61ch;
  margin-top: 2rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  line-height: 1.7;
}
:root:not([data-theme="dark"]) .hero__actions { margin-top: 2rem; gap: 1.25rem 2rem; }
:root:not([data-theme="dark"]) .btn {
  border-radius: 4px;
  min-height: 2.75rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}
:root:not([data-theme="dark"]) .btn::before { content: none; }
:root:not([data-theme="dark"]) .btn--solid::after { content: "↗"; margin-left: 1.25rem; }
:root:not([data-theme="dark"]) .btn--solid:hover { background: var(--orange-dim); color: var(--ink); }
:root:not([data-theme="dark"]) .btn--sm { padding: 0.5rem 0.85rem; }
:root:not([data-theme="dark"]) .lnk { font-size: var(--fs-sm); font-weight: 600; padding-block: 0.35rem; }

:root:not([data-theme="dark"]) .hero__meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-2);
  border-top-color: var(--line-2);
  margin-top: clamp(3rem, 5vw, 5rem);
}
:root:not([data-theme="dark"]) .hero__meta > div {
  display: block;
  padding: 1.35rem 1.25rem;
  border-bottom: 0;
  font-size: var(--fs-sm);
}
:root:not([data-theme="dark"]) .hero__meta > div:first-child { padding-left: 0; }
:root:not([data-theme="dark"]) .hero__meta > div:last-child { padding-right: 0; }
:root:not([data-theme="dark"]) .hero__meta > div + div { border-left: 1px solid var(--line); }
:root:not([data-theme="dark"]) .hero__meta dt { font-size: var(--fs-label); margin-bottom: 0.5rem; color: var(--faint); }
:root:not([data-theme="dark"]) .hero__meta dd { line-height: 1.45; }
:root:not([data-theme="dark"]) .hero__meta dd b { font-weight: 700; color: var(--fg); }

:root:not([data-theme="dark"]) .cmd { font-size: var(--fs-xs); margin-bottom: 1.75rem; }
:root:not([data-theme="dark"]) .cmd__path { font-weight: 600; }
:root:not([data-theme="dark"]) .cmd__sign,
:root:not([data-theme="dark"]) .cmd__cmd,
:root:not([data-theme="dark"]) .cmd__arg { color: var(--faint); }
:root:not([data-theme="dark"]) .h2 {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.045em;
  max-width: 28ch;
  text-wrap: balance;
}
:root:not([data-theme="dark"]) .h3 { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); letter-spacing: -0.03em; }
:root:not([data-theme="dark"]) .tbl__row { padding-block: 1.5rem; }
:root:not([data-theme="dark"]) .tbl__t { font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1.375rem); letter-spacing: -0.025em; }
:root:not([data-theme="dark"]) .tbl__tech { font-size: var(--fs-label); }
:root:not([data-theme="dark"]) .tbl__tech li::before,
:root:not([data-theme="dark"]) .proj__foot .spec li::before { content: ""; }
:root:not([data-theme="dark"]) .tbl__tech li:not(:last-child)::after,
:root:not([data-theme="dark"]) .proj__foot .spec li:not(:last-child)::after { content: " /"; color: var(--line-2); }

:root:not([data-theme="dark"]) .quote { font-size: clamp(1.375rem, 1.1rem + 0.75vw, 1.875rem); line-height: 1.45; letter-spacing: -0.025em; }
:root:not([data-theme="dark"]) .diff { border: 0; border-top: 2px solid var(--orange); }
:root:not([data-theme="dark"]) .diff > div { padding: 1.1rem 1.25rem; }
:root:not([data-theme="dark"]) .stack > div { padding-block: 1.2rem; }
:root:not([data-theme="dark"]) .stack ul { font-size: var(--fs-body); }

:root:not([data-theme="dark"]) .proj { border-color: var(--line); background: #fff; }
:root:not([data-theme="dark"]) .proj + .proj { margin-top: 2rem; }
:root:not([data-theme="dark"]) .proj__bar {
  padding: 1.25rem 1.5rem;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
  gap: 0.5rem 1.25rem;
}
:root:not([data-theme="dark"]) .proj__bar b { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem); letter-spacing: -0.035em; }
:root:not([data-theme="dark"]) .proj__bar .tag { background: #edf4eb; border-color: #b6cbb4; font-size: var(--fs-micro); padding: 0.2rem 0.6rem; }
:root:not([data-theme="dark"]) .proj__body { padding: clamp(1.25rem, 3vw, 2rem); }
:root:not([data-theme="dark"]) .proj__lede { font-size: clamp(1.125rem, 1rem + 0.3vw, 1.375rem); line-height: 1.55; letter-spacing: -0.015em; }
:root:not([data-theme="dark"]) .proj__points { gap: 0.75rem; }
:root:not([data-theme="dark"]) .proj__foot { padding: 1.1rem 1.5rem; }
:root:not([data-theme="dark"]) .proj__foot .spec { font-size: var(--fs-label); }

/* Фон и элементы просмотра скриншотов используют одну палитру. */
:root:not([data-theme="dark"]) .lb { background: rgb(246 247 242 / 97%); backdrop-filter: blur(6px); }
:root:not([data-theme="dark"]) .lb__nav { background: var(--bg); }
:root:not([data-theme="dark"]) .steps li { padding-block: 1.5rem; }
:root:not([data-theme="dark"]) .formats { border: 0; border-block: 1px solid var(--line); }
:root:not([data-theme="dark"]) .formats > div { background: var(--bg); padding-block: 2rem; }
:root:not([data-theme="dark"]) .formats h3 { margin-block: 1.25rem 1rem; }
:root:not([data-theme="dark"]) .faq summary { padding-block: 1.4rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem); }
:root:not([data-theme="dark"]) #contact { background: var(--bg-2); }
:root:not([data-theme="dark"]) .chan { max-width: 42rem; }
:root:not([data-theme="dark"]) .chan a { padding-block: 1.25rem; }
:root:not([data-theme="dark"]) .footer { background: var(--bg-2); }
:root:not([data-theme="dark"]) .footer__name { font-size: 1.375rem; letter-spacing: -0.035em; }
:root:not([data-theme="dark"]) .status { background: var(--bg); font-size: 0.75rem; }
:root:not([data-theme="dark"]) .status__mode { background: var(--orange); }

@media (min-width: 80rem) {
  :root:not([data-theme="dark"]) .wrap { padding-inline: clamp(2.5rem, 4.5vw, 6rem); }
}
@media (max-width: 64rem) {
  :root:not([data-theme="dark"]) .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:not([data-theme="dark"]) .hero__meta > div { padding: 1.25rem; }
  :root:not([data-theme="dark"]) .hero__meta > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  :root:not([data-theme="dark"]) .hero__meta > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 40rem) {
  :root:not([data-theme="dark"]) .hero__boot { display: grid; gap: 0.5rem; }
  :root:not([data-theme="dark"]) .hero__title { font-size: clamp(2rem, 0.5rem + 6.8vw, 3.25rem); line-height: 1.1; letter-spacing: -0.045em; }
  :root:not([data-theme="dark"]) .hero__meta > div { padding: 1.1rem 0 1.1rem 1rem; }
  :root:not([data-theme="dark"]) .proj__bar { padding: 1rem; gap: 0.5rem 0.75rem; }
  :root:not([data-theme="dark"]) .proj__bar .sep { display: none; }
  :root:not([data-theme="dark"]) .proj__foot { padding: 1rem; }
  :root:not([data-theme="dark"]) .topbar__in { gap: 0.6rem; }
  :root:not([data-theme="dark"]) .topbar__name { font-size: 1.125rem; }
}

/* Длинные китайские строки требуют чуть более свободного интерлиньяжа. */
:root:not([data-theme="dark"]):lang(zh) .hero__title { line-height: 1.2; letter-spacing: -0.025em; }
@media (max-width: 23rem) {
  :root:not([data-theme="dark"]) .topbar__name { font-size: 1rem; }
  :root:not([data-theme="dark"]) .topbar__lang { gap: 0.55ch; font-size: 0.75rem; }
  :root:not([data-theme="dark"]) .hero__title { font-size: 1.9rem; }
}