/* Токены. Единственное место, где живут цвета, шрифты, ритм и тени.
 *
 * Палитра — её собственная, с сайта EEKLERA: оникс и золото. Цифры не
 * «похожий тёмный», а именно те, что уже работают в её бренде, поэтому
 * материалы, снятые для сайта, ложатся в интерфейс без правок.
 *
 * Дизайн сознательно однотемный: это кинозал, а не документ. Светлой версии
 * нет, но всё окрашено явно — страница не зависит от темы браузера.
 */
:root {
  /* Глубина: от пола рабочего стола к поднятым поверхностям окон. */
  --pit: #050407;
  --onyx: #07060a;
  --obsidian: #0d0c12;
  --velvet: #14121a;
  --raise: #1b1822;

  --gold: #c9a861;
  --gold-bright: #e8c87a;
  --gold-deep: #8a6d35;
  --gold-glow: rgba(201, 168, 97, .18);
  --ember: #d97742;

  --ivory: #ece4d4;
  --bone: rgba(236, 228, 212, .78);
  --ash: rgba(236, 228, 212, .55);
  --smoke: rgba(236, 228, 212, .34);

  --rule-soft: rgba(201, 168, 97, .10);
  --rule: rgba(201, 168, 97, .22);
  --edge: rgba(236, 228, 212, .14);

  --ff-display: Cinzel, "Times New Roman", serif;
  --ff-italic: "Cormorant Garamond", Garamond, serif;
  --ff-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Ритм 4px: все отступы кратны ему, поэтому интерфейс не «шатается». */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

  --shadow-window: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 28px 70px rgba(0, 0, 0, .66);
  --shadow-bar: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 30px rgba(0, 0, 0, .5);

  --d-fast: 140ms;
  --d-mid: 260ms;
  --d-slow: 520ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --bar-h: 40px;
  --dock-w: 92px;

  /* Зерно плёнки: тёплый шум поверх всего. Он склеивает интерфейс и кадр в
     одну картинку — без него тёмный фон выглядит просто серым. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.90  0 0 0 0 0.84  0 0 0 0.075 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Оболочка: рабочий стол, док приложений, окна. Панель задач — отдельно,
 * в css/taskbar.css.
 * Разделение намеренное: здесь только «операционная система», а содержимое
 * приложений — в apps.css. Новое приложение добавляется без единой правки
 * здесь, и это главное требование к масштабируемости.
 */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  background: var(--pit);
  color: var(--ivory);
  font: 400 14.5px/1.55 var(--ff-body);
  overflow: hidden;                 /* рабочий стол не прокручивается, прокручиваются окна */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; border-radius: var(--r-sm); }

/* ── Рабочий стол ──────────────────────────────────────────────────────────
 * Свет из левого верхнего угла и тёплый отблеск снизу справа — тот же приём,
 * что в её гримёрке: два источника вместо плоской заливки.
 */
#desktop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 14% -6%, var(--gold-glow), transparent 62%),
    radial-gradient(ellipse 70% 50% at 92% 106%, rgba(217, 119, 66, .10), transparent 60%),
    linear-gradient(140deg, var(--pit) 0%, var(--obsidian) 100%);
}
#grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px;
  mix-blend-mode: overlay; opacity: .22;
}

/* ── Док с приложениями ────────────────────────────────────────────────────
 * Слева колонкой: список направлений читается сверху вниз, как титры.
 */
