/* Creator wizard — extra styles on top of theme.css (Minimal anatomy, logical properties only). */
/* --dw-peek = height of the drawer's peek row (set from JS); 0 on the share screen where the drawer is hidden */
:root{--dw-peek:var(--dw-h,0px)}
html.no-dw{--dw-peek:0px}
.app{min-block-size:100dvh;display:flex;flex-direction:column;padding-block-end:var(--dw-peek)}

/* top bar: back · segmented progress · step count */
.topbar{position:sticky;inset-block-start:0;z-index:20;background:color-mix(in srgb,var(--c-bg) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.topbar-in{max-inline-size:560px;margin-inline:auto;padding:8px 16px;display:flex;align-items:center;gap:12px;min-block-size:60px}
.topbar .progress{flex:1}
.topbar .progress i{transition:background .25s var(--ease)}
.stepcount{font-size:13px;font-weight:700;color:var(--c-muted);min-inline-size:28px;text-align:end}
.iconbtn{inline-size:44px;block-size:44px;flex:none;display:grid;place-items:center;border:0;background:transparent;border-radius:12px;color:var(--c-text);margin-inline-start:-10px}
.iconbtn:hover{background:var(--c-surface-2)}
.iconbtn svg{inline-size:24px;block-size:24px}
.topbar.solo .progress,.topbar.solo .stepcount{visibility:hidden}

/* step view */
.view{flex:1;inline-size:100%;max-inline-size:560px;margin-inline:auto;padding:8px 16px 24px;outline:none}
.step{display:flex;flex-direction:column;gap:22px}
.step.enter{animation:stepIn .32s var(--ease) both}
.step.enter.rev{animation-name:stepInRev}
@keyframes stepIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes stepInRev{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.step-head{display:flex;flex-direction:column;gap:6px;padding-block-start:4px}
.eyebrow{font-size:13px;font-weight:800;color:var(--c-primary-dark);letter-spacing:.01em}
.step-head .h1:focus{outline:none}
.sec{display:flex;flex-direction:column;gap:12px}
.sec-title{font-size:15px;font-weight:800;margin:0;color:var(--c-text)}
.sec-sub{font-size:14px;color:var(--c-muted);margin:0}
.hint{font-size:13px;color:var(--c-faint);margin:0}
.err-text{font-size:13px;font-weight:600;color:var(--c-error);margin:0}
.field .opt{font-weight:500;color:var(--c-faint)}
.grid2{display:grid;grid-template-columns:1fr 104px;gap:12px}
.input.invalid{border-color:var(--c-error);box-shadow:0 0 0 3px var(--c-error-soft)}
.input[readonly]{background:var(--c-surface-2)}
.linkbtn{border:0;background:none;padding:10px 4px;min-block-size:44px;font-size:14px;font-weight:700;color:var(--c-primary-dark);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.linkbtn svg{inline-size:18px;block-size:18px}
.linkbtn.muted{color:var(--c-muted)}
.chip{min-block-size:44px}
.chip:focus-visible{outline-offset:2px}

/* theme swatches */
.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px;border:1px solid var(--c-border);border-radius:14px;white-space:nowrap;background:var(--c-surface);font-size:13px;font-weight:700;color:var(--c-muted);min-block-size:76px}
.swatch .dot{inline-size:30px;block-size:30px;border-radius:50%;display:grid;place-items:center;color:#fff}
.swatch .dot svg{inline-size:18px;block-size:18px;opacity:0;transition:opacity .15s}
.swatch[aria-pressed="true"]{border-color:var(--c-primary);color:var(--c-text);background:var(--c-primary-soft)}
.swatch[aria-pressed="true"] .dot svg{opacity:1}

/* title preview */
.title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* my games */
.mygames{display:flex;justify-content:center}
.sheet-back{position:fixed;inset:0;z-index:60;background:color-mix(in oklab,var(--c-text) 28%,transparent);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s both}
.sheet{inline-size:100%;max-inline-size:560px;max-block-size:80dvh;overflow:auto;background:var(--c-surface);border-start-start-radius:20px;border-start-end-radius:20px;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-lg);animation:up .25s var(--ease) both}
.sheet-grip{inline-size:40px;block-size:4px;border-radius:4px;background:var(--c-border-2);margin:6px auto 12px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-block-end:8px}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.glist li{display:flex;align-items:center;gap:12px;padding-block:12px;border-block-end:.5px solid var(--c-border)}
.glist li:last-child{border-block-end:0}
.glist .gt{flex:1;min-inline-size:0}
.glist .gt b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}

/* photos */
.drop{display:flex;align-items:center;gap:14px;inline-size:100%;padding:18px;border:1.5px dashed var(--c-border-2);border-radius:var(--radius);background:var(--c-surface);text-align:start;min-block-size:88px}
.drop:hover{border-color:var(--c-primary);background:var(--c-surface-2)}
.drop .ico{inline-size:52px;block-size:52px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.drop .ico svg{inline-size:26px;block-size:26px}
.drop b{display:block;font-size:16px}
.drop span{font-size:13px;color:var(--c-muted)}
.vh{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.meta-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.count{font-size:15px;font-weight:800}
.count small{font-weight:600;color:var(--c-muted);font-size:13px}
.count.ok{color:var(--c-success)}
.note{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--c-muted)}
.note svg{inline-size:16px;block-size:16px;flex:none;color:var(--c-success)}
.meter{block-size:6px;border-radius:6px;background:var(--c-border);overflow:hidden}
.meter i{display:block;block-size:100%;background:var(--c-primary);border-radius:6px;transition:inline-size .3s var(--ease)}
.meter.ok i{background:var(--c-success)}

.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.face{display:flex;flex-direction:column;gap:6px;min-inline-size:0}
.face .ph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--c-surface-2);box-shadow:var(--shadow)}
.face .ph img{inline-size:100%;block-size:100%;object-fit:cover;transition:opacity .2s,filter .2s}
.face[data-st="prep"] .ph img,.face[data-st="up"] .ph img{opacity:.55;filter:saturate(.6)}
.face .rm{position:absolute;inset-block-start:2px;inset-inline-end:2px;inline-size:44px;block-size:44px;border:0;background:none;padding:0;display:grid;place-items:center}
.face .rm span{inline-size:28px;block-size:28px;border-radius:50%;background:rgba(30,22,16,.62);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px)}
.face .rm svg{inline-size:16px;block-size:16px}
.face .st{position:absolute;inset-block-end:6px;inset-inline-start:6px;inline-size:24px;block-size:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.face .st svg{inline-size:14px;block-size:14px}
.face[data-st="ok"] .st{background:var(--c-success)}
.face[data-st="prep"] .st,.face[data-st="up"] .st{background:rgba(255,255,255,.9)}
.face[data-st="prep"] .st::after,.face[data-st="up"] .st::after{content:"";inline-size:14px;block-size:14px;border-radius:50%;border:2px solid var(--c-primary-soft);border-block-start-color:var(--c-primary);animation:spin .8s linear infinite}
.face .retry{position:absolute;inset:0;border:0;background:color-mix(in oklab,var(--c-error) 82%,transparent);color:#fff;font-weight:800;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;text-align:center}
.face .retry svg{inline-size:22px;block-size:22px}
.face .name{min-block-size:44px;padding-inline:8px;text-align:center;font-size:16px}
.face.add .ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1.5px dashed var(--c-border-2);box-shadow:none;background:var(--c-surface);color:var(--c-primary-dark);font-size:13px;font-weight:800;inline-size:100%;cursor:pointer}
.face.add .ph svg{inline-size:28px;block-size:28px}
@keyframes spin{to{transform:rotate(360deg)}}

.consent{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--radius);background:var(--c-surface);box-shadow:var(--shadow);cursor:pointer;font-size:15px;line-height:1.5}
.consent input{appearance:none;-webkit-appearance:none;flex:none;inline-size:24px;block-size:24px;margin:1px 0 0;border:1.5px solid var(--c-border-2);border-radius:7px;display:grid;place-items:center;background:var(--c-surface);cursor:pointer}
.consent input:checked{background:var(--c-primary);border-color:var(--c-primary)}
.consent input:checked::after{content:"";width:12px;height:7px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:translateY(-2px) rotate(-45deg)} /* physical on purpose: a check mark does not mirror */
.consent.invalid{box-shadow:0 0 0 2px var(--c-error)}

