/* Eurecable 2.0 — layout and components on top of tokens.css
   (doc/design/screens). Mobile first, contrast AA. The one !important below
   has its reason next to it; there are no others. */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute must beat any class that sets display (.maturity-formula,
   .ai-body, .btn…): without this the toggles and the tour cannot hide anything */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
svg { flex: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.6vw, var(--text-h1)); line-height: 1.12; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.ink { color: var(--ink); }
.good { color: var(--good); }
.warn-text, .request-text { color: var(--warn); font-weight: 600; }
.star, .score { color: var(--star); font-weight: 700; }
.small { font-size: var(--text-xs); }
.serif { font-family: var(--font-serif); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.push { margin-left: auto; }

/* Shell */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.site-header { border-bottom: 1px solid var(--line); background: var(--card); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); padding-top: var(--space-3); padding-bottom: var(--space-3); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 18px; }
.brand-logo { display: block; width: auto; height: 26px; }
.brand-compact { display: none; }
.site-nav { display: flex; gap: var(--space-1); flex: 1 1 auto; flex-wrap: wrap; font-size: var(--text-sm); }
.site-nav a { padding: 10px 12px; text-decoration: none; color: var(--muted); border-radius: var(--radius-control); }
.site-nav a:hover { color: var(--ink); background: var(--paper); }
.site-nav .tour-nav { padding: 10px 12px; border: 0; background: transparent; color: var(--warm-ink); font: inherit; font-weight: 600; border-radius: var(--radius-control); cursor: pointer; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.site-actions { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }
.header-search { position: relative; display: none; align-items: center; flex: 1 1 260px; min-width: 0; }
.header-search .icon { position: absolute; left: 12px; color: var(--muted); display: flex; }
.header-search input[type=search] { width: 100%; height: var(--tap); padding: 0 12px 0 40px; }
.icon-button { width: var(--tap); height: var(--tap); border: 0; background: transparent; color: var(--muted); border-radius: var(--radius-control); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; text-decoration: none; }
.icon-button:hover { color: var(--ink); background: var(--paper); }
.icon-button .badge.unread { position: absolute; top: 2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: 11px; line-height: 18px; justify-content: center; border: 2px solid var(--card); box-sizing: content-box; }
.account { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; cursor: pointer; min-height: 40px; }
.account:hover { border-color: var(--accent); }
.account .stamina { font-size: 14px; }
.menu { position: relative; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(15, 37, 48, 0.35); padding: 6px; z-index: 20; display: flex; flex-direction: column; }
.menu-panel a, .menu-panel button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-control); text-decoration: none; color: var(--ink); border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; font-size: var(--text-sm); }
.menu-panel a:hover, .menu-panel button:hover { background: var(--paper); }
.menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.lang { font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 0 10px; height: var(--tap); display: inline-flex; align-items: center; }
.site-footer { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--gutter) var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); font-size: 14px; color: var(--muted); }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
main.page { max-width: var(--content-max); margin: 0 auto; padding: 28px var(--gutter) 80px; }
.layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.layout > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.layout > .main.reading { max-width: var(--reading-max); }
.layout > aside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.site-prefs { display: flex; gap: var(--space-2); align-items: center; }
.signed-in .site-prefs { display: none; }
.nav-search, .nav-icon, .nav-count, .lang-full { display: none; }
.menu-panel .theme-item { display: flex; align-items: center; gap: 10px; }
#new_idea_link { gap: 6px; }
@media (min-width: 1024px) { .site-nav .mobile-only, .nav-toggle { display: none; } }
@media (min-width: 1200px) { .header-search { display: flex; } .mobile-search { display: none; } }
@media (max-width: 1199px) { #new_idea_link { padding: 0 10px; } #new_idea_link .btn-label { display: none; } .signed-in .brand-logo { display: none; } .signed-in .brand-compact { display: flex; } }
@media (max-width: 1023px) {
  .site-header .container { gap: var(--space-2); }
  .site-actions { gap: 4px; }
  .site-actions .desktop-only { display: none; }
  .site-nav, .site-prefs, .signed-in .site-prefs { display: none; order: 10; flex-basis: 100%; }
  .site-nav { flex-direction: column; gap: 2px; padding-top: var(--space-2); }
  .site-nav a, .site-nav .tour-nav { display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--ink); font-size: 16px; }
  .site-nav .nav-icon { display: inline-flex; color: var(--muted); }
  .site-nav .nav-count { display: inline; margin-left: auto; color: var(--muted); font-size: 14px; }
  .site-nav .tour-nav { color: var(--warm-ink); }
  .site-nav .tour-nav .nav-icon { color: inherit; }
  .nav-search { display: flex; position: relative; align-items: center; margin-bottom: var(--space-2); }
  .nav-search .icon { position: absolute; left: 12px; color: var(--muted); display: flex; }
  .nav-search input[type=search] { width: 100%; height: var(--tap); padding: 0 12px 0 40px; }
  .site-prefs { order: 11; justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--space-2); }
  .site-prefs .theme-toggle { width: auto; gap: 8px; padding: 0 12px; color: var(--ink); }
  .site-prefs .theme-label.visually-hidden { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
  .site-prefs .lang-short { display: none; } .site-prefs .lang-full { display: inline; }
  .nav-open .site-nav, .nav-open .site-prefs, .nav-open.signed-in .site-prefs { display: flex; }
}
@media (max-width: 419px) { .brand-logo { display: none; } .brand-compact { display: flex; } }

