/*
 * Voodoo Community — style 1 "Voodoo" (the default).
 * Obsidian glass over a drifting aurora, a glowing orb as the signature, and two
 * accent colours (--a, --a2) that the owner controls from Branding via /theme.css.
 */
:root {
  --a: #a35cff;
  --a2: #ff4fd8;
  --bg: #07060d;
  --bg2: #0d0a18;
  --fg: #f3f0ff;
  --mfg: #a39cc0;
  --dim: #6f6890;
  --surface: rgba(22, 17, 38, 0.62);
  --surface-2: rgba(30, 24, 52, 0.72);
  --solid: #141024;
  --line: rgba(var(--tint),0.08);
  --line-2: rgba(var(--tint),0.14);
  --input: rgba(8, 6, 16, 0.72);
  --ok: #3ddc97;
  --warn: #ffc15e;
  --bad: #ff5d7a;
  --owner: #ffc15e;
  --staff: #5cc8ff;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px;
  --display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --a-6: color-mix(in oklab, var(--a) 6%, transparent);
  --a-12: color-mix(in oklab, var(--a) 12%, transparent);
  --a-20: color-mix(in oklab, var(--a) 20%, transparent);
  --a-30: color-mix(in oklab, var(--a) 30%, transparent);
  --a-45: color-mix(in oklab, var(--a) 45%, transparent);
  --a-60: color-mix(in oklab, var(--a) 60%, transparent);
  --a2-20: color-mix(in oklab, var(--a2) 20%, transparent);
  --a2-45: color-mix(in oklab, var(--a2) 45%, transparent);
  --grad: linear-gradient(135deg, var(--a), var(--a2));
  --grad-text: linear-gradient(100deg, #fff 0%, color-mix(in oklab, var(--a) 55%, var(--hi)) 35%, var(--a2) 100%);
  --edge: linear-gradient(145deg, color-mix(in oklab, var(--a) 55%, transparent), rgba(var(--tint),0.06) 38%, rgba(var(--tint),0.03) 62%, color-mix(in oklab, var(--a2) 35%, transparent));
  --shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.8);
  --glow: 0 10px 40px -12px var(--a-60);
  --dock-h: 74px;
  --tint: 255,255,255;
  --panel: 7,6,13;
  --hi: #fff;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: var(--bg); overflow-x: clip; }
body { margin: 0; min-height: 100dvh; font: 15px/1.55 var(--body); color: var(--fg); background: transparent; overflow-x: clip; }
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.backdrop::before, .backdrop::after {
  content: ""; position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; opacity: .55; will-change: transform;
}
.backdrop::before { top: -45vmax; left: -30vmax; background: radial-gradient(closest-side, var(--a-45), transparent 70%); animation: drift1 26s ease-in-out infinite alternate; }
.backdrop::after { bottom: -50vmax; right: -35vmax; background: radial-gradient(closest-side, var(--a2-45), transparent 70%); opacity: .35; animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 12vmax) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-16vmax, -10vmax) scale(1.15); } }
.grain {
  position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .backdrop::before, .backdrop::after, .orb .halo, .marquee .mq-track { animation: none !important; } }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint),.06); border: 1px solid var(--line); }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--a-45); }
@supports (-webkit-touch-callout: none) { input, select, textarea { font-size: 16px !important; } }
[hidden] { display: none !important; }

.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.i.sm { width: 16px; height: 16px; } .i.xs { width: 13px; height: 13px; } .i.lg { width: 24px; height: 24px; }

.muted { color: var(--mfg); } .dim { color: var(--dim); }
.tiny { font-size: 11px; } .xs { font-size: 12px; } .sm { font-size: 13px; }
.b { font-weight: 700; } .accent { color: var(--a); }
.gtext { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--mfg); font-weight: 600; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; } .stack-sm > * + * { margin-top: 8px; } .stack-lg > * + * { margin-top: 20px; }
.mt { margin-top: 12px; } .mt-sm { margin-top: 6px; } .mt-lg { margin-top: 20px; }

/* ---------- the orb ---------- */
.orb { position: relative; display: grid; place-items: center; flex: none; width: var(--s, 56px); height: var(--s, 56px); }
.orb .ball {
  position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  color: #fff; font: 800 calc(var(--s, 56px) * .38)/1 var(--display);
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75), transparent 26%), radial-gradient(circle at 50% 60%, var(--a), var(--a2) 115%);
  box-shadow: 0 0 calc(var(--s, 56px) * .5) var(--a-60), inset 0 calc(var(--s, 56px) * -.12) calc(var(--s, 56px) * .22) rgba(0,0,0,.35);
}
.orb .ball img { width: 100%; height: 100%; object-fit: cover; }
.orb .halo {
  position: absolute; inset: calc(var(--s, 56px) * -.12); border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, var(--a), transparent 35%, var(--a2), transparent 70%);
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%); mask: radial-gradient(closest-side, transparent 86%, #000 88%, #000 100%);
  animation: spin 9s linear infinite; opacity: .9;
}
@keyframes spin { to { transform: rotate(360deg); } }
.orb.s32 { --s: 32px; } .orb.s40 { --s: 40px; } .orb.s48 { --s: 48px; } .orb.s64 { --s: 64px; } .orb.s84 { --s: 84px; } .orb.s104 { --s: 104px; } .orb.s128 { --s: 128px; }

/* ---------- glass surfaces ---------- */
.glass, .card {
  position: relative; border-radius: var(--r-xl); border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(var(--tint),.06);
  overflow: clip;
}
.card { padding: 18px; }
.card.lg { padding: 22px; border-radius: var(--r-2xl); }
.card.flat { background: linear-gradient(rgba(var(--tint),.025), rgba(var(--tint),.025)) padding-box, linear-gradient(var(--line), var(--line)) border-box; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.card.dashed { border: 1px dashed var(--a-45); background: var(--a-6); }
.card h2 { font-size: 16px; } .card h3 { font-size: 15px; }
.bloom { position: absolute; pointer-events: none; border-radius: 50%; width: 220px; height: 220px; right: -80px; top: -90px; background: radial-gradient(closest-side, var(--a-45), transparent); opacity: .7; }
.bloom.b2 { left: -90px; right: auto; top: auto; bottom: -110px; background: radial-gradient(closest-side, var(--a2-20), transparent); }
.clip { overflow: hidden; }

/* section heading with a fading rule */
.sec { display: flex; align-items: center; gap: 12px; margin: 6px 2px -4px; }
.sec h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mfg); font-weight: 600; font-family: var(--body); }
.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec a { font-size: 12px; color: var(--a); order: 3; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100dvh; }
.side {
  display: none; width: 264px; flex: none; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 18px 14px;
  flex-direction: column; gap: 4px; border-right: 1px solid var(--line); background: rgba(var(--panel),.55);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 18px; font: 700 16px var(--display); }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; color: var(--mfg); transition: color .15s, background .15s;
}
.side-item:hover { color: var(--fg); background: rgba(var(--tint),.04); }
.side-item.on { color: var(--fg); background: linear-gradient(90deg, var(--a-20), transparent); }
.side-item.on::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); box-shadow: 0 0 12px var(--a); }
.side-item.on .i { color: var(--a); }
.side-item .count { margin-left: auto; }
.side-item.soon { opacity: .42; }
.side-sec { padding: 18px 12px 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.side-note { padding: 2px 12px; font-size: 12px; color: var(--dim); }
.side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.side-btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; }
.main { flex: 1; min-width: 0; }
.page { max-width: 680px; margin: 0 auto; padding: 18px 16px calc(var(--dock-h) + 44px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.page.wide { max-width: 820px; } .page.full { max-width: 1060px; }

/* floating dock (phones) */
.dock {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  height: 64px; display: flex; align-items: center; justify-content: space-around; padding: 0 6px; border-radius: 26px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(var(--panel),.82), rgba(var(--panel),.82)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.3);
}
.dock a {
  position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 10.5px; font-weight: 500; color: var(--dim); transition: color .2s;
}
.dock a .i { width: 22px; height: 22px; }
.dock a.on { color: var(--fg); }
.dock a.on .i { color: var(--a); filter: drop-shadow(0 0 8px var(--a-60)); }
.dock a.on::after { content: ""; position: absolute; bottom: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--a); box-shadow: 0 0 8px var(--a); }
.dock .centre { flex: 1.1; }
.dock .centre .orb { margin-top: -30px; }
.dock .centre span.l { margin-top: 2px; }
.dock .centre.on::after { display: none; }
.dock .count { position: absolute; top: 8px; left: calc(50% + 4px); }
@media (min-width: 900px) {
  .side { display: flex; }
  .dock { display: none; }
  .page { padding: 34px 32px 56px; }
}
@media (min-width: 1100px) {
  .page:not(.wide):not(.full) { max-width: 900px; }
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .portal .who { font-size: 52px; }
}

/* ---------- counts / pills / chips ---------- */
.count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; font: 700 10.5px var(--body); color: #fff; background: var(--grad); box-shadow: 0 0 12px var(--a-45); }
.count.red { background: linear-gradient(135deg, #ff4d6d, #ff2e63); box-shadow: 0 0 12px rgba(255, 60, 100, .5); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); color: var(--mfg); }
.pill.ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); background: color-mix(in oklab, var(--ok) 10%, transparent); }
.pill.warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); background: color-mix(in oklab, var(--warn) 10%, transparent); }
.pill.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 35%, transparent); background: color-mix(in oklab, var(--bad) 10%, transparent); }
.pill.acc { color: color-mix(in oklab, var(--a) 60%, var(--hi)); border-color: var(--a-45); background: var(--a-12); }
.pill.owner { color: var(--owner); border-color: color-mix(in oklab, var(--owner) 40%, transparent); background: color-mix(in oklab, var(--owner) 12%, transparent); }
.pill.staff { color: var(--staff); border-color: color-mix(in oklab, var(--staff) 40%, transparent); background: color-mix(in oklab, var(--staff) 12%, transparent); }
.pill .dotl { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--c, var(--a)) 50%, transparent); background: color-mix(in oklab, var(--c, var(--a)) 16%, transparent); }
.chip .sw { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--a)); box-shadow: 0 0 8px var(--c, var(--a)); }
.chip button { background: none; border: 0; padding: 0; margin-left: 2px; cursor: pointer; color: var(--mfg); display: inline-flex; }
.chip button:hover { color: var(--bad); }

/* ---------- page header (inner pages) ---------- */
.phead { position: relative; overflow: hidden; padding: 18px; }
.phead .top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.phead .back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--mfg); border: 1px solid var(--line-2); background: rgba(var(--tint),.03); transition: color .15s, border-color .15s; }
.phead .back:hover { color: var(--fg); border-color: var(--a-45); }
.phead .body { position: relative; margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.glyph { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; color: var(--glyph-fg, #fff); background: var(--glyph-bg, linear-gradient(160deg, var(--a2), var(--a))); box-shadow: 0 10px 26px -10px var(--a), inset 0 1px 0 rgba(255,255,255,.35); }
.glyph.soft { background: var(--a-20); color: color-mix(in oklab, var(--a) 65%, var(--hi)); box-shadow: inset 0 0 0 1px var(--a-30); }
.phead h1 { font-size: 22px; }
.phead p { font-size: 13px; color: var(--mfg); margin-top: 3px; }

/* ---------- home: portal hero ---------- */
.portal { position: relative; overflow: hidden; padding: 0; border-radius: var(--r-2xl); }
.portal .bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; }
.portal .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--panel),.25), rgba(var(--panel),.92)); }
.portal-in { position: relative; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.portal .toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal .kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mfg); }
.portal .mid { display: flex; align-items: center; gap: 18px; }
.portal .who { font: 800 clamp(30px, 9vw, 46px)/1.02 var(--name-font, var(--display)); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.portal .who.gtext { filter: drop-shadow(0 0 22px var(--a-45)); }
.portal .who.nfx { -webkit-text-stroke: var(--name-stroke, 0) var(--name-stroke-c, transparent); text-shadow: 0 0 var(--name-glow, 0) var(--name-glow-c, transparent); }
.portal .welcome { font-size: 14px; color: color-mix(in oklab, var(--fg) 78%, transparent); margin-top: 8px; max-width: 30rem; }
.portal .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-2); background: rgba(var(--panel),.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.status .dotl { width: 8px; height: 8px; border-radius: 50%; }
.status.ok .dotl { background: var(--ok); box-shadow: 0 0 10px var(--ok); } .status.ok b { color: var(--ok); }
.status.bad .dotl { background: var(--bad); box-shadow: 0 0 10px var(--bad); } .status.bad b { color: var(--bad); }
.status span { color: var(--mfg); font-weight: 500; }
.iconbtn { position: relative; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--fg); border: 1px solid var(--line-2); background: rgba(var(--panel),.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: border-color .15s; }
.iconbtn:hover { border-color: var(--a-45); }
.iconbtn .count { position: absolute; top: -6px; right: -6px; }
@media (min-width: 640px) { .portal-in { padding: 28px; } .portal .mid { gap: 26px; } }

/* staff strip */
.staffbar { padding: 14px; }
.staffbar .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.staffbar .head a.go { display: inline-flex; align-items: center; gap: 8px; font: 700 14px var(--display); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.03); transition: border-color .15s, background .15s; min-width: 0; }
a.stat:hover { border-color: var(--a-45); background: var(--a-6); }
.stat .n { font: 800 22px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.stat .n.hot { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { font-size: 11px; color: var(--mfg); display: flex; align-items: center; gap: 5px; }
.stat .l .i { width: 13px; height: 13px; color: var(--a); }
.stat.off { opacity: .45; }

/* ---------- bento tiles ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 142px; padding: 16px; text-align: left; cursor: pointer; width: 100%;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.tile::after { content: ""; position: absolute; width: 160px; height: 160px; right: -60px; top: -70px; border-radius: 50%; background: radial-gradient(closest-side, var(--a-30), transparent); transition: opacity .25s, transform .25s; opacity: .6; pointer-events: none; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); }
.tile:hover::after { opacity: 1; transform: scale(1.15); }
.tile:active { transform: scale(.985); }
.tile .glyph { width: 44px; height: 44px; border-radius: 14px; }
.tile .tt { margin-top: auto; }
.tile .tl { font: 700 16px/1.2 var(--display); letter-spacing: -0.01em; }
.tile .ts { font-size: 12px; color: var(--mfg); margin-top: 3px; }
.tile .arrow { position: absolute; top: 16px; right: 16px; color: var(--dim); transition: transform .25s, color .25s; }
.tile:hover .arrow { transform: translate(3px, -3px); color: var(--fg); }
.tile .count { position: absolute; top: 14px; right: 14px; }
.tile.wide { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; }
.tile.wide .tt { margin-top: 0; flex: 1; }
.tile.wide .arrow { position: static; }
.tile.off { cursor: default; opacity: .55; }
.tile.off:hover { transform: none; box-shadow: var(--shadow); }
.tile.off .glyph { background: rgba(var(--tint),.06); color: var(--mfg); box-shadow: none; }
.tile.hue2 .glyph { background: linear-gradient(135deg, #ff5d7a, #ff9a5c); box-shadow: 0 10px 26px -10px #ff5d7a, inset 0 1px 0 rgba(255,255,255,.35); }
.tile.hue2::after { background: radial-gradient(closest-side, rgba(255, 93, 122, .3), transparent); }
.soonpill { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; color: var(--mfg); border: 1px solid var(--line-2); }

/* announcement card */
.ann { padding: 18px; }
.ann .hd { display: flex; align-items: center; gap: 12px; }
.ann .glyph { width: 40px; height: 40px; border-radius: 13px; }
.ann .new { font-size: 10px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 99px; color: #fff; background: var(--grad); box-shadow: 0 0 14px var(--a-60); }
.marquee { position: relative; display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-size: 13.5px; font-weight: 500; height: 42px; border-radius: 99px; border: 1px solid var(--a-30); background: linear-gradient(90deg, var(--a-12), var(--a2-20), var(--a-12)); }
.marquee .mq-ico { position: relative; z-index: 2; flex: none; height: 100%; display: grid; place-items: center; padding: 0 12px 0 14px; color: var(--fg); background: linear-gradient(90deg, rgba(var(--panel),1) 70%, transparent); }
.marquee .mq-track { display: flex; width: max-content; animation: mq 40s linear infinite; }
.marquee .mq-track span { padding-right: 48px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- buttons & forms ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; white-space: nowrap;
  padding: 11px 18px; border-radius: var(--r-md); font: 600 14px var(--body); color: #fff; background: var(--grad);
  box-shadow: 0 10px 26px -12px var(--a), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .12s, filter .15s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 14px 34px -12px var(--a), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost { color: var(--fg); background: rgba(var(--tint),.04); border: 1px solid var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--a-45); background: var(--a-6); }
.btn.soft { color: color-mix(in oklab, var(--a) 60%, var(--hi)); background: var(--a-12); border: 1px solid var(--a-30); box-shadow: none; }
.btn.danger { color: var(--bad); background: color-mix(in oklab, var(--bad) 10%, transparent); border: 1px solid color-mix(in oklab, var(--bad) 35%, transparent); box-shadow: none; }
.btn.ok { background: linear-gradient(135deg, #22c58b, #14a37a); box-shadow: 0 10px 26px -12px #22c58b, inset 0 1px 0 rgba(255,255,255,.3); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 12px; }
.btn.xs { padding: 5px 9px; font-size: 12px; border-radius: 10px; gap: 5px; }
.btn.block { width: 100%; }
.btn.lg { padding: 14px 20px; font-size: 15px; border-radius: var(--r-lg); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: var(--mfg); font-size: 12px; }
.linkbtn:hover { color: var(--fg); }
form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span, label.l { font-size: 12.5px; font-weight: 600; color: color-mix(in oklab, var(--fg) 88%, transparent); }
.hint, .field > span.hint, .field > span > .hint { font-size: 12px; color: var(--mfg); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; font: 15px var(--body); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--dim); }
input:focus, select:focus, textarea:focus { border-color: var(--a); box-shadow: 0 0 0 4px var(--a-20); background: rgba(var(--panel),.9); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23a39cc0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
select option { background: var(--solid); }
textarea { min-height: 96px; resize: vertical; }
input[type=color] { width: 48px; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--input); cursor: pointer; }
input[type=file] { font-size: 13px; color: var(--mfg); max-width: 100%; }
input[type=file]::file-selector-button { font: 600 12px var(--body); color: var(--fg); border: 1px solid var(--line-2); background: rgba(var(--tint),.05); padding: 7px 12px; border-radius: 10px; margin-right: 10px; cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--a); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check .hint { display: block; }
.search { position: relative; }
.search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); width: 17px; height: 17px; }
.search input { padding-left: 42px; border-radius: 99px; }
.grid2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.alert { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-md); padding: 12px 14px; font-size: 13.5px; border: 1px solid var(--line-2); background: rgba(var(--panel),.9); }
.alert.ok { border-color: color-mix(in oklab, var(--ok) 40%, transparent); color: color-mix(in oklab, var(--ok) 80%, var(--hi)); background: color-mix(in oklab, var(--ok) 9%, var(--bg2)); }
.alert.err { border-color: color-mix(in oklab, var(--bad) 40%, transparent); color: color-mix(in oklab, var(--bad) 75%, var(--hi)); background: color-mix(in oklab, var(--bad) 9%, var(--bg2)); }
.alert.warn { border-color: color-mix(in oklab, var(--warn) 40%, transparent); color: color-mix(in oklab, var(--warn) 80%, var(--hi)); background: color-mix(in oklab, var(--warn) 8%, var(--bg2)); }
.toast { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--dock-h) + 24px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); box-shadow: 0 20px 44px -12px rgba(0,0,0,.9); animation: toast 5s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.97); } 5%, 88% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 6px); visibility: hidden; } }
@media (min-width: 900px) { .toast { bottom: 28px; } }
.copybox { display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--input); border: 1px solid var(--line-2); }
.copybox code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; border: 0; background: none; padding: 0; font-size: 12.5px; }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.025); transition: border-color .15s, background .15s; }
a.item:hover, .item.click:hover { border-color: var(--a-30); background: var(--a-6); }
.av { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; }
.av.lg { width: 104px; height: 104px; }
.av.fallback { display: grid; place-items: center; font: 800 15px var(--display); color: #fff; background: var(--grad); }
.av.lg.fallback { font-size: 38px; }
.ring { padding: 3px; border-radius: 50%; background: conic-gradient(var(--a), var(--a2), var(--a)); box-shadow: 0 0 30px var(--a-45); }
.ring > * { border: 3px solid var(--bg); }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kv > div { border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(var(--tint),.025); padding: 11px 13px; min-width: 0; }
.kv .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 600; }
.kv .v { font-size: 14.5px; font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.empty { text-align: center; padding: 30px 16px; color: var(--mfg); font-size: 13.5px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty .glyph { margin: 0 auto 12px; }
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold[open] > summary .chev { transform: rotate(180deg); }
.chev { transition: transform .2s; color: var(--dim); }
hr.sep { border: 0; height: 1px; background: var(--line); margin: 16px 0; }

/* ---------- dashboard ---------- */
.dhead { position: relative; overflow: hidden; padding: 20px; }
.dhead-in { position: relative; display: flex; align-items: center; gap: 16px; }
.dhead .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--mfg); font-weight: 600; }
.dhead h1 { margin-top: 4px; font-size: clamp(22px, 6.4vw, 26px); font-weight: 800; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dhead .sub { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mfg); }
@media (min-width: 640px) { .dhead { padding: 26px; } .dhead h1 { font-size: 32px; } }
.tabs {
  position: sticky; top: 10px; z-index: 30; display: flex; gap: 4px; overflow-x: auto; padding: 5px; border-radius: 18px; scrollbar-width: none;
  border: 1px solid transparent; background: linear-gradient(rgba(var(--panel),.88), rgba(var(--panel),.88)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 13px; font-size: 13.5px; font-weight: 600; color: var(--mfg); transition: color .15s, background .15s; }
.tabs a:hover { color: var(--fg); background: rgba(var(--tint),.04); }
.tabs a.on { color: #fff; background: var(--grad); box-shadow: 0 8px 20px -8px var(--a), inset 0 1px 0 rgba(255,255,255,.3); }
.tabs .tb { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: var(--a-30); color: #fff; }
.tabs a.on .tb { background: rgba(255,255,255,.28); }
.subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { flex: none; padding: 7px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); color: var(--mfg); }
.subtabs a.on { color: var(--fg); border-color: var(--a-45); background: var(--a-20); }
.subtabs a .tb { margin-left: 5px; font-size: 10.5px; padding: 0 6px; border-radius: 99px; background: var(--grad); color: #fff; }
.subtabs a .tb.warn { background: var(--warn); color: #1a1206; }
.inactive-flag { border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.danger-zone { border-color: color-mix(in oklab, var(--bad) 40%, transparent); }
.statgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.perm-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 560px) { .perm-grid { grid-template-columns: 1fr 1fr; } }
.perm-grid .check { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--tint),.02); }
.perm-grid .check:has(input:checked) { border-color: var(--a-45); background: var(--a-6); }
.role-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 10px var(--c); }
.qa { border-left: 2px solid var(--a-45); padding: 2px 0 2px 12px; }
.qa .q { font-size: 11.5px; color: var(--mfg); font-weight: 600; }
.qa .a { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pchat { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; padding: 4px 2px; }
.bub { max-width: 84%; padding: 9px 13px; border-radius: 18px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bub.them { align-self: flex-start; background: rgba(var(--tint),.05); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: linear-gradient(135deg, color-mix(in oklab, var(--a) 70%, #000), color-mix(in oklab, var(--a2) 55%, #000)); border-bottom-right-radius: 6px; }
.bub.staff { align-self: flex-start; background: color-mix(in oklab, var(--staff) 10%, transparent); border: 1px solid color-mix(in oklab, var(--staff) 30%, transparent); border-bottom-left-radius: 6px; }
.bub .meta { font-size: 10.5px; opacity: .65; margin-top: 3px; }
.chatform { display: flex; gap: 8px; align-items: flex-end; }
.chatform textarea { min-height: 46px; height: 46px; max-height: 140px; border-radius: 16px; resize: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: block; width: 34px; height: 34px; border-radius: 12px; background: var(--c); box-shadow: inset 0 0 0 2px rgba(var(--tint),.12); transition: transform .15s; }
.swatches input:checked + span { transform: scale(1.1); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 0 18px var(--c); }

/* ---------- signed-out pages ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px 40px; position: relative; }
.gate .bgimg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: .5; }
.gate .bgimg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--panel),.35), rgba(var(--panel),.95)); }
.gatecard { width: 100%; max-width: 420px; padding: 28px 22px 24px; border-radius: var(--r-2xl); }
.gatecard.wide-card { max-width: 520px; }
.gatecard .brand { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.btn.icon { padding: 12px; }
.gatecard h1 { margin-top: 18px; font-size: 28px; font-weight: 800; }
.gatecard .welcome { color: var(--mfg); font-size: 14px; margin-top: 8px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: var(--input); border: 1px solid var(--line-2); margin-top: 22px; }
.seg a { text-align: center; padding: 9px 6px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--mfg); transition: color .15s; }
.seg a:hover { color: var(--fg); }
.seg a.on { color: #fff; background: var(--grad); box-shadow: 0 8px 20px -10px var(--a), inset 0 1px 0 rgba(255,255,255,.3); }
.foot { text-align: center; font-size: 11.5px; color: var(--dim); margin-top: 18px; }
.foot a { color: var(--mfg); }
.steps { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.steps span { width: 28px; height: 4px; border-radius: 99px; background: var(--line-2); }
.steps span.on { background: var(--grad); box-shadow: 0 0 10px var(--a-60); }

/* sheets */
.sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(var(--panel),.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: end center; padding: 12px 12px calc(var(--dock-h) + 20px + env(safe-area-inset-bottom)); }
.sheet { width: 100%; max-width: 460px; max-height: 70dvh; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-2xl); }
.sheet .sh { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px; }
.sheet .sb { overflow-y: auto; padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) { .sheet-bg { place-items: center; padding: 16px; } }

.swatches .sw-1 { --c: #a35cff; } .swatches .sw-2 { --c: #7c5cff; } .swatches .sw-3 { --c: #ff4fd8; } .swatches .sw-4 { --c: #ff5d7a; } .swatches .sw-5 { --c: #ff8a3d; }
.swatches .sw-6 { --c: #ffc15e; } .swatches .sw-7 { --c: #3ddc97; } .swatches .sw-8 { --c: #22d3ee; } .swatches .sw-9 { --c: #3b82f6; } .swatches .sw-10 { --c: #e5e7eb; }
.preview-name { padding: 16px 18px; border-radius: var(--r-lg); }
.who-preview { font: 800 34px/1.1 var(--name-font, var(--display)); letter-spacing: -0.03em; margin-top: 4px; overflow-wrap: anywhere; }
.who-preview.nfx { -webkit-text-stroke: var(--name-stroke, 0) var(--name-stroke-c, transparent); text-shadow: 0 0 var(--name-glow, 0) var(--name-glow-c, transparent); }
.brand-img { border-radius: var(--r-md); border: 1px solid var(--line-2); max-height: 180px; object-fit: cover; width: 100%; }
.brand-logo { width: 96px; height: 96px; }
.pickchip { cursor: pointer; padding: 6px 12px; }
.pickchip input { width: 14px; height: 14px; }
.pickchip:has(input:checked) { box-shadow: 0 0 0 1px var(--c, var(--a)), 0 0 16px -4px var(--c, var(--a)); }
.seen-select { width: auto; }
.card.dead { opacity: .6; }
.ustages { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ustages li { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 13.5px; color: var(--dim); transition: all .3s; }
.ustages li.active { color: var(--fg); border-color: var(--a-45); background: var(--a-12); box-shadow: 0 0 20px -8px var(--a); }
.ustages li.done { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 30%, transparent); }
.ustages li.done::before { content: "✓  "; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.profile-name { font-size: 26px; margin-top: 4px; overflow-wrap: anywhere; }

/* waiting pulse */
.pulse { position: relative; }
.pulse::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--a-45); animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0% { transform: scale(.8); opacity: .9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- shared bits for phase 2 ---------- */
.count.zero { display: none; }
.av.sm { width: 28px; height: 28px; font-size: 12px; }
.xs-pill { font-size: 10px; padding: 1px 7px; gap: 3px; }
.sm-glyph { width: 40px; height: 40px; border-radius: 13px; }
.item .count { flex: none; }
.ann { display: block; }
.ann .ann-body { margin-top: 12px; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ann-img { border-radius: 14px; margin-top: 12px; max-height: 220px; width: 100%; object-fit: cover; }
a.ann:hover { box-shadow: var(--shadow), var(--glow); }

/* ---------- chat ---------- */
.chatmode .dock { display: none; }
.page.chatpage { max-width: 820px; gap: 10px; padding-bottom: 12px; min-height: 100dvh; }
.chathead { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; }
.chathead h1 { font-size: 17px; }
.chathead p { font-size: 12px; color: var(--mfg); }
.chatlog { flex: 1; display: flex; flex-direction: column; }
.msgs { display: flex; flex-direction: column; padding: 4px 2px 8px; }
.loadmore { align-self: center; margin: 6px 0 10px; }
.msg { display: flex; flex-direction: column; align-items: flex-start; margin-top: 12px; scroll-margin-top: 140px; }
.msg.grouped { margin-top: 3px; }
.msg.mine { align-items: flex-end; }
.msg-head { display: flex; align-items: center; gap: 8px; margin: 0 4px 5px; font-size: 13px; }
.msg.mine .msg-head { flex-direction: row-reverse; }
.msg.mine .msg-head .av, .msg.mine .msg-name { display: none; }
.msg-name { color: var(--c, var(--fg)); font-weight: 700; }
.msg-head time { font-size: 11px; color: var(--dim); }
.bubble { position: relative; max-width: min(86%, 580px); padding: 9px 13px; border-radius: 18px; border-top-left-radius: 6px; background: rgba(var(--tint),.055); border: 1px solid var(--line); overflow-wrap: anywhere; }
.grouped .bubble { border-top-left-radius: 18px; }
.msg.mine .bubble { border-radius: 18px; border-top-right-radius: 6px; border-color: transparent;
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 72%, #120d22), color-mix(in oklab, var(--a2) 58%, #120d22)); box-shadow: 0 8px 22px -14px var(--a); }
.msg.mine.grouped .bubble { border-top-right-radius: 18px; }
.staffmsg .bubble { border-left: 3px solid var(--staff); background: color-mix(in oklab, var(--staff) 8%, rgba(var(--tint),.04)); }
.bubble .body { font-size: 14.5px; line-height: 1.5; }
.bubble .body a { color: color-mix(in oklab, var(--a) 60%, var(--hi)); text-decoration: underline; text-underline-offset: 2px; }
.mention { color: color-mix(in oklab, var(--a) 55%, var(--hi)); background: var(--a-20); padding: 0 4px; border-radius: 6px; font-weight: 600; }
.mention.me { color: #fff; background: var(--a-45); }
.quote { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mfg); padding: 5px 9px; margin-bottom: 6px; border-radius: 10px; border-left: 3px solid var(--a); background: rgba(0,0,0,.22); min-width: 0; }
.quote b { color: var(--fg); flex: none; }
.aud { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: color-mix(in oklab, var(--a) 60%, var(--hi)); margin-bottom: 6px; }
.edited { font-size: 10.5px; color: var(--dim); margin-left: 6px; }
.msg.mine .edited { color: rgba(255,255,255,.6); }
.shots { display: grid; gap: 4px; margin-top: 6px; border-radius: 12px; overflow: hidden; }
.shots.n1 { grid-template-columns: 1fr; } .shots.n2, .shots.n3, .shots.n4 { grid-template-columns: 1fr 1fr; }
.shots img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; aspect-ratio: auto; }
.shots:not(.n1) img { aspect-ratio: 1; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 2px 0; }
.msg.mine .msg-foot { flex-direction: row-reverse; }
.react { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 13px; cursor: pointer; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); }
.react span { font-size: 11.5px; font-weight: 700; color: var(--mfg); }
.react.on { border-color: var(--a-60); background: var(--a-20); }
.react.on span { color: var(--fg); }
.msg-tools { display: inline-flex; gap: 2px; opacity: .0; transition: opacity .15s; }
.msg:hover .msg-tools, .msg:focus-within .msg-tools, .msg.tapped .msg-tools { opacity: 1; }
@media (hover: none) { .msg-tools { opacity: .55; } }
.tool { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; border: 0; background: none; color: var(--mfg); cursor: pointer; }
.tool:hover { background: rgba(var(--tint),.06); color: var(--fg); }
.tool.danger:hover { color: var(--bad); }
.ann-msg { align-items: stretch !important; }
.ann-msg .bubble { max-width: 100%; padding: 16px; border-radius: 20px !important; border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; box-shadow: var(--shadow); }
.ann-msg .msg-head { flex-direction: row !important; }
.ann-msg .msg-head .av, .ann-msg .msg-name { display: inline-flex !important; }
.ann-msg .msg-foot { flex-direction: row !important; }
.ann-msg .bubble .body { font-size: 15px; }
.newpill { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px; border: 0; color: #fff; font: 600 13px var(--body); background: var(--grad); box-shadow: 0 10px 26px -8px var(--a); cursor: pointer; }
.composer { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 20; padding: 8px; border-radius: 22px; }
.crow { display: flex; align-items: flex-end; gap: 8px; }
.crow textarea { min-height: 44px; height: 44px; max-height: 160px; resize: none; border-radius: 15px; padding: 11px 14px; }
.sendbtn { padding: 12px; border-radius: 15px; }
.attach { flex: none; width: 44px; height: 44px; border-radius: 15px; cursor: pointer; }
.previews { display: flex; gap: 6px; padding: 2px 2px 8px; overflow-x: auto; }
.previews img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); }
.replying { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px; border-radius: 12px; font-size: 12.5px; color: var(--mfg); border-left: 3px solid var(--a); background: rgba(0,0,0,.25); }
.audpick { margin: 0 2px 8px; font-size: 12.5px; }
.audpick summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--mfg); font-weight: 600; list-style: none; }
.audpick summary::-webkit-details-marker { display: none; }
.audpick[open] summary .chev { transform: rotate(180deg); }
.readonly { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 18px; font-size: 13px; color: var(--mfg); border: 1px dashed var(--line-2); background: rgba(var(--panel),.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.reactpop { position: fixed; z-index: 80; display: flex; gap: 2px; padding: 6px; border-radius: 16px; }
.reactpop button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: none; font-size: 20px; cursor: pointer; transition: transform .12s, background .12s; }
.reactpop button:hover { background: rgba(var(--tint),.08); transform: scale(1.15); }
.editbox { display: flex; flex-direction: column; gap: 6px; min-width: min(70vw, 420px); }
.editbox textarea { min-height: 70px; font-size: 14px; }
.msg.flash .bubble { animation: flashmsg 1.6s ease-out; }
@keyframes flashmsg { 0% { box-shadow: 0 0 0 2px var(--a), 0 0 30px var(--a); } 100% { box-shadow: none; } }

/* channel access grid */
.agrid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ahead, .arow { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; align-items: center; gap: 6px; padding: 9px 12px; }
.ahead { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); font-weight: 600; background: rgba(var(--tint),.03); }
.ahead span:not(:first-child), .arow > :not(:first-child) { justify-self: center; }
.arow { border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.arow:hover { background: rgba(var(--tint),.02); }
.arow.owner-row { cursor: default; color: var(--owner); }
.arow input[disabled] { opacity: .3; }
a.card.row { display: flex; }

/* ---------- phase 3: tickets, messages, FAQ & Info, report / request ---------- */
form.inline { display: inline; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp3 { -webkit-line-clamp: 3; line-clamp: 3; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.55; }
.sysmsg { align-self: center; display: flex; gap: 8px; align-items: center; margin: 10px auto; padding: 6px 12px; border-radius: 99px; font-size: 12px; color: var(--mfg); border: 1px dashed var(--line-2); background: rgba(var(--tint),.02); text-align: center; }
.sysmsg time { color: var(--dim); font-size: 11px; }
.seen { align-self: flex-end; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--dim); padding: 2px 6px; }
.tk-actions { gap: 6px; }
.tk-actions .btn { flex: none; }
.allowrep { padding: 0 6px 6px; color: var(--mfg); }
.iconbtn { position: relative; }
.iconbtn .count { position: absolute; top: -4px; right: -4px; }
.item.notif.unread { border-color: var(--a-30); background: var(--a-6); }
.dot-new { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--a-45); }
.item > a.grow { min-width: 0; color: inherit; }
.doc-item .hint { margin-top: 2px; }
.folder > summary .glyph { flex: none; }
.pdfcard { gap: 12px; }
.prose { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.prose > * + * { margin-top: .8em; }
.prose h2 { font-size: 20px; margin-top: 1.3em; }
.prose h3 { font-size: 17px; margin-top: 1.2em; }
.prose h4 { font-size: 15px; margin-top: 1.1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .3em; }
.prose a { color: var(--a); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: var(--r-md); border: 1px solid var(--line); max-width: 100%; height: auto; }
.prose blockquote { border-left: 3px solid var(--a-45); padding: 6px 0 6px 14px; color: var(--mfg); background: var(--a-6); border-radius: 0 10px 10px 0; }
.prose pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--r-md); background: rgba(0,0,0,.35); border: 1px solid var(--line); font-size: 13px; }
.prose code { font-size: .92em; }
.prose :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint),.07); }
.prose hr { border: 0; border-top: 1px solid var(--line-2); }
.sub .top { align-items: flex-start; }
.sub.done { opacity: .78; }
.sub-title { display: block; font-size: 15.5px; margin-top: 2px; overflow-wrap: anywhere; }
.sub .links { gap: 10px; margin-top: 4px; font-size: 12.5px; }
.sub .links a { color: var(--a); font-weight: 600; }
.poster { flex: none; width: 62px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--tint),.04); }
.pill.st-new { color: #fde68a; border-color: rgba(253,230,138,.35); background: rgba(253,230,138,.08); }
.pill.st-working, .pill.st-accepted { color: #93c5fd; border-color: rgba(147,197,253,.35); background: rgba(147,197,253,.08); }
.pill.st-fixed, .pill.st-added { color: #86efac; border-color: rgba(134,239,172,.35); background: rgba(134,239,172,.08); }
.pill.st-closed, .pill.st-declined { color: var(--mfg); }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--a-6); border: 1px solid var(--a-20); font-size: 13.5px; }
.note .i { margin-top: 3px; flex: none; }
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.poster-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: clip; padding: 0; }
.poster-card img, .poster-card .noposter { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: rgba(var(--tint),.04); }
.poster-card .noposter { display: grid; place-items: center; color: var(--dim); }
.pc-body { display: flex; flex-direction: column; gap: 4px; padding: 10px; flex: 1; }
.pc-body .btn { margin-top: auto; }
.picks .tile .ts { white-space: normal; }
.wide-empty { grid-column: 1 / -1; }
@media (max-width: 420px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.item > .grow { min-width: 0; }

/* =====================================================================
 * Phase 4: styles. Colours, fonts and corners come from /styles.css
 * ([data-style]); the rules below switch on the style's surface,
 * background and home layout, set as attributes on <html>.
 * ===================================================================== */

/* ---------- surfaces ---------- */
[data-surface="solid"] .glass, [data-surface="solid"] .card {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(var(--line-2), var(--line-2)) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-surface="outline"] .glass, [data-surface="outline"] .card {
  background: rgba(var(--tint),.02); border: 1px solid var(--line-2);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-surface="outline"] .bloom, [data-surface="outline"] .tile::after { display: none; }
[data-surface="outline"] .tile:hover { box-shadow: none; border-color: var(--a-45); }
[data-surface="outline"] .glyph { box-shadow: none; }
[data-surface="neon"] .glass, [data-surface="neon"] .card {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(135deg, var(--a-60), var(--a2-45) 50%, var(--a-30)) border-box;
  box-shadow: 0 0 0 1px var(--a-12), 0 0 26px -10px var(--a-60), var(--shadow);
}
[data-surface="neon"] .glyph { box-shadow: 0 0 18px -2px var(--a-60); }
[data-surface="neon"] h1, [data-surface="neon"] .tile .tl { text-shadow: 0 0 18px var(--a-45); }
[data-surface="soft"] .glass, [data-surface="soft"] .card {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, linear-gradient(var(--solid), var(--solid)) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 10px 12px 28px -12px rgba(20,16,40,.22), -8px -8px 22px -12px rgba(255,255,255,.95);
}
[data-mode="dark"][data-surface="soft"] .glass, [data-mode="dark"][data-surface="soft"] .card { box-shadow: 10px 12px 28px -12px rgba(0,0,0,.8), -6px -6px 18px -12px rgba(255,255,255,.08); }
[data-surface="soft"] .card.flat { box-shadow: inset 2px 2px 6px rgba(20,16,40,.06); background: rgba(var(--tint),.03); }
[data-surface="soft"] .bloom { opacity: .35; }

/* ---------- backgrounds ---------- */
[data-bg="plain"] .backdrop::before, [data-bg="plain"] .backdrop::after { display: none; }
[data-bg="plain"] .grain { opacity: .04; }
[data-bg="glow"] .backdrop::before { top: -60vmax; left: 50%; margin-left: -45vmax; animation: none; opacity: .5; }
[data-bg="glow"] .backdrop::after { display: none; }
[data-bg="grid"] .backdrop {
  background-image: linear-gradient(var(--a-12) 1px, transparent 1px), linear-gradient(90deg, var(--a-12) 1px, transparent 1px);
  background-size: 34px 34px; background-position: center top;
}
[data-bg="grid"] .backdrop::before, [data-bg="grid"] .backdrop::after { opacity: .3; }
[data-bg="stars"] .backdrop {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 42% 72%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 8% 86%, var(--a), transparent 60%),
    radial-gradient(1px 1px at 55% 40%, rgba(255,255,255,.6), transparent 60%);
  background-size: 260px 260px, 340px 340px, 300px 300px, 220px 220px, 420px 420px, 180px 180px;
}
[data-bg="stars"] .backdrop::before { opacity: .35; } [data-bg="stars"] .backdrop::after { opacity: .25; }
[data-bg="sunset"] .backdrop::before { top: auto; bottom: -55vmax; left: 50%; margin-left: -45vmax; animation: none; opacity: .7;
  background: radial-gradient(closest-side, var(--a2-45), var(--a-20) 55%, transparent 72%); }