/* questionnaire */
.qcard{display:flex;flex-direction:column;gap:12px;padding:16px}
.qhead{display:flex;align-items:flex-start;gap:10px}
.qnum{flex:none;inline-size:28px;block-size:28px;border-radius:50%;background:var(--c-primary-soft);color:var(--c-primary-dark);display:grid;place-items:center;font-size:14px;font-weight:800}
.qcard.done .qnum{background:var(--c-success);color:#fff}
.qcard.done .qnum svg{inline-size:16px;block-size:16px}
.qtext{flex:1;font-size:16px;font-weight:800;margin:0;padding-block-start:2px;text-wrap:pretty}
.qskip{flex:none;border:0;background:none;font-size:13px;font-weight:700;color:var(--c-muted);min-block-size:36px;padding-inline:8px;border-radius:8px;margin-block-start:-4px}
.qskip:hover{background:var(--c-surface-2)}
.qcard.skipped{background:transparent;box-shadow:none;border:.5px dashed var(--c-border-2);padding-block:10px}
.qcard.skipped .qbody{display:none}
.qcard.skipped .qtext{color:var(--c-faint);font-weight:600}
.qbody{display:flex;flex-direction:column;gap:12px}
.wrong-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wrong-head span{font-size:13px;font-weight:700;color:var(--c-muted)}
.wrongs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wrongs .input{min-block-size:44px;border-radius:var(--radius-full);padding-inline:12px;background:var(--c-surface-2);border-style:dashed;font-size:16px}
.mphoto{display:flex;align-items:center;gap:12px}
.mphoto .thumb{inline-size:64px;block-size:64px;border-radius:12px;overflow:hidden;flex:none;background:var(--c-surface-2);position:relative}
.mphoto .thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.mphoto .thumb .st{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.5)}
.mphoto .thumb .st::after{content:"";inline-size:18px;block-size:18px;border-radius:50%;border:2px solid var(--c-primary-soft);border-block-start-color:var(--c-primary);animation:spin .8s linear infinite}
.addph{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;padding-inline:14px;border:.5px solid var(--c-border-2);border-radius:var(--radius-sm);background:var(--c-surface);font-size:14px;font-weight:700;color:var(--c-text);cursor:pointer}
.addph svg{inline-size:18px;block-size:18px;color:var(--c-primary-dark)}
.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pick button{border:0;background:none;padding:4px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:4px;min-inline-size:0;font-size:13px;font-weight:700;color:var(--c-muted)}
.pick button img{inline-size:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.pick button span{max-inline-size:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick button[aria-checked="true"]{color:var(--c-text)}
.pick button[aria-checked="true"] img{box-shadow:0 0 0 3px var(--c-primary)}
.qfoot{display:flex;justify-content:center}

/* video */
.vcard{display:flex;flex-direction:column;gap:14px}
.vrow{display:flex;gap:12px;align-items:flex-start}
.vrow .ico{inline-size:44px;block-size:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.vrow .ico svg{inline-size:22px;block-size:22px}
.vrow p{margin:0;font-size:15px}
.vbtns{display:grid;gap:10px}
.vprev{position:relative;border-radius:var(--radius);overflow:hidden;background:#1d1611;aspect-ratio:3/4;inline-size:min(100%,260px);margin-inline:auto;box-shadow:var(--shadow)}
.vprev video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.vprev .vstate{position:absolute;inset-block-start:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);color:var(--c-text);font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px}
.vprev .vstate svg{inline-size:14px;block-size:14px;color:var(--c-success)}
.vsaved{display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius);background:var(--c-success-soft);font-weight:700}
.vsaved svg{inline-size:22px;block-size:22px;color:var(--c-success)}
.vactions{display:flex;gap:8px;flex-wrap:wrap}
.vactions .btn{flex:1;min-inline-size:120px;white-space:nowrap;padding-inline:14px}

/* summary */
.sum{padding:0;overflow:hidden}
.sum-top{padding:20px;background:linear-gradient(135deg,var(--c-primary-soft),var(--c-surface-2));display:flex;flex-direction:column;gap:4px}
.sum-top .caption{color:var(--c-primary-dark);font-weight:700}
.sum-title{font-size:22px;font-weight:900;line-height:1.2;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.sum-list{list-style:none;margin:0;padding:4px 20px}
.sum-list li{display:flex;align-items:center;gap:12px;padding-block:12px;border-block-end:.5px solid var(--c-border);font-size:15px}
.sum-list li:last-child{border-block-end:0}
.sum-list .k{flex:1;color:var(--c-muted)}
.sum-list .v{font-weight:800}
.sum-list .linkbtn{padding:0 4px;min-block-size:36px;font-size:13px}
.levels{display:flex;flex-direction:column;gap:8px}
.lvl{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--c-surface);border:.5px solid var(--c-border)}
.lvl .n{inline-size:32px;block-size:32px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--c-primary);color:var(--c-primary-ink);font-weight:900}
.lvl .d{flex:1;min-inline-size:0}
.lvl .d b{display:block;font-size:15px}
.lvl .d span{font-size:13px;color:var(--c-muted)}
.errbox{padding:14px 16px;border-radius:14px;background:var(--c-error-soft);color:color-mix(in oklab,var(--c-error) 70%,var(--c-text));font-size:14px}
.errbox b{display:block;margin-block-end:4px}
.errbox ul{margin:0;padding-inline-start:18px}
.counter{font-size:12px;color:var(--c-faint);text-align:end}

/* share */
.share{display:flex;flex-direction:column;gap:20px;padding-block-start:8px}
.celebrate{position:relative;text-align:center;padding:32px 20px 24px;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px}
.celebrate::before{content:"";position:absolute;inset:0 0 auto;block-size:120px;background:radial-gradient(120% 100% at 50% 0,var(--c-primary-soft),transparent 70%)}
.celebrate > *{position:relative}
.burst{inline-size:76px;block-size:76px;border-radius:50%;display:grid;place-items:center;background:var(--c-primary);color:var(--c-primary-ink);box-shadow:var(--shadow-primary);animation:pop .5s var(--ease) both}
.burst svg{inline-size:36px;block-size:36px}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;inline-size:8px;block-size:8px;border-radius:2px;opacity:.85;animation:drift 2.4s var(--ease) both}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}
@keyframes drift{from{transform:translateY(-12px) rotate(0);opacity:0}30%{opacity:.9}to{transform:translateY(22px) rotate(160deg);opacity:.75}}
.celebrate .sum-title{font-size:24px}
.urlbox{display:flex;gap:8px;align-items:stretch;inline-size:100%}
.urlbox .input{flex:1;min-inline-size:0;direction:ltr;text-align:left;font-weight:700;font-size:16px;color:var(--c-primary-dark)}
.urlbox .btn{flex:none;padding-inline:16px}
.share-btns{display:grid;gap:10px}
.btn.wa{background:#1FA855;box-shadow:none;color:#fff}
.btn.wa:hover{background:#178a45}
.share-foot{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

/* dock */
.dock{position:sticky;inset-block-end:var(--dw-peek);z-index:15;background:linear-gradient(to top,var(--c-bg) 70%,color-mix(in srgb,var(--c-bg) 0%,transparent))}
.dock-in{max-inline-size:560px;margin-inline:auto;padding:14px 16px 12px;display:flex;flex-direction:column;gap:6px}
.reassure{margin:0;text-align:center;font-size:13px;color:var(--c-faint)}
.dock-msg{margin:0 0 4px;align-self:center;max-inline-size:100%;text-align:center;font-size:14px;font-weight:700;color:var(--c-error);background:var(--c-error-soft);border-radius:999px;padding:6px 14px}
.btn.busy{pointer-events:none;opacity:.8}
.btn.busy::before{content:"";inline-size:18px;block-size:18px;border-radius:50%;border:2.4px solid rgba(255,255,255,.4);border-block-start-color:#fff;animation:spin .8s linear infinite}
.shake{animation:shake .32s ease both}
@keyframes shake{25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)}}

/* step 1: who is it for */
.flabel{font-size:14px;font-weight:700;color:var(--c-muted)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--c-surface-2);border:.5px solid var(--c-border)}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-block-size:44px;padding-inline:8px;border:0;border-radius:9px;background:transparent;font-size:15px;font-weight:700;color:var(--c-muted);white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.seg button svg{inline-size:19px;block-size:19px;flex:none}
.seg button[aria-pressed="true"]{background:var(--c-surface);color:var(--c-text);box-shadow:0 0 0 1px var(--c-border)}
.seg button[aria-pressed="true"] svg{color:var(--c-primary-dark)}
.gchips .chip{min-inline-size:76px;justify-content:center}
.field.invalid .chip{border-color:var(--c-error);box-shadow:0 0 0 3px var(--c-error-soft)}
.grid2.solo{grid-template-columns:1fr}

/* step 2: hero photo (the finale puzzle) */
.hero{display:flex;flex-direction:column;gap:14px;padding:16px}
.hero.invalid{box-shadow:0 0 0 2px var(--c-error),var(--shadow)}
.hero-head{display:flex;gap:12px;align-items:center}
.hero-head .ico{inline-size:44px;block-size:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.hero-head .ico svg{inline-size:24px;block-size:24px}
.hero-head .h2{font-size:19px;overflow-wrap:anywhere}
.hero-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;inline-size:100%;min-block-size:200px;padding:20px;border:1.5px dashed var(--c-border-2);border-radius:12px;
  background:linear-gradient(160deg,var(--c-surface-2),var(--c-surface));text-align:center}
.hero-drop:hover{border-color:var(--c-primary)}
.hero-drop .ico{inline-size:60px;block-size:60px;border-radius:50%;display:grid;place-items:center;background:var(--c-primary);color:var(--c-primary-ink);box-shadow:var(--shadow-primary);margin-block-end:6px}
.hero-drop .ico svg{inline-size:28px;block-size:28px}
.hero-drop b{font-size:17px}
.hero-drop span:not(.ico){font-size:13px;color:var(--c-muted)}
.hero.invalid .hero-drop{border-color:var(--c-error)}
.hero-alt{align-self:center}
.hero-new{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-radius:10px;background:var(--c-primary-soft);color:var(--c-primary-dark);font-size:14px;font-weight:700}
.hero-new svg{inline-size:16px;block-size:16px;flex:none}
.hero-prev{position:relative;align-self:center;inline-size:min(100%,calc(380px * var(--ar,1)));aspect-ratio:var(--ar,1);border-radius:12px;overflow:hidden;background:var(--c-surface-2);box-shadow:var(--shadow)}
.hero-prev img{inline-size:100%;block-size:100%;object-fit:cover;transition:opacity .2s}
.hero-prev[data-st="up"] img{opacity:.6}
.hero-prev .vstate,.aprev .vstate{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);color:var(--c-text);font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px}
.hero-prev .vstate{position:absolute;inset-block-start:10px;inset-inline-start:10px}
.hero-prev .vstate svg,.aprev .vstate svg{inline-size:14px;block-size:14px;color:var(--c-success)}
.hero-prev[data-st="err"] .vstate{background:var(--c-error);color:#fff}
.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px}
.hero-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-faces button[aria-selected="true"] img{box-shadow:0 0 0 3px var(--c-primary)}
.sec-sep{display:flex;flex-direction:column;gap:2px;padding-block-start:4px}