#dock {
  position: fixed; top: var(--s5); left: var(--s5); z-index: 500;
  display: flex; flex-direction: column; gap: var(--s2);
  width: var(--dock-w);
}
.dock-item {
  display: grid; justify-items: center; gap: 6px;
  padding: var(--s3) var(--s2); border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.dock-item:hover, .dock-item[aria-current="true"] {
  background: rgba(236, 228, 212, .05); border-color: var(--rule-soft);
}
.dock-item .glyph {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: var(--gold-bright); background: rgba(201, 168, 97, .07);
}
.dock-item .glyph svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.dock-item .label {
  font: 500 9px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ash); text-align: center;
  /* Одна строка и никаких переносов: иконки в колонке должны стоять ровно. */
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-item:hover .label, .dock-item[aria-current="true"] .label { color: var(--ivory); }

/* ── Титул рабочего стола ──────────────────────────────────────────────────
 * Первое, что видит человек: имя, одна строка сути и цифры. Дальше он сам
 * решает, открывать окна или уйти в контакт.
 */
#stage {
  /* Справа сверху: слева док, внизу панель задач, а фотография на обоях
     остаётся открытой в центре кадра. */
  position: absolute; top: var(--s6); right: var(--s6); left: auto; bottom: auto;
  max-width: min(40ch, 44vw); text-align: right;
}
#stage .kicker { font: 500 10.5px var(--ff-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s3); }
#stage h1 {
  margin: 0 0 var(--s3); font: 500 clamp(44px, 6.4vw, 96px)/.86 var(--ff-display); letter-spacing: .04em;
  background: linear-gradient(176deg, #fff6e2 0%, var(--gold-bright) 40%, var(--gold) 68%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#stage .lead { margin: 0 0 var(--s5) auto; font: italic clamp(18px, 1.9vw, 26px)/1.25 var(--ff-italic); color: var(--bone); }
#stage .stats { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: flex-end; }
#stage .stats div strong { display: block; font: 500 26px/1 var(--ff-italic); color: var(--gold-bright); }
#stage .stats div span { font: 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }

/* ── Окна ──────────────────────────────────────────────────────────────────
 * Подпись жанра: уголки кадра. Четыре тонкие метки по углам окна — так
 * размечают кадр в кино, и здесь они превращают окно в кадр.
 */
.win {
  position: fixed; z-index: 100;
  display: flex; flex-direction: column;
  min-width: 320px; min-height: 220px;
  background: linear-gradient(170deg, rgba(27, 24, 34, .97), rgba(10, 9, 14, .98));
  border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: var(--shadow-window);
  overflow: hidden;
  animation: win-in var(--d-mid) var(--ease);
}
@keyframes win-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.win[data-min="true"] { display: none; }
.win.focused { border-color: var(--rule); }

.win-head {
  display: flex; align-items: center; gap: var(--s3);
  height: 38px; padding: 0 var(--s3) 0 var(--s4); flex: none;
  border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, rgba(236, 228, 212, .05), transparent);
  cursor: grab; user-select: none;
}
.win-head:active { cursor: grabbing; }
.win-title { font: 500 10.5px var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.win-head .spacer { flex: 1; }
.win-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rule-soft); color: var(--ash);
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.win-btn:hover { color: var(--ivory); border-color: var(--rule); background: rgba(236, 228, 212, .06); }
.win-btn.close:hover { color: #ffd9cc; border-color: rgba(217, 119, 66, .6); background: rgba(217, 119, 66, .14); }

.win-body { flex: 1; overflow: auto; padding: var(--s5); position: relative; }
.win-body::-webkit-scrollbar { width: 10px; }
.win-body::-webkit-scrollbar-thumb { background: rgba(201, 168, 97, .22); border-radius: 100px; }

/* Уголки кадра */
.win-corner { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .5; }
.win-corner::before, .win-corner::after { content: ""; position: absolute; background: var(--gold); }
.win-corner::before { width: 100%; height: 1px; }
.win-corner::after { width: 1px; height: 100%; }
.win-corner[data-c="tl"] { top: 8px; left: 8px; }
.win-corner[data-c="tr"] { top: 8px; right: 8px; }
.win-corner[data-c="tr"]::after { right: 0; }
.win-corner[data-c="bl"] { bottom: 8px; left: 8px; }
.win-corner[data-c="bl"]::before { bottom: 0; }
.win-corner[data-c="br"] { bottom: 8px; right: 8px; }
.win-corner[data-c="br"]::before { bottom: 0; }
.win-corner[data-c="br"]::after { right: 0; }

.win-resize {
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--rule) 50%, var(--rule) 60%, transparent 60%);
}


/* ── Заставка: киноотсчёт ──────────────────────────────────────────────────
 * Одна секунда перед рабочим столом, как ракорд перед фильмом. Это
 * единственный «фокус» интерфейса, дальше всё сдержанно.
 */

