/* Arcmite public website · same tokens, themes and motion rules as the dashboard.
   Studio (data-glass=off) = solid panels; Liquid glass (data-glass=on) = acrylic over a living colour field.
   Motion: transform/opacity only, every duration × var(--dur) (fast 1, calm 1.6, off 0). */
@font-face { font-family: "Archivo"; src: url("/static/fonts/Archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Bold.woff") format("woff"); font-weight: 700 900; font-display: swap; }

:root {
  --bg: #060607; --panel: #131315; --raised: #1c1c20; --sunken: #0c0c0e;
  --line: rgba(255, 255, 255, 0.085); --line-soft: rgba(255, 255, 255, 0.055);
  --chip: rgba(255, 255, 255, 0.07); --hover: rgba(255, 255, 255, 0.05);
  --text: #f2f1ee; --muted: #a8a7af; --faint: #7d7c85;
  --arc: #ff4f6e; --arc-strong: #e5133f; --arc-soft: rgba(255, 46, 86, 0.13); --coral: #f39a82;
  --grad: linear-gradient(100deg, #ff1d4c 0%, #f39a82 100%);
  --live: #45dfa0; --live-soft: rgba(69, 223, 160, 0.14); --amber: #f6b26b; --amber-soft: rgba(246, 178, 107, 0.14);
  --display: "Archivo", "Inter", system-ui, sans-serif; --body: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 26px;
  --ease: cubic-bezier(0.2, 0.9, 0.1, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 1; --gap: 16px; --pad: 20px; --card-min: 236px;
  --sh: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.45);
  --surface: var(--panel); --surface-blur: none;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f3f0; --panel: #ffffff; --raised: #efeeeb; --sunken: #ebeae6;
  --line: rgba(22, 22, 26, 0.1); --line-soft: rgba(22, 22, 26, 0.065); --chip: rgba(22, 22, 26, 0.055); --hover: rgba(22, 22, 26, 0.045);
  --text: #16161a; --muted: #56555d; --faint: #75747d; --arc: #d4123b; --arc-soft: rgba(212, 18, 59, 0.09);
  --live: #0b9b5c; --live-soft: rgba(11, 155, 92, 0.12); --amber: #a5620a; --amber-soft: rgba(196, 120, 20, 0.12);
  --sh: 0 1px 2px rgba(22, 22, 26, 0.06), 0 10px 30px rgba(22, 22, 26, 0.09);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --bg: #f4f3f0; --panel: #ffffff; --raised: #efeeeb; --sunken: #ebeae6;
    --line: rgba(22, 22, 26, 0.1); --line-soft: rgba(22, 22, 26, 0.065); --chip: rgba(22, 22, 26, 0.055); --hover: rgba(22, 22, 26, 0.045);
    --text: #16161a; --muted: #56555d; --faint: #75747d; --arc: #d4123b; --arc-soft: rgba(212, 18, 59, 0.09);
    --live: #0b9b5c; --live-soft: rgba(11, 155, 92, 0.12); --amber: #a5620a; --amber-soft: rgba(196, 120, 20, 0.12);
    --sh: 0 1px 2px rgba(22, 22, 26, 0.06), 0 10px 30px rgba(22, 22, 26, 0.09);
    color-scheme: light;
  }
}
:root[data-motion="calm"] { --dur: 1.6; }
:root[data-motion="off"] { --dur: 0; }
:root[data-density="compact"] { --gap: 10px; --pad: 14px; --card-min: 200px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { :root:not([data-motion="off"]) { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--arc); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--arc); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--arc-strong); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
h1, h2, h3 { font-family: var(--display); font-stretch: 106%; letter-spacing: -0.005em; line-height: 1.1; overflow-wrap: anywhere; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
main { display: block; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); position: relative; z-index: 1; }
@media (min-width: 2200px) { main { max-width: 1760px; } }