/* step 4: message tabs + voice recorder */
.seg.tabs button[aria-selected="true"]{background:var(--c-surface);color:var(--c-text);box-shadow:0 0 0 1px var(--c-border)}
.seg.tabs button[aria-selected="true"] svg{color:var(--c-primary-dark)}
.vnote{display:flex;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--c-success-soft);font-size:14px;font-weight:600}
.vnote>svg{inline-size:18px;block-size:18px;color:var(--c-success);flex:none;margin-block-start:2px}
.vnote p{margin:0;flex:1}
.vnote .linkbtn{min-block-size:28px;padding:0 2px;display:inline-flex;vertical-align:baseline}
.afall{display:flex;justify-content:center;margin-block-start:4px}
.arec{display:flex;flex-direction:column}
.arec-stage{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 16px 20px;border-radius:var(--radius);background:var(--c-surface);box-shadow:var(--shadow)}
.arec-bars{display:flex;align-items:center;justify-content:center;gap:4px;block-size:56px;inline-size:100%;max-inline-size:280px}
.arec-bars i{flex:1;max-inline-size:6px;block-size:calc(var(--h,.15) * 100%);min-block-size:4px;border-radius:4px;background:var(--c-border-2);transition:block-size .08s linear,background .2s}
.arec[data-st="rec"] .arec-bars i{background:var(--c-primary)}
.arec-btn{position:relative;inline-size:96px;block-size:96px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:var(--c-primary);color:var(--c-primary-ink);box-shadow:var(--shadow-primary);transition:transform .15s var(--ease)}
.arec-btn:active{transform:scale(.96)}
.arec-ico{position:relative;display:grid;place-items:center}
.arec-ico svg{inline-size:40px;block-size:40px}
.arec-ring{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(var(--c-primary) calc(var(--p,0) * 360deg),var(--c-primary-soft) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));opacity:0;transition:opacity .2s}
.arec[data-st="rec"] .arec-btn{background:var(--c-error);box-shadow:none}
.arec[data-st="rec"] .arec-ring{opacity:1;background:conic-gradient(var(--c-error) calc(var(--p,0) * 360deg),var(--c-error-soft) 0)}
.arec[data-st="rec"] .arec-btn::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--c-error);animation:ringOut 1.6s var(--ease) infinite;pointer-events:none}
.arec[data-st="asking"] .arec-btn{opacity:.6}
@keyframes ringOut{from{opacity:.45;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
.arec-time{margin:6px 0 0;font-size:22px;font-weight:800;color:var(--c-text)}
.arec:not([data-st="rec"]) .arec-time{color:var(--c-faint);font-size:15px;font-weight:700}
.arec-hint{margin:0;font-size:14px;color:var(--c-muted);text-align:center;text-wrap:pretty}
.arec[data-st="error"] .arec-hint{color:var(--c-error);font-weight:700}
.arec-review{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius);background:var(--c-surface);box-shadow:var(--shadow)}
.arec-review audio,.aprev audio{inline-size:100%;block-size:44px}
.arec-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.arec-actions .btn{padding-inline:12px;white-space:nowrap}
.aprev{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--radius);background:var(--c-surface);box-shadow:var(--shadow)}
.aprev-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.aprev-top .ico{inline-size:40px;block-size:40px;border-radius:50%;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-dark);flex:none}
.aprev-top .ico svg{inline-size:20px;block-size:20px}
.aprev-top b{flex:1;font-size:16px}
.aprev .vstate{background:var(--c-surface-2)}

