.app-stage{display:grid;justify-items:center;gap:1rem}.phone{position:relative;width:402px;height:874px;padding:11px;border-radius:54px;background:linear-gradient(150deg,#4a3c32,#1d1713 42%,#4a3c32);box-shadow:0 2px 0 var(--line),0 40px 80px -40px #3c281899;transform-origin:top center;transform:scale(var(--app-fit, 1))}.phone:after{content:"";position:absolute;top:21px;left:50%;translate:-50% 0;width:118px;height:32px;border-radius:999px;background:#0d0a08;pointer-events:none}.app [hidden]{display:none!important}.app{position:relative;width:100%;height:100%;overflow:hidden;border-radius:44px;background-color:var(--bg);background-image:radial-gradient(circle at 1px 1px,rgb(63 49 40 / 9%) 1px,transparent 0);background-size:8px 8px;color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.3;user-select:none}.status{display:flex;align-items:center;justify-content:space-between;height:46px;padding:4px 30px 0;font-family:var(--font-ui);font-size:14px}.status-icons{display:inline-flex;align-items:center;gap:5px}.scr{position:absolute;inset:46px 0 0;display:none;flex-direction:column}.app[data-screen=home] .scr-home,.app[data-screen=pick] .scr-pick,.app[data-screen=record] .scr-record,.app[data-screen=preview] .scr-preview,.app[data-screen=export] .scr-export,.app[data-screen=saving] .scr-saving,.app[data-screen=saved] .scr-saved{display:flex;animation:screen-in .32s cubic-bezier(.2,.9,.3,1)}@keyframes screen-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.scr-home{padding:10px 20px 18px}.home-head{display:flex;align-items:center;gap:8px}.brand{display:inline-flex;align-items:center;gap:6px;margin-right:auto}.brand-word{font-family:var(--font-display);font-size:27px;letter-spacing:-.02em}.ghost-pill{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 13px;border:2px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font-family:var(--font-ui);font-size:13px}.lib-title{margin-top:22px;font-family:var(--font-display);font-size:22px}.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}.tile{display:grid;justify-items:center;align-content:center;gap:10px;aspect-ratio:1 / 1.03;padding:14px 10px;border:3px dashed var(--accent);border-radius:20px;background:color-mix(in srgb,var(--soft) 70%,var(--bg));color:var(--ink);font-family:var(--font-display);font-size:17px;cursor:pointer;transition:transform .14s ease}.tile:active{transform:scale(.95)}.tile-circle{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;color:#fffdf8;background:var(--accent)}.tile-circle--photo{color:var(--accent);Background:var(--card);box-shadow:inset 0 0 0 3px var(--accent)}.tile-label{text-align:center}.stay-line{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto;padding-top:16px;color:var(--muted);font-family:var(--font-ui);font-size:12px}.topbar{display:flex;align-items:center;gap:10px;padding:8px 16px 0;min-height:52px}.topbar-title{flex:1}.topbar-title h2{font-family:var(--font-display);font-size:19px}.topbar-hint{font-family:var(--font-ui);font-size:12px;color:var(--muted)}.topbar-mid{flex:1;text-align:center;font-family:var(--font-ui);font-size:13px;color:var(--muted)}.topbar-spacer{width:40px}.round-btn{display:grid;place-items:center;width:40px;height:40px;border:var(--card-border) solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--line)}.round-btn--sm{width:32px;height:32px}.pill-btn{display:inline-flex;align-items:center;gap:4px;height:42px;padding:0 14px;border:var(--card-border) solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-family:var(--font-display);font-size:15px;cursor:pointer;box-shadow:0 2px 0 var(--line);transition:transform .12s ease}.pill-btn:active{transform:translateY(2px);box-shadow:none}.pill-btn--primary{background:var(--accent);border-color:var(--accent);color:#fffdf8;box-shadow:0 4px 0 var(--accent-deep)}.pill-btn:disabled,.btn-app:disabled{opacity:.4;cursor:default}.btn-app{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:50px;padding:0 20px;border:var(--card-border) solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-family:var(--font-display);font-size:16px;cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .12s ease}.btn-app--primary{background:var(--accent);border-color:var(--accent);color:#fffdf8;box-shadow:0 5px 0 var(--accent-deep)}.btn-app--tall{min-height:58px;font-size:17px;width:100%}.btn-app:active{transform:translateY(3px);box-shadow:none}.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px;overflow-y:auto;flex:1}.pick-cell{position:relative;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--stage);cursor:pointer;aspect-ratio:4 / 3}.pick-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.pick-cell[aria-pressed=true]{outline:4px solid var(--accent);outline-offset:-4px}.pick-cell[aria-pressed=true] img{transform:scale(.96)}.pick-badge{position:absolute;top:5px;left:5px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);border:2px solid #fffdf8;color:#fffdf8;font-family:var(--font-display);font-size:13px;animation:pop .34s cubic-bezier(.3,1.7,.5,1)}.pick-tray{display:flex;align-items:center;gap:10px;padding:10px 16px 14px;border-top:var(--card-border) solid var(--line);background:color-mix(in srgb,var(--card) 88%,transparent)}.tray-thumbs{display:flex;gap:6px;flex:1;overflow:hidden}.tray-thumbs img{width:44px;height:33px;border-radius:7px;object-fit:cover}.tray-empty{font-family:var(--font-ui);font-size:12px;color:var(--muted)}.tray-go{min-height:44px;font-size:15px}.stage{position:relative;margin:10px 16px 0;aspect-ratio:4 / 3;border-radius:18px;overflow:hidden;background:var(--stage);border:var(--card-border) solid var(--line);box-shadow:var(--shadow-card);touch-action:none}.stage-photo{width:100%;height:100%;object-fit:cover;transform:scale(var(--z, 1)) translate(var(--px, 0%),var(--py, 0%));transition:transform .5s ease}.bubble{position:absolute;top:6%;left:5%;max-width:64%;padding:8px 13px;border-radius:18px 18px 18px 4px;background:var(--card);border:3px solid var(--ink);font-family:var(--font-kid);font-size:15px;line-height:1.25;color:var(--ink);box-shadow:3px 4px #5032142e}.bubble--empty{display:flex;align-items:center;gap:6px;border-style:dashed;border-width:2.5px;border-color:var(--ink);opacity:.7;font-family:var(--font-ui);font-size:13px}.bubble-word{display:inline-block;animation:pop .34s cubic-bezier(.3,1.7,.5,1)}.rec-chip{position:absolute;top:7%;right:5%;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fffdf8eb;border:var(--card-border) solid var(--line);font-family:var(--font-ui);font-size:12px}.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1s ease-in-out infinite}.levels{display:inline-flex;align-items:flex-end;gap:2px;height:12px}.levels i{width:3px;height:40%;border-radius:2px;background:var(--rec);animation:level .6s ease-in-out infinite alternate}.levels i:nth-child(2){animation-delay:.15s}.levels i:nth-child(3){animation-delay:.3s}.levels i:nth-child(4){animation-delay:.45s}.stage-stickers{position:absolute;inset:0;pointer-events:none}.stage-sticker{position:absolute;width:16%;translate:-50% -50%;animation:pop .34s cubic-bezier(.3,1.7,.5,1)}.stage-hint{position:absolute;bottom:8px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#f6f0e4e0;color:var(--muted);font-family:var(--font-ui);font-size:11px;white-space:nowrap;animation:bob 2s ease-in-out infinite}.stage-hint[hidden]{display:none}.strip{display:flex;gap:8px;margin-top:auto;padding:10px 16px 4px}.strip-cell{position:relative;width:58px;height:44px;border-radius:9px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--stage);cursor:pointer}.strip-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.strip-cell[aria-current=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--card)}.strip-num{position:absolute;top:2px;left:2px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--card);font-family:var(--font-display);font-size:9px;color:var(--ink)}.strip-check{position:absolute;right:1px;bottom:1px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--ok);color:#fff}.rail{display:flex;align-items:center;justify-content:space-around;gap:8px;padding:6px 20px 18px}.rail-btn{display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;color:var(--ink);font-family:var(--font-ui);font-size:11px;cursor:pointer}.rail-btn svg{display:grid;place-items:center;width:48px;height:48px;padding:11px;border-radius:14px;background:var(--card);border:var(--card-border) solid var(--line);box-shadow:0 2px 0 var(--line);color:var(--accent)}.rail-btn:active svg{transform:translateY(2px);box-shadow:none}.rail-btn--undo svg{color:var(--muted)}.rail-btn[disabled] svg{opacity:.45}.speak-wrap{display:grid;justify-items:center;gap:4px}.speak{position:relative;display:grid;place-items:center;width:78px;height:78px;border:0;border-radius:50%;background:var(--rec);color:#fffdf8;cursor:pointer;box-shadow:0 5px 0 var(--rec-deep),0 12px 22px -10px #0006;transition:transform .1s ease,box-shadow .1s ease}.speak:active,.speak.is-talk{transform:translateY(3px) scale(.97);box-shadow:0 1px 0 var(--rec-deep)}.speak-ring{position:absolute;inset:-12px;border-radius:50%;border:3px solid var(--rec);opacity:0}.speak.is-talk .speak-ring{opacity:.45;animation:pulse 1.1s ease-out infinite}.speak-label{font-family:var(--font-ui);font-size:11px;color:var(--muted)}.speak.is-talk+.speak-label{color:var(--rec-deep)}.scrim{position:absolute;inset:0;background:#2e262047;animation:fade .2s ease;z-index:5}.scrim[hidden]{display:none}.sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:8px 16px 20px;border-radius:26px 26px 0 0;background:var(--bg);border-top:var(--card-border) solid var(--line);box-shadow:0 -18px 40px -22px #3c28188c;animation:sheet-up .34s cubic-bezier(.2,.9,.3,1)}.sheet[hidden]{display:none}.grab{display:block;width:38px;height:5px;margin:0 auto 8px;border-radius:999px;background:var(--line)}.sheet-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.sheet-head h3{font-family:var(--font-display);font-size:17px}.seg{display:inline-flex;margin-left:auto;padding:3px;border-radius:999px;background:var(--soft)}.seg-btn{padding:4px 11px;border:0;border-radius:999px;background:none;font-family:var(--font-ui);font-size:12px;color:var(--muted);cursor:pointer}.seg-btn.is-on{background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--line)}.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:320px;overflow-y:auto}.sticker-tile{display:grid;place-items:center;height:74px;border:var(--card-border) solid var(--line);border-radius:18px;background:var(--soft);cursor:pointer;animation:pop .3s cubic-bezier(.3,1.7,.5,1)}.sticker-word{padding:5px 10px;border:3px solid #fffdf8;border-radius:10px;font-family:var(--font-display);font-size:14px;color:#fffdf8;rotate:-3deg}.stage--preview{aspect-ratio:4 / 3}.bubble--play{position:absolute;bottom:8%;left:6%;top:auto;max-width:70%;font-size:16px}.timeline{padding:12px 16px 0}.track{position:relative;height:42px;border-radius:11px;background:var(--soft);overflow:hidden}.seg-track{display:flex;height:100%;gap:2px}.seg{position:relative;flex:1;display:grid;place-items:end start;padding:4px 5px;background:var(--mustard);overflow:hidden;font-family:var(--font-kid);font-size:9px;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}.seg:nth-child(2){background:var(--sage)}.seg:nth-child(3){background:var(--sky)}.seg:nth-child(4){background:var(--rose)}.seg:nth-child(5){background:var(--sun)}.seg:nth-child(6){background:var(--cream, var(--soft))}.trim-shade{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--bg) 78%,transparent);pointer-events:none}.handle{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;border-radius:5px;background:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent-deep);cursor:ew-resize;touch-action:none}.handle:after{content:"";position:absolute;inset:30% 4px;border-left:2px solid rgb(255 253 248 / 85%);border-right:2px solid rgb(255 253 248 / 85%)}.playhead{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--ink);pointer-events:none}.trim-hint{margin-top:6px;text-align:center;font-family:var(--font-ui);font-size:11px;color:var(--muted)}.rail--preview{padding-bottom:26px}.play-btn{display:grid;place-items:center;width:74px;height:74px;border:0;border-radius:50%;background:var(--accent);color:#fffdf8;cursor:pointer;box-shadow:0 5px 0 var(--accent-deep)}.play-btn:active{transform:translateY(3px);box-shadow:none}.export-body{display:grid;gap:20px;align-content:center;height:100%;padding:12px 26px 24px;text-align:center}.polaroid{position:relative;justify-self:center;width:190px;padding:9px 9px 26px;border-radius:4px;background:#fffdf8;box-shadow:0 3px #5032141f,0 18px 30px -18px #3c28188c;rotate:-2deg;animation:pop .42s cubic-bezier(.3,1.7,.5,1)}.tape{position:absolute;top:-9px;left:50%;translate:-50% 0;width:62px;height:18px;background:#ede3c9c7;rotate:-3deg}.polaroid img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:2px}.polaroid-title{position:absolute;left:12px;bottom:7px;font-family:var(--font-kid);font-size:13px;color:#3a302a}.polaroid-dur{position:absolute;right:12px;bottom:7px;font-family:var(--font-ui);font-size:11px;color:#8a7d72}.export-copy h2{font-family:var(--font-display);font-size:24px}.export-meta{margin:4px 0 14px;font-family:var(--font-ui);font-size:13px;color:var(--muted)}.tiny-lock{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:10px;font-family:var(--font-ui);font-size:11px;color:var(--muted)}.saving-body,.saved-body{display:grid;justify-items:center;align-content:center;gap:14px;height:100%;padding:30px;text-align:center}.saving-body h2{font-family:var(--font-display);font-size:21px}.clap-arm{transform-origin:6% 95%;animation:clap .9s ease-in-out infinite}.progress{width:100%;max-width:240px;height:18px;border-radius:999px;background:var(--soft);overflow:hidden}.progress span{display:block;width:0;height:100%;border-radius:999px;background:var(--accent);transition:width .2s linear}.saved-check{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:var(--ok);color:#fffdf8;animation:pop .45s cubic-bezier(.3,1.7,.5,1)}.saved-body h2{font-family:var(--font-display);font-size:23px}.saved-lede{font-size:17px;color:var(--muted)}.saved-actions{display:grid;gap:8px;width:100%;max-width:250px;margin-top:6px}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:9}.confetti i{position:absolute;width:9px;height:13px;border-radius:2px;animation:fall 1.9s cubic-bezier(.3,.6,.5,1) forwards}@keyframes pop{0%{scale:.3;rotate:-25deg;opacity:0}70%{scale:1.12;rotate:4deg;opacity:1}to{scale:1;rotate:0deg;opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(1.16);opacity:0}}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}@keyframes level{0%{height:25%}to{height:100%}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}@keyframes clap{0%,to{transform:rotate(0)}45%,55%{transform:rotate(-18deg)}}@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:0}12%{opacity:1}to{transform:translateY(560px) rotate(420deg);opacity:0}}.app-caption{display:flex;align-items:center;gap:.5rem;max-width:34rem;font-size:.85rem;color:var(--muted);text-align:center}.app-caption-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}@media(prefers-reduced-motion:reduce){.bubble-word,.stage-sticker,.pick-badge,.sticker-tile,.polaroid,.saved-check,.scrim,.sheet,.scr,.rec-dot,.levels i,.stage-hint,.clap-arm{animation:none!important}.speak.is-talk .speak-ring{animation:none!important;opacity:.3}}.demo-head[data-astro-cid-kbohkjlf]{padding-block:clamp(1.5rem,4vw,3rem) clamp(1.5rem,3vw,2rem)}.demo-head[data-astro-cid-kbohkjlf] h1[data-astro-cid-kbohkjlf]{max-width:16ch;margin-top:.5rem}.demo-head[data-astro-cid-kbohkjlf] .lede[data-astro-cid-kbohkjlf]{margin-top:1rem;max-width:58ch}.demo-body[data-astro-cid-kbohkjlf]{padding-bottom:clamp(2rem,5vw,4rem)}