/*
 * Общая обвязка для статических штук: шапка-полоска и подпись внизу.
 * Подключается из stuff/<slug>/index.html: <link rel="stylesheet" href="/stuff.css">.
 * Цвета те же, что у сайта; штука может переопределить что угодно.
 */
:root {
  --sb-ground: #141517; --sb-line: #2b2e33; --sb-text: #e7e7e4; --sb-text-2: #b7b9b6; --sb-muted: #8c8f8c; --sb-accent: #8fcbb5;
  color-scheme: dark;
}
html { background: var(--sb-ground); color: var(--sb-text); font: 400 16px/1.6 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.stuff-bar, .stuff-sign { font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; color: var(--sb-muted); }
.stuff-bar { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 20px; border-bottom: 1px solid var(--sb-line); }
.stuff-bar a, .stuff-sign a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.stuff-bar a:hover, .stuff-sign a:hover { color: var(--sb-accent); }
.stuff-bar__mark { gap: 8px; font-weight: 500; color: var(--sb-text) !important; }
.stuff-bar__mark span { width: 8px; height: 8px; background: var(--sb-accent); }
.stuff-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 24px; padding: 8px 20px 16px; border-top: 1px solid var(--sb-line); }
.stuff-sign > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; min-height: 44px; }
.stuff-sign > div > span:first-child { color: var(--sb-muted); }
.stuff-sign > div > *:not(span:first-child) { color: var(--sb-text-2); }
:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 4px; }