[data-bg="sunset"] .backdrop::after { inset: auto 0 0 0; width: auto; height: 38vh; border-radius: 0; opacity: .45; animation: none;
  background: linear-gradient(transparent, var(--a-12)), repeating-linear-gradient(0deg, var(--a2-45) 0 1px, transparent 1px 22px); }
[data-bg="mesh"] .backdrop::before { animation-duration: 40s; opacity: .45; }
[data-bg="mesh"] .backdrop::after { animation-duration: 48s; opacity: .45; }
[data-bg="mesh"] .backdrop { background: radial-gradient(60vmax 40vmax at 100% 0%, var(--a2-20), transparent 70%), radial-gradient(50vmax 40vmax at 0% 100%, var(--a-20), transparent 70%); }
[data-mode="light"] .backdrop::before, [data-mode="light"] .backdrop::after { opacity: .35; }
[data-mode="light"] .grain { opacity: .05; mix-blend-mode: multiply; }
[data-mode="light"][data-bg="stars"] .backdrop { background-image: none; }

/* ---------- light mode touch-ups ---------- */
[data-mode="light"] .pill.st-new { color: #a16207; border-color: rgba(161,98,7,.3); background: rgba(250,204,21,.14); }
[data-mode="light"] .pill.st-working, [data-mode="light"] .pill.st-accepted { color: #1d4ed8; border-color: rgba(29,78,216,.28); background: rgba(59,130,246,.1); }
[data-mode="light"] .pill.st-fixed, [data-mode="light"] .pill.st-added { color: #15803d; border-color: rgba(21,128,61,.28); background: rgba(34,197,94,.12); }
[data-mode="light"] .pill.ok, [data-mode="light"] .status.ok { color: #15803d; }
[data-mode="light"] .pill.owner { color: #a16207; }
[data-mode="light"] .pill.staff { color: #0369a1; }
[data-mode="light"] .alert.ok { color: #166534; } [data-mode="light"] .alert.err { color: #b91c1c; } [data-mode="light"] .alert.warn { color: #92400e; }
[data-mode="light"] .portal .who.gtext { filter: none; }
[data-mode="light"] .dock { box-shadow: 0 16px 36px -14px rgba(20,16,40,.35), 0 0 0 1px rgba(20,16,40,.06); }
[data-mode="light"] .toast { box-shadow: 0 16px 36px -14px rgba(20,16,40,.4); }
[data-mode="light"] input:focus, [data-mode="light"] select:focus, [data-mode="light"] textarea:focus { background: #fff; }
[data-mode="light"] .msg:not(.mine) .bubble { color: var(--fg); }
[data-mode="light"] .msg.mine .bubble { color: #fff; }
[data-mode="light"] .prose pre { background: rgba(20,16,40,.05); }
[data-mode="light"] .tile.off .glyph { color: var(--mfg); }
[data-mode="light"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235d566e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* ---------- layouts (home screen) ---------- */
/* list */
[data-layout="list"] .bento { grid-template-columns: 1fr; gap: 8px; }
[data-layout="list"] .tile { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 13px 16px; }
[data-layout="list"] .tile.wide { grid-column: auto; }
[data-layout="list"] .tile .glyph { width: 40px; height: 40px; border-radius: calc(var(--r-md) - 2px); }
[data-layout="list"] .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="list"] .tile .arrow { position: static; order: 4; }
[data-layout="list"] .tile .count { position: static; order: 3; }
[data-layout="list"] .tile .soonpill { position: static; order: 3; }
[data-layout="list"] .tile::after { display: none; }
[data-layout="list"] .portal .orb.s104 { --s: 72px; }
[data-layout="list"] .portal .who { font-size: clamp(26px, 7.5vw, 38px); }
/* cards */
[data-layout="cards"] .bento { grid-template-columns: 1fr; gap: 14px; }
[data-layout="cards"] .tile { min-height: 112px; flex-direction: row; align-items: center; gap: 18px; padding: 20px; }
[data-layout="cards"] .tile.wide { grid-column: auto; }
[data-layout="cards"] .tile .glyph { width: 60px; height: 60px; border-radius: var(--r-lg); }
[data-layout="cards"] .tile .glyph .i { width: 26px; height: 26px; }
[data-layout="cards"] .tile .tt { margin-top: 0; flex: 1; min-width: 0; }
[data-layout="cards"] .tile .tl { font-size: 19px; }
[data-layout="cards"] .tile .ts { font-size: 13px; }
[data-layout="cards"] .tile .arrow { position: static; }
[data-layout="cards"] .portal .mid { flex-direction: column; text-align: center; gap: 14px; }
[data-layout="cards"] .portal .welcome { margin-left: auto; margin-right: auto; }
[data-layout="cards"] .portal .chips, [data-layout="cards"] .portal .toprow { justify-content: center; }
[data-layout="cards"] .portal .toprow { position: relative; }
[data-layout="cards"] .portal .toprow .iconbtn { position: absolute; right: 0; }
[data-layout="cards"] .portal-in { padding-top: 26px; padding-bottom: 26px; }
/* compact */
[data-layout="compact"] .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
[data-layout="compact"] .tile { min-height: 100px; padding: 12px 8px; gap: 8px; align-items: center; justify-content: center; text-align: center; }
[data-layout="compact"] .tile.wide { grid-column: auto; flex-direction: column; }
[data-layout="compact"] .tile .glyph { width: 40px; height: 40px; }
[data-layout="compact"] .tile .tt { margin-top: 0; flex: none; }
[data-layout="compact"] .tile .tl { font-size: 13px; }
[data-layout="compact"] .tile .ts, [data-layout="compact"] .tile .arrow, [data-layout="compact"] .tile::after { display: none; }
[data-layout="compact"] .tile .count { top: 8px; right: 8px; }
[data-layout="compact"] .portal .orb.s104 { --s: 64px; }
[data-layout="compact"] .portal .who { font-size: clamp(24px, 7vw, 34px); }
[data-layout="compact"] .portal-in { gap: 12px; padding: 16px; }
@media (min-width: 900px) { [data-layout="compact"] .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* magazine */
[data-layout="magazine"] .portal-in { min-height: 330px; justify-content: space-between; }
[data-layout="magazine"] .portal .mid { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: auto; }
[data-layout="magazine"] .portal .orb.s104 { --s: 64px; }
[data-layout="magazine"] .portal .who { font-size: clamp(36px, 11vw, 60px); }
[data-layout="magazine"] .portal .bg { opacity: .85; }
[data-layout="magazine"] .bento > .tile:first-child { grid-column: span 2; min-height: 150px; }
[data-layout="magazine"] .bento > .tile:first-child .tl { font-size: 21px; }
[data-layout="magazine"] .sec h2 { font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: none; color: var(--fg); }

/* ---------- style picker ---------- */
.stylegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .stylegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stylecard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: clip; cursor: pointer;
  border: 2px solid var(--line-2); background: var(--bg); color: var(--fg); font-family: var(--body); transition: transform .15s, border-color .15s; }
.stylecard:hover { transform: translateY(-2px); }
.stylecard input { position: absolute; opacity: 0; pointer-events: none; }
.stylecard:has(input:checked) { border-color: var(--a); box-shadow: 0 0 0 3px var(--a-30); }
.stylecard .sc-prev { position: relative; height: 104px; padding: 10px; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  background: radial-gradient(120px 80px at 90% 0%, var(--a-30), transparent 70%), radial-gradient(120px 80px at 0% 100%, var(--a2-20), transparent 70%), var(--bg); }
.stylecard .sc-bar { display: flex; align-items: center; gap: 6px; }
.stylecard .sc-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--a-45); flex: none; }
.stylecard .sc-name { font: 800 14px/1.1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stylecard .sc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; }
.stylecard .sc-tile { height: 30px; border-radius: calc(var(--r-sm) - 2px); background: var(--surface); border: 1px solid var(--line-2); display: flex; align-items: center; gap: 5px; padding: 0 6px; }
.stylecard .sc-tile i { width: 12px; height: 12px; border-radius: 4px; background: var(--grad); flex: none; }
.stylecard .sc-tile b { height: 5px; flex: 1; border-radius: 3px; background: var(--dim); opacity: .6; }
.stylecard[data-layout="list"] .sc-tiles, .stylecard[data-layout="cards"] .sc-tiles { grid-template-columns: 1fr; }
.stylecard[data-layout="list"] .sc-tile { height: 16px; }
.stylecard[data-layout="compact"] .sc-tiles { grid-template-columns: repeat(3, 1fr); }
.stylecard .sc-meta { padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--bg2); }
.stylecard .sc-meta b { display: block; font-size: 13px; font-family: var(--body); }
.stylecard .sc-meta span { display: block; font-size: 11px; color: var(--mfg); line-height: 1.35; margin-top: 2px; }
.stylecard .sc-on { position: absolute; top: 8px; right: 8px; display: none; width: 22px; height: 22px; border-radius: 50%; place-items: center; background: var(--grad); color: #fff; }
.stylecard:has(input:checked) .sc-on { display: grid; }
.stylefilter { display: flex; gap: 6px; flex-wrap: wrap; }
[data-surface="outline"] .card.dashed { border-style: dashed; border-color: var(--a-45); background: var(--a-6); }

/* ---------- phase 5: Community Store ---------- */
.storecard.owned { box-shadow: 0 0 0 1px color-mix(in oklab, var(--ok) 40%, transparent), var(--shadow); }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 560px) { .prices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.price { position: relative; cursor: pointer; }
.price input { position: absolute; opacity: 0; pointer-events: none; }
.price span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--tint),.03); transition: border-color .15s, background .15s; }
.price b { font-size: 13px; }
.price em { font: 800 20px/1.1 var(--display); font-style: normal; }
.price small { font-size: 11px; color: var(--mfg); }
.price input:checked + span { border-color: var(--a); background: var(--a-12); box-shadow: 0 0 0 3px var(--a-20); }
.price input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.sportev { align-items: flex-start; }
.sportev.live { border-color: color-mix(in oklab, var(--bad) 45%, transparent); background: color-mix(in oklab, var(--bad) 7%, transparent); }
.sp-emoji { font-size: 26px; line-height: 1; flex: none; width: 36px; text-align: center; padding-top: 2px; }
.sp-title { display: block; font-size: 15px; overflow-wrap: anywhere; }
.sp-ch { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12.5px; font-weight: 600; color: color-mix(in oklab, var(--a) 70%, var(--hi)); }
input[type=datetime-local] { width: 100%; font: 15px var(--body); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 11px 14px; color-scheme: inherit; }
.tile.sporttile .glyph { background: linear-gradient(135deg, #22c55e, #0ea5e9); box-shadow: 0 10px 26px -10px #22c55e, inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- phase 6: reactions in threads, typing, GIFs ---------- */
.reactmenu { position: relative; display: inline-block; }
.reactmenu > summary { list-style: none; cursor: pointer; }
.reactmenu > summary::-webkit-details-marker { display: none; }
.reactpick { position: absolute; z-index: 25; bottom: calc(100% + 6px); right: 0; display: flex; gap: 2px; padding: 5px; border-radius: 99px;
  background: var(--solid); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.msg:not(.mine) .reactpick { right: auto; left: 0; }
.reactpick.down { bottom: auto; top: calc(100% + 6px); }
.reactpick button { border: 0; background: none; font-size: 20px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.reactpick button:hover { background: var(--a-20); }
.msg:has(.reactmenu[open]) .msg-tools { opacity: 1; }
.typing { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mfg); padding: 0 10px 4px; }
.typing .dots { display: inline-flex; gap: 3px; }
.typing .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--a); animation: tdot 1.2s infinite ease-in-out; }
.typing .dots i:nth-child(2) { animation-delay: .15s; } .typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.gifbtn { font: 800 11px var(--body); letter-spacing: .04em; }
.gifmsg { display: block; max-width: min(260px, 100%); border-radius: 12px; margin-top: 4px; }
.gifsheet .sb { display: flex; flex-direction: column; gap: 10px; }
.gifgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 124px; gap: 6px; max-height: 55vh; overflow-y: auto; flex: 0 1 auto; min-height: 140px; align-content: start; }
@media (min-width: 560px) { .gifgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gifpick { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: rgba(var(--tint),.05); border-radius: 10px; overflow: hidden; cursor: pointer; }
.gifpick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.howto summary { list-style: none; cursor: pointer; }
.paywith { gap: 14px; }
.bubble:has(> .gifmsg:only-child) { background: none; border: 0; padding: 0; box-shadow: none; }


/* =====================================================================
 * Styles 31-50: holiday backgrounds and the mosaic / carousel layouts
 * ===================================================================== */
:root { --snow: rgba(255,255,255,.85); }
[data-mode="light"] { --snow: rgba(2,132,199,.45); }
[data-bg="snow"] .backdrop {
  background-image: radial-gradient(3.5px 3.5px at 20px 30px, var(--snow), transparent), radial-gradient(2.5px 2.5px at 90px 120px, var(--snow), transparent),
    radial-gradient(4.5px 4.5px at 150px 60px, var(--snow), transparent), radial-gradient(2px 2px at 60px 170px, var(--snow), transparent),
    radial-gradient(3px 3px at 175px 185px, var(--snow), transparent);
  background-size: 200px 200px, 230px 230px, 260px 260px, 200px 200px, 290px 290px;
  animation: snowfall 26s linear infinite; }
@keyframes snowfall { to { background-position: 40px 600px, -30px 690px, 20px 780px, -40px 600px, 30px 870px; } }
[data-bg="snow"] .backdrop::after { opacity: .25; }
[data-bg="hearts"] .backdrop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23f43f5e' fill-opacity='.22'%3E%3Cpath d='M30 44c-6-8-20-4-18 7 1 7 18 18 18 18s17-11 18-18c2-11-12-15-18-7z'/%3E%3Cpath transform='translate(92 92) scale(.7)' d='M30 44c-6-8-20-4-18 7 1 7 18 18 18 18s17-11 18-18c2-11-12-15-18-7z'/%3E%3C/g%3E%3Cg fill='%23ec4899' fill-opacity='.16'%3E%3Cpath transform='translate(100 8) scale(.5)' d='M30 44c-6-8-20-4-18 7 1 7 18 18 18 18s17-11 18-18c2-11-12-15-18-7z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 160px 160px; animation: floatup 30s linear infinite; }
@keyframes floatup { to { background-position: 0 -640px; } }
[data-bg="bats"] .backdrop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180'%3E%3Cg fill='%238b5cf6' fill-opacity='.35'%3E%3Cpath d='M40 40c6-6 12-6 16 0 2-4 5-5 6-2 1-3 4-2 6 2 4-6 10-6 16 0-6 0-9 4-10 9-3-3-7-2-9 1-2-2-4-2-6 0-2-3-6-4-9-1-1-5-4-9-10-9z'/%3E%3Cpath transform='translate(120 110) scale(.7)' d='M40 40c6-6 12-6 16 0 2-4 5-5 6-2 1-3 4-2 6 2 4-6 10-6 16 0-6 0-9 4-10 9-3-3-7-2-9 1-2-2-4-2-6 0-2-3-6-4-9-1-1-5-4-9-10-9z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 180px; animation: batfly 40s linear infinite; }
@keyframes batfly { to { background-position: -880px -360px; } }
[data-bg="bats"] .backdrop::before { top: auto; bottom: -55vmax; left: 50%; margin-left: -45vmax; animation: none; opacity: .5; }
[data-bg="eggs"] .backdrop { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cellipse cx='30' cy='36' rx='9' ry='12' fill='%23c4b5fd' fill-opacity='.45'/%3E%3Cellipse cx='120' cy='60' rx='8' ry='11' fill='%23fde68a' fill-opacity='.6'/%3E%3Cellipse cx='70' cy='130' rx='9' ry='12' fill='%2386efac' fill-opacity='.45'/%3E%3Cellipse cx='160' cy='150' rx='7' ry='10' fill='%23f9a8d4' fill-opacity='.5'/%3E%3Cellipse cx='150' cy='20' rx='6' ry='8' fill='%2393c5fd' fill-opacity='.5'/%3E%3C/svg%3E"); background-size: 180px 180px; }
[data-bg="fireworks"] .backdrop {
  background-image: radial-gradient(circle at 18% 22%, var(--a) 0 1.5px, transparent 2px), radial-gradient(circle at 78% 14%, var(--a2) 0 1.5px, transparent 2px),
    radial-gradient(circle at 64% 58%, var(--a) 0 1.5px, transparent 2px), radial-gradient(circle at 30% 76%, var(--a2) 0 1.5px, transparent 2px),
    radial-gradient(circle at 88% 84%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 46% 36%, #fff 0 1px, transparent 1.5px);
  background-size: 140px 140px, 190px 190px, 170px 170px, 210px 210px, 120px 120px, 230px 230px; animation: twinkle 3.2s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
[data-bg="fireworks"] .backdrop::before { background: radial-gradient(closest-side, var(--a-30), transparent 70%), repeating-conic-gradient(from 0deg, var(--a-20) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent 72%); mask: radial-gradient(closest-side, #000 40%, transparent 72%); width: 70vmax; height: 70vmax; top: -30vmax; left: -20vmax; opacity: .5; }
@media (prefers-reduced-motion: reduce) { [data-bg] .backdrop { animation: none !important; } }

/* mosaic: two big feature tiles, then three to a row */
[data-layout="mosaic"] .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
[data-layout="mosaic"] .bento > .tile { grid-column: span 2; min-height: 108px; padding: 12px; gap: 8px; }
[data-layout="mosaic"] .bento > .tile .ts, [data-layout="mosaic"] .bento > .tile .arrow { display: none; }
[data-layout="mosaic"] .bento > .tile .tl { font-size: 13.5px; }
[data-layout="mosaic"] .bento > .tile .glyph { width: 38px; height: 38px; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) { grid-column: span 3; min-height: 168px; padding: 16px; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) .ts { display: block; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) .tl { font-size: 17px; }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) .glyph { width: 50px; height: 50px; }
[data-layout="mosaic"] .bento > .tile.wide { grid-column: span 6; min-height: 0; flex-direction: row; align-items: center; }
[data-layout="mosaic"] .bento > .tile.wide .ts, [data-layout="mosaic"] .bento > .tile.wide .arrow { display: block; }
[data-layout="mosaic"] .portal .mid { gap: 14px; }
/* carousel: swipe through big tiles */
[data-layout="carousel"] .bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -16px; padding: 4px 16px 10px; scroll-padding: 0 16px; }
[data-layout="carousel"] .bento::-webkit-scrollbar { display: none; }
[data-layout="carousel"] .bento > .tile, [data-layout="carousel"] .bento > .tile.wide { flex: 0 0 72%; min-height: 188px; scroll-snap-align: start;
  flex-direction: column; align-items: stretch; }
[data-layout="carousel"] .bento > .tile .glyph { width: 54px; height: 54px; border-radius: var(--r-lg); }
[data-layout="carousel"] .bento > .tile .tl { font-size: 20px; }
[data-layout="carousel"] .bento > .tile .tt { margin-top: auto; }
[data-layout="carousel"] .bento > .tile.wide .arrow { position: absolute; }
[data-layout="carousel"] .bento > .empty { flex: 0 0 100%; }
@media (min-width: 640px) { [data-layout="carousel"] .bento > .tile, [data-layout="carousel"] .bento > .tile.wide { flex-basis: 40%; } }
@media (min-width: 1100px) { [data-layout="carousel"] .bento > .tile, [data-layout="carousel"] .bento > .tile.wide { flex-basis: 30%; } }
[data-layout="carousel"] .sec h2::after { content: "  ⟶ swipe"; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--dim); }

/* fonts that need a little help */
[data-style="retro-arcade"] h1, [data-style="retro-arcade"] h2, [data-style="retro-arcade"] .tile .tl, [data-style="retro-arcade"] .portal .who { letter-spacing: 0; line-height: 1.35; }
[data-style="retro-arcade"] .portal .who { font-size: clamp(18px, 6vw, 28px); }
[data-style="retro-arcade"] .tile .tl { font-size: 10px; }
[data-style="retro-arcade"] .phead h1, [data-style="retro-arcade"] .dhead h1 { font-size: 16px; }
[data-style="noir"] h1, [data-style="noir"] h2, [data-style="noir"] .tile .tl { letter-spacing: .03em; font-weight: 400; }
[data-style="noir"] .portal .who { font-weight: 400; letter-spacing: .02em; }
[data-style="christmas"] .portal .who, [data-style="halloween"] .portal .who, [data-style="valentines"] .portal .who, [data-style="love-letter"] .portal .who { font-weight: 400; letter-spacing: 0; }
/* style picker page */
.stylebar { position: sticky; bottom: calc(var(--dock-h) + 8px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 20px; }
@media (min-width: 900px) { .stylebar { bottom: 16px; } }
.stylebar .check { margin-top: 2px; }
.stylecard .sc-now { position: absolute; top: 76px; left: 8px; z-index: 2; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
.stylecard[data-layout="carousel"] .sc-tiles { grid-template-columns: 1.4fr 1fr; }
.stylecard[data-layout="mosaic"] .sc-tiles { grid-template-columns: repeat(3, 1fr); }
.stylecard[data-layout="mosaic"] .sc-tile:first-child { grid-column: span 2; }
.curstyle { display: flex; align-items: center; gap: 14px; }
.stylecard.mini { width: 132px; flex: none; cursor: default; }
.stylecard.mini .sc-prev { height: 88px; }
.stylecard.mini:hover { transform: none; }

/* ---------- 2.7: Sport guide, results, news ---------- */
.center { text-align: center; }
.seg.sg-days { grid-template-columns: 1fr 1fr; margin-top: 0; }
.seg.sg-days small { display: block; font-size: 11px; font-weight: 500; opacity: .75; }
.subtabs.sm a { padding: 5px 11px; font-size: 11.5px; }
.sg-fx { align-items: flex-start; }
.sg-fx.live { border-color: color-mix(in oklab, var(--bad) 45%, transparent); background: color-mix(in oklab, var(--bad) 7%, transparent); }
.sg-fx.done { opacity: .62; }
.sg-time { flex: none; width: 52px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-top: 1px; }
.sg-time b { font: 700 15px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--hi); }
.sg-chans { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.sg-ch { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 8px 3px 4px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
  color: color-mix(in oklab, var(--a) 60%, var(--hi)); background: var(--a-6); border: 1px solid var(--a-20); overflow-wrap: anywhere; }
.sg-ch img { width: 30px; height: 18px; object-fit: contain; border-radius: 4px; background: #fff; padding: 1px 2px; flex: none; }
.sg-more { display: contents; }
.sg-more summary { list-style: none; cursor: pointer; padding: 3px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; border: 1px dashed var(--line-2); color: var(--mfg); }
.sg-more summary::-webkit-details-marker { display: none; }
.sg-more[open] summary { display: none; }
.sg-score { align-items: center; }
.sg-score.in { border-color: color-mix(in oklab, var(--bad) 45%, transparent); background: color-mix(in oklab, var(--bad) 6%, transparent); }
.sg-team { display: flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.sg-team img, .sg-nologo { width: 22px; height: 22px; object-fit: contain; flex: none; border-radius: 50%; }
.sg-nologo { background: rgba(var(--tint),.08); }
.sg-n { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; min-width: 22px; text-align: right; color: var(--hi); }
.sg-st { flex: none; max-width: 38%; text-align: right; }
.sg-lead { display: block; overflow: hidden; border-radius: var(--r-xl); color: inherit; }
.sg-lead img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: rgba(var(--tint),.06); }
.sg-lead-t { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.sg-lead-t b { font: 700 18px/1.25 var(--display); color: var(--hi); overflow-wrap: anywhere; }
.sg-lead-t p { margin: 0; font-size: 13.5px; color: var(--mfg); }
.sg-news { align-items: flex-start; color: inherit; }
.sg-news .sg-thumb { width: 92px; aspect-ratio: 16 / 10; }
.sg-thumb { position: relative; flex: none; border-radius: 10px; overflow: hidden; background: rgba(var(--tint),.06); }
.sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-nt { display: block; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sg-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.sg-vid { display: flex; flex-direction: column; gap: 8px; color: inherit; min-width: 0; }
.sg-vid .sg-thumb { width: 100%; aspect-ratio: 16 / 9; }
.sg-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; z-index: 1; }
[data-mode="light"] .sg-time b, [data-mode="light"] .sg-n, [data-mode="light"] .sg-lead-t b { color: var(--fg); }
.gaterow { padding: 12px 0; border-top: 1px solid var(--line); }
.gaterow:first-child { border-top: 0; padding-top: 0; }
[data-noimages] .attach { display: none !important; }
.chatform .iconbtn { flex: none; }
.bub .shots { margin-top: 6px; }
.bub .gifmsg { display: block; max-width: 220px; border-radius: 12px; margin-top: 6px; }
.preacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; }
.preacts .react { font-size: 12px; padding: 2px 7px; }
.preacts .addr { opacity: .55; }
.bub:hover .preacts .addr, .preacts .addr:focus { opacity: 1; }
.ppick { display: flex; flex-basis: 100%; gap: 2px; padding: 4px; border-radius: 12px; z-index: 5; }
.ppick button { font-size: 18px; padding: 4px 6px; border-radius: 8px; background: none; border: 0; cursor: pointer; }
.ppick button:hover { background: rgba(var(--tint),.08); }
.appbanner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.appbanner[hidden] { display: none; }
.appbanner .grow { min-width: 0; }
.appbanner .t-inapp { display: none; }
.appbanner.inapp .t-inapp { display: block; }
.appbanner.inapp .t-web { display: none; }
.appbanner .ab-actions { display: flex; gap: 6px; flex: none; }
.appbanner .ab-x { flex: none; }
@media (max-width: 380px) { .appbanner { flex-wrap: wrap; } .appbanner .ab-actions { order: 3; width: 100%; } }
.hoursbar { display: flex; align-items: center; gap: 8px; margin: 6px 0; padding: 7px 12px; border-radius: 99px; font-size: 12.5px; border: 1px solid var(--line-2); background: rgba(var(--panel),.7); }
.hoursbar.open { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.hoursbar.closed { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.hoursbar span { color: var(--mfg); }
.closedmsg { margin: 4px 0 8px; }
.hourspill { display: inline-flex; align-items: center; gap: 6px; }
.hgrid { display: flex; flex-direction: column; gap: 8px; }
.hrow { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.hrow input[type=time] { width: 100%; min-width: 0; font: 15px var(--body); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 9px 10px; color-scheme: inherit; }
.hrow:has(input[type=checkbox]:not(:checked)) input[type=time] { opacity: .4; }
.check.off { opacity: .55; }
/* ---------- 2.8: Shop ---------- */
.shopgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .shopgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shopgrid > .empty { grid-column: 1 / -1; }
.shopcard { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); color: inherit; min-width: 0; }
.shopcard.off { opacity: .6; }
.shop-img { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: rgba(var(--tint),.05); color: var(--mfg); }
.shop-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-img .i { width: 34px; height: 34px; }
.trunc2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.3; }
.shop-price { font: 800 16px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.shop-hero { width: 100%; max-height: 360px; object-fit: contain; border-radius: var(--r-md); background: rgba(var(--tint),.04); }
.shop-desc, .shop-delivery { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.field.qty { width: 110px; flex: none; }
.tile.shoptile .glyph { background: linear-gradient(135deg, #f59e0b, #ec4899); }

/* ---------- 2.8: home tiles always fill their rows (no half-empty rows in any layout) ---------- */
.bento { display: flex; flex-wrap: wrap; align-items: stretch; }
.bento > .tile { flex: 1 1 calc(50% - 6px); min-width: 0; width: auto; }
.bento > .tile.wide { flex-basis: 100%; }
.bento > .empty { flex: 1 1 100%; }
@media (min-width: 1100px) {
  .bento > .tile { flex-basis: calc(25% - 9px); }
  .bento > .tile.wide { flex-basis: calc(50% - 6px); }
}
[data-layout="list"] .bento > .tile, [data-layout="cards"] .bento > .tile, [data-layout="list"] .bento > .tile.wide, [data-layout="cards"] .bento > .tile.wide { flex-basis: 100%; }
[data-layout="compact"] .bento > .tile, [data-layout="compact"] .bento > .tile.wide { flex-basis: calc(33.333% - 6px); }
@media (min-width: 900px) { [data-layout="compact"] .bento > .tile, [data-layout="compact"] .bento > .tile.wide { flex-basis: calc(16.666% - 7px); } }
[data-layout="magazine"] .bento > .tile:first-child { flex-basis: 100%; }
/* 2.8.44: carousel styles swipe sideways (the fill-the-row rule above made them wrap into a column) */
[data-layout="carousel"] .bento { flex-wrap: nowrap; align-items: stretch; padding-bottom: 4px; }
[data-layout="carousel"] .bento > .empty { flex: 0 0 100%; }
[data-layout="mosaic"] .bento > .tile { flex-basis: calc(33.333% - 7px); }
[data-layout="mosaic"] .bento > .tile:nth-child(-n+2) { flex-basis: calc(50% - 5px); }
[data-layout="mosaic"] .bento > .tile.wide { flex-basis: 100%; }
b.trunc, strong.trunc, h1.trunc, h2.trunc, h3.trunc { display: block; }
.ntitle { display: block; overflow-wrap: anywhere; line-height: 1.3; }
.item.notif { align-items: flex-start; }
.item.notif .dot-new { margin-top: 6px; flex: none; }

/* 2.8.6: locked premium option with an Activate link */
.lockbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: var(--a-6); border: 1px dashed var(--a-20); min-width: 0; }
.lockbox .grow { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.lockbox .hint { display: block; }

/* 2.8.6: install + notifications pop-up */
.appsheet-bg { z-index: 70; place-items: center; padding: 16px; }
.appsheet { max-height: 88dvh; }
.appsheet .sh .row { gap: 12px; min-width: 0; }
.appsheet .sh h2 { font-size: 18px; line-height: 1.25; }
.appsheet .sb { gap: 12px; }
.as-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.as-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.as-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--a-20); }
.as-ico { width: 18px; height: 18px; vertical-align: -3px; }
.note.ok { border-color: rgba(52, 211, 153, .35); }
.as-foot { justify-content: space-between; align-items: center; margin-top: 4px; }
@media (max-width: 560px) { .appsheet-bg { place-items: end center; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); } }

/* 2.8.6: more reactions */
.reactpop, .reactpick, .ppick { flex-wrap: wrap; max-width: min(360px, calc(100vw - 24px)); }
.reactpick { border-radius: 18px; }
.reactpop button, .reactpick button { width: 36px; height: 36px; }
.emoji-more { font-weight: 700; font-size: 18px !important; color: var(--a); background: var(--a-6) !important; }
.emojisheet { max-height: 72dvh; }
.emojisheet .label { margin-top: 6px; }
.emojigrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 2px; }
.emojigrid button { height: 42px; border: 0; border-radius: 12px; background: none; font-size: 24px; cursor: pointer; transition: transform .12s, background .12s; }
.emojigrid button:hover, .emojigrid button:focus-visible { background: rgba(var(--tint),.08); transform: scale(1.12); }

/* 2.8.7: notification settings */
.nset { display: flex; flex-direction: column; border: 1px solid rgba(var(--tint),.08); border-radius: var(--r-md); overflow: hidden; }
.nset-h, .nset-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.nset-h { background: rgba(var(--tint),.04); }
.nset-h .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nset-c { width: 48px; flex: none; text-align: center; font-size: 11px; font-weight: 600; color: var(--mfg); }
.nset-row + .nset-row { border-top: 1px solid rgba(var(--tint),.06); }
.nset-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nset-row .grow b { font-size: 14.5px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { width: 42px; height: 24px; border-radius: 99px; background: rgba(var(--tint),.16); position: relative; transition: background .15s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: var(--grad); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }

/* ================= 2.8.9: Sport, new layout ================= */
.sg-hero { position: relative; overflow: hidden; border-radius: var(--r-2xl); padding: 16px 18px 20px; border: 1px solid var(--line-2);
  background: linear-gradient(160deg, color-mix(in oklab, #16a34a 30%, var(--solid)) 0%, var(--solid) 60%, color-mix(in oklab, var(--a) 22%, var(--solid)) 100%); }
.sg-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 100% 50%, transparent 58px, rgba(255,255,255,.10) 59px, rgba(255,255,255,.10) 61px, transparent 62px),
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(255,255,255,.10) calc(100% - 1px)) right / 1px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 34px, transparent 34px 68px); }
.sg-hero > * { position: relative; }
.sg-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sg-hero .back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--mfg); border: 1px solid var(--line-2); background: rgba(var(--tint),.04); }
.sg-hero h1 { margin: 14px 0 0; font: 800 30px/1.05 var(--display); letter-spacing: -.02em; color: var(--hi); }
.sg-hero p { margin: 6px 0 0; font-size: 13.5px; color: var(--mfg); max-width: 34ch; }
.sg-livepill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff;
  background: color-mix(in oklab, var(--bad) 80%, transparent); box-shadow: 0 6px 20px -6px var(--bad); }
.sg-livepill .dotl, .sg-state.live .dotl { background: #fff; }

.sg-tabs { position: sticky; top: calc(env(safe-area-inset-top) + 8px); z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 4px; border-radius: 18px; border: 1px solid var(--line-2); background: color-mix(in oklab, var(--solid) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sg-tabs a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 14px;
  font-size: 11px; font-weight: 600; color: var(--mfg); min-width: 0; transition: background .15s, color .15s; }
.sg-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-tabs a .i { width: 19px; height: 19px; }
.sg-tabs a.on { color: #fff; background: var(--grad); box-shadow: var(--glow); }
.sg-dot { position: absolute; top: 7px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--solid); }

.sg-tools { display: flex; flex-direction: column; gap: 10px; }
.sg-tools .seg.sg-days { margin: 0; }

.sg-group { padding: 4px 0; border-radius: var(--r-xl); overflow: hidden; }
.sg-group.live { border-color: color-mix(in oklab, var(--bad) 40%, transparent); }
.sg-gh { display: flex; align-items: center; gap: 9px; padding: 12px 16px 8px; }
.sg-gh h2 { margin: 0; font: 700 14px/1.2 var(--display); letter-spacing: .01em; color: var(--hi); flex: 1; min-width: 0; }
.sg-ge { font-size: 18px; line-height: 1; }
.sg-gc { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(var(--tint),.08); color: var(--mfg); }

.sg-fx, .sg-score { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--line); background: none; border-radius: 0; }
.sg-gh + .sg-fx, .sg-gh + .sg-score { border-top-color: transparent; }
.sg-fx.live, .sg-score.in { background: color-mix(in oklab, var(--bad) 7%, transparent); border-color: var(--line); }
.sg-fx.done { opacity: .55; }
.sg-time { width: 50px; flex: none; display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.sg-time b { font: 700 16px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--hi); }
.sg-body { flex: 1; min-width: 0; }
.sg-title { display: block; font-size: 15px; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
.sg-league { font-size: 12px; color: var(--mfg); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-state { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; background: rgba(var(--tint),.1); color: var(--mfg); white-space: nowrap; }
.sg-state.live { background: var(--bad); color: #fff; }
.sg-chans { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.sg-ch { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px 3px 3px; border-radius: 9px; font-size: 11.5px; font-weight: 600;
  background: rgba(var(--tint),.06); border: 1px solid var(--line); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ch:not(:has(img)) { padding-left: 9px; }
.sg-ch img { width: 34px; height: 20px; object-fit: contain; border-radius: 5px; background: #fff; padding: 2px 3px; flex: none; }
.sg-more summary { padding: 3px 10px; border-radius: 9px; font-size: 11.5px; }

.sg-score { align-items: center; }
.sg-team { margin-top: 7px; font-size: 14.5px; }
.sg-team img, .sg-nologo { width: 24px; height: 24px; }
.sg-nologo { display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--mfg); }
.sg-st { flex: none; text-align: right; }
.sg-when { font-size: 12px; font-weight: 600; color: var(--mfg); white-space: nowrap; }

/* news */
.sg-srchead { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.sg-bbc { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #fff; color: #000; font: 800 12px/1 var(--body); letter-spacing: .02em; }
.sg-pic { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, color-mix(in oklab, var(--a) 35%, var(--solid)), color-mix(in oklab, var(--a2) 25%, var(--solid))); }
.sg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg-pic.noimg img { display: none; }
.sg-pic.noimg::after { content: attr(data-label); position: absolute; left: 10px; bottom: 8px; right: 10px; text-align: left;
  font: 800 12px/1.2 var(--display); color: rgba(255,255,255,.9); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-pic.noimg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 55%); }
.sg-lead .sg-pic.noimg::after { display: none; }
.sg-pic.sm.noimg::after { font-size: 9px; }
.sg-lead { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; color: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.sg-lead .sg-pic { aspect-ratio: 16 / 10; }
.sg-lead-t { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 60px 16px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 35%, rgba(0,0,0,.88)); }
.sg-lead-t b { font: 800 20px/1.22 var(--display); color: #fff; overflow-wrap: anywhere; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.sg-lead .sg-meta { color: rgba(255,255,255,.8); }
.sg-sum { font-size: 13px; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-meta { font-size: 11.5px; font-weight: 600; color: var(--mfg); }
.sg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sg-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; color: inherit; padding: 0; }
.sg-card .sg-pic { aspect-ratio: 16 / 10; }
.sg-card-t { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px 12px; flex: 1; }
.sg-card-t b { font-size: 13.5px; line-height: 1.3; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-card-t .sg-meta { margin-top: auto; }
.sg-row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: inherit; }
.sg-row:first-child { border-top: 0; }
.sg-row .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sg-row b { font-size: 14px; line-height: 1.32; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sg-pic.sm { width: 84px; aspect-ratio: 4 / 3; border-radius: 10px; flex: none; }
.sg-row:hover b, .sg-card:hover b { color: var(--hi); }

/* highlights */
.sg-lead.vid .sg-pic { aspect-ratio: 16 / 9; }
.sg-vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 10px; }
.sg-vid { display: flex; flex-direction: column; gap: 6px; color: inherit; min-width: 0; }
.sg-vid .sg-pic { aspect-ratio: 16 / 9; border-radius: 12px; }
.sg-vid b { font-size: 13px; line-height: 1.3; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-play { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.62);
  color: #fff; z-index: 1; border: 1.5px solid rgba(255,255,255,.7); }
.sg-play.lg { width: 58px; height: 58px; top: -30%; }
.sg-play .i { margin-left: 2px; }

@media (min-width: 760px) {
  .sg-cards { grid-template-columns: repeat(4, 1fr); }
  .sg-lead .sg-pic { aspect-ratio: 21 / 9; }
  .sg-tools { flex-direction: row; align-items: center; }
  .sg-tools .seg.sg-days { flex: none; width: 320px; }
  .sg-tools .search { flex: 1; }
}
[data-mode="light"] .sg-hero { background: linear-gradient(160deg, #dcfce7 0%, #fff 60%, color-mix(in oklab, var(--a) 12%, #fff) 100%); }
[data-mode="light"] .sg-hero-bg { filter: invert(1); opacity: .25; }
[data-mode="light"] .sg-tabs { background: rgba(255,255,255,.88); }
[data-mode="light"] .sg-time b, [data-mode="light"] .sg-gh h2, [data-mode="light"] .sg-hero h1 { color: var(--fg); }
.grow-full { flex: 1 1 100%; min-width: 0; }

/* ================= 2.8.10: messages — avatar, name and time on every message ================= */
.msg { flex-direction: row; align-items: flex-start; gap: 10px; margin-top: 16px; }
.msg.grouped { margin-top: 10px; }
.msg.mine { flex-direction: row-reverse; align-items: flex-start; }
.msg-av { flex: none; padding-top: 2px; }
.msg-av .av { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 2px rgba(var(--tint),.08); }
.msg.staffmsg .msg-av .av { box-shadow: 0 0 0 2px color-mix(in oklab, var(--staff) 60%, transparent); }
.msg-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(calc(100% - 50px), 620px); }
.msg.mine .msg-main { align-items: flex-end; }
.msg-head { margin: 0 2px 5px; gap: 7px; flex-wrap: wrap; font-size: 13px; line-height: 1.2; }
.msg.mine .msg-head { flex-direction: row-reverse; }
.msg.mine .msg-head .msg-name { display: inline; }
.msg-name { font-weight: 800; letter-spacing: .01em; }
.msg-head time { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.bubble { max-width: 100%; border-radius: 4px 18px 18px 18px; padding: 10px 14px; }
.grouped .bubble { border-top-left-radius: 4px; }
.msg.mine .bubble, .msg.mine.grouped .bubble { border-radius: 18px 4px 18px 18px; }
.bubble .body { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
.msg-foot { margin: 5px 2px 0; min-height: 0; }
.ann-msg .msg-main { max-width: none; flex: 1; align-items: stretch; }
.ann-msg.mine { flex-direction: row; }
.ann-msg.mine .msg-head { flex-direction: row; }
.ann-msg .bubble { border-radius: 4px 20px 20px 20px !important; }
.vidmsg { display: block; width: 100%; max-width: 420px; max-height: 360px; border-radius: 12px; background: #000; margin-top: 6px; }
.shots .vidmsg { margin-top: 0; max-height: 300px; }
.shots:not(.n1) .vidmsg { aspect-ratio: 1; object-fit: cover; }
.previews video { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line-2); background: #000; }
.bub .vidmsg { max-width: 240px; }
.chathead { box-shadow: var(--shadow); }
.chathead .glyph { box-shadow: var(--glow); }
.composer { box-shadow: 0 -10px 30px -18px rgba(0,0,0,.6), var(--shadow); }
.crow textarea { font-size: 15px; background: rgba(var(--tint),.04); }
.typing { padding: 2px 12px 6px; font-weight: 600; }
.sysmsg { margin: 14px auto; }
@media (min-width: 900px) { .msg-main { max-width: min(calc(100% - 50px), 720px); } }
.msg.ann-msg .msg-main { align-items: stretch; }
.msg.ann-msg.mine .msg-head { flex-direction: row; }
.msg.ann-msg.mine .bubble { color: var(--fg); }
.chathead { background: color-mix(in oklab, var(--solid) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.msg.ann-msg.mine .bubble { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; border: 1px solid transparent; box-shadow: var(--shadow); border-radius: 4px 20px 20px 20px !important; }
.msg.ann-msg.mine .msg-foot { flex-direction: row; }

/* 2.8.10: channels grouped by section in the dashboard */
.chjump { display: flex; flex-wrap: wrap; gap: 6px; }
.chjump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; border: 1px solid var(--line-2); color: var(--mfg); }
.chjump a:hover { color: var(--fg); border-color: var(--a-45); }
.chjump .tb, .chsec-h .tb { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; background: rgba(var(--tint),.08); color: var(--mfg); font-weight: 700; vertical-align: middle; }
.chsec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 80px; }
.chsec-h { display: flex; gap: 12px; align-items: center; }
.chsec-h h2 { font-size: 17px; }
.chlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.chlist > .chcard { border-radius: 0; margin: 0; padding: 12px 14px; background: rgba(var(--tint),.02); }
.chlist > .chcard + .chcard { border-top: 1px solid var(--line); }
.chlist > .chcard[open] { background: rgba(var(--tint),.04); }
.chempty { padding: 14px; text-align: center; }
.chnew { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 10px 14px; }
.chnew summary { color: var(--mfg); }
.chnew[open] summary { color: var(--fg); }
.sheet-tk { display: flex; gap: 8px; margin-bottom: 6px; }
.sheet-tkbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 12px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); color: var(--fg); }
.sheet-tkbtn.new { border-color: var(--a-45); background: var(--a-12); }
.sheet-tkbtn .count { position: static; margin-left: 2px; }

/* 2.8.10: latest announcement you haven't read yet */
.ann.unread { position: relative; overflow: hidden; border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent;
  animation: ann-glow 2.4s ease-in-out infinite; }
.ann.unread::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.10) 55%, transparent 70%);
  transform: translateX(-100%); animation: ann-sweep 3.2s ease-in-out infinite; }
.ann.unread .glyph { animation: ann-ring 2.4s ease-out infinite; }
.ann.unread .new { animation: ann-pop 1.2s ease-in-out infinite; }
@keyframes ann-glow { 0%, 100% { box-shadow: var(--shadow), 0 0 0 0 var(--a-45); } 50% { box-shadow: var(--shadow), 0 0 28px 2px var(--a-45); } }
@keyframes ann-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes ann-ring { 0% { box-shadow: 0 0 0 0 var(--a-60); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ann-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ann.unread, .ann.unread::after, .ann.unread .glyph, .ann.unread .new { animation: none; } }
.notice { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; background: rgba(var(--tint),.02); }
.notice.off summary .grow { opacity: .55; }
.notice summary { gap: 8px; }

/* 2.8.10: font picker with live preview */
.fontgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 6px; }
.fontopt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--tint),.03); cursor: pointer; text-align: center; }
.fontopt input { position: absolute; opacity: 0; pointer-events: none; }
.fontopt .ff { font-size: 26px; line-height: 1.1; color: var(--hi); }
.fontopt small { font-size: 11px; color: var(--mfg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fontopt:has(input:checked) { border-color: var(--a); background: var(--a-12); box-shadow: 0 0 0 2px var(--a-45); }
.fontopt:has(input:focus-visible) { outline: 2px solid var(--a); outline-offset: 2px; }
.ff-sora { font-family: "Sora", var(--display); }
.ff-poppins { font-family: "Poppins", var(--display); }
.ff-montserrat { font-family: "Montserrat", var(--display); }
.ff-bebas-neue { font-family: "Bebas Neue", var(--display); }
.ff-orbitron { font-family: "Orbitron", var(--display); }
.ff-righteous { font-family: "Righteous", var(--display); }
.ff-russo-one { font-family: "Russo One", var(--display); }
.ff-audiowide { font-family: "Audiowide", var(--display); }
.ff-bungee { font-family: "Bungee", var(--display); }
.ff-pacifico { font-family: "Pacifico", var(--display); }
.ff-permanent-marker { font-family: "Permanent Marker", var(--display); }
.ff-oswald { font-family: "Oswald", var(--display); }
.sg-live-score { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 8px; font: 800 13px/1.5 var(--display); font-variant-numeric: tabular-nums; color: #fff; background: var(--bad); vertical-align: 1px; }
.sg-live-score.ft { background: rgba(var(--tint),.14); color: var(--fg); }
.sg-live-min { font-size: 11.5px; font-weight: 800; color: var(--bad); vertical-align: 1px; }
.subtabs a.livechip { display: inline-flex; align-items: center; gap: 6px; border-color: color-mix(in oklab, var(--bad) 50%, transparent); color: var(--fg); }
.subtabs a.livechip .dotl { background: var(--bad); }
.subtabs a.livechip.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.subtabs a.livechip.on .dotl { background: #fff; }
.sg-scoreline { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .sg-live-score { margin-left: 0; }
.kv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.copyme { padding: 3px 9px; border-radius: 8px; background: rgba(var(--tint),.08); font-size: 13px; cursor: pointer; }

.subtabs a svg { margin-right: 4px; vertical-align: -2px; }

.msg-btn { display: inline-flex; margin-top: 8px; align-self: flex-start; }

.list.scroll5 { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }

.kvs { display: grid; gap: 10px; }
.kvs .copybox { margin-top: 4px; }

.order-link { min-width: 0; color: inherit; text-decoration: none; }
.del-order { margin: 0; }
.del-order .iconbtn { width: 32px; height: 32px; border-radius: 10px; color: var(--bad, #f87171); }

.ann-list { display: grid; gap: 4px; padding: 10px; margin-top: -4px; }
.ann-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; color: inherit; text-decoration: none; min-width: 0; }
.ann-row:hover { background: rgba(var(--tint), .05); }
.ann-row .dotl { width: 8px; height: 8px; border-radius: 99px; background: var(--line-2); flex: none; }
.ann-row.unread .dotl { background: var(--accent, #a35cff); box-shadow: 0 0 8px var(--a-60); }
.ann-row.unread .trunc { font-weight: 700; }
.ann-list .btn.block { margin-top: 6px; }

.secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px auto 8px; padding: 4px 12px; line-height: 1.35; width: fit-content; max-width: 100%; border-radius: 99px; font-size: 12px; color: var(--muted, #a7a3b8); background: rgba(var(--tint), .05); border: 1px solid var(--line); text-align: center; }
.secure-note .i { flex: none; opacity: .8; }

.ann-all { display: flex; align-items: center; gap: 8px; margin: -6px 4px 4px; padding: 10px 14px; border-radius: 14px; color: var(--accent, #c9a6ff); text-decoration: none; font-weight: 700; font-size: 14px; background: rgba(var(--tint), .04); border: 1px solid var(--line); }
.ann-all:hover { background: rgba(var(--tint), .08); }

.vc-foot { margin-top: auto; padding: 14px 8px 2px; text-align: center; font-size: 11.5px; color: var(--dim); letter-spacing: .01em; }
.vc-foot span { color: var(--mfg); font-weight: 600; }
.vc-foot a { color: var(--mfg); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.bare-foot { position: relative; z-index: 1; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.chatpage .vc-foot { padding-top: 4px; }

/* 2.8.27: photo-style backgrounds for the Sport and Lifestyle tiles, and the Lifestyle page */
.tile.phototile { min-height: 96px; border-color: rgba(255,255,255,.14); color: #fff; }
.tile.phototile .tilebg { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
.tile.phototile .tilebg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,4,12,.72) 0%, rgba(5,4,12,.35) 55%, rgba(5,4,12,.1) 100%); }
.tile.phototile > :not(.tilebg, .count, .arrow) { position: relative; z-index: 1; }
.tile.phototile > :is(.count, .arrow) { z-index: 2; }
.tile.phototile .tl { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.tile.phototile .ts { color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.tile.phototile .arrow { color: rgba(255,255,255,.8); }
.tile.phototile::after { display: none; }
.tile.phototile:hover .tilebg { transform: scale(1.04); }
.tile.phototile .tilebg { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tile.sporttile .tilebg { background-image: url("/static/img/tile-sport.svg"); }
.tile.lifestyletile .tilebg { background-image: url("/static/img/tile-lifestyle.svg"); }
.tile.lifestyletile .glyph { background: linear-gradient(135deg, #ff4fd8, #f59e0b); box-shadow: 0 10px 26px -10px #ff4fd8, inset 0 1px 0 rgba(255,255,255,.35); }

.lf-hero { background: linear-gradient(160deg, color-mix(in oklab, var(--a2) 32%, var(--solid)) 0%, var(--solid) 60%, color-mix(in oklab, var(--a) 26%, var(--solid)) 100%); }
.lf-hero-bg { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(38% 60% at 88% 30%, var(--a-45), transparent 70%), radial-gradient(30% 50% at 70% 85%, var(--a2-45), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(var(--tint), .05) 22px 23px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 80%); }
.lf-tabs { grid-auto-columns: minmax(68px, 1fr); overflow-x: auto; scrollbar-width: none; }
.lf-tabs::-webkit-scrollbar { display: none; }
.lf-jokes, .lf-signs { display: grid; gap: 10px; }
.lf-joke { display: block; padding: 16px 18px; border-radius: var(--r-xl); }
.lf-joke summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.lf-joke summary::-webkit-details-marker { display: none; }
.lf-jq { font: 600 15.5px/1.45 var(--body, inherit); color: var(--hi, var(--fg)); overflow-wrap: anywhere; }
.lf-joke .pill { align-self: flex-start; margin-top: 6px; }
.lf-tap { font-size: 12px; color: var(--a2, var(--mfg)); font-weight: 600; }
.lf-joke[open] .lf-tap { display: none; }
.lf-punch { margin: 10px 0 0; font: 700 16px/1.4 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: lf-pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes lf-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.lf-signs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lf-sign { border-radius: var(--r-xl); padding: 12px 14px; }
.lf-sign summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.lf-sign summary::-webkit-details-marker { display: none; }
.lf-sign summary .hint { display: block; font-size: 12px; }
.lf-sign[open] .chev { transform: rotate(180deg); }
.lf-sign p { margin: 12px 0 2px; font-size: 14.5px; line-height: 1.6; color: var(--fg); }
.lf-zod { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777); box-shadow: 0 8px 22px -10px #db2777; }
.lf-quiz { display: grid; gap: 10px; }
.lf-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lf-score b { flex: 1; }
.lf-scoreval { font: 800 18px var(--display); padding: 4px 12px; border-radius: 99px; background: var(--grad); color: #fff; }
.lf-qmeta { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mfg); }
.lf-qt { display: block; margin: 6px 0 12px; font: 700 16px/1.4 var(--display); }
.lf-opts { display: grid; gap: 8px; }
.lf-opt { text-align: left; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); color: var(--fg); font: 600 14px/1.35 inherit; cursor: pointer; }
.lf-opt:hover:not([disabled]) { border-color: var(--a-45); }
.lf-opt.right { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 18%, transparent); }
.lf-opt.wrong { border-color: var(--bad); background: color-mix(in oklab, var(--bad) 16%, transparent); }
.lf-opt[disabled] { cursor: default; }
.lf-h { font: 800 22px var(--display); margin: 4px 0 0; }
.lf-otd { align-items: flex-start; }
.lf-year { flex: none; min-width: 48px; font: 800 15px var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lf-shelf { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.lf-shelf::-webkit-scrollbar { display: none; }
.lf-poster { flex: none; width: 128px; display: flex; flex-direction: column; gap: 4px; color: inherit; scroll-snap-align: start; }
.lf-poster b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lf-poster .hint { font-size: 11.5px; }
.lf-pic { aspect-ratio: 2 / 3; border-radius: 14px; border: 1px solid var(--line-2); }
.lf-rate { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); }
/* names always on one line: the text shrinks to fit (app.js [data-fit]); a little room so gradient letters aren't clipped */
.portal .mid .grow { min-width: 0; }
.portal .who, .profile-name { white-space: nowrap; overflow: hidden; overflow-wrap: normal; padding: .06em .12em .1em; margin: -.06em -.12em -.1em; }
.portal .chips { justify-content: flex-end; }
.rh-state { display: block; margin-top: 4px; font-size: 12px; }

/* 2.8.27: games (Chat & Games) */
.gm-emoji { font-size: 20px; }
.gm-lb { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(var(--tint),.04); color: inherit; }
.gm-lb.me { background: var(--a-20); border: 1px solid var(--a-45); }
.gm-rank { width: 22px; text-align: center; font-weight: 800; color: var(--mfg); }
.gm-word { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wd-grid { display: grid; gap: 6px; }
.wd-row { display: grid; grid-template-columns: repeat(5, 54px); gap: 6px; }
.wd-cell { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 10px; font: 800 26px var(--display); border: 2px solid var(--line-2); background: rgba(var(--tint),.03); text-transform: uppercase; }
.wd-row.now .wd-cell { border-color: var(--a-45); }
.wd-cell.g, .wd-cell.y, .wd-cell.b { border-color: transparent; color: #fff; animation: wd-flip .5s ease both; }
.wd-cell.g { background: #22a55b; } .wd-cell.y { background: #d4a017; } .wd-cell.b { background: #3b3650; }
.wd-row .wd-cell:nth-child(2) { animation-delay: .08s; } .wd-row .wd-cell:nth-child(3) { animation-delay: .16s; }
.wd-row .wd-cell:nth-child(4) { animation-delay: .24s; } .wd-row .wd-cell:nth-child(5) { animation-delay: .32s; }
@keyframes wd-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.wd-form { display: flex; gap: 8px; width: 100%; max-width: 320px; }
.wd-form input { flex: 1; text-transform: uppercase; letter-spacing: .3em; font-weight: 800; text-align: center; }
.wd-keys { display: grid; gap: 6px; width: 100%; max-width: 480px; }
.wd-krow { display: flex; gap: 4px; justify-content: center; }
.wd-key { flex: 1; min-width: 0; max-width: 42px; height: 46px; border-radius: 8px; border: 0; font: 700 14px var(--body); color: var(--fg); background: rgba(var(--tint),.12); cursor: pointer; }
.wd-key.wide { max-width: 64px; flex: 1.5; font-size: 12px; }
.wd-key.g { background: #22a55b; color: #fff; } .wd-key.y { background: #d4a017; color: #fff; } .wd-key.b { background: rgba(var(--tint),.04); color: var(--dim); }
.wd-result { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.wd-result b { font: 800 22px var(--display); }
.wd-result.won b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 360px) { .wd-row { grid-template-columns: repeat(5, 46px); } .wd-cell { width: 46px; height: 46px; font-size: 22px; } }

.gm-2048 { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.g2-top { display: flex; gap: 8px; align-items: center; width: 100%; max-width: 360px; }
.g2-box { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 12px; background: rgba(var(--tint),.06); }
.g2-box span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mfg); font-weight: 700; }
.g2-box b { font: 800 20px var(--display); }
.g2-board { position: relative; width: min(100%, 360px); aspect-ratio: 1; padding: 8px; border-radius: 16px; background: rgba(var(--tint),.08); display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 8px; touch-action: none; user-select: none; outline: none; }
.g2-cell { border-radius: 10px; background: rgba(var(--tint),.06); display: grid; place-items: center; font: 800 clamp(18px, 7vw, 30px) var(--display); color: #fff; transition: background .12s; }
.g2-cell.pop { animation: g2-pop .18s ease; }
@keyframes g2-pop { 50% { transform: scale(1.12); } }
.g2-cell[data-v="2"] { background: #3d3563; } .g2-cell[data-v="4"] { background: #4b3a7a; }
.g2-cell[data-v="8"] { background: #6d3bb0; } .g2-cell[data-v="16"] { background: #8b3fd1; }
.g2-cell[data-v="32"] { background: #a34be0; } .g2-cell[data-v="64"] { background: #c14fd8; }
.g2-cell[data-v="128"] { background: #db4fc0; font-size: clamp(16px, 6vw, 26px); } .g2-cell[data-v="256"] { background: #ec4f9c; font-size: clamp(16px, 6vw, 26px); }
.g2-cell[data-v="512"] { background: #f5607a; font-size: clamp(16px, 6vw, 26px); } .g2-cell[data-v="1024"] { background: #f78a4f; font-size: clamp(13px, 5vw, 22px); }
.g2-cell[data-v="2048"] { background: #fbbf24; color: #1a1206; font-size: clamp(13px, 5vw, 22px); box-shadow: 0 0 24px #fbbf24aa; }
.g2-cell.big { background: #22d3ee; color: #062029; font-size: clamp(12px, 4.4vw, 20px); }

.gm-four { gap: 12px; display: flex; flex-direction: column; }
.c4 { width: min(100%, 380px); margin: 0 auto; }
.c4-cols { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.c4-drop { height: 34px; border: 0; border-radius: 10px; background: var(--a-20); color: var(--fg); font-size: 14px; cursor: pointer; }
.c4-drop:disabled { opacity: .25; cursor: default; }
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px; border-radius: 16px; background: linear-gradient(160deg, #2b3aa8, #1d2575); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 12px 30px -12px #1d2575; }
.c4-cell { aspect-ratio: 1; border-radius: 50%; background: #0b0a1a; display: grid; place-items: center; }
.c4-dot { display: inline-block; width: 86%; height: 86%; border-radius: 50%; }
.c4-dot.p1 { background: radial-gradient(circle at 35% 30%, #ff9aa8, #ef233c 60%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35); }
.c4-dot.p2 { background: radial-gradient(circle at 35% 30%, #fff1a8, #f5b700 60%); box-shadow: inset 0 -3px 6px rgba(0,0,0,.35); }
.c4-dot.p0 { background: transparent; }
.hint .c4-dot { width: 14px; height: 14px; vertical-align: -2px; }
.readonly.closed { color: var(--fg); border-style: solid; border-color: color-mix(in oklab, var(--warn) 40%, transparent); text-align: left; }
.readonly.closed b { color: var(--warn); }
.closednote { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px; font-size: 13px; color: var(--fg); border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent); background: color-mix(in oklab, var(--warn) 8%, transparent); }

/* 2.8.27: more name fonts */
.ff-anton { font-family: "Anton", var(--display); }
.ff-bangers { font-family: "Bangers", var(--display); }
.ff-lobster { font-family: "Lobster", var(--display); }
.ff-luckiest-guy { font-family: "Luckiest Guy", var(--display); }
.ff-titan-one { font-family: "Titan One", var(--display); }
.ff-black-ops-one { font-family: "Black Ops One", var(--display); }
.ff-monoton { font-family: "Monoton", var(--display); }
.ff-staatliches { font-family: "Staatliches", var(--display); }
.ff-rubik-mono-one { font-family: "Rubik Mono One", var(--display); }
.ff-press-start-2p { font-family: "Press Start 2P", var(--display); }
.ff-creepster { font-family: "Creepster", var(--display); }
.ff-metal-mania { font-family: "Metal Mania", var(--display); }
.ff-nosifer { font-family: "Nosifer", var(--display); }
.ff-rye { font-family: "Rye", var(--display); }
.ff-unifrakturmaguntia { font-family: "UnifrakturMaguntia", var(--display); }
.ff-shrikhand { font-family: "Shrikhand", var(--display); }
.ff-abril-fatface { font-family: "Abril Fatface", var(--display); }
.ff-playfair-display { font-family: "Playfair Display", var(--display); }
.ff-cinzel { font-family: "Cinzel", var(--display); }
.ff-great-vibes { font-family: "Great Vibes", var(--display); }
.ff-dancing-script { font-family: "Dancing Script", var(--display); }
.ff-satisfy { font-family: "Satisfy", var(--display); }
.ff-kaushan-script { font-family: "Kaushan Script", var(--display); }
.ff-rock-salt { font-family: "Rock Salt", var(--display); }
.ff-caveat { font-family: "Caveat", var(--display); }
.ff-raleway { font-family: "Raleway", var(--display); }
.ff-exo-2 { font-family: "Exo 2", var(--display); }
.ff-teko { font-family: "Teko", var(--display); }
.ff-syne { font-family: "Syne", var(--display); }
.ff-unbounded { font-family: "Unbounded", var(--display); }
.ff-kanit { font-family: "Kanit", var(--display); }
.ff-josefin-sans { font-family: "Josefin Sans", var(--display); }
.ff-comfortaa { font-family: "Comfortaa", var(--display); }
.ff-chakra-petch { font-family: "Chakra Petch", var(--display); }
/* name outline & glow keep the gradient colour: the glow is a drop-shadow of the letters (a text-shadow
   shows through see-through gradient text as a dark block) */
.portal .who.nfx, .who-preview.nfx { text-shadow: none; -webkit-text-stroke: var(--name-stroke, 0) var(--name-stroke-c, transparent);
  filter: drop-shadow(0 0 calc(var(--name-glow, 0px) / 2) var(--name-glow-c, transparent)) drop-shadow(0 0 var(--name-glow, 0px) var(--name-glow-c, transparent)); }
.portal .who, .profile-name { overflow: visible; }
/* 2.8.27: the name sits on its own line under the greeting, above the logo */
.portal .toprow .kicker { white-space: nowrap; flex: none; }
.portal .toprow .hourspill { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
.portal .toprow .iconbtn { flex: none; }
.portal-in > .who { margin-top: -6px; margin-bottom: -4px; }
.portal .mid .welcome { margin-top: 0; }
[data-layout="cards"] .portal-in > .who { text-align: center; }
/* waiting list: the email in full, big and easy to read */
.pend-email { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--tint),.05); border: 1px solid var(--line-2); }
.pend-email .pe-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mfg); }
.pend-email .pe-addr { flex: 1 1 100%; font: 700 16px/1.35 var(--body); color: var(--hi); overflow-wrap: anywhere; user-select: all; }
/* 2.8.29: small status and role chips right under the name */
.portal .chips.mini { justify-content: flex-start; gap: 5px; margin-top: -8px; }
.portal .chips.mini .status, .portal .chips.mini .pill, .portal .chips.mini .chip { font-size: 11px; padding: 3px 9px 3px 7px; gap: 5px; min-height: 0; line-height: 1.4; }
.portal .chips.mini .status .dotl { width: 6px; height: 6px; }
.portal .chips.mini .status span { font-weight: 500; }
.portal .chips.mini .i.xs { width: 11px; height: 11px; }
[data-layout="cards"] .portal .chips.mini { justify-content: center; }
/* 2.8.29: word hints, letters used, 2048 screen lock */
.wd-cell.hinted { color: var(--a2, #ff4fd8); opacity: .75; border-style: dashed; border-color: var(--a-45); }
.wd-cell.typed { border-color: var(--a-60); }
.wd-hints { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.wd-hint { padding: 6px 12px; border-radius: 99px; font-size: 13px; background: var(--a-20); border: 1px solid var(--a-45); }
.wd-hint b { font-size: 15px; }
.wd-letters { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.wd-letters > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wd-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mfg); margin-right: 4px; }
.wd-l { width: 26px; height: 28px; display: grid; place-items: center; border-radius: 7px; font: 800 13px var(--display); }
.wd-l.in { background: #d4a017; color: #fff; }
.wd-l.out { background: rgba(var(--tint),.06); color: var(--dim); text-decoration: line-through; }
html.g2-locked, html.g2-locked body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
html.g2-locked .gm-2048 { touch-action: none; }
.g2-lockbtn { align-self: center; }
.g2-board, .g2-board * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* 2.8.29: name font picker pops up as one big list; tap one to see it and Save or Cancel */
.fontnow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(var(--tint),.04); }
.fontnow-name { flex: 1 1 100%; font-size: 28px; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fontpop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fontpop[hidden], .fontask[hidden] { display: none; }
.fontpop-box { width: min(560px, 100%); max-height: 86dvh; display: flex; flex-direction: column; border-radius: 24px 24px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); animation: fp-up .25s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 640px) { .fontpop { align-items: center; } .fontpop-box { border-radius: 24px; } }
@keyframes fp-up { from { transform: translateY(30px); opacity: 0; } }
.fontpop-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.fontpop-list { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 6px; padding-bottom: 4px; }
.fontrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--tint),.04); color: var(--fg); text-align: left; cursor: pointer; }
.fontrow.on { border-color: var(--a-45); background: var(--a-20); }
.fontrow-name { font-size: 24px; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fontrow small { flex: none; color: var(--mfg); font-size: 11.5px; }
.fontask { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.5); }
.fontask-box { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; text-align: center; animation: fp-up .2s ease; }
.fontask-name { font-size: 40px; margin: 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .1em .15em; }
html.sheet-lock, html.sheet-lock body { overflow: hidden; }
.fontpop-box, .fontask-box { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= 2.8.30: home card layouts (Branding -> Home card), 12 to pick from ================= */
.portal .hero { display: grid; gap: 10px 16px; align-items: center; }
.portal .hero > .toprow { grid-area: top; }
.portal .hero > .h-logo { grid-area: logo; display: flex; }
.portal .hero > .who { grid-area: name; margin: 0; min-width: 0; }
.portal .hero > .chips { grid-area: chips; margin: 0; justify-content: flex-start; }
.portal .hero > .h-line { grid-area: line; display: none; font-size: 12.5px; color: var(--mfg); }
.portal .hero > .h-line b.ok { color: var(--ok); } .portal .hero > .h-line b.bad { color: var(--bad); } .portal .hero > .h-line i { font-style: normal; color: var(--warn); }
.portal .hero > .welcome { grid-area: text; margin: 0; }
.portal .hero > .h-stats { grid-area: stats; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h-st { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--panel),.45); border: 1px solid var(--line-2); color: inherit; min-width: 0; }
.h-st b { font: 800 19px/1.1 var(--display); } .h-st b.ok { color: var(--ok); } .h-st b.warn { color: var(--warn); }
.h-st span { font-size: 11px; color: var(--mfg); }
.portal .hero-cover, .portal .hero-wm { display: none; }
.portal .hero-wm { position: absolute; pointer-events: none; }
.portal .hero-wm.letter { display: none !important; }
.portal .who { font-size: clamp(30px, 9vw, 46px); }

/* A: centred profile (default) */
.hero-a .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-a .hero > .toprow { justify-self: stretch; }
.hero-a .hero > .chips { justify-content: center; }
.hero-a .hero > .who { max-width: 100%; }
.hero-a .orb.s104 { --s: 112px; }

/* B: compact app header */
.hero-b .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-b .orb.s104 { --s: 64px; }
.hero-b .hero > .who { font-size: clamp(24px, 7vw, 34px); align-self: end; }
.hero-b .hero > .chips { align-self: start; }
.hero-b .hero > .welcome { padding-top: 12px; border-top: 1px solid var(--line-2); }

/* C: big name, logo watermark */
.hero-c .hero { grid-template-columns: 1fr; grid-template-areas: "top" "name" "text" "chips"; }
.hero-c .hero > .h-logo { display: none; }
.hero-c .hero > .who { font-size: clamp(38px, 12vw, 64px); }
.hero-c .hero > .welcome { max-width: 70%; }
.hero-c .hero-wm { display: block; right: -70px; top: 30px; width: 250px; height: 250px; border-radius: 50%; object-fit: cover; opacity: .22; filter: saturate(1.2); }

/* D: cover strip + overlapping logo */
.hero-d .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 104px; background: var(--grad); }
.hero-d .hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.25)); }
.hero-d .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; }
.hero-d .hero > .toprow .kicker { color: #fff; }
.hero-d .hero > .h-logo { margin-top: 6px; }
.hero-d .orb.s104 { --s: 92px; }
.hero-d .orb .ball { box-shadow: 0 0 0 4px var(--solid), var(--glow); }

/* E: minimal */
.hero-e .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "line line" "text text"; }
.hero-e .hero > .toprow .iconbtn { display: none; }
.hero-e .orb.s104 { --s: 58px; }
.hero-e .orb .halo { display: none; }
.hero-e .hero > .chips { display: none; } .hero-e .hero > .h-line { display: block; }

/* F: header + quick stats */
.hero-f .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "stats stats"; }
.hero-f .orb.s104 { --s: 70px; }
.hero-f .hero > .who { font-size: clamp(24px, 7vw, 34px); align-self: end; }
.hero-f .hero > .chips { align-self: start; }
.hero-f .hero > .welcome { display: none; } .hero-f .hero > .h-stats { display: grid; }

/* G: classic split (logo left, words right) */
.hero-g .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }

/* H: giant name, small logo corner */
.hero-h .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-h .hero > .who { font-size: clamp(40px, 13vw, 70px); line-height: .95; }
.hero-h .orb.s104 { --s: 70px; }

/* I: spotlight (rays behind the logo) */
.hero-i .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips"; justify-items: center; text-align: center; }
.hero-i .hero > .toprow { justify-self: stretch; }
.hero-i .hero > .chips { justify-content: center; }
.hero-i .hero > .welcome { display: none; }
.hero-i .orb.s104 { --s: 128px; }
.hero-i .hero-cover { display: block; position: absolute; left: 50%; top: 120px; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: .5;
  background: repeating-conic-gradient(from 0deg, var(--a-30) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); mask-image: radial-gradient(closest-side, #000 20%, transparent 75%); animation: hero-spin 60s linear infinite; }
@keyframes hero-spin { to { transform: rotate(360deg); } }

/* J: magazine cover (words at the bottom) */
.hero-j { min-height: 300px; display: flex; }
.hero-j .hero { width: 100%; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "logo top" ". ." "name name" "chips chips" "text text"; }
.hero-j .orb.s104 { --s: 48px; } .hero-j .orb .halo { display: none; }
.hero-j .hero-cover { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.45)); }
.hero-j .hero > .who { font-size: clamp(40px, 12vw, 64px); }

/* K: side stripe */
.hero-k .hero { grid-template-columns: 92px 1fr; grid-template-areas: "logo top" "logo name" "logo chips" "logo text"; column-gap: 18px; }
.hero-k .hero > .h-logo { align-self: stretch; align-items: center; justify-content: center; margin: -20px 0 -20px -20px; padding-left: 12px; border-radius: 0; background: linear-gradient(180deg, var(--a-45), transparent 90%); }
.hero-k .orb.s104 { --s: 64px; }
.hero-k .hero > .who { font-size: clamp(26px, 8vw, 40px); }

/* L: name + stats + welcome */
.hero-l .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-l .orb.s104 { --s: 66px; }
.hero-l .hero > .h-stats { display: grid; }
.hero-l .hero > .who { font-size: clamp(26px, 8vw, 40px); }

/* Branding: pick a home card */
.hero-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hero-pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; border: 2px solid var(--line-2); background: rgba(var(--tint),.03); cursor: pointer; text-align: left; color: inherit; font: inherit; }
.hero-pick.on { border-color: var(--a); box-shadow: var(--glow); }
.hero-pick .hp-view { pointer-events: none; zoom: .56; }
.hero-pick .hp-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 4px; font-weight: 700; font-size: 13px; }
.hero-pick .hp-name .pill { font-size: 10px; }
.hero-picks form { display: block; min-width: 0; }
.hero-pick { width: 100%; }
.hero-pick .hp-view { display: block; }
.hero-pick .hp-view .portal { width: 100%; }
.curhero .hp-view { display: block; zoom: .62; pointer-events: none; }
.curhero .hp-view .portal { width: 100%; }

/* ================= 2.8.31: 13 animated home cards (M to Y) ================= */
.portal .hero-fx { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.portal .hero-fx i { position: absolute; display: block; }
.portal .hero-fx i:nth-child(1) { left: 6%; top: 18%; } .portal .hero-fx i:nth-child(2) { left: 18%; top: 62%; }
.portal .hero-fx i:nth-child(3) { left: 29%; top: 30%; } .portal .hero-fx i:nth-child(4) { left: 41%; top: 80%; }
.portal .hero-fx i:nth-child(5) { left: 52%; top: 12%; } .portal .hero-fx i:nth-child(6) { left: 63%; top: 55%; }
.portal .hero-fx i:nth-child(7) { left: 74%; top: 26%; } .portal .hero-fx i:nth-child(8) { left: 85%; top: 70%; }
.portal .hero-fx i:nth-child(9) { left: 93%; top: 40%; } .portal .hero-fx i:nth-child(10) { left: 12%; top: 88%; }
.portal .hero-fx i:nth-child(11) { left: 36%; top: 50%; } .portal .hero-fx i:nth-child(12) { left: 58%; top: 92%; }
.portal .hero-fx i:nth-child(13) { left: 80%; top: 8%; } .portal .hero-fx i:nth-child(14) { left: 68%; top: 84%; }
.portal .hero-fx i:nth-child(2n) { animation-delay: -1.3s !important; } .portal .hero-fx i:nth-child(3n) { animation-delay: -2.6s !important; }
.portal .hero-fx i:nth-child(5n) { animation-delay: -3.9s !important; }

/* shared shapes: centred (A-like) and split (B-like) */
.hero-m .hero, .hero-n .hero, .hero-s .hero, .hero-w .hero { grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-m .hero > .toprow, .hero-n .hero > .toprow, .hero-s .hero > .toprow, .hero-w .hero > .toprow { justify-self: stretch; }
.hero-m .hero > .chips, .hero-n .hero > .chips, .hero-s .hero > .chips, .hero-w .hero > .chips { justify-content: center; }
.hero-o .hero, .hero-p .hero, .hero-t .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-o .orb.s104, .hero-p .orb.s104, .hero-t .orb.s104 { --s: 72px; }
.hero-o .hero > .who, .hero-p .hero > .who, .hero-t .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; }
.hero-o .hero > .chips, .hero-p .hero > .chips, .hero-t .hero > .chips { align-self: start; }
.hero-q .hero, .hero-x .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }
.hero-r .hero, .hero-u .hero, .hero-v .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-r .hero > .who, .hero-u .hero > .who, .hero-v .hero > .who { font-size: clamp(38px, 12vw, 64px); line-height: 1; }
.hero-r .orb.s104, .hero-u .orb.s104, .hero-v .orb.s104 { --s: 64px; }
.hero-y .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-y .orb.s104 { --s: 66px; } .hero-y .hero > .h-stats { display: grid; }
.hero-w .hero { grid-template-areas: "top" "logo" "name" "chips" "stats"; } .hero-w .hero > .welcome { display: none; } .hero-w .hero > .h-stats { display: grid; justify-self: stretch; }

/* M aurora */
.hero-m .hero-cover { display: block; position: absolute; inset: -40% -20% 30% -20%; filter: blur(28px); opacity: .75;
  background: linear-gradient(100deg, transparent 10%, #22d3ee88 25%, transparent 38%, var(--a-60) 52%, transparent 66%, #3ddc9788 80%, transparent 92%);
  background-size: 200% 100%; animation: hx-aurora 12s ease-in-out infinite alternate; }
@keyframes hx-aurora { 0% { background-position: 0% 0; transform: skewY(-4deg); } 100% { background-position: 100% 0; transform: skewY(4deg) translateY(10px); } }
/* N starry night */
.hero-n { background: radial-gradient(120% 90% at 50% 0%, #1b1742, #0a0918 70%); }
.hero-n .hero-fx { display: block; }
.hero-n .hero-fx i { width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: hx-twinkle 3.2s ease-in-out infinite; }
.hero-n .hero-fx i:nth-child(odd) { width: 3px; height: 3px; }
.hero-n .hero-cover { display: block; position: absolute; right: 18px; top: 58px; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -8px -4px 0 1px #ffe9a8; opacity: .9; filter: drop-shadow(0 0 10px #ffe9a888); }
@keyframes hx-twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
/* O neon */
.hero-o { border-color: transparent; box-shadow: 0 0 0 2px var(--a), 0 0 22px var(--a-60), inset 0 0 22px var(--a-30); animation: hx-neon 2.6s ease-in-out infinite; }
.hero-o .who { text-shadow: none; filter: drop-shadow(0 0 8px var(--a)) drop-shadow(0 0 18px var(--a2, var(--a))); animation: hx-flicker 5s linear infinite; }
@keyframes hx-neon { 50% { box-shadow: 0 0 0 2px var(--a2, var(--a)), 0 0 34px var(--a-60), inset 0 0 30px var(--a-30); } }
@keyframes hx-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .55; } }
/* P floating bubbles */
.hero-p .hero-fx { display: block; }
.hero-p .hero-fx i { top: auto !important; bottom: -40px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffffaa, var(--a-30) 60%, transparent 70%); border: 1px solid #ffffff33; animation: hx-rise 9s linear infinite; }
.hero-p .hero-fx i:nth-child(3n) { width: 28px; height: 28px; } .hero-p .hero-fx i:nth-child(4n) { width: 10px; height: 10px; }
@keyframes hx-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(-420px) translateX(20px); opacity: 0; } }
/* Q waves: real rolling waves (2.8.40), drawn by the shared .fx layers */
.portal.hero-q > .f1 { height: 78px; } .portal.hero-q > .f2 { height: 56px; }
/* R shimmer name */
.hero-r .who.gtext { background-image: linear-gradient(100deg, var(--fg) 20%, var(--a2, #ff4fd8) 40%, #fff 50%, var(--a) 60%, var(--fg) 80%); background-size: 250% 100%; animation: hx-shine 4s linear infinite; }
@keyframes hx-shine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* S orbit */
.hero-s .hero-fx { display: block; }
.hero-s .hero-fx i { left: 50% !important; top: 120px !important; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--a2, #ff4fd8); box-shadow: 0 0 10px var(--a2, #ff4fd8); animation: hx-orbit 6s linear infinite; }
.hero-s .hero-fx i:nth-child(n+5) { display: none; }
.hero-s .hero-fx i:nth-child(2) { animation-duration: 9s; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; } .hero-s .hero-fx i:nth-child(3) { animation-duration: 12s; animation-direction: reverse; background: #ffc15e; box-shadow: 0 0 10px #ffc15e; }
.hero-s .hero-fx i:nth-child(4) { animation-duration: 7.5s; animation-direction: reverse; width: 5px; height: 5px; }
@keyframes hx-orbit { from { transform: rotate(0deg) translateX(84px) rotate(0deg); } to { transform: rotate(360deg) translateX(84px) rotate(-360deg); } }
/* T colour flow */
.hero-t { background: linear-gradient(120deg, color-mix(in oklab, var(--a) 45%, var(--solid)), color-mix(in oklab, var(--a2, #ff4fd8) 35%, var(--solid)), color-mix(in oklab, #22d3ee 30%, var(--solid)), color-mix(in oklab, var(--a) 45%, var(--solid)));
  background-size: 300% 300%; animation: hx-flow 14s ease infinite; }
@keyframes hx-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* U glitch */
.hero-u .who { position: relative; }
.hero-u .who::before, .hero-u .who::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; -webkit-text-fill-color: currentColor; background: none; pointer-events: none; }
.hero-u .who::before { color: #22d3ee; clip-path: inset(0 0 55% 0); animation: hx-glitch 3s steps(1) infinite; }
.hero-u .who::after { color: #ff4fd8; clip-path: inset(55% 0 0 0); animation: hx-glitch 3s steps(1) infinite reverse; }
@keyframes hx-glitch { 0%, 88%, 100% { transform: none; opacity: 0; } 90% { transform: translate(-3px, 1px); opacity: .8; } 93% { transform: translate(3px, -1px); opacity: .8; } 96% { transform: translate(-1px, 0); opacity: .6; } }
/* V shooting stars */
.hero-v .hero-fx { display: block; }
.hero-v .hero-fx i { top: -10px !important; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-35deg); opacity: 0; animation: hx-shoot 5s ease-in infinite; }
.hero-v .hero-fx i:nth-child(n+7) { display: none; }
@keyframes hx-shoot { 0% { opacity: 0; transform: rotate(-35deg) translateX(0); } 5% { opacity: 1; } 25% { opacity: 0; transform: rotate(-35deg) translateX(-360px); } 100% { opacity: 0; transform: rotate(-35deg) translateX(-360px); } }
/* W heartbeat (ripples from the logo) */
.hero-w .h-logo { position: relative; }
.hero-w .h-logo::before, .hero-w .h-logo::after { content: ""; position: absolute; inset: 0; margin: auto; width: 104px; height: 104px; border-radius: 50%; border: 2px solid var(--a); animation: hx-ripple 2.4s ease-out infinite; }
.hero-w .h-logo::after { animation-delay: 1.2s; }
.hero-w .orb { animation: hx-beat 2.4s ease-in-out infinite; }
@keyframes hx-ripple { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@keyframes hx-beat { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.06); } 20% { transform: scale(1); } 30% { transform: scale(1.04); } }
/* X reveal */
.hero-x .hero > .who { animation: hx-rise-in .9s cubic-bezier(.2,.8,.2,1) both; }
.hero-x .hero > .chips { animation: hx-rise-in .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.hero-x .hero > .welcome { animation: hx-type 2.4s .5s steps(40) both; }
.hero-x .hero > .h-logo { animation: hx-pop .7s .2s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes hx-rise-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes hx-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hx-pop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
/* Y hologram */
.hero-y::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: linear-gradient(115deg, transparent 30%, #ff4fd855 42%, #22d3ee55 50%, #ffe28a44 58%, transparent 70%); background-size: 250% 100%; animation: hx-holo 5s ease-in-out infinite; }
@keyframes hx-holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -80% 0; } }
.hero-y .h-st { background: rgba(255,255,255,.06); }

/* preview tag for moving cards, and calm for people who ask for less motion */
.hp-name .pill.anim { color: var(--a2, #ff4fd8); border-color: var(--a-45); }
@media (prefers-reduced-motion: reduce) { .portal[class*="hero-"] *, .portal[class*="hero-"]::after, .portal[class*="hero-"] { animation: none !important; } }
.sizehint { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; color: var(--mfg); background: var(--a-12); border: 1px solid var(--a-30); }
.sizehint b { color: var(--fg); }

/* 2.8.31: opening screen for the app (home-screen app and Android app): a night sky, the logo and the name */
.vsplash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 80% at 50% 0%, #241a4d 0%, #0d0a22 55%, #05040c 100%); transition: opacity .6s ease, transform .6s ease; }
.vsplash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.vs-sky { position: absolute; inset: 0; }
.vs-sky i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: hx-twinkle 2.6s ease-in-out infinite; }
.vs-sky i:nth-child(3n) { width: 3px; height: 3px; animation-duration: 3.4s; } .vs-sky i:nth-child(4n) { animation-delay: -1.2s; } .vs-sky i:nth-child(5n) { animation-delay: -2s; }
.vs-sky i:nth-child(1){left:6%;top:8%}.vs-sky i:nth-child(2){left:18%;top:22%}.vs-sky i:nth-child(3){left:31%;top:6%}.vs-sky i:nth-child(4){left:44%;top:17%}
.vs-sky i:nth-child(5){left:57%;top:4%}.vs-sky i:nth-child(6){left:71%;top:14%}.vs-sky i:nth-child(7){left:86%;top:9%}.vs-sky i:nth-child(8){left:94%;top:27%}
.vs-sky i:nth-child(9){left:9%;top:38%}.vs-sky i:nth-child(10){left:24%;top:47%}.vs-sky i:nth-child(11){left:78%;top:40%}.vs-sky i:nth-child(12){left:90%;top:52%}
.vs-sky i:nth-child(13){left:4%;top:63%}.vs-sky i:nth-child(14){left:15%;top:78%}.vs-sky i:nth-child(15){left:28%;top:90%}.vs-sky i:nth-child(16){left:40%;top:72%}
.vs-sky i:nth-child(17){left:62%;top:86%}.vs-sky i:nth-child(18){left:74%;top:70%}.vs-sky i:nth-child(19){left:88%;top:82%}.vs-sky i:nth-child(20){left:96%;top:93%}
.vs-sky i:nth-child(21){left:50%;top:33%}.vs-sky i:nth-child(22){left:36%;top:30%}.vs-sky i:nth-child(23){left:66%;top:28%}.vs-sky i:nth-child(24){left:12%;top:95%}
.vs-sky i:nth-child(25){left:53%;top:96%}.vs-sky i:nth-child(26){left:82%;top:62%}.vs-sky i:nth-child(27){left:20%;top:60%}.vs-sky i:nth-child(28){left:60%;top:58%}
.vs-moon { position: absolute; right: 12%; top: 10%; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset -14px -6px 0 2px #ffe9a8; filter: drop-shadow(0 0 18px #ffe9a877); animation: vs-float 6s ease-in-out infinite; }
.vs-shoot i { position: absolute; top: 12%; left: 70%; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-30deg); opacity: 0; animation: vs-shoot 3.2s .6s ease-in infinite; }
.vs-shoot i + i { top: 30%; left: 95%; animation-delay: 1.8s; }
.vs-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 24px; text-align: center; }
.vs-mid .orb { --s: 132px; animation: vs-pop .9s cubic-bezier(.2,1.3,.4,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vs-name { font: 800 clamp(26px, 8vw, 40px)/1.1 var(--name-font, var(--display)); letter-spacing: -.01em; color: #fff; max-width: 90vw;
  background: linear-gradient(100deg, #fff 20%, var(--a2, #ff4fd8) 45%, #fff 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: vs-up .8s .35s cubic-bezier(.2,.8,.2,1) both, hx-shine 3s 1.2s linear infinite; }
.vs-bar { width: 120px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; animation: vs-up .6s .6s both; }
.vs-bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--grad); animation: vs-load 1.1s ease-in-out infinite; }
@keyframes vs-pop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes vs-glow { 50% { filter: drop-shadow(0 0 26px var(--a)); } }
@keyframes vs-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes vs-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes vs-float { 50% { transform: translateY(-8px); } }
@keyframes vs-shoot { 0% { opacity: 0; transform: rotate(-30deg) translateX(0); } 8% { opacity: 1; } 35%, 100% { opacity: 0; transform: rotate(-30deg) translateX(-340px); } }
@media (prefers-reduced-motion: reduce) { .vsplash *, .vsplash { animation: none !important; } }
.vs-shoot { position: absolute; inset: 0; pointer-events: none; }

/* 2.8.34 tags: @member, @role, #channel, #ticket, #page */
.refpop { position: fixed; z-index: 85; max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 18px 40px #0008; background: var(--solid); border: 1px solid var(--line-2); }
.refpop[hidden] { display: none; }
.refitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--fg); text-align: left; font: inherit; cursor: pointer; }
.refitem.on, .refitem:hover { background: var(--a-20); }
.refav { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; }
.refav.letter { display: grid; place-items: center; background: var(--a-20); font-weight: 800; font-size: 14px; color: var(--hi, #fff); }
.refitem.role .refav.letter { background: color-mix(in oklab, var(--c, var(--a)) 35%, transparent); color: var(--c, var(--hi)); }
.reftx { display: flex; flex-direction: column; min-width: 0; }
.reftx b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reftx span { font-size: 11px; color: var(--mfg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.mention, .msg .body a.mention, .bubble a.mention { text-decoration: none; }
a.mention:hover, .msg .body a.mention:hover { text-decoration: underline; }
.mention.ref { display: inline; }
.mention.role { color: var(--c, var(--hi)); background: color-mix(in oklab, var(--c, var(--a)) 22%, transparent); }
.mention.role.me { color: #fff; background: color-mix(in oklab, var(--c, var(--a)) 50%, transparent); }
.mention.locked, .mention.gone { opacity: .7; font-weight: 500; }

/* 2.8.35 account security */
.codein { font: 700 22px/1.2 var(--mono); letter-spacing: .3em; text-align: center; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.codes code, .keytext { font: 600 15px var(--mono); padding: 10px; border-radius: 12px; background: var(--input); border: 1px solid var(--line); text-align: center; word-break: break-all; }
.qrbox { display: grid; place-items: center; padding: 8px; }
.qrbox svg { width: min(220px, 70vw); height: auto; border-radius: 14px; }
.devrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.devrow:first-of-type { border-top: 0; }
.devrow .hint { display: block; }
.audit { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.audit:first-child { border-top: 0; }
.audit .when { flex: none; width: 74px; color: var(--mfg); font-size: 12px; }
.audit .area { font-size: 11px; color: var(--mfg); text-transform: uppercase; letter-spacing: .06em; }

/* 2.8.36 voice notes */
.micbtn { flex: none; }
.voicebar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.voicebar[hidden] { display: none; }
.recdot { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 10px var(--bad); animation: recblink 1s infinite; }
.rectime { font: 700 14px var(--mono); }
@keyframes recblink { 50% { opacity: .3; } }
.composer.recording .crow textarea, .composer.recording .attach { opacity: .4; pointer-events: none; }
.voicemsg { display: flex; align-items: center; gap: 8px; padding: 4px 0; max-width: 100%; }
.voicemsg audio { height: 38px; max-width: 240px; width: 100%; }

/* 2.8.36 polls, pins, scheduling */
.poll { display: flex; flex-direction: column; gap: 8px; min-width: min(280px, 70vw); }
.poll-q { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.poll-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(var(--tint), .04); overflow: hidden; cursor: pointer; }
.poll-opt input { position: relative; z-index: 1; accent-color: var(--a); }
.poll-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--a-20); transition: width .5s ease; }
.poll-opt.mine .poll-bar { background: var(--a-30); }
.poll-opt.top .poll-bar { background: color-mix(in oklab, var(--ok) 30%, transparent); }
.poll-t { position: relative; flex: 1; font-weight: 600; }
.poll-n { position: relative; font-weight: 800; font-size: 13px; }
.poll.closed .poll-opt { cursor: default; }
.poll-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.poll-foot .hint { flex: 1; }
.pinned-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--warn); margin-bottom: 4px; }
.msg.flash .bubble { box-shadow: 0 0 0 2px var(--a), var(--glow); transition: box-shadow .4s; }
.msg.pinview { margin-top: 10px; }
.pingo { margin-top: 6px; align-self: flex-start; }
.cm-toggle { flex: none; transition: transform .2s; }
.cm-toggle.on { transform: rotate(45deg); }
.cm-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 4px 8px; }
.cm-row[hidden] { display: none; }
.schedrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; font-size: 13px; flex-wrap: wrap; }
.schedrow[hidden] { display: none; }
.schedrow input { flex: 1; min-width: 180px; }
.sched-list { margin-bottom: 8px; }
.sched-row { padding: 8px 0; border-top: 1px solid var(--line); }
.sched-row .hint { display: block; }
.chathead .iconbtn .count { position: absolute; top: -4px; right: -4px; }
.chathead .iconbtn { position: relative; }
.searchbar input[type=search] { min-width: 0; }
.sresult { display: block; color: inherit; text-decoration: none; }
.sresult .snip { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg); }
.sresult mark { background: var(--a-45); color: #fff; border-radius: 4px; padding: 0 2px; }
.composer.has-text .crow .attach, .composer.has-text .crow .gifbtn, .composer.has-text .crow .micbtn, .composer.has-text .crow .cm-toggle { display: none; }

/* 2.8.37 ticket tools */
.rated { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.stars { color: var(--warn); letter-spacing: 2px; }
.starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.starpick label { font-size: 34px; line-height: 1; color: var(--dim); cursor: pointer; transition: color .15s, transform .15s; }
.starpick label:hover, .starpick label:hover ~ label, .starpick input:checked ~ label { color: var(--warn); }
.starpick input:focus-visible + label { outline: 2px solid var(--a); border-radius: 6px; }
.savedbar { display: flex; justify-content: flex-end; padding: 0 4px 6px; }
.saved-item { text-align: left; width: 100%; border: 0; font: inherit; color: inherit; cursor: pointer; }

/* 2.8.37 insights */
.itiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .itiles { grid-template-columns: repeat(4, 1fr); } }
.itile { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: rgba(var(--tint), .04); border: 1px solid var(--line); min-width: 0; }
.itile .l { font-size: 12px; color: var(--mfg); font-weight: 600; }
.itile b { font: 800 26px/1.2 var(--display); color: var(--fg); }
.itile b.sm { font-size: 18px; }
.itile .s { font-size: 11px; color: var(--mfg); }
.ichart { margin: 0; }
.isvg { width: 100%; height: auto; overflow: visible; }
.ibar { fill: var(--a); }
.ibase { stroke: var(--line-2); stroke-width: 1; }
.ihitbox { fill: transparent; }
.ihit:hover .ibar { fill: var(--a2); }
.ihit:hover .ihitbox { fill: rgba(var(--tint), .04); }
.ilab { fill: var(--mfg); font: 18px var(--body); text-anchor: middle; }
.ilab.start { text-anchor: start; }
.irank { display: flex; flex-direction: column; gap: 8px; }
.irow { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.itrack { height: 8px; border-radius: 99px; background: rgba(var(--tint), .06); overflow: hidden; }
.ifill { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--a); transition: width .6s ease; }
.ifill.warn { background: var(--warn); }

/* 2.8.38 levels */
.lvl { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border-radius: 99px; font: 700 10px var(--body); color: var(--a); background: var(--a-12); text-decoration: none; }
.lvcard .lvbig { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font: 800 28px var(--display); color: #fff; background: var(--grad); box-shadow: var(--glow); flex: none; }
.lvcard b { display: block; font-size: 18px; }
.lvtrack { height: 10px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.badge { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); opacity: .45; filter: grayscale(1); }
.badge.got { opacity: 1; filter: none; border-color: var(--a-30); background: var(--a-6); }
.badge .be { font-size: 26px; }
.badge b { font-size: 13px; }
.badge .hint { font-size: 11px; }
.lbrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.lbrow:first-child { border-top: 0; }
.lbrow.me { background: var(--a-6); border-radius: 12px; padding: 8px; }
.lbrow .hint { display: block; font-size: 11px; }
.lvmini { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.lvmini .lvbig { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font: 800 20px var(--display); color: #fff; background: var(--grad); flex: none; }
.lvmini .grow { display: flex; flex-direction: column; gap: 4px; }

/* 2.8.38 score predictor */
.pr-list { display: flex; flex-direction: column; padding: 4px 14px; }
.pr-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--line); }
.pr-row:first-child { border-top: 0; }
.pr-when { font-size: 11px; text-align: center; }
.pr-match { display: grid; grid-template-columns: minmax(0, 1fr) 52px 10px 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.pr-row.past .pr-match { grid-template-columns: 1fr auto 1fr; }
.pr-team { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.pr-team.home { justify-content: flex-end; text-align: right; }
.pr-team img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.pr-match input.pr-in { width: 52px; min-width: 0; height: 44px; text-align: center; font: 800 18px var(--display); padding: 0; -moz-appearance: textfield; }
.pr-in::-webkit-outer-spin-button, .pr-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-dash { color: var(--mfg); font-weight: 800; }
.pr-res { font: 800 18px var(--display); padding: 0 6px; }
.pr-saved { align-self: center; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ok); }
.pr-mine { align-self: center; font-size: 12px; color: var(--mfg); }
.pts.p3 { color: var(--ok); } .pts.p1 { color: var(--warn); } .pts.p0 { color: var(--mfg); }
.pr-save { position: sticky; bottom: calc(var(--dock-h) + 16px + env(safe-area-inset-bottom)); z-index: 5; }

/* 2.8.39 in-app reader and video player */
body.noscroll { overflow: hidden; }
.reader .sheet, .vplayer .sheet { max-width: 640px; max-height: 88dvh; }
.rd-body { gap: 12px; }
.rd-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: rgba(var(--tint), .05); }
.rd-title { font: 800 22px/1.25 var(--display); margin: 0; }
.rd-sum { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg); }
.rd-src { margin: 0; font-size: 11px; color: var(--dim); text-align: center; }
.vplayer .sheet { width: min(960px, 100%); max-width: 960px; }
.vwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 0 0 var(--r-2xl) var(--r-2xl); overflow: hidden; }
.vwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sg-meta { font-size: 11px; opacity: .75; }

/* 2.8.38: the top bar and the "encrypted" note stay put at the top while you scroll */
.chattop { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
.chattop > .chathead { position: relative; top: auto; width: 100%; }
.chattop > .secure-note { margin: 0; background: color-mix(in oklab, var(--solid) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); }

/* 2.8.39 home tiles: a faint background in the community's own colours, and the shop picture */
.tile.fxtile { isolation: isolate; }
.tile.fxtile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 110%, color-mix(in oklab, var(--a) 18%, transparent), transparent 62%),
              radial-gradient(90% 70% at 0% 0%, color-mix(in oklab, var(--a2) 9%, transparent), transparent 60%); }
.tile .tilefx { position: absolute; z-index: -1; right: -16px; bottom: -22px; width: 104px; height: 104px; color: var(--a); opacity: .13; transform: rotate(-14deg); pointer-events: none; }
.tile .tilefx .i { width: 100%; height: 100%; stroke-width: 1.6; }
.tile.wide .tilefx { width: 84px; height: 84px; bottom: -18px; right: 40px; }
[data-layout="compact"] .tile .tilefx { width: 70px; height: 70px; }
.tile.shoptile .tilebg { background-image: url("/static/img/tile-shop.svg"); }

/* 2.8.41 shop: coupon, points, tip and the price breakdown */
.shop-extras { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: rgba(var(--tint),.03); border: 1px solid var(--line); }
.shop-extras .field .row { gap: 8px; } .shop-extras .field .row input { flex: 1; min-width: 0; }
.q-msg.ok { color: var(--ok); } .q-msg.bad { color: var(--bad); }
.shop-bd { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--a-6); border: 1px solid var(--a-20); }
.bd-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bd-row span { color: var(--mfg); } .bd-row.off b { color: var(--ok); }
.bd-row.total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 16px; }
.bd-row.total span { color: var(--fg); font-weight: 700; }
.bd-row[hidden], .shop-bd[hidden], .shop-extras [hidden] { display: none; }
.pts-big { display: flex; flex-direction: column; gap: 2px; }
.pts-big b { font: 800 44px/1 var(--display); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pts-big span { color: var(--mfg); font-size: 14px; }
.ref-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px dashed var(--a-45); background: var(--a-6); }
.ref-code b { font-size: 24px; letter-spacing: .12em; }
.section-h { margin: 6px 2px 0; font-size: 14px; color: var(--mfg); }

.msg .body code, .bubble code { font-family: var(--mono); font-size: .92em; padding: 1px 6px; border-radius: 6px; background: rgba(var(--tint),.08); border: 1px solid var(--line-2); }

/* 2.8.42: 20 more name fonts */
.ff-lilita-one { font-family: "Lilita One", var(--display); }
.ff-archivo-black { font-family: "Archivo Black", var(--display); }
.ff-alfa-slab-one { font-family: "Alfa Slab One", var(--display); }
.ff-bungee-shade { font-family: "Bungee Shade", var(--display); }
.ff-bungee-inline { font-family: "Bungee Inline", var(--display); }
.ff-fugaz-one { font-family: "Fugaz One", var(--display); }
.ff-racing-sans-one { font-family: "Racing Sans One", var(--display); }
.ff-zen-dots { font-family: "Zen Dots", var(--display); }
.ff-silkscreen { font-family: "Silkscreen", var(--display); }
.ff-special-elite { font-family: "Special Elite", var(--display); }
.ff-chewy { font-family: "Chewy", var(--display); }
.ff-carter-one { font-family: "Carter One", var(--display); }
.ff-knewave { font-family: "Knewave", var(--display); }
.ff-yellowtail { font-family: "Yellowtail", var(--display); }
.ff-sacramento { font-family: "Sacramento", var(--display); }
.ff-parisienne { font-family: "Parisienne", var(--display); }
.ff-urbanist { font-family: "Urbanist", var(--display); }
.ff-barlow-condensed { font-family: "Barlow Condensed", var(--display); }
.ff-fredoka { font-family: "Fredoka", var(--display); }
.ff-cherry-bomb-one { font-family: "Cherry Bomb One", var(--display); }


/* ---------- 2.8.46: conversations are one fixed screen ----------
   The header and the message box never move; only the messages scroll between them. The body itself
   can't scroll, so mobile browsers (Firefox, DuckDuckGo, Samsung Internet...) have nothing to bounce,
   and the height follows the visible screen when the keyboard opens (--app-h, set by app.js). */
body.chatmode { position: fixed; inset: 0; height: var(--app-h, 100dvh); min-height: 0; overflow: hidden; overscroll-behavior: none; }
body.chatmode .shell { height: 100%; min-height: 0; }
body.chatmode .main { height: 100%; min-height: 0; overflow: hidden; }
body.chatmode .page.chatpage { height: 100%; min-height: 0; box-sizing: border-box; gap: 8px; position: relative;
  padding: calc(8px + env(safe-area-inset-top)) 12px calc(6px + env(safe-area-inset-bottom)); }
body.chatmode .page.chatpage > * { flex: none; }
body.chatmode .chattop { position: relative; top: auto; margin: 0; }
body.chatmode .page.chatpage > .chatlog { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch; padding: 2px 2px 10px; scroll-padding-top: 8px; }
body.chatmode .chatlog > * { flex: none; }
body.chatmode .page.chatpage > .chatlog { position: relative; }
body.chatmode .composer, body.chatmode .readonly { position: relative; bottom: auto; }
body.chatmode .hoursbar, body.chatmode .closedmsg { margin: 0; }
body.chatmode .vc-foot { margin: 0; padding: 0 8px; font-size: 10.5px; line-height: 1.4; }
body.chatmode .sched-list { max-height: 30vh; overflow: auto; }
@media (max-height: 520px) { body.chatmode .chattop > .secure-note, body.chatmode .vc-foot { display: none; } }

/* where you stopped reading, and the arrow down to the newest */
.unreadline { display: flex; align-items: center; gap: 10px; margin: 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--a); }
.unreadline::before, .unreadline::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--a) 55%, transparent); }
.jumpdown { position: absolute; right: 18px; z-index: 30; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: #fff; background: var(--grad); box-shadow: 0 8px 24px -8px rgba(0,0,0,.7), var(--glow); cursor: pointer;
  transition: opacity .18s, transform .18s; opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; }
.jumpdown.show { opacity: 1; transform: none; pointer-events: auto; }
.jumpdown .i { width: 20px; height: 20px; }
.jumpdown .jd-n { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  font: 800 11px/1 var(--body); color: #fff; background: var(--bad, #ef4444); border: 2px solid var(--solid, #111); }
.jumpdown .jd-n:empty { display: none; }

/* the + menu: photos, GIFs, emoji (and polls / scheduling for the team) */
.plusbtn { flex: none; width: 44px; height: 44px; border-radius: 15px; transition: background .2s; }
.plusbtn .i { transition: transform .2s; }
.plusbtn.on { background: rgba(var(--tint), .1); }
.plusbtn.on .i { transform: rotate(45deg); }
.pm-item.attach { width: auto; height: auto; }
.plusmenu { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; padding: 2px 2px 8px; }
.plusmenu[hidden] { display: none; }
.pm-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 7px 4px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(var(--tint), .04); color: var(--fg); font: 600 11.5px/1.2 var(--body); text-align: center; cursor: pointer; }
.pm-item:hover, .pm-item:focus-visible { background: rgba(var(--tint), .09); border-color: color-mix(in oklab, var(--a) 45%, var(--line-2)); }
.pm-item .i { width: 22px; height: 22px; color: var(--a); }
.pm-gif { font: 800 12px/1 var(--body); letter-spacing: .04em; padding: 4px 6px; border-radius: 7px; color: var(--a); border: 1.5px solid currentColor; }
.crow textarea { flex: 1 1 auto; min-width: 0; }

/* emoji in messages */
.aemoji { width: 1.45em; height: 1.45em; vertical-align: -0.35em; object-fit: contain; display: inline-block; }
.jumbo { font-size: 2.3em; line-height: 1.2; letter-spacing: .02em; }
.jumbo .aemoji { width: 64px; height: 64px; vertical-align: middle; }
.bubble .jumbo { display: inline-block; padding: 2px 0; }
.msg .bubble:has(> .body > .jumbo:only-child):not(:has(.shots, .gifmsg, .quote)) { background: none; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }

/* emoji pickers */
.emojisheet { max-height: min(78dvh, 640px); }
.emojisheet .sb { padding-top: 0; }
.ej-top { position: sticky; top: 0; z-index: 2; background: var(--solid, #111); padding: 8px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.ej-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ej-tabs::-webkit-scrollbar { display: none; }
.ej-tabs button { flex: none; min-width: 40px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: none; font-size: 19px; cursor: pointer; color: var(--mfg); font-weight: 700; }
.ej-tabs button.on { background: rgba(var(--tint), .1); box-shadow: inset 0 -2px 0 var(--a); }
.ej-tabs button .i { width: 18px; height: 18px; }
.ej-sec { scroll-margin-top: 96px; }
.ej-note { font-size: 11px; color: var(--dim); padding: 8px 2px 2px; text-align: center; }
.aegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 4px; }
.aegrid button { height: 58px; border: 0; border-radius: 14px; background: none; cursor: pointer; display: grid; place-items: center; font-size: 26px; }
.aegrid button:hover, .aegrid button:focus-visible { background: rgba(var(--tint), .08); }
.aegrid img { width: 46px; height: 46px; object-fit: contain; }


/* ---------- 2.8.46: steadier in mobile browsers (Firefox, DuckDuckGo, Samsung Internet, Safari) ----------
   Browser toolbars slide in and out while you scroll, which changes 100dvh on every frame. Heights that only
   need to fill the screen now use the small viewport (stable), and the background is sized to the large one,
   so nothing jumps or repaints as the toolbar moves. */
body, .shell { min-height: 100vh; min-height: 100svh; }
.gate { min-height: 100vh; min-height: 100svh; }
.backdrop { inset: 0 0 auto 0; height: 100vh; height: 100lvh; contain: strict; transform: translateZ(0); }
.dock { transform: translateZ(0); }
@media (hover: none) {
  .emojigrid button:hover, .aegrid button:hover { transform: none; background: none; }
}
@media (display-mode: browser) and (max-width: 899px) {
  html { scrollbar-gutter: auto; }
  .dock { bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* Firefox on phones struggles with lots of blurred glass over a moving background: same look, no live blur */
@supports (-moz-appearance: none) {
  @media (max-width: 899px) {
    .glass, .card { -webkit-backdrop-filter: none; backdrop-filter: none;
      background: linear-gradient(color-mix(in oklab, var(--solid) 82%, transparent), color-mix(in oklab, var(--solid) 82%, transparent)) padding-box, var(--edge) border-box; }
    .sheet-bg { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .6); }
    .dock { -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
}

/* 2.8.48: names the team can tap to change someone's details */
[data-quickedit] .msg-name[data-uid] { cursor: pointer; text-decoration: underline dotted color-mix(in oklab, currentColor 45%, transparent); text-underline-offset: 3px; }
.quickedit .sb { padding-bottom: 14px; }
.bad-text { color: var(--bad, #ef4444); }
/* ===== 2.8.40 moving backgrounds (generated): styles, home cards and opening screens share these ===== */
.fx { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.fx::before, .fx::after { position: absolute; pointer-events: none; }
/* rain */
[data-bg="rain"] .backdrop > .fx, .stylecard[data-bgfx="rain"] .sc-prev > .fx, .portal.hero-am > .fx, .vsplash[data-sfx="rain"] > .fx { display: block; }
[data-bg="rain"] .backdrop > .f1, .stylecard[data-bgfx="rain"] .sc-prev > .f1, .portal.hero-am > .f1, .vsplash[data-sfx="rain"] > .f1 { inset:-160px 0 0 0;background:linear-gradient(var(--a2),var(--a));opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='160' viewBox='0 0 140 160'%3E%3Cline x1='12' y1='10' x2='9' y2='34' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='48' y1='70' x2='45' y2='94' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='80' y1='20' x2='77' y2='44' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='110' y1='100' x2='107' y2='124' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='30' y1='120' x2='27' y2='144' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='128' y1='50' x2='125' y2='74' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='64' y1='130' x2='61' y2='154' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3Cline x1='96' y1='150' x2='94' y2='160' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/140px 160px repeat;animation:fx-rain1 .9s linear infinite; }
[data-bg="rain"] .backdrop > .f2, .stylecard[data-bgfx="rain"] .sc-prev > .f2, .portal.hero-am > .f2, .vsplash[data-sfx="rain"] > .f2 { inset:-220px 0 0 0;background:var(--a2);opacity:.25;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='220' viewBox='0 0 200 220'%3E%3Cline x1='20' y1='30' x2='16' y2='70' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='70' y1='120' x2='66' y2='160' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='120' y1='10' x2='116' y2='50' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='170' y1='90' x2='166' y2='130' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='40' y1='170' x2='36' y2='210' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='150' y1='170' x2='147' y2='200' stroke='%23fff' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/200px 220px repeat;animation:fx-rain2 1.5s linear infinite; }
/* bubbles */
[data-bg="bubbles"] .backdrop > .fx, .stylecard[data-bgfx="bubbles"] .sc-prev > .fx, .portal.hero-bn > .fx, .vsplash[data-sfx="bubbles"] > .fx { display: block; }
[data-bg="bubbles"] .backdrop > .f1, .stylecard[data-bgfx="bubbles"] .sc-prev > .f1, .portal.hero-bn > .f1, .vsplash[data-sfx="bubbles"] > .f1 { inset:0 0 -240px 0;background:linear-gradient(var(--a),var(--a2));opacity:.4;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Ccircle cx='30' cy='40' r='10' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='150' cy='20' r='6' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='90' cy='120' r='14' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='160' r='8' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='200' r='5' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='170' cy='90' r='4' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='120' cy='220' r='7' fill='%23fff' fill-opacity='.25' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/240px 240px repeat;animation:fx-bub1 14s linear infinite; }
[data-bg="bubbles"] .backdrop > .f2, .stylecard[data-bgfx="bubbles"] .sc-prev > .f2, .portal.hero-bn > .f2, .vsplash[data-sfx="bubbles"] > .f2 { inset:0 0 -360px 0;background:var(--a2);opacity:.25;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Ccircle cx='60' cy='80' r='22' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='40' r='12' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='220' r='18' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='140' cy='290' r='9' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='200' cy='160' r='6' fill='%23fff' fill-opacity='.18' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/360px 360px repeat;animation:fx-bub2 22s linear infinite; }
/* fireflies */
[data-bg="fireflies"] .backdrop > .fx, .stylecard[data-bgfx="fireflies"] .sc-prev > .fx, .portal.hero-an > .fx, .vsplash[data-sfx="fireflies"] > .fx { display: block; }
[data-bg="fireflies"] .backdrop > .f1, .stylecard[data-bgfx="fireflies"] .sc-prev > .f1, .portal.hero-an > .f1, .vsplash[data-sfx="fireflies"] > .f1 { inset:-10%;background:radial-gradient(circle at 12% 22%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 38% 64%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 66% 18%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 84% 58%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 24% 86%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 54% 42%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 92% 90%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a) 70%, transparent) 2.5px, transparent 7px);background-size:260px 260px;animation:fx-wander 16s ease-in-out infinite alternate, fx-blink 2.6s ease-in-out infinite alternate; }
[data-bg="fireflies"] .backdrop > .f2, .stylecard[data-bgfx="fireflies"] .sc-prev > .f2, .portal.hero-an > .f2, .vsplash[data-sfx="fireflies"] > .f2 { inset:-10%;background:radial-gradient(circle at 8% 50%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 46% 12%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 70% 80%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 30% 34%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px),radial-gradient(circle at 88% 30%, #fff8c4 0 1.5px, color-mix(in oklab, var(--a2) 70%, transparent) 2.5px, transparent 7px);background-size:340px 340px;animation:fx-wander 22s ease-in-out -6s infinite alternate-reverse, fx-blink 3.8s ease-in-out -1s infinite alternate; }
/* waves */
[data-bg="waves"] .backdrop > .fx, .stylecard[data-bgfx="waves"] .sc-prev > .fx, .portal.hero-q > .fx, .vsplash[data-sfx="waves"] > .fx { display: block; }
[data-bg="waves"] .backdrop > .f1, .stylecard[data-bgfx="waves"] .sc-prev > .f1, .portal.hero-q > .f1, .vsplash[data-sfx="waves"] > .f1 { top:auto;bottom:0;left:0;right:-400px;height:120px;background:var(--a);opacity:.28;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 44 C 100.0 18, 100.0 18, 200.0 44 S 300.0 70, 400 44 V120 H0Z'/%3E%3C/svg%3E") 0 0/400px 100% repeat-x;animation:fx-wave1 9s linear infinite; }
[data-bg="waves"] .backdrop > .f2, .stylecard[data-bgfx="waves"] .sc-prev > .f2, .portal.hero-q > .f2, .vsplash[data-sfx="waves"] > .f2 { top:auto;bottom:0;left:-300px;right:0;height:84px;background:var(--a2);opacity:.26;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='100' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 40 C 75.0 20, 75.0 20, 150.0 40 S 225.0 60, 300 40 V100 H0Z'/%3E%3C/svg%3E") 0 0/300px 100% repeat-x;animation:fx-wave2 7s linear infinite; }
[data-bg="waves"] .backdrop > .f2::before, .stylecard[data-bgfx="waves"] .sc-prev > .f2::before, .portal.hero-q > .f2::before, .vsplash[data-sfx="waves"] > .f2::before { content:'';left:0;right:0;bottom:0;height:62%;background:var(--a);opacity:.9;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='110' viewBox='0 0 520 110' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 50 C 130.0 34, 130.0 34, 260.0 50 S 390.0 66, 520 50 V110 H0Z'/%3E%3C/svg%3E") 130px 0/520px 100% repeat-x; }
/* matrix */
[data-bg="matrix"] .backdrop > .fx, .stylecard[data-bgfx="matrix"] .sc-prev > .fx, .portal.hero-ap > .fx, .vsplash[data-sfx="matrix"] > .fx { display: block; }
[data-bg="matrix"] .backdrop > .f1, .stylecard[data-bgfx="matrix"] .sc-prev > .f1, .portal.hero-ap > .f1, .vsplash[data-sfx="matrix"] > .f1 { inset:-320px 0 0 0;background:var(--a);opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='320' viewBox='0 0 96 320'%3E%3Cdefs%3E%3ClinearGradient id='g0' gradientUnits='userSpaceOnUse' x1='0' y1='10' x2='0' y2='100'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' gradientUnits='userSpaceOnUse' x1='0' y1='150' x2='0' y2='270'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='0' y2='130'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' gradientUnits='userSpaceOnUse' x1='0' y1='200' x2='0' y2='300'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='8' y1='10' x2='8' y2='100' stroke='url(%23g0)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='32' y1='150' x2='32' y2='270' stroke='url(%23g1)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='56' y1='60' x2='56' y2='130' stroke='url(%23g2)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='80' y1='200' x2='80' y2='300' stroke='url(%23g3)' stroke-width='3' stroke-dasharray='5 3'/%3E%3C/svg%3E") 0 0/96px 320px repeat;animation:fx-mat1 3.2s linear infinite; }
[data-bg="matrix"] .backdrop > .f2, .stylecard[data-bgfx="matrix"] .sc-prev > .f2, .portal.hero-ap > .f2, .vsplash[data-sfx="matrix"] > .f2 { inset:-460px 0 0 0;background:var(--a2);opacity:.28;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='460' viewBox='0 0 140 460'%3E%3Cdefs%3E%3ClinearGradient id='g0' gradientUnits='userSpaceOnUse' x1='0' y1='40' x2='0' y2='180'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' gradientUnits='userSpaceOnUse' x1='0' y1='250' x2='0' y2='410'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' gradientUnits='userSpaceOnUse' x1='0' y1='120' x2='0' y2='210'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='g3' gradientUnits='userSpaceOnUse' x1='0' y1='330' x2='0' y2='440'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='14' y1='40' x2='14' y2='180' stroke='url(%23g0)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='54' y1='250' x2='54' y2='410' stroke='url(%23g1)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='94' y1='120' x2='94' y2='210' stroke='url(%23g2)' stroke-width='3' stroke-dasharray='5 3'/%3E%3Cline x1='126' y1='330' x2='126' y2='440' stroke='url(%23g3)' stroke-width='3' stroke-dasharray='5 3'/%3E%3C/svg%3E") 40px 0/140px 460px repeat;animation:fx-mat2 5.5s linear infinite; }
/* lava */
[data-bg="lava"] .backdrop > .fx, .stylecard[data-bgfx="lava"] .sc-prev > .fx, .portal.hero-ao > .fx, .vsplash[data-sfx="lava"] > .fx { display: block; }
[data-bg="lava"] .backdrop > .f1, .stylecard[data-bgfx="lava"] .sc-prev > .f1, .portal.hero-ao > .f1, .vsplash[data-sfx="lava"] > .f1 { inset:auto;left:4%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a),transparent);opacity:.55;animation:fx-lava1 19s ease-in-out infinite alternate; }
[data-bg="lava"] .backdrop > .f1::before, .stylecard[data-bgfx="lava"] .sc-prev > .f1::before, .portal.hero-ao > .f1::before, .vsplash[data-sfx="lava"] > .f1::before { content:'';left:60%;top:55%;width:45%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a2),transparent); }
[data-bg="lava"] .backdrop > .f2, .stylecard[data-bgfx="lava"] .sc-prev > .f2, .portal.hero-ao > .f2, .vsplash[data-sfx="lava"] > .f2 { inset:auto;right:-6%;width:56%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a2),transparent);opacity:.5;animation:fx-lava2 23s ease-in-out infinite alternate; }
[data-bg="lava"] .backdrop > .f2::before, .stylecard[data-bgfx="lava"] .sc-prev > .f2::before, .portal.hero-ao > .f2::before, .vsplash[data-sfx="lava"] > .f2::before { content:'';left:-20%;top:-15%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--a),transparent); }
/* warp */
[data-bg="warp"] .backdrop > .fx, .stylecard[data-bgfx="warp"] .sc-prev > .fx, .portal.hero-aw > .fx, .vsplash[data-sfx="warp"] > .fx { display: block; }
[data-bg="warp"] .backdrop > .f1, .stylecard[data-bgfx="warp"] .sc-prev > .f1, .portal.hero-aw > .f1, .vsplash[data-sfx="warp"] > .f1 { inset:-50%;background:radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),radial-gradient(1px 1px at 35% 70%, #fff, transparent),radial-gradient(1.3px 1.3px at 60% 15%, #fff, transparent),radial-gradient(1px 1px at 80% 55%, #fff, transparent),radial-gradient(1px 1px at 25% 45%, #fff, transparent),radial-gradient(1.6px 1.6px at 90% 85%, #fff, transparent),radial-gradient(1px 1px at 50% 90%, #fff, transparent),radial-gradient(1.2px 1.2px at 70% 35%, #fff, transparent);background-size:200px 200px;animation:fx-warp 3s linear infinite; }
[data-bg="warp"] .backdrop > .f2, .stylecard[data-bgfx="warp"] .sc-prev > .f2, .portal.hero-aw > .f2, .vsplash[data-sfx="warp"] > .f2 { inset:-50%;background:radial-gradient(1.2px 1.2px at 15% 80%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1.6px 1.6px at 45% 30%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1px 1px at 75% 75%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1.3px 1.3px at 95% 10%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1px 1px at 5% 55%, color-mix(in oklab, var(--a2) 60%, #fff), transparent),radial-gradient(1.4px 1.4px at 60% 60%, color-mix(in oklab, var(--a2) 60%, #fff), transparent);background-size:260px 260px;animation:fx-warp 3s linear -1.5s infinite; }
/* confetti */
[data-bg="confetti"] .backdrop > .fx, .stylecard[data-bgfx="confetti"] .sc-prev > .fx, .portal.hero-aq > .fx, .vsplash[data-sfx="confetti"] > .fx { display: block; }
[data-bg="confetti"] .backdrop > .f1, .stylecard[data-bgfx="confetti"] .sc-prev > .f1, .portal.hero-aq > .f1, .vsplash[data-sfx="confetti"] > .f1 { inset:-240px 0 0 0;background:linear-gradient(135deg,#f43f5e,#facc15 25%,#22d3ee 50%,#a3e635 75%,var(--a));opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect x='20' y='20' width='6' height='11' rx='1' fill='%23fff' transform='rotate(20 23 25)'/%3E%3Crect x='90' y='50' width='6' height='11' rx='1' fill='%23fff' transform='rotate(-30 93 55)'/%3E%3Ccircle cx='170' cy='30' r='3.5' fill='%23fff'/%3E%3Crect x='210' y='100' width='6' height='11' rx='1' fill='%23fff' transform='rotate(15 213 105)'/%3E%3Ccircle cx='60' cy='120' r='3.5' fill='%23fff'/%3E%3Crect x='130' y='150' width='6' height='11' rx='1' fill='%23fff' transform='rotate(-50 133 155)'/%3E%3Crect x='30' y='200' width='6' height='11' rx='1' fill='%23fff' transform='rotate(35 33 205)'/%3E%3Ccircle cx='190' cy='200' r='3.5' fill='%23fff'/%3E%3Crect x='110' y='220' width='6' height='11' rx='1' fill='%23fff' transform='rotate(70 113 225)'/%3E%3Ccircle cx='150' cy='90' r='3.5' fill='%23fff'/%3E%3C/svg%3E") 0 0/240px 240px repeat;animation:fx-conf1 8s linear infinite; }
[data-bg="confetti"] .backdrop > .f2, .stylecard[data-bgfx="confetti"] .sc-prev > .f2, .portal.hero-aq > .f2, .vsplash[data-sfx="confetti"] > .f2 { inset:-320px 0 0 -320px;background:linear-gradient(45deg,var(--a2),#fb923c,#22d3ee,#f472b6);opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Crect x='40' y='60' width='6' height='11' rx='1' fill='%23fff' transform='rotate(45 43 65)'/%3E%3Ccircle cx='200' cy='30' r='3.5' fill='%23fff'/%3E%3Crect x='280' y='140' width='6' height='11' rx='1' fill='%23fff' transform='rotate(70 283 145)'/%3E%3Crect x='120' y='200' width='6' height='11' rx='1' fill='%23fff' transform='rotate(10 123 205)'/%3E%3Ccircle cx='60' cy='280' r='3.5' fill='%23fff'/%3E%3Crect x='250' y='270' width='6' height='11' rx='1' fill='%23fff' transform='rotate(-60 253 275)'/%3E%3C/svg%3E") 0 0/320px 320px repeat;animation:fx-conf2 13s linear infinite; }
/* petals */
[data-bg="petals"] .backdrop > .fx, .stylecard[data-bgfx="petals"] .sc-prev > .fx, .portal.hero-ar > .fx, .vsplash[data-sfx="petals"] > .fx { display: block; }
[data-bg="petals"] .backdrop > .f1, .stylecard[data-bgfx="petals"] .sc-prev > .f1, .portal.hero-ar > .f1, .vsplash[data-sfx="petals"] > .f1 { inset:-260px -260px 0 0;background:linear-gradient(135deg,#fbcfe8,#f9a8d4,var(--a2));opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(30 40) rotate(20) scale(1)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(150 20) rotate(110) scale(0.8)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(220 120) rotate(200) scale(1.1)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(90 150) rotate(300) scale(0.9)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(40 230) rotate(60) scale(0.7)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(180 220) rotate(150) scale(1)'/%3E%3C/svg%3E") 0 0/260px 260px repeat;animation:fx-pet1 16s linear infinite; }
[data-bg="petals"] .backdrop > .f2, .stylecard[data-bgfx="petals"] .sc-prev > .f2, .portal.hero-ar > .f2, .vsplash[data-sfx="petals"] > .f2 { inset:-360px -360px 0 0;background:linear-gradient(135deg,#fce7f3,var(--a));opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(60 80) rotate(70) scale(1.4)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(260 60) rotate(190) scale(1.2)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(160 260) rotate(20) scale(1.5)'/%3E%3Cpath d='M0 0 C7 -9 18 -7 16 4 C12 13 3 11 0 0Z' fill='%23fff' transform='translate(320 300) rotate(260) scale(1)'/%3E%3C/svg%3E") 0 0/360px 360px repeat;animation:fx-pet2 24s linear infinite; }
/* leaves */
[data-bg="leaves"] .backdrop > .fx, .stylecard[data-bgfx="leaves"] .sc-prev > .fx, .portal.hero-bm > .fx, .vsplash[data-sfx="leaves"] > .fx { display: block; }
[data-bg="leaves"] .backdrop > .f1, .stylecard[data-bgfx="leaves"] .sc-prev > .f1, .portal.hero-bm > .f1, .vsplash[data-sfx="leaves"] > .f1 { inset:-300px -300px 0 0;background:linear-gradient(135deg,#f97316,#eab308,#b91c1c);opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(40 50) rotate(30) scale(1)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(180 30) rotate(150) scale(0.9)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(250 160) rotate(80) scale(1.1)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(110 190) rotate(250) scale(1)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(40 260) rotate(200) scale(0.8)'/%3E%3C/svg%3E") 0 0/300px 300px repeat;animation:fx-leaf1 18s linear infinite; }
[data-bg="leaves"] .backdrop > .f2, .stylecard[data-bgfx="leaves"] .sc-prev > .f2, .portal.hero-bm > .f2, .vsplash[data-sfx="leaves"] > .f2 { inset:-420px -420px 0 0;background:linear-gradient(45deg,#ea580c,#facc15);opacity:.35;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(80 100) rotate(60) scale(1.5)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(320 80) rotate(210) scale(1.3)'/%3E%3Cpath d='M0 0 C8 -12 22 -10 24 0 C22 10 8 12 0 0Z M0 0 L-6 3' fill='%23fff' transform='translate(220 320) rotate(330) scale(1.6)'/%3E%3C/svg%3E") 0 0/420px 420px repeat;animation:fx-leaf2 27s linear infinite; }
/* nebula */
[data-bg="nebula"] .backdrop > .fx, .stylecard[data-bgfx="nebula"] .sc-prev > .fx, .portal.hero-bb > .fx, .vsplash[data-sfx="nebula"] > .fx { display: block; }
[data-bg="nebula"] .backdrop > .f1, .stylecard[data-bgfx="nebula"] .sc-prev > .f1, .portal.hero-bb > .f1, .vsplash[data-sfx="nebula"] > .f1 { inset:-40%;background:radial-gradient(28% 22% at 30% 40%,var(--a-45),transparent 70%),radial-gradient(26% 30% at 70% 62%,var(--a2-45),transparent 70%),radial-gradient(18% 18% at 55% 25%,#22d3ee40,transparent 70%);animation:fx-spin 90s linear infinite; }
[data-bg="nebula"] .backdrop > .f2, .stylecard[data-bgfx="nebula"] .sc-prev > .f2, .portal.hero-bb > .f2, .vsplash[data-sfx="nebula"] > .f2 { inset:-40%;opacity:.8;background:radial-gradient(22% 18% at 40% 70%,var(--a2-45),transparent 70%),radial-gradient(20% 26% at 65% 30%,var(--a-45),transparent 70%),radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),radial-gradient(1px 1px at 35% 70%, #fff, transparent),radial-gradient(1.3px 1.3px at 60% 15%, #fff, transparent),radial-gradient(1px 1px at 80% 55%, #fff, transparent),radial-gradient(1px 1px at 25% 45%, #fff, transparent),radial-gradient(1.6px 1.6px at 90% 85%, #fff, transparent),radial-gradient(1px 1px at 50% 90%, #fff, transparent),radial-gradient(1.2px 1.2px at 70% 35%, #fff, transparent);background-size:auto,auto,220px 220px;animation:fx-spin 130s linear infinite reverse; }
/* rings */
[data-bg="rings"] .backdrop > .fx, .stylecard[data-bgfx="rings"] .sc-prev > .fx, .portal.hero-be > .fx, .vsplash[data-sfx="rings"] > .fx { display: block; }
[data-bg="rings"] .backdrop > .f1, .stylecard[data-bgfx="rings"] .sc-prev > .f1, .portal.hero-be > .f1, .vsplash[data-sfx="rings"] > .f1 { inset:auto;left:50%;top:45%;width:130%;aspect-ratio:1;margin-left:-65%;translate:0 -50%;border-radius:50%;border:2px solid var(--a);opacity:0;animation:fx-ring 6s ease-out infinite; }
[data-bg="rings"] .backdrop > .f1::before, .stylecard[data-bgfx="rings"] .sc-prev > .f1::before, .portal.hero-be > .f1::before, .vsplash[data-sfx="rings"] > .f1::before { content:'';inset:22%;border-radius:50%;border:1.5px solid var(--a2); }
[data-bg="rings"] .backdrop > .f2, .stylecard[data-bgfx="rings"] .sc-prev > .f2, .portal.hero-be > .f2, .vsplash[data-sfx="rings"] > .f2 { inset:auto;left:50%;top:45%;width:130%;aspect-ratio:1;margin-left:-65%;translate:0 -50%;border-radius:50%;border:2px solid var(--a2);opacity:0;animation:fx-ring 6s ease-out -3s infinite; }
[data-bg="rings"] .backdrop > .f2::before, .stylecard[data-bgfx="rings"] .sc-prev > .f2::before, .portal.hero-be > .f2::before, .vsplash[data-sfx="rings"] > .f2::before { content:'';inset:22%;border-radius:50%;border:1.5px solid var(--a); }
/* retro */
[data-bg="retro"] .backdrop > .fx, .stylecard[data-bgfx="retro"] .sc-prev > .fx, .portal.hero-bf > .fx, .vsplash[data-sfx="retro"] > .fx { display: block; }
[data-bg="retro"] .backdrop > .f1, .stylecard[data-bgfx="retro"] .sc-prev > .f1, .portal.hero-bf > .f1, .vsplash[data-sfx="retro"] > .f1 { inset:auto -50% 0 -50%;height:46%;background-image:linear-gradient(var(--a) 2px,transparent 2px),linear-gradient(90deg,var(--a) 2px,transparent 2px);background-size:48px 48px;transform:perspective(260px) rotateX(62deg);transform-origin:50% 100%;opacity:.45;-webkit-mask:linear-gradient(to top,#000 25%,transparent);mask:linear-gradient(to top,#000 25%,transparent);animation:fx-retro 1.4s linear infinite; }
[data-bg="retro"] .backdrop > .f2, .stylecard[data-bgfx="retro"] .sc-prev > .f2, .portal.hero-bf > .f2, .vsplash[data-sfx="retro"] > .f2 { inset:auto;left:25%;width:50%;aspect-ratio:1;bottom:40%;border-radius:50%;background:linear-gradient(var(--a2),var(--a));opacity:.6;-webkit-mask:linear-gradient(#000 52%,transparent 52% 57%,#000 57% 66%,transparent 66% 71%,#000 71% 79%,transparent 79% 85%,#000 85%);mask:linear-gradient(#000 52%,transparent 52% 57%,#000 57% 66%,transparent 66% 71%,#000 71% 79%,transparent 79% 85%,#000 85%);animation:fx-sun 5s ease-in-out infinite alternate; }
/* clouds */
[data-bg="clouds"] .backdrop > .fx, .stylecard[data-bgfx="clouds"] .sc-prev > .fx, .portal.hero-ay > .fx, .vsplash[data-sfx="clouds"] > .fx { display: block; }
[data-bg="clouds"] .backdrop > .f1, .stylecard[data-bgfx="clouds"] .sc-prev > .f1, .portal.hero-ay > .f1, .vsplash[data-sfx="clouds"] > .f1 { inset:0 -600px 0 0;background:var(--fxc,var(--a));opacity:var(--fxo,.16);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='260' viewBox='0 0 600 260'%3E%3Cg transform='translate(20 30) scale(1.2)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3Cg transform='translate(340 120) scale(0.9)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E") 0 0/600px 260px repeat;animation:fx-cloud1 70s linear infinite; }
[data-bg="clouds"] .backdrop > .f2, .stylecard[data-bgfx="clouds"] .sc-prev > .f2, .portal.hero-ay > .f2, .vsplash[data-sfx="clouds"] > .f2 { inset:12% -420px 0 0;background:var(--fxc,var(--a));opacity:calc(var(--fxo,.16) * .7);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='240' viewBox='0 0 420 240'%3E%3Cg transform='translate(60 110) scale(0.7)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3Cg transform='translate(280 20) scale(0.55)' fill='%23fff'%3E%3Ccircle cx='40' cy='40' r='24'/%3E%3Ccircle cx='72' cy='30' r='32'/%3E%3Ccircle cx='106' cy='44' r='22'/%3E%3Crect x='20' y='40' width='110' height='26' rx='13'/%3E%3C/g%3E%3C/svg%3E") 0 0/420px 240px repeat;animation:fx-cloud2 45s linear infinite; }
/* prism */
[data-bg="prism"] .backdrop > .fx, .stylecard[data-bgfx="prism"] .sc-prev > .fx, .portal.hero-bj > .fx, .vsplash[data-sfx="prism"] > .fx { display: block; }
[data-bg="prism"] .backdrop > .f1, .stylecard[data-bgfx="prism"] .sc-prev > .f1, .portal.hero-bj > .f1, .vsplash[data-sfx="prism"] > .f1 { inset:0 -100% 0 0;background:linear-gradient(90deg,#f472b650,#facc1550,#22d3ee50,#a78bfa50,#f472b650,#facc1550,#22d3ee50,#a78bfa50,#f472b650);opacity:.9;animation:fx-slide 16s linear infinite; }
[data-bg="prism"] .backdrop > .f2, .stylecard[data-bgfx="prism"] .sc-prev > .f2, .portal.hero-bj > .f2, .vsplash[data-sfx="prism"] > .f2 { inset:-20% -60% -20% 0;background:repeating-linear-gradient(115deg,transparent 0 60px,#ffffff66 60px 64px,transparent 64px 140px);animation:fx-glide 12s ease-in-out infinite alternate; }
/* plasma */
[data-bg="plasma"] .backdrop > .fx, .stylecard[data-bgfx="plasma"] .sc-prev > .fx, .portal.hero-bd > .fx, .vsplash[data-sfx="plasma"] > .fx { display: block; }
[data-bg="plasma"] .backdrop > .f1, .stylecard[data-bgfx="plasma"] .sc-prev > .f1, .portal.hero-bd > .f1, .vsplash[data-sfx="plasma"] > .f1 { inset:-50%;background:conic-gradient(from 0deg,var(--a-45),transparent 20%,var(--a2-45) 40%,transparent 60%,#22d3ee55 80%,var(--a-45));-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);animation:fx-spin 14s linear infinite; }
[data-bg="plasma"] .backdrop > .f2, .stylecard[data-bgfx="plasma"] .sc-prev > .f2, .portal.hero-bd > .f2, .vsplash[data-sfx="plasma"] > .f2 { inset:-50%;opacity:.7;background:conic-gradient(from 90deg,transparent,var(--a2-45) 25%,transparent 50%,var(--a-45) 75%,transparent);-webkit-mask:radial-gradient(closest-side,#000,transparent 80%);mask:radial-gradient(closest-side,#000,transparent 80%);animation:fx-spin 20s linear infinite reverse; }
/* beams */
[data-bg="beams"] .backdrop > .fx, .stylecard[data-bgfx="beams"] .sc-prev > .fx, .portal.hero-bh > .fx, .vsplash[data-sfx="beams"] > .fx { display: block; }
[data-bg="beams"] .backdrop > .f1, .stylecard[data-bgfx="beams"] .sc-prev > .f1, .portal.hero-bh > .f1, .vsplash[data-sfx="beams"] > .f1 { inset:auto;bottom:-10%;width:70%;height:170%;clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);transform-origin:50% 100%;opacity:.4;left:-8%;background:linear-gradient(to top,var(--a),transparent 85%);animation:fx-beam 7s ease-in-out infinite alternate; }
[data-bg="beams"] .backdrop > .f2, .stylecard[data-bgfx="beams"] .sc-prev > .f2, .portal.hero-bh > .f2, .vsplash[data-sfx="beams"] > .f2 { inset:auto;bottom:-10%;width:70%;height:170%;clip-path:polygon(46% 100%,54% 100%,100% 0,0 0);transform-origin:50% 100%;opacity:.4;right:-8%;background:linear-gradient(to top,var(--a2),transparent 85%);animation:fx-beam 7s ease-in-out -3.5s infinite alternate-reverse; }
/* embers */
[data-bg="embers"] .backdrop > .fx, .stylecard[data-bgfx="embers"] .sc-prev > .fx, .portal.hero-av > .fx, .vsplash[data-sfx="embers"] > .fx { display: block; }
[data-bg="embers"] .backdrop > .f1, .stylecard[data-bgfx="embers"] .sc-prev > .f1, .portal.hero-av > .f1, .vsplash[data-sfx="embers"] > .f1 { inset:0 0 -180px 0;background:linear-gradient(#fde68a,#fb923c,#ef4444);opacity:.85;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Ccircle cx='20' cy='30' r='1.6' fill='%23fff'/%3E%3Ccircle cx='70' cy='110' r='2.2' fill='%23fff'/%3E%3Ccircle cx='120' cy='50' r='1.4' fill='%23fff'/%3E%3Ccircle cx='160' cy='150' r='2' fill='%23fff'/%3E%3Ccircle cx='40' cy='160' r='1.2' fill='%23fff'/%3E%3Ccircle cx='140' cy='100' r='1.1' fill='%23fff'/%3E%3Ccircle cx='95' cy='170' r='1.7' fill='%23fff'/%3E%3C/svg%3E") 0 0/180px 180px repeat;animation:fx-emb1 6s linear infinite; }
[data-bg="embers"] .backdrop > .f2, .stylecard[data-bgfx="embers"] .sc-prev > .f2, .portal.hero-av > .f2, .vsplash[data-sfx="embers"] > .f2 { inset:0 0 -260px -260px;background:linear-gradient(#fef3c7,var(--a));opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='40' cy='60' r='2.6' fill='%23fff'/%3E%3Ccircle cx='180' cy='30' r='1.8' fill='%23fff'/%3E%3Ccircle cx='220' cy='190' r='3' fill='%23fff'/%3E%3Ccircle cx='100' cy='210' r='2' fill='%23fff'/%3E%3Ccircle cx='140' cy='120' r='1.5' fill='%23fff'/%3E%3C/svg%3E") 0 0/260px 260px repeat;animation:fx-emb2 10s linear infinite; }
[data-bg="embers"] .backdrop > .f2::before, .stylecard[data-bgfx="embers"] .sc-prev > .f2::before, .portal.hero-av > .f2::before, .vsplash[data-sfx="embers"] > .f2::before { content:'';inset:auto 0 0 0;height:40%;background:radial-gradient(60% 100% at 50% 100%,#fb923c55,transparent); }
/* caustics */
[data-bg="caustics"] .backdrop > .fx, .stylecard[data-bgfx="caustics"] .sc-prev > .fx, .portal.hero-bk > .fx, .vsplash[data-sfx="caustics"] > .fx { display: block; }
[data-bg="caustics"] .backdrop > .f1, .stylecard[data-bgfx="caustics"] .sc-prev > .f1, .portal.hero-bk > .f1, .vsplash[data-sfx="caustics"] > .f1 { inset:-240px 0 0 -240px;background:var(--fxc,#fff);opacity:var(--fxo,.16);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 60 Q60 20 120 60 T240 60 M0 180 Q60 140 120 180 T240 180 M60 0 Q20 60 60 120 T60 240 M180 0 Q140 60 180 120 T180 240' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/240px 240px repeat;animation:fx-caus1 20s linear infinite; }
[data-bg="caustics"] .backdrop > .f2, .stylecard[data-bgfx="caustics"] .sc-prev > .f2, .portal.hero-bk > .f2, .vsplash[data-sfx="caustics"] > .f2 { inset:0 -300px -300px 0;background:var(--a2);opacity:.18;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cpath d='M0 60 Q60 20 120 60 T240 60 M0 180 Q60 140 120 180 T240 180 M60 0 Q20 60 60 120 T60 240 M180 0 Q140 60 180 120 T180 240' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/300px 300px repeat;animation:fx-caus2 26s linear infinite; }
/* meteors */
[data-bg="meteors"] .backdrop > .fx, .stylecard[data-bgfx="meteors"] .sc-prev > .fx, .portal.hero-bc > .fx, .vsplash[data-sfx="meteors"] > .fx { display: block; }
[data-bg="meteors"] .backdrop > .f1, .stylecard[data-bgfx="meteors"] .sc-prev > .f1, .portal.hero-bc > .f1, .vsplash[data-sfx="meteors"] > .f1 { inset:-420px -420px 0 0;background:#fff;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3ClinearGradient id='m0' gradientUnits='userSpaceOnUse' x1='300' y1='40' x2='230' y2='110'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' gradientUnits='userSpaceOnUse' x1='140' y1='200' x2='90' y2='250'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' gradientUnits='userSpaceOnUse' x1='400' y1='260' x2='340' y2='320'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='300' y1='40' x2='230' y2='110' stroke='url(%23m0)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='140' y1='200' x2='90' y2='250' stroke='url(%23m1)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='400' y1='260' x2='340' y2='320' stroke='url(%23m2)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/420px 420px repeat;animation:fx-met1 3.5s linear infinite; }
[data-bg="meteors"] .backdrop > .f2, .stylecard[data-bgfx="meteors"] .sc-prev > .f2, .portal.hero-bc > .f2, .vsplash[data-sfx="meteors"] > .f2 { inset:-560px -560px 0 0;background:var(--a2);opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cdefs%3E%3ClinearGradient id='m0' gradientUnits='userSpaceOnUse' x1='200' y1='80' x2='110' y2='170'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' gradientUnits='userSpaceOnUse' x1='500' y1='330' x2='430' y2='400'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cline x1='200' y1='80' x2='110' y2='170' stroke='url(%23m0)' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='500' y1='330' x2='430' y2='400' stroke='url(%23m1)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/560px 560px repeat;animation:fx-met2 5.5s linear infinite; }
/* hexpulse */
[data-bg="hexpulse"] .backdrop > .fx, .stylecard[data-bgfx="hexpulse"] .sc-prev > .fx, .portal.hero-bg > .fx, .vsplash[data-sfx="hexpulse"] > .fx { display: block; }
[data-bg="hexpulse"] .backdrop > .f1, .stylecard[data-bgfx="hexpulse"] .sc-prev > .f1, .portal.hero-bg > .f1, .vsplash[data-sfx="hexpulse"] > .f1 { background:var(--a);opacity:.14;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpolygon points='40.00,17.32 30.00,34.64 10.00,34.64 0.00,17.32 10.00,0.00 30.00,0.00' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,0.00 60.00,17.32 40.00,17.32 30.00,0.00 40.00,-17.32 60.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,34.64 60.00,51.96 40.00,51.96 30.00,34.64 40.00,17.32 60.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,0.00 0.00,17.32 -20.00,17.32 -30.00,0.00 -20.00,-17.32 0.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,34.64 0.00,51.96 -20.00,51.96 -30.00,34.64 -20.00,17.32 0.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/60px 34.64px repeat; }
[data-bg="hexpulse"] .backdrop > .f2, .stylecard[data-bgfx="hexpulse"] .sc-prev > .f2, .portal.hero-bg > .f2, .vsplash[data-sfx="hexpulse"] > .f2 { background:radial-gradient(closest-side,var(--a),transparent) no-repeat;background-size:55% 55%;opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpolygon points='40.00,17.32 30.00,34.64 10.00,34.64 0.00,17.32 10.00,0.00 30.00,0.00' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,0.00 60.00,17.32 40.00,17.32 30.00,0.00 40.00,-17.32 60.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='70.00,34.64 60.00,51.96 40.00,51.96 30.00,34.64 40.00,17.32 60.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,0.00 0.00,17.32 -20.00,17.32 -30.00,0.00 -20.00,-17.32 0.00,-17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='10.00,34.64 0.00,51.96 -20.00,51.96 -30.00,34.64 -20.00,17.32 0.00,17.32' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/60px 34.64px repeat;animation:fx-hex 9s ease-in-out infinite alternate; }
/* twinkle */
[data-bg="twinkle"] .backdrop > .fx, .stylecard[data-bgfx="twinkle"] .sc-prev > .fx, .portal.hero-bl > .fx, .vsplash[data-sfx="twinkle"] > .fx { display: block; }
[data-bg="twinkle"] .backdrop > .f1, .stylecard[data-bgfx="twinkle"] .sc-prev > .f1, .portal.hero-bl > .f1, .vsplash[data-sfx="twinkle"] > .f1 { background:radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),radial-gradient(1px 1px at 35% 70%, #fff, transparent),radial-gradient(1.3px 1.3px at 60% 15%, #fff, transparent),radial-gradient(1px 1px at 80% 55%, #fff, transparent),radial-gradient(1px 1px at 25% 45%, #fff, transparent),radial-gradient(1.6px 1.6px at 90% 85%, #fff, transparent),radial-gradient(1px 1px at 50% 90%, #fff, transparent),radial-gradient(1.2px 1.2px at 70% 35%, #fff, transparent);background-size:240px 240px;animation:fx-blink 2.4s ease-in-out infinite alternate; }
[data-bg="twinkle"] .backdrop > .f2, .stylecard[data-bgfx="twinkle"] .sc-prev > .f2, .portal.hero-bl > .f2, .vsplash[data-sfx="twinkle"] > .f2 { background:radial-gradient(1.2px 1.2px at 15% 80%, #fff, transparent),radial-gradient(1.6px 1.6px at 45% 30%, #fff, transparent),radial-gradient(1px 1px at 75% 75%, #fff, transparent),radial-gradient(1.3px 1.3px at 95% 10%, #fff, transparent),radial-gradient(1px 1px at 5% 55%, #fff, transparent),radial-gradient(1.4px 1.4px at 60% 60%, #fff, transparent);background-size:320px 320px;animation:fx-blink 3.6s ease-in-out -1.2s infinite alternate; }
[data-bg="twinkle"] .backdrop > .f2::before, .stylecard[data-bgfx="twinkle"] .sc-prev > .f2::before, .portal.hero-bl > .f2::before, .vsplash[data-sfx="twinkle"] > .f2::before { content:'';inset:0;background:radial-gradient(2.2px 2.2px at 20% 30%, var(--a2), transparent),radial-gradient(2.6px 2.6px at 70% 70%, var(--a2), transparent),radial-gradient(2px 2px at 85% 20%, var(--a2), transparent);background-size:420px 420px;animation:fx-blink 5s ease-in-out -2s infinite alternate-reverse; }
/* curtains */
[data-bg="curtains"] .backdrop > .fx, .stylecard[data-bgfx="curtains"] .sc-prev > .fx, .portal.hero-ba > .fx, .vsplash[data-sfx="curtains"] > .fx { display: block; }
[data-bg="curtains"] .backdrop > .f1, .stylecard[data-bgfx="curtains"] .sc-prev > .f1, .portal.hero-ba > .f1, .vsplash[data-sfx="curtains"] > .f1 { inset:0 -100% 25% 0;background:repeating-linear-gradient(90deg,transparent 0,var(--a-45) 8%,transparent 16%,var(--a2-45) 28%,transparent 40%,transparent 50%);-webkit-mask:linear-gradient(to bottom,transparent,#000 22%,#000 42%,transparent 92%);mask:linear-gradient(to bottom,transparent,#000 22%,#000 42%,transparent 92%);animation:fx-slide 30s linear infinite; }
[data-bg="curtains"] .backdrop > .f2, .stylecard[data-bgfx="curtains"] .sc-prev > .f2, .portal.hero-ba > .f2, .vsplash[data-sfx="curtains"] > .f2 { inset:-10% -30% 35% -30%;opacity:.6;background:repeating-linear-gradient(90deg,transparent 0,var(--a2-45) 6%,transparent 13%,var(--a-30) 20%,transparent 30%);-webkit-mask:linear-gradient(to bottom,transparent,#000 30%,transparent 90%);mask:linear-gradient(to bottom,transparent,#000 30%,transparent 90%);animation:fx-sway 9s ease-in-out infinite alternate; }
/* circuit */
[data-bg="circuit"] .backdrop > .fx, .stylecard[data-bgfx="circuit"] .sc-prev > .fx, .portal.hero-az > .fx, .vsplash[data-sfx="circuit"] > .fx { display: block; }
[data-bg="circuit"] .backdrop > .f1, .stylecard[data-bgfx="circuit"] .sc-prev > .f1, .portal.hero-az > .f1, .vsplash[data-sfx="circuit"] > .f1 { background:var(--a);opacity:.2;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 40 H50 L70 60 H110 V120 H160 M40 160 V110 L60 90 H90 M130 0 V30 L150 50 H160 M0 130 H20 L30 120'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='110' cy='60' r='3.5'/%3E%3Ccircle cx='90' cy='90' r='3.5'/%3E%3Ccircle cx='30' cy='120' r='3'/%3E%3Ccircle cx='150' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px repeat; }
[data-bg="circuit"] .backdrop > .f2, .stylecard[data-bgfx="circuit"] .sc-prev > .f2, .portal.hero-az > .f2, .vsplash[data-sfx="circuit"] > .f2 { background:linear-gradient(to bottom,transparent 0 42%,var(--a2) 48%,#fff 50%,var(--a2) 52%,transparent 58% 100%);background-size:100% 300%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M0 40 H50 L70 60 H110 V120 H160 M40 160 V110 L60 90 H90 M130 0 V30 L150 50 H160 M0 130 H20 L30 120'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='110' cy='60' r='3.5'/%3E%3Ccircle cx='90' cy='90' r='3.5'/%3E%3Ccircle cx='30' cy='120' r='3'/%3E%3Ccircle cx='150' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px repeat;animation:fx-circ 4s linear infinite; }
/* silk */
[data-bg="silk"] .backdrop > .fx, .stylecard[data-bgfx="silk"] .sc-prev > .fx, .portal.hero-bi > .fx, .vsplash[data-sfx="silk"] > .fx { display: block; }
[data-bg="silk"] .backdrop > .f1, .stylecard[data-bgfx="silk"] .sc-prev > .f1, .portal.hero-bi > .f1, .vsplash[data-sfx="silk"] > .f1 { inset:-60%;background:linear-gradient(115deg,transparent 36%,var(--a-30) 45%,var(--a2-20) 52%,transparent 62%);animation:fx-silk1 14s ease-in-out infinite alternate; }
[data-bg="silk"] .backdrop > .f2, .stylecard[data-bgfx="silk"] .sc-prev > .f2, .portal.hero-bi > .f2, .vsplash[data-sfx="silk"] > .f2 { inset:-60%;background:linear-gradient(70deg,transparent 40%,var(--a2-20) 48%,var(--a-20) 54%,transparent 64%);animation:fx-silk2 18s ease-in-out infinite alternate; }
/* snow */
.portal.hero-au > .fx, .vsplash[data-sfx="snow"] > .fx { display: block; }
.portal.hero-au > .f1, .vsplash[data-sfx="snow"] > .f1 { inset:-200px 0 0 0;background:var(--snow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='20' cy='30' r='2.2' fill='%23fff'/%3E%3Ccircle cx='90' cy='120' r='1.6' fill='%23fff'/%3E%3Ccircle cx='150' cy='60' r='2.8' fill='%23fff'/%3E%3Ccircle cx='60' cy='170' r='1.3' fill='%23fff'/%3E%3Ccircle cx='175' cy='185' r='2' fill='%23fff'/%3E%3Ccircle cx='120' cy='10' r='1.2' fill='%23fff'/%3E%3C/svg%3E") 0 0/200px 200px repeat;animation:fx-snow1 10s linear infinite; }
.portal.hero-au > .f2, .vsplash[data-sfx="snow"] > .f2 { inset:-300px 0 0 0;background:var(--snow);opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='40' cy='60' r='3.4' fill='%23fff'/%3E%3Ccircle cx='200' cy='30' r='2.6' fill='%23fff'/%3E%3Ccircle cx='260' cy='200' r='3.8' fill='%23fff'/%3E%3Ccircle cx='120' cy='240' r='2.4' fill='%23fff'/%3E%3C/svg%3E") 90px 0/300px 300px repeat;animation:fx-snow2 16s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-blink { from { opacity: .25; } to { opacity: 1; } }
@keyframes fx-rain1 { to { transform: translateY(160px); } }
@keyframes fx-rain2 { to { transform: translateY(220px); } }
@keyframes fx-bub1 { to { transform: translateY(-240px); } }
@keyframes fx-bub2 { to { transform: translateY(-360px); } }
@keyframes fx-wander { 0% { transform: translate(0,0); } 33% { transform: translate(24px,-30px); } 66% { transform: translate(-18px,-12px); } 100% { transform: translate(10px,-40px); } }
@keyframes fx-wave1 { to { transform: translateX(-400px); } }
@keyframes fx-wave2 { to { transform: translateX(300px); } }
@keyframes fx-mat1 { to { transform: translateY(320px); } }
@keyframes fx-mat2 { to { transform: translateY(460px); } }
@keyframes fx-lava1 { 0% { top: 85%; transform: scale(1); } 50% { transform: scale(.8,1.1); } 100% { top: -30%; transform: scale(1.1); } }
@keyframes fx-lava2 { 0% { top: -25%; transform: scale(1); } 50% { transform: scale(1.15,.9); } 100% { top: 80%; transform: scale(.9); } }
@keyframes fx-warp { 0% { transform: scale(.35); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fx-conf1 { to { transform: translateY(240px); } }
@keyframes fx-conf2 { to { transform: translate(320px,320px); } }
@keyframes fx-pet1 { to { transform: translate(-260px,260px); } }
@keyframes fx-pet2 { to { transform: translate(-360px,360px); } }
@keyframes fx-leaf1 { to { transform: translate(-300px,300px); } }
@keyframes fx-leaf2 { to { transform: translate(-420px,420px); } }
@keyframes fx-ring { 0% { transform: scale(.08); opacity: .9; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes fx-retro { to { background-position: 0 48px, 0 48px; } }
@keyframes fx-sun { to { opacity: .8; transform: translateY(-4%); } }
@keyframes fx-cloud1 { to { transform: translateX(-600px); } }
@keyframes fx-cloud2 { to { transform: translateX(-420px); } }
@keyframes fx-slide { to { transform: translateX(-50%); } }
@keyframes fx-glide { to { transform: translateX(-30%); } }
@keyframes fx-beam { from { transform: rotate(-26deg); } to { transform: rotate(22deg); } }
@keyframes fx-emb1 { to { transform: translateY(-180px); } }
@keyframes fx-emb2 { to { transform: translate(260px,-260px); } }
@keyframes fx-caus1 { to { transform: translate(240px,240px); } }
@keyframes fx-caus2 { to { transform: translate(-300px,-300px); } }
@keyframes fx-met1 { to { transform: translate(-420px,420px); } }
@keyframes fx-met2 { to { transform: translate(-560px,560px); } }
@keyframes fx-hex { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 20% 100%; } }
@keyframes fx-sway { from { transform: skewX(-10deg) translateX(0); } to { transform: skewX(10deg) translateX(-12%); } }
@keyframes fx-circ { from { background-position: 0 100%; } to { background-position: 0 0%; } }
@keyframes fx-silk1 { from { transform: rotate(-6deg) translate(-8%,0); } to { transform: rotate(6deg) translate(8%,4%); } }
@keyframes fx-silk2 { from { transform: rotate(5deg) translate(6%,-3%); } to { transform: rotate(-7deg) translate(-8%,3%); } }
@keyframes fx-snow1 { to { transform: translateY(200px); } }
@keyframes fx-snow2 { to { transform: translateY(300px); } }
@media (prefers-reduced-motion: reduce) { .fx, .fx::before, .fx::after { animation: none !important; } }

/* ===== 2.8.40: style previews, colours per place ===== */
.stylecard .sc-prev > :not(.fx) { position: relative; z-index: 1; }
.pill.movetag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 1px 7px; vertical-align: middle;
  color: var(--a2, #ff4fd8); border: 1px solid var(--a-45); background: var(--a-12); border-radius: 999px; letter-spacing: .02em; }
.pill.movetag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: mv-dot 1.4s ease-in-out infinite; }
@keyframes mv-dot { 50% { opacity: .25; transform: scale(.6); } }
.stylecard .sc-meta .movetag { display: inline-flex; margin-left: 4px; font-size: 9.5px; }
[data-bg="clouds"] .backdrop, .stylecard[data-bgfx="clouds"] .sc-prev, .vsplash[data-sfx="clouds"] { --fxc: #fff; --fxo: .85; }
[data-bg="caustics"] .backdrop, .stylecard[data-bgfx="caustics"] .sc-prev { --fxc: #fff; --fxo: .8; }
[data-bg="clouds"] .backdrop { background: linear-gradient(#bcd8ff, transparent 70%); }
[data-bg="retro"] .backdrop::after, [data-bg="beams"] .backdrop::after, [data-bg="matrix"] .backdrop::before, [data-bg="matrix"] .backdrop::after { display: none; }
[data-bg="rain"] .backdrop::before, [data-bg="meteors"] .backdrop::before { opacity: .3; }
.stylecard .sc-prev > .fx.f1, .stylecard .sc-prev > .fx.f2 { zoom: .6; }
[data-bg="waves"] .backdrop > .f1 { height: 24vh; } [data-bg="waves"] .backdrop > .f2 { height: 17vh; }
[data-bg="beams"] .backdrop > .fx { opacity: .55; }
.vsplash[data-sfx="retro"] > .f1 { height: 32%; } .vsplash[data-sfx="retro"] > .f2 { bottom: 9%; left: 22%; width: 56%; }
.vsplash[data-sfx="waves"] > .f1 { height: 180px; } .vsplash[data-sfx="waves"] > .f2 { height: 130px; }
.hero-al .chips.mini .status, .hero-al .chips.mini .pill { background: #0000002e; border-color: #ffffff40; color: #fff; }

/* ===== 2.8.40: 25 more home cards (12 still, 13 moving) ===== */
.portal > .fx { border-radius: inherit; }
/* shapes shared by several */
.hero-an .hero, .hero-aq .hero, .hero-as .hero, .hero-au .hero, .hero-aw .hero, .hero-ag .hero, .hero-ak .hero {
  grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-an .hero > .toprow, .hero-aq .hero > .toprow, .hero-as .hero > .toprow, .hero-au .hero > .toprow, .hero-aw .hero > .toprow, .hero-ag .hero > .toprow, .hero-ak .hero > .toprow { justify-self: stretch; }
.hero-an .hero > .chips, .hero-aq .hero > .chips, .hero-as .hero > .chips, .hero-au .hero > .chips, .hero-aw .hero > .chips, .hero-ag .hero > .chips, .hero-ak .hero > .chips { justify-content: center; }
.hero-am .hero, .hero-ao .hero, .hero-ax .hero, .hero-ah .hero, .hero-ae .hero, .hero-ac .hero {
  grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-am .orb.s104, .hero-ao .orb.s104, .hero-ax .orb.s104, .hero-ah .orb.s104, .hero-ae .orb.s104 { --s: 72px; }
.hero-am .hero > .who, .hero-ao .hero > .who, .hero-ax .hero > .who, .hero-ah .hero > .who, .hero-ae .hero > .who, .hero-ac .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; }
.hero-am .hero > .chips, .hero-ao .hero > .chips, .hero-ax .hero > .chips, .hero-ah .hero > .chips, .hero-ae .hero > .chips, .hero-ac .hero > .chips { align-self: start; }

/* AA ticket stub: perforated line with notches, quick stats underneath */
.hero-aa .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "stats stats"; }
.hero-aa .orb.s104 { --s: 70px; }
.hero-aa .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; } .hero-aa .hero > .chips { align-self: start; }
.hero-aa .hero > .welcome { display: none; }
.hero-aa .hero > .h-stats { display: grid; position: relative; margin-top: 6px; padding-top: 16px; border-top: 2px dashed var(--line-2); }
.hero-aa .hero > .h-stats::before, .hero-aa .hero > .h-stats::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); }
.hero-aa .hero > .h-stats::before { left: -33px; } .hero-aa .hero > .h-stats::after { right: -33px; }
@media (min-width: 640px) { .hero-aa .hero > .h-stats::before { left: -41px; } .hero-aa .hero > .h-stats::after { right: -41px; } }

/* AB split colour: a coloured panel down the left holding the logo */
.hero-ab .hero-cover { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 128px; background: var(--grad); }
.hero-ab .hero-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, #ffffff40, transparent 60%); }
.hero-ab .hero { grid-template-columns: 92px 1fr; grid-template-areas: "logo top" "logo name" "logo chips" "logo text"; column-gap: 32px; }
.hero-ab .hero > .h-logo { align-self: center; justify-content: center; }
.hero-ab .orb.s104 { --s: 80px; } .hero-ab .orb .halo { display: none; }
.hero-ab .orb .ball { box-shadow: 0 0 0 4px #ffffff55, 0 12px 28px #0006; }
.hero-ab .hero > .who { font-size: clamp(24px, 7vw, 36px); }

/* AC polaroid: logo in a white photo frame, slightly tilted */
.hero-ac .h-logo { padding: 8px 8px 24px; background: #fff; border-radius: 4px; transform: rotate(-5deg); box-shadow: 0 14px 30px -8px #000a; }
.hero-ac .orb.s104 { --s: 70px; } .hero-ac .orb .halo { display: none; }
.hero-ac .orb .ball { border-radius: 2px; }

/* AD ID badge: coloured band on top, square logo and a barcode */
.hero-ad .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 58px; background: var(--grad); }
.hero-ad::after { content: ""; position: absolute; right: 20px; bottom: 18px; width: 86px; height: 26px; opacity: .35; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 8px, var(--fg) 8px 11px, transparent 11px 13px); }
.hero-ad .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "logo line"; row-gap: 8px; }
.hero-ad .hero > .toprow .kicker { color: #fff; }
.hero-ad .hero > .h-logo { margin-top: 8px; }
.hero-ad .orb.s104 { --s: 84px; } .hero-ad .orb .halo { display: none; }
.hero-ad .orb .ball { border-radius: 18px; box-shadow: 0 0 0 4px var(--solid), var(--glow); }
.hero-ad .hero > .who { font-size: clamp(22px, 6.5vw, 32px); align-self: end; }
.hero-ad .hero > .chips { align-self: start; }
.hero-ad .hero > .welcome { display: none; } .hero-ad .hero > .h-line { display: block; padding-right: 96px; }

/* AE frosted banner: soft colour clouds across the top */
.hero-ae .hero-cover { display: block; position: absolute; left: -10%; right: -10%; top: -40px; height: 150px; filter: blur(22px); opacity: .85;
  background: radial-gradient(40% 60% at 20% 50%, var(--a-60), transparent 70%), radial-gradient(40% 60% at 70% 40%, var(--a2-45), transparent 70%), radial-gradient(30% 50% at 95% 70%, #22d3ee44, transparent 70%); }

/* AF corner logo: huge name at the bottom, small logo top right, stripes */
.hero-af { min-height: 270px; display: flex; }
.hero-af .hero-cover { display: block; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--a-6) 0 14px, transparent 14px 28px); }
.hero-af .hero { width: 100%; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "top top" "text logo" ". ." "name name" "chips chips"; }
.hero-af .orb.s104 { --s: 56px; } .hero-af .hero > .h-logo { align-self: start; }
.hero-af .hero > .who { font-size: clamp(40px, 13vw, 68px); line-height: .95; }
.hero-af .hero > .welcome { font-size: 13px; }

/* AG outline: just a bold accent border */
.portal.hero-ag { background: transparent; border: 2px solid var(--a); box-shadow: 0 0 0 5px var(--a-12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-ag .bloom { display: none; }
.hero-ag .orb.s104 { --s: 84px; }

/* AH dotted: a dot grid fading out to the right */
.hero-ah .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(var(--a-45) 1.3px, transparent 1.8px) 0 0 / 16px 16px;
  -webkit-mask: linear-gradient(100deg, #000 10%, transparent 75%); mask: linear-gradient(100deg, #000 10%, transparent 75%); }

/* AI diagonal slice of colour behind the logo */
.hero-ai .hero-cover { display: block; position: absolute; inset: 0; background: var(--grad); opacity: .5; clip-path: polygon(0 0, 58% 0, 30% 100%, 0 100%); }
.hero-ai .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-ai .orb.s104 { --s: 80px; }
.hero-ai .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; } .hero-ai .hero > .chips { align-self: start; }

/* AJ stats first */
.hero-aj .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "stats stats" "logo name" "logo chips"; }
.hero-aj .hero > .h-stats { display: grid; margin-bottom: 4px; }
.hero-aj .hero > .welcome { display: none; }
.hero-aj .orb.s104 { --s: 60px; }
.hero-aj .hero > .who { font-size: clamp(22px, 6.5vw, 32px); align-self: end; } .hero-aj .hero > .chips { align-self: start; }

/* AK target rings around the logo */
.hero-ak .hero-cover { display: block; position: absolute; left: 50%; top: 118px; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 30px, var(--a-30) 31px 32px, transparent 33px 44px);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); }
.hero-ak .orb.s104 { --s: 96px; }

/* AL bold colour: the whole card in the accent colour */
.portal.hero-al { background: var(--grad); border-color: transparent; }
.hero-al .bloom { opacity: .5; background: radial-gradient(closest-side, #ffffff55, transparent); }
.hero-al .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; }
.hero-al .orb.s104 { --s: 70px; }
.hero-al .who.gtext { background: none; color: #fff; -webkit-text-fill-color: #fff; filter: drop-shadow(0 2px 10px #0004); }
.hero-al .kicker, .hero-al .welcome { color: #ffffffd9; }
.hero-al .h-st { background: #ffffff22; border-color: #ffffff33; }

/* AM rain / AN fireflies / AO lava / AP code / AQ confetti / AR blossom / AU snow / AV embers / AW warp / AY clouds: backgrounds from .fx */
.hero-am .hero-cover, .hero-ap .hero-cover { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(var(--panel), .5)); }
.hero-ap .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "text text"; }
.hero-ap .orb.s104 { --s: 66px; }
.hero-ap .hero > .who { font-family: "JetBrains Mono", var(--mono); letter-spacing: -.02em; font-size: clamp(24px, 7vw, 36px); }
.hero-an .orb.s104, .hero-aq .orb.s104, .hero-au .orb.s104, .hero-aw .orb.s104 { --s: 96px; }
.hero-ar .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }
.hero-ar .orb.s104 { --s: 72px; }
.hero-av .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-av .hero > .who { font-size: clamp(38px, 12vw, 64px); line-height: 1; }
.hero-av .orb.s104 { --s: 64px; }
.hero-ay .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-ay .orb.s104 { --s: 66px; } .hero-ay .hero > .h-stats { display: grid; }
.hero-ay .hero > .who { font-size: clamp(26px, 8vw, 40px); }
.portal.hero-ay > .fx.f1 { top: 10px; } .portal.hero-ay > .fx.f2 { top: 40%; }
.portal.hero-au > .fx { opacity: .9; }
.portal.hero-av > .fx.f2::before { height: 55%; }

/* AS radar: a sweep turning around the logo */
.hero-as .hero-cover { display: block; position: absolute; left: 50%; top: 122px; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a-60), transparent 22%, transparent); animation: fx-spin 4s linear infinite;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.hero-as .hero-cover::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 44px, var(--a-30) 45px 46px, transparent 47px 60px); animation: fx-spin 4s linear infinite reverse; }
.hero-as .orb.s104 { --s: 92px; }

/* AT equaliser: bars bouncing along the bottom */
.hero-at .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "stats stats"; }
.hero-at .orb.s104 { --s: 70px; }
.hero-at .hero > .who { font-size: clamp(24px, 7vw, 34px); align-self: end; } .hero-at .hero > .chips { align-self: start; }
.hero-at .hero > .welcome { display: none; } .hero-at .hero > .h-stats { display: grid; }
.hero-at .hero-fx { display: block; }
.hero-at .hero-fx i { top: auto !important; bottom: 0; width: 5.2%; height: 64%; border-radius: 6px 6px 0 0; transform-origin: 50% 100%; opacity: .3;
  background: linear-gradient(to top, var(--a), var(--a2, var(--a))); animation: hx-eq 1.1s ease-in-out infinite alternate; }
.hero-at .hero-fx i:nth-child(1) { left: 1% !important; } .hero-at .hero-fx i:nth-child(2) { left: 8% !important; animation-duration: .8s; }
.hero-at .hero-fx i:nth-child(3) { left: 15% !important; animation-duration: 1.3s; } .hero-at .hero-fx i:nth-child(4) { left: 22% !important; animation-duration: .9s; }
.hero-at .hero-fx i:nth-child(5) { left: 29% !important; animation-duration: 1.2s; } .hero-at .hero-fx i:nth-child(6) { left: 36% !important; animation-duration: .7s; }
.hero-at .hero-fx i:nth-child(7) { left: 43% !important; animation-duration: 1s; } .hero-at .hero-fx i:nth-child(8) { left: 50% !important; animation-duration: 1.4s; }
.hero-at .hero-fx i:nth-child(9) { left: 57% !important; animation-duration: .85s; } .hero-at .hero-fx i:nth-child(10) { left: 64% !important; animation-duration: 1.15s; }
.hero-at .hero-fx i:nth-child(11) { left: 71% !important; animation-duration: .75s; } .hero-at .hero-fx i:nth-child(12) { left: 78% !important; animation-duration: 1.25s; }
.hero-at .hero-fx i:nth-child(13) { left: 85% !important; animation-duration: .95s; } .hero-at .hero-fx i:nth-child(14) { left: 92% !important; animation-duration: 1.05s; }
@keyframes hx-eq { from { transform: scaleY(.12); } to { transform: scaleY(1); } }

/* AX spinning border: colour chasing round the edge */
@property --hx-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.portal.hero-ax { border-color: transparent; }
.hero-ax::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--hx-ang), var(--a), var(--a2, #ff4fd8), #22d3ee, var(--a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hx-ang 4s linear infinite; }
@keyframes hx-ang { to { --hx-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hero-at .hero-fx i, .hero-as .hero-cover, .hero-as .hero-cover::after, .hero-ax::before { animation: none !important; } }

/* ===== 2.8.40: 25 app opening screens ===== */
.vsplash > .fx { z-index: 0; }
.vsplash.light .vs-name { background-image: linear-gradient(100deg, #15121f 20%, var(--a) 45%, #15121f 70%); }
.vsplash.light .vs-bar { background: rgba(0,0,0,.1); }
/* backgrounds */
.sp-aurora { background: radial-gradient(120% 80% at 50% 0%, #0a2a30, #031012 60%, #010607); }
.sp-rain { background: linear-gradient(#0c1830, #03060c); }
.sp-underwater { background: radial-gradient(120% 90% at 50% 0%, #0b4a6e, #04253a 55%, #021019); }
.sp-fireflies { background: radial-gradient(120% 90% at 50% 100%, #0f2412, #040a05 70%); }
.sp-ocean { background: linear-gradient(#0c1a4a, #0b3a63 70%, #0e5a86); }
.sp-code { background: #000; }
.sp-lava { background: radial-gradient(100% 70% at 50% 50%, #2a0a12, #0a0204); }
.sp-hyperspace { background: radial-gradient(circle at 50% 50%, #0d0d2e, #02020a 70%); }
.sp-party { background: #fff7fb; }
.sp-blossom { background: linear-gradient(#fff1f6, #ffe4ef); }
.sp-campfire { background: radial-gradient(120% 70% at 50% 110%, #5a1f08, #1a0904 55%, #0b0503); }
.sp-nebula { background: #07041a; }
.sp-sonar { background: radial-gradient(circle at 50% 45%, #06302e, #021414 60%); }
.sp-synthwave { background: linear-gradient(#12031f, #3b0a4a 55%, #1a0633); }
.sp-sky { background: linear-gradient(#93c5fd, #dbeafe 70%, #eff6ff); }
.sp-meteors { background: radial-gradient(120% 80% at 70% 0%, #111836, #03040f 65%); }
.sp-circuit { background: radial-gradient(circle at 50% 45%, #06202a, #02080c 70%); }
.sp-brand { background: var(--grad); }
.sp-brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, #ffffff40, transparent 50%), radial-gradient(circle at 80% 90%, #0003, transparent 60%); }
.sp-brand .vs-name { background-image: linear-gradient(100deg, #fff 30%, #ffffffaa 50%, #fff 70%); }
.sp-brand .vs-bar i { background: #fff; }
.sp-midnight { background: radial-gradient(60% 40% at 50% 45%, var(--a-30), transparent 70%), #07060d; }
.sp-daylight { background: radial-gradient(70% 50% at 50% 40%, var(--a-12), transparent 70%), #fff; }
.sp-sunset { background: linear-gradient(#1e0b3a, #6b1d5c 55%, #e0602a 100%); }
.sp-sunset .vs-art { position: absolute; left: 50%; bottom: -18%; width: 90%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, #ffd27a, #fb923c 60%, transparent 72%); opacity: .9; }
.sp-spotlight { background: #050505; }
.sp-spotlight .vs-art { position: absolute; left: 50%; top: -10%; width: 90%; height: 75%; translate: -50% 0;
  background: linear-gradient(#ffffff38, #ffffff08 85%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(6px); }
.sp-spotlight .vs-art::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, #ffffff2a, transparent); }
.sp-paper { background: #f7f3ea; }
.sp-paper .vs-mid .orb .halo { display: none; }
.sp-frosted { background: radial-gradient(40% 30% at 22% 25%, var(--a-60), transparent 70%), radial-gradient(45% 35% at 80% 75%, var(--a2-45), transparent 70%), #0a0814; }
.sp-frosted .vs-mid { padding: 34px 30px; border-radius: 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 20px 50px -20px #000c; }
/* how the logo arrives */
.vsplash.in-rise .vs-mid .orb { animation: vs-rise 1s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-fade .vs-mid .orb { animation: vs-fadein 1.1s ease both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-drop .vs-mid .orb { animation: vs-drop 1s cubic-bezier(.3,1.5,.5,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-zoom .vs-mid .orb { animation: vs-zoom .9s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-spin .vs-mid .orb { animation: vs-spin 1.1s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
.vsplash.in-flip .vs-mid .orb { animation: vs-flip 1s cubic-bezier(.2,.8,.2,1) both, vs-glow 2.4s 1s ease-in-out infinite; }
@keyframes vs-rise { from { opacity: 0; transform: translateY(60px) scale(.8); } }
@keyframes vs-fadein { from { opacity: 0; transform: scale(.94); } }
@keyframes vs-drop { from { opacity: 0; transform: translateY(-180px); } 60% { opacity: 1; } }
@keyframes vs-zoom { from { opacity: 0; transform: scale(2.4); filter: blur(10px); } }
@keyframes vs-spin { from { opacity: 0; transform: rotate(-360deg) scale(.2); } }
@keyframes vs-flip { from { opacity: 0; transform: perspective(500px) rotateY(100deg); } }
/* small copies for the picker and Branding */
.vsplash.mini { position: absolute; inset: 0; z-index: auto; cursor: inherit; transition: none; }
.sp-frame { position: relative; display: block; width: 360px; height: 640px; overflow: hidden; border-radius: 40px; zoom: .42; pointer-events: none;
  box-shadow: 0 0 0 6px rgba(var(--tint),.12); isolation: isolate; }
.splash-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.splash-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; border: 2px solid var(--line-2); background: rgba(var(--tint),.03); }
.splash-pick.on { border-color: var(--a); box-shadow: var(--glow); }
.splash-pick form { display: block; }
.sp-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.sp-btn .hp-name { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; padding: 2px 4px; font-weight: 700; font-size: 12.5px; }
.cursplash { display: flex; align-items: center; gap: 14px; }
.cursplash .sp-frame { zoom: .3; flex: none; }

/* ===== 2.8.42: 25 more home cards (18 moving, 7 still) ===== */
/* shared shapes */
.hero-bb .hero, .hero-be .hero, .hero-bl .hero, .hero-bn .hero, .hero-bp .hero, .hero-bq .hero, .hero-bw .hero, .hero-bh .hero, .hero-bo .hero, .hero-bt .hero {
  grid-template-columns: 1fr; grid-template-areas: "top" "logo" "name" "chips" "text"; justify-items: center; text-align: center; }
.hero-bb .hero > .toprow, .hero-be .hero > .toprow, .hero-bl .hero > .toprow, .hero-bn .hero > .toprow, .hero-bp .hero > .toprow, .hero-bq .hero > .toprow,
.hero-bw .hero > .toprow, .hero-bh .hero > .toprow, .hero-bo .hero > .toprow, .hero-bt .hero > .toprow { justify-self: stretch; }
.hero-bb .hero > .chips, .hero-be .hero > .chips, .hero-bl .hero > .chips, .hero-bn .hero > .chips, .hero-bp .hero > .chips, .hero-bq .hero > .chips,
.hero-bw .hero > .chips, .hero-bh .hero > .chips, .hero-bo .hero > .chips, .hero-bt .hero > .chips { justify-content: center; }
.hero-bb .orb.s104, .hero-be .orb.s104, .hero-bl .orb.s104, .hero-bn .orb.s104, .hero-bp .orb.s104, .hero-bq .orb.s104, .hero-bw .orb.s104, .hero-bh .orb.s104, .hero-bo .orb.s104 { --s: 96px; }

.hero-az .hero, .hero-bd .hero, .hero-bg .hero, .hero-bk .hero, .hero-bu .hero, .hero-bv .hero {
  grid-template-columns: auto 1fr; grid-template-areas: "top top" "logo name" "logo chips" "text text"; }
.hero-az .orb.s104, .hero-bd .orb.s104, .hero-bg .orb.s104, .hero-bk .orb.s104, .hero-bu .orb.s104, .hero-bv .orb.s104 { --s: 72px; }
.hero-az .hero > .who, .hero-bd .hero > .who, .hero-bg .hero > .who, .hero-bk .hero > .who, .hero-bu .hero > .who, .hero-bv .hero > .who { font-size: clamp(24px, 7vw, 36px); align-self: end; }
.hero-az .hero > .chips, .hero-bd .hero > .chips, .hero-bg .hero > .chips, .hero-bk .hero > .chips, .hero-bu .hero > .chips, .hero-bv .hero > .chips { align-self: start; }

.hero-ba .hero, .hero-bi .hero, .hero-bm .hero { grid-template-columns: auto 1fr; grid-template-areas: "top top" "name name" "chips chips" "logo text"; }
.hero-ba .orb.s104, .hero-bi .orb.s104, .hero-bm .orb.s104 { --s: 70px; }

.hero-bc .hero, .hero-bf .hero, .hero-bx .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name name" "text logo" "chips logo"; }
.hero-bc .hero > .who, .hero-bf .hero > .who, .hero-bx .hero > .who { font-size: clamp(38px, 12vw, 64px); line-height: 1; }
.hero-bc .orb.s104, .hero-bf .orb.s104, .hero-bx .orb.s104 { --s: 64px; }

.hero-bj .hero, .hero-br .hero { grid-template-columns: 1fr auto; grid-template-areas: "top top" "name logo" "chips logo" "stats stats" "text text"; }
.hero-bj .orb.s104, .hero-br .orb.s104 { --s: 66px; }
.hero-bj .hero > .h-stats, .hero-br .hero > .h-stats { display: grid; }
.hero-bj .hero > .who, .hero-br .hero > .who { font-size: clamp(26px, 8vw, 40px); }

/* moving backgrounds (shared .fx) placed for a card */
.portal.hero-az > .fx.f1 { opacity: .32; }
.hero-az .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(60% 80% at 15% 40%, rgba(var(--panel), .7), transparent 70%); }
.portal.hero-bf > .f1 { height: 46%; opacity: .6; } .portal.hero-bf > .f2 { width: 24%; left: 44%; bottom: 26%; opacity: .45; }
.portal.hero-be > .fx { top: 38%; }
.portal.hero-bk > .fx.f1 { --fxo: .22; }

/* BO typing bubble: three dots bouncing in a chat bubble next to the logo */
.hero-bo .hero-cover { display: block; position: absolute; left: 50%; top: 58px; margin-left: 38px; width: 62px; height: 38px; border-radius: 19px 19px 19px 6px;
  background: var(--a-20); border: 1px solid var(--a-45); box-shadow: 0 8px 22px -8px var(--a-60); animation: hx-bob 3s ease-in-out infinite; }
.hero-bo .hero-fx { display: block; }
.hero-bo .hero-fx i { display: none; }
.hero-bo .hero-fx i:nth-child(-n+3) { display: block; top: 75px !important; width: 8px; height: 8px; border-radius: 50%; background: var(--hi, #fff); animation: hx-dot 1.2s ease-in-out infinite; }
.hero-bo .hero-fx i:nth-child(1) { left: calc(50% + 53px) !important; }
.hero-bo .hero-fx i:nth-child(2) { left: calc(50% + 65px) !important; animation-delay: .15s !important; }
.hero-bo .hero-fx i:nth-child(3) { left: calc(50% + 77px) !important; animation-delay: .3s !important; }
@keyframes hx-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-5px); opacity: 1; } }
@keyframes hx-bob { 50% { transform: translateY(-4px); } }

/* BP breathing glow behind the logo */
.hero-bp .hero-cover { display: block; position: absolute; left: 50%; top: 116px; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--a-60), var(--a2-20) 55%, transparent 72%); animation: hx-breathe 4.5s ease-in-out infinite; }
@keyframes hx-breathe { 0%, 100% { transform: scale(.75); opacity: .55; } 50% { transform: scale(1.1); opacity: 1; } }

/* BQ sparkles twinkling round the card */
.hero-bq .hero-fx { display: block; }
.hero-bq .hero-fx i { width: 14px; height: 14px; background: var(--a2, #ff4fd8); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: hx-sparkle 2.8s ease-in-out infinite; }
.hero-bq .hero-fx i:nth-child(odd) { background: #fff; width: 10px; height: 10px; }
.hero-bq .hero-fx i:nth-child(3n) { background: var(--a); width: 18px; height: 18px; animation-duration: 3.6s; }
@keyframes hx-sparkle { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }

/* BR underline: a thick colour bar under the name */
.hero-br .hero > .who { padding-bottom: 8px; border-bottom: 4px solid transparent; border-image: var(--grad) 1; }

/* BS big logo bleeding off the left edge */
.hero-bs .hero { grid-template-columns: 120px 1fr; grid-template-areas: "logo top" "logo name" "logo chips" "logo text"; column-gap: 18px; }
.hero-bs .hero > .h-logo { margin-left: -78px; align-self: center; }
.hero-bs .orb.s104 { --s: 190px; } .hero-bs .orb .halo { display: none; }
.hero-bs .hero > .who { font-size: clamp(24px, 7vw, 36px); }

/* BT two-tone: colour on top, logo sitting on the edge */
.hero-bt .hero-cover { display: block; position: absolute; left: 0; right: 0; top: 0; height: 118px; background: var(--grad); border-radius: 0 0 50% 50% / 0 0 26px 26px; }
.hero-bt .hero > .toprow .kicker { color: #fff; }
.hero-bt .hero > .h-logo { margin-top: 18px; }
.hero-bt .orb.s104 { --s: 100px; } .hero-bt .orb .ball { box-shadow: 0 0 0 5px var(--solid), var(--glow); } .hero-bt .orb .halo { display: none; }

/* BU speech bubble drawn inside the card */
.hero-bu .hero-cover { display: block; position: absolute; inset: 10px 10px 24px 10px; border-radius: 24px; border: 2px solid var(--a-45); background: var(--a-6); }
.hero-bu .hero-cover::after { content: ""; position: absolute; left: 36px; bottom: -17px; width: 26px; height: 16px; background: var(--a-45); clip-path: polygon(0 0, 100% 0, 0 100%); }
.hero-bu .portal-in { padding-bottom: 42px; }

/* BV gradient frame (still) */
.portal.hero-bv { border-color: transparent; }
.hero-bv::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 3px; pointer-events: none;
  background: linear-gradient(135deg, var(--a), var(--a2, #ff4fd8), #22d3ee);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* BW grid paper */
.hero-bw .hero-cover { display: block; position: absolute; inset: 0;
  background-image: linear-gradient(var(--a-12) 1px, transparent 1px), linear-gradient(90deg, var(--a-12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask: radial-gradient(90% 80% at 50% 40%, #000 40%, transparent); mask: radial-gradient(90% 80% at 50% 40%, #000 40%, transparent); }

/* BX neon outline name (still) */
.hero-bx .who.gtext { background: none; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.6px var(--a);
  filter: drop-shadow(0 0 6px var(--a)) drop-shadow(0 0 16px var(--a-60)); }
.hero-bx .hero-cover { display: block; position: absolute; inset: 0; background: radial-gradient(80% 60% at 20% 30%, var(--a-12), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .hero-bo .hero-cover, .hero-bo .hero-fx i, .hero-bp .hero-cover, .hero-bq .hero-fx i { animation: none !important; } }

/* ===== 2.8.42: 25 more opening screens ===== */
.vs-art i { display: none; }
.sp-autumn { background: radial-gradient(120% 80% at 50% 0%, #3a1c08, #150904 55%, #0c0704); }
.sp-prism { background: #fbfaff; }
.sp-plasma { background: #05030c; }
.sp-premiere { background: radial-gradient(90% 40% at 50% 100%, #3a1020, transparent 70%), #070507; }
.sp-reef { background: linear-gradient(#0e7490, #0b4f5f 55%, #062a33); }
.sp-hive { background: radial-gradient(circle at 50% 45%, #241806, #0a0703 70%); }
.sp-stardust { background: radial-gradient(120% 90% at 50% 0%, #1b1b4a, #04040e 70%); }
.sp-silk { background: #fbf7fc; }
.sp-snowfall { --snow: rgba(255,255,255,.85); background: linear-gradient(#0b1a33, #030814); }
.sp-neon-rain { background: linear-gradient(#1a0322, #05010a); }
.sp-neon-rain > .fx { --a: #ff2d95; --a2: #f0abfc; }
.sp-lightspeed { background: radial-gradient(circle at 50% 50%, #2a0b4a, #07020f 70%); }
.sp-lightspeed > .fx { --a2: #c084fc; }
.sp-sakura-night { background: linear-gradient(#0b1030, #1e1036); }
.sp-mono { background: #000; }
.sp-mono .vs-mid .orb { filter: grayscale(1); }
.sp-mono .vs-name { background-image: linear-gradient(#fff, #fff); }
.sp-mono .vs-bar i { background: #fff; }
.sp-deep-sea { background: linear-gradient(#0c4a6e, #062540 40%, #020617 75%); }
.sp-candy { background: linear-gradient(135deg, #fbcfe8, #ddd6fe 50%, #bfdbfe); }
.sp-gradient { background: linear-gradient(120deg, var(--a), var(--a2), #22d3ee, var(--a)); background-size: 300% 300%; animation: hx-flow 8s ease infinite; }
.sp-gradient .vs-name { background-image: linear-gradient(100deg, #fff 30%, #ffffffaa 50%, #fff 70%); }
.sp-gradient .vs-bar i { background: #fff; }
/* where the logo sits (the middle of .vs-mid is a little below it) */
.vsplash { --logo-y: calc(50% - 42px); }
/* heartbeat: a pulse racing along a heart-monitor line */
.sp-heartbeat { background: radial-gradient(60% 40% at 50% 45%, var(--a-20), transparent 70%), #05070d; }
.sp-heartbeat .vs-art { position: absolute; left: 0; right: 0; top: 74%; height: 120px; translate: 0 -50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 H120 L134 60 L144 34 L156 96 L170 12 L182 104 L192 60 H360' fill='none' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/360px 120px repeat-x;
  background: linear-gradient(90deg, transparent 0 30%, var(--a) 44%, #fff 48%, transparent 50%) 0 0/200% 100%; animation: vs-ecg 1.8s linear infinite; }
.sp-heartbeat .vs-art::before { content: ""; position: absolute; inset: 0; background: var(--a-60); z-index: -1; }
.sp-heartbeat .vs-art { filter: drop-shadow(0 0 6px var(--a)); }
@keyframes vs-ecg { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* loading ring round the logo */
.sp-loading { background: radial-gradient(60% 40% at 50% 45%, var(--a-20), transparent 70%), #07060d; }
.sp-loading .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 184px; height: 184px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--a2) 60%, var(--a) 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89% 97%, transparent 98%); animation: fx-spin 1.1s linear infinite; }
/* chat bubbles floating up */
.sp-chat { background: linear-gradient(#1a1033, #07060d); }
.sp-chat .vs-art { position: absolute; inset: 0; overflow: hidden; }
.sp-chat .vs-art i { display: block; position: absolute; bottom: -50px; width: 54px; height: 34px; border-radius: 17px 17px 17px 5px; opacity: 0;
  background: radial-gradient(circle at 30% 50%, #fffc 0 3px, transparent 3.5px), radial-gradient(circle at 50% 50%, #fffc 0 3px, transparent 3.5px),
    radial-gradient(circle at 70% 50%, #fffc 0 3px, transparent 3.5px), var(--a-30);
  border: 1px solid var(--a-45); animation: vs-chatup 8s linear infinite; }
.sp-chat .vs-art i:nth-child(even) { border-radius: 17px 17px 5px 17px; background-color: transparent; background-image: radial-gradient(circle at 30% 50%, #fffc 0 3px, transparent 3.5px), radial-gradient(circle at 50% 50%, #fffc 0 3px, transparent 3.5px), radial-gradient(circle at 70% 50%, #fffc 0 3px, transparent 3.5px), linear-gradient(var(--a2-45), var(--a2-45)); }
.sp-chat .vs-art i:nth-child(1) { left: 8%; animation-delay: 0s; } .sp-chat .vs-art i:nth-child(2) { left: 70%; animation-delay: -1.3s; }
.sp-chat .vs-art i:nth-child(3) { left: 30%; animation-delay: -2.6s; } .sp-chat .vs-art i:nth-child(4) { left: 82%; animation-delay: -3.9s; }
.sp-chat .vs-art i:nth-child(5) { left: 16%; animation-delay: -5.2s; } .sp-chat .vs-art i:nth-child(6) { left: 58%; animation-delay: -6.5s; }
.sp-chat .vs-art i:nth-child(7) { left: 44%; animation-delay: -4.5s; animation-duration: 11s; } .sp-chat .vs-art i:nth-child(8) { left: 4%; animation-delay: -8s; animation-duration: 10s; }
@keyframes vs-chatup { 0% { transform: translateY(0) scale(.8); opacity: 0; } 10% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translateY(-720px) scale(1); opacity: 0; } }
/* orbit: little lights circling the logo */
.sp-orbit { background: radial-gradient(60% 40% at 50% 45%, var(--a-20), transparent 70%), #06050c; }
.sp-orbit .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 0; height: 0; }
.sp-orbit .vs-art i:nth-child(-n+5) { display: block; position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 12px var(--a2);
  animation: vs-orbit 4s linear infinite; }
.sp-orbit .vs-art i:nth-child(2) { background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation-duration: 6s; --r: 118px; }
.sp-orbit .vs-art i:nth-child(3) { background: #ffc15e; box-shadow: 0 0 12px #ffc15e; animation-duration: 8s; animation-direction: reverse; --r: 136px; }
.sp-orbit .vs-art i:nth-child(4) { width: 6px; height: 6px; margin: -3px; animation-duration: 5s; animation-direction: reverse; --r: 104px; }
.sp-orbit .vs-art i:nth-child(5) { width: 6px; height: 6px; margin: -3px; background: #fff; animation-duration: 9s; --r: 150px; }
@keyframes vs-orbit { from { transform: rotate(0deg) translateX(var(--r, 96px)); } to { transform: rotate(360deg) translateX(var(--r, 96px)); } }
/* equaliser bars */
.sp-equaliser { background: linear-gradient(#0d0820, #050309); }
.sp-equaliser .vs-art { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; }
.sp-equaliser .vs-art i { display: block; position: absolute; bottom: 0; width: 6.4%; height: 100%; border-radius: 6px 6px 0 0; transform-origin: 50% 100%; opacity: .55;
  background: linear-gradient(to top, var(--a), var(--a2)); animation: hx-eq 1s ease-in-out infinite alternate; }
.sp-equaliser .vs-art i:nth-child(1) { left: 1.5%; animation-duration: .8s; } .sp-equaliser .vs-art i:nth-child(2) { left: 9.7%; animation-duration: 1.2s; }
.sp-equaliser .vs-art i:nth-child(3) { left: 17.9%; animation-duration: .9s; } .sp-equaliser .vs-art i:nth-child(4) { left: 26.1%; animation-duration: 1.35s; }
.sp-equaliser .vs-art i:nth-child(5) { left: 34.3%; animation-duration: .7s; } .sp-equaliser .vs-art i:nth-child(6) { left: 42.5%; animation-duration: 1.1s; }
.sp-equaliser .vs-art i:nth-child(7) { left: 50.7%; animation-duration: .85s; } .sp-equaliser .vs-art i:nth-child(8) { left: 58.9%; animation-duration: 1.25s; }
.sp-equaliser .vs-art i:nth-child(9) { left: 67.1%; animation-duration: .95s; } .sp-equaliser .vs-art i:nth-child(10) { left: 75.3%; animation-duration: 1.15s; }
.sp-equaliser .vs-art i:nth-child(11) { left: 83.5%; animation-duration: .75s; } .sp-equaliser .vs-art i:nth-child(12) { left: 91.7%; animation-duration: 1.05s; }
/* glitch: scanlines and a jittery name */
.sp-glitch { background: #050508; }
.sp-glitch .vs-art { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.sp-glitch .vs-art::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(transparent, var(--a-20), transparent); animation: vs-scan 3s linear infinite; }
.sp-glitch .vs-name { text-shadow: 2px 0 #22d3ee, -2px 0 #ff4fd8; animation: vs-up .8s .35s both, vs-glitch 2.4s 1s steps(1) infinite; }
@keyframes vs-scan { from { transform: translateY(-100px); } to { transform: translateY(700px); } }
@keyframes vs-glitch { 0%, 86%, 100% { transform: none; } 88% { transform: translate(-3px, 1px) skewX(-8deg); } 91% { transform: translate(3px, -1px); } 94% { transform: translate(-1px, 0) skewX(6deg); } }
/* radar sweep behind the logo */
.sp-radar { background: radial-gradient(circle at 50% 45%, #04201a, #010604 70%); }
.sp-radar .vs-art { position: absolute; left: 50%; top: var(--logo-y); width: 320px; height: 320px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a-60), transparent 22%); -webkit-mask: radial-gradient(closest-side, #000 96%, transparent); animation: fx-spin 3s linear infinite; }
.sp-radar .vs-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 38px, var(--a-30) 39px 40px, transparent 41px 54px); }
/* forest: layered hills (still) */
.sp-forest { background: linear-gradient(#1b2b4a, #45506b 42%, #7a5a4a 58%, #0d1f16 60%); }
.sp-forest .vs-art { position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(140% 50% at 50% 100%, #052e16 0 50%, transparent 50.5%), radial-gradient(90% 60% at 85% 100%, #14532d 0 50%, transparent 50.5%),
    radial-gradient(110% 70% at 15% 100%, #166534 0 50%, transparent 50.5%), radial-gradient(90% 80% at 60% 100%, #1f6f3f 0 50%, transparent 50.5%); }
/* mountains under a purple sky (still) */
.sp-mountains { background: linear-gradient(#150a2e, #4a1f63 55%, #d9467a 80%, #f59e0b); }
.sp-mountains .vs-art { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(#3b1f5c, #170b2a);
  clip-path: polygon(0 55%, 16% 22%, 30% 48%, 48% 6%, 64% 42%, 80% 18%, 100% 50%, 100% 100%, 0 100%); }
.sp-mountains .vs-art::before { content: ""; position: absolute; inset: 0; background: #0b0616; clip-path: polygon(0 82%, 20% 55%, 38% 78%, 58% 48%, 76% 76%, 100% 58%, 100% 100%, 0 100%); }

/* 2.8.51: touching the app's own screens (cards, tiles, menus, headings) no longer starts a text selection or the
   Copy / Web search popup. Message text, order details, emails, answers and everything you type in stay selectable. */
body[data-app] :is(.portal, .hero, .bento, .tile, .marquee, .staffbar, .appbanner, .dock, .sg-tabs, .subtabs, .lf-tabs,
                   .sg-hero, .sg-lead, .sg-card, .sec, .stat, .stats, .pill, .btn, .iconbtn, .toprow, .kicker, .chips,
                   .head, .msg-head, .msg-av, .msg-name, .lvl, summary.btn, nav, header, h1, h2, h3, label.chip, .check.chip),
body[data-app] :is(.portal, .hero, .bento, .tile, .marquee, .staffbar, .appbanner, .dock, .sg-tabs, .subtabs, .lf-tabs,
                   .sg-hero, .sg-lead, .sg-card, .sec, .stat, .stats, .pill, .btn, .iconbtn, .toprow, .kicker, .chips,
                   .head, .msg-head, .nav, nav, header) * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
body[data-app] :is(input, textarea, select, [contenteditable], [contenteditable] *, .body, .body *, .sel, .sel *,
                   .kvs, .kvs *, .kv, .kv *, .copybox, .copybox *, .shop-delivery, .shop-delivery *, .note, .note *,
                   pre, code, .pe-addr, .alert, .alert *, .bubble .body, .doc, .doc *, .info-doc, .info-doc *) {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.rb-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
/* 2.8.68: reviews */
.rv-stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; color: color-mix(in oklab, var(--fg) 22%, transparent); }
.rv-stars i { font-style: normal; }
.rv-stars i.on { color: #FFC94D; text-shadow: 0 0 8px rgba(255, 201, 77, .35); }
.rv-stars.sm { font-size: 13px; }
.rv-sum { gap: 8px; align-items: center; }
.rv-sum > b, .rv-score > b { font-size: 26px; font-weight: 800; line-height: 1; }
.rv-list { display: grid; gap: 10px; }
.rv-item { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-md); background: color-mix(in oklab, var(--fg) 4%, transparent); border: 1px solid var(--line); }
.rv-item .row { align-items: center; gap: 10px; min-width: 0; }
.rv-meta { gap: 8px; }
.rv-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; }
.rv-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.rv-score { display: grid; justify-items: center; gap: 4px; }
.rv-score > b { font-size: 40px; }
.rv-bars { display: grid; gap: 4px; }
.rv-bars .row { gap: 8px; align-items: center; }
.rv-bars .itrack { flex: 1; }
.rv-bars .hint { min-width: 22px; font-variant-numeric: tabular-nums; }
.rv-pick { border: 0; margin: 0; padding: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-pick legend { width: 100%; margin-bottom: 4px; float: left; }
.rv-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rv-pick label { font-size: 32px; line-height: 1; cursor: pointer; color: color-mix(in oklab, var(--fg) 22%, transparent); transition: color .15s, transform .15s; }
.rv-pick input:checked ~ label, .rv-pick label:hover, .rv-pick label:hover ~ label { color: #FFC94D; }
.rv-pick input:focus-visible + label { outline: 2px solid var(--a); outline-offset: 2px; border-radius: 6px; }
.rv-pick label:active { transform: scale(.9); }
/* 3.0: suggestion box */
.idea-list { display: grid; gap: 10px; }
.idea { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; }
.idea-vote button { display: grid; justify-items: center; gap: 2px; min-width: 48px; padding: 8px 6px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: color-mix(in oklab, var(--fg) 4%, transparent); color: var(--fg); font: inherit; cursor: pointer; }
.idea-vote button b { font-size: 15px; font-variant-numeric: tabular-nums; }
.idea-vote button.on { background: color-mix(in oklab, var(--a) 22%, transparent); border-color: var(--a); color: var(--a); }
.idea-vote button:disabled { opacity: .6; cursor: default; }
.idea-main { display: grid; gap: 6px; min-width: 0; }
.idea-head { gap: 8px; align-items: center; }
.idea-title { font-size: 15px; overflow-wrap: anywhere; }
.idea-body, .idea-reply p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; color: var(--mfg); }
.idea-meta { gap: 6px; align-items: center; }
.av.xs { width: 20px; height: 20px; font-size: 10px; }
.idea-reply { padding: 8px 10px; border-left: 3px solid var(--a); border-radius: 6px; background: color-mix(in oklab, var(--a) 8%, transparent); }
.idea-reply p { color: var(--fg); }
.idea-tools { gap: 8px; align-items: center; }
.st-planned .idea-st { background: color-mix(in oklab, #FFC94D 22%, transparent); color: #FFC94D; }
.st-done .idea-st { background: color-mix(in oklab, #4DFFB0 20%, transparent); color: #4DFFB0; }
.st-declined .idea-st { background: color-mix(in oklab, var(--fg) 10%, transparent); color: var(--mfg); }
.idea-new summary { list-style: none; cursor: pointer; gap: 10px; align-items: center; }
.idea-new summary::-webkit-details-marker { display: none; }
/* 3.0: skill questions on prizes */
.pz-skillset { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px 14px; margin: 0; }
.pz-skillset legend { gap: 6px; align-items: center; padding: 0 6px; }
.pz-skill { display: grid; gap: 6px; justify-items: start; }
.pz-skill p { margin: 0; font-size: 15px; }
.pz-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.pz-choices legend { margin-bottom: 6px; font-size: 13px; color: var(--mfg); }
.pz-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); cursor: pointer; }
.pz-choice:has(input:checked) { border-color: var(--a); background: color-mix(in oklab, var(--a) 14%, transparent); }
.pz-choice input { accent-color: var(--a); }
.pz-qedit { width: 100%; }
.pz-row { flex-wrap: wrap; }
/* 3.0: branding colour extras */
#intensity input[type=range] { width: 100%; accent-color: var(--a); }
#intensity .tag { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--a); }
#gradient .check { align-items: flex-start; }
#gradient input[type=color] { width: 46px; height: 32px; padding: 2px; }
.grad-preview { margin-top: 10px; height: 64px; border-radius: var(--r-md); background: var(--grad); display: grid; place-items: center; border: 1px solid var(--line-2); }
.grad-preview .btn { pointer-events: none; }
/* 3.0: hex code box next to colour pickers */
.hexin { width: 104px !important; flex: none; padding: 8px 10px !important; font: 600 13.5px ui-monospace, Menlo, monospace !important; letter-spacing: .04em; text-transform: uppercase; }
.hexin.bad { border-color: var(--bad, #ff5d7a) !important; }
.grad-preview { grid-auto-flow: column; gap: 14px; }
/* 3.0: home tile sizes (Branding -> Home tiles) */
html .bento > .tile[data-size="wide"] { grid-column: 1 / -1; }
html .bento > .tile[data-size="half"] { grid-column: auto / span 1; }
.tile-swipe { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tile-swipe::-webkit-scrollbar { display: none; }
.tile-swipe > .tile { flex: 0 0 min(78%, 320px); scroll-snap-align: start; min-width: 0; }
.tsz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tsz-b { font: 600 12px var(--body); padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line-2); background: rgba(var(--tint), .04); color: var(--mfg); cursor: pointer; }
.tsz-b.on { background: var(--a-20); border-color: var(--a); color: var(--fg); }
.tsz-item { align-items: flex-start; }
html .bento.bento-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html .bento.bento-two > *:not([data-size="half"]) { grid-column: 1 / -1; }
html .bento.bento-two > .tile[data-size="half"] { min-width: 0; }
html .bento.bento-two > .tile[data-size="half"] .tileart { opacity: .5; }
html .bento > .tile[data-size="half"] { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; text-align: left; }
html .bento > .tile[data-size="half"] .tt { min-width: 0; width: 100%; }
html .bento > .tile[data-size="half"] .tl { font-size: 16px; overflow-wrap: anywhere; }
html .bento > .tile[data-size="half"] .ts { font-size: 12.5px; }
html .bento > .tile[data-size="half"] .arrow { display: none; }
html .bento > .tile[data-size="half"] .lockpill { font-size: 10.5px; white-space: normal; }
/* 3.0: FAQ folders show which roles they're for */
.for-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.for-roles .chip { font-size: 11px; padding: 2px 8px 2px 6px; }
/* 3.0: the Dashboard's four counters (moved from the home screen) */
.statgrid.stat4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.statgrid.stat4 .l { white-space: nowrap; }
@media (max-width: 440px) { .statgrid.stat4 .l .i { display: none; } .statgrid.stat4 .stat { padding: 11px 9px; } }
/* 3.0: "Your quick widgets" uses the same heading as the other home sections */
.whead > .wtitle { flex: 1; margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mfg); font-weight: 600; font-family: var(--body); line-height: 1.2; }
[data-layout="magazine"] .whead > .wtitle { font-family: var(--display); font-size: 15px; letter-spacing: .04em; text-transform: none; color: var(--fg); }