/* step 5: puzzle settings */
.miss{color:var(--c-error)}
.pz{display:flex;flex-direction:column;gap:14px;padding:16px}
.pz-head{display:flex;align-items:center;gap:12px}
.pz-img{inline-size:56px;block-size:56px;flex:none;border-radius:12px;overflow:hidden;background:var(--c-primary-soft);color:var(--c-primary-dark);display:grid;place-items:center}
.pz-img img{inline-size:100%;block-size:100%;object-fit:cover}
.pz-img svg{inline-size:26px;block-size:26px}
.pzopts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pzopts button{display:flex;flex-direction:column;align-items:center;gap:2px;min-block-size:64px;padding:8px 4px;border:.5px solid var(--c-border-2);border-radius:12px;background:var(--c-surface);color:var(--c-muted)}
.pzopts b{font-size:16px;color:var(--c-text)}
.pzopts span{font-size:13px;font-weight:600}
.pzopts button[aria-checked="true"]{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary-dark);box-shadow:0 0 0 1.5px var(--c-primary)}
.switch-row{display:flex;align-items:center;gap:12px;padding-block-start:12px;border-block-start:.5px solid var(--c-border);cursor:pointer}
.sw-ico{inline-size:36px;block-size:36px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--c-surface-2);color:var(--c-muted)}
.sw-ico svg{inline-size:20px;block-size:20px}
.sw-t{flex:1;display:flex;flex-direction:column;min-inline-size:0}
.sw-t b{font-size:15px}
.sw-t span{font-size:13px;color:var(--c-muted)}
.switch{appearance:none;-webkit-appearance:none;flex:none;inline-size:52px;block-size:32px;margin:0;border-radius:999px;background:var(--c-border-2);position:relative;cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:26px;block-size:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start .2s var(--ease)}
.switch:checked{background:var(--c-primary)}
.switch:checked::after{inset-inline-start:23px}
.errbox .linkbtn{margin-block-start:4px;padding-inline:0;color:inherit}