/* background grid + glow (hero) */
.field-bg { position: absolute; inset: 0 0 auto 0; height: 980px; pointer-events: none; z-index: 0; overflow: hidden;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); mask: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); }
.field-bg::before { content: ""; position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 86, 0.16), transparent 62%); transform: translate3d(var(--gx, 50vw), var(--gy, 240px), 0); transition: transform calc(240ms * var(--dur)) linear; }
body:not(.p-home) .field-bg { height: 420px; opacity: 0.6; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font: 600 14px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform calc(380ms * var(--dur)) var(--spring), background-color calc(160ms * var(--dur)), border-color calc(160ms * var(--dur)), box-shadow calc(200ms * var(--dur)); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { border-color: var(--faint); }
.btn:active { transform: scale(0.95); transition-duration: calc(90ms * var(--dur)); }
.btn-primary { background: var(--arc-strong); border-color: var(--arc-strong); color: #fff; }
.btn-primary:hover { border-color: var(--arc-strong); box-shadow: 0 8px 24px rgba(229, 19, 63, 0.35); }
.btn-primary svg { transition: transform calc(320ms * var(--dur)) var(--spring); }
.btn-primary:hover svg:last-child { transform: translateX(3px); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--hover); }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }
.linkish { background: none; border: 0; padding: 0; color: var(--arc); font: 600 13px/1 var(--body); cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--chip); color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px;
  transition: background calc(160ms * var(--dur)), transform calc(380ms * var(--dur)) var(--spring); }
.chip span { color: var(--faint); font-weight: 500; }
.chip:hover { background: var(--arc-soft); }
.chip:active { transform: scale(0.94); }

/* header */
.sh { position: sticky; top: 10px; z-index: 40; display: flex; align-items: center; gap: 18px; max-width: 1440px; margin: 10px auto 0; padding: 8px 10px 8px 16px; width: calc(100% - 2 * clamp(10px, 2vw, 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; transition: box-shadow calc(240ms * var(--dur)); }
@media (min-width: 2200px) { .sh { max-width: 1760px; } }
.sh.scrolled { box-shadow: var(--sh); }
.sh-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: none; }
.sh-mark { width: 40px; height: 32px; display: inline-block; background: var(--arc-strong); -webkit-mask: url("/static/logo-mask.png") center / contain no-repeat; mask: url("/static/logo-mask.png") center / contain no-repeat; flex: none; }
.sh-name { font: 800 17px/1 var(--display); font-stretch: 110%; letter-spacing: 0.01em; text-transform: uppercase; }
.sh-name span { color: var(--muted); font-weight: 600; }
.sh-nav { display: flex; gap: 2px; margin-left: 6px; min-width: 0; }
.sh-nav a { padding: 8px 12px; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background calc(160ms * var(--dur)), color 0.12s; }
.sh-nav a:hover { color: var(--text); background: var(--hover); }
.sh-nav a[aria-current="page"] { color: var(--text); background: var(--chip); }
.sh-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sh-ic { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font-size: 15px;
  transition: transform calc(380ms * var(--dur)) var(--spring), background calc(160ms * var(--dur)); text-decoration: none; }
.sh-ic svg { width: 18px; height: 18px; }
.sh-ic:hover { background: var(--hover); }
.sh-ic:active { transform: scale(0.9); }
.sh-join { height: 40px; }

/* look dialog */
dialog.look { width: min(420px, calc(100vw - 24px)); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); color: var(--text); padding: 0; box-shadow: var(--sh); }
dialog.look::backdrop { background: rgba(6, 6, 7, 0.55); }
dialog.look[open] { animation: pop calc(380ms * var(--dur)) var(--spring); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.look-in { padding: 18px 20px 16px; display: grid; gap: 14px; }
.look-head { display: flex; align-items: center; } .look-head h2 { margin: 0; font-size: 22px; } .look-head .sh-ic { margin-left: auto; }
.look fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.look legend { font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.look-note { margin: 0; color: var(--faint); font-size: 12.5px; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); }
.seg button { flex: 1; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 13px/1 var(--body); cursor: pointer; white-space: nowrap;
  transition: background-color calc(160ms * var(--dur)), color 0.12s, transform calc(380ms * var(--dur)) var(--spring); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1); }
.seg button:active { transform: scale(0.94); }
::view-transition-new(root) { animation: vt-in calc(620ms * var(--dur)) var(--ease); }
::view-transition-old(root) { animation: none; }
@keyframes vt-in { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(160vmax at var(--vt-x, 50%) var(--vt-y, 0)); } }

