/* The booth's phone flow (/show/<show>; docs/web/SHOW-GIVEAWAY.md "The phone flow"): one QR code and five steps.
   2026-10-25, Mark: "incredible … as though it was made by a master designer. RISD level design that puts user experience
   first", in posterstudioexpress.com's own language, the same as "Everything we do" (about.css): Outfit 900 headlines
   with gradient words, Lexend Deca text, the cream hero on its orange grid for the welcome and the payoff, navy that
   glows while the machine works, pastel washes between, pill buttons with a glow (yellow first, cyan second, glass for
   quiet), 20-28 px cards with long soft shadows and glowing coloured wells. One visual world whatever the phone's
   theme: every colour is set here. Motion starts from a visible rest and stops for prefers-reduced-motion.
   Public page: everything is same-origin (the page's CSP allows no font or style from elsewhere). Outfit and Lexend
   Deca are the quote documents' self-hosted copies (Outfit 900: fonts/); Fontdiner Swanky (Apache-2.0) and Graduate
   (OFL-1.1) draw the live poster preview's name and school (fonts/, with their licences). */
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/outfit-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/outfit-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 900; font-display: swap; src: url('/assets/show-flow/fonts/outfit-latin-900-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lexend Deca'; font-weight: 400; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/lexend-deca-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lexend Deca'; font-weight: 500; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/lexend-deca-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lexend Deca'; font-weight: 600; font-display: swap; src: url('/assets/quote-doc/halftone/fonts/lexend-deca-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fontdiner Swanky'; font-weight: 400; font-display: swap; src: url('/assets/show-flow/fonts/FontdinerSwanky-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Graduate'; font-weight: 400; font-display: swap; src: url('/assets/show-flow/fonts/Graduate-Regular.woff2') format('woff2'); }

/* the website's tokens (the same values as about.css's .ab) */
:root {
  color-scheme: light;
  --ink: #1A1A2E; --ink-warm: #2B1507; --text: #3B4256; --muted: #5E6679; --line: rgba(26, 26, 46, .09); --edge: rgba(26, 26, 46, .16);
  --cream: #FFF8EE; --paper: #FFFFFF; --mist: #F5F5F7;
  --navy-0: #050B2C; --navy-1: #07153F; --navy-2: #0B1437; --on-navy: rgba(255, 255, 255, .8);
  --b-red: #FF5254; --b-yellow: #FBBF24; --b-green: #22C55E; --b-blue: #1EB4F0; --b-violet: #8B4CF6; --b-pink: #EC4899; --b-orange: #F97316;
  --g-warm: linear-gradient(92deg, #FBBF24 0%, #F97316 42%, #E11D48 100%);
  --g-warm-ink: linear-gradient(92deg, #C2410C 0%, #DC2626 50%, #BE185D 100%);                  /* the warm words on cream: 4.5:1 */
  --g-warm-glow: linear-gradient(92deg, #FDE047 0%, #FBBF24 30%, #F97316 65%, #FB7185 100%);    /* the warm words on navy */
  --g-brand: linear-gradient(135deg, #D6006C 0%, #6B21A8 50%, #1D4ED8 100%);
  --g-rainbow: linear-gradient(90deg, #FF006E, #8338EC, #3A86FF, #06D6A0, #FFBE0B, #FF006E);
  --g-ribbon: linear-gradient(120deg, #FACC15 0%, #F97316 40%, #EF4444 72%, #EC4899 105%);
  --g-ribbon-soft: linear-gradient(120deg, #FEF08A 0%, #FDBA74 48%, #FDA4AF 82%, #F9A8D4 105%);   /* ink words on it */
  --g-sunset: linear-gradient(125deg, #C2410C 0%, #DC2626 50%, #BE185D 100%);                     /* white words on it */
  --g-yellow: linear-gradient(125deg, #FFE52C 0%, #FFB800 100%);
  --g-cyan: linear-gradient(125deg, #04F3FA 0%, #11C7F7 60%, #572898 100%);
  --g-ok: linear-gradient(135deg, #22C55E 0%, #0EA5A4 100%);
  --rose: #E11D48; --rose-ink: #9F1239; --rose-bg: #FFF1F3; --bad: #BE123C;
  --ok-ink: #15803D; --ring: #11C7F7; --ring-glow: rgba(17, 199, 247, .24);
  --card-shadow: 0 1px 0 rgba(26, 26, 46, .04), 0 18px 36px -26px rgba(26, 26, 46, .55);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 62px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #F4EEE4; color: var(--ink); }
body { font-family: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font-family: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sf-loading, .sf-empty { padding: 120px 24px; text-align: center; color: var(--muted); font-size: 15px; min-height: 100vh; background: var(--cream); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── the page and its three moods: the cream hero (welcome, ready, done, closed), the pastel wash (the forms), navy (making) ── */
.sf { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; background: var(--cream); }
.sf.m-hero { background:
    linear-gradient(rgba(234, 88, 12, .075) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(234, 88, 12, .075) 1px, transparent 1px) 0 0 / 34px 34px,
    radial-gradient(380px 300px at 100% 70px, rgba(251, 191, 36, .32), transparent 70%),
    radial-gradient(360px 300px at 0% 520px, rgba(236, 72, 153, .14), transparent 70%), var(--cream); }
.sf.m-wash { background:
    radial-gradient(420px 260px at 100% 0%, rgba(251, 191, 36, .2), transparent 70%),
    radial-gradient(380px 300px at 0% 340px, rgba(139, 76, 246, .09), transparent 70%),
    linear-gradient(180deg, #FFF8EE 0%, #FFF6F4 45%, #F6F3FF 100%); }
.sf.m-navy { color: #FFFFFF; background:
    radial-gradient(420px 380px at -12% 4%, rgba(131, 56, 236, .5), transparent 70%),
    radial-gradient(380px 360px at 112% 46%, rgba(4, 243, 250, .22), transparent 70%),
    radial-gradient(360px 320px at 10% 96%, rgba(236, 72, 153, .26), transparent 70%),
    linear-gradient(180deg, var(--navy-0) 0%, var(--navy-1) 100%); }
@media (min-width: 520px) { .sf { box-shadow: 0 0 0 1px rgba(26, 26, 46, .06), 0 30px 80px -40px rgba(26, 26, 46, .5); } }

/* ── the bar: the website's navy glass, the logo, Back, the five steps ── */
.bar { position: sticky; top: 0; z-index: 6; padding: env(safe-area-inset-top) 16px 0; color: #FFFFFF; background: rgba(11, 20, 55, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.bar-row { display: flex; align-items: center; gap: 10px; height: var(--bar-h); }
.bar-logo { display: block; height: 38px; width: auto; max-width: none; }
.back { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: #FFFFFF; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .2s, transform .15s; }
.back .ic { width: 22px; height: 22px; stroke-width: 2.5; margin-left: -2px; }
.back:active { transform: scale(.92); background: rgba(255, 255, 255, .16); }
.prog { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.prog i { display: block; width: 14px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .16); transition: width .45s var(--ease), background .45s; }
.prog i.on { background: var(--c); box-shadow: 0 0 10px -1px var(--c); }
.prog i.now { width: 28px; }

/* ── the content and the dock ── */
.body { flex: 1; padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.dock { position: sticky; bottom: 0; z-index: 4; padding: 12px 20px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px;
  background: rgba(255, 248, 238, .9); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 -1px 0 rgba(26, 26, 46, .06), 0 -20px 30px -26px rgba(26, 26, 46, .3); }
.dock:empty { display: none; }
.dock .need { text-align: center; }
.dock > .small { text-align: center; }
.dock .two .btn { min-height: 50px; font-size: 15px; padding: 0 12px; gap: 8px; }
.dock .two .btn .ic { width: 18px; height: 18px; }
.m-navy .dock { background: rgba(5, 11, 44, .86); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.m-navy .dock .small { color: var(--on-navy); }

/* type: Outfit 900 headlines, gradient words */
.sf h1 { margin: 0; font: 900 clamp(36px, 10.6vw, 46px)/1 'Outfit', system-ui, sans-serif; letter-spacing: -.045em; color: var(--ink-warm); text-wrap: balance; }
.sf h2 { margin: 0; font: 900 31px/1.04 'Outfit', system-ui, sans-serif; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.m-navy h2 { color: #FFFFFF; }
.g { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .06em; background-size: 100% auto; }
.g-warm { background-image: var(--g-warm-ink); }
.m-navy .g-warm { background-image: var(--g-warm-glow); }
@keyframes sf-shimmer { to { background-position: 200% center; } }
.lead { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.m-navy .lead { color: var(--on-navy); }
.small { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.center { text-align: center; }
.eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #FFFFFF;
  font: 700 11.5px/1.15 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 6px 20px -10px rgba(26, 26, 46, .35); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--g-rainbow); background-size: 300% 100%; animation: sf-shimmer 4s linear infinite; }
.hint { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0; font-weight: 400; }
.hint.bad { color: var(--bad); font-weight: 600; }
.row { display: flex; gap: 14px; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hd-row { display: flex; gap: 14px; align-items: flex-start; }
.hd-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.left-pill { align-self: flex-start; margin: 2px 0 0; padding: 6px 13px; border-radius: 999px; font-size: 13px; color: var(--ink-warm); background: var(--g-ribbon-soft);
  box-shadow: 0 8px 18px -10px rgba(239, 68, 68, .6); }
.left-pill b { font: 800 13.5px/1.2 'Outfit', sans-serif; }

/* ── buttons: the website's pills with the glow under them ── */
.btn { appearance: none; border: 0; border-radius: 999px; min-height: 56px; padding: 0 24px; font: 800 17px/1.15 'Outfit', sans-serif; letter-spacing: -.005em;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; width: 100%; text-decoration: none; text-align: center; color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .25s, opacity .25s; }
.btn .ic { width: 20px; height: 20px; stroke-width: 2.25; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--g-yellow); color: #1A1300; box-shadow: 0 14px 28px -12px rgba(255, 184, 0, .9), 0 0 0 1px rgba(255, 229, 44, .45), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-primary:disabled, .btn-primary.off { background: #EEE7DB; color: #6B6457; box-shadow: inset 0 0 0 1.5px rgba(43, 21, 7, .07); }
.btn-primary:disabled { cursor: default; transform: none; }
.btn-magenta { background: var(--g-cyan); color: #00253C; box-shadow: 0 14px 28px -12px rgba(4, 200, 250, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn-quiet { background: transparent; color: var(--ink); min-height: 48px; font-weight: 700; font-size: 16px; }
.btn-line { min-height: 52px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1.5px var(--edge), 0 10px 22px -16px rgba(26, 26, 46, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-small { min-height: 50px; }
.m-navy .btn-quiet { color: #FFFFFF; }
@media (hover: hover) { .btn-primary:not(:disabled):not(.off):hover, .btn-magenta:hover { transform: translateY(-2px); } }
.link { appearance: none; border: 0; background: transparent; color: var(--ink); font: 700 14px/1.3 'Outfit', sans-serif; text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 4px; cursor: pointer; padding: 6px 0; text-align: left; min-height: 44px; display: inline-flex; align-items: center; }
.link.quiet { font-weight: 600; color: var(--muted); }
p .link, .gift .link, .banner .link { min-height: 0; display: inline; padding: 2px 0; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: -6px 0; }
.links .link { min-height: 44px; display: inline-flex; padding: 0; }

/* ── 1. welcome: the cream hero, the two paths, the gift ── */
.hero { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 4px 0 4px; }
.hero h1 em { font-style: normal; }
.hero .lead { font-size: 17px; color: #5A4636; }
.dots { position: absolute; inset: -22px -20px auto; height: 240px; pointer-events: none; overflow: hidden; }
.dots span { position: absolute; width: 10px; height: 10px; border-radius: 3px; opacity: .85; animation: sf-drift 9s ease-in-out infinite; }
@keyframes sf-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(8px, -12px) rotate(40deg); } }
.choice { appearance: none; position: relative; width: 100%; display: flex; align-items: stretch; gap: 0; padding: 0; border: 0; border-radius: 26px; text-align: left; cursor: pointer;
  color: var(--ink); background: #FFFFFF; overflow: hidden; font: inherit;
  box-shadow: 0 1px 0 rgba(26, 26, 46, .05), 0 26px 44px -28px var(--glow, rgba(26, 26, 46, .55)), inset 0 0 0 1px var(--line); transition: transform .3s var(--ease), box-shadow .3s; }
.choice:active { transform: scale(.98); }
.choice:disabled { cursor: default; opacity: .6; filter: grayscale(.6); }
.choice.lead-card { flex-wrap: wrap; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-ribbon) border-box; border: 2.5px solid transparent; }
.choice.lead-card .well { width: 100%; min-height: 0; height: 172px; }
.choice.lead-card .well::before { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.choice.lead-card .ctx { padding: 16px 6px 18px 18px; }
.choice .well { position: relative; flex: none; width: 116px; min-height: 132px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.choice .well::before { content: ""; position: absolute; width: 96px; height: 96px; left: 50%; top: 50%; margin: -48px 0 0 -48px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .5); animation: sf-spin 40s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.well-info { background: radial-gradient(120% 90% at 30% 0%, #04F3FA 0%, #11C7F7 38%, #572898 100%); }
.well-poster { background: radial-gradient(120% 90% at 50% 0%, #FDE047 0%, #F97316 55%, #E11D48 110%); }
.well .wi { position: relative; width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45), 0 14px 26px -10px rgba(5, 11, 44, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.well .wi .ic { width: 28px; height: 28px; }
.well .spark { position: absolute; color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 1; animation: sf-twinkle 3s ease-in-out infinite; }
@keyframes sf-twinkle { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.fan { position: relative; width: 100%; height: 100%; }
.lead-card .fan img { box-shadow: 0 0 0 3px #FFFFFF, 0 20px 30px -10px rgba(43, 21, 7, .6); border-radius: 8px; }
.fan img { position: absolute; left: 50%; top: 50%; display: block; object-fit: cover; border-radius: 6px; background: #FFFFFF;
  box-shadow: 0 0 0 2.5px #FFFFFF, 0 14px 22px -8px rgba(43, 21, 7, .55); transform: translate(-50%, -50%) translateX(var(--x, 0)) rotate(var(--r, 0deg)); }
.choice .ctx { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 16px 6px 16px 16px; }
.choice .ct { font: 800 19px/1.12 'Outfit', sans-serif; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.choice .cs { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.choice .go { align-self: center; flex: none; width: 40px; height: 40px; margin-right: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; background: var(--navy-2); box-shadow: 0 8px 18px -8px rgba(11, 20, 55, .7); transition: transform .3s var(--ease); }
.choice.lead-card .go { color: #1A1300; background: var(--g-yellow); box-shadow: 0 10px 20px -8px rgba(255, 184, 0, .9); }
.choice .go .ic { width: 20px; height: 20px; stroke-width: 2.5; }
@media (hover: hover) { .choice:not(:disabled):hover { transform: translateY(-2px); } .choice:not(:disabled):hover .go { transform: translateX(3px); } }

/* the gift: a ribbon card (its words are a versioned legal text: drawn exactly as served) */
.gift { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 18px 16px; border-radius: 24px; overflow: hidden;
  background: var(--g-ribbon-soft); color: #3A1D0A; font-size: 14px; line-height: 1.5; box-shadow: 0 26px 44px -28px rgba(239, 68, 68, .75), inset 0 0 0 1px rgba(255, 255, 255, .45); }
.gift::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%); pointer-events: none; }
.gift b { display: block; margin-bottom: 3px; font: 800 16.5px/1.3 'Outfit', sans-serif; letter-spacing: -.01em; color: var(--ink-warm); }
.gift > .ic, .gift .gi { position: relative; z-index: 1; flex: none; width: 42px; height: 42px; padding: 10px; border-radius: 14px; color: #EA580C; background: #FFFFFF;
  box-shadow: 0 10px 20px -10px rgba(194, 65, 12, .6); }
.gift > div { position: relative; z-index: 1; }
.gift .link { color: var(--ink-warm); }
.free { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }
.free::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--b-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

/* the live poster preview: the teaser picture, the name on the plate, the school on the shirt */
.pv { position: relative; container-type: inline-size; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #141833; }
.pv img { width: 100%; height: 100%; display: block; object-fit: cover; }
.plate { position: absolute; transform: translateY(-50%); text-align: center; font-family: 'Fontdiner Swanky', cursive; line-height: 1.02;
  background: linear-gradient(90deg, #E11D48 0%, #F97316 28%, #FACC15 52%, #22C55E 76%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .35cqw 0 rgba(70, 35, 10, .9)) drop-shadow(0 0 1.1cqw rgba(145, 87, 32, .55)); overflow-wrap: anywhere; }
.plate.empty { background: none; color: rgba(255, 255, 255, .6); filter: none; font-family: 'Outfit', sans-serif; font-weight: 600; }
.shirt { position: absolute; transform: translate(-50%, -50%); text-align: center; font-family: 'Graduate', serif; color: #FFFFFF; line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.loupe { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; position: relative; flex: none; border: 4px solid transparent;
  background: linear-gradient(#141833, #141833) padding-box, var(--g-rainbow) border-box; box-shadow: 0 0 34px -6px rgba(131, 56, 236, .8); }
.loupe .pv { position: absolute; width: 620px; border-radius: 0; }
.you-pv { width: 108px; flex: none; margin: 2px 4px 0 0; transform: rotate(4deg); }
.you-pv .pv, .you-pv > img { border-radius: 10px; box-shadow: 0 0 0 4px #FFFFFF, 0 26px 36px -18px rgba(43, 21, 7, .6); }
.you-pv > img { display: block; width: 100%; height: auto; }

/* ── 2. the school: one big search box, results as cards ── */
.search { position: relative; }
.search .input { min-height: 64px; border-radius: 22px; padding-left: 62px; font-size: 17px; border-color: transparent;
  box-shadow: 0 1px 0 rgba(26, 26, 46, .04), 0 22px 40px -26px rgba(26, 26, 46, .55), inset 0 0 0 1.5px rgba(26, 26, 46, .08); }
.search .input:focus { border-color: var(--ring); box-shadow: 0 0 0 5px var(--ring-glow), 0 22px 44px -20px rgba(17, 199, 247, .55); }
.search-ic { position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; background: var(--g-cyan); box-shadow: 0 8px 18px -8px rgba(4, 200, 250, .9); pointer-events: none; }
.search-ic .ic { width: 21px; height: 21px; stroke-width: 2.5; }
.res { appearance: none; width: 100%; text-align: left; border: 2px solid transparent; border-radius: 20px; padding: 12px 14px 12px 12px; min-height: 68px;
  display: flex; gap: 12px; align-items: center; cursor: pointer; color: var(--ink); font: inherit;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(rgba(26, 26, 46, .07), rgba(26, 26, 46, .07)) border-box;
  box-shadow: 0 16px 30px -26px rgba(26, 26, 46, .6); transition: box-shadow .3s var(--ease), transform .2s; }
.res:active { transform: scale(.985); }
.res.on { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-brand) border-box; box-shadow: 0 20px 36px -18px rgba(107, 33, 168, .55); }
.res .ri { width: 42px; height: 42px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; color: #0369A1; background: #E0F5FE; }
.res .ri.k-district { color: #6D28D9; background: #EFE7FF; }
.res .ri.k-private { color: #BE185D; background: #FDE7F1; }
.res .ri .ic { width: 22px; height: 22px; }
.res .rt { font: 800 16px/1.2 'Outfit', sans-serif; letter-spacing: -.01em; }
.res .rs { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.tag { font: 700 10.5px/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: #EFE7FF; color: #5B21B6; flex: none; }
.tag.warn { background: var(--rose-bg); color: var(--rose-ink); }
.rtags { display: flex; gap: 6px; margin-top: 7px; }
.radio { width: 26px; height: 26px; border-radius: 50%; flex: none; margin-left: auto; display: flex; align-items: center; justify-content: center; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #C9C3B6; transition: background .25s, box-shadow .25s; }
.radio .ic { width: 15px; height: 15px; stroke-width: 3.2; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--ease) .05s; }
.res.on .radio { background: var(--g-brand); box-shadow: 0 6px 14px -6px rgba(107, 33, 168, .8); }
.res.on .radio .ic { stroke-dashoffset: 0; }
.card { position: relative; background: #FFFFFF; border-radius: 24px; padding: 18px; box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.picked { display: flex; gap: 16px; align-items: center; overflow: hidden; color: #FFFFFF; padding: 16px;
  background: radial-gradient(240px 200px at 100% 0%, rgba(236, 72, 153, .35), transparent 70%), radial-gradient(220px 200px at 0% 100%, rgba(4, 243, 250, .22), transparent 70%),
    linear-gradient(160deg, var(--navy-1), var(--navy-0)); box-shadow: 0 30px 60px -30px rgba(26, 11, 61, .8); }
.picked .k { font: 700 11.5px/1.2 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FFE52C; }
.picked .t { font: 800 18px/1.2 'Outfit', sans-serif; letter-spacing: -.01em; }
.picked .s { font-size: 13px; color: var(--on-navy); line-height: 1.4; }
.picked .link { color: #FFFFFF; }

/* ── 3. you: fields, the role pills, the ticks ── */
.field { display: flex; flex-direction: column; gap: 7px; font: 600 13.5px/1.3 'Lexend Deca', sans-serif; color: var(--text); }
.input { width: 100%; min-height: 52px; border: 1.5px solid rgba(26, 26, 46, .14); border-radius: 16px; background: #FFFFFF; padding: 0 16px; font: 500 16px 'Lexend Deca', sans-serif;
  color: var(--ink); box-shadow: 0 1px 0 rgba(26, 26, 46, .03), 0 12px 24px -22px rgba(26, 26, 46, .6); transition: border-color .2s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: #6B7080; opacity: 1; }
.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 4px var(--ring-glow), 0 14px 26px -20px rgba(17, 199, 247, .7); }
.input[aria-invalid=true] { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(225, 29, 72, .12); }
.input.code { text-transform: uppercase; letter-spacing: .16em; font: 800 19px 'Outfit', sans-serif; }
select.input { appearance: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { appearance: none; border: 0; border-radius: 999px; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 700 14.5px/1.1 'Outfit', sans-serif; color: var(--ink); background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--edge), 0 8px 16px -14px rgba(26, 26, 46, .5);
  transition: background .25s, color .25s, box-shadow .25s, transform .15s; }
.chip:active { transform: scale(.95); }
.chip .ic { width: 20px; height: 20px; stroke-width: 1.9; color: #6B21A8; transition: color .25s; }
.chip.on { color: #FFFFFF; background: var(--g-brand); box-shadow: 0 10px 22px -10px rgba(107, 33, 168, .75); }
.chip.on .ic { color: #FFFFFF; }
.field .chips { margin-top: 3px; }
.chips.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.roles .chip { justify-content: center; padding: 0 10px; }
.tick { display: flex; gap: 13px; align-items: flex-start; width: 100%; padding: 14px 15px; border: 0; border-radius: 20px; cursor: pointer; appearance: none; text-align: left;
  font: 400 14px/1.5 'Lexend Deca', sans-serif; color: var(--text); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, background .25s; }
.tick.on { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(107, 33, 168, .28), 0 16px 30px -24px rgba(107, 33, 168, .6); }
.box { width: 26px; height: 26px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: #FFFFFF;
  box-shadow: inset 0 0 0 2px #B9B2A4; transition: background .25s, box-shadow .25s, transform .2s var(--ease); }
.box .ic { width: 16px; height: 16px; stroke-width: 3.2; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .05s; }
.tick.on .box { background: var(--g-brand); box-shadow: 0 6px 14px -6px rgba(107, 33, 168, .8); }
.tick.on .box .ic { stroke-dashoffset: 0; }
.tick.want { box-shadow: inset 0 0 0 2px rgba(214, 0, 108, .55), 0 0 0 4px rgba(214, 0, 108, .1); }
.tick.want .box { box-shadow: inset 0 0 0 2px #D6006C; }
.ts { min-height: 0; }
.ts:empty { display: none; }

/* ── 4A. the poster: the design cards, the selfie, the instrument pills, the code, the consent ── */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pcard { appearance: none; position: relative; border: 2.5px solid transparent; border-radius: 24px; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  color: var(--ink); font: 800 14px/1.25 'Outfit', sans-serif; text-align: left;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(rgba(26, 26, 46, .07), rgba(26, 26, 46, .07)) border-box;
  box-shadow: 0 20px 34px -26px rgba(26, 26, 46, .6); transition: transform .3s var(--ease), box-shadow .3s; }
.pcard > span:last-of-type { padding: 0 6px; }
.pcard:active { transform: scale(.98); }
.pcard.on { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-brand) border-box; box-shadow: 0 26px 44px -20px rgba(107, 33, 168, .6); }
.pwell { position: relative; display: block; padding: 12px; border-radius: 17px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, var(--c2), var(--c1) 75%); }
.pwell .pv { box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .9), 0 14px 22px -10px rgba(0, 0, 0, .5); border-radius: 8px; }
.pk { position: absolute; z-index: 2; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF;
  background: var(--g-brand); box-shadow: 0 0 0 3px #FFFFFF, 0 8px 16px -6px rgba(107, 33, 168, .9); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease); }
.pk .ic { width: 16px; height: 16px; stroke-width: 3.2; }
.pcard.on .pk { opacity: 1; transform: none; }
.selfie { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 24px; background: #FFFFFF; box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.selfie .link { align-self: flex-start; margin: -10px 0 -12px; }
.selfie .st { font: 800 18px/1.2 'Outfit', sans-serif; letter-spacing: -.01em; color: var(--ink); }
.cam { appearance: none; position: relative; width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; flex: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #FFFFFF; background: var(--g-ribbon); box-shadow: 0 16px 28px -12px rgba(239, 68, 68, .8), inset 0 1px 0 rgba(255, 255, 255, .4); }
.cam::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(249, 115, 22, .45); animation: sf-ping 2.4s var(--ease) infinite; }
@keyframes sf-ping { 0% { transform: scale(.92); opacity: 1; } 80%, 100% { transform: scale(1.18); opacity: 0; } }
.cam.on { background: var(--g-ok); box-shadow: 0 16px 28px -12px rgba(14, 165, 164, .8); }
.cam.on::after { display: none; }
.cam .ic { width: 32px; height: 32px; }
.cam.on .ic { stroke-width: 2.8; }
.okline { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ok-ink); font-weight: 600; line-height: 1.35; }
.okline .ic { width: 16px; height: 16px; stroke-width: 2.8; }
.body > .okline { align-self: flex-start; font-size: 12.5px; font-weight: 500; gap: 7px; padding: 6px 13px 6px 6px; border-radius: 18px; background: rgba(34, 197, 94, .12); box-shadow: inset 0 0 0 1px rgba(21, 128, 61, .14); }
.body > .okline .ic { width: 24px; height: 24px; padding: 5px; border-radius: 50%; color: #FFFFFF; background: var(--g-ok); }
.codebox { display: flex; gap: 8px; }
.codebox .input { flex: 1; min-width: 0; }
.codebox .btn { width: auto; min-height: 52px; padding: 0 22px; }
.sub { display: flex; flex-direction: column; gap: 12px; }
.sub .ttl { font: 800 16px/1.25 'Outfit', sans-serif; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.sub .ttl::before { content: ""; width: 6px; height: 20px; border-radius: 99px; background: var(--g-brand); flex: none; }

/* errors: a friendly rose card */
.error { display: flex; gap: 12px; align-items: flex-start; background: var(--rose-bg); color: var(--rose-ink); border-radius: 18px; padding: 14px 16px;
  font: 500 14.5px/1.45 'Lexend Deca', sans-serif; box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .18), 0 14px 28px -22px rgba(225, 29, 72, .7); }
.error .ic { width: 22px; height: 22px; color: var(--rose); margin-top: 0; }
.banner { position: sticky; top: calc(env(safe-area-inset-top) + var(--bar-h) + 10px); z-index: 5; margin: 10px 16px 0; display: flex; gap: 10px; align-items: center;
  padding: 7px 7px 7px 10px; border-radius: 999px; background: rgba(5, 11, 44, .92); color: #FFFFFF; font: 700 15px/1.2 'Outfit', sans-serif;
  box-shadow: 0 20px 40px -18px rgba(5, 11, 44, .7), inset 0 0 0 1px rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: sf-toast .5s var(--ease) both; }
.banner > .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--g-ok); stroke-width: 3; }
.banner .link { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; color: #1A1300; background: var(--g-yellow); }
@keyframes sf-toast { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── the sheets: the privacy notice, the photo consent, the camera ── */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; background: rgba(5, 11, 44, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: sf-fade .25s ease both; }
.sheet-box { width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; background: var(--cream); color: var(--ink); border-radius: 28px 28px 0 0;
  padding: 10px 20px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 -30px 60px -30px rgba(5, 11, 44, .6);
  animation: sf-rise .4s var(--ease) both; }
.sheet-box::before { content: ""; align-self: center; flex: none; width: 44px; height: 5px; border-radius: 99px; background: rgba(26, 26, 46, .16); margin-bottom: 6px; }
.sheet h2 { margin: 0; font: 900 27px/1.08 'Outfit', sans-serif; letter-spacing: -.035em; color: var(--ink); }
.sheet-box p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text); }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-rise { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
/* the camera: a full-bleed dark sheet, the oval glowing, a big round shutter, the 3-2-1 */
.cam-sheet { background: #000000; align-items: stretch; }
.cam-sheet .sheet-box { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; gap: 12px; color: #FFFFFF; overflow: hidden;
  padding: max(12px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(360px 300px at 0% 100%, rgba(131, 56, 236, .4), transparent 70%), radial-gradient(320px 280px at 100% 0%, rgba(4, 243, 250, .2), transparent 70%), var(--navy-0); }
.cam-sheet .sheet-box::before { display: none; }
.cam-sheet h2 { color: #FFFFFF; text-align: center; font-size: 26px; }
.camview { position: relative; flex: 1; min-height: 240px; aspect-ratio: auto; background: #000000; border-radius: 28px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.camview video, .camview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.camview video { transform: scaleX(-1); }
.camview .oval { position: absolute; left: 50%; top: 44%; width: 64%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 0 0 9999px rgba(5, 11, 44, .38), 0 0 26px 2px rgba(4, 243, 250, .75), inset 0 0 26px rgba(4, 243, 250, .45);
  animation: sf-breathe 2.6s ease-in-out infinite; }
@keyframes sf-breathe { 0%, 100% { box-shadow: 0 0 0 9999px rgba(5, 11, 44, .38), 0 0 22px 1px rgba(4, 243, 250, .65), inset 0 0 22px rgba(4, 243, 250, .4); }
  50% { box-shadow: 0 0 0 9999px rgba(5, 11, 44, .38), 0 0 38px 6px rgba(131, 56, 236, .8), inset 0 0 30px rgba(131, 56, 236, .5); } }
.camview .count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font: 900 150px/1 'Outfit', sans-serif;
  letter-spacing: -.05em; text-shadow: 0 0 40px rgba(4, 243, 250, .9), 0 10px 40px rgba(0, 0, 0, .5); animation: sf-count .8s var(--ease) infinite; }
@keyframes sf-count { 0% { transform: scale(1.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { transform: scale(.92); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
.camview .note { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); color: #FFFFFF; font-size: 13.5px;
  line-height: 1.4; text-align: center; background: rgba(5, 11, 44, .7); border-radius: 999px; padding: 8px 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cam-ctrl { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shutter { appearance: none; border: 0; background: none; padding: 0; color: #FFFFFF; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 700 13px/1 'Outfit', sans-serif; letter-spacing: .02em; }
.shutter::before { content: ""; width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0 27px, transparent 28px), rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 4px #FFFFFF, 0 0 0 6px rgba(255, 255, 255, .08), 0 0 34px rgba(4, 243, 250, .55); transition: transform .15s, opacity .2s; }
.shutter:active::before { transform: scale(.9); }
.shutter:disabled { cursor: default; opacity: .45; }
.cam-ctrl .btn { width: 100%; }
.cam-top { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 48px; }
.cam-top h2 { grid-column: 2; }
.cam-x { grid-column: 3; justify-self: end; width: auto; min-height: 44px; padding: 0 16px; }
.cam-sheet .btn-line { background: rgba(255, 255, 255, .1); color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); font-size: 15px; padding: 0 14px; }
.cam-sheet .btn-quiet { color: #FFFFFF; }
.cam-sheet .error { margin: 0; }
.file { position: relative; overflow: hidden; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── 5. making: navy that glows, the video in its rainbow frame, the three stages ── */
.blogo { display: block; width: min(220px, 60%); height: auto; margin: 2px auto 0; filter: drop-shadow(0 10px 36px rgba(139, 76, 246, .5)); }
.video { position: relative; padding: 3px; border-radius: 26px; background: var(--g-rainbow); background-size: 300% 100%; animation: sf-shimmer 8s linear infinite;
  box-shadow: 0 34px 70px -30px rgba(131, 56, 236, .75), 0 0 0 1px rgba(255, 255, 255, .06); }
.video .vin { position: relative; border-radius: 23px; overflow: hidden; background: #000000; aspect-ratio: 16 / 9; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #000000; }
.sound { position: absolute; right: 10px; bottom: 10px; appearance: none; border: 0; border-radius: 999px; min-height: 40px; padding: 0 14px 0 12px; display: flex; gap: 7px; align-items: center;
  cursor: pointer; color: #FFFFFF; font: 700 13.5px 'Outfit', sans-serif; background: rgba(5, 11, 44, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sound::after { content: ""; position: absolute; inset: -4px; }
.sound .ic { width: 17px; height: 17px; }
.meter { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--g-rainbow); background-size: 200% 100%; animation: sf-shimmer 3s linear infinite;
  box-shadow: 0 0 14px rgba(131, 56, 236, .9); transition: width .8s ease; }
.stages { display: flex; flex-direction: column; gap: 6px; }
.stage { position: relative; display: flex; gap: 14px; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 18px; overflow: hidden;
  font: 500 15px/1.35 'Lexend Deca', sans-serif; color: rgba(255, 255, 255, .62); transition: color .4s, background .4s; }
.stage + .stage::before { content: ""; position: absolute; left: 26px; top: -19px; width: 2px; height: 32px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.stage.done + .stage::before { background: #22C55E; box-shadow: 0 0 8px rgba(34, 197, 94, .7); }
.stage .dot { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .26); transition: background .4s, box-shadow .4s; }
.stage .dot .ic { width: 15px; height: 15px; stroke-width: 3.2; stroke-dasharray: 24; stroke-dashoffset: 24; }
.stage.done { color: #FFFFFF; }
.stage.done .dot { background: #22C55E; box-shadow: 0 0 16px rgba(34, 197, 94, .7); }
.stage.done .dot .ic { stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--ease) .15s; }
.stage.now { color: #FFFFFF; font-weight: 600; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.stage.now::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .16) 50%, transparent 75%);
  transform: translateX(-100%); animation: sf-sweep 2s ease-in-out infinite; pointer-events: none; }
@keyframes sf-sweep { to { transform: translateX(100%); } }
.stage.now .dot { box-shadow: none; background: conic-gradient(from 0deg, #04F3FA, #8338EC, #FF006E, #FFBE0B, #04F3FA);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  animation: sf-spin 1.1s linear infinite; }
.m-navy .gift { box-shadow: 0 30px 60px -30px rgba(249, 115, 22, .8); }
.redraw-pv { position: relative; width: 64%; align-self: center; margin-top: 8px; border-radius: 12px; overflow: hidden; transform: rotate(-2deg);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .92), 0 34px 60px -24px rgba(131, 56, 236, .85); }
.redraw-pv.wide { width: 94%; }
.redraw-pv img { display: block; width: 100%; height: auto; filter: saturate(.75) brightness(.86); }
.redraw-pv .scan { position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 243, 250, .35) 80%, rgba(255, 255, 255, .95) 82%, transparent 85%); animation: sf-scan 2.6s ease-in-out infinite; }
@keyframes sf-scan { to { top: 100%; } }

/* ── ready: the payoff ── */
.ready-h { text-align: center; }
.ready-stage { position: relative; display: flex; justify-content: center; margin: -6px -20px -14px; padding: 12px 20px 30px; overflow: hidden; }
.ready-stage::before { content: ""; position: absolute; left: -20%; right: -20%; top: 24%; height: 46%; border-radius: 60px; background: var(--g-ribbon); background-size: 160% 160%;
  transform: rotate(-9deg); box-shadow: 0 30px 70px rgba(239, 68, 68, .35), 0 10px 30px rgba(249, 115, 22, .3); animation: sf-ribbon 10s ease-in-out infinite alternate; }
@keyframes sf-ribbon { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.ready-pv { position: relative; width: min(300px, 80vw); align-self: center; border-radius: 14px; }
.ready-stage .ready-pv { width: 86%; }
.ready-pv img { position: relative; width: 100%; display: block; border-radius: 12px; box-shadow: 0 0 0 6px #FFFFFF, 0 40px 60px -28px rgba(43, 21, 7, .65); }
.ready-pv.wide, .ready-stage .ready-pv.wide { width: 100%; }
.ready-stage.sent .ready-pv { width: 60%; }                /* sent: the poster steps back so the ticket shows */
.ready-stage.sent .ready-pv.wide { width: 86%; }
.ready-pv .shine { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none; }
.ready-pv .shine::after { content: ""; position: absolute; top: -10%; bottom: -10%; width: 45%; left: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%); transform: translateX(-160%) skewX(-12deg); opacity: 0; }
.ready-pv.reveal { animation: sf-reveal .9s var(--ease) both; }
.ready-pv.reveal .shine::after { animation: sf-shine 1.6s ease-in-out .7s 1 both; }
@keyframes sf-reveal { from { opacity: 0; transform: scale(.86) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sf-shine { 0% { transform: translateX(-160%) skewX(-12deg); opacity: 1; } 100% { transform: translateX(330%) skewX(-12deg); opacity: 1; } }
.size { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #FFFFFF; font-size: 13px; color: var(--text);
  box-shadow: 0 1px 0 var(--line), 0 8px 20px -12px rgba(26, 26, 46, .4); text-align: center; }
.ticket { display: flex; gap: 16px; align-items: center; overflow: hidden; }
.ticket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--g-warm); }
.ticket .num { flex: none; padding: 4px 16px 4px 4px; border-right: 2px dashed rgba(26, 26, 46, .12); font: 900 42px/1 'Outfit', sans-serif; letter-spacing: -.04em;
  background: var(--g-warm-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ticket .st { font-size: 14px; line-height: 1.45; color: var(--text); }
.ticket .st b { font: 800 16px/1.3 'Outfit', sans-serif; color: var(--ink); }
.ticket .small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.ticket .small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--b-green); animation: sf-blink 1.6s ease-in-out infinite; }
@keyframes sf-blink { 50% { opacity: .3; } }
/* the ribbon CTA (after "Make it yours") */
.cta { display: flex; flex-direction: column; gap: 12px; overflow: hidden; color: #FFFFFF; padding: 24px 20px 18px; border-radius: 28px; background: var(--g-sunset);
  box-shadow: 0 34px 60px -30px rgba(220, 38, 38, .8); }
.cta::after { content: "✦"; position: absolute; right: 18px; top: 14px; font-size: 22px; color: rgba(255, 255, 255, .5); }
.cta .ttl { display: flex; gap: 10px; align-items: flex-start; font: 900 23px/1.08 'Outfit', sans-serif; letter-spacing: -.03em; padding-right: 26px; }
.cta .ttl .ic { width: 26px; height: 26px; color: #FFE52C; margin-top: 1px; }
.cta .small { color: #FFFFFF; font-size: 14px; line-height: 1.5; }
.cta .btn-magenta { background: #FFFFFF; color: var(--ink); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .45); }
.cta .about-link { color: #FFFFFF; }

/* ── 4B. info: three glowing asks, the address and the principal as sub-cards ── */
.opt { appearance: none; width: 100%; text-align: left; border: 2px solid transparent; border-radius: 24px; padding: 16px 16px 16px 14px; display: flex; gap: 14px; align-items: flex-start;
  cursor: pointer; color: var(--ink); font: inherit;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(rgba(26, 26, 46, .07), rgba(26, 26, 46, .07)) border-box;
  box-shadow: 0 20px 36px -28px rgba(26, 26, 46, .6); transition: box-shadow .3s var(--ease), transform .2s; }
.opt:active { transform: scale(.985); }
.opt.on { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--g-brand) border-box; box-shadow: 0 24px 40px -22px rgba(107, 33, 168, .6); }
.opt .oi { width: 46px; height: 46px; border-radius: 15px; flex: none; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--c);
  box-shadow: 0 10px 22px -10px var(--c); }
.opt .oi .ic { width: 23px; height: 23px; }
.opt .otx { flex: 1; min-width: 0; }
.opt .ot { font: 800 17px/1.2 'Outfit', sans-serif; letter-spacing: -.01em; }
.opt .os { font-size: 13.5px; color: var(--muted); line-height: 1.42; margin-top: 4px; }
.opt .obadge { display: inline-block; margin-top: 9px; padding: 5px 10px; border-radius: 999px; font: 800 12px/1.1 'Outfit', sans-serif; color: var(--ink-warm); background: var(--g-ribbon-soft); }
.sq { order: 3; width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #FFFFFF; margin-top: 1px;
  box-shadow: inset 0 0 0 2px #C9C3B6; transition: background .25s, box-shadow .25s; }
.sq .ic { width: 15px; height: 15px; stroke-width: 3.2; stroke-dasharray: 24; stroke-dashoffset: 24; }
.opt.on .sq { background: var(--g-brand); box-shadow: 0 6px 14px -6px rgba(107, 33, 168, .8); }
.opt.on .sq .ic { stroke-dashoffset: 0; }
.opt.pop .sq { animation: sf-pop .45s var(--ease); }
.opt.pop .sq .ic { animation: sf-draw .45s var(--ease) .08s both; }
@keyframes sf-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes sf-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.card.sub[data-card] { margin-top: -6px; padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .86); }
.card.sub[data-card] .input { padding: 0 14px; }
[data-card="sample"] > .two { grid-template-columns: minmax(0, 1fr) 172px; }
[data-card="sample"] > .two > .two { grid-template-columns: 66px minmax(0, 1fr); }

/* ── done ── */
.done-hd { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding-top: 4px; }
.big-check { position: relative; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--g-ok);
  box-shadow: 0 18px 34px -14px rgba(14, 165, 164, .8), 0 0 0 8px rgba(34, 197, 94, .12); }
.big-check svg { width: 38px; height: 38px; fill: none; stroke: #FFFFFF; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
.big-check.go { animation: sf-pop .6s var(--ease) both; }
.big-check.go svg { animation: sf-draw2 .6s var(--ease) .25s both; }
@keyframes sf-draw2 { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
.done-list { display: flex; flex-direction: column; gap: 10px; }
.check { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 1.45; background: #FFFFFF; border-radius: 20px; padding: 16px; box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.check .ok { width: 30px; height: 30px; border-radius: 50%; background: var(--g-ok); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 8px 16px -8px rgba(14, 165, 164, .8); }
.check .ok .ic { width: 16px; height: 16px; stroke-width: 3; }
.check b { font: 800 16px/1.3 'Outfit', sans-serif; letter-spacing: -.01em; color: var(--ink); }
.check span.s { color: var(--muted); font-size: 13.5px; }
.vcap { margin: -4px 0 0; }

/* sharing (2026-10-25): the share card (done), the compact pair (Ready), the "Everything we do" card and link */
.share { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.share::after { content: ""; position: absolute; width: 200px; height: 200px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(4, 243, 250, .22), transparent 70%); pointer-events: none; }
.share-top { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.share-top .t { font: 800 18px/1.2 'Outfit', sans-serif; letter-spacing: -.015em; margin-bottom: 4px; color: var(--ink); }
.share-ic { width: 46px; height: 46px; border-radius: 15px; background: var(--g-cyan); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 10px 22px -10px rgba(4, 200, 250, .9); }
.share-ic .ic { width: 22px; height: 22px; }
.share .stack { position: relative; gap: 10px; }
.okline.small { margin: 0; }
.share-mini { display: flex; flex-direction: column; gap: 8px; }
.share-mini .two { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
.btn-share { min-height: 48px; padding: 0 12px; font-size: 15px; gap: 8px; }
.btn-share .ic { width: 19px; height: 19px; color: #6B21A8; }
.share-copy .input { font-size: 14px; }
.about-link { align-self: center; text-align: center; padding: 2px 0; }
.about-card { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; border-radius: 28px; overflow: hidden; cursor: pointer; text-align: left;
  color: #FFFFFF; font: inherit; background: radial-gradient(260px 220px at 100% 100%, rgba(4, 243, 250, .22), transparent 70%), linear-gradient(170deg, var(--navy-1), var(--navy-0));
  box-shadow: 0 34px 60px -30px rgba(26, 11, 61, .85); transition: transform .3s var(--ease); }
.about-card:active { transform: scale(.985); }
.about-art { position: relative; display: block; height: 168px; overflow: hidden;
  background: linear-gradient(rgba(234, 88, 12, .08) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(234, 88, 12, .08) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(60% 70% at 85% 10%, rgba(251, 191, 36, .4), transparent 70%), var(--cream); }
.about-art .rb { position: absolute; left: -10%; right: -12%; top: 52px; height: 92px; border-radius: 40px; background: var(--g-ribbon); transform: rotate(-9deg);
  box-shadow: 0 20px 40px rgba(239, 68, 68, .35); }
.about-art img { position: absolute; height: auto; filter: drop-shadow(0 16px 18px rgba(43, 21, 7, .35)); }
.about-art .a0 { width: 62%; left: 2%; top: 10px; }
.about-art .a1 { width: 44%; right: 2%; top: 46px; }
.about-tx { display: flex; flex-direction: column; gap: 4px; padding: 18px 64px 20px 20px; }
.about-tx .k { font: 700 11.5px/1.2 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FFE52C; }
.about-tx .t { font: 900 22px/1.1 'Outfit', sans-serif; letter-spacing: -.03em; }
.about-tx .s { font-size: 13.5px; line-height: 1.45; color: var(--on-navy); }
.about-card .chev { position: absolute; right: 18px; bottom: 26px; width: 40px; height: 40px; padding: 10px; border-radius: 50%; color: #1A1300; background: var(--g-yellow);
  stroke-width: 2.6; box-shadow: 0 10px 20px -8px rgba(255, 184, 0, .9); }

/* organizers (the second choice at the booth) */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { appearance: none; border: 0; background: #FFFFFF; border-radius: 20px; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
  color: var(--ink); font: 700 14px/1.25 'Outfit', sans-serif; box-shadow: var(--card-shadow), inset 0 0 0 1px var(--line); }
.tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 13px; background: var(--mist); }

/* closed */
.closed-art { position: relative; height: 296px; margin: 8px -20px 0; overflow: hidden; }
.closed-art .rb { position: absolute; left: -12%; right: -16%; top: 56px; height: 150px; border-radius: 50px; background: var(--g-ribbon); background-size: 160% 160%; transform: rotate(-9deg);
  box-shadow: 0 30px 60px rgba(239, 68, 68, .35); animation: sf-ribbon 10s ease-in-out infinite alternate; }
.closed-art img { position: absolute; height: auto; filter: drop-shadow(0 24px 26px rgba(43, 21, 7, .35)); }
.closed-art .a0 { width: 66%; left: 4%; top: 10px; }
.closed-art .a1 { width: 48%; right: 4%; top: 84px; }

/* the one-time confetti (the poster ready, the requests sent): a canvas over the page, gone after ~1.4 s */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sf, .sf *, .sf *::before, .sf *::after, .sheet, .sheet *, .sheet *::before, .sheet *::after { animation: none !important; transition: none !important; }
  .ready-pv .shine { display: none; }
}

/* the share panel (2026-10-25): the poster through the phone's share menu, the link straight to each network */
.sh-sheet .sheet-box { gap: 14px; }
.sh-poster { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 22px; background: #FFFFFF;
  box-shadow: 0 1px 0 var(--line), 0 18px 34px -22px rgba(26, 26, 46, .5); }
.sh-poster img { width: 100%; border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(26, 26, 46, .6); }
.sh-pbody { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-pbody .btn { min-height: 48px; padding: 0 14px; }
.sh-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.sh-row .sh-ic.sm { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; }
.sh-row .sh-ic.sm svg { width: 17px; height: 17px; }
.sh-h { margin: 4px 0 0; font: 800 17px/1.2 'Outfit', sans-serif; letter-spacing: -.01em; color: var(--ink); }
.sh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; padding: 4px 0; }
.sh-net { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: none; color: var(--ink);
  font: 600 12.5px/1.2 'Outfit', sans-serif; text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sh-ic { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: 0 12px 22px -14px rgba(26, 26, 46, .65); transition: transform .25s var(--ease); }
.sh-ic svg { width: 30px; height: 30px; }
.sh-net:active .sh-ic { transform: scale(.92); }
.sh-net:focus-visible { outline: none; }
.sh-net:focus-visible .sh-ic { box-shadow: 0 0 0 3px var(--ring); }
@media (hover: hover) { .sh-net:hover .sh-ic { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .sh-ic { transition: none; } }

/* make your own poster (2026-10-25, friends' posters and /make): "You're in line" while the booth's posters go first,
   the friend's Ready (Download first, the share pair in the dock, the rest as quiet pills), the stop card */
.inline { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; color: #FFFFFF;
  background: linear-gradient(120deg, rgba(250, 204, 21, .16), rgba(236, 72, 153, .16)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.inline b { display: block; font: 800 18px/1.2 'Outfit', sans-serif; letter-spacing: -.015em; }
.inline .small { color: var(--on-navy); }
.inline-dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--g-warm); box-shadow: 0 0 14px rgba(251, 191, 36, .8); }
.inline-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(251, 191, 36, .6); animation: sf-ping 1.6s ease-out infinite; }
@keyframes sf-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.friend-more { display: flex; flex-direction: column; gap: 10px; }
.friend-more .btn { min-height: 50px; gap: 10px; font-size: 16px; }
.printed { color: var(--text); }
.printed .link { font-size: 13px; }
.sf-ready .link.quiet .ic { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.stop-h { font-size: clamp(32px, 9.2vw, 42px) !important; }
@media (prefers-reduced-motion: reduce) { .inline-dot::after { display: none; } }