/* Toasts */
.toasts { position: fixed; left: 16px; right: 16px; bottom: 24px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; z-index: 30; max-width: 560px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.5); font-size: var(--text-sm); animation: toast-in .25s ease-out; }
.toast-alert { background: var(--bad); color: #fff; }
.toast-close { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; display: flex; padding: 4px; opacity: .8; }
.toast-leaving { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-control); border: 1px solid transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background: transparent; color: var(--accent); white-space: nowrap; }
/* inputs drop the browser look here, not by a heavier .btn selector that would beat .btn-primary */
input.btn { -webkit-appearance: none; appearance: none; }
input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: var(--radius-control); background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--accent-soft); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--blue-700); color: var(--on-accent); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--blue-200); }
.btn-outline { border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: var(--accent-soft); color: var(--accent); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: var(--paper); }
.btn-warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.btn-good { border-color: var(--good); color: var(--good); }
.btn-danger { color: var(--bad); }
.btn-lg { min-height: 48px; padding: 0 22px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn { max-width: 100%; }
@media (max-width: 599px) { .btn { white-space: normal; text-align: center; } }
.link-button { border: 0; background: transparent; padding: 0; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
button.link { border: 0; background: transparent; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.danger { color: var(--bad); }
form.inline, .inline-form { display: inline; }
/* an inline form that is also a row keeps the row's flex and gaps when it wraps */
form.inline-form.row { display: flex; }
.button_to { display: inline; }

/* Badges and chips */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill); padding: 3px 10px; white-space: nowrap; background: var(--accent-soft); color: var(--accent); }
.badge-author { background: var(--lilac-soft); color: var(--lilac); }
.badge-request { background: var(--warn-soft); color: var(--warn); }
.badge-answered { background: var(--good-soft); color: var(--good); }
.badge-unread, .badge.unread { background: var(--warn); color: #fff; padding: 0 7px; font-size: 12px; }
.badge-prize { background: var(--warm-soft); color: var(--warm-ink); font-size: 13px; padding: 4px 10px; border-radius: var(--radius-control); font-weight: 700; }
.badge-awarded { background: var(--good-soft); color: var(--good); font-size: 13px; padding: 4px 10px; border-radius: var(--radius-control); font-weight: 700; }
.badge.nft { background: var(--warn-soft); color: var(--warn); text-decoration: none; }
.price { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; border-radius: var(--radius-control); padding: 3px 9px; white-space: nowrap; }
.price-free { border: 1px solid var(--good); color: var(--good); }
.price-paid { background: var(--accent); color: var(--on-accent); }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kicker-accent { color: var(--accent); font-size: 13px; letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none; }
.chip-author { background: var(--lilac-soft); color: var(--lilac); }
.chip-request { background: var(--warn-soft); color: var(--warn); }
.chip-plain { font-weight: 500; color: var(--ink); }
.stamina { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.avatar { border-radius: 50%; object-fit: cover; flex: none; }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.author { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.author a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 8px; }
.author .stamina { font-size: 13px; }

/* Cards and covers */
.card { background: var(--card); border: 0; box-shadow: var(--card-edge); border-radius: 14px; padding: 22px 26px; }
.card-soft { background: var(--warn-soft); border-radius: 12px; padding: 20px; }
.card-plain { border-radius: 12px; border: 1.5px dashed var(--line); padding: 18px 22px; }
.cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cover-image.gray { filter: grayscale(1); opacity: .85; }
.cover-generated { display: block; background: var(--blue-600); }
.cover-generated.gray { filter: grayscale(1); opacity: .85; }
.cover-hero { border-radius: 12px; overflow: hidden; }
.cover-hero .cover { aspect-ratio: 9 / 5; }

/* Idea cards in a grid */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.idea-card { background: var(--card); border: 0; box-shadow: var(--card-edge); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.idea-card-body { padding: 20px 22px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.idea-card h3 { font-size: 20px; line-height: 1.25; }
.idea-card h3 a, .ttl { color: var(--ink); text-decoration: none; }
.idea-card h3 a:hover, .ttl:hover { text-decoration: underline; }
.idea-card .lede { font-size: var(--text-base); color: var(--muted); line-height: 1.55; }
.idea-card .problem-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.idea-card .problem-link span { color: var(--accent); }
.idea-card footer { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--muted); }
.idea-card footer .author { font-size: 13px; }
.idea-card footer .price { margin-left: auto; }
.facets { display: flex; gap: 4px; align-items: center; }
.facets .facet { height: 6px; width: 40px; border-radius: var(--radius-pill); background: var(--accent); font-size: 0; overflow: hidden; }
.facets .facet.off { background: transparent; border: 1.5px dashed var(--muted); }
.facets.rated { flex-wrap: wrap; gap: 6px; }
.norm-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.list-cards { display: flex; flex-direction: column; gap: 20px; }
.problem-card { display: flex; flex-direction: column; gap: 10px; }
.problem-card-marked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.problem-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.problem-mark-link { display: block; line-height: 0; }
.problem-mark { display: block; border-radius: 18px; }
.answers-tag { font-size: 12.5px; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.answers-tag.waiting { background: var(--warm-soft); color: var(--warm-ink); }
@media (max-width: 599px) { .problem-card-marked { gap: 12px; } .problem-mark { width: 44px; height: 44px; border-radius: 12px; } }
.problem-card h3 { font-size: 20px; }
.slice-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.slice-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.slice-thumb { display: block; border-radius: 10px; overflow: hidden; line-height: 0; }
.slice-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slice-body h3 { font-size: 19px; margin: 0; }
.slice-excerpt { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.55; color: var(--ink); }
.slice-body footer { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 4px; }
.slice-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13px; white-space: nowrap; }
.slice-score .score { font-size: 18px; }
@media (max-width: 599px) { .slice-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } .slice-excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; } .slice-score { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; } }
.problem-card footer { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--muted); }

/* Section heads and tabs */
.section-switch { display: flex; gap: var(--space-5); align-items: baseline; flex-wrap: wrap; }
.section-switch a { font-family: var(--font-serif); font-weight: 600; font-size: 34px; color: var(--muted); text-decoration: none; }
.section-switch a[aria-current="page"] { color: var(--ink); }
.section-switch .count { font-family: var(--font-ui); font-size: 16px; font-weight: 500; color: var(--muted); }
@media (max-width: 899px) { .section-switch { flex-wrap: nowrap; gap: var(--space-4); } .section-switch a { font-size: 26px; white-space: nowrap; } }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; font-size: var(--text-sm); scrollbar-width: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.tab-count { font-size: 12px; color: var(--muted); }
.pills { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-control); padding: 3px; gap: 2px; }
.pills a, .pills button, .pills label { min-height: 38px; padding: 0 14px; border: 0; border-radius: 7px; font-weight: 600; color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; background: transparent; cursor: pointer; }
.pills .active { background: var(--accent); color: var(--on-accent); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label, label.field-label { font-size: 14px; font-weight: 600; }
.field-hint { font-size: 13px; color: var(--muted); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], input[type=url], textarea, select { width: 100%; min-height: var(--tap); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--card); color: var(--ink); font: inherit; font-size: var(--text-sm); }
textarea { resize: vertical; line-height: 1.55; }
textarea.serif { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; }
input[type=number] { max-width: 10rem; }
input[type=file] { font-size: 14px; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.errors { background: var(--bad-soft); color: var(--bad); border-radius: var(--radius-control); padding: 10px 14px; font-size: 14px; }
.errors ul { margin: 0; padding-left: 18px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-card { display: flex; flex-direction: column; gap: 20px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Prose */
.prose { font-family: var(--font-serif); font-size: var(--text-read); line-height: 1.65; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre { margin: 0 0 1em; }
.prose > :last-child { margin-bottom: 0; }
.prose img { border-radius: var(--radius-control); }
.prose-ui { font-family: var(--font-ui); font-size: var(--text-base); }
.prose h2 { font-size: var(--text-h2); margin: 1.4em 0 .5em; }
.prose h3 { font-size: var(--text-h3); margin: 1.2em 0 .4em; }
#idea_stats_totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-telegram { display: inline-flex; align-items: center; gap: 4px; }
.stats-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 12px; border-radius: 12px; background: var(--card); box-shadow: var(--card-edge); }
.stats-bars span { flex: 1; min-width: 4px; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .85; }
.premium-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599px) { .premium-perks { grid-template-columns: 1fr; } }
.premium-perks li { display: flex; flex-direction: column; gap: 6px; }
.premium-buy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.premium-price b { font-family: var(--font-serif); font-size: 34px; }
.md-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.md-tabs { display: flex; gap: 4px; }
.md-tab { font: 600 13px/1 var(--font-ui); padding: 7px 12px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); cursor: pointer; }
.md-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 2px; }
.md-toolbar[hidden] { display: none; }
.md-tool { min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 14px/1 var(--font-ui); cursor: pointer; }
.md-tool:hover, .md-tool:focus-visible { background: var(--accent-soft); color: var(--accent); }
.md-italic { font-style: italic; font-family: var(--font-serif); }
.md-preview { min-height: 8rem; padding: 14px 16px; border-radius: var(--radius-control); background: var(--card); box-shadow: var(--card-edge); font-family: var(--font-serif); font-size: 17px; }
.md-hint { margin-top: 6px; }
.youtube iframe, iframe[src^="https://www.youtube.com/embed/"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-control); margin-block: 8px 16px; }
.lede { font-family: var(--font-serif); font-size: 19px; line-height: 1.65; }
.legal blockquote { border-left: 3px solid var(--accent); margin: 1rem 0; padding: .25rem 1rem; color: var(--muted); }

