:root {
  --bg: #121418;
  --bg-2: #0e1013;
  --panel: #1a1d22;
  --panel-2: #22262c;
  --line: #2c3139;
  --line-2: #3b424c;
  --text: #ece7de;
  --text-2: #cdc8be;
  --muted: #958f85;
  --accent: #e07a2c;
  --accent-hi: #ef8b3d;
  --accent-ink: #17110b;
  --accent-soft: rgba(224, 122, 44, .14);
  --brass: #c9a24a;
  --good: #7fb77a;
  --warn: #d9a441;
  --bad: #d7695b;
  --ai: #a9b6d8;
  --warn-bg: #33290f;
  --warn-text: #f1d9a0;
  --bad-bg: #3a1f1c;
  --shadow: 0 18px 40px -12px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --c1: #d6675a;
  --c2: #d4ae4f;
  --c3: #9fadbb;
  --c4: #e88a45;
  --c5: #86bf73;
  --c6: #5eaed1;
  --c7: #b691dc;
  --c8: #62c3ae;
  --chrome: #0c0d10;
  --chrome-2: #15171b;
  --chrome-line: #262a31;
  --chrome-text: #e3ddd2;
  --chrome-muted: #8f897f;
  --viz-views: #d06a22;
  --viz-visitors: #2f93e0;
  --radius: 8px;
  --radius-s: 5px;
  --wrap: 1200px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f1eb;
  --bg-2: #ebe6dd;
  --panel: #ffffff;
  --panel-2: #f1ede6;
  --line: #ddd6ca;
  --line-2: #c5bdaf;
  --text: #1c1e22;
  --text-2: #383b41;
  --muted: #6b665d;
  --accent: #b5580f;
  --accent-hi: #9c4a0a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(181, 88, 15, .1);
  --brass: #86661a;
  --good: #2e7a37;
  --warn: #8a6200;
  --bad: #b1392b;
  --ai: #45588c;
  --warn-bg: #fbf0d4;
  --warn-text: #5a4200;
  --bad-bg: #fbe5e1;
  --shadow: 0 18px 40px -14px rgba(40, 30, 15, .28), 0 2px 6px rgba(40, 30, 15, .08);
  --c1: #b8483b;
  --c2: #9a7414;
  --c3: #5b6978;
  --c4: #c0621b;
  --c5: #3f8a35;
  --c6: #2a7ba1;
  --c7: #7d55a8;
  --c8: #22826d;
  --viz-views: #b5580f;
  --viz-visitors: #1f72c9;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.45rem; margin-top: 1.8em; }
h3 { font-size: 1.15rem; }
h2 small, h1 small, h3 small { color: var(--muted); font-weight: 500; font-size: .7em; font-family: var(--mono); letter-spacing: 0; }
p { margin: 0 0 1em; }
code, pre { font-family: var(--mono); font-size: .86em; }
code { background: var(--panel-2); border: 1px solid var(--line); padding: .05em .35em; border-radius: 4px; word-break: break-all; }
pre { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; white-space: pre-wrap; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.mono { font-family: var(--mono); font-size: .9em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.warn { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn-text); padding: .7rem .95rem; border-radius: var(--radius); }
.warn a { color: inherit; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: 16px; top: -40px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: .4rem .8rem; border-radius: var(--radius-s); }
.skip:focus { top: 8px; }

header.site { --c1: #d6675a; --c2: #d4ae4f; --c3: #9fadbb; --c4: #e88a45; --c5: #86bf73; --c6: #5eaed1; --c7: #b691dc; --c8: #62c3ae; background: var(--chrome); color: var(--chrome-text); border-bottom: 1px solid var(--chrome-line); position: relative; z-index: 20; }
header.site .bar { max-width: var(--wrap); margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; gap: 1rem; }
.brand { display: block; flex: 0 1 auto; min-width: 0; }
.brand img { display: block; height: 20px; width: auto; }
.util { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.util a { color: var(--chrome-muted); font-size: .92rem; font-weight: 500; padding: .35rem .6rem; border-radius: var(--radius-s); white-space: nowrap; }
.util a:hover { color: var(--chrome-text); background: var(--chrome-2); text-decoration: none; }
.util a[aria-current] { color: var(--chrome-text); }
.util a.admin { color: #c9a24a; }
.util .list-cta { background: #e07a2c; border-color: #e07a2c; color: #17110b; margin-left: .5rem; padding: .4rem .85rem; }
.util .list-cta:hover { color: #17110b; background: #ef8b3d; border-color: #ef8b3d; }
.theme-toggle, .menu-toggle, .sound-toggle { background: none; border: 1px solid transparent; color: var(--chrome-muted); border-radius: var(--radius-s); cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem; }
.theme-toggle:hover, .menu-toggle:hover, .sound-toggle:hover { color: var(--chrome-text); border-color: var(--chrome-line); }
.theme-toggle svg, .menu-toggle svg, .sound-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
.menu-toggle { display: none; }
.pack-trigger { margin-left: auto; background: none; border: 1px solid var(--chrome-line); color: var(--chrome-text); border-radius: var(--radius-s); cursor: pointer; font: 600 .88rem/1 var(--font); display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem; }
.pack-trigger svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pack-trigger:hover { border-color: var(--chrome-muted); }
.pack-trigger.on { border-color: var(--accent); color: var(--accent-hi); background: rgba(224, 122, 44, .12); }
.sound-toggle .spk { stroke-linejoin: round; }
.sound-toggle .s-w1, .sound-toggle .s-w2, .sound-toggle .s-lbl { display: none; }
:root[data-sound] .sound-toggle .s-x { display: none; }
:root[data-sound] .sound-toggle .s-w1, :root[data-sound="music"] .sound-toggle .s-w2 { display: inline; }
:root[data-sound] .sound-toggle { color: var(--chrome-text); }
:root[data-sound="music"] .sound-toggle { color: #ef8b3d; }
html:not(.js) .sound-toggle { display: none; }
.toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; max-width: calc(100vw - 32px); width: max-content; padding: .6rem .95rem; border: 1px solid var(--chrome-line); border-left: 3px solid #e07a2c; border-radius: var(--radius-s); background: rgba(12, 13, 16, .94); color: var(--chrome-text); font-size: .9rem; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.cats { border-top: 1px solid var(--chrome-line); background: var(--chrome-2); position: relative; }
.cats-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cats-fx canvas { display: block; width: 100%; height: 100%; }
.cat-row { position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0 8px; max-width: var(--wrap); display: flex; justify-content: space-between; }
@media (min-width: 1460px) { .cat-row { max-width: 1460px; } }
.cat { position: relative; }
.cat-btn { font: 600 .93rem/1 var(--display); letter-spacing: .02em; color: var(--chrome-text); background: none; border: 0; cursor: pointer; padding: .8rem .55rem .75rem; display: inline-flex; align-items: center; gap: .4rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.cat-btn .full { display: none; }
.cat-btn .n { font: 500 .72rem/1 var(--mono); color: var(--chrome-muted); }
.cat-btn .chev { width: 10px; height: 10px; fill: none; stroke: var(--chrome-muted); stroke-width: 1.6; transition: transform .15s; }
.cat-btn:hover, .cat-btn[aria-expanded="true"] { color: #fff; }
.cat-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cat.on .cat-btn, .cat-btn[aria-expanded="true"] { border-bottom-color: var(--cat); }
.cat .cat-btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cat); flex: none; }
.cat .cat-btn.has-icon::before { display: none; }
.cat-icon { width: 22px; height: 22px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }

.c1 { --cat: var(--c1); } .c2 { --cat: var(--c2); } .c3 { --cat: var(--c3); } .c4 { --cat: var(--c4); }
.c5 { --cat: var(--c5); } .c6 { --cat: var(--c6); } .c7 { --cat: var(--c7); } .c8 { --cat: var(--c8); }

.panel { position: absolute; top: 100%; left: 0; width: 460px; max-width: calc(100vw - 32px); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-top: 2px solid var(--cat); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); padding: .5rem; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; z-index: 30; }
.cat.end .panel { left: auto; right: 0; }
.cat.open .panel, html:not(.js) .cat:hover .panel, html:not(.js) .cat:focus-within .panel { visibility: visible; opacity: 1; transform: none; transition: opacity .14s ease, transform .14s ease, visibility 0s; }
.panel-head { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border-radius: var(--radius-s); color: var(--text); font: 600 1.02rem/1.2 var(--display); border-bottom: 1px solid var(--line); margin-bottom: .35rem; }
.panel-head .dot, .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.panel-head .t { flex: 1; }
.panel-head .n, .subs .n, .subnav .n { font: 500 .75rem/1 var(--mono); color: var(--muted); }
.panel-head:hover { background: var(--panel-2); text-decoration: none; }
.subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px .25rem; }
.subs a { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .42rem .7rem; border-radius: var(--radius-s); color: var(--text-2); font-size: .93rem; }
.subs a:hover, .subs a:focus-visible { background: var(--panel-2); color: var(--text); text-decoration: none; }
.subs a:hover .n { color: var(--cat); }
.subs a.zero { color: var(--muted); }
.subs a.zero .n { opacity: .6; }

main { max-width: var(--wrap); margin: 0 auto; padding: 1.6rem 16px 3.5rem; }
footer.site { border-top: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: .86rem; }
.foot-inner { max-width: var(--wrap); margin: 0 auto; padding: 1.6rem 16px 2.4rem; }
.foot-mark { height: 14px; width: auto; display: block; margin-bottom: .9rem; opacity: .85; }
.foot-inner p { max-width: 88ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem 1rem; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--panel-2); color: var(--text); font: 500 .97rem/1.25 var(--font); cursor: pointer; text-align: center; }
.btn:hover { text-decoration: none; border-color: var(--muted); }
.btn small { font-family: var(--mono); font-size: .78em; opacity: .8; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn.small { padding: .3rem .6rem; font-size: .85rem; }
form.inline { display: inline; margin-left: .6rem; vertical-align: middle; }

.hero { padding: 1.5rem 0 .5rem; max-width: 720px; }
.hero.art { position: relative; isolation: isolate; overflow: hidden; max-width: none; margin: -1.6rem calc(50% - 50vw) 0; padding: 4.4rem calc(50vw - 50%) 3rem; background: #0c0d10; color: #ece7de; }
.hero.art > * { max-width: 720px; }
.hero.art::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 13, 16, .95) 0%, rgba(12, 13, 16, .86) 38%, rgba(12, 13, 16, .5) 70%, rgba(12, 13, 16, .2) 100%), linear-gradient(0deg, rgba(12, 13, 16, .9) 0%, rgba(12, 13, 16, 0) 38%); }
.hero.art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #e07a2c 0, rgba(224, 122, 44, .35) 45%, transparent 80%); }
.hero.art > .art-bg { position: absolute; inset: 0; z-index: -2; max-width: none; overflow: hidden; }
.art-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% 42%; }
.art-bg::after { content: ""; position: absolute; inset: -20% 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 196, 120, .16) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .art-bg img { transform-origin: 72% 45%; animation: art-drift 48s ease-in-out infinite alternate; }
  .art-bg::after { animation: art-sheen 2.4s cubic-bezier(.3, .1, .2, 1) .35s 1 both; }
}
@keyframes art-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate3d(-1.2%, .6%, 0); } }
@keyframes art-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
html.tab-hidden *, html.tab-hidden *::before, html.tab-hidden *::after { animation-play-state: paused !important; }
.hero h1 { font-size: 2.7rem; font-weight: 700; }
.hero.art .lead { color: #d4cec4; }
.hero.art .note { color: #a39d93; }
.hero.art .note a { color: #ef8b3d; }
.hero.art .btn:not(.primary) { background: rgba(20, 22, 26, .55); border-color: rgba(236, 231, 222, .22); color: #ece7de; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero.art .btn:not(.primary):hover { border-color: rgba(236, 231, 222, .45); }
.hero.art .btn.primary { background: #e07a2c; border-color: #e07a2c; color: #17110b; }
.hero.art.has-feature { display: grid; grid-template-columns: minmax(0, 720px) minmax(300px, 390px); justify-content: space-between; align-items: center; column-gap: clamp(2rem, 4vw, 4.5rem); }
.hero.art.has-feature > .feature { max-width: none; }
.feature { position: relative; display: flex; flex-direction: column; min-width: 0; background: color-mix(in srgb, var(--panel) 94%, transparent); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .15s ease, transform .15s ease; }
.feature:hover { text-decoration: none; border-color: var(--accent); }
.feature:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.feature-media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--chrome); border-bottom: 1px solid var(--line-2); overflow: hidden; }
.feature-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-art { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: #1c1612; background-repeat: repeat; background-size: 192px; }
.feature-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--cat, var(--accent)) 42%, transparent) 0, transparent 58%), linear-gradient(180deg, rgba(12, 13, 16, .1) 0%, rgba(12, 13, 16, .72) 100%); }
.feature-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--cat, var(--accent)) 0, color-mix(in srgb, var(--cat, var(--accent)) 35%, transparent) 50%, transparent 85%); }
.feature-icon { position: relative; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .65)); }
.feature-eyebrow { position: absolute; left: .75rem; top: .75rem; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: .38rem .55rem; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.feature-body { display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; }
.feature-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-width: 0; }
.feature-meta .pill { min-width: 0; }
.feature-price { flex: none; font: 600 .85rem/1 var(--display); letter-spacing: .03em; padding: .3rem .6rem; border-radius: 999px; border: 1px solid currentColor; }
.feature-price.free { color: var(--good); }
.feature-price.paid { color: var(--brass); }
.feature-name { margin: .2rem 0 0; font-size: 1.55rem; color: var(--text); overflow-wrap: anywhere; }
.feature-by { color: var(--muted); font-size: .9rem; }
.feature-by .badge { margin-left: .25rem; vertical-align: 1px; }
.feature-desc { color: var(--text-2); font-size: .95rem; line-height: 1.45; }
.feature-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .4rem; }
.feature-foot .st { white-space: normal; }
.feature-foot .feature-cta { margin-left: auto; }
.hero.art .feature:hover .feature-cta { background: #ef8b3d; border-color: #ef8b3d; }
@media (prefers-reduced-motion: no-preference) { .feature:hover { transform: translateY(-2px); } }
@media (max-width: 1100px) {
  .hero.art.has-feature { grid-template-columns: minmax(0, 1fr); }
  .hero.art.has-feature > .feature { margin-top: 1.4rem; max-width: 760px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .feature { flex-direction: row; }
  .feature-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 190px; border-bottom: 0; border-right: 1px solid var(--line-2); }
  .feature-body { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .feature-media { aspect-ratio: 2 / 1; }
  .feature-icon { width: 80px; height: 80px; }
  .feature-name { font-size: 1.35rem; }
}
.lead { font-size: 1.1rem; color: var(--text-2); max-width: 70ch; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.2rem 0; }
.note { color: var(--muted); max-width: 70ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0; }
.facts div { background: var(--panel); padding: .95rem 1.05rem; display: flex; flex-direction: column; gap: .2rem; }
.facts strong { color: var(--brass); font-family: var(--display); font-size: 1.08rem; }
.facts span { color: var(--muted); font-size: .92rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; font-size: .88rem; color: var(--muted); margin: 0 0 .7rem; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-2); }
.crumbs .sep { opacity: .5; }

.page-head { position: relative; margin: -1.6rem calc(50% - 50vw) 0; padding: 2rem calc(50vw - 50%) 1.5rem; border-bottom: 1px solid var(--chrome-line); color: var(--chrome-text); background: linear-gradient(90deg, rgba(12, 13, 16, .96) 0%, rgba(12, 13, 16, .88) 45%, rgba(12, 13, 16, .45) 100%), url("hero.jpg") right 38% / cover no-repeat, var(--chrome); background: linear-gradient(90deg, rgba(12, 13, 16, .96) 0%, rgba(12, 13, 16, .88) 45%, rgba(12, 13, 16, .45) 100%), image-set(url("art/hero.webp") type("image/webp"), url("hero.jpg") type("image/jpeg")) right 42% / cover no-repeat, var(--chrome); overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 140% at 92% 50%, var(--cat, #e07a2c), transparent 70%); opacity: .16; pointer-events: none; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--cat, var(--accent)) 0, transparent 70%); }
.page-head h1 { font-size: 2.3rem; font-weight: 700; margin-bottom: .45rem; max-width: 26ch; }
.page-head .crumbs, .page-head .crumbs a, .page-head > p.muted { color: var(--chrome-muted); }
.page-head .crumbs a:hover, .page-head .crumbs [aria-current] { color: var(--chrome-text); }
.page-head > p.muted { margin: 0; }
.page-head .cat-intro { margin: 0 0 .6rem; max-width: 62ch; color: var(--chrome-text); font-size: 1.02rem; line-height: 1.45; }
.readout { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: 0 0 .5rem; font: 400 .85rem/1.4 var(--mono); color: var(--chrome-muted); }
.readout b { color: var(--chrome-text); font-weight: 500; }
.page-head .readout b { color: #fff; }

.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0; }
.subnav a { display: inline-flex; align-items: baseline; gap: .45rem; padding: .32rem .75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: var(--panel); font-size: .9rem; }
.subnav a:hover { border-color: var(--line-2); color: var(--text); text-decoration: none; }
.subnav a[aria-current] { border-color: var(--cat, var(--accent)); color: var(--text); background: var(--accent-soft); }
.subnav a.zero { color: var(--muted); }

.instrument { display: flex; align-items: stretch; margin: 1.2rem 0 .8rem; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset; }
.instrument:focus-within { border-color: var(--muted); }
.instrument .search { flex: 1 1 260px; display: flex; align-items: center; gap: .55rem; padding: 0 .9rem; min-width: 0; }
.instrument .search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; }
.instrument input[type=search] { border: 0; background: none; padding: .8rem 0; width: 100%; min-width: 0; font-size: 1rem; }
.instrument input[type=search]:focus { outline: none; }
.seg { border: 0; border-radius: 0; border-left: 1px solid var(--line); margin: 0; padding: .45rem .6rem; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.seg legend { float: left; padding: 0; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.seg .opts { position: relative; display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 2px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { padding: .32rem .65rem; border-radius: 3px; font-size: .88rem; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg label:hover { color: var(--text); }
.seg input:checked + label { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 1px var(--line-2); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.instrument .go { border: 0; border-left: 1px solid var(--line); background: var(--accent); color: var(--accent-ink); font: 600 .95rem/1 var(--font); padding: 0 1.2rem; border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0; cursor: pointer; }
.instrument .go:hover { background: var(--accent-hi); }
.instrument .go { display: inline-flex; align-items: center; justify-content: center; gap: 0; }
.go-fx { display: block; width: 0; height: 18px; overflow: hidden; flex: none; transition: width .15s ease, margin .15s ease; }
.go-fx svg path { stroke: currentColor; stroke-dasharray: 58 30; stroke-linecap: round; }
.instrument.busy .go-fx { width: 18px; margin-right: .5rem; }
html:not(.lottie-on) .instrument.busy .go-fx { background: currentColor; -webkit-mask: url("art/motion/loading-still.png") center / 180% no-repeat; mask: url("art/motion/loading-still.png") center / 180% no-repeat; }
.instrument.busy { cursor: progress; }
body.is-loading .grid, body.is-loading .pager, body.is-loading .empty { opacity: .5; transition: opacity .2s ease; }

.active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 .4rem; font-size: .88rem; }
.active .lbl { color: var(--muted); font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .45rem .22rem .7rem; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--text); }
.chip span { color: var(--accent); font-size: 1.05em; line-height: 1; }
.chip:hover { text-decoration: none; background: var(--panel-2); }
.active .clear { color: var(--muted); margin-left: .3rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; margin: 1rem 0; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; margin: 1.4rem 0 .4rem; font: 500 .88rem/1 var(--mono); }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel); color: var(--text-2); }
.pager a:hover { border-color: var(--line-2); color: var(--text); text-decoration: none; }
.pager [aria-current] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.pager .off { color: var(--muted); opacity: .6; }
.pager .gap { min-width: 1rem; padding: .5rem .1rem; border-color: transparent; background: none; color: var(--muted); }
.card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem .85rem; display: flex; flex-direction: column; gap: .45rem; transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 0; }
.card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.card-fx { position: absolute; top: calc(1.75rem - 12px); left: calc(1.6rem - 7px); width: 24px; height: 24px; z-index: 2; pointer-events: none; color: var(--accent); }
.card-fx svg { display: block; }
.card-fx svg path { stroke: currentColor; }
.card:not(:has(.pill)) .card-fx { display: none; }
.card:has(.pill.c1) .card-fx { color: var(--c1); } .card:has(.pill.c2) .card-fx { color: var(--c2); }
.card:has(.pill.c3) .card-fx { color: var(--c3); } .card:has(.pill.c4) .card-fx { color: var(--c4); }
.card:has(.pill.c5) .card-fx { color: var(--c5); } .card:has(.pill.c6) .card-fx { color: var(--c6); }
.card:has(.pill.c7) .card-fx { color: var(--c7); } .card:has(.pill.c8) .card-fx { color: var(--c8); }
@media (hover: hover) and (pointer: fine) {
  html:not(.lottie-on) .card-fx { background: currentColor; -webkit-mask: url("art/motion/hover-still.png") center / 180% no-repeat; mask: url("art/motion/hover-still.png") center / 180% no-repeat; opacity: 0; transition: opacity .15s ease; }
  html:not(.lottie-on) .card:hover .card-fx { opacity: .85; }
}
.card:focus-within { border-color: var(--accent); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.5rem; }
.card h3 { font-size: 1.22rem; margin: .1rem 0 0; overflow-wrap: anywhere; }
.card h3 a { color: var(--text); }
.card h3 a:hover { text-decoration: none; color: var(--accent); }
.card h3 a:focus-visible { outline: none; }
.card .stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card .ver { font-size: .66em; }
.card .by, .card .pill, .card .badge, .card .st[title], .card .pack-add { position: relative; z-index: 1; }
.card .pack-add { align-self: flex-start; margin-top: .3rem; }
.card .pack-add.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }
.card .desc { color: var(--text-2); font-size: .95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .by { font-size: .88rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; margin-top: auto; padding-top: .2rem; }
.card .by a { color: var(--text-2); font-weight: 500; }
.card .by a:hover { color: var(--accent); }
.src { font: 400 .72rem/1.3 var(--mono); color: var(--muted); border-left: 1px solid var(--line-2); padding-left: .45rem; }
.card-foot { display: flex; flex-wrap: wrap; gap: .35rem .9rem; border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .15rem; }

.price { font: 600 .95rem/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.price.free { color: var(--good); }
.price.paid { color: var(--brass); }
.pill { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; max-width: 100%; font: 500 .8rem/1.2 var(--font); color: var(--text-2); padding: .2rem .6rem .2rem .5rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.pill:hover { border-color: var(--cat); color: var(--text); text-decoration: none; }

.st { display: inline-flex; align-items: center; gap: .4rem; font: 400 .74rem/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.st.good { color: var(--good); }
.st.good::before, .st.bad::before, .st.note::before { background: currentColor; }
.st.bad { color: var(--bad); }
.st.note { color: var(--warn); }
.st.wait::before { border-style: dashed; }
.st.ai { color: var(--ai); }
.st.dl { color: var(--text-2); }
.st.dl::before { border-radius: 2px; }

.badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.badge { display: inline-block; font: 500 .7rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 4px; border: 1px solid var(--line-2); color: var(--muted); background: var(--panel-2); }
.badge.official { border-color: var(--brass); color: var(--brass); }
.badge.free { border-color: var(--good); color: var(--good); }
.badge.paid { border-color: var(--accent); color: var(--accent); }
.badge.ai { border-color: var(--ai); color: var(--ai); }
.badge.checked { border-color: var(--brass); color: var(--brass); }
.by { color: var(--muted); font-size: .92rem; margin: 0; }
.by strong { color: var(--text); }
.desc { color: var(--text-2); }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .2rem 0 0; }
.tags .lbl { font: 500 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .2rem; }
.tags a { font-size: .8rem; padding: .1rem .55rem; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.tags a:hover, .tags a.on { color: var(--text); border-color: var(--accent); text-decoration: none; }
.tags.all { margin: .8rem 0 1rem; }
.tags a small { color: var(--muted); }
.tags a.clear { border-style: dashed; }

.empty { text-align: center; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 2.6rem 1.2rem 2.2rem; margin: 1.2rem 0; background: var(--panel); }
.empty-art { display: block; width: 100%; max-width: 260px; height: auto; margin: -1rem auto .4rem; -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 56%, transparent 96%); mask-image: radial-gradient(50% 50% at 50% 50%, #000 56%, transparent 96%); }
:root[data-theme="light"] .empty-art { max-width: 220px; margin: 0 auto 1rem; border-radius: 14px; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px var(--line-2), var(--shadow); }
.empty h2 { margin: 0 0 .4rem; }
.empty p { color: var(--muted); max-width: 52ch; margin: 0 auto .9rem; }
.empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

.detail h1 { margin: .5rem 0 .4rem; font-size: 2.4rem; }
.mod-banner { position: relative; isolation: isolate; overflow: hidden; height: clamp(200px, 30vw, 440px); margin: -1.6rem calc(50% - 50vw) 1.1rem; background: var(--chrome); }
.mod-banner-img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.mod-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 13, 16, .9) 0%, rgba(12, 13, 16, .35) 38%, rgba(12, 13, 16, 0) 68%), linear-gradient(90deg, rgba(12, 13, 16, .5) 0%, rgba(12, 13, 16, 0) 55%); }
.mod-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #e07a2c 0, rgba(224, 122, 44, .35) 45%, transparent 80%); }
.mod-banner-inner { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--wrap); margin: 0 auto; padding: 0 16px clamp(.9rem, 2.2vw, 1.7rem); }
.mod-logo { display: block; width: clamp(170px, 34vw, 440px); max-width: 100%; height: auto; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .75)); }
.gallery { margin: 1.6rem 0 0; }
.gallery h2 { margin: 0 0 .7rem; font-size: 1.2rem; }
.thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--chrome); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease, opacity .2s ease; }
.thumb:hover { border-color: var(--accent); }
.thumb:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .thumb:hover img { transform: scale(1.04); } }
dialog.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 3.2rem 1rem 1rem; border: 0; background: rgba(8, 9, 11, .94); color: #ece7de; }
dialog.lightbox[open] { display: flex; align-items: center; justify-content: center; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .5); }
.lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 100%; max-height: 100%; }
.lb-img { display: block; max-width: min(1400px, 100%); max-height: calc(100dvh - 7rem); width: auto; height: auto; border-radius: var(--radius-s); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.lb-cap { font-size: .92rem; color: #cdc8be; text-align: center; }
.lb-count { font: 400 .8rem/1 var(--mono); color: #958f85; margin-left: .4rem; }
.lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(236, 231, 222, .25); background: rgba(20, 22, 26, .7); color: #ece7de; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { border-color: #e07a2c; }
.lb-btn:focus-visible { outline: 2px solid #ef8b3d; outline-offset: 2px; }
.lb-btn[hidden] { display: none; }
.lb-close { top: .7rem; right: .8rem; }
.lb-prev { left: .8rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .8rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-prev, .lb-next { top: auto; bottom: .8rem; transform: none; }
  .lb-img { max-height: calc(100dvh - 9rem); }
}
.detail .price { color: var(--brass); }
.detail-head { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.detail-main > :first-child { margin-top: 0; }
.detail-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.side-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.side-price { font: 700 1.8rem/1 var(--display); margin: 0 0 .8rem; }
.side-price.free { color: var(--good); }
.side-price.paid { color: var(--brass); }
.side-card .links { flex-direction: column; margin: 0 0 .7rem; }
.side-card .links .btn { width: 100%; }
.side-card p.small { margin: 0; }
.facts-list { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.facts-list > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem; padding: .6rem 1rem; border-top: 1px solid var(--line); align-items: baseline; }
.facts-list > div:first-child { border-top: 0; }
.facts-list dt { font: 500 .7rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.facts-list dd { margin: 0; font-size: .93rem; overflow-wrap: anywhere; }
.facts-list dd.stack { display: flex; flex-direction: column; gap: .3rem; }
.prose { max-width: 70ch; margin: 0 0 1.2rem; font-size: 1.04rem; color: var(--text-2); }
.prose.plain { white-space: pre-line; }
.links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .4rem; }
.acts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hash > code { display: block; padding: .6rem .8rem; margin: .4rem 0; }
.report { margin-top: 1.6rem; }
.report summary { cursor: pointer; color: var(--muted); }
.report form { margin-top: .6rem; max-width: 560px; display: flex; flex-direction: column; gap: .6rem; }
.report label { display: flex; flex-direction: column; gap: .3rem; }
.hosted { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.2rem 0; }
.hosted h2 { margin-top: 0; }
.hosted.maintained { border-left: 3px solid var(--good); }
.keys { background: var(--panel); border: 1px solid var(--brass); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.5rem; }
.keys code { display: block; padding: .5rem .7rem; margin: .3rem 0 .8rem; }

code.block { display: block; padding: .6rem .8rem; margin: .4rem 0 1rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; }
legend { color: var(--brass); font-weight: 600; padding: 0 .4rem; }
h3.cat { margin-top: 1.4em; }
input[type=file] { padding: .35rem; }
input, select, textarea { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: .5rem .65rem; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.filters input[type=search] { flex: 1 1 240px; }
.filters input, .filters select { width: auto; }
.form { display: flex; flex-direction: column; gap: .9rem; max-width: 640px; }
.form.narrow { max-width: 360px; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.form label small { font-weight: 400; color: var(--muted); font-size: .85rem; }
.form label.check { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; }
.form label.check input { width: auto; margin-top: .3rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.errors { background: var(--bad-bg); border: 1px solid var(--bad); border-radius: var(--radius); padding: .7rem 1.2rem; }
.danger { margin-top: 2rem; }

.step { max-width: 72ch; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tablewrap table th:first-child, .tablewrap table td:first-child { padding-left: .9rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
th { color: var(--muted); font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--panel-2); }
table.admin td.acts form { display: inline; }
table.admin small { color: var(--muted); }

@media (min-width: 1460px) {
  .cat-btn .full { display: inline; }
  .cat-btn .short { display: none; }
}
@media (max-width: 1040px) {
  .cat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 8px; }
  .cats-fx { display: none; }
  .cat { position: static; }
  .cat-btn { width: 100%; justify-content: center; padding: .7rem .2rem; font-size: .88rem; }
  .cat-btn .n, .cat-btn .chev { display: none; }
  .panel, .cat.end .panel { left: 16px; right: 16px; width: auto; max-width: none; }
}
@media (max-width: 980px) {
  .instrument { flex-wrap: wrap; }
  .instrument .search { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .instrument .seg:first-of-type { border-left: 0; }
  .instrument .go { border-radius: 0 0 calc(var(--radius) - 1px) 0; padding: .6rem 1.1rem; margin-left: auto; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-side { position: static; order: -1; }
  .side-card .links { flex-direction: row; }
  .side-card .links .btn { width: auto; flex: 1 1 auto; }
}
@media (max-width: 920px) {
  .menu-toggle { display: inline-flex; }
  .util { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--chrome); border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line); padding: .4rem 16px .9rem; z-index: 40; }
  .util.open { display: flex; }
  .util a { padding: .65rem .2rem; border-bottom: 1px solid var(--chrome-line); border-radius: 0; }
  .util .theme-toggle, .util .sound-toggle { align-self: flex-start; margin: .4rem 0 0; padding-left: .2rem; }
  .util .sound-toggle .s-lbl { display: inline; font-size: .92rem; }
  .util .list-cta { margin: .5rem 0 0; padding: .6rem; border-radius: var(--radius-s); border-bottom: 0; }
  header.site .bar { position: static; }
  header.site { position: relative; }
}
@media (max-width: 700px) {
  .hero.art { padding-top: 3.2rem; padding-bottom: 2.4rem; }
  .hero.art::before { background: linear-gradient(180deg, rgba(12, 13, 16, .74) 0%, rgba(12, 13, 16, .84) 55%, rgba(12, 13, 16, .94) 100%); }
  .art-bg img { object-position: 50% 30%; }
  .page-head { background-image: linear-gradient(90deg, rgba(12, 13, 16, .94) 0%, rgba(12, 13, 16, .8) 100%), url("hero.jpg"); background-image: linear-gradient(90deg, rgba(12, 13, 16, .94) 0%, rgba(12, 13, 16, .8) 100%), image-set(url("art/hero-phone.webp") type("image/webp"), url("hero.jpg") type("image/jpeg")); background-position: 30% 55%; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.7rem; }
  .hero h1 { font-size: 2rem; }
  .page-head h1, .detail h1 { font-size: 1.75rem; }
  .brand img { height: 16px; }
  .subs { grid-template-columns: 1fr; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .subnav a { flex: none; }
  .pager a, .pager span { min-width: 2rem; padding: .45rem .5rem; }
  .seg { padding: .35rem .6rem .35rem .9rem; }
  .seg { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--line); justify-content: space-between; }
  .instrument .seg:first-of-type { border-top: 0; }
  .seg .opts { flex: 0 1 auto; }
  .instrument .go { flex: 1 1 100%; border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); border-left: 0; padding: .75rem; }
  .cat-btn::before { display: none; }
  .facts-list > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .cat-btn { font-size: .8rem; }
  .seg label { padding: .32rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .cats-fx { display: none; }
}

.card::before { content: ""; position: absolute; inset: 0; background: url("art/card-plate.webp") repeat; background-size: 256px; opacity: .07; pointer-events: none; border-radius: inherit; }
.card > * { position: relative; }
:root[data-theme="light"] .card::before { opacity: .05; mix-blend-mode: multiply; }

/* ratings and download meters (2026-09-27) */
.card .meters { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .1rem 0 0; }
.meter { font: 400 .74rem/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.meter.rating { color: var(--brass); }
.meter.rating.none { color: var(--muted); }
.ratings { margin: 1.4rem 0; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.ratings h2 { margin-top: 0; }
.rating-sum { font: 600 1.15rem/1.3 var(--display); color: var(--brass); margin: 0 0 .5rem; }
.rating-sum.none { color: var(--muted); font-weight: 500; }
.stars fieldset { border: 0; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.stars legend { font-size: .9rem; color: var(--muted); margin-bottom: .3rem; }
.stars .star { font-size: 1.7rem; line-height: 1; min-width: 44px; min-height: 44px; background: none; border: 1px solid transparent; border-radius: var(--radius-s); color: var(--line); cursor: pointer; }
.stars .star.on { color: var(--brass); }
.stars:hover .star { color: var(--brass); }
.stars .star:hover ~ .star { color: var(--line); }
.stars .star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sort-note { margin: .2rem 0 .8rem; }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .5rem .7rem; border: 1px dashed var(--line); border-radius: var(--radius-s); }
.admin-ratings { margin: .4rem 0; }
@media (max-width: 640px) {
  .seg { flex-wrap: wrap; }
  .seg .opts { flex-wrap: wrap; max-width: 100%; }
}
.ratings form.inline { display: block; margin: 0 0 .4rem; }
@media (min-width: 981px) {
  .instrument { flex-wrap: wrap; }
  .instrument .search { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .instrument .seg:first-of-type { border-left: 0; }
  .instrument .go { border-radius: 0 0 calc(var(--radius) - 1px) 0; padding: .6rem 1.1rem; margin-left: auto; }
}

.stats-page h1 .btn { vertical-align: middle; }
.stats-range { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.4rem; }
.stats-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.stat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }
.stat-tile h2 { font-size: .8rem; margin: 0 0 .3rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 500; }
.stat-tile .big { margin: 0 0 .5rem; color: var(--text-2); }
.stat-tile .big strong { font: 600 2rem/1 var(--display); color: var(--text); margin-right: .2rem; }
.stat-tile dl { margin: 0; display: grid; gap: .15rem; }
.stat-tile dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.stat-tile dt { color: var(--muted); }
.stat-tile dd { margin: 0; font-variant-numeric: tabular-nums; }
.stat-tile p.small { margin: .5rem 0 0; }
.stats-chart { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; }
.stats-chart svg { display: block; width: 100%; max-width: 860px; height: auto; }
.stats-chart .legend { margin: 0 0 .4rem; font-size: .9rem; color: var(--text-2); display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.stats-chart .key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; margin-left: .6rem; }
.stats-chart .key.views { background: var(--viz-views); margin-left: 0; }
.stats-chart .key.visitors { height: 2px; background: var(--viz-visitors); }
.stats-chart .grid { stroke: var(--line); stroke-width: 1; }
.stats-chart .baseline { stroke: var(--line-2); stroke-width: 1; }
.stats-chart .axis { fill: var(--muted); font: 12px var(--mono); }
.stats-chart .bar { fill: var(--viz-views); }
.stats-chart .vline { fill: none; stroke: var(--viz-visitors); stroke-width: 2; stroke-linejoin: round; }
.stats-chart .vdot { fill: var(--viz-visitors); stroke: var(--panel); stroke-width: 2; }
.stats-chart .hit { fill: transparent; }
.stats-chart .hit:hover { fill: var(--accent-soft); }
.stats-chart details { margin-top: .6rem; }
.stats-t td.num, .stats-t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-t td { overflow-wrap: anywhere; }
.stats-t tr.hot td { background: var(--accent-soft); font-weight: 600; }
.stats-t .share { min-width: 9rem; white-space: nowrap; }
.stats-t .sbar { display: inline-block; height: 8px; background: var(--viz-visitors); border-radius: 0 4px 4px 0; vertical-align: middle; }
.stats-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.stats-cols h3 { margin-top: 1.1rem; }
.stats-cols > div > h3:first-child { margin-top: 0; }
.stats-foot { margin-top: 2rem; }
@media (max-width: 800px) { .stats-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .stats-chart .axis { font-size: 19px; } .stats-chart .axis-title { display: none; } .stats-t .share { display: none; } .stats-t th, .stats-t td { padding: .45rem .45rem; } }

/* Rust update reports */
.scope { max-width: 70ch; color: var(--text-2); }
.update-list { padding-left: 1.2rem; line-height: 1.7; }
.update-table td { vertical-align: top; }
.upd-err code { white-space: normal; word-break: break-word; font-size: .8rem; }
.notice { max-width: 70ch; border-left: 3px solid var(--brass); background: var(--panel); padding: .6rem .9rem; border-radius: 4px; color: var(--text-2); }
.explain { margin-top: 2.5rem; }

/* Ask MiX: floating bubble and panel */
.askw { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.askw-bubble { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .95rem .35rem .35rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 1rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; box-shadow: var(--shadow); cursor: pointer; }
.askw-bubble:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.askw-bubble img, .askw-head img { width: 36px; height: 36px; border-radius: 50%; background: var(--chrome); display: block; }
.askw-panel { width: min(380px, calc(100vw - 32px)); max-height: min(78vh, 560px); display: flex; flex-direction: column; padding: .85rem 1rem 1rem; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); }
.askw-panel[hidden], .askw-bubble[hidden] { display: none; }
.askw-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .65rem; margin-bottom: .65rem; border-bottom: 1px solid var(--line); }
.askw-head div { display: flex; flex-direction: column; line-height: 1.2; }
.askw-head b { font: 700 1.1rem/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.askw-head span { color: var(--muted); font-size: .78rem; }
.askw-close { margin-left: auto; border: 1px solid transparent; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; padding: .1rem .45rem; border-radius: var(--radius-s); cursor: pointer; }
.askw-close:hover { color: var(--text); border-color: var(--line); }
.ask-log { flex: 1; min-height: 12rem; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; padding-right: .2rem; }
.ask-msg { max-width: 88%; padding: .6rem .8rem; border-radius: var(--radius-s); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; }
.ask-msg--bot { align-self: flex-start; background: var(--panel-2); border-left: 3px solid var(--accent); }
.ask-msg--you { align-self: flex-end; background: var(--accent-soft); border-right: 3px solid var(--brass); }
.ask-msg--wait { color: var(--muted); font-style: italic; }
.ask-form { display: flex; gap: .5rem; margin-top: .75rem; }
.ask-form input { flex: 1; min-width: 0; }
.ask-hint { margin: .55rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .askw.is-open .askw-panel { animation: askw-in .18s ease-out; }
  @keyframes askw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 640px) {
  .askw { right: 12px; bottom: 12px; }
  .askw-bubble span { display: none; }
  .askw-bubble { padding: .3rem; }
}
@media print { .askw { display: none; } }

/* Forums */
.forum-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.forum-table td.num, .forum-table th.num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.forum-board-name, .forum-thread-name { font-weight: 600; font-size: 1.05rem; }
.forum-recent { padding-left: 1.1rem; }
.forum-recent li { margin: .3rem 0; }
.forum-posts { list-style: none; margin: 1.2rem 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; max-width: 78ch; }
.forum-post { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem .6rem; scroll-margin-top: 1rem; }
.forum-post:target { border-color: var(--accent); }
.forum-post.st-held { border-style: dashed; border-color: var(--warn); }
.forum-post.st-hidden, .forum-post.st-deleted { background: transparent; }
.forum-post-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-bottom: .45rem; }
.forum-author { font-weight: 600; color: var(--text); }
.forum-body { color: var(--text-2); overflow-wrap: anywhere; }
.forum-body p { margin: 0 0 .75em; }
.forum-body p:last-child { margin-bottom: .3em; }
.forum-gone { margin: .2rem 0; font-style: italic; }
.forum-post-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .3rem; }
.forum-post-acts form.inline { margin-left: 0; }
.forum-report summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.forum-report[open] { flex-basis: 100%; }
.forum-report .form { margin-top: .5rem; max-width: 420px; }
.forum-compose { max-width: 78ch; }
.forum-signin { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.forum-signin .muted { flex: 1 1 18rem; }
.forum-who form.inline { margin-left: .4rem; }
.admin-body { max-width: 46ch; max-height: 14rem; overflow: auto; font-size: .92rem; }
.discussion p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }

/* Header: with Forums in the nav, collapse the menu a little earlier and tighten it below 1300 px */
@media (min-width: 921px) and (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .util { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--chrome); border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line); padding: .4rem 16px .9rem; z-index: 40; }
  .util.open { display: flex; }
  .util a { padding: .65rem .2rem; border-bottom: 1px solid var(--chrome-line); border-radius: 0; }
  .util .theme-toggle, .util .sound-toggle { align-self: flex-start; margin: .4rem 0 0; padding-left: .2rem; }
  .util .sound-toggle .s-lbl { display: inline; font-size: .92rem; }
  .util .list-cta { margin: .5rem 0 0; padding: .6rem; border-radius: var(--radius-s); border-bottom: 0; }
  header.site .bar { position: static; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .util a { padding: .35rem .42rem; font-size: .88rem; }
  .util .list-cta { margin-left: .3rem; }
}
/* Guides */
.guide-meta { color: var(--muted); font: 400 .85rem/1.4 var(--mono); margin: 0 0 1.2rem; }
.guide-body { max-width: 76ch; min-width: 0; }
.guide-body > p, .guide-body li { color: var(--text-2); }
.guide-body > p { font-size: 1.04rem; }
.guide-body > p.lead { font-size: 1.1rem; margin-bottom: 1.2rem; }
.guide-body h2 { margin-top: 2.2em; scroll-margin-top: 1rem; }
.guide-body h3 { margin-top: 1.6em; scroll-margin-top: 1rem; }
.guide-body ul, .guide-body ol { padding-left: 1.3rem; }
.guide-body li { margin: .3rem 0; }
.guide-body .notice { margin: 0 0 1.2rem; }
.guide-body .tablewrap { margin: .6rem 0 1.2rem; }
.guide-body :not(pre) > code { word-break: normal; overflow-wrap: anywhere; }
.guide-body table caption { caption-side: top; text-align: left; padding: .6rem .9rem; color: var(--muted); font-size: .88rem; }
.compare-table th[scope=row] { color: var(--text); font: 600 .92rem/1.35 var(--font); text-transform: none; letter-spacing: 0; background: var(--panel-2); width: 26%; }
.toc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: .6rem .9rem; margin: 0 0 1.6rem; }
.toc summary { cursor: pointer; font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.toc ol { margin: .5rem 0 .2rem; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a { display: block; padding: .3rem .25rem; color: var(--text-2); font-size: .92rem; line-height: 1.35; border-radius: var(--radius-s); }
.toc a:hover { color: var(--accent); background: var(--panel-2); text-decoration: none; }
@media (min-width: 1100px) {
  .guide-layout.has-toc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.6rem; align-items: start; }
  .guide-layout.has-toc .toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; margin: 0; }
}
.code { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); margin: .6rem 0 1.2rem; overflow: hidden; max-width: 100%; }
.code-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .4rem .3rem .8rem; border-bottom: 1px solid var(--line); background: var(--panel); }
.code-where { font: 500 .72rem/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; overflow-wrap: anywhere; }
.copy-btn { flex: none; font: 500 .8rem/1 var(--font); color: var(--text-2); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: .45rem .75rem; min-height: 32px; cursor: pointer; }
.copy-btn:hover { color: var(--text); border-color: var(--muted); }
.copy-btn.done { color: var(--good); border-color: var(--good); }
.copy-btn[hidden] { display: none; }
.code pre { margin: 0; border: 0; border-radius: 0; background: transparent; padding: .8rem .95rem; white-space: pre; overflow-x: auto; font-size: .84rem; line-height: 1.55; tab-size: 4; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.code pre code { background: none; border: 0; padding: 0; font-size: inherit; word-break: normal; color: var(--text); }
.code.prompt pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.figures { margin: .8rem 0 1.4rem; padding: .8rem 1rem; border-left: 3px solid var(--brass); background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; }
.figures > p { margin: 0 0 .5rem; color: var(--text); }
.figures ul { margin: 0 0 .4rem; }
.figures li { color: var(--text); }
.figures .tablewrap { margin: 0 0 .6rem; }
.figures figcaption { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.get-help { margin: 2.6rem 0 1.4rem; padding: 1rem 1.2rem; max-width: 76ch; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.get-help h2 { margin-top: 0; }
.get-help p { color: var(--text-2); }
.get-help p:last-child { margin-bottom: 0; }
.get-help-warn strong { color: var(--text); }
.guide-more ul { padding-left: 1.2rem; }
.guide-more li { margin: .45rem 0; }
.guide-cards { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.guide-card { display: flex; flex-direction: column; padding: 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.guide-card h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
.guide-card p { color: var(--text-2); margin: 0 0 .6rem; }
.guide-card .guide-meta { margin: auto 0 0; }
@media (max-width: 640px) {
  .code pre { font-size: .8rem; padding: .7rem .8rem; }
  .figures { padding: .7rem .8rem; }
  .get-help { padding: .9rem 1rem; }
}

/* Forced-wipe countdown: home hero and /updates (wipe.py, initWipe in site.js). Two rows always, so the script's text
   changes never add a line: row 1 wraps only on its own static text, row 2 never wraps (it ellipsises if it must). */
.wipe { display: inline-grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .7rem; row-gap: .12rem; align-items: center; max-width: 100%; margin: 0 0 1.25rem; padding: .6rem .95rem .6rem .8rem; border: 1px solid var(--line-2); border-left: 3px solid var(--accent); border-radius: var(--radius-s); background: var(--panel); color: var(--text); line-height: 1.3; text-align: left; }
a.wipe { color: var(--text); transition: border-color .15s ease; }
a.wipe:hover { text-decoration: none; border-color: var(--accent); }
a.wipe:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.wipe-dot { grid-column: 1; grid-row: 1 / 3; position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.wipe-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; }
.wipe-main { grid-column: 2; grid-row: 1; min-width: 0; font-size: 1rem; }
.wipe-label { font: 600 1rem/1.3 var(--display); letter-spacing: .02em; color: var(--accent); }
.wipe-when { color: var(--text); font-weight: 500; }
.wipe-sub { grid-column: 2; grid-row: 2; min-width: 0; font-size: .86rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wipe-left { color: var(--text-2); font-weight: 600; }
.wipe-go { grid-column: 3; grid-row: 1 / 3; color: var(--accent); font-size: 1.15rem; line-height: 1; }
.wipe.is-live .wipe-dot::after { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .wipe-dot::after { animation: wipe-ping 2.6s ease-out infinite; }
  .wipe.is-live .wipe-dot::after { animation-duration: 1.3s; }
  .wipe-go { transition: transform .15s ease; }
  a.wipe:hover .wipe-go { transform: translateX(3px); }
}
@keyframes wipe-ping { 0% { transform: scale(.55); opacity: .85; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
.hero.art .wipe { background: rgba(12, 13, 16, .6); border-color: rgba(236, 231, 222, .2); border-left-color: #e07a2c; color: #ece7de; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero.art a.wipe:hover { border-color: rgba(239, 139, 61, .75); border-left-color: #ef8b3d; }
.hero.art a.wipe:focus-visible { outline-color: #ef8b3d; }
.hero.art .wipe-dot { background: #e07a2c; }
.hero.art .wipe-dot::after { border-color: #e07a2c; }
.hero.art .wipe-label, .hero.art .wipe-go { color: #ef8b3d; }
.hero.art .wipe-when { color: #ece7de; }
.hero.art .wipe-sub { color: #a39d93; }
.hero.art .wipe-left { color: #e3ddd2; }
@media (max-width: 640px) {
  .wipe { display: grid; padding: .55rem .8rem .55rem .7rem; column-gap: .6rem; }
  .wipe-main, .wipe-label { font-size: .95rem; }
  .wipe-sub { font-size: .84rem; }
}

/* Pre-release mark: built for the next Rust update (prerelease.py) */
.st.pre { color: var(--accent); white-space: normal; overflow-wrap: normal; align-items: flex-start; }
.st.pre::before { border-style: dashed; margin-top: .28em; }
.nb { white-space: nowrap; }
.badge.pre { border-color: var(--accent); border-style: dashed; color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
.pre-note { max-width: 70ch; margin: .9rem 0; padding: .65rem .9rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--accent-soft); color: var(--text-2); font-size: .95rem; }
.pre-note strong { color: var(--text); }
.pre-bar label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.pre-bar input { width: 8.6rem; padding: .3rem .5rem; font: 400 .85rem/1.2 var(--mono); }

.admin-links { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.admin-links li { padding: .55rem .8rem; border: 1px solid var(--line, #3a3a3a); border-radius: 6px; }

/* Pack builder: cart bar, cart page and the card/listing "Add to pack" control */
.pack-drawer[hidden] { display: none; }
.pack-drawer { position: fixed; inset: 0; z-index: 70; }
.pack-drawer-backdrop { position: absolute; inset: 0; background: rgba(8, 9, 11, .55); }
.pack-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); padding: 1rem 1.1rem 1.3rem; overflow-y: auto; display: flex; flex-direction: column; gap: .8rem; }
.pack-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.pack-drawer-head strong { font-size: 1.1rem; }
.pack-drawer-close { background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.pack-drawer-close:hover { color: var(--text); }
.pack-drawer-list { display: flex; flex-direction: column; gap: .5rem; min-height: 2rem; }
.pack-drawer-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--panel-2); }
.pack-drawer-row .t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .92rem; }
.pack-drawer-row .v { color: var(--muted); font-family: var(--mono); font-size: .78em; }
.pack-drawer-row .sz { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.pack-drawer-remove { background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.pack-drawer-remove:hover { color: var(--bad); }
.pack-drawer-starters { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pack-drawer-total { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: .6rem; }
.pack-drawer-form { display: flex; flex-direction: column; gap: .6rem; }
.pack-drawer-open { text-align: center; font-size: .88rem; }
@media (max-width: 640px) {
  .pack-drawer-panel { top: auto; left: 0; right: 0; width: auto; max-height: 82vh; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
}
.toast-extra { margin-top: .3rem; font-size: .85rem; color: var(--chrome-muted); }
.toast.clickable { cursor: pointer; }
.pack-strip { max-width: var(--wrap); margin: 1.4rem auto; padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.pack-strip-copy h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.pack-strip-copy p { margin: 0; color: var(--text-2); }
.pack-strip-actions { display: flex; gap: .6rem; margin: 0; }
.pack-starters-row p:first-child { margin-bottom: .4rem; }
.pack-how { margin-top: 2rem; }
.pack-how ol { padding-left: 1.2rem; display: grid; gap: .4rem; }
.pack-notes { margin: 0 0 1.2rem; padding: 0; list-style: none; display: grid; gap: .4rem; }
.pack-notes li { padding: .55rem .8rem; border-left: 3px solid var(--brass); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--panel-2); color: var(--text-2); font-size: .92rem; }
.pack-table td.mono { font-family: var(--mono); font-size: .9rem; }
.pack-fw { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.pack-fw legend { padding: 0 .4rem; color: var(--muted); font: 500 .72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.pack-fw label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.pack-add.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi); }

/* Resource list and review rules (guides rust-modding-resources, plugin-review-rules) */
.guide-body .res-list, .guide-body .rule-list { list-style: none; padding: 0; margin: .6rem 0 1.2rem; border-top: 1px solid var(--line); }
.res-list > li, .rule-list > li { padding: .7rem .1rem; margin: 0; border-bottom: 1px solid var(--line); }
.res-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.res-head a { font-weight: 600; overflow-wrap: anywhere; }
.res-note { display: block; margin-top: .15rem; color: var(--text-2); font-size: .94rem; }
.res-who { display: inline-block; font: 500 .7rem/1.4 var(--mono); letter-spacing: .03em; padding: .05rem .5rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); white-space: nowrap; }
.res-who.res-author, .res-who.res-docs { color: var(--accent); border-color: var(--accent); }
.res-who.res-tool, .res-who.res-house { color: var(--text-2); }
.res-flag { font: 500 .7rem/1.4 var(--mono); color: var(--brass); white-space: nowrap; }
.res-key { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1rem; }
.guide-body .res-key li { margin: 0; }
.rule-list p { margin: 0 0 .3rem; }
.rule-line { color: var(--text); }
.rule-line strong { color: var(--text); }
.rule-line .res-who { margin-left: .3rem; }
.rule-why, .rule-src { color: var(--text-2); font-size: .94rem; }
.rule-src { color: var(--muted); }

/* listing art on cards (2026-10-03): card.webp 16:9 across the top, edge to edge; no art = today's layout */
.card .card-art { position: relative; aspect-ratio: 16 / 9; margin: -1rem -1.1rem .35rem; background: var(--panel-2, var(--line)); overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card .card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .card-logo { position: absolute; left: .6rem; bottom: .5rem; width: 38%; height: auto; max-width: 9rem; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.card.has-art .card-fx { display: none; }