/* reveal */
.js .reveal, .js .reveal-list > li { opacity: 0; transform: translateY(14px); transition: opacity calc(560ms * var(--dur)) var(--ease), transform calc(620ms * var(--dur)) var(--ease); transition-delay: calc(var(--d, 0) * 1ms * var(--dur)); }
.js .reveal.in, .js .reveal-list > li.in { opacity: 1; transform: none; }
:root[data-motion="off"] .js .reveal, :root[data-motion="off"] .reveal, :root[data-motion="off"] .reveal-list > li { opacity: 1 !important; transform: none !important; }

/* hero */
.hero { padding: clamp(48px, 9vh, 120px) 0 36px; display: grid; gap: 40px; }
.hero-in { max-width: 920px; }
.kicker { margin: 0 0 12px; color: var(--arc); font: 700 12.5px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; }
.hero-h { margin: 0; font-size: clamp(42px, 7.2vw, 104px); font-weight: 900; font-stretch: 112%; line-height: 0.96; letter-spacing: -0.02em; text-transform: uppercase; }
.hero-h .accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { margin: 18px 0 26px; max-width: 640px; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); }
.search { position: relative; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 6px 0 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); max-width: 720px;
  transition: border-color calc(160ms * var(--dur)), box-shadow calc(200ms * var(--dur)); }