/* ── Телефон ───────────────────────────────────────────────────────────────
 * Окна на телефоне не имеют смысла: перетаскивать нечего, места нет.
 * Поэтому там тот же контент, но листом — и каждый раздел открывается на
 * весь экран. Это не урезанная версия, а другая оболочка над теми же данными.
 */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1000px) {
  #dock { display: none; }
  #stage { position: static; left: auto; bottom: auto; max-width: none; padding: var(--s6) var(--s4) var(--s5); }
  #mobile { display: block; }
  .win {
    inset: auto 0 var(--tb-h) 0 !important; width: 100% !important; height: 88vh !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0;
  }
  .win-head { cursor: default; }
  .win-resize { display: none; }
}

#mobile { display: none; position: relative; z-index: 400; padding: 0 var(--s4) var(--s7); }
#mobile .m-list { display: grid; gap: var(--s2); }
.m-item {
  display: flex; align-items: center; gap: var(--s4); width: 100%;
  padding: var(--s4); border-radius: var(--r-md);
  border: 1px solid var(--rule-soft); background: rgba(20, 18, 26, .72);
  text-align: left;
}
.m-item:active { transform: scale(.995); }
.m-item .glyph { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--gold-bright); border: 1px solid var(--rule); border-radius: var(--r-sm); }
.m-item .glyph svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.m-item b { display: block; font: 500 17px/1.1 var(--ff-italic); }
.m-item span { font: 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.m-item .arrow { margin-left: auto; color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Анимации выключены в быстрых настройках — уважаем это так же, как системную
   настройку prefers-reduced-motion. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}

/* Содержимое приложений. Оболочка про это ничего не знает — значит новое
 * приложение приносит свои стили сюда и ничего не ломает.
 */

/* Общие детали, которыми пользуются все приложения. */
.app-head { margin: 0 0 var(--s5); }
.app-head .eyebrow { font: 500 10px var(--ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s2); }
.app-head h2 { margin: 0; font: 500 clamp(26px, 3vw, 38px)/1 var(--ff-italic); }
.app-head p { margin: var(--s2) 0 0; color: var(--ash); font-size: 13px; max-width: 58ch; }

.prose p { margin: 0 0 var(--s3); color: var(--bone); max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.chip {
  padding: 6px 12px; border-radius: 100px; border: 1px solid var(--rule-soft);
  font: 500 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
}
.chip:hover { border-color: var(--rule); color: var(--ivory); }
.chip[data-todo] { border-style: dashed; color: var(--ash); }

/* Фильмография: строка = проект. Год слева моноширинным, потому что колонка
   цифр должна читаться сверху вниз одним движением глаза. */
.films { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-soft); }
.films li {
  display: grid; grid-template-columns: 62px 1fr auto; gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft);
  transition: background var(--d-fast) var(--ease);
}
.films li:hover { background: rgba(201, 168, 97, .05); }
.films time { font: 11px var(--ff-mono); color: var(--gold); }
.films b { font: 500 19px/1.15 var(--ff-italic); }
.films .meta { display: block; font-size: 12px; color: var(--ash); margin-top: 2px; }
.films .state { font: 9.5px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); white-space: nowrap; }
.films .state[data-s="production"] { color: var(--ember); }

/* Кастинг-лист: таблица данных, набранная моноширинным — её читают как
   документ, а не как текст о себе. */
.sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--r-sm); overflow: hidden; }
.sheet div { background: rgba(13, 12, 18, .8); padding: var(--s3) var(--s4); }
.sheet dt { font: 500 9.5px var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }
.sheet dd { margin: 6px 0 0; font: italic 17px/1.2 var(--ff-italic); white-space: pre-line; }
.sheet dd[data-todo] { font: 11px var(--ff-mono); color: var(--ash); letter-spacing: .06em; }

