/* ==========================================================================
   Qream · Birthday
   Figma frame is 1680 × 955. --s is one Figma pixel, scaled to the viewport.
   ========================================================================== */

:root {
  --lime: #9bff00;
  --black: #000;
  --white: #fff;
  --s: min(calc(100vw / 1680), calc(100vh / 955));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

body { position: fixed; inset: 0; }

img { display: block; max-width: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1 { margin: 0; font-weight: 900; }

/* ============================================================ BACKDROP */

.backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }

.bg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity, transform;
}
.bg > img { width: 100%; height: 100%; object-fit: cover; }

.bg-video { width: 100%; height: 100%; object-fit: cover; }
.bg-balloons { mix-blend-mode: screen; }
.bg-glitter  { mix-blend-mode: lighten; }

.bg-party {
  background: radial-gradient(47.1% 47% at 50% 50%,
    #4800da 44.7%, #3e04b3 58.5%, #34088d 72.4%, #2a0b67 86.2%, #200f41 100%);
}
.bg-party::after {           /* the outer glow stretches to fill any aspect ratio */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(20, 8, 44, .55) 100%);
}
.bg-party .graffiti {
  position: absolute;
  left: 50%; top: 34%;
  width: calc(1978 * var(--s)); height: auto;
  min-width: 118vw;
  transform: translate(-50%, -50%);
  opacity: .12;
  mix-blend-mode: plus-lighter;
}

.bg-words { overflow: hidden; }
.words-row {
  position: absolute; left: 50%; top: 50%;
  display: flex; white-space: pre;
  font-weight: 700;
  font-size: max(90px, calc(270 * var(--s)));
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .1);
  text-shadow: 0 4px 54px rgba(0, 0, 0, .55);
}
/* both lines cross at the middle of the screen */
.words-row.r1 { transform: translate(-50%, -50%) rotate(-15deg); }
.words-row.r2 { transform: translate(-50%, -50%) rotate(15deg); }
.words-row .track { display: flex; will-change: transform; }
.words-row .track span { display: block; }
/* running lines: the track holds two identical halves, each wider than the screen,
   and slides by exactly one half — so the loop never runs out and has no seam */
.words-row.r1 .track { animation: run-left var(--run, 20s) linear infinite; }
.words-row.r2 .track { animation: run-right var(--run, 20s) linear infinite; }
@keyframes run-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes run-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .words-row .track { animation-duration: 120s; } }

.hbf { position: absolute; max-width: none; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#fwFx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen; }
#dropFx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
#boomFx { position: fixed; inset: 0; z-index: 14; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
#popFx { position: fixed; inset: 0; z-index: 15; width: 100%; height: 100%; pointer-events: none; opacity: 0; }

/* the poppers are invisible emitters: only what flies out of them shows */
.popper {
  position: absolute; bottom: calc(-30 * var(--s) - 20px);
  width: max(64px, calc(120 * var(--s))); aspect-ratio: 120 / 200;
  opacity: 0;
  pointer-events: none !important;
}
.popper svg { width: 100%; height: 100%; display: block; visibility: hidden; }
.popper .mouth { position: absolute; left: 50%; top: 14%; width: 2px; height: 2px; }
.popper.l { left: max(10px, calc(60 * var(--s))); transform: rotate(32deg); transform-origin: 50% 100%; }
.popper.r { right: max(10px, calc(60 * var(--s))); transform: rotate(-32deg); transform-origin: 50% 100%; }
@media (max-width: 1000px) {
  .popper { width: 58px; bottom: -34px; }
  .popper.l { left: -14px; }
  .popper.r { right: -14px; }
}

.bg-cam { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }


.cam-shade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%),
    linear-gradient(0deg, rgba(24, 6, 70, .55) 0%, transparent 45%);
}

#scene {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ============================================================ CHROME */