.search:focus-within { border-color: var(--arc); box-shadow: 0 0 0 4px var(--arc-soft); }
.search > svg { width: 20px; height: 20px; color: var(--faint); flex: none; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 500 16px/1 var(--body); outline: none; }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.search .btn { height: 40px; }
.search.big { height: 62px; padding-left: 20px; }
.search.big input { font-size: 17px; }
.search.big .btn { height: 48px; padding: 0 20px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.stats div { padding: 16px 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.stats dt { color: var(--muted); font-size: 13px; }
.stats dd { margin: 4px 0 0; font: 900 clamp(30px, 3.4vw, 46px)/1 var(--display); font-variant-numeric: tabular-nums; }

/* sections */
.band { margin: 44px 0; }
.band-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.band-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 32px); }
.more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.more svg { width: 16px; height: 16px; transition: transform calc(320ms * var(--dur)) var(--spring); }
.more:hover svg { transform: translateX(3px); }
.lead { font-size: 17px; color: var(--muted); max-width: 760px; }
.mission { margin: 72px 0; }
.mission h2 { font-size: clamp(26px, 3.4vw, 46px); max-width: 900px; margin: 0 0 12px; }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.pillar { position: relative; padding: 22px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.pillar h3 { margin: 10px 0 6px; font-size: 20px; } .pillar p { margin: 0; color: var(--muted); }
.pillar-n { font: 900 14px/1 var(--display); color: var(--arc); letter-spacing: 0.1em; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tiles.big { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 20px; }
.tile { position: relative; display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: var(--text); overflow: hidden;
  transition: transform calc(380ms * var(--dur)) var(--spring), border-color calc(160ms * var(--dur)); }
.tile b { font: 800 16px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile span { color: var(--muted); font-size: 13px; }
.tile:hover { transform: translateY(-2px); border-color: var(--faint); }
.howto { margin: 64px 0; } .howto h2 { font-size: clamp(24px, 2.8vw, 36px); }
.steps { list-style: none; counter-reset: s; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps li { counter-increment: s; padding: 20px; border-radius: var(--r-lg); background: var(--sunken); border: 1px solid var(--line-soft); display: grid; gap: 6px; }
.steps li::before { content: counter(s); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--arc-soft); color: var(--arc); font: 900 15px/1 var(--display); }
.steps b { font-size: 17px; } .steps span { color: var(--muted); }
.creators-cta { margin: 64px 0; display: flex; align-items: center; gap: 24px; padding: 28px; border-radius: var(--r-xl); background: linear-gradient(120deg, rgba(229, 19, 63, 0.18), transparent 60%), var(--panel); border: 1px solid var(--line); flex-wrap: wrap; }
.creators-cta h2 { margin: 0 0 6px; font-size: 26px; } .creators-cta p { margin: 0; color: var(--muted); max-width: 640px; }
.creators-cta .btn { margin-left: auto; }
.faq { margin: 64px 0 80px; max-width: 900px; } .faq h2 { font-size: clamp(24px, 2.8vw, 36px); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa h3 { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.qa summary i { width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform calc(320ms * var(--dur)) var(--spring); flex: none; }
.qa[open] summary i { transform: rotate(225deg); }
.qa p { margin: 0 0 18px; color: var(--muted); max-width: 760px; }
.qa[open] p { animation: down calc(320ms * var(--dur)) var(--ease); }
@keyframes down { from { opacity: 0; transform: translateY(-6px); } }

/* cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--gap); position: relative; }
.card { position: relative; min-width: 0; }
.card-a { display: flex; flex-direction: column; height: 100%; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform calc(420ms * var(--dur)) var(--spring), border-color calc(200ms * var(--dur)), box-shadow calc(240ms * var(--dur)); }
.card-a:hover { transform: translateY(-3px); border-color: var(--faint); box-shadow: var(--sh); }
.card-a:active { transform: scale(0.98); transition-duration: calc(90ms * var(--dur)); }
.card-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0), rgba(255, 79, 110, 0.08), transparent 60%); transition: opacity calc(240ms * var(--dur)); }
.card:hover .card-a::after { opacity: 1; }
.card-img { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--sunken); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.03); transition: opacity calc(420ms * var(--dur)) var(--ease), transform calc(800ms * var(--dur)) var(--ease); }
.card-img img.ok, html:not(.js) .card-img img, .card-img img[fetchpriority] { opacity: 1; transform: none; }
.card-a:hover .card-img img.ok { transform: scale(1.04); }
.card-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); }
.card-ph svg { width: 40px; height: 40px; stroke-width: 1.3; }
.card-kind, .card-ua, .card-paid { position: absolute; top: 10px; height: 22px; padding: 0 9px; border-radius: 11px; font: 700 11px/22px var(--body); letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: rgba(10, 10, 12, 0.7); }
.card-kind { left: 10px; } .card-kind.k-track { background: rgba(14, 90, 72, 0.85); } .card-kind.k-car { background: rgba(140, 12, 40, 0.85); }
.card-ua { right: 10px; background: rgba(184, 70, 12, 0.92); }
.card-paid { right: 10px; } .card-ua + .card-paid { top: 38px; }
.card-body { display: grid; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
.card-t { font: 700 15px/1.3 var(--display); font-stretch: 102%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-m { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.4em; }
.card-c { color: var(--faint); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-d { display: none; }
.card-save { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: 0;
  transition: opacity calc(160ms * var(--dur)), transform calc(380ms * var(--dur)) var(--spring), color 0.12s; }
.card-save svg { width: 17px; height: 17px; }
.card:hover .card-save, .card-save:focus-visible, .card-save[aria-pressed="true"] { opacity: 1; }
.card-save[aria-pressed="true"] { color: var(--arc); } .card-save[aria-pressed="true"] svg { fill: currentColor; }
.card-save:active { transform: scale(0.88); }
@media (hover: none) { .card-save { opacity: 1; } }
.card.leaving { position: absolute; pointer-events: none; animation: leave calc(260ms * var(--dur)) var(--ease) forwards; z-index: 0; }
@keyframes leave { to { opacity: 0; transform: scale(0.94); } }
/* list view */
.cards[data-view="list"] { grid-template-columns: 1fr; gap: 8px; }
.cards[data-view="list"] .card-a { flex-direction: row; align-items: stretch; }
.cards[data-view="list"] .card-img { width: 180px; flex: none; aspect-ratio: 3 / 2; }
.cards[data-view="list"] .card-body { align-content: center; padding: 10px 56px 10px 16px; }
.cards[data-view="list"] .card-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 13px; margin-top: 2px; }
.cards[data-view="list"] .card-save { top: 50%; bottom: auto; margin-top: -17px; }
.cards[data-view="list"] .card-kind { top: 8px; left: 8px; }

/* catalog */
.cat { padding: 26px 0 80px; }
.cat-title h1 { margin: 6px 0 4px; font-size: clamp(28px, 3.4vw, 44px); }
.cat-title p { margin: 0 0 18px; }
.cat-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 2200px) { .cat-app { grid-template-columns: 320px minmax(0, 1fr); } }
.cat-filters { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.f-inner { padding: 6px 14px 14px; }
.f-loading { padding: 12px 4px; }
.f-head { display: flex; align-items: center; gap: 10px; padding: 10px 2px 6px; }
.f-head h2 { margin: 0; font-size: 18px; } .f-head .linkish { margin-left: auto; }
.f-close, .f-done { display: none !important; }
.fg { border-top: 1px solid var(--line-soft); }
.fg summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 2px; font-weight: 700; font-size: 14px; }
.fg summary::-webkit-details-marker { display: none; }
.fg summary i { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(45deg); transition: transform calc(300ms * var(--dur)) var(--spring); }
.fg[open] summary i { transform: rotate(225deg); }
.fg-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--arc-strong); color: #fff; font: 700 11px/20px var(--body); text-align: center; }
.fg-b { padding: 0 2px 14px; }
.fg[open] .fg-b { animation: down calc(280ms * var(--dur)) var(--ease); }
.fg-search { width: 100%; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--sunken); color: var(--text); font: 500 13px/1 var(--body); margin-bottom: 8px; }
.fg-search:focus { border-color: var(--arc); outline: none; }
.fo { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.fo-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: pointer; transition: background calc(120ms * var(--dur)); }
.fo-row:hover { background: var(--hover); }
.fo-row input { position: absolute; opacity: 0; pointer-events: none; }
.fo-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--faint); display: grid; place-items: center; transition: background calc(140ms * var(--dur)), border-color calc(140ms * var(--dur)), transform calc(300ms * var(--dur)) var(--spring); }
.fo-row input:checked + .fo-box { background: var(--arc-strong); border-color: var(--arc-strong); transform: scale(1.06); }
.fo-row input:checked + .fo-box::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.fo-row input:focus-visible + .fo-box { outline: 2px solid var(--arc); outline-offset: 2px; }
.fo-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.fo-n { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.fo-row.zero { opacity: 0.45; }
.fo-more { background: none; border: 0; color: var(--arc); font: 600 13px/1 var(--body); padding: 8px 6px 0; cursor: pointer; }
.kinds button span { color: var(--faint); font-weight: 500; margin-left: 4px; }
.kinds { flex-wrap: wrap; } .kinds button { flex: 1 1 auto; padding: 0 8px; }
.rng { display: grid; gap: 10px; padding-top: 2px; }
.rng-v { display: flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rng-v output { padding: 4px 10px; border-radius: 8px; background: var(--sunken); min-width: 56px; text-align: center; font-size: 13px; }
.rng-track { position: relative; height: 28px; }
.rng-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--chip); }
.rng-fill { position: absolute; top: 12px; height: 4px; border-radius: 2px; background: var(--arc-strong); left: 0; right: 0; }
.rng input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 28px; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--arc-strong); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); cursor: grab; transition: transform calc(200ms * var(--dur)) var(--spring); }
.rng input::-webkit-slider-thumb:active { transform: scale(1.18); cursor: grabbing; }
.rng input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--arc-strong); cursor: grab; }
.rng input::-webkit-slider-runnable-track { background: none; } .rng input::-moz-range-track { background: none; }
.rng input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--arc); outline-offset: 2px; }
.unit { margin-top: 10px; } .lay button { flex: 1; }
.tg { display: grid; gap: 10px; }
.sw { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--chip); border: 1px solid var(--line); flex: none; transition: background calc(160ms * var(--dur)); }
.sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform calc(320ms * var(--dur)) var(--spring), background calc(160ms * var(--dur)); }
.sw input:checked + i { background: var(--arc-strong); border-color: var(--arc-strong); }
.sw input:checked + i::after { transform: translateX(16px); background: #fff; }
.sw input:focus-visible + i { outline: 2px solid var(--arc); outline-offset: 2px; }
.cat-main { min-width: 0; }
.cat-bar { position: sticky; top: 76px; z-index: 20; display: grid; gap: 10px; padding: 10px 0 12px; background: linear-gradient(var(--bg) 82%, transparent); }
.cat-bar .search { max-width: none; }
.cat-bar2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-count { margin: 0 auto 0 4px; color: var(--muted); } .cat-count b { color: var(--text); font-variant-numeric: tabular-nums; }
.f-open { display: none; } .f-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--arc-strong); color: #fff; font: 700 11px/20px var(--body); }
.sel { height: 40px; padding: 0 34px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 14px/1 var(--body); cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.sel option { background: var(--panel); color: var(--text); }
.viewseg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--chip); }
.viewseg button { width: 36px; height: 34px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; font-size: 15px; transition: transform calc(380ms * var(--dur)) var(--spring); }
.viewseg button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.viewseg button:active { transform: scale(0.9); }
.active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 0; }
.active:empty { display: none; }
.achip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--arc) 45%, transparent); background: var(--arc-soft); color: var(--text); font: 600 13px/1 var(--body); cursor: pointer;
  animation: pop calc(320ms * var(--dur)) var(--spring); transition: transform calc(300ms * var(--dur)) var(--spring); max-width: 260px; }
