/* Demo-only styles. The effects themselves live in ../kit.css. */
@font-face { font-family: 'Bricolage'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/bricolage.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(fonts/archivo.woff2) format('woff2'); }

/* ---------- themes: the kit is themed purely through custom properties ---------- */
:root, [data-theme=candy] {
  --paper: #fff6ee; --ink: #241028; --muted: #5f4660;
  --pink: #ff9ccb; --hot: #c8124f; --butter: #ffd84d; --mint: #8eeacb; --lilac: #cdb9ff; --sky: #a5d8ff; --plum: #2a0f30;
  --hero-bg: var(--pink); --hero-ink: var(--ink); --stage: var(--butter);
  --band1-bg: var(--ink); --band1-ink: var(--butter); --band2-bg: var(--hot); --band2-ink: #fff;
  --quiz-bg: var(--plum); --quiz-ink: #fff; --stats-bg: var(--butter); --kitsec-bg: var(--mint); --foot-bg: var(--ink); --foot-ink: var(--paper);
  --card-bg: #fff; --card-line: var(--ink);
  --display: 'Bricolage', 'Arial Rounded MT Bold', system-ui, sans-serif; --d-wt: 800; --d-stretch: 100%; --d-track: -.045em; --d-case: none; --d-lh: .92;
  --body: 'Bricolage', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --glow: none; --shadow: 0 6px 0 var(--ink);
  --kit-accent: var(--hot); --kit-accent-ink: #fff; --kit-accent-2: var(--butter); --kit-ink: var(--ink); --kit-paper: var(--paper);
  --kit-muted: var(--muted); --kit-line: rgb(36 16 40 / .15); --kit-radius: 22px; --kit-font-label: var(--body);
  --kit-confetti: #c8124f, #ffd84d, #8eeacb, #ff9ccb, #cdb9ff, #241028;
  color-scheme: light;
}
[data-theme=neon] {
  --paper: #0c0a12; --ink: #f6f2ff; --muted: #bdb3d4;
  --pink: #ff3ec8; --hot: #ff3ec8; --butter: #e4ff3a; --mint: #2ef2ff; --lilac: #9b7bff; --sky: #2ef2ff; --plum: #150f24;
  --hero-bg: #110b1f; --hero-ink: #fff; --stage: #1d1338;
  --band1-bg: var(--mint); --band1-ink: #04161a; --band2-bg: var(--hot); --band2-ink: #16001a;
  --quiz-bg: #150f24; --quiz-ink: #fff; --stats-bg: #0c0a12; --kitsec-bg: #120c22; --foot-bg: #050408; --foot-ink: #f6f2ff;
  --card-bg: #161126; --card-line: #3a2d5c;
  --display: 'Archivo', 'Arial Narrow', sans-serif; --d-wt: 900; --d-stretch: 62%; --d-track: -.01em; --d-case: uppercase; --d-lh: .86;
  --body: 'Archivo', system-ui, sans-serif;
  --glow: 0 0 18px rgb(255 62 200 / .55), 0 0 2px rgb(255 62 200 / .9); --shadow: 0 0 0 2px var(--hot), 0 0 26px rgb(255 62 200 / .45);
  --kit-accent: var(--hot); --kit-accent-ink: #16001a; --kit-accent-2: var(--mint); --kit-ink: var(--ink); --kit-paper: var(--paper);
  --kit-muted: var(--muted); --kit-line: rgb(246 242 255 / .18); --kit-radius: 10px;
  --kit-confetti: #ff3ec8, #2ef2ff, #e4ff3a, #9b7bff, #ffffff;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased; transition: background-color .4s, color .4s; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: var(--d-wt); font-stretch: var(--d-stretch); letter-spacing: var(--d-track);
  text-transform: var(--d-case); line-height: var(--d-lh); text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
main, .foot, .ribbon { overflow-x: clip; }
.wrap { width: min(1240px, 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; border-radius: 12px; background: var(--ink); color: var(--paper); font-weight: 700; }
.skip:focus { top: 1rem; }
.label { display: inline-flex; align-items: center; gap: .5em; font: 700 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.chip { display: inline-flex; align-items: center; gap: .45em; padding: .45em .9em; border: 2px solid currentColor; border-radius: 999px; }
code, .code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .86em; }
.tagk { display: inline-block; padding: .25em .6em; border-radius: 8px; background: var(--ink); color: var(--paper);
  font: 600 .72rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0; text-transform: none; }

/* ---------- top ribbon + header ---------- */
.ribbon { background: #241028; color: #fff6ee; font-size: .82rem; text-align: center; padding: .5rem 1rem; }
.ribbon b { color: #ffd84d; }
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--hero-bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); color: var(--hero-ink); }
.hdr .wrap { display: flex; align-items: center; gap: .5rem; min-height: 68px; }
.logo { display: inline-flex; align-items: baseline; gap: .15em; margin-right: auto; font: var(--d-wt) 1.65rem/1 var(--display); font-stretch: var(--d-stretch);
  letter-spacing: -.04em; text-decoration: none; text-transform: var(--d-case); }
.logo i { font-style: normal; color: var(--hot); text-shadow: var(--glow); }
[data-theme=candy] .logo i { color: var(--ink); }
.logo svg { flex: none; width: 1.1em; height: 1.1em; align-self: center; }
.nav { display: none; gap: 1.6rem; margin-right: 1rem; font-weight: 600; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ibtn { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .55rem; border: 2px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.ibtn svg { width: 18px; height: 18px; }
.ibtn[aria-pressed=true] .i-pause, .ibtn[aria-pressed=false] .i-play { display: none; }
.swatches { display: flex; gap: .35rem; padding: 3px; border: 2px solid currentColor; border-radius: 999px; }
.sw { width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: conic-gradient(from 200deg, #ff9ccb 0 33%, #ffd84d 0 66%, #8eeacb 0); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .25); }
.sw--neon { background: conic-gradient(from 200deg, #ff3ec8 0 33%, #0c0a12 0 66%, #2ef2ff 0); }
.sw[aria-pressed=true] { outline: 3px solid currentColor; outline-offset: 1px; }
.bag { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .5rem 0 1rem; border: 2px solid currentColor; border-radius: 999px;
  background: var(--ink); color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; }
.bag .badge { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .4rem; border-radius: 999px; background: var(--butter); color: #241028; font-variant-numeric: tabular-nums; }
[data-theme=neon] .bag { background: transparent; color: var(--ink); box-shadow: var(--shadow); border-color: transparent; }
[data-theme=neon] .bag .badge { background: var(--hot); color: #16001a; }

/* ---------- hero ---------- */
.hero { position: relative; z-index: 2; background: var(--hero-bg); color: var(--hero-ink); padding: 1.5rem 0 3.5rem; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 18px; pointer-events: none;
  background: radial-gradient(circle at 18px 0, var(--hero-bg) 17px, transparent 18px) 0 0 / 36px 18px repeat-x; }
[data-theme=neon] .hero { background: radial-gradient(60% 50% at 85% 40%, rgb(255 62 200 / .22), transparent 70%), radial-gradient(50% 40% at 10% 90%, rgb(46 242 255 / .16), transparent 70%), var(--hero-bg); }
[data-theme=neon] .hero::after { background: linear-gradient(90deg, var(--hot), var(--mint)); height: 3px; bottom: 0; box-shadow: 0 0 18px var(--hot); }
.hero .wrap { display: grid; gap: 1.5rem; }
.hero .label { margin-bottom: 1.1rem; }
.h1 { font-size: clamp(3.1rem, 14.5vw, 7.2rem); }
[data-theme=neon] .h1 { font-size: clamp(3.6rem, 19vw, 9rem); }
.h1 del { color: inherit; opacity: .55; }
.h1 ins { color: var(--hot); --kit-strike: var(--hot); text-shadow: var(--glow); }
[data-theme=candy] .h1 ins { color: var(--ink); background: linear-gradient(transparent 62%, #fff 0 92%, transparent 0); padding-inline: .06em; }
.hero__sub { max-width: 34ch; margin-top: 1.25rem; font-size: clamp(1.1rem, 4.2vw, 1.4rem); line-height: 1.4; }
.hero__sub .rot { font-weight: 800; color: var(--ink); background: #fff; border-radius: 10px; padding: 0 .3em; }
[data-theme=neon] .hero__sub .rot { color: var(--mint); background: transparent; border: 2px solid var(--mint); }
.ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 56px; padding: .8em 1.6em; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 1.05rem/1 var(--body); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow); }
.btn--hot { background: var(--hot); color: var(--kit-accent-ink); }
.btn--ghost { background: transparent; color: inherit; box-shadow: none; }
[data-theme=candy] .btn--hot { box-shadow: 0 6px 0 var(--ink); }
[data-theme=neon] .btn { border-color: transparent; }
[data-theme=neon] .btn--ghost { box-shadow: 0 0 0 2px var(--mint); }
.btn svg { width: 22px; height: 22px; }
.proof { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; font-size: .92rem; font-weight: 600; }
.proof__dots { display: flex; }
.proof__dots span { width: 34px; height: 34px; margin-left: -10px; border: 2px solid var(--hero-bg); border-radius: 50%; background: var(--c); }
.proof__dots span:first-child { margin-left: 0; }

.stage { position: relative; aspect-ratio: 1 / .92; width: 100%; max-width: 640px; justify-self: center; }
.stage__blob { position: absolute; inset: 6% 4% 4% 6%; background: var(--stage); border: 3px solid var(--ink); border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; }
[data-theme=neon] .stage__blob { border-color: var(--mint); box-shadow: 0 0 40px rgb(46 242 255 / .35), inset 0 0 60px rgb(255 62 200 / .25); }
.stage__dots { position: absolute; inset: 0; background: radial-gradient(circle, var(--ink) 2px, transparent 2.5px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(circle at 70% 30%, #000, transparent 55%); mask: radial-gradient(circle at 70% 30%, #000, transparent 55%); opacity: .25; }
.it { position: absolute; }
.it > div, .it svg { width: 100%; height: 100%; }
.it svg { overflow: visible; filter: drop-shadow(0 14px 14px rgb(36 16 40 / .22)); }
[data-theme=neon] .it svg { filter: drop-shadow(0 0 14px rgb(255 62 200 / .45)) saturate(1.25); }
.it--bear { left: 27%; top: 18%; width: 46%; height: 56%; z-index: 3; }
.it--pop { right: 3%; top: 0; width: 30%; height: 38%; z-index: 2; }
.it--worm { left: 2%; bottom: 4%; width: 36%; height: 34%; z-index: 4; }
.it--star { left: 6%; top: 6%; width: 22%; height: 24%; z-index: 2; }
.it--cola { right: 6%; bottom: 8%; width: 20%; height: 34%; z-index: 4; }
.it--wrap { left: 58%; top: 52%; width: 26%; height: 22%; z-index: 5; }
.stage .sticker { position: absolute; right: -2%; bottom: -6%; z-index: 6; --kit-sticker-size: clamp(7.5rem, 30vw, 10rem); --kit-sticker-bg: var(--hot); --kit-sticker-ink: #fff;
  border: 3px solid var(--ink); rotate: -8deg; }
[data-theme=neon] .stage .sticker { --kit-sticker-ink: #16001a; box-shadow: var(--shadow); border-color: transparent; }
.sticker__core { width: 44%; height: 44%; color: #fff; }
[data-theme=neon] .sticker__core { color: #16001a; }

/* ---------- marquee bands ---------- */
.bands { position: relative; z-index: 1; padding: 3.25rem 0 2.5rem; overflow-x: clip; }
.band { width: 112%; margin-left: -6%; padding: .9rem 0; font: var(--d-wt) clamp(1.5rem, 6vw, 2.6rem)/1 var(--display); font-stretch: var(--d-stretch);
  letter-spacing: -.02em; text-transform: uppercase; border-block: 3px solid var(--ink); --kit-marquee-gap: 1.4rem; }
.band--1 { background: var(--band1-bg); color: var(--band1-ink); rotate: -3deg; position: relative; z-index: 2; }
.band--2 { background: var(--band2-bg); color: var(--band2-ink); rotate: 2.2deg; margin-top: -.4rem; }
.band span { display: inline-flex; align-items: center; gap: 1.4rem; }
.band svg { width: .8em; height: .8em; flex: none; }

/* ---------- section scaffolding ---------- */
.sec { padding: clamp(4rem, 10vw, 7.5rem) 0; position: relative; }
.sec__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.h2 { font-size: clamp(2.6rem, 10vw, 5.6rem); }
[data-theme=neon] .h2 { font-size: clamp(3rem, 13vw, 7rem); }
.lede { max-width: 52ch; font-size: 1.15rem; color: var(--muted); }

/* ---------- products ---------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.card { display: flex; flex-direction: column; border: 3px solid var(--card-line); border-radius: 28px; background: var(--card-bg); }
[data-theme=neon] .card { border-width: 2px; border-radius: 14px; }
.card__art { position: relative; display: grid; place-items: center; height: 230px; margin: 10px 10px 0; border-radius: 20px; background: var(--bg); transform-style: preserve-3d; }
[data-theme=neon] .card__art { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--bg) 45%, transparent), transparent 70%), #0e0a1a; }
.card__art svg { width: 62%; height: 80%; overflow: visible; filter: drop-shadow(0 12px 10px rgb(36 16 40 / .25)); }
.card__tag { position: absolute; top: 12px; left: 12px; rotate: -6deg; padding: .35em .75em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.card__body { display: grid; gap: .5rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.card h3 { font-size: 1.65rem; line-height: 1; }
[data-theme=neon] .card h3 { font-size: 2rem; }
.card p { color: var(--muted); }
.card__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.price { color: var(--ink) !important; font-weight: 800; font-size: 1.2rem; }
.price small { font-weight: 500; font-size: .8rem; color: var(--muted); }
.card .kit-btn { min-height: 48px; padding-inline: 1.1em; }
.kit-added::after { content: " \2713"; }

/* ---------- quiz ---------- */
.quiz { background: var(--quiz-bg); color: var(--quiz-ink); overflow-x: clip;
  --kit-ink: #fff; --kit-paper: #3a1a43; --kit-focus: #fff; --kit-accent: var(--butter); --kit-accent-ink: #241028; --kit-line: rgb(255 255 255 / .2); --kit-muted: #e6d6ea; }
[data-theme=neon] .quiz { --kit-paper: #1d1533; --kit-accent: var(--mint); --kit-accent-ink: #04161a; --kit-muted: #cfc6e4; }
.quiz .wrap { display: grid; gap: 2.5rem; }
.quiz .h2 em { font-style: normal; color: var(--butter); }
[data-theme=neon] .quiz .h2 em { color: var(--mint); text-shadow: 0 0 20px rgb(46 242 255 / .6); }
.quiz .lede { color: #eadbee; }
[data-theme=neon] .quiz .lede { color: var(--muted); }
.quiz__art { position: relative; height: 210px; margin-top: 1.5rem; }
.quiz__art .it { width: 34%; height: 90%; }
.qcard { padding: clamp(1.25rem, 4vw, 2.25rem); border: 3px solid #fff; border-radius: 30px; background: rgb(255 255 255 / .06); }
[data-theme=neon] .qcard { border: 2px solid var(--mint); border-radius: 14px; box-shadow: 0 0 40px rgb(46 242 255 / .18); }
.qcard .kit-quiz__opt span b { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; font-size: .85rem; }
.qcard .kit-btn { box-shadow: 0 4px 0 #000; border-color: #fff; }
.qcard .kit-btn--ghost { color: #fff; }
.result { display: grid; gap: .9rem; }
.result__top { display: flex; gap: 1rem; align-items: center; }
.result__top svg { width: 92px; height: 92px; flex: none; overflow: visible; }
.result h3 { font-size: clamp(2rem, 7vw, 3rem); color: var(--butter); }
[data-theme=neon] .result h3 { color: var(--mint); }
.result .kicker { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.result__btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- stats ---------- */
.stats { background: var(--stats-bg); border-block: 3px solid var(--ink); }
[data-theme=neon] .stats { border-color: var(--hot); box-shadow: 0 0 30px rgb(255 62 200 / .25); }
.stats .wrap { display: grid; gap: 2rem; }
.stat { display: grid; gap: .3rem; border-top: 3px solid var(--ink); padding-top: 1rem; }
[data-theme=neon] .stat { border-color: var(--mint); }
.stat b { font: var(--d-wt) clamp(3.6rem, 17vw, 7.5rem)/.9 var(--display); font-stretch: var(--d-stretch); letter-spacing: -.05em; }
[data-theme=neon] .stat b { color: var(--butter); text-shadow: 0 0 22px rgb(228 255 58 / .45); letter-spacing: -.01em; }
.stat > span { font-weight: 700; font-size: 1.05rem; }
.stats .note { font-size: .82rem; color: var(--muted); }

/* ---------- before / after ---------- */
.ba-frame { container-type: inline-size; border: 3px solid var(--ink); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 0 var(--ink); }
[data-theme=neon] .ba-frame { border-color: var(--mint); box-shadow: 0 0 40px rgb(46 242 255 / .25); border-radius: 14px; }
.ba { aspect-ratio: 4 / 5; border-radius: 0; }
.mock { position: relative; display: flex; flex-direction: column; overflow: hidden; font-size: 4cqw; }
.mock--old { background: #ececec; color: #3d3d3d; font-family: 'Times New Roman', Times, serif; }
.mock--old .m-top { display: flex; justify-content: space-between; align-items: center; padding: .7em 1em; background: #d4d4d4; font-size: .9em; }
.mock--old .m-top b { font-size: 1.1em; letter-spacing: .05em; }
.mock--old .m-nav { display: none; gap: 1em; color: #1f4fbf; text-decoration: underline; }
.mock--old .m-img { display: grid; place-items: center; height: 38%; margin: 1em; background: #c9c9c9; color: #4a4a4a; letter-spacing: .1em; }
.mock--old .m-body { padding: 0 1em; display: grid; gap: .5em; }
.mock--old h4 { margin: 0; font-size: 1.5em; font-weight: 400; }
.mock--old p { font-size: .85em; }
.mock--new { background: var(--pink); color: #241028; font-family: 'Bricolage', system-ui, sans-serif; }
.mock--new .m-top { display: flex; justify-content: space-between; align-items: center; padding: .8em 1em; font-weight: 800; }
.mock--new .m-top span { padding: .25em .7em; border-radius: 99px; background: #241028; color: #fff; font-size: .8em; }
.mock--new h4 { margin: 0 0 0 auto; max-width: 62%; text-align: right; padding: 0 .6em; font-size: 2.6em; line-height: .9; letter-spacing: -.045em; font-weight: 800; }
.mock--new h4 s { opacity: .55; text-decoration-color: #c8124f; text-decoration-thickness: .12em; }
.mock--new .m-cta { align-self: flex-end; margin: .9em 1em; padding: .55em 1.1em; border: 2px solid #241028; border-radius: 99px; background: #c8124f; color: #fff; font-weight: 800; box-shadow: 0 .2em 0 #241028; font-size: .9em; }
.mock--new .m-art { position: absolute; left: 2%; bottom: 2%; width: 50%; height: 42%; }
.mock--new .m-art svg { width: 100%; height: 100%; overflow: visible; }
.mock--new .m-band { position: absolute; left: -5%; right: -5%; bottom: 40%; rotate: -4deg; padding: .3em 0; background: #241028; color: #ffd84d; font-weight: 800; white-space: nowrap; font-size: .9em; text-align: center; }
.ba-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1rem; color: var(--muted); font-size: .92rem; }

/* ---------- kit section ---------- */
.kitsec { background: var(--kitsec-bg); }
.kitsec .lede { color: var(--ink); opacity: .85; }
[data-theme=neon] .kitsec .lede { opacity: 1; color: var(--muted); }
.codebox { margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--ink); color: var(--paper); overflow-x: auto; font-size: .9rem; line-height: 1.6; }
[data-theme=neon] .codebox { background: #000; border: 1px solid #3a2d5c; color: #e9e3ff; }
.codebox .a { color: #ff9ccb; } .codebox .v { color: #ffd84d; }
[data-theme=neon] .codebox .a { color: var(--hot); } [data-theme=neon] .codebox .v { color: var(--mint); }
.mods { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); margin: 0; padding: 0; list-style: none; }
.mod { display: grid; gap: .3rem; padding: 1rem 1.1rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); }
[data-theme=neon] .mod { border-color: #3a2d5c; background: #17122a; }
.mod b { font: 800 1.15rem/1.1 var(--body); }
.mod span { font-size: .9rem; color: var(--muted); }
.mod small { font: 600 .75rem/1 ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.themes { display: grid; gap: 1rem; margin-top: 3rem; }
.tcard { display: grid; gap: .8rem; padding: 1.4rem; border-radius: 22px; border: 3px solid var(--ink); text-align: left; font: inherit; cursor: pointer; transition: transform .3s var(--kit-spring); }
.tcard:hover { transform: translateY(-4px) rotate(-.6deg); }
.tcard[aria-pressed=true] { outline: 4px solid var(--ink); outline-offset: 4px; }
.tcard--candy { background: #ff9ccb; color: #241028; }
.tcard--neon { background: #0c0a12; color: #f6f2ff; border-color: #ff3ec8; box-shadow: 0 0 26px rgb(255 62 200 / .35); }
.tcard b { font: 800 2rem/1 'Bricolage', sans-serif; letter-spacing: -.04em; }
.tcard--neon b { font: 900 2.4rem/1 'Archivo', sans-serif; font-stretch: 62%; text-transform: uppercase; letter-spacing: 0; color: #ff3ec8; text-shadow: 0 0 14px rgb(255 62 200 / .6); }
.tcard .pal { display: flex; gap: .4rem; }
.tcard .pal i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; background: var(--c); }
.joy { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.5rem; }

/* ---------- footer ---------- */
.foot { background: var(--foot-bg); color: var(--foot-ink); padding: 4rem 0 7rem; overflow: hidden; }
.foot__big { font: var(--d-wt) clamp(4.5rem, 24vw, 19rem)/.8 var(--display); font-stretch: var(--d-stretch); letter-spacing: -.06em; text-transform: var(--d-case); color: var(--pink); }
[data-theme=neon] .foot__big { color: var(--hot); text-shadow: 0 0 30px rgb(255 62 200 / .4); letter-spacing: -.01em; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 2rem; font-size: .95rem; }
.foot__row a { text-underline-offset: 3px; }
.foot__credit { opacity: .9; }

/* event console: shows the CustomEvents the kit fires (for builders / analytics) */
.evlog { position: fixed; left: 1rem; bottom: 1rem; z-index: 55; display: none; max-width: min(340px, calc(100vw - 6rem)); padding: .55rem .8rem; border-radius: 12px;
  background: var(--ink); color: var(--paper); font: 600 .75rem/1.35 ui-monospace, Menlo, Consolas, monospace; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  translate: 0 calc(100% + 2rem); visibility: hidden; transition: translate .4s var(--kit-spring), visibility 0s .4s; }
.evlog.on { translate: none; visibility: visible; transition-delay: 0s; }
.evlog b { color: var(--butter); }
[data-theme=neon] .evlog { background: #000; border: 1px solid var(--mint); }

/* ---------- larger screens ---------- */
@media (min-width: 700px) {
  .stats .wrap { grid-template-columns: repeat(3, 1fr); }
  .themes { grid-template-columns: 1fr 1fr; }
  .ba { aspect-ratio: 16 / 9; }
  .mock { font-size: 2.1cqw; }
  .mock--old .m-nav { display: flex; }
  .mock--new h4 { font-size: 3.2em; max-width: 50%; }
  .mock--new .m-art { width: 34%; height: 64%; left: 6%; bottom: 8%; }
  .mock--new .m-band { bottom: 10%; left: 44%; right: -5%; }
  .evlog { display: block; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .hero { padding: 2.5rem 0 5rem; }
  .hero .wrap { grid-template-columns: 1.08fr .92fr; align-items: center; min-height: min(680px, calc(100svh - 120px)); }
  .quiz .wrap { grid-template-columns: .9fr 1.1fr; align-items: start; }
  .quiz__art { height: 260px; }
  .sec__head--split { grid-template-columns: 1.2fr .8fr; align-items: end; }
}
@media (prefers-reduced-motion: reduce) { body, .evlog, .tcard { transition: none; } }

.ba .kit-ba__tag { top: auto; bottom: 1rem; }
@media (max-width: 420px) {
  .hdr .wrap { gap: .4rem; width: calc(100% - 1.5rem); }
  .bag { padding: 0 .4rem 0 .4rem; }
  .bag .bag__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bag::before { content: ""; width: 20px; height: 20px; margin-left: .25rem; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12l1 14H5L6 7Zm3 0a3 3 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12l1 14H5L6 7Zm3 0a3 3 0 0 1 6 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
}