/* Материалы по запросу: пунктир честно говорит, что папка соберётся под задачу. */
.mats { display: grid; gap: var(--s2); margin-top: var(--s5); }
.mat {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  border: 1px dashed var(--rule); background: rgba(201, 168, 97, .05);
}
.mat b { font: 500 16px var(--ff-italic); }
.mat .state { font: 9.5px var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.mat span.note { margin-left: auto; font-size: 12px; color: var(--ash); }

/* Музыка: номер, название, год. Плеера нет намеренно — файлы лежат на сервере
   проекта, здесь витрина, а слушать уводим на площадку. */
.tracks { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.tracks li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s4); align-items: center;
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); counter-increment: t;
}
.tracks li::before { content: counter(t, decimal-leading-zero); font: 11px var(--ff-mono); color: var(--gold); }
.tracks b { font: 500 19px var(--ff-italic); }
.tracks .year { font: 11px var(--ff-mono); color: var(--ash); }

/* Галерея: портреты в своих пропорциях, 3:4 — ничего не срезается. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.shot { position: relative; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--rule-soft); background: var(--obsidian); }
.shot img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; filter: saturate(.9); transition: transform var(--d-slow) var(--ease); }
.shot:hover img { transform: scale(1.03); }
.shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s4) var(--s3) var(--s3);
  background: linear-gradient(transparent, rgba(5, 4, 7, .9));
  font: 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone);
}

/* Контакты: канал под тип запроса, а не «напишите нам». */
.rows { display: grid; gap: var(--s2); }
.row {
  display: grid; gap: 2px; padding: var(--s4);
  border-radius: var(--r-sm); border: 1px solid var(--rule-soft);
  background: rgba(236, 228, 212, .04);
  transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.row:hover { border-color: var(--rule); background: rgba(201, 168, 97, .08); }
.row .kind { font: 500 9.5px var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.row b { font: 500 18px var(--ff-italic); }
.row span.note { font-size: 12px; color: var(--ash); }

/* Соцсети: цифры с датой, чтобы не выглядели вечной правдой. */
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.social div { padding: var(--s4); border: 1px solid var(--rule-soft); border-radius: var(--r-sm); }
.social strong { display: block; font: 500 22px/1 var(--ff-italic); color: var(--gold-bright); }
.social .label { font: 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.social .value { font-size: 12.5px; color: var(--bone); margin-top: 4px; }

.event { padding: var(--s4); border-left: 2px solid var(--gold); background: rgba(201, 168, 97, .06); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.event b { font: 500 18px var(--ff-italic); }
.event .when { font: 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: block; margin: 4px 0 var(--s2); }
.event p { margin: 0; color: var(--bone); font-size: 13px; }

.hint { margin-top: var(--s5); font-size: 12px; color: var(--smoke); }

/* ── Биография ─────────────────────────────────────────────────────────────
 * Самое плотное окно проекта: портрет, роли, вкладки, текст и запись данных.
 * Раскладка держится на двух колонках: слева читают, справа сверяют факты.
 */
.bio { display: flex; flex-direction: column; gap: var(--s5); }

.bio-hero { display: grid; grid-template-columns: 232px 1fr; gap: var(--s5); align-items: stretch; }
.bio-photo { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule-soft); background: var(--obsidian); }
.bio-photo img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: center 18%; filter: saturate(.92); }
/* Метка города поверх снимка — как подпись на съёмочном фото. */
.bio-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s5) var(--s3) var(--s3);
  background: linear-gradient(transparent, rgba(5, 4, 7, .92));
  font: 9.5px var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}

.bio-id { display: flex; flex-direction: column; }
.bio-id h2 { margin: var(--s2) 0 var(--s2); font: 500 clamp(30px, 3.4vw, 44px)/1 var(--ff-display); letter-spacing: .02em; }
.bio-sub { margin: 0; color: var(--bone); font-size: 13.5px; max-width: 56ch; }
.bio-actions { display: flex; align-items: flex-end; gap: var(--s4); margin-top: auto; flex-wrap: wrap; }
.bio-actions .chips { margin: 0; flex: 1; }
.chip.lead { border-color: var(--rule); color: var(--gold-bright); background: rgba(201, 168, 97, .12); }
.bio-cta {
  padding: 9px 18px; border-radius: 100px; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #120d04;
  font: 600 10px var(--ff-mono); letter-spacing: .14em; text-transform: uppercase;
  transition: filter var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.bio-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Вкладки внутри окна: полоса под активной, как в монтажной таймлинии. */
.bio-tabs { display: flex; gap: var(--s1); flex-wrap: wrap; border-bottom: 1px solid var(--rule-soft); }
.bio-tabs button {
  position: relative; padding: var(--s3) var(--s3) var(--s3);
  font: 500 10.5px var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ash);
  transition: color var(--d-fast) var(--ease);
}
.bio-tabs button:hover { color: var(--ivory); }
.bio-tabs button[aria-selected="true"] { color: var(--gold-bright); }
.bio-tabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: -1px; height: 1.5px;
  background: var(--gold-bright);
}