.chrome {
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 20;
  height: 110px;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.logo {
  position: absolute; left: 40px; top: 40.5px;
  display: flex; align-items: flex-start; gap: 1px;
  text-decoration: none;
}
.logo img { width: 83px; height: 19px; }
.logo sup { font-size: 7.66px; line-height: .88; font-weight: 300; color: var(--lime); }

.steps {
  position: absolute; left: 50%; top: 49px;
  display: flex; gap: 16px;
  transform: translateX(-50%);
}
.step {
  position: relative; z-index: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px dashed rgba(255, 255, 255, .6);
  border-radius: 4px;
  font-weight: 600; font-size: 15px; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .6);
  transition: color .5s var(--ease-out), border-color .5s var(--ease-out), transform .3s var(--ease-out);
}
.step:hover { transform: translateY(-2px); color: #fff; border-color: #fff; }
.step.on { color: #000; border-color: transparent; }
.steps-thumb {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px;
  border-radius: 4px;
  background: var(--lime);
  box-shadow: 0 0 24px rgba(155, 255, 0, .35);
}

.tape {
  position: absolute; right: 40px; top: 29px;
  width: 136px; height: 54px;
  transition: transform .4s var(--ease-out);
}
.tape img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.tape span {
  position: absolute; left: 50%; top: 50%;
  top: 53%;
  transform: translate(-50%, -50%) rotate(-3.3deg);
  font-weight: 800; font-size: 16px; letter-spacing: -.03em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--lime);
}
.tape:hover { transform: rotate(-2deg) scale(1.05); }
.tape[aria-pressed="true"] span::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 6px; vertical-align: 2px;
  border-radius: 50%; background: var(--lime);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }

/* ============================================================ SCENES */

.scenes { position: fixed; inset: 0; z-index: 10; pointer-events: none; }

.scene {
  position: absolute; inset: 0;
  visibility: hidden;
}
.scene.active { pointer-events: auto; }
.scene.active * { pointer-events: auto; }

.txt {
  position: absolute; left: 50%; top: 50%;
  width: min(92vw, calc(1346 * var(--s)));
  display: flex; flex-direction: column; align-items: center;
  gap: max(18px, calc(42 * var(--s)));
  text-align: center;
  transform: translate(-50%, -50%);
  perspective: 1400px;
}
.s-intro .txt { top: calc(50% - 44 * var(--s)); }
.s-special .txt, .s-perm .txt { top: calc(50% + 20 * var(--s)); }

.kicker {
  font-size: max(15px, calc(20 * var(--s)));
  line-height: 1.05;
  letter-spacing: -.01em;
}
.kicker.up { text-transform: uppercase; opacity: .6; }

.lede {
  max-width: calc(818 * var(--s));
  min-width: min(100%, 300px);
  font-size: max(15px, calc(20 * var(--s)));
  line-height: 1.3;
  letter-spacing: -.01em;
}
.lede.narrow { max-width: max(300px, calc(590 * var(--s))); }
.lede p + p { margin-top: calc(18 * var(--s)); }