/* ===== v3: light, flat, Apple-like (kit tokens only) ===== */
/* occasion cards */
.occ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.occ-opt{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-block-size:54px;padding:10px 12px;border:1px solid var(--c-border);border-radius:16px;
  background:var(--c-surface);color:var(--c-text);font-size:15.5px;text-align:center;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.occ-opt b{font-weight:700}
.occ-opt[aria-pressed="true"]{border-color:var(--c-primary);background:var(--c-primary-soft);color:var(--c-primary-dark)}
.occ-opt.solemn{grid-column:1/-1;justify-content:flex-start;text-align:start;padding:12px 14px}
.opt-ico{inline-size:38px;block-size:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--c-surface-2);color:var(--c-muted)}
.opt-ico svg{inline-size:20px;block-size:20px}
.opt-t{display:flex;flex-direction:column;gap:1px;min-inline-size:0}
.opt-t small{font-size:13px;color:var(--c-muted);font-weight:500}
.occ-opt.solemn[aria-pressed="true"]{border-color:var(--c-text);background:var(--c-surface-2);color:var(--c-text)}
.occ-opt.solemn[aria-pressed="true"] .opt-ico{background:var(--c-text);color:var(--c-surface)}
.chip,.seg button,.swatch,.pzopts button{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:0;pointer-events:none;transform:scale(0);animation:rip .55s var(--ease)}
@keyframes rip{0%{opacity:.16;transform:scale(0)}100%{opacity:0;transform:scale(1)}}
.pop{animation:popk .34s var(--spring)}
@keyframes popk{0%{transform:scale(1)}45%{transform:scale(1.03)}100%{transform:scale(1)}}
.count{display:inline-block;transform-origin:center}
.count.pop{animation-name:popc}
@keyframes popc{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.count.bad{color:var(--c-error)}
.meter.bad i{background:var(--c-error)}
.over-note{margin:0;padding:10px 12px;border-radius:12px;background:var(--c-surface);border:1px solid var(--c-border);font-size:14px;color:var(--c-muted)}

/* cards: white, hairline, no heavy shadows */
.card,.consent,.face .ph,.hero-prev,.vprev,.arec-stage,.arec-review,.aprev{box-shadow:0 0 0 1px var(--c-border)}
.qcard.skipped{box-shadow:none}
.hero.invalid{box-shadow:0 0 0 2px var(--c-error)}
.consent.invalid{box-shadow:0 0 0 2px var(--c-error)}
.drop,.hero-drop,.face.add .ph{border-width:1px}

/* photos: entrance, hero launch, processing radar */
.face.in{animation:faceIn .38s var(--ease) both}
@keyframes faceIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.hero-prev.launch{animation:launch .7s var(--ease) both}
@keyframes launch{0%{transform:translate(-27px,27px) scale(.2);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.hero-proc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-block-size:200px;border-radius:12px;background:var(--c-surface-2);font-size:14px;font-weight:600;color:var(--c-muted)}
.hero-prev .vstate .mkw{margin-inline-end:2px}

/* step 4: level ring around the record button */
.lvl-ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--c-error);opacity:0;transform:scale(calc(1 + var(--lvl,0) * .42));pointer-events:none}
.arec[data-st="rec"] .lvl-ring{opacity:calc(.18 + var(--lvl,0) * .6)}