.bio-body { display: grid; grid-template-columns: 1fr 258px; gap: var(--s6); align-items: start; }
.bio-thesis { margin: var(--s2) 0 var(--s4); font: 500 clamp(22px, 2.4vw, 30px)/1.15 var(--ff-italic); max-width: 34ch; }
.bio-main .prose p { font-size: 13.8px; }
.bio-main .prose p.todo {
  padding: var(--s3); border-left: 2px dashed var(--rule); background: rgba(201, 168, 97, .05);
  font: 12px var(--ff-mono); color: var(--ash); letter-spacing: .02em;
}

/* Полоса показателей под текстом: три факта, которые спрашивают чаще всего. */
.bio-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: var(--s5); background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--r-sm); overflow: hidden; }
.bio-strip div { background: rgba(13, 12, 18, .8); padding: var(--s3) var(--s4); }
.bio-strip span { display: block; font: 9.5px var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.bio-strip b { font: 500 15px var(--ff-italic); }

/* Правая колонка — сверка фактов. Моноширинные подписи, значения курсивом. */
.bio-side dl { margin: var(--s3) 0 0; display: grid; gap: 0; }
.bio-side .rec { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.bio-side .rec:last-child { border-bottom: 0; }
.bio-side dt { font: 500 9.5px var(--ff-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin: 0; }
.bio-side dd { margin: 5px 0 0; font: italic 15px/1.25 var(--ff-italic); color: var(--ivory); }
.bio-side dd[data-todo] { font: 11.5px var(--ff-mono); color: var(--ash); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 58px 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.timeline .y { font: 500 12px var(--ff-mono); color: var(--gold); }
.timeline p { margin: 0; color: var(--bone); font-size: 13.5px; }

.facts { margin: 0; padding-left: var(--s4); }
.facts li { color: var(--bone); font-size: 13.5px; margin-bottom: var(--s2); }

/* Строка источника: где взяты данные и какой они версии. */
.bio-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--rule-soft);
  font: 9.5px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke);
}
.bio-foot a { color: var(--gold); }
.bio-foot a:hover { color: var(--gold-bright); }

@media (max-width: 860px), (pointer: coarse) and (max-width: 1000px) {
  .bio-hero { grid-template-columns: 1fr; }
  .bio-photo img { min-height: 260px; }
  .bio-body { grid-template-columns: 1fr; gap: var(--s5); }
  .bio-strip { grid-template-columns: 1fr; }
}

/* Панель задач: пуск, поиск, вкладки окон, лоток, часы, быстрые настройки.
 *
 * Панель — часть оболочки и живёт отдельно от ядра: она только читает
 * состояние окон через OS.opened() и подписку OS.on(). Поэтому её можно
 * переписать целиком, не касаясь ни одного приложения.
 */

:root { --tb-h: 52px; }

/* Настройки вида, которыми управляют быстрые настройки. Значения меняет JS
   через data-атрибуты на <html>, поэтому нет ни одного inline-стиля. */
html[data-grain="off"] #grain { display: none; }
html[data-accent="ember"] {
  --gold: #d9884a; --gold-bright: #f0a765; --gold-deep: #8f4f22;
  --gold-glow: rgba(217, 136, 74, .20);
}
html[data-accent="silver"] {
  --gold: #a9b0bb; --gold-bright: #dfe5ec; --gold-deep: #6b7280;
  --gold-glow: rgba(200, 210, 224, .16);
}
html[data-accent="ivy"] {
  --gold: #86a36b; --gold-bright: #b9d49a; --gold-deep: #4d6640;
  --gold-glow: rgba(134, 163, 107, .18);
}
html[data-wall="frame"] #desktop {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, var(--gold-glow), transparent 58%),
    repeating-linear-gradient(180deg, rgba(236, 228, 212, .022) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, var(--pit), var(--onyx) 60%, var(--obsidian));
}
/* Фотография — основа рабочего стола, а не один из вариантов. Выбор стиля
   хранится в браузере человека, и значение, оставшееся от прежних версий
   (стиля с таким именем больше нет), тихо отменяло снимок: срабатывала
   базовая заливка, и стол выглядел просто тёмным. Теперь снимок нужно
   отключить осознанно, кнопкой. */
