/* MORPHBOARD phone (/play). Designed at 375 px first; one column, thumb-reachable actions, every colour/face from the pack. */
body { min-height: 100svh; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--primary) 18%, var(--bg)) 0%, var(--bg) 62%) fixed, var(--bg); }
#app { max-width: 480px; margin: 0 auto; min-height: 100svh; display: flex; flex-direction: column; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.wm { font-size: clamp(14px, 5vw, 20px); color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .logo { height: 28px; max-width: 55%; object-fit: contain; object-position: left; }
.tags { margin-left: auto; display: flex; gap: 6px; } .devtag, .drill { white-space: nowrap; font: 800 10.5px/1 var(--body); letter-spacing: .12em; padding: 5px 7px; border-radius: 6px; background: var(--warn); color: #fff; } .drill { background: var(--accent); color: var(--on-accent); }
.net { position: sticky; top: 0; z-index: 20; margin: 4px 0; padding: 7px 12px; border-radius: 99px; background: var(--warn); color: #fff; font-weight: 800; font-size: 13px; text-align: center; }
.step { flex: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding-top: 10px; } .foot.sticky { position: sticky; bottom: 0; padding-bottom: 6px; background: linear-gradient(transparent, var(--bg) 30%); }
.row { display: flex; gap: 10px; } .row .btn { flex: 1; } .row.two .btn { min-height: 48px; }
.kicker { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin: 0 0 6px; font-size: 12px; }
h1.display { font-size: clamp(44px, 14vw, 70px); margin: 0; overflow-wrap: anywhere; } h2.display { font-size: 30px; margin: 0; }
.lede { font-size: 17px; line-height: 1.45; color: var(--muted); margin: 0; } .fine { font-size: 12.5px; color: var(--muted); margin: 0; text-align: center; } .fine a { color: inherit; } .warnline { color: var(--accent); font-weight: 700; }
/* vendor line (Setup > Vendor mark): a small muted link under the splash button and under the result actions */
.vendor { text-align: center; font: 11.5px/1.4 var(--body); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; padding: 2px 0 0; } .vendor[hidden] { display: none; }
.linkish { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; text-align: center; padding: 8px; cursor: pointer; font-size: 15px; } .linkish.danger { color: var(--warn); }

/* splash teaser: two tiles and a sweep, in the pack frame, plus the preset emojis drifting by */
.hero { margin-top: 2vh; display: flex; flex-direction: column; gap: 10px; }
.teaser { height: min(38vh, 300px); border-radius: var(--fr); overflow: hidden; background: var(--frame-matte, var(--deep)); margin-bottom: 12px; }
.tz { position: absolute; inset: var(--fb); border-radius: calc(var(--fr) * .6); }
.tz.a { background: var(--tza, none) 50% 30% / cover, var(--deep); filter: blur(10px) brightness(.4) saturate(.5); transform: scale(1.08); }
.tz.b { background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--primary) 35%, transparent)), var(--tzb, none) 50% 30% / cover, var(--deep); clip-path: inset(0 0 0 100%); animation: tzReveal 4.8s var(--ease) infinite; }
.tz-fx { position: absolute; inset: var(--fb); background: linear-gradient(100deg, transparent 40%, var(--sweep, var(--primary)) 50%, #fff 51%, transparent 60%); background-size: 300% 100%; mix-blend-mode: screen; animation: tzSweep 4.8s var(--ease) infinite; }
@keyframes tzReveal { 0%, 18% { clip-path: inset(0 100% 0 0); } 58%, 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes tzSweep { 0%, 16% { background-position: 110% 0; } 60%, 100% { background-position: -20% 0; } }
.chips-marquee { position: absolute; left: 0; right: 0; bottom: calc(var(--fb) + 8px); display: flex; gap: 12px; font-size: 26px; white-space: nowrap; animation: marquee 16s linear infinite; z-index: 3; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* camera */
.cam { overflow: hidden; aspect-ratio: 3 / 4; width: 100%; max-height: 62svh; margin: 0 auto; background: #000; border-radius: var(--fr); }
.cam video, .cam img { position: absolute; inset: var(--fb); width: calc(100% - 2 * var(--fb)); height: calc(100% - 2 * var(--fb)); object-fit: cover; border-radius: calc(var(--fr) * .6); } .cam video { transform: scaleX(-1); }
.guide { position: absolute; left: 24%; right: 24%; top: 13%; bottom: 31%; border: 3px dashed color-mix(in srgb, #fff 60%, transparent); border-radius: 50%; pointer-events: none; transition: border-color .2s, box-shadow .2s; z-index: 2; }
.guide.ok { border-style: solid; border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 30%, transparent), 0 0 40px color-mix(in srgb, var(--primary) 50%, transparent); }
.hint { position: absolute; left: 50%; top: calc(var(--fb) + 10px); transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; z-index: 3; }
.hint.ok { background: var(--primary); color: var(--on-primary); }
.camerr { position: absolute; inset: auto 16px 16px; margin: 0; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); font-weight: 700; z-index: 3; }
.shoot { justify-content: center; } .shutter { width: 76px; height: 76px; border-radius: 50%; border: 5px solid var(--ink); display: grid; place-items: center; transition: transform .15s, opacity .2s; }
.shutter span { width: 58px; height: 58px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 24px -4px var(--primary); } .shutter:active { transform: scale(.92); } .shutter[disabled] { opacity: .35; pointer-events: none; }

/* pick */
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-bottom: 6px; }
.chip { text-align: left; padding: 7px 8px 12px; border-radius: calc(var(--radius) * .8); background: var(--panel); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 5px; min-height: 118px; position: relative; overflow: hidden; transition: border-color .15s, transform .15s; }
.chip .pv { position: relative; display: grid; place-items: end start; height: 74px; margin: -4px -3px 4px; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--pv) 88%, transparent), color-mix(in srgb, var(--pv) 55%, var(--deep))), var(--pvimg, none) 50% 30% / cover, var(--deep); background-blend-mode: normal, luminosity, normal; }
.chip .pv .e { font-size: 30px; line-height: 1; padding: 8px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.chip b { font-size: 15.5px; line-height: 1.2; } .chip small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.chip .fxk { position: absolute; right: 9px; top: 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chip[aria-checked=true] { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); transform: translateY(-1px); } .chip[aria-checked=true] .fxk { color: var(--primary); }

/* name + consent */
.pick { display: flex; gap: 12px; align-items: center; padding: 10px; } .pick img { width: 54px; height: 72px; object-fit: cover; border-radius: 10px; } .pick div { flex: 1; display: flex; flex-direction: column; } .pick strong { font-size: 17px; }
/* the look's pledge on the consent step (presets with a card, e.g. nine-to-five): a pack-colour kicker over the line the card will print */
.pledge { padding: 10px 14px; border-left: 3px solid var(--primary); } .pledge .pk { display: block; font: 800 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 6px; } .pledge q { display: block; font-size: 16px; line-height: 1.35; color: var(--ink); quotes: "\201C" "\201D"; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; } .field em { font-weight: 400; color: var(--muted); font-style: normal; } .field small { font-weight: 500; font-size: 12px; }
input:not([type=checkbox]), select { font: inherit; font-size: 17px; color: var(--ink); background: color-mix(in srgb, var(--deep) 70%, transparent); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; width: 100%; outline: none; } input:focus, select:focus { border-color: var(--primary); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; } .check input { width: 24px; height: 24px; flex: none; margin-top: 1px; accent-color: var(--primary); }
.err { color: var(--warn); font-weight: 700; margin: 0; }

/* capsule */
#s-wait { text-align: center; align-items: center; }
.capsule { display: flex; align-items: center; gap: 14px; padding: calc(var(--fb) + 10px); width: 100%; margin-top: 4vh; border-radius: max(var(--fr), 22px); background: var(--frame-matte, var(--deep)); text-align: left; animation: capIn .7s var(--ease) both; }
@keyframes capIn { from { transform: scale(1.25) translateY(-30px); opacity: 0; } }
.cap-pic { position: relative; width: 96px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; flex: none; box-shadow: 0 10px 30px -10px var(--primary); } .cap-pic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.85); }
.scan { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary) 70%, transparent) 48%, transparent 52%); background-size: 100% 220%; animation: scan 2.2s var(--ease) infinite; mix-blend-mode: screen; }
@keyframes scan { from { background-position: 0 120%; } to { background-position: 0 -120%; } }
.cap-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); } .cap-chip { font-size: 28px; } .cap-meta strong { font-size: 19px; } .cap-meta small { color: var(--muted); font-weight: 700; }
html[data-frame=expo-badge] .cap-meta, html[data-frame=butterfly-cameo] .cap-meta, html[data-frame=time-card] .cap-meta { color: var(--bg); } html[data-frame=expo-badge] .cap-meta small, html[data-frame=butterfly-cameo] .cap-meta small, html[data-frame=time-card] .cap-meta small { color: color-mix(in srgb, var(--bg) 70%, transparent); }
html[data-frame=time-card] .capsule { padding-top: calc(var(--fb) * 1.75 + 10px); } html[data-frame=time-card] .tz-tag { top: calc(var(--fb) * 1.75 + 8px); }
.stages { display: flex; gap: 6px; list-style: none; padding: 0; margin: 6px 0 0; } .stages li { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.stages li.on { background: var(--primary); color: var(--on-primary); border-color: transparent; animation: pulse 1.4s ease-in-out infinite; } .stages li.done { color: var(--ink); border-color: var(--primary); }
@keyframes pulse { 50% { filter: brightness(1.15); transform: scale(1.04); } }
#s-wait .lede { min-height: 1.5em; font-weight: 700; color: var(--ink); } #s-wait h2 { margin-top: 8px; }

/* result: the 9:16 stage the phone plays its own Tier 1 morph in */
.stage916 { width: min(100%, calc(56svh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: var(--fr); overflow: hidden; background: var(--frame-matte, var(--deep)); flex: none; }
.stage916 canvas, .stage916 video { position: absolute; inset: var(--fb); width: calc(100% - 2 * var(--fb)); height: calc(100% - 2 * var(--fb)); display: block; }
.stage916 video { object-fit: contain; background: #000; z-index: 2; }
.cmp { position: absolute; left: var(--fb); right: var(--fb); top: calc(var(--fb) + (100% - 2 * var(--fb)) * .035); aspect-ratio: 3 / 4; z-index: 2; touch-action: none; overflow: hidden; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--deep); } /* the full still, never a face crop */ .cmp #resAfter { clip-path: inset(0 0 0 var(--cut, 50%)); }
.cmp-line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.5); }
.cmp-line span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-weight: 800; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.cmp-l, .cmp-r { position: absolute; bottom: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; } .cmp-l { left: 8px; } .cmp-r { right: 8px; }
.cap916 { position: absolute; left: var(--fb); right: var(--fb); bottom: calc(var(--fb) + 1.5%); height: 16.5%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 3; pointer-events: none; }
.wm916 { font-size: 13px; color: var(--primary); letter-spacing: .1em; }
.plate { font-size: clamp(15px, 4.4vw, 21px); padding: 5px 12px; background: var(--cap-bg, var(--deep)); color: var(--cap-ink, var(--primary)); border-bottom: 3px solid var(--cap-rule, var(--primary)); transform: rotate(var(--cap-tilt, 0deg)); max-width: 92%; text-align: center; line-height: 1.05; border-radius: 4px; }
html[data-frame=showroom-chrome] .plate { border-bottom: 0; border-left: 5px solid var(--cap-rule); }
/* per-preset card (packs with presets[].card): the stat line and the look's pledge under the plate; empty = not rendered */
.x916 { font: 700 10.5px/1.25 var(--body); color: var(--cap-ink, var(--ink)); text-align: center; max-width: 94%; } .x916:empty { display: none; } .x916.stats { font: 10px/1.2 'Special Elite', var(--body); letter-spacing: .05em; text-transform: uppercase; }
html[data-frame=time-card] .cap916 { height: auto; min-height: 16.5%; bottom: calc(var(--fb) + 28px); gap: 4px; } /* clear of the stamp in the bottom band */
.pill916 { position: absolute; top: calc(var(--fb) + 10px); left: calc(var(--fb) + 10px); z-index: 4; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 99px; background: var(--primary); color: var(--on-primary); }
.pill916.demo { background: var(--accent); color: var(--on-accent); }
.replay { position: absolute; top: calc(var(--fb) + 8px); right: calc(var(--fb) + 8px); z-index: 4; padding: 6px 11px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-weight: 800; font-size: 13px; }
.lookup { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); animation: lookup 1s var(--ease) infinite alternate; } .lookup strong { font-size: 40px; } .lookup span { font-weight: 800; }
@keyframes lookup { to { transform: scale(1.03); box-shadow: 0 0 40px var(--primary); } }
.status { font-size: 16px; font-weight: 700; margin: 0; text-align: center; } .note { text-align: center; }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; } .actions a.btn { text-decoration: none; }
.hold { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } .hold .lbl, .hold .fill { pointer-events: none; user-select: none; -webkit-user-select: none; } .hold .fill { position: absolute; inset: 0; background: color-mix(in srgb, #fff 35%, transparent); transform-origin: left; transform: scaleX(0); } .hold.pressing .fill { transform: scaleX(1); transition: transform .6s linear; } .hold .lbl { position: relative; }
.hold.sent { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }

/* message states */
#s-message { text-align: center; align-items: center; justify-content: center; } .msg-ico { font-size: 54px; color: var(--primary); margin-top: 8vh; }

/* lead sheet */
.sheet { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; z-index: 30; }
.sheet-card { width: 100%; max-width: 480px; border-radius: 22px 22px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; position: relative; max-height: 92svh; overflow: auto; background: var(--deep); }
.sheet h3 { margin: 0; font-size: 22px; } .close { position: absolute; right: 10px; top: 8px; font-size: 30px; width: 44px; height: 44px; }
#leadForm { display: flex; flex-direction: column; gap: 12px; } #leadForm .ferr { color: var(--warn); font-size: 13px; font-weight: 700; }
@media (max-height: 700px) { .teaser { height: 30vh; } h1.display { font-size: 46px; } }
.cmp.solo .cmp-l, .cmp.solo .cmp-r { display: none; } .cmp.solo { touch-action: auto; }
.staff textarea { font: inherit; font-size: 16px; color: var(--ink); background: color-mix(in srgb, var(--deep) 70%, transparent); border: 1.5px dashed var(--accent); border-radius: 12px; padding: 11px 13px; width: 100%; resize: vertical; }
.tz-tag { position: absolute; top: calc(var(--fb) + 8px); left: calc(var(--fb) + 8px); z-index: 4; font: 800 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px; border-radius: 5px; background: rgba(0,0,0,.6); color: #fff; }
.stage916.has-video .cap916 { display: none; }