/* step 5: cover, clocks, stations */
.cover{display:flex;flex-direction:column;align-items:center;gap:0;padding:16px 16px 18px;text-align:center}
.cover-hero{inline-size:min(100%,calc(220px * var(--ar,1)));aspect-ratio:var(--ar,1);max-block-size:220px;border-radius:14px;overflow:hidden;background:var(--c-surface-2)}
.cover-hero img{inline-size:100%;block-size:100%;object-fit:cover}
.cover-hero.empty{display:grid;place-items:center;color:var(--c-primary-dark);inline-size:140px;background:var(--c-primary-soft)}
.cover-hero.empty svg{inline-size:40px;block-size:40px}
.cover-faces{display:flex;justify-content:center;margin-block-start:-16px;padding-inline-start:8px;position:relative}
.cover-faces > *{inline-size:34px;block-size:34px;border-radius:50%;object-fit:cover;margin-inline-start:-8px;box-shadow:0 0 0 2px var(--c-surface);background:var(--c-surface-2)}
.cover.retract .cover-faces > *{animation:toHero .46s var(--ease) both}
@keyframes toHero{to{transform:translate(var(--dx,0),var(--dy,0)) scale(.32);opacity:0}}
.cover-t{display:flex;flex-direction:column;gap:2px;margin-block-start:12px}
.cover-t .caption{color:var(--c-primary-dark);font-weight:700}
.cover-t .by{color:var(--c-muted);font-weight:500}
.sum{padding:0 4px}
.pz-head .ico{inline-size:44px;block-size:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.pz-head .ico svg{inline-size:24px;block-size:24px}
.pzopts button{border:1px solid var(--c-border);border-radius:14px;transition:border-color .2s,background .2s}
.pzopts button[aria-checked="true"]{box-shadow:none}
.clocks{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;min-block-size:36px;padding:6px 12px;border-radius:var(--radius-full);background:var(--c-surface-2);border:1px solid var(--c-border);font-size:14px;color:var(--c-muted)}
.pill b{color:var(--c-text);font-weight:800}
.pill svg{inline-size:16px;block-size:16px;color:var(--c-primary-dark);flex:none}
.stns{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.stn{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--c-surface);border:1px solid var(--c-border)}
.stn .n{inline-size:30px;block-size:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:var(--c-primary-soft);color:var(--c-primary-dark)}
.stn b{display:block;font-size:15px}
.stn small{display:block;font-size:13px;color:var(--c-muted)}
.stn.dim .n{background:var(--c-surface-2);color:var(--c-faint)}

/* share: the success mark */
.burst-mk{display:grid;place-items:center;inline-size:104px;block-size:104px;border-radius:50%;background:var(--c-surface);box-shadow:0 0 0 1px var(--c-border);animation:pop .5s var(--ease) both}

/* the drawer (mounted on body by drawer.js) */
.dw{max-inline-size:560px;margin-inline:auto}
.dw-scrim{position:fixed;inset:0;z-index:39;background:color-mix(in oklab,var(--c-text) 18%,transparent);opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}
.dw-scrim.on{opacity:1;pointer-events:auto}
.no-dw .dw,.no-dw .dw-scrim{display:none}
.dwp{display:flex;align-items:center;gap:8px;min-block-size:44px}
.dwp-mk{flex:none;inline-size:32px;block-size:32px;display:grid;place-items:center}
.dwp-t{flex:1;min-inline-size:0;display:flex;flex-direction:column}
.dwp-t b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwp-t span{font-size:12px;letter-spacing:-.01em;color:var(--c-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn.dwp-btn{min-block-size:36px;padding-inline:13px;font-size:13.5px;flex:none}
.dw-sec{display:grid;gap:8px}
.dw-sec + .dw-sec{margin-block-start:10px}
/* full = "what the recipient sees" first, the checklist after it */
.dw[data-state="full"] [data-sec="preview"]{order:-1;margin-block-start:0}
.dw[data-state="full"] [data-sec="check"]{margin-block-start:10px}
.dw-h3{margin:4px 2px 0;font-size:13px;font-weight:800;color:var(--c-muted)}
.chk{display:flex;align-items:center;gap:12px;inline-size:100%;min-block-size:50px;padding:7px 12px;border:0;border-radius:14px;background:var(--c-bg);text-align:start;transition:background .15s}
.chk:active{background:var(--c-surface-2)}
.chk .ic{inline-size:24px;block-size:24px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:900;color:var(--c-faint)}
.chk .ic svg{inline-size:14px;block-size:14px}
.chk[data-st="miss"] .ic svg{inline-size:22px;block-size:22px}
.chk[data-st="ok"] .ic{background:var(--c-primary);color:var(--c-primary-ink)}
.chk[data-st="part"] .ic{background:conic-gradient(var(--k-h2) 0 62%,var(--c-border-2) 0)}
.chk[data-st="err"] .ic{background:var(--c-error);color:#fff}
.chk[data-st="clock"] .ic{background:var(--c-primary-soft);color:var(--c-primary-dark)}
.chk .ct{flex:1;min-inline-size:0;display:flex;flex-direction:column}
.chk .ct b{font-size:14.5px;font-weight:700}
.chk .ct span{font-size:12.5px;color:var(--c-muted)}
.chk em{flex:none;font-style:normal;font-size:12px;color:var(--c-faint)}
.dw .stn{background:var(--c-bg);border-color:transparent}
.dw-open{margin-block-start:4px}
/* toast floats above the drawer's peek; hidden = faded, never intercepts taps */
.toast{inset-block-end:calc(var(--dw-peek,0px) + 12px);pointer-events:none;opacity:0;transform:translateY(16px);transition:transform .35s var(--ease),opacity .25s var(--ease)}
.toast.on{opacity:1;transform:none}

@media (max-width:370px){
  .seg button{font-size:14px;gap:6px}
  .seg button svg{inline-size:17px;block-size:17px}
  .arec-actions .btn{font-size:15px}
  .faces{gap:10px}
  .swatch{font-size:11.5px}
  .grid2{grid-template-columns:1fr 92px}
}
@media (prefers-reduced-motion:reduce){
  .step.enter,.burst,.burst-mk,.confetti i,.sheet,.sheet-back,.face.in,.hero-prev.launch,.pop,.rip,.cover.retract .cover-faces > *{animation:none!important}
  .dw-scrim{transition:none}
}