/* Снимок заполняет экран целиком при любых пропорциях окна: `cover`
   масштабирует его под большую из сторон, поэтому пустых полей не бывает ни
   при сужении окна, ни при растягивании. Затемнения и виньетки на нём нет
   намеренно — кадр показывается таким, какой он есть.

   Сохранить его обычным способом нельзя: это фон в стилях, а не картинка в
   разметке, поэтому ни правой кнопкой, ни перетаскиванием он не забирается. */
#desktop {
  background: url("../img/desktop.png") 50% 50% / cover no-repeat, var(--onyx);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Виньетки на рабочем столе нет: снимок не затемняется. */
#desktop::after { content: none; }
html[data-wall="studio"] #desktop {
  background:
    radial-gradient(ellipse 80% 55% at 14% -6%, var(--gold-glow), transparent 62%),
    radial-gradient(ellipse 70% 50% at 92% 106%, rgba(217, 119, 66, .10), transparent 60%),
    linear-gradient(140deg, var(--pit) 0%, var(--obsidian) 100%);
}
html[data-wall="pit"] #desktop { background: radial-gradient(ellipse at 50% 120%, var(--obsidian), var(--pit) 70%); }
html[data-wall="photo"] #desktop {
  background: url("../img/desktop.png") 50% 50% / cover no-repeat, var(--onyx);
}

/* Телефон держит кадр вертикально, и при заполнении экрана по высоте края
   уходят за границы. Смещаем кадр к Лере — она стоит правее центра, поэтому
   на узком экране видно её, а не край стола. */
@media (max-width: 760px) {
  #desktop, html[data-wall="photo"] #desktop { background-position: 58% 50%; }
}

/* Свои обои: адрес файла подставляет js/wallpaper.js в переменную --wall-url.
   Затемнение то же, что у встроенной фотографии, иначе текст на снимке не
   читается. */
html[data-wall="custom"] #desktop {
  background: var(--wall-url, linear-gradient(140deg, var(--pit), var(--obsidian))) center 22% / cover no-repeat, var(--pit);
}
html[data-wall="custom"] #desktop::after {
  background:
    linear-gradient(180deg, rgba(5, 4, 7, .72) 0%, rgba(5, 4, 7, .30) 34%, rgba(5, 4, 7, .40) 62%, rgba(5, 4, 7, .88) 100%),
    radial-gradient(ellipse at 42% 45%, transparent 34%, rgba(5, 4, 7, .55) 100%);
}

/* Кнопка выбора файла: выглядит как остальные элементы настроек, но это
   настоящий input, поэтому работает с клавиатуры и читается экранным
   диктором. */