.achip i { font-style: normal; font-size: 11px; color: var(--muted); width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; }
.achip:hover i { background: var(--arc-strong); color: #fff; }
.achip:active { transform: scale(0.92); }
.a-clear { margin-left: 4px; }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; max-height: 360px; overflow: auto; padding: 6px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh);
  animation: pop calc(240ms * var(--dur)) var(--ease); transform-origin: top center; }
.sg { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); text-decoration: none; font: 500 14px/1.3 var(--body); text-align: left; cursor: pointer; }
.sg:hover, .sg[aria-selected="true"] { background: var(--hover); }
.sg-k { flex: none; min-width: 74px; color: var(--faint); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sg span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 60px 16px; border-radius: var(--r-lg); border: 1px dashed var(--line); animation: pop calc(320ms * var(--dur)) var(--ease); }
.empty b { font: 800 20px/1.2 var(--display); } .empty p { margin: 0 0 6px; }
.more-wrap { display: flex; justify-content: center; padding: 26px 0; }
.pager { margin-top: 20px; color: var(--muted); }
.scrim { position: fixed; inset: 0; background: rgba(6, 6, 7, 0.55); z-index: 60; animation: fade calc(240ms * var(--dur)) ease; }
@keyframes fade { from { opacity: 0; } }

/* facet + mod pages */
.facet { padding: 26px 0 80px; }
.facet h1 { margin: 8px 0 8px; font-size: clamp(28px, 3.6vw, 48px); }
.facet .lead { margin: 0 0 18px; }
.facet .cards { margin-top: 24px; }
.facet-links { margin: 22px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.facet-links h2 { font-size: 15px; margin: 0 8px 0 0; color: var(--muted); font-family: var(--body); font-weight: 700; flex-basis: 100%; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--faint); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--faint); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod { padding: 26px 0 60px; }
.mod-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 28px; margin-top: 16px; align-items: start; }
.mod-media { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--sunken); aspect-ratio: 3 / 2; border: 1px solid var(--line); }
.mod-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-media .card-ph svg { width: 64px; height: 64px; }
.mod-side h1 { margin: 0 0 14px; font-size: clamp(28px, 3vw, 42px); }
.mod-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.save-btn[aria-pressed="true"] { color: var(--arc); border-color: var(--arc); } .save-btn[aria-pressed="true"] svg { fill: currentColor; }
.ua-note { padding: 10px 14px; border-radius: var(--r-md); background: var(--amber-soft); color: var(--text); margin: 0 0 14px; }
.facts { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.facts div { padding: 10px 12px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line-soft); min-width: 0; }
.facts dt { color: var(--faint); font-size: 12px; font-weight: 600; } .facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.facts a { color: var(--text); }
.mod-text { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 28px; margin-top: 34px; }
.mod-text section:first-child { grid-column: 1 / -1; max-width: 900px; }
.mod-text h2 { font-size: 20px; margin: 0 0 8px; } .mod-text p { margin: 0; color: var(--muted); }
.ticks, .plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ticks li { position: relative; padding-left: 22px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 9px; height: 5px; border-left: 2px solid var(--live); border-bottom: 2px solid var(--live); transform: rotate(-45deg); }
.plain li { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nf { padding: 90px 0; display: grid; gap: 16px; justify-items: start; }
.nf h1 { font-size: clamp(34px, 5vw, 64px); margin: 0; }

/* footer */
.sf { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 40px; padding: 40px clamp(16px, 3vw, 40px) 30px; }
.sf-in { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.sf-brand { display: flex; gap: 14px; align-items: flex-start; } .sf-brand p { margin: 0; color: var(--muted); font-size: 14px; } .sf-brand b { color: var(--text); }
.sf nav { display: grid; gap: 8px; align-content: start; }
.sf h2 { margin: 0 0 4px; font: 700 13px/1 var(--body); color: var(--faint); letter-spacing: 0.08em; text-transform: uppercase; }
.sf nav a { color: var(--muted); text-decoration: none; font-size: 14px; } .sf nav a:hover { color: var(--text); }
.sf-legal { max-width: 1440px; margin: 28px auto 0; color: var(--faint); font-size: 12.5px; }

/* ---------- Liquid glass ---------- */
:root[data-glass="on"] { --ac-fill: rgba(28, 28, 34, 0.5); --ac-rim: rgba(255, 255, 255, 0.14); --ac-spec: rgba(255, 255, 255, 0.1); --ac-blur: blur(28px) saturate(180%); }
:root[data-glass="on"][data-theme="light"] { --ac-fill: rgba(255, 255, 255, 0.55); --ac-rim: rgba(255, 255, 255, 0.85); --ac-spec: rgba(255, 255, 255, 0.7); }
:root[data-glass="on"] body::before { content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none; opacity: 0.55; filter: blur(70px);
  background: radial-gradient(40% 35% at 18% 22%, rgba(255, 30, 76, 0.55), transparent 70%), radial-gradient(35% 30% at 82% 18%, rgba(243, 154, 130, 0.42), transparent 70%), radial-gradient(40% 35% at 75% 80%, rgba(40, 200, 190, 0.32), transparent 70%), radial-gradient(35% 30% at 22% 82%, rgba(140, 100, 255, 0.32), transparent 70%);
  animation: drift calc(46s * var(--dur)) ease-in-out infinite alternate; }
:root[data-glass="on"][data-motion="off"] body::before { animation: none; }
@keyframes drift { to { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.03); } }
:root[data-glass="on"] :is(.sh, .card-a, .stats div, .pillar, .tile, .cat-filters, .facts div, .creators-cta, .sug, dialog.look, .mod-media, .search, .steps li, .empty) {
  background: linear-gradient(180deg, var(--ac-spec), transparent 46%), var(--ac-fill);
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
  border-color: var(--ac-rim);
  box-shadow: inset 0 1px 0 var(--ac-spec), 0 0 0 1px rgba(0, 0, 0, 0.25), 0 18px 50px rgba(0, 0, 0, 0.3);
}
:root[data-glass="on"][data-theme="light"] :is(.sh, .card-a, .stats div, .pillar, .tile, .cat-filters, .facts div, .creators-cta, .sug, dialog.look, .search, .steps li) { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(60, 40, 60, 0.08), 0 14px 40px rgba(60, 30, 50, 0.1); }
:root[data-glass="on"] :is(.seg, .viewseg) { background: rgba(255, 255, 255, 0.08); }
:root[data-glass="on"] :is(.seg button[aria-pressed="true"], .seg button[aria-checked="true"], .viewseg button[aria-pressed="true"]) { background: rgba(255, 255, 255, 0.9); color: #121214; }
:root[data-glass="on"] .cat-bar { background: linear-gradient(rgba(6, 6, 7, 0.0), rgba(6, 6, 7, 0)); }
:root[data-glass="on"] .sh::after { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); pointer-events: none; }
:root[data-glass="on"] .card-a::after { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0), rgba(255, 255, 255, 0.1), transparent 60%); }
:root[data-glass="on"] .field-bg { opacity: 0.35; }
:root:not([data-glass="on"]) * { -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports (-moz-appearance: none) {
  :root[data-glass="on"] body::before { animation: none; }
  :root[data-glass="on"] :is(.card-a, .tile, .facts div, .steps li) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); }
  .card-a::after { display: none; }
  .res-grid > .card { content-visibility: auto; contain-intrinsic-size: 300px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .sh-name span { display: none; }
  .mod-grid { grid-template-columns: 1fr; }
  .cat-app { grid-template-columns: 240px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 980px) {
  .sh-nav a:nth-child(n+4) { display: none; }
  .sh-join span { display: none; } .sh-join { width: 40px; padding: 0; }
  .pillars, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-in { grid-template-columns: 1fr 1fr; }
  /* filters become a bottom sheet */
  .cat-app { grid-template-columns: minmax(0, 1fr); }
  .f-open { display: inline-flex; }
  .cat-filters { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70; max-height: 86vh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(105%); visibility: hidden;
    transition: transform calc(420ms * var(--dur)) var(--ease), visibility 0s linear calc(420ms * var(--dur)); padding-bottom: env(safe-area-inset-bottom); }
  .cat-filters.sheet-open { transform: none; visibility: visible; transition: transform calc(420ms * var(--dur)) var(--ease); }
  .f-close { display: inline-grid !important; } .f-done { display: flex !important; width: 100%; position: sticky; bottom: 8px; margin-top: 10px; }
  .f-head { position: sticky; top: 0; background: inherit; z-index: 2; }
  :root[data-glass="on"] .cat-filters { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.sheet-lock { overflow: hidden; }
}
@media (max-width: 640px) {
  :root { --card-min: 156px; --gap: 10px; }
  main { padding: 0 16px; }
  .sh { gap: 8px; padding: 6px 6px 6px 12px; top: 8px; }
  .sh-name { display: none; }
  .sh-nav { margin-left: 0; } .sh-nav a { padding: 8px 9px; font-size: 13.5px; }
  .sh-nav a:nth-child(n+3) { display: none; }
  .hero { padding-top: 40px; }
  .search.big { height: 54px; padding-left: 14px; }
  .search .btn span { display: none; } .search .btn { width: 44px; padding: 0; }
  .search.big .btn { width: 44px; height: 44px; padding: 0; }
  .creators-cta .btn { margin-left: 0; }
  .card-body { padding: 10px 11px 12px; } .card-t { font-size: 14px; }
  .cards[data-view="list"] .card-img { width: 112px; }
  .cards[data-view="list"] .card-body { padding: 8px 46px 8px 12px; }
  .cards[data-view="list"] .card-d { display: none; }
  .cat-bar { top: 64px; }
  .cat-bar2 .btn-ghost#random { display: none; }
  .facts { grid-template-columns: 1fr 1fr; }
  .sf-in { grid-template-columns: 1fr; }
  .band-head { flex-wrap: wrap; }
}
@media (max-width: 380px) { .viewseg { display: none; } }

/* hero art: newest covers fanned out (transform-only float) */
@media (min-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); align-items: center; column-gap: 40px; }
  .hero .stats { grid-column: 1 / -1; }
}
.hero-art { position: relative; height: clamp(300px, 34vw, 460px); display: none; }
@media (min-width: 1100px) { .hero-art { display: block; } }
.ha { position: absolute; width: 72%; aspect-ratio: 3 / 2; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--sunken); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); text-decoration: none;
  transition: transform calc(600ms * var(--dur)) var(--spring); }
