/* MemeBox site: one design system for the landing page, forms, buy page, legal pages and admin.
   Color themes: prefs.js sets <html data-theme="auto|light|dark|sunny|neon|candy">. "auto" follows
   the computer's light/dark setting. The extension has the same themes. */
:root {
  --radius: 18px;
  --shadow-sm: 0 1px 2px rgba(28, 27, 32, .06), 0 2px 8px rgba(28, 27, 32, .05);
  --shadow: 0 10px 30px rgba(28, 27, 32, .10);
  --shadow-lg: 0 24px 60px rgba(28, 27, 32, .18);
}
:root, :root[data-theme="light"] {
  --bg: #f4f6f8; --bg-2: #edf1f5; --card: #ffffff; --text: #182029; --muted: #65707c; --line: #ece6d2; --field: #ffffff;
  --brand: #ffd43b; --brand-2: #ff922b; --brand-ink: #1c1b20; --accent: #087e8b; --focus: #1a73e8;
  --ok: #2b8a3e; --error: #c5221f; --error-bg: #fdecea;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    --bg: #141417; --bg-2: #1e1c16; --card: #1f1f24; --text: #ecebf0; --muted: #a3a4ad; --line: #34343c; --field: #18181c;
    --brand: #ffd43b; --brand-2: #ff922b; --brand-ink: #1c1b20; --accent: #9775fa; --focus: #74a9ff;
    --ok: #8ce99a; --error: #f28b82; --error-bg: #3b1f1d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141417; --bg-2: #1e1c16; --card: #1f1f24; --text: #ecebf0; --muted: #a3a4ad; --line: #34343c; --field: #18181c;
  --brand: #ffd43b; --brand-2: #ff922b; --brand-ink: #1c1b20; --accent: #9775fa; --focus: #74a9ff;
  --ok: #8ce99a; --error: #f28b82; --error-bg: #3b1f1d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root[data-theme="sunny"] {
  --bg: #fff8d6; --bg-2: #ffec99; --card: #fffdf0; --text: #3d2c00; --muted: #7a6320; --line: #f3dd8a; --field: #fffef7;
  --brand: #ffd43b; --brand-2: #ff922b; --brand-ink: #3d2c00; --accent: #e8590c; --focus: #1864ab;
  --ok: #2b8a3e; --error: #c92a2a; --error-bg: #ffe3e3;
  color-scheme: light;
}
:root[data-theme="neon"] {
  --bg: #0d0820; --bg-2: #1a1038; --card: #1a1238; --text: #f3eaff; --muted: #b8a6e6; --line: #3b2d6e; --field: #130d2c;
  --brand: #f72585; --brand-2: #7209b7; --brand-ink: #ffffff; --accent: #4cc9f0; --focus: #4cc9f0;
  --ok: #80ffdb; --error: #ff8fab; --error-bg: #3a1030;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 10px 30px rgba(114, 9, 183, .35); --shadow-lg: 0 24px 60px rgba(247, 37, 133, .3);
  color-scheme: dark;
}
:root[data-theme="candy"] {
  --bg: #fff0f6; --bg-2: #ffdeeb; --card: #ffffff; --text: #3b1030; --muted: #8c4a73; --line: #fcc2d7; --field: #fffafd;
  --brand: #faa2c1; --brand-2: #f06595; --brand-ink: #3b1030; --accent: #7048e8; --focus: #7048e8;
  --ok: #2b8a3e; --error: #c2255c; --error-bg: #ffdeeb;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "Nirmala UI", Roboto, sans-serif; }
a { color: var(--focus); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 5vw, 36px); margin: 12px 0 6px; }
h2 { font-size: 20px; margin: 0 0 10px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 24px 20px 40px; }
.wrap.narrow { max-width: 640px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: inherit; text-decoration: none; }
.brand img { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)); }
.page-head { margin-bottom: 22px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 0 0 16px; box-shadow: var(--shadow-sm); }
.card.narrow { max-width: 400px; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; background: color-mix(in srgb, var(--muted) 14%, transparent); padding: 2px 7px; border-radius: 7px; }

/* ---------- buttons ---------- */
button, .button { font: inherit; font-weight: 700; cursor: pointer; border-radius: 999px; border: 1px solid var(--line);
  padding: 11px 20px; background: var(--card); color: inherit; text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
button:hover, .button:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
button:active, .button:active { transform: translateY(0); }
button.primary, .button.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent; color: var(--brand-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-2) 40%, transparent); }
button.primary:hover, .button.primary:hover { filter: brightness(1.03); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-2) 50%, transparent); }
button:disabled { opacity: .6; cursor: default; transform: none; }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.button.big, button.big { padding: 15px 26px; font-size: 17px; }