.upload {
  display: block; margin-top: var(--s3); padding: var(--s3); text-align: center;
  border: 1px dashed var(--rule); border-radius: var(--r-sm);
  background: rgba(201, 168, 97, .06); cursor: pointer;
  font: 500 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.upload:hover { background: rgba(201, 168, 97, .13); border-color: var(--gold); }
.upload:focus-within { outline: 1px solid var(--gold-bright); outline-offset: 2px; }
.upload-note { margin: var(--s2) 0 0; font: 10px var(--ff-mono); line-height: 1.5; color: var(--smoke); }

/* ── Сама панель ───────────────────────────────────────────────────────────── */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--tb-h); z-index: 700;
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3);
  background: linear-gradient(180deg, rgba(27, 24, 34, .82), rgba(5, 4, 7, .92));
  border-top: 1px solid var(--rule-soft);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .05) inset, 0 -14px 40px rgba(0, 0, 0, .5);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.tb-btn {
  height: 38px; min-width: 38px; padding: 0 var(--s3); border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid transparent; color: var(--bone);
  font: 500 10.5px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase;
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.tb-btn:hover { background: rgba(236, 228, 212, .07); border-color: var(--rule-soft); color: var(--ivory); }
.tb-btn[aria-expanded="true"] { background: rgba(201, 168, 97, .14); border-color: var(--rule); color: var(--ivory); }
.tb-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Пуск: марка вместо логотипа системы. */
#tb-start { padding: 0 var(--s4); }
#tb-start .mark { font: 500 12px var(--ff-display); letter-spacing: .24em; color: var(--gold-bright); }

/* Поиск в панели: на узком экране сжимается в иконку. */
#tb-search {
  display: flex; align-items: center; gap: var(--s2);
  height: 38px; width: 240px; padding: 0 var(--s3);
  border: 1px solid var(--rule-soft); border-radius: var(--r-sm);
  background: rgba(5, 4, 7, .5);
}
#tb-search svg { width: 15px; height: 15px; fill: none; stroke: var(--ash); stroke-width: 1.6; flex: none; }
#tb-search input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--ivory);
  font: 400 12.5px var(--ff-body);
}
#tb-search input::placeholder { color: var(--smoke); }
#tb-search:focus-within { border-color: var(--rule); }

/* Вкладки открытых окон. Активная подчёркнута золотом снизу — как в любой
   панели задач, только тоньше. */
#tb-tabs { display: flex; align-items: center; gap: var(--s1); flex: 1; min-width: 0; overflow: hidden; }
.tb-tab {
  position: relative; height: 38px; max-width: 190px;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 0 var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--rule-soft); background: rgba(236, 228, 212, .04);
  font: 500 10.5px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-tab:hover { color: var(--ivory); background: rgba(236, 228, 212, .08); }
.tb-tab[data-state="focused"] { color: var(--ivory); border-color: var(--rule); background: rgba(201, 168, 97, .12); }
.tb-tab[data-state="focused"]::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 3px; height: 1.5px;
  background: var(--gold-bright); border-radius: 2px;
}
.tb-tab[data-state="min"] { opacity: .6; }
.tb-tab .x { margin-left: var(--s1); opacity: 0; font-size: 12px; transition: opacity var(--d-fast); }
.tb-tab:hover .x { opacity: .8; }

#tb-right { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
#tb-clock {
  display: grid; justify-items: end; gap: 1px; padding: 0 var(--s3); height: 38px;
  align-content: center; border-radius: var(--r-sm); border: 1px solid transparent;
}
#tb-clock:hover { background: rgba(236, 228, 212, .06); border-color: var(--rule-soft); }
#tb-clock .time { font: 500 12.5px var(--ff-mono); color: var(--ivory); font-variant-numeric: tabular-nums; }
#tb-clock .date { font: 9.5px var(--ff-mono); letter-spacing: .06em; color: var(--ash); }
.tb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 8px var(--gold-glow); }

/* ── Всплывающие панели ────────────────────────────────────────────────────
 * Одна механика на все: пуск, поиск, лоток, уведомления. Отличается только
 * содержимое, поэтому появление и закрытие ведут себя одинаково.
 */
.pop {
  position: fixed; z-index: 750; bottom: calc(var(--tb-h) + var(--s2));
  background: linear-gradient(170deg, rgba(27, 24, 34, .97), rgba(8, 7, 11, .98));
  border: 1px solid var(--edge); border-radius: var(--r-lg);
  box-shadow: var(--shadow-window);
  padding: var(--s4);
  animation: pop-in var(--d-mid) var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.99); } }
.pop[hidden] { display: none; }
.pop h3 { margin: 0 0 var(--s3); font: 500 10.5px var(--ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* Пуск */
#pop-start { left: var(--s3); width: min(520px, calc(100vw - var(--s5))); }
#pop-start .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.start-app {
  display: grid; justify-items: center; gap: 6px; padding: var(--s4) var(--s2);
  border-radius: var(--r-md); border: 1px solid transparent;
}
.start-app:hover { background: rgba(236, 228, 212, .06); border-color: var(--rule-soft); }
.start-app .glyph { color: var(--gold-bright); }
.start-app .glyph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.start-app b { font: 500 12px var(--ff-body); color: var(--ivory); }
.start-app span { font: 9px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); text-align: center; }