.ha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ha span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; color: #fff; font: 700 14px/1.2 var(--display); background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-0 { right: 4%; top: 12%; z-index: 3; transform: rotate(-3deg); animation: float0 calc(9s * var(--dur)) ease-in-out infinite alternate; }
.ha-1 { left: 0; top: 0; z-index: 2; transform: rotate(-9deg) scale(0.9); animation: float1 calc(11s * var(--dur)) ease-in-out infinite alternate; }
.ha-2 { left: 10%; bottom: 0; z-index: 1; transform: rotate(6deg) scale(0.86); animation: float2 calc(10s * var(--dur)) ease-in-out infinite alternate; }
.hero-art:hover .ha-1 { transform: rotate(-12deg) scale(0.9) translate(-14px, -8px); }
.hero-art:hover .ha-2 { transform: rotate(9deg) scale(0.86) translate(-6px, 14px); }
@keyframes float0 { to { transform: rotate(-2deg) translateY(-10px); } }
@keyframes float1 { to { transform: rotate(-8deg) scale(0.9) translateY(8px); } }
@keyframes float2 { to { transform: rotate(5deg) scale(0.86) translateY(-6px); } }
:root[data-motion="off"] .ha { animation: none; }
:root[data-glass="on"] .ha { border-color: rgba(255, 255, 255, 0.2); }
.seg.kinds { display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px; }
.seg.kinds button { border-radius: 11px; }
.cards[data-view="list"] .card-body { flex: 1; min-width: 0; }
.card-a { min-width: 0; }
.card-c { padding-right: 40px; } .cards[data-view="list"] .card-c { padding-right: 0; }
/* stacking: backgrounds behind everything, so the phone filter sheet can rise above header and scrim */
main, .sf { z-index: auto; }
.field-bg { z-index: -1; }
:root[data-glass="on"] body::before { z-index: -2; }
.cat-filters.sheet-open { z-index: 80; }