/* ---------- forms ---------- */
fieldset { border: 0; padding: 0; margin: 0 0 22px; }
legend { font-weight: 750; margin-bottom: 10px; font-size: 17px; }
.faces { display: flex; gap: 12px; flex-wrap: wrap; }
.faces label { position: relative; cursor: pointer; display: grid; justify-items: center; gap: 6px; }
.faces input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.faces span[aria-hidden] { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  font-size: 34px; border: 2px solid var(--line); background: var(--field); transition: transform .12s, border-color .12s, background .12s; }
.faces label:hover span[aria-hidden] { transform: translateY(-2px) rotate(-3deg); }
.faces input:checked + span { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand) 45%, var(--field)); transform: scale(1.1); }
.faces input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.faces .sr { position: static; width: auto; height: auto; clip: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks.column { flex-direction: column; }
.checks label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--field); transition: border-color .12s, background .12s; }
.checks label:has(input:checked) { border-color: var(--brand-2); background: color-mix(in srgb, var(--brand) 20%, var(--field)); }
.checks input { width: 18px; height: 18px; accent-color: var(--brand-2); margin: 0; }
.field { display: grid; gap: 6px; margin-bottom: 16px; font-weight: 650; }
input, textarea, select { font: inherit; font-weight: 400; color: inherit; background: var(--field); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color .12s, box-shadow .12s; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent); }
.error { color: var(--error); background: var(--error-bg); padding: 10px 14px; border-radius: 12px; font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#turnstile { margin: 4px 0 12px; }
.thanks { text-align: center; padding: 44px 22px; }
.thanks h2 { font-size: 26px; }
.foot { margin-top: 24px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.foot .prefs { margin-left: auto; }
.page-bg { background:
  radial-gradient(900px 400px at 10% -10%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 70%),
  radial-gradient(700px 360px at 100% 0%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 70%), var(--bg); }

/* ---------- landing ---------- */
.topbar { position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(1.4) blur(12px);
  background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.nav nav { display: flex; gap: 22px; align-items: center; }
.nav nav a { color: inherit; text-decoration: none; font-weight: 650; opacity: .8; }
.nav nav a:hover { opacity: 1; }
.nav .button { padding: 9px 16px; font-size: 15px; }

.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 32px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.hero h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.04; margin: 18px 0 16px; letter-spacing: -.03em; }
.hl { background: linear-gradient(120deg, var(--brand-2), #f03e3e 60%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 20px; color: var(--muted); margin: 0 0 26px; max-width: 34em; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0; color: var(--muted); font-weight: 600; font-size: 15px; }
.ticks li::before { content: "✓"; color: var(--ok); font-weight: 900; margin-right: 6px; }

.demo { position: relative; margin: 0; }
.frame { border-radius: 16px; overflow: hidden; background: #1f2023; box-shadow: var(--shadow-lg); border: 1px solid rgba(0, 0, 0, .2);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .4s ease; }
.frame:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.frame .dots { display: flex; gap: 6px; padding: 10px 12px; background: #2a2b2f; }
.frame .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; display: block; }
.frame .dots i:nth-child(2) { background: #fcc419; } .frame .dots i:nth-child(3) { background: #51cf66; }
.frame img, .frame video { display: block; width: 100%; height: auto; }
.frame { position: relative; }
.soundon { position: absolute; top: 4px; right: 10px; z-index: 2; border: 0; border-radius: 999px; padding: 6px 12px; font: 700 13px/1 inherit; cursor: pointer;
  background: #ffd43b; color: #3d2c00; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); animation: soundpulse 1.6s ease-in-out infinite; }
.soundon[hidden] { display: none; }
@keyframes soundpulse { 50% { box-shadow: 0 0 0 7px rgba(255, 212, 59, .45), 0 4px 14px rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .soundon { animation: none; } }
.float { position: absolute; font-size: 38px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .2)); animation: bob 3.2s ease-in-out infinite; z-index: 2; }
.float.f1 { top: -18px; left: -14px; }
.float.f2 { top: 30%; right: -22px; animation-delay: .8s; font-size: 32px; }
.float.f3 { bottom: -16px; left: 22%; animation-delay: 1.6s; font-size: 30px; }
.heard { position: absolute; right: 18px; bottom: -22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; box-shadow: var(--shadow); font-weight: 700; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.heard .bars { display: inline-flex; gap: 3px; align-items: end; height: 18px; }
.heard .bars i { width: 4px; background: var(--brand-2); border-radius: 2px; display: block; animation: eq 1s ease-in-out infinite; }
.heard .bars i:nth-child(1) { height: 8px; } .heard .bars i:nth-child(2) { height: 16px; animation-delay: .2s; }
.heard .bars i:nth-child(3) { height: 11px; animation-delay: .4s; } .heard .bars i:nth-child(4) { height: 14px; animation-delay: .1s; }
figcaption { margin-top: 30px; text-align: center; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes eq { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.1); } }

.works { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding-top: 8px; padding-bottom: 8px; color: var(--muted); font-weight: 650; }
.works span.chip { padding: 8px 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text); }

.section { font-size: clamp(28px, 4vw, 40px); margin: 40px 0 8px; text-align: center; letter-spacing: -.02em; }
.section-sub { text-align: center; color: var(--muted); margin: 0 auto 28px; max-width: 36em; font-size: 18px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.features .card { margin: 0; transition: transform .15s, box-shadow .15s; }
.features .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.features h3 { margin: 12px 0 6px; font-size: 19px; }
.features p { margin: 0; color: var(--muted); }
.icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 26px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 60%, transparent), color-mix(in srgb, var(--brand-2) 35%, transparent)); }

.how { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; counter-reset: step; }
.how .card { margin: 0; position: relative; padding-top: 54px; }
.how .card::before { counter-increment: step; content: counter(step); position: absolute; top: 18px; left: 22px; width: 34px; height: 34px;
  border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-ink); }
.how b { font-size: 19px; display: block; margin-bottom: 6px; }
.how p { margin: 0; color: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; max-width: 860px; margin: 0 auto; }
.plan { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plan.pro { border: 2px solid transparent; background:
  linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent)) border-box; box-shadow: var(--shadow); }
.plan h3 { margin: 0; font-size: 22px; }
.plan .price { font-size: 40px; font-weight: 900; margin: 0; letter-spacing: -.02em; }
.plan .price small { font-size: 16px; font-weight: 600; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 8px; flex: 1; }
.plan li::before { content: "✓"; color: var(--ok); font-weight: 900; margin-right: 8px; }
.badge { align-self: flex-start; display: inline-block; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
@media (prefers-color-scheme: dark) { .badge { color: #b197fc; } }

.band { margin-top: 44px; border-radius: 24px; padding: 34px; text-align: center; color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow); }
.band h2 { font-size: clamp(24px, 3.5vw, 34px); margin: 0 0 8px; }
.band p { margin: 0 0 20px; font-size: 18px; opacity: .85; }
.band .button { background: #1c1b20; color: #fff; border-color: transparent; }
.privacy-note { display: flex; gap: 18px; align-items: center; margin-top: 36px; }
.privacy-note .icon { flex: none; width: 60px; height: 60px; font-size: 30px; }
.privacy-note h2 { margin: 0 0 4px; }
.privacy-note p { margin: 0; color: var(--muted); }
.faq details { margin-bottom: 10px; padding: 0; overflow: hidden; }
.faq summary { cursor: pointer; font-weight: 700; padding: 18px 22px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 22px 18px; color: var(--muted); }
.site-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; border-top: 1px solid var(--line); margin-top: 40px; color: var(--muted); }
.site-foot a { color: inherit; }
.site-foot .brand { margin-right: auto; font-size: 16px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 40px; }
  .frame { transform: none; }
  .nav nav a:not(.button) { display: none; }
  .nav .prefs { gap: 6px; }
  .nav select.pref { padding: 6px 8px; font-size: 13px; max-width: 124px; }
  .nav, .nav nav { flex-wrap: wrap; row-gap: 8px; }
  .nav nav { min-width: 0; }
  .float.f1 { left: -4px; } .float.f2 { right: -2px; }
  .heard { right: 8px; }
}
@media (max-width: 560px) {
  .nav nav > a.button { display: none; } /* the hero has the big install button */
  .pref-label { font-size: 0; } .pref-label select { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- language and color pickers ---------- */
.prefs { display: inline-flex; gap: 8px; align-items: center; }
.pref-label { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; }
select.pref { width: auto; padding: 7px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--card); cursor: pointer; }
.site-foot .prefs { margin-left: auto; }

/* ---------- playful emoji ---------- */
button.poke { background: none; border: 0; padding: 0; box-shadow: none; cursor: pointer; line-height: 1; }
button.poke:hover { transform: scale(1.15); box-shadow: none; }
.poke.pop { animation: pop-emoji .45s ease; }
@keyframes pop-emoji { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-12deg); } 100% { transform: scale(1); } }
.fx-burst { position: fixed; z-index: 50; pointer-events: none; font-size: 26px; line-height: 1;
  animation: fx-fly 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes fx-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(var(--rot)); }
}