/* ---- headlines ---- */
.h3d {
  font-weight: 900;
  text-transform: uppercase;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.h-xl {
  width: min(92vw, calc(1186 * var(--s)));
  font-size: max(40px, calc(120 * var(--s)));
  line-height: .9;
  letter-spacing: -.03em;
  text-shadow: 0 4px 54px rgba(0, 0, 0, .55);
}
.h-hb {
  width: min(94vw, calc(1186 * var(--s)));
  font-size: min(max(56px, calc(220 * var(--s))), 12.5vw);
  line-height: .83;
  letter-spacing: -.04em;
  color: var(--lime);
  text-shadow: 0 4px 64px rgba(0, 0, 0, .45);
}
.h-lg {
  font-size: max(42px, calc(140 * var(--s)));
  line-height: .9;
  letter-spacing: -.03em;
  text-shadow: 0 4px 54px rgba(0, 0, 0, .55);
}
.h-done {
  font-size: min(max(30px, calc(72 * var(--s))), 7.6vw);
  line-height: .9;
  letter-spacing: -.03em;
  text-align: center;
}

/* split pieces */
.h3d .ln { display: block; transform-style: preserve-3d; }
.h3d .w  { display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
.h3d .c  {
  display: inline-block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}


.soundask {
  position: absolute; left: 0; right: 0; top: calc(50% + 208 * var(--s));
  width: min(92vw, 420px);
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 19px;
  text-align: center;
}
.soundask p { font-size: 15px; line-height: 19px; letter-spacing: -.01em; }

.link {
  position: relative;
  font-weight: 600; font-size: 18px; line-height: 19px; letter-spacing: -.01em;
  color: var(--lime);
  text-decoration: underline; text-underline-offset: 3px;
  transition: text-underline-offset .3s var(--ease-out), opacity .3s;
}
.link:hover { text-underline-offset: 6px; }

.cta {
  position: absolute; left: 50%; bottom: max(24px, calc(48 * var(--s)));
  transform: translateX(-50%);
  display: flex; justify-content: center;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.row.left { justify-content: flex-start; }

.gate-error {
  min-height: 1.3em;
  max-width: 520px;
  font-size: 15px; line-height: 1.3;
  color: #ffb3c4;
}

/* ---- buttons ---- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 6px 16px;
  border-radius: 4px;
  background: var(--lime);
  color: #000;
  font-weight: 600; font-size: 18px; line-height: 19px; letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s, color .3s;
}
.btn::after {                                   /* a quick shine on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px rgba(155, 255, 0, .55); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, .step:focus-visible, .tape:focus-visible, .link:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px;
}

.btn.white { background: #fff; min-width: 142px; }
.btn.white:hover { box-shadow: 0 10px 30px -8px rgba(255, 255, 255, .45); }
.btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); }
.btn.ghost:hover { border-color: #fff; box-shadow: none; }
.btn.outline { background: transparent; color: var(--lime); border: 1px solid var(--lime); }
.btn.outline:hover { box-shadow: 0 10px 30px -10px rgba(155, 255, 0, .4); }
.btn.wide { width: 100%; font-size: 15px; }

/* ============================================================ BLOW PANEL */

.blow-panel {
  position: absolute; left: 0; right: 0; bottom: 20px;
  width: min(809px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 35px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
.blow-title {
  font-weight: 600; font-size: 18px; line-height: 19px; letter-spacing: -.035em;
  text-transform: uppercase;
  min-height: 19px;
}
.progress { display: flex; gap: 10px; margin-top: -11px; }
.pstep { flex: 1; display: flex; flex-direction: column; gap: 17px; min-width: 0; }
.pstep i {
  position: relative; display: block; height: 4px;
  border-radius: 100px; overflow: hidden;
  background: rgba(255, 255, 255, .5);
}
.pstep i b {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--lime);
  transform-origin: left center;
  transform: scaleX(0);
}
.pstep span {
  font-size: 15px; line-height: 19px; letter-spacing: -.01em;
  opacity: .3;
  transition: opacity .6s var(--ease-out);
}
.pstep.done span, .pstep.live span { opacity: 1; }
.pstep.live i { box-shadow: 0 0 14px rgba(155, 255, 0, .35); }

.blow-actions { display: flex; gap: 11px; }
.blow-actions .col { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.blow-actions .col p { font-size: 15px; line-height: 19px; letter-spacing: -.01em; }

#btnHold { touch-action: none; user-select: none; -webkit-user-select: none; }
.hold-fill {
  position: absolute; inset: 0; z-index: -1;
  background: var(--lime);
  transform-origin: left center;
  transform: scaleX(0);
}
.hold-label { position: relative; mix-blend-mode: normal; }
.link.tiny { font-size: 13px; line-height: 1.2; font-weight: 500; opacity: .75; align-self: flex-start; }
.link.tiny:hover { opacity: 1; }
#btnHold.holding .hold-label { color: #000; }

/* ============================================================ DONE */

/* the last screen is the photo and nothing else: card in the middle,
   the greeting under it, the cake already gone */
.done-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: max(16px, calc(30 * var(--s)));
  padding: max(84px, calc(118 * var(--s))) 20px max(18px, calc(36 * var(--s)));
}
.done-txt {
  position: static;
  width: min(100%, max(420px, calc(780 * var(--s))));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  perspective: 1400px;
}
.done-txt .kicker { font-size: max(14px, calc(19 * var(--s))); line-height: 1.4; letter-spacing: -.03em; }
.done-txt .lede { max-width: min(100%, 560px); font-size: max(15px, calc(18 * var(--s))); line-height: 1.45; font-weight: 500; }
.done-txt .row { margin-top: max(8px, calc(16 * var(--s))); justify-content: center; }
.done-txt .btn { width: 160px; height: 40px; font-size: 15px; }

.polaroid {
  position: static;
  margin: 0;
  flex: 0 0 auto;
  width: min(62vw, 300px, calc(40vh * 379 / 462));
  padding: max(10px, calc(21 * var(--s))) max(10px, calc(21 * var(--s))) 0;
  aspect-ratio: 379 / 462;
  display: flex; flex-direction: column;
  background: #f7f6f2;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 4px 10px rgba(0, 0, 0, .25);
  transform: rotate(-3.2deg);
  transform-origin: 50% 50%;
  will-change: transform;
}
.polaroid::before {           /* paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 30% 20%, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);
}
.pol-photo {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1.03;
  overflow: hidden;
  background: #1c0a44;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.pol-photo img { width: 100%; height: 100%; object-fit: cover; }
.pol-photo::after {           /* a touch of instant-film haze */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255, 240, 220, .12), transparent 45%, rgba(40, 0, 90, .12));
  mix-blend-mode: screen;
}
.polaroid figcaption {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2%;
  font-family: "Permanent Marker", cursive;
  color: #111;
}
.pol-heart { font-size: max(18px, calc(30 * var(--s))); transform: rotate(-6deg); }
.pol-date  { font-size: max(12px, calc(19 * var(--s))); transform: rotate(-3deg); opacity: .85; }

.footnote {
  position: absolute;
  left: max(20px, calc(34 * var(--s)));
  bottom: max(20px, calc(40 * var(--s)));
  max-width: 339px;
  font-size: 15px; line-height: 19px; letter-spacing: -.01em;
  opacity: .85;
}


/* ============================================================ BUILDER
   What the Qream side sees: the cake live on the right, the controls on
   the left, and a link at the bottom that carries every choice. */

.builder {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: stretch;
  padding: max(84px, calc(104 * var(--s))) max(16px, calc(34 * var(--s))) max(16px, calc(30 * var(--s)));
  pointer-events: none;
}
.builder[hidden] { display: none; }
.bld-panel {
  pointer-events: auto;
  width: min(100%, 420px);
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
}
.bld-head { padding: 18px 20px 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.bld-head p {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lime); margin: 0 0 6px;
}
.bld-head h2 { margin: 0; font-size: 26px; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.bld-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 22px; }
.bld-scroll::-webkit-scrollbar { width: 6px; }
.bld-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.bld-group { display: flex; flex-direction: column; gap: 11px; }
.bld-label {
  margin: 0; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.fld > span { color: rgba(255, 255, 255, .65); letter-spacing: -.01em; }
.fld > span b { color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.fld input[type=text], .fld textarea {
  width: 100%; padding: 10px 12px;
  font: 500 14px/1.35 Inter, sans-serif; color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px;
  outline: none; transition: border-color .2s, background .2s;
}
.fld textarea { resize: vertical; min-height: 68px; }
.fld input[type=text]:focus, .fld textarea:focus { border-color: var(--lime); background: rgba(255, 255, 255, .09); }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(255, 255, 255, .3); }
.fld-row { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
.fld input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: none; margin: 0;
}
.fld input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); }
.fld input[type=range]::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); }
.fld input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px;
  border: none; border-radius: 50%; background: var(--lime); cursor: grab;
}
.fld input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--lime); cursor: grab; }