/* Page heads */
.page-head { display: flex; flex-direction: column; gap: 14px; }
.back { font-size: 14px; text-decoration: none; color: var(--muted); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; min-width: 0; font-size: 14px; color: var(--muted); }
.breadcrumbs li { flex: none; white-space: nowrap; } .breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
.breadcrumbs li[aria-current] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.breadcrumbs a { color: var(--muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--muted); }
.meta-row .actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.meta-row .actions form, .meta-row .actions .likes { display: flex; align-items: center; }
.meta-row .actions .btn, .meta-row .actions button { min-height: 40px; }
.count-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }

/* Maturity */
.maturity { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.maturity.compact { padding: 16px 18px; gap: 10px; }
.maturity-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.maturity-head h2 { font-family: var(--font-ui); font-size: 17px; font-weight: 700; }
.maturity-percent { font-size: 30px; font-weight: 700; color: var(--accent); line-height: 1; }
.maturity.compact .maturity-percent { font-size: 22px; }
.maturity-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.segment { display: flex; flex-direction: column; gap: 6px; }
.segment .bar { height: 10px; border-radius: var(--radius-pill); }
.segment .bar.filled { background: var(--accent); }
.segment .bar.dashed { border: 1.5px dashed var(--muted); }
.segment-label { font-size: 13px; }
.maturity-text { font-size: var(--text-sm); color: var(--muted); }
.maturity-text .request-link { color: var(--warn); font-weight: 600; }
.maturity-formula { background: var(--accent-soft); border-radius: var(--radius-control); padding: 14px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }

/* Parts */
.parts { display: flex; flex-direction: column; gap: 20px; }
.parts > h2 { margin-top: 16px; }
.part { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; scroll-margin-top: 16px; }
.part.request { border-color: var(--warn); }
.part.empty { background: transparent; border: 1.5px dashed var(--line); }
.part-head { padding: 16px 24px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.part.request .part-head { background: var(--warn-soft); }
.part.request .badge-request { background: var(--card); }
.part.empty .part-head { border-bottom: 0; padding-bottom: 8px; }
.part.empty h3 { color: var(--muted); }
.part-head h3 a { color: inherit; text-decoration: none; }
.what-is { font-size: 13px; color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; }
.part-score { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.part-score .count { color: var(--muted); font-size: 13px; }
.part-body { padding: 20px 24px; }
.part.empty .part-body { padding-top: 0; font-family: var(--font-ui); font-size: 16px; color: var(--muted); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.part-foot { padding: 16px 24px 20px; border-top: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 14px; }
.part-foot.rate { border-top: 1px dashed var(--good); background: var(--good-soft); }
.part.request .part-ask { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--line); font-size: 16px; }
.part-answer-form { display: flex; flex-direction: column; gap: 10px; }
.marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: var(--text-sm); }
.mark { display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.mark .score { font-weight: 700; }
.mark .who { font-size: 13px; color: var(--muted); }
.mark .who a { color: inherit; text-decoration: none; font-weight: 600; }
.mark .prose { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; margin-top: 2px; }
.mark .mark-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; font-size: 13px; }
.mark .answer-box { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--card); border: 1px solid var(--line); font-size: 14px; }
.marks-head { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.score-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.score-bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.score-bars .bar { width: 12px; background: var(--star); border-radius: 2px 2px 0 0; display: block; }
.score-bars .bar.empty { background: var(--line); }
.score-words { font-size: 13px; color: var(--muted); }
.score-row .btn { margin-left: auto; }
.rating { display: flex; flex-direction: column; gap: 12px; }
.rating-lead { font-size: var(--text-sm); }
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.scale-option { min-height: 72px; padding: 8px 4px; border-radius: var(--radius-control); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.scale-option:hover { border-color: var(--accent); }
.scale-option.on, .scale-option:has(input:checked) { background: var(--accent-soft); border: 2px solid var(--accent); }
.scale-option b { color: var(--star); font-size: 18px; }
.scale-option span { font-size: 12px; line-height: 1.25; color: var(--ink); hyphens: auto; }
.rating-explain { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.rating-actions { display: flex; gap: 8px; }
.toc { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); padding: 18px 20px; }
.toc a { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; color: var(--ink); }
.toc a.empty { color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.dot.author { background: var(--lilac); } .dot.request { background: var(--warn); } .dot.empty { background: transparent; border: 1.5px dashed var(--muted); }
.legend { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.legend .dot { width: 8px; height: 8px; }
.open-norm { display: flex; flex-direction: column; gap: 12px; }
.norm-picker { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.norm-option { text-align: left; border: 0; background: transparent; color: var(--ink); padding: 10px 12px; border-radius: var(--radius-control); cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; }
.norm-option:hover, .norm-option:has(input:checked) { background: var(--accent-soft); }
.norm-option .desc { font-size: 14px; color: var(--muted); grid-column: 1 / -1; }
.norm-option .count { font-size: 13px; color: var(--muted); }
.locked-list { list-style: none; margin: 0; padding: 8px 24px 16px; display: flex; flex-direction: column; }
.locked-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.locked-list li:last-child { border-bottom: 0; }
.locked-list b { font-family: var(--font-serif); }
.locked-list .meta { margin-left: auto; color: var(--muted); font-size: 14px; }
.lock-head { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.lock-head h2 { font-size: 22px; }
.ai-review { display: flex; flex-direction: column; gap: 12px; }
.ai-review h2 { font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
.ai-review .ai-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ai-review .ai-body { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.ai-review .ai-body b { color: var(--ink); }

/* Dialog */
dialog:not([open]) { display: none; }
dialog { border: 0; border-radius: 16px; padding: 28px; background: var(--card); color: var(--ink); width: min(440px, calc(100% - 32px)); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); }
dialog::backdrop { background: var(--scrim); }
.dialog-body { display: flex; flex-direction: column; gap: 18px; }
.dialog-body h2 { font-size: 24px; }
.exchange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.exchange-box { border-radius: 10px; padding: 14px 8px; background: var(--accent-soft); }
.exchange-box b { display: block; font-size: 26px; color: var(--accent); }
.exchange-box.good { background: var(--good-soft); } .exchange-box.good b { color: var(--good); }
.exchange-box span { font-size: 13px; color: var(--muted); }
.dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dialog-actions .btn-primary { flex: 1; }

/* Comments */
.comments { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.comments h2 { font-size: 22px; }
.comments h2 small { font-family: var(--font-ui); font-size: 14px; color: var(--muted); font-weight: 500; }
.comment { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.comment header, .comment footer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; color: var(--muted); }
.comment .prose { font-family: var(--font-ui); font-size: var(--text-sm); }
.comment.reply, .comment.answer { margin-left: 32px; border-top: 0; padding-left: 14px; border-left: 2px solid var(--line); }
.replies { display: flex; flex-direction: column; }
.reply-form summary { cursor: pointer; color: var(--accent); font-size: 14px; list-style: none; }
.comment-form { display: flex; flex-direction: column; gap: 12px; }
.comment-form p { margin: 0; } .comment-form textarea { display: block; }
.likes form { display: inline; }
.likes button, .likes span { display: inline-flex; align-items: center; gap: 4px; }
.likes .liked { font-weight: 700; color: var(--accent); }

/* Feed sidebar blocks */
.aside-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.aside-card h2, .card-soft h2 { font-family: var(--font-ui); font-size: 16px; font-weight: 700; }
.aside-list a { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.aside-list a:last-of-type { border-bottom: 0; padding-bottom: 0; }
.aside-list b { font-family: var(--font-serif); font-size: 17px; font-weight: 600; }
.aside-list span { font-size: 13px; color: var(--muted); }
.more { font-size: 14px; font-weight: 600; }

/* Empty state, pagination */
.empty-state { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.empty-state h2 { font-size: 22px; }
.empty-state p { color: var(--muted); font-size: var(--text-sm); }
.empty-link { font-weight: 600; }
.pagination { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; font-size: 14px; }
.pagination a, .pagination .current, .pagination .gap { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: var(--radius-control); text-decoration: none; }
.pagination .current { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pagination a:hover { background: var(--accent-soft); }

/* Profile and members */
.profile-banner { border-radius: 14px; overflow: hidden; line-height: 0; }
.profile-banner .cover { aspect-ratio: auto; height: 168px; width: 100%; }
.profile-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-top: -60px; padding-inline: 24px; }
.profile-head > .avatar { box-shadow: 0 0 0 5px var(--paper); }
.profile-head .who { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 280px; padding-top: 64px; }
.profile-head h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.profile-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.profile-stats a { color: inherit; text-decoration: none; } .profile-stats a:hover { color: var(--ink); }
.profile-stats b { color: var(--ink); }
.profile-stats .role { font-weight: 700; color: var(--muted); } .profile-stats .role.author { color: var(--lilac); } .profile-stats .role.critic { color: var(--accent); }
@media (max-width: 599px) { .profile-banner .cover { height: 112px; } .profile-head { margin-top: -44px; padding-inline: 12px; gap: 12px; } .profile-head > .avatar { width: 72px; height: 72px; } .profile-head .who { padding-top: 0; flex-basis: 100%; } }
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.counts a, .counts div { background: var(--card); border: 0; box-shadow: var(--card-edge); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.counts b { font-size: 24px; font-variant-numeric: tabular-nums; }
.counts span { font-size: 13px; color: var(--muted); }
.energy-bar { height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.energy-bar span { display: block; height: 100%; background: var(--accent); }
.member-row { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.member-row .name { font-weight: 600; text-decoration: none; color: var(--ink); }
.member-row .role { font-size: 12px; font-weight: 600; color: var(--muted); }
.member-row .role.author { color: var(--lilac); } .member-row .role.critic { color: var(--accent); }
.member-row .stats { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.online { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.achievements { display: flex; flex-wrap: wrap; gap: 8px; }
.achievement { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-control); border: 1px solid var(--line); font-size: 14px; }
.achievement.done { border-color: var(--good); color: var(--good); }

/* Norms */
.norm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.norm-row .desc { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--muted); }
.norm-row .hint { grid-column: 1 / -1; font-size: 14px; font-style: italic; color: var(--muted); }
.norm-row .usage { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 599px) { .norm-row .usage { white-space: normal; text-align: right; max-width: 9rem; } }
.norm-row .usage-bar { display: inline-block; height: 6px; border-radius: var(--radius-pill); background: var(--accent); vertical-align: middle; margin-right: 6px; }

/* Notifications */
.notifications { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.notification { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: var(--text-sm); }
.notification:last-child { border-bottom: 0; }
.notification.unread { background: var(--accent-soft); }
.notification .glyph { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; background: var(--accent-soft); color: var(--accent); }
.notification.unread .glyph { background: var(--card); }
.notification .glyph.request { background: var(--warn-soft); color: var(--warn); }
.notification .glyph.mark { color: var(--star); }
.notification .glyph.disclosed { background: var(--good-soft); color: var(--good); }
.notification .glyph.answer { background: var(--lilac-soft); color: var(--lilac); }
.notification .text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.notification .quote { color: var(--muted); font-size: 14px; }
.notification time { font-size: 13px; color: var(--muted); }
.day-head { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 18px 20px 6px; }

/* Search */
.search-box { position: relative; display: flex; align-items: center; }
.search-box .icon { position: absolute; left: 14px; color: var(--muted); display: flex; }
.search-box input { height: 52px; padding-left: 44px; font-size: 17px; border-radius: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 14px; color: var(--muted); }
.filters label { display: inline-flex; align-items: center; gap: 6px; }
.filters .field-inline span { white-space: nowrap; }
@media (max-width: 599px) { .filters .pills { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; } .filters .pills label { justify-content: center; text-align: center; line-height: 1.25; padding: 6px 8px; } }
.filters input[type=number] { width: 5.5rem; min-height: 38px; padding: 6px 10px; }
.filters select { width: auto; min-height: 38px; padding: 6px 10px; }
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.result { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.result h3 { font-size: 20px; }
.result .meta { font-size: 13px; color: var(--muted); }

/* Landing */
.hero { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 56px 0 64px; }
.hero h1 .word { display: inline-block; }
.hero-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding-top: 24px; }
.hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; }
.hero .lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 34rem; font-family: var(--font-ui); }
.hero-film { flex: 1 1 520px; min-width: 0; }
.priority { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; padding-block: 40px 56px; max-width: 52rem; }
.priority-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.priority-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.priority-copy .lede { margin: 0; }
@media (max-width: 599px) { .priority { grid-template-columns: 1fr; gap: 12px; padding-block: 24px 40px; } }
.walk-steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: walk; }
.walk-steps li { counter-increment: walk; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; border-radius: 12px; transition: background .3s ease; }
.walk-steps li::before { content: counter(walk); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--muted); font: 700 12px/24px var(--font-ui); text-align: center; transition: background .3s ease, color .3s ease; }
.walk-steps li b { font-size: 15px; } .walk-steps li span { font-size: 13.5px; line-height: 1.45; }
.walk-steps li[aria-current] { background: var(--accent-soft); }
.walk-steps li[aria-current]::before { background: var(--accent); color: var(--on-accent); }
.walk-stone { position: relative; margin: 8px 0 0; width: clamp(200px, 30vh, 280px); display: flex; flex-direction: column; gap: 8px; }
.walk-stone-cover { border-radius: 12px; overflow: hidden; line-height: 0; box-shadow: var(--card-edge); }
.walk-stone canvas { display: block; width: 100%; aspect-ratio: 1; pointer-events: none; }
/* With the living stone the cover waits in the middle of its square */
.walk-stone.is-3d .walk-stone-cover { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; margin-top: -14px; }
.bubble-arrow { align-self: center; color: var(--muted); font-size: 22px; line-height: 1; margin: -4px 0; }
.walkthrough { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; padding-block: 24px 56px; }
.walkthrough-copy { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.hero-demo { min-width: 0; }
@media (max-width: 899px) { .walkthrough { grid-template-columns: 1fr; gap: 16px; padding-block: 8px 32px; } .walkthrough-copy { padding-top: 0; } }
.demo-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -24px rgba(15, 37, 48, 0.25); overflow: hidden; }
.demo-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.demo-head h2 { font-size: 24px; }
.demo-row { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; gap: 16px; }
.demo-row:last-child { border-bottom: 0; }
.demo-row.request { background: var(--warn-soft); }
.demo-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.demo-num.request { background: var(--warn); color: var(--card); }
.demo-num.empty { background: transparent; border: 1.5px dashed var(--muted); color: var(--muted); }
.demo-row .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.demo-row .head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.demo-row .head b { font-family: var(--font-serif); font-size: 17px; }
.demo-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; font-size: 13px; line-height: 1.4; }
.demo-legend > div { display: flex; gap: 8px; }
.legend-num.accent { color: var(--accent); } .legend-num.warn { color: var(--warn); } .legend-num.muted { color: var(--muted); }
@media (max-width: 599px) { .demo-legend { grid-template-columns: 1fr; } }
.promo-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.promo-film { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.promo-sound { background: var(--card); }

.band { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .container, .section { padding-top: 56px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.band h2, .section h2 { font-size: 30px; }
.role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.role-card { min-width: 0; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--paper); }
.role-card:hover { border-color: var(--accent); color: var(--ink); }
.role-card b { font-size: 19px; }
.problem-strip { margin-top: 24px; }
.problem-strip h3 { font-size: 15px; margin: 0 0 8px; } .problem-strip h3 a { color: var(--ink); }
.problem-strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; }
.problem-strip li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.problem-strip li > a { font-weight: 600; color: var(--ink); }
.role-card span { color: var(--muted); font-size: var(--text-sm); }
.role-card .go { margin-top: auto; color: var(--accent); font-weight: 600; }
.dialogue { display: flex; flex-wrap: wrap; gap: 48px; padding: 64px 0; }
.dialogue-copy { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dialogue-copy h2 { font-size: 30px; }
.dialogue-cards { flex: 1.4 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bubble { border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.bubble.ask { background: var(--warn-soft); }
.bubble.answer { background: var(--card); border: 1px solid var(--line); margin-left: 32px; }
.bubble .meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); align-items: center; }
.energy-band { background: var(--accent); color: var(--on-accent); }
.energy-band .container { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.energy-band h2 { font-size: 30px; }
.energy-band .copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.energy-band ol { flex: 1.3 1 480px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.energy-band li { border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 12px; padding: 18px; }
.energy-band li b { display: block; font-size: 30px; }
.energy-band li span { font-size: 14px; opacity: .88; }

/* Auth */
.auth { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; min-height: 70vh; }
.auth-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.auth-aside blockquote { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.4; }
.about h1 { margin: 8px 0 12px; }
.about-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: center; padding-block: 56px 40px; }
.about-hero .lead { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 36rem; }
.about-hero-art { margin: 0; justify-self: center; text-align: center; }
.about-hero-art img { display: block; width: 220px; height: 220px; object-fit: contain; border-radius: 50%; background: #fff; padding: 18px; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgba(0, 0, 0, .45); }
.about-hero-art figcaption { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.about-eureka { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.1; color: var(--ink); }
.about-eureka-note { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.quote-band { position: relative; overflow: hidden; padding-block: 24px; background: var(--paper); border-block: 1px solid var(--line); }
.quote-band::before { content: ""; position: absolute; inset: 0; background: url("/assets/about/faces-181e58be.png") center / 420px auto repeat; opacity: .7; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 38% 55% at center, transparent 30%, #000 100%); mask-image: radial-gradient(ellipse 38% 55% at center, transparent 30%, #000 100%); }
:root[data-theme="dark"] .quote-band::before { filter: grayscale(1) invert(1); opacity: .5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quote-band::before { filter: grayscale(1) invert(1); opacity: .5; } }
.quote-band .container { position: relative; }
.about-section { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; padding-block: 48px; align-items: start; }
.about-section h2, .about-features h2 { margin-top: 0; }
.about-text p { font-size: 17px; line-height: 1.65; margin: 0 0 1em; }
.about-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); line-height: 1.45; }
.about-points li svg { flex: none; margin-top: 2px; color: var(--accent); }
.about-features { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: center; padding-block: 48px 72px; }
.about-features img { width: 100%; height: auto; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 899px) {
  .about-hero, .about-section, .about-features { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .about-hero-art { order: -1; } .about-hero-art img { width: 160px; height: 160px; }
  .about-features img { width: 160px; justify-self: center; }
}
.big-quote { margin: 48px auto; max-width: 46rem; text-align: center; }
.big-quote blockquote { margin: 0; padding: 0; border: 0; font-family: var(--font-serif); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4; color: var(--ink); }
.big-quote blockquote { quotes: "«" "»"; } :lang(en) .big-quote blockquote { quotes: "“" "”"; }
.big-quote blockquote::before { content: open-quote; } .big-quote blockquote::after { content: close-quote; }
.big-quote figcaption { margin-top: 12px; color: var(--muted); font-size: 15px; } .big-quote figcaption::before { content: "— "; }
.auth-aside cite { font-style: normal; font-size: 14px; color: var(--muted); }
.auth-aside ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: var(--text-sm); }
.auth-aside li { display: flex; gap: 10px; align-items: flex-start; }
.auth-aside li svg { color: var(--good); margin-top: 3px; }
.auth-card { flex: 1 1 380px; max-width: 440px; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 20px; align-self: center; }
.auth-card .pills { display: grid; grid-template-columns: 1fr 1fr; }
.social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.social .btn { border-color: var(--line); color: var(--ink); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-card .btn-primary { width: 100%; }

/* Wallet, certificates, admin — keep readable in the new frame */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-section { margin-top: var(--space-6); } .admin-section > h2 { margin-bottom: 4px; } .admin-section > p.muted { margin: 0 0 var(--space-3); max-width: 46rem; }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.admin-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.admin-card b { font-size: 18px; } .admin-card span { font-size: 13px; line-height: 1.4; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-nav, .feeds { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.feeds a { text-decoration: none; padding: 6px 10px; border-radius: var(--radius-control); color: var(--muted); }
.feeds a.active { color: var(--ink); font-weight: 600; background: var(--accent-soft); }
.admin-search { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .admin-search input[type=search] { width: 20rem; }
.admin-actions form { display: inline; }
.ideal, .plus { color: var(--good); } .minus { color: var(--bad); }
.certificate { background: var(--warn-soft); border-radius: 12px; padding: 14px 18px; }
.certificate-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: var(--text-sm); } .certificate-card dt { color: var(--muted); } .certificate-card code { word-break: break-all; }
.market { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; } .market .price, .nft-card .price { font-weight: 600; }
.market form.inline, .exchange-forms form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.exchange-forms { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.picture { max-width: 100%; border-radius: var(--radius-control); } .avatar.midi { width: 80px; height: 80px; } .avatar.mini { width: 24px; height: 24px; }
.flash { display: none; }

/* Tour (decision 10, В47): the button sits in the page margin on wide screens
   and in the section strip on phones, so it never covers text */
.tour-fab { display: none; }
.has-tour .tour-fab { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-pill); background: var(--warm); color: var(--on-warm); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }
.has-tour .tour-fab:hover { filter: brightness(0.92); }
.touring .tour-fab, .tour-nav { display: none; }
@media (max-width: 899px) { .has-tour .tour-fab { right: 16px; bottom: 16px; } }
.tour-layer { position: fixed; inset: 0; z-index: 40; }
.tour-scrim { position: fixed; background: var(--scrim); }
.tour-hole { position: fixed; border-radius: var(--radius); box-shadow: 0 0 0 3px var(--accent); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .tour-hole { animation: tour-glow 2.4s ease-in-out infinite; } }
@keyframes tour-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 0 rgba(0, 172, 237, .35); } 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 10px rgba(0, 172, 237, 0); } }
.tour-card { position: fixed; background: var(--card); color: var(--ink); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
.tour-card h2 { margin: 0; font-family: var(--font-ui); font-size: 18px; font-weight: 700; }
.tour-card p { margin: 0; font-size: 15px; color: var(--muted); }
.tour-progress { font-size: 13px; color: var(--muted); }
.tour-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* /ideal — the scroll story (owner, 25.10.2026). Without the live scene it is
   one readable column with a figure per chapter; ideal_story_controller adds
   .is-live on a desktop that allows motion and has WebGL: two columns, the
   dark stage stays on screen, the chapter out of focus dims. */
.story-head { padding-block: 48px 8px; max-width: 46rem; }
.story-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.08; margin: 8px 0 16px; }
.story-body { display: grid; grid-template-columns: minmax(0, 46rem); gap: 56px; align-items: start; }
.story-chapter { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 32px; }
.story-chapter h2 { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.15; margin: 0; }
.story-chapter p, .story-chapter ul { font-size: var(--text-read); line-height: 1.65; margin: 0; }
.story-chapter ul { padding-left: 1.2em; }
.story-chapter .small { font-size: var(--text-sm); line-height: 1.55; }
.story-figure { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.story-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; font-size: var(--text-sm); margin: 0; }
.story-facts dd { margin: 0; overflow-wrap: anywhere; }
.story-stage { display: none; position: sticky; top: 88px; height: calc(100vh - 120px); min-height: 420px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 35%, var(--blue-700) 0%, var(--blue-900) 72%); }
.story-stage canvas { display: block; width: 100%; height: 100%; }
.story.is-live .story-body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.story.is-live .story-stage { display: block; }
.story.is-live .story-figure { display: none; }
.story.is-live .story-chapter { min-height: 78vh; justify-content: center; opacity: .3; transition: opacity .5s ease; }
.story.is-live .story-chapter[aria-current] { opacity: 1; }
.story-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 40rem; padding-block: 64px 96px; }
.story-cta h2 { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw, 2.375rem); margin: 0; }
.story-cta .lede { margin: 0; }

/* Landing: iDeal and the authorship certificate, after the fear of theft */
.ideal-nft { padding-block: 8px 56px; }
.ideal-nft h2 { margin: 0 0 20px; }
.ideal-nft-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ideal-nft-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ideal-nft-card h3, .ideal-nft-card p { margin: 0; }
.ideal-nft-card a { margin-top: auto; font-weight: 600; }
.ideal-nft-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
@media (max-width: 599px) { .ideal-nft-cards { grid-template-columns: 1fr; } }

/* /nfts: what an authorship certificate is, with a sample of its record */
.certificate-explainer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; margin: 8px 0 36px; }
.certificate-explainer h2 { margin: 0 0 8px; }
.certificate-explainer .lede { margin: 0 0 20px; }
.certificate-explainer-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 16px; }
.certificate-explainer-lists h3 { font-size: var(--text-base); margin: 0 0 8px; }
.certificate-explainer-lists ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-sm); }
.certificate-explainer-lists li { position: relative; padding-left: 22px; }
.certificate-explainer-lists .ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.certificate-explainer-lists .crosses li::before { content: "✕"; position: absolute; left: 0; color: var(--muted); }
.certificate-sample { position: relative; margin: 0; padding: 26px 24px 22px; border-radius: 16px; color: #EEF4F7;
  background: linear-gradient(140deg, var(--blue-700), var(--blue-900)); box-shadow: var(--card-edge); }
.certificate-sample-title { font-family: var(--font-serif); font-size: 22px; margin: 0 0 14px; }
.certificate-sample dl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px 10px; margin: 0; font-size: var(--text-sm); }
.certificate-sample dt { color: var(--blue-300); display: flex; align-items: center; }
.certificate-sample dd { margin: 0; overflow-wrap: anywhere; }
.certificate-sample code { color: var(--blue-200); }
.certificate-sample-seal { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: var(--star); color: #fff; display: flex; align-items: center; justify-content: center; }
@media (max-width: 899px) { .certificate-explainer { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .certificate-explainer-lists { grid-template-columns: 1fr; } }