/* ---------- try-it soundboard ---------- */
.try { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; padding: 22px; align-items: stretch; }
.stage { position: relative; background: #1f2023; border-radius: 16px; padding: 12px; min-height: 280px; overflow: hidden; }
.stage .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 100%; }
.stage .tile { position: relative; border-radius: 12px; display: grid; place-items: center; min-height: 118px; color: #fff; transition: box-shadow .2s; }
.stage .tile b { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.stage .tile span { position: absolute; left: 10px; bottom: 8px; font-size: 13px; font-weight: 600; background: rgba(0, 0, 0, .4); padding: 2px 8px; border-radius: 6px; }
.t1 { background: #364fc7; } .t2 { background: #0b7285; } .t3 { background: #5f3dc4; } .t4 { background: #2b8a3e; }
.stage.talking .t4 { box-shadow: 0 0 0 4px var(--brand), 0 0 24px var(--brand); }
.stage-caption { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 90%; text-align: center; pointer-events: none;
  font: 900 clamp(26px, 4.4vw, 46px)/1.05 Impact, "Anton", "Arial Black", "Nirmala UI", sans-serif; text-transform: uppercase;
  color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000, 0 6px 16px rgba(0, 0, 0, .5); opacity: 0; }
.stage-caption.show { animation: cap-pop 2.6s ease forwards; }
@keyframes cap-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-4deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(1deg); }
  20% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
.board { display: grid; gap: 14px; align-content: start; }
.tones { display: flex; flex-wrap: wrap; gap: 8px; }
.tone { padding: 8px 14px; font-size: 14px; }
.tone.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pad { justify-content: flex-start; border-radius: 14px; padding: 12px 14px; font-size: 15px; text-align: start; background: var(--field); }
.pad .pe { font-size: 22px; }
.pad:hover { border-color: var(--brand-2); }
.pad.hit { animation: pad-hit .35s ease; }
@keyframes pad-hit { 0% { transform: scale(1); } 40% { transform: scale(.94); background: color-mix(in srgb, var(--brand) 40%, var(--field)); } 100% { transform: scale(1); } }
.try-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--muted); font-weight: 600; }
button.linkish { background: none; border: 0; padding: 4px 8px; color: var(--focus); box-shadow: none; }
@media (max-width: 860px) { .try { grid-template-columns: 1fr; } .stage { min-height: 230px; } }

/* ---------- buy page ---------- */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 16px; }
.product { margin: 0; display: grid; gap: 8px; align-content: start; }
.product h2 { margin: 0; }
.product.best { border: 2px solid transparent; background:
  linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent)) border-box; box-shadow: var(--shadow); }
.product .price { font-size: 36px; font-weight: 900; margin: 0; letter-spacing: -.02em; }
.product p { margin: 0; }
.product button { margin-top: 8px; width: 100%; }
.topup summary { cursor: pointer; font-weight: 700; }
.topup .field { margin-top: 12px; }
.pay-grid { display: grid; grid-template-columns: 232px 1fr; gap: 24px; align-items: start; margin: 14px 0 18px; }
#qr { width: 232px; height: 232px; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.pay-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.keybox { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 20px; }
.keybox code { font-size: 22px; padding: 10px 14px; }
@media (max-width: 580px) { .pay-grid { grid-template-columns: 1fr; justify-items: center; } }

