/* Generated by tools/theme/css.py from base.css, layer.css and v3/*.css: edit those, not this file. */
@font-face { font-family: "Plex Sans"; src: url(plex-sans-var.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(bricolage-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Sora"; src: url(sora-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url(inter-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --sans: "Inter", "Segoe UI", system-ui, sans-serif; --mono: "Plex Mono", ui-monospace, Consolas, monospace; --display: "Sora", var(--sans); --sb-w: 244px; --rail-w: 320px; }
* { box-sizing: border-box; }
html { color: var(--text); font: 14px/1.5 var(--sans); -webkit-text-size-adjust: 100%; font-feature-settings: "tnum"; }
body { margin: 0; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 600; color: var(--hi); }
h1, h2, h3 { margin: 0; line-height: 1.2; }
img { display: block; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
code { font-family: var(--mono); font-size: 0.92em; }
.up { color: var(--green); }
.down { color: var(--red); }
.amber { color: var(--amber); }
.mut { color: var(--mut); }
.dim { color: var(--dim); }
.av { width: 34px; height: 34px; }
.av--txt { font-size: 14px; }
.av--sm { width: 22px; height: 22px; font-size: 10px; }
.feed { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.member { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r); font-size: 13px; font-weight: 500; color: var(--soft); }
.member:hover { background: var(--surface); }
.ph h1 { font-family: var(--display); font-size: 26px; font-weight: 700; }
.sec__h h2 { font-size: 15px; font-weight: 600; }
.sec__h a svg { width: 13px; height: 13px; }
.card__h h2 { font-size: 14px; font-weight: 600; }
.list { border-top: 1px solid var(--line); }
.li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.topic { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.topic:hover { background: var(--surface); }
.news h3 { font-size: 15px; font-weight: 600; }
.news h3 a:hover { color: var(--acc); }
.reqs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.req { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.online { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.stats > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats > div:nth-last-child(-n+2) { border-bottom: 0; }
.stats dt { color: var(--mut); }
.stats dd { margin: 0; font-weight: 600; color: var(--hi); font-variant-numeric: tabular-nums; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface2); }
.chip { line-height: 17px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; }
.filters input[type=search], .filters select { border: 1px solid var(--line2); background: var(--surface); color: var(--text); font: inherit; }
.filters input[type=search]:focus, .filters select:focus { outline: 0; border-color: var(--acc); }
.filters .check { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); }
.filters button { border: 0; background: var(--acc); font: inherit; font-weight: 600; cursor: pointer; }
.filters .reset { font-size: 13px; color: var(--mut); }
.filters .count { margin-left: auto; font-size: 13px; color: var(--mut); }
table.torrents { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
.torrents th { text-align: left; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.torrents th a:hover { color: var(--hi); }
.torrents td { border-bottom: 1px solid var(--line); vertical-align: middle; }
.torrents tr.is-sticky { background: rgba(251, 191, 36, 0.05); }
.flags { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.flag { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 16px; color: var(--ink); background: var(--soft); }
.pager { display: flex; align-items: center; font-size: 13px; color: var(--mut); }
.filters .select { width: auto; }
.torrents th a.is-on { color: var(--hi); }
.torrents th a.is-on::after { content: " ▾"; color: var(--acc); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--mut); }
.kv dd { margin: 0; text-align: right; font-weight: 600; color: var(--hi); font-variant-numeric: tabular-nums; }
.card + .card, .card + .details, .details + .card, .details + .details { margin-top: 16px; }
.details { padding: 16px 18px; }
.details summary { cursor: pointer; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary h2 { display: inline; font-size: 14px; }
.details summary::before { content: "▸ "; color: var(--mut); }
.details[open] summary::before { content: "▾ "; }
.mono { margin: 12px 0 0; padding: 12px; border-radius: var(--r); background: var(--bg-sb); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--soft); max-height: 480px; overflow: auto; }
.files { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13px; }
.files td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.bb-code { padding: 10px; border-radius: var(--r); background: var(--bg-sb); font: 12px/1.2 var(--mono); white-space: pre; overflow-x: auto; max-width: 100%; }
.bb-quote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--acc); background: var(--surface2); }
.bb-img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--r); vertical-align: middle; margin: 3px; }
.bb-center { text-align: center; }
.bb-right { text-align: right; }
.bb-left { text-align: left; }
.bb-h { font-weight: 700; line-height: 1.25; margin: .4em 0 .2em; color: var(--text); }
.bb-h1 { font-size: 1.6em; }
.bb-h2 { font-size: 1.35em; }
.bb-h3 { font-size: 1.15em; }
.bb-h4 { font-size: 1em; }
.bb-list { padding-left: 22px; }
.comment-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line2); color: var(--text); font: inherit; resize: vertical; }
.comment-form textarea:focus { outline: 0; border-color: var(--acc); }
.comment-form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.comment { border-top: 1px solid var(--line); }
.empty a { color: var(--acc); }
.f-pager { padding: 2px 4px; }
.f-title { font-family: var(--display); font-size: clamp(18px, 2vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--hi); overflow-wrap: anywhere; }
.f-av { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 50%; object-fit: cover; background: var(--surface3); }
.acct__who { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.acct__who .av { width: 40px; height: 40px; font-size: 16px; }
.acct__who-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct__who-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__who-t .rank { align-self: flex-start; }
.acct__body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.secret { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.secret code { padding: 3px 8px; border-radius: var(--r); background: var(--bg); font-size: 12px; font-weight: 400; color: var(--soft); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.secret button { width: 28px; height: 28px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--surface2); color: var(--mut); cursor: pointer; display: grid; place-items: center; }
.secret button:hover { color: var(--hi); border-color: var(--mut); }
.secret button svg { width: 14px; height: 14px; }
.form { display: flex; flex-direction: column; max-width: 640px; }
.form--wide { max-width: none; }
.check input { width: 16px; height: 16px; accent-color: var(--acc); }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.tabs a.is-on { border-bottom-color: var(--acc); }
.table th { font-weight: 600; }
@media (max-width: 1180px) {
.feed { max-height: 320px; }
}
@media (max-width: 820px) {
.f-av { width: 32px; height: 32px; margin: 0; font-size: 14px; }
.li { grid-template-columns: 34px minmax(0, 1fr); }
}
.ct-pager { padding: 2px 4px; }
.sec > .alert { margin-bottom: 12px; }
.bn { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.bn .ph__sub b { color: var(--text); }
.bn .card + .card { margin-top: 0; }
.bn .empty a { color: var(--acc); }
.bn-store { list-style: none; }
.acct__body > .alert { margin-top: -6px; }
.st { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-tabs { flex-wrap: wrap; margin-bottom: 4px; }
.st-tabs a { display: inline-flex; align-items: center; gap: 4px; }
.st .card + .card { margin-top: 0; }
.st-flag { align-items: flex-start; }
.st-grid { min-width: 560px; }
.st-more { margin: 4px 0 0; font-size: 12.5px; }
.st-more a { color: var(--soft); }
.st-more a:hover { color: var(--acc); }
.up-mono { font-family: var(--mono); font-size: 12.5px; }
.up-file { padding: 6px 10px; line-height: 22px; color: var(--soft); cursor: pointer; }
.up-file::file-selector-button { margin-right: 10px; padding: 0 10px; height: 22px; border-radius: 4px; border: 1px solid var(--line2); background: var(--surface2); color: var(--hi); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.up-file:hover::file-selector-button { border-color: var(--mut); }
.a1-flash { margin: 0; }
.a1-private { padding: 40px; text-align: center; color: var(--mut); }
.a1-pager { padding-left: 2px; }
.a1-tabs { margin: -11px 0; border-bottom: 0; }
.a1-tabs a { padding: 11px 12px; margin-bottom: 0; }
.a2-flash { margin: 0; }
.a2-key { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.a2-key__what { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.a2-key__what code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.a2-kv { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a2-kv__wide { grid-column: 1 / -1; }
.a2-url code { max-width: 640px; }
.a2-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.a2-reset--pad { padding: 16px; border-top: 0; }
.a2-reset .help { max-width: 560px; font-size: 12px; line-height: 1.45; color: var(--mut); }
.a2-hist summary { cursor: pointer; font-size: 12.5px; color: var(--mut); }
.a2-hist summary:hover { color: var(--text); }
.a2-hist__t { margin-top: 8px; }
.a2-steps { margin: 0; padding-left: 18px; max-width: 760px; font-size: 13px; line-height: 1.6; color: var(--soft); }
.a2-steps code { font-family: var(--mono); font-size: 12px; color: var(--text); }
.a2-feeds__name { font-weight: 600; color: var(--hi); white-space: nowrap; }
.a2-actions { white-space: nowrap; text-align: right; }
.a2-actions .btn { height: 28px; padding: 0 10px; font-size: 12px; }
.a2-inline { display: inline; }
.a2-empty { margin: 0; }
.a2-empty a { color: var(--acc); }
.a2-form { padding: 16px; gap: 16px; }
.a2-texts { gap: 12px 16px; }
.a2-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.a2-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg); }
.a2-list .check { font-size: 13px; }
.a2-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.a2-flag { align-items: flex-start; }
.a2-flag input { flex: none; margin: 3px 0 0; }
.a2-flag small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--mut); }
@media (max-width: 1000px) {
.a2-kv { grid-template-columns: minmax(0, 1fr); }
.a2-url code { max-width: 100%; }
}
.si-subs__dl { font-size: 16px; color: var(--soft); }
.si-subs__dl:hover { color: var(--green); }
.si-subs__dl svg { width: 16px; height: 16px; }
.si-subject { padding: 8px 12px; border-radius: var(--r); background: var(--surface2); font-size: 13.5px; overflow-wrap: anywhere; }
.sec__h a[hidden] { display: none; }
.au__link { padding: 0; border: 0; background: none; font: inherit; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au__link:hover { color: var(--hi); }
.au__code { font: 500 22px/1 var(--mono); letter-spacing: 0.3em; height: 48px; text-align: center; }
.qr { width: 208px; height: 208px; stroke: none; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--dim); }
.dn { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
@media (max-width: 1100px) {
.dn { grid-template-columns: 1fr; }
}
.board td.board__name a { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.board td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg .sec + .sec { margin-top: 22px; }
.ev { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.ev .card + .card { margin-top: 0; }
@media (max-width: 1000px) {
.ev { grid-template-columns: 1fr; }
}
:root { --c-up: #259c93; --c-down: #db5a54; --c-bar: #a09e98; }
.mast { border-bottom: 1px solid var(--line); }
.mast__facts dt { font-size: 10.5px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.is-on { font-weight: 600; }
.chip svg { width: 11px; height: 11px; transform: rotate(90deg); }
.drop { position: relative; }
.drop summary { list-style: none; }
.drop summary::-webkit-details-marker { display: none; }
.tl { display: flex; flex-direction: column; }
.tr { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 36px; gap: 14px; align-items: center; padding: 10px 6px 10px 2px; border-bottom: 1px solid var(--line); }
.tr:hover { background: var(--surface); }
@media (max-width: 760px) {
.tr { grid-template-columns: 46px minmax(0, 1fr) 36px; }
}
.tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.blank { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; padding: 34px 36px; }
.blank p { margin: 8px 0 0; max-width: 52ch; color: var(--soft); }
.blank p.blank__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.blank__steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.blank__steps li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mut); counter-increment: st; }
.blank__steps li:first-child { padding-top: 2px; border-top: 0; }
.blank__steps li::before { content: "0" counter(st); position: absolute; top: 13px; left: 0; font: 500 12px var(--mono); color: var(--acc); }
.blank__steps li:first-child::before { top: 3px; }
.blank__steps li b { display: block; margin-bottom: 2px; font-size: 14px; color: var(--hi); }
.blank__steps code { font-size: 12px; color: var(--text); }
@media (max-width: 900px) {
.blank { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
.split { display: block; height: 6px; border-radius: 3px; overflow: hidden; }
.split i { display: block; height: 100%; border-right: 2px solid var(--bg); }
.split i[style="width:0%"], .split i[style="width:100%"] { border-right: 0; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 34px 24px; }
.pl { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.pl b { overflow: hidden; font-size: 15px; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.pl small { color: var(--mut); }
.sx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 34px; }
.cols { display: flex; flex: 1; align-items: flex-end; gap: 2px; min-height: 132px; margin-bottom: 22px; border-bottom: 1px solid var(--line2); }
.ph { border-bottom: 1px solid var(--line); }
.tablewrap { border-top: 1px solid var(--line); }
.card .tablewrap { border-top: 0; }
.table th, .torrents th { padding: 10px 12px 9px; font-size: 10.5px; color: var(--dim); border-bottom: 1px solid var(--line); }
.table td, .torrents td { padding: 10px 12px; }
.table tbody tr:last-child td, .torrents tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.table tbody tr:hover, .torrents tbody tr:hover { background: var(--surface); }
.card .table tbody tr:last-child td { border-bottom: 0; }
.filters { gap: 8px 10px; margin-bottom: 18px; }
.filters input[type=search], .filters select, .filters .input, .filters .select { height: 32px; border-radius: 999px; padding: 0 14px; font-size: 13px; }
.filters button, .filters .btn { height: 32px; border-radius: 999px; padding: 0 16px; }
.filters .check { height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12.5px; }
.pager { justify-content: center; gap: 16px; padding: 20px 4px 0; }
.pager a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line2); border-radius: var(--r); font-weight: 500; color: var(--text); }
.pager a:hover { border-color: var(--mut); background: var(--surface2); }
.tp { display: grid; grid-template-columns: 8px minmax(0, 1fr) 60px 60px 150px; gap: 16px; align-items: center; padding: 13px 6px 13px 4px; border-bottom: 1px solid var(--line); }
.tp:hover { background: var(--surface); }
@media (max-width: 900px) {
.tp { grid-template-columns: 8px minmax(0, 1fr) 60px; }
.tp > :nth-child(4) { display: none; }
}
.wk { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 36px; }
@media (max-width: 820px) {
.mast h1 { font-size: 27px; }
.ph h1 { font-size: 25px; }
}
.dv { margin: 0; padding: 0 16px; list-style: none; }
.dv li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dv li:last-child { border-bottom: 0; }
:focus-visible { border-radius: 4px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.cast { display: grid; gap: 16px 12px; }
.acct__body > .sec { margin-bottom: 0; }
.cast { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.doc .mast__facts dd { font-size: 15px; line-height: 1.3; }
.bb-gap { display: block; height: 0.8em; }
.bb-lede { max-width: 62ch; margin-bottom: 4px; font-size: 17px; line-height: 1.55; color: var(--soft); }
.bb-note { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--blue); border-radius: 0 var(--r) var(--r) 0; background: var(--surface); font-size: 14px; line-height: 1.6; color: var(--soft); }
.bb-note--warn { border-left-color: var(--amber); }
.bb-tablewrap { margin: 12px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.bb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.bb-table th { padding: 9px 14px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; color: var(--mut); background: var(--surface); }
.bb-table td { padding: 9px 14px; border-top: 1px solid var(--line); vertical-align: top; color: var(--soft); }
.bb-table td:first-child { color: var(--hi); }
.wk { display: block; columns: 400px 2; column-gap: 48px; }
.bb-table { overflow-wrap: normal; }
.bb-table td:first-child { min-width: 96px; }
.member__rank { font-style: normal; font-weight: 700; opacity: 0.75; margin-right: 1px; }
.member__ic { margin-left: auto; font-size: 12px; line-height: 1; }
.og { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; color: #241a00; background: linear-gradient(135deg, #ffd76a, #e2a400); vertical-align: middle; box-shadow: 0 0 0 1px rgba(255, 215, 106, .35); }
.ubadge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1.5; color: #f1ece2; background: linear-gradient(135deg, #1b1b1f, #3a0d12); vertical-align: middle; box-shadow: 0 0 0 1px rgba(220, 38, 38, .55), 0 0 8px rgba(220, 38, 38, .25); }
.member .og, .member .ubadge, .member .member__ic { flex: none; white-space: nowrap; }
.member > span:not(.og):not(.ubadge):not(.member__ic):not(.av) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member > .av, .member > .av--txt { flex: none !important; }
.ubadge { white-space: nowrap; text-transform: none; }
.ubadge[data-b^="❄"] { color: #0b2a3f; background: linear-gradient(135deg, #e8f6ff, #a9dcf5 55%, #7cc4ea); box-shadow: 0 0 0 1px rgba(170, 225, 255, .8), 0 0 10px rgba(140, 210, 255, .45); }
.ubadge[data-b^="⚡"] { color: #ff8a1f; background: linear-gradient(135deg, #0c0c0e, #1d1206); text-shadow: 0 0 6px rgba(255, 138, 31, .5); box-shadow: 0 0 0 1px rgba(255, 138, 31, .75), 0 0 10px rgba(255, 138, 31, .35); }
.member__col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: visible !important; }
.member__line > span:first-child { flex: none; white-space: nowrap; }
.member__line { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.member__col > .ubadge { margin-left: 0; }
.tracks .sec__h .mut { margin-left: 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
#chat-form input[type=search] { -webkit-appearance: none; appearance: none; }
#chat-form input[type=search]::-webkit-search-cancel-button, #chat-form input[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.btn-solid, .filters button { color: var(--on-acc) !important; }
.card, .feed { background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.mb-scene { stroke: none; }
.mb-scene .leaf { fill: #0f2420; }
.mb-scene .stem { fill: none; stroke: #1e3a33; stroke-width: 3; }
.mb-scene .fl { filter: drop-shadow(0 0 12px currentColor); }
.mb-scene .fl--m { fill: var(--acc); color: var(--acc); }
.mb-scene .fl--l { fill: var(--lav); color: var(--lav); }
.mb-scene .eye { fill: var(--moon); }
.mb-scene .fly { fill: #e9ff9a; filter: drop-shadow(0 0 4px #e9ff9a); }
.mb-scene .fly:nth-child(3n) { animation-delay: -1.3s; }
.mb-scene .fly:nth-child(3n+1) { animation-delay: -2.6s; }
@keyframes mb-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.li { border-radius: 16px; transition: background-color 0.18s; }
.li:hover { background: rgba(255, 255, 255, 0.035); }
.li code { color: var(--dim); }
.lpg__a:hover { border-color: rgba(124, 245, 196, 0.45); color: var(--hi); }
.mast__k, .ph__kicker { font-size: 10.5px; font-weight: 700; }
.mast__facts dd { font-size: 26px; }
.acct__body .ph { min-height: 0; margin: 0; }
.acct__body .ph h1 { font-size: 30px; }
.seg { border-color: var(--line2); }
.card__h h2, .sec__h h2 { font-family: var(--display); }
.fav { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c, var(--acc)) 45%, transparent); background: color-mix(in srgb, var(--c, var(--acc)) 16%, #10201d); color: var(--c, var(--acc)); font: 700 13px/1 var(--display); object-fit: cover; }
@media (max-width: 900px) {
.mast h1 { font-size: 36px; }
.ph h1 { font-size: 30px; }
}
.tl { gap: 2px; border-top: 0; }
.ph > .ph__sub { flex: 1 1 100%; order: 1; margin-top: 4px; }
.ph > h1 { flex: 1 1 100%; }
.input, .select, .textarea { background: rgba(0, 0, 0, 0.22); }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
main.content.is-in > * { animation: page-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
main.content.is-in > :nth-child(2) { animation-delay: 0.04s; }
main.content.is-in > :nth-child(3) { animation-delay: 0.08s; }
main.content.is-in > :nth-child(4) { animation-delay: 0.12s; }
main.content.is-in > :nth-child(n+5) { animation-delay: 0.16s; }
.chip:active, .seg a:active { transform: scale(0.97); }
.card { transition: border-color 0.2s, box-shadow 0.2s; }
a, button { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
main.content.is-in > * { animation: none; }
}
.empty, .a2-empty { position: relative; padding: 70px 20px 32px !important; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.empty::before, .a2-empty::before { content: ""; position: absolute; top: 24px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 70% 35%, transparent 9px, #e9e5bf 9.5px, #f4f1d0 60%); box-shadow: 0 0 22px rgba(244, 241, 208, 0.22); opacity: 0.75; }
td.empty::before { top: 20px; }
.tabs { border-bottom-color: var(--line); }
.acct__who { padding: 8px 8px 14px; }
.acct__who .av { box-shadow: 0 0 0 3px rgba(124, 245, 196, 0.14), 0 0 18px rgba(124, 245, 196, 0.15); }
.alert { animation: page-in 0.4s ease both; }
.pill--acc { box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.25); }
input[type=checkbox], input[type=radio] { accent-color: var(--acc); }
.split { background: rgba(255, 143, 143, 0.55); }
.split i { background: linear-gradient(90deg, rgba(124, 245, 196, 0.6), var(--acc)); border-right-color: #0e1719; box-shadow: 0 0 12px rgba(124, 245, 196, 0.35); }
@property --eu-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
#online .av { box-shadow: 0 0 0 2px rgba(124, 245, 196, 0.35); }
.comment-form { padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, 0.025); }
.comment-form textarea { border-radius: 14px; background: rgba(0, 0, 0, 0.22); }
.comment-form textarea:focus { box-shadow: 0 0 0 3px rgba(124, 245, 196, 0.12); }
.comment { margin-top: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.025); animation: page-in 0.35s ease both; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bbbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 6px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.025); }
.bbbar button { height: 28px; min-width: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: none; font: 500 12.5px var(--sans); color: var(--soft); cursor: pointer; }
.bbbar button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--hi); }
.bbbar button:disabled { opacity: 0.35; cursor: default; }
.bbbar button b, .bbbar button i, .bbbar button u, .bbbar button s { font-size: 13.5px; }
.bbbar__gap { flex: 1; }
.bbbar__pv { border: 1px solid var(--line2) !important; color: var(--acc) !important; }
.bbbar__pv[aria-pressed="true"] { background: var(--acc-soft) !important; }
.bbpv { padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 14px; background: rgba(0, 0, 0, 0.18); overflow-wrap: anywhere; }
.draftnote { margin: 6px 0 0; font-size: 12.5px; color: var(--mut); }
.draftnote button { padding: 0; border: 0; background: none; font: inherit; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.draftnote button:hover { color: var(--hi); }
textarea.textarea { transition: height 0.12s ease-out; }
.is-busy { position: relative; cursor: progress !important; opacity: 0.75; }
.is-busy::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: busy 0.9s linear infinite; }
@keyframes busy { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; padding: 9px 16px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(12, 20, 22, 0.95); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); font-size: 13px; color: var(--hi); opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cp { flex: none; display: inline-grid; place-items: center; width: 26px; height: 22px; margin-top: -2px; border: 1px solid var(--line); border-radius: 7px; background: none; color: var(--mut); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.cp:hover { color: var(--acc); border-color: rgba(124, 245, 196, 0.4); }
.cp svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.bb img.bb-img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 56px 72px; background: rgba(4, 8, 10, 0.92); }
.lb.is-open { display: grid; animation: lb-in 0.2s ease-out; }
@keyframes lb-in { from { opacity: 0; } }
.lb img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s; cursor: zoom-out; }
.lb img.is-on { opacity: 1; }
.lb button { position: absolute; display: grid; place-items: center; border: 1px solid var(--line2); border-radius: 50%; background: rgba(16, 24, 27, 0.85); color: var(--hi); font: 300 26px/1 var(--sans); cursor: pointer; }
.lb button:hover { border-color: rgba(124, 245, 196, 0.5); color: var(--acc); }
.lb__x { top: 16px; right: 16px; width: 40px; height: 40px; }
.lb__prev, .lb__next { top: 50%; width: 46px; height: 46px; margin-top: -23px; }
.lb__prev { left: 14px; }
.lb__next { right: 14px; }
.lb__bar { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 16px; font-size: 13px; color: var(--mut); }
.lb__open { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
html.lb-open { overflow: hidden; }
@media (max-width: 560px) {
.lb { padding: 56px 12px; }
.lb__prev, .lb__next { top: auto; bottom: 8px; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
@view-transition { navigation: auto; }
}
.table th.num, .torrents th.num, .bb-table th.num { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; }
.bn-store { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 12px; margin: 0; padding: 6px 16px 0; }
@media (max-width: 820px) {
.bn-store { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 6px 12px 0; }
}
@media (max-width: 520px) {
.bn-store { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
.acct__who { padding: 2px 6px 10px; margin-bottom: 6px; }
.acct__links::-webkit-scrollbar { display: none; }
}
.st-flag { gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.st-flag:hover { border-color: var(--line2); background: rgba(255, 255, 255, 0.035); }
.st-flag:has(input:checked) { border-color: rgba(124, 245, 196, 0.22); }
.st-flag input[type=checkbox] { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0; border: 1px solid var(--line2); border-radius: 999px; background: var(--surface3); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.st-flag input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--mut); transition: transform 0.15s, background-color 0.15s; }
.st-flag input[type=checkbox]:checked { border-color: var(--acc); background: var(--acc); }
.st-flag input[type=checkbox]:checked::after { transform: translateX(16px); background: #fff; }
.st-flag input[type=checkbox]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 1000px) {
.sx { grid-template-columns: minmax(0, 1fr); }
}
.empty a, .st-more a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
@property --amb { syntax: "<color>"; inherits: true; initial-value: rgba(124, 245, 196, 0); }
:root { --bg: #06090c; --bg-sb: #06090c; --bg-rail: #080c10; --surface: #0d1418; --surface2: #121b20; --surface3: #19252b; --line: rgba(196, 232, 222, 0.085); --line2: rgba(196, 232, 222, 0.15); --line3: rgba(196, 232, 222, 0.26); --text: #e9f2ee; --soft: #c2d3cb; --mut: #98aea4; --dim: #7d968b; --hi: #f6fbf8; --ink: #04110c; --on-acc: #04110c; --acc: #7cf5c4; --acc-hi: #a8fbdc; --acc-soft: rgba(124, 245, 196, 0.11); --lav: #c3a6ff; --moon: #f4f1d0; --bmoon: #8fcbff; --green: #6ee7a8; --red: #ff8f8f; --amber: #f4de8c; --blue: #9db8ff; --glow: 0 0 22px rgba(124, 245, 196, 0.35); --r-s: 8px; --r: 12px; --r-m: 16px; --r-lg: 22px; --r-xl: 28px; --card: linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.016)); --card-hi: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)); --glass: rgba(10, 16, 20, 0.84); --e1: inset 0 1px 0 rgba(255, 255, 255, 0.045); --e2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -26px rgba(0, 0, 0, 0.75); --e3: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 70px -22px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.3); --cta: linear-gradient(135deg, #a2f9d9 0%, #6eecc1 46%, #56dcc9 100%); --cta-hi: linear-gradient(135deg, #c0fce6 0%, #8cf4d1 46%, #6ee8d6 100%); --pad: clamp(16px, 2.3vw, 36px); --maxw: 1720px; --gut: max(var(--pad), calc((100% - var(--maxw)) / 2)); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --label: 600 10.5px/1.2 var(--sans); }
html { background: var(--bg); font-size: 14.5px; scrollbar-color: rgba(196, 232, 222, 0.2) transparent; transition: --amb 1.4s ease; }
body { background: none; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background:
radial-gradient(1200px 560px at 50% -14%, color-mix(in oklab, var(--amb) 30%, transparent), transparent 72%),
radial-gradient(900px 520px at 102% -8%, rgba(244, 241, 208, 0.07), transparent 68%),
radial-gradient(860px 560px at -6% 6%, rgba(124, 245, 196, 0.065), transparent 66%),
radial-gradient(900px 700px at 80% 110%, rgba(143, 203, 255, 0.045), transparent 66%),
radial-gradient(700px 560px at 10% 104%, rgba(195, 166, 255, 0.04), transparent 66%),
linear-gradient(180deg, #080d11 0%, #06090c 44%, #05080a 100%); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image:
radial-gradient(1px 1px at 38px 54px, rgba(255, 255, 255, 0.5), transparent 100%),
radial-gradient(1px 1px at 212px 128px, rgba(255, 255, 255, 0.32), transparent 100%),
radial-gradient(1.4px 1.4px at 134px 262px, rgba(244, 241, 208, 0.5), transparent 100%),
radial-gradient(1px 1px at 352px 88px, rgba(196, 232, 222, 0.42), transparent 100%),
radial-gradient(1px 1px at 468px 312px, rgba(255, 255, 255, 0.26), transparent 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); background-size: 420px 420px, 530px 530px, 610px 610px, 710px 710px, 830px 830px, 180px 180px; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0.4) 100%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0.55) 46%, rgba(0, 0, 0, 0.4) 100%); }
h1, h2, h3 { letter-spacing: -0.022em; text-wrap: balance; }
::selection { background: rgba(124, 245, 196, 0.3); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.skip { position: absolute; top: -60px; left: 12px; z-index: 100; padding: 9px 16px; border-radius: 999px; background: var(--acc); color: var(--on-acc); font-weight: 650; }
.skip:focus { top: 12px; }
.shell { display: block; min-height: 100vh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.content { flex: 1; width: 100%; padding: 26px var(--gut) 56px; }
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 var(--gut); }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(124, 245, 196, 0.26), rgba(196, 232, 222, 0.09) 28%, rgba(196, 232, 222, 0.09) 72%, rgba(195, 166, 255, 0.2)) bottom / 100% 1px no-repeat, linear-gradient(180deg, rgba(6, 9, 12, 0.9), rgba(6, 9, 12, 0.68)); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.topbar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--acc); box-shadow: 0 0 12px var(--acc); opacity: 0; transition: opacity 0.3s ease, width 0s linear 0.3s; }
html.is-loading .topbar::after { width: 70%; opacity: 1; transition: opacity 0.25s ease 0.3s, width 1.6s ease-out 0.3s; }
.tb__brand { display: flex; flex: none; align-items: center; gap: 10px; margin-right: 4px; font: 700 19px/1 var(--display); letter-spacing: -0.04em; color: var(--hi); }
.sb__logo { width: 30px; height: 30px; stroke: none; filter: drop-shadow(0 0 7px rgba(124, 245, 196, 0.5)); transition: filter 0.3s; }
.sb__logo .p { fill: var(--acc); }
.sb__logo .c { fill: var(--moon); }
.tb__brand:hover .sb__logo { filter: drop-shadow(0 0 12px rgba(124, 245, 196, 0.85)); }
.search { position: relative; display: flex; flex: 1 1000 420px; align-items: center; gap: 10px; min-width: 250px; max-width: 520px; height: 40px; padding: 0 12px 0 15px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--mut); transition: border-color 0.18s, background-color 0.18s, box-shadow 0.18s; }
.search:hover { border-color: var(--line3); }
.search:focus-within { border-color: rgba(124, 245, 196, 0.6); background: rgba(3, 6, 8, 0.6); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--acc); }
.search > svg { width: 15px; height: 15px; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; outline: 0; text-overflow: ellipsis; }
.search input::placeholder { color: var(--dim); text-overflow: ellipsis; }
.search input::-webkit-search-cancel-button { display: none; }
.search__k { padding: 0 7px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(255, 255, 255, 0.04); font: 11px/19px var(--mono); color: var(--dim); }
.search:focus-within .search__k { display: none; }
.sug { position: absolute; z-index: 60; top: 48px; left: 0; width: max(100%, 540px); max-width: calc(100vw - 28px); max-height: min(72vh, 640px); overflow: auto; padding: 8px; border: 1px solid var(--line2); border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); color: var(--text); scrollbar-width: thin; animation: v3-pop 0.16s var(--ease); }
.sug__h { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px 5px; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sug__i { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 10px; border-radius: 12px; transition: background-color 0.12s; }
.sug__i:hover, .sug__i.is-on, .sug__all:hover, .sug__all.is-on { background: rgba(255, 255, 255, 0.06); }
.sug__i.is-on { box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.28); }
.sug__i img, .sug__np { width: 38px; aspect-ratio: 2 / 3; border-radius: 6px; background: var(--surface3); object-fit: cover; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.7); }
.sug__i span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sug__i b { overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.sug__i em { font: 12px var(--sans); font-style: normal; color: var(--mut); }
.sug__i code { overflow: hidden; font: 11.5px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.sug__i small { font-size: 11.5px; color: var(--dim); }
.sug__i--m, .sug__i--r { grid-template-columns: minmax(0, 1fr); }
.sug__i--r { display: flex; gap: 11px; color: var(--mut); }
.sug__i--r svg { width: 14px; height: 14px; }
.sug__all { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 550; color: var(--soft); }
.sug__all kbd { padding: 0 7px; border: 1px solid var(--line2); border-radius: 6px; font: 11px/19px var(--mono); color: var(--dim); }
.sug__none { padding: 16px 12px; font-size: 13px; color: var(--mut); }
.sug__clear { padding: 0; border: 0; background: none; font: inherit; letter-spacing: 0.04em; color: var(--mut); cursor: pointer; }
.sug__clear:hover { color: var(--hi); }
.modes { display: flex; flex: none; align-items: center; gap: 6px; min-width: 0; }
.mode { position: relative; }
.mode--fl { --mode: var(--moon); }
.mode--du { --mode: var(--bmoon); }
.mode--note { --mode: var(--lav); }
.mode summary { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mode, var(--acc)) 30%, transparent); background: color-mix(in srgb, var(--mode, var(--acc)) 8%, transparent); font-size: 12px; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; transition: background-color 0.15s, border-color 0.15s; }
.mode summary::-webkit-details-marker { display: none; }
.mode summary:hover, .mode[open] summary { background: color-mix(in srgb, var(--mode, var(--acc)) 15%, transparent); border-color: color-mix(in srgb, var(--mode, var(--acc)) 50%, transparent); }
.mode summary i { width: 7px; height: 7px; border-radius: 50%; background: var(--mode, var(--acc)); box-shadow: 0 0 8px var(--mode, var(--acc)); }
.mode summary b { font-weight: 650; color: var(--mode, var(--acc)); }
.mode summary span { font: 11px var(--mono); color: var(--mut); }
.mode__pop { position: absolute; z-index: 60; top: 40px; left: 0; width: 310px; padding: 15px 16px; border: 1px solid var(--line2); border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); font-size: 13px; animation: v3-pop 0.16s var(--ease); }
.mode__pop p { margin: 0; color: var(--soft); overflow-wrap: anywhere; }
.mode__pop a { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-weight: 650; color: var(--mode, var(--acc)); }
.mode__pop a svg { width: 12px; height: 12px; }
.topbar .sb { display: flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.topbar .sb a { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 550; color: var(--soft); white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.topbar .sb a:hover { background: rgba(255, 255, 255, 0.055); color: var(--hi); }
.topbar .sb a.is-on { background: var(--acc-soft); color: var(--hi); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.2); }
.topbar .sb a.is-on::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.topbar .sb a.sb__up { gap: 7px; margin-left: 8px; padding: 0 16px 0 13px; background: var(--cta); color: var(--on-acc); font-weight: 650; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px -10px rgba(124, 245, 196, 0.7); transition: box-shadow 0.2s, transform 0.12s; }
.topbar .sb a.sb__up:hover { background: var(--cta-hi); color: var(--on-acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 26px -8px rgba(124, 245, 196, 0.85); }
.topbar .sb a.sb__up:active { transform: scale(0.97); }
.topbar .sb a.sb__up svg { width: 15px; height: 15px; }
.topme { display: flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; }
.topme__stats { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 2px; height: 30px; min-width: 0; margin: 0 6px 0 2px; overflow: hidden; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.topme__stats a { display: inline-flex; flex: none; align-items: center; gap: 5px; height: 30px; padding: 0 7px; border-radius: 999px; font-weight: 550; transition: background-color 0.15s; }
.topme__stats a:hover { background: rgba(255, 255, 255, 0.06); }
.topme__stats a svg { width: 12px; height: 12px; color: inherit; }
.topme__stats a i { font-style: normal; font-size: 10.5px; font-weight: 700; opacity: 0.7; }
.topme__stats a.up { color: var(--green); }
.topme__stats a.down { color: var(--red); }
.topme__stats a.amber { color: var(--amber); }
.topme__warn { color: var(--red); }
.topme__ic { position: relative; display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--mut); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.topme__ic:hover, .topme__ic[aria-expanded=true] { background: rgba(255, 255, 255, 0.07); color: var(--hi); }
.topme__ic svg { width: 17px; height: 17px; }
.topme__ic b { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--acc); box-shadow: 0 0 0 2px var(--bg), 0 0 10px rgba(124, 245, 196, 0.6); color: var(--on-acc); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.pop { position: relative; }
.pop__panel { position: absolute; top: 46px; right: -44px; z-index: 60; width: 390px; max-width: calc(100vw - 24px); overflow: hidden; border: 1px solid var(--line2); border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); font-size: 13px; color: var(--mut); animation: v3-pop 0.16s var(--ease); }
.pop__panel:not(:has(.pop__h)) { padding: 16px; }
.me { position: relative; flex: none; }
.me > summary { list-style: none; cursor: pointer; user-select: none; }
.me > summary::-webkit-details-marker { display: none; }
.me > summary:focus { outline: none; }
.me > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.topme__who { display: flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; transition: background-color 0.15s; }
.topme__who:hover, .me[open] .topme__who { background: rgba(255, 255, 255, 0.07); }
.topme__who .av { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, currentColor 70%, transparent); }
.topme__name { display: none; }
.me__chev { width: 13px; height: 13px; color: var(--mut); transform: rotate(90deg); transition: transform 0.2s; }
.me[open] .me__chev { transform: rotate(-90deg); color: var(--hi); }
.me__menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; display: flex; flex-direction: column; gap: 1px; width: 244px; padding: 8px; border-radius: 20px; border: 1px solid var(--line2); background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); transform-origin: top right; animation: v3-pop 0.16s var(--ease); }
.me__head { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); line-height: 1.25; }
.me__head b { font: 650 15px var(--display); letter-spacing: -0.02em; }
.me__head small { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.me__menu a, .me__menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--soft); text-align: left; cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.me__menu a:hover, .me__menu button:hover { background: rgba(255, 255, 255, 0.065); color: var(--hi); }
.me__menu svg { width: 16px; height: 16px; color: var(--mut); }
.me__menu a:hover svg, .me__menu button:hover svg { color: var(--acc); }
.me__menu a.me__staff svg { color: var(--acc); }
.me__menu hr { margin: 6px 8px; border: 0; border-top: 1px solid var(--line); }
.me__menu form { margin: 0; }
@keyframes v3-pop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.rulesbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 11px var(--gut); border-bottom: 1px solid rgba(244, 241, 208, 0.22); background: rgba(244, 241, 208, 0.06); font-size: 13.5px; color: var(--soft); }
.rulesbar a { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1560px) {
.tb__brand span { display: none; }
.mode summary span { display: none; }
}
@media (max-width: 1180px) {
.topbar { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 6px; }
.tb__brand span { display: inline; }
.search { flex: 1 1 160px; max-width: none; }
.topme__stats { display: none; }
.topbar .sb { order: 9; width: 100%; margin: 0 -6px; padding: 0 0 9px; overflow-x: auto; scrollbar-width: none; }
.topbar .sb::-webkit-scrollbar { display: none; }
.topbar .sb a.is-on::after { bottom: -9px; }
.topbar .sb a.sb__up { margin-left: auto; }
}
@media (max-width: 640px) {
.topbar { position: relative; gap: 8px; }
.tb__brand span { display: none; }
.search { order: 8; flex: 1 1 100%; }
.sug { position: fixed; top: 104px; right: 14px; left: 14px; width: auto; max-width: none; }
.topbar .sb a { padding: 0 11px; }
.modes:has(.mode + .mode) .mode summary b { display: none; }
.modes:has(.mode + .mode) .mode summary { padding: 0 10px; }
.pop__panel { position: fixed; top: 60px; right: 12px; left: 12px; width: auto; }
.mode { position: static; }
.mode__pop { top: 58px; right: 12px; left: 12px; width: auto; }
.me { position: static; }
.me__menu { top: 58px; right: 12px; }
}
@media (max-width: 430px) {
.topbar .sb a.sb__up { width: 36px; padding: 0; justify-content: center; }
.sb__up-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.foot { position: relative; margin-top: 30px; padding: 34px var(--gut) 26px; font-size: 13px; color: var(--mut); }
.foot::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(124, 245, 196, 0.28), rgba(195, 166, 255, 0.22), transparent); }
.foot__in { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, 190px)); gap: 28px 40px; }
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot__logo { display: inline-flex; align-items: center; gap: 10px; font: 700 18px/1 var(--display); letter-spacing: -0.04em; color: var(--hi); }
.foot__logo .sb__logo { width: 26px; height: 26px; }
.foot__sky { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--mut); }
.foot__sky .moon { width: 18px; height: 18px; flex: none; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foot__col h2 { margin: 0 0 3px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.foot__col a { color: var(--soft); transition: color 0.15s; }
.foot__col a:hover { color: var(--acc); }
.foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
.foot__site b { font-weight: 600; color: var(--soft); }
.foot__site b.up { color: var(--green); }
.foot__site b.down { color: var(--red); }
.foot__site b.amber { color: var(--moon); }
@media (max-width: 760px) {
.foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot__brand { grid-column: 1 / -1; }
}
.moon { display: block; overflow: visible; stroke: none; }
.moon__disc { fill: rgba(244, 241, 208, 0.09); }
.moon__lit { fill: var(--moon); opacity: 0; transition: opacity 1.2s ease; }
.moon.is-set .moon__lit { opacity: 1; }
.ph, .mast { position: relative; isolation: isolate; overflow: visible; min-height: 0; margin: 2px 0 28px; padding: 10px 0 26px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 28px; }
.mast { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 16px 40px; }
.ph::after, .mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.ph > div:first-of-type, .mast > div:first-of-type { min-width: 0; }
.ph h1, .mast h1 { flex: none; font: 700 clamp(30px, 3.1vw, 44px)/1.04 var(--display); letter-spacing: -0.043em; color: var(--hi); text-shadow: none; }
.ph__kicker, .mast__k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.ph__kicker::before, .mast__k::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.mast__k a { color: inherit; }
.mast__k a:hover { color: var(--hi); }
.ph__sub, .mast__lede { order: 0; flex: none; margin: 12px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.ph__sub b, .mast__lede b { font-weight: 650; color: var(--hi); }
.ph__actions, .mast__a { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mast__a { grid-column: 3; justify-content: flex-end; }
.ph__actions form, .mast__a form { display: inline-flex; }
.mast__facts { grid-column: 2; display: flex; gap: 0; margin: 0; }
.mast__facts div { display: flex; flex-direction: column-reverse; gap: 7px; padding: 0 26px; border-left: 1px solid var(--line); }
.mast__facts div:first-child { padding-left: 0; border-left: 0; }
.mast__facts div:last-child { padding-right: 0; }
.mast__facts dt { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.mast__facts dd { margin: 0; font: 650 28px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--hi); text-shadow: none; }
.mast__facts dd.amber { color: var(--moon); }
.mast__facts dd.up { color: var(--green); }
.mb-deco { position: absolute; z-index: -1; right: 0; bottom: 0; width: min(46%, 520px); height: calc(100% + 26px); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.mb-deco .moon { position: absolute; right: 2%; bottom: -246px; width: 360px; height: 360px; opacity: 0.17; filter: drop-shadow(0 0 40px rgba(244, 241, 208, 0.5)); }
.mb-deco .moon__disc { fill: rgba(244, 241, 208, 0.3); }
.mb-deco::before { content: ""; position: absolute; right: -6%; bottom: -150px; width: 520px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 208, 0.11), transparent); }
@media (max-width: 900px) {
.mast { grid-template-columns: minmax(0, 1fr); align-items: start; }
.mast__facts, .mast__a { grid-column: 1; justify-content: flex-start; }
.mast__facts div { padding: 0 18px; }
.mast__facts dd { font-size: 22px; }
.mb-deco { width: 70%; }
.mb-deco .moon { right: -8%; width: 280px; height: 280px; bottom: -196px; }
}
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--hi) !important; font-size: 13.5px; font-weight: 550; letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.2s, transform 0.12s; }
.btn:hover { border-color: var(--line3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn svg { width: 15px; height: 15px; }
.btn.is-on { border-color: rgba(124, 245, 196, 0.55); background: var(--acc-soft); color: var(--acc) !important; }
.btn[disabled], .btn-off { opacity: 0.45; cursor: not-allowed; }
.btn-solid, .rulesbar__go { border-color: transparent; background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px -10px rgba(124, 245, 196, 0.65); color: var(--on-acc) !important; font-weight: 650; }
.btn-solid:hover, .rulesbar__go:hover { border-color: transparent; background: var(--cta-hi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 10px 28px -8px rgba(124, 245, 196, 0.85); }
.btn--lg { height: 44px; padding: 0 22px; font-size: 14.5px; }
.btn--lg svg { width: 17px; height: 17px; }
.btn--sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn--ghost { border-color: transparent; background: none; box-shadow: none; color: var(--soft) !important; }
.btn--ghost:hover { border-color: transparent; background: rgba(255, 255, 255, 0.06); color: var(--hi) !important; }
.btn--danger { border-color: rgba(255, 143, 143, 0.35); background: rgba(255, 143, 143, 0.08); color: var(--red) !important; }
.btn--danger:hover { border-color: rgba(255, 143, 143, 0.6); background: rgba(255, 143, 143, 0.16); }
.input, .select, .textarea { width: 100%; border-radius: var(--r); border: 1px solid var(--line2); background-color: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--text); font: inherit; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.input, .select { height: 42px; padding: 0 14px; }
.textarea { min-height: 124px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line3); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: rgba(124, 245, 196, 0.7); background-color: rgba(3, 6, 8, 0.72); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.13), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.input::placeholder, .textarea::placeholder { color: var(--dim); }
.input[aria-invalid=true], .textarea[aria-invalid=true] { border-color: rgba(255, 143, 143, 0.7); }
.input[aria-invalid=true]:focus, .textarea[aria-invalid=true]:focus { box-shadow: 0 0 0 4px rgba(255, 143, 143, 0.14); }
select.select:not([multiple]):not([size]) { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398aea4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
.select option { background: var(--surface2); color: var(--text); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .field__label { font-size: 13px; font-weight: 600; color: var(--text); }
.field .help, .help { font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.field .err { font-size: 12.5px; color: var(--red); }
.form { gap: 18px; }
.content > form.form, .content > .form:not(form) { padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--soft); cursor: pointer; }
.check input[type=checkbox], .check input[type=radio] { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--line3); border-radius: 6px; background: rgba(3, 6, 8, 0.5) center / 12px no-repeat; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.check input[type=radio] { border-radius: 50%; }
.check input:hover { border-color: rgba(124, 245, 196, 0.6); }
.check input:checked { border-color: transparent; background-color: var(--acc); box-shadow: 0 0 12px rgba(124, 245, 196, 0.35); }
.check input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304110c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.check input[type=radio]:checked { background-image: radial-gradient(circle, #04110c 0 3.5px, transparent 4px); background-size: 100%; }
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.card + .card, .card + .details { margin-top: 18px; }
.card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.card__h h2 { font: 650 15px/1.2 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.card__h a { font-size: 12.5px; font-weight: 550; color: var(--mut); transition: color 0.15s; }
.card__h a:hover { color: var(--acc); }
.card .tablewrap { border: 0; border-radius: 0; background: none; box-shadow: none; }
.card > .table, .card .table { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sec { margin-bottom: 26px; }
.sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec__h h2 { font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.sec__h a { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 550; color: var(--mut); transition: color 0.15s; }
.sec__h a:hover { color: var(--acc); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); scrollbar-width: thin; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { padding: 13px 16px 11px; text-align: left; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background-color 0.15s; }
.table tbody tr:hover { background: rgba(124, 245, 196, 0.035); }
.table .num { text-align: right; font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table th.num { font: var(--label); letter-spacing: 0.12em; }
.tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 22px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs a { position: relative; flex: none; padding: 10px 14px 12px; margin-bottom: 0; border-bottom: 0; border-radius: 12px 12px 0 0; font-size: 13.5px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s, background-color 0.15s; }
.tabs a:hover { background: rgba(255, 255, 255, 0.035); color: var(--text); }
.tabs a.is-on { color: var(--hi); }
.tabs a.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.seg a { display: inline-flex; align-items: center; height: 28px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s, background-color 0.15s; }
.seg a:hover { color: var(--hi); }
.seg a.is-on { background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.35); color: var(--hi); }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.025); font-size: 12.5px; font-weight: 550; color: var(--soft); white-space: nowrap; cursor: pointer; user-select: none; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.chip:hover { border-color: rgba(124, 245, 196, 0.4); color: var(--hi); }
.chip.is-on { background: var(--acc-soft); border-color: rgba(124, 245, 196, 0.5); color: var(--hi); }
.chip small { font: 11px var(--sans); font-variant-numeric: tabular-nums; color: var(--dim); }
.chip.is-on small { color: var(--acc); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11px; font-weight: 650; line-height: 17px; color: var(--soft); }
.pill--ok { background: rgba(110, 231, 168, 0.13); color: var(--green); }
.pill--warn { background: rgba(244, 222, 140, 0.13); color: var(--amber); }
.pill--bad { background: rgba(255, 143, 143, 0.13); color: var(--red); }
.pill--acc { background: var(--acc-soft); color: var(--acc); }
.tag { display: inline-block; padding: 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.075); font-style: normal; font-size: 10.5px; font-weight: 650; line-height: 18px; letter-spacing: 0.01em; color: var(--soft); vertical-align: 1px; }
.rank { display: inline-block; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 55%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 18px; }
.alert { position: relative; padding: 13px 18px 13px 22px; border: 1px solid var(--line2); border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1); font-size: 13.5px; color: var(--soft); }
.alert::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.alert--ok { border-color: rgba(124, 245, 196, 0.32); background: rgba(124, 245, 196, 0.06); color: var(--acc); }
.alert--err { border-color: rgba(255, 143, 143, 0.4); background: rgba(255, 143, 143, 0.06); color: var(--red); }
.alert--warn { border-color: rgba(244, 222, 140, 0.4); background: rgba(244, 222, 140, 0.06); color: var(--amber); }
.f-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 14px; font-size: 12.5px; color: var(--mut); }
.f-crumbs a { font-weight: 550; color: var(--soft); transition: color 0.15s; }
.f-crumbs a:hover { color: var(--acc); }
.f-crumbs span { font-weight: 650; color: var(--hi); }
.f-crumbs i { font-style: normal; color: var(--dim); }
.pg2 { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; font-size: 13px; color: var(--mut); }
.pg2 b { color: var(--hi); }
.blank { border: 1px dashed var(--line2); border-radius: var(--r-xl); background: var(--card); }
.blank h2 { font: 650 22px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.av { border-radius: 50%; object-fit: cover; }
.av--txt { display: inline-grid; place-items: center; background: radial-gradient(circle at 34% 28%, #2f6654, #12302a 70%); color: var(--hi); font-weight: 650; text-transform: uppercase; }
.acct { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.acct__nav { position: sticky; top: 84px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--e2); }
.acct__links { display: flex; flex-direction: column; gap: 2px; }
.acct__links hr { margin: 7px 10px; border: 0; border-top: 1px solid var(--line); }
.acct__links a { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.acct__links a svg { width: 15px; height: 15px; color: var(--mut); transition: color 0.15s; }
.acct__links a:hover { background: rgba(255, 255, 255, 0.05); color: var(--hi); }
.acct__links a.is-on { background: linear-gradient(90deg, rgba(124, 245, 196, 0.17), rgba(124, 245, 196, 0.03)); box-shadow: inset 2px 0 0 var(--acc); color: var(--hi); font-weight: 600; }
.acct__links a.is-on svg { color: var(--acc); filter: none; }
.acct__body .ph, .acct__body .mast { padding: 10px 0 26px; border-radius: 0; }
@media (max-width: 1000px) {
.acct { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.acct__nav { position: static; padding: 10px 10px 8px; border-radius: 20px; }
.acct__links { position: relative; flex-direction: row; flex-wrap: nowrap; gap: 4px; margin: 0 -10px; padding: 0 34px 2px 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.acct__links hr { display: none; }
.acct__links a { flex: none; border-radius: 999px; white-space: nowrap; scroll-snap-align: start; scroll-margin-left: 10px; }
.acct__links a.is-on { background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.3); }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; }
::view-transition-group(mb-art) { animation-duration: 0.42s; animation-timing-function: var(--ease); }
::view-transition-old(mb-art), ::view-transition-new(mb-art) { height: 100%; object-fit: cover; }
.mb-scene .fly { animation: none; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
html { transition: none; }
.moon__lit { transition: none; }
}
.au { min-height: 100vh; min-height: 100dvh; margin: 0; background: #04070c; }
.au::before, .au::after { content: none; }
.au__sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; --au-w: 424px; --au-md: clamp(96px, min(26vmin, 50vw - var(--au-w) / 2 - 64px), 248px); --au-mx: clamp(var(--au-w) / 2 + var(--au-md) / 2 + 22px, 26vw, 600px); --au-my: clamp(96px, 23vh, 300px); --au-land: clamp(250px, 46vh, 500px); background:
radial-gradient(circle at calc(50% + var(--au-mx)) var(--au-my), rgba(150, 196, 232, 0.12), transparent 46vmin),
radial-gradient(ellipse 34% 3.2% at 71% 39%, rgba(190, 214, 230, 0.07), transparent 100%),
radial-gradient(ellipse 26% 2.4% at 22% 31%, rgba(190, 214, 230, 0.05), transparent 100%),
radial-gradient(ellipse 75% 26% at 50% calc(100% - var(--au-land) * 0.74), rgba(124, 190, 214, 0.2), transparent 72%),
linear-gradient(180deg, #03060b 0, #050b15 calc((100% - var(--au-land)) * 0.45), #0a1827 calc((100% - var(--au-land)) * 0.9), #12303f calc(100% - var(--au-land) * 0.76), #0a1a25 100%); }
.au:has(.au__form--mid) .au__sky { --au-w: 500px; }
.au:has(.au__form--wide) .au__sky { --au-w: 660px; }
.au__sky svg { stroke: none; }
.au__sky .au__defs { position: absolute; width: 0; height: 0; }
.au__sky .sa { stop-color: var(--acc); }
.au__sky .sh { stop-color: var(--acc-hi); }
.au__sky .sm { stop-color: var(--moon); }
.au__stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; -webkit-mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.25) 62%, transparent 76%); mask-image: linear-gradient(180deg, #000 34%, rgba(0, 0, 0, 0.25) 62%, transparent 76%); }
.au__moon { position: absolute; left: calc(50% + var(--au-mx)); top: var(--au-my); width: var(--au-md); height: var(--au-md); margin: calc(var(--au-md) / -2) 0 0 calc(var(--au-md) / -2); }
.au__halo, .au__orb { position: absolute; inset: 0; }
.au__halo { transform: scale(2.4); filter: blur(calc(var(--au-md) * 0.26)); opacity: 0.4; }
.au__halo .moon__disc, .au__glint .moon__disc { fill: none; }
.au__moon .moon { width: 100%; height: 100%; }
.au__orb { background: radial-gradient(circle closest-side, #0e1926, #0b1420 96.6%, transparent 98%); }
.au__orb .moon { filter: drop-shadow(0 0 calc(var(--au-md) * 0.07) rgba(244, 241, 208, 0.5)); }
.au__orb .moon__disc { fill: rgba(176, 208, 226, 0.085); }
.au__orb .moon__lit { fill: #fbf9e4; }
.au__maria { position: absolute; inset: 0; width: 100%; height: 100%; fill: #8a8872; opacity: 0.3; mix-blend-mode: multiply; }
.au__phase { position: absolute; top: calc(100% + 18px); left: 50%; margin: 0; transform: translateX(-50%); font: var(--label); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: var(--mut); opacity: 0.8; }
.au__land { position: absolute; left: 50%; bottom: 0; width: max(100%, 1280px); height: var(--au-land); transform: translateX(-50%); }
.au__hills { position: absolute; inset: 0; width: 100%; height: 100%; }
.au__glint { position: absolute; left: calc(50% + var(--au-mx)); top: 54.8%; width: calc(var(--au-md) * 2); height: 22%; overflow: hidden; transform: translateX(-50%); --au-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Crect width='100' height='100' opacity='.16'/%3E%3Cpath stroke='%23000' stroke-width='1.7' stroke-linecap='round' d='M43 4h13M40 7h20M41 12h19M37 17h11M54 17h10M37 23h27M33 29h5M45 29h19M40 35h31M32 42h5M48 42h13M68 42h7M25 49h34M68 49h6M24 56h11M42 56h36M24 63h21M54 63h25M17 71h62M18 78h10M40 78h44M12 86h12M36 86h45M13 94h6M32 94h57'/%3E%3C/svg%3E"); -webkit-mask: var(--au-dash) center / 100% 100% no-repeat; mask: var(--au-dash) center / 100% 100% no-repeat; }
.au__glint .moon { position: absolute; left: 50%; top: 0; width: var(--au-md); height: var(--au-md); transform: translate(-50%, -32%) scale(1.25, 1.1); filter: blur(calc(var(--au-md) * 0.13)); opacity: 0.72; }
.au__garden { position: absolute; left: 50%; bottom: 0; width: auto; height: 62%; aspect-ratio: 16 / 3; overflow: visible; transform: translateX(-50%); fill: none; stroke: var(--acc); }
.au__sky .au__garden { stroke: var(--acc); }
.au__garden path.c { fill: none; stroke: var(--moon); }
.au__garden use, .au__garden rect, .au__garden ellipse { stroke: none; }
.au__stem { stroke: #0d3229; }
.au__leaf { fill: #0a2a23; stroke: none; }
.au__bud { fill: #2c9a7a; }
.au__g1 { fill: #0b2a22; }
.au__g2 { fill: #04100e; }
.au__land::after { content: ""; position: absolute; inset: auto 0 0; height: 24%; background: linear-gradient(0deg, rgba(2, 5, 7, 0.7), transparent); }
.au__near { position: absolute; bottom: calc(var(--au-land) * -0.2); width: calc(var(--au-land) * 0.56); height: calc(var(--au-land) * 0.56); overflow: visible; filter: blur(calc(var(--au-land) * 0.02)); opacity: 0.62; }
.au__near--l { left: calc(var(--au-land) * -0.17); }
.au__near--r { right: calc(var(--au-land) * -0.22); bottom: calc(var(--au-land) * -0.27); opacity: 0.5; }
.au__veil { position: absolute; inset: 0; background:
radial-gradient(ellipse 78% 70% at 50% 44%, transparent 42%, rgba(2, 4, 8, 0.5) 100%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
.au__main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100dvh; padding: clamp(18px, 5vh, 56px) 16px clamp(14px, 3vh, 28px); }
.au__card { position: relative; width: 100%; max-width: 424px; margin: auto 0; padding: 38px 38px 28px; border-radius: var(--r-xl); background: radial-gradient(120% 70% at 50% 0, rgba(124, 245, 196, 0.05), transparent 62%), linear-gradient(180deg, rgba(15, 24, 32, 0.66), rgba(7, 12, 17, 0.78)); -webkit-backdrop-filter: blur(28px) saturate(1.45); backdrop-filter: blur(28px) saturate(1.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 120px -30px rgba(124, 245, 196, 0.12); animation: au-in 0.55s var(--ease) both; }
.au__card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(218deg, rgba(244, 241, 208, 0.5), rgba(196, 232, 222, 0.13) 24%, rgba(196, 232, 222, 0.07) 64%, rgba(124, 245, 196, 0.34)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.au__card:has(.au__form--wide) { max-width: 660px; }
.au__card:has(.au__form--mid) { max-width: 500px; }
@keyframes au-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.au__brand { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 auto 24px; border-radius: 10px; font: 700 20px/1 var(--display); letter-spacing: -0.04em; color: var(--hi); }
.au__brand .sb__logo { width: 32px; height: 32px; filter: drop-shadow(0 0 9px rgba(124, 245, 196, 0.55)); }
.au__brand:hover .sb__logo { filter: drop-shadow(0 0 14px rgba(124, 245, 196, 0.9)); }
.au__title { margin: 0 0 24px; text-align: center; font: 700 30px/1.08 var(--display); letter-spacing: -0.042em; color: var(--hi); }
.au__lead { max-width: 44ch; margin: -12px auto 24px; text-align: center; font-size: 14px; line-height: 1.56; color: var(--soft); text-wrap: pretty; }
.au__lead--long { max-width: none; text-align: left; }
.au__card .alert { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 20px; padding: 12px 15px 12px 13px; border: 1px solid rgba(255, 143, 143, 0.3); border-radius: var(--r-m); background: rgba(255, 143, 143, 0.075); box-shadow: none; font-size: 13.5px; line-height: 1.45; color: var(--red); animation: none; }
.au__card .alert::before { content: none; }
.au__card .alert svg { width: 18px; height: 18px; margin-top: 1px; }
.au__card .alert span { min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.au__card .alert--ok { border-color: rgba(124, 245, 196, 0.3); background: rgba(124, 245, 196, 0.07); color: var(--acc); }
.au__card .alert--warn { border-color: rgba(244, 222, 140, 0.3); background: rgba(244, 222, 140, 0.07); color: var(--amber); }
.au__title + .alert { margin-top: -4px; }
.au__card .alert + .au__lead { margin-top: 0; }
.au__form { gap: 16px; max-width: none; margin: 0; }
.au__form .field { gap: 7px; min-width: 0; }
.au__form .field > label, .au__form .field__label { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--soft); }
.au__form .field > label .mut, .au__form .field__label .mut { font-weight: 450; color: var(--mut); }
.au__form .input, .au__form .select { height: 46px; padding: 0 15px; font-size: 15px; }
.au__form .textarea { min-height: 0; padding: 12px 15px; font-size: 15px; }
.au__form .input, .au__form .select, .au__form .textarea { background-color: rgba(2, 5, 8, 0.5); }
.au__form .input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 100px #0b1a1c inset; caret-color: var(--text); }
.au__form .input:-webkit-autofill:focus { box-shadow: 0 0 0 100px #0b1a1c inset, 0 0 0 4px rgba(124, 245, 196, 0.13); }
.au__form .select[aria-invalid=true] { border-color: rgba(255, 143, 143, 0.7); }
.au__form .help { font-size: 12.5px; line-height: 1.45; color: var(--mut); }
.au__form .err { display: flex; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--red); }
.au__form .err::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 6.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.au__form .check { margin: 0; font-size: 13.5px; }
.au__form .up-mono { font-family: var(--mono); font-size: 13.5px; letter-spacing: 0; }
.au__go { justify-content: center; width: 100%; height: 46px; margin-top: 6px; font-size: 15px; }
.au__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.au__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; align-items: start; }
.au__urls { display: grid; gap: 8px; }
.au__form .au__under { margin-top: -9px; }
.au .au__code { height: 62px; padding: 0 8px 0 calc(8px + 0.38em); text-align: center; font: 600 28px/1 var(--display); letter-spacing: 0.38em; font-variant-numeric: tabular-nums; color: var(--hi); }
.au .au__code::placeholder { color: rgba(125, 150, 139, 0.45); }
.au__who { display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0; padding: 8px 15px; border: 1px dashed var(--line2); border-radius: var(--r); font-size: 14px; }
.au__who span { flex: none; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.au__who b { min-width: 0; margin-left: auto; overflow: hidden; font-weight: 550; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.au__set { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.au__set + .au__set { margin-top: 8px; }
.au__set > legend { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 0; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.au__set > legend::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.au__form .check--long { align-items: flex-start; line-height: 1.5; }
.au__form .check--long input { margin-top: 1.5px; }
.au__form .check--long + .err { margin: -8px 0 0 28px; }
.au__alt { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; font-size: 13px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.au__alt a, .au .au__link { border-radius: 4px; font-weight: 550; color: var(--soft); text-decoration: underline; text-decoration-color: rgba(194, 211, 203, 0.32); text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; }
.au__alt a:hover, .au .au__link:hover { color: var(--acc); text-decoration-color: currentColor; }
.au__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }
.au__links a { text-decoration: none; }
.au__links a:only-child { margin: 0 auto; }
.au__alt + .au__alt { margin-top: 16px; padding-top: 16px; }
form.au__alt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 8px; }
.au__fine { margin: 20px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.au__done { display: flex; margin: 4px 0 0; }
.au__done .btn { justify-content: center; width: 100%; height: 46px; font-size: 15px; }
.au__small { margin: 0; padding: 22px 8px 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--mut); text-shadow: 0 1px 10px #020507, 0 0 2px #020507; text-wrap: balance; }
@media (max-width: 900px) {
.au__sky { --au-md: clamp(84px, 22vmin, 150px); --au-mx: min(31vw, 250px); --au-my: clamp(64px, 11vh, 120px); }
.au__phase { display: none; }
.au__card { background: radial-gradient(120% 70% at 50% 0, rgba(124, 245, 196, 0.05), transparent 62%), linear-gradient(180deg, rgba(13, 21, 28, 0.8), rgba(7, 12, 17, 0.86)); -webkit-backdrop-filter: blur(34px) saturate(1.3); backdrop-filter: blur(34px) saturate(1.3); }
}
@media (max-width: 560px) {
.au__sky { --au-land: clamp(210px, 36vh, 330px); }
.au__near { display: none; }
.au__garden { transform: translateX(calc(-25% - 50vw)); }
.au__main { padding: 14px 12px 12px; }
.au__card, .au__card:has(.au__form--wide), .au__card:has(.au__form--mid) { max-width: 440px; padding: 30px 22px 22px; border-radius: 24px; }
.au__brand { margin-bottom: 20px; }
.au__title { margin-bottom: 22px; font-size: 27px; }
.au__form .input, .au__form .select, .au__form .textarea { font-size: 16px; }
.au__row { grid-template-columns: minmax(0, 1fr); }
.au .au__code { font-size: 25px; letter-spacing: 0.3em; padding-left: calc(8px + 0.3em); }
}
@media (max-height: 640px) {
.au__main { padding-top: 14px; padding-bottom: 10px; }
.au__card { padding-top: 28px; padding-bottom: 22px; }
.au__brand { margin-bottom: 16px; }
.au__title { margin-bottom: 18px; font-size: 26px; }
.au__small { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.au__card { animation: none; }
}
.hm { --edge: var(--bleed, var(--pad)); display: flex; flex-direction: column; gap: clamp(44px, 5vw, 74px); }
.hm > * { min-width: 0; }
.hm-k { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.hm-k::before { content: ""; flex: none; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.hm-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hm-h > div:first-child { min-width: 0; }
.hm-h h2 { font: 700 clamp(22px, 2.1vw, 30px)/1.08 var(--display); letter-spacing: -0.04em; color: var(--hi); }
.hm-h__a { display: flex; flex: none; align-items: center; gap: 14px; }
.hm-more { display: inline-flex; align-items: center; gap: 3px; padding: 7px 0; font-size: 13px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s; }
.hm-more svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.hm-more:hover { color: var(--acc); }
.hm-more:hover svg { transform: translateX(3px); }
.hm-nav { display: flex; gap: 6px; }
.hm-nav[hidden] { display: none; }
.hm-nav button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--hi); cursor: pointer; transition: border-color 0.15s, background 0.15s, opacity 0.2s, transform 0.12s; }
.hm-nav button svg { width: 15px; height: 15px; }
.hm-nav button:first-child svg { transform: rotate(180deg); }
.hm-nav button:hover:not(:disabled) { border-color: var(--line3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)); }
.hm-nav button:active:not(:disabled) { transform: scale(0.94); }
.hm-nav button:disabled { opacity: 0.3; cursor: default; }
@media (hover: none) {
.hm-nav { display: none; }
}
.hm-none { margin: 0; padding: 20px 2px; font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.hm-up { font-style: normal; font-weight: 650; color: var(--acc); }
.spot { position: relative; isolation: isolate; overflow-x: clip; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: clamp(560px, calc(100vh - 186px), 800px); min-height: clamp(560px, calc(100svh - 186px), 800px); margin: -26px calc(-1 * var(--edge)) 0; padding: 24px var(--edge) 0; }
.spot__bgs { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 44%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 44%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); }
.spot__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transform: scale(1.035); transition: opacity 1.6s ease, transform 9s ease-out; }
.spot__bg.is-on { opacity: 1; transform: none; }
.spot__bgs::after { content: ""; position: absolute; inset: 0; background:
linear-gradient(90deg, rgba(6, 9, 12, 0.93) 0, rgba(6, 9, 12, 0.82) 20%, rgba(6, 9, 12, 0.56) 40%, rgba(6, 9, 12, 0.16) 60%, rgba(6, 9, 12, 0) 78%),
linear-gradient(180deg, rgba(6, 9, 12, 0.72) 0, rgba(6, 9, 12, 0.22) 17%, rgba(6, 9, 12, 0) 32%),
linear-gradient(0deg, rgba(6, 9, 12, 0.92) 0, rgba(6, 9, 12, 0.6) 24%, rgba(6, 9, 12, 0) 58%); }
.spot__top { grid-row: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 32px; }
.spot__hello { margin: 0; min-width: 0; font: 600 clamp(18px, 1.55vw, 22px)/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7); }
.spot__hello em { font-style: normal; color: var(--moon); }
.spot__hello small { display: block; margin-top: 7px; font: 500 12.5px/1.45 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--soft); }
.spot__hello small b { font-weight: 650; color: var(--hi); }
.spot__night { display: flex; align-items: center; gap: 16px; min-width: 0; }
.spot__modes { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.spot__mode { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 1px 10px; font-size: 13px; line-height: 1.4; color: var(--soft); text-align: right; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8); }
.spot__mode b { font: var(--label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--moon); }
.spot__mode--du b { color: var(--bmoon); }
.spot__moon, .hm-ton__sky { position: relative; flex: none; display: block; }
.spot__moon::after, .hm-ton__sky::after { content: ""; position: absolute; inset: 1.5%; border-radius: 50%; background:
radial-gradient(circle at 36% 32%, rgba(96, 88, 44, 0) 52%, rgba(96, 88, 44, 0.3) 100%),
radial-gradient(20% 15% at 37% 34%, rgba(118, 110, 70, 0.3), transparent),
radial-gradient(15% 18% at 61% 57%, rgba(118, 110, 70, 0.24), transparent),
radial-gradient(10% 9% at 43% 71%, rgba(118, 110, 70, 0.22), transparent),
radial-gradient(12% 10% at 67% 29%, rgba(118, 110, 70, 0.18), transparent); mix-blend-mode: multiply; pointer-events: none; }
.spot__moon .moon { width: 46px; height: 46px; filter: drop-shadow(0 0 16px rgba(244, 241, 208, 0.5)); }
.spot__moon .moon__disc { fill: rgba(244, 241, 208, 0.16); }
.spot__slides { position: relative; grid-row: 2; display: grid; align-content: end; width: min(100%, 780px); padding: 40px 0 30px; }
.spot__slides::before { content: ""; position: absolute; z-index: -1; inset: -6% -24% -10% -34%; background: radial-gradient(closest-side, rgba(6, 9, 12, 0.6), rgba(6, 9, 12, 0.34) 58%, rgba(6, 9, 12, 0)); pointer-events: none; }
.spot__s { grid-area: 1 / 1; align-self: end; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; }
.spot__s.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.7s ease 0.25s, transform 0.7s var(--ease) 0.25s, visibility 0s; }
.spot__kick { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: var(--label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc); }
.spot__kick::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.spot__kick i { padding-left: 11px; border-left: 1px solid var(--line3); font-style: normal; letter-spacing: 0.12em; color: var(--mut); }
.spot__s h2 { max-width: 100%; margin: 0; font: 700 clamp(40px, 5.4vw, 84px)/0.98 var(--display); letter-spacing: -0.05em; color: #fff; text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55); }
.spot__s--long h2 { font-size: clamp(34px, 4.1vw, 62px); line-height: 1.02; letter-spacing: -0.045em; }
.spot__s h2 a { transition: color 0.2s; }
.spot__s h2 a:hover { color: var(--acc-hi); }
.spot__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 0; margin: 18px 0 0; font-size: 13.5px; font-weight: 500; color: var(--soft); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.spot__meta > span { display: inline-flex; align-items: center; }
.spot__meta > span + span::before, .spot__gs > span + span::before { content: ""; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--dim); }
.spot__gs > span { display: inline-flex; align-items: center; }
.spot__rate { gap: 5px; font-weight: 650; color: var(--moon); }
.spot__rate::before { margin-right: 5px !important; }
.spot__rate svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.spot__q { font-weight: 650; color: var(--hi); }
.spot__ov { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; max-width: 60ch; margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); text-wrap: pretty; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.spot__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 26px; margin: 20px 0 0; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.spot__n b { margin-right: 6px; font: 650 18px/1 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.spot__n--up b { color: var(--acc); }
.spot__free { align-self: center; padding: 3px 10px; border-radius: 999px; background: rgba(244, 241, 208, 0.13); box-shadow: inset 0 0 0 1px rgba(244, 241, 208, 0.34); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moon); }
.spot__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.spot__acts .btn:not(.btn-solid) { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.spot__acts .btn:not(.btn-solid):hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.17); }
.spot__rail { grid-row: 3; min-width: 0; }
.spot__railh { display: block; margin-bottom: 10px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.spot__ts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(158px, 1fr); gap: 8px; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge) 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--edge); scrollbar-width: none; }
.spot__ts::-webkit-scrollbar { display: none; }
.spot__t { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 10px 10px 8px; border: 0; border-radius: 3px 3px 14px 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; opacity: 0.62; transition: opacity 0.3s, background-color 0.2s; }
.spot__t:hover { opacity: 1; background: rgba(255, 255, 255, 0.045); }
.spot__t.is-on { opacity: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02)); }
.spot__t:focus-visible { outline-offset: -2px; opacity: 1; }
.spot__t img, .spot__np { flex: none; width: 44px; height: 66px; border-radius: 7px; object-fit: cover; background: var(--surface3); box-shadow: 0 0 0 1px var(--line), 0 6px 14px -6px rgba(0, 0, 0, 0.85); }
.spot__tt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.spot__tt b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.28; color: var(--hi); }
.spot__tt small { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mut); white-space: nowrap; }
.spot__tt small i { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.spot__bar { position: absolute; top: 0; right: 0; left: 0; height: 2px; border-radius: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.13); transition: background-color 0.3s; }
.spot__t.is-on .spot__bar { background: rgba(255, 255, 255, 0.24); }
.spot__t.is-on .spot__bar::after { content: ""; position: absolute; inset: 0; background: var(--acc); transform-origin: left; animation: hm-run 8s linear both; }
.spot.is-held .spot__t.is-on .spot__bar::after { animation-play-state: paused; }
@keyframes hm-run { from { transform: scaleX(0); } }
.hm-wel { position: relative; isolation: isolate; padding: clamp(20px, 4vw, 54px) 0 clamp(30px, 4vw, 54px); }
.hm-wel::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.hm-wel h1 { font: 700 clamp(38px, 5.2vw, 76px)/1 var(--display); letter-spacing: -0.05em; color: var(--hi); }
.hm-wel h1 em { font-style: normal; color: var(--moon); }
.hm-wel__p { max-width: 60ch; margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--soft); }
.hm-wel__p b { font-weight: 650; color: var(--hi); }
.hm-wel__modes { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 22px 0 0; padding: 0; list-style: none; }
.hm-wel__modes .spot__mode { justify-content: flex-start; text-align: left; text-shadow: none; }
.hm-room { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 400px); grid-template-rows: clamp(540px, 68vh, 660px); gap: clamp(16px, 1.7vw, 26px); }
.hm-room > .irc { height: 100%; min-height: 0; }
.hm-room__side { display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 20px); min-width: 0; min-height: 0; }
.hm-ev { --lamp: var(--lav); position: relative; flex: none; display: flex; align-items: center; gap: 18px; padding: 17px 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--lamp) 26%, transparent); border-radius: var(--r-lg); background: radial-gradient(240px 170px at 9% 50%, color-mix(in srgb, var(--lamp) 20%, transparent), transparent 74%), var(--card); box-shadow: var(--e2); transition: border-color 0.2s, transform 0.25s var(--ease); }
.hm-ev--lantern { --lamp: #ffbf78; }
.hm-ev:hover { border-color: color-mix(in srgb, var(--lamp) 52%, transparent); transform: translateY(-2px); }
.hm-ev__art { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--lamp) 32%, transparent), color-mix(in srgb, var(--lamp) 7%, transparent) 72%); box-shadow: 0 0 32px color-mix(in srgb, var(--lamp) 36%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lamp) 38%, transparent); color: var(--lamp); }
.hm-ev__art svg { width: 26px; height: 26px; }
.hm-ev__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-ev__t small { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--lamp) 78%, #fff); }
.hm-ev__t b { overflow: hidden; font: 650 19px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.hm-ev__t > span { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 550; color: var(--soft); }
.hm-ev__t > span svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.hm-ev:hover .hm-ev__t > span { color: var(--hi); }
.hm-ev:hover .hm-ev__t > span svg { transform: translateX(3px); }
.hm-act { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.hm-act__h { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 20px 10px; }
.hm-act__h h2 { font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.hm-act__h span { font-size: 12px; color: var(--dim); }
.hm-act__l { flex: 1; min-height: 0; margin: 0; padding: 0 8px; overflow: hidden; list-style: none; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 54px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 54px), transparent); }
.hm-act__i { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 9px 12px; border-radius: 12px; transition: background-color 0.15s; }
.hm-act__i:hover { background: rgba(255, 255, 255, 0.035); }
.hm-act__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.055); color: var(--mut); }
.hm-act__ic svg { width: 14px; height: 14px; }
.hm-act__ic--upload { background: var(--acc-soft); color: var(--acc); }
.hm-act__ic--fill { background: rgba(244, 241, 208, 0.1); color: var(--moon); }
.hm-act__ic--join { background: rgba(195, 166, 255, 0.12); color: var(--lav); }
.hm-act__i p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; padding-top: 1px; font-size: 13px; line-height: 1.45; color: var(--mut); overflow-wrap: anywhere; }
.hm-act__i p a { font-weight: 500; color: var(--text); transition: color 0.15s; }
.hm-act__i p a:hover { color: var(--acc); }
.hm-act__i p a.hm-act__u { font-weight: 650; }
.hm-act__i time { padding-top: 3px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.hm-act .hm-none { padding: 14px 12px 20px; }
.hm-gd { position: relative; isolation: isolate; display: grid; grid-template-columns: clamp(250px, 24vw, 340px) minmax(0, 1fr); gap: clamp(22px, 3.2vw, 54px); align-items: center; padding: clamp(24px, 2.7vw, 40px) 0 clamp(24px, 2.7vw, 40px) clamp(22px, 2.7vw, 40px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(640px 380px at 0 0, rgba(195, 166, 255, 0.115), transparent 70%), radial-gradient(560px 340px at 100% 100%, rgba(124, 245, 196, 0.07), transparent 72%), var(--card); box-shadow: var(--e2); }
.hm-gd .hm-k { color: var(--lav); }
.hm-gd__intro { min-width: 0; }
.hm-gd__intro h2 { font: 700 clamp(26px, 2.5vw, 36px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--hi); }
.hm-gd__lede { max-width: 42ch; margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.hm-gd__n { display: flex; margin: 24px 0; }
.hm-gd__n div { display: flex; flex-direction: column-reverse; gap: 7px; padding: 0 clamp(14px, 1.6vw, 24px); border-left: 1px solid var(--line2); }
.hm-gd__n div:first-child { padding-left: 0; border-left: 0; }
.hm-gd__n dt { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); white-space: nowrap; }
.hm-gd__n dd { margin: 0; font: 650 34px/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--hi); }
.hm-gd__n .is-bloom dd { color: var(--moon); }
.hm-gd__n .is-grow dd { color: var(--acc); }
.hm-gd__n .is-fade dd { color: #ffb0a4; }
.hm-gd__n .is-zero dd { color: var(--dim); }
.hm-gd__intro .btn { margin-top: 2px; }
.hm-gd--empty .hm-gd__intro .btn { margin-top: 22px; }
.hm-gd > .hm-nav { position: absolute; z-index: 2; top: 18px; right: 20px; }
.hm-rail.hm-gd__bed { gap: 16px; margin: 0; padding: 6px clamp(40px, 5vw, 72px) 6px 2px; scroll-padding-inline: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.hm-rail.hm-gd__bed > li { width: clamp(118px, 11.3vw, 164px); }
.hm-pl { --pc: var(--acc); --pt: var(--mut); display: flex; flex-direction: column; gap: 8px; }
.hm-pl__art { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: var(--surface2); box-shadow: 0 0 0 1px var(--line2), 0 16px 28px -18px rgba(0, 0, 0, 0.95); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.hm-pl__art img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.35s; }
.hm-pl:hover .hm-pl__art { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pc) 55%, transparent), 0 22px 34px -18px rgba(0, 0, 0, 1); }
.hm-pl:focus-visible { outline: none; }
.hm-pl:focus-visible .hm-pl__art { outline: 2px solid var(--acc); outline-offset: 2px; }
.hm-pl--bloom { --pc: var(--moon); --pt: var(--moon); }
.hm-pl--grow { --pt: var(--soft); }
.hm-pl--fade { --pc: #ff9c8c; --pt: #ffb4a8; }
.hm-pl--fade .hm-pl__art img { filter: grayscale(0.8) brightness(0.68); }
.hm-pl--fade:hover .hm-pl__art img, .hm-pl--fade:focus-visible .hm-pl__art img { filter: none; }
.hm-pl__mark { position: absolute; top: 7px; left: 7px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(6, 9, 12, 0.72); box-shadow: 0 0 0 1px rgba(244, 241, 208, 0.3); color: var(--moon); }
.hm-pl__mark svg { width: 14px; height: 14px; }
.hm-pl b { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.hm-pl__bar { display: block; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.09); }
.hm-pl__bar > span { display: block; height: 100%; min-width: 3px; border-radius: 2px; background: var(--pc); }
.hm-pl small { font-size: 11.5px; line-height: 1.35; color: var(--pt); }
.hm-noart { display: grid; place-items: center; width: 100%; height: 100%; color: var(--dim); }
.hm-noart svg { width: 28px; height: 28px; }
.hm-gd__plots { display: flex; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 96%); mask-image: linear-gradient(90deg, #000 30%, transparent 96%); }
.hm-gd__plots span { flex: none; display: grid; place-content: center; justify-items: center; gap: 10px; width: clamp(118px, 11.3vw, 164px); aspect-ratio: 2 / 3; border: 1.5px dashed var(--line2); border-radius: 12px; color: var(--dim); }
.hm-gd__plots span:first-child { border-color: rgba(124, 245, 196, 0.42); background: radial-gradient(closest-side, rgba(124, 245, 196, 0.09), transparent); color: var(--acc); }
.hm-gd__plots svg { width: 26px; height: 26px; }
.hm-gd__plots em { font: var(--label); font-style: normal; letter-spacing: 0.13em; text-transform: uppercase; }
.hm-row { min-width: 0; max-width: 100%; }
.hm-rail { display: flex; width: 100%; max-width: 100%; gap: clamp(12px, 1.25vw, 20px); margin: 0; padding: 6px 0 10px; overflow-x: auto; overscroll-behavior-x: contain; list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: 0; scrollbar-width: none; }
.hm-rail::-webkit-scrollbar { display: none; }
.hm-rail > li { flex: none; width: clamp(132px, 12.3vw, 190px); scroll-snap-align: start; }
.hm-p { position: relative; display: flex; flex-direction: column; gap: 10px; }
.hm-p__art { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px; background: var(--surface2); box-shadow: 0 0 0 1px var(--line), 0 18px 34px -22px rgba(0, 0, 0, 0.95); transition: transform 0.28s var(--ease), box-shadow 0.28s; }
.hm-p__art img { width: 100%; height: 100%; object-fit: cover; }
.hm-p__art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.05); pointer-events: none; }
.hm-p:hover .hm-p__art, .hm-p:focus-visible .hm-p__art { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.5), 0 26px 40px -22px rgba(0, 0, 0, 1), 0 0 36px -12px rgba(124, 245, 196, 0.4); }
.hm-p:focus-visible { outline: none; }
.hm-p:focus-visible .hm-p__art { outline: 2px solid var(--acc); outline-offset: 2px; }
.hm-p__b { position: absolute; top: 8px; left: 8px; padding: 0 8px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; line-height: 19px; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.7); }
.hm-p__b--fl { background: var(--moon); color: #1b1a08; }
.hm-p__b--du { background: var(--bmoon); color: #06182b; }
.hm-p__b--int { background: var(--lav); color: #160a2e; }
.hm-p__s { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 34px 11px 10px; background: linear-gradient(0deg, rgba(4, 7, 9, 0.94), rgba(4, 7, 9, 0.6) 46%, transparent); font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; opacity: 0; transition: opacity 0.2s; }
.hm-p__s > i { font-style: normal; font-weight: 600; color: var(--hi); }
.hm-p:hover .hm-p__s, .hm-p:focus-visible .hm-p__s { opacity: 1; }
@media (hover: none) {
.hm-p__s { display: none; }
}
.hm-p__c { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hm-p__c b { overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.hm-p__c small { overflow: hidden; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.hm-p:hover .hm-p__c b { color: var(--acc-hi); }
.hm-row--top .hm-rail { --no: clamp(112px, 11vw, 168px); gap: clamp(4px, 0.7vw, 12px); }
.hm-row--top .hm-rail > li { width: calc(clamp(132px, 12.3vw, 190px) + var(--no) * 0.5); }
.hm-row--top .hm-rail > li:nth-child(n+10) { width: calc(clamp(132px, 12.3vw, 190px) + var(--no) * 0.94); }
.hm-p--n { display: grid; grid-template-columns: minmax(0, 1fr) clamp(132px, 12.3vw, 190px); align-items: end; gap: 10px 0; }
.hm-p__no { grid-area: 1 / 1; justify-self: end; margin: 0 -0.07em -0.045em 0; font: 800 var(--no)/0.76 var(--display); letter-spacing: 0; color: transparent; background: linear-gradient(180deg, rgba(196, 232, 222, 0.34), rgba(196, 232, 222, 0.03) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px rgba(196, 232, 222, 0.62); user-select: none; transition: -webkit-text-stroke-color 0.25s; }
.hm-rail > li:nth-child(n+10) .hm-p__no { letter-spacing: -0.1em; margin-right: 0.02em; }
.hm-rail > li:first-child .hm-p__no { -webkit-text-stroke-color: rgba(244, 241, 208, 0.85); background-image: linear-gradient(180deg, rgba(244, 241, 208, 0.4), rgba(244, 241, 208, 0.03) 88%); }
.hm-p--n:hover .hm-p__no { -webkit-text-stroke-color: var(--acc); }
.hm-p--n .hm-p__art { grid-area: 1 / 2; }
.hm-p--n .hm-p__c { grid-area: 2 / 2; }
.hm-log { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 430px); gap: clamp(28px, 3.8vw, 64px); align-items: start; }
.hm-new { min-width: 0; }
.hm-log__side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.hm-talk__l, .hm-news__l { margin: 0; padding: 0; border-top: 1px solid var(--line2); list-style: none; }
.hm-talk__l > li:not(.hm-none) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 13px 2px; border-bottom: 1px solid var(--line); }
.hm-talk__t { grid-column: 1; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.hm-talk__t:hover { color: var(--acc); }
.hm-talk__m { grid-column: 1; overflow: hidden; margin: 0; font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.hm-talk__m a { color: var(--soft); transition: color 0.15s; }
.hm-talk__m a:hover { color: var(--acc); }
.hm-talk__m b { font-weight: 600; }
.hm-talk__n { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.hm-talk__n b { font: 650 19px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--soft); }
.hm-news__l a { display: flex; flex-direction: column; gap: 5px; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.hm-news__l b { font: 650 16px/1.3 var(--display); letter-spacing: -0.02em; color: var(--hi); text-wrap: balance; transition: color 0.15s; }
.hm-news__l a:hover b { color: var(--acc); }
.hm-news__l small { font-size: 12px; color: var(--mut); }
.hm-news .hm-k { color: var(--moon); }
.hm-ton { position: relative; isolation: isolate; padding-top: clamp(34px, 4.4vw, 64px); }
.hm-ton::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.hm-ton__h { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hm-ton__sky { order: 2; }
.hm-ton__sky .moon { width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px); filter: drop-shadow(0 0 26px rgba(244, 241, 208, 0.42)); }
.hm-ton__sky .moon__disc { fill: rgba(244, 241, 208, 0.11); }
.hm-ton .hm-k { color: var(--moon); }
.hm-ton__h h2 { font: 700 clamp(26px, 2.6vw, 38px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--hi); }
.hm-figs { display: grid; grid-template-columns: repeat(7, auto); justify-content: space-between; gap: 30px 0; margin: clamp(26px, 3vw, 42px) 0 0; }
.hm-fig { display: flex; flex-direction: column-reverse; gap: 11px; padding: 0 clamp(14px, 1.7vw, 30px); border-left: 1px solid var(--line2); }
.hm-fig dt { font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.hm-fig dd { margin: 0; font: 650 clamp(30px, 3.3vw, 52px)/1 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--hi); white-space: nowrap; }
.hm-fig--glow dd { color: var(--acc); }
.hm-fig--moon dd { color: var(--moon); }
.hm-here { margin-top: clamp(34px, 4vw, 58px); }
.hm-here h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.hm-here h3 span { font: 400 12.5px/1.2 var(--sans); letter-spacing: 0; color: var(--dim); }
.hm-here__g { display: flex; align-items: flex-start; gap: 8px 18px; margin-top: 12px; }
.hm-here__g h4 { flex: none; width: 120px; margin: 0; padding-top: 11px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--mut); }
.hm-here__u { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.hm-here__u a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 13px; font-weight: 550; color: var(--soft); transition: border-color 0.15s, background-color 0.15s; }
.hm-here__u a:hover { border-color: var(--line3); background: rgba(255, 255, 255, 0.06); }
.hm-here .av { flex: none; width: 26px; height: 26px; font-size: 11px; }
.hm-rv { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s var(--ease); }
.hm-rv.is-in { opacity: 1; transform: none; }
@media (max-width: 1180px) {
.hm-log__side { top: 126px; }
}
@media (max-width: 1100px) {
.spot__slides::before { right: calc(-1 * var(--edge)); }
.hm-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
.hm-fig { padding: 0 0 0 16px; }
}
@media (max-width: 1000px) {
.hm-room { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.hm-room > .irc { height: clamp(440px, 70vh, 600px); height: clamp(440px, 70svh, 600px); }
.hm-act { flex: none; }
.hm-act__l { padding-bottom: 8px; -webkit-mask-image: none; mask-image: none; }
.hm-act__i:nth-child(n+8) { display: none; }
.hm-log { grid-template-columns: minmax(0, 1fr); }
.hm-log__side { position: static; }
}
@media (max-width: 860px) {
.hm-gd { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-right: 0; }
.hm-gd__intro { padding-right: clamp(22px, 2.7vw, 40px); }
.hm-gd__lede { max-width: 56ch; }
.hm-gd > .hm-nav { display: none; }
.spot__slides { width: 100%; }
}
@media (max-width: 640px) {
.hm { gap: 40px; }
.spot { min-height: 0; grid-template-rows: auto auto auto; padding-top: 16px; }
.spot__bgs { bottom: auto; height: min(104vw, 460px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 34%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 34%, transparent 100%); }
.spot__bg { object-position: 62% 20%; }
.spot__bgs::after { background: linear-gradient(180deg, rgba(6, 9, 12, 0.74) 0, rgba(6, 9, 12, 0.18) 30%, rgba(6, 9, 12, 0.12) 46%, rgba(6, 9, 12, 0.7) 100%); }
.spot__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.spot__night { display: contents; }
.spot__moon { grid-area: 1 / 2; }
.spot__moon .moon { width: 36px; height: 36px; }
.spot__modes { grid-area: 2 / 1 / 3 / 3; gap: 3px; }
.spot__mode { justify-content: flex-start; font-size: 12.5px; text-align: left; }
.spot__slides { padding: clamp(70px, 27vw, 130px) 0 26px; }
.spot__s h2 { font-size: clamp(36px, 10.6vw, 46px); }
.spot__s--long h2 { font-size: clamp(30px, 8.4vw, 38px); }
.spot__meta { margin-top: 14px; font-size: 13px; }
.spot__meta > span + span::before, .spot__gs > span + span::before { margin: 0 8px; }
.spot__meta > .spot__gs { order: 9; flex-basis: 100%; }
.spot__meta > .spot__gs::before { display: none; }
.spot__n:nth-child(2) { display: none; }
.spot__ov { font-size: 14.5px; }
.spot__nums { gap: 8px 20px; }
.spot__acts { width: 100%; margin-top: 22px; }
.spot__acts .btn { flex: 1; justify-content: center; }
.spot__ts { grid-auto-columns: 208px; }
.hm-h { margin-bottom: 12px; }
.hm-nav { display: none; }
.hm-rail > li { width: 136px; }
.hm-row--top .hm-rail { --no: 108px; }
.hm-row--top .hm-rail > li { width: calc(136px + var(--no) * 0.5); }
.hm-row--top .hm-rail > li:nth-child(n+10) { width: calc(136px + var(--no) * 0.94); }
.hm-p--n { grid-template-columns: minmax(0, 1fr) 136px; }
.hm-p__c b { font-size: 13px; }
.hm-room > .irc { height: min(68vh, 520px); height: min(68svh, 520px); }
.hm-gd { border-radius: var(--r-lg); }
.hm-gd__n dd { font-size: 30px; }
.hm-rail.hm-gd__bed > li, .hm-gd__plots span { width: 116px; }
.hm-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
.hm-fig dd { font-size: 32px; }
.hm-here__g { flex-direction: column; gap: 6px; }
.hm-here__g h4 { width: auto; padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.spot__bg { transform: none; transition: opacity 0.3s; }
.spot__s, .spot__s.is-on { transform: none; transition: none; }
.spot__t.is-on .spot__bar::after { animation: none; }
.hm-rv { opacity: 1; transform: none; transition: none; }
.hm-p__art, .hm-pl__art, .hm-ev, .hm-more svg { transition: none; }
}
.br { min-width: 0; }
.br-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.br-h small { font: 500 12.5px var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--dim); }
.br-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 272px; margin: -26px 0 0; padding: 48px 0 32px; }
.br-hero::before { content: ""; position: absolute; z-index: -3; top: -64px; right: 4%; width: min(60%, 760px); height: 420px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--amb) 26%, transparent), transparent), radial-gradient(closest-side, rgba(244, 241, 208, 0.06), transparent); pointer-events: none; }
.br-hero:has(.br-arc > img:nth-child(3)) .mb-deco { display: none; }
.br-hero__t { position: relative; min-width: 0; max-width: 640px; }
.br-hero__k { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.br-hero__k::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.br-hero__k a { color: inherit; }
.br-hero__k a:hover { color: var(--hi); }
.br-hero h1 { font: 700 clamp(40px, 4.5vw, 64px)/1 var(--display); letter-spacing: -0.05em; color: var(--hi); overflow-wrap: anywhere; }
.br-hero__lede { margin: 16px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.br-hero__lede b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--hi); }
.br-hero__lede > span { color: var(--mut); }
.br-hero__lede > span::before { content: "·"; margin: 0 0.5em; color: var(--dim); }
.br-hero__lede a b { color: inherit; }
.br-hero__k span::before { content: "·"; margin-right: 10px; opacity: 0.7; }
.br-hero__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.br-hero__a form { display: inline-flex; }
.br-q { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 2px; padding: 2px 8px 2px 12px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-weight: 600; color: var(--hi); vertical-align: -3px; transition: border-color 0.15s, background-color 0.15s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-q i { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-style: normal; font-size: 13px; line-height: 1; color: var(--mut); transition: background-color 0.15s, color 0.15s; }
.br-q:hover { border-color: rgba(124, 245, 196, 0.45); }
.br-q:hover i { background: var(--acc); color: var(--on-acc); }
.br-modes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.br-mode { --m: var(--acc); display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 13px 3px 10px; border: 1px solid color-mix(in srgb, var(--m) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--m) 7%, rgba(6, 9, 12, 0.5)); font-size: 12.5px; color: var(--soft); }
.br-mode--fl { --m: var(--moon); }
.br-mode--du { --m: var(--bmoon); }
.br-mode i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--m); box-shadow: 0 0 8px var(--m); }
.br-mode b { font-weight: 650; color: var(--m); }
.br-arc { --R: 1120px; --step: 6.6deg; --w: 136px; position: absolute; z-index: -1; top: 0; right: -1.5%; bottom: -20px; width: min(66%, 930px); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 30%, #000 84%, transparent), linear-gradient(180deg, #000 54%, transparent 97%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 5%, #000 30%, #000 84%, transparent), linear-gradient(180deg, #000 54%, transparent 97%); mask-composite: intersect; }
.br-arc img { --a: calc((var(--d) + var(--off, 0)) * var(--step)); position: absolute; z-index: calc(10 - var(--k)); top: 30px; left: 53%; width: var(--w); height: calc(var(--w) * 1.5); margin-left: calc(var(--w) / -2); border-radius: 13px; background: var(--surface2); object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 46px -14px rgba(0, 0, 0, 0.9); filter: brightness(calc(1 - var(--k) * 0.09)) saturate(calc(1 - var(--k) * 0.05)); transform-origin: 50% var(--R); transform: rotate(var(--a)); animation: br-rise 0.5s var(--ease) backwards; animation-delay: calc(var(--k) * 25ms); }
.br-arc img:nth-child(1) { --d: 0; --k: 0; }
.br-arc img:nth-child(2) { --d: 1; --k: 1; }
.br-arc img:nth-child(3) { --d: -1; --k: 1; }
.br-arc img:nth-child(4) { --d: 2; --k: 2; }
.br-arc img:nth-child(5) { --d: -2; --k: 2; }
.br-arc img:nth-child(6) { --d: 3; --k: 3; }
.br-arc img:nth-child(7) { --d: -3; --k: 3; }
.br-arc img:nth-child(8) { --d: 4; --k: 4; }
.br-arc img:nth-child(9) { --d: -4; --k: 4; }
.br-arc img:nth-child(n+8) { display: none; }
.br-arc:has(> img:last-child:nth-child(even)) { --off: -0.5; }
.br-arc:has(> img:nth-child(8)) { --off: 0; }
@media (min-width: 1561px) {
.br-arc { width: min(70%, 1180px); }
.br-arc img:nth-child(n+8) { display: block; }
.br-arc:has(> img:nth-child(8):last-child) { --off: -0.5; }
}
@keyframes br-rise { from { opacity: 0; transform: rotate(calc(var(--a) * 0.5)) translateY(28px); } }
.br-cats { display: flex; gap: 2px; margin: 0 0 14px; overflow-x: auto; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)) bottom / 100% 1px no-repeat; scrollbar-width: none; }
.br-cats::-webkit-scrollbar { display: none; }
.br-cat { position: relative; display: inline-flex; flex: none; align-items: center; gap: 9px; height: 46px; padding: 0 15px 1px; border-radius: 12px 12px 0 0; font-size: 14px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s, background-color 0.15s; }
.br-cat svg { width: 16px; height: 16px; color: var(--dim); transition: color 0.15s; }
.br-cat small { padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.055); font: 550 11px/18px var(--sans); font-variant-numeric: tabular-nums; color: var(--mut); transition: color 0.15s, background-color 0.15s; }
.br-cat:hover { background: rgba(255, 255, 255, 0.035); color: var(--text); }
.br-cat:hover svg { color: var(--soft); }
.br-cat:active { transform: scale(0.98); }
.br-cat.is-on { color: var(--hi); }
.br-cat.is-on svg { color: var(--acc); }
.br-cat.is-on small { background: var(--acc-soft); color: var(--acc); }
.br-cat.is-on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 2px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.br-bar { position: relative; z-index: 6; margin: 0 0 4px; border-radius: 18px; }
.br-bar::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 1px solid var(--line); border-radius: inherit; background: linear-gradient(180deg, rgba(14, 22, 27, 0.8), rgba(8, 13, 17, 0.8)); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--e2); }
.br-bar__in { display: flex; align-items: center; gap: 8px 14px; padding: 8px 9px; }
.br-bar__f { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.br-bar__s { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; }
.br-bar__l { margin: 0 2px 0 6px; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.br-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; font-weight: 550; color: var(--soft); white-space: nowrap; cursor: pointer; user-select: none; list-style: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.br-chip::-webkit-details-marker { display: none; }
.br-chip:hover { background: rgba(255, 255, 255, 0.09); color: var(--hi); }
.br-chip:active { transform: scale(0.97); }
.br-chip svg { width: 12px; height: 12px; margin-right: -3px; color: var(--mut); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.br-drop[open] > .br-chip { background: rgba(255, 255, 255, 0.1); color: var(--hi); }
.br-drop[open] > .br-chip svg { transform: rotate(-90deg); }
.br-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--mut)); opacity: 0.85; }
.br-chip--f0 { --c: var(--moon); }
.br-chip--f1 { --c: var(--bmoon); }
.br-chip--f2 { --c: var(--acc); }
.br-chip.is-on { border-color: color-mix(in srgb, var(--c, var(--acc)) 45%, transparent); background: color-mix(in srgb, var(--c, var(--acc)) 12%, transparent); color: var(--c, var(--hi)); }
.br-chip.is-on i { opacity: 1; box-shadow: 0 0 8px var(--c); }
summary.br-chip.is-on { color: var(--hi); }
summary.br-chip.is-on svg { color: var(--acc); }
.br-clear { margin-left: 6px; font-size: 12.5px; font-weight: 550; color: var(--mut); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; white-space: nowrap; transition: color 0.15s; }
.br-clear:hover { color: var(--hi); }
.br-drop { position: relative; }
.br-menu { position: absolute; z-index: 30; top: 40px; left: 0; display: flex; flex-direction: column; gap: 1px; min-width: 204px; max-height: min(62vh, 400px); overflow: auto; padding: 6px; border: 1px solid var(--line2); border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); scrollbar-width: thin; animation: v3-pop 0.16s var(--ease); }
.br-menu a { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; color: var(--soft); white-space: nowrap; transition: background-color 0.12s, color 0.12s; }
.br-menu a:hover { background: rgba(255, 255, 255, 0.065); color: var(--hi); }
.br-menu a.is-on { font-weight: 600; color: var(--hi); }
.br-menu a.is-on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.br-view a { padding: 0 9px; }
.br-view svg { width: 15px; height: 15px; }
@media (min-width: 1181px) {
.br-bar { position: sticky; top: 64px; }
}
.llist { margin-top: 2px; }
.lr, .lhead { --lr-cols: 54px minmax(0, 1fr) 92px 84px 76px 76px 76px 38px; container-type: inline-size; padding: 0 12px; }
.lr__g, .lhead__g { display: grid; grid-template-columns: var(--lr-cols); column-gap: 16px; align-items: center; }
.lhead__g { height: 36px; border-top: 1px solid var(--line); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.lhead__g > :first-child { grid-column: 1 / 3; }
.lhead__g a { display: inline-flex; justify-self: end; align-items: center; gap: 4px; white-space: nowrap; transition: color 0.15s; }
.lhead__g a:hover { color: var(--hi); }
.lhead__g a.is-on { color: var(--acc); }
.lhead__g a i { font-style: normal; font-size: 12px; letter-spacing: 0; }
.lr { position: relative; isolation: isolate; overflow: hidden; padding-top: 9px; padding-bottom: 9px; border-radius: 16px; content-visibility: auto; contain-intrinsic-size: auto 99px; transition: background-color 0.2s; }
.lr::after { content: ""; position: absolute; left: 82px; right: 12px; bottom: 0; height: 1px; background: var(--line); transition: opacity 0.2s; }
.lr:hover { background: rgba(255, 255, 255, 0.038); }
.lr:hover::after, .lr:has(+ .lr:hover)::after, .lr:has(+ .lday)::after, .lr:last-child::after { opacity: 0; }
.lr--pin { background: linear-gradient(90deg, rgba(244, 241, 208, 0.05), transparent 46%); }
.lr__bd { position: absolute; z-index: -1; inset: 0 0 0 36%; background: center 26% / cover no-repeat; opacity: 0; transition: opacity 0.5s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%); mask-image: linear-gradient(90deg, transparent, #000 62%); }
.lr.is-seen .lr__bd { background-image: var(--bd); }
.lr:hover .lr__bd { opacity: 0.24; }
.lr__p { display: block; width: 54px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 9px; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 18px -8px rgba(0, 0, 0, 0.8); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.lr__p img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lr:hover .lr__p { transform: scale(1.045); box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.45), 0 12px 24px -8px rgba(0, 0, 0, 0.85); }
.lr--dead .lr__p img { filter: grayscale(0.7) brightness(0.75); }
.lr__ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 38%, rgba(124, 245, 196, 0.16), transparent 70%), linear-gradient(160deg, #16262b, #0d171b); color: var(--acc); }
.lr__ph svg { width: 40%; height: 40%; opacity: 0.85; }
.lr__m { min-width: 0; }
.lr__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
.lr__t { font: 600 16px/1.3 var(--display); letter-spacing: -0.022em; color: var(--hi); overflow-wrap: anywhere; transition: color 0.15s; }
.lr__t:hover { color: var(--acc-hi); }
.lr__year { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mut); }
.lr__ep { align-self: center; padding: 0 7px; border-radius: 6px; background: var(--acc-soft); font: 600 11px/18px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--acc); }
.lr__star { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--moon); }
.lr__star svg, .lc__star svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.lr__rel { display: block; overflow: hidden; margin-top: 2px; font: 11.5px/1.55 var(--mono); color: var(--dim); text-overflow: ellipsis; white-space: nowrap; transition: color 0.2s; }
.lr:hover .lr__rel { color: var(--mut); }
.lr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 4px; font-size: 12px; color: var(--mut); }
.lr__cat { display: inline-flex; align-items: center; gap: 6px; color: var(--soft); }
.lr__cat svg { width: 13px; height: 13px; color: var(--mut); }
.lr .lr__by::before, .lr .lr__age::before { content: "·"; margin: 0 7px; color: var(--dim); }
.mt { display: inline-flex; align-self: center; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border: 1px solid; border-radius: 999px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; }
.mt i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.mt--fl { border-color: rgba(244, 241, 208, 0.34); background: rgba(244, 241, 208, 0.08); color: var(--moon); }
.mt--du { border-color: rgba(143, 203, 255, 0.38); background: rgba(143, 203, 255, 0.09); color: var(--bmoon); }
.mt--int { border-color: rgba(124, 245, 196, 0.32); background: var(--acc-soft); color: var(--acc); }
.mt--feat { border-color: rgba(195, 166, 255, 0.36); background: rgba(195, 166, 255, 0.09); color: var(--lav); }
.mt--pin { border-color: var(--line2); background: rgba(255, 255, 255, 0.04); color: var(--soft); }
.lr__n { display: contents; }
.lr__q { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.15; }
.lr__q b { font: 650 13px var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--hi); }
.lr__q b.is-uhd { color: var(--moon); text-shadow: 0 0 14px rgba(244, 241, 208, 0.35); }
.lr__q i { overflow: hidden; font-style: normal; font-size: 11.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.lr__size, .lr__seed, .lr__leech, .lr__snat { justify-self: end; font: 500 13.5px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lr__size { color: var(--text); }
.lr__seed { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--acc); }
.lr__seed i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lr--ok .lr__seed i { box-shadow: 0 0 8px rgba(124, 245, 196, 0.55); }
.lr--lush .lr__seed i { box-shadow: 0 0 0 3px rgba(124, 245, 196, 0.14), 0 0 11px rgba(124, 245, 196, 0.85); }
.lr--low .lr__seed { color: var(--amber); }
.lr--dead .lr__seed { color: var(--red); }
.lr--dead .lr__seed i { border: 1.5px solid currentColor; background: none; }
.lr__leech { color: var(--lav); }
.lr__leech.is-zero { color: var(--dim); }
.lr__snat { color: var(--mut); }
.lr__dl { display: grid; justify-self: end; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 50%; background: rgba(255, 255, 255, 0.035); color: var(--soft); transition: background-color 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.2s, transform 0.12s; }
.lr__dl svg { width: 16px; height: 16px; }
.lr:hover .lr__dl { border-color: rgba(124, 245, 196, 0.45); background: rgba(124, 245, 196, 0.08); color: var(--acc); }
.lr .lr__dl:hover, .lr__dl:hover { border-color: transparent; background: var(--acc); box-shadow: var(--glow); color: var(--on-acc); }
.lr__dl:active { transform: scale(0.94); }
@container (max-width: 979px) {
.lr__g, .lhead__g { grid-template-columns: 54px minmax(0, 1fr) 88px 80px 72px 68px 38px; column-gap: 14px; }
.lr__snat, .lhead__g .lhead__sn { display: none; }
}
@container (max-width: 819px) {
.lr__g, .lhead__g { grid-template-columns: 54px minmax(0, 1fr) 84px 78px 66px 38px; }
.lr__leech, .lhead__g .lhead__lc { display: none; }
}
@container (max-width: 679px) {
.lhead__g { display: none; }
.lr__g { grid-template-columns: 58px minmax(0, 1fr) 38px; column-gap: 12px; row-gap: 7px; align-items: start; }
.lr__p { grid-row: 1 / span 2; width: 58px; }
.lr__m { grid-column: 2; grid-row: 1; }
.lr__dl { grid-column: 3; grid-row: 1; }
.lr__n { display: flex; flex-wrap: wrap; grid-column: 2 / 4; grid-row: 2; align-items: center; gap: 4px 12px; }
.lr__q { flex-direction: row; align-items: baseline; gap: 5px; }
.lr__q:empty { display: none; }
.lr__q b { font-size: 12.5px; }
.lr__q i { font-size: 12px; }
.lr__size, .lr__seed, .lr__leech { font-size: 12.5px; }
.lr__leech { display: inline; }
.lr__leech::before { content: "↓ "; }
.lr .lr__by { display: none; }
}
.lday { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 4px; padding: 0 12px; font-weight: 400; }
.lday:first-child { margin-top: 14px; }
.lday b { font: 650 14px var(--display); letter-spacing: -0.015em; color: var(--hi); }
.lday span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.lday::after { content: ""; flex: 1; align-self: center; height: 1px; background: linear-gradient(90deg, var(--line2), transparent); }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 28px 18px; margin-top: 18px; }
.lc { display: flex; flex-direction: column; min-width: 0; }
.lc__p { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 30px -20px rgba(0, 0, 0, 0.95); transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.lc__p img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.lc:hover .lc__p, .lc:focus-visible .lc__p { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.5), 0 28px 44px -22px rgba(0, 0, 0, 1), 0 0 36px -10px rgba(124, 245, 196, 0.3); }
.lc:hover .lc__p img { transform: scale(1.05); }
.lc:focus-visible { outline: 0; }
.lc--dead .lc__p img { filter: grayscale(0.7) brightness(0.75); }
.lc__tags { position: absolute; top: 8px; left: 8px; right: 54px; display: flex; flex-wrap: wrap; gap: 4px; }
.lc__tags .mt, .lc__star { background-color: rgba(6, 10, 12, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lc__star { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--moon); }
.lc__ov { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 7px; padding: 44px 11px 11px; background: linear-gradient(0deg, rgba(4, 8, 10, 0.97), rgba(4, 8, 10, 0.8) 58%, transparent); opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.3s var(--ease); }
.lc:hover .lc__ov, .lc:focus-visible .lc__ov { opacity: 1; transform: none; }
.lc__ov code { display: -webkit-box; overflow: hidden; font: 10.5px/1.45 var(--mono); color: var(--soft); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.lc__nums { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc__nums b { margin-right: auto; font-weight: 650; color: var(--hi); }
.lc__nums em { font-style: normal; color: var(--mut); }
.lc__nums em.lc__le { color: var(--lav); }
.lc__t { overflow: hidden; margin-top: 11px; font: 600 14px/1.3 var(--display); letter-spacing: -0.015em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.lc:hover .lc__t { color: var(--acc-hi); }
.lc__s { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.lc__s span { flex: 1; overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.lc__seed { display: inline-flex; flex: none; align-items: center; gap: 5px; font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--acc); }
.lc__seed i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.lc--low .lc__seed { color: var(--amber); }
.lc--dead .lc__seed { color: var(--red); }
.lc--low .lc__seed i, .lc--dead .lc__seed i { box-shadow: none; }
.lpg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 38px 0 4px; }
.lpg__a { display: inline-flex; align-items: center; height: 38px; padding: 0 17px; border: 1px solid var(--line2); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); font-size: 13px; font-weight: 550; color: var(--hi); white-space: nowrap; transition: border-color 0.15s, background 0.15s, transform 0.12s; }
a.lpg__a:hover { border-color: var(--line3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)); }
a.lpg__a:active { transform: scale(0.97); }
.lpg__a.is-off { border-color: var(--line); background: none; box-shadow: none; opacity: 1; color: var(--dim); }
.lpg__n { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.lpg__n a, .lpg__n b, .lpg__n i { display: grid; place-items: center; min-width: 32px; height: 30px; padding: 0 9px; border-radius: 999px; font: 550 13px var(--sans); font-style: normal; font-variant-numeric: tabular-nums; color: var(--mut); transition: background-color 0.15s, color 0.15s; }
.lpg__n a:hover { background: rgba(255, 255, 255, 0.07); color: var(--hi); }
.lpg__n b { background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 16px -8px rgba(124, 245, 196, 0.7); font-weight: 700; color: var(--on-acc); }
.lpg__of { flex-basis: 100%; margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; color: var(--dim); }
.br-none { position: relative; display: flex; flex-direction: column; align-items: center; margin: 26px 0 0; padding: 54px 24px 44px; border: 1px dashed var(--line2); border-radius: var(--r-xl); background: var(--card); text-align: center; }
.br-none__moon { display: block; width: 54px; height: 54px; margin-bottom: 20px; filter: drop-shadow(0 0 18px rgba(244, 241, 208, 0.35)); }
.br-none__moon .moon { width: 100%; height: 100%; }
.br-none h2 { max-width: 30ch; font: 650 24px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); overflow-wrap: anywhere; }
.br-none > p { margin: 10px 0 0; max-width: 56ch; color: var(--soft); text-wrap: pretty; }
.br-none > p.br-none__a { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.br-none__tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; width: 100%; max-width: 760px; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; text-align: left; font-size: 13px; line-height: 1.55; color: var(--mut); }
.br-none__tips b { display: block; margin-bottom: 3px; font-size: 13.5px; font-weight: 600; color: var(--hi); }
.br-none__tips code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); font: 12px var(--mono); color: var(--text); }
@media (max-width: 1180px) {
.br-arc { --w: 120px; --step: 6.6deg; --R: 990px; width: 64%; }
.br-bar__l { display: none; }
.br-bar .seg a { padding: 0 10px; }
}
@media (max-width: 1040px) {
.br-bar__in { flex-wrap: wrap; }
.br-bar__f { flex: 1 1 100%; }
.br-bar__s { flex: 1 1 100%; justify-content: space-between; margin-left: 0; }
}
@media (max-width: 900px) {
.br-arc { right: -6%; width: 78%; opacity: 0.55; }
}
@media (max-width: 640px) {
.br-hero { display: block; min-height: 0; padding: 180px 0 20px; }
.br-hero:not(:has(.br-arc)) { padding-top: 40px; }
.br-hero::before { top: -50px; right: 8%; width: 84%; height: 300px; }
.br-hero h1 { font-size: 40px; }
.br-hero__lede { margin-top: 12px; font-size: 14.5px; }
.br-modes { margin-top: 14px; gap: 6px; }
.br-arc { --w: 92px; --R: 720px; --step: 7.6deg; top: 0; right: calc(var(--pad) * -1); bottom: auto; left: calc(var(--pad) * -1); width: auto; height: 172px; opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 42%, transparent 96%); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, #000 42%, transparent 96%); }
.br-arc img { top: 16px; left: 50%; }
.br-arc img:nth-child(n+6) { display: none; }
.br-arc:has(> img:nth-child(6)) { --off: 0; }
.br-cats { margin: 0 calc(var(--pad) * -1) 12px; padding: 0 var(--pad); }
.br-cat { height: 42px; padding: 0 12px 1px; font-size: 13.5px; }
.br-bar { position: sticky; top: 6px; margin: 0 -6px 4px; border-radius: 16px; }
.br-bar::after { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 26px; border-radius: 0 15px 15px 0; background: linear-gradient(90deg, transparent, rgba(9, 14, 18, 0.95)); pointer-events: none; }
.br-bar__in { flex-wrap: nowrap; gap: 8px; padding: 7px 22px 7px 7px; overflow-x: auto; scrollbar-width: none; }
.br-bar__in::-webkit-scrollbar { display: none; }
.br-bar__f { flex: none; flex-wrap: nowrap; }
.br-bar__s { display: contents; }
.br-bar__l { display: none; }
.br-bar .seg { flex: none; }
.br-drop { position: static; }
.br-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; max-height: 62vh; border-radius: 20px; animation: none; }
.br-menu a { height: 44px; font-size: 14.5px; }
.lr, .lhead { padding-right: 6px; padding-left: 6px; }
.lr { contain-intrinsic-size: auto 118px; }
.lr::after { left: 76px; right: 6px; }
.lday { padding: 0 6px; }
.lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
.lc__ov { display: none; }
.lpg { gap: 8px; margin-top: 30px; }
.lpg__a { height: 36px; padding: 0 13px; }
.lpg__n { order: 3; }
.lpg__of { order: 4; margin-top: 4px; }
.lpg__n a, .lpg__n b, .lpg__n i { min-width: 30px; padding: 0 7px; }
.br-none { padding: 40px 18px 30px; }
.br-none h2 { font-size: 21px; }
.br-none__tips { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.br-arc img { animation: none; }
.lr__p, .lc__p, .lc__p img, .lc__ov { transition: none; }
}
.br .ph__kicker a { color: inherit; transition: color 0.15s; }
.br .ph__kicker a:hover { color: var(--hi); }
.br .tabs a small { margin-left: 7px; font: 550 11px var(--sans); font-variant-numeric: tabular-nums; color: var(--dim); }
.br .tabs a.is-on small { color: var(--acc); }
.br-sec { margin: 0 0 38px; }
.lpg__a--at { border-color: transparent; background: none; box-shadow: none; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mut); }
.br-meter { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.09); }
.br-meter i { display: block; width: calc(100% * var(--v) / var(--max)); min-width: 5px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56dcc9, var(--acc)); box-shadow: 0 0 10px rgba(124, 245, 196, 0.5); }
.br-top { display: flex; gap: 16px; margin: 0 0 36px; padding: 0; list-style: none; }
.br-top__i { flex: 1 1 0; min-width: 0; }
.br-top__i:first-child { flex-grow: 1.4; }
.br-top__a { position: relative; isolation: isolate; display: flex; align-items: flex-end; gap: 18px; height: 100%; min-height: 268px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e2); transition: border-color 0.2s, transform 0.3s var(--ease), box-shadow 0.3s; }
.br-top__a::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(6, 9, 12, 0.9), rgba(6, 9, 12, 0.55) 48%, rgba(6, 9, 12, 0.15)), linear-gradient(0deg, rgba(6, 9, 12, 0.95), transparent 64%); }
.br-top__bd { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; opacity: 0.62; transition: transform 0.8s var(--ease), opacity 0.3s; }
.br-top__a:hover, .br-top__a:focus-visible { border-color: rgba(124, 245, 196, 0.42); box-shadow: var(--e3); transform: translateY(-3px); }
.br-top__a:hover .br-top__bd { opacity: 0.78; transform: scale(1.04); }
.br-top__n { position: absolute; top: 8px; right: 22px; font: 700 108px/1 var(--display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 241, 208, 0.55); }
.br-top__i:first-child .br-top__n { color: var(--moon); -webkit-text-stroke: 0; text-shadow: 0 0 44px rgba(244, 241, 208, 0.4); }
.br-top__p { display: block; flex: none; width: 112px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 34px -14px rgba(0, 0, 0, 0.9); }
.br-top__p img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-top__m { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.br-top__f { display: flex; flex-wrap: wrap; gap: 5px; }
.br-top__f:empty { display: none; }
.br-top__f .mt { background-color: rgba(6, 10, 12, 0.6); }
.br-top__t { display: -webkit-box; overflow: hidden; font: 650 20px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.br-top__i:first-child .br-top__t { font-size: 27px; letter-spacing: -0.035em; }
.br-top__s { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--soft); }
.br-top__f .lr__star { margin-right: 4px; font-style: normal; }
.br-top__v { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--soft); }
.br-top__v b { margin-right: 5px; font: 700 22px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--acc); }
.br-trend__h { margin-top: 2px; }
.br-chart { margin: 0; padding: 0; list-style: none; }
.br-rank { display: grid; grid-template-columns: 46px minmax(0, 1fr) 132px; align-items: center; }
.br-rank__n { justify-self: center; font: 650 17px var(--display); font-variant-numeric: tabular-nums; color: var(--dim); }
.br-rank__v { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 5px 6px; padding: 0 12px 0 14px; }
.br-rank__v b { font: 700 16px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--acc); }
.br-rank__v small { font-size: 11px; color: var(--dim); white-space: nowrap; }
.br-rank__v .br-meter { grid-column: 1 / -1; }
.br-shelf { margin: 0 0 36px; }
.br-shelf__h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.br-shelf__h h2 { font: 650 20px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.br-shelf__h h2 a { transition: color 0.15s; }
.br-shelf__h h2 a:hover { color: var(--acc-hi); }
.br-shelf__c { align-self: center; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font: 550 11.5px/20px var(--sans); font-variant-numeric: tabular-nums; color: var(--soft); }
.br-shelf__d { overflow: hidden; font-size: 13px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.br-shelf__all { display: inline-flex; flex: none; align-items: center; gap: 3px; margin-left: auto; font-size: 12.5px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s; }
.br-shelf__all svg { width: 12px; height: 12px; }
.br-shelf__all:hover { color: var(--acc); }
.br-shelf__none { margin: 0; font-size: 13px; color: var(--mut); }
.br-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 24px 16px; }
.br-tiles--row { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; margin: -8px -6px 0; padding: 8px 6px 0; }
.br-tile, .br-title { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.br-tile__img, .br-title__p { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px; outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; background: var(--surface2); box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.95); transition: transform 0.3s var(--ease), box-shadow 0.3s, outline-color 0.2s; }
.br-tile__img img, .br-title__p img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.3s, filter 0.3s; }
.br-tile:hover .br-tile__img, .br-tile:focus-visible .br-tile__img, .br-title:hover .br-title__p, .br-title:focus-visible .br-title__p { outline-color: rgba(124, 245, 196, 0.55); box-shadow: 0 22px 36px -20px rgba(0, 0, 0, 1), 0 0 30px -10px rgba(124, 245, 196, 0.28); transform: translateY(-3px); }
.br-tile:hover img, .br-title:hover img { transform: scale(1.05); }
.br-tile:focus-visible, .br-title:focus-visible { outline: 0; }
.br-tile b, .br-title b { overflow: hidden; margin-top: 10px; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.br-tile:hover b, .br-title:hover b { color: var(--acc-hi); }
.br-tile small, .br-title small { overflow: hidden; min-height: 18px; font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.br-tile__no { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 36%, rgba(124, 245, 196, 0.14), transparent 70%), linear-gradient(160deg, #16262b, #0d171b); font: 650 36px var(--display); color: var(--acc); }
.br-tile__no svg { width: 34%; height: 34%; opacity: 0.85; }
.br-tiles--companies, .br-tiles--networks { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); }
.br-tile--logo .br-tile__img { display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 0 14%; border-radius: 16px; outline-color: var(--line); background: var(--card-hi); box-shadow: var(--e1); }
.br-tile--logo .br-tile__img img { position: absolute; top: 24%; left: 16%; width: 68%; height: 52%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.82; }
.br-tile--logo:hover .br-tile__img img { opacity: 1; transform: none; }
.br-tile__word { display: -webkit-box; overflow: hidden; font: 650 13.5px/1.25 var(--display); letter-spacing: -0.01em; text-align: center; color: var(--soft); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.br-tiles--genres { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 14px; }
.br-genre { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 16 / 8; overflow: hidden; padding: 13px 16px; border-radius: 16px; background: linear-gradient(160deg, #16262b, #0d171b); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 14px 26px -18px rgba(0, 0, 0, 0.95); transition: box-shadow 0.3s, transform 0.3s var(--ease); }
.br-genre img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0.72; transition: transform 0.7s var(--ease), opacity 0.3s; }
.br-genre::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(4, 8, 10, 0.94), rgba(4, 8, 10, 0.3) 62%, rgba(4, 8, 10, 0.12)); }
.br-genre b { font: 650 17px/1.15 var(--display); letter-spacing: -0.025em; color: var(--hi); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
.br-genre:hover, .br-genre:focus-visible { box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.5), 0 22px 36px -20px rgba(0, 0, 0, 1), 0 0 30px -10px rgba(124, 245, 196, 0.28); transform: translateY(-3px); }
.br-genre:hover img { opacity: 0.95; transform: scale(1.05); }
.br-find { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 24px; }
.br-find__q { display: flex; flex: 0 1 400px; align-items: center; gap: 10px; min-width: 0; height: 42px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--mut); transition: border-color 0.15s, box-shadow 0.15s, color 0.15s; }
.br-find__q:hover { border-color: var(--line3); }
.br-find__q:focus-within { border-color: rgba(124, 245, 196, 0.7); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.13), inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--acc); }
.br-find__q svg { flex: none; width: 15px; height: 15px; }
.br-find__q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; }
.br-find__q input::placeholder { color: var(--dim); }
.br-find__q input::-webkit-search-cancel-button { display: none; }
.br-find .select { width: auto; min-width: 250px; border-radius: 999px; padding-left: 18px; }
.br-find .btn { height: 42px; padding: 0 20px; }
.br-find .br-clear { margin-left: 4px; }
.br-find__n { margin-left: auto; font-size: 13px; color: var(--mut); }
.br-find__n b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--hi); }
.br-who { display: flex; align-items: flex-end; gap: 30px; margin: 6px 0 34px; padding: 0 0 30px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)) bottom / 100% 1px no-repeat; }
.br-who__img { display: block; flex: none; width: 180px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 18px; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -26px rgba(0, 0, 0, 1), 0 0 70px -22px color-mix(in oklab, var(--amb) 70%, transparent); animation: br-settle 0.5s var(--ease) backwards; }
.br-who__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.br-who--companies .br-who__img, .br-who--networks .br-who__img { position: relative; width: 230px; aspect-ratio: 16 / 10; background: var(--card-hi); box-shadow: 0 0 0 1px var(--line2), var(--e2); }
.br-who--companies .br-who__img img, .br-who--networks .br-who__img img { position: absolute; top: 24%; left: 16%; width: 68%; height: 52%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; }
.br-who__t { min-width: 0; }
.br-who--genres { position: relative; isolation: isolate; min-height: 250px; margin-top: -4px; }
.br-who__bd { position: absolute; z-index: -1; top: -64px; right: 0; width: min(68%, 900px); height: calc(100% + 64px); object-fit: cover; object-position: 50% 22%; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%, #000 86%, transparent), linear-gradient(180deg, #000 52%, transparent 98%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 46%, #000 86%, transparent), linear-gradient(180deg, #000 52%, transparent 98%); mask-composite: intersect; animation: br-fade 0.6s ease backwards; }
@keyframes br-fade { from { opacity: 0; } }
.br-who h1 { font: 700 clamp(32px, 3.7vw, 54px)/1.03 var(--display); letter-spacing: -0.046em; color: var(--hi); overflow-wrap: anywhere; }
.br-who__n { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 16px 0 0; font-size: 14px; color: var(--mut); }
.br-who__n b { margin-right: 6px; font: 650 19px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hi); }
.br-who__n b.is-here { color: var(--acc); }
.br-who__bio { display: -webkit-box; overflow: hidden; max-width: 80ch; margin: 16px 0 0; line-height: 1.62; color: var(--soft); text-wrap: pretty; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
@keyframes br-settle { from { opacity: 0; transform: translateY(14px); } }
.br-tiles--titles { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.br-title__n { position: absolute; left: 8px; bottom: 8px; padding: 0 9px; border: 1px solid rgba(124, 245, 196, 0.32); border-radius: 999px; background: rgba(6, 10, 12, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 650 11px/20px var(--sans); font-variant-numeric: tabular-nums; color: var(--acc); }
.br-tiles--away .br-title__p img { opacity: 0.5; filter: saturate(0.55); }
.br-tiles--away .br-title:hover .br-title__p img { opacity: 0.95; filter: none; }
.br-tiles--away .br-title b { color: var(--soft); }
.br-subl { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.br-subl ul { margin: 0; padding: 0; list-style: none; }
.br-subh, .br-sub { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, 140px) 84px 96px 84px 36px; column-gap: 18px; align-items: center; padding: 0 18px; }
.br-subh { height: 42px; border-bottom: 1px solid var(--line); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.br-subh span:nth-child(4), .br-subh span:nth-child(5) { text-align: right; }
.br-sub { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--line); transition: background-color 0.15s; }
.br-sub:last-child { border-bottom: 0; }
.br-sub:hover { background: rgba(124, 245, 196, 0.035); }
.br-sub__lang { justify-self: start; overflow: hidden; max-width: 100%; padding: 0 10px; border: 1px solid rgba(195, 166, 255, 0.3); border-radius: 999px; background: rgba(195, 166, 255, 0.09); font: 600 11.5px/22px var(--sans); color: var(--lav); text-overflow: ellipsis; white-space: nowrap; }
.br-sub__m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.br-sub__f { display: flex; align-items: center; gap: 8px; min-width: 0; }
.br-sub__f code { overflow: hidden; font: 12.5px/1.4 var(--mono); color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.br-sub__f i { flex: none; padding: 0 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); font: 600 10.5px/17px var(--mono); font-style: normal; color: var(--mut); }
.br-sub__t { overflow: hidden; font-size: 12.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.br-sub__t:hover { color: var(--acc); }
.br-sub__by { overflow: hidden; font-size: 13px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.br-sub__by a { font-weight: 550; color: var(--soft); transition: color 0.15s; }
.br-sub__by a:hover { color: var(--acc); }
.br-sub__n { justify-self: end; font: 500 13px var(--sans); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.br-sub__n small { display: none; }
.br-sub__age { font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.br-sub:hover .lr__dl { border-color: rgba(124, 245, 196, 0.45); background: rgba(124, 245, 196, 0.08); color: var(--acc); }
.br-plg { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 32px 22px; }
.br-pl { display: flex; flex-direction: column; min-width: 0; }
.br-pl__art { position: relative; isolation: isolate; display: flex; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 34px -22px rgba(0, 0, 0, 1); transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.br-pl__art > img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 20%; transition: flex-grow 0.45s var(--ease); }
.br-pl__art > img + img { box-shadow: -10px 0 18px -8px rgba(0, 0, 0, 0.8); }
.br-pl__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 8, 10, 0.88), rgba(4, 8, 10, 0.1) 52%, transparent); pointer-events: none; }
.br-pl:hover .br-pl__art, .br-pl:focus-visible .br-pl__art { box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.5), 0 26px 40px -22px rgba(0, 0, 0, 1), 0 0 34px -10px rgba(124, 245, 196, 0.28); transform: translateY(-3px); }
.br-pl:hover .br-pl__art > img:first-of-type { flex-grow: 1.6; }
.br-pl:focus-visible { outline: 0; }
.br-pl__n { position: absolute; z-index: 1; left: 14px; bottom: 11px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hi); }
.br-pl__flags { position: absolute; z-index: 1; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.br-pl__flags .mt { background-color: rgba(6, 10, 12, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.br-pl__blank { display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 120%, rgba(124, 245, 196, 0.1), transparent 60%); }
.br-pl__blank i { width: 17%; aspect-ratio: 2 / 3; border: 1px dashed var(--line3); border-radius: 8px; }
.br-pl__blank i:nth-child(2) { width: 21%; border-color: rgba(124, 245, 196, 0.4); }
.br-pl__t { overflow: hidden; margin-top: 13px; font: 650 16.5px/1.3 var(--display); letter-spacing: -0.022em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.br-pl:hover .br-pl__t { color: var(--acc-hi); }
.br-pl__s { overflow: hidden; margin-top: 2px; font-size: 12.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.br-pl__s span { font-weight: 600; }
.br-hero--pl { margin-bottom: 24px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)) bottom / 100% 1px no-repeat; }
.br-hero--pl h1 { font-size: clamp(32px, 3.7vw, 54px); line-height: 1.04; letter-spacing: -0.046em; text-wrap: balance; }
.br-hero--pl:has(.br-arc) .br-hero__t { max-width: min(600px, 40%); }
.br-plp > .alert { margin: 0 0 20px; }
.br-desc { max-width: 80ch; margin: 0 0 26px; padding: 2px 0 2px 18px; border-left: 2px solid var(--line2); color: var(--soft); }
.br-plrow { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.br-ple--edit .br-plrow { grid-template-columns: minmax(0, 1fr) auto; }
.br-plrow form { display: flex; }
.br-plrow__x { height: 30px; margin-left: 6px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 550; color: var(--mut); cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.br-plrow__x:hover { border-color: rgba(255, 143, 143, 0.4); background: rgba(255, 143, 143, 0.08); color: var(--red); }
.br-form { display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 330px); gap: 28px; align-items: start; }
.br-form__f { max-width: none; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.br-form__f .form__row { gap: 18px; }
.br-form__check { min-height: 42px; }
.br-form__aside { padding: 24px 26px; border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.br-form__aside h2 { margin: 0 0 16px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.br-form__aside ol { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: st; font-size: 13px; line-height: 1.55; color: var(--mut); }
.br-form__aside li { position: relative; padding-left: 36px; counter-increment: st; }
.br-form__aside li::before { content: counter(st); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--acc-soft); font: 650 12px var(--display); color: var(--acc); }
.br-form__aside b { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; color: var(--hi); }
.br-none--steps .br-none__tips { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
@media (max-width: 1100px) {
.br-top { flex-wrap: wrap; }
.br-top__i:first-child { flex: 1 1 100%; }
.br-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.br-top { flex-direction: column; gap: 12px; margin-bottom: 28px; }
.br-top__a { min-height: 0; padding: 60px 16px 16px; gap: 14px; border-radius: 22px; }
.br-top__n { top: 2px; right: 16px; font-size: 76px; }
.br-top__p { width: 84px; }
.br-top__t, .br-top__i:first-child .br-top__t { font-size: 19px; }
.br-rank { grid-template-columns: 26px minmax(0, 1fr); }
.br-rank__n { align-self: start; margin-top: 34px; font-size: 14px; }
.br-rank__v { grid-column: 2; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; padding: 0 6px 12px 76px; }
.br-rank__v .br-meter { grid-column: auto; }
.br-shelf { margin-bottom: 28px; }
.br-shelf__d { display: none; }
.br-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.br-tiles--companies, .br-tiles--networks, .br-tiles--genres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.br-tiles.br-tiles--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 116px; grid-auto-rows: auto; gap: 12px; overflow-x: auto; margin: -8px calc(var(--pad) * -1) 0; padding: 8px var(--pad) 4px; scroll-snap-type: x proximity; scroll-padding-left: var(--pad); scrollbar-width: none; }
.br-tiles--row::-webkit-scrollbar { display: none; }
.br-tiles--row > * { scroll-snap-align: start; }
.br-tiles--companies.br-tiles--row, .br-tiles--networks.br-tiles--row { grid-auto-columns: 148px; }
.br-genre b { font-size: 15px; }
.br-find__q { flex: 1 1 100%; }
.br-find .select { flex: 1 1 0; min-width: 0; }
.br-find__n { margin-left: 0; }
.br-who { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 26px; padding-bottom: 24px; }
.br-who__img { width: 132px; }
.br-who--companies .br-who__img, .br-who--networks .br-who__img { width: 190px; }
.br-hero--pl:has(.br-arc) .br-hero__t { max-width: none; }
.br-who__bio { -webkit-line-clamp: 7; }
.br-who--genres { min-height: 200px; justify-content: flex-end; }
.br-who__bd { width: 100%; opacity: 0.4; }
.br-subh { display: none; }
.br-sub { grid-template-columns: minmax(0, 1fr) auto 36px; gap: 6px 12px; padding: 12px 14px; }
.br-sub__lang { grid-column: 1; grid-row: 1; }
.br-sub__age { grid-column: 2; grid-row: 1; }
.br-sub .lr__dl { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.br-sub__m { grid-column: 1 / 3; grid-row: 2; }
.br-sub__by { grid-column: 1 / -1; grid-row: 3; font-size: 12px; }
.br-sub__by::before { content: "by "; }
.br-sub__n { display: none; }
.br-plg { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.br-ple--edit .br-plrow { grid-template-columns: minmax(0, 1fr); }
.br-plrow form { justify-content: flex-end; margin: -4px 0 8px; }
.br-form__f { padding: 20px 16px; }
.br-none--steps .br-none__tips { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.br-who__img, .br-who__bd { animation: none; }
.br-tile__img, .br-title__p, .br-genre, .br-pl__art, .br-top__a, .br-top__bd, .br-pl__art > img { transition: none; }
}
main.content.is-in > article.tp-page { animation: none; }
.tp-page { --tp-hue: var(--acc); --tp-lift: 90px; --tp-gap: clamp(22px, 2.8vw, 40px); }
.tp-c-i-music { --tp-hue: var(--lav); }
.tp-c-i-box { --tp-hue: var(--bmoon); }
.tp-c-i-book, .tp-c-i-list { --tp-hue: var(--moon); }
.tp-bd { position: absolute; z-index: -1; left: 0; right: 0; height: calc(var(--tp-lift) + clamp(440px, 44vw, 720px)); margin-top: calc(-1 * var(--tp-lift)); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 40%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 40%, rgba(0, 0, 0, 0.5) 72%, transparent 100%); }
.tp-bd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: 0.94; transition: opacity 0.6s ease; }
.tp-bd img.is-wait { opacity: 0; }
.tp-bd::after { content: ""; position: absolute; inset: 0; background:
radial-gradient(60% 90% at 16% 70%, color-mix(in oklab, var(--amb) 14%, transparent), transparent 70%),
linear-gradient(90deg, rgba(6, 9, 12, 0.95) 0%, rgba(6, 9, 12, 0.84) 24%, rgba(6, 9, 12, 0.5) 50%, rgba(6, 9, 12, 0.16) 74%, rgba(6, 9, 12, 0.36) 100%),
linear-gradient(180deg, rgba(6, 9, 12, 0.66) 0, rgba(6, 9, 12, 0.12) 24%, rgba(6, 9, 12, 0) 48%, rgba(6, 9, 12, 0.52) 100%); }
.tp-bd--soft img { inset: -14%; width: 128%; height: 128%; object-position: 50% 30%; filter: blur(48px) saturate(1.6); opacity: 0.66; }
.tp-bd--soft::after { background: linear-gradient(90deg, rgba(6, 9, 12, 0.8) 0%, rgba(6, 9, 12, 0.5) 40%, rgba(6, 9, 12, 0.18) 100%), linear-gradient(180deg, rgba(6, 9, 12, 0.5) 0, rgba(6, 9, 12, 0) 40%); }
.tp-bd--plain { height: calc(var(--tp-lift) + 460px); }
.tp-bd--plain::after { background:
radial-gradient(820px 420px at 82% 56%, color-mix(in srgb, var(--tp-hue) 15%, transparent), transparent 70%),
radial-gradient(560px 340px at 8% 40%, rgba(244, 241, 208, 0.05), transparent 70%); }
.tp-moon { position: absolute; z-index: -1; right: 0; bottom: calc(-1 * var(--tp-gap)); width: min(52%, 620px); height: calc(100% + var(--tp-gap) + 70px); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%); }
.tp-moon .moon { position: absolute; right: 7%; bottom: -250px; width: 420px; height: 420px; opacity: 0.2; filter: drop-shadow(0 0 46px rgba(244, 241, 208, 0.5)); }
.tp-moon .moon__disc { fill: rgba(244, 241, 208, 0.28); }
.tp-moon::before { content: ""; position: absolute; right: -4%; bottom: -160px; width: 600px; height: 330px; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 208, 0.12), transparent); }
.tp-page--dead .tp-bd img { filter: grayscale(0.82) brightness(0.72); }
.tp-page--dead .tp-bd--soft img { filter: blur(48px) grayscale(0.8); }
.tp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; margin-bottom: clamp(16px, 2.8vw, 40px); }
.tp-crumbs { flex-wrap: nowrap; min-width: 0; margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
.tp-crumbs i { flex: none; }
.tp-crumbs a, .tp-crumbs span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-crumbs a:first-child { flex: none; }
.tp-tools { display: flex; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: rgba(6, 9, 12, 0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tp-tools .btn { color: var(--soft) !important; }
.tp-tools .btn:hover { color: var(--hi) !important; }
.tp-tools .tp-tools__del:hover { background: rgba(255, 143, 143, 0.12); color: var(--red) !important; }
.tp-alert { margin-bottom: 14px; background: rgba(8, 13, 16, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text); }
.tp-alert::before { background: var(--tp-say, var(--mut)); box-shadow: 0 0 10px var(--tp-say, transparent); }
.tp-alert.alert--warn { --tp-say: var(--amber); border-color: rgba(244, 222, 140, 0.3); }
.tp-alert.alert--err { --tp-say: var(--red); border-color: rgba(255, 143, 143, 0.3); }
.tp-alert.alert--ok { --tp-say: var(--acc); border-color: rgba(124, 245, 196, 0.3); }
.tp-alert a { font-weight: 600; color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
.tp-alert + .tp-hero, .tp-alert + .tp-mini { margin-top: 22px; }
.tp-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: clamp(22px, 3.4vw, 54px); }
.tp-page--art .tp-hero::before { content: ""; position: absolute; z-index: -1; left: -8%; right: 18%; top: -12%; bottom: -16%; background: radial-gradient(closest-side, rgba(6, 9, 12, 0.6), rgba(6, 9, 12, 0.32) 62%, transparent); pointer-events: none; }
.tp-poster { grid-row: 1 / span 2; align-self: end; width: clamp(180px, 19.5vw, 300px); }
.tp-poster img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 18px; background-color: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 34px 70px -24px rgba(0, 0, 0, 0.9), 0 30px 90px -34px color-mix(in oklab, var(--amb) 60%, transparent); }
.tp-page--dead .tp-poster img { filter: grayscale(0.7) brightness(0.86); }
.tp-page--plain .tp-poster { width: clamp(140px, 14.5vw, 212px); }
.tp-sleeve { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid var(--line2); border-radius: 24px; color: var(--tp-hue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -26px rgba(0, 0, 0, 0.9), 0 26px 80px -34px color-mix(in srgb, var(--tp-hue) 50%, transparent); background:
radial-gradient(circle at 50% 50%, transparent 0 21%, rgba(255, 255, 255, 0.06) 21.4% 22%, transparent 22.4% 31%, rgba(255, 255, 255, 0.045) 31.4% 32%, transparent 32.4% 41%, rgba(255, 255, 255, 0.035) 41.4% 42%, transparent 42.4% 51%, rgba(255, 255, 255, 0.03) 51.4% 52%, transparent 52.4%),
radial-gradient(circle at 28% 18%, color-mix(in srgb, var(--tp-hue) 24%, transparent), transparent 64%),
linear-gradient(160deg, #15222a, #090f13); }
.tp-sleeve svg { width: 28%; height: 28%; stroke-width: 1.3; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tp-hue) 60%, transparent)); }
.tp-ha { align-self: end; min-width: 0; }
.tp-hb { align-self: start; min-width: 0; padding-top: 14px; }
.tp-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 16px; }
.tp-cat, .tp-ep, .tp-flag { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(6, 9, 12, 0.46); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; line-height: 1; color: var(--soft); white-space: nowrap; }
.tp-cat { color: var(--hi); transition: border-color 0.15s, color 0.15s; }
.tp-cat:hover { border-color: rgba(124, 245, 196, 0.5); color: var(--acc); }
.tp-cat svg { width: 13px; height: 13px; color: var(--tp-hue); }
.tp-ep { padding-left: 4px; color: var(--soft); font-weight: 500; }
.tp-ep b { padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font: 600 11.5px/20px var(--mono); color: var(--hi); }
.tp-flag small { padding-left: 8px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: 11.5px; font-weight: 500; opacity: 0.86; }
.tp-flag i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.tp-flag--fm { border-color: rgba(244, 241, 208, 0.4); background: rgba(46, 44, 28, 0.55); color: var(--moon); }
.tp-flag--bm { border-color: rgba(143, 203, 255, 0.42); background: rgba(22, 36, 52, 0.6); color: var(--bmoon); }
.tp-flag--int { border-color: rgba(195, 166, 255, 0.4); color: var(--lav); }
.tp-flag--feat { border-color: rgba(124, 245, 196, 0.4); color: var(--acc); }
.tp-flag--dead { border-color: rgba(255, 143, 143, 0.42); background: rgba(48, 22, 24, 0.6); color: var(--red); }
.tp-flag--low { border-color: rgba(244, 222, 140, 0.4); color: var(--amber); }
.tp-flag--dead i, .tp-flag--low i { width: 7px; height: 7px; box-shadow: none; }
.tp-title { margin: 0; font: 700 clamp(34px, 4.5vw, 68px)/1.01 var(--display); letter-spacing: -0.046em; color: var(--hi); text-wrap: balance; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55); overflow-wrap: break-word; }
.tp-title--long { font-size: clamp(28px, 3.3vw, 50px); line-height: 1.05; }
.tp-title--xl { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.12; letter-spacing: -0.035em; }
.tp-title--name { font-size: clamp(22px, 2.5vw, 38px); line-height: 1.14; letter-spacing: -0.034em; text-wrap: wrap; overflow-wrap: anywhere; }
.tp-title__y { margin-left: 0.14em; font-size: 0.5em; font-weight: 400; letter-spacing: -0.02em; color: rgba(246, 251, 248, 0.66); white-space: nowrap; }
.tp-meta { margin: 14px 0 0; font-size: 14.5px; line-height: 1.75; color: var(--soft); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.tp-meta > * { display: inline-block; white-space: nowrap; }
.tp-meta > :last-child:not(:first-child) { display: inline; white-space: normal; }
.tp-meta > :not(:last-child)::after { content: "·"; margin: 0 7px 0 11px; font-weight: 700; color: var(--dim); }
.tp-rate { display: inline-flex; align-items: center; gap: 6px; vertical-align: bottom; }
.tp-rate::after { margin-left: 5px !important; }
.tp-rate svg { width: 14px; height: 14px; fill: var(--moon); stroke: none; filter: drop-shadow(0 0 6px rgba(244, 241, 208, 0.5)); }
.tp-rate b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--hi); }
.tp-tagline { margin: 0 0 10px; font-size: 16.5px; font-style: italic; line-height: 1.4; color: var(--moon); text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.tp-ov { max-width: 68ch; margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--soft); text-wrap: pretty; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.tp-credit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 14px 0 0; font-size: 13.5px; color: var(--mut); }
.tp-credit i { font-style: normal; }
.tp-credit a { font-weight: 600; color: var(--hi); transition: color 0.15s; }
.tp-credit a:hover { color: var(--acc); }
.tp-ext { display: inline-flex; align-items: center; gap: 5px; }
.tp-ext svg { width: 12px; height: 12px; color: var(--mut); }
.tp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.tp-actions form { display: inline-flex; margin: 0; }
.tp-cta { display: contents; }
.tp-cta__i { display: none; }
.tp-dl { height: 48px; padding: 0 28px 0 24px; font-size: 15.5px; }
a.tp-dl { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 34px -12px rgba(124, 245, 196, 0.75); }
.tp-actions .btn--lg:not(.tp-dl) { height: 48px; padding: 0 18px; background: linear-gradient(180deg, rgba(20, 28, 33, 0.72), rgba(10, 15, 19, 0.72)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tp-actions .btn--lg:not(.tp-dl):hover:not(:disabled) { background: linear-gradient(180deg, rgba(34, 46, 52, 0.8), rgba(18, 26, 31, 0.8)); }
.tp-actions .btn.is-on { border-color: rgba(124, 245, 196, 0.5); background: linear-gradient(180deg, rgba(22, 52, 46, 0.82), rgba(12, 34, 31, 0.82)); }
.tp-actions .btn.is-on svg { fill: currentColor; }
.tp-actions .btn svg { width: 16px; height: 16px; }
.tp-n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mut); }
.tp-token svg { color: var(--moon); }
.tp-band { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; margin-top: var(--tp-gap); padding-top: 22px; }
.tp-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.42), rgba(196, 232, 222, 0.14) 28%, rgba(196, 232, 222, 0.08) 72%, rgba(244, 241, 208, 0.24)); }
.tp-figs { display: flex; margin: 0; }
.tp-fig { display: flex; flex-direction: column-reverse; gap: 8px; padding: 0 clamp(16px, 2.5vw, 38px); border-left: 1px solid var(--line); }
.tp-fig:first-child { padding-left: 0; border-left: 0; }
.tp-fig dt { font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.tp-fig dd { margin: 0; font: 650 clamp(24px, 2.7vw, 38px)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--hi); white-space: nowrap; }
.tp-fig dd a { color: inherit; transition: color 0.15s; }
.tp-fig dd a:hover { color: var(--acc-hi); }
.tp-fig--seed dd { color: var(--acc); text-shadow: 0 0 26px rgba(124, 245, 196, 0.4); }
.tp-page--dead .tp-fig--seed dd { color: var(--red); text-shadow: none; }
.tp-page--low .tp-fig--seed dd { color: var(--amber); text-shadow: none; }
.tp-fig__u { margin-left: 1px; font-size: 0.46em; font-weight: 600; letter-spacing: 0; color: var(--mut); }
.tp-health { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 3px; font-size: 13px; color: var(--soft); }
.tp-health i { width: 8px; height: 8px; margin-right: -7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.tp-health--ok i { box-shadow: none; }
.tp-health--low i { background: var(--amber); box-shadow: none; }
.tp-health--dead i { background: var(--red); box-shadow: none; }
.tp-health a { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--mut); transition: color 0.15s; }
.tp-health a:hover { color: var(--acc); }
.tp-health a svg { width: 13px; height: 13px; }
.tp-rel { display: flex; align-items: center; gap: 8px 14px; margin-top: 22px; padding: 10px 10px 10px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: rgba(8, 13, 16, 0.6); box-shadow: var(--e1); }
.tp-rel__k { flex: none; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.tp-rel__n { flex: 1; min-width: 0; font: 13.5px/1.5 var(--mono); color: var(--hi); }
.tp-rel__g { flex: none; font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.tp-rel__g b { font-weight: 650; color: var(--soft); }
.tp-mark { flex: none; padding: 0 9px; border: 1px solid rgba(195, 166, 255, 0.34); border-radius: 999px; font-size: 11px; font-weight: 650; line-height: 20px; color: var(--lav); white-space: nowrap; }
.tp-copy { flex: none; }
.tp-body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); gap: clamp(24px, 2.8vw, 46px); align-items: start; margin-top: clamp(28px, 3.2vw, 46px); }
.tp-main, .tp-side { min-width: 0; }
.tp-sec { margin-bottom: clamp(28px, 3vw, 42px); }
.tp-sec__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.tp-sec__h h2 { margin: 0; font: 650 19px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.tp-sec__n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dim); }
.tp-sec__a { margin-left: auto; font-size: 12.5px; color: var(--dim); }
.tp-none { margin: 0; padding: 4px 0 0; font-size: 13.5px; color: var(--mut); }
.tp-tiles { --c: var(--n, 4); display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tp-tile { display: flex; flex: 1 1 calc((100% - (var(--c) - 1) * 10px) / var(--c)); flex-direction: column; gap: 3px; min-width: 0; max-width: 330px; min-height: 112px; padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--e2); }
.tp-tile svg { width: 18px; height: 18px; margin-bottom: auto; color: var(--mut); }
.tp-tile--picture svg { color: var(--acc); }
.tp-tile--hdr svg { color: var(--moon); }
.tp-tile--audio svg { color: var(--lav); }
.tp-tile--source svg { color: var(--bmoon); }
.tp-tile__l { margin-top: 14px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.tp-tile__v { font: 650 17.5px/1.18 var(--display); letter-spacing: -0.028em; color: var(--hi); overflow-wrap: anywhere; }
.tp-tile small { font-size: 12px; line-height: 1.35; color: var(--mut); }
.tp-tile--hdr { border-color: rgba(244, 241, 208, 0.2); background: linear-gradient(160deg, rgba(244, 241, 208, 0.075), rgba(195, 166, 255, 0.03) 60%, rgba(255, 255, 255, 0.016)); }
.tp-tracks { display: grid; gap: 10px; margin: 16px 0 0; }
.tp-tracks > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
.tp-tracks dt { padding-top: 9px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.tp-tracks dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.tp-trk { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.028); font-size: 12.5px; color: var(--soft); }
.tp-trk b { font-weight: 600; color: var(--hi); }
.tp-trk i { font-style: normal; color: var(--lav); }
.tp-trk small { font: 10.5px var(--mono); color: var(--dim); }
.tp-trk.is-def { border-color: rgba(124, 245, 196, 0.36); background: rgba(124, 245, 196, 0.05); }
.tp-trk--none { border-style: dashed; color: var(--mut); }
.tp-cast { display: flex; gap: 4px; margin: -4px -8px 0; padding: 4px 8px 10px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 8px; scrollbar-width: thin; scrollbar-color: rgba(196, 232, 222, 0.16) transparent; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.tp-cast__p { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; width: 116px; padding: 10px 6px 12px; border-radius: 18px; text-align: center; scroll-snap-align: start; transition: background-color 0.15s; }
.tp-cast__p:hover { background: rgba(255, 255, 255, 0.045); }
.tp-cast__p img, .tp-cast__i { width: 88px; height: 88px; margin-bottom: 9px; border-radius: 50%; background: var(--surface2); object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1px var(--line2), 0 12px 24px -14px rgba(0, 0, 0, 0.9); transition: box-shadow 0.2s; }
.tp-cast__i { display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #24423b, #101d1c 72%); font: 600 26px var(--display); color: var(--mut); }
.tp-cast__p:hover img, .tp-cast__p:hover .tp-cast__i { box-shadow: 0 0 0 2px rgba(124, 245, 196, 0.7), 0 12px 26px -12px rgba(124, 245, 196, 0.4); }
.tp-cast__p b { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--hi); }
.tp-cast__p small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 11.5px; line-height: 1.3; color: var(--mut); }
.tp-panel { padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); overflow-wrap: anywhere; }
.tp-fold { border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--e1); overflow: hidden; transition: border-color 0.2s; }
.tp-fold + .tp-fold { margin-top: 10px; }
.tp-fold:hover, .tp-fold[open] { border-color: var(--line2); }
.tp-fold > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; list-style: none; cursor: pointer; user-select: none; }
.tp-fold > summary::-webkit-details-marker { display: none; }
.tp-fold > summary:focus-visible { outline-offset: -3px; border-radius: 18px; }
.tp-fold > summary h2, .tp-fold > summary h3 { margin: 0; font: 600 14.5px/1.2 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.tp-fold__i { width: 16px; height: 16px; color: var(--mut); }
.tp-fold__n { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.tp-fold__c { width: 14px; height: 14px; color: var(--mut); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.tp-fold__n + .tp-fold__c { margin-left: 0; }
.tp-fold__c { margin-left: auto; }
.tp-fold[open] > summary { border-bottom: 1px solid var(--line); }
.tp-fold[open] > summary .tp-fold__c { transform: rotate(-90deg); }
.tp-pre { max-height: 560px; margin: 0; padding: 16px 18px; overflow: auto; font: 12px/1.62 var(--mono); color: var(--soft); white-space: pre; tab-size: 4; scrollbar-width: thin; }
.tp-files { max-height: 440px; overflow: auto; scrollbar-width: thin; }
.tp-files table { width: 100%; border-collapse: collapse; }
.tp-files td { padding: 9px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.tp-files tr:first-child td { border-top: 0; }
.tp-files tr:hover { background: rgba(124, 245, 196, 0.03); }
.tp-files code { font: 12.5px/1.5 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.tp-files__s { width: 1%; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--mut); white-space: nowrap; }
.tp-form { max-width: none; padding: 18px; gap: 16px; }
.tp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tp-fold--form { margin-top: 12px; }
.tp-fold--danger > summary h2 { color: var(--red); }
.tp-fold--danger > summary .tp-fold__i { color: var(--red); }
.tp-fold--danger[open] { border-color: rgba(255, 143, 143, 0.35); }
.tp-subs__ah { position: relative; }
.tp-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tp-subs__f { font: 12.5px/1.5 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.tp-subs td:nth-child(2) { min-width: 18ch; }
.tp-subs__a { white-space: nowrap; }
.tp-subs__a > * { vertical-align: middle; }
.tp-subs__a form { display: inline-flex; margin: 0 0 0 4px; }
.tp-subs__a .btn--sm svg { width: 14px; height: 14px; }
.tp-subs__a a.btn--sm { width: 30px; padding: 0; justify-content: center; }
.tp-compose { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.tp-compose .textarea { min-height: 96px; }
.tp-compose__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.tp-compose + .tp-none { padding-top: 16px; }
.tp-thread { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.tp-cm { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 2px; border-top: 1px solid var(--line); scroll-margin-top: 90px; content-visibility: auto; contain-intrinsic-size: auto 96px; }
.tp-cm:first-child { border-top: 0; }
.tp-cm__av { width: 40px; height: 40px; font-size: 15px; }
.tp-cm__av--anon { background: radial-gradient(circle at 34% 28%, #33324a, #17172a 72%); color: var(--lav); }
.tp-cm__av--anon svg { width: 17px; height: 17px; }
.tp-cm__b { min-width: 0; }
.tp-cm__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-bottom: 6px; font-size: 13.5px; }
.tp-cm__h b { font-weight: 650; color: var(--hi); }
.tp-cm__h a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tp-cm__h time { font-size: 12px; color: var(--dim); }
.tp-cm__h time::before { content: "·"; margin-right: 9px; }
.tp-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); overflow: hidden; }
.tp-side > * + * { margin-top: 14px; }
.tp-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 13px; }
.tp-card__h h2 { margin: 0; font: 650 14.5px/1.2 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.tp-card__h span { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.tp-kv { margin: 0; padding: 0 18px 8px; }
.tp-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.tp-kv dt { flex: none; color: var(--mut); }
.tp-kv dd { min-width: 0; margin: 0; font-weight: 550; text-align: right; color: var(--hi); overflow-wrap: anywhere; }
.tp-kv dd a { transition: color 0.15s; }
.tp-kv dd a:hover { color: var(--acc); }
.tp-kv__hash dd { display: flex; align-items: flex-start; gap: 6px; }
.tp-hash { font: 11.5px/1.5 var(--mono); font-weight: 400; color: var(--soft); word-break: break-all; }
.tp-hash__cp { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; margin: -3px -6px 0 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--mut); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.tp-hash__cp:hover { background: rgba(255, 255, 255, 0.07); color: var(--hi); }
.tp-hash__cp svg { width: 13px; height: 13px; }
.tp-inline { display: flex; gap: 8px; margin: 0; padding: 0 18px 18px; }
.tp-inline .input, .tp-inline .select { flex: 1; min-width: 0; height: 36px; }
.tp-inline .btn { flex: none; }
.tp-card__h:only-child { padding-bottom: 16px; }
.tp-sibs ul { margin: 0; padding: 0; list-style: none; }
.tp-sib { display: grid; gap: 5px; padding: 12px 18px 13px; border-top: 1px solid var(--line); transition: background-color 0.15s; }
.tp-sib:hover { background: rgba(124, 245, 196, 0.04); }
.tp-sib__t { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; font-size: 12px; color: var(--soft); }
.tp-sib__t > span, .tp-sib__r { padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11px; font-weight: 600; line-height: 20px; white-space: nowrap; }
.tp-sib__r { color: var(--hi); }
.tp-sib__r.is-uhd { background: rgba(244, 241, 208, 0.14); color: var(--moon); }
.tp-sib__t .tp-sib__fm { background: rgba(244, 241, 208, 0.1); color: var(--moon); }
.tp-sib__t .tp-sib__bm { background: rgba(143, 203, 255, 0.1); color: var(--bmoon); }
.tp-sib__t em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--hi); }
.tp-sib code { overflow: hidden; font: 11.5px/1.4 var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.tp-sib small { font-size: 12px; color: var(--mut); }
.tp-sib__s { color: var(--acc); }
.tp-sib__s i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.tp-sib.is-dead .tp-sib__s { color: var(--red); }
.tp-sib.is-dead code { color: var(--dim); }
.tp-bd--low { height: calc(var(--tp-lift) + 330px); }
.tp-bd--low img { opacity: 0.7; }
.tp-page--sub .tp-top { margin-bottom: 22px; }
.tp-mini { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px clamp(18px, 2.4vw, 32px); align-items: end; margin-bottom: 26px; }
.tp-mini__p { display: block; width: 92px; }
.tp-mini__p img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 12px; background-color: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 20px 40px -18px rgba(0, 0, 0, 0.9); }
.tp-mini__p .tp-sleeve { border-radius: 18px; }
.tp-mini__t { min-width: 0; }
.tp-mini__t .ph__kicker { margin-bottom: 10px; }
.tp-mini h1 { margin: 0; font: 700 clamp(24px, 2.9vw, 40px)/1.06 var(--display); letter-spacing: -0.042em; color: var(--hi); text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.tp-mini h1 a { color: inherit; transition: color 0.15s; }
.tp-mini h1 a:hover { color: var(--acc-hi); }
.tp-mini h1 span { margin-left: 0.12em; font-size: 0.56em; font-weight: 400; letter-spacing: -0.02em; color: rgba(246, 251, 248, 0.64); }
.tp-mini__n { display: block; margin-top: 10px; overflow: hidden; font: 12.5px/1.5 var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.tp-mini .tp-fig dd { font-size: clamp(22px, 2.2vw, 30px); }
.tp-tabs .tp-tabs__back { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--mut); }
.tp-tabs__back svg { width: 13px; height: 13px; transform: rotate(180deg); }
.tp-ppl__who a, .tp-ppl__anon { display: inline-flex; align-items: center; gap: 10px; }
.tp-ppl__who .av { width: 28px; height: 28px; font-size: 11.5px; }
.tp-ppl__who .av svg { width: 13px; height: 13px; }
.tp-ppl__who b { font-weight: 650; color: var(--hi); }
.tp-ppl__who a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tp-ppl__anon { color: var(--mut); }
.tp-ppl code { font: 12px var(--mono); color: var(--soft); }
.tp-edit > .tp-crumbs { margin-bottom: 14px; }
.tp-edit > .tp-crumbs a { overflow: hidden; max-width: min(60ch, 56vw); text-overflow: ellipsis; white-space: nowrap; }
.tp-edit__alert { margin-bottom: 18px; }
.tp-edit__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 23vw, 350px); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
.tp-edit__form { gap: 16px; max-width: none; min-width: 0; }
.tp-fs { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin: 0; padding: clamp(18px, 1.8vw, 26px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.tp-fs__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-bottom: 2px; }
.tp-fs__h i { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.26); font: 650 12.5px/1 var(--display); font-style: normal; color: var(--acc); }
.tp-fs__h i svg { width: 13px; height: 13px; }
.tp-fs__h h2 { margin: 0; font: 650 17px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.tp-fs__h span { margin-left: auto; font-size: 12.5px; color: var(--mut); }
.tp-fs--staff { border-color: rgba(244, 241, 208, 0.2); background: linear-gradient(180deg, rgba(244, 241, 208, 0.05), rgba(255, 255, 255, 0.016)); }
.tp-fs--staff .tp-fs__h i { background: rgba(244, 241, 208, 0.1); box-shadow: inset 0 0 0 1px rgba(244, 241, 208, 0.3); color: var(--moon); }
.tp-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tp-row { align-items: start; }
.tp-mono { font-family: var(--mono); font-size: 13px; }
textarea.tp-mono { font-size: 12px; line-height: 1.6; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.tp-checks { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.tp-save { position: sticky; z-index: 5; bottom: 14px; justify-content: flex-end; gap: 8px; margin-top: 4px; padding: 10px 10px 10px 20px; border: 1px solid var(--line2); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--e3); }
.tp-save__n { margin-right: auto; font-size: 12.5px; color: var(--mut); }
.tp-edit__side { position: sticky; top: 84px; min-width: 0; }
.tp-edit__side > * + * { margin-top: 14px; }
.tp-edit__name { margin: 0; padding: 0 18px 14px; font: 12.5px/1.55 var(--mono); color: var(--soft); overflow-wrap: anywhere; }
.tp-kv dd.up { color: var(--acc); }
.tp-report { max-width: 780px; margin: 0 auto; }
.tp-report__form { max-width: none; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.tp-subject { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--r-m); background: rgba(3, 6, 8, 0.4); transition: border-color 0.15s, background-color 0.15s; }
.tp-subject:hover { border-color: rgba(124, 245, 196, 0.45); background: rgba(124, 245, 196, 0.04); }
.tp-subject__i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); }
.tp-subject__i svg { width: 18px; height: 18px; }
.tp-subject__t { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.tp-subject__t code { font: 13px/1.5 var(--mono); color: var(--hi); overflow-wrap: anywhere; }
.tp-subject__t b { font: 650 15px/1.3 var(--display); letter-spacing: -0.015em; color: var(--hi); overflow-wrap: anywhere; }
.tp-subject__t small { font-size: 12.5px; color: var(--mut); }
.tp-subject__go { flex: none; width: 14px; height: 14px; color: var(--mut); }
.tp-report__a { justify-content: flex-end; }
@media (max-width: 1380px) {
.tp-tiles { --c: var(--h, 4); }
}
@media (max-width: 1180px) {
.tp-page { --tp-lift: 150px; }
}
@media (max-width: 1040px) {
.tp-body { grid-template-columns: minmax(0, 1fr); }
.tp-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.tp-side > * + * { margin-top: 0; }
.tp-edit__grid { grid-template-columns: minmax(0, 1fr); }
.tp-edit__side { position: static; }
.tp-row--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.tp-mini { grid-template-columns: auto minmax(0, 1fr); }
.tp-mini .tp-figs { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.tp-page { --tp-lift: 26px; }
.tp-bd { height: calc(var(--tp-lift) + 340px); }
.tp-bd::after { background:
linear-gradient(180deg, rgba(6, 9, 12, 0.5) 0, rgba(6, 9, 12, 0.34) 36%, rgba(6, 9, 12, 0.74) 100%),
linear-gradient(90deg, rgba(6, 9, 12, 0.5), rgba(6, 9, 12, 0.1)); }
.tp-top { margin-bottom: 18px; }
.tp-page--art .tp-hero::before { left: 0; right: 0; top: 30%; bottom: -6%; }
.tp-tools .btn { width: 30px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.tp-hero { grid-template-rows: auto auto; column-gap: 16px; }
.tp-moon { width: 76%; }
.tp-moon .moon { right: -8%; bottom: -200px; width: 290px; height: 290px; opacity: 0.15; }
.tp-poster, .tp-page--plain .tp-poster { grid-row: 1; align-self: start; width: 116px; }
.tp-page--plain .tp-poster { width: 96px; }
.tp-poster img { border-radius: 12px; }
.tp-sleeve { border-radius: 18px; }
.tp-hb { grid-column: 1 / -1; padding-top: 18px; }
.tp-flags { gap: 6px; margin-bottom: 10px; }
.tp-cat, .tp-ep, .tp-flag { height: 26px; padding: 0 10px; font-size: 11.5px; }
.tp-ep { padding-left: 3px; }
.tp-flag small { display: none; }
.tp-title { font-size: clamp(25px, 7.6vw, 32px); line-height: 1.06; }
.tp-title--long { font-size: 21px; line-height: 1.12; }
.tp-title--xl { font-size: 17px; line-height: 1.18; }
.tp-title--name { font-size: 17px; line-height: 1.22; }
.tp-meta { margin-top: 8px; font-size: 13px; line-height: 1.65; }
.tp-meta > :not(:last-child)::after { margin: 0 4px 0 8px; }
.tp-ov { font-size: 14.5px; }
.tp-actions { gap: 8px; margin-top: 18px; }
.tp-actions .btn--lg:not(.tp-dl) { height: 42px; padding: 0 14px; font-size: 13.5px; }
.tp-cta { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line2); background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 -20px 40px -24px rgba(0, 0, 0, 0.9); }
.tp-cta__i { display: flex; flex: none; flex-direction: column; gap: 3px; }
.tp-cta__i b { font: 650 15px/1 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.tp-cta__i small { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); }
.tp-cta__i small i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.tp-page--dead .tp-cta__i small i { background: var(--red); }
.tp-page--low .tp-cta__i small i { background: var(--amber); }
.tp-cta .tp-dl { flex: 1; justify-content: center; height: 46px; padding: 0 16px; }
body:has(.tp-cta) { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
body:has(.tp-cta) .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.tp-band { padding-top: 18px; }
.tp-figs { width: 100%; justify-content: space-between; }
.tp-fig { flex: 1 1 0; padding: 0 0 0 12px; gap: 6px; }
.tp-fig dd { font-size: clamp(19px, 5.8vw, 24px); }
.tp-fig dt { font-size: 9.5px; letter-spacing: 0.1em; }
.tp-rel { flex-wrap: wrap; padding: 12px 12px 12px 14px; }
.tp-rel__k { width: 100%; }
.tp-rel__n { flex: 1 1 100%; font-size: 12.5px; overflow-wrap: anywhere; }
.tp-copy { margin-left: auto; }
.tp-tiles { --c: 2; }
.tp-tile { max-width: none; min-height: 100px; }
.tp-tracks > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tp-tracks dt { padding-top: 0; }
.tp-cast { margin: -4px calc(-1 * var(--pad)) 0; padding: 4px var(--pad) 8px; scrollbar-width: none; }
.tp-cast__p { width: 96px; padding: 8px 4px 10px; }
.tp-cast__p img, .tp-cast__i { width: 72px; height: 72px; }
.tp-side { grid-template-columns: minmax(0, 1fr); }
.tp-subs table, .tp-subs tbody { display: block; }
.tp-subs thead { display: none; }
.tp-subs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.tp-subs tr:first-child { border-top: 0; }
.tp-subs td { display: block; min-width: 0 !important; padding: 0; border: 0; text-align: left; }
.tp-subs td:nth-child(1) { font-weight: 600; color: var(--hi); }
.tp-subs td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.tp-subs td:nth-child(3) { grid-row: 3; font-size: 12.5px; }
.tp-subs td:nth-child(3)::before { content: "by "; }
.tp-subs td:nth-child(4) { grid-row: 3; grid-column: 2; font-size: 12.5px; color: var(--mut); }
.tp-subs td:nth-child(5) { display: none; }
.tp-subs td.tp-subs__a { grid-column: 2; grid-row: 1; }
.tp-cm { grid-template-columns: 34px minmax(0, 1fr); gap: 11px; }
.tp-cm__av { width: 34px; height: 34px; font-size: 13px; }
.tp-sec__a { display: none; }
.tp-bd--low { height: calc(var(--tp-lift) + 260px); }
.tp-mini { gap: 14px; margin-bottom: 18px; }
.tp-mini__p { width: 68px; }
.tp-mini h1 { font-size: 21px; line-height: 1.12; }
.tp-mini__n { white-space: normal; overflow-wrap: anywhere; }
.tp-tabs .tp-tabs__back { display: none; }
.tp-ppl table, .tp-ppl tbody { display: block; }
.tp-ppl thead { display: none; }
.tp-ppl tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--line); }
.tp-ppl tr:first-child { border-top: 0; }
.tp-ppl td, .tp-ppl td.num { display: block; padding: 0; border: 0; font-size: 13px; text-align: left; white-space: normal; }
.tp-ppl td.tp-ppl__who, .tp-ppl td.empty { grid-column: 1 / -1; }
.tp-ppl td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.tp-row--2, .tp-row--3, .tp-row--4, .tp-row--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tp-fs .field:has(textarea) { grid-column: 1 / -1; }
.tp-fs__h span { width: 100%; margin-left: 38px; }
.tp-save { bottom: 10px; padding-left: 10px; }
.tp-save__n { display: none; }
.tp-save .btn-solid { flex: 1; justify-content: center; }
.tp-report__a .btn-solid { flex: 1; justify-content: center; }
}
@media (max-width: 460px) {
.tp-row--2, .tp-row--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.tp-bd img { transition: none; }
}
.up-easy { position: relative; margin: 0 0 34px; scroll-margin-top: 84px; }
.up-easy [hidden], .up-form [hidden], .up-veil[hidden] { display: none !important; }
.up-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.up-drop { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 50px 34px 24px; border: 1px solid var(--line2); border-radius: var(--r-xl); background: radial-gradient(62% 76% at 50% -8%, rgba(124, 245, 196, 0.115), transparent 70%), radial-gradient(38% 50% at 100% 104%, rgba(195, 166, 255, 0.055), transparent 70%), radial-gradient(38% 50% at 0% 104%, rgba(244, 241, 208, 0.04), transparent 70%), var(--card); box-shadow: var(--e2); text-align: center; cursor: pointer; transition: border-color 0.25s, box-shadow 0.35s; }
.up-drop::before { content: ""; position: absolute; inset: 10px; z-index: -1; border: 1.5px dashed rgba(196, 232, 222, 0.2); border-radius: 19px; pointer-events: none; transition: border-color 0.25s, background-color 0.3s; }
.up-drop::after { content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(124, 245, 196, 0.55), rgba(196, 232, 222, 0) 28%, rgba(196, 232, 222, 0) 72%, rgba(195, 166, 255, 0.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.up-drop:hover, .up-drop:focus-within { border-color: rgba(124, 245, 196, 0.36); box-shadow: var(--e2), 0 34px 90px -52px rgba(124, 245, 196, 0.6); }
.up-drop:hover::before, .up-drop:focus-within::before { border-color: rgba(124, 245, 196, 0.6); background-color: rgba(124, 245, 196, 0.022); }
.up-drop__light { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 34%), rgba(124, 245, 196, 0.1), transparent 68%); opacity: 0; pointer-events: none; transition: opacity 0.45s ease; }
.up-drop:hover .up-drop__light, .up-drop:focus-within .up-drop__light { opacity: 1; }
.up-easy.is-bad .up-drop { border-color: rgba(255, 143, 143, 0.4); }
.up-easy.is-bad .up-drop::before { border-color: rgba(255, 143, 143, 0.5); }
.up-drop__seed { position: relative; flex: none; display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 24px; border: 1px solid rgba(124, 245, 196, 0.42); border-radius: 50%; background: radial-gradient(circle at 50% 28%, rgba(124, 245, 196, 0.3), rgba(124, 245, 196, 0.06) 72%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 46px -8px rgba(124, 245, 196, 0.5); color: var(--acc); transition: transform 0.4s var(--ease), box-shadow 0.4s; }
.up-drop__seed svg { width: 28px; height: 28px; transition: transform 0.4s var(--ease); }
.up-drop__seed::before, .up-drop__seed::after { content: ""; position: absolute; inset: -11px; border: 1px solid rgba(124, 245, 196, 0.17); border-radius: 50%; pointer-events: none; transition: inset 0.5s var(--ease), border-color 0.4s; }
.up-drop__seed::after { inset: -24px; border-color: rgba(124, 245, 196, 0.075); }
.up-drop:hover .up-drop__seed { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 60px -6px rgba(124, 245, 196, 0.72); }
.up-drop:hover .up-drop__seed svg { transform: translateY(-2px); }
.up-drop:hover .up-drop__seed::before { inset: -15px; border-color: rgba(124, 245, 196, 0.32); }
.up-drop:hover .up-drop__seed::after { inset: -32px; border-color: rgba(124, 245, 196, 0.14); }
.up-drop h2 { margin: 12px 0 0; font: 700 clamp(30px, 3.5vw, 48px)/1.04 var(--display); letter-spacing: -0.045em; color: var(--hi); }
.up-drop__lede { max-width: 60ch; margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.up-drop__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.up-drop__hint { margin: 14px 0 0; font-size: 13px; color: var(--mut); }
.up-drop__fine { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); text-wrap: balance; }
.up-drop__fine a { color: var(--mut); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; }
.up-drop__fine a:hover { color: var(--hi); }
.up-drop--slim { flex-flow: row wrap; justify-content: flex-start; gap: 14px 20px; padding: 26px 34px; text-align: left; }
.up-drop--slim .up-k, .up-drop--slim .up-drop__lede, .up-drop--slim .up-path, .up-drop--slim .up-drop__fine { display: none; }
.up-drop--slim .up-drop__seed { width: 50px; height: 50px; margin: 0 4px 0 6px; }
.up-drop--slim .up-drop__seed svg { width: 21px; height: 21px; }
.up-drop--slim .up-drop__seed::before { inset: -7px; }
.up-drop--slim .up-drop__seed::after { display: none; }
.up-drop--slim h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.035em; }
.up-drop--slim .up-drop__hint { order: 2; flex: 1 1 260px; margin: 0; }
.up-drop--slim .up-drop__btns { order: 3; margin: 0; }
.up-path { align-self: stretch; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 38px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; text-align: left; }
.up-path li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 2px 18px; }
.up-path li + li { border-left: 1px solid var(--line); }
.up-path__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line2); border-radius: 11px; background: rgba(255, 255, 255, 0.035); color: var(--acc); }
.up-path__ic svg { width: 17px; height: 17px; }
.up-path li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-path b { font: 600 13.5px/1.2 var(--display); letter-spacing: -0.01em; color: var(--hi); }
.up-path small { font-size: 12px; line-height: 1.35; color: var(--mut); }
.up-veil { position: fixed; inset: 0; z-index: 200; display: grid; padding: 16px; background: rgba(4, 8, 10, 0.62); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; }
.up-veil.is-on { opacity: 1; }
.up-veil__in { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed rgba(124, 245, 196, 0.7); border-radius: var(--r-xl); background: radial-gradient(46% 46% at 50% 50%, rgba(124, 245, 196, 0.13), transparent 72%); box-shadow: inset 0 0 140px rgba(124, 245, 196, 0.09); transform: scale(0.985); transition: transform 0.28s var(--ease); }
.up-veil.is-on .up-veil__in { transform: none; }
.up-veil .up-drop__seed { width: 84px; height: 84px; margin-bottom: 30px; }
.up-veil .up-drop__seed svg { width: 34px; height: 34px; }
.up-veil b { font: 700 clamp(30px, 4vw, 52px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--hi); }
.up-veil small { font-size: 15px; color: var(--soft); }
.up-oops { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 13px 18px; border: 1px solid rgba(255, 143, 143, 0.4); border-radius: var(--r-m); background: rgba(255, 143, 143, 0.07); font-size: 14px; font-weight: 550; color: var(--hi); animation: up-in 0.3s var(--ease) both; }
.up-oops svg { width: 18px; height: 18px; color: var(--red); }
.up-work { position: relative; isolation: isolate; overflow: hidden; padding: 30px 32px 28px; border: 1px solid var(--line2); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e2); animation: up-in 0.45s var(--ease) both; }
.up-work__art { position: absolute; inset: -60px -60px auto; z-index: -1; height: 420px; background: center 28% / cover no-repeat; filter: blur(60px) saturate(1.5); opacity: 0; pointer-events: none; transition: opacity 0.8s ease; -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent); mask-image: linear-gradient(180deg, #000 25%, transparent); }
.up-work.has-art .up-work__art { opacity: 0.36; }
.up-hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "p b a"; align-items: start; }
.up-hd__poster { grid-area: p; position: relative; display: grid; place-items: center; align-content: center; gap: 8px; width: 150px; aspect-ratio: 2 / 3; margin-right: 28px; overflow: hidden; border: 1px solid var(--line2); border-radius: 14px; background: rgba(255, 255, 255, 0.03); box-shadow: 0 28px 54px -26px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--dim); text-align: center; }
.up-hd__poster.is-wait, .up-hd__poster.is-none { border-style: dashed; box-shadow: none; }
.up-hd__poster.is-none { width: 104px; }
.up-hd__poster svg { width: 26px; height: 26px; opacity: 0.75; }
.up-hd__poster small { padding: 0 8px; font-size: 11.5px; color: var(--mut); }
.up-hd__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: up-fade 0.5s ease both; }
.up-hd__b { grid-area: b; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.up-hd__state { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font: 600 11.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; color: var(--soft); }
.up-hd__state:empty { display: none; }
.up-easy.is-done .up-hd__state { background: var(--acc-soft); color: var(--acc); }
.up-easy.is-odd .up-hd__state { background: rgba(244, 222, 140, 0.12); color: var(--amber); }
.up-hd__title { margin: 12px 0 0; font: 700 clamp(26px, 2.7vw, 40px)/1.06 var(--display); letter-spacing: -0.042em; color: var(--hi); text-wrap: balance; animation: up-in 0.45s var(--ease) both; }
.up-hd__title span { font-weight: 500; letter-spacing: -0.02em; color: var(--mut); }
.up-hd__name { margin: 10px 0 0; font: 500 13.5px/1.5 var(--mono); letter-spacing: -0.01em; color: var(--soft); overflow-wrap: anywhere; }
.up-hd__title[hidden] + .up-hd__name { margin-top: 12px; font: 600 clamp(16px, 1.6vw, 21px)/1.4 var(--mono); letter-spacing: -0.02em; color: var(--hi); }
.up-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.up-hd__b .up-tags { margin-top: 13px; }
.up-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.045); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.up-tag--cat { border-color: rgba(124, 245, 196, 0.4); background: var(--acc-soft); color: var(--acc); }
.up-tag--uhd { border-color: rgba(244, 241, 208, 0.45); background: rgba(244, 241, 208, 0.1); color: var(--moon); }
.up-hd__ov { display: -webkit-box; max-width: 78ch; margin: 14px 0 0; overflow: hidden; font-size: 14px; line-height: 1.6; color: var(--soft); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.up-hd__ids { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 12px 0 0; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.up-hd__ids > span { white-space: nowrap; }
.up-hd__rate { font-weight: 650; color: var(--moon); }
.up-hd__rate svg { width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; fill: currentColor; stroke: none; }
.up-hd__acts { grid-area: a; display: flex; align-items: center; gap: 6px; margin-left: 20px; }
.up-note { position: relative; margin: 20px 0 0; padding: 12px 16px 12px 46px; border: 1px solid rgba(244, 222, 140, 0.32); border-radius: var(--r-m); background: rgba(244, 222, 140, 0.07); font-size: 13.5px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.up-note::before { content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; background: var(--amber); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4m0 3h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4m0 3h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.up-note b { font-weight: 650; color: var(--amber); }
.up-note a { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
.up-note--dup { border-color: rgba(255, 143, 143, 0.4); background: rgba(255, 143, 143, 0.07); }
.up-note--dup::before { background: var(--red); }
.up-note--dup b { color: var(--red); }
.up-steps { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); margin: 26px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(3, 6, 8, 0.42); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); list-style: none; }
.up-step { --c: var(--dim); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: start; align-items: center; gap: 0 12px; min-width: 0; padding: 16px 20px 21px; border-left: 1px solid var(--line); transition: background-color 0.3s; }
.up-step:first-child { border-left: 0; }
.up-step__ic { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--c) 11%, transparent); color: var(--c); transition: color 0.3s, border-color 0.3s, background-color 0.3s, box-shadow 0.3s; }
.up-step__ic svg { width: 16px; height: 16px; }
.up-step__name { min-width: 0; font: 600 14.5px/1.2 var(--display); letter-spacing: -0.012em; color: var(--hi); }
.up-step__note, .up-step__rate { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--mut); overflow-wrap: anywhere; }
.up-step__note { min-height: 17.5px; margin-top: 11px; }
.up-step__rate { margin-top: 2px; }
.up-step[data-state=wait] .up-step__note:empty::before { content: "waiting its turn"; color: var(--dim); }
.up-step__rate:empty, .up-step:not([data-state=run]) .up-step__rate { display: none; }
.up-step__mark { justify-self: end; display: grid; place-items: center; min-width: 24px; height: 24px; }
.up-step__mark svg, .up-step__mark i, .up-step__pct { display: none; }
.up-step__mark i { font: var(--label); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.up-step__pct { font: 650 30px/0.9 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--hi); }
.up-step--main[data-state=run] .up-step__pct, .up-step--main[data-state=wait] .up-step__pct { display: block; }
.up-step[data-state=wait] .up-step__pct { color: var(--dim); }
.up-step[data-state=wait] .up-step__name { color: var(--soft); }
.up-step[data-state=run] { --c: var(--acc); background: linear-gradient(180deg, rgba(124, 245, 196, 0.06), transparent 82%); }
.up-step[data-state=run] .up-step__ic { box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.08), 0 0 22px rgba(124, 245, 196, 0.25); }
.up-step[data-state=ok] { --c: var(--acc); }
.up-step[data-state=ok] .up-step__mark { border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px rgba(124, 245, 196, 0.42); color: var(--on-acc); animation: up-pop 0.35s var(--ease) both; }
.up-step[data-state=ok] .up-step__ok { display: block; width: 13px; height: 13px; stroke-width: 2.8; }
.up-step[data-state=err] { --c: var(--amber); background: linear-gradient(180deg, rgba(244, 222, 140, 0.055), transparent 82%); }
.up-step[data-state=err] .up-step__mark { color: var(--amber); }
.up-step[data-state=err] .up-step__bad { display: block; width: 19px; height: 19px; }
.up-step[data-state=err] .up-step__note { color: var(--amber); }
.up-step[data-state=skip] .up-step__ic { border-style: dashed; }
.up-step[data-state=skip] .up-step__name { color: var(--mut); }
.up-step[data-state=skip] .up-step__mark i { display: block; }
.up-step__edge { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; background: rgba(255, 255, 255, 0.045); }
.up-step__edge i { position: absolute; inset: 0; background: linear-gradient(90deg, #56dcc9, var(--acc) 70%, var(--acc-hi)); box-shadow: 0 0 12px rgba(124, 245, 196, 0.6); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 0.45s var(--ease), opacity 0.5s; }
.up-step--main .up-step__edge i { transition: transform 0.16s linear, opacity 0.5s; }
.up-step--soft[data-state=run] .up-step__edge i { transform: scaleX(0.86); transition: transform 7s cubic-bezier(0.08, 0.6, 0.2, 1); }
.up-step[data-state=ok] .up-step__edge i { transform: scaleX(1); opacity: 0.55; }
.up-step[data-state=err] .up-step__edge i { background: var(--amber); box-shadow: none; transform: scaleX(1); opacity: 0.5; }
.up-step[data-state=skip] .up-step__edge { display: none; }
.up-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.up-alt:empty { display: none; }
.up-alt__h { flex: none; margin: 0; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.up-alt__list { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.up-alt__none { flex: 1 1 100%; margin: 0; font-size: 13.5px; color: var(--soft); }
.up-cand { display: flex; align-items: center; gap: 10px; max-width: 230px; padding: 5px 13px 5px 5px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s; }
.up-cand:hover { border-color: rgba(124, 245, 196, 0.45); background: rgba(255, 255, 255, 0.06); }
.up-cand.is-on { border-color: rgba(124, 245, 196, 0.65); background: var(--acc-soft); box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.25); }
.up-cand img, .up-cand__none { flex: none; width: 30px; height: 45px; border-radius: 6px; background: var(--surface3); object-fit: cover; }
.up-cand__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.up-cand__t b { overflow: hidden; font-size: 13px; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.up-cand__t small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.up-find { display: flex; flex: 1 1 300px; gap: 8px; min-width: 0; max-width: 460px; margin-left: auto; }
.up-find .input { flex: 1; min-width: 0; height: 38px; padding: 0 16px; border-radius: 999px; }
.up-find .btn { flex: none; height: 38px; }
.up-alt__none + .up-find, .up-alt__h + .up-find { margin-left: 0; }
.up-shots { margin-top: 28px; }
.up-shots__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.up-shots__h h3 { margin: 0; font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.up-shots__h p { margin: 0; font-size: 12.5px; color: var(--mut); }
.up-shots__h .btn { align-self: center; margin-left: auto; }
.up-steps:has([data-step=shots][data-state=run]) ~ .up-shots .up-shots__h .btn { opacity: 0.45; pointer-events: none; }
.up-shots__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.up-shot { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border: 1px solid var(--line2); border-radius: 12px; background: rgba(3, 6, 8, 0.5); box-shadow: 0 14px 26px -18px rgba(0, 0, 0, 0.9); }
.up-shot.is-wait { display: grid; place-items: center; border-style: dashed; box-shadow: none; }
.up-shot.is-wait::before { content: attr(data-n); font: 600 15px var(--display); color: var(--dim); }
.up-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.up-shot.is-up img { animation: up-fade 0.45s ease both; }
.up-shot:hover img { transform: scale(1.04); }
.up-shot figcaption, .up-shot__st { position: absolute; bottom: 7px; padding: 2px 8px; border-radius: 999px; background: rgba(4, 8, 10, 0.8); font: 600 10.5px/16px var(--sans); font-variant-numeric: tabular-nums; color: var(--soft); }
.up-shot figcaption { left: 7px; }
.up-shot__st { right: 7px; }
.up-shot__st:empty { display: none; }
.up-shot.is-kept .up-shot__st { background: var(--acc); color: var(--on-acc); }
.up-shot.is-bad { border-color: rgba(255, 143, 143, 0.6); }
.up-shot.is-bad .up-shot__st { background: var(--red); color: #2a0808; }
.up-shot__x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(4, 8, 10, 0.8); color: var(--hi); cursor: pointer; opacity: 0; transition: opacity 0.2s, background-color 0.15s, color 0.15s; }
.up-shot__x svg { width: 12px; height: 12px; stroke-width: 2.4; }
.up-shot:hover .up-shot__x, .up-shot__x:focus-visible { opacity: 1; }
.up-shot__x:hover { background: var(--red); color: #2a0808; }
@media (hover: none) {
.up-shot__x { opacity: 1; }
.up-drop__drag { display: none; }
}
.up-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; padding: 14px 16px 14px 14px; border: 1px solid rgba(124, 245, 196, 0.36); border-radius: 18px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.14), rgba(124, 245, 196, 0.03)); animation: up-in 0.45s var(--ease) both; }
.up-ready__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 22px rgba(124, 245, 196, 0.5); color: var(--on-acc); }
.up-ready__ic svg { width: 17px; height: 17px; stroke-width: 2.6; }
.up-ready__ic svg + svg, .up-ready.is-odd .up-ready__ic svg:first-child { display: none; }
.up-ready.is-odd .up-ready__ic svg + svg { display: block; stroke-width: 2; }
.up-ready p { flex: 1; min-width: 220px; margin: 0; font-size: 14px; color: var(--soft); }
.up-ready p b { font-weight: 650; color: var(--hi); }
.up-ready.is-odd { border-color: rgba(244, 222, 140, 0.36); background: linear-gradient(90deg, rgba(244, 222, 140, 0.1), rgba(244, 222, 140, 0.02)); }
.up-ready.is-odd .up-ready__ic { background: var(--amber); box-shadow: none; }
.up-alert { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 24px; padding: 16px 20px; border-radius: var(--r-lg); color: var(--soft); }
.up-alert::before { display: none; }
.up-alert__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 143, 143, 0.12); color: var(--red); }
.up-alert.alert--warn .up-alert__ic { background: rgba(244, 222, 140, 0.12); color: var(--amber); }
.up-alert__ic svg { width: 18px; height: 18px; }
.up-alert__b { flex: 1; align-self: center; min-width: 0; }
.up-alert__b p { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--hi); }
.up-alert__b ul { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.up-alert__b li a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(255, 143, 143, 0.4); text-underline-offset: 3px; transition: color 0.15s; }
.up-alert__b li a:hover { color: var(--hi); }
.up-alert .btn { flex: none; align-self: center; }
.up-form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 28px; scroll-margin-top: 84px; }
.up-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.up-sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px 26px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.up-sec__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.up-sec__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line2); border-radius: 50%; background: rgba(255, 255, 255, 0.04); font: 650 12px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--mut); }
.up-sec__n svg { width: 13px; height: 13px; }
.up-sec__h h2 { font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.up-sec__h p { margin: 0 0 0 auto; font-size: 12.5px; color: var(--mut); text-align: right; }
.up-sec__h p a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; }
.up-sec__h p a:hover { color: var(--acc); }
.up-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; gap: 16px 14px; }
.up-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.up-cols--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.up-cols--mi { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.up-form .field { min-width: 0; scroll-margin-top: 110px; }
.up-form .field > label:not(.up-dz), .up-form .field__label { display: flex; align-items: center; gap: 8px; }
.up-opt { font-size: 11.5px; font-weight: 500; color: var(--dim); }
.up-m { font-family: var(--mono); font-size: 13px; letter-spacing: -0.01em; }
textarea.up-m { font-size: 12.5px; line-height: 1.5; white-space: pre; overflow-x: auto; }
.up-form .field .err { display: flex; align-items: baseline; gap: 7px; font-weight: 550; }
.up-form .field .err::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateY(-1px); }
.up-again { color: var(--amber); }
.up-form .select[aria-invalid=true] { border-color: rgba(255, 143, 143, 0.7); }
.up-form .field.is-auto > label:not(.up-dz)::after, .up-form .field.is-auto > .field__label::after { content: "auto"; padding: 1px 7px; border-radius: 999px; background: var(--acc-soft); font: 700 9.5px/15px var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--acc); }
.up-form .field.is-auto .input, .up-form .field.is-auto .select, .up-form .field.is-auto .textarea, .up-form .field.is-auto .up-dz { border-color: rgba(124, 245, 196, 0.42); animation: up-auto 0.6s ease-out; }
.up-dz { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 13px 14px; border: 1.5px dashed var(--line3); border-radius: var(--r-m); background: rgba(3, 6, 8, 0.35); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; }
.up-dz:hover { border-color: rgba(124, 245, 196, 0.55); background: rgba(124, 245, 196, 0.035); }
.up-dz.is-over { border-style: solid; border-color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.12); }
.up-dz.has-file { border-style: solid; border-color: rgba(124, 245, 196, 0.4); background: rgba(124, 245, 196, 0.05); }
.up-dz:has([aria-invalid=true]):not(.has-file) { border-color: rgba(255, 143, 143, 0.65); }
.up-dz__in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.up-dz:has(.up-dz__in:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.up-dz__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line2); border-radius: 13px; background: rgba(255, 255, 255, 0.05); color: var(--mut); transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.up-dz.has-file .up-dz__ic, .up-dz.is-over .up-dz__ic { border-color: rgba(124, 245, 196, 0.35); background: var(--acc-soft); color: var(--acc); }
.up-dz__ic svg { width: 20px; height: 20px; }
.up-dz__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.up-dz__t b { overflow: hidden; font-size: 13.5px; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.up-dz:not(.has-file) .up-dz__t b { font-weight: 500; color: var(--soft); }
.up-dz__t small { font-size: 12px; color: var(--mut); }
.up-dz__b { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)); font-size: 12.5px; font-weight: 550; color: var(--hi); pointer-events: none; }
.up-more { margin-top: -4px; font-size: 13px; color: var(--soft); }
.up-more summary { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font-weight: 550; color: var(--mut); cursor: pointer; list-style: none; user-select: none; transition: color 0.15s; }
.up-more summary::-webkit-details-marker { display: none; }
.up-more summary:hover { color: var(--hi); }
.up-more summary svg { width: 13px; height: 13px; transition: transform 0.2s; }
.up-more[open] summary svg { transform: rotate(90deg); }
.up-more ul { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding-left: 20px; line-height: 1.55; }
.up-more code, .up-know code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); font: 12px var(--mono); color: var(--text); }
.up-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.up-checks--row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.up-tick { align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: var(--r-m); background: rgba(3, 6, 8, 0.3); scroll-margin-top: 110px; transition: border-color 0.15s, background-color 0.15s; }
.up-tick:hover { border-color: var(--line3); }
.up-tick:has(input:checked) { border-color: rgba(124, 245, 196, 0.45); background: rgba(124, 245, 196, 0.05); }
.up-tick input { margin-top: 1px; }
.up-tick > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.up-tick b { font-size: 14px; font-weight: 600; color: var(--hi); }
.up-tick small { font-size: 12.5px; line-height: 1.45; color: var(--mut); }
.up-staff { border-color: rgba(244, 241, 208, 0.2); background: linear-gradient(180deg, rgba(244, 241, 208, 0.05), rgba(244, 241, 208, 0.012)); }
.up-staff .up-sec__n { border-color: rgba(244, 241, 208, 0.35); color: var(--moon); }
.up-side { align-self: stretch; min-width: 0; }
.up-side__in { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: none; }
.up-side__in::-webkit-scrollbar { display: none; }
.up-sum { order: -1; display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 20px; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--card-hi); box-shadow: var(--e2); }
.up-sum__h { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.up-sum__h::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px var(--acc); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 0.45s var(--ease); }
.up-sum__h h2 { font: 650 17px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.up-sum__n { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--soft); }
.up-sum__n:empty { display: none; }
.up-sum.is-ready .up-sum__n { background: var(--acc-soft); color: var(--acc); }
.up-sum__rel { display: flex; align-items: center; gap: 13px; animation: up-in 0.4s var(--ease) both; }
.up-sum__poster { flex: none; display: grid; place-items: center; width: 50px; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--line2); border-radius: 8px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.85); color: var(--dim); }
.up-sum__poster img { width: 100%; height: 100%; object-fit: cover; }
.up-sum__what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.up-sum__what small { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.up-sum__what b { font: 650 15.5px/1.25 var(--display); letter-spacing: -0.02em; color: var(--hi); overflow-wrap: anywhere; }
.up-sum__what em { font-size: 12.5px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--mut); }
.up-sum__what em:empty { display: none; }
.up-sum__list { display: flex; flex-direction: column; margin: -4px -8px; padding: 0; list-style: none; }
.up-sum__list a { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 8px; border-radius: 10px; font-size: 13.5px; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.up-sum__list a:hover { background: rgba(255, 255, 255, 0.055); color: var(--hi); }
.up-sum__list i { width: 18px; height: 18px; border: 1.5px solid var(--line3); border-radius: 50%; background: center / 11px no-repeat; transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s; }
.up-sum__list li.is-in i { border-color: transparent; background-color: var(--acc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304110c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); box-shadow: 0 0 10px rgba(124, 245, 196, 0.35); }
.up-sum__list span { font-weight: 550; }
.up-sum__list li.is-in span { color: var(--hi); }
.up-sum__list em { justify-self: end; max-width: 100%; overflow: hidden; font-size: 12.5px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.up-go { justify-content: center; width: 100%; height: 48px; font-size: 15px; }
.up-sum.is-pending .up-go { border-color: var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--hi) !important; font-weight: 600; }
.up-sum.is-pending .up-go:hover { border-color: var(--line3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)); }
.up-sum__fine { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); text-align: center; text-wrap: balance; }
.up-know { padding: 2px 8px 0; }
.up-know h2 { margin: 0 0 11px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.up-know ul { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.55; color: var(--mut); }
.up-know li { position: relative; padding-left: 16px; }
.up-know li::before { content: ""; position: absolute; top: 0.62em; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--line3); }
@keyframes up-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes up-fade { from { opacity: 0; } }
@keyframes up-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes up-auto { from { box-shadow: 0 0 0 5px rgba(124, 245, 196, 0.26), inset 0 1px 2px rgba(0, 0, 0, 0.35); } }
@media (max-width: 1240px) {
.up-form { grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; }
.up-cols--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.up-path li { padding: 2px 12px; gap: 10px; }
.up-hd__poster { width: 132px; margin-right: 24px; }
}
@media (max-width: 1000px) {
.up-form { grid-template-columns: minmax(0, 1fr); }
.up-side__in { position: static; max-height: none; overflow: visible; }
.up-sum { order: 0; }
.up-know { padding: 4px 8px 2px; }
.up-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-shots__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.up-step:nth-child(odd) { border-left: 0; }
.up-step:nth-child(n+3) { border-top: 1px solid var(--line); }
.up-path { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; padding-top: 0; border-top: 0; }
.up-path li, .up-path li + li { gap: 8px; padding: 5px 13px 5px 6px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.03); }
.up-path__ic { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--acc-soft); }
.up-path__ic svg { width: 13px; height: 13px; }
.up-path b { font: 550 12.5px/1.2 var(--sans); letter-spacing: 0; color: var(--soft); }
.up-path small { display: none; }
}
@media (max-width: 640px) {
.up-easy { margin-bottom: 24px; }
.up-drop { padding: 38px 20px 22px; border-radius: 24px; }
.up-drop::before { inset: 7px; border-radius: 18px; }
.up-drop__seed { width: 60px; height: 60px; margin-bottom: 20px; }
.up-drop__seed svg { width: 25px; height: 25px; }
.up-drop h2 { font-size: 30px; }
.up-drop__lede { font-size: 14.5px; }
.up-drop__drag { display: none; }
.up-drop__btns { align-self: stretch; flex-direction: column; margin-top: 22px; }
.up-drop--slim { padding: 24px 22px 22px; }
.up-drop--slim .up-drop__btns { flex: 1 1 100%; }
.up-drop__btns .btn { justify-content: center; }
.up-path { margin-top: 24px; gap: 6px; }
.up-work { padding: 20px 16px 18px; border-radius: 24px; }
.up-hd { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "p b" "a a"; }
.up-hd__poster { width: 84px; margin-right: 14px; border-radius: 10px; }
.up-hd__poster small { display: none; }
.up-hd__poster.is-none { width: 64px; }
.up-hd__title { margin-top: 9px; font-size: 22px; }
.up-hd__name { font-size: 12px; }
.up-hd__title[hidden] + .up-hd__name { font-size: 15px; }
.up-hd__ov { font-size: 13.5px; -webkit-line-clamp: 4; }
.up-hd__acts { margin: 16px 0 0; }
.up-hd__acts .btn { flex: 1; justify-content: center; }
.up-steps { grid-template-columns: minmax(0, 1fr); margin-top: 18px; border-radius: 18px; }
.up-step { padding: 13px 14px 17px; border-left: 0; }
.up-step + .up-step { border-top: 1px solid var(--line); }
.up-step__ic { grid-row: 1 / span 3; align-self: start; }
.up-step__note, .up-step__rate { grid-column: 2 / -1; }
.up-step__note { margin-top: 2px; }
.up-step__pct { font-size: 22px; }
.up-step__edge { height: 3px; }
.up-find { flex-basis: 100%; max-width: none; margin-left: 0; }
.up-cand { max-width: 100%; }
.up-shots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.up-shots__h .btn { margin-left: 0; }
.up-ready .btn { flex: 1 1 100%; justify-content: center; }
.up-alert { flex-wrap: wrap; padding: 14px 16px; }
.up-alert .btn { flex: 1 1 100%; justify-content: center; }
.up-sec { gap: 16px; padding: 18px 16px 20px; border-radius: 20px; }
.up-sec__h p { flex: 1 1 100%; margin: 0; text-align: left; }
.up-cols--2, .up-cols--mi { grid-template-columns: minmax(0, 1fr); }
.up-cols--3, .up-cols--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-cols--lead > :first-child { grid-column: 1 / -1; }
.up-dz { gap: 12px; padding: 12px; }
.up-dz__b { display: none; }
.up-sum { padding: 18px 16px; border-radius: 20px; }
.up-veil { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.up-work, .up-oops, .up-ready, .up-hd__title, .up-hd__poster img, .up-shot.is-up img, .up-sum__rel, .up-step[data-state=ok] .up-step__mark, .up-form .field.is-auto .input, .up-form .field.is-auto .select, .up-form .field.is-auto .textarea, .up-form .field.is-auto .up-dz { animation: none; }
.up-drop__seed, .up-drop__seed svg, .up-drop__seed::before, .up-drop__seed::after, .up-veil__in, .up-step__edge i, .up-shot img, .up-sum__h::after { transition: none; }
}
.ms-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ms { display: grid; grid-template-columns: clamp(300px, 31%, 352px) minmax(0, 1fr); height: clamp(460px, calc(100vh - var(--ms-off, 112px)), 1120px); height: clamp(460px, calc(100dvh - var(--ms-off, 112px)), 1120px); overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e2); }
.acct__body > .alert:has(+ .ms) { margin-top: 0; }
.acct__body > .alert + .ms { margin-top: -4px; }
.ms-face { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface3); box-shadow: 0 0 0 1px var(--line2); }
.ms-face--txt { --c: var(--acc); display: grid; place-items: center; background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--c) 44%, #17332c), color-mix(in srgb, var(--c) 13%, #0c1518) 80%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 36%, transparent); color: var(--hi); font: 700 17px/1 var(--display); text-transform: uppercase; }
.ms-side { container: ms-side / inline-size; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: rgba(3, 6, 8, 0.32); }
.ms-side__h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 20px 16px 14px 22px; }
.ms-side__h h1, .ms-side__h h2 { font: 700 25px/1.1 var(--display); letter-spacing: -0.042em; color: var(--hi); }
.ms-side__m { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ms-side__m p { margin: 0; font-size: 12.5px; color: var(--mut); }
.ms-side__m p b { font-weight: 650; color: var(--soft); }
.ms-unread-n { font-weight: 650; color: var(--acc); }
.ms-side__new { height: 34px; padding: 0 14px 0 12px; font-size: 13px; }
.ms-side__new svg { width: 14px; height: 14px; }
.ms-side__all { display: flex; margin: 0 0 0 auto; }
.ms-side__all button { padding: 2px 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--mut); cursor: pointer; transition: color 0.15s; }
.ms-side__all button:hover { color: var(--acc); }
.ms-list { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 2px 10px 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(196, 232, 222, 0.16) transparent; }
.ms-item { position: relative; flex: none; border-radius: var(--r-m); }
.ms-item__a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 13px; padding: 11px 12px; border-radius: inherit; transition: background-color 0.15s, box-shadow 0.15s; }
.ms-item__a:hover { background: rgba(255, 255, 255, 0.045); }
.ms-item__a:focus-visible { outline-offset: -2px; }
.ms-item__face { position: relative; grid-row: 1 / span 3; align-self: start; margin-top: 2px; }
.ms-item__top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ms-item__who { flex: 1; min-width: 0; overflow: hidden; font-size: 13.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.ms-item__who b { font-weight: 650; }
.ms-item time { flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim); }
.ms-item__subj, .ms-item__snip { overflow: hidden; font-variant-ligatures: no-contextual; text-overflow: ellipsis; white-space: nowrap; }
.ms-item__subj { font-size: 13.5px; font-weight: 500; color: var(--soft); }
.ms-item__snip { font-size: 12.5px; color: var(--mut); }
.ms-item__snip i { font-style: normal; color: var(--dim); }
.ms-item.is-unread .ms-item__subj { font-weight: 650; color: var(--hi); }
.ms-item.is-unread .ms-item__snip { color: var(--soft); }
.ms-item.is-unread time { font-weight: 600; color: var(--acc); }
.ms-item.is-unread .ms-item__face::after { content: ""; position: absolute; top: -1px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #090e11, 0 0 12px rgba(124, 245, 196, 0.7); }
.ms-item.is-on .ms-item__a { background: linear-gradient(90deg, rgba(124, 245, 196, 0.16), rgba(124, 245, 196, 0.04)); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.17); }
.ms-item.is-on::before { content: ""; position: absolute; z-index: 1; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.ms-item.is-on .ms-item__subj { color: var(--hi); }
.ms-item__del { position: absolute; right: 9px; bottom: 9px; display: flex; opacity: 0; transition: opacity 0.15s; }
.ms-item__del button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: #131c21; box-shadow: -10px 0 12px -2px #10181c; color: var(--mut); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.ms-item__del button svg { width: 14px; height: 14px; }
.ms-item__del button:hover { border-color: rgba(255, 143, 143, 0.5); color: var(--red); }
.ms-item:hover .ms-item__del, .ms-item__del:focus-within { opacity: 1; }
@media (hover: none) {
.ms-item__del { display: none; }
}
.ms-side__none { margin: 0; padding: 10px 22px 22px; font-size: 13px; line-height: 1.55; color: var(--mut); }
.ms-side__none a, .ms-idle p a, .nt-none p a, .ms-ro a { color: var(--soft); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.ms-side__none a:hover, .ms-idle p a:hover, .nt-none p a:hover, .ms-ro a:hover { color: var(--acc); }
.ms-pg { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--mut); }
.ms-pg a { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 28px; padding: 0 10px; border-radius: 999px; font-weight: 550; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.ms-pg a:hover { background: rgba(255, 255, 255, 0.06); color: var(--hi); }
.ms-pg a svg { width: 12px; height: 12px; }
.ms-pg a[rel=prev] svg { transform: rotate(180deg); }
.ms-pg a[rel=next] { justify-self: end; }
.ms-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: radial-gradient(760px 340px at 104% -8%, rgba(244, 241, 208, 0.055), transparent 70%); }
.ms-top { display: flex; align-items: center; gap: 14px; min-height: 77px; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--line); }
.ms-top__face { flex: none; }
.ms-top__ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(124, 245, 196, 0.28); border-radius: 50%; background: var(--acc-soft); color: var(--acc); }
.ms-top__ic svg { width: 18px; height: 18px; }
.ms-top__t { flex: 1; min-width: 0; }
.ms-top h1 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 650 19px/1.22 var(--display); letter-spacing: -0.03em; color: var(--hi); overflow-wrap: anywhere; text-wrap: balance; }
.ms-top p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); overflow-wrap: anywhere; }
.ms-top__who { display: inline-block; max-width: 100%; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ms-top__who:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-top p .rank { margin-left: 3px; vertical-align: 1px; }
.ms-top__n { white-space: nowrap; }
.ms-top__a { flex: none; display: flex; }
.ms-top__a .btn { color: var(--mut) !important; }
.ms-top__a .btn:hover { background: rgba(255, 143, 143, 0.09); color: var(--red) !important; }
.ms-top__a .btn svg { width: 14px; height: 14px; }
.ms-back { display: none; flex: none; place-items: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.ms-back:hover { background: rgba(255, 255, 255, 0.07); color: var(--hi); }
.ms-back svg { width: 18px; height: 18px; transform: rotate(180deg); }
.ms-pane--idle { align-items: center; justify-content: center; }
.ms-idle, .nt-none { display: flex; flex-direction: column; align-items: center; max-width: 380px; margin: auto; padding: 36px 24px 44px; text-align: center; }
.ms-idle__moon { position: relative; display: block; width: 128px; height: 128px; margin-bottom: 18px; }
.ms-idle__moon::before { content: ""; position: absolute; inset: -72px; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 208, 0.12), rgba(244, 241, 208, 0.03) 58%, transparent); pointer-events: none; }
.ms-idle__moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.1), transparent 42%), radial-gradient(circle at 36% 32%, transparent 52%, rgba(6, 9, 12, 0.34) 100%); pointer-events: none; }
.ms-idle__moon .moon { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0 22px rgba(244, 241, 208, 0.3)); }
.ms-idle__moon .moon__disc { fill: rgba(244, 241, 208, 0.1); }
.ms-idle h2, .nt-none h2 { align-self: stretch; font: 650 22px/1.2 var(--display); letter-spacing: -0.032em; color: var(--hi); }
.ms-idle__moon + h2::before { content: ""; display: block; height: 1px; margin: 0 0 24px; background: linear-gradient(90deg, transparent, rgba(124, 245, 196, 0.32) 28%, rgba(244, 241, 208, 0.32) 72%, transparent); }
.ms-idle p, .nt-none p { margin: 9px 0 0; font-size: 14px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.ms-idle--sm h2 { font-size: 18px; }
.ms-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 22px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(196, 232, 222, 0.18) transparent; -webkit-mask-image: linear-gradient(180deg, transparent, #000 16px); mask-image: linear-gradient(180deg, transparent, #000 16px); }
.ms-scroll:focus-visible { outline-offset: -3px; }
.ms-msgs { display: flex; flex-direction: column; margin: auto 0 0; padding: 0; list-style: none; }
.ms-day { display: flex; align-items: center; gap: 16px; margin: 24px 0 4px; font: var(--label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); }
.ms-day:first-child { margin-top: 6px; }
.ms-day::before, .ms-day::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line2)); }
.ms-day::after { background: linear-gradient(90deg, var(--line2), transparent); }
.ms-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 11px; margin-top: 16px; scroll-margin: 90px 0 24px; }
.ms-msg--mine { grid-template-columns: minmax(0, 1fr); }
.ms-msg.is-cont { margin-top: 4px; }
.ms-msg__face { margin-top: 21px; }
.ms-msg__face .ms-face { width: 36px; height: 36px; font-size: 14px; }
.ms-msg.is-cont .ms-msg__face { visibility: hidden; height: 0; margin: 0; }
.ms-msg__b { grid-column: -2; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(80%, 660px); }
.ms-msg--mine .ms-msg__b { align-items: flex-end; justify-self: end; }
.ms-msg__h { display: flex; align-items: baseline; gap: 8px; max-width: calc(100% - 8px); margin: 0 4px 5px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim); }
.ms-msg__h a, .ms-msg__h b { min-width: 0; overflow: hidden; font-size: 12.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ms-msg__h time { flex: none; }
.ms-msg__h b { color: var(--soft); }
.ms-msg__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ms-msg.is-cont .ms-msg__h { display: none; }
.ms-bub { max-width: 100%; min-width: 0; padding: 9px 15px 10px; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.038)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 20px -16px rgba(0, 0, 0, 0.9); }
.ms-msg--mine .ms-bub { border-color: rgba(124, 245, 196, 0.25); background: linear-gradient(180deg, rgba(124, 245, 196, 0.185), rgba(124, 245, 196, 0.085)); box-shadow: inset 0 1px 0 rgba(168, 251, 220, 0.14), 0 10px 20px -16px rgba(0, 0, 0, 0.9); }
.ms-msg:not(.ms-msg--mine).is-cont .ms-bub { border-top-left-radius: 7px; }
.ms-msg:not(.ms-msg--mine):has(+ .is-cont) .ms-bub { border-bottom-left-radius: 7px; }
.ms-msg--mine.is-cont .ms-bub { border-top-right-radius: 7px; }
.ms-msg--mine:has(+ .is-cont) .ms-bub { border-bottom-right-radius: 7px; }
.ms-msg.is-new .ms-bub { animation: ms-land 0.5s var(--ease) backwards; }
@keyframes ms-land { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.ms-bub .bb { font-size: 14px; line-height: 1.52; font-variant-ligatures: no-contextual; color: var(--text); overflow-wrap: anywhere; }
.ms-msg--mine .ms-bub .bb { color: var(--hi); }
.ms-bub .bb > :first-child { margin-top: 0; }
.ms-bub .bb > :last-child { margin-bottom: 0; }
.ms-bub .bb a { color: var(--acc); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.ms-bub .bb a:hover { text-decoration-color: currentColor; }
.ms-bub .bb img { max-width: 100%; max-height: 340px; height: auto; border-radius: 10px; }
.ms-bub .bb pre, .ms-bub .bb .bb-code, .ms-bub .bb .bb-tablewrap { max-width: 100%; overflow-x: auto; }
.ms-bub .bb .bb-quote, .ms-bub .bb blockquote { margin: 6px 0; padding: 7px 12px; border-left: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 0 10px 10px 0; background: rgba(0, 0, 0, 0.2); font-size: 13.5px; color: var(--soft); }
.ms-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 10px; margin: 0; padding: 9px 16px 12px 18px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)); }
.ms-composer .bbbar { grid-area: 1 / 1 / 2 / -1; flex-wrap: nowrap; margin: 0 -4px; padding: 0; overflow-x: auto; border: 0; border-radius: 0; background: none; scrollbar-width: none; }
.ms-composer .bbbar::-webkit-scrollbar { display: none; }
.ms-composer .bbbar button { flex: none; }
.ms-composer .bbbar__gap { flex: 1 0 8px; }
.ms-composer .bbbar__pv { position: sticky; right: 0; background: var(--surface) !important; box-shadow: -12px 0 10px -4px #0b1114; }
.ms-composer .bbbar__pv[aria-pressed="true"] { background: #12251f !important; }
.ms-composer .textarea, .ms-composer .bbpv { grid-area: 2 / 1; min-height: 46px; max-height: min(36dvh, 300px); border-radius: 16px; }
.ms-composer .textarea { padding: 11px 15px; line-height: 1.5; resize: none; }
.ms-composer .bbpv { overflow-y: auto; padding: 11px 15px; }
.ms-composer > .btn { grid-area: 2 / 2; height: 46px; padding: 0 20px 0 17px; }
.ms-composer__hint { grid-area: 3 / 1 / 4 / -1; margin: 0 2px; font-size: 11.5px; color: var(--dim); }
.ms-composer__hint kbd { padding: 0 5px; border: 1px solid var(--line2); border-radius: 5px; background: rgba(255, 255, 255, 0.04); font: 10.5px/16px var(--mono); color: var(--mut); }
.ms-composer .draftnote { grid-area: 4 / 1 / 5 / -1; margin: 0 2px; }
.ms-note { margin: 0 16px 10px 18px; }
.ms-ro { margin: 0; padding: 15px 22px 17px; border-top: 1px solid var(--line); background: rgba(3, 6, 8, 0.25); font-size: 13px; line-height: 1.5; color: var(--mut); }
.ms-ro b { font-weight: 650; color: var(--soft); }
.ms-new { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; max-width: none; margin: 0; padding: 20px 22px 18px; overflow-y: auto; scrollbar-width: thin; }
.ms-new__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.ms-new__row > label { font-size: 13px; font-weight: 600; color: var(--mut); }
.ms-new__row > .help, .ms-new__row > .err { grid-column: 2; }
.ms-new__body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 7px; min-height: 240px; }
.ms-new__body > label { font-size: 13px; font-weight: 600; color: var(--mut); }
.ms-new__body .bbbar { margin: 0; }
.ms-new__body .textarea, .ms-new__body .bbpv { flex: 1 0 auto; min-height: 180px; }
.ms-new__a { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.ms-new__a .ms-composer__hint { margin-right: auto; }
@media (max-width: 1180px) {
.ms { grid-template-columns: clamp(264px, 34%, 320px) minmax(0, 1fr); height: clamp(460px, calc(100vh - var(--ms-off, 158px)), 1120px); height: clamp(460px, calc(100dvh - var(--ms-off, 158px)), 1120px); }
.ms-side__h { padding-left: 18px; }
}
@container ms-side (max-width: 335px) {
.ms-side__new { justify-content: center; width: 36px; height: 36px; padding: 0; }
.ms-side__new span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-side__new svg { width: 15px; height: 15px; }
}
@media (max-width: 760px), (max-height: 540px) {
.ms { display: block; height: auto; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.ms-side, .ms-pane { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.ms-side__h { padding: 18px 14px 12px 18px; }
.ms-list { overflow: visible; padding: 2px 8px 10px; }
.ms--open .ms-side, .ms--new .ms-side, .ms--idle .ms-pane { display: none; }
.ms--empty .ms-pane { display: flex; margin-top: 14px; }
.ms--empty .ms-side__none { display: none; }
.ms--empty .ms-side__h { padding-bottom: 18px; }
.ms-pane { min-height: calc(100dvh - var(--ms-top, 0px) - 10px); }
.ms--idle .ms-pane { min-height: 0; }
.ms-top { position: sticky; top: var(--ms-top, 0px); z-index: 5; gap: 11px; min-height: 0; padding: 11px 10px 11px 14px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: rgba(9, 14, 17, 0.9); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.ms-top .ms-face, .ms-top__ic { width: 38px; height: 38px; font-size: 15px; }
.ms-top h1 { font-size: 16.5px; }
.ms-top p { margin-top: 2px; }
.ms-top__n { display: none; }
.ms-top__a .btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
.ms-top__a .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ms-top__a .btn svg { width: 16px; height: 16px; }
.ms-back { display: inline-grid; }
.ms-scroll { padding: 10px 12px 16px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.ms-msg { column-gap: 8px; scroll-margin: 140px 0 170px; }
.ms-msg:not(.ms-msg--mine) { grid-template-columns: 30px minmax(0, 1fr); }
.ms-msg__face .ms-face { width: 30px; height: 30px; font-size: 12px; }
.ms-msg__b { max-width: 88%; }
.ms-composer { position: sticky; bottom: 0; z-index: 5; gap: 6px 8px; padding: 7px 10px max(10px, env(safe-area-inset-bottom)) 12px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: rgba(9, 14, 17, 0.92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.ms-composer .textarea { font-size: 16px; padding: 10px 14px; }
.ms-composer .textarea, .ms-composer .bbpv { max-height: min(30dvh, 210px); }
.ms-composer > .btn { padding: 0 16px 0 14px; }
.ms-composer__hint { display: none; }
.ms-ro { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ms-new { padding: 16px 14px 16px; overflow: visible; }
.ms-new__row { grid-template-columns: minmax(0, 1fr); }
.ms-new__row > .help, .ms-new__row > .err { grid-column: 1; }
.ms-new .input, .ms-new .textarea { font-size: 16px; }
.ms-idle__moon { width: 104px; height: 104px; }
}
.nt-unread-n { font-weight: 650; color: var(--acc); }
.nt-feed { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nt-day { margin: 22px 0 4px; }
.nt-day:first-child { margin-top: 2px; }
.nt-day h2 { display: flex; align-items: center; gap: 16px; font: 650 15px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.nt-day h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line2), transparent 85%); }
.nt-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 0 16px; padding: 11px 12px; border-radius: var(--r-m); transition: background-color 0.15s; }
.nt-row:hover { background: rgba(255, 255, 255, 0.03); }
.nt-row::before { content: ""; position: absolute; left: 31.5px; top: 55px; bottom: -11px; width: 1px; background: var(--line2); }
.nt-row:has(+ .nt-day)::before, .nt-row:last-child::before { display: none; }
.nt-ic { --k: var(--soft); position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--k) 26%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--k) 9%, transparent); color: var(--k); }
.nt-ic svg { width: 17px; height: 17px; }
.nt-ic--social { --k: var(--bmoon); }
.nt-ic--bonus { --k: var(--moon); }
.nt-ic--up { --k: var(--acc); }
.nt-ic--warn { --k: var(--red); }
.nt-row__t { min-width: 0; padding-top: 1px; }
.nt-row__line { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.45; font-variant-ligatures: no-contextual; color: var(--mut); overflow-wrap: anywhere; transition: color 0.15s; }
.nt-row__line b { font-weight: 600; color: var(--soft); }
.nt-row__line > span:only-child { color: var(--soft); }
a.nt-row__line:hover b, a.nt-row__line:hover > span:only-child { color: var(--acc); }
.nt-row__m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; margin: 5px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim); }
.nt-kind { --k: var(--mut); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--k) 80%, var(--mut)); }
.nt-kind--social { --k: var(--bmoon); }
.nt-kind--bonus { --k: var(--moon); }
.nt-kind--up { --k: var(--acc); }
.nt-kind--warn { --k: var(--red); }
.nt-row__m time::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: 9px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: 0.7; }
.nt-row__new { padding: 0 8px; border-radius: 999px; background: var(--acc-soft); font-size: 10.5px; font-weight: 650; line-height: 17px; letter-spacing: 0.04em; color: var(--acc); }
.nt-row.is-unread { background: linear-gradient(90deg, rgba(124, 245, 196, 0.075), rgba(124, 245, 196, 0.016) 72%); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.09); }
.nt-row.is-unread .nt-row__line { color: var(--soft); }
.nt-row.is-unread .nt-row__line b, .nt-row.is-unread .nt-row__line > span:only-child { color: var(--hi); }
.nt-row.is-unread .nt-ic::after, .pop__i.is-unread .pop__ic::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #0a1013, 0 0 10px rgba(124, 245, 196, 0.6); }
.nt-row:not(.is-unread) .nt-ic { opacity: 0.82; }
.nt-row__n { display: flex; align-items: center; gap: 2px; }
.nt-row__n form { display: flex; }
.nt-act { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--mut); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.nt-act svg { width: 15px; height: 15px; }
.nt-act:hover { border-color: var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--acc); }
.nt-act--x:hover { border-color: rgba(255, 143, 143, 0.35); color: var(--red); }
@media (hover: hover) {
.nt-row__n { opacity: 0; transition: opacity 0.15s; }
.nt-row:hover .nt-row__n, .nt-row:focus-within .nt-row__n { opacity: 1; }
}
.nt-none { padding: 56px 24px 72px; }
.nt-none__ic { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; border: 1px solid rgba(244, 241, 208, 0.22); border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(244, 241, 208, 0.13), rgba(244, 241, 208, 0.035) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 46px rgba(244, 241, 208, 0.1); color: var(--moon); }
.nt-none__ic svg { width: 28px; height: 28px; stroke-width: 1.5; }
.nt-pg { margin-top: 8px; border-top: 0; }
@media (max-width: 640px) {
.nt-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; padding: 10px 6px 10px 8px; }
.nt-row::before { left: 25.5px; top: 50px; }
.nt-row .nt-ic { width: 36px; height: 36px; }
.nt-row__line { font-size: 13.5px; }
.nt-row__n { flex-direction: column; }
}
.pop__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px 11px; }
.pop__h b { font: 650 15.5px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.pop__l { display: flex; flex-direction: column; gap: 1px; max-height: min(64vh, 472px); margin: 0; padding: 0 8px 14px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(196, 232, 222, 0.16) transparent; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.pop__i { flex: none; }
.pop__i > a, .pop__i > span { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 0 12px; padding: 9px 10px; border-radius: 14px; color: var(--mut); transition: background-color 0.12s; }
.pop__i > a:hover { background: rgba(255, 255, 255, 0.06); }
.pop__i > a:focus-visible { outline-offset: -2px; }
.pop__ic { width: 34px; height: 34px; }
.pop__ic svg { width: 15px; height: 15px; }
.pop__i.is-unread .pop__ic::after { width: 9px; height: 9px; box-shadow: 0 0 0 2.5px #0b1114; }
.pop__i:not(.is-unread) .pop__ic { opacity: 0.8; }
.pop__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-variant-ligatures: no-contextual; }
.pop__kind { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.pop__text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; line-height: 1.4; color: var(--mut); overflow-wrap: anywhere; }
.pop__i.is-unread .pop__kind { color: var(--hi); }
.pop__i.is-unread .pop__text { color: var(--soft); }
.pop__i time { padding-top: 2px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.pop__i.is-unread time { font-weight: 600; color: var(--acc); }
.pop__empty { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 26px 20px 24px; text-align: center; font-size: 12.5px; color: var(--mut); }
.pop__empty svg { width: 26px; height: 26px; margin-bottom: 8px; color: var(--moon); filter: drop-shadow(0 0 10px rgba(244, 241, 208, 0.4)); }
.pop__empty b { font: 650 14.5px var(--display); letter-spacing: -0.02em; color: var(--hi); }
.pop__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px 12px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.018); }
.pop__f a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--soft); transition: color 0.15s; }
.pop__f a svg { width: 12px; height: 12px; }
.pop__f a:hover { color: var(--acc); }
.pop__f form { display: flex; margin: 0; }
.pop__f button { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--mut); cursor: pointer; transition: color 0.15s; }
.pop__f button:hover { color: var(--hi); }
@media (prefers-reduced-motion: reduce) {
.ms-msg.is-new .ms-bub { animation: none; }
}
.fz { --fz: var(--acc); }
.fz-h0 { --fz: var(--moon); }
.fz-h1 { --fz: var(--acc); }
.fz-h2 { --fz: var(--lav); }
.fz-h3 { --fz: var(--bmoon); }
.fz-h4 { --fz: var(--amber); }
.fz > .alert { margin: 0 0 20px; }
.fz kbd { padding: 1px 6px; border: 1px solid var(--line2); border-radius: 6px; background: rgba(255, 255, 255, 0.04); font: 11px/18px var(--mono); color: var(--soft); }
.fz-face { box-sizing: border-box; flex: none; width: var(--s, 36px); height: var(--s, 36px); padding: clamp(1.5px, calc(var(--s, 36px) * 0.055), 3px); border: 1.5px solid color-mix(in srgb, var(--c, #9cb5aa) 72%, transparent); border-radius: 50%; object-fit: cover; }
.fz-face--txt { display: inline-grid; place-items: center; background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--c, #9cb5aa) 30%, #15241f), color-mix(in srgb, var(--c, #9cb5aa) 9%, #0b1412) 76%) content-box; color: color-mix(in srgb, var(--c, #9cb5aa) 80%, #fff); font: 700 calc(var(--s, 36px) * 0.38)/1 var(--display); text-transform: uppercase; user-select: none; }
.fz-face--anon { border-style: dashed; }
.fz-b { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.065); font: 650 11px/1 var(--sans); letter-spacing: 0.01em; color: var(--soft); white-space: nowrap; }
.fz-b svg { width: 11px; height: 11px; }
.fz-b--pin { background: rgba(244, 241, 208, 0.1); color: var(--moon); }
.fz-b--new, .fz-b--open { background: var(--acc-soft); color: var(--acc); }
.fz-b--anon { background: rgba(244, 222, 140, 0.12); color: var(--amber); }
.fz-b.f-lab--closed { color: var(--mut); }
.fz-b.f-lab--approved, .fz-b.f-lab--solved, .fz-b.f-lab--implemented { background: rgba(110, 231, 168, 0.12); color: var(--green); }
.fz-b.f-lab--denied, .fz-b.f-lab--invalid { background: rgba(255, 143, 143, 0.12); color: var(--red); }
.fz-b.f-lab--bug { background: rgba(244, 222, 140, 0.12); color: var(--amber); }
.fz-b.f-lab--suggestion { background: rgba(195, 166, 255, 0.13); color: var(--lav); }
.fz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fz-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 9px rgba(124, 245, 196, 0.8); }
.fz-chip { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: 7px; max-width: 100%; height: 26px; padding: 0 11px 0 9px; border: 1px solid color-mix(in srgb, var(--fz) 24%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--fz) 7%, transparent); font-size: 12px; font-weight: 550; color: var(--soft); white-space: nowrap; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.fz-chip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fz); }
.fz-chip:hover { border-color: color-mix(in srgb, var(--fz) 55%, transparent); background: color-mix(in srgb, var(--fz) 13%, transparent); color: var(--hi); }
.fz-chip--sm { height: 22px; padding: 0 9px 0 7px; font-size: 11.5px; }
.fz-tile { position: relative; display: grid; flex: none; place-items: center; width: 46px; height: 46px; border: 1px solid color-mix(in srgb, var(--fz) 30%, transparent); border-radius: 14px; background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--fz) 25%, transparent), color-mix(in srgb, var(--fz) 5%, transparent) 76%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); color: var(--fz); transition: box-shadow 0.25s, border-color 0.25s; }
.fz-tile svg { width: 21px; height: 21px; }
.fz-tile--xl { width: 68px; height: 68px; border-radius: 21px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 44px -10px color-mix(in srgb, var(--fz) 50%, transparent); }
.fz-tile--xl svg { width: 30px; height: 30px; }
.fz-tile__dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #0b1215, 0 0 12px rgba(124, 245, 196, 0.9); }
.fz-hero .mast__k { color: var(--fz); }
.fz-hero .mast__k a { display: inline-flex; align-items: center; gap: 7px; }
.fz-hero .mast__k svg { width: 13px; height: 13px; }
.fz-hero .mast__k::before { background: var(--fz); }
.fz-hero .mast__lede a { color: var(--hi); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fz) 60%, transparent); text-underline-offset: 3px; }
.fz-hero .mast__lede a:hover { color: var(--fz); }
.fz-hero .mast__facts .is-new dd { color: var(--acc); }
.fz-hero__lead { display: flex; align-items: flex-end; gap: 22px; }
.fz-hero__lead > div { min-width: 0; }
.fz-hero--topic h1 { max-width: 30em; font-size: clamp(25px, 2.7vw, 40px); line-height: 1.1; overflow-wrap: anywhere; }
.fz-topic .f-crumbs > span:last-child { max-width: min(52ch, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fz-topic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--mut); }
.fz-topic__by { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fz-topic__by b, .fz-topic__by a { font-weight: 600; color: var(--soft); }
.fz-topic__by a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fz-b + .fz-topic__by { margin-left: 4px; }
.fz-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 28px; }
.fz-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fz-nav::-webkit-scrollbar { display: none; }
.fz-jump { display: flex; flex-wrap: wrap; gap: 2px; }
.fz-jump a { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.fz-jump a:hover { background: rgba(255, 255, 255, 0.055); color: var(--hi); }
.fz-jump i { width: 7px; height: 7px; border-radius: 50%; background: var(--fz); box-shadow: 0 0 9px color-mix(in srgb, var(--fz) 70%, transparent); }
.fz-rows { margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); list-style: none; }
.fz-rows > li { position: relative; border-radius: 16px; transition: background-color 0.15s; }
.fz-rows > li + li::before { content: ""; position: absolute; top: 0; right: 16px; left: var(--rule, 16px); height: 1px; background: var(--line); transition: opacity 0.15s; }
.fz-rows > li:hover { background: rgba(255, 255, 255, 0.038); }
.fz-rows > li:hover::before, .fz-rows > li:hover + li::before { opacity: 0; }
.fz-cols { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 36px; align-items: start; }
.fz-cat { margin: 0 0 36px; scroll-margin-top: 88px; }
.fz-cat:last-child { margin-bottom: 0; }
.fz-cat__h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 14px; margin: 0 0 14px; padding: 0 8px; }
.fz-cat__n { font: 650 12.5px/1 var(--display); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--fz); }
.fz-cat__h h2 { font: 650 21px/1.2 var(--display); letter-spacing: -0.032em; color: var(--hi); }
.fz-cat__h p { grid-column: 2; margin: 4px 0 0; font-size: 13.5px; color: var(--mut); }
.fz-cat__c { grid-row: 1; grid-column: 3; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fz-cat .fz-rows { position: relative; }
.fz-cat .fz-rows::before { content: ""; position: absolute; top: -1px; left: 24px; width: min(46%, 380px); height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--fz) 85%, transparent), transparent); }
.fz-f { --rule: 80px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto minmax(0, 292px) 16px; align-items: center; gap: 18px; padding: 15px 14px 15px 14px; }
.fz-f__t { min-width: 0; }
.fz-f__t h3 { display: flex; align-items: center; gap: 10px; font: 650 16.5px/1.25 var(--display); letter-spacing: -0.022em; }
.fz-f__name { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.fz-f__name::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.fz-f__name:focus-visible { outline: 0; }
.fz-f__name:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; }
.fz-f.is-new .fz-f__name, .fz-f:hover .fz-f__name { color: var(--hi); }
.fz-f__t p { margin: 4px 0 0; overflow: hidden; font-size: 13px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.fz-new { flex: none; padding: 0 8px; border-radius: 999px; background: var(--acc-soft); font: 650 11px/19px var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--acc); white-space: nowrap; }
.fz-f:not(.is-new) .fz-tile { border-color: color-mix(in srgb, var(--fz) 18%, transparent); background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--fz) 13%, transparent), color-mix(in srgb, var(--fz) 3%, transparent) 76%); color: color-mix(in srgb, var(--fz) 74%, var(--mut)); }
.fz-f:hover .fz-tile { border-color: color-mix(in srgb, var(--fz) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 26px -6px color-mix(in srgb, var(--fz) 60%, transparent); }
.fz-f__n { display: flex; gap: 4px; margin: 0; }
.fz-f__n div { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 5px; min-width: 60px; }
.fz-f__n dd { margin: 0; font: 650 16.5px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hi); }
.fz-f__n dt { font: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.fz-f__last { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 38px; padding-left: 20px; border-left: 1px solid var(--line); }
.fz-f__lt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fz-f__lt a { position: relative; z-index: 1; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.fz-f__lt a:hover { color: var(--acc); }
.fz-f__lt small { overflow: hidden; font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.fz-f__lt small b { font-weight: 600; color: var(--soft); }
.fz-f__none { font-size: 12.5px; color: var(--dim); }
.fz-f__go { width: 15px; height: 15px; color: var(--fz); opacity: 0; transform: translateX(-5px); transition: opacity 0.15s, transform 0.25s var(--ease); }
li:hover > .fz-f__go { opacity: 1; transform: none; }
.fz-side { padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
@media (min-height: 980px) and (min-width: 1281px) {
.fz-side { position: sticky; top: 88px; }
}
.fz-side__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 14px 10px; }
.fz-side__h h2 { font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.fz-side__h a { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 550; color: var(--mut); transition: color 0.15s; }
.fz-side__h a:hover { color: var(--acc); }
.fz-side__h a svg { width: 13px; height: 13px; }
.fz-mini { margin: 0; padding: 0; list-style: none; }
.fz-mini li { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; border-radius: 14px; transition: background-color 0.15s; }
.fz-mini li:hover { background: rgba(255, 255, 255, 0.04); }
.fz-mini .fz-face { margin-top: 1px; }
.fz-mini a { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.fz-mini a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.fz-mini a:focus-visible { outline: 0; }
.fz-mini a:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; }
.fz-mini b { overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.fz-mini a > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12.5px; line-height: 1.45; color: var(--mut); overflow-wrap: anywhere; }
.fz-mini small { display: flex; align-items: center; gap: 6px; margin-top: 2px; overflow: hidden; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.fz-mini small em { font-style: normal; font-weight: 600; color: var(--soft); }
.fz-mini small i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--fz); }
.fz-mini__none { color: var(--mut); }
.fz-list { --cols: 40px minmax(0, 1fr) 74px 74px 214px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.fz-list--own { --cols: minmax(0, 1fr) 74px 74px 120px; }
.fz-list .fz-rows { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.fz-list__h { display: grid; grid-template-columns: var(--cols); gap: 16px; margin-bottom: 4px; padding: 11px 16px 10px; border-bottom: 1px solid var(--line); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.fz-list__h span:first-child { grid-column: 1 / 3; }
.fz-list--own .fz-list__h span:first-child { grid-column: 1; }
.fz-list__h span:nth-child(2), .fz-list__h span:nth-child(3) { text-align: right; }
.fz-list__h span:last-child { padding-left: 17px; }
.fz-t { --rule: 72px; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 16px; padding: 13px 16px; }
.fz-list--own .fz-t { --rule: 16px; }
.fz-list--own .fz-t__name { color: var(--text); }
.fz-t__m { min-width: 0; }
.fz-t__h { display: flex; align-items: baseline; gap: 9px; margin: 0; font: inherit; }
.fz-t__h .fz-dot { align-self: center; }
.fz-t__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 550 15.5px/1.3 var(--display); letter-spacing: -0.018em; color: var(--soft); overflow-wrap: anywhere; transition: color 0.15s; }
.fz-t__name::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.fz-t__name:focus-visible { outline: 0; }
.fz-t__name:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; }
.fz-t--new .fz-t__name { font-weight: 650; color: var(--hi); }
.fz-t:hover .fz-t__name { color: var(--hi); }
.fz-t--closed .fz-t__name { color: var(--mut); }
.fz-t__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 6px 0 0; font-size: 12.5px; color: var(--mut); }
.fz-t__by, .fz-fi__meta > span, .fz-pl__meta > span:not(.fz-b), .fz-topic__by > span { min-width: 0; overflow-wrap: anywhere; }
.fz-t__by b { font-weight: 600; color: var(--soft); }
.fz-t__pages { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 1px; height: 20px; padding: 0 4px 0 8px; border: 1px solid var(--line2); border-radius: 999px; font-size: 11.5px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--soft); transition: border-color 0.15s, color 0.15s; }
.fz-t__pages svg { width: 11px; height: 11px; }
.fz-t__pages:hover { border-color: rgba(124, 245, 196, 0.5); color: var(--acc); }
.fz-t__n { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fz-t__n b { font: 650 15.5px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hi); }
.fz-t__n small { display: none; font: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.fz-t__v b { font-weight: 500; color: var(--mut); }
.fz-t__last { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 34px; padding-left: 16px; border-left: 1px solid var(--line); }
.fz-t__last > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fz-t__last b { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.fz-t__last small { font-size: 12px; color: var(--mut); white-space: nowrap; }
.fz-t__last--when small { font-size: 13px; color: var(--soft); }
a.fz-t__last { position: relative; z-index: 1; }
a.fz-t__last small { transition: color 0.15s; }
a.fz-t__last:hover small { color: var(--acc); }
.fz-t--pin { background: linear-gradient(90deg, rgba(244, 241, 208, 0.05), rgba(244, 241, 208, 0) 62%); }
.fz-t--pin:hover { background: linear-gradient(90deg, rgba(244, 241, 208, 0.075), rgba(255, 255, 255, 0.038) 62%); }
.fz-rows > .fz-t--first::before { left: 16px; background: var(--line2); }
.fz-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: 26px 0 0; font-size: 13px; color: var(--mut); }
.fz-pg ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fz-pg ol a, .fz-pg ol b { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fz-pg ol a { color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.fz-pg ol a:hover { background: rgba(255, 255, 255, 0.07); color: var(--hi); }
.fz-pg ol b { background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.42); color: var(--hi); }
.fz-pg__gap { width: 22px; line-height: 36px; text-align: center; color: var(--dim); }
.fz-pg__step { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 15px 0 10px; border: 1px solid var(--line2); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03)); font-weight: 550; color: var(--hi); transition: border-color 0.15s, background 0.15s; }
.fz-pg__step svg { width: 14px; height: 14px; transform: rotate(180deg); }
.fz-pg__step--next { padding: 0 10px 0 15px; }
.fz-pg__step--next svg { transform: none; }
a.fz-pg__step:hover { border-color: var(--line3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)); }
.fz-pg__step.is-off { border-color: var(--line); background: none; color: var(--dim); }
.fz-pg__of { display: none; font-variant-numeric: tabular-nums; }
.fz-pg--plain .fz-pg__of { display: inline; margin: 0 6px; }
.fz-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; border: 1px dashed var(--line2); border-radius: var(--r-xl); background: var(--card); text-align: center; }
.fz-empty .fz-tile { width: 60px; height: 60px; margin-bottom: 10px; border-radius: 19px; }
.fz-empty .fz-tile svg { width: 26px; height: 26px; }
.fz-empty h2 { font: 650 22px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.fz-empty p { max-width: 48ch; margin: 0; color: var(--soft); text-wrap: pretty; }
.fz-empty p.fz-empty__a { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.fz-topic__cols { display: grid; grid-template-columns: minmax(0, 1200px) 292px; justify-content: space-between; gap: 36px; align-items: start; }
.fz-thread { display: flex; grid-row: 1; grid-column: 1; flex-direction: column; gap: 18px; min-width: 0; }
.fz-thread__top .fz-pg { justify-content: flex-end; margin: 0; }
.fz-thread > .fz-pg { margin: 6px 0 0 190px; }
.fz-rail { position: sticky; top: 88px; display: flex; grid-row: 1; grid-column: 2; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.fz-rail__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; margin: 0; }
.fz-rail__facts div { display: flex; flex-direction: column-reverse; gap: 7px; min-width: 0; }
.fz-rail__facts dt { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fz-rail__facts dd { margin: 0; font: 650 24px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--hi); }
.fz-rail__facts .fz-rail__last { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line); }
.fz-rail__last dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 600 14.5px/1.3 var(--sans); letter-spacing: 0; }
.fz-rail__last dd a { color: var(--hi); transition: color 0.15s; }
.fz-rail__last dd a:hover { color: var(--acc); }
.fz-rail__last small { font-size: 12.5px; font-weight: 400; color: var(--mut); }
.fz-rail__last small b { font-weight: 600; }
.fz-rail__none { font-weight: 500; color: var(--mut); }
.fz-rail__a { display: flex; flex-direction: column; gap: 8px; }
.fz-rail__a form { display: flex; margin: 0; }
.fz-rail__a .btn { flex: none; justify-content: center; }
.fz-rail__a form .btn { flex: 1; }
.fz-mod { padding-top: 14px; border-top: 1px solid var(--line); }
.fz-mod summary { display: flex; align-items: center; gap: 8px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--amber); list-style: none; cursor: pointer; user-select: none; }
.fz-mod summary::-webkit-details-marker { display: none; }
.fz-mod summary svg { width: 15px; height: 15px; }
.fz-mod summary .fz-mod__chev { width: 13px; height: 13px; margin-left: auto; color: var(--mut); transform: rotate(90deg); transition: transform 0.2s; }
.fz-mod[open] summary .fz-mod__chev { transform: rotate(-90deg); }
.fz-mod__b { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.fz-mod__b form { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fz-mod__rename .input { flex: 1 1 120px; min-width: 0; height: 30px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
.fz-post { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: start; scroll-margin-top: 88px; }
.fz-post__who { position: sticky; top: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 11px; min-width: 0; padding-top: 4px; }
.fz-post__id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.fz-post__user { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 650 15.5px/1.2 var(--display); letter-spacing: -0.02em; color: var(--c, var(--hi)); overflow-wrap: anywhere; }
a.fz-post__user:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fz-post__user--gone { color: var(--mut); }
.fz-post__group { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 20px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--c, var(--soft)) 48%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c, var(--soft)) 9%, transparent); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c, var(--soft)); white-space: nowrap; }
.fz-post__group svg { width: 11px; height: 11px; }
.fz-post__title { font-size: 12.5px; font-style: italic; color: var(--mut); overflow-wrap: anywhere; }
.fz-post__stats { display: flex; gap: 18px; margin: 3px 0 0; }
.fz-post__stats div { display: flex; flex-direction: column-reverse; gap: 4px; }
.fz-post__stats dt { font: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.fz-post__stats dd { margin: 0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.fz-post__mark { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mut); }
.fz-post__mark::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fz); }
.fz-post__mark--anon { color: var(--amber); }
.fz-post__mark--anon::before { background: var(--amber); }
.fz-post__card { position: relative; align-self: stretch; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); transition: border-color 0.2s, box-shadow 0.2s; }
.fz-post.is-staff .fz-post__card { background: radial-gradient(460px 170px at 100% 0, color-mix(in srgb, var(--c, var(--amber)) 7%, transparent), transparent 72%), var(--card); }
.fz-post.is-first .fz-post__card { border-color: var(--line2); background: var(--card-hi); }
.fz-post.is-first.is-staff .fz-post__card { background: radial-gradient(520px 190px at 100% 0, color-mix(in srgb, var(--c, var(--amber)) 8%, transparent), transparent 72%), var(--card-hi); }
.fz-post.is-first .fz-post__card::before { content: ""; position: absolute; top: -1px; left: 24px; width: min(50%, 420px); height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--fz) 90%, transparent), transparent); }
.fz-post:target .fz-post__card, .fz-post.is-target .fz-post__card { border-color: rgba(124, 245, 196, 0.5); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.09), var(--e2); }
.fz-post__bar { display: flex; align-items: center; gap: 4px 10px; min-height: 46px; padding: 7px 10px 7px 24px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--mut); }
.fz-post__n { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--soft); transition: color 0.15s; }
.fz-post__n:hover { color: var(--acc); }
.fz-post__when, .fz-post__ed { white-space: nowrap; }
.fz-post__ed::before { content: "·"; margin-right: 10px; color: var(--dim); }
.fz-post__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; margin-left: auto; }
.fz-post__acts form { display: inline-flex; margin: 0; }
.fz-act { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--dim); cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.fz-act svg { width: 14px; height: 14px; }
.fz-post:hover .fz-act, .fz-post:focus-within .fz-act { color: var(--soft); }
.fz-post .fz-act:hover, .fz-post .fz-act:focus-visible { background: rgba(255, 255, 255, 0.075); color: var(--hi); }
.fz-post .fz-act--del:hover, .fz-post .fz-act--del:focus-visible { background: rgba(255, 143, 143, 0.12); color: var(--red); }
.fz-tip { display: inline-flex; align-items: center; height: 30px; padding: 0 3px 0 10px; border: 1px solid transparent; border-radius: 999px; color: var(--dim); transition: border-color 0.15s, color 0.15s, box-shadow 0.15s; }
.fz-tip svg { width: 13px; height: 13px; }
.fz-tip input { width: 50px; height: 24px; padding: 0 2px 0 6px; border: 0; background: none; font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text); outline: 0; appearance: textfield; -moz-appearance: textfield; }
.fz-tip input::-webkit-inner-spin-button, .fz-tip input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.fz-tip input::placeholder { color: var(--dim); }
.fz-tip button { height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: inherit; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.fz-post:hover .fz-tip, .fz-post:focus-within .fz-tip { border-color: var(--line2); color: var(--soft); }
.fz-post .fz-tip:focus-within { border-color: rgba(244, 241, 208, 0.55); box-shadow: 0 0 0 3px rgba(244, 241, 208, 0.1); color: var(--moon); }
.fz-tip button:hover, .fz-tip button:focus-visible { background: rgba(244, 241, 208, 0.14); color: var(--moon); }
.fz-post__x { --bb-size: 15.5px; --bb-lh: 1.72; --bb-ink: color-mix(in srgb, var(--text) 88%, var(--mut)); max-width: calc(80ch + 52px); padding: 22px 26px 24px; }
.fz-post .fz-post__x > :first-child { margin-top: 0; }
.fz-post .fz-post__x > :last-child { margin-bottom: 0; }
.fz-post.is-first .fz-post__x { --bb-size: 16.5px; }
.fz-sig { --bb-size: 12px; --bb-lh: 1.5; --bb-ink: var(--mut); display: -webkit-box; max-width: calc(80ch + 52px); margin: 0 26px; padding: 12px 0 16px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; border-top: 1px dashed var(--line2); }
.fz-reply { margin-top: 10px; }
.fz-reply .fz-post__who { position: static; }
.fz-reply__you { font-size: 12.5px; color: var(--mut); }
.fz-reply .fz-post__bar { padding-right: 14px; }
.fz-reply .fz-post__bar h2 { font: 650 15px/1.2 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.fz-reply .fz-post__bar .fz-b { margin-left: auto; }
.fz-reply__f { display: flex; flex-direction: column; margin: 0; padding: 16px 18px 18px; }
.fz-reply__f .textarea { min-height: 150px; }
.fz-reply__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.fz-reply__hint { margin-left: auto; font-size: 12.5px; color: var(--mut); }
.fz-closed { display: flex; align-items: center; gap: 14px; margin: 6px 0 0 190px; padding: 16px 20px; border: 1px dashed var(--line2); border-radius: var(--r-m); color: var(--mut); }
.fz-closed svg { width: 18px; height: 18px; color: var(--soft); }
.fz-closed p { margin: 0; }
.fz-closed b { font-weight: 600; color: var(--text); }
.fz-empty + .fz-closed, .fz-empty + .fz-pg { margin-left: 0; }
.fz-write__cols { display: grid; grid-template-columns: minmax(0, 900px) minmax(240px, 330px); gap: 36px; align-items: start; }
.fz-write__cols--one { grid-template-columns: minmax(0, 900px); }
.fz-compose { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.fz-compose__title .input { height: 54px; padding: 0 16px; font: 600 19px/1.2 var(--display); letter-spacing: -0.025em; }
.fz-compose__title .input::placeholder { font-weight: 500; }
.fz-compose .textarea { min-height: 300px; }
.fz-compose__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.fz-compose__a { display: flex; gap: 8px; margin-left: auto; }
.fz-compose__note { font-size: 12.5px; color: var(--mut); }
.fz-tips { position: sticky; top: 88px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.014); }
.fz-tips h2 { font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fz); }
.fz-tips ul { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; }
.fz-tips li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.fz-tips li::before { content: ""; position: absolute; top: 8px; left: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--fz); }
.fz-tips li b { font-weight: 600; color: var(--text); }
.fz-tips code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.065); font: 12px var(--mono); color: var(--soft); }
.fz-tips p { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.fz-fi { --rule: 72px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 15px 16px; }
.fz-fi--own { --rule: 16px; grid-template-columns: minmax(0, 1fr) auto; }
.fz-fi > .fz-face { margin-top: 2px; }
.fz-fi__m { min-width: 0; }
.fz-fi__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 0; font: inherit; }
.fz-fi__name { font: 600 15.5px/1.3 var(--display); letter-spacing: -0.018em; color: var(--hi); overflow-wrap: anywhere; }
.fz-fi__name::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.fz-fi__name:focus-visible { outline: 0; }
.fz-fi__name:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; }
.fz-fi__x { display: -webkit-box; max-width: 110ch; margin: 5px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13.5px; line-height: 1.5; color: var(--mut); overflow-wrap: anywhere; }
.fz-fi__none { color: var(--dim); }
.fz-fi__meta { display: flex; flex-wrap: wrap; margin: 7px 0 0; font-size: 12.5px; color: var(--mut); }
.fz-fi__meta > span + span::before { content: "·"; margin: 0 7px; color: var(--dim); }
.fz-fi__meta b { font-weight: 600; color: var(--soft); }
.fz-fi > .fz-chip { margin-top: 1px; }
.fz-mine .tabs { margin-bottom: 18px; }
.fz-pl { --rule: 80px; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto 16px; align-items: center; gap: 18px; padding: 15px 14px; }
.fz-pl__m { min-width: 0; }
.fz-pl h2 { margin: 0; font: inherit; }
.fz-pl__name { font: 600 16.5px/1.3 var(--display); letter-spacing: -0.022em; color: var(--hi); overflow-wrap: anywhere; }
.fz-pl__name::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.fz-pl__name:focus-visible { outline: 0; }
.fz-pl__name:focus-visible::after { outline: 2px solid var(--acc); outline-offset: -2px; }
.fz-pl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 7px 0 0; font-size: 12.5px; color: var(--mut); }
.fz-pl__meta > span:not(.fz-b) + span:not(.fz-b)::before { content: "·"; margin-right: 8px; color: var(--dim); }
.fz-pl__meta b { font-weight: 600; color: var(--soft); }
.fz-pl .fz-t__n { min-width: 62px; }
.fz-pl .fz-t__n small { display: block; }
.fz-pl--closed .fz-pl__name { color: var(--soft); }
.fz-pl--closed .fz-tile { border-color: var(--line2); background: rgba(255, 255, 255, 0.03); color: var(--mut); }
.fz-pollpage .fz-poll { grid-row: 1; grid-column: 1; min-width: 0; }
.fz-poll { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.fz-poll form { margin: 0; }
.fz-opts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fz-opt__l { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 20px 10px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(3, 6, 8, 0.32); transition: border-color 0.15s, box-shadow 0.15s; }
label.fz-opt__l { cursor: pointer; }
label.fz-opt__l:hover { border-color: var(--line3); }
label.fz-opt__l:has(input:checked) { border-color: rgba(124, 245, 196, 0.6); box-shadow: 0 0 0 3px rgba(124, 245, 196, 0.1); }
label.fz-opt__l:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.fz-opt__bar { position: absolute; inset: 0; z-index: -1; }
.fz-opt__bar i { display: block; height: 100%; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.085)); transform-origin: left center; animation: fz-grow 0.6s var(--ease) both; }
.fz-opt--lead .fz-opt__bar i { background: linear-gradient(90deg, rgba(124, 245, 196, 0.06), rgba(124, 245, 196, 0.22)); box-shadow: inset -2px 0 0 rgba(124, 245, 196, 0.6); }
@keyframes fz-grow { from { transform: scaleX(0); } }
.fz-opt__l input { flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--line3); border-radius: 50%; background: rgba(3, 6, 8, 0.55) center / 12px no-repeat; cursor: pointer; appearance: none; outline: 0; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.fz-opt__l input:not([type=radio]) { border-radius: 6px; }
.fz-opt__l input:checked { border-color: transparent; background-color: var(--acc); box-shadow: 0 0 12px rgba(124, 245, 196, 0.4); }
.fz-opt__l input:not([type=radio]):checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304110c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fz-opt__l input[type=radio]:checked { background-image: radial-gradient(circle, #04110c 0 3.5px, transparent 4px); background-size: 100%; }
.fz-opt__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 550; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.fz-opt--lead .fz-opt__name { font-weight: 650; color: var(--hi); }
.fz-opt__n { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.fz-opt__n b { font: 650 19px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--soft); }
.fz-opt--lead .fz-opt__n b { color: var(--acc); }
.fz-opt__n em { font-size: 11.5px; font-style: normal; font-variant-numeric: tabular-nums; color: var(--mut); white-space: nowrap; }
.fz-opts__none { padding: 30px 16px; color: var(--mut); text-align: center; }
.fz-poll__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 14px 8px 4px 10px; font-size: 13px; color: var(--mut); }
@media (max-width: 1280px) {
.fz-cols { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.fz-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
}
@media (max-width: 1180px) {
.fz-topic__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fz-thread, .fz-pollpage .fz-poll { grid-row: auto; }
.fz-post__who { top: 118px; }
.fz-post, .fz-cat { scroll-margin-top: 118px; }
.fz-rail { position: static; grid-row: auto; grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 12px 14px 12px 20px; }
.fz-rail__facts { display: flex; gap: 26px; }
.fz-rail__facts dd { font-size: 18px; }
.fz-rail__facts .fz-rail__last { padding: 0; border: 0; }
.fz-rail__last dd { font-size: 13.5px; line-height: 18px; }
.fz-rail__a { flex-direction: row; flex-wrap: wrap; margin-left: auto; }
.fz-rail__a .btn { flex: none; }
.fz-mod { flex: 1 1 100%; padding-top: 12px; }
.fz-mod__b { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fz-mod__rename { flex: 1 1 260px; }
}
@media (max-width: 1000px) {
.fz-write__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fz-tips { position: static; }
.fz-f { grid-template-columns: 46px minmax(0, 1fr) auto minmax(0, 230px); }
.fz-f__go { display: none; }
}
@media (max-width: 760px) {
.fz-bar { margin-bottom: 22px; }
.fz-nav, .fz-jump { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
.fz-nav .seg { margin-right: 22px; }
.fz-jump { flex-wrap: nowrap; width: 100%; margin: 0 -6px; padding-right: 24px; overflow-x: auto; scrollbar-width: none; }
.fz-jump::-webkit-scrollbar { display: none; }
.fz-hero__lead { align-items: flex-start; gap: 16px; }
.fz-tile--xl { width: 52px; height: 52px; border-radius: 16px; }
.fz-tile--xl svg { width: 23px; height: 23px; }
.fz-rows { padding: 4px; border-radius: 20px; }
.fz-rows > li + li::before { right: 12px; left: 12px; }
.fz-cat { margin-bottom: 30px; }
.fz-cat__h { column-gap: 10px; padding: 0 4px; }
.fz-cat__h h2 { font-size: 19px; }
.fz-cat__c { display: none; }
.fz-f { grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 0 14px; padding: 14px 12px; }
.fz-f .fz-tile { grid-row: 1 / span 3; width: 42px; height: 42px; border-radius: 13px; }
.fz-f__t p { white-space: normal; }
.fz-f__n { grid-column: 2; gap: 14px; margin-top: 9px; }
.fz-f__n div { flex-direction: row-reverse; align-items: baseline; gap: 5px; min-width: 0; }
.fz-f__n dd { font: 650 13px/1 var(--sans); letter-spacing: 0; }
.fz-f__n dt { font: 12.5px/1 var(--sans); letter-spacing: 0; text-transform: lowercase; color: var(--mut); }
.fz-f__last { grid-column: 2; gap: 8px; min-height: 0; margin-top: 10px; padding: 0; border: 0; }
.fz-f__last .fz-face { width: 22px; height: 22px; padding: 1.5px; font-size: 9px; }
.fz-f__lt { flex-direction: row; align-items: baseline; gap: 8px; }
.fz-f__lt a { flex: 0 1 auto; font-size: 13px; }
.fz-f__lt small { flex: none; }
.fz-f__lt small b { display: none; }
.fz-f__lt small span { margin-left: -0.6em; }
.fz-list { padding: 4px; border-radius: 20px; }
.fz-list__h { display: none; }
.fz-t { grid-template-columns: 36px auto auto minmax(0, 1fr); align-items: start; gap: 0 12px; padding: 13px 12px; }
.fz-list--own .fz-t { grid-template-columns: auto auto minmax(0, 1fr); }
.fz-t > .fz-face { grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 14px; }
.fz-t__m { grid-column: 2 / -1; }
.fz-list--own .fz-t__m { grid-column: 1 / -1; }
.fz-t__n { flex-direction: row; align-items: baseline; gap: 4px; margin-top: 10px; }
.fz-t__n b, .fz-t__v b { font: 650 13px/1 var(--sans); letter-spacing: 0; color: var(--soft); }
.fz-t__n small { display: inline; font: 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--mut); }
.fz-t__last { justify-self: end; gap: 7px; max-width: 100%; min-height: 0; margin-top: 7px; padding: 0; border: 0; }
.fz-t__last small { flex: none; }
.fz-t__last .fz-face { width: 20px; height: 20px; padding: 1.5px; font-size: 8px; }
.fz-t__last > span:last-child { flex-direction: row; align-items: baseline; gap: 6px; }
.fz-t__last b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fz-t__last--when { margin-top: 10px; }
.fz-t__last--when small { font-size: 12.5px; color: var(--mut); }
.fz-t__last--when small::before { content: "last reply "; }
.fz-pg ol { display: none; }
.fz-pg__of { display: inline; order: 2; margin: 0 4px; }
.fz-pg__step--next { order: 3; }
.fz-empty { padding: 40px 18px; }
.fz-rail { gap: 12px 20px; padding: 14px; }
.fz-rail__facts { gap: 20px; width: 100%; }
.fz-rail__facts .fz-rail__last { margin-left: auto; text-align: right; }
.fz-rail__last dd { justify-content: flex-end; }
.fz-rail__last small { display: none; }
.fz-rail__a { width: 100%; margin: 0; }
.fz-rail__a > *, .fz-rail__a .btn { flex: 1 1 auto; }
.fz-thread { gap: 14px; }
.fz-post { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--e2); }
.fz-post.is-first { border-color: var(--line2); background: var(--card-hi); }
.fz-post:target, .fz-post.is-target { border-color: rgba(124, 245, 196, 0.5); }
.fz-post__who { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 11px; padding: 13px 14px 0; }
.fz-post__who .fz-face { width: 38px; height: 38px; padding: 2px; font-size: 14.5px; }
.fz-post__id { flex: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.fz-post__title { display: none; }
.fz-post__stats { margin: 0; }
.fz-post__stats div:nth-child(n+2) { display: none; }
.fz-post__stats div { flex-direction: row-reverse; align-items: baseline; gap: 4px; }
.fz-post__stats dt { font: 12px/1 var(--sans); letter-spacing: 0; text-transform: lowercase; color: var(--mut); }
.fz-post__stats dd { font-size: 12.5px; }
.fz-post__mark { flex: 1 1 100%; padding-left: 49px; }
.fz-post .fz-post__card, .fz-post.is-first .fz-post__card, .fz-post.is-staff .fz-post__card, .fz-post.is-first.is-staff .fz-post__card { border: 0; border-radius: 0; background: none; box-shadow: none; }
.fz-topic .f-crumbs > i:last-of-type, .fz-topic .f-crumbs > span:last-child { display: none; }
.fz-post.is-first .fz-post__card::before { display: none; }
.fz-post__bar { flex-wrap: wrap; min-height: 40px; padding: 4px 6px 4px 14px; }
.fz-post__acts { flex-wrap: nowrap; }
.fz-act { padding: 0 9px; }
.fz-act span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fz-tip { padding-left: 8px; border-color: var(--line); }
.fz-tip input { width: 40px; }
.fz-post__x { padding: 14px 16px 18px; }
.fz-post__x { --bb-size: 15px; }
.fz-post.is-first .fz-post__x { --bb-size: 15.5px; }
.fz-sig { margin: 0 16px; }
.fz-reply__f { padding: 12px 12px 14px; }
.fz-reply__hint { display: none; }
.fz-reply__row .btn { margin-left: auto; }
.fz-closed { margin-left: 0; }
.fz-thread > .fz-pg { margin-left: 0; }
.fz-post__user { -webkit-line-clamp: 1; }
.fz-compose { padding: 18px 16px; border-radius: 20px; }
.fz-compose__title .input { height: 48px; font-size: 17px; }
.fz-compose .textarea { min-height: 220px; }
.fz-compose__a { width: 100%; }
.fz-compose__a .btn { flex: 1; justify-content: center; }
.fz-fi { grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: 13px 12px; }
.fz-fi--own { grid-template-columns: minmax(0, 1fr); }
.fz-fi > .fz-face { width: 36px; height: 36px; font-size: 14px; }
.fz-fi > .fz-chip { grid-column: 2; justify-self: start; margin-top: 10px; }
.fz-fi--own > .fz-chip { grid-column: 1; }
.fz-pl { grid-template-columns: 42px auto auto minmax(0, 1fr); align-items: start; gap: 0 14px; padding: 14px 12px; }
.fz-pl .fz-tile { grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 13px; }
.fz-pl__m { grid-column: 2 / -1; }
.fz-pl .fz-t__n { min-width: 0; }
.fz-pl .fz-t__n small { display: inline; }
.fz-pl > .fz-f__go { display: none; }
.fz-poll { padding: 8px; border-radius: 20px; }
.fz-opt__l { gap: 12px; padding: 10px 14px; }
.fz-opt__n b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
.fz-opt__bar i { animation: none; }
}
.pf-k { margin: 0; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.pf-h { margin: 0; font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.pf-live { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(110, 231, 168, 0.16), 0 0 10px rgba(110, 231, 168, 0.5); }
.pf-key { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--acc); }
.pf-key--down { background: color-mix(in oklab, var(--red) 78%, transparent); }
.pf-split { display: flex; gap: 2px; height: 8px; }
.pf-split i { display: block; min-width: 0; height: 100%; border-radius: 999px; }
.pf-split i:first-child { background: linear-gradient(90deg, color-mix(in oklab, var(--acc) 58%, transparent), var(--acc)); box-shadow: 0 0 14px rgba(124, 245, 196, 0.28); }
.pf-split i:last-child { flex: 1; background: color-mix(in oklab, var(--red) 62%, transparent); }
.pf-split i[style="width:100%"] + i, .pf-split i[style="width:0%"], .pf-split--none i:first-child { display: none; }
.pf-split--none i:last-child { background: rgba(255, 255, 255, 0.07); }
.pf-meter { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--acc) 13%, transparent); }
.pf-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in oklab, var(--acc) 60%, transparent), var(--acc)); }
.pf-face { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 34% 26%, color-mix(in oklab, var(--pc, var(--acc)) 36%, #0d1418), color-mix(in oklab, var(--pc, var(--acc)) 10%, #080d10) 74%); font: 700 22px/1 var(--display); color: color-mix(in oklab, var(--pc, var(--acc)) 76%, #fff); text-transform: uppercase; }
.pf-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 24px 42px; text-align: center; }
.pf-none__moon { width: 52px; height: 52px; margin-bottom: 10px; filter: drop-shadow(0 0 18px rgba(244, 241, 208, 0.32)); }
.pf-none__moon .moon { width: 100%; height: 100%; }
.pf-none p { margin: 0; max-width: 48ch; font-size: 14px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.pf-none p a { color: var(--acc); }
.pf-none > .btn { margin-top: 12px; }
.pf-none--row { flex-direction: row; gap: 22px; padding: 26px 30px; text-align: left; }
.pf-none--row > div { flex: 1; min-width: 0; }
.pf-none--row .pf-none__moon { margin: 0; }
.pf-none--row h2 { margin-bottom: 4px; font-size: 19px; }
.pf-none--row > .btn { margin: 0; }
.pf-flash { margin-bottom: 16px; }
.pf-hero { --pc: var(--acc); --av: 128px; --px: clamp(20px, 2.6vw, 34px); --h: clamp(124px, 12.5vw, 176px); --floor: #0a1014; position: relative; isolation: isolate; margin: 0 0 22px; border: 1px solid var(--line2); border-radius: var(--r-xl); background: var(--floor); box-shadow: var(--e3); }
.pf-hero--cover { --h: clamp(210px, 21.5vw, 310px); }
.pf-hero__sky { position: relative; height: var(--h); overflow: hidden; border-radius: 27px 27px 0 0; background:
radial-gradient(1px 1px at 12% 30%, rgba(255, 255, 255, 0.55), transparent 100%), radial-gradient(1px 1px at 31% 62%, rgba(255, 255, 255, 0.35), transparent 100%), radial-gradient(1.4px 1.4px at 47% 22%, rgba(244, 241, 208, 0.5), transparent 100%), radial-gradient(1px 1px at 58% 54%, rgba(255, 255, 255, 0.3), transparent 100%), radial-gradient(1px 1px at 93% 18%, rgba(255, 255, 255, 0.4), transparent 100%),
radial-gradient(36% 110% at 84% 104%, rgba(244, 241, 208, 0.13), transparent 72%), radial-gradient(70% 150% at 80% 0%, color-mix(in oklab, var(--pc) 15%, transparent), transparent 70%), radial-gradient(60% 120% at 0% 0%, rgba(124, 245, 196, 0.06), transparent 70%), linear-gradient(180deg, #0d171e, var(--floor)); }
.pf-hero__sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pf-hero--cover .pf-hero__sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 9, 12, 0.3) 0%, rgba(6, 9, 12, 0) 26%, rgba(8, 12, 15, 0.42) 62%, var(--floor) 100%), linear-gradient(90deg, rgba(6, 9, 12, 0.66), rgba(6, 9, 12, 0) 62%); }
.pf-hero__moon { position: absolute; right: clamp(20px, 8%, 120px); top: 32%; width: clamp(170px, 21vw, 270px); aspect-ratio: 1; opacity: 0.5; filter: drop-shadow(0 0 38px rgba(244, 241, 208, 0.45)); }
.pf-hero__moon .moon { width: 100%; height: 100%; -webkit-mask-image: radial-gradient(circle at 34% 26%, #000 22%, rgba(0, 0, 0, 0.5) 92%); mask-image: radial-gradient(circle at 34% 26%, #000 22%, rgba(0, 0, 0, 0.5) 92%); }
.pf-hero:not(.pf-hero--cover) .pf-hero__sky { box-shadow: inset 0 -1px 0 var(--line); }
.pf-hero__moon .moon__disc { fill: rgba(244, 241, 208, 0.16); }
.pf-hero__av { position: absolute; z-index: 2; left: var(--px); top: calc(var(--h) - var(--av) * 0.6); width: var(--av); height: var(--av); border-radius: 50%; box-shadow: 0 0 0 5px var(--floor), 0 0 0 7px var(--pc), 0 0 46px color-mix(in oklab, var(--pc) 34%, transparent), 0 20px 40px -14px rgba(0, 0, 0, 0.85); }
.pf-hero__av img, .pf-hero__av > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pf-hero__av > span { background: radial-gradient(circle at 34% 26%, color-mix(in oklab, var(--pc) 38%, #0d1418), color-mix(in oklab, var(--pc) 9%, #080d10) 74%); font: 700 calc(var(--av) * 0.44)/1 var(--display); color: color-mix(in oklab, var(--pc) 76%, #fff); text-transform: uppercase; }
.pf-hero__av .pf-live { position: absolute; right: 5%; bottom: 5%; width: 20px; height: 20px; border: 4px solid var(--floor); box-shadow: none; }
.pf-hero__name { position: absolute; z-index: 1; left: calc(var(--px) + var(--av) + 28px); right: var(--px); bottom: calc(100% - var(--h) + 12px); margin: 0; font: 700 clamp(36px, 4.3vw, 62px)/1.02 var(--display); letter-spacing: -0.047em; color: color-mix(in oklab, var(--pc) 46%, var(--hi)); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); overflow-wrap: anywhere; text-wrap: balance; }
.pf-hero__name.is-long { font-size: clamp(26px, 2.9vw, 40px); letter-spacing: -0.035em; }
.pf-hero__band { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; min-height: calc(var(--av) * 0.4 + 34px); padding: 14px var(--px) 24px calc(var(--px) + var(--av) + 28px); }
.pf-hero__who { min-width: 0; }
.pf-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 13.5px; color: var(--soft); }
.pf-hero__tags .rank { padding: 0 10px; font-size: 10.5px; line-height: 20px; color: var(--pc); }
.pf-hero__tags .og, .pf-hero__tags .ubadge, .pf-card__tags .og, .pf-card__tags .ubadge { margin-left: 0; }
.pf-hero__title { color: var(--soft); }
.pf-hero__donor, .pf-hero__warn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--moon); }
.pf-hero__warn { color: var(--red); }
.pf-hero__donor svg, .pf-hero__warn svg { width: 13px; height: 13px; }
.pf-hero__facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--mut); }
.pf-hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.pf-hero__facts svg { width: 14px; height: 14px; color: var(--dim); }
.pf-hero__facts b { font-weight: 600; color: var(--soft); }
.pf-hero__facts .pf-hero__on { font-weight: 600; color: var(--green); }
.pf-hero__facts .pf-hero__gone { font-weight: 600; color: var(--red); }
.pf-hero__facts .pf-hero__gone svg { color: inherit; }
.pf-hero__a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-hero__a form { display: inline-flex; }
.pf-hero.is-gone .pf-hero__sky img { filter: grayscale(1) brightness(0.55); }
.pf-hero.is-gone { --pc: color-mix(in oklab, var(--red) 58%, var(--dim)); }
.pf-hero.is-gone .pf-hero__tags .rank { color: var(--red); }
.pf-hero.is-gone .pf-hero__av img { filter: grayscale(1) brightness(0.8); }
.pf-hero.is-gone .pf-hero__name { color: var(--mut); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in oklab, var(--red) 70%, transparent); }
.pf-vital { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); margin: 0 0 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(640px 280px at 0% 0%, rgba(124, 245, 196, 0.055), transparent 70%), var(--card); box-shadow: var(--e2); }
.pf-ratio { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); min-width: 0; padding: 30px clamp(20px, 2.6vw, 34px); }
.pf-ratio__fig { flex: none; }
.pf-ratio__n { margin: 10px 0 0; font: 700 clamp(58px, 6vw, 86px)/0.86 var(--display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; color: var(--hi); text-shadow: 0 0 44px rgba(124, 245, 196, 0.3); }
.pf-ratio__n.is-inf { margin-top: 0; font-size: clamp(84px, 8.6vw, 124px); line-height: 0.62; letter-spacing: 0; }
.pf-ratio__x { flex: 1; min-width: 0; }
.pf-ratio__ud { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 11px; }
.pf-ratio__ud div:last-child { text-align: right; }
.pf-ratio__ud dt { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mut); }
.pf-ratio__ud div:last-child dt { flex-direction: row-reverse; }
.pf-ratio__ud dd { margin: 4px 0 0; font: 650 21px/1.1 var(--display); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--hi); white-space: nowrap; }
.pf-ratio__buf { margin: 13px 0 0; font-size: 13px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.pf-ratio__buf b { font-weight: 650; color: var(--text); }
.pf-ratio__low { display: inline-flex; align-items: center; gap: 7px; color: var(--red); }
.pf-ratio__low b { color: inherit; }
.pf-ratio__low svg { width: 14px; height: 14px; }
.pf-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-left: 1px solid var(--line); }
.pf-figs > div { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 20px clamp(18px, 2.2vw, 30px); border: 0 solid var(--line); }
.pf-figs > div:nth-child(odd) { border-right-width: 1px; }
.pf-figs > div:nth-child(-n+2) { border-bottom-width: 1px; }
.pf-figs dt { display: inline-flex; align-items: center; gap: 8px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.pf-figs dt svg { width: 13px; height: 13px; }
.pf-figs dd { margin: 0; font: 650 clamp(24px, 2.3vw, 32px)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--hi); white-space: nowrap; }
.pf-figs--live dd { color: var(--acc); text-shadow: 0 0 22px rgba(124, 245, 196, 0.3); }
.pf-figs--live dt svg { color: var(--acc); }
.pf-figs--dew dd { color: var(--moon); }
.pf-figs--dew dt svg { color: var(--moon); }
.pf-tail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px clamp(18px, 2.4vw, 36px); margin: 0; padding: 16px clamp(20px, 2.6vw, 34px) 18px; border-top: 1px solid var(--line); }
.pf-tail > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 5px 0; }
.pf-tail > div::after { content: ""; order: 1; flex: 1; min-width: 8px; border-bottom: 1px dotted var(--line2); transform: translateY(-3px); }
.pf-tail dt { order: 0; overflow: hidden; font-size: 12.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.pf-tail dd { order: 2; margin: 0; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.pf-tail .is-bad dd { color: var(--red); }
.pf-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 372px); gap: 22px; align-items: start; margin-bottom: 28px; }
.pf-duo--one { grid-template-columns: minmax(0, 1fr); }
.pf-about, .pf-badges { min-width: 0; padding: 22px 26px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.pf-about__x { max-width: 80ch; margin-top: 12px; font-size: 14.5px; line-height: 1.65; color: var(--soft); overflow-wrap: anywhere; }
.pf-about__none { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 14px; padding: 16px 18px; border: 1px dashed var(--line2); border-radius: var(--r-m); font-size: 13.5px; line-height: 1.5; color: var(--mut); }
.pf-about__none > svg { width: 20px; height: 20px; color: var(--acc); opacity: 0.75; }
.pf-about__none p { flex: 1 1 240px; margin: 0; text-wrap: pretty; }
.pf-about__sig { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mut); overflow-wrap: anywhere; }
.pf-about__sig .bb { margin-top: 8px; }
.pf-badges__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-badges__h a { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s; }
.pf-badges__h a:hover { color: var(--acc); }
.pf-badges__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; margin: 14px -8px -6px; padding: 0; list-style: none; }
.pf-badges__l a { display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; padding: 10px 2px 8px; border-radius: 14px; text-align: center; transition: background-color 0.15s; }
.pf-badges__l a:hover { background: rgba(255, 255, 255, 0.045); }
.pf-badges__l b { margin-top: 7px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--soft); text-wrap: balance; }
.pf-badges__l small { font-size: 11px; color: var(--dim); }
.pf-badges__none { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mut); }
.pf-t1 { --tc: color-mix(in oklab, var(--acc) 46%, var(--mut)); }
.pf-t2 { --tc: color-mix(in oklab, var(--acc) 62%, var(--soft)); }
.pf-t3 { --tc: var(--acc); }
.pf-t4 { --tc: var(--lav); }
.pf-t5 { --tc: var(--moon); }
.pf-medal { position: relative; display: inline-grid; place-items: center; flex: none; width: 60px; height: 60px; }
.pf-medal__f { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.022); stroke: color-mix(in oklab, var(--tc, var(--acc)) 38%, var(--line3)); stroke-width: 2.2; stroke-dasharray: 2 5.5; }
.pf-medal b { position: relative; font: 700 16px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--tc, var(--acc)) 26%, var(--dim)); }
.pf-medal b.is-long { font-size: 12.5px; }
.pf-medal__i { position: relative; width: 20px; height: 20px; color: var(--dim); }
.pf-medal.is-on .pf-medal__f { fill: color-mix(in oklab, var(--tc) 15%, transparent); stroke: var(--tc); stroke-dasharray: none; filter: drop-shadow(0 0 9px color-mix(in oklab, var(--tc) 42%, transparent)); }
.pf-medal.is-on b, .pf-medal.is-on .pf-medal__i { color: color-mix(in oklab, var(--tc) 34%, #fff); }
.pf-medal.is-next .pf-medal__f { stroke: color-mix(in oklab, var(--tc) 60%, transparent); }
.pf-medal.is-next b, .pf-medal.is-next .pf-medal__i { color: var(--soft); }
.pf-ups { margin-bottom: 30px; }
.pf-rail { position: relative; }
.pf-rail__l { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(124px, 13.2%, 168px); gap: 16px; margin: 0 -4px; padding: 6px 4px 12px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 60px), transparent); }
.pf-rail__l::-webkit-scrollbar { display: none; }
.pf-rail.is-start .pf-rail__l { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); }
.pf-rail.is-end .pf-rail__l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.pf-rail.is-start.is-end .pf-rail__l { -webkit-mask-image: none; mask-image: none; }
.pf-rail__l li { min-width: 0; scroll-snap-align: start; }
.pf-up { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-up__p { position: relative; display: block; aspect-ratio: 2 / 3; margin-bottom: 9px; overflow: hidden; border-radius: 14px; background: var(--surface2); box-shadow: 0 0 0 1px var(--line), 0 16px 30px -18px rgba(0, 0, 0, 0.9); transition: transform 0.22s var(--ease), box-shadow 0.22s; }
.pf-up__p img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-up:hover .pf-up__p, .pf-up:focus-visible .pf-up__p { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.42), 0 22px 36px -18px rgba(0, 0, 0, 0.95); }
.pf-up__ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(120% 80% at 50% 0%, rgba(124, 245, 196, 0.08), transparent 70%); color: var(--dim); }
.pf-up__ph svg { width: 30px; height: 30px; }
.pf-up__tag { position: absolute; left: 8px; top: 8px; padding: 0 8px; border-radius: 999px; background: var(--moon); font: 700 10px/18px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a0a; }
.pf-up b { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.pf-up:hover b { color: var(--acc-hi); }
.pf-up small { overflow: hidden; font-size: 11.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.pf-up__seed { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px; background: rgba(6, 9, 12, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--acc); }
.pf-up__seed i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pf-up__seed.is-zero { color: var(--mut); }
.pf-up__seed.is-zero i { box-shadow: none; }
.pf-rail__b { position: absolute; z-index: 2; top: calc(50% - 46px); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line2); border-radius: 50%; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--e3); color: var(--hi); cursor: pointer; transition: border-color 0.15s, background-color 0.15s, transform 0.12s; }
.pf-rail__b[hidden] { display: none; }
.pf-rail__b:hover { border-color: rgba(124, 245, 196, 0.5); background: rgba(18, 28, 32, 0.95); }
.pf-rail__b:active { transform: scale(0.94); }
.pf-rail__b svg { width: 16px; height: 16px; }
.pf-rail__b--prev { left: -14px; }
.pf-rail__b--prev svg { transform: rotate(180deg); }
.pf-rail__b--next { right: -14px; }
@media (hover: none) {
.pf-rail__b { display: none; }
}
.pf-own { margin: 4px 0 8px; padding: 22px 26px 24px; border: 1px dashed color-mix(in oklab, var(--lav) 40%, transparent); border-radius: var(--r-lg); background: linear-gradient(180deg, color-mix(in oklab, var(--lav) 6.5%, transparent), color-mix(in oklab, var(--lav) 2%, transparent)); }
.pf-own__h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 20px; }
.pf-own__ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--lav) 14%, transparent); color: var(--lav); }
.pf-own__ic svg { width: 18px; height: 18px; }
.pf-own__h div { flex: 1 1 260px; min-width: 0; }
.pf-own__h h2 { font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); overflow-wrap: anywhere; }
.pf-own__h p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mut); }
.pf-own dl { display: grid; gap: 18px 28px; margin: 0; }
.pf-own dl > div { min-width: 0; }
.pf-own__facts { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.pf-own .pf-own__keys { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--lav) 15%, transparent); }
.pf-own dt { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.pf-own dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--hi); }
.pf-own dd a { font-size: 12.5px; font-weight: 550; color: var(--acc); }
.pf-own dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-own__mail dd span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pf-own .secret { display: flex; width: 100%; }
.pf-own .secret code { flex: 1; min-width: 0; max-width: none; }
@media (max-width: 1320px) {
.pf-vital { grid-template-columns: minmax(0, 1fr); }
.pf-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--line); }
.pf-figs > div:nth-child(n) { border-width: 0 1px 0 0; }
.pf-figs > div:last-child { border-right-width: 0; }
.pf-tail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-duo { grid-template-columns: minmax(0, 1fr); }
.pf-badges__l { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.pf-own__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-own .pf-own__keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
.pf-tail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pf-own .pf-own__keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
.pf-tail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-own .pf-own__keys { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.pf-hero { --av: 92px; --h: 104px; --px: 18px; }
.pf-hero--cover { --h: clamp(136px, 40vw, 200px); }
.pf-hero__sky { border-radius: 21px 21px 0 0; }
.pf-hero, .pf-vital { border-radius: var(--r-lg); }
.pf-hero__av { box-shadow: 0 0 0 4px var(--floor), 0 0 0 6px var(--pc), 0 0 34px color-mix(in oklab, var(--pc) 30%, transparent); }
.pf-hero__av .pf-live { width: 17px; height: 17px; border-width: 3px; }
.pf-hero__name { position: static; margin: calc(var(--av) * 0.4 + 16px) var(--px) 0; font-size: clamp(28px, 8.6vw, 40px); text-shadow: none; }
.pf-hero__name.is-long { font-size: clamp(21px, 6vw, 28px); }
.pf-hero__band { min-height: 0; padding: 12px var(--px) 20px; }
.pf-hero__a { width: 100%; }
.pf-hero__a > .btn, .pf-hero__a > form { flex: 1 1 auto; }
.pf-hero__a > .btn-solid { flex-basis: 100%; }
.pf-hero__a .btn { justify-content: center; }
.pf-hero__a form .btn { width: 100%; }
.pf-hero__moon { top: 30%; right: 18px; width: 150px; }
.pf-ratio { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 20px 22px; }
.pf-ratio__n { font-size: 64px; }
.pf-ratio__n.is-inf { font-size: 96px; }
.pf-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-figs > div:nth-child(n) { padding: 18px 20px; border-width: 0; }
.pf-figs > div:nth-child(odd) { border-right-width: 1px; }
.pf-figs > div:nth-child(-n+2) { border-bottom-width: 1px; }
.pf-tail { gap: 2px 20px; padding: 14px 20px 16px; }
.pf-about, .pf-badges, .pf-own { padding: 20px 18px 22px; }
.pf-own__facts { gap: 16px 20px; }
.pf-own__mail, .pf-own__facts > div:last-child { grid-column: 1 / -1; }
.pf-rail__l { grid-auto-columns: 124px; gap: 12px; }
.pf-none--row { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 20px; }
}
@media (max-width: 420px) {
.pf-tail { grid-template-columns: minmax(0, 1fr); }
}
.pf-now { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: -8px 0 22px; }
.pf-now__l { display: inline-flex; align-items: center; gap: 10px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.pf-now__u { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pf-now__u a { --pc: var(--acc); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 34px; padding: 0 13px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 13px; transition: border-color 0.15s, background-color 0.15s; }
.pf-now__u a:hover { border-color: color-mix(in oklab, var(--pc) 45%, transparent); background: color-mix(in oklab, var(--pc) 8%, transparent); }
.pf-now__u b { overflow: hidden; font-weight: 600; color: var(--pc); text-overflow: ellipsis; white-space: nowrap; }
.pf-now__u .pf-face { width: 26px; height: 26px; font-size: 11px; }
.pf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-bottom: 20px; }
.pf-tools__chips { display: flex; flex: 1 1 340px; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pf-find { position: relative; display: flex; flex: 0 1 250px; align-items: center; height: 38px; }
.pf-find svg { position: absolute; left: 13px; width: 15px; height: 15px; color: var(--mut); pointer-events: none; transition: color 0.15s; }
.pf-find input { width: 100%; height: 100%; padding: 0 14px 0 37px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--text); font: inherit; font-size: 13.5px; outline: 0; transition: border-color 0.15s, box-shadow 0.15s; }
.pf-find input::placeholder { color: var(--dim); }
.pf-find input:hover { border-color: var(--line3); }
.pf-find input:focus { border-color: rgba(124, 245, 196, 0.7); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.13), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.pf-find:focus-within svg { color: var(--acc); }
.pf-sort { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.pf-sort__l { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pf-grid:not(.pf-grid--sm):not(:has(> :nth-child(4))) { grid-template-columns: repeat(auto-fit, minmax(292px, 408px)); }
.pf-card { --pc: var(--acc); position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 18px 13px; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(280px 160px at 0% 0%, color-mix(in oklab, var(--pc) 8%, transparent), transparent 72%), var(--card); box-shadow: var(--e2); transition: border-color 0.18s, transform 0.18s var(--ease), box-shadow 0.18s; }
.pf-card:hover, .pf-card:focus-visible { border-color: color-mix(in oklab, var(--pc) 42%, transparent); box-shadow: var(--e2), 0 20px 44px -26px color-mix(in oklab, var(--pc) 55%, transparent); transform: translateY(-2px); }
.pf-card__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.pf-card__av { position: relative; display: block; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px #0b1216, 0 0 0 3.5px color-mix(in oklab, var(--pc) 72%, transparent); }
.pf-card__av .pf-live { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; border: 3px solid #0c1317; box-shadow: none; }
.pf-card__who { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pf-card__who b { overflow: hidden; font: 650 16.5px/1.15 var(--display); letter-spacing: -0.02em; color: var(--pc); text-overflow: ellipsis; white-space: nowrap; }
.pf-card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pf-card__tags .rank { overflow: hidden; max-width: 100%; color: var(--pc); text-overflow: ellipsis; white-space: nowrap; }
.pf-card__ratio { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; align-self: start; padding-top: 2px; }
.pf-card__ratio b { font: 650 22px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--hi); }
.pf-card__ratio b.is-inf { font-size: 34px; line-height: 0.65; letter-spacing: 0; }
.pf-card__ratio small { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.pf-card__tr { display: flex; flex-direction: column; gap: 9px; margin-top: auto; }
.pf-card .pf-split { height: 6px; }
.pf-card .pf-split i:first-child { box-shadow: none; }
.pf-card .pf-split i:last-child, .pf-card .pf-key--down { background: color-mix(in oklab, var(--red) 44%, transparent); }
.pf-card__ud { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--soft); }
.pf-card__ud span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-card__ud small { font-size: 11px; font-weight: 400; color: var(--dim); }
.pf-card__when { display: flex; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12px; color: var(--mut); white-space: nowrap; }
.pf-card__when span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); }
.pf-card.is-gone > * { --pc: var(--dim); }
.pf-card.is-gone { background: var(--card); }
.pf-card.is-gone .pf-face { filter: grayscale(1) brightness(0.75); }
.pf-card.is-gone .pf-card__who b { color: var(--mut); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--red) 70%, transparent); }
.pf-card.is-gone .pf-card__tags .rank { color: var(--red); }
.pf-tabs { margin-bottom: 20px; }
.pf-grid--sm { grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 12px; }
.pf-card--sm { flex-direction: row; align-items: center; gap: 14px; padding: 13px 18px 13px 14px; border-radius: 18px; }
.pf-card--sm .pf-face { width: 48px; height: 48px; font-size: 19px; }
.pf-card--sm .pf-card__who { flex: 1; }
.pf-card--sm .pf-card__who b { font-size: 15.5px; }
.pf-card__since { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.pf-card__since small { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
@media (max-width: 700px) {
.pf-tools__chips { flex: 1 1 100%; flex-wrap: nowrap; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.pf-tools__chips::-webkit-scrollbar { display: none; }
.pf-find { flex: 1 1 100%; }
.pf-sort { flex: 1 1 100%; }
.pf-sort .seg { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pf-sort .seg a { flex: 1 0 auto; justify-content: center; }
.pf-grid, .pf-grid--sm, .pf-grid:not(.pf-grid--sm):not(:has(> :nth-child(4))) { grid-template-columns: minmax(0, 1fr); }
}
.pf-achh { align-items: center; }
.pf-tally { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; width: min(240px, 100%); }
.pf-tally__n { font: 600 22px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--mut); }
.pf-tally__n b { font-size: 40px; font-weight: 700; letter-spacing: -0.045em; color: var(--hi); }
.pf-tally__n i { margin: 0 6px 0 7px; font-style: normal; color: var(--dim); }
.pf-book { display: flex; flex-direction: column; gap: 18px; }
.pf-track { padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.pf-track__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.pf-track__ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--acc-soft); color: var(--acc); }
.pf-track__ic svg { width: 16px; height: 16px; }
.pf-track__h h2 { font: 650 17px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.pf-track__h p { margin: 0 0 0 auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.pf-track__h p b { font-weight: 650; color: var(--hi); }
.pf-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 22px 10px 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: rgba(255, 255, 255, 0.01); text-align: center; }
.pf-step.is-on { border-color: color-mix(in oklab, var(--tc) 24%, var(--line)); background: radial-gradient(130px 96px at 50% 0%, color-mix(in oklab, var(--tc) 12%, transparent), transparent), rgba(255, 255, 255, 0.022); box-shadow: var(--e1); }
.pf-step.is-next { border-color: var(--line2); border-style: dashed; background: rgba(255, 255, 255, 0.026); }
.pf-step__n { margin-top: 10px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--mut); overflow-wrap: anywhere; }
.pf-step.is-on .pf-step__n, .pf-step.is-next .pf-step__n { color: var(--hi); }
.pf-step__n .pill { vertical-align: 1px; }
.pf-step__s { font-size: 11.5px; line-height: 1.35; color: var(--dim); text-wrap: balance; overflow-wrap: anywhere; }
.pf-step.is-on .pf-step__s, .pf-step.is-next .pf-step__s { color: var(--mut); }
.pf-step__p { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; margin-top: 6px; font-size: 11.5px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--soft); }
.pf-step__p .pf-meter { max-width: 104px; height: 4px; }
.pf-step__pts { position: absolute; top: 9px; right: 11px; font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dim); }
.pf-step.is-on .pf-step__pts { color: color-mix(in oklab, var(--tc) 80%, var(--hi)); }
@media (max-width: 1320px) {
.pf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.pf-tally { align-items: flex-start; width: 100%; }
.pf-track { padding: 18px 14px 16px; }
.pf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pf-step { padding: 14px 6px 10px; }
.pf-step__pts { position: static; margin-top: auto; padding-top: 7px; }
.pf-step .pf-medal { width: 52px; height: 52px; }
.pf-step .pf-medal b { font-size: 14px; }
.pf-step__n { font-size: 12.5px; }
}
@media (max-width: 380px) {
.pf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.pf-card, .pf-up__p { transition: none; }
.pf-card:hover, .pf-up:hover .pf-up__p { transform: none; }
}
.al-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.al-mono { font-family: var(--mono); font-size: 13px; }
.ph__sub b.al-hot { color: var(--amber); }
.ph__sub b.al-dew { color: var(--moon); }
.al-flip { transform: scaleX(-1); }
.alert.a1-flash, .alert.a2-flash, .alert.al-flash { margin: 0; color: var(--text); }
.alert--ok.a1-flash, .alert--ok.a2-flash, .alert--ok.al-flash { border-color: rgba(110, 231, 168, 0.3); }
.alert--ok.a1-flash::before, .alert--ok.a2-flash::before, .alert--ok.al-flash::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.alert--err.a1-flash, .alert--err.a2-flash, .alert--err.al-flash { border-color: rgba(255, 143, 143, 0.34); }
.alert--err.a1-flash::before, .alert--err.a2-flash::before, .alert--err.al-flash::before { background: var(--red); box-shadow: 0 0 10px var(--red); }
.al-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.al-bar__tools { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.al-chips .chip { height: 34px; padding: 0 14px; }
.al-chips .chip small { min-width: 1ch; font-size: 11.5px; font-weight: 600; text-align: center; }
.al-find__q { position: relative; display: flex; flex: 1 1 260px; align-items: center; min-width: 0; }
.al-find__q svg { position: absolute; left: 15px; width: 15px; height: 15px; color: var(--mut); pointer-events: none; }
.al-find__q input { width: 100%; height: 40px; padding: 0 16px 0 41px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--text); font: inherit; font-size: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
.al-find__q input::placeholder { color: var(--dim); }
.al-find__q input:hover { border-color: var(--line3); }
.al-find__q input:focus { outline: 0; border-color: rgba(124, 245, 196, 0.7); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.13), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.al-find__q:focus-within svg { color: var(--acc); }
.al-find .select { flex: 0 1 196px; width: auto; min-width: 0; height: 40px; border-radius: 999px; padding-left: 16px; font-size: 13.5px; }
.al-find .btn { height: 40px; padding: 0 18px; }
.al-panel { container: al / inline-size; overflow: clip; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.al-panel--empty { border-style: dashed; border-color: var(--line2); background: linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0.008)); box-shadow: none; }
.al-list { margin: 0; padding: 0; list-style: none; }
.al-cols { display: none; column-gap: 16px; align-items: center; height: 40px; padding: 0 20px; border-bottom: 1px solid var(--line); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.al-cols > span { text-align: right; }
.al-cols > span:first-child, .al-cols > span:nth-child(2), .al-cols > .al-l { text-align: left; }
.al-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "lead main state act" "lead stats stats stats"; align-items: start; gap: 12px 0; padding: 14px 20px; border-top: 1px solid var(--line); transition: background-color 0.15s; }
.al-list > .al-row:first-child { border-top: 0; }
.al-list--inv > .al-row { grid-template-areas: "lead main state act"; }
.al-row:hover { background: rgba(124, 245, 196, 0.028); }
.al-row > .al-art, .al-row > .al-face, .al-row > .al-facelink { grid-area: lead; margin-right: 14px; }
.al-main { grid-area: main; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-stats { grid-area: stats; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px 18px; min-width: 0; }
.al-state { grid-area: state; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; margin-left: 14px; }
.al-state small { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.al-state small a { font-weight: 600; }
.al-act { grid-area: act; margin-left: 12px; }
.al-act:empty { display: none; }
.al-act form { display: flex; }
.al-art { display: block; flex: none; width: 46px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 7px; background: var(--surface3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 16px -9px rgba(0, 0, 0, 0.85); transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.al-art img { width: 100%; height: 100%; object-fit: cover; }
.al-art--none { display: grid; place-items: center; background: linear-gradient(160deg, rgba(124, 245, 196, 0.09), rgba(195, 166, 255, 0.07)), var(--surface2); color: var(--dim); }
.al-art--none svg { width: 18px; height: 18px; }
a.al-art:hover, .al-row:hover a.al-art { box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.4), 0 10px 20px -9px rgba(0, 0, 0, 0.9); }
.al-face { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; --c: var(--acc); background: color-mix(in srgb, var(--c) 15%, #0b1114); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent); color: var(--c); font: 650 14px/1 var(--display); text-transform: uppercase; object-fit: cover; }
img.al-face { background: var(--surface3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.al-face--ic { --c: var(--mut); }
.al-face--ic svg { width: 16px; height: 16px; }
.al-facelink { display: block; border-radius: 50%; }
.al-title { overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.al-title i { margin-left: 3px; font-style: normal; font-weight: 450; color: var(--mut); }
a.al-title:hover { color: var(--acc-hi); }
.al-title--rel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 500 12.5px/1.45 var(--mono); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.al-title--gone { color: var(--mut); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.28); }
.al-title--plain { font-weight: 550; }
.al-title--plain a { transition: color 0.15s; }
.al-title--wrap { white-space: normal; overflow-wrap: anywhere; }
.al-dir { font-weight: 450; color: var(--mut); }
.al-rel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 11.5px/1.45 var(--mono); color: var(--mut); overflow-wrap: anywhere; }
a.al-rel:hover { color: var(--acc); }
.al-rel--gone { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.28); }
.al-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 15px; margin-top: 1px; overflow-x: clip; font-size: 12px; line-height: 1.5; color: var(--dim); }
.al-meta > span { position: relative; }
.al-meta > span::before { content: "·"; position: absolute; left: -9px; opacity: 0.7; }
.al-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.al-meta > .al-tags::before { content: none; }
.al-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.075); font-style: normal; font-size: 10.5px; font-weight: 650; letter-spacing: 0.01em; color: var(--soft); white-space: nowrap; }
.al-tag--free { background: rgba(244, 241, 208, 0.12); color: var(--moon); }
.al-tag--du { background: rgba(143, 203, 255, 0.13); color: var(--bmoon); }
.al-tag--int { background: rgba(195, 166, 255, 0.13); color: var(--lav); }
.al-tag--feat { background: rgba(244, 222, 140, 0.12); color: var(--amber); }
.al-quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; padding-left: 10px; border-left: 2px solid var(--line2); font-size: 13px; line-height: 1.5; color: var(--soft); overflow-wrap: anywhere; }
.al-copy { display: flex; align-items: center; gap: 4px; max-width: 460px; height: 30px; margin-top: 6px; padding: 0 3px 0 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3, 6, 8, 0.42); }
.al-copy code { flex: 1; min-width: 0; overflow: hidden; font-size: 11.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.al-copy button { display: grid; flex: none; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--mut); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.al-copy button:hover { background: rgba(124, 245, 196, 0.12); color: var(--acc); }
.al-copy button svg { width: 13px; height: 13px; }
.al-n { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.al-k { margin-bottom: 3px; font: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.al-n small { font-size: 11.5px; font-weight: 400; color: var(--dim); }
.al-n b { font-weight: 600; }
.al-n code { font-size: 12.5px; color: var(--soft); }
.al-n a { font-weight: 600; }
.al-n--live { font-weight: 600; color: var(--acc); }
.al-n--zero { color: var(--dim); }
.al-n--down { color: var(--soft); }
.al-n--when { font-size: 12.5px; font-weight: 450; color: var(--mut); }
.al-n--dew { font-weight: 600; }
.al-n--in { color: var(--green); }
.al-n--out { color: var(--soft); }
.al-n--prog, .al-n--client, .al-n--ip { grid-column: span 2; align-items: stretch; }
.al-n--prog { max-width: 230px; }
.al-n--ip code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.al-n--ip .al-pill { align-self: flex-start; }
.al-client { display: flex; flex-direction: column; min-width: 0; }
.al-client b { overflow: hidden; font-weight: 550; color: var(--text); text-overflow: ellipsis; }
.al-client small { overflow: hidden; text-overflow: ellipsis; }
.al-conn--yes { color: var(--mut); }
.al-conn--no { color: var(--red); }
.al-prog { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.al-prog__t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.al-prog__t b { font-weight: 550; color: var(--text); }
.al-prog__t small svg { width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; stroke-width: 2.8; color: var(--green); }
.al-track { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.al-track i { display: block; height: 100%; min-width: 2px; border-radius: 4px; background: rgba(196, 232, 222, 0.5); }
.al-prog--done .al-track i { background: var(--green); opacity: 0.75; }
.al-prog--grow .al-track i { background: var(--acc); box-shadow: 0 0 8px rgba(124, 245, 196, 0.55); }
.al-prog--fade .al-track i { background: var(--amber); }
.al-prog--leech .al-track i { background: var(--bmoon); }
.al-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--soft); white-space: nowrap; }
.al-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.al-pill--seed { background: rgba(124, 245, 196, 0.1); color: var(--acc); }
.al-pill--seed::before { opacity: 1; box-shadow: 0 0 8px currentColor; }
.al-pill--leech { background: rgba(143, 203, 255, 0.11); color: var(--bmoon); }
.al-pill--ok { background: rgba(110, 231, 168, 0.11); color: var(--green); }
.al-pill--warn { background: rgba(244, 222, 140, 0.11); color: var(--amber); }
.al-pill--bad { background: rgba(255, 143, 143, 0.11); color: var(--red); }
.al-pill--lav { background: rgba(195, 166, 255, 0.11); color: var(--lav); }
.al-row--bad { box-shadow: inset 2px 0 0 rgba(255, 143, 143, 0.75); }
.al-row--warn { background: linear-gradient(90deg, rgba(244, 222, 140, 0.055), transparent 42%); box-shadow: inset 2px 0 0 rgba(244, 222, 140, 0.8); }
.al-row--warn:hover { background: linear-gradient(90deg, rgba(244, 222, 140, 0.075), rgba(124, 245, 196, 0.02) 42%); }
.al-row--past .al-title { font-weight: 500; color: var(--soft); }
.al-row--past .al-face { --c: var(--dim); }
.al-row--stale .al-art img { filter: saturate(0.35) brightness(0.8); }
.al-cols--ups, .al-list--ups { --al-cols: 46px minmax(0, 1fr) 78px 58px 58px 62px 66px; }
.al-cols--hist, .al-list--hist { --al-cols: 46px minmax(0, 1fr) 88px 88px 50px 140px 116px; }
.al-cols--peers, .al-list--peers { --al-cols: 46px minmax(0, 1fr) 160px 78px 82px 128px 112px; }
.al-cols--res, .al-list--res { --al-cols: 46px minmax(0, 1fr) 66px 142px 66px 140px; }
.al-cols--res.al-cols--act, .al-list--res.al-list--act { --al-cols: 46px minmax(0, 1fr) 66px 142px 66px 140px 88px; }
.al-list--gifts { --al-cols: 36px minmax(0, 1fr) 96px 64px 92px; }
.al-cols--warn, .al-list--warn { --al-cols: minmax(0, 1fr) 116px 68px 104px 84px; }
.al-cols--sb, .al-list--sb { --al-cols: 36px minmax(120px, 1fr) minmax(0, 1.4fr) 76px; }
.al-cols--sb.al-cols--act, .al-list--sb.al-list--act { --al-cols: 36px minmax(120px, 1fr) minmax(0, 1.4fr) 76px 84px; }
@container al (min-width: 540px) {
.al-cols.al-t540 { display: grid; grid-template-columns: var(--al-cols); }
.al-t540 > .al-row { grid-template-columns: var(--al-cols); grid-template-areas: none; align-items: center; column-gap: 16px; padding-block: 12px; }
.al-t540 > .al-row > * { grid-area: auto; margin-inline: 0; }
.al-t540 .al-stats { display: contents; }
.al-t540 .al-n { align-items: flex-end; text-align: right; }
.al-t540 .al-n--prog, .al-t540 .al-n--client, .al-t540 .al-n--by, .al-t540 .al-n--ip { grid-column: auto; align-items: stretch; max-width: none; text-align: left; }
.al-t540 .al-k { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.al-t540 .al-act { justify-self: end; }
}
@container al (min-width: 700px) {
.al-cols.al-t700 { display: grid; grid-template-columns: var(--al-cols); }
.al-t700 > .al-row { grid-template-columns: var(--al-cols); grid-template-areas: none; align-items: center; column-gap: 16px; padding-block: 12px; }
.al-t700 > .al-row > * { grid-area: auto; margin-inline: 0; }
.al-t700 .al-stats { display: contents; }
.al-t700 .al-n { align-items: flex-end; text-align: right; }
.al-t700 .al-n--prog, .al-t700 .al-n--client, .al-t700 .al-n--by, .al-t700 .al-n--ip { grid-column: auto; align-items: stretch; max-width: none; text-align: left; }
.al-t700 .al-k { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.al-t700 .al-act { justify-self: end; }
}
@container al (min-width: 840px) {
.al-cols.al-t840 { display: grid; grid-template-columns: var(--al-cols); }
.al-t840 > .al-row { grid-template-columns: var(--al-cols); grid-template-areas: none; align-items: center; column-gap: 16px; padding-block: 12px; }
.al-t840 > .al-row > * { grid-area: auto; margin-inline: 0; }
.al-t840 .al-stats { display: contents; }
.al-t840 .al-n { align-items: flex-end; text-align: right; }
.al-t840 .al-n--prog, .al-t840 .al-n--client, .al-t840 .al-n--by, .al-t840 .al-n--ip { grid-column: auto; align-items: stretch; max-width: none; text-align: left; }
.al-t840 .al-k { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.al-t840 .al-act { justify-self: end; }
}
@container al (min-width: 930px) {
.al-cols.al-t930 { display: grid; grid-template-columns: var(--al-cols); }
.al-t930 > .al-row { grid-template-columns: var(--al-cols); grid-template-areas: none; align-items: center; column-gap: 16px; padding-block: 12px; }
.al-t930 > .al-row > * { grid-area: auto; margin-inline: 0; }
.al-t930 .al-stats { display: contents; }
.al-t930 .al-n { align-items: flex-end; text-align: right; }
.al-t930 .al-n--prog, .al-t930 .al-n--client, .al-t930 .al-n--by, .al-t930 .al-n--ip { grid-column: auto; align-items: stretch; max-width: none; text-align: left; }
.al-t930 .al-k { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); }
.al-t930 .al-act { justify-self: end; }
}
@container al (max-width: 520px) {
.al-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "lead main main" "lead state act" "stats stats stats"; padding: 14px 16px; }
.al-state { flex-direction: row; flex-wrap: wrap; align-items: center; margin-left: 0; }
.al-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.al-list--warn > .al-row { grid-template-areas: "main main main" "state state act" "stats stats stats"; }
.al-list--sb > .al-row { grid-template-areas: "lead main act" "stats stats stats"; align-items: center; }
.al-list--peers .al-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-list--peers .al-n--prog { grid-column: 1 / -1; max-width: none; }
}
.al-empty { display: grid; justify-items: center; gap: 7px; padding: 52px 24px 56px; text-align: center; }
.al-empty .moon { width: 58px; height: 58px; margin-bottom: 16px; filter: drop-shadow(0 0 20px rgba(244, 241, 208, 0.3)); }
.al-empty .moon__disc { fill: rgba(244, 241, 208, 0.12); }
.al-empty h2 { font: 650 19px/1.25 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.al-empty p { max-width: 46ch; margin: 0; font-size: 14px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.al-empty .btn { margin-top: 14px; }
.al-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 4px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mut); }
.al-pager .btn svg { width: 13px; height: 13px; }
.al-pager__at i { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line2); font-style: normal; color: var(--dim); }
.al-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.al-card__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.al-card__h h2, .al-add__h h2 { font: 650 15.5px/1.25 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.al-card__n { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); white-space: nowrap; }
.al-card__n b { font-weight: 650; color: var(--hi); }
.al-card__n svg { width: 12px; height: 12px; color: var(--moon); }
.al-form { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; }
.al-form .textarea { min-height: 104px; }
.al-card { container: alcard / inline-size; }
@container alcard (min-width: 620px) {
.al-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; align-items: start; }
.al-form__go, .al-form__w { grid-column: 1 / -1; }
.al-form__tall { grid-column: 2; grid-row: 1 / span 2; }
.al-form__tall .textarea { min-height: 150px; }
}
.al-form__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 2px; }
.al-form__go .help { flex: 1 1 180px; }
.al-note { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 20px; font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.al-note svg { width: 17px; height: 17px; margin-top: 2px; color: var(--dim); }
.al-note p { margin: 0; }
.al-note a { font-weight: 600; color: var(--acc); }
.al-note a:hover { color: var(--acc-hi); }
.al-add { container: aladd / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.al-add__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; }
.al-add__h p { margin: 0; font-size: 13px; color: var(--mut); }
.al-add__f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.al-add__f .btn { height: 42px; padding: 0 18px; justify-content: center; }
.al-add__help { margin: -2px 0 0; }
@container aladd (min-width: 300px) and (max-width: 599.9px) {
.al-add__f--wish { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-add__f--wish > .field:nth-of-type(3), .al-add__f--wish > .btn { grid-column: 1 / -1; }
}
@container aladd (min-width: 600px) {
.al-add__f { align-items: start; }
.al-add__f .btn { margin-top: 26px; }
.al-add__f--wish { grid-template-columns: 136px 150px minmax(0, 1fr) auto; }
.al-add__f--rs { grid-template-columns: minmax(0, 220px) minmax(0, 220px) auto; justify-content: start; }
.al-add__f--sb { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; }
}
.al-two { container: altwo / inline-size; }
.al-two__g { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@container altwo (min-width: 860px) {
.al-two__g { grid-template-columns: minmax(0, 1fr) 344px; align-items: start; }
.al-two__side { grid-column: 2; grid-row: 1; }
.al-two__main { grid-column: 1; grid-row: 1; }
.al-two__main:only-child { grid-column: 1 / -1; }
}
.al-fresh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 20px 22px; border: 1px solid rgba(124, 245, 196, 0.34); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(124, 245, 196, 0.1), rgba(124, 245, 196, 0.02) 62%), var(--card); box-shadow: var(--e2); }
.al-fresh__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(124, 245, 196, 0.14); color: var(--acc); }
.al-fresh__ic svg { width: 19px; height: 19px; }
.al-fresh__t { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.al-fresh h2 { font: 650 17px/1.25 var(--display); letter-spacing: -0.025em; color: var(--hi); overflow-wrap: anywhere; }
.al-fresh p { margin: 0; max-width: 70ch; font-size: 13.5px; color: var(--soft); }
.al-fresh__link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.al-fresh__link code { flex: 1 1 260px; min-width: 0; padding: 10px 14px; overflow: hidden; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(3, 6, 8, 0.55); font-size: 12.5px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.al-shelf { container: alshelf / inline-size; }
.al-shelf__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 26px 18px; margin: 0; padding: 2px 0 0; list-style: none; }
.al-tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.al-tile__top { position: relative; }
.al-tile__p { display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 34px -24px rgba(0, 0, 0, 0.95); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.al-tile__p img { width: 100%; height: 100%; object-fit: cover; }
a.al-tile__p:hover, .al-tile:hover a.al-tile__p { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.42), 0 30px 40px -24px rgba(0, 0, 0, 1); }
.al-tile__none { display: grid; place-content: center; justify-items: center; gap: 12px; width: 100%; height: 100%; padding: 16px; background: radial-gradient(120% 80% at 50% 0%, rgba(124, 245, 196, 0.1), transparent 60%), linear-gradient(160deg, rgba(195, 166, 255, 0.08), rgba(143, 203, 255, 0.04)), var(--surface2); color: var(--dim); text-align: center; }
.al-tile__none svg { width: 26px; height: 26px; }
.al-tile__none b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font: 650 15px/1.25 var(--display); letter-spacing: -0.02em; color: var(--soft); overflow-wrap: anywhere; }
.al-tile__tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.al-tile__tags .al-tag { background: rgba(6, 9, 12, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.al-tile__swarm { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 26px 11px 9px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, transparent, rgba(4, 7, 9, 0.9)); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--soft); pointer-events: none; transition: transform 0.25s var(--ease); }
.al-tile:hover .al-tile__swarm { transform: translateY(-3px); }
.al-tile__swarm > span { display: inline-flex; align-items: center; gap: 4px; }
.al-tile__swarm svg { width: 11px; height: 11px; stroke-width: 2.4; color: var(--mut); }
.al-tile__swarm i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.al-tile__swarm .al-live { color: var(--acc); }
.al-tile__swarm .al-live i { box-shadow: 0 0 8px currentColor; }
.al-tile__swarm .al-zero { color: var(--mut); }
.al-tile__size { margin-left: auto; font-weight: 500; color: var(--soft); }
.al-tile__ribbon { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; pointer-events: none; }
.al-tile__ribbon .al-pill { max-width: 100%; overflow: hidden; background: rgba(6, 9, 12, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); text-overflow: ellipsis; }
.al-tile__ribbon .al-pill--seed { box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.35); }
.al-tile__b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.al-tile__b .al-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; font-size: 14px; }
.al-tile__b .al-rel { -webkit-line-clamp: 1; word-break: break-all; }
.al-tile__f { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-top: auto; }
.al-tile__f form { display: flex; margin-left: auto; }
.al-tile__when { overflow: hidden; font-size: 12px; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
form.al-tile__f { justify-content: flex-start; }
.al-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin: 0 -10px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--mut); cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.al-link:hover { background: rgba(255, 143, 143, 0.1); color: var(--red); }
.al-link svg { width: 13px; height: 13px; fill: currentColor; color: var(--moon); transition: color 0.15s; }
.al-link:hover svg { fill: none; color: var(--red); }
.al-tile__f > form:only-child .al-link, form.al-tile__f .al-link { margin-left: -10px; }
@container alshelf (max-width: 520px) {
.al-shelf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
}
.al-treebox { container-type: normal; }
.al-tree { margin: 0; padding: 0 0 0 44px; list-style: none; }
.al-tree--top { padding: 20px 20px 22px; overflow-x: auto; }
.al-node { position: relative; padding-top: 10px; }
.al-tree--top > .al-node { padding-top: 0; }
.al-tree .al-tree > .al-node::before { content: ""; position: absolute; top: 0; left: -17px; width: 17px; height: 37px; border-bottom: 1px solid var(--line3); border-left: 1px solid var(--line3); border-bottom-left-radius: 11px; }
.al-tree .al-tree > .al-node:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -17px; border-left: 1px solid var(--line3); }
.al-node__c { display: inline-grid; grid-template-columns: 36px minmax(0, auto); grid-template-areas: "face t" "face m"; align-items: center; column-gap: 12px; max-width: 100%; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: 27px; background: rgba(255, 255, 255, 0.028); box-shadow: var(--e1); vertical-align: top; transition: border-color 0.15s, background-color 0.15s; }
.al-node__c:hover { border-color: var(--line2); background: rgba(255, 255, 255, 0.045); }
.al-node__c > .al-face, .al-node__c > .al-facelink { grid-area: face; }
.al-node__t { grid-area: t; display: flex; align-items: center; gap: 8px; min-width: 0; }
.al-node__n { overflow: hidden; font-size: 14px; font-weight: 650; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
a.al-node__n:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-node__t .rank { flex: none; }
.al-node__m { grid-area: m; font-size: 12px; line-height: 1.45; color: var(--mut); font-variant-numeric: tabular-nums; }
.al-node--me > .al-node__c { border-color: rgba(124, 245, 196, 0.45); background: linear-gradient(90deg, rgba(124, 245, 196, 0.12), rgba(124, 245, 196, 0.02)); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.06), var(--e1); }
.al-node--ghost > .al-node__c { border-style: dashed; border-color: var(--line2); border-radius: 20px; background: none; box-shadow: none; }
.al-node--ghost .al-node__n { font-weight: 600; color: var(--soft); white-space: normal; }
.al-node--ghost .al-node__m { max-width: 46ch; }
@media (max-width: 640px) {
.al-tree { padding-left: 30px; }
.al-tree--top { padding: 16px 14px 18px; }
.al-tree .al-tree > .al-node::before, .al-tree .al-tree > .al-node:not(:last-child)::after { left: -9px; }
.al-tree .al-tree > .al-node::before { width: 9px; height: 33px; border-bottom-left-radius: 8px; }
.al-node__c { grid-template-columns: 28px minmax(0, auto); column-gap: 9px; padding: 6px 12px 6px 6px; border-radius: 22px; }
.al-node__c .al-face { width: 28px; height: 28px; font-size: 12px; }
.al-node__t { flex-wrap: wrap; gap: 2px 6px; }
.al-node__t .rank { font-size: 9px; line-height: 15px; padding: 0 6px; }
.al-find__q { flex-basis: 100%; }
.al-find .select { flex: 1 1 130px; }
.al-card__h, .al-form, .al-note { padding-inline: 16px; }
.al-add { padding: 14px 16px 16px; }
.al-fresh { grid-template-columns: minmax(0, 1fr); padding: 16px; }
.al-fresh__ic { display: none; }
.al-empty { padding: 40px 18px 44px; }
}
.sg { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sg > .ph { margin-bottom: 4px; }
.sg--set { max-width: 1120px; }
.sg-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sg-mono { font-family: var(--mono); font-size: 13px; }
.sg-nav { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 2px; max-width: 100%; padding: 4px; border: 1px solid var(--line2); border-radius: 22px; background: rgba(3, 6, 8, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
.sg-nav a { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 999px; font-size: 13px; font-weight: 550; color: var(--mut); white-space: nowrap; transition: color 0.15s, background-color 0.15s; }
.sg-nav a:hover { background: rgba(255, 255, 255, 0.045); color: var(--hi); }
.sg-nav a.is-on { background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.35); color: var(--hi); }
.sg-nav__php { font-style: normal; color: var(--dim); }
.sg-note { display: flex; align-items: flex-start; gap: 12px; padding: 13px 18px 13px 14px; border: 1px solid var(--line2); border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1); font-size: 13.5px; line-height: 1.55; color: var(--soft); overflow-wrap: anywhere; animation: sg-in 0.4s var(--ease) both; }
.sg-note > svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; }
.sg-note p { margin: 0; }
.sg-note > div { min-width: 0; }
.sg-note ul { margin: 3px 0 0; padding-left: 18px; }
.sg-note--ok { border-color: rgba(124, 245, 196, 0.34); background: linear-gradient(90deg, rgba(124, 245, 196, 0.11), rgba(124, 245, 196, 0.03)); }
.sg-note--ok > svg { background: var(--acc); color: var(--on-acc); stroke-width: 3.2; box-shadow: 0 0 14px rgba(124, 245, 196, 0.4); }
.sg-note--err { border-color: rgba(255, 143, 143, 0.42); background: linear-gradient(90deg, rgba(255, 143, 143, 0.11), rgba(255, 143, 143, 0.03)); }
.sg-note--err > svg { background: rgba(255, 143, 143, 0.18); color: var(--red); }
.sg-note--err b { color: var(--red); }
.sg-note--warn { border-color: rgba(244, 222, 140, 0.4); background: linear-gradient(90deg, rgba(244, 222, 140, 0.1), rgba(244, 222, 140, 0.03)); }
.sg-note--warn > svg { background: rgba(244, 222, 140, 0.16); color: var(--amber); }
@keyframes sg-in { from { opacity: 0; transform: translateY(-6px); } }
.sg-form, .sg-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.sg-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.sg-card__h { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 8px; }
.sg-card__h > div { flex: 1; min-width: 0; }
.sg-card__h h2 { font: 650 17px/1.25 var(--display); letter-spacing: -0.022em; color: var(--hi); }
.sg-card__h p { margin: 4px 0 0; max-width: 76ch; font-size: 13px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.sg-card__h p code, .sg-row__help code, .sg-how code { padding: 1px 4px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); font-size: 12px; color: var(--soft); overflow-wrap: anywhere; }
.sg-card__h > .pill { flex: none; margin-top: 2px; }
.sg-card__ic { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 13px; background: rgba(255, 255, 255, 0.04); box-shadow: var(--e1); color: var(--soft); }
.sg-card__ic svg { width: 18px; height: 18px; }
.sg-card__ic--ok { border-color: rgba(124, 245, 196, 0.35); background: var(--acc-soft); color: var(--acc); }
.sg-card__ic--moon { border-color: rgba(244, 241, 208, 0.3); background: rgba(244, 241, 208, 0.08); color: var(--moon); }
.sg-card__ic--blue { border-color: rgba(143, 203, 255, 0.3); background: rgba(143, 203, 255, 0.08); color: var(--bmoon); }
.sg-card__ic--lav { border-color: rgba(195, 166, 255, 0.3); background: rgba(195, 166, 255, 0.08); color: var(--lav); }
.sg-card__f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 24px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); background: rgba(0, 0, 0, 0.16); font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.sg-card__f > span { flex: 1 1 220px; min-width: 0; }
.sg-card__f--danger { background: linear-gradient(90deg, rgba(255, 143, 143, 0.06), rgba(0, 0, 0, 0.16) 70%); }
.sg-rows, .sg-pad { padding: 2px 24px 8px; }
.sg-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: center; gap: 8px 32px; padding: 16px 0; border-top: 1px solid var(--line); }
.sg-row:first-child { border-top: 0; }
.sg-row--stack { grid-template-columns: minmax(0, 1fr); }
.sg-row__l { min-width: 0; }
.sg-row__l label, .sg-row__t, .sg-field > label { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); }
.sg-row__help { margin: 3px 0 0; max-width: 58ch; font-size: 12.5px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.sg-row__c { min-width: 0; }
.sg-row__c--end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sg-err, .sg-ok { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.sg-err { color: var(--red); }
.sg-ok { color: var(--acc); }
.sg-static { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 42px; }
.sg-static code { font-size: 13px; color: var(--hi); overflow-wrap: anywhere; }
.sg-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sg-more { margin: 0; font-size: 13px; color: var(--mut); }
.sg-more a, .sg-card__h p a, .sg-row__help a, .sg-how a, .sg-none a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(124, 245, 196, 0.45); }
.sg-more a:hover, .sg-card__h p a:hover, .sg-row__help a:hover, .sg-how a:hover, .sg-none a:hover { color: var(--acc-hi); text-decoration-color: currentColor; }
.sg-sw { appearance: none; position: relative; flex: none; width: 42px; height: 24px; margin: 0; border: 1px solid var(--line3); border-radius: 999px; background: rgba(3, 6, 8, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4); cursor: pointer; transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s; }
.sg-sw::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--mut); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: transform 0.2s var(--ease), background-color 0.18s; }
.sg-sw:hover { border-color: rgba(124, 245, 196, 0.55); }
.sg-sw:checked { border-color: transparent; background: var(--acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 14px rgba(124, 245, 196, 0.28); }
.sg-sw:checked::before { transform: translateX(18px); background: var(--ink); }
.sg-sw:disabled { opacity: 0.45; cursor: not-allowed; }
.sg-flags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
.sg-flags--1 { grid-template-columns: minmax(0, 1fr); }
.sg-flag { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 11px 0; border-top: 1px solid var(--line); cursor: pointer; }
.sg-flag:first-child, .sg-flags:not(.sg-flags--1) > .sg-flag:nth-child(2) { border-top: 0; }
.sg-flag__t { min-width: 0; font-size: 13.5px; font-weight: 550; line-height: 1.4; color: var(--text); transition: color 0.15s; }
.sg-flag__t small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--mut); }
.sg-flag:has(.sg-sw:not(:checked)) .sg-flag__t { color: var(--soft); }
.sg-flags--1 .sg-flag { min-height: 58px; }
.sg-flags--1 .sg-flag__t { font-size: 14px; font-weight: 600; }
.sg-flags--1 .sg-flag:has(.sg-sw:not(:checked)) .sg-flag__t { color: var(--text); }
.sg-flag:hover .sg-flag__t, .sg-flags--1 .sg-flag:hover .sg-flag__t { color: var(--hi); }
.sg-groups { padding: 2px 24px 8px; }
.sg-group { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 28px; padding: 8px 0; border-top: 1px solid var(--line); }
.sg-group:first-child { border-top: 0; }
.sg-group h3 { margin: 0; padding-top: 17px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.sg-master:has(.sg-sw:checked) { border-color: rgba(244, 241, 208, 0.3); }
.sg-master:has(.sg-sw:checked) .sg-card__ic { border-color: rgba(244, 241, 208, 0.3); background: rgba(244, 241, 208, 0.08); color: var(--moon); }
.sg-master .sg-sw:checked { background: var(--moon); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 14px rgba(244, 241, 208, 0.3); }
.sg-form:has(.sg-master .sg-sw:checked) .sg-quiet { opacity: 0.5; }
.sg-quiet { transition: opacity 0.25s; }
.sg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-opt { position: relative; display: inline-flex; }
.sg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sg-opt span { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 13px; font-weight: 550; color: var(--soft); white-space: nowrap; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.sg-opt span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line3); transition: background-color 0.15s, box-shadow 0.15s; }
.sg-opt:hover span { border-color: rgba(124, 245, 196, 0.4); color: var(--hi); }
.sg-opt input:checked + span { border-color: rgba(124, 245, 196, 0.55); background: var(--acc-soft); color: var(--hi); }
.sg-opt input:checked + span::before { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.sg-opt input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.sg-tick { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--line3); border-radius: 6px; background: rgba(3, 6, 8, 0.5) center / 12px no-repeat; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.sg-tick:hover { border-color: rgba(124, 245, 196, 0.6); }
.sg-tick:checked { border-color: transparent; background-color: var(--acc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304110c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); box-shadow: 0 0 10px rgba(124, 245, 196, 0.3); }
.sg-matrixwrap { margin-top: 8px; overflow-x: auto; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); scrollbar-width: thin; }
.sg-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sg-matrix thead th { padding: 13px 8px 11px; border-bottom: 1px solid var(--line); font: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.sg-matrix th:first-child { padding-left: 24px; text-align: left; }
.sg-matrix__g { padding: 0 16px 0 24px; font-weight: 600; text-align: left; white-space: nowrap; color: var(--soft); }
.sg-matrix td { padding: 0; border-top: 1px solid var(--line); text-align: center; }
.sg-matrix tbody th { border-top: 1px solid var(--line); }
.sg-matrix tbody tr:first-child > * { border-top: 0; }
.sg-matrix td label { display: grid; place-items: center; min-width: 64px; height: 42px; cursor: pointer; }
.sg-matrix tbody tr { transition: background-color 0.15s; }
.sg-matrix tbody tr:hover { background: rgba(124, 245, 196, 0.035); }
.sg-matrix td:last-child label { padding-right: 12px; }
.sg-matrix td.sg-matrix__none { padding: 26px 24px; font-size: 13px; color: var(--mut); }
.sg-blocks { margin: 0; padding: 2px 24px 8px; list-style: none; }
.sg-block { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; min-height: 54px; padding: 8px 0; border-top: 1px solid var(--line); }
.sg-block:first-child { border-top: 0; }
.sg-block__n { font-size: 13.5px; font-weight: 550; color: var(--text); transition: color 0.15s; }
.sg-block:has(.sg-sw:not(:checked)) .sg-block__n { color: var(--mut); }
.sg-block__n .sg-err { display: block; margin: 2px 0 0; font-weight: 400; }
.sg-block__pos { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mut); }
.sg-block__pos .input { width: 70px; height: 36px; padding: 0 6px 0 12px; font-variant-numeric: tabular-nums; color-scheme: dark; }
.sg-save { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 9px 10px 9px 22px; border: 1px solid var(--line2); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--e3); transition: border-color 0.2s; }
.sg-save__t { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; margin: 0; font-size: 13px; line-height: 1.4; color: var(--mut); }
.sg-save__t i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transition: background-color 0.2s, box-shadow 0.2s; }
.sg-save.is-dirty { border-color: rgba(244, 241, 208, 0.36); }
.sg-save.is-dirty .sg-save__t { color: var(--hi); }
.sg-save.is-dirty .sg-save__t i { background: var(--moon); box-shadow: 0 0 10px var(--moon); }
.sg-save .btn-solid { height: 38px; padding: 0 20px; }
.sg-danger { padding: 0 24px; border-top: 1px solid rgba(255, 143, 143, 0.24); border-radius: 0 0 var(--r-lg) var(--r-lg); background: linear-gradient(90deg, rgba(255, 143, 143, 0.07), rgba(255, 143, 143, 0.015)); }
.sg-danger .sg-row__t { color: var(--red); }
.sg-textbtn { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 550; color: var(--mut); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line3); cursor: pointer; transition: color 0.15s; }
.sg-textbtn:hover { color: var(--hi); }
.sg-linkrow { display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 24px; transition: border-color 0.15s, background 0.15s; }
.sg-linkrow:hover { border-color: var(--line3); background: var(--card-hi); }
.sg-linkrow__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; color: var(--soft); }
.sg-linkrow__t small { font-size: 12.5px; color: var(--mut); }
.sg-linkrow__go { display: inline-flex; flex: none; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.sg-linkrow__go svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.sg-linkrow:hover .sg-linkrow__go svg { transform: translateX(3px); }
.sg-hist { margin: 0; padding: 4px 24px 16px; list-style: none; }
.sg-hist li { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 9px 0 9px 20px; font-size: 12.5px; color: var(--mut); }
.sg-hist li::before { content: ""; position: absolute; top: 15px; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--line3); }
.sg-hist li::after { content: ""; position: absolute; top: 27px; bottom: -11px; left: 4px; width: 1px; background: var(--line2); }
.sg-hist li:last-child::after { display: none; }
.sg-hist li.is-now::before { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.sg-hist li > time { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.sg-hist li.sg-hist__none { padding-left: 0; font-size: 13px; }
.sg-hist li.sg-hist__none::before { display: none; }
.sg-devs { margin: 0; padding: 2px 24px 8px; list-style: none; }
.sg-dev { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.sg-dev:first-child { border-top: 0; }
.sg-dev__t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.sg-dev__t b { font-size: 14px; font-weight: 600; color: var(--text); }
.sg-dev.is-here .sg-dev__t b { color: var(--hi); }
.sg-dev__t small { flex-basis: 100%; font-size: 12.5px; color: var(--mut); }
.sg-dev__t code { font-size: 12px; color: var(--soft); overflow-wrap: anywhere; }
.sg-devs__none, .sg-none { padding: 18px 0; font-size: 13px; line-height: 1.55; color: var(--mut); }
.sg-avatar__now { display: flex; align-items: center; gap: 16px; padding: 12px 24px 6px; }
.sg-avatar__img { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(124, 245, 196, 0.45), 0 16px 30px -14px rgba(0, 0, 0, 0.85); }
.sg-avatar__img--txt { display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #2f6654, #12302a 70%); font: 650 34px var(--display); text-transform: uppercase; color: var(--hi); }
.sg-avatar__now p { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.sg-avatar__now b { overflow: hidden; font: 650 16px/1.3 var(--display); letter-spacing: -0.02em; text-overflow: ellipsis; }
.sg-avatar__now p span { font-size: 12.5px; color: var(--mut); }
.sg-avatar .sg-field { padding: 14px 24px 18px; }
.sg-file { width: 100%; min-width: 0; padding: 7px; border: 1px dashed var(--line3); border-radius: var(--r); background: rgba(3, 6, 8, 0.4); font: inherit; font-size: 12.5px; color: var(--soft); cursor: pointer; transition: border-color 0.15s; }
.sg-file:hover { border-color: rgba(124, 245, 196, 0.5); }
.sg-file::file-selector-button { height: 30px; margin-right: 12px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.07); font: inherit; font-size: 12.5px; font-weight: 550; color: var(--hi); cursor: pointer; }
.sg-sig { min-height: 96px; }
.sg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 24px 6px; padding: 0; list-style: none; counter-reset: sgs; }
.sg-steps li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 38px 18px 6px 0; counter-increment: sgs; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.sg-steps li::before { content: counter(sgs); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line3); border-radius: 50%; background: rgba(3, 6, 8, 0.5) center / 14px no-repeat; font: 650 12.5px var(--display); color: var(--mut); }
.sg-steps li::after { content: ""; position: absolute; top: 14px; right: 10px; left: 38px; height: 1px; background: var(--line2); }
.sg-steps li:last-child::after { display: none; }
.sg-steps b { font-size: 13.5px; font-weight: 600; color: var(--soft); }
.sg-steps .is-now::before { border-color: transparent; background-color: var(--acc); box-shadow: 0 0 14px rgba(124, 245, 196, 0.4); color: var(--on-acc); }
.sg-steps .is-now b { color: var(--hi); }
.sg-steps .is-done::before { content: ""; border-color: rgba(124, 245, 196, 0.5); background-color: var(--acc-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cf5c4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.sg-steps .is-done::after { background: rgba(124, 245, 196, 0.45); }
.sg-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 30px; align-items: start; padding: 18px 24px 24px; }
.sg-qr { width: 212px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 20px 44px -18px rgba(0, 0, 0, 0.85); line-height: 0; }
.sg-qr svg { display: block; width: 100%; height: auto; stroke: none; }
.sg-setup__b { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sg-setup__how { display: flex; flex-direction: column; gap: 9px; margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.sg-setup__how li::marker { font-weight: 650; color: var(--dim); }
.sg-key { display: block; width: fit-content; max-width: 100%; margin-top: 8px; padding: 9px 13px; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(3, 6, 8, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); font-size: 14px; letter-spacing: 0.08em; color: var(--hi); overflow-wrap: anywhere; user-select: all; }
.sg-setup__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-code { width: 190px; height: 48px; font: 500 22px var(--mono); letter-spacing: 0.22em; text-align: center; }
.sg-code::placeholder { color: rgba(125, 150, 139, 0.45); }
.sg-setup__go .btn { height: 44px; padding: 0 22px; }
.sg-codes { border-color: rgba(244, 241, 208, 0.3); }
.sg-codes__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 24px 20px; list-style: none; counter-reset: sgc; }
.sg-codes__l li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); counter-increment: sgc; }
.sg-codes__l li::before { content: counter(sgc, decimal-leading-zero); font: 500 11px var(--mono); color: var(--dim); }
.sg-codes__l code { font-size: 14px; letter-spacing: 0.06em; color: var(--hi); overflow-wrap: anywhere; user-select: all; }
@media (max-width: 1240px) {
.sg-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
.sg-row { grid-template-columns: minmax(0, 1fr); }
.sg-row__c--end { justify-content: flex-start; }
.sg-flags { grid-template-columns: minmax(0, 1fr); }
.sg-flags:not(.sg-flags--1) > .sg-flag:nth-child(2) { border-top: 1px solid var(--line); }
.sg-group { grid-template-columns: minmax(0, 1fr); padding: 12px 0 6px; }
.sg-group h3 { padding-top: 6px; }
.sg-matrix th:first-child { position: sticky; left: 0; z-index: 1; background: #0b1114; box-shadow: 1px 0 0 var(--line); }
.sg-setup { grid-template-columns: minmax(0, 1fr); }
.sg-codes__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.sg-card__h { flex-wrap: wrap; padding: 18px 18px 6px; }
.sg-card__h > div { flex-basis: calc(100% - 60px); }
.sg-rows, .sg-pad, .sg-groups, .sg-blocks, .sg-devs { padding-right: 18px; padding-left: 18px; }
.sg-card__f { padding: 14px 18px; }
.sg-danger { padding: 0 18px; }
.sg-hist { padding: 4px 18px 14px; }
.sg-matrix th:first-child { padding-left: 18px; }
.sg-matrix__g { padding-right: 10px; }
.sg-matrix td label { min-width: 58px; }
.sg-save { bottom: 10px; padding-left: 18px; }
.sg-save__t { font-size: 12.5px; }
.sg-block { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
.sg-block__pos span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sg-block__pos .input { width: 62px; }
.sg-linkrow { flex-wrap: wrap; padding: 16px 18px; }
.sg-linkrow__go { flex-basis: 100%; }
.sg-steps { grid-template-columns: minmax(0, 1fr); margin: 10px 18px 2px; }
.sg-steps li { padding: 3px 0 16px 42px; }
.sg-steps li::after { top: 32px; right: auto; bottom: 2px; left: 14px; width: 1px; height: auto; }
.sg-setup { padding: 14px 18px 20px; }
.sg-qr { width: min(212px, 100%); }
.sg-codes__l { padding: 10px 18px 18px; }
.sg-avatar__now, .sg-avatar .sg-field { padding-right: 18px; padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.sg-note { animation: none; }
.sg-sw, .sg-sw::before { transition: none; }
}
.sg .secret { display: flex; align-items: center; gap: 2px; width: 100%; max-width: 100%; min-width: 0; min-height: 42px; padding: 0 5px 0 14px; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); transition: border-color 0.15s; }
.sg .secret:hover { border-color: var(--line3); }
.sg .secret code { flex: 1; min-width: 0; max-width: none; padding: 0; overflow: hidden; border-radius: 0; background: none; font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.sg .secret button { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: none; color: var(--mut); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.sg .secret button:hover { border: 0; background: rgba(255, 255, 255, 0.08); color: var(--hi); }
.sg .secret button svg { width: 15px; height: 15px; }
.sg .secret.sg-secret--wrap { align-items: flex-start; padding-top: 5px; padding-bottom: 5px; }
.sg .secret.sg-secret--wrap code { padding: 6px 0; line-height: 1.6; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.sg-row__t--tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow-wrap: anywhere; }
.sg-btn--acc { border-color: rgba(124, 245, 196, 0.5); background: var(--acc-soft); color: var(--acc) !important; }
.sg-btn--acc:hover { border-color: transparent; background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 22px -10px rgba(124, 245, 196, 0.65); color: var(--on-acc) !important; }
.sg-card__f > .btn { flex: none; }
.sg-fold { border-top: 1px solid var(--line); }
.sg-fold summary { display: flex; align-items: center; gap: 8px; padding: 13px 24px; font-size: 13px; font-weight: 550; color: var(--mut); cursor: pointer; list-style: none; user-select: none; transition: color 0.15s; }
.sg-fold summary::-webkit-details-marker { display: none; }
.sg-fold summary:hover { color: var(--hi); }
.sg-fold summary svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.sg-fold[open] summary svg { transform: rotate(90deg); }
.sg-scroll { overflow-x: auto; scrollbar-width: thin; }
.sg-keyhist { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12.5px; }
.sg-keyhist th { padding: 4px 12px 8px; font: var(--label); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.sg-keyhist td { padding: 7px 12px; border-top: 1px solid var(--line); color: var(--mut); white-space: nowrap; }
.sg-keyhist th:first-child, .sg-keyhist td:first-child { padding-left: 24px; }
.sg-keyhist td:last-child { padding-right: 24px; }
.sg-keyhist td:first-child { display: flex; align-items: center; gap: 10px; }
.sg-keyhist .secret { flex: 1; width: auto; max-width: 420px; min-height: 36px; }
.sg-keyhist tbody tr:last-child td { padding-bottom: 16px; }
.sg-how { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 16px 24px 20px; border-top: 1px solid var(--line); list-style: none; counter-reset: sgh; }
.sg-how li { position: relative; max-width: 96ch; padding-left: 36px; font-size: 13px; line-height: 1.6; color: var(--soft); counter-increment: sgh; text-wrap: pretty; }
.sg-how li::before { content: counter(sgh); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line2); border-radius: 50%; font: 650 11px var(--display); color: var(--mut); }
p.sg-none { margin: 0; }
.sg-sec { min-width: 0; }
.sg-sec__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 8px 2px 12px; }
.sg-sec__h h2 { font: 650 19px/1.2 var(--display); letter-spacing: -0.026em; color: var(--hi); }
.sg-sec__h span { font-size: 12.5px; color: var(--mut); }
.sg-blank { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border: 1px dashed var(--line2); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.015); font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.sg-blank p { max-width: 92ch; margin: 0; }
.sg-blank b { color: var(--soft); }
.sg-feeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sg-feed { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; transition: border-color 0.2s; }
.sg-feed:hover { border-color: var(--line2); }
.sg-feed__h { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sg-feed__h > div { min-width: 0; }
.sg-feed__h h3 { margin: 0; font: 650 16px/1.3 var(--display); letter-spacing: -0.02em; color: var(--hi); overflow-wrap: anywhere; }
.sg-feed__h p { margin: 2px 0 0; font-size: 12.5px; color: var(--mut); }
.sg-feed__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.sg-feed__k { margin-right: 4px; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sg-tagchip { display: inline-flex; align-items: center; max-width: 100%; min-height: 24px; padding: 2px 10px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 12px; font-weight: 550; color: var(--soft); overflow-wrap: anywhere; }
.sg-feed__f { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.sg-feed__f form { display: inline-flex; }
.sg-newfeed > details > summary { display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 24px; border: 0; cursor: pointer; list-style: none; user-select: none; }
.sg-newfeed > details > summary::-webkit-details-marker { display: none; }
.sg-newfeed > details[open] > summary { border-bottom: 1px solid var(--line); }
.sg-newfeed__t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sg-newfeed__t b { font: 650 16px/1.3 var(--display); letter-spacing: -0.02em; }
.sg-newfeed__t small { font-size: 12.5px; font-weight: 400; color: var(--mut); }
.sg-newfeed__chev { width: 15px; height: 15px; color: var(--mut); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.sg-newfeed > details[open] .sg-newfeed__chev { transform: rotate(-90deg); }
.sg-newfeed > details > summary:hover .sg-newfeed__chev { color: var(--hi); }
.sg-row--top { align-items: start; }
.sg-row--top > .sg-row__l { padding-top: 6px; }
.sg-ids { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sg-ids .sg-field > label { font-size: 12px; font-weight: 550; color: var(--mut); }
.sg-ids .input { padding: 0 10px; }
.sg-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-pick { position: relative; display: inline-flex; }
.sg-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sg-pick span { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 12.5px; font-weight: 550; color: var(--soft); white-space: nowrap; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.sg-pick:hover span { border-color: rgba(124, 245, 196, 0.4); color: var(--hi); }
.sg-pick input:checked + span { border-color: rgba(124, 245, 196, 0.55); background: var(--acc-soft); color: var(--hi); }
.sg-pick input:checked + span::before { content: ""; width: 12px; height: 12px; margin: 0 6px 0 -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cf5c4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.sg-pick input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.sg-groups--cut { border-top: 1px solid var(--line); }
.sg-pad--one { padding: 8px 24px 22px; }
.sg-card--danger { border-color: rgba(255, 143, 143, 0.26); background: linear-gradient(90deg, rgba(255, 143, 143, 0.075), rgba(255, 143, 143, 0.012) 70%), var(--card); }
.sg-card--danger .sg-card__h { align-items: center; padding-bottom: 20px; }
.sg-card__h p.sg-card__k { margin: 0 0 6px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.sg-card--danger form { flex: none; }
main.content.is-in > .acct:has(.sg--dew), .sg--dew .sg-note { animation: none; }
.sg-dew { align-items: flex-end; }
.ph.sg-dew > .sg-dew__l { flex: 1 1 380px; min-width: min-content; }
.ph h1.sg-dew__fig { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); line-height: 1; }
.sg-drop { flex: none; width: clamp(40px, 4.4vw, 58px); height: auto; aspect-ratio: 4 / 5; overflow: visible; stroke: none; filter: drop-shadow(0 0 18px rgba(124, 245, 196, 0.45)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); }
.sg-dew__n { font: 700 clamp(46px, 5.6vw, 84px)/0.95 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--hi); }
.sg-dew__n--long { font-size: clamp(30px, 4.3vw, 64px); }
.sg-dew__u { align-self: flex-end; margin-bottom: 0.5em; font: 600 clamp(14px, 1.3vw, 17px)/1 var(--sans); letter-spacing: 0; color: var(--acc); }
.sg-dew__r { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 30px; }
.sg-dew__facts { display: flex; margin: 0 0 3px; }
.sg-dew__facts div { display: flex; flex-direction: column-reverse; gap: 7px; padding: 0 24px; border-left: 1px solid var(--line); }
.sg-dew__facts div:first-child { padding-left: 0; border-left: 0; }
.sg-dew__facts dt { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.sg-dew__facts dd { margin: 0; font: 650 26px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--hi); }
.sg-dew__facts dd.is-live { color: var(--acc); }
.sg-store { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sg-store > .sg-blank { grid-column: 1 / -1; }
.sg-item { --k: var(--acc); display: flex; flex-direction: column; min-height: 216px; padding: 18px 18px 16px; transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.sg-item--i-down { --k: var(--bmoon); }
.sg-item--i-moon { --k: var(--moon); }
.sg-item--i-mail { --k: var(--lav); }
.sg-item--i-gift { --k: var(--amber); }
.sg-item__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.sg-item__ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, var(--k) 34%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--k) 10%, transparent); color: var(--k); }
.sg-item__ic svg { width: 20px; height: 20px; }
.sg-item__cost { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px 0 9px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.45); font: 650 14px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--soft); }
.sg-item__cost svg { width: 13px; height: 13px; color: var(--mut); }
.sg-item h3 { margin: 0; font: 650 17px/1.25 var(--display); letter-spacing: -0.024em; color: var(--hi); overflow-wrap: anywhere; }
.sg-item__g { margin: 4px 0 16px; font-size: 13px; line-height: 1.5; color: var(--mut); }
.sg-item__buy, .sg-item__need { margin: auto 0 0; }
.sg-item__buy .btn { justify-content: center; width: 100%; height: 38px; }
.sg-item__buy .btn[disabled] { height: auto; min-height: 38px; padding: 7px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.35; text-align: center; white-space: normal; }
.sg-item.is-ok { border-color: rgba(124, 245, 196, 0.26); background: linear-gradient(180deg, rgba(124, 245, 196, 0.075), rgba(124, 245, 196, 0.012) 62%), var(--card); }
.sg-item.is-ok:hover { border-color: rgba(124, 245, 196, 0.5); box-shadow: var(--e2), 0 0 0 1px rgba(124, 245, 196, 0.1), 0 20px 44px -26px rgba(124, 245, 196, 0.5); transform: translateY(-2px); }
.sg-item.is-ok .sg-item__cost { border-color: rgba(124, 245, 196, 0.45); background: var(--acc-soft); color: var(--acc); }
.sg-item.is-ok .sg-item__cost svg { color: var(--acc); }
.sg-item.is-short .sg-item__ic, .sg-item.is-off .sg-item__ic { border-color: var(--line2); background: rgba(255, 255, 255, 0.035); color: var(--mut); }
.sg-item.is-short h3, .sg-item.is-off h3 { color: var(--soft); }
.sg-item__need { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 10px; font-size: 12.5px; color: var(--mut); }
.sg-item__need b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--soft); }
.sg-item__bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.sg-item__bar i { display: block; min-width: 6px; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(244, 241, 208, 0.55), var(--moon)); }
.sg-item__pct { font-variant-numeric: tabular-nums; color: var(--dim); }
.sg-store__note { display: flex; align-items: center; gap: 9px; margin: 14px 2px 0; font-size: 13px; color: var(--moon); }
.sg-store__note svg { width: 15px; height: 15px; }
.sg-seeds { margin: 0; padding: 2px 24px 4px; list-style: none; }
.sg-seed { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.sg-seed:first-child { border-top: 0; }
.sg-seed__b { min-width: 0; }
.sg-seed__n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-seed__n code { font-size: 13px; color: var(--hi); transition: color 0.15s; }
.sg-seed__n:hover code { color: var(--acc); }
.sg-seed__m { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 4px 0 10px; font-size: 12.5px; color: var(--mut); }
.sg-seed__m span:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--dim); }
.sg-seed__m b { font-weight: 650; }
.sg-seed__p { color: var(--moon); }
.sg-parts { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.sg-part { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 11.5px; color: var(--mut); white-space: nowrap; }
.sg-part b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--acc); }
.sg-part--x { border-color: rgba(195, 166, 255, 0.34); background: rgba(195, 166, 255, 0.07); }
.sg-part--x b { color: var(--lav); }
.sg-part--off { border-style: dashed; color: var(--amber); }
.sg-seed__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; }
.sg-seed__r b { font: 650 24px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--acc); }
.sg-seed__r span { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.sg-earn__sum { justify-content: space-between; }
.sg-card__f.sg-earn__sum > span { flex: none; }
.sg-earn__sum p { margin: 0; font-size: 13px; color: var(--soft); }
.sg-earn__sum p b { margin: 0 3px; font: 650 18px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--acc); }
.sg-dewtwo { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.sg-rules { margin: 0; padding: 12px 24px 14px; list-style: none; counter-reset: sgr; }
.sg-rule { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 0 0 20px 44px; counter-increment: sgr; }
.sg-rule::before { content: counter(sgr); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(124, 245, 196, 0.42); border-radius: 50%; background: #0d1a19; font: 650 12px var(--display); font-variant-numeric: tabular-nums; color: var(--acc); }
.sg-rule::after { content: ""; position: absolute; top: 28px; bottom: 0; left: 13.5px; width: 1px; background: linear-gradient(180deg, rgba(124, 245, 196, 0.34), rgba(124, 245, 196, 0.12)); }
.sg-rule:last-child { padding-bottom: 6px; }
.sg-rule:last-child::after { display: none; }
.sg-rule--x::before { border-color: rgba(195, 166, 255, 0.5); background: #15132a; color: var(--lav); }
.sg-rule--x::after { background: rgba(195, 166, 255, 0.26); }
.sg-rule__b { flex: 1; min-width: 0; padding-top: 3px; }
.sg-rule__b b { font: 650 14.5px/1.35 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.sg-rule__b p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.sg-rule__b small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); }
.sg-rule__amt { flex: none; min-width: 58px; margin-top: 1px; padding: 0 10px; border: 1px solid rgba(124, 245, 196, 0.3); border-radius: 999px; background: var(--acc-soft); font: 650 13px/26px var(--display); font-variant-numeric: tabular-nums; text-align: center; color: var(--acc); }
.sg-rule--x .sg-rule__amt { border-color: rgba(195, 166, 255, 0.36); background: rgba(195, 166, 255, 0.09); color: var(--lav); }
.sg-rule--none { padding: 6px 0 10px; font-size: 13px; color: var(--mut); }
.sg-rule--none::before, .sg-rule--none::after { display: none; }
.sg-log { margin: 0; padding: 2px 24px 10px; list-style: none; }
.sg-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.sg-log li:first-child { border-top: 0; }
.sg-log__n { font-size: 13.5px; font-weight: 550; color: var(--text); overflow-wrap: anywhere; }
.sg-log__n small { font-size: 12.5px; font-weight: 400; color: var(--mut); }
.sg-log__w { grid-row: 2; font-size: 12px; color: var(--dim); }
.sg-log b { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 650 15px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sg-log b.up { color: var(--green); }
.sg-log b.down { color: var(--red); }
.sg-log li.sg-log__none { display: block; padding: 14px 0 12px; font-size: 13px; color: var(--mut); }
.sg--don { width: 100%; max-width: 1180px; margin-inline: auto; }
.sg-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 420px)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sg-pack { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.sg-pack__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sg-pack__h h3 { margin: 0; font: 650 17px/1.25 var(--display); letter-spacing: -0.024em; color: var(--hi); overflow-wrap: anywhere; }
.sg-pack__cost { flex: none; margin: 0; font: 700 26px/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--moon); }
.sg-pack__d { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mut); overflow-wrap: anywhere; }
.sg-pack__gets { display: flex; flex-direction: column; gap: 8px; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; }
.sg-pack__gets li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soft); }
.sg-pack__gets svg { width: 15px; height: 15px; color: var(--acc); }
.sg-pack__gets li:first-child svg { color: var(--moon); }
.sg-donate__b { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 34px; align-items: start; padding: 12px 24px 24px; }
.sg-dsteps { margin: 0; padding: 0; list-style: none; counter-reset: sgd; }
.sg-dsteps > li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 3px 0 20px 44px; font-size: 13px; line-height: 1.5; color: var(--mut); counter-increment: sgd; }
.sg-dsteps > li::before { content: counter(sgd); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(244, 241, 208, 0.4); border-radius: 50%; background: rgba(244, 241, 208, 0.07); font: 650 12px var(--display); color: var(--moon); }
.sg-dsteps > li::after { content: ""; position: absolute; top: 28px; bottom: 0; left: 13.5px; width: 1px; background: rgba(244, 241, 208, 0.18); }
.sg-dsteps > li:last-child { padding-bottom: 0; }
.sg-dsteps > li:last-child::after { display: none; }
.sg-dsteps > li > b { font-size: 14px; font-weight: 600; color: var(--hi); }
.sg-gates { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.sg-gates li { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 9px 13px; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(3, 6, 8, 0.45); }
.sg-gates span { font-size: 13px; font-weight: 600; color: var(--soft); }
.sg-gates code { font-size: 12.5px; color: var(--hi); overflow-wrap: anywhere; user-select: all; }
.sg-gates li.sg-gates__none { display: block; border-style: dashed; color: var(--mut); }
.sg-donate__f { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: rgba(0, 0, 0, 0.18); }
.sg-closed { display: flex; align-items: flex-start; gap: 20px; padding: 30px 32px; border-style: dashed; border-color: var(--line2); }
.sg-closed .sg-card__ic { width: 52px; height: 52px; border-radius: 17px; }
.sg-closed .sg-card__ic svg { width: 23px; height: 23px; }
.sg-closed h2 { font: 650 clamp(20px, 2.2vw, 26px)/1.2 var(--display); letter-spacing: -0.032em; color: var(--hi); }
.sg-closed p { max-width: 62ch; margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.sg-closed p.sg-closed__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sg-helps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sg-helps li { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; }
.sg-helps b { margin-top: 14px; font: 650 15.5px/1.3 var(--display); letter-spacing: -0.02em; }
.sg-helps p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.sg-mine { margin: 0; padding: 2px 24px 8px; list-style: none; }
.sg-mine li { display: grid; grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.6fr) auto; align-items: center; gap: 6px 20px; padding: 13px 0; border-top: 1px solid var(--line); }
.sg-mine li:first-child { border-top: 0; }
.sg-mine__p { display: flex; flex-direction: column; min-width: 0; }
.sg-mine__p b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sg-mine__p small { font-size: 12px; color: var(--mut); }
.sg-mine code { font-size: 12.5px; color: var(--soft); overflow-wrap: anywhere; }
.sg-mine .pill { justify-self: end; white-space: nowrap; }
@media (max-width: 1240px) {
.sg-dewtwo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.sg-donate__b { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sg-helps { grid-template-columns: minmax(0, 1fr); }
.sg-helps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; }
.sg-helps li .sg-card__ic { grid-row: 1 / 3; }
.sg-helps b { margin-top: 0; }
}
@media (max-width: 820px) {
.sg-ids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-row--top > .sg-row__l { padding-top: 0; }
.sg-dew__facts div { padding: 0 18px; }
.sg-dew__facts dd { font-size: 22px; }
}
@media (max-width: 560px) {
.sg-fold summary { padding: 13px 18px; }
.sg-keyhist th:first-child, .sg-keyhist td:first-child { padding-left: 18px; }
.sg-how { padding: 16px 18px 18px; }
.sg-blank { align-items: flex-start; padding: 18px; }
.sg-newfeed > details > summary { padding: 16px 18px; }
.sg-pad--one { padding: 8px 18px 18px; }
.sg-card--danger .sg-card__h form { flex-basis: 100%; }
.sg-seeds, .sg-log, .sg-mine { padding-right: 18px; padding-left: 18px; }
.sg-seed { grid-template-columns: minmax(0, 1fr); }
.sg-seed__n { white-space: normal; overflow-wrap: anywhere; }
.sg-seed__r { flex-direction: row; align-items: baseline; gap: 7px; }
.sg-rules { padding: 12px 18px; }
.sg-rule { gap: 10px; padding-left: 40px; }
.sg-rule__amt { min-width: 52px; padding: 0 8px; }
.sg-store { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sg-item { min-height: 196px; padding: 14px 14px 13px; }
.sg-item__ic { width: 38px; height: 38px; border-radius: 12px; }
.sg-item h3 { font-size: 15px; }
.sg-item__cost { height: 26px; padding: 0 10px 0 7px; font-size: 13px; }
.sg-donate__b { padding: 10px 18px 20px; }
.sg-donate__f { padding: 16px; }
.sg-closed { flex-direction: column; gap: 14px; padding: 22px 20px; }
.sg-gates li { grid-template-columns: minmax(0, 1fr); }
.sg-mine li { grid-template-columns: minmax(0, 1fr) auto; }
.sg-mine code { grid-row: 2; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
.sg-item.is-ok:hover { transform: none; }
}
.rq-dew { font-variant-numeric: tabular-nums; color: var(--amber); }
.rq-over { color: var(--red); }
.rq-user { font-weight: 600; color: var(--hi); transition: color 0.15s; }
.rq-user:hover { color: var(--acc); }
.rq-anon { font-size: 11.5px; color: var(--mut); }
.rq-link { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s; }
.rq-link:hover { color: var(--acc); }
.rq-empty { margin: 0; padding: 6px 0 2px; font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.rqs { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.rqs i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.rqs--unfilled { color: var(--acc); }
.rqs--claimed { color: var(--bmoon); }
.rqs--pending { color: var(--moon); }
.rqs--filled { color: var(--mut); }
.rqs--filled i { box-shadow: none; }
.rq-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.075); font-size: 11px; font-weight: 650; color: var(--soft); white-space: nowrap; }
.rq-tag--res { color: var(--hi); }
.rq-tag--res.is-uhd { background: linear-gradient(90deg, var(--moon), #f3d98f); color: #1c1606; }
.rq-ep { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--acc-soft); font-size: 11px; font-weight: 650; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--acc); white-space: nowrap; }
.rq-ep.is-off { background: rgba(255, 255, 255, 0.05); color: var(--mut); }
.rq-tag[hidden], .rq-ep[hidden] { display: none; }
.rq-ph { display: grid; place-items: center; width: 100%; height: 100%; background: radial-gradient(circle at 50% 34%, rgba(124, 245, 196, 0.17), transparent 70%), linear-gradient(160deg, var(--surface3), var(--surface)); color: var(--acc); }
.rq-ph svg { width: 40%; height: 40%; opacity: 0.85; }
.rq-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-quick button { height: 32px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font: 600 12.5px var(--sans); font-variant-numeric: tabular-nums; color: var(--soft); cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.12s; }
.rq-quick button:hover { border-color: rgba(244, 222, 140, 0.5); color: var(--hi); }
.rq-quick button:active { transform: scale(0.96); }
.rq-quick button.is-on { border-color: rgba(244, 222, 140, 0.6); background: rgba(244, 222, 140, 0.11); color: var(--amber); }
.btn.rq-btn-dew { border-color: rgba(244, 222, 140, 0.45); background: linear-gradient(180deg, rgba(244, 222, 140, 0.17), rgba(244, 222, 140, 0.07)); color: var(--amber) !important; font-weight: 650; }
.btn.rq-btn-dew:hover { border-color: rgba(244, 222, 140, 0.75); background: linear-gradient(180deg, rgba(244, 222, 140, 0.26), rgba(244, 222, 140, 0.12)); }
.rqh { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 22px 56px; margin: 2px 0 24px; padding: 12px 0 30px; }
.rqh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.rqh__bg { position: absolute; z-index: -1; top: -92px; right: calc(var(--pad) * -1); width: min(70%, 1040px); height: calc(100% + 92px); object-fit: cover; object-position: center 24%; opacity: 0.4; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%), linear-gradient(180deg, rgba(0, 0, 0, 0.5), #000 40%, transparent 97%); mask-image: linear-gradient(90deg, transparent, #000 58%), linear-gradient(180deg, rgba(0, 0, 0, 0.5), #000 40%, transparent 97%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.rqh__hi { min-width: 0; max-width: 760px; }
.rqh h1 { font: 700 clamp(40px, 4.4vw, 62px)/1 var(--display); letter-spacing: -0.05em; color: var(--hi); }
.rqh__lede { margin: 14px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.rqh__row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; margin-top: 28px; }
.rqh__facts { display: flex; margin: 0; }
.rqh__facts div { display: flex; flex-direction: column-reverse; gap: 7px; padding: 0 24px; border-left: 1px solid var(--line); }
.rqh__facts div:first-child { padding-left: 0; border-left: 0; }
.rqh__facts div:last-child { padding-right: 0; }
.rqh__facts dt { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.rqh__facts dd { display: inline-flex; align-items: center; gap: 6px; margin: 0; font: 650 26px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--hi); }
.rqh__facts dd.is-dew { color: var(--amber); }
.rqh__facts dd svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.rqh__wanted { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 22px 0 0; }
.rqh__wk { display: flex; align-items: center; gap: 10px; margin: 0; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--moon); }
.rqh__wk::before, .rqh__wk::after { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.5; }
.rqh__fan { display: flex; align-items: flex-end; }
.rqh__card { position: relative; display: flex; flex-direction: column; align-items: center; width: 126px; margin: 0 -9px; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform 0.3s var(--ease); }
.rqh__card--0 { z-index: 3; order: 2; width: 146px; }
.rqh__card--1 { z-index: 2; order: 1; --r: -7deg; --y: 10px; }
.rqh__card--2 { z-index: 1; order: 3; --r: 7deg; --y: 10px; }
.rqh__card:hover, .rqh__card:focus-visible { z-index: 4; --r: 0deg; --y: -6px; }
.rqh__card:focus-visible { outline: 0; }
.rqh__card:focus-visible .rqh__p { outline: 2px solid var(--acc); outline-offset: 3px; }
.rqh__p { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 44px -16px rgba(0, 0, 0, 0.85); transition: box-shadow 0.3s; }
.rqh__p img { width: 100%; height: 100%; object-fit: cover; }
.rqh__card:hover .rqh__p, .rqh__card:focus-visible .rqh__p { box-shadow: 0 0 0 1px rgba(244, 222, 140, 0.6), 0 28px 50px -16px rgba(0, 0, 0, 0.9), 0 0 36px -8px rgba(244, 222, 140, 0.35); }
.rqh__tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; margin-top: -14px; padding: 0 11px; border-radius: 999px; background: linear-gradient(180deg, #fbf4cc, #f1d98b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px -6px rgba(0, 0, 0, 0.75); font: 700 12.5px/1 var(--sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #1c1606; }
.rqh__tag svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.rqh__t { max-width: 170px; margin-top: 9px; overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--soft); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.rqh__card:not(.rqh__card--0) .rqh__t { visibility: hidden; }
.rqh__fan:hover .rqh__card--0:not(:hover) .rqh__t, .rqh__fan:focus-within .rqh__card--0:not(:focus-visible) .rqh__t { visibility: hidden; }
.rqh__card:hover .rqh__t, .rqh__card:focus-visible .rqh__t { visibility: visible; color: var(--hi); }
.rqb > .alert { margin-bottom: 18px; }
.rqb > .blank { margin-top: 18px; }
.rqb__cats { margin-bottom: 16px; }
.rqb__cats a { display: inline-flex; align-items: center; gap: 8px; }
.rqb__cats a svg { width: 15px; height: 15px; color: var(--dim); transition: color 0.15s; }
.rqb__cats a:hover svg, .rqb__cats a.is-on svg { color: var(--acc); }
.rqb__cats a small { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.065); font: 600 11px/18px var(--sans); font-variant-numeric: tabular-nums; color: var(--mut); text-align: center; }
.rqb__cats a.is-on small { background: var(--acc-soft); color: var(--acc); }
.rqb__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rqb__tools .chip { height: 36px; padding: 0 14px; }
.rqb__status a small { margin-left: 7px; font: 600 11px var(--sans); font-variant-numeric: tabular-nums; color: var(--dim); }
.rqb__status a.is-on small { color: var(--acc); }
.rqb__sp { flex: 1; }
.rqb__clear { font-size: 12.5px; font-weight: 550; color: var(--mut); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s; }
.rqb__clear:hover { color: var(--hi); }
.rqb__sort { display: inline-flex; align-items: center; gap: 10px; }
.rqb__l { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.rqb__q { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--mut); transition: border-color 0.15s, box-shadow 0.15s, color 0.15s; }
.rqb__q:hover { border-color: var(--line3); }
.rqb__q:focus-within { border-color: rgba(124, 245, 196, 0.6); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.3); color: var(--acc); }
.rqb__q svg { width: 14px; height: 14px; }
.rqb__q input { width: 190px; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; }
.rqb__q input::placeholder { color: var(--dim); }
.rqb__q input::-webkit-search-cancel-button { display: none; }
.rq-drop { position: relative; }
.rq-drop summary { list-style: none; }
.rq-drop summary::-webkit-details-marker { display: none; }
.rq-drop summary svg { width: 13px; height: 13px; }
.rq-drop summary .rq-drop__i { transform: none; color: var(--mut); }
.rq-drop summary svg:last-child { margin-right: -3px; color: var(--dim); transform: rotate(90deg); transition: transform 0.2s; }
.rq-drop[open] summary svg:last-child { transform: rotate(-90deg); }
.rq-drop[open] summary { border-color: rgba(124, 245, 196, 0.5); color: var(--hi); }
.rq-drop__m { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: flex; flex-direction: column; gap: 1px; min-width: 200px; max-height: 340px; overflow: auto; padding: 6px; border: 1px solid var(--line2); border-radius: var(--r-m); background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); scrollbar-width: thin; animation: v3-pop 0.16s var(--ease); }
.rq-drop__m a { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--soft); white-space: nowrap; transition: background-color 0.12s, color 0.12s; }
.rq-drop__m a:hover { background: rgba(255, 255, 255, 0.065); color: var(--hi); }
.rq-drop__m a.is-on { background: var(--acc-soft); font-weight: 600; color: var(--hi); }
.rql { display: flex; flex-direction: column; margin-top: 14px; }
.rql__head, .rqr { display: grid; grid-template-columns: 54px minmax(0, 1fr) 92px 138px 132px; column-gap: 16px; align-items: center; }
.rql__head { padding: 10px 12px; border-bottom: 1px solid var(--line); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.rql__head span:first-child { grid-column: 1 / 3; }
.rql__head span:nth-child(2), .rql__head span:nth-child(4) { justify-self: end; }
.rqr { position: relative; isolation: isolate; padding: 11px 12px; border-radius: 16px; transition: background-color 0.2s; }
.rql > .rqr { content-visibility: auto; contain-intrinsic-size: auto 104px; }
.rqr::after { content: ""; position: absolute; left: 82px; right: 12px; bottom: 0; height: 1px; background: var(--line); transition: opacity 0.2s; }
.rql > .rqr:last-child::after { display: none; }
.rql > .rqr:hover, .rql > .rqr:focus-visible { background: rgba(255, 255, 255, 0.038); }
.rql > .rqr:hover::after, .rqr:has(+ .rqr:hover)::after { opacity: 0; }
.rqr:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.rqr__bd { position: absolute; inset: 0 0 0 40%; z-index: -1; border-radius: 0 16px 16px 0; background: center 26% / cover no-repeat; opacity: 0; transition: opacity 0.45s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%); mask-image: linear-gradient(90deg, transparent, #000 62%); }
.rqr.is-seen .rqr__bd { background-image: var(--bd); }
.rql > .rqr:hover .rqr__bd, .rql > .rqr:focus-visible .rqr__bd { opacity: 0.2; }
.rqr__p { display: block; width: 54px; aspect-ratio: 2 / 3; border-radius: 9px; overflow: hidden; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 10px 20px -10px rgba(0, 0, 0, 0.85); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.rqr__p img { width: 100%; height: 100%; object-fit: cover; }
.rql > .rqr:hover .rqr__p { transform: translateY(-1px) scale(1.04); box-shadow: 0 0 0 1px rgba(244, 222, 140, 0.42), 0 14px 26px -10px rgba(0, 0, 0, 0.9); }
.rqr__m { display: flex; flex-direction: column; min-width: 0; }
.rqr__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 9px; }
.rqr__t { font: 600 16px/1.3 var(--display); letter-spacing: -0.022em; color: var(--hi); overflow-wrap: anywhere; transition: color 0.15s; }
.rql > .rqr:hover .rqr__t { color: var(--acc-hi); }
.rqr__y { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mut); }
.rqr__h .rq-ep { align-self: center; }
.rqr__name { display: block; overflow: hidden; margin-top: 2px; font: 11.5px/1.55 var(--mono); color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.rqr__name[hidden] { display: none; }
.rqr__meta { display: flex; align-items: center; gap: 5px 8px; min-width: 0; margin-top: 6px; font-size: 12px; color: var(--mut); white-space: nowrap; }
.rqr__meta > * { flex: none; }
.rqr__meta > .rqr__by { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rqr__cat { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--soft); }
.rqr__cat svg { width: 13px; height: 13px; color: var(--mut); }
.rqr__by::before, .rqr__age::before { content: "·"; margin-right: 8px; color: var(--dim); }
.rqr__soc { display: flex; gap: 14px; justify-self: end; font-size: 13px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--soft); }
.rqr__soc span { display: inline-flex; align-items: center; gap: 6px; }
.rqr__soc svg { width: 14px; height: 14px; color: var(--dim); }
.rqr__soc .is-zero { color: var(--dim); }
.rqr__st { justify-self: start; }
.rqr__b { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; justify-self: end; }
.rqr__b b { display: inline-flex; align-items: center; gap: 6px; font: 650 20px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--amber); }
.rqr__b svg { width: 13px; height: 13px; fill: currentColor; stroke: none; opacity: 0.85; }
.rqr__heat { display: block; width: 100px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rqr__heat i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(244, 222, 140, 0.32), var(--amber)); }
.rqr--filled .rqr__b b, .rqr--pending .rqr__b b { color: var(--soft); }
.rqr--filled .rqr__p { filter: saturate(0.6) brightness(0.82); }
.rqr--filled .rqr__heat i { background: var(--line3); }
.rqp > .alert { z-index: 1; margin-bottom: 16px; }
.rqp-top { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 30px; margin-bottom: 8px; }
.rqp-top .f-crumbs { min-width: 0; margin: 0; }
.rqp-top .f-crumbs span { overflow-wrap: anywhere; }
.rqp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 -8px 0 auto; }
.rqp-tools form { display: inline-flex; }
.rqp-tools .btn { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.btn.rqp-tools__del:hover { background: rgba(255, 143, 143, 0.1); color: var(--red) !important; }
.rqp-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 196px minmax(0, 1fr) auto; align-items: end; gap: 18px 36px; padding: 18px 0 30px; }
.rqp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.rqp-hero__bg { position: absolute; z-index: -1; top: -132px; right: calc(var(--pad) * -1); width: min(78%, 1280px); height: calc(100% + 132px); object-fit: cover; object-position: center 22%; opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.5) 40%, #000 72%), linear-gradient(180deg, rgba(0, 0, 0, 0.55), #000 36%, rgba(0, 0, 0, 0.5) 66%, transparent 98%); mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.5) 40%, #000 72%), linear-gradient(180deg, rgba(0, 0, 0, 0.55), #000 36%, rgba(0, 0, 0, 0.5) 66%, transparent 98%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.rqp-hero__art { align-self: start; width: 196px; aspect-ratio: 2 / 3; border-radius: 16px; overflow: hidden; background: var(--surface2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 60px -26px rgba(0, 0, 0, 0.95); }
.rqp-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.rqp-hero--bare { grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; }
.rqp-hero--bare .rqp-hero__art { width: 116px; aspect-ratio: 1; border-radius: 26px; align-self: center; }
.rqp-hero--bare h1 { font-size: clamp(26px, 2.7vw, 40px); line-height: 1.08; letter-spacing: -0.04em; }
.rqp-hero__t { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.rqp-hero__k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--mut); }
.rqp-hero h1 { margin: 0; font: 700 clamp(30px, 3.5vw, 52px)/1.03 var(--display); letter-spacing: -0.045em; color: var(--hi); overflow-wrap: anywhere; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); }
.rqp-hero h1 i { font-style: normal; font-weight: 500; color: color-mix(in srgb, var(--hi) 52%, transparent); }
.rqp-hero__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; font-size: 13.5px; color: var(--soft); }
.rqp-hero__rate { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--moon); }
.rqp-hero__rate svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.rqp-hero__sub a { font-weight: 600; color: var(--hi); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s; }
.rqp-hero__sub a:hover { color: var(--acc); }
.rqp-hero__ov { display: -webkit-box; margin: 0; max-width: 74ch; overflow: hidden; font-size: 14.5px; line-height: 1.6; color: var(--soft); text-wrap: pretty; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.rqp-hero__want { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; font-size: 12.5px; }
.rqp-hero__wl { margin-right: 4px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.rqp-hero__rel { display: flex; align-items: center; gap: 8px; max-width: 100%; margin-top: -4px; }
.rqp-hero__rel code { min-width: 0; overflow: hidden; font: 12.5px/1.5 var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.rq-cp { flex: none; display: inline-grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 1px solid var(--line2); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--mut); cursor: pointer; transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.rq-cp:hover { border-color: rgba(124, 245, 196, 0.45); background: var(--acc-soft); color: var(--acc); }
.rq-cp svg { width: 13px; height: 13px; }
.rqp-hero__facts { display: grid; grid-template-columns: repeat(3, auto); gap: 20px 0; margin: 0; padding-left: 36px; border-left: 1px solid var(--line); }
.rqp-hero__facts div { display: flex; flex-direction: column-reverse; gap: 7px; padding: 0 22px; border-left: 1px solid var(--line); }
.rqp-hero__facts div:nth-child(2), .rqp-hero__facts .is-dew { padding-left: 0; border-left: 0; }
.rqp-hero__facts div:last-child { padding-right: 0; }
.rqp-hero__facts .is-dew { grid-column: 1 / -1; }
.rqp-hero__facts dt { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.rqp-hero__facts dd { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 650 22px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--hi); text-shadow: 0 2px 22px rgba(0, 0, 0, 0.65); }
.rqp-hero__facts dd a:hover { color: var(--acc); }
.rqp-hero__facts .is-dew dd { font-size: 46px; font-weight: 700; letter-spacing: -0.05em; color: var(--amber); }
.rqp-hero__facts .is-dew dd svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.rqp--filled .rqp-hero__facts .is-dew dd { color: var(--soft); }
.rqp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 22px 0 0; list-style: none; }
.rqp-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-content: start; align-items: center; }
.rqp-steps li::after { content: ""; grid-column: 2; grid-row: 1; height: 2px; margin: 0 10px; border-radius: 2px; background: var(--line2); }
.rqp-steps li:last-child::after { visibility: hidden; }
.rqp-steps i { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.03); color: var(--dim); transition: border-color 0.2s; }
.rqp-steps i svg { width: 16px; height: 16px; }
.rqp-steps b { grid-column: 1 / -1; margin-top: 11px; font: 650 14.5px/1.2 var(--display); letter-spacing: -0.015em; color: var(--soft); }
.rqp-steps small { grid-column: 1 / -1; min-width: 0; margin-top: 3px; padding-right: 20px; font-size: 12.5px; line-height: 1.45; color: var(--mut); overflow-wrap: anywhere; }
.rqp-steps small b { font: inherit; font-weight: 600; color: var(--soft); }
.rqp-steps .is-done i { border-color: transparent; background: var(--acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 18px -2px rgba(124, 245, 196, 0.45); color: var(--on-acc); }
.rqp-steps .is-done > b { color: var(--hi); }
.rqp-steps .is-done:has(+ .is-done)::after, .rqp-steps .is-done:has(+ .is-skip)::after, .rqp-steps .is-skip::after { background: var(--acc); opacity: 0.75; }
.rqp-steps .is-done:has(+ .is-now)::after { background: linear-gradient(90deg, var(--acc), rgba(244, 241, 208, 0.55)); opacity: 0.8; }
.rqp-steps .is-now i { border-color: var(--moon); background: rgba(244, 241, 208, 0.09); box-shadow: 0 0 0 4px rgba(244, 241, 208, 0.07); color: var(--moon); }
.rqp-steps .is-now > b { color: var(--moon); }
.rqp-steps .is-skip i { border-style: dashed; border-color: rgba(124, 245, 196, 0.5); color: var(--mut); }
.rqp-steps .is-skip > b { color: var(--mut); }
.rqp--filled .rqp-steps .is-done:last-child i { background: var(--amber); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 18px -2px rgba(244, 222, 140, 0.5); }
.rqp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.rq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 364px; gap: 18px; align-items: start; margin-top: 24px; }
.rq-main, .rq-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rq-main > .card + .card, .rq-side > .card + .card { margin-top: 0; }
.rqp-card { padding: 22px 24px 24px; scroll-margin-top: 84px; }
.rqp-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.rqp-card h2 svg { width: 16px; height: 16px; color: var(--acc); }
.rqp-card__n { padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font: 600 11px/18px var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--mut); }
.rqp-card__lede { margin: -6px 0 16px; max-width: 78ch; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.rqp-card > .bb { font-size: 14.5px; line-height: 1.6; }
.rq-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 20px; margin: 0; font-size: 13.5px; }
.rq-kv dt { color: var(--mut); }
.rq-kv dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--hi); overflow-wrap: anywhere; }
.rq-kv dd .mut { font-weight: 400; }
.rq-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.rq-actions form { display: inline-flex; }
.rqp-filled { border-color: rgba(124, 245, 196, 0.22); }
.rqp-filled.is-ask { border-color: rgba(244, 241, 208, 0.4); background: radial-gradient(560px 200px at 12% -30%, rgba(244, 241, 208, 0.1), transparent 70%), var(--card); }
.rqp-filled.is-ask h2 svg { color: var(--moon); }
.rqp-filled .rq-kv { margin-top: 16px; }
.rqp-rels { margin: 0; padding: 0; list-style: none; }
.rqp-rel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.rqp-rels .rqp-rel:last-child { padding-bottom: 0; }
.rqp-rel__n { min-width: 0; }
.rqp-rel__n code, .rqp-rel--big code { display: block; overflow: hidden; font: 12.5px/1.5 var(--mono); color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.rqp-rel__n:hover code { color: var(--acc-hi); }
.rqp-rel__m { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mut); }
.rqp-rel__fill { grid-column: 2; grid-row: 1 / 3; }
.rqp-rel__seed { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; color: var(--green); }
.rqp-rel__seed i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rqp-rel__seed--low { color: var(--amber); }
.rqp-rel__seed--dead { color: var(--red); }
.rqp-rel--big { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: var(--r-m); background: rgba(3, 6, 8, 0.4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); transition: border-color 0.15s, background-color 0.15s; }
.rqp-rel--big > svg { flex: none; width: 17px; height: 17px; color: var(--acc); }
.rqp-rel--big code { flex: 1; min-width: 0; }
.rqp-rel--big:hover { border-color: rgba(124, 245, 196, 0.5); background: rgba(124, 245, 196, 0.06); }
.rqp-rel--big .rqp-rel__go { width: 14px; height: 14px; color: var(--mut); transition: transform 0.2s var(--ease), color 0.15s; }
.rqp-rel--big:hover .rqp-rel__go { color: var(--acc); transform: translateX(3px); }
.rqp-fill__box, .rqc-find__box { position: relative; display: flex; align-items: center; }
.rqp-fill__box > svg, .rqc-find__box > svg { position: absolute; left: 15px; width: 15px; height: 15px; color: var(--mut); pointer-events: none; }
.rqp-fill__box .input, .rqc-find__box .input { height: 46px; padding-left: 42px; }
.rqp-fill__box .input::-webkit-search-cancel-button, .rqc-find__box .input::-webkit-search-cancel-button { display: none; }
.rqp-sug, .rqc-res { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; gap: 1px; max-height: 380px; overflow: auto; padding: 6px; border: 1px solid var(--line2); border-radius: var(--r-m); background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); scrollbar-width: thin; }
.rqp-sug[hidden], .rqc-res[hidden] { display: none; }
.rqc-sec:has(.rqc-find), .rqp-fillform { position: relative; z-index: 3; }
.rqp-sug__i, .rqc-res__i { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 9px; border: 0; border-radius: 11px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background-color 0.12s; }
.rqp-sug__i:hover, .rqp-sug__i[aria-selected=true], .rqc-res__i:hover, .rqc-res__i[aria-selected=true] { background: rgba(255, 255, 255, 0.065); }
.rqp-sug__i[aria-selected=true], .rqc-res__i[aria-selected=true] { box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.28); }
.rqp-sug__p, .rqc-res__p { width: 38px; aspect-ratio: 2 / 3; border-radius: 6px; object-fit: cover; background: var(--surface3); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.7); }
.rqp-sug__i > span:last-child, .rqc-res__i > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rqp-sug__i b, .rqc-res__i b { font-size: 13.5px; font-weight: 600; color: var(--hi); }
.rqc-res__i b i { font-style: normal; font-weight: 400; color: var(--mut); }
.rqp-sug__i code { overflow: hidden; font: 11.5px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.rqp-sug__i small, .rqc-res__i small { font-size: 11.5px; line-height: 1.4; color: var(--mut); }
.rqp-sug__none, .rqc-res__none { margin: 0; padding: 12px; font-size: 13px; color: var(--mut); }
.rqp-fill__pick { margin: 12px 0 0; font-size: 13px; color: var(--soft); overflow-wrap: anywhere; }
.rqp-fill__pick[hidden] { display: none; }
.rqp-fill__pick b { color: var(--hi); }
.rqp-fill__pick span { margin-left: 6px; color: var(--mut); }
.rqp-fill__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.rqp-fill__sp { flex: 1; }
.rq-comment { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 15px 0; border-top: 1px solid var(--line); }
.rqp-comments h2 + .rq-comment { padding-top: 2px; border-top: 0; }
.rq-comment--reply { margin-left: 47px; }
.rq-av { width: 34px; height: 34px; font-size: 13px; }
.rq-comment__b { min-width: 0; }
.rq-comment__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin-bottom: 4px; font-size: 13px; }
.rq-comment__h .mut { font-size: 12px; }
.rq-comment .bb { font-size: 14px; line-height: 1.6; }
.rqp-op { padding: 0 8px; border-radius: 999px; background: var(--acc-soft); font-size: 10.5px; font-weight: 650; line-height: 18px; color: var(--acc); }
.rq-comment__del { display: inline-flex; margin-left: auto; }
.rq-comment__del button { padding: 2px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; color: var(--mut); cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.rq-comment__del button:hover { background: rgba(255, 143, 143, 0.1); color: var(--red); }
.rq-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.rq-cform__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.rqp-bounty { background: radial-gradient(440px 190px at 50% -46%, rgba(244, 222, 140, 0.13), transparent 70%), var(--card); }
.rqp-bounty__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rqp-bounty__n { display: inline-flex; align-items: center; gap: 8px; font: 700 40px/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--amber); }
.rqp-bounty__n svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.rqp--filled .rqp-bounty__n { color: var(--soft); }
.rqp-bounty__u { font-size: 12.5px; line-height: 1.45; color: var(--mut); text-align: right; }
.rqp-bar { display: flex; gap: 3px; height: 8px; margin: 18px 0 8px; border-radius: 8px; overflow: hidden; }
.rqp-bar i { min-width: 4px; background: var(--amber); }
.rqp-bar i:nth-child(3n+2) { opacity: 0.62; }
.rqp-bar i:nth-child(3n) { opacity: 0.38; }
.rqp--filled .rqp-bar i { background: var(--mut); }
.rqp-backers { margin: 0; padding: 0; list-style: none; }
.rqp-backers li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 34px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rqp-backers li:last-child { border-bottom: 0; padding-bottom: 0; }
.rqp-backers .rq-av { width: 26px; height: 26px; font-size: 11px; }
.rqp-backers__who { min-width: 0; overflow: hidden; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.rqp-backers__n { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--amber); }
.rqp-backers__age { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mut); text-align: right; }
.rqp-add { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.rqp-add__l { font-size: 13px; font-weight: 600; color: var(--text); }
.rqp-add__row { display: flex; gap: 8px; }
.rqp-add__row .input { flex: 1; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.rqp-add__row .btn { height: 42px; }
.rqp-add__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12.5px; }
.rq-claim { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.rq-claim.mut { color: var(--mut); }
.rqp-claimform { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rqc-head { margin-bottom: 22px; }
.rqc-page > .alert { margin-bottom: 18px; }
.rqc { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 18px; align-items: start; }
.rqc-form { display: flex; flex-direction: column; gap: 18px; max-width: none; }
.rqc-form > .card + .card, .rqc-side > .card + .card { margin-top: 0; }
.rqc-sec { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px 26px; }
.rqc-sec[hidden] { display: none; }
.rqc-sec h2 { display: flex; align-items: center; gap: 11px; margin: 0 0 2px; font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.rqc-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.32); font: 700 12.5px/1 var(--sans); letter-spacing: 0; color: var(--acc); }
.rqc-cats { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.rqc-cat { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 17px 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 13.5px; font-weight: 550; color: var(--soft); cursor: pointer; user-select: none; transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.12s; }
.rqc-cat svg { width: 16px; height: 16px; color: var(--dim); transition: color 0.15s; }
.rqc-cat:hover { border-color: rgba(124, 245, 196, 0.4); color: var(--hi); }
.rqc-cat:hover svg { color: var(--acc); }
.rqc-cat:active, .rqc-chip:active { transform: scale(0.97); }
.rqc-cat input, .rqc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rqc-cat:has(input:checked) { border-color: rgba(124, 245, 196, 0.55); background: var(--acc-soft); color: var(--hi); }
.rqc-cat:has(input:checked) svg { color: var(--acc); }
.rqc-cat:has(input:focus-visible), .rqc-chip:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.rqc-cats[aria-invalid=true] .rqc-cat, .rqc-chips[aria-invalid=true] .rqc-chip { border-color: rgba(255, 143, 143, 0.5); }
.rqc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rqc-chip { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.025); font-size: 12.5px; font-weight: 550; color: var(--soft); cursor: pointer; user-select: none; transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.12s; }
.rqc-chip:hover { border-color: rgba(124, 245, 196, 0.4); color: var(--hi); }
.rqc-chip:has(input:checked) { border-color: rgba(124, 245, 196, 0.5); background: var(--acc-soft); font-weight: 650; color: var(--hi); }
.rqc-find { position: relative; display: flex; flex-direction: column; gap: 7px; }
.rqc-find[hidden], .rq-meta[hidden], .rqc-ids__grid [hidden] { display: none; }
.rqc-find > label { font-size: 13px; font-weight: 600; color: var(--text); }
.rqc-res { top: 78px; }
.rqc-res__i { grid-template-columns: 42px minmax(0, 1fr); }
.rqc-res__p { width: 42px; }
.rqc-picked { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 16px 12px 12px; border: 1px solid rgba(124, 245, 196, 0.34); border-radius: var(--r-m); background: linear-gradient(90deg, rgba(124, 245, 196, 0.08), rgba(124, 245, 196, 0.02)); }
.rqc-picked[hidden] { display: none; }
.rqc-picked__p { width: 68px; height: auto; aspect-ratio: 2 / 3; border-radius: 9px; object-fit: cover; background: var(--surface3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 22px -10px rgba(0, 0, 0, 0.8); }
.rqc-picked__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rqc-picked__t b { font: 650 17px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.rqc-picked__t b i { font-style: normal; font-weight: 500; color: var(--mut); }
.rqc-picked__t p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 12.5px; line-height: 1.45; color: var(--soft); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rqc-picked__t small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.rqc-find__help { margin: 0; }
.rqc-ids { border: 1px solid var(--line); border-radius: var(--r-m); background: rgba(3, 6, 8, 0.28); }
.rqc-ids summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 13px 16px; border-radius: var(--r-m); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; transition: background-color 0.15s; }
.rqc-ids summary:hover { background: rgba(255, 255, 255, 0.03); }
.rqc-ids summary::-webkit-details-marker { display: none; }
.rqc-ids summary::before { content: "›"; display: inline-block; width: 8px; color: var(--mut); transition: transform 0.15s; }
.rqc-ids[open] summary::before { transform: rotate(90deg); }
.rqc-ids summary .mut { font-size: 12px; font-weight: 400; }
.rqc-ids__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; padding: 4px 16px 18px; }
.rqc-ids__grid > .help { grid-column: 1 / -1; margin: 0; }
.rqc-bounty { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rqc-bounty__in { position: relative; display: flex; align-items: center; }
.rqc-bounty__in svg { position: absolute; left: 16px; width: 17px; height: 17px; fill: var(--amber); stroke: none; pointer-events: none; }
.rqc-bounty__in .input { width: 200px; height: 56px; padding: 0 58px 0 42px; border-radius: var(--r-m); font: 700 24px var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--amber); }
.rqc-bounty__in span { position: absolute; right: 16px; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); pointer-events: none; }
.rqc-meter { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rqc-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(244, 222, 140, 0.4), var(--amber)); transition: width 0.25s var(--ease); }
.rqc-meter.is-over i { background: var(--red); }
#rqc-left { margin: -6px 0 0; font-variant-numeric: tabular-nums; }
.rqc-last { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: 20px; padding-bottom: 20px; }
.rqc-last .form__actions { margin: 0; padding: 0; }
.rqc-anon { display: flex; flex-direction: column; gap: 3px; }
.rqc-anon .mut { padding-left: 28px; font-size: 12px; }
.rqc-go { min-width: 170px; justify-content: center; }
.rqc-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rqc-card { padding: 20px 22px 22px; }
.rqc-card[hidden], .rqc-card h3[hidden], .rqc-similar__lede[hidden] { display: none; }
.rqc-card h2 { margin: 0 0 14px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.rqc-card h3 { margin: 16px 0 8px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.rqc-preview { grid-template-columns: 50px minmax(0, 1fr) auto; column-gap: 14px; padding: 0; border-radius: 0; }
.rqc-preview::after { display: none; }
.rqc-preview .rqr__p { width: 50px; }
.rqc-preview .rqr__t { font-size: 15px; }
.rqc-preview .rqr__b b { font-size: 18px; }
.rqc-preview .rqr__meta { flex-wrap: wrap; }
.rqc-preview .rqr__meta::before { content: ""; order: 1; flex-basis: 100%; height: 0; margin-top: -5px; }
.rqc-preview .rqr__by { order: 2; }
.rqc-preview .rqr__by::before { display: none; }
.rqc-similar { border-color: rgba(244, 241, 208, 0.32); }
.rqc-similar h2 { color: var(--moon); }
.rqc-similar__lede { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--soft); }
.rqc-similar ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rqc-sim { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s, background-color 0.15s; }
.rqc-sim:hover { border-color: rgba(244, 222, 140, 0.5); background: rgba(244, 222, 140, 0.06); }
.rqc-sim b { font-size: 13px; font-weight: 600; color: var(--hi); overflow-wrap: anywhere; }
.rqc-sim code { overflow: hidden; font: 12px var(--mono); color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.rqc-sim small { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.rqc-sim.is-done b { color: var(--soft); }
.rqc-sim--t:hover { border-color: rgba(124, 245, 196, 0.5); background: rgba(124, 245, 196, 0.06); }
.rqc-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: rqc; }
.rqc-steps li { position: relative; padding-left: 36px; font-size: 12.5px; line-height: 1.5; color: var(--mut); counter-increment: rqc; }
.rqc-steps li::before { content: counter(rqc); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line2); font: 650 11px/1 var(--sans); color: var(--soft); }
.rqc-steps b { display: block; font-size: 13.5px; color: var(--hi); }
@media (min-width: 1800px) {
.rqh__bg { -webkit-mask-image: linear-gradient(90deg, transparent, #000 52%, #000 82%, transparent), linear-gradient(180deg, rgba(0, 0, 0, 0.5), #000 40%, transparent 97%); mask-image: linear-gradient(90deg, transparent, #000 52%, #000 82%, transparent), linear-gradient(180deg, rgba(0, 0, 0, 0.5), #000 40%, transparent 97%); }
.rqp-hero__bg { -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.5) 40%, #000 68%, #000 84%, transparent), linear-gradient(180deg, rgba(0, 0, 0, 0.55), #000 36%, rgba(0, 0, 0, 0.5) 66%, transparent 98%); mask-image: linear-gradient(90deg, transparent 4%, rgba(0, 0, 0, 0.5) 40%, #000 68%, #000 84%, transparent), linear-gradient(180deg, rgba(0, 0, 0, 0.55), #000 36%, rgba(0, 0, 0, 0.5) 66%, transparent 98%); }
}
@media (max-width: 1280px) {
.rq-grid { grid-template-columns: minmax(0, 1fr) 328px; }
.rqc { grid-template-columns: minmax(0, 1fr) 330px; }
.rqp-hero { grid-template-columns: 168px minmax(0, 1fr) auto; gap: 16px 28px; }
.rqp-hero__art { width: 168px; }
.rqp-hero__facts { padding-left: 28px; }
.rqp-hero__facts .is-dew dd { font-size: 38px; }
}
@media (max-width: 1180px) {
.rql__head, .rqr { grid-template-columns: 54px minmax(0, 1fr) 132px 118px; }
.rqr__soc, .rql__head span:nth-child(2) { display: none; }
.rqr__p { width: 54px; }
.rqb__sp { display: none; }
.rqb__q { flex: 1 1 200px; }
.rqb__q input { flex: 1; width: auto; }
}
@media (max-width: 1040px) {
.rqh { gap: 20px 30px; }
.rqh__wanted { padding-right: 12px; }
.rqh__card { width: 100px; margin: 0 -8px; }
.rqh__card--0 { width: 116px; }
.rqh__p { border-radius: 12px; }
.rqh__bg { width: 86%; opacity: 0.34; }
.rqh__facts dd { font-size: 22px; }
.rqh__facts div { padding: 0 18px; }
.rqp-hero { grid-template-columns: 150px minmax(0, 1fr); }
.rqp-hero__art { width: 150px; }
.rqp-hero--bare { grid-template-columns: 96px minmax(0, 1fr); }
.rqp-hero--bare .rqp-hero__art { width: 96px; border-radius: 22px; }
.rqp-hero__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: start; align-items: end; gap: 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.rqp-hero__facts .is-dew { grid-column: auto; padding-right: 26px; }
.rqp-hero__facts div:nth-child(2) { padding-left: 26px; border-left: 1px solid var(--line); }
.rqp-hero__facts .is-dew dd { font-size: 32px; }
.rqp-hero__facts .is-dew dd svg { width: 18px; height: 18px; }
.rq-grid, .rqc { grid-template-columns: minmax(0, 1fr); }
.rqc-side { position: static; }
}
@media (max-width: 760px) {
.rqh { margin-bottom: 18px; padding-bottom: 22px; }
.rqh__wanted { display: none; }
.rqh { grid-template-columns: minmax(0, 1fr); }
.rqh__bg { top: -20px; width: 100%; height: calc(100% + 20px); opacity: 0.26; }
.rqh__row { gap: 18px; margin-top: 22px; }
.rqh__facts { flex-wrap: wrap; gap: 16px 0; width: 100%; }
.rqh__facts div { flex: 1 1 40%; padding: 0 16px; }
.rqh__facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
.rqh__new { width: 100%; justify-content: center; }
.rqb__tools { gap: 8px; }
.rqb__status { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rqb__status a { flex: none; }
.rqb__q { order: 5; flex: 1 1 100%; }
.rqb__sort { order: 6; max-width: 100%; }
.rqb__sort .seg { overflow-x: auto; scrollbar-width: none; }
.rq-drop__m { max-width: calc(100vw - 32px); }
.rq-drop:last-of-type .rq-drop__m { left: auto; right: 0; }
.rql__head { display: none; }
.rqr { grid-template-columns: 50px auto minmax(0, 1fr) auto; grid-template-areas: "p m m m" "p st soc b"; gap: 10px 12px; padding: 14px 4px; border-radius: 14px; }
.rqr::after { left: 4px; right: 4px; }
.rqr__p { grid-area: p; align-self: start; width: 50px; }
.rqr__m { grid-area: m; }
.rqr__st { grid-area: st; }
.rqr__soc { grid-area: soc; display: flex; justify-self: start; gap: 11px; font-size: 12.5px; }
.rqr__b { grid-area: b; flex-direction: row; align-items: center; }
.rqr__b b { font-size: 17px; }
.rqr__heat { display: none; }
.rqr__t { font-size: 15.5px; }
.rqr__bd { display: none; }
.rqr__meta { flex-wrap: wrap; }
.rqr__meta::before { content: ""; order: 1; flex-basis: 100%; height: 0; margin-top: -5px; }
.rqr__by { order: 2; }
.rqr__age { order: 3; }
.rqr__by::before { display: none; }
.rqp-hero { grid-template-columns: 104px minmax(0, 1fr); gap: 16px 16px; padding: 8px 0 22px; align-items: start; }
.rqp-hero__art { width: 104px; border-radius: 12px; }
.rqp-hero--bare { grid-template-columns: 64px minmax(0, 1fr); }
.rqp-hero--bare .rqp-hero__art { width: 64px; border-radius: 16px; align-self: start; }
.rqp-hero__bg { top: -60px; width: 100%; height: 300px; opacity: 0.36; }
.rqp-hero__t { display: contents; }
.rqp-hero__k, .rqp-hero h1, .rqp-hero__sub { grid-column: 2; }
.rqp-hero__k { align-self: end; }
.rqp-hero__sub { align-self: start; }
.rqp-hero__ov, .rqp-hero__want, .rqp-hero__rel { grid-column: 1 / -1; }
.rqp-hero__art { grid-row: 1 / 4; }
.rqp-hero__rel { margin-top: 0; }
.rqp-hero__facts { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; padding-top: 16px; }
.rqp-hero__facts div, .rqp-hero__facts div:nth-child(2) { padding: 0 0 0 14px; }
.rqp-hero__facts .is-dew { padding: 0 14px 0 0; }
.rqp-hero__facts dd { font-size: 19px; }
.rqp-hero__facts .is-dew dd { font-size: 26px; gap: 5px; }
.rqp-hero__facts .is-dew dd svg { width: 15px; height: 15px; }
.rqp-steps { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
.rqp-steps li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding-bottom: 22px; }
.rqp-steps li:last-child { padding-bottom: 0; }
.rqp-steps li::after { grid-area: auto; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; height: auto; margin: 0; }
.rqp-steps i { grid-row: 1 / 3; align-self: start; }
.rqp-steps b { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; }
.rqp-steps small { grid-column: 2; grid-row: 2; align-self: start; padding-right: 0; }
.rqp-steps .is-done:has(+ .is-now)::after { background: linear-gradient(180deg, var(--acc), rgba(244, 241, 208, 0.55)); }
.rqp-act .btn--lg { flex: 1 1 auto; justify-content: center; }
.rq-grid { margin-top: 20px; }
.rqp-card, .rqc-sec { padding: 18px 16px 20px; }
.rqc-card { padding: 18px 16px; }
.rqp-rel { grid-template-columns: minmax(0, 1fr); }
.rqp-rel__fill { grid-column: 1; grid-row: auto; }
.rqp-fill__sp { display: none; }
.rqp-fill__row .check { flex: 1 1 100%; }
.rqp-fill__row .btn { flex: 1 1 auto; justify-content: center; }
.rq-comment--reply { margin-left: 20px; }
.rqc-preview { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-areas: "p m b"; padding: 0; }
.rqc-picked { grid-template-columns: 54px minmax(0, 1fr); }
.rqc-picked__p { width: 54px; }
.rqc-picked__x { grid-column: 1 / -1; justify-content: center; }
.rqc-bounty__in, .rqc-bounty__in .input { width: 100%; }
.rqc-last .form__actions { width: 100%; }
.rqc-last .form__actions .btn { flex: 1 1 auto; justify-content: center; }
}
.evp, .ev-list { --ev-a: #ffb45e; --ev-b: #ffd28a; --ev-c: #f08a35; --ev-hi: #ffe2b8; --ev-ink: #2a1606; }
@keyframes ev3-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes ev3-drop { from { opacity: 0; transform: translateY(-12px); } }
@keyframes ev3-fill { from { transform: scaleX(0); } }
@keyframes ev3-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes ev3-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-2deg) scale(var(--s, 1)); } 8% { opacity: var(--o, 0.9); } 50% { transform: translate3d(var(--w, 12px), -350px, 0) rotate(2deg) scale(var(--s, 1)); } 86% { opacity: calc(var(--o, 0.9) * 0.7); } 100% { opacity: 0; transform: translate3d(0, -700px, 0) rotate(-1deg) scale(calc(var(--s, 1) * 0.84)); } }
@keyframes ev3-catch { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.45); } 100% { opacity: 0.95; transform: scale(1); } }
@keyframes ev3-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-130px) scale(0.2); } }
@keyframes ev3-ember { 0% { opacity: 0; transform: translate(0, 0); } 14% { opacity: 0.9; } 60% { transform: translate(8px, -74px); } 100% { opacity: 0; transform: translate(-5px, -132px) scale(0.4); } }
.ev-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 48px; align-items: center; min-height: 480px; margin: 0 0 20px; padding: 48px 52px 54px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(700px 360px at 80% 0%, rgba(244, 241, 208, 0.09), transparent 70%), linear-gradient(180deg, rgba(18, 24, 38, 0.86), rgba(10, 16, 18, 0.62)); box-shadow: var(--e2); }
.ev-hero--lantern { border-color: rgba(255, 180, 94, 0.17); background: radial-gradient(900px 480px at 74% -14%, rgba(255, 166, 77, 0.2), transparent 62%), radial-gradient(600px 360px at 2% 114%, rgba(124, 245, 196, 0.07), transparent 70%), linear-gradient(180deg, rgba(27, 28, 50, 0.92) 0%, rgba(15, 19, 30, 0.84) 55%, rgba(9, 15, 16, 0.72) 100%); }
.ev-night { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ev-night__stars { position: absolute; inset: 0; opacity: 0.6; background-image: radial-gradient(1.4px 1.4px at 8% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 19% 32%, #fff 50%, transparent), radial-gradient(1.6px 1.6px at 31% 9%, #fff 50%, transparent), radial-gradient(1px 1px at 42% 24%, #fff 50%, transparent), radial-gradient(1.3px 1.3px at 55% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 63% 36%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 74% 8%, #fff 50%, transparent), radial-gradient(1px 1px at 86% 27%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 94% 15%, #fff 50%, transparent), radial-gradient(1px 1px at 26% 46%, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(1px 1px at 13% 24%, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(1.3px 1.3px at 24% 6%, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(1px 1px at 37% 30%, rgba(255, 255, 255, 0.5) 50%, transparent), radial-gradient(1.4px 1.4px at 48% 5%, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(1px 1px at 59% 22%, rgba(255, 255, 255, 0.5) 50%, transparent), radial-gradient(1.2px 1.2px at 69% 18%, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(1px 1px at 80% 40%, rgba(255, 255, 255, 0.45) 50%, transparent), radial-gradient(1.5px 1.5px at 90% 33%, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(1px 1px at 4% 38%, rgba(255, 255, 255, 0.5) 50%, transparent); }
.ev-night__moon { position: absolute; top: 40px; left: 47%; width: 54px; height: 54px; filter: drop-shadow(0 0 20px rgba(244, 241, 208, 0.5)) drop-shadow(0 0 64px rgba(244, 241, 208, 0.22)); }
.ev-night__moon .moon { width: 100%; height: 100%; }
.ev-night__moon .moon__disc { fill: rgba(244, 241, 208, 0.12); }
.ev-far i, .ev-near i, .ev-card__sky i { position: absolute; bottom: -40px; left: var(--x); background: radial-gradient(circle at 50% 62%, #fff4cc, var(--ev-a) 45%, #d9662a 85%); opacity: 0; animation: ev3-rise var(--t, 40s) linear var(--d, 0s) infinite; will-change: transform, opacity; }
.ev-far i { width: 8px; height: 11px; border-radius: 3px 3px 4px 4px; --o: 0.55; --w: 8px; box-shadow: 0 0 12px rgba(255, 170, 80, 0.5); }
.ev-near i { width: 18px; height: 25px; border-radius: 7px 7px 9px 9px; --w: 14px; box-shadow: 0 0 24px rgba(255, 170, 80, 0.75), 0 0 60px rgba(255, 150, 60, 0.28); }
.ev-far i:nth-child(1) { --x: 4%; --t: 52s; --d: -6s; }
.ev-far i:nth-child(2) { --x: 14%; --t: 61s; --d: -33s; }
.ev-far i:nth-child(3) { --x: 23%; --t: 56s; --d: -19s; }
.ev-far i:nth-child(4) { --x: 36%; --t: 66s; --d: -46s; }
.ev-far i:nth-child(5) { --x: 44%; --t: 58s; --d: -12s; }
.ev-far i:nth-child(6) { --x: 52%; --t: 63s; --d: -39s; }
.ev-far i:nth-child(7) { --x: 61%; --t: 54s; --d: -25s; }
.ev-far i:nth-child(8) { --x: 70%; --t: 68s; --d: -56s; }
.ev-far i:nth-child(9) { --x: 83%; --t: 59s; --d: -16s; }
.ev-far i:nth-child(10) { --x: 97%; --t: 64s; --d: -43s; }
.ev-near i:nth-child(1) { --x: 9%; --s: 0.55; --t: 34s; --d: -5s; }
.ev-near i:nth-child(2) { --x: 33%; --s: 0.7; --t: 40s; --d: -21s; }
.ev-near i:nth-child(3) { --x: 46%; --s: 1; --t: 31s; --d: -11s; }
.ev-near i:nth-child(4) { --x: 56%; --s: 0.65; --t: 37s; --d: -27s; }
.ev-near i:nth-child(5) { --x: 64%; --s: 0.9; --t: 33s; --d: -16s; }
.ev-near i:nth-child(6) { --x: 96%; --s: 0.75; --t: 42s; --d: -8s; }
.ev-scene { position: absolute; left: 22%; right: 0; bottom: 0; width: 78%; height: 180px; opacity: 0.24; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.ev-scene .fly { display: none; }
.ev-hero__txt { position: relative; min-width: 0; }
.ev-hero__k { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ev-hero__k > span { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 180, 94, 0.34); background: rgba(255, 180, 94, 0.08); font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: #ffc98a; }
.ev-hero__k > .ev-hero__live { border-color: rgba(124, 245, 196, 0.4); background: rgba(124, 245, 196, 0.08); color: var(--acc); }
.ev-hero__live i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.ev-hero h1 { font: 700 clamp(40px, 4.9vw, 68px)/0.98 var(--display); letter-spacing: -0.055em; background: linear-gradient(180deg, #fff 35%, #ffe0b4); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 26px rgba(0, 0, 0, 0.5)); }
.ev-hero__desc { max-width: 60ch; margin-top: 22px; font-size: 15px; line-height: 1.65; color: var(--soft); }
.ev-hero .ev-hero__desc .bb-lede { margin-bottom: 14px; font-size: 18px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.ev-hero__desc p { margin: 0 0 10px; }
.ev-hero .ev-hero__desc ul.bb-list > li::before { background: var(--ev-a); opacity: 1; }
.ev-hero__desc b { color: #ffe0b0; }
.ev-span { max-width: 520px; margin-top: 28px; }
.ev-span__bar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); }
.ev-span__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, rgba(240, 138, 53, 0.6), var(--ev-b)); transform-origin: left; }
.ev-span__bar b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff6d4, var(--ev-a) 60%, #e0722a); box-shadow: 0 0 14px rgba(255, 170, 80, 0.9), 0 0 36px rgba(255, 150, 60, 0.4); }
.ev-span__t { display: flex; justify-content: space-between; gap: 12px; margin-top: 11px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.ev-span__t span:first-child { font-weight: 650; color: var(--ev-hi); }
.ev-claim { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 28px 32px; border: 1px solid rgba(255, 190, 110, 0.22); border-radius: var(--r-xl); background: linear-gradient(180deg, rgba(24, 25, 40, 0.62), rgba(8, 12, 15, 0.74)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--e3); text-align: center; }
.ev-big { position: relative; display: grid; place-items: start center; width: 190px; height: 176px; margin: -8px 0 10px; }
.ev-big__halo { position: absolute; left: 50%; top: 58%; width: 236px; height: 236px; margin: -118px 0 0 -118px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 90, 0.5), rgba(255, 140, 50, 0.12) 45%, transparent 70%); opacity: 0; transform: scale(0.6); transition: opacity 1.1s ease 0.3s, transform 1.3s ease 0.3s; }
.ev-big__hang { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.ev-big__cord { width: 2px; height: 30px; background: linear-gradient(180deg, rgba(107, 81, 54, 0), #6b5136); }
.ev-lamp { position: relative; display: block; width: 78px; height: 100px; border-radius: 24px 24px 28px 28px / 30px 30px 34px 34px; background: radial-gradient(circle at 50% 60%, #fff6d4 0%, #ffc56e 32%, var(--ev-c) 70%, #b4511c 100%); box-shadow: 0 0 40px rgba(255, 170, 80, 0.7), 0 0 120px rgba(255, 150, 60, 0.35); transition: filter 1.1s ease, box-shadow 1.1s ease; }
.ev-lamp::before, .ev-lamp::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: #3b2a1b; }
.ev-lamp::before { top: -11px; width: 36px; height: 12px; border-radius: 6px 6px 2px 2px; }
.ev-lamp::after { bottom: -7px; width: 28px; height: 8px; border-radius: 2px 2px 7px 7px; }
.ev-lamp > b { position: absolute; inset: 9px 18px; border-left: 1px solid rgba(130, 55, 12, 0.32); border-right: 1px solid rgba(130, 55, 12, 0.32); background: linear-gradient(90deg, transparent 49%, rgba(130, 55, 12, 0.22) 50%, transparent 51%); }
.ev-flame { position: absolute; left: 50%; bottom: 20%; width: 18px; height: 26px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 72%, #fff 0%, #fff4be 38%, rgba(255, 210, 110, 0) 72%); opacity: 0.95; }
.ev-sparks { position: absolute; left: 50%; top: 66%; width: 0; height: 0; }
.ev-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 10px var(--ev-a), 0 0 3px #fff; opacity: 0; }
.ev-sparks i:nth-child(even) { width: 5px; height: 5px; }
.ev-embers { position: absolute; left: 50%; top: 40%; width: 0; height: 0; opacity: 0; transition: opacity 0.8s 0.6s; }
.ev-embers i { position: absolute; left: var(--x); top: 0; width: 3px; height: 3px; border-radius: 50%; background: #ffe2a0; box-shadow: 0 0 6px var(--ev-a); opacity: 0; }
.ev-embers i:nth-child(1) { --x: -18px; --t: 7.4s; --d: 0s; }
.ev-embers i:nth-child(2) { --x: 8px; --t: 9.1s; --d: -3.2s; }
.ev-embers i:nth-child(3) { --x: 20px; --t: 8.2s; --d: -5.6s; }
.ev-embers i:nth-child(4) { --x: -6px; --t: 9.8s; --d: -1.6s; }
.ev-embers i:nth-child(5) { --x: -26px; --t: 8.7s; --d: -6.8s; }
.ev-claim.is-done .ev-big__halo, .ev-claim.is-won .ev-big__halo { opacity: 1; transform: scale(1.1); }
.ev-claim.is-done .ev-embers, .ev-claim.is-won .ev-embers, .ev-claim.is-lighting .ev-embers { opacity: 1; }
.ev-claim.is-wait .ev-lamp, .ev-claim.is-off .ev-lamp { filter: brightness(0.42) saturate(0.35); box-shadow: 0 0 14px rgba(255, 170, 80, 0.14); }
.ev-claim.is-wait .ev-flame, .ev-claim.is-off .ev-flame { opacity: 0; transform: scale(0); }
.ev-claim.is-wait:hover .ev-lamp, .ev-claim.is-wait:focus-within .ev-lamp { filter: brightness(0.6) saturate(0.55); }
.ev-claim.is-lighting .ev-lamp, .ev-claim.is-lighting:hover .ev-lamp { filter: none; box-shadow: 0 0 46px rgba(255, 170, 80, 0.85), 0 0 140px rgba(255, 150, 60, 0.4); transition-delay: 0.3s; }
.ev-claim.is-lighting .ev-flame { opacity: 0.95; transform: none; animation: ev3-catch 0.55s ease-out 0.15s both; }
.ev-claim.is-lighting .ev-big__halo { opacity: 1; transform: scale(1.15); }
.ev-claim.is-lighting .ev-sparks i { animation: ev3-spark 1.1s ease-out 0.5s both; }
.ev-claim.is-lighting .ev-sparks i:nth-child(3n) { animation-delay: 0.7s; }
.ev-claim.is-lighting .ev-claim__k, .ev-claim.is-lighting .ev-claim__s { opacity: 0.4; transition: opacity 0.4s; }
.ev-gift { width: 92px; height: 92px; margin-top: 30px; color: #ffc98a; filter: drop-shadow(0 0 18px rgba(255, 170, 80, 0.6)); transition: filter 1s, opacity 1s; }
.ev-claim.is-wait .ev-gift, .ev-claim.is-off .ev-gift { opacity: 0.5; filter: none; }
.ev-claim.is-lighting .ev-gift { opacity: 1; filter: drop-shadow(0 0 30px rgba(255, 170, 80, 0.9)); }
.ev-claim__k { margin: 0; font: 650 20px/1.25 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.ev-claim__won { margin: 10px 0 0; font: 700 46px/1.05 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--ev-b); text-shadow: 0 0 30px rgba(255, 170, 80, 0.5); }
.ev-claim__won b { color: inherit; }
.ev-claim__s { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--mut); }
.ev-claim__s b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ev-hi); }
.ev-claim__next { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 18px 0 0; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 180, 94, 0.26); background: rgba(255, 180, 94, 0.08); font-size: 13px; color: var(--ev-hi); }
.ev-claim__next svg { width: 14px; height: 14px; color: var(--ev-a); }
.ev-claim__next b { min-width: 56px; font-weight: 650; font-variant-numeric: tabular-nums; color: #fff; text-align: left; }
.ev-claim form { margin: 0; }
.btn.ev-go { position: relative; overflow: hidden; height: 54px; margin-top: 20px; padding: 0 32px; font-size: 15.5px; }
.btn.ev-go svg { width: 18px; height: 18px; }
.btn.ev-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transition: left 0s; }
.btn.ev-go:hover::after { left: 130%; transition: left 0.7s ease; }
.ev-hero--lantern .btn.ev-go { border-color: transparent; background: linear-gradient(180deg, #ffd38a, #ffac58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px -8px rgba(255, 170, 80, 0.7); color: var(--ev-ink) !important; }
.ev-hero--lantern .btn.ev-go:hover { background: linear-gradient(180deg, #ffe0a8, #ffbb70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 40px -8px rgba(255, 170, 80, 0.9); }
.btn.ev-go:disabled { opacity: 0.75; cursor: default; }
.ev-yours { margin-bottom: 18px; padding: 24px 28px 22px; background: radial-gradient(800px 220px at 50% -50%, rgba(255, 176, 90, 0.09), transparent 70%), var(--card); }
.ev-yours__h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.ev-yours__h h2 { font: 650 20px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.ev-stats { display: flex; margin: 0; }
.ev-stats div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 0 22px; border-left: 1px solid var(--line); }
.ev-stats div:first-child { padding-left: 0; border-left: 0; }
.ev-stats div:last-child { padding-right: 0; }
.ev-stats dt { font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ev-stats dd { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.ev-stats dd b { font: 650 26px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--ev-b); }
.ev-stats dd b.is-token { color: var(--acc); }
.ev-stats dd small { font-size: 12px; color: var(--mut); }
.ev-garland { display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); row-gap: 14px; margin: 24px -4px 0; padding: 0; list-style: none; }
.ev-n { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.ev-n__arc { position: absolute; top: 0; left: 0; right: 0; height: 18px; border-bottom: 1.5px solid rgba(255, 214, 160, 0.3); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.ev-n__hang { display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.ev-n__cord { width: 1.5px; height: 14px; background: rgba(255, 214, 160, 0.35); }
.ev-n__lamp { position: relative; width: 28px; height: 38px; border: 1.5px dashed rgba(255, 214, 160, 0.24); border-radius: 10px 10px 12px 12px; transition: box-shadow 0.3s, filter 0.3s; }
.ev-n__lamp::before { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 5px; margin-left: -7px; border-radius: 3px 3px 1px 1px; background: rgba(255, 214, 160, 0.22); }
.ev-n.is-lit .ev-n__lamp { border: 0; background: radial-gradient(circle at 50% 60%, #fff3c4, var(--ev-a) 45%, #e0722a 85%); box-shadow: 0 0 18px rgba(255, 170, 80, 0.7), 0 0 44px rgba(255, 150, 60, 0.25); }
.ev-n.is-lit .ev-n__lamp::before { background: #4a3420; }
.ev-n.is-lit .ev-n__lamp i { position: absolute; left: 50%; bottom: 7px; width: 8px; height: 11px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff, rgba(255, 240, 180, 0) 75%); }
.ev-n.is-lit:hover .ev-n__lamp { filter: brightness(1.15); box-shadow: 0 0 26px rgba(255, 170, 80, 0.95), 0 0 64px rgba(255, 150, 60, 0.4); }
.ev-n.is-today:not(.is-lit) .ev-n__lamp { border: 1.5px solid var(--ev-a); box-shadow: 0 0 14px rgba(255, 170, 80, 0.4), inset 0 0 10px rgba(255, 170, 80, 0.16); }
.ev-n.is-missed .ev-n__lamp { border-style: solid; border-color: rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); }
.ev-n__d { display: flex; flex-direction: column; align-items: center; margin-top: 12px; font: 600 12.5px/1.35 var(--sans); font-variant-numeric: tabular-nums; color: var(--mut); }
.ev-n__d b { font: var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.ev-n.is-lit .ev-n__d { color: var(--ev-b); }
.ev-n.is-today .ev-n__d b { color: var(--ev-a); }
.ev-n__tip { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 6; width: max-content; max-width: 190px; padding: 8px 12px; border: 1px solid rgba(255, 190, 110, 0.3); border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--e3); font-size: 12px; font-style: normal; line-height: 1.45; color: var(--soft); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity 0.18s, transform 0.18s; }
.ev-n__tip b { color: var(--ev-b); }
.ev-n:hover .ev-n__tip { opacity: 1; transform: translate(-50%, 0); }
.ev-n:first-child .ev-n__tip { left: 0; transform: translate(0, 6px); }
.ev-n:last-child .ev-n__tip { left: auto; right: 0; transform: translate(0, 6px); }
.ev-n:first-child:hover .ev-n__tip, .ev-n:last-child:hover .ev-n__tip { transform: translate(0, 0); }
.ev-garland--gift .ev-n.is-lit .ev-n__lamp { border-radius: 50%; }
.ev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ev-grid > .card + .card { margin-top: 0; }
.ev-note { font-size: 12.5px; color: var(--mut); }
.ev-odds ul, .ev-lead ol, .ev-wins ul { margin: 0; padding: 4px 20px 12px; list-style: none; }
.ev-odds li, .ev-lead li, .ev-wins li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ev-odds li:first-child, .ev-lead li:first-child, .ev-wins li:first-child { border-top: 0; }
.ev-odds li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 40px; }
.ev-odds__t { color: var(--soft); }
.ev-odds__t b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ev-b); }
.ev-odds__bar { height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.07); }
.ev-odds__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ev-c), var(--ev-b)); transform-origin: left; }
.ev-odds li.is-token b { color: var(--acc); }
.ev-odds li.is-token .ev-odds__bar i { background: linear-gradient(90deg, var(--acc), var(--acc-hi)); }
.ev-odds__p { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mut); text-align: right; }
.ev-av { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #2f6654, #12302a 70%); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.3); font: 650 13px/1 var(--sans); text-transform: uppercase; color: var(--hi); }
.ev-lead__n { width: 20px; font: 650 14px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dim); text-align: center; }
.ev-lead li.is-first .ev-lead__n { color: var(--ev-b); }
.ev-lead li.is-first .ev-av { box-shadow: 0 0 0 2px rgba(255, 190, 110, 0.6), 0 0 20px rgba(255, 170, 80, 0.3); }
.ev-lead__who, .ev-wins__who { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.ev-lead__who a, .ev-wins__who a { overflow: hidden; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.ev-lead__who a:hover, .ev-wins__who a:hover { color: var(--ev-b); }
.ev-lead__who small, .ev-wins__who small { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mut); }
.ev-lead__v { font: 650 17px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ev-b); white-space: nowrap; }
.ev-lead__v small { margin-left: 5px; font: 500 11.5px var(--sans); letter-spacing: 0; color: var(--mut); }
.ev-wins__p { padding: 0 11px; border-radius: 999px; background: rgba(255, 180, 94, 0.11); font-size: 12px; font-weight: 650; line-height: 24px; font-variant-numeric: tabular-nums; color: var(--ev-b); white-space: nowrap; }
.ev-wins__p.is-token { background: var(--acc-soft); color: var(--acc); }
li.ev-empty { display: block; padding: 24px 0 14px; color: var(--mut); text-align: center; }
.ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; }
.ev-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 24px; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease); }
.ev-card:hover, .ev-card:focus-visible { transform: translateY(-2px); border-color: rgba(255, 190, 110, 0.42); box-shadow: var(--e2), 0 0 44px -10px rgba(255, 170, 80, 0.25); }
.ev-card.is-on { grid-column: 1 / -1; min-height: 210px; padding: 34px 44px; border-color: rgba(255, 180, 94, 0.2); border-radius: var(--r-xl); background: radial-gradient(640px 280px at 16% -10%, rgba(255, 170, 80, 0.18), transparent 70%), linear-gradient(180deg, rgba(27, 28, 50, 0.9), rgba(11, 17, 20, 0.7)); }
.ev-card__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ev-card__sky i { width: 12px; height: 17px; border-radius: 5px 5px 6px 6px; box-shadow: 0 0 18px rgba(255, 170, 80, 0.65); --o: 0.8; }
.ev-card__sky i:nth-child(1) { --x: 50%; --t: 30s; --d: -3s; --s: 0.7; }
.ev-card__sky i:nth-child(2) { --x: 56%; --t: 37s; --d: -15s; }
.ev-card__sky i:nth-child(3) { --x: 62%; --t: 33s; --d: -24s; --s: 0.6; }
.ev-card__sky i:nth-child(4) { --x: 69%; --t: 40s; --d: -8s; --s: 0.85; }
.ev-card__sky i:nth-child(5) { --x: 75%; --t: 35s; --d: -19s; --s: 0.6; }
.ev-card__art { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 84px; }
.ev-card__art > svg { width: 40px; height: 40px; color: #ffc98a; }
.ev-card__hang { transform-origin: 50% 0; scale: 0.6; }
.ev-card.is-on .ev-card__art { width: 96px; height: 124px; }
.ev-card.is-on .ev-card__hang { scale: 0.95; }
.ev-card:not(.is-on) .ev-lamp { filter: brightness(0.45) saturate(0.3); box-shadow: none; }
.ev-card:not(.is-on) .ev-flame { display: none; }
.ev-card__t { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.ev-card__t b { font: 700 20px/1.15 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.ev-card.is-on .ev-card__t b { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.045em; }
.ev-card__t small { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.ev-tag { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px 0 9px; border-radius: 999px; border: 1px solid var(--line2); font-size: 11.5px; font-weight: 650; color: var(--soft); white-space: nowrap; }
.ev-tag--on { border-color: rgba(124, 245, 196, 0.34); background: var(--acc-soft); color: var(--acc); }
.ev-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ev-card__bar { display: block; width: min(100%, 420px); height: 5px; margin-top: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.09); }
.ev-card__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ev-c), var(--ev-b)); }
.ev-card__go { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; background: linear-gradient(180deg, #ffd38a, #ffac58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 30px -8px rgba(255, 170, 80, 0.65); font-size: 14.5px; font-weight: 650; color: var(--ev-ink); transition: box-shadow 0.2s; }
.ev-card__go svg { width: 15px; height: 15px; transition: transform 0.2s var(--ease); }
.ev-card:hover .ev-card__go:not(.is-done) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 40px -8px rgba(255, 170, 80, 0.9); }
.ev-card:hover .ev-card__go:not(.is-done) svg { transform: translateX(3px); }
.ev-card__go.is-done { flex-direction: column; justify-content: center; gap: 2px; height: auto; padding: 12px 24px; border: 1px solid rgba(255, 180, 94, 0.3); background: rgba(255, 180, 94, 0.08); box-shadow: none; color: var(--ev-hi); }
.ev-card__go.is-done svg { display: none; }
.ev-card__go small { font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--mut); }
@media (prefers-reduced-motion: no-preference) {
.ev-hero__txt > * { animation: ev3-up 0.55s var(--ease) both; }
.ev-hero__txt > :nth-child(2) { animation-delay: 0.05s; }
.ev-hero__txt > :nth-child(3) { animation-delay: 0.1s; }
.ev-hero__txt > :nth-child(4) { animation-delay: 0.16s; }
.ev-claim { animation: ev3-up 0.6s var(--ease) 0.12s both; }
.ev-span__bar i, .ev-card__bar i { animation: ev3-fill 0.6s var(--ease) 0.25s both; }
.ev-odds__bar i { animation: ev3-fill 0.6s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 0.2s); }
.ev-n { animation: ev3-drop 0.45s var(--ease) both; animation-delay: calc(var(--i) * 28ms + 0.15s); }
.ev-big__hang, .ev-card.is-on .ev-card__hang { animation: ev3-sway 7s ease-in-out infinite; }
.ev-claim.is-off .ev-big__hang { animation: none; }
.ev-n.is-lit .ev-n__hang { animation: ev3-sway 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.9s); }
.ev-claim.is-won .ev-sparks i { animation: ev3-spark 1.3s ease-out 0.35s both; }
.ev-claim.is-won .ev-sparks i:nth-child(3n) { animation-duration: 1.7s; animation-delay: 0.55s; }
.ev-claim.is-won .ev-claim__won { animation: ev3-up 0.6s var(--ease) 0.4s both; }
.ev-embers i { animation: ev3-ember var(--t) ease-out var(--d) infinite; }
}
@media (prefers-reduced-motion: reduce) {
.ev-far i, .ev-near i, .ev-card__sky i { animation: none; opacity: 0.5; transform: translateY(calc(-90px - var(--s, 1) * 190px)) scale(var(--s, 1)); }
.ev-far i:nth-child(odd), .ev-near i:nth-child(odd) { transform: translateY(calc(-200px - var(--s, 1) * 160px)) scale(var(--s, 1)); }
.ev-far i:nth-child(-n+5), .ev-near i:nth-child(-n+2) { display: none; }
.ev-embers { display: none; }
.ev-big__halo, .ev-lamp, .ev-claim.is-lighting .ev-lamp { transition: none; }
.btn.ev-go::after { display: none; }
}
@media (max-width: 1200px) {
.ev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ev-odds { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
.ev-garland { --n: 7 !important; }
.ev-n:nth-child(7n+1) .ev-n__tip { left: 0; right: auto; transform: translate(0, 6px); }
.ev-n:nth-child(7n) .ev-n__tip { left: auto; right: 0; transform: translate(0, 6px); }
.ev-n:nth-child(7n+1):hover .ev-n__tip, .ev-n:nth-child(7n):hover .ev-n__tip { transform: translate(0, 0); }
}
@media (max-width: 1000px) {
.ev-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding: 38px 32px 40px; }
.ev-night__moon { left: auto; right: 36px; top: 30px; }
.ev-claim { width: 100%; max-width: 440px; justify-self: center; }
}
@media (max-width: 700px) {
.ev-grid { grid-template-columns: minmax(0, 1fr); }
.ev-hero { padding: 26px 20px 28px; border-radius: var(--r-lg); }
.ev-hero h1 { font-size: 40px; padding-right: 56px; }
.ev-night__moon { right: 22px; top: 24px; width: 42px; height: 42px; }
.ev-hero .ev-hero__desc .bb-lede { font-size: 16.5px; }
.ev-n__d b { font-size: 9.5px; letter-spacing: 0.03em; }
.ev-yours { padding: 20px 16px 18px; }
.ev-stats { flex-wrap: wrap; gap: 16px 0; width: 100%; }
.ev-stats div { flex: 1 1 40%; padding: 0 16px; }
.ev-stats div:nth-child(odd) { padding-left: 0; border-left: 0; }
.ev-card, .ev-card.is-on { flex-wrap: wrap; gap: 16px; padding: 22px 20px; border-radius: var(--r-lg); }
.ev-card.is-on .ev-card__art { width: 70px; height: 96px; }
.ev-card.is-on .ev-card__hang { scale: 0.72; }
.ev-card__go { width: 100%; justify-content: center; }
.ev-card__sky i:nth-child(1) { --x: 91%; }
.ev-card__sky i:nth-child(2) { --x: 96%; --s: 0.6; }
.ev-card__sky i:nth-child(n+3) { display: none; }
.ev-odds ul, .ev-lead ol, .ev-wins ul { padding: 4px 16px 10px; }
}
main.content.is-in > .mp { animation: none; }
.mp { --mp-lit: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "hero hero" "who feed" "past past" "how how"; gap: 22px; }
.mp-defs { position: absolute; width: 0; height: 0; }
.mp-demo { margin: 0 0 16px; padding: 10px 16px; border: 1px dashed var(--line3); border-radius: var(--r); font-size: 13px; color: var(--soft); }
.mp-demo b { font-weight: 650; color: var(--amber); }
.mp-demo a { margin-left: 6px; color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mp-moon, .mp-refl svg, .mp-marks svg, .mp-empty svg, .mp-pcard__moon, .mp-how__l svg { stroke: none; }
.mp-top { grid-area: hero; position: relative; min-width: 0; }
.mp-hero { --d: 250px; --x: 53%; --gap: 30px; --wat: 214px; position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(18px, 1fr) auto auto; min-height: 568px; padding: 40px 436px 30px 46px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: #060b11; box-shadow: var(--e2); }
.mp-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #060a13 0%, #091322 56%, #0d1c2e 100%) top / 100% calc(100% - var(--wat)) no-repeat; }
.mp-scene::before { content: ""; position: absolute; inset: auto 0 var(--wat) 0; height: 46%; background: radial-gradient(60% 100% at var(--x) 100%, color-mix(in srgb, var(--bmoon) 20%, transparent), transparent 72%); opacity: calc(0.25 + 0.75 * var(--mp-lit)); }
.mp-stars { position: absolute; inset: 0 0 var(--wat) 0; opacity: calc(0.9 - 0.45 * var(--mp-lit)); background-image:
radial-gradient(1px 1px at 24px 36px, rgba(255, 255, 255, 0.75), transparent 100%),
radial-gradient(1px 1px at 148px 92px, rgba(255, 255, 255, 0.45), transparent 100%),
radial-gradient(1.3px 1.3px at 96px 188px, rgba(244, 241, 208, 0.7), transparent 100%),
radial-gradient(1px 1px at 232px 54px, rgba(196, 232, 222, 0.55), transparent 100%),
radial-gradient(1px 1px at 310px 142px, rgba(255, 255, 255, 0.4), transparent 100%),
radial-gradient(1.5px 1.5px at 62px 122px, rgba(255, 255, 255, 0.5), transparent 100%); background-size: 290px 250px, 370px 310px, 430px 290px, 510px 330px, 610px 270px, 730px 350px; -webkit-mask-image: radial-gradient(circle at var(--x) calc(100% - var(--gap) - var(--d) / 2), transparent calc(var(--d) * 0.62), #000 calc(var(--d) * 1.5)), linear-gradient(180deg, #000 40%, transparent 98%); -webkit-mask-composite: source-in; mask-image: radial-gradient(circle at var(--x) calc(100% - var(--gap) - var(--d) / 2), transparent calc(var(--d) * 0.62), #000 calc(var(--d) * 1.5)), linear-gradient(180deg, #000 40%, transparent 98%); mask-composite: intersect; }
.mp-halo { position: absolute; left: var(--x); bottom: calc(var(--wat) + var(--gap) + var(--d) / 2); width: calc(var(--d) * 3.4); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--moon) 24%, transparent), color-mix(in srgb, var(--moon) 8%, transparent) 38%, transparent 72%); opacity: calc(0.08 + 0.92 * var(--mp-lit)); }
.mp--up .mp-scene::after, .mp--added .mp-scene::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 62%; background: radial-gradient(64% 100% at 50% 0, color-mix(in srgb, var(--moon) 14%, transparent), transparent 72%); }
.mp--just .mp-halo { width: calc(var(--d) * 4.4); background: radial-gradient(closest-side, color-mix(in srgb, var(--moon) 34%, transparent), color-mix(in srgb, var(--moon) 11%, transparent) 36%, transparent 72%); }
.mp-moon { position: absolute; left: var(--x); bottom: calc(var(--wat) + var(--gap) + var(--d) / 2); width: calc(var(--d) * 1.28); height: calc(var(--d) * 1.28); overflow: visible; transform: translate(-50%, 50%); }
.mp-water { position: absolute; inset: auto 0 0 0; height: var(--wat); overflow: hidden; background: linear-gradient(180deg, #0a1725 0%, #070e17 38%, #05090e 100%); }
.mp-water::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(196, 232, 222, 0.2) 14%, color-mix(in srgb, var(--moon) calc(30% + 55% * var(--mp-lit)), transparent) var(--x), rgba(196, 232, 222, 0.2) 88%, transparent); }
.mp-water::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bmoon) 15%, transparent), transparent 66%); opacity: calc(0.2 + 0.8 * var(--mp-lit)); }
.mp-glade { position: absolute; top: 0; left: var(--x); width: calc(var(--d) * 1.9); height: 100%; transform: translateX(-50%); background: radial-gradient(50% 105% at 50% 0, color-mix(in srgb, var(--moon) 26%, transparent), transparent 76%); opacity: calc(0.05 + 0.95 * var(--mp-lit)); }
.mp-refl { position: absolute; z-index: 1; left: var(--x); top: calc((var(--gap) + var(--d) / 2) * 0.8); width: calc(var(--d) * 1.28); height: calc(var(--d) * 1.28); transform: translate(-50%, -50%); opacity: 0.6; filter: url(#mp-f-water); -webkit-mask-image: linear-gradient(180deg, #000 16%, transparent 86%); mask-image: linear-gradient(180deg, #000 16%, transparent 86%); }
.mp-refl svg { display: block; width: 100%; height: 100%; overflow: visible; transform: scaleY(-0.8); }
.mp-ripple { position: absolute; z-index: 1; left: var(--x); top: calc((var(--gap) + var(--d) / 2) * 0.8); width: calc(var(--d) * 5); height: calc(var(--d) * 1.3); border: 1.5px solid color-mix(in srgb, var(--moon) 70%, transparent); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.05); }
.mp.is-rippling .mp-ripple { animation: mp-ripple 1.5s cubic-bezier(0.16, 0.62, 0.3, 1) 0.45s 1 both; }
@keyframes mp-ripple { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.05); } 14% { opacity: 0.75; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.mp-head { grid-row: 1; max-width: 432px; }
.mp-k { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--moon); }
.mp-k::before { content: ""; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.mp-hero h1 { font: 700 clamp(30px, 3.1vw, 44px)/1.04 var(--display); letter-spacing: -0.043em; color: var(--hi); }
.mp-lede { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.mp-lede b { font-weight: 650; color: var(--hi); }
.mp-count { grid-row: 3; display: flex; align-items: baseline; gap: 14px; margin: 0; }
.mp-count b { font: 700 clamp(88px, 9.6vw, 138px)/0.8 var(--display); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: var(--hi); text-shadow: 0 0 70px color-mix(in srgb, var(--moon) 34%, transparent); }
.mp-count > span:last-child { font: 600 clamp(20px, 2vw, 27px)/1 var(--display); letter-spacing: -0.03em; color: var(--mut); white-space: nowrap; }
.mp-under { grid-row: 4; display: flex; flex-direction: column; gap: 9px; max-width: 452px; min-height: calc(var(--wat) - 28px); padding-top: 22px; }
.mp-miss { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.mp-miss b { font-weight: 650; color: var(--hi); }
.mp-state { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.mp-state b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--moon); white-space: nowrap; }
.mp-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); transform: translateY(-1px); }
.mp--up .mp-state, .mp--added .mp-state, .mp--waiting .mp-state { color: var(--soft); }
.mp--up .mp-dot, .mp--added .mp-dot { background: var(--moon); box-shadow: 0 0 10px var(--moon); }
.mp--waiting .mp-dot { background: var(--lav); box-shadow: 0 0 10px var(--lav); }
.mp-marks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: auto 0 0; padding: 12px 0 0; list-style: none; }
.mp-marks li { display: flex; align-items: center; gap: 9px; }
.mp-marks svg { width: 22px; height: 22px; }
.mp-marks circle { fill: color-mix(in srgb, var(--moon) 10%, transparent); }
.mp-marks path { fill: color-mix(in srgb, var(--moon) 28%, transparent); }
.mp-marks li > span { display: flex; flex-direction: column; gap: 2px; }
.mp-marks b { font: 650 13px/1 var(--display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--mut); }
.mp-marks small { font: 11px/1.1 var(--sans); color: var(--dim); white-space: nowrap; }
.mp-marks li.is-on path { fill: var(--moon); }
.mp-marks li.is-on svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--moon) 55%, transparent)); }
.mp-marks li.is-on b { color: var(--hi); }
.mp-marks li.is-on small { color: var(--mut); }
.mp-give { position: absolute; top: 50%; right: 30px; display: flex; flex-direction: column; gap: 16px; width: 376px; padding: 24px 24px 20px; border: 1px solid var(--line2); border-radius: 24px; background: rgba(8, 14, 20, 0.62); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--e3); transform: translateY(-50%); }
.mp-give h2 { font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.mp-have { display: flex; align-items: center; gap: 14px; margin: 0; }
.mp-have__n { display: inline-flex; align-items: center; gap: 9px; color: var(--moon); }
.mp-have__n svg { width: 20px; height: 20px; }
.mp-have__n b { font: 700 40px/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.mp-have__t { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.35; color: var(--soft); }
.mp-have__t small { font-size: 12.5px; color: var(--mut); }
.mp-form, .mp-none { display: flex; flex-direction: column; gap: 12px; }
.mp-step { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; height: 60px; padding: 0 6px; border: 1px solid var(--line2); border-radius: 18px; background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); transition: border-color 0.15s, box-shadow 0.15s; }
.mp-step:focus-within { border-color: rgba(124, 245, 196, 0.6); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.mp-step__b { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.055); color: var(--hi); cursor: pointer; transition: background-color 0.15s, transform 0.12s; }
.mp-step__b svg { width: 18px; height: 18px; stroke: currentColor; }
.mp-step__b:hover:not(:disabled) { background: rgba(255, 255, 255, 0.11); }
.mp-step__b:active:not(:disabled) { transform: scale(0.94); }
.mp-step__b:disabled { opacity: 0.35; cursor: not-allowed; }
.mp-step__n { width: 100%; height: 48px; padding: 0; border: 0; background: none; color: var(--hi); font: 700 28px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: center; outline: 0; appearance: textfield; -moz-appearance: textfield; }
.mp-step__n::-webkit-inner-spin-button, .mp-step__n::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.mp-quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.mp-quick .chip { justify-content: center; height: 34px; padding: 0 8px; font: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-quick .chip:disabled { opacity: 0.38; cursor: not-allowed; }
.mp-quick .chip:disabled:hover { border-color: var(--line2); color: var(--soft); }
.mp-go { justify-content: center; width: 100%; height: 50px; margin-top: 4px; font-size: 15px; }
.mp-go[disabled] { box-shadow: none; }
.mp-final { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); text-align: center; text-wrap: balance; }
.mp-none > p:first-child { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.mp-none a { color: var(--hi); text-decoration: underline; text-decoration-color: rgba(124, 245, 196, 0.5); text-underline-offset: 3px; transition: color 0.15s; }
.mp-none a:hover { color: var(--acc); }
.mp-none code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--hi); white-space: nowrap; }
.mp-flash { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px; border: 1px solid color-mix(in srgb, currentColor 34%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 8%, transparent); font-size: 13px; line-height: 1.45; outline: 0; }
.mp-flash svg { width: 16px; height: 16px; margin-top: 1px; }
.mp-flash span { color: var(--soft); }
.mp-flash b { font-weight: 650; color: var(--hi); }
.mp-flash--ok { color: var(--moon); }
.mp-flash--err { color: var(--red); }
.mp-card { align-self: start; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.mp-who { grid-area: who; }
.mp-feed { grid-area: feed; }
.mp-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 17px 22px 14px; border-bottom: 1px solid var(--line); }
.mp-card__h h2 { font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.mp-card__h span { font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.mp-av { flex: none; width: 34px; height: 34px; font-size: 13px; box-shadow: 0 0 0 1.5px color-mix(in srgb, currentColor 60%, transparent); }
.mp-av.av--txt { color: var(--soft); }
.mp-name { min-width: 0; overflow: hidden; font-weight: 600; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: filter 0.15s; }
a.mp-name:hover { filter: brightness(1.25); text-decoration: underline; text-underline-offset: 3px; }
.mp-name--gone { font-weight: 500; color: var(--mut); }
.mp-who__l { margin: 0; padding: 8px 10px 10px; list-style: none; }
.mp-g { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 9px 12px; border-radius: 14px; transition: background-color 0.15s; }
.mp-g:hover { background: rgba(255, 255, 255, 0.03); }
.mp-g.is-me { background: rgba(124, 245, 196, 0.055); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.22); }
.mp-g__r { font: 650 13px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--dim); text-align: center; }
.mp-who__l > .mp-g:first-child .mp-g__r { color: var(--moon); }
.mp-more .mp-g:first-child .mp-g__r { color: var(--dim); }
.mp-g__w { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.mp-g__n { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; line-height: 1.2; }
.mp-g__n .pill { flex: none; line-height: 15px; }
.mp-g__bar { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); }
.mp-g__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--moon) 30%, transparent), color-mix(in srgb, var(--moon) 80%, transparent)); }
.mp-g__t { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.mp-g__t b { font: 650 17px/1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hi); }
.mp-g__t small { font-size: 11.5px; color: var(--dim); }
.mp-g__gap { height: 1px; margin: 6px 12px; background: var(--line); }
.mp-more { border-top: 1px solid var(--line); }
.mp-more summary { display: flex; align-items: center; gap: 8px; padding: 13px 22px; font-size: 13px; font-weight: 550; color: var(--mut); cursor: pointer; list-style: none; user-select: none; transition: color 0.15s; }
.mp-more summary::-webkit-details-marker { display: none; }
.mp-more summary:hover { color: var(--hi); }
.mp-more summary svg { width: 13px; height: 13px; transition: transform 0.2s; }
.mp-more[open] summary svg { transform: rotate(90deg); }
.mp-more .mp-who__l { padding-top: 0; content-visibility: auto; }
.mp-feed__l { margin: 0; padding: 8px 10px 10px; list-style: none; }
.mp-feed__l li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; color: var(--soft); }
.mp-feed__l li.is-me { background: rgba(124, 245, 196, 0.045); }
.mp-feed__l .mp-av { width: 28px; height: 28px; font-size: 11.5px; }
.mp-feed__w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-feed__w .mp-name { display: inline; }
.mp-feed__w b { font-weight: 650; color: var(--moon); }
.mp-feed__w small { font-size: 12px; color: var(--dim); }
.mp-feed__l time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.mp-empty { display: flex; align-items: center; gap: 18px; padding: 30px 26px; }
.mp-empty svg { flex: none; width: 46px; height: 46px; }
.mp-empty circle, .mp-pcard__moon circle { fill: color-mix(in srgb, var(--moon) 9%, transparent); stroke: color-mix(in srgb, var(--moon) 24%, transparent); stroke-width: 2; }
.mp-empty p { margin: 0; max-width: 52ch; font-size: 13.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.mp-empty b { display: block; margin-bottom: 2px; font: 650 15px/1.3 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.mp-empty--wide { border: 1px dashed var(--line2); border-radius: var(--r-lg); }
.mp-past { grid-area: past; min-width: 0; margin-top: 8px; }
.mp-how { grid-area: how; min-width: 0; margin-top: 8px; }
.mp-sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mp-sec__h h2 { font: 650 19px/1.2 var(--display); letter-spacing: -0.028em; color: var(--hi); }
.mp-sec__h span { font-size: 12.5px; color: var(--mut); }
.mp-past__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.mp-pcard { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px 18px 70px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); transition: border-color 0.2s; }
.mp-pcard:hover { border-color: var(--line2); }
.mp-pcard__moon { position: absolute; top: 18px; left: 20px; width: 36px; height: 36px; overflow: visible; }
.mp-pcard__moon circle { fill: var(--moon); stroke: none; }
.mp-pcard--done .mp-pcard__moon, .mp-pcard--up .mp-pcard__moon { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--moon) 55%, transparent)); }
.mp-pcard--waiting .mp-pcard__moon circle, .mp-pcard--queued .mp-pcard__moon circle { fill: color-mix(in srgb, var(--moon) 38%, transparent); }
.mp-pcard__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.mp-pcard__h b { font: 650 16px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.mp-pcard__h span { font-size: 12.5px; color: var(--mut); }
.mp-pcard__when { margin: 0; font-size: 13px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.mp-pcard__when i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 8px var(--moon); vertical-align: 2px; }
.mp-pcard--waiting .mp-pcard__when i, .mp-pcard--queued .mp-pcard__when i { background: var(--lav); box-shadow: 0 0 8px var(--lav); }
.mp-pcard__tops { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 4px 0 0; padding-top: 11px; border-top: 1px solid var(--line); font-size: 13px; }
.mp-pcard__tops > span:first-child { flex: 0 0 100%; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.mp-pcard__top { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; }
.mp-pcard__top b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--mut); }
.mp-pcard__tops small { font-size: 12px; color: var(--dim); }
.mp-how__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: mp-step; }
.mp-how__l li { display: flex; gap: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); counter-increment: mp-step; }
.mp-how__l svg { flex: none; width: 34px; height: 34px; margin-top: 2px; }
.mp-how__l circle { fill: color-mix(in srgb, var(--moon) 10%, transparent); }
.mp-how__l path { fill: var(--moon); }
.mp-how__l b { display: block; font: 650 15px/1.3 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.mp-how__l b::before { content: counter(mp-step) ". "; color: var(--dim); }
.mp-how__l p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
@media (max-width: 1399px) {
.mp-hero { --d: 224px; --x: 52%; }
}
@media (max-width: 1239px) {
.mp { grid-template-columns: 372px minmax(0, 1fr); grid-template-areas: "hero hero" "give who" "give feed" "past past" "how how"; }
.mp-top { display: contents; }
.mp-hero { --d: 250px; --x: 72%; grid-area: hero; padding-right: 46px; }
.mp-head, .mp-under { max-width: min(46%, 452px); }
.mp-give { position: sticky; top: 84px; right: auto; grid-area: give; align-self: start; width: auto; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--e2); transform: none; }
}
@media (max-width: 1180px) {
.mp-give { top: 116px; }
}
@media (max-width: 1000px) and (min-width: 821px) {
.mp-marks small { display: none; }
}
@media (max-width: 820px) {
.mp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "give" "who" "feed" "past" "how"; gap: 16px; }
.mp-hero { --d: 172px; --x: 50%; --gap: 20px; --wat: 124px; grid-template-rows: auto auto auto auto; min-height: 0; padding: 24px 20px 22px; border-radius: 24px; }
.mp-scene { position: relative; inset: auto; grid-row: 2; height: calc(var(--d) + var(--gap) + 34px + var(--wat)); margin: 14px -20px 0; }
.mp-head, .mp-under { max-width: none; }
.mp-count { margin-top: 22px; }
.mp-count b { font-size: clamp(72px, 24vw, 96px); }
.mp-under { min-height: 0; padding-top: 16px; }
.mp-marks { justify-content: space-between; gap: 10px 8px; padding-top: 8px; }
.mp-marks li { gap: 7px; }
.mp-give { position: static; padding: 20px 18px 18px; border-radius: var(--r-lg); }
.mp-card__h { padding: 15px 18px 13px; }
.mp-who__l, .mp-feed__l { padding: 6px; }
.mp-g { gap: 10px; padding: 9px 10px; }
.mp-empty { padding: 24px 20px; }
.mp-how__l { grid-template-columns: minmax(0, 1fr); }
.mp-how__l li { padding: 18px; }
}
@media (max-width: 380px) {
.mp-marks small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.mp.is-rippling .mp-ripple { animation: none; }
.mp-step__b, .mp-more summary svg { transition: none; }
}
.cl { --c: var(--acc); --stem: rgba(196, 232, 222, 0.16); --pit: #0a1014; display: flex; flex-direction: column; gap: 52px; }
.cl-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cl-lab { margin: 0; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cl-fine { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.cl-fine b { font-weight: 600; color: var(--soft); }
.cl a:not([class]) { color: var(--hi); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acc) 60%, transparent); text-underline-offset: 3px; transition: color 0.15s; }
.cl a:not([class]):hover { color: var(--acc); }
.cl-mark { width: 68%; height: 68%; color: var(--c); stroke-width: 1.7; }
.cl-disc { display: inline-grid; flex: none; place-items: center; width: 60px; height: 60px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 50%; background: radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--c) 22%, var(--pit)), var(--pit) 74%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 26px -16px #000; }
.cl-disc--lg { width: 58px; height: 58px; }
.cl-tag { display: inline-block; padding: 0 10px; border-radius: 999px; background: var(--c); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--c) 70%, transparent); color: var(--ink); font: 700 10px/20px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.cl-count { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 28px; margin-left: auto; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--soft); white-space: nowrap; }
.cl-count svg { width: 13px; height: 13px; color: var(--mut); }
.cl-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.6fr); align-items: center; gap: 30px clamp(26px, 4vw, 68px); padding: clamp(22px, 2.7vw, 40px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e2); }
.cl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(600px 380px at 5% 6%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), radial-gradient(760px 320px at 100% 112%, rgba(244, 241, 208, 0.06), transparent 70%); }
.cl-hero__me { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cl-hero .ph__kicker { margin: 0; }
.cl-hero__id { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); min-width: 0; }
.cl-hero__id > div { min-width: 0; }
.cl-hero h1 { font: 700 clamp(36px, 4.6vw, 64px)/1 var(--display); letter-spacing: -0.047em; color: var(--c); overflow-wrap: break-word; }
.cl-hero__lede { margin: 14px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.cl-disc--xl { width: clamp(84px, 9.4vw, 128px); height: clamp(84px, 9.4vw, 128px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 9px color-mix(in srgb, var(--c) 7%, transparent), 0 0 80px -8px color-mix(in srgb, var(--c) 50%, transparent); }
.cl-hero--given .cl-disc--xl .cl-mark { width: 44%; height: 44%; stroke-width: 1.5; }
.cl-hero__nums { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.cl-facts { display: flex; flex-wrap: wrap; gap: 16px 0; margin: 0; }
.cl-facts div { display: flex; flex-direction: column-reverse; gap: 7px; padding: 0 24px; border-left: 1px solid var(--line); }
.cl-facts div:first-child { padding-left: 0; border-left: 0; }
.cl-facts dt { font-size: 12px; color: var(--mut); white-space: nowrap; }
.cl-facts dd { margin: 0; font: 650 21px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--hi); white-space: nowrap; }
.cl-next { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px 26px; border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line2)); border-radius: var(--r-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 6%, transparent), transparent 46%), rgba(4, 8, 10, 0.55); box-shadow: var(--e1); }
.cl-next__n { display: flex; align-items: center; gap: 14px; margin: 0; }
.cl-next__n .cl-disc { width: 54px; height: 54px; }
.cl-next__n b { font: 700 27px/1.1 var(--display); letter-spacing: -0.037em; color: var(--c); }
.cl-next__t { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--hi); text-wrap: pretty; }
.cl-next__to { margin: 4px 0 -6px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.cl-next__f { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.cl-next__f svg { width: 14px; height: 14px; margin-top: 2px; }
.cl-next--warn { border-color: rgba(244, 222, 140, 0.34); }
.cl-next--warn .cl-lab { color: var(--amber); }
.cl-next--ok .cl-lab, .cl-next--top .cl-lab { color: var(--c); }
.cl-reqs { container-type: inline-size; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cl-req { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 9px 14px; }
.cl-req__m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 14px; min-width: 0; }
.cl-req__l { min-width: 132px; font-size: 13px; color: var(--mut); }
.cl-req__v { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--soft); }
.cl-req__v b { margin-right: 2px; font: 650 17px/1.2 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.cl-req__s { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); white-space: nowrap; }
.cl-req__s svg { width: 13px; height: 13px; stroke-width: 2.4; }
.cl-req.is-met .cl-req__s { font-weight: 600; color: var(--c); }
.cl-bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
.cl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, transparent), var(--c)); transform-origin: 0 50%; animation: cl-grow 0.6s var(--ease) both; }
@container (max-width: 380px) {
.cl-req__l { flex-basis: 100%; min-width: 0; }
}
@keyframes cl-grow { from { transform: scaleX(0); } }
@keyframes cl-rise { from { transform: scaleY(0); } }
@keyframes cl-in { from { opacity: 0; transform: translateY(6px); } }
.cl-perks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cl-perks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 13px; }
.cl-perks li > svg, .cl-dot { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); }
.cl-perks li > svg { padding: 7.5px; }
.cl-perks li > span { display: block; min-width: 0; padding-top: 5px; font-size: 14px; line-height: 1.4; color: var(--soft); }
.cl-perks li:has(small) > span { padding-top: 0; }
.cl-perks b { font-weight: 600; color: var(--hi); }
.cl-perks small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--mut); text-wrap: pretty; }
.cl-dot { display: grid; place-items: center; }
.cl-dot::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.cl-perks em { display: inline-block; margin-left: 5px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c); font: 700 9.5px/17px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.cl-perks li.is-off b { font-weight: 500; color: var(--mut); }
.cl-perks li.is-off > svg { background: rgba(255, 143, 143, 0.09); color: var(--red); }
.cl-sec { min-width: 0; }
.cl-sec__h { display: flex; flex-direction: column; gap: 8px; max-width: 78ch; margin-bottom: 22px; }
.cl-sec__h h2 { font: 700 clamp(22px, 2.1vw, 28px)/1.15 var(--display); letter-spacing: -0.035em; color: var(--hi); }
.cl-sec__h p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.cl-sec__h p.cl-fine { font-size: 12.5px; color: var(--mut); }
.cl-path { --node: 76px; --top: 52px; position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); row-gap: 12px; }
.cl-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cl-st { position: relative; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: var(--top) 8px 26px; border-radius: var(--r-lg); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.18s; }
.cl-st:hover { background: rgba(255, 255, 255, 0.028); }
.cl-st::before, .cl-st::after, .cl-st__leaves { position: absolute; top: calc(var(--top) + var(--node) / 2 - 1.5px); left: calc(50% + var(--node) * 0.58); width: calc(100% - var(--node) * 1.16); height: 3px; border-radius: 3px; pointer-events: none; }
.cl-st::before, .cl-st::after { content: ""; }
.cl-st::before { background: var(--stem); }
.cl-st::after { width: calc((100% - var(--node) * 1.16) * var(--o, 0) / 100); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, transparent), var(--c)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); transform-origin: 0 50%; animation: cl-grow 0.6s var(--ease) both; }
.cl-st:last-of-type::before, .cl-st:last-of-type::after, .cl-st:last-of-type .cl-st__leaves { display: none; }
.cl-st__leaves svg { position: absolute; width: 15px; height: 15px; stroke: none; color: rgba(196, 232, 222, 0.2); }
.cl-st__leaves svg:first-child { bottom: 1px; left: 36%; }
.cl-st__leaves svg:last-child { top: 1px; left: 68%; transform: scaleY(-1); }
.cl-st__leaves svg.is-lit { color: var(--c); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 65%, transparent)); }
.cl-st__node { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: var(--node); height: var(--node); }
.cl-st .cl-disc { width: var(--node); height: var(--node); transition: transform 0.22s var(--ease), box-shadow 0.22s, border-color 0.22s; }
.cl-st:hover .cl-disc { transform: translateY(-3px); }
.cl-st__txt { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.cl-st__txt b { font: 650 18px/1.2 var(--display); letter-spacing: -0.03em; color: var(--c); overflow-wrap: anywhere; }
.cl-st__brief { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--soft); }
.cl-st__n { font-size: 11.5px; color: var(--dim); }
.cl-st .cl-tag { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); }
.cl-pick:checked + .cl-st { background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), color-mix(in srgb, var(--c) 8%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent); }
.cl-pick:checked + .cl-st .cl-st__txt::after { content: ""; position: absolute; bottom: 10px; left: 50%; width: 30px; height: 3px; margin-left: -15px; border-radius: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.cl-pick:focus-visible + .cl-st { outline: 2px solid var(--acc); outline-offset: 2px; }
.cl-st--ahead .cl-disc { border-color: var(--line2); background: var(--pit); }
.cl-st--ahead .cl-mark { opacity: 0.6; }
.cl-st--ahead .cl-st__txt b { color: color-mix(in srgb, var(--c) 66%, var(--soft)); }
.cl-st--passed .cl-disc { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.cl-st--passed .cl-st__node::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304110c' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 3px var(--bg); }
.cl-st--here .cl-disc, .cl-st--mine .cl-disc, .cl-st--back .cl-disc { transform: scale(1.16); border-color: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 7px color-mix(in srgb, var(--c) 10%, transparent), 0 0 54px -4px color-mix(in srgb, var(--c) 62%, transparent); }
.cl-st--here:hover .cl-disc, .cl-st--mine:hover .cl-disc, .cl-st--back:hover .cl-disc { transform: scale(1.16) translateY(-2px); }
.cl-st--mine .cl-disc, .cl-st--back .cl-disc { border-style: dashed; }
.cl-st--mine .cl-tag, .cl-st--back .cl-tag { background: var(--pit); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 65%, transparent); color: var(--c); }
.cl-pane, .cl-card, .cl-wilt { container-type: inline-size; padding: 26px 28px 28px; border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line)); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.cl-pane { grid-row: 2; grid-column: 1 / -1; display: none; }
.cl-pick:checked + .cl-st + .cl-pane { display: block; animation: cl-in 0.28s var(--ease); }
.cl-card__h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cl-card__h > div { min-width: 0; }
.cl-card__h h3, .cl-card__h h2 { font: 700 25px/1.1 var(--display); letter-spacing: -0.037em; color: var(--c); }
.cl-card__h p { margin: 6px 0 0; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.cl-card__h .cl-tag { margin-left: 4px; }
.cl-cols { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 30px clamp(28px, 5cqw, 72px); }
.cl-cols > div { min-width: 0; }
.cl-cols .cl-lab, .cl-wilt__cols .cl-lab { margin-bottom: 16px; }
.cl-note { margin: 0; padding: 12px 15px; border-radius: var(--r); background: rgba(255, 255, 255, 0.035); font-size: 13.5px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.cl-reqs + .cl-note { margin-top: 22px; }
.cl-note.is-met { background: color-mix(in srgb, var(--c) 8%, transparent); color: var(--c); }
@container (max-width: 580px) {
.cl-cols { grid-template-columns: minmax(0, 1fr); }
}
.cl-branch { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.cl-card--here { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: var(--e2), 0 0 60px -30px var(--c); }
.cl-two { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); align-items: start; gap: 44px clamp(24px, 3vw, 44px); }
.cl-two > :only-child { grid-column: 1 / -1; }
.cl-wilt { display: flex; flex-direction: column; gap: 20px; }
.cl-wilt .cl-card__h { margin-bottom: 0; }
.cl-wilt.is-mine { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: var(--e2), 0 0 60px -30px var(--c); }
.cl-wilt__p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.cl-wilt__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
.cl-wilt .cl-perks li:not(.is-off) > svg { background: rgba(124, 245, 196, 0.1); color: var(--acc); }
@container (max-width: 520px) {
.cl-wilt__cols { grid-template-columns: minmax(0, 1fr); }
}
.cl-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: cl-step; }
.cl-steps li { position: relative; min-height: 30px; padding: 4px 0 0 43px; font-size: 14px; line-height: 1.5; color: var(--soft); counter-increment: cl-step; text-wrap: pretty; }
.cl-steps li::before { content: counter(cl-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgba(124, 245, 196, 0.1); color: var(--acc); font: 650 13px/1 var(--display); }
.cl-you { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 13px 15px; border-radius: var(--r); background: rgba(255, 255, 255, 0.04); font-size: 13.5px; line-height: 1.5; color: var(--hi); }
.cl-you svg { width: 15px; height: 15px; margin-top: 2.5px; color: var(--mut); }
.cl-given { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cl-g { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 4px 14px; padding: 16px 18px 15px; border: 1px solid var(--line); border-radius: var(--r-m); background: rgba(255, 255, 255, 0.016); box-shadow: var(--e1); }
.cl-g__i { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--c); }
.cl-g__i svg { width: 17px; height: 17px; }
.cl-g__t { min-width: 0; }
.cl-g h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 650 15.5px/1.25 var(--display); letter-spacing: -0.022em; color: var(--c); }
.cl-g p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.cl-g__n { grid-column: 2; margin-top: 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--dim); }
.cl-g.is-mine { border-color: color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 5%, transparent); }
.cl-print { padding-top: 26px; border-top: 1px solid var(--line); }
.cl-print ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 36px; margin: 0; padding: 0; list-style: none; }
.cl-print li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.cl-print li svg { width: 15px; height: 15px; margin-top: 2.5px; color: var(--dim); }
@media (max-width: 1240px) {
.cl-path { --node: 68px; }
.cl-facts div { padding: 0 18px; }
.cl-facts dd { font-size: 19px; }
.cl-print ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
.cl-hero { grid-template-columns: minmax(0, 1fr); }
.cl-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.cl { gap: 40px; }
.cl-hero { padding: 20px 18px 22px; border-radius: 24px; }
.cl-hero__id { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px 16px; }
.cl-hero__id > div { display: contents; }
.cl-hero h1 { font-size: clamp(27px, 8.2vw, 34px); }
.cl-hero__lede { grid-column: 1 / -1; margin: 0; }
.cl-disc--xl { width: 64px; height: 64px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 6px color-mix(in srgb, var(--c) 7%, transparent), 0 0 46px -8px color-mix(in srgb, var(--c) 50%, transparent); }
.cl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.cl-facts div { padding: 0; border: 0; }
.cl-next { padding: 20px 18px; }
.cl-pane, .cl-card, .cl-wilt { padding: 20px 18px 22px; }
.cl-print ul { grid-template-columns: minmax(0, 1fr); }
.cl-path { --node: 46px; --x: 29px; --in: 52px; display: block; }
.cl-st { flex-direction: row; gap: 16px; padding: 13px 14px 13px 6px; text-align: left; }
.cl-st:hover .cl-disc { transform: none; }
.cl-st__txt { align-items: flex-start; }
.cl-st .cl-tag { position: static; transform: none; margin-bottom: 3px; }
.cl-st__leaves { display: none; }
.cl-st::before, .cl-st::after { top: 0; left: calc(var(--x) - 1.5px); width: 3px; border-radius: 0; }
.cl-st::after { width: 3px; }
.cl-st::before { height: 100%; background: var(--stem); }
.cl-st:first-of-type::before { top: 50%; height: 50%; }
.cl-st:last-of-type::before { display: block; height: 50%; }
.cl-st::after { display: none; height: calc(50% + 50% * var(--o, 0) / 100); background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); transform-origin: 50% 0; animation-name: cl-rise; }
.cl-st--passed::after, .cl-st--here::after, .cl-st--mine::after { display: block; }
.cl-st:first-of-type::after { top: 50%; height: calc(50% * var(--o, 0) / 100); }
.cl-st:last-of-type::after { height: 50%; }
.cl-pick:checked + .cl-st .cl-st__txt::after { top: 50%; bottom: auto; left: auto; right: 12px; width: 3px; height: 26px; margin: -13px 0 0; }
.cl-st--here .cl-disc, .cl-st--mine .cl-disc, .cl-st--back .cl-disc, .cl-st--here:hover .cl-disc, .cl-st--mine:hover .cl-disc, .cl-st--back:hover .cl-disc { transform: scale(1.12); }
.cl-pane { position: relative; margin: 4px 0 12px var(--in); }
.cl-pane::before { content: ""; position: absolute; top: -5px; bottom: -13px; left: calc(var(--x) - 2.5px - var(--in)); width: 3px; background: var(--stem); }
.cl-st.is-thru + .cl-pane::before { background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.cl-pane:last-of-type::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cl-bar i, .cl-st::after, .cl-pick:checked + .cl-st + .cl-pane { animation: none; }
.cl-st .cl-disc { transition: none; }
}
.bb { --bb-block: 0.45em; font-size: var(--bb-size, 14.5px); line-height: var(--bb-lh, 1.68); color: var(--bb-ink, color-mix(in srgb, var(--text) 80%, var(--mut))); overflow-wrap: anywhere; text-wrap: pretty; font-feature-settings: normal; }
.bb:has(> .bb-gap), .bb:has(> h2), .bb:has(> .bb-lede) { --bb-block: 1em; }
.bb > :first-child { margin-top: 0; }
.bb > :last-child:not(h2, h3, .bb-h, .bb-lede) { margin-bottom: 0; }
.bb b, .bb strong { font-weight: 650; color: var(--hi); }
.bb u { text-decoration-color: var(--line3); text-underline-offset: 3px; }
.bb s { color: var(--mut); }
.bb a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--acc) 42%, transparent); transition: color 0.15s, text-decoration-color 0.15s; }
.bb a:hover { color: var(--acc-hi); text-decoration-color: currentColor; }
.bb a b, .bb a strong { color: inherit; }
.bb a[target="_blank"]::after { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.22em; background: currentColor; opacity: 0.7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.5h7v7M10.5 1.5l-9 9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 1.5h7v7M10.5 1.5l-9 9'/%3E%3C/svg%3E") center / contain no-repeat; }
.bb a:has(> img)::after { content: none; }
.bb a:has(> img) { text-decoration: none; }
.bb a[href^="/users/"] { padding: 0.05em 0.38em; border-radius: 6px; background: var(--acc-soft); font-weight: 600; text-decoration: none; }
.bb a[href^="/users/"]:hover { background: rgba(124, 245, 196, 0.2); }
.bb h2, .bb h3, .bb .bb-h { margin: 1.7em 0 0.5em; font-family: var(--display); font-weight: 650; line-height: 1.2; letter-spacing: -0.028em; color: var(--hi); text-wrap: balance; }
.bb h2, .bb .bb-h1 { font-size: 1.6em; }
.bb .bb-h2 { font-size: 1.36em; }
.bb h3, .bb .bb-h3 { font-size: 1.14em; letter-spacing: -0.02em; }
.bb .bb-h4 { font: 650 0.78em/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.bb .bb-h { margin: calc(var(--bb-block) + 0.1em) 0 0.3em; }
.bb h2 + h3 { margin-top: 0.9em; }
.bb .bb-gap { display: block; height: 0.95em; }
.bb .bb-lede { margin: 0 0 1.5em; font-size: 1.2em; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.bb .bb-center { text-align: center; }
.bb .bb-right { text-align: right; }
.bb .bb-left { text-align: left; }
.bb .bb-list { margin: 0.55em 0 0.9em; padding-left: 1.55em; }
.bb .bb-list li { margin: 0.34em 0; padding-left: 0.2em; }
.bb .bb-list .bb-list { margin: 0.3em 0; }
.bb ul.bb-list { list-style: none; padding-left: 1.4em; }
.bb ul.bb-list > li { position: relative; }
.bb ul.bb-list > li::before { content: ""; position: absolute; left: -1.02em; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); opacity: 0.8; }
.bb ol.bb-list { list-style: decimal; }
.bb ol.bb-list > li::marker { font-size: 0.9em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mut); }
.bb .bb-quote { margin: var(--bb-block) 0; padding: 0.7em 1.1em 0.75em 1.1em; border: 0; border-left: 2px solid color-mix(in srgb, var(--lav) 75%, transparent); border-radius: 0 var(--r) var(--r) 0; background: linear-gradient(90deg, rgba(195, 166, 255, 0.085), rgba(195, 166, 255, 0.025) 70%, transparent); color: var(--soft); }
.bb .bb-quote .bb-quote { margin: 0.55em 0; }
.bb code { padding: 0.12em 0.42em; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.055); font: 0.86em/1.4 var(--mono); color: var(--hi); overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bb .bb-code { margin: var(--bb-block) 0; padding: 14px 16px; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: rgba(3, 6, 8, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); font: 12.5px/var(--bb-code-lh, 1.25) var(--mono); color: var(--text); white-space: pre; overflow-wrap: normal; tab-size: 4; scrollbar-width: thin; }
.bb a code { color: inherit; }
.bb .bb-spoiler { margin: var(--bb-block) 0; border: 1px solid var(--line2); border-radius: var(--r); background: rgba(255, 255, 255, 0.02); }
.bb .bb-spoiler > summary { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: inherit; font-size: 12.5px; font-weight: 600; color: var(--soft); cursor: pointer; list-style: none; user-select: none; transition: background-color 0.15s, color 0.15s; }
.bb .bb-spoiler > summary::-webkit-details-marker { display: none; }
.bb .bb-spoiler > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 2px 0 3px; border: solid var(--mut); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform 0.18s var(--ease); }
.bb .bb-spoiler > summary::after { content: "show"; margin-left: auto; font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.bb .bb-spoiler > summary:hover { background: rgba(255, 255, 255, 0.04); color: var(--hi); }
.bb .bb-spoiler[open] { padding: 0 14px 12px; }
.bb .bb-spoiler[open] > summary { margin: 0 -14px 10px; border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.bb .bb-spoiler[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.bb .bb-spoiler[open] > summary::after { content: "hide"; }
.bb .bb-tablewrap { margin: calc(var(--bb-block) * 1.1) 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1); scrollbar-width: thin; }
.bb .bb-table { width: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.5; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.bb .bb-table th { padding: 11px 16px 10px; background: none; font: var(--label); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; white-space: nowrap; color: var(--dim); }
.bb .bb-table td { padding: 10px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--soft); }
.bb .bb-table td:first-child { min-width: 104px; color: var(--hi); }
.bb .bb-table td:first-child code { white-space: nowrap; }
.bb .bb-table tr:hover td { background: rgba(124, 245, 196, 0.03); }
.bb .bb-note { --note: var(--bmoon); position: relative; margin: calc(var(--bb-block) * 1.2) 0; padding: 13px 18px 13px 48px; border: 1px solid color-mix(in srgb, var(--note) 22%, transparent); border-left: 1px solid color-mix(in srgb, var(--note) 22%, transparent); border-radius: var(--r-m); background: color-mix(in srgb, var(--note) 6%, transparent); font-size: 0.92em; line-height: 1.6; color: var(--soft); }
.bb .bb-note::before { content: ""; position: absolute; left: 16px; top: 14px; width: 18px; height: 18px; background: var(--note); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.bb .bb-note--warn { --note: var(--amber); }
.bb .bb-note--warn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17v.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17v.5'/%3E%3C/svg%3E"); }
.bb hr { height: 1px; margin: calc(var(--bb-block) * 1.6) 0; border: 0; background: linear-gradient(90deg, transparent, var(--line3), transparent); }
.bb .bb-img { display: inline-block; max-width: 100%; height: auto; margin: 4px 2px; border-radius: 10px; vertical-align: middle; background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 0 1px var(--line), 0 12px 26px -16px rgba(0, 0, 0, 0.85); cursor: zoom-in; transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.bb .bb-img:hover { transform: none; box-shadow: 0 0 0 1px rgba(124, 245, 196, 0.45), 0 16px 32px -16px rgba(0, 0, 0, 0.9); }
.bb .bb-imglink { font: 0.86em var(--mono); }
.kb-doc { --kb-text: 590px; --kb-side: 236px; --kb-gap: 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--kb-text)) minmax(0, 1fr); column-gap: 0; align-items: start; }
.kb-doc > * { grid-column: 2; min-width: 0; }
.kb-doc > .kb-head { grid-column: 2 / -1; width: calc(var(--kb-text) + var(--kb-gap) + var(--kb-side)); max-width: 100%; }
.kb-doc--art > .kb-head { grid-column: 2; width: auto; }
.kb-head { position: relative; isolation: isolate; margin: 14px 0 36px; padding: 0 0 28px; }
.kb-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 30%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.kb-head .mb-deco { width: min(50%, 420px); }
.kb-head .mb-deco .moon { right: 3%; bottom: -214px; width: 310px; height: 310px; }
.kb-head__k { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 14px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.kb-head__k::before { content: ""; width: 20px; height: 1px; background: var(--acc); opacity: 0.6; }
.kb-head__k a { color: var(--acc); transition: color 0.15s; }
.kb-head__k a:hover { color: var(--hi); }
.kb-head__k i { font-style: normal; color: var(--dim); }
.kb-head__k span { color: var(--mut); }
.kb-head h1 { max-width: 20ch; font: 700 clamp(32px, 4.2vw, 50px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--hi); text-wrap: balance; overflow-wrap: anywhere; }
.kb-head__m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 18px 0 0; font-size: 13px; color: var(--mut); }
.kb-head__m > span { display: inline-flex; align-items: center; gap: 7px; }
.kb-head__m svg { width: 14px; height: 14px; color: var(--dim); }
.kb-head__m time { color: var(--soft); }
.kb-head__m .btn { margin-left: 4px; }
.kb-doc__x { --bb-size: 16.5px; --bb-lh: 1.75; --bb-code-lh: 1.6; }
.kb-doc--page { --kb-text: 1100px; --kb-gap: 96px; }
.kb-doc--page .kb-doc__x { --bb-size: 18px; --bb-lh: 1.95; --bb-block: 1.4em; }
.kb-doc--page .kb-doc__x .bb-gap { height: 1.6em; }
.kb-doc--page .kb-doc__x .bb-lede { margin-bottom: 2.4em; line-height: 1.9; font-size: 1.3em; }
.kb-doc--page .kb-doc__x h2 { margin-top: 3.5em; margin-bottom: 1em; }
.kb-doc--page .kb-doc__x h3 { margin-top: 3em; margin-bottom: 1em; line-height: 1.4; }
.kb-doc--page .kb-doc__x h3 + .bb-gap { height: 0.5em; }
.kb-doc--page .kb-doc__x p { margin-bottom: 1.4em; }
.kb-doc--page .kb-doc__x ol.bb-list { margin: 1.6em 0; }
.kb-doc--page .kb-doc__x ul.bb-list { margin: 1.6em 0; }
.kb-doc--page .kb-doc__x .bb-list li { margin: 0.6em 0; }
.kb-doc--page .kb-doc__x .bb-note { margin: 2em 0; }
.kb-doc--page .kb-doc__x .bb-code { margin: 2em 0; }
.kb-doc--page .kb-doc__x .bb-quote { margin: 2em 0; }
.kb-doc--page .kb-doc__x .bb-spoiler { margin: 2em 0; }
.kb-doc__x h2 { margin-top: 2.2em; scroll-margin-top: 92px; }
.kb-doc__x h3 { margin-top: 1.9em; scroll-margin-top: 92px; }
.kb-doc__x .bb-lede + h2 { margin-top: 1.5em; }
.kb-doc__x:not(.kb-doc__x--post) .bb-code { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kb-side { grid-column: 3; grid-row: 2 / span 2; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 30px; width: var(--kb-side); max-height: calc(100vh - 116px); margin-left: var(--kb-gap); overflow-y: auto; scrollbar-width: none; font-size: 13px; }
.kb-side::-webkit-scrollbar { display: none; }
.kb-nav h2 { margin: 0 0 10px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kb-nav ol, .kb-nav ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line2); }
.kb-nav a { display: block; margin-left: -1px; padding: 5px 0 5px 15px; border-left: 1px solid transparent; line-height: 1.4; color: var(--mut); text-wrap: pretty; transition: color 0.15s, border-color 0.15s; }
.kb-nav a:hover { color: var(--hi); border-left-color: var(--line3); }
.kb-nav a.is-on { border-left-color: var(--acc); color: var(--hi); font-weight: 550; }
.kb-ask { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.kb-ask a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s; }
.kb-ask a:hover { color: var(--acc); text-decoration-color: currentColor; }
.kb-turn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.kb-turn__a { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1); transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease); }
.kb-turn__a:hover { border-color: rgba(124, 245, 196, 0.38); background: var(--card-hi); }
.kb-turn__a span { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.kb-turn__a small { font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kb-turn__a b { overflow: hidden; font: 600 15px/1.3 var(--display); letter-spacing: -0.015em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.kb-turn__a svg { flex: none; width: 16px; height: 16px; color: var(--mut); transition: color 0.18s, transform 0.18s var(--ease); }
.kb-turn__a--prev svg { transform: rotate(180deg); }
.kb-turn__a--next { grid-column: 2; text-align: right; }
.kb-turn__a:hover svg { color: var(--acc); transform: translateX(3px); }
.kb-turn__a--prev:hover svg { transform: rotate(180deg) translateX(3px); }
.kb-doc--rules .kb-doc__x h2 { position: relative; }
.kb-secn { position: absolute; right: calc(100% + 22px); top: 0.02em; font: 650 1em/1.2 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--acc); opacity: 0.85; }
.kb-doc--rules .kb-doc__x ol.bb-list { margin: 0.4em 0 0; padding: 0; list-style: none; }
.kb-doc--rules .kb-doc__x ol.bb-list > li { position: relative; margin: 0; padding: 24px 24px 24px 90px; border-top: 1px solid var(--line); border-radius: 0; scroll-margin-top: 110px; transition: background-color 0.2s; }
.kb-doc--rules .kb-doc__x ol.bb-list > li:first-child { border-top: 0; }
.kb-doc--rules .kb-doc__x ol.bb-list > li:hover { background: rgba(255, 255, 255, 0.022); }
.bb .kb-cite { position: absolute; left: 14px; top: 19px; min-width: 38px; font-size: 0.84em; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: var(--mut); text-decoration: none; }
.bb .kb-cite:hover, .kb-doc--rules li:hover > .kb-cite { color: var(--acc); }
.kb-doc--rules .kb-doc__x ol.bb-list > li:is(:target, .is-cited) { border-top-color: transparent; border-radius: var(--r); background: var(--acc-soft); box-shadow: inset 2px 0 0 var(--acc); }
.kb-doc--rules .kb-doc__x ol.bb-list > li:is(:target, .is-cited) + li { border-top-color: transparent; }
.kb-doc--rules .kb-doc__x ol.bb-list > li:is(:target, .is-cited) > .kb-cite { color: var(--acc); }
.kb-doc--rules .kb-nav--toc ol { counter-reset: kbsec; }
.kb-doc--rules .kb-nav--toc a { position: relative; padding-left: 36px; counter-increment: kbsec; }
.kb-doc--rules .kb-nav--toc a::before { content: counter(kbsec); position: absolute; left: 15px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--dim); }
.kb-doc--rules .kb-nav--toc a.is-on::before { color: var(--acc); }
.kb-page { display: block; }
.kb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kb-link, .ph__sub .kb-link { color: var(--hi); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; }
.kb-link:hover { color: var(--acc); text-decoration-color: currentColor; }
.kb-wiki { columns: 2 430px; column-gap: 22px; }
.kb-shelf { break-inside: avoid; margin: 0 0 22px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.kb-shelf__h { display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 12px; }
.kb-shelf__n { align-self: center; display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.22); font: 650 12px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--acc); }
.kb-shelf__h h2 { font: 650 19px/1.2 var(--display); letter-spacing: -0.028em; color: var(--hi); }
.kb-shelf__h small { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.kb-shelf__l { margin: 0; padding: 0; list-style: none; }
.kb-shelf__l li + li { border-top: 1px solid var(--line); }
.kb-shelf__l a { display: flex; align-items: center; gap: 16px; padding: 13px 14px 14px 18px; border-radius: var(--r-m); transition: background-color 0.15s; }
.kb-shelf__l li:hover, .kb-shelf__l li:hover + li { border-top-color: transparent; }
.kb-shelf__l a:hover { background: rgba(255, 255, 255, 0.045); }
.kb-shelf__t { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.kb-shelf__t b { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.008em; color: var(--hi); transition: color 0.15s; }
.kb-shelf__t span { font-size: 13.5px; line-height: 1.5; color: var(--mut); text-wrap: pretty; }
.kb-shelf__l svg { flex: none; width: 15px; height: 15px; color: var(--dim); opacity: 0.55; transition: transform 0.2s var(--ease), color 0.15s, opacity 0.15s; }
.kb-shelf__l a:hover b { color: var(--acc-hi); }
.kb-shelf__l a:hover svg { color: var(--acc); opacity: 1; transform: translateX(3px); }
.kb-after { margin: 6px 2px 0; font-size: 13.5px; color: var(--mut); }
.kb-after a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s; }
.kb-after a:hover { color: var(--acc); }
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kb-card { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 168px; padding: 22px 24px 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.kb-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 208, 0.1), transparent); opacity: 0; transition: opacity 0.3s; }
.kb-card:hover { border-color: rgba(124, 245, 196, 0.36); background: var(--card-hi); transform: translateY(-2px); }
.kb-card:hover::before { opacity: 1; }
.kb-card b { font: 650 19px/1.2 var(--display); letter-spacing: -0.028em; color: var(--hi); }
.kb-card > span { font-size: 13.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.kb-card em { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--soft); transition: color 0.15s; }
.kb-card em svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.kb-card:hover em { color: var(--acc); }
.kb-card:hover em svg { transform: translateX(3px); }
.kb-card--door { border-style: dashed; border-color: var(--line2); background: none; box-shadow: none; }
.kb-team { margin: 0 0 34px; }
.kb-team__h { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.kb-team__h::before { content: ""; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--team, var(--acc)); box-shadow: 0 0 12px var(--team, var(--acc)); }
.kb-team__h h2 { font: 650 19px/1.2 var(--display); letter-spacing: -0.028em; color: var(--hi); }
.kb-team__h small { font-size: 12.5px; color: var(--dim); }
.kb-team__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
.kb-who { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 13px 16px 13px 13px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1); transition: border-color 0.18s, background 0.18s; }
.kb-who:hover { border-color: color-mix(in srgb, var(--team, var(--acc)) 45%, transparent); background: var(--card-hi); }
.kb-who__av { position: relative; flex: none; }
.kb-who__av .av { display: grid; width: 46px; height: 46px; font-size: 17px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px color-mix(in srgb, var(--team, var(--acc)) 55%, transparent); }
.kb-who.is-on .kb-who__av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--bg); }
.kb-who__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-who__t b { overflow: hidden; font-size: 14.5px; font-weight: 650; color: var(--team, var(--hi)); text-overflow: ellipsis; white-space: nowrap; }
.kb-who__t small { overflow: hidden; font-size: 12.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.kb-who__t small i { font-style: normal; color: var(--green); }
.kb-bl code { padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.05); font: 12.5px var(--mono); color: var(--hi); }
.kb-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px 60px; border: 1px dashed var(--line2); border-radius: var(--r-xl); text-align: center; }
.kb-none > svg { width: 30px; height: 30px; margin-bottom: 8px; color: var(--mut); stroke-width: 1.5; }
.kb-none h2 { font: 650 21px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.kb-none p { max-width: 52ch; margin: 0; font-size: 14px; line-height: 1.55; color: var(--mut); }
.kb-none .btn { margin-top: 12px; }
.kb-news { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.kb-art { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 0 20px; align-content: start; padding: 24px 26px 24px 24px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); transition: border-color 0.2s, background 0.2s; }
.kb-art:hover { border-color: rgba(124, 245, 196, 0.32); background: var(--card-hi); }
.kb-art__d { margin: 2px 0 0; }
.kb-art__d time { display: flex; flex-direction: column; align-items: flex-start; }
.kb-art__d b { font: 650 28px/1 var(--display); letter-spacing: -0.04em; font-feature-settings: "tnum" 0; color: var(--hi); }
.kb-art__d span { margin-top: 6px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.kb-art__d small { margin-top: 3px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dim); }
.kb-art__t { display: flex; flex-direction: column; min-width: 0; }
.kb-art h2 { font: 650 20px/1.22 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.kb-art h2 a { color: var(--hi); transition: color 0.15s; }
.kb-art h2 a::after { content: ""; position: absolute; inset: 0; }
.kb-art:hover h2 a { color: var(--acc-hi); }
.kb-art__x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; margin: 9px 0 0; overflow: hidden; font-size: 14px; line-height: 1.6; color: var(--soft); text-wrap: pretty; }
.kb-art__m, .kb-tk__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 18px; overflow: hidden; font-size: 12.5px; color: var(--mut); }
.kb-art__m > *, .kb-tk__meta > * { position: relative; }
.kb-art__m > *::before, .kb-tk__meta > *::before { content: "·"; position: absolute; left: -11px; color: var(--dim); }
.kb-art__m { margin-top: auto; padding-top: 14px; }
.kb-art__m b { font-weight: 600; color: var(--soft); }
.kb-art__img { grid-column: 1 / -1; grid-row: 1; display: block; margin: -24px -26px 20px -24px; aspect-ratio: 16 / 8; overflow: hidden; background: var(--surface2); }
.kb-art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.kb-art:hover .kb-art__img img { transform: scale(1.03); }
.kb-art--lead { grid-column: 1 / -1; grid-template-columns: 76px minmax(0, 1fr); padding: 34px 38px 32px 34px; }
.kb-art--lead::before { content: ""; position: absolute; z-index: 0; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 208, 0.1), transparent); pointer-events: none; }
.kb-art--lead > * { position: relative; }
.kb-art--lead .kb-art__d b { font-size: 42px; }
.kb-art--lead h2 { max-width: 26ch; font-size: clamp(26px, 2.7vw, 36px); line-height: 1.12; letter-spacing: -0.04em; }
.kb-art--lead .kb-art__x { max-width: 72ch; margin-top: 14px; font-size: 16px; -webkit-line-clamp: 3; }
.kb-art--lead .kb-art__m { padding-top: 20px; }
.kb-art--lead.has-img { grid-template-columns: 76px minmax(0, 1fr) minmax(0, 0.8fr); }
.kb-art--lead .kb-art__img { grid-column: 3; grid-row: 1; align-self: stretch; margin: -34px -38px -32px 20px; aspect-ratio: auto; min-height: 220px; }
.kb-head__m > .kb-by { gap: 9px; }
.kb-by .av { width: 26px; height: 26px; font-size: 11px; }
.kb-by a, .kb-by b { font-weight: 650; color: var(--hi); }
.kb-by a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kb-head__m > a { display: inline-flex; align-items: center; gap: 7px; color: var(--mut); transition: color 0.15s; }
.kb-head__m > a:not(.btn):hover { color: var(--acc); }
.kb-art-pic { display: block; width: 100%; max-height: 420px; margin: 0 0 32px; border-radius: var(--r-lg); object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 26px 50px -30px rgba(0, 0, 0, 0.9); }
.kb-cmts { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.kb-cmts__h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; }
.kb-cmts__h h2 { font: 650 21px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.kb-cmts__h span { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--dim); }
.kb-cmts .alert { margin: 0 0 16px; }
.kb-cmt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 92px; }
.kb-cmts__h + .kb-cmt, .kb-cmts .alert + .kb-cmt { border-top: 0; padding-top: 4px; }
.kb-cmt > .av { display: grid; width: 34px; height: 34px; font-size: 13px; }
.kb-cmt__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 5px; font-size: 13px; }
.kb-cmt__h a, .kb-cmt__h > b { font-weight: 650; color: var(--hi); }
.kb-cmt__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kb-cmt__h > span { color: var(--dim); }
.kb-cmt__del { margin: 0 0 0 auto; }
.kb-cmt__del button { padding: 2px 8px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12px; color: var(--dim); cursor: pointer; opacity: 0; transition: color 0.15s, background-color 0.15s, opacity 0.15s; }
.kb-cmt:hover .kb-cmt__del button, .kb-cmt__del button:focus-visible { opacity: 1; }
.kb-cmt__del button:hover { background: rgba(255, 143, 143, 0.1); color: var(--red); }
.kb-cmt:target .kb-cmt__b { margin: -8px -12px; padding: 8px 12px; border-radius: var(--r); background: var(--acc-soft); }
.kb-cmts__none { margin: 4px 0 18px; font-size: 14px; color: var(--mut); }
.kb-cmtf { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.kb-cmtf__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
@media (hover: none) {
.kb-cmt__del button { opacity: 1; }
}
@media (max-width: 1360px) {
.kb-doc { --kb-gap: 52px; grid-template-columns: minmax(0, var(--kb-text)) auto; justify-content: center; }
.kb-doc > *, .kb-doc--art > .kb-head { grid-column: 1; }
.kb-doc > .kb-head { grid-column: 1 / -1; width: auto; }
.kb-doc > .kb-side { grid-column: 2; }
.kb-secn { position: static; margin-right: 0.45em; }
}
@media (max-width: 940px) {
.kb-doc { display: flex; flex-direction: column; align-items: stretch; }
.kb-head { margin: 6px 0 22px; padding-bottom: 22px; }
.kb-side { display: contents; }
.kb-nav--toc { order: -1; margin: -8px calc(var(--pad) * -1) 18px; padding: 8px 0; }
.kb-nav--toc h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.kb-nav--toc ol { position: relative; display: flex; gap: 6px; padding: 0 var(--pad); overflow-x: auto; border: 0; scrollbar-width: none; }
.kb-nav--toc ol::-webkit-scrollbar { display: none; }
.kb-nav--toc li { flex: none; }
.kb-nav--toc a { margin: 0; padding: 6px 13px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 12.5px; white-space: nowrap; }
.kb-nav--toc a:hover { border-color: var(--line3); }
.kb-nav--toc a.is-on { border-color: rgba(124, 245, 196, 0.5); background: var(--acc-soft); }
.kb-doc--rules .kb-nav--toc a { padding-left: 13px; }
.kb-doc--rules .kb-nav--toc a::before { position: static; margin-right: 7px; }
.kb-doc > .kb-head { order: -2; }
.kb-nav--more { order: 3; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.kb-nav--more a { padding: 8px 0 8px 16px; }
.kb-turn { order: 2; margin-top: 44px; }
.kb-ask { order: 4; margin-top: 22px; }
.kb-cmts { order: 5; }
.kb-doc__x { --bb-size: 16px; --bb-lh: 1.72; }
.kb-doc--page .kb-doc__x { --bb-size: 16.5px; --bb-lh: 1.8; }
.kb-doc--rules .kb-doc__x ol.bb-list > li { padding: 16px 8px 16px 50px; }
.bb .kb-cite { left: 4px; top: 16px; }
.kb-news { grid-template-columns: minmax(0, 1fr); }
.kb-art--lead, .kb-art--lead.has-img { grid-template-columns: 56px minmax(0, 1fr); padding: 24px 22px; }
.kb-art--lead .kb-art__d b { font-size: 32px; }
.kb-art--lead .kb-art__img { grid-column: 1 / -1; grid-row: 1; margin: -24px -22px 20px; aspect-ratio: 16 / 8; min-height: 0; }
}
@media (max-width: 640px) {
.kb-nav--toc { position: sticky; top: 0; z-index: 5; background: linear-gradient(180deg, rgba(6, 9, 12, 0.96) 74%, rgba(6, 9, 12, 0)); }
.kb-doc__x h2, .kb-doc__x h3 { scroll-margin-top: 60px; }
.kb-turn { grid-template-columns: 1fr; }
.kb-turn__a--next { grid-column: 1; }
.kb-turn > span { display: none; }
.kb-shelf__l a { padding: 12px 10px 13px 12px; }
.kb-shelf__h { padding: 14px 12px 10px; }
.kb-card { min-height: 0; padding: 18px 20px; }
.kb-team__l { grid-template-columns: 1fr; }
}
.sx-page { --sx-a: #2fa880; --sx-a-top: #3bbd92; --sx-a-hi: var(--acc); --sx-b: #8d78dc; --sx-track: rgba(255, 255, 255, 0.055); position: relative; }
.sx-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 30px; padding: 0; }
.sx-kpi > div { display: flex; flex-direction: column; min-width: 0; padding: 2px 22px 4px; border-left: 1px solid var(--line); }
.sx-kpi > div:first-child { padding-left: 0; border-left: 0; }
.sx-kpi dt { order: -1; margin-bottom: 10px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.sx-kpi dd { margin: 0; overflow: hidden; font: 650 clamp(24px, 2.35vw, 34px)/1.05 var(--display); letter-spacing: -0.04em; font-feature-settings: "tnum" 0; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.sx-kpi dd.sx-kpi__s { margin-top: 8px; font: 12.5px/1.4 var(--sans); letter-spacing: 0; font-feature-settings: normal; color: var(--mut); }
.sx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-bottom: 44px; }
.sx-fig { grid-column: span 6; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.sx-fig--wide { grid-column: span 8; }
.sx-fig--wide + .sx-fig { grid-column: span 4; }
@media (max-width: 1380px) {
.sx-fig--wide { grid-column: span 7; }
.sx-fig--wide + .sx-fig { grid-column: span 5; }
}
.sx-fig__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin: 0 0 22px; }
.sx-fig__h > div { min-width: 0; }
.sx-fig__h h2 { font: 650 17px/1.25 var(--display); letter-spacing: -0.022em; color: var(--hi); }
.sx-fig__h p { margin: 4px 0 0; font-size: 13px; color: var(--mut); }
.sx-fig__n { display: flex; flex: none; flex-direction: column; align-items: flex-end; margin: -2px 0 0 !important; text-align: right; }
.sx-fig__n b { font: 650 30px/1 var(--display); letter-spacing: -0.04em; font-feature-settings: "tnum" 0; color: var(--hi); }
.sx-fig__n span { margin-top: 6px; font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.sx-cols { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; height: 232px; padding-bottom: 26px; border-radius: var(--r-s); outline-offset: 6px; }
.sx-cols__y { display: flex; flex-direction: column; justify-content: space-between; min-width: 14px; margin: -7px 0; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 14px; text-align: right; color: var(--dim); }
.sx-cols__y i { font-style: normal; }
.sx-cols__p { position: relative; display: flex; align-items: flex-end; min-width: 0; background: linear-gradient(var(--line), var(--line)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; border-bottom: 1px solid var(--line2); }
.sx-col { position: relative; display: flex; flex: 1; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.sx-col i { display: block; width: calc(100% - 4px); max-width: 20px; min-height: 0; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--sx-a-top), var(--sx-a)); transform-origin: 50% 100%; }
.sx-col.is-zero i { height: 2px !important; border-radius: 1px 1px 0 0; background: rgba(255, 255, 255, 0.14); }
.sx-col:hover i, .sx-col.is-hot i { background: var(--sx-a-hi); }
.sx-col.is-zero:hover i, .sx-col.is-zero.is-hot i { background: var(--mut); }
.sx-col.is-hot::before { content: ""; position: absolute; inset: 0 1px; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.04); }
.sx-col small { position: absolute; top: calc(100% + 9px); left: 50%; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 14px; color: var(--dim); white-space: nowrap; transform: translateX(-50%); }
.sx-col:first-child small { left: 0; transform: none; }
.sx-col:last-child small { right: 0; left: auto; transform: none; }
.sx-part + .sx-part { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.sx-part__k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 0 0 12px; font-size: 13px; color: var(--mut); }
.sx-part__k span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sx-part__k b { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--hi); }
.sx-sw { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--sx-a); }
.sx-sw--b { background: var(--sx-b); }
.sx-seg { display: flex; gap: 2px; height: 8px; }
.sx-seg i { min-width: 4px; border-radius: 4px; background: var(--sx-a); transform-origin: 0 50%; transition: filter 0.15s; }
.sx-seg i.b { flex: 1; background: var(--sx-b); }
.sx-seg i:only-child { flex: 1; width: auto !important; }
.sx-seg i:hover, .sx-seg i.is-hot { filter: brightness(1.25); }
.sx-seg.is-none { border-radius: 4px; background: var(--sx-track); }
.sx-part__n { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.sx-bars { display: grid; gap: 2px; margin: -6px -10px; padding: 0; list-style: none; }
.sx-bars li { display: grid; grid-template-columns: minmax(64px, 104px) minmax(0, 1fr) 52px 132px; gap: 14px; align-items: center; padding: 8px 10px; border-radius: var(--r-s); font-size: 13.5px; transition: background-color 0.15s; }
.sx-bars li:hover, .sx-bars li.is-hot { background: rgba(255, 255, 255, 0.035); }
.sx-bars li > :first-child { overflow: hidden; font-weight: 550; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; }
.sx-bars a { transition: color 0.15s; }
.sx-bars a:hover { color: var(--hi); text-decoration: underline; text-underline-offset: 3px; }
.sx-bars__b { height: 8px; border-radius: 0 4px 4px 0; background: var(--sx-track); }
.sx-bars__b i { display: block; height: 100%; min-width: 3px; border-radius: 0 4px 4px 0; background: var(--sx-a); transform-origin: 0 50%; transition: background-color 0.15s; }
.sx-bars li:hover .sx-bars__b i, .sx-bars li.is-hot .sx-bars__b i { background: var(--sx-a-hi); }
.sx-bars b { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; color: var(--hi); }
.sx-bars small { font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--mut); white-space: nowrap; }
.sx-bars__none { display: block !important; padding: 18px 10px !important; color: var(--mut); }
.sx-tip { position: absolute; z-index: 30; left: 0; top: 0; display: grid; grid-template-columns: auto auto; gap: 1px 7px; align-items: baseline; max-width: 280px; padding: 8px 12px 9px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--e3); pointer-events: none; }
.sx-tip[hidden] { display: none; }
.sx-tip b { font: 650 15px/1.2 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hi); white-space: nowrap; }
.sx-tip span { font-size: 12.5px; color: var(--soft); }
.sx-tip small { grid-column: 1 / -1; overflow: hidden; font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.sx-boards { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 36px; align-items: start; scroll-margin-top: 84px; }
.sx-nav { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; scrollbar-width: none; }
.sx-nav::-webkit-scrollbar { display: none; }
.sx-nav h2 { margin: 0 0 8px 12px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.sx-nav p { display: flex; flex-direction: column; gap: 1px; margin: 0 0 24px; }
.sx-nav a { padding: 7px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.sx-nav a:hover { background: rgba(255, 255, 255, 0.05); color: var(--hi); }
.sx-nav a.is-on { background: linear-gradient(90deg, rgba(124, 245, 196, 0.17), rgba(124, 245, 196, 0.03)); box-shadow: inset 2px 0 0 var(--acc); color: var(--hi); font-weight: 600; }
.sx-board { min-width: 0; }
.sx-board > .sx-fig__h { margin-bottom: 16px; padding: 0 4px 18px; border-bottom: 1px solid var(--line); }
.sx-board > .sx-fig__h h2 { font-size: 22px; letter-spacing: -0.03em; }
.sx-rank { --cols: 1; margin: 0; padding: 0; list-style: none; }
.sx-rank__h, .sx-row { display: grid; grid-template-columns: 34px minmax(0, 1.15fr) minmax(0, 1fr) repeat(var(--cols), 104px); gap: 16px; align-items: center; }
.sx-rank__h { padding: 0 14px 10px; border-bottom: 1px solid var(--line); font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.sx-rank__h span:nth-child(n+3) { text-align: right; }
.sx-rank__h span:nth-child(2) { grid-column: 2 / span 2; }
.sx-rank__h span.is-main { color: var(--mut); }
.sx-row { position: relative; min-height: 60px; padding: 9px 14px; border-radius: var(--r-m); transition: background-color 0.15s; }
.sx-row + .sx-row::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--line); }
.sx-row:hover, .sx-row.is-hot { background: rgba(255, 255, 255, 0.035); }
.sx-row:hover::before, .sx-row:hover + .sx-row::before, .sx-row.is-hot::before, .sx-row.is-hot + .sx-row::before { opacity: 0; }
.sx-row__n { font: 650 14px/1 var(--display); font-variant-numeric: tabular-nums; text-align: center; color: var(--dim); }
.sx-row--top .sx-row__n { font-size: 19px; letter-spacing: -0.03em; color: var(--moon); text-shadow: 0 0 18px rgba(244, 241, 208, 0.35); }
.sx-row__who { display: flex; align-items: center; gap: 13px; min-width: 0; }
.sx-row__who .av { display: grid; flex: none; width: 36px; height: 36px; font-size: 14px; }
.sx-row__who span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sx-row__who b { overflow: hidden; font-size: 14.5px; font-weight: 650; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.sx-row__who small { overflow: hidden; font-size: 12px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.sx-row__who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sx-row__bar { height: 6px; border-radius: 0 3px 3px 0; background: var(--sx-track); }
.sx-row__bar i { display: block; height: 100%; min-width: 3px; border-radius: 0 3px 3px 0; background: var(--sx-a); transform-origin: 0 50%; transition: background-color 0.15s; }
.sx-row:hover .sx-row__bar i, .sx-row.is-hot .sx-row__bar i { background: var(--sx-a-hi); }
.sx-row__v { font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--soft); white-space: nowrap; }
.sx-row__v.is-main { font-size: 14.5px; font-weight: 650; color: var(--hi); }
.sx-row__v.is-zero { color: var(--dim); }
.sx-row--t { grid-template-columns: 34px 40px minmax(0, 1.5fr) minmax(0, 0.8fr) repeat(var(--cols), 104px); min-height: 78px; }
.sx-rank--b:not(.has-bar) .sx-row { grid-template-columns: 34px minmax(0, 1fr) repeat(var(--cols), 104px); }
.sx-rank--b:not(.has-bar) .sx-row--t { grid-template-columns: 34px 40px minmax(0, 1fr) repeat(var(--cols), 104px); }
.sx-rank__h:has(+ .sx-rank--b:not(.has-bar)) { grid-template-columns: 34px minmax(0, 1fr) repeat(var(--cols), 104px); }
.sx-rank__h:has(+ .sx-rank--b:not(.has-bar)) span:nth-child(2) { grid-column: 2; }
.sx-row__art { display: grid; place-items: center; width: 40px; height: 60px; overflow: hidden; border-radius: 6px; background: var(--surface3); box-shadow: 0 0 0 1px var(--line), 0 8px 16px -10px rgba(0, 0, 0, 0.9); color: var(--dim); }
.sx-row__art img { width: 100%; height: 100%; object-fit: cover; }
.sx-row__art svg { width: 18px; height: 18px; }
.sx-row__what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sx-row__what > span { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sx-row__what b { overflow: hidden; font-size: 14.5px; font-weight: 650; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.sx-row__y { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.sx-row__what code { overflow: hidden; font: 11.5px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
a.sx-row__what:hover b { color: var(--acc-hi); }
.sx-rank__none { padding: 36px 14px; font-size: 14px; color: var(--mut); }
.sx-rank__none--card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 24px; border: 1px dashed var(--line2); border-radius: var(--r-xl); text-align: center; }
.sx-rank__none--card b { font: 650 21px/1.2 var(--display); letter-spacing: -0.03em; color: var(--hi); }
.sx-table th[scope=row] { font: 650 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--hi); border-bottom: 1px solid var(--line); padding: 12px 16px; white-space: nowrap; }
.sx-table tbody tr:last-child th { border-bottom: 0; }
.sx-table td.mut { color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
.sx-col i { animation: sx-rise 0.5s var(--ease) backwards; }
.sx-bars__b i, .sx-row__bar i, .sx-seg i { animation: sx-run 0.55s var(--ease) backwards; }
.sx-col:nth-child(n+11) i { animation-delay: 0.04s; }
.sx-col:nth-child(n+21) i { animation-delay: 0.08s; }
}
@keyframes sx-rise { from { transform: scaleY(0); } }
@keyframes sx-run { from { transform: scaleX(0); } }
@media (max-width: 1180px) {
.sx-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
.sx-kpi > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.sx-fig--wide, .sx-fig--wide + .sx-fig { grid-column: span 12; }
.sx-boards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sx-nav { position: static; max-height: none; overflow: visible; }
.sx-nav h2 { margin-left: 2px; }
.sx-nav p { flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.sx-nav a { flex: none; padding: 6px 13px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.sx-nav a.is-on { border-color: rgba(124, 245, 196, 0.5); background: var(--acc-soft); box-shadow: none; }
}
@media (max-width: 760px) {
.sx-fig { grid-column: span 12; }
.sx-nav p { flex-wrap: nowrap; margin: 0 calc(var(--pad) * -1) 14px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.sx-nav p::-webkit-scrollbar { display: none; }
.sx-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-kpi > div:nth-child(n) { padding: 0 16px; border-left: 1px solid var(--line); }
.sx-kpi > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
.sx-fig { padding: 18px 16px 20px; }
.sx-fig__h { flex-wrap: wrap; }
.sx-fig__n { flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
.sx-fig__n b { font-size: 26px; }
.sx-fig--wide .sx-fig__h, .sx-board > .sx-fig__h { flex-direction: column; }
.sx-cols { height: 196px; gap: 0 8px; }
.sx-col i { width: calc(100% - 2px); }
.sx-col:not(:first-child):not(:last-child):not(:nth-child(15)) small { display: none; }
.sx-bars li { grid-template-columns: minmax(56px, 84px) minmax(0, 1fr) auto; row-gap: 2px; }
.sx-bars small { grid-column: 2 / -1; text-align: left; }
.sx-rank__h { display: none; }
.sx-row, .sx-row--t, .sx-rank--b:not(.has-bar) .sx-row, .sx-rank--b:not(.has-bar) .sx-row--t { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; min-height: 0; padding: 12px 6px 13px 40px; }
.sx-row + .sx-row::before { left: 6px; right: 6px; }
.sx-row__n { position: absolute; left: 4px; top: 12px; width: 26px; line-height: 36px; }
.sx-row--t .sx-row__n { line-height: 60px; }
.sx-row__who, .sx-row__what { flex: 1 1 0; }
.sx-row__v.is-main { order: 1; }
.sx-row__bar { order: 2; flex: 0 0 100%; }
.sx-row__v:not(.is-main) { order: 3; font-size: 12.5px; }
.sx-rank--b .sx-row__v:not(.is-main)::after { content: " " attr(data-h); color: var(--mut); text-transform: lowercase; }
}
.kb-flash { margin: 0 0 18px; }
.kb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.kb-tks { margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.kb-tks li + li { border-top: 1px solid var(--line); }
.kb-tks li:hover, .kb-tks li:hover + li { border-top-color: transparent; }
.kb-tk { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 84px 15px; gap: 18px; align-items: center; padding: 15px 16px 15px 18px; border-radius: var(--r-m); transition: background-color 0.15s; }
.kb-tk:hover { background: rgba(255, 255, 255, 0.045); }
.kb-tk.is-new::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--acc); box-shadow: 0 0 10px rgba(124, 245, 196, 0.6); }
.kb-tk__s .pill { white-space: nowrap; }
.kb-tk__m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kb-tk__m b { overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -0.008em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.kb-tk.is-new .kb-tk__m b { font-weight: 700; }
.kb-tk.is-closed .kb-tk__m b { font-weight: 550; color: var(--soft); }
.kb-tk:hover .kb-tk__m b { color: var(--acc-hi); }
.kb-tk__meta > span:first-child { font-variant-numeric: tabular-nums; color: var(--dim); }
.kb-tk__prio { display: inline-flex; align-items: center; white-space: nowrap; }
.kb-tk__prio i { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--prio, var(--dim)); }
.kb-tk__n { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.kb-tk__n svg { width: 14px; height: 14px; color: var(--dim); }
.kb-tk__n b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--soft); }
.kb-tk__age { font-size: 12.5px; text-align: right; color: var(--mut); white-space: nowrap; }
.kb-tk__go { width: 15px; height: 15px; color: var(--dim); opacity: 0.55; transition: transform 0.2s var(--ease), color 0.15s, opacity 0.15s; }
.kb-tk:hover .kb-tk__go { color: var(--acc); opacity: 1; transform: translateX(3px); }
.kb-none--tk > svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: rgba(110, 231, 168, 0.1); color: var(--green); }
.kb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: kbstep; }
.kb-steps li { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 18px 20px 18px 58px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); counter-increment: kbstep; }
.kb-steps li::before { content: counter(kbstep); position: absolute; left: 18px; top: 17px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.22); font: 650 12px/1 var(--display); color: var(--acc); }
.kb-steps b { font-size: 14px; font-weight: 650; color: var(--hi); }
.kb-steps span { font-size: 13px; line-height: 1.5; color: var(--mut); }
.kb-tkh { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin: 4px 0 26px; padding: 0 0 24px; }
.kb-tkh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(124, 245, 196, 0.4), rgba(196, 232, 222, 0.12) 26%, rgba(196, 232, 222, 0.07) 74%, rgba(244, 241, 208, 0.22)); }
.kb-tkh__t { flex: 1 1 420px; min-width: 0; }
.kb-tkh__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 14px; font-size: 12.5px; color: var(--mut); }
.kb-tkh h1 { max-width: 30ch; font: 700 clamp(26px, 3vw, 38px)/1.1 var(--display); letter-spacing: -0.04em; color: var(--hi); text-wrap: balance; overflow-wrap: anywhere; }
.kb-tkh__m { margin: 12px 0 0; font-size: 13.5px; color: var(--mut); }
.kb-tkh__m a { font-weight: 650; color: var(--hi); }
.kb-tkh__m a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kb-tkh__a { display: flex; gap: 8px; }
.kb-tkh__a form { display: inline-flex; margin: 0; }
.kb-tkg { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 36px; align-items: start; }
.kb-thread { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kb-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; align-self: flex-start; max-width: min(100%, 720px); scroll-margin-top: 92px; }
.kb-msg > .av { display: grid; width: 36px; height: 36px; margin-top: 2px; font-size: 14px; }
.kb-msg__b { min-width: 0; padding: 12px 17px 14px; border: 1px solid var(--line); border-radius: 6px 20px 20px 20px; background: var(--card); box-shadow: var(--e1); }
.kb-msg__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 13px; }
.kb-msg__h a, .kb-msg__h > b { font-weight: 650; color: var(--hi); }
.kb-msg__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kb-msg__h > span:not(.pill) { color: var(--dim); }
.kb-msg .bb { --bb-size: 14.5px; }
.kb-msg.is-me { grid-template-columns: minmax(0, 1fr) 36px; align-self: flex-end; }
.kb-msg.is-me > .av { order: 2; }
.kb-msg.is-me .kb-msg__b { border-color: rgba(124, 245, 196, 0.2); border-radius: 20px 6px 20px 20px; background: linear-gradient(180deg, rgba(124, 245, 196, 0.1), rgba(124, 245, 196, 0.045)); }
.kb-msg--staff:not(.is-me) .kb-msg__b { border-color: rgba(244, 241, 208, 0.2); background: linear-gradient(180deg, rgba(244, 241, 208, 0.07), rgba(244, 241, 208, 0.025)); }
.kb-msg--note .kb-msg__b, .kb-msg--note.is-me .kb-msg__b { border: 1px dashed rgba(244, 222, 140, 0.4); background: rgba(244, 222, 140, 0.05); }
.kb-msg__f { margin: 10px 0 0; font-size: 12px; color: var(--amber); opacity: 0.85; }
.kb-msg:target .kb-msg__b { box-shadow: 0 0 0 2px rgba(124, 245, 196, 0.45), var(--e1); }
.kb-thread__none { margin: 4px 0 0 48px; font-size: 13.5px; color: var(--mut); }
.kb-thread__end { display: flex; align-items: center; gap: 14px; margin: 6px 0; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kb-thread__end::before, .kb-thread__end::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kb-reply { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.kb-reply > label { font-size: 13px; font-weight: 600; color: var(--text); }
.kb-reply .err { font-size: 12.5px; color: var(--red); }
.kb-reply__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.kb-reply__row .btn { margin-left: auto; }
.kb-reply__hint { font-size: 12.5px; color: var(--mut); }
.kb-tkside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kb-box { padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.kb-box h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kb-box h2 span { font-variant-numeric: tabular-nums; color: var(--mut); }
.kb-kv { display: grid; gap: 0; margin: 0; }
.kb-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.kb-kv > div:first-child { border-top: 0; padding-top: 0; }
.kb-kv dt { color: var(--mut); }
.kb-kv dd { margin: 0; min-width: 0; overflow: hidden; font-weight: 600; text-align: right; color: var(--hi); text-overflow: ellipsis; }
.kb-kv dd span { font-weight: 400; color: var(--mut); }
.kb-assign { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.kb-assign label { font-size: 13px; font-weight: 600; color: var(--text); }
.kb-assign > div { display: flex; gap: 8px; }
.kb-assign .select { flex: 1; min-width: 0; height: 36px; }
.kb-files { display: grid; gap: 2px; margin: 0 -8px 12px; padding: 0; list-style: none; }
.kb-files li { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: var(--r-s); }
.kb-files a { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--hi); }
.kb-files a svg { flex: none; width: 14px; height: 14px; color: var(--mut); transition: color 0.15s; }
.kb-files a:hover svg { color: var(--acc); }
.kb-files code { overflow: hidden; font: 12.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.kb-files a:hover code { text-decoration: underline; text-underline-offset: 3px; }
.kb-files small { padding-left: 22px; font-size: 12px; color: var(--mut); }
.kb-attach { display: flex; align-items: center; gap: 8px; margin: 0; }
.kb-attach__f { flex: 1; min-width: 0; font: inherit; font-size: 12.5px; color: var(--mut); }
.kb-attach__f::file-selector-button { height: 30px; margin-right: 10px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.05); font: inherit; font-size: 12.5px; font-weight: 550; color: var(--hi); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.kb-attach__f:hover::file-selector-button { border-color: var(--line3); background: rgba(255, 255, 255, 0.09); }
.kb-box__help { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.kb-tkdel { margin: 0 4px; }
.kb-tkdel button { padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--mut); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; transition: color 0.15s; }
.kb-tkdel button:hover { color: var(--red); text-decoration-color: currentColor; }
.kb-ask2 { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 340px); gap: 44px; align-items: start; }
.kb-form { display: flex; flex-direction: column; gap: 20px; padding: 28px 30px 30px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.kb-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kb-form__a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.kb-next { padding-top: 8px; }
.kb-next h2 { margin: 0 0 14px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.kb-next ol { display: grid; gap: 16px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: kbstep; }
.kb-next ol li { position: relative; display: flex; flex-direction: column; gap: 3px; padding-left: 40px; counter-increment: kbstep; }
.kb-next ol li::before { content: counter(kbstep); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.22); font: 650 12px/1 var(--display); color: var(--acc); }
.kb-next ol li + li::after { content: ""; position: absolute; left: 12.5px; bottom: calc(100% + 3px); width: 1px; height: 10px; background: var(--line2); }
.kb-next b { font-size: 14px; font-weight: 650; color: var(--hi); }
.kb-next li span, .kb-next p, .kb-next ul { font-size: 13.5px; line-height: 1.55; color: var(--mut); }
.kb-next p { margin: 0; }
.kb-next ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kb-next ul li { position: relative; padding-left: 18px; }
.kb-next ul li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); opacity: 0.8; }
@media (max-width: 1000px) {
.kb-tkg, .kb-ask2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.kb-tkside { position: static; }
.kb-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.kb-tk { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 12px 14px 16px; }
.kb-tk__s { grid-row: 1; grid-column: 1; }
.kb-tk__age { grid-row: 1; grid-column: 2; }
.kb-tk__m { grid-column: 1 / -1; }
.kb-tk__m b { white-space: normal; }
.kb-tk__n { grid-column: 1 / -1; }
.kb-tk__go { display: none; }
.kb-msg { max-width: 100%; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
.kb-msg.is-me { grid-template-columns: minmax(0, 1fr) 30px; }
.kb-msg > .av { width: 30px; height: 30px; font-size: 12px; }
.kb-msg__b { padding: 11px 14px 12px; }
.kb-thread__none { margin-left: 0; }
.kb-form { padding: 20px 18px 22px; }
.kb-form__row { grid-template-columns: 1fr; }
.kb-reply__row .btn { margin-left: 0; }
}
.kb-404 { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; min-height: min(820px, calc(100vh - 150px)); padding: clamp(18px, 4vh, 54px) 20px 0; overflow-x: clip; text-align: center; }
.kb-404::before { content: ""; position: absolute; z-index: -2; left: 50%; top: -4%; width: min(1100px, 150%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 241, 208, 0.13), rgba(244, 241, 208, 0.045) 42%, transparent 70%); transform: translateX(-50%); pointer-events: none; }
.kb-404__sky { display: flex; align-items: center; justify-content: center; gap: clamp(2px, 0.8vw, 14px); line-height: 0; user-select: none; }
.kb-404__n { font: 700 clamp(132px, 23vw, 320px)/0.82 var(--display); letter-spacing: -0.06em; font-feature-settings: "tnum" 0; color: transparent; background: linear-gradient(180deg, rgba(246, 251, 248, 0.96) 12%, rgba(196, 232, 222, 0.5) 58%, rgba(196, 232, 222, 0.08) 96%); -webkit-background-clip: text; background-clip: text; }
.kb-404__moon { position: relative; z-index: 1; flex: none; width: clamp(104px, 17.5vw, 244px); aspect-ratio: 1; margin: 0 clamp(-10px, -0.6vw, -4px); }
.kb-404__moon .moon { width: 100%; height: 100%; filter: drop-shadow(0 0 28px rgba(244, 241, 208, 0.55)) drop-shadow(0 0 110px rgba(244, 241, 208, 0.3)); }
.kb-404__moon .moon__disc { fill: color-mix(in srgb, var(--moon) 8%, var(--bg)); stroke: rgba(244, 241, 208, 0.22); stroke-width: 0.6; }
.kb-404__t { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; max-width: 560px; margin-top: clamp(14px, 3vh, 34px); padding-bottom: clamp(150px, 24vh, 230px); }
.kb-404 h1 { font: 700 clamp(30px, 4.4vw, 48px)/1.05 var(--display); letter-spacing: -0.045em; color: var(--hi); }
.kb-404__p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--soft); text-wrap: balance; }
.kb-404__q { display: flex; align-items: center; gap: 11px; width: min(100%, 430px); height: 48px; margin: 28px 0 0; padding: 0 18px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--mut); transition: border-color 0.18s, box-shadow 0.18s, color 0.18s; }
.kb-404__q:hover { border-color: var(--line3); }
.kb-404__q:focus-within { border-color: rgba(124, 245, 196, 0.6); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.12), inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--acc); }
.kb-404__q svg { flex: none; width: 16px; height: 16px; }
.kb-404__q input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text); }
.kb-404__q input::placeholder { color: var(--dim); }
.kb-404__q input::-webkit-search-cancel-button { display: none; }
.kb-404__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.kb-404__garden { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(150px, 26vh, 240px); stroke: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, #000 62%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, #000 62%, transparent); mask-composite: intersect; pointer-events: none; }
.kb-404__garden .far { fill: color-mix(in srgb, var(--acc) 5%, var(--bg)); }
.kb-404__garden .leaf { fill: color-mix(in srgb, var(--acc) 11%, var(--bg)); }
.kb-404__garden .stem { fill: none; stroke: color-mix(in srgb, var(--acc) 24%, var(--bg)); stroke-width: 2.6; stroke-linecap: round; }
.kb-404__garden .bloom .m { fill: var(--acc); filter: drop-shadow(0 0 9px rgba(124, 245, 196, 0.75)); }
.kb-404__garden .bloom .l { fill: var(--lav); filter: drop-shadow(0 0 10px rgba(195, 166, 255, 0.75)); }
.kb-404__garden .eye { fill: var(--moon); }
.kb-404__garden .fly { fill: #e9ff9a; filter: drop-shadow(0 0 4px rgba(233, 255, 154, 0.9)); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
.kb-404__moon { animation: kb-moonrise 0.6s var(--ease) backwards; }
}
@keyframes kb-moonrise { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 640px) {
.kb-404 { min-height: 0; }
.kb-404__t { padding-bottom: 170px; }
}
.sf { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: start; }
.sf-body { min-width: 0; }
.sf-rail { position: sticky; top: 84px; display: flex; flex-direction: column; max-height: calc(100vh - 104px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.sf-rail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.sf-rail__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-rail__t small { font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.sf-rail__t b { font: 650 16px/1.15 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.sf-rail__tog { display: none; }
.sf-nav { padding: 8px 8px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent); }
.sf-nav::-webkit-scrollbar { display: none; }
.sf-nav__g > summary { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 10px; font: 600 11px/1 var(--sans); letter-spacing: 0.11em; text-transform: uppercase; color: var(--mut); cursor: pointer; list-style: none; user-select: none; transition: color 0.15s, background-color 0.15s; }
.sf-nav__g > summary::-webkit-details-marker { display: none; }
.sf-nav__g > summary:hover { background: rgba(255, 255, 255, 0.04); color: var(--hi); }
.sf-nav__g[open] > summary { color: var(--soft); }
.sf-nav__i { width: 15px; height: 15px; color: var(--dim); transition: color 0.15s; }
.sf-nav__g[open] .sf-nav__i { color: var(--acc); }
.sf-nav__g > summary > span { flex: 1; min-width: 0; }
.sf-nav__chev { width: 12px; height: 12px; color: var(--dim); transition: transform 0.2s var(--ease); }
.sf-nav__g[open] .sf-nav__chev { transform: rotate(90deg); }
.sf-nav__l { display: flex; flex-direction: column; gap: 1px; padding: 1px 0 9px; }
.sf-nav__l a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 31px; padding: 4px 10px 4px 35px; border-radius: 9px; font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--soft); transition: background-color 0.15s, color 0.15s; }
.sf-nav__l a:hover { background: rgba(255, 255, 255, 0.05); color: var(--hi); }
.sf-nav__l a.is-on { background: linear-gradient(90deg, rgba(124, 245, 196, 0.16), rgba(124, 245, 196, 0.03)); color: var(--hi); font-weight: 600; }
.sf-nav__l a.is-on::before { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 9px var(--acc); }
.sf-n { display: inline-block; flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: rgba(244, 222, 140, 0.16); font: 700 11px/18px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0; text-align: center; color: var(--amber); }
.sf-n--q, .sf-n--0 { background: rgba(255, 255, 255, 0.07); color: var(--mut); }
.sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-ph { margin: 0 0 22px; padding: 4px 0 22px; }
.sf-ph h1 { font-size: clamp(27px, 2.5vw, 36px); overflow-wrap: anywhere; }
.sf-ph .ph__sub { margin-top: 10px; max-width: 78ch; font-size: 14px; color: var(--soft); }
.sf-ph .ph__actions { align-self: flex-end; }
.sf-ph__id { font-weight: 500; color: var(--mut); }
.sf-kick a { color: inherit; transition: color 0.15s; }
.sf-kick a:hover { color: var(--hi); }
.sf-kick i { font-style: normal; color: var(--dim); }
.sf-kick span { color: var(--mut); }
.sf-flash { margin-bottom: 18px; }
.sf-body .alert--ok { border-color: rgba(110, 231, 168, 0.3); }
.sf-body .alert--ok::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.sf-body .alert--err { border-color: rgba(255, 143, 143, 0.34); }
.sf-body .alert--err::before { background: var(--red); box-shadow: 0 0 10px var(--red); }
.sf-body .alert--warn { border-color: rgba(244, 222, 140, 0.32); }
.sf-body .alert--warn::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sf-body .alert code { font-size: 12px; color: var(--hi); }
.sf-count { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.sf-sec { margin-top: 30px; }
.sf-sec__h { margin: 0 0 12px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.sf-sec__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sf-sec__top a { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 550; color: var(--mut); transition: color 0.15s; }
.sf-sec__top a:hover { color: var(--acc); }
.sf-sec__top a svg { width: 12px; height: 12px; }
.sf-card { overflow: hidden; }
.sf-card + .sf-card, .sf-card + .sf-tw, .sf-card + .sf-empty { margin-top: 16px; }
.sf-card__note { font-size: 12.5px; color: var(--mut); text-align: right; }
.sf-card__note code { font-size: 12px; color: var(--soft); }
.sf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 16px; }
.sf-cols--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.sf-cols > .card + .card { margin-top: 0; }
.sf-body [style*="--c:"] { color: var(--c); color: oklch(from var(--c) max(l, 0.76) c h); }
.sf-face { flex: none; width: 28px; height: 28px; font-size: 12px; }
.av--txt.sf-face, .av--txt.sf-id__av { background: color-mix(in srgb, currentColor 15%, #0c1317); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 42%, transparent); }
span.sf-face:not([style]), span.sf-id__av:not([style]) { color: var(--soft); }
.sf-who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; vertical-align: middle; }
.sf-who b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--hi); }
a.sf-who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sf-who--gone b { font-weight: 500; color: var(--mut); }
.sf-u { font-weight: 600; color: var(--hi); }
.sf-u:hover { color: var(--acc); }
.sf-nil { color: var(--dim); }
.sf-soft { color: var(--mut); }
.sf-when { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mut); }
.sf-mono { font-family: var(--mono); font-size: 13px; }
.sf-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 46px 20px 44px; border: 1px dashed var(--line2); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.012); font-size: 13.5px; text-align: center; color: var(--mut); }
.sf-empty__moon .moon { width: 42px; height: 42px; margin-bottom: 10px; filter: drop-shadow(0 0 16px rgba(244, 241, 208, 0.32)); }
.sf-empty b { font: 650 18px/1.2 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.sf-empty span { max-width: 52ch; text-wrap: balance; }
.sf-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sf-attn__c { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 16px 18px 15px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease); }
.sf-attn__c:hover { border-color: var(--line3); background: var(--card-hi); transform: translateY(-1px); }
.sf-attn__top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--soft); }
.sf-attn__top svg { width: 15px; height: 15px; color: var(--dim); }
.sf-attn__n { margin-top: 10px; font: 650 38px/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--dim); }
.sf-attn__w { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 18px; font-size: 12px; color: var(--mut); }
.sf-attn__w svg { width: 12px; height: 12px; color: var(--green); }
.sf-attn__w i { font-style: normal; white-space: nowrap; color: var(--amber); }
.sf-attn__c.is-due { border-color: rgba(244, 222, 140, 0.34); background: linear-gradient(180deg, rgba(244, 222, 140, 0.1), rgba(244, 222, 140, 0.02)); }
.sf-attn__c.is-due::after { content: ""; position: absolute; top: 18px; right: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sf-attn__c.is-due .sf-attn__top { color: var(--hi); }
.sf-attn__c.is-due .sf-attn__top svg { color: var(--amber); }
.sf-attn__c.is-due .sf-attn__n { color: var(--moon); }
.sf-attn__c.is-due .sf-attn__w { color: var(--soft); }
.sf-figs { display: flex; flex-wrap: wrap; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); box-shadow: var(--e2); }
.sf-fig { display: flex; flex: 1 1 124px; flex-direction: column; gap: 8px; min-width: 0; padding: 17px 18px 14px; background: #0a1014; transition: background-color 0.15s; }
.sf-fig:hover { background: #0e161b; }
.sf-fig span { font: var(--label); line-height: 1.35; letter-spacing: 0.11em; text-transform: uppercase; color: var(--mut); }
.sf-fig b { font: 650 26px/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--hi); }
.sf-fig b.up { color: var(--green); }
.sf-fig b.amber { color: var(--amber); }
.sf-fig small { margin-top: -4px; font-size: 11.5px; color: var(--mut); }
.sf-list { margin: 0; padding: 4px 20px 8px; list-style: none; }
.sf-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sf-list li:first-child { border-top: 0; }
.sf-list__k { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; min-width: 0; font-weight: 550; color: var(--text); }
.sf-list__k code { font: 11.5px var(--mono); font-weight: 400; color: var(--mut); }
.sf-list__v { font-size: 12.5px; text-align: right; color: var(--mut); }
a.sf-list__v:hover { color: var(--acc); }
.sf-list__none { color: var(--mut); }
.sf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(196, 232, 222, 0.22); }
.sf-dot--ok { background: var(--green); box-shadow: 0 0 9px rgba(110, 231, 168, 0.6); }
.sf-dot--warn { background: var(--amber); box-shadow: 0 0 9px rgba(244, 222, 140, 0.5); }
.sf-dot--moon { background: var(--moon); box-shadow: 0 0 9px rgba(244, 241, 208, 0.7); }
.sf-dot--bmoon { background: var(--bmoon); box-shadow: 0 0 9px rgba(143, 203, 255, 0.7); }
.sf-mini { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); }
.sf-mini:first-of-type { border-top: 0; }
.sf-mini--art { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px 14px; }
.sf-mini--art .sf-mini__f { grid-column: 1 / -1; }
.sf-mini__art { display: grid; place-items: center; width: 46px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 7px; background: var(--surface3); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line); }
.sf-mini__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-mini__art svg { width: 18px; height: 18px; color: var(--dim); }
.sf-mini__h i { font-style: normal; font-weight: 500; color: var(--mut); }
.sf-mini__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-mini__h { font-size: 14px; font-weight: 600; color: var(--hi); overflow-wrap: anywhere; }
.sf-mini__m { font-size: 12.5px; color: var(--mut); }
.sf-mini__m a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; }
.sf-mini__m a:hover { color: var(--acc); }
.sf-mini__f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-mini__f .input { flex: 1 1 220px; width: auto; height: 32px; padding: 0 12px; font-size: 13px; }
.sf-feed { margin: 0; padding: 2px 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); list-style: none; }
.sf-feed li { display: grid; grid-template-columns: 74px minmax(70px, 120px) 62px minmax(90px, 170px) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.sf-feed li:first-child { border-top: 0; }
.sf-feed__when { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mut); }
.sf-feed__who { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--hi); }
.sf-feed__who a:hover { color: var(--acc); }
.sf-feed__what, .sf-audit__what { font-weight: 550; color: var(--soft); }
.sf-feed__what i, .sf-audit__what i { font-style: normal; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--mut); }
.sf-feed__rec { min-width: 0; }
.sf-chg { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; max-width: 100%; margin: 1px 16px 1px 0; font: 12px/1.55 var(--mono); overflow-wrap: anywhere; }
.sf-chg em { font-style: normal; color: var(--mut); }
.sf-chg em::after { content: ":"; }
.sf-chg del { text-decoration-color: rgba(255, 143, 143, 0.55); color: var(--red); }
.sf-chg ins { text-decoration: none; color: var(--green); }
.sf-chg i { font-style: normal; color: var(--dim); }
.sf-raw { display: block; font: 11.5px/1.55 var(--mono); white-space: normal; overflow-wrap: anywhere; color: var(--mut); }
.sf-act { min-width: 54px; text-align: center; }
.sf-act--create { background: rgba(110, 231, 168, 0.13); color: var(--green); }
.sf-act--update { background: var(--acc-soft); color: var(--acc); }
.sf-act--delete { background: rgba(255, 143, 143, 0.13); color: var(--red); }
.sf-act--run { background: rgba(195, 166, 255, 0.14); color: var(--lav); }
.sf-tabs { margin-bottom: 18px; }
.sf-tabs a { display: inline-flex; align-items: center; gap: 8px; }
.sf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sf-find { display: flex; flex: 1 1 240px; align-items: center; gap: 10px; max-width: 420px; height: 38px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(3, 6, 8, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--mut); transition: border-color 0.15s, box-shadow 0.15s, color 0.15s; }
.sf-find:hover { border-color: var(--line3); }
.sf-find:focus-within { border-color: rgba(124, 245, 196, 0.7); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.13), inset 0 1px 2px rgba(0, 0, 0, 0.35); color: var(--acc); }
.sf-find svg { width: 15px; height: 15px; }
.sf-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0; font: inherit; font-size: 13.5px; color: var(--text); }
.sf-find input::placeholder { color: var(--dim); }
.sf-find input::-webkit-search-cancel-button { display: none; }
.sf-bar__n { margin-left: auto; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.sf-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.sf-pick .chip { height: 30px; }
.sf-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.sf-table td { overflow-wrap: anywhere; }
.sf-table th { background: none; }
.sf-table code { font: 12px/1.5 var(--mono); color: var(--soft); }
.sf-table tbody tr.is-due { background: rgba(244, 222, 140, 0.035); }
.sf-table tbody tr.is-bad { background: rgba(255, 143, 143, 0.04); }
.sf-wrap { min-width: 180px; }
.sf-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--mut); }
.sf-ip { font-size: 13px !important; color: var(--hi) !important; }
.sf-ref { color: var(--mut) !important; }
.sf-acts { width: 1%; white-space: nowrap; }
.sf-acts__in { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.sf-acts__in form { display: contents; }
.sf-acts .btn--ghost { color: var(--mut) !important; }
.sf-table tr:hover .sf-acts .btn--ghost, .sf-table tr:focus-within .sf-acts .btn--ghost { border-color: var(--line2); background: rgba(255, 255, 255, 0.04); color: var(--hi) !important; }
.sf-acts .btn--ghost:hover, .sf-acts .btn--ghost:focus-visible { border-color: var(--line3) !important; background: rgba(255, 255, 255, 0.09) !important; }
.btn.sf-del:hover, .btn.sf-del:focus-visible { border-color: rgba(255, 143, 143, 0.5) !important; background: rgba(255, 143, 143, 0.12) !important; color: var(--red) !important; }
@media (min-width: 1181px) {
.sf-tw { overflow: visible; }
.sf-tw .sf-table thead th { position: sticky; top: 64px; z-index: 3; background: #0b1216; box-shadow: 0 1px 0 var(--line); }
.sf-tw .sf-table thead th:first-child { border-top-left-radius: var(--r-lg); }
.sf-tw .sf-table thead th:last-child { border-top-right-radius: var(--r-lg); }
.sf-tw .sf-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
.sf-tw .sf-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }
}
.sf-log td { padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
.sf-log__when { white-space: nowrap; }
.sf-ts { font-variant-numeric: tabular-nums; color: var(--soft); }
.sf-log__num { text-align: right; font-variant-numeric: tabular-nums; }
.sf-log__mono code { color: var(--soft); }
.sf-audit td { vertical-align: top; }
.sf-audit .sf-when small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--dim); }
.sf-audit .sf-when time { color: var(--soft); }
.sf-audit__rec { min-width: 260px; }
.sf-data__id { width: 1%; color: var(--mut); }
.sf-data__name a { font-weight: 600; color: var(--hi); }
.sf-data__name a:hover { color: var(--acc); }
.sf-data__long { max-width: 420px; font-size: 12.5px; color: var(--mut); }
.sf-jobs td { vertical-align: top; }
.sf-jobs td:nth-child(2) { white-space: nowrap; }
.sf-jobs__t { min-width: 250px; }
.sf-jobs__t b { display: flex; align-items: baseline; gap: 10px; font-weight: 600; color: var(--hi); }
.sf-jobs__t .sf-dot { position: relative; top: -1px; }
.sf-jobs__t code { margin-left: 18px; }
.sf-dot--bad { background: var(--red); box-shadow: 0 0 9px rgba(255, 143, 143, 0.6); }
.sf-dot--acc { background: var(--acc); box-shadow: 0 0 9px rgba(124, 245, 196, 0.6); }
.sf-jobs__t code { color: var(--mut); font-size: 11.5px; }
.sf-jobs__r small { display: block; margin-top: 4px; font-size: 12px; color: var(--red); }
.sf-jobs__note { color: var(--soft); }
.sf-queue { display: flex; flex-direction: column; gap: 12px; }
.sf-rel { font: 500 12.5px/1.5 var(--mono); overflow-wrap: anywhere; color: var(--soft); transition: color 0.15s; }
a.sf-rel:hover { color: var(--acc); }
.sf-q { content-visibility: auto; contain-intrinsic-size: auto 196px; display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(270px, 330px); gap: 16px 20px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.sf-q__art { display: grid; place-items: center; width: 78px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 10px; background: var(--surface3); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line); }
.sf-q__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-q__art svg { width: 26px; height: 26px; color: var(--dim); }
.sf-q__main { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding-top: 1px; }
.sf-q__title { margin: 0; font: 650 16.5px/1.25 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.sf-q__title span { font-weight: 500; color: var(--mut); }
.sf-q__meta { display: flex; flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--mut); }
.sf-q__meta span { white-space: nowrap; }
.sf-q__meta span:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--dim); }
.sf-q__by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 2px 0 0; font-size: 12.5px; color: var(--mut); }
.sf-q__by .sf-face { width: 24px; height: 24px; font-size: 11px; }
.sf-q__age { font-variant-numeric: tabular-nums; }
.sf-checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.sf-checks li { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border: 1px solid var(--line2); border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--soft); }
.sf-checks li::before { content: ""; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--sf-ic-dot) center / contain no-repeat; mask: var(--sf-ic-dot) center / contain no-repeat; }
.sf-checks { --sf-ic-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E"); --sf-ic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --sf-ic-miss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 5v8.5M12 18.6v.2'/%3E%3C/svg%3E"); }
.sf-checks .is-ok { border-color: rgba(110, 231, 168, 0.28); background: rgba(110, 231, 168, 0.07); color: var(--green); }
.sf-checks .is-ok::before { -webkit-mask-image: var(--sf-ic-ok); mask-image: var(--sf-ic-ok); }
.sf-checks .is-miss { border-color: rgba(244, 222, 140, 0.32); background: rgba(244, 222, 140, 0.07); color: var(--amber); }
.sf-checks .is-miss::before { -webkit-mask-image: var(--sf-ic-miss); mask-image: var(--sf-ic-miss); }
.sf-q__act { display: flex; flex-direction: column; gap: 12px; align-self: stretch; padding-left: 20px; border-left: 1px solid var(--line); }
.sf-q__ok { justify-content: center; height: 40px; }
.sf-q__note { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px dashed var(--line2); }
.sf-q__note label, .sf-item__f label { font-size: 12px; font-weight: 600; color: var(--mut); }
.sf-q__note .input { height: 36px; font-size: 13px; }
.sf-q__no { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-q__no .btn--ghost { margin-left: auto; }
.sf-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 16px 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.sf-item.is-done { grid-template-columns: minmax(0, 1fr); }
.sf-item__t { min-width: 0; }
.sf-item__k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 9px; font-size: 12px; color: var(--mut); }
.sf-item__h { margin: 0 0 8px; font: 650 16.5px/1.3 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; color: var(--hi); }
.sf-item__h--mono { font: 500 14.5px/1.4 var(--mono); letter-spacing: 0; }
.sf-item__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 12.5px; color: var(--mut); }
.sf-item__m .sf-face { width: 22px; height: 22px; font-size: 10.5px; }
.sf-item__ref { padding: 1px 9px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12px; font-weight: 550; color: var(--soft); transition: color 0.15s, border-color 0.15s; }
.sf-item__ref:hover { border-color: rgba(124, 245, 196, 0.4); color: var(--acc); }
.sf-quote { margin: 12px 0 0; padding: 10px 14px; border-left: 2px solid var(--line3); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, 0.028); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--soft); }
.sf-quote--verdict { border-left-color: var(--acc); }
.sf-quote b { color: var(--hi); }
.sf-mini .sf-quote { margin-top: 6px; }
.sf-item__f { display: flex; flex-direction: column; gap: 8px; align-self: stretch; padding-left: 24px; border-left: 1px solid var(--line); }
.sf-item__f .btn { justify-content: center; }
.sf-item__f--btns { justify-content: center; }
.sf-proofs { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.sf-proofs li { display: flex; gap: 10px; min-width: 0; }
.sf-proofs span { flex: none; width: 82px; color: var(--mut); }
.sf-proofs a { overflow-wrap: anywhere; color: var(--soft); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; }
.sf-proofs a:hover { color: var(--acc); }
.sf-invite { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; font-size: 12px; color: var(--mut); }
.sf-invite code { padding: 9px 12px; border: 1px solid var(--line2); border-radius: 10px; background: rgba(3, 6, 8, 0.5); font: 12.5px/1.4 var(--mono); overflow-wrap: anywhere; user-select: all; color: var(--hi); }
.sf-rows { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e2); }
.sf-rows > .sf-empty { border: 0; background: none; }
.sf-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px; border-top: 1px solid var(--line); transition: background-color 0.15s; }
.sf-row:first-child { border-top: 0; }
.sf-row:hover { background: rgba(124, 245, 196, 0.03); }
.sf-row__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-row__h { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; color: var(--hi); }
.sf-row__h:hover { color: var(--acc); }
.sf-row__m { font-size: 12.5px; color: var(--mut); }
.sf-row__f { flex: none; }
.sf-row__f .btn--ghost { color: var(--mut) !important; }
.sf-form { padding: 4px 20px 18px; }
.sf-form--flat { display: flex; flex-direction: column; gap: 14px; padding: 0; }
.sf-set { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.5fr); gap: 8px 28px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.sf-set:first-child, .card__h + .sf-set, .sf-form > input[type=hidden] + .sf-set { border-top: 0; }
.sf-card > .sf-set { padding-left: 20px; padding-right: 20px; }
.sf-set__l { min-width: 0; padding-top: 2px; }
.sf-set__l label { display: block; font-size: 13.5px; font-weight: 600; color: var(--hi); }
.sf-set__l p { margin: 4px 0 0; max-width: 48ch; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.sf-set__l code { font-size: 11.5px; overflow-wrap: anywhere; color: var(--soft); }
.sf-set__l .sf-set__err { font-weight: 550; color: var(--red); }
.sf-set__c { min-width: 0; }
.sf-set--sw { align-items: center; }
.sf-set--sw .sf-set__c { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.sf-set__for, .sf-moon__for { display: flex; align-items: center; gap: 9px; }
.sf-set__for label, .sf-moon__for label { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.sf-set__for .input, .sf-moon__for .input { width: 150px; height: 38px; }
.sf-set__state, .sf-moon__state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.sf-set__l p.sf-set__state { margin-top: 8px; }
.sf-set__state b, .sf-moon__state b { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--soft); }
.sf-set__state b::before, .sf-moon__state b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(196, 232, 222, 0.25); }
.sf-set:has(.sf-sw input[checked]) .sf-set__state b { color: var(--acc); }
.sf-set:has(.sf-sw input[checked]) .sf-set__state b::before { background: var(--acc); box-shadow: 0 0 9px var(--acc); }
.is-pending [data-state]::after { content: "changes when you save"; padding: 1px 9px; border-radius: 999px; background: rgba(244, 222, 140, 0.13); font-size: 11px; font-weight: 650; color: var(--amber); }
.sf-short { max-width: 190px; }
.sf-form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.sf-form--flat .sf-form__end { padding-top: 0; border-top: 0; }
.sf-form__end--bar { margin: 0 -22px; padding: 16px 22px; background: rgba(3, 6, 8, 0.3); }
.sf-form__lead { margin: 12px 0 14px; max-width: 70ch; font-size: 13.5px; overflow-wrap: anywhere; color: var(--soft); }
.sf-form--flat .sf-form__lead { margin: 0; }
.sf-perms { min-width: 0; margin: 0; padding: 16px 0 18px; border: 0; border-top: 1px solid var(--line); }
.sf-perms legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--hi); }
.sf-perms__g { display: grid; clear: both; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px 14px; }
.sf-perms .field > label { font-size: 12px; font-weight: 600; color: var(--mut); }
.sf-perms .select { height: 38px; font-size: 13.5px; }
.sf-form :disabled { opacity: 0.6; cursor: not-allowed; }
.sf-save { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 4px; }
.sf-save__dirty { font-size: 13px; font-weight: 600; color: var(--amber); }
.sf-sw { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.sf-sw input[type=checkbox] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sf-sw i { display: block; width: 46px; height: 26px; border: 1px solid var(--line3); border-radius: 999px; background: rgba(3, 6, 8, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s; }
.sf-sw i::after { content: ""; display: block; width: 20px; height: 20px; margin: 2px; border-radius: 50%; background: var(--mut); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); transition: transform 0.25s var(--ease), background-color 0.25s; }
.sf-sw:hover i { border-color: color-mix(in srgb, var(--mc, var(--acc)) 60%, transparent); }
.sf-sw input:checked + i { border-color: transparent; background: var(--mc, var(--acc)); box-shadow: 0 0 18px -4px var(--mc, var(--acc)); }
.sf-sw input:checked + i::after { transform: translateX(20px); background: var(--ink); }
.sf-sw input:focus-visible + i { outline: 2px solid var(--acc); outline-offset: 3px; }
.sf-sw--lg i { width: 70px; height: 38px; }
.sf-sw--lg i::after { width: 30px; height: 30px; margin: 3px; }
.sf-sw--lg input:checked + i::after { transform: translateX(32px); }
.sf-dform { max-width: 980px; padding: 2px 22px 0; }
.sf-dform .sf-set { grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); padding: 12px 0; }
.sf-dform .sf-set__l { padding-top: 9px; }
.sf-sets { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 20px; }
.sf-sets > .sf-set { grid-column: 1 / -1; }
.sf-sets > .sf-set--bool { display: block; grid-column: auto; padding: 11px 0; border-top: 0; }
.sf-sets > .sf-set:not(.sf-set--bool) + .sf-set--bool::before { content: ""; position: absolute; left: 0; right: 0; margin-top: -11px; border-top: 1px solid var(--line); }
.sf-set--bool .check { font-size: 13.5px; font-weight: 550; color: var(--text); }
.sf-set.is-bad .sf-set__l label { color: var(--red); }
.sf-dform .textarea { min-height: 180px; font-size: 13.5px; }
.sf-fence { padding: 2px 20px 4px; border: 1px dashed rgba(255, 143, 143, 0.36); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 143, 143, 0.05), rgba(255, 143, 143, 0.012)); }
.sf-fence__h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 6px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.sf-fence__h svg { width: 14px; height: 14px; }
.sf-fence__h span { margin-left: 2px; font: 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--mut); }
.sf-fence__s { padding: 14px 0 16px; border-top: 1px solid rgba(255, 143, 143, 0.15); }
.sf-fence__h + .sf-fence__s { border-top: 0; padding-top: 8px; }
.sf-fence__s h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font: 650 15px/1.3 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.sf-fence__s h2 span:not(.pill) { font: 12px var(--sans); letter-spacing: 0; color: var(--mut); }
.sf-fence--page { max-width: 900px; }
.sf-tools { display: flex; flex-direction: column; }
.sf-tools > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.sf-tools > div:first-of-type { border-top: 0; padding-top: 2px; }
.sf-tools p { min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; color: var(--mut); }
.sf-tools p b { display: block; font-size: 13.5px; font-weight: 600; color: var(--hi); }
.sf-tools .btn { flex: none; }
.sf-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 14px; }
.sf-nums .field > label { font-size: 12px; font-weight: 600; color: var(--mut); }
.sf-nums .input { height: 38px; font-variant-numeric: tabular-nums; }
.sf-id { align-items: center; }
.sf-id__who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.sf-id__av { flex: none; width: 72px; height: 72px; font-size: 28px; }
img.sf-id__av { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--line3); }
.sf-id .ph__kicker { margin-bottom: 9px; }
.sf-id__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; }
.sf-id__title { font-size: 12.5px; color: var(--mut); }
.sf-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); box-shadow: var(--e2); }
.sf-facts > div { min-width: 0; padding: 13px 18px 12px; background: #0a1014; }
.sf-facts > .sf-facts__wide { grid-column: span 2; }
.sf-facts dt { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.sf-facts dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 7px 0 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hi); }
.sf-facts dd.up { color: var(--green); }
.sf-facts dd.down { color: var(--red); }
.sf-facts dd.amber { color: var(--moon); }
.sf-facts dd i { font-style: normal; font-weight: 400; color: var(--dim); }
.sf-facts dd small { font-size: 12px; font-weight: 400; color: var(--mut); }
.sf-facts dd small a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px; }
.sf-facts dd small a:hover { color: var(--acc); }
.sf-facts__mail { min-width: 0; font: 500 13.5px var(--mono); overflow-wrap: anywhere; }
.sf-watchnote { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(244, 222, 140, 0.3); border-radius: var(--r-m); background: rgba(244, 222, 140, 0.06); font-size: 13px; overflow-wrap: anywhere; color: var(--soft); }
.sf-watchnote svg { width: 16px; height: 16px; margin-top: 2px; color: var(--amber); }
.sf-watchnote b { color: var(--hi); }
.sf-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.sf-jump a { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 999px; font-size: 12.5px; font-weight: 550; white-space: nowrap; color: var(--soft); transition: border-color 0.15s, color 0.15s; }
.sf-jump a:hover { border-color: rgba(124, 245, 196, 0.4); color: var(--hi); }
.sf-user { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, 1fr); gap: 16px; align-items: start; }
.sf-user:not(:has(.sf-user__side)) { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.sf-user__main, .sf-user__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sf-user .card + .card { margin-top: 0; }
.sf-user [id] { scroll-margin-top: 84px; }
.sf-add { display: flex; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.sf-add--in { padding: 12px 0 0; border-bottom: 0; }
.sf-add .input { flex: 1 1 auto; min-width: 0; width: auto; height: 38px; font-size: 13.5px; }
.sf-add__days { display: inline-flex; flex: none; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mut); }
.sf-add__days .input { flex: none; width: 70px; padding: 0 8px 0 12px; }
.sf-add .btn { flex: none; height: 38px; }
.sf-notes { margin: 0; padding: 2px 20px 8px; list-style: none; }
.sf-notes li { padding: 12px 0; border-top: 1px solid var(--line); }
.sf-notes li:first-child { border-top: 0; }
.sf-notes__k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; min-height: 30px; font-size: 12.5px; color: var(--mut); }
.sf-notes__k b { font-weight: 600; color: var(--hi); }
.sf-notes__x { margin-left: auto; }
.sf-notes__m { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--soft); }
.sf-notes__none { font-size: 13px; color: var(--mut); }
.sf-modes { display: flex; flex-direction: column; gap: 16px; }
.sf-modes .card + .card { margin-top: 0; }
.sf-moons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-moon { --mc: var(--moon); position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "for sw"; gap: 22px 16px; align-content: space-between; min-height: 272px; overflow: hidden; padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--e2); transition: border-color 0.5s, background-color 0.5s; }
.sf-moon--du { --mc: var(--bmoon); }
.sf-moon::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(420px 300px at 100% 0, color-mix(in srgb, var(--mc) 16%, transparent), transparent 70%); opacity: 0; transition: opacity 0.6s; }
.sf-moon__disc { position: absolute; z-index: -1; top: -64px; right: -58px; width: 236px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--mc) 9%, transparent), transparent 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 26%, transparent); transition: box-shadow 0.6s var(--ease), opacity 0.6s; }
.sf-moon__disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background:
radial-gradient(circle at 60% 66%, rgba(4, 12, 16, 0.14) 0 8%, transparent 9%),
radial-gradient(circle at 36% 74%, rgba(4, 12, 16, 0.11) 0 12%, transparent 13%),
radial-gradient(circle at 26% 46%, rgba(4, 12, 16, 0.09) 0 6%, transparent 7%),
radial-gradient(circle at 52% 40%, rgba(4, 12, 16, 0.07) 0 4%, transparent 5%),
radial-gradient(circle at 30% 62%, #fff 0, var(--mc) 30%, color-mix(in srgb, var(--mc) 58%, #06090c) 100%); opacity: 0; transition: opacity 0.6s var(--ease); }
.sf-moon:has(.sf-sw input:checked) { border-color: color-mix(in srgb, var(--mc) 36%, transparent); }
.sf-moon:has(.sf-sw input:checked)::before { opacity: 1; }
.sf-moon:has(.sf-sw input:checked) .sf-moon__disc { box-shadow: 0 0 90px -6px color-mix(in srgb, var(--mc) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--mc) 50%, transparent); }
.sf-moon:has(.sf-sw input:checked) .sf-moon__disc::after { opacity: 1; }
.sf-moon__t { grid-area: t; max-width: calc(100% - 150px); }
.sf-moon__k { margin: 0 0 10px; font: var(--label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mc); }
.sf-moon h2 { font: 700 32px/1.05 var(--display); letter-spacing: -0.04em; color: var(--hi); }
.sf-moon__state { margin: 12px 0 0; font-size: 13px; }
.sf-moon:has(.sf-sw input[checked]) .sf-moon__state b { color: var(--mc); }
.sf-moon:has(.sf-sw input[checked]) .sf-moon__state b::before { background: var(--mc); box-shadow: 0 0 9px var(--mc); }
.sf-moon__d { margin: 12px 0 0; max-width: 44ch; font-size: 13.5px; line-height: 1.55; color: var(--soft); }
.sf-moon__for { grid-area: for; align-self: end; }
.sf-moon .sf-sw { grid-area: sw; align-self: end; }
.sf-status { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding: 16px 20px; border: 1px solid var(--line2); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--e1); }
.sf-status__i { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(244, 222, 140, 0.12); color: var(--amber); }
.sf-status.is-ok .sf-status__i { background: rgba(110, 231, 168, 0.12); color: var(--green); }
.sf-status__i svg { width: 17px; height: 17px; }
.sf-status p { margin: 0; max-width: 92ch; font-size: 13px; line-height: 1.55; color: var(--soft); }
.sf-status p b { display: block; margin-bottom: 3px; font: 650 15px/1.3 var(--display); letter-spacing: -0.015em; color: var(--hi); }
.sf-status code { font-size: 12px; color: var(--hi); }
.sf-outbox { display: flex; flex-direction: column; gap: 8px; }
.sf-msg { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--e1); transition: border-color 0.15s; }
.sf-msg:hover, .sf-msg[open] { border-color: var(--line2); }
.sf-msg summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 14px; gap: 4px 18px; align-items: center; padding: 13px 18px; font-size: 13.5px; cursor: pointer; list-style: none; }
.sf-msg summary::-webkit-details-marker { display: none; }
.sf-msg__s { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--hi); }
.sf-msg__to { font-size: 12.5px; color: var(--mut); }
.sf-msg__to b { font: 500 12px var(--mono); color: var(--soft); }
.sf-msg__at { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--mut); }
.sf-msg summary svg { width: 13px; height: 13px; color: var(--dim); transition: transform 0.2s var(--ease); }
.sf-msg[open] summary svg { transform: rotate(90deg); }
.sf-msg pre { margin: 0; padding: 16px 18px; border-top: 1px solid var(--line); background: rgba(3, 6, 8, 0.42); font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; color: var(--soft); }
.sf-block { display: grid; grid-template-columns: minmax(180px, 1fr) 150px minmax(200px, 2fr) auto; gap: 12px 14px; align-items: start; padding-top: 16px; }
.sf-block .field > label { font-size: 12px; font-weight: 600; color: var(--mut); }
.sf-block .input { height: 38px; }
.sf-block__go { padding-top: 26px; }
.sf-block__go .btn { height: 38px; }
.sf-perm { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.sf-tw.sf-matrix { max-height: min(68vh, 760px); overflow: auto; overscroll-behavior: contain; background: #0b1216; }
.sf-matrix .sf-table thead th { position: sticky; top: 0; z-index: 3; border-radius: 0; background: #0b1216; box-shadow: 0 1px 0 var(--line); text-align: center; }
.sf-matrix .sf-table thead th:first-child { left: 0; z-index: 4; text-align: left; }
.sf-matrix tbody th { position: sticky; left: 0; z-index: 2; padding: 9px 16px; border-bottom: 1px solid var(--line); background: #0b1216; font: 600 13.5px var(--sans); letter-spacing: 0; text-align: left; text-transform: none; white-space: nowrap; }
.sf-matrix tbody tr:last-child th { border-bottom: 0; }
.sf-matrix__c:not([style]) { color: var(--hi); }
.sf-matrix td { width: 22%; padding: 5px 16px; text-align: center; }
.sf-matrix .check { justify-content: center; padding: 6px; }
@media (max-width: 1180px) {
.sf-rail { top: 118px; max-height: calc(100vh - 136px); }
}
@media (max-width: 1280px) {
.sf-q { grid-template-columns: 78px minmax(0, 1fr); }
.sf-q__act { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
.sf-q__ok { flex: none; min-width: 150px; }
.sf-q__note { flex: 1 1 320px; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 0 0 14px; border-top: 0; border-left: 1px dashed var(--line2); }
.sf-q__note label { width: 100%; }
.sf-q__note .input { flex: 1 1 200px; width: auto; height: 40px; }
.sf-q__no { align-items: center; }
.sf-user { grid-template-columns: minmax(0, 1fr); }
.sf-attn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-feed li { grid-template-columns: 74px minmax(70px, 120px) 62px minmax(0, 1fr); }
.sf-feed__rec { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
.sf { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.sf-rail { position: static; max-height: none; border-radius: 20px; }
.sf-rail__head { padding: 10px 10px 10px 18px; border-bottom: 0; }
.sf-rail__t { flex-direction: row; align-items: baseline; gap: 8px; }
.sf-rail__t small { display: none; }
.sf-rail[data-fold] .sf-rail__tog { display: inline-flex; align-items: center; gap: 9px; min-width: 0; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font: inherit; font-size: 13px; font-weight: 600; color: var(--hi); cursor: pointer; }
.sf-rail__tog span { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-rail__tog small { font: var(--label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); }
.sf-rail__tog svg { width: 13px; height: 13px; color: var(--mut); transform: rotate(90deg); transition: transform 0.2s var(--ease); }
.sf-rail.is-open .sf-rail__tog svg { transform: rotate(-90deg); }
.sf-rail[data-fold] .sf-nav { display: none; }
.sf-rail[data-fold].is-open .sf-nav { display: block; max-height: 62vh; border-top: 1px solid var(--line); }
.sf-nav__g > summary { height: 42px; }
.sf-nav__l a { min-height: 40px; font-size: 14px; }
.sf-moons { grid-template-columns: minmax(0, 1fr); }
.sf-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
.sf-ph { margin-bottom: 18px; padding-bottom: 18px; }
.sf-ph .ph__sub { font-size: 13.5px; }
.sf-attn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-attn__c { padding: 14px 15px 13px; }
.sf-attn__n { font-size: 32px; }
.sf-fig { flex-basis: 40%; }
.sf-feed li { grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 16px; }
.sf-feed__when { order: 3; text-align: right; }
.sf-feed__who { order: 1; }
.sf-feed li > .pill { order: 2; justify-self: start; }
.sf-feed__what { order: 4; grid-column: 1 / -1; }
.sf-feed__rec { order: 5; }
.sf-pick { flex-wrap: nowrap; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); overflow-x: auto; scrollbar-width: none; }
.sf-pick::-webkit-scrollbar { display: none; }
.sf-pick .chip { flex: none; }
.sf-bar__n { width: 100%; margin-left: 4px; }
.sf-q { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 14px; }
.sf-q__art { width: 58px; border-radius: 8px; }
.sf-q__title { font-size: 15.5px; }
.sf-q__ok { flex: 1 1 100%; }
.sf-q__note { padding-left: 0; border-left: 0; }
.sf-q__no { width: 100%; }
.sf-item { grid-template-columns: minmax(0, 1fr); padding: 16px; }
.sf-item__f { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
.sf-set { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
.sf-set--sw { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.sf-set--sw .sf-set__c { display: contents; }
.sf-set--sw .sf-sw, .sf-set--sw .check { grid-column: 2; grid-row: 1; }
.sf-set--sw .sf-set__for { grid-column: 1 / -1; grid-row: 2; }
.sf-set__for .input { width: 130px; }
.sf-form { padding: 2px 16px 16px; }
.sf-card > .sf-set { padding-left: 16px; padding-right: 16px; }
.sf-dform { padding: 2px 16px 0; }
.sf-form__end--bar { margin: 0 -16px; padding: 14px 16px; }
.sf-dform .sf-set { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sf-dform .sf-set__l { padding-top: 0; }
.sf-short { max-width: none; }
.sf-add { flex-wrap: wrap; padding: 14px 16px; }
.sf-add .input:not([type=number]) { flex: 1 1 100%; }
.sf-add--in { padding: 12px 0 0; }
.sf-notes { padding: 2px 16px 8px; }
.sf-fence { padding: 2px 16px 4px; }
.sf-tools > div { flex-direction: column; align-items: flex-start; gap: 8px; }
.sf-id__who { gap: 14px; }
.sf-id__av { width: 56px; height: 56px; font-size: 22px; }
.sf-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-facts > div { padding: 12px 15px 11px; }
.sf-jump { flex-wrap: nowrap; margin-right: calc(var(--pad) * -1); padding-right: var(--pad); overflow-x: auto; scrollbar-width: none; }
.sf-jump::-webkit-scrollbar { display: none; }
.sf-moon { min-height: 0; padding: 22px 20px 20px; }
.sf-moon__disc { top: -66px; right: -62px; width: 176px; }
.sf-moon__t { max-width: none; }
.sf-moon h2 { font-size: 28px; }
.sf-moon__k, .sf-moon h2, .sf-moon__state { max-width: calc(100% - 96px); }
.sf-moon__d { max-width: none; }
.sf-moon__for .input { width: 120px; }
.sf-status { padding: 14px 16px; }
.sf-msg summary { grid-template-columns: minmax(0, 1fr) auto 14px; padding: 12px 16px; }
.sf-msg__s { grid-column: 1 / 3; white-space: normal; }
.sf-msg summary svg { grid-row: 1; grid-column: 3; }
.sf-msg pre { padding: 14px 16px; font-size: 12px; }
.sf-block { grid-template-columns: minmax(0, 1fr) 96px; }
.sf-block__why { grid-column: 1 / -1; }
.sf-block__go { grid-column: 1 / -1; padding-top: 0; }
.sf-block__go .btn { width: 100%; justify-content: center; }
.sf-row { padding: 12px 16px; }
.sf-list { padding: 4px 16px 8px; }
.sf-mini { padding: 14px 16px; }
.sf-matrix td { padding: 5px 8px; }
.sf-matrix tbody th { padding: 9px 12px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
.sf-matrix .sf-table thead th { padding-left: 8px; padding-right: 8px; white-space: normal; }
.sf-stack, .sf-stack tbody { display: block; }
.sf-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sf-stack tr { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sf-stack tbody tr:last-child { border-bottom: 0; }
.sf-stack td { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; text-align: right; white-space: normal; }
.sf-stack td[data-th]::before { content: attr(data-th); flex: none; padding-top: 2px; font: var(--label); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; color: var(--mut); }
.sf-stack td.sf-stack__h, .sf-stack td.sf-data__name { justify-content: flex-start; margin-bottom: 2px; font-size: 14.5px; text-align: left; }
.sf-stack td.sf-data__name::before { display: none; }
.sf-stack td.sf-data__id { order: 9; }
.sf-stack td.sf-acts { order: 10; justify-content: flex-end; margin-top: 2px; }
.sf-stack td.sf-acts:empty { display: none; }
.sf-stack .sf-acts .btn--ghost { border-color: var(--line2); color: var(--hi) !important; }
.sf-stack td.sf-jobs__t { flex-direction: column; align-items: flex-start; gap: 2px; }
.sf-jobs.sf-stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; }
.sf-jobs.sf-stack td { justify-content: flex-start; gap: 8px; min-width: 0; text-align: left; }
.sf-jobs.sf-stack td.sf-jobs__t { grid-column: 1; min-width: 0; }
.sf-jobs.sf-stack td.sf-acts { grid-column: 2; grid-row: 1; margin: 0; }
.sf-jobs.sf-stack td:nth-child(2), .sf-jobs.sf-stack td:nth-child(5) { grid-column: 1 / -1; }
.sf-jobs.sf-stack td:nth-child(3) { grid-column: 1; }
.sf-jobs.sf-stack td:nth-child(4) { grid-column: 2; justify-content: flex-end; }
.sf-jobs.sf-stack td.sf-jobs__r { grid-column: 1 / -1; flex-wrap: wrap; }
.sf-jobs.sf-stack td.sf-jobs__r::before { width: auto; }
.sf-stack td.sf-jobs__r, .sf-stack td.sf-audit__rec, .sf-stack td.sf-wrap, .sf-stack td.sf-data__long { flex-wrap: wrap; justify-content: flex-start; text-align: left; }
.sf-stack td.sf-jobs__r::before, .sf-stack td.sf-audit__rec::before, .sf-stack td.sf-wrap::before, .sf-stack td.sf-data__long::before { width: 100%; }
.sf-audit__rec, .sf-wrap { min-width: 0; }
}
@media (hover: none) {
.sf-acts .btn--ghost, .sf-row__f .btn--ghost { border-color: var(--line2); color: var(--hi) !important; }
}
@media (prefers-reduced-motion: reduce) {
.sf-moon, .sf-moon::before, .sf-moon__disc, .sf-moon__disc::after, .sf-sw i, .sf-sw i::after, .sf-attn__c { transition: none; }
}
.irc { position: relative; isolation: isolate; display: flex; min-width: 0; min-height: 440px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card), rgba(7, 11, 14, 0.62); box-shadow: var(--e2); container: chat / inline-size; }
.irc__main { --ch-pad: 18px; --ch-av: 36px; --ch-gap: 12px; display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; min-height: 0; }
.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.irc .irc__h { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px var(--ch-pad, 18px); border-bottom: 1px solid var(--line); font-size: 12.5px; }
.ch-title { display: flex; flex: 1; align-items: baseline; gap: 2px 16px; min-width: 0; }
.irc .irc__h h2 { flex: none; margin: 0; font: 650 16.5px/1.25 var(--display); letter-spacing: -0.025em; color: var(--hi); }
.irc .irc__h h2 i { margin-right: 1px; font-style: normal; font-weight: 500; color: var(--acc); }
.irc__topic { flex: 1; min-width: 0; overflow: hidden; font-size: 0; line-height: 18px; white-space: nowrap; color: var(--mut); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.irc__topic span { font-size: 12.5px; }
.irc__topic span:first-child { color: var(--soft); }
.irc__topic span + span::before { content: "·"; margin: 0 8px; color: var(--dim); }
.ch-tools { display: flex; flex: none; align-items: center; gap: 8px; }
.ch-state { display: inline-block; flex: none; max-width: 210px; height: 28px; padding: 0 12px 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 12px; font-weight: 550; line-height: 26px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.ch-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--dim); vertical-align: 1px; }
.ch-state[data-s=live] { color: var(--soft); }
.ch-state[data-s=live]::before { background: var(--green); box-shadow: 0 0 8px rgba(110, 231, 168, 0.8); }
.ch-state[data-s=wait]::before { background: var(--amber); }
.ch-state[data-s=off] { border-color: rgba(255, 143, 143, 0.32); background: rgba(255, 143, 143, 0.06); color: var(--red); }
.ch-state[data-s=off]::before { background: var(--red); }
.irc__pics, .ch-people { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font: inherit; font-size: 12px; font-weight: 550; color: var(--soft); white-space: nowrap; cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.irc__pics:hover, .ch-people:hover { border-color: var(--line3); background: rgba(255, 255, 255, 0.07); color: var(--hi); }
.irc__pics svg, .ch-people svg { width: 14px; height: 14px; color: var(--acc); transition: color 0.15s; }
.irc__pics[aria-pressed=false] { border-style: dashed; color: var(--mut); }
.irc__pics[aria-pressed=false] svg { color: var(--dim); }
.ch-people { display: none; }
.ch-people b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--hi); }
.ch-scrim, .ch-x { display: none; }
.chat { position: relative; flex: 1 1 0; min-height: 0; padding: 6px 0 16px; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(196, 232, 222, 0.16) transparent; }
.chat:focus-visible { outline-offset: -2px; }
.msg { position: relative; display: grid; grid-template-columns: var(--ch-av) minmax(0, 1fr); column-gap: var(--ch-gap); align-items: start; padding: 2px var(--ch-pad); font-size: 14px; line-height: 1.5; transition: background-color 0.12s; }
.msg[hidden] { display: none; }
.msg[data-nick]:not(.msg--cont) { margin-top: 11px; padding-top: 3px; }
.msg[data-nick]:hover { background: rgba(255, 255, 255, 0.028); }
.msg--new { animation: ch-in 0.3s var(--ease) backwards; }
@keyframes ch-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ch-pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
.msg__av { width: var(--ch-av); height: var(--ch-av); margin-top: 2px; border-radius: 50%; background: var(--surface3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07); object-fit: cover; }
.msg__av--txt, .irc__list .av--txt, .sys__av:not(img) { display: grid; place-items: center; background: color-mix(in srgb, var(--c, #7cf5c4) 17%, #0c1317); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #7cf5c4) 36%, transparent); color: var(--c, var(--hi)); font: 650 15px/1 var(--display); text-transform: uppercase; }
.msg__b { grid-column: 2; min-width: 0; }
.msg__h { display: flex; align-items: baseline; gap: 7px; min-width: 0; line-height: 1.4; }
.msg__h b { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 650; letter-spacing: -0.005em; text-overflow: ellipsis; white-space: nowrap; }
.msg__h b a { color: inherit; }
.msg__h b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.msg__ic { flex: none; font-size: 12px; line-height: 1; }
.msg__ic:empty, .msg__bdg:empty { display: none; }
.msg__bdg.ubadge--ic { flex: none; align-self: center; margin-left: 0; padding: 0 4px; font-size: 11px; line-height: 16px; letter-spacing: 0; cursor: default; }
.msg__h time { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.msg__x { color: var(--text); overflow-wrap: anywhere; }
.ircf { white-space: pre-wrap; }
.msg--cont > .msg__av { display: none; }
.msg--cont .msg__h { position: absolute; top: 0; left: 0; justify-content: flex-end; width: calc(var(--ch-pad) + var(--ch-av) + var(--ch-gap) - 7px); padding-top: 6px; pointer-events: none; }
.msg--cont .msg__h > :not(time) { display: none; }
.msg--cont .msg__h time { font-size: 10px; opacity: 0; visibility: hidden; transition: opacity 0.12s, visibility 0s 0.12s; }
.msg--cont:hover .msg__h time { opacity: 1; visibility: visible; transition-delay: 0s; }
.msg__x a.n { font-weight: 600; }
.msg__x a.n:hover { text-decoration: underline; text-underline-offset: 3px; }
.msg__x a.n--me { padding: 1px 5px; border-radius: 6px; background: var(--acc-soft); }
.msg__x a:not(.n):not(.msg__pic) { display: inline-block; max-width: 100%; overflow: hidden; color: var(--bmoon); text-decoration: underline; text-decoration-color: rgba(143, 203, 255, 0.36); text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; transition: text-decoration-color 0.15s, color 0.15s; }
.msg__x a:not(.n):not(.msg__pic):hover { color: #b9deff; text-decoration-color: currentColor; }
.msg__x a[href^="/"]:not(.n):not(.msg__pic) { padding: 0 8px; border: 1px solid var(--line2); border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: 13px; line-height: 19px; color: var(--soft); text-decoration: none; vertical-align: -4px; }
.msg__x a[href^="/"]:not(.n):not(.msg__pic):hover { border-color: rgba(124, 245, 196, 0.45); color: var(--hi); }
.msg__pic { position: relative; display: block; width: fit-content; max-width: 100%; margin-top: 7px; overflow: hidden; border: 1px solid var(--line2); border-radius: 12px; background: rgba(3, 6, 8, 0.5); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.9); line-height: 0; cursor: zoom-in; transition: border-color 0.15s; }
.msg__pic:hover { border-color: var(--line3); }
.msg__pic img, .msg__pic video { display: block; width: auto; height: auto; max-width: min(220px, 60cqw); max-height: 132px; }
.msg__pic--big { cursor: zoom-out; }
.msg__pic--big img, .msg__pic--big video { max-width: min(520px, 76cqw); max-height: 380px; }
.msg__cap { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 0 8px; overflow: hidden; border-radius: 999px; background: rgba(4, 8, 10, 0.78); font-size: 10.5px; line-height: 18px; color: var(--soft); text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity 0.15s; }
.msg__pic:hover .msg__cap, .msg__pic:focus-visible .msg__cap { opacity: 1; }
.chat--nopics .msg__pic { display: none; }
.msg--hl { background: linear-gradient(90deg, rgba(124, 245, 196, 0.1), rgba(124, 245, 196, 0.025) 70%); box-shadow: inset 2px 0 0 var(--acc); }
.msg--hl[data-nick]:hover { background: linear-gradient(90deg, rgba(124, 245, 196, 0.13), rgba(124, 245, 196, 0.04) 70%); }
.msg--flash { background: var(--acc-soft); transition: background-color 0.6s; }
.msg__rq { display: block; max-width: 100%; margin: 1px 0 2px; padding: 0; overflow: hidden; border: 0; background: none; font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--mut); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.msg__rq::before { content: ""; display: inline-block; width: 15px; height: 8px; margin: 0 7px 0 2px; border-bottom: 1.5px solid var(--line3); border-left: 1.5px solid var(--line3); border-bottom-left-radius: 7px; vertical-align: 3px; }
button.msg__rq { cursor: pointer; }
button.msg__rq:hover { color: var(--soft); }
.msg__rq b { font-weight: 600; }
.msg__rx { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
.rx { height: 24px; padding: 0 9px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 22px; color: var(--soft); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.rx:hover { border-color: rgba(124, 245, 196, 0.5); background: rgba(255, 255, 255, 0.07); }
.rx--me { border-color: rgba(124, 245, 196, 0.5); background: var(--acc-soft); color: var(--hi); cursor: default; }
.msg__acts, .msg__pick { position: absolute; z-index: 3; top: -24px; right: var(--ch-pad); display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: 12px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.msg[data-nick]:not(.msg--cont) > .msg__acts, .msg[data-nick]:not(.msg--cont) > .msg__pick { top: -14px; }
.msg__pick { right: calc(var(--ch-pad) + 110px); }
.msg__acts button, .msg__pick button { display: grid; place-items: center; width: 30px; height: 28px; padding: 0; border: 0; border-radius: 9px; background: none; font-size: 15px; line-height: 1; color: var(--soft); cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.msg__acts button:hover, .msg__pick button:hover { background: rgba(255, 255, 255, 0.1); color: var(--hi); }
.msg__acts svg { width: 15px; height: 15px; }
.msg--bot { font-size: 13px; }
.msg--bot[data-nick]:not(.msg--cont) { margin-top: 13px; }
.msg--bot > .msg__av { width: 24px; height: 24px; margin-top: 0; justify-self: center; font-size: 11px; }
.msg--bot .msg__h b { font-size: 12.5px; }
.msg--bot .msg__h time { margin-left: auto; padding-left: 10px; }
.msg--bot .msg__x { padding-right: 68px; color: var(--mut); }
.msg--bot .msg__x .num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--soft); }
.msg--bot .msg__x .amt { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--moon); }
.msg--bot.msg--cont .msg__h { right: var(--ch-pad); left: auto; width: auto; padding-top: 4px; }
.msg--bot.msg--cont .msg__h time { font-size: 11px; opacity: 1; visibility: visible; }
.msg--bot.msg--hl .msg__x, .msg--bot.msg--only .msg__x { color: var(--text); }
.msg--action[data-nick] { margin-top: 7px; }
.msg--action > .msg__av { width: 22px; height: 22px; margin-top: 0; justify-self: end; font-size: 10px; }
.msg--action .msg__b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; font-style: italic; }
.msg--action .msg__h { display: contents; }
.msg--action .msg__x { order: 2; color: var(--soft); }
.msg--action .msg__h time { order: 3; font-style: normal; }
.msg--action .msg__rq { order: -1; flex-basis: 100%; }
.msg--action .msg__rx { order: 4; flex-basis: 100%; }
.msg--info, .ch-day { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 0 var(--ch-pad); font-size: 11.5px; line-height: 1.4; color: var(--mut); text-align: center; }
.msg--info::before, .msg--info::after, .ch-day::before, .ch-day::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line2)); }
.msg--info::after, .ch-day::after { background: linear-gradient(90deg, var(--line2), transparent); }
.ch-day span { font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.chat > .ch-day:first-child { margin-top: 8px; }
.msg--pm .msg__b, .msg--only .msg__b { justify-self: start; max-width: 100%; padding: 7px 13px 9px; border: 1px solid color-mix(in srgb, var(--lav) 30%, transparent); border-radius: 5px 16px 16px 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--lav) 13%, transparent), color-mix(in srgb, var(--lav) 6%, transparent)); }
.msg--pm .msg__h, .msg--only .msg__h { flex-wrap: wrap; row-gap: 3px; margin-bottom: 2px; }
.msg--pmn .msg__b { border-color: color-mix(in srgb, var(--bmoon) 30%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--bmoon) 12%, transparent), color-mix(in srgb, var(--bmoon) 5%, transparent)); }
.msg--only .msg__b { border-color: var(--line2); border-style: dashed; background: rgba(255, 255, 255, 0.03); }
.msg--only .msg__x { padding-right: 0; }
.msg--pm.msg--hl, .msg--only.msg--hl { background: none; box-shadow: none; }
.msg__pm { display: inline-flex; flex: none; align-items: center; align-self: center; gap: 5px; height: 19px; padding: 0 9px 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--lav) 20%, transparent); font-size: 10.5px; font-weight: 650; letter-spacing: 0.03em; line-height: 19px; color: #e2d4ff; white-space: nowrap; }
.msg__pm svg { width: 11px; height: 11px; }
.msg__pm a { margin-left: -1px; font-weight: 700; }
.msg--pmn .msg__pm { background: color-mix(in srgb, var(--bmoon) 18%, transparent); color: #cfe8ff; }
.msg__pm--only { padding: 0 9px; background: rgba(255, 255, 255, 0.08); color: var(--soft); }
.msg__pmr { flex: none; align-self: center; height: 22px; margin-left: auto; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--lav) 42%, transparent); border-radius: 999px; background: none; font: inherit; font-size: 11px; font-weight: 600; line-height: 20px; color: #e2d4ff; cursor: pointer; transition: background-color 0.15s; }
.msg__pmr:hover { background: color-mix(in srgb, var(--lav) 18%, transparent); }
.msg--sys { display: block; max-width: 660px; margin: 10px var(--ch-pad) 4px calc(var(--ch-pad) + var(--ch-av) + var(--ch-gap)); padding: 10px 15px 11px; border: 1px solid var(--line2); border-radius: 6px 18px 18px 18px; background: var(--card-hi); box-shadow: var(--e1); font-size: 13px; line-height: 1.5; color: var(--soft); animation: ch-in 0.28s var(--ease) backwards; }
.msg--sys-err { border-color: rgba(244, 222, 140, 0.28); background: linear-gradient(180deg, rgba(244, 222, 140, 0.07), rgba(244, 222, 140, 0.025)); }
.sys__h { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.sys__h b { min-width: 0; overflow: hidden; font: 650 13.5px/1.3 var(--display); letter-spacing: -0.01em; color: var(--hi); text-overflow: ellipsis; white-space: nowrap; }
.sys__ic { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--acc-soft); font-size: 11.5px; line-height: 1; color: var(--acc); }
.msg--sys-err .sys__ic { background: rgba(244, 222, 140, 0.15); font-weight: 700; color: var(--amber); }
.sys__only { flex: none; margin-left: auto; padding-left: 10px; font-size: 11px; color: var(--mut); white-space: nowrap; }
.sys__r { line-height: 1.55; overflow-wrap: anywhere; }
.sys__dim { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--mut); }
.sys__kv { display: flex; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); }
.sys__kv:first-of-type { border-top: 0; }
.sys__kv span { flex: none; width: 132px; color: var(--mut); }
.sys__kv b { min-width: 0; font-weight: 550; color: var(--text); overflow-wrap: anywhere; }
.sys__cmd { display: grid; grid-template-columns: 96px minmax(0, 150px) minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 3px 0; }
.sys__cmd b { font: 500 12.5px var(--mono); color: var(--acc); }
.sys__arg { overflow: hidden; font: 11.5px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.sys__cmd small { font-size: 12.5px; color: var(--mut); }
.sys__names { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sys__names a { font-weight: 600; }
.sys__who { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sys__av { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.sys__av:not(img) { font-size: 17px; }
.sys__whon { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.25; }
.sys__whon a { font: 700 16px var(--display); letter-spacing: -0.02em; }
.sys__whon small { font: var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.sys__link { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--acc); }
.sys__link:hover { color: var(--acc-hi); }
.chat__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 100%; padding: 26px var(--ch-pad); font-size: 13.5px; color: var(--mut); text-align: center; }
.chat__empty::before { content: ""; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: radial-gradient(circle at 68% 34%, rgba(7, 11, 14, 0.98) 0 15px, transparent 16px), radial-gradient(circle at 50% 50%, var(--moon), #cfcaa0); box-shadow: 0 0 34px rgba(244, 241, 208, 0.22); opacity: 0.9; }
.chat__empty b { font: 650 17px/1.25 var(--display); letter-spacing: -0.02em; color: var(--hi); }
.ch-banner { flex: none; margin: 0 var(--ch-pad) 8px; padding: 8px 14px; border: 1px solid rgba(244, 222, 140, 0.28); border-radius: 12px; background: rgba(244, 222, 140, 0.06); font-size: 12.5px; line-height: 1.45; color: var(--amber); }
.ch-banner[hidden] { display: none; }
.ch-banner[data-s=off] { border-color: rgba(255, 143, 143, 0.32); background: rgba(255, 143, 143, 0.07); color: var(--red); }
.chat__reply { display: flex; flex: none; align-items: center; gap: 7px; min-width: 0; margin: 0 var(--ch-pad); padding: 7px 7px 7px 14px; border: 1px solid var(--line2); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, 0.045); font-size: 12.5px; color: var(--mut); }
.chat__reply[hidden] { display: none; }
.chat__reply svg { width: 13px; height: 13px; color: var(--acc); }
.chat__reply b { flex: none; font-weight: 650; color: var(--hi); }
.chat__reply span { flex: none; }
.chat__reply .chat__reply-x { flex: 1; min-width: 0; overflow: hidden; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.chat__reply button { display: grid; flex: none; place-items: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mut); cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.chat__reply button:hover { background: rgba(255, 255, 255, 0.09); color: var(--hi); }
.chat__reply button svg { color: inherit; }
.chat__f { position: relative; display: flex; flex: none; align-items: center; gap: 8px; margin: 0 var(--ch-pad) 16px; padding: 5px 5px 5px 16px; border: 1px solid var(--line2); border-radius: 18px; background: rgba(3, 6, 8, 0.55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, opacity 0.2s; }
.chat__f:hover { border-color: var(--line3); }
.chat__f:focus-within { border-color: rgba(124, 245, 196, 0.62); background: rgba(3, 6, 8, 0.74); box-shadow: 0 0 0 4px rgba(124, 245, 196, 0.11), inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.chat__reply:not([hidden]) + .chat__f { border-top-left-radius: 0; border-top-right-radius: 0; }
.chat__f input { flex: 1; min-width: 0; height: 38px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; outline: 0; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.chat__f input::placeholder { color: var(--dim); }
.chat__f input:placeholder-shown { text-overflow: ellipsis; }
.chat__f input::-webkit-search-cancel-button, .chat__f input::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.chat__f > button { display: grid; flex: none; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 13px; background: rgba(255, 255, 255, 0.07); color: var(--mut); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.2s, transform 0.12s; }
.chat__f > button svg { width: 16px; height: 16px; }
.chat__f > button:hover { background: rgba(255, 255, 255, 0.12); color: var(--hi); }
.chat__f > button:active { transform: scale(0.95); }
.chat__f:has(input:not(:placeholder-shown)) > button { background: var(--cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 8px 20px -10px rgba(124, 245, 196, 0.7); color: var(--on-acc); }
.chat__f:has(input:not(:placeholder-shown)) > button:hover { background: var(--cta-hi); }
.irc[data-chat=off] .chat__f { opacity: 0.55; }
.chat__err { flex: none; margin: -9px calc(var(--ch-pad) + 16px) 10px; font-size: 12px; color: var(--red); }
.chat__cmds { position: absolute; z-index: 20; right: -1px; bottom: calc(100% + 8px); left: -1px; display: flex; flex-direction: column; gap: 1px; max-height: min(300px, 40vh); padding: 6px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line2); border-radius: 18px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); box-shadow: var(--e3); scrollbar-width: thin; animation: ch-pop 0.16s var(--ease); }
.chat__cmds[hidden] { display: none; }
.chat__cmds::before { content: "Commands"; flex: none; padding: 7px 10px 6px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--mut); }
.chat__cmd { display: grid; flex: none; grid-template-columns: 98px minmax(0, 170px) minmax(0, 1fr); align-items: baseline; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: 13px; color: var(--soft); text-align: left; cursor: pointer; transition: background-color 0.1s; }
.chat__cmd b { overflow: hidden; font: 500 13px var(--mono); color: var(--acc); text-overflow: ellipsis; white-space: nowrap; }
.chat__cmd-a { overflow: hidden; font: 12px var(--mono); color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.chat__cmd small { overflow: hidden; font-size: 12.5px; color: var(--mut); text-overflow: ellipsis; white-space: nowrap; }
.chat__cmd:hover { background: rgba(255, 255, 255, 0.05); }
.chat__cmd.is-on { background: rgba(124, 245, 196, 0.1); box-shadow: inset 0 0 0 1px rgba(124, 245, 196, 0.26); }
.chat__cmd.is-on small { color: var(--soft); }
.irc__nicks { display: flex; flex: none; flex-direction: column; width: 244px; min-width: 0; min-height: 0; border-left: 1px solid var(--line); background: rgba(3, 6, 8, 0.3); }
.irc__nicks .irc__h { padding: 10px 14px 10px 18px; }
.irc__nicks .irc__h h2 { font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.irc__nicks .irc__h [data-irc-count] { min-width: 26px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 20px; color: var(--soft); text-align: center; }
.irc__list { flex: 1 1 0; min-height: 0; padding: 2px 8px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(196, 232, 222, 0.16) transparent; }
.irc__list:empty::before { content: "The list fills in once the chat is connected."; display: block; padding: 16px 10px; font-size: 12.5px; line-height: 1.5; color: var(--mut); }
.mgrp { margin-top: 14px; }
.mgrp h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 10px 6px; font: var(--label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--mut); }
.mgrp h3 span { font-weight: 600; letter-spacing: 0; color: var(--dim); }
.mgrp h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.mgrp__more { margin: 0; padding: 10px 10px 4px; font-size: 12px; color: var(--mut); }
.irc__list .member { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 12px; font-size: 13.5px; font-weight: 550; line-height: 28px; color: var(--soft); transition: background-color 0.12s; }
.irc__list .member:hover { background: rgba(255, 255, 255, 0.055); }
.irc__list .member > .av { flex: none; align-self: flex-start; width: 28px; height: 28px; font-size: 12px; }
.irc__list .member::after { content: ""; position: absolute; top: 25px; left: 30px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2.5px #090e12; }
.irc__list .member__rank { margin-right: 2px; font-style: normal; font-weight: 600; opacity: 0.55; }
.irc__list .member__ic { flex: none; margin-left: auto; font-size: 12px; line-height: 1; }
.irc__list .member .og { flex: none; margin-left: 0; padding: 0 5px; font-size: 9px; line-height: 15px; }
.irc__list .member .ubadge { margin-left: 0; padding: 0 6px; font-size: 9px; line-height: 15px; }
.irc__list .member__col { gap: 0; padding-bottom: 3px; }
.irc__list .member__line { width: 100%; }
@container chat (max-width: 660px) {
.irc__main { --ch-pad: 13px; --ch-av: 32px; --ch-gap: 10px; }
.ch-title { flex-direction: column; align-items: stretch; }
.irc__topic { flex: none; }
.irc__pics { width: 28px; padding: 0; justify-content: center; }
.irc__pics span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ch-people { display: inline-flex; }
.ch-state { max-width: 128px; }
.chat__f input { font-size: 16px; }
.msg__pick { top: 14px; right: var(--ch-pad); }
.msg[data-nick]:not(.msg--cont) > .msg__pick { top: 24px; }
.msg--sys { margin-left: var(--ch-pad); }
.msg--bot .msg__x { padding-right: 58px; }
.sys__cmd, .chat__cmd { grid-template-columns: 88px minmax(0, 1fr); }
.sys__arg, .chat__cmd-a { display: none; }
.sys__kv span { width: 100px; }
.irc__nicks { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: min(288px, 86%); border-left-color: var(--line2); background: #0a1014; box-shadow: -30px 0 60px rgba(0, 0, 0, 0.6); transform: translateX(104%); visibility: hidden; transition: transform 0.26s var(--ease), visibility 0s 0.26s; }
.is-people .irc__nicks { transform: none; visibility: visible; transition: transform 0.26s var(--ease); }
.ch-scrim { position: absolute; z-index: 7; inset: 0; display: block; background: rgba(2, 4, 6, 0.58); opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0s 0.26s; }
.is-people .ch-scrim { opacity: 1; visibility: visible; transition: opacity 0.26s ease; }
.ch-x { display: grid; flex: none; place-items: center; width: 28px; height: 28px; margin: 0 -4px 0 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: var(--soft); cursor: pointer; }
.ch-x svg { width: 13px; height: 13px; }
.irc__nicks .irc__h [data-irc-count] { margin-left: auto; }
.irc__list .member::after { box-shadow: 0 0 0 2.5px #0a1014; }
}
@container chat (max-width: 400px) {
.ch-state { width: 28px; max-width: none; padding: 0; font-size: 0; text-align: center; }
.ch-state::before { margin: 0; vertical-align: middle; }
}
.ch-page { display: grid; grid-template-columns: 292px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 30px; height: calc(100dvh - var(--ch-top, 90px) - 22px); min-height: 460px; }
.ch-page > .irc { min-height: 0; }
.ch-page .irc__main { --ch-pad: 22px; --ch-av: 38px; --ch-gap: 14px; }
.ch-page .irc__nicks { width: 264px; }
.ch-page .irc .irc__h { min-height: 64px; }
.ch-page .ch-title { flex-direction: column; align-items: stretch; }
.ch-page .irc__topic { flex: none; }
.ch-side { position: relative; display: flex; flex-direction: column; gap: 24px; min-height: 0; padding: 8px 2px 4px; overflow-y: auto; scrollbar-width: none; }
.ch-side::-webkit-scrollbar { display: none; }
.ch-side__sky { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 12.5px; line-height: 1.4; color: var(--mut); }
.ch-side__sky .moon { flex: none; width: 38px; height: 38px; filter: drop-shadow(0 0 14px rgba(244, 241, 208, 0.42)); }
.ch-side h1 { margin: 0; font: 700 32px/1.06 var(--display); letter-spacing: -0.043em; color: var(--hi); }
.ch-side__lede { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--soft); text-wrap: pretty; }
.ch-side__sec h2 { margin: 0 0 9px; font: var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.ch-chans, .ch-tips { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ch-chans { gap: 4px; margin: 0 -8px; }
.ch-chans li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; padding: 9px 10px; border-radius: 14px; }
.ch-chans li.is-on { background: linear-gradient(90deg, rgba(124, 245, 196, 0.13), rgba(124, 245, 196, 0.02)); box-shadow: inset 2px 0 0 var(--acc); }
.ch-chans i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font: 600 16px/1 var(--display); font-style: normal; color: var(--mut); }
.ch-chans li.is-on i { background: var(--acc-soft); color: var(--acc); }
.ch-chans b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--soft); }
.ch-chans li.is-on b { color: var(--hi); }
.ch-chans small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--mut); }
.ch-tips { gap: 8px; }
.ch-tips li { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; color: var(--soft); }
.ch-tips kbd, .ch-tips code { flex: none; min-width: 46px; padding: 0 7px; border: 1px solid var(--line2); border-radius: 7px; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35); font: 11.5px/21px var(--mono); color: var(--hi); text-align: center; }
.ch-side__pay { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 13px 15px; border: 1px solid rgba(244, 241, 208, 0.16); border-radius: 16px; background: linear-gradient(180deg, rgba(244, 241, 208, 0.06), rgba(244, 241, 208, 0.02)); font-size: 13px; line-height: 1.5; color: var(--soft); }
.ch-side__pay svg { width: 16px; height: 16px; margin-top: 2px; color: var(--moon); }
.ch-side__more { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; font-size: 13px; font-weight: 600; color: var(--acc); transition: color 0.15s; }
.ch-side__more:hover { color: var(--acc-hi); }
.ch-side__more svg { width: 13px; height: 13px; }
@media (max-width: 1260px) {
.ch-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.ch-side { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 2px; overflow: visible; }
.ch-side__sky, .ch-side__lede, .ch-side__sec, .ch-side__pay { display: none; }
.ch-side h1 { font-size: 24px; }
.ch-side__more { align-self: auto; }
}
@media (max-width: 700px) {
.ch-page { grid-template-rows: minmax(0, 1fr); gap: 0; height: calc(100dvh - var(--ch-top, 150px) - 14px); min-height: 380px; }
.ch-side { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ch-side__more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.msg--new, .msg--sys, .chat__cmds { animation: none; }
.irc__nicks, .ch-scrim { transition: none; }
}