#pop-start .recent { margin-top: var(--s4); border-top: 1px solid var(--rule-soft); padding-top: var(--s3); }
.recent-row {
  display: flex; align-items: baseline; gap: var(--s3); width: 100%;
  padding: var(--s2) var(--s2); border-radius: var(--r-sm); text-align: left;
}
.recent-row:hover { background: rgba(236, 228, 212, .06); }
.recent-row b { font: 500 14px var(--ff-italic); color: var(--ivory); }
.recent-row span { font: 9.5px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.recent-row .tail { margin-left: auto; color: var(--gold); font-size: 11px; }

#pop-start .foot {
  display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--rule-soft);
}
#pop-start .foot .who { font: 10px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
#pop-start .foot .grow { flex: 1; }

/* Поиск */
#pop-search { left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - var(--s5))); max-height: 60vh; overflow: auto; }
.hit { display: flex; align-items: baseline; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); border-radius: var(--r-sm); text-align: left; }
.hit:hover, .hit[data-active="true"] { background: rgba(201, 168, 97, .12); }
.hit b { font: 500 14px var(--ff-italic); }
.hit .where { font: 9.5px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.hit .sub { margin-left: auto; font-size: 11.5px; color: var(--ash); }
.empty { color: var(--smoke); font-size: 12.5px; padding: var(--s2); }

/* Быстрые настройки */
#pop-tray { right: var(--s3); width: min(340px, calc(100vw - var(--s5))); }
.qs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.qs {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); border-radius: var(--r-sm);
  border: 1px solid var(--rule-soft); background: rgba(236, 228, 212, .04);
  font: 500 10px var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ash);
}
.qs:hover { border-color: var(--rule); color: var(--ivory); }
.qs[aria-pressed="true"] { background: rgba(201, 168, 97, .16); border-color: var(--rule); color: var(--ivory); }
.qs svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }

.slider { display: grid; gap: 6px; margin-top: var(--s3); }
.slider label { display: flex; justify-content: space-between; font: 9.5px var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.slider input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 100px; background: rgba(236, 228, 212, .16); }
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-bright); border: 0; cursor: pointer;
}
.slider input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--gold-bright); }

.swatches { display: flex; gap: var(--s2); margin-top: var(--s3); }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--edge); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold-bright); }
.walls { display: flex; gap: var(--s2); margin-top: var(--s3); }
.wall { flex: 1; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--edge); }
.wall[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--gold-bright); }

.status { display: grid; gap: 4px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-soft); }
.status div { display: flex; justify-content: space-between; font: 10px var(--ff-mono); letter-spacing: .06em; color: var(--ash); }
.status div b { color: var(--bone); font-weight: 500; }

/* Уведомления: настоящие, из данных, а не выдуманные. */
#pop-notes { right: var(--s3); width: min(360px, calc(100vw - var(--s5))); }
.note { padding: var(--s3); border-radius: var(--r-sm); border-left: 2px solid var(--gold); background: rgba(201, 168, 97, .07); margin-bottom: var(--s2); }
.note b { display: block; font: 500 14px var(--ff-italic); }
.note span { font-size: 12px; color: var(--ash); }

/* ── Телефон ───────────────────────────────────────────────────────────────
 * Панель остаётся, но сжимается до нужного: пуск, поиск иконкой, часы,
 * настройки. Вкладки окон на телефоне не нужны — окно там всегда одно.
 */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1000px) {
  #tb-tabs { display: none; }
  #tb-search { width: 38px; padding: 0; justify-content: center; }
  #tb-search input { display: none; }
  #tb-start .mark { display: none; }
  #pop-start .apps { grid-template-columns: repeat(2, 1fr); }
  .win { bottom: var(--tb-h) !important; height: calc(88vh - var(--tb-h)) !important; }
  #mobile { padding-bottom: calc(var(--tb-h) + var(--s6)); }
}