.crow { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.crow > span { color: rgba(255, 255, 255, .65); }
.sw-row { display: flex; gap: 7px; flex-wrap: wrap; }
.sw {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
  transition: transform .15s var(--ease-out);
}
.sw:hover { transform: scale(1.15); }
.sw[aria-pressed="true"] { box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 2px #000, 0 0 0 4px #fff; }
.crow input[type=color] {
  width: 26px; height: 26px; padding: 0; cursor: pointer;
  background: none; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font: 500 12.5px/1 Inter, sans-serif; color: rgba(255, 255, 255, .7);
  background: transparent; border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: .18s;
}
.chip:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }
.chip[aria-pressed="true"] { color: #10210a; background: var(--lime); border-color: var(--lime); font-weight: 600; }

.bld-foot { padding: 14px 20px 16px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-direction: column; gap: 10px; }
.linkbox {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px; padding: 8px 10px;
}
.linkbox input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: 500 12px/1.3 Inter, sans-serif; color: var(--lime); text-overflow: ellipsis;
}
.bld-foot .row { gap: 8px; }
.bld-foot .btn { flex: 1; height: 42px; font-size: 14px; }
.bld-hint { margin: 0; font-size: 12px; line-height: 1.35; color: rgba(255, 255, 255, .45); }

.edit-fab {
  position: fixed; right: max(16px, calc(34 * var(--s))); bottom: max(16px, calc(30 * var(--s)));
  z-index: 26; width: auto; height: 40px; padding: 0 18px; font-size: 14px;
}
.edit-fab[hidden] { display: none; }

body.building .scenes, body.building .steps, body.building .blow-panel { visibility: hidden; pointer-events: none; }
/* the builder shows the client's exact camera — the canvas just slides clear of the panel */
@media (min-width: 861px) { body.building #scene { transform: translateX(13%); } }

@media (max-width: 860px) {
  .builder { padding: 0; align-items: flex-end; }
  .bld-panel { width: 100%; max-height: 62vh; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .bld-head { padding: 12px 16px 10px; }
  .bld-head h2 { font-size: 20px; }
  .bld-scroll { padding: 14px 16px 16px; gap: 18px; }
  .bld-foot { padding: 12px 16px 16px; }
  .edit-fab { bottom: auto; top: max(76px, calc(96 * var(--s))); }
}

/* ============================================================ STUDIO CAKE PANEL */
.cc-scope{
  --void:#100A0F;
  --plum:#1C1119;
  --bg0:#3B2331;--bg1:#221521;--bg2:#150E14;--bg3:#100A0F;
  --panel:rgba(26,16,23,.60);
  --wax:#F7EDE4;
  --muted:rgba(247,237,228,.56);
  --faint:rgba(247,237,228,.30);
  --line:rgba(247,237,228,.13);
  --flame:#FFB25C;
  --flame-deep:#FF7A2E;
  --pad:26px;
}.cc-scope .shell>*{pointer-events:auto}.cc-scope h1, .cc-scope .lede{text-shadow:0 2px 16px var(--bg3), 0 1px 4px var(--bg3)}.cc-scope h1{
  font-family:Unbounded, Inter, sans-serif;
  font-weight:600;
  font-size:clamp(25px,2.7vw,40px);
  letter-spacing:-.035em;
  line-height:.98;
  margin:0;
  max-width:11ch;
}.cc-scope .lede{margin:12px 0 0;color:var(--muted);max-width:32ch;font-size:14.5px}.cc-scope .top{max-width:420px}body.light .cc-scope{--wax:#221820;--muted:rgba(34,24,32,.62);--faint:rgba(34,24,32,.40);--line:rgba(34,24,32,.16)}body.light .cc-scope .btn.primary{color:#2b1608}body.light .cc-scope .pick::after{background:rgba(255,255,255,.75)}body.light .cc-scope .chip[aria-pressed=true]{color:#fff;background:#221820;border-color:#221820}body.light .cc-scope .who{background:rgba(255,255,255,.5)}body.light .cc-scope .wide{display:inline}.cc-scope /* ---------------------------------------------------------------- panel */
.panel{
  width:min(376px,100%);
  max-height:calc(100svh - 2*var(--pad) - 86px);
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px 20px 18px;
  display:grid;
  gap:19px;
  align-self:end;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}.cc-scope .field{display:grid;gap:11px}.cc-scope .colours{gap:7px}.cc-scope .crow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:9px}.cc-scope .crow>span:first-child{font-size:12px;color:var(--muted);line-height:1}.cc-scope .crow .sw-row{gap:7px}.cc-scope .crow .sw{width:23px;height:23px}.cc-scope .crow .pick{width:23px;height:23px}.cc-scope .crow .pick::after{inset:7px}.cc-scope .chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.cc-scope .off{display:none}.cc-scope .agelab{font-size:12px;color:var(--muted)}.cc-scope .age{
  width:70px;font:600 15px/1 Unbounded,Inter,sans-serif;letter-spacing:-.02em;
  color:var(--flame);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;text-align:center;
}.cc-scope .age:focus{outline:none;border-color:var(--flame)}.cc-scope .colours .chips{padding-left:61px}.cc-scope .crow .chips{padding-left:0;grid-column:2 / -1}.cc-scope .cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.cc-scope .cap b{font-weight:500;font-size:13.5px;color:var(--wax)}.cc-scope .cap span{font-size:12.5px;color:var(--faint)}.cc-scope /* count */
.counter{display:flex;align-items:center;gap:16px}.cc-scope .num{
  font-family:Inter,sans-serif;font-weight:600;font-size:30px;
  letter-spacing:-.04em;min-width:2.1ch;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--flame);
}.cc-scope input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:22px;background:none;margin:0;
}.cc-scope input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--flame-deep),var(--flame));
}.cc-scope input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--flame-deep),var(--flame))}.cc-scope input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-8.5px;
  background:var(--wax);border:none;cursor:grab;
  box-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 0 0 rgba(255,178,92,.35);
  transition:box-shadow .2s;
}.cc-scope input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:var(--wax);cursor:grab}.cc-scope input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 0 7px rgba(255,178,92,.16)}.cc-scope input[type=range]:focus-visible{outline:none}.cc-scope input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--plum),0 0 0 5px var(--flame)}.cc-scope /* swatches */
.sw-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.cc-scope .sw{
  width:27px;height:27px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--c);border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45);
  transition:transform .16s cubic-bezier(.34,1.4,.5,1);
}.cc-scope .sw:hover{transform:scale(1.12)}.cc-scope .sw[aria-pressed=true]{
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 0 0 2px var(--plum),0 0 0 4px var(--wax);
}.cc-scope .sw:focus-visible{outline:2px solid var(--flame);outline-offset:3px}.cc-scope .pick{position:relative;width:27px;height:27px;border-radius:50%;overflow:hidden;
  background:conic-gradient(#ff5f6d,#ffc371,#7ee8a2,#5bc8f5,#b18cff,#ff5f6d);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45)}.cc-scope .pick input{position:absolute;inset:-6px;width:150%;height:150%;border:none;padding:0;background:none;cursor:pointer;opacity:0}.cc-scope .pick::after{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(20,12,18,.8)}.cc-scope .who{
  width:100%;font:500 14px/1 Inter,sans-serif;color:var(--wax);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;outline:none;transition:.18s;text-transform:uppercase;
}.cc-scope .who::placeholder{color:var(--faint);text-transform:none}.cc-scope .who:focus{border-color:var(--flame);background:rgba(255,255,255,.08)}.cc-scope .chip{
  font:500 12.5px/1 Inter,sans-serif;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;cursor:pointer;transition:.18s;
}.cc-scope .chip:hover{color:var(--wax);border-color:rgba(247,237,228,.3)}.cc-scope .chip[aria-pressed=true]{
  color:#1b1017;background:var(--wax);border-color:var(--wax);
}.cc-scope .chip:focus-visible{outline:2px solid var(--flame);outline-offset:2px}.cc-scope .acts{display:flex;gap:9px;padding-top:16px;border-top:1px solid var(--line)}.cc-scope .btn{
  flex:1;font:500 13.5px/1 Inter,sans-serif;padding:12px 10px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--wax);transition:.18s;
}.cc-scope .btn:hover:not(:disabled){background:rgba(247,237,228,.09)}.cc-scope .btn.primary{background:var(--flame);color:#231208;border-color:transparent;font-weight:600}.cc-scope .btn.primary:hover:not(:disabled){background:#ffc27c}.cc-scope .btn:disabled{opacity:.32;cursor:default}.cc-scope .btn:focus-visible{outline:2px solid var(--flame);outline-offset:2px}.cc-scope .foot{color:var(--faint);font-size:12.5px;align-self:end;justify-self:end;text-align:right;max-width:24ch}.cc-scope /* ---------------------------------------------------------------- layout */
.shell{grid-template-areas:"top ." "panel ." "panel .";grid-template-columns:min(360px,42vw) 1fr}.cc-scope .top{grid-area:top}.cc-scope .panel{grid-area:panel}.cc-scope .foot{grid-area:foot}

@media (max-width:860px), (max-aspect-ratio:1/1){.cc-scope{--pad:14px}.cc-scope .shell{
    grid-template-columns:1fr;
    grid-template-areas:"top" "." "panel";
    grid-template-rows:auto 1fr auto;
    height:100svh;
  }.cc-scope h1{max-width:none;font-size:clamp(24px,7.2vw,34px)}.cc-scope .lede{max-width:34ch;font-size:13.5px;margin-top:9px}.cc-scope .wide{display:none}.cc-scope .panel{
    width:100%;align-self:end;gap:15px;padding:16px 16px 14px;
    max-height:min(46svh,400px);
  }.cc-scope .panel::-webkit-scrollbar{width:0}.cc-scope .sw{width:25px;height:25px}.cc-scope .num{font-size:26px}.cc-scope .btn{padding:11px 8px}
}
@media (max-height:620px) and (max-width:860px){.cc-scope .lede{display:none}.cc-scope .panel{max-height:64svh}
}.cc-scope /* entrance: one orchestrated moment */
body:not(.ready) .shell{opacity:0}.cc-scope .shell{opacity:1;transition:opacity .5s ease .05s}body.ready .cc-scope 
@media (prefers-reduced-motion:reduce){.cc-scope .shell, 
}.cc-scope .nowebgl{position:fixed;inset:0;display:grid;place-content:center;text-align:center;padding:30px;gap:10px}.cc-scope /* ------------------------------------------------------------ tweak panel */
.tw-toggle{
  position:fixed;right:14px;bottom:14px;z-index:6;width:34px;height:34px;border-radius:50%;
  font:600 12px/1 Inter,sans-serif;letter-spacing:0;
  background:var(--panel);color:var(--muted);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;
}.cc-scope .tw-toggle:hover{color:var(--wax)}body.tw-open .cc-scope .tw-toggle{background:var(--flame);color:#2b1608;border-color:transparent}.cc-scope .tweak{
  position:fixed;right:14px;bottom:58px;z-index:6;width:262px;
  max-height:min(76svh,660px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.9);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s ease;
}body.tw-open .cc-scope .tweak{opacity:1;transform:none;pointer-events:auto}.cc-scope .tweak header{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 14px 10px;border-bottom:1px solid var(--line);
  font:500 12.5px/1 Inter,sans-serif;color:var(--wax);
}.cc-scope .tweak header button{
  font:500 11px/1 Inter,sans-serif;color:var(--muted);background:none;
  border:1px solid var(--line);border-radius:999px;padding:5px 9px;cursor:pointer;
}.cc-scope .tweak header button:hover{color:var(--wax)}.cc-scope .tw-body{overflow-y:auto;padding:10px 14px 14px;overscroll-behavior:contain}.cc-scope .tw-body::-webkit-scrollbar{width:0}.cc-scope .tw-group{padding:8px 0 4px}.cc-scope .tw-group b{display:block;font:600 10.5px/1 Inter,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px}.cc-scope .tw-row{display:grid;grid-template-columns:1fr auto;align-items:center;
  column-gap:8px;row-gap:1px;margin-bottom:8px}.cc-scope .tw-row span{font-size:11.5px;color:var(--muted)}.cc-scope .tw-row i{font:500 11px/1 Inter,sans-serif;font-style:normal;color:var(--flame);
  font-variant-numeric:tabular-nums}.cc-scope .tw-row input[type=range]{grid-column:1 / -1}.cc-scope .tw-row input[type=range]{height:16px}.cc-scope .tw-row input[type=range]::-webkit-slider-runnable-track{height:2px}.cc-scope .tw-row input[type=range]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px}.cc-scope .tw-row input[type=range]::-moz-range-thumb{width:12px;height:12px}