/* ---------- admin ---------- */
.guide-heading .eyebrow { display: block; margin-bottom: 10px; }
.guide-heading h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; margin: 0 0 12px; }
.product-guide .features article { display: flex; flex-direction: column; align-items: start; }
.product-guide .features article p { flex: 1; }
.product-guide .features a { font-weight: 700; }
.guide-callout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; background: var(--card); border: 1px solid var(--line); padding: 24px; border-radius: 20px; margin-top: 20px; }
.guide-callout h3 { margin: 0 0 8px; }.guide-callout p { margin: 0; color: var(--muted); }
@media (max-width: 620px) { .guide-callout { grid-template-columns: 1fr; } }
.admin .wrap { max-width: 1440px; }
.admin-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-head .admin-brand { flex: 1 1 260px; }
.admin-head h1 { margin: 2px 0 0; }
.admin-head form { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.grid > .card { grid-column: span 4; }
.grid > .span-2 { grid-column: span 6; }
.grid .card { margin: 0; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: 8px; align-items: center; }
.bars progress { width: 100%; height: 12px; accent-color: var(--brand-2); }
.requests { margin: 0; padding-left: 20px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
th { color: var(--muted); font-weight: 650; }
.nowrap { white-space: nowrap; }
body.admin .wrap > .card { margin-top: 16px; }
form.inline { display: inline; margin: 0; }
form.inline button { padding: 7px 14px; font-size: 14px; }
.keyform { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 16px; }
.keyform label { display: grid; gap: 4px; font-weight: 650; font-size: 14px; }
.keyform label.check { display: flex; align-items: center; gap: 6px; }
.keyform input[type=number] { width: 110px; }
.keyform input, .keyform select { width: auto; }
.notice { background: #ebfbee; color: #1b5e20; border: 1px solid #b2f2bb; padding: 12px 16px; border-radius: 14px; margin-top: 16px; font-weight: 600; }
.section-title { margin-top: 28px; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-section { padding: 22px 0 8px; scroll-margin-top: 72px; }
.section-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-bottom: 8px; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading p { color: var(--muted); }
.status-list { display: grid; gap: 9px; }
.status-list .ok { color: #15803d; font-weight: 700; }
.admin-actions { position: relative; }
.admin-actions summary { list-style: none; cursor: pointer; }
.admin-actions summary::-webkit-details-marker { display: none; }
.admin-actions > div { position: absolute; z-index: 8; right: 0; top: calc(100% + 6px); min-width: 220px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); display: grid; gap: 6px; }
.admin-actions > div .button { text-align: left; }
@media (max-width: 900px) { .grid > .card, .grid > .span-2 { grid-column: span 6; } }
@media (max-width: 620px) {
  .admin .wrap { padding: 14px 12px 30px; }
  .grid > .card, .grid > .span-2 { grid-column: 1 / -1; }
  .admin-head { align-items: stretch; }
  .admin-head > :is(button, .button, form, details) { flex: 1 1 auto; }
  .admin-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; }
  .admin-nav a { white-space: nowrap; }
  .section-heading { display: block; }
}
@media (prefers-color-scheme: dark) { .notice { background: #16301c; color: #b2f2bb; border-color: #2b8a3e; } }

/* ---------- legal pages ---------- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 30px; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 88%, var(--muted)); }

/* ---------- pricing page ---------- */
.seg { display: inline-flex; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.seg-btn { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; padding: 9px 18px; cursor: pointer; }
.seg-btn[aria-pressed="true"] { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #1c1b20; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.plan { position: relative; margin: 0; display: grid; gap: 10px; align-content: start; }
.plan h2 { margin: 0; }
.plan p { margin: 0; }
.plan.best { border: 2px solid transparent; background:
  linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent)) border-box; box-shadow: var(--shadow); }
.plan .badge { position: absolute; top: -12px; right: 16px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #1c1b20; font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.plan-price { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { padding-left: 24px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-2); font-weight: 900; }
.passes { display: grid; gap: 8px; }
.pass { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.pass-price { font-weight: 900; font-size: 18px; }
.button.small { padding: 7px 14px; font-size: 14px; }

/* admin: activity tiles and charts */
body.admin .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 16px; }
body.admin .tile { background: var(--card, #fff); border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
body.admin .tile b { font-size: 26px; line-height: 1.1; }
body.admin .tile span { color: var(--muted, #666); font-size: 13px; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .bar { fill: var(--brand-2); }
svg.chart .bar.zero { fill: var(--line, rgba(127,127,127,.35)); }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted, #666); font-size: 12px; }
/* admin: packs pages */
.row-wrap { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 6px 0; }
.itemform label, .keyform label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.itemform label.check, .keyform label.check { flex-direction: row; align-items: center; gap: 8px; }
.keyform label.wide { flex: 1 1 100%; }
.keyform textarea, .keyform input[type="file"] { width: 100%; box-sizing: border-box; }
input.narrow { width: 76px; }
td audio { width: 220px; max-width: 100%; display: block; margin-bottom: 4px; }
.itemform label.check { display: flex; flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; }
.itemform input, .itemform select { width: auto; max-width: 100%; }
/* pricing: characters */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.char-card, .cosmetic-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card); }
.char-card.all, .cosmetic-card.all { grid-column: 1 / -1; background: var(--bg-2); }

/* admin: interactive dashboard */
.admin-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin: 8px 0 4px; background: var(--bg); border-bottom: 1px solid var(--line); }
.admin-nav a { padding: 5px 12px; border-radius: 999px; text-decoration: none; color: inherit; border: 1px solid var(--line); font-size: .9rem; }
.admin-nav a:hover, .admin-nav a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-nav .badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .75rem; text-align: center; }
.range { display: inline-flex; gap: 0; margin: 4px 0 10px; }
.range button { border-radius: 0; margin: 0; }
.range button:first-child { border-radius: 8px 0 0 8px; }
.range button:last-child { border-radius: 0 8px 8px 0; }
.range button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chart-sum { font-size: 1.15rem; margin-bottom: 2px; }
.bars li.pick { cursor: pointer; border-radius: 6px; }
.bars li.pick:hover, .bars li.picked { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.toolbar input[type=search] { flex: 1 1 220px; min-width: 160px; }
.filter { display: block; width: 100%; max-width: 360px; margin: 8px 0; }
#messages tbody tr { cursor: pointer; }
#messages .msg { min-width: 200px; max-width: 420px; }
#messages .message-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-line; }
#messages tr.open .message-text { display: block; }
#messages tr.is-done { opacity: .5; }
#messages tr[hidden], #keys tr[hidden] { display: none; }
button.small { padding: 2px 8px; font-size: .8rem; }
/* admin: the numbers tiles share a class name with the home page's picture tiles: undo the picture-tile look here */
body.admin .tile { position: static; display: flex; flex-direction: column; place-items: initial; min-height: 0; color: var(--text); }
body.admin .tile b { width: auto; height: auto; border-radius: 0; display: block; background: none; font-size: 26px; overflow: visible; }
body.admin .tile span { position: static; background: none; padding: 0; color: var(--muted); font-weight: 400; }
.toolbar select, .toolbar input[type=search] { width: auto; }
.toolbar input[type=search] { flex: 1 1 220px; }

/* feedback / uninstall: what comes next, shown after sending */
.thanks .did { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); text-align: start; }
.thanks .did h3 { margin: 0 0 6px; font-size: 1rem; }
.thanks .did ul { margin: 0; padding-inline-start: 20px; }
.thanks .did li { margin: 4px 0; }
/* admin packs: per-item plans */
.tier { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.tier-free { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.tier-pro { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.tier-max { background: color-mix(in srgb, var(--brand-2) 28%, transparent); }
.bulk { align-items: center; margin: 8px 0; }
.thumb { display: block; max-width: 140px; max-height: 100px; border-radius: 8px; border: 1px solid var(--line); }

/* Phonk Mode page */
.phonk { max-width: 1240px; }
.phonk-hero { position: relative; overflow: hidden; min-height: 210px; padding: 28px 32px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 20%, var(--card)), color-mix(in srgb, var(--accent) 8%, var(--card))); }
.phonk-hero h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.045em; margin-top: 18px; }
.phonk-hero p { max-width: 60%; font-size: 14px; }
.phonk-hero-art { position: absolute; inset-inline-end: 55px; top: 26px; transform: rotate(12deg); }
.vinyl { display: grid; place-items: center; width: 150px; height: 150px; border: 8px solid #292332; border-radius: 50%; background: repeating-radial-gradient(circle, #201a29 0 4px, #352c41 5px 6px); box-shadow: 8px 12px 0 color-mix(in srgb, var(--accent) 20%, transparent); }
.vinyl > span { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-size: 42px; }
.music-spark { position: absolute; color: var(--accent); font-size: 38px; }
.spark-one { top: -18px; inset-inline-end: -24px; }
.spark-two { bottom: -8px; inset-inline-start: -24px; }
.phonk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 22px; align-items: start; }
.phonk-library { grid-column: 1; grid-row: 1; min-width: 0; }
.player-card { grid-column: 2; grid-row: 1; position: sticky; top: 20px; border-radius: 24px; }
.player-idle { display: grid; place-items: center; min-height: 220px; border-radius: 18px; font-size: 72px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--card)), color-mix(in srgb, var(--brand) 18%, var(--card))); }
.phonk .player-box { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border-radius: 14px; overflow: hidden; background: #000; }
.phonk .player-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.phonk .now { font-weight: 700; margin: 12px 0 6px; }
.phonk .controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.phonk .controls button { min-width: 44px; }
.phonk .controls #toggle { min-width: 60px; min-height: 52px; font-size: 22px; }
.phonk .controls #open-yt { font-size: 12px; padding: 6px 10px; }
.phonk .controls input[type=range] { flex: 1 1 120px; max-width: 220px; }
.library-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.library-head h2, .library-head p { margin-block: 0 4px; }
.track-search input { width: min(280px, 70vw); }
.playlists { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.playlist { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: var(--bg-2); color: var(--text); cursor: pointer; }
.playlist span { min-width: 1.5em; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); font-size: .78rem; }
.playlist.on { color: var(--brand-ink); background: var(--brand); border-color: var(--brand-2); }
.phonk-library > h2 { margin-top: 8px; }
.tracks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.track { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); }
.track.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.track.locked { opacity: .65; }
.track button { flex: 1; justify-content: flex-start; text-align: start; background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.track-copy { display: grid; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
.track-copy .name { font-weight: 700; }
.track-copy .by { font-size: 12px; }
.track-play { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--brand) 25%, var(--card)); font-size: 15px; }
.track button:disabled { cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .library-head { align-items: stretch; flex-direction: column; }
  .track-search input { width: 100%; }
  .track { align-items: flex-start; }
  .phonk-hero { padding: 22px; min-height: auto; }
  .phonk-hero p { max-width: 100%; }
  .phonk-hero-art { display: none; }
}
@media (max-width: 960px) { .phonk-layout { grid-template-columns: minmax(0, 1fr); } .phonk-library { grid-row: 2; } .player-card { grid-column: 1; grid-row: 1; position: static; } }
.steps ol { padding-inline-start: 22px; }

/* Full plan comparison and individual ownership on the landing page. */
#pricing .plans { max-width: 1180px; align-items: stretch; }
#pricing .purchase-extras { margin-top: 24px; }
#pricing .plan.max { border: 2px solid var(--brand); }

/* Focused admin workspace and a feedback form with clear, compact groups. */
body.admin .wrap { max-width: 1320px; }
body.admin .admin-head { padding-bottom: 16px; }
body.admin .admin-head h1 { font-size: clamp(24px, 3vw, 34px); }
body.admin .admin-nav { padding: 12px 0; gap: 8px; }
body.admin .admin-nav a { padding: 8px 16px; font-weight: 650; }
body.admin .audience-note { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: baseline; padding: 14px 18px; margin: 16px 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
body.admin .audience-note span { color: var(--muted); font-size: 13px; }
body.admin .section-heading { align-items: center; }
body.admin .section-heading p { max-width: 420px; font-size: 14px; }
body.admin .grid > .card { grid-column: span 6; min-width: 0; }
body.admin .card h2 { font-size: 19px; margin-top: 0; }
body.admin .key-create { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 18px 0; }
body.admin .key-create summary { cursor: pointer; font-weight: 650; }
body.admin .keyform { margin: 16px 0 0; }
body.admin .message-expand { display: block; margin-top: 8px; }
body.admin label.check { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; }
body.admin label.check input { width: auto; margin: 0; }
body.admin .admin-breakdown > summary { cursor: pointer; padding: 14px 0; font-weight: 650; }
body.admin .admin-breakdown > .grid { margin-top: 8px; }
body.admin .toolbar { gap: 12px; padding: 12px 0; }
body.admin .toolbar select { width: auto; flex: 1 1 140px; }
body.admin .inbox-empty { padding: 24px; text-align: center; background: var(--bg); border-radius: 12px; }
.feedback-page .wrap.narrow { max-width: 800px; }
.feedback-page .feedback-form { padding: 0; overflow: hidden; }
.feedback-page .feedback-step { padding: 26px 30px; border-bottom: 1px solid var(--line); }
.feedback-page .feedback-step > :first-child { margin-top: 0; }
.feedback-page .feedback-step > :last-child { margin-bottom: 0; }
.feedback-page .feedback-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.feedback-page .feedback-context .field { margin: 0; }
.feedback-page .faces { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-page .faces label { flex: 1; position: relative; }
.feedback-page .faces label > span:first-of-type { width: 100%; height: 64px; border-radius: 12px; }
.feedback-page .rating-caption { display: block; text-align: center; font-size: 13px; margin-top: 6px; }
.feedback-page .checks { margin-top: 24px; }
.feedback-page .checks label { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.feedback-page .feedback-submit { padding: 24px 30px; }
.feedback-page .feedback-submit .primary { width: 100%; }
@media (max-width: 620px) {
  body.admin .admin-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.admin .admin-head .admin-brand { grid-column: 1 / -1; }
  body.admin .admin-head > :is(button, a, form) { width: 100%; }
  body.admin .admin-head form button { width: 100%; }
  body.admin .admin-actions > div { left: 0; right: auto; }
  body.admin .admin-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  body.admin .admin-nav a { flex-shrink: 0; }
  body.admin .grid > .card { grid-column: 1 / -1; }
  body.admin .section-heading { flex-direction: column; align-items: start; }
  body.admin #messages, body.admin #messages tbody { display: block; }
  body.admin #messages thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.admin #messages tr { display: block; padding: 12px; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; }
  body.admin #messages td { display: block; padding: 6px 0; border: 0; white-space: normal; max-width: none; min-width: 0; }
  body.admin #messages td::before { content: attr(data-label); display: block; font-size: 12px; color: var(--muted); font-weight: 650; }
  .feedback-page .feedback-step, .feedback-page .feedback-submit { padding: 20px; }
  .feedback-page .feedback-context { grid-template-columns: 1fr; }
}

/* Responsive public pages: readable cards, reachable navigation and touch targets. */
.nav-links { display: flex; align-items: center; gap: 22px; }
@media (max-width: 1120px) { .float.f1 { left: 0; } .float.f2 { right: 0; } }
:is(.hero, .features, .how, .plans, .products, .guide-callout) > * { min-width: 0; }
.features { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.how { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.products { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
input, select, textarea { max-width: 100%; }
.prose, .keybox, .notice, .error, .product { overflow-wrap: anywhere; }
.ticks li { padding-left: 0; padding-inline-start: 24px; }
.ticks li::before { left: auto; inset-inline-start: 0; }
@media (max-width: 860px) {
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .nav > .brand { grid-column: 1; grid-row: 1; }
  .nav nav { display: contents; }
  .nav .prefs { grid-column: 2; grid-row: 1; }
  .nav .nav-links { grid-column: 1 / -1; grid-row: 2; gap: 4px; justify-content: space-between; }
  .nav .nav-links a:not(.button) { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; font-size: 14px; text-align: center; }
  .nav nav > a.button { display: none; }
  .hero { gap: 28px; }
  .guide-callout { gap: 20px; }
}
@media (max-width: 600px) {
  body:not(.admin) .wrap { padding: 20px 14px 32px; }
  button:not(.poke), .button, summary { min-height: 44px; }
  body:not(.admin) .wrap.nav { padding: 8px 14px 4px; }
  .nav > .brand { font-size: 16px; gap: 6px; }
  .nav .brand img { width: 28px; height: 28px; }
  .nav .pref-label { font-size: 0; gap: 0; }
  .nav select.pref { width: 110px; max-width: 110px; min-height: 44px; padding: 6px; font-size: 16px; }
  .nav .pref-label:last-child select { width: 90px; }
  body:not(.admin) .card { padding: 16px; border-radius: 16px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); line-height: 1.1; margin-block: 16px 12px; }
  .hero h1 .hl { display: inline-block; }
  .lead { font-size: 18px; line-height: 1.55; margin-bottom: 20px; }
  .hero .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero .actions .button { width: 100%; }
  .section { margin-top: 28px; font-size: 28px; }
  .section-sub { font-size: 16px; margin-bottom: 20px; }
  .band, .guide-callout { padding: 20px; border-radius: 18px; }
  .band p { font-size: 16px; }
  .works { justify-content: start; gap: 8px; font-size: 14px; }
  .works span.chip { padding: 8px 12px; }
  .try { gap: 16px; }
  .board { min-width: 0; }
  .pads { gap: 8px; }
  .seg { display: flex; width: 100%; }
  .seg-btn { flex: 1; min-height: 44px; padding: 10px 8px; font-size: 14px; }
  .pass { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .pass > .button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
  .char-card, .cosmetic-card { align-items: start; padding: 12px; }
  .char-card > .button, .cosmetic-card > .button { width: 100%; min-height: 44px; }
  .keybox code { max-width: 100%; font-size: clamp(16px, 4.6vw, 22px); }
  .keybox .button, .keybox button { min-height: 44px; }
  .foot, .site-foot { gap: 12px 16px; line-height: 1.8; }
  .foot .prefs, .site-foot .prefs { margin-inline-start: 0; flex-wrap: wrap; }
  .foot a, .site-foot a { display: inline-block; padding-block: 6px; }
  .feedback-page .feedback-form { padding: 0 !important; }
  .feedback-page .feedback-step, .feedback-page .feedback-submit { padding: 18px 16px; }
  .feedback-page .faces { gap: 8px; }
  .feedback-page .faces label { min-width: 0; }
  .feedback-page .faces label > span:first-of-type { height: 54px; }
  .feedback-page .checks label { min-height: 44px; }
  :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]) { font-size: 16px; }
  body.admin .toolbar select, body.admin .toolbar input { min-height: 44px; }
  body.admin .toolbar .check { min-height: 44px; }
  body.admin .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body.admin .tile { padding: 14px 12px; }
  body.admin .admin-nav a { min-height: 44px; display: flex; align-items: center; }
  body.admin .keyform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  body.admin .keyform label { min-width: 0; max-width: 100%; }
  body.admin .keyform :is(input:not([type=checkbox]), select, textarea) { width: 100%; }
  body.admin .keyform > :is(.check, .wide, .primary), body.admin .keyform label:has(input[name=note]) { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .nav select.pref { width: 88px; max-width: 88px; }
  .nav .pref-label:last-child select { width: 76px; }
  .privacy-note { align-items: start; gap: 12px; }
  .privacy-note .icon { width: 42px; height: 42px; font-size: 24px; }
  .char-grid, .cosmetic-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) { button:hover, .button:hover, .features .card:hover { transform: none; } }
@media (max-height: 500px) and (orientation: landscape) { .topbar { position: static; } }

/* Diwali is a free interface theme; it never unlocks paid effects. */
:root[data-theme="diwali"] {
  --bg:#171126;--card:#251b35;--text:#fff4df;--muted:#cbb8ce;--line:#58405c;--field:#1d142a;
  --brand:#ffd17a;--brand-2:#f1a94d;--on-brand:#29172e;--accent:#ffd17a;--accent-strong:#ffbc60;
  --focus:#a8dfff;--danger:#ffadb5;--danger-bg:#4b2436;--ok:#a2e4ba;color-scheme:dark;
}
:root[data-theme="diwali"] body {isolation:isolate;background-color:var(--bg);background-image:radial-gradient(ellipse at 8% 0%,#b0562526,transparent 50%),radial-gradient(ellipse at 100% 80%,#823d6b26,transparent 50%);}
:root[data-theme="diwali"] body::before {content:"";position:fixed;inset:0 0 auto;height:70px;background:url('/assets/diwali-garland.svg') repeat-x center top/480px 70px;opacity:.42;pointer-events:none;z-index:-1;}
.diwali-news {display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:14px 18px;margin:12px 0 20px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);}
.diwali-news strong{color:var(--accent-strong)}.diwali-news p{flex:1 1 220px;margin:0;font-size:14px;line-height:1.5}.diwali-news select{max-width:100%;font:inherit;color:var(--text);background:var(--field);border:1px solid var(--line);border-radius:10px;min-height:44px;padding:8px;}.diwali-news a{color:var(--accent-strong)}.diwali-news button{min-height:44px;font:inherit;white-space:normal}.diwali-news .diwali-dismiss{font-size:20px;min-width:44px;background:transparent;color:var(--muted);border:0}
@media(prefers-reduced-motion:reduce){:root[data-theme="diwali"] *, :root[data-theme="diwali"] *::before{scroll-behavior:auto!important;}}

:root{--font-body:system-ui,"Noto Sans",sans-serif;--font-display:"Trebuchet MS",system-ui,sans-serif;--scrollbar-thumb:#9aa6b2;--scrollbar-track:var(--bg);--scrollbar-hover:#65707c;--scrollbar-active:#182029;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}*{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border:3px solid var(--scrollbar-track);border-radius:12px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover)}::-webkit-scrollbar-thumb:active{background:var(--scrollbar-active)}@media(forced-colors:active){:root,*{scrollbar-color:auto}}
:root[data-theme="halloween"]{--bg:#130d1d;--bg-2:#201528;--card:#281b32;--text:#fff3e5;--muted:#d2b8cb;--line:#60435a;--field:#1b1424;--brand:#ffb44d;--brand-2:#f06c31;--brand-ink:#281426;--accent:#eeb7ff;--focus:#ffd28c;--ok:#a7e8b2;--error:#ff9a9a;--error-bg:#4a2633;color-scheme:dark}
:root[data-theme="halloween"] body{background-image:radial-gradient(circle at 90% 5%,#b75c4e2b,transparent 38%),radial-gradient(circle at 0% 90%,#7d4aa12b,transparent 45%)}
:root[data-theme="christmas"]{--bg:#0d1f1d;--bg-2:#102a27;--card:#15332f;--text:#f8f4e9;--muted:#c2d7cb;--line:#456f61;--field:#102a27;--brand:#f3c879;--brand-2:#a7d5bd;--brand-ink:#14302c;--accent:#f3c879;--focus:#fff0b6;--ok:#b6efcf;--error:#ffabab;--error-bg:#472a33;color-scheme:dark}
:root[data-theme="christmas"] body{background-image:radial-gradient(circle at 0 0,#b6615533,transparent 40%),radial-gradient(circle at 95% 85%,#5a9b7433,transparent 40%)}
:root[data-theme="new-year"]{--bg:#111b30;--bg-2:#142038;--card:#1d2943;--text:#f4f4ff;--muted:#c6d1e5;--line:#4b6083;--field:#142038;--brand:#ffdb87;--brand-2:#a8c8f0;--brand-ink:#17233c;--accent:#ffdb87;--focus:#ffe8ad;--ok:#b6efcf;--error:#ffabab;--error-bg:#472a33;color-scheme:dark}
:root[data-theme="new-year"] body{background-image:radial-gradient(circle at 95% 0,#d8ae6a33,transparent 40%),radial-gradient(circle at 0 90%,#697dc033,transparent 45%)}
:root[data-theme="lunar"]{--bg:#260d16;--bg-2:#35151d;--card:#421a25;--text:#fff5e6;--muted:#ecc6c6;--line:#88515b;--field:#35151d;--brand:#ffd083;--brand-2:#ec9b75;--brand-ink:#34141e;--accent:#ffd083;--focus:#ffe7a9;--ok:#b6efcf;--error:#ffc2c2;--error-bg:#5a2930;color-scheme:dark}
:root[data-theme="lunar"] body{background-image:radial-gradient(circle at 90% 0,#c45e4b33,transparent 43%),radial-gradient(circle at 10% 95%,#e4ad5f26,transparent 45%)}
:root[data-theme="marigold"]{--bg:#211622;--bg-2:#2c1c2e;--card:#38253a;--text:#fff4e9;--muted:#e7cfd9;--line:#875875;--field:#2c1c2e;--brand:#ffc77e;--brand-2:#f1a16e;--brand-ink:#30182c;--accent:#ffc77e;--focus:#ffe2a6;--ok:#b6efcf;--error:#ffb9b9;--error-bg:#562e3a;color-scheme:dark}
:root[data-theme="marigold"] body{background-image:radial-gradient(circle at 8% 0,#e99b4736,transparent 42%),radial-gradient(circle at 90% 90%,#9c599a30,transparent 45%)}

:root[data-theme="halloween"] body{background-image:url("/assets/season-halloween.svg"),radial-gradient(ellipse at 85% 0%,#a8754326,transparent 55%);background-repeat:repeat-x,no-repeat;background-size:640px 180px,cover;background-position:center top;background-attachment:fixed;}

:root[data-theme="christmas"] body{background-image:url("/assets/season-christmas.svg"),radial-gradient(ellipse at 85% 0%,#a8754326,transparent 55%);background-repeat:repeat-x,no-repeat;background-size:640px 180px,cover;background-position:center top;background-attachment:fixed;}

:root[data-theme="new-year"] body{background-image:url("/assets/season-new-year.svg"),radial-gradient(ellipse at 85% 0%,#a8754326,transparent 55%);background-repeat:repeat-x,no-repeat;background-size:640px 180px,cover;background-position:center top;background-attachment:fixed;}

:root[data-theme="diwali"] body{background-image:url("/assets/season-diwali.svg"),radial-gradient(ellipse at 85% 0%,#a8754326,transparent 55%);background-repeat:repeat-x,no-repeat;background-size:640px 180px,cover;background-position:center top;background-attachment:fixed;}

/* A full-width, compact rail: every overlapping festival keeps its own actions. */
/* One compact notification, including when festival windows overlap. */
.festival-news{display:grid!important;grid-template-columns:minmax(0,1fr) 32px;align-items:center!important;gap:10px;padding:10px 14px;margin:10px 0 16px;min-width:0;grid-column:1/-1}
.festival-news-items,.festival-news-copy{min-width:0}
.festival-news-item{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-width:0}
.festival-news-copy strong{color:var(--text);font-size:14px;line-height:1.4}
.festival-news-item p{margin:2px 0 0!important;font-size:12px;line-height:1.4}
.festival-news-actions{display:flex;gap:8px;align-items:center;min-width:0;flex-shrink:0}
.festival-news-actions select{max-width:190px;min-width:80px;min-height:36px;padding:6px 8px;font:inherit;font-size:13px}
.festival-news-actions button{font:inherit;font-size:13px;min-height:36px;padding:6px 10px;white-space:nowrap}
.festival-news-actions a{color:var(--text);text-decoration:underline;display:inline-flex;align-items:center;min-height:36px;font-size:13px;white-space:nowrap}
.festival-news .diwali-dismiss{min-width:32px;min-height:36px;padding:4px}
@media(max-width:800px){.festival-news{padding:8px 10px;gap:6px;align-items:start!important}.festival-news-item{flex-direction:column;align-items:stretch;gap:4px}.festival-news-item p{display:none}.festival-news-actions{width:100%;gap:6px}.festival-news-actions select{flex:1 1 0;min-width:0;max-width:none;min-height:40px}.festival-news-actions button,.festival-news-actions a{min-height:40px}.festival-news-copy strong{font-size:13px}.festival-news .diwali-dismiss{min-height:40px}}

:root[data-theme="holi"]{--bg:#201e30;--bg-2:#28243a;--card:#302b43;--field:#252038;--text:#fff4f6;--muted:#d2bed4;--line:#65516f;--brand:#edbf81;--brand-2:#e4a7c4;--on-brand:#30243a;--brand-ink:#30243a;--accent:#e7b9d5;--accent-strong:#f2c5dd;--focus:#f4d8aa;--ok:#b0dcbb;--danger:#f5a0aa;color-scheme:dark;}
:root[data-theme="holi"] body{background-color:var(--bg);background-image:url("/assets/season-holi.svg");background-repeat:repeat-x;background-position:center top;background-size:640px 180px;}
:root[data-theme="valentines"]{--bg:#201e30;--bg-2:#28243a;--card:#302b43;--field:#252038;--text:#fff4f6;--muted:#d2bed4;--line:#65516f;--brand:#edbf81;--brand-2:#e4a7c4;--on-brand:#30243a;--brand-ink:#30243a;--accent:#e7b9d5;--accent-strong:#f2c5dd;--focus:#f4d8aa;--ok:#b0dcbb;--danger:#f5a0aa;color-scheme:dark;}
:root[data-theme="valentines"] body{background-color:var(--bg);background-image:url("/assets/season-valentines.svg");background-repeat:repeat-x;background-position:center top;background-size:640px 180px;}