@media (max-width:860px){.cc-scope .tweak{left:14px;width:auto;bottom:58px;max-height:56svh} }

#cc .shell{display:none !important}
#cc{position:fixed;inset:0;z-index:2;pointer-events:none}
#ccMount.on .panel{display:grid !important;pointer-events:auto}

/* ---- the studio panel, folded into the builder ---- */
#cc .shell { display: none !important; }
#cc { position: static; }
#ccMount { display: block; }
#ccMount .panel {
  width: 100% !important; max-height: none !important;
  padding: 0 !important; gap: 17px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important; overflow: visible !important;
  display: grid !important;
}
#ccMount .panel .acts { padding-top: 14px; }
#ccMount .panel .btn { border-radius: 8px; }
.cc-scope { color: #fff; }
/* the scene tuner belongs to the builder only */
body:not(.building) #ccTune { display: none; }
#ccTune .tweak { z-index: 27; }
#ccTune .tw-toggle { z-index: 27; }
@media (max-width: 860px) {
  #ccTune .tweak { left: 12px; right: 12px; bottom: 64px; max-height: 46svh; }
  #ccTune .tw-toggle { bottom: 18px; right: 12px; }
}

/* ============================================================ FX */

.flash {
  position: fixed; inset: 0; z-index: 40;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
#confettiFx { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* ============================================================ SMALL SCREENS */

@media (max-width: 760px) {
  .logo { left: 16px; top: 22px; }
  .steps { top: 16px; gap: 8px; }
  .step, .steps-thumb { width: 30px; height: 30px; font-size: 13px; }
  .tape { right: 10px; top: 12px; width: 104px; height: 42px; }
  .tape span { font-size: 12px; }
  .chrome { height: 70px; }
  .steps { top: 62px; }

  .soundask { top: auto; bottom: 96px; }
  .cta { bottom: 28px; width: calc(100vw - 32px); }
  .cta.row { flex-direction: column; align-items: stretch; }
  .cta.row .btn { width: 100%; }
  .s-perm .txt { top: 44%; }

  .blow-panel { bottom: 12px; padding: 16px; gap: 22px; }
  .blow-actions { flex-direction: column; }
  .blow-title { font-size: 16px; }

  .done-wrap { gap: 16px; padding: 78px 16px 18px; justify-content: center; }
  .done-txt .lede { font-size: 15px; line-height: 21px; }
  .done-txt .row { margin-top: 6px; width: 100%; }
  .done-txt .btn { width: auto; flex: 1; }
  .bg-party .graffiti { min-width: 250vw; top: 30%; }
  .polaroid { width: min(58vw, calc(38vh * 379 / 462)); padding: 9px 9px 0; }
  .cta.row { left: 16px; right: 16px; transform: none; width: auto; }
  .footnote { display: none; }
}

@media (max-height: 640px) and (min-width: 761px) {
  .blow-panel { gap: 20px; padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .tape[aria-pressed="true"] span::before { animation: none; }
}