/* Cracked consumer app. Phone first: media edge to edge, one orange pill per screen, the next action in a glass
   thumb dock. Every color, shadow and curve is a token in mobile-tokens.css; DESIGN.md has the recipes. */
*{box-sizing:border-box}
html{height:100%;background:var(--bg);overscroll-behavior:none;-webkit-text-size-adjust:100%;color-scheme:dark;overflow-x:clip}
body{margin:0;color:var(--ink);font:400 var(--text-body)/1.5 var(--body);font-kerning:normal;-webkit-font-smoothing:antialiased;overflow-x:clip}
.journey-page{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--noise) 0 0/64px 64px,var(--bg)}
/* The page is lit: a warm glow from the top edge and a fine grain, painted once behind everything. */
.journey-page::before{content:'';position:fixed;inset:0;pointer-events:none;background:var(--ambient)}
.main{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:clip;overscroll-behavior:none;scrollbar-width:thin}
h1,h2,h3,p,figure,dl,dd{margin:0}
h1,h2{font-family:var(--display);font-weight:600;letter-spacing:var(--track-title);line-height:1.08;text-wrap:balance;overflow-wrap:anywhere;min-width:0}
h1{font-size:2rem}h2{font-size:1.5rem}p{text-wrap:pretty}
a{color:var(--link);text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button,a,label,summary{-webkit-tap-highlight-color:transparent}
button,a,summary,button *,a *{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button:disabled{cursor:default}input,textarea{font-size:1rem;user-select:text;-webkit-user-select:text}
img,video{display:block;max-width:100%}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h2[tabindex="-1"]:focus{outline:none}
html[data-input-mode=pointer] :is(button,a,label):focus-visible{outline:none}
.skip-link{position:fixed;top:-120px;left:16px;z-index:30;padding:12px 16px;background:var(--accent);color:var(--on-accent);border-radius:var(--radius-pill)}.skip-link:focus{top:calc(8px + env(safe-area-inset-top))}

/* ---------- app bar ---------- */
.journey-nav{flex:none;position:relative;z-index:var(--z-nav);display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;height:calc(var(--nav-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}
.nav-title{grid-column:2;text-align:center;font-size:1rem;font-weight:700;letter-spacing:var(--track-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-back{grid-column:1;position:relative;display:grid;place-items:center;width:44px;height:44px;color:var(--ink);border-radius:50%;transition:background var(--dur-micro) var(--ease-press),transform var(--dur-micro) var(--ease-press)}
.nav-back:active{background:var(--surface-pressed);transform:scale(.92)}
/* My videos is a raised pill on every screen, so a first-timer always knows where finished videos live. */
.journey-library{grid-column:3;justify-self:end;position:relative;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 11px;border-radius:var(--radius-pill);background:var(--grad-raised);box-shadow:var(--btn-secondary);color:var(--ink);font-size:.875rem;font-weight:700;letter-spacing:-.005em;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-press),box-shadow var(--dur-micro) var(--ease-press)}
.journey-library svg{width:19px;height:19px}.journey-library:active{transform:scale(.95)}.journey-library.is-active{color:var(--link);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--accent-ring)}
.journey-library [data-video-count]{min-width:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--grad-accent);color:var(--on-accent);font-size:.625rem;font-weight:650;line-height:18px;text-align:center;box-shadow:0 2px 6px -2px rgba(245,165,36,.8)}
/* A page outside the app's flow (the front door, the legal pages, a brand's page): just the wordmark. */
.journey-nav.is-brand-only{grid-template-columns:minmax(0,1fr)}
html[data-page=home] .journey-nav{grid-template-columns:minmax(0,1fr) auto}html[data-page=home] .brand{grid-column:1}html[data-page=home] .journey-library{grid-column:2}
/* Inside the flow the library is a 44px icon button, so the screen title centers on the phone, not in the gap. */
html:not([data-page=home]) .nav-back{background:var(--grad-raised);box-shadow:var(--btn-secondary)}
html:not([data-page=home]) .journey-library{width:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}html:not([data-page=home]) .library-label{display:none}
html:not([data-page=home]) .journey-library [data-video-count]{position:absolute;top:4px;right:4px;box-shadow:0 0 0 2px var(--bg),0 2px 6px -2px rgba(245,165,36,.8)}
.brand{grid-column:1/3;justify-self:start;display:flex;align-items:center;min-height:44px;padding:0 8px;color:var(--ink)}.brand img{aspect-ratio:4522/871;width:auto}.brand img{display:block;height:30px;width:auto}
/* The wide-screen bar (desktop.css draws it from 64rem). Never on a phone. */
.desk-brand,.desk-nav,.more-effects{display:none}
/* The switch between the two doors, For brands (/) and For creators (/creators): a 44px strip of its own above the bar on
   every public page (lib/page.mjs sideSwitch), one segmented control with this side lit in ink, as on the paper side. Each
   half is a full 44px tap target; the track and the lit pill are painted inside it. It takes the top safe area, so the bar
   under it does not. Like the paper side's strip it goes once the page scrolls (mobile-ui.js sets [data-sides-fold]) and
   comes back at the top; the bar stays. */
.side-switch{flex:none;position:relative;z-index:var(--z-nav);display:flex;justify-content:center;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:var(--bg-deep);box-shadow:0 1px 0 var(--line);transition:margin-top var(--dur-hover) var(--ease-out)}
.side-switch+.journey-nav{height:var(--nav-h);padding-top:0;transition:top var(--dur-hover) var(--ease-out)}
html[data-sides-fold] .side-switch{margin-top:calc(-44px - env(safe-area-inset-top))}
html[data-sides-fold] .side-switch+.journey-nav{height:calc(var(--nav-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
.side-track{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:0 2px}
.side-track::before{content:'';position:absolute;inset:5px 0;border-radius:var(--radius-pill);background:var(--bg);box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 0 1px var(--line)}
.side-switch a{position:relative;z-index:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;color:var(--muted);font-size:.875rem;font-weight:700;letter-spacing:-.005em;line-height:1;white-space:nowrap;transition:color var(--dur-hover) var(--ease-press)}
.side-switch a::before{content:'';position:absolute;inset:7px 0;z-index:-1;border-radius:var(--radius-pill);transition:background var(--dur-hover) var(--ease-press)}
.side-switch a[aria-current]{color:var(--bg)}
.side-switch a[aria-current]::before{background:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.side-switch a:not([aria-current]):hover{color:var(--ink)}
.side-switch a:active{transform:scale(var(--press))}
.side-switch a:focus-visible{outline-offset:-3px;border-radius:var(--radius-pill)}
html[data-page=effect] .side-switch+.journey-nav{top:calc(44px + env(safe-area-inset-top))}
html[data-page=effect][data-sides-fold] .side-switch+.journey-nav{top:0}
/* The effect's media runs under a transparent bar; controls sit on glass so they read on any frame. */
html[data-page=effect] .journey-nav{position:absolute;inset:0 0 auto;background:linear-gradient(to bottom,rgba(13,11,8,.72),rgba(13,11,8,0))}
html[data-page=effect] .nav-title{visibility:hidden}
html[data-page=effect] :is(.nav-back,.journey-library){background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}

/* ---------- buttons ---------- */
.studio-label{display:block;font-size:.8125rem;font-weight:700;color:var(--link);letter-spacing:0}
.journey-primary,.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;width:100%;padding:12px 24px;border:0;border-radius:var(--radius-pill);background:var(--grad-accent);box-shadow:var(--btn-primary);color:var(--on-accent);font-weight:650;font-size:1.0625rem;line-height:1.2;letter-spacing:-.01em;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform var(--dur-release) var(--ease-press),box-shadow var(--dur-hover) var(--ease-press),filter var(--dur-hover) var(--ease-press);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.journey-primary:active,.btn:active{transform:scale(var(--press));box-shadow:var(--btn-primary-press);filter:brightness(.97);transition-duration:var(--dur-micro)}
.journey-primary:disabled,.btn:disabled{color:var(--faint);background:var(--surface-raised);box-shadow:var(--hi),var(--ring);text-shadow:none;transform:none;filter:none}
/* The price and the arrow sit in their own dark pill inside the button, flush with its right edge. */
.cta-price{padding:6px 12px;margin-right:-12px;border-radius:var(--radius-pill);background:rgba(25,19,15,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--accent);font-size:.9375rem;text-shadow:none;font-variant-numeric:tabular-nums}
.journey-primary>svg{width:32px;height:32px;padding:8px;margin-right:-12px;border-radius:50%;background:rgba(25,19,15,.94);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);color:var(--accent);stroke-width:2.4;transition:transform var(--dur-hover) var(--ease-press)}
.btn-secondary,.btn-ghost{color:var(--ink);background:var(--grad-raised);box-shadow:var(--btn-secondary);text-shadow:none}
.btn-secondary:active,.btn-ghost:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.07);filter:brightness(.92)}
.btn-sm{width:auto;min-height:44px;padding:0 18px;font-size:.9375rem}
.journey-note{font-size:.8125rem;line-height:1.4;text-align:center;color:var(--muted);margin-top:10px}
.journey-error{padding:12px 14px;border-radius:var(--radius-control);background:var(--error-surface);box-shadow:inset 0 0 0 1px rgba(255,154,145,.18);color:var(--error);font-size:.875rem;line-height:1.45}.journey-error:empty{display:none}

/* ---------- surfaces ---------- */
/* A card is a lit plate: gradient fill, top highlight, hairline ring, soft shadow. Never a flat fill with a border. */
.release-notice,.recipe-input,.composer-reference,.auth-draft,.install-help,.claim-box,.card{background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.release-notice{padding:16px;border-radius:var(--radius-control);font-size:.875rem}.release-notice strong{display:block;color:var(--ink)}.release-notice p{margin-top:4px;color:var(--muted);line-height:1.5}
.output-strip{display:flex;flex-wrap:wrap;gap:8px}
.output-strip>div{display:flex;align-items:baseline;gap:6px;min-height:32px;padding:6px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line)}
.output-strip dt{font-size:.75rem;color:var(--faint)}.output-strip dd{font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.flow-action,.result-dock{margin-top:auto}
.effect-use{text-align:left;margin-top:-6px}

/* ---------- media cards ---------- */
/* Media sits on the page like a print on a desk: rounded, shadowed, with a 1px light ring drawn over the image. */
.film-cover{position:relative;overflow:hidden;border-radius:var(--radius-media);background:linear-gradient(100deg,var(--surface) 40%,var(--surface-raised) 50%,var(--surface) 60%) 0 0/300% 100%;animation:shimmer 1.6s linear 5}.film-cover.is-loaded{animation:none;background:var(--surface)}
.film-cover img,.film-cover video{width:100%;height:100%;object-fit:cover}
/* A home tile's sample clip, laid over its cover once it is actually playing (journey.js), so a slow clip never blanks the tile. */
.film-loop{position:absolute;inset:0;opacity:0;transition:opacity 320ms var(--ease-out)}.is-playing .film-loop{opacity:1}
.film-item{display:block;min-width:0;color:var(--ink)}
.effect-card{position:relative;display:block;border-radius:var(--radius-media);overflow:hidden;background:var(--surface);box-shadow:var(--elev-2);transition:transform var(--dur-hover) var(--ease-press),box-shadow var(--dur-hover) var(--ease-press)}
.effect-card::after,.library-item .film-cover::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:var(--ring-media);pointer-events:none}
.effect-card:active{transform:scale(var(--press));transition-duration:var(--dur-micro)}
.effect-card .film-cover{border-radius:0;aspect-ratio:9/16}.effect-card[data-featured]{grid-column:1/-1;box-shadow:var(--elev-3)}.effect-card[data-featured] .film-cover{aspect-ratio:4/5}
.effect-card .film-cover::after{content:'';position:absolute;inset:0;background:var(--grad-scrim)}
/* The ads card shows all three versions at once, each cropped above its own caption, with the copy underneath. */
/* The text effect's poster is mostly black: light it like a CRT, a green bloom behind the line and fine scanlines. */
[data-effect-kind=text] .film-cover::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(255,255,255,0) 1px 3px),radial-gradient(90% 40% at 40% 44%,rgba(80,255,140,.2),rgba(80,255,140,0) 70%)}
[data-effect-kind=text] .film-cover img{transform:scale(1.35);transform-origin:12% 40%}
.film-caption{position:absolute;inset:auto 0 0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px}
.film-caption h2{font-size:1.25rem;letter-spacing:var(--track-title);text-shadow:0 2px 16px rgba(0,0,0,.5)}.film-caption p{font-size:.8125rem;line-height:1.35;color:rgba(244,238,228,.86);max-width:30ch;text-shadow:0 1px 8px var(--scrim)}
.film-input{display:none}
.film-cta{display:flex;align-items:center;gap:6px;min-height:44px;margin-top:10px;padding:0 7px 0 18px;border-radius:var(--radius-pill);background:var(--grad-accent);box-shadow:var(--btn-primary);color:var(--on-accent);font-size:.9375rem;font-weight:650;white-space:nowrap}
.film-cta.is-quiet{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.1);color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.film-cta.is-quiet svg{background:rgba(255,255,255,.16);color:var(--ink)}
.film-cta svg{width:28px;height:28px;padding:6px;border-radius:50%;background:rgba(25,19,15,.94);color:var(--accent);stroke-width:2.6;transition:transform var(--dur-hover) var(--ease-press)}
[data-featured] .film-caption{padding:20px}[data-featured] .film-caption h2{font-size:2.25rem;letter-spacing:var(--track-display);line-height:1}[data-featured] .film-caption p{font-size:.9375rem;margin-top:2px}
[data-featured] .film-input{display:block;font-size:.75rem;font-weight:700;color:var(--ink);text-shadow:0 1px 8px var(--scrim)}
/* Chips on media are glass: blurred, lit on top, ringed (Krea, Pika). */
.film-sample,.film-duration,.cinema-sample,.film-status,.render-reference,.empty-feature-media>span{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);color:var(--ink);font-size:.6875rem;line-height:1.5;font-weight:700;max-width:calc(100% - 64px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.film-sample{top:10px;left:10px}.film-duration{top:10px;right:10px;font-variant-numeric:tabular-nums}

/* ---------- the effects front door (/fx), design/EFFECTS-FRONT-DOOR-2026-09-25.md ---------- */
.browse-page,.library-page,.plain-page,.lost-page{max-width:1160px;margin:0 auto;padding:4px max(16px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.studio-intro{padding:10px 4px 24px}
.studio-intro h1{font-size:var(--text-display);line-height:.98;letter-spacing:var(--track-display);max-width:12ch}
.studio-intro>p{color:var(--muted);font-size:1.0625rem;line-height:1.45;max-width:32ch;margin-top:12px}
.film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* One line, then the lead effect playing, then photo-in and video-out pairs, then the rest, then the price. */
.fx-intro{padding-bottom:20px}.fx-intro h1{max-width:none}.fx-intro .nowrap{white-space:nowrap}
.fx-intro>.fx-price{max-width:none;margin-top:14px;color:var(--muted);font-size:.8125rem;font-weight:600;line-height:1.4}
.fx-intro>.fx-status{max-width:none;display:flex;align-items:baseline;gap:8px;margin-top:14px;color:var(--muted);font-size:.8125rem;font-weight:600;line-height:1.4}
.fx-price b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.fx-status::before{content:'';flex:none;align-self:flex-start;margin-top:.45em;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(245,165,36,.8)}
.fx-top{display:flex;flex-direction:column;gap:32px}
.fx-lead-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fx-pairs h2,.fx-more h2{font-size:1.375rem;letter-spacing:var(--track-title);padding:0 4px}
.fx-pair-row{--pair-w:128px;display:grid;grid-auto-flow:column;grid-auto-columns:var(--pair-w);gap:12px;margin:14px -16px 0;padding:4px 16px 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none}
.fx-pair-row::-webkit-scrollbar{display:none}
.fx-pair{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--ink);scroll-snap-align:start}
.fx-pair-out{position:relative;display:block;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:var(--media-bg);box-shadow:var(--ring-media),var(--elev-2);transition:transform var(--dur-hover) var(--ease-press)}
.fx-pair-out>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* The photo that went in, tipped like a print on the video that came out (the purchase sheet's two prints). */
.fx-pair-in{position:absolute;left:8px;bottom:8px;width:42%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#fff;transform:rotate(-4deg);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 14px -4px rgba(0,0,0,.7)}
.fx-pair-in img{width:100%;height:100%;object-fit:cover}
.fx-pair-name{display:flex;flex-direction:column;padding:0 2px;color:var(--muted);font-size:.8125rem;line-height:1.3}.fx-pair-name b{color:var(--ink);font-weight:700}
.fx-pair:active .fx-pair-out{transform:scale(var(--press))}
.fx-pairs-note{margin-top:6px;padding:0 4px;color:var(--faint);font-size:.75rem;line-height:1.4}
.fx-more{margin-top:32px}.fx-more .effect-grid{margin-top:14px}
/* An odd last effect takes the whole row, cut wide so it doesn't tower over the pair above it. */
@media(max-width:47.99rem){.fx-more .effect-grid>.effect-card:not([data-featured]):last-child:nth-child(odd) .film-cover{aspect-ratio:4/3}.fx-more .effect-grid>.effect-card:last-child:nth-child(odd) .film-cover img{object-position:50% 35%}}
.fx-plate{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:32px;padding:20px;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.fx-plate div{display:flex;flex-direction:column;gap:2px}.fx-plate strong{font-size:2rem;font-weight:650;letter-spacing:var(--track-title);line-height:1.05;font-variant-numeric:tabular-nums}.fx-plate span{color:var(--muted);font-size:.875rem}
.fx-plate p{grid-column:1/-1;color:var(--muted);font-size:.875rem;line-height:1.45}.fx-plate p+p{margin-top:-10px}
.fx-earn{margin-top:32px;padding:20px;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}.fx-earn h2{font-size:var(--text-title);font-weight:650;letter-spacing:var(--track-title);line-height:1.15}.fx-earn p{margin-top:8px;color:var(--muted);line-height:1.45}.fx-earn-go{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--link);font-weight:700}
.app-foot .fx-owner{flex-basis:100%;color:var(--muted)}.app-foot .fx-owner a{display:inline;min-height:0;color:var(--link)}

/* The front door ends with who sells this and where the terms are, quietly. */
.app-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:40px;padding:20px 4px 0;box-shadow:inset 0 1px 0 var(--line);color:var(--faint);font-size:.8125rem}.app-foot nav{display:flex;gap:4px 20px;flex-wrap:wrap}.app-foot a{display:flex;align-items:center;min-height:44px;color:var(--muted);font-weight:600}

/* ---------- effect ---------- */
.studio-flow{display:flex;flex-direction:column;gap:20px;width:min(100%,540px);min-height:100%;margin:0 auto;padding:6px 16px calc(var(--dock-h) + 48px + env(safe-area-inset-bottom))}
.studio-flow.is-discovering{gap:0;padding:0 0 calc(var(--dock-h) + 32px + env(safe-area-inset-bottom))}
.cinema-stage{position:relative;isolation:isolate;width:100%;height:min(177.78vw,calc(100svh - 440px));min-height:320px;overflow:hidden;background:var(--media-bg)}
.cinema-stage video{width:100%;height:100%;object-fit:cover;object-position:50% 22%;cursor:pointer}
.cinema-sample{top:calc(var(--nav-h) + 8px + env(safe-area-inset-top));left:16px}
.cinema-toggle{position:absolute;right:16px;bottom:48px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--ink);background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);transition:transform var(--dur-micro) var(--ease-press)}
.cinema-toggle:active{transform:scale(.92)}
.cinema-toggle svg{width:20px;height:20px;fill:currentColor;stroke-width:2.4}.cinema-toggle .icon-pause{fill:none}
.cinema-toggle[data-paused=true] .icon-pause,.cinema-toggle:not([data-paused=true]) .icon-play{display:none}
/* The panel rises over the media like a sheet: a lit top edge, a shadow cast upward, a faint warm glow. */
.effect-panel{position:relative;z-index:1;flex:1 0 auto;display:flex;flex-direction:column;gap:20px;margin-top:-30px;padding:26px 20px 8px;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;background:radial-gradient(120% 50% at 50% 0%,rgba(245,165,36,.07),rgba(245,165,36,0) 70%),var(--bg);box-shadow:var(--elev-sheet)}
.effect-story h1{font-size:var(--text-heading);letter-spacing:var(--track-display);line-height:1.02;margin-top:8px;max-width:16ch}.effect-story>p{font-size:1rem;line-height:1.5;color:var(--muted);margin-top:10px;max-width:40ch}
.recipe-input{display:flex;align-items:flex-start;gap:14px;padding:14px;border-radius:var(--radius-card)}
.recipe-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(245,165,36,.22);color:var(--link)}.recipe-icon svg{width:20px;height:20px}
.recipe-input h2{font-size:.9375rem;font-weight:700;letter-spacing:-.01em;line-height:1.35}.recipe-input p{font-size:.8125rem;line-height:1.45;color:var(--muted);margin-top:2px}
/* The sample strip on the effect page: the same effect on other products, one tap to play each. */
.example-strip h2{font-size:.9375rem;font-weight:700;letter-spacing:-.01em}.example-strip>p{font-size:.8125rem;line-height:1.45;color:var(--muted);margin-top:8px}
.example-row{display:flex;gap:10px;margin:8px -20px 0;padding:6px 20px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none}.example-row::-webkit-scrollbar{display:none}
.example-pick{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:74px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:.75rem;font-weight:600;line-height:1.2;text-align:center;scroll-snap-align:start;cursor:pointer}
.example-pick img{width:66px;height:66px;border-radius:18px;object-fit:cover;background:var(--surface);box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--elev-1);transition:box-shadow var(--dur-hover) var(--ease-press),transform var(--dur-micro) var(--ease-press)}
.example-pick[aria-pressed=true]{color:var(--ink)}.example-pick[aria-pressed=true] img{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent),0 6px 18px -6px rgba(245,165,36,.6)}.example-pick:active img{transform:scale(.94)}

/* ---------- make ---------- */
.flow-heading h1{font-size:var(--text-heading);letter-spacing:var(--track-display);line-height:1.02;max-width:14ch}.flow-heading>p{color:var(--muted);margin-top:10px;font-size:1rem;line-height:1.45;max-width:40ch}
.composer-reference{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--radius-card)}
.reference-media{position:relative;width:42px;height:56px;flex:none}.reference-media img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.5)}.reference-media>span{display:none}
.effect-receipt{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.effect-receipt>span{flex:1;min-width:0}.effect-receipt strong{display:block;font-size:.9375rem;font-weight:700}.effect-receipt small{display:block;color:var(--muted);font-size:.75rem;line-height:1.35;margin-top:1px}
.effect-receipt a{display:flex;align-items:center;gap:2px;min-height:40px;padding:0 10px 0 14px;border-radius:var(--radius-pill);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;font-weight:700;white-space:nowrap}.effect-receipt svg{width:16px;height:16px}
#journey-form{display:flex;flex-direction:column;gap:14px;min-width:0}
/* The photo well: a lit plate with a dashed inner guide and a warm center, not a dashed box on the page. */
.portrait-picker{position:relative;display:grid;min-height:clamp(220px,36svh,400px);border-radius:var(--radius-card);background:radial-gradient(60% 50% at 50% 42%,rgba(245,165,36,.09),rgba(245,165,36,0) 72%),var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1);overflow:hidden}
.portrait-picker::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);pointer-events:none;transition:box-shadow var(--dur-hover) var(--ease-press)}
.selected-portrait,.photo-control{grid-area:1/1}/* Once chosen, the frame shrinks to the photo itself: no letterbox bars, the photo is the card. */
.selected-portrait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.selected-portrait img{width:auto;height:100%;max-width:100%;object-fit:contain;border-radius:18px;background:var(--media-bg);box-shadow:var(--ring-media),var(--elev-2)}
.has-photo .portrait-picker{height:clamp(260px,44svh,440px)}.has-photo .portrait-picker{background:none;box-shadow:none;overflow:visible}.has-photo .portrait-picker::before{content:none}
.photo-control{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;cursor:pointer;user-select:none;-webkit-user-select:none}
.photo-control input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}.photo-control:focus-within{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--radius-card)}
.photo-control:active{background:rgba(255,255,255,.03)}
.photo-empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--muted);font-size:.875rem}.photo-empty strong{font-size:1.1875rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin-top:14px}
.photo-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:linear-gradient(180deg,rgba(245,165,36,.22),rgba(245,165,36,.1));box-shadow:inset 0 1px 0 rgba(255,220,160,.25),0 0 0 1px rgba(245,165,36,.3),0 10px 28px -10px rgba(245,165,36,.55);color:var(--accent)}.photo-icon svg{width:28px;height:28px}
.photo-select{display:none}
.has-photo .photo-empty{display:none}.has-photo .photo-control{justify-content:flex-end}
.has-photo .photo-select{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);font-size:.875rem;font-weight:700}
.input-guidance{color:var(--muted);font-size:.8125rem;line-height:1.45}.input-count{font-size:.75rem;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.journey-line{display:flex;flex-direction:column;gap:8px}
/* Fields are wells: darker than the page, shadowed inside, ringed; focus lights the ring orange. */
.journey-line textarea,.input{width:100%;border:0;background:var(--bg-deep);color:var(--ink);box-shadow:inset 0 1px 3px rgba(0,0,0,.45),inset 0 0 0 1px var(--line-strong);transition:box-shadow var(--dur-hover) var(--ease-press)}
.journey-line textarea{padding:16px;resize:none;min-height:180px;border-radius:var(--radius-card);font-size:1.125rem;line-height:1.45}
.journey-line textarea:focus,.input:focus{outline:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.45),inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-tint)}
/* Until there is a photo, the dock's one job is choosing it. */
.studio-flow[data-kind=image]:not(.has-photo) [data-continue],.studio-flow.has-photo [data-choose]{display:none}
[data-choose]{cursor:pointer}

/* ---------- purchase sheet ---------- */
.purchase-sheet{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(100dvh - env(safe-area-inset-top) - 12px);padding:30px 20px max(16px,env(safe-area-inset-bottom));border:0;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;background:radial-gradient(100% 34% at 50% 0%,rgba(245,165,36,.12),rgba(245,165,36,0) 72%),var(--grad-surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--elev-sheet);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.purchase-sheet::backdrop{background:var(--color-backdrop);-webkit-backdrop-filter:blur(6px) saturate(1.2);backdrop-filter:blur(6px) saturate(1.2)}
.purchase-sheet[open]{display:flex;flex-direction:column;animation:sheet-enter var(--dur-sheet) var(--ease-sheet)}.purchase-sheet[open]::backdrop{animation:fade-in var(--dur-sheet) var(--ease-out)}
.sheet-handle{position:absolute;top:9px;left:calc(50% - 18px);width:36px;height:5px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22)}
.sheet-close{position:sticky;top:0;align-self:flex-end;z-index:2;margin:-14px -6px -44px 0;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;background:var(--grad-raised);box-shadow:var(--btn-secondary);border:0;border-radius:50%;color:var(--ink);transition:transform var(--dur-micro) var(--ease-press)}.sheet-close:active{transform:scale(.92)}.sheet-close svg{width:18px;height:18px;stroke-width:2.2}
.purchase-heading{order:1;padding-right:52px}.purchase-images{order:2}.sheet-change{order:3}.purchase-price{order:5}.purchase-price-note{order:6}.purchase-error{order:7}.purchase-sheet [data-buy]{order:8}.payment-detail{order:9}.purchase-terms{order:11}.purchase-sheet>.demo-sheet-launch{order:12}
.purchase-heading h2{font-size:var(--text-sheet);letter-spacing:var(--track-display);line-height:1.04;margin-top:6px}.purchase-heading>p{margin-top:8px;color:var(--muted);font-size:.9375rem;line-height:1.45}
/* Yours and the example as two prints, tipped toward each other, with the arrow on a glass disc between. */
.purchase-images{position:relative;display:flex;align-items:center;justify-content:center;padding:22px 0 6px}
.purchase-images figure{flex:1;min-width:0;max-width:148px}.purchase-images figure:first-child :is(img,[data-purchase-line]){transform:rotate(-3deg) translateX(6px)}.purchase-images figure:last-child img{transform:rotate(3deg) translateX(-6px)}
.purchase-images img,.purchase-images [data-purchase-line]{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:16px;background:var(--media-bg);box-shadow:0 0 0 1px rgba(255,255,255,.12),var(--elev-2)}
.purchase-sheet[data-input-rejected] [data-purchase-photo]{box-shadow:0 0 0 2px var(--error),var(--elev-2)}
.purchase-images [data-purchase-line]{display:block;padding:12px;overflow:hidden;overflow-wrap:anywhere;font-size:.875rem;line-height:1.4}
.purchase-images figcaption{font-size:.75rem;font-weight:600;color:var(--muted);margin-top:10px;text-align:center}
.transform-arrow{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0 -8px 22px;border-radius:50%;background:var(--grad-accent);box-shadow:var(--btn-primary);color:var(--on-accent)}.transform-arrow svg{width:18px;height:18px;stroke-width:2.6}
/* A refused photo: the refusal sits right under the photo, then the fix. */
.purchase-sheet[data-input-rejected] .purchase-error{order:3}.purchase-sheet[data-input-rejected] .sheet-change{order:4}
/* A refused photo: choosing another becomes the main action; paying with the same one stays possible for a network retry. */
.purchase-sheet[data-input-rejected] .sheet-change{width:100%;min-height:56px;margin-top:12px;background:var(--grad-accent);box-shadow:var(--btn-primary);color:var(--on-accent);font-size:1.0625rem;font-weight:650}
.purchase-sheet[data-input-rejected] [data-buy]:not(:disabled){background:var(--grad-raised);box-shadow:var(--btn-secondary);color:var(--ink);text-shadow:none}
.sheet-change{display:flex;align-items:center;justify-content:center;min-height:44px;margin:4px auto 0;padding:0 16px;border:0;border-radius:var(--radius-pill);background:none;color:var(--link);font-size:.875rem;font-weight:700}
.purchase-price{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:16px;border-radius:var(--radius-control);background:var(--grad-raised);box-shadow:var(--hi),var(--ring);font-size:1rem;font-weight:700}
.purchase-price small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:2px}.purchase-price strong{font-size:1.625rem;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.purchase-price-note{font-size:.8125rem;color:var(--muted);margin-top:8px;padding-inline:4px}.purchase-price-note+.purchase-price-note{margin-top:2px}
.purchase-error{margin-top:16px}
.purchase-sheet .journey-primary{margin-top:18px}.payment-detail{font-size:.75rem;line-height:1.5;text-align:center;color:var(--muted);margin-top:10px}.payment-detail:empty{display:none}
.purchase-terms{display:flex;justify-content:center;gap:4px;margin-top:4px}.purchase-terms a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;font-size:.8125rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.sheet-signin{order:9;display:flex;align-items:center;justify-content:center;min-height:44px;font-size:.8125rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.sheet-signin[hidden]{display:none}
.purchase-redo{color:var(--muted)}
.purchase-seller{order:10;font-size:.75rem;color:var(--faint);text-align:center;margin-top:4px}

/* ---------- sign in ---------- */
.auth{width:min(100%,440px);margin:0 auto;display:flex;flex-direction:column;padding:14px 20px calc(32px + env(safe-area-inset-bottom));text-align:left}.auth>img{display:none}
.auth h1{font-size:var(--text-heading);letter-spacing:var(--track-display);line-height:1.02;max-width:14ch}.auth .sub{color:var(--muted);font-size:1rem;margin:12px 0 24px;max-width:34ch}
.auth-draft{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:var(--radius-card);margin-bottom:24px}
.auth-draft img{width:56px;height:72px;object-fit:cover;border-radius:12px;background:var(--media-bg);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 4px 10px rgba(0,0,0,.45);flex:none}
.auth-draft span{font-size:.9375rem;font-weight:700}.auth-draft small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);margin-top:2px}.auth-draft .auth-line{width:88px;flex:none;padding:10px;border-radius:12px;background:var(--media-bg);font-size:.75rem;overflow-wrap:anywhere;font-weight:400}
.auth form{display:flex;flex-direction:column;gap:16px}.field{display:flex;flex-direction:column;gap:8px}.field .label{font-size:.875rem;font-weight:700}
.input{min-height:56px;border-radius:var(--radius-control);padding:14px 16px;font-size:1rem}
.input::placeholder,textarea::placeholder{color:var(--faint)}
.fine,.note,.help{font-size:.8125rem;line-height:1.55;color:var(--muted);margin-top:16px}.line{font-size:1rem;color:var(--muted);margin-top:12px}.alert{font-size:.875rem;color:var(--muted);margin-block:16px}.auth>.btn{margin-top:20px}.auth>.btn+.btn{margin-top:12px}

/* ---------- result ---------- */
.result-layout{display:flex;flex-direction:column;gap:22px;width:min(100%,540px);margin:0 auto;padding:6px 16px calc(120px + env(safe-area-inset-bottom))}
.result-layout.is-pending{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.result-media{position:relative;align-self:center;aspect-ratio:9/16;height:min(56svh,600px);max-width:100%;border-radius:var(--radius-media);overflow:hidden;background:var(--media-bg);box-shadow:var(--elev-3)}
.result-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--ring-media);pointer-events:none}
/* A finished video glows warm behind itself: the one moment in the flow that gets a celebration. */
.result-layout.is-ready .result-media{overflow:visible;isolation:isolate}.result-layout.is-ready .result-video{border-radius:inherit}
.result-layout.is-ready .result-media::before{content:'';position:absolute;inset:-4% -26% -12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(245,165,36,.55),rgba(245,165,36,.3) 48%,rgba(245,165,36,.1) 72%,rgba(245,165,36,0));pointer-events:none}
.result-video,.result-media .hold,.result-media .hold img{width:100%;height:100%;object-fit:contain}
.result-copy h1{font-size:var(--text-heading);letter-spacing:var(--track-display);line-height:1.02;max-width:16ch}.result-copy>p{font-size:1rem;color:var(--muted);line-height:1.5;margin-top:10px;max-width:40ch}
.result-copy .output-strip{margin-top:16px}.result-copy :is(.alert,.help){font-size:.8125rem;line-height:1.5;color:var(--faint);margin:6px 0 0}.result-copy>p+:is(.alert,.help){margin-top:14px}.result-copy :is(.alert,.help)+:is(.alert,.help){margin-top:2px}
.result-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.8125rem;font-weight:700;color:var(--muted)}
.result-eyebrow>span+span{display:flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--grad-raised);box-shadow:var(--hi),var(--ring);color:var(--ink)}
.result-eyebrow>span+span::before,.film-status::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(245,165,36,.8)}
.is-ready .result-eyebrow>span+span::before,.is-ready .film-status::before{background:var(--success);box-shadow:0 0 8px rgba(157,217,178,.7)}.is-error .result-eyebrow>span+span::before,.is-error .film-status::before{background:var(--error);box-shadow:0 0 8px rgba(255,154,145,.7)}
.result-link{display:flex;align-items:center;min-height:44px;margin-top:12px;font-size:.9375rem;font-weight:700}
.result-next{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:20px}.result-next .result-link:first-child{justify-content:center;min-height:52px;padding:0 20px;border-radius:var(--radius-pill);background:var(--grad-raised);box-shadow:var(--btn-secondary);color:var(--link);transition:transform var(--dur-release) var(--ease-press)}.result-next .result-link:first-child:active{transform:scale(var(--press));transition-duration:var(--dur-micro)}.result-next .result-link.is-quiet{justify-content:center}.result-next .result-link{margin-top:0}.result-link.is-quiet{color:var(--muted);font-weight:600}
.result-copy>.card{margin-top:20px;padding:4px 16px;border-radius:var(--radius-control);font-size:.875rem}.result-copy summary{display:flex;align-items:center;min-height:48px;cursor:pointer;color:var(--muted);font-weight:700}.result-copy .r{display:flex;align-items:center;gap:10px;min-height:44px}.result-copy .r input{width:20px;height:20px;accent-color:var(--accent)}.result-copy form{display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
.result-dock{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px}.result-dock form{display:contents}.result-dock .btn{padding-inline:16px}
/* Waiting: the effect reference, dimmed, with a slow light sweep across it. Never a percentage. */
.render-wait{position:relative;width:100%;height:100%;overflow:hidden;background:var(--media-bg)}.render-wait-poster{height:100%;width:100%;object-fit:cover;filter:saturate(.5) brightness(.45)}
.result-layout.is-pending .render-wait::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(245,165,36,.14) 50%,rgba(255,255,255,0) 65%);transform:translateX(-100%);animation:sweep 2.4s var(--ease-out) infinite}
.render-reference{top:12px;left:12px;font-size:.75rem}
.render-wait-state{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-pill);background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08),var(--elev-2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);font-size:.9375rem;font-weight:700;white-space:nowrap}
.is-failed .render-wait-state{color:var(--error)}.is-failed .render-wait-state svg{width:18px;height:18px;stroke-width:2.4}
.progress-orbit{display:block;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.14);border-top-color:var(--accent);border-radius:50%;animation:orbit .9s linear infinite}
.stages{list-style:none;display:flex;gap:6px;padding:0;margin:22px 0 0}.stages li{font-size:0;height:5px;flex:1;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);box-shadow:inset 0 1px 1px rgba(0,0,0,.35)}
.stages .is-done{background:var(--grad-accent)}.stages .is-current{background:linear-gradient(90deg,var(--accent) 0%,#ffd592 50%,var(--accent) 100%) 0 0/200% 100%;box-shadow:0 0 12px rgba(245,165,36,.6);animation:shimmer 1.8s linear infinite}.stages .is-current:last-child{background:var(--grad-accent);box-shadow:none;animation:none}

/* ---------- library ---------- */
.library-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 4px 22px}.library-heading h1{font-size:var(--text-heading);letter-spacing:var(--track-display);line-height:1}.library-heading p{color:var(--muted);margin-top:8px;font-size:.9375rem}
.library-new{display:flex;align-items:center;flex:none;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);background:var(--grad-accent);box-shadow:var(--btn-primary);color:var(--on-accent);font-size:.9375rem;font-weight:650;transition:transform var(--dur-micro) var(--ease-press)}.library-new:active{transform:translateY(1px) scale(.97);box-shadow:var(--btn-primary-press)}
.library-item .film-cover{aspect-ratio:9/16;box-shadow:var(--elev-2)}.library-item:only-child{grid-column:1/-1}.library-item:only-child .film-cover{aspect-ratio:4/5}.library-item h2{font-size:1rem;letter-spacing:-.02em;margin-top:12px}.library-item p{font-size:.8125rem;color:var(--muted);margin-top:2px}
.film-status{top:10px;left:10px;font-size:.75rem}
.empty-feature{display:grid;gap:24px;align-items:center;max-width:800px;margin:0 auto}
.empty-feature-media{position:relative;display:block;aspect-ratio:4/5;max-height:52svh;border-radius:var(--radius-media);overflow:hidden;background:var(--surface);box-shadow:var(--elev-3),var(--glow-accent)}
.empty-feature-media::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--ring-media);pointer-events:none}.empty-feature-media video{width:100%;height:100%;object-fit:cover}
.empty-feature-media>span{top:12px;left:12px;font-size:.75rem}
.empty-feature-copy h2{font-size:1.75rem;letter-spacing:var(--track-display)}.empty-feature-copy>p:not(.empty-kicker){color:var(--muted);font-size:.9375rem;margin-top:10px;max-width:40ch}.empty-kicker{font-size:.8125rem;font-weight:700;color:var(--link);margin-bottom:8px}
.empty-feature-actions{display:flex;flex-direction:column;gap:4px;margin-top:22px}.empty-feature-actions>a:not(.btn){display:flex;align-items:center;justify-content:center;min-height:44px;font-size:.9375rem;font-weight:700}
.empty-library{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 24px 28px;border-radius:var(--radius-card);background:radial-gradient(90% 60% at 50% 0%,rgba(245,165,36,.08),rgba(245,165,36,0) 70%),var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1);text-align:center}
.empty-library>svg{width:56px;height:56px;padding:14px;margin-bottom:6px;border-radius:16px;background:var(--accent-tint);box-shadow:inset 0 0 0 1px rgba(245,165,36,.28);color:var(--link)}
.empty-library h2{font-size:var(--text-title);letter-spacing:var(--track-title);line-height:1.1}.empty-library p{max-width:34ch;color:var(--muted);font-size:.9375rem;line-height:1.5;text-wrap:pretty}
.empty-library .btn{width:auto;min-width:220px;margin-top:10px}
.install-help{margin-top:28px;padding:4px 16px;border-radius:var(--radius-control);font-size:.875rem;color:var(--muted)}.install-help summary::before{content:'';flex:none;width:36px;height:36px;margin-right:12px;border-radius:10px;background:url(/cracked-tile.svg) center/cover;box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--elev-1)}.install-help summary{display:flex;align-items:center;justify-content:flex-start;min-height:60px;color:var(--ink);cursor:pointer;font-weight:700;list-style:none}.install-help summary::-webkit-details-marker{display:none}.install-help summary::after{margin-left:auto;content:'+';font-size:1.25rem;color:var(--muted)}.install-help[open] summary::after{content:'−'}.install-help p{max-width:45ch;padding-block:8px 12px}

/* ---------- after a video: the guest's optional email, the next purchase, the done-for-you card ---------- */
.claim-box{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding:16px;border-radius:var(--radius-card)}.claim-box .help{margin-top:0}
/* "What's this for?": one optional tap under the first finished clip. Four answers in a 2x2 grid, thumb-sized. */
.result-copy .use-tap{display:flex;flex-direction:column;gap:10px;margin-top:20px;padding:16px;border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1)}
.use-tap h2{font-size:1rem;font-weight:650;letter-spacing:-.02em}.use-tap-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.use-tap-options .btn{width:100%;min-height:44px;padding:0 12px;font-size:.875rem}.result-copy .use-tap .help{margin-top:0}

/* ---------- plain pages: pricing and billing ---------- */
.plain-page{display:flex;flex-direction:column;gap:16px;width:min(100%,560px)}
.head{display:flex;flex-direction:column;gap:10px;padding:10px 4px 12px}.head .row-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head .title,.head .display{font-size:var(--text-heading);font-weight:650;letter-spacing:var(--track-display);line-height:1}.head .line{margin-top:0;max-width:34ch}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px;border-radius:var(--radius-card)}
.card h2{font-size:1.25rem;letter-spacing:var(--track-title)}.card .line,.card .note{margin-top:0;font-size:.9375rem}
.rows{display:flex;flex-direction:column;align-self:stretch}
.row{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 0;font-size:.9375rem;box-shadow:inset 0 -1px 0 var(--line)}
.row .label{color:var(--ink)}.row .spacer{flex:1}.row b{font-size:1.0625rem;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.row.is-stack .text{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1;min-width:0}.row.is-stack .label{color:var(--ink)}
.card .line,.card .note{font-size:.8125rem;color:var(--muted)}.card .line+.line{margin-top:-8px}.card>.btn{align-self:stretch;width:100%}

.offer-samples{display:flex;flex-direction:column;gap:14px}.offer-samples h2{font-size:var(--text-title);letter-spacing:var(--track-title)}.offer-samples>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.offer-samples a{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.8125rem;font-weight:700}.offer-samples img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--radius-media);background:var(--media-bg);box-shadow:var(--ring-media),var(--elev-2)}
.offer-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:16px 0 20px;padding:0}.offer-list li{display:flex;align-items:flex-start;gap:10px;font-size:.9375rem;line-height:1.45}
.offer-list li::before{content:'';flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff956e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:inset 0 0 0 1px rgba(245,165,36,.3)}

.sound-lab header p{color:var(--muted);line-height:1.5;margin-top:8px}.sound-switch{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:700}.sound-switch input{width:20px;height:20px;accent-color:var(--accent)}
.sound-moment{display:flex;flex-direction:column;gap:8px}.sound-moment>p{color:var(--muted);font-size:.875rem}.sound-moment ul{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;margin:4px 0 0}
.sound-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-radius:var(--radius-control);background:var(--grad-surface);box-shadow:var(--hi),var(--ring)}.sound-row.is-picked{box-shadow:var(--hi),0 0 0 1.5px var(--accent-ring)}
.sound-row div{display:flex;flex-direction:column;gap:2px;min-width:0}.sound-row span{color:var(--muted);font-size:.8125rem;line-height:1.4}.sound-row .btn{width:auto;min-height:44px;padding:0 16px;font-size:.875rem}

/* Every width: the price is the largest thing on a plan card (Higgsfield, Creatify, Arcads pricing: 36 to 48px numerals). The first
   row of each card carries the headline price; its label drops under it. Later rows stay the small receipt style. */
.plain-page>.card .rows>.row:first-child{flex-direction:column-reverse;align-items:flex-start;gap:4px;padding:6px 0 18px}
.plain-page>.card .rows>.row:first-child .spacer{display:none}
.plain-page>.card .rows>.row.is-stack:first-child .text{flex-direction:column-reverse;align-items:flex-start;gap:4px}
.plain-page>.card .rows>.row:first-child b{font-size:2.75rem;line-height:1;letter-spacing:-.04em}
.plain-page>.card .rows>.row:first-child .label{color:var(--muted)}

/* ---------- 404 and offline ---------- */
.lost-page{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:100%;padding-block:32px 72px;text-align:center}
.lost-mark{position:relative;width:96px;height:96px;margin-bottom:12px}.lost-mark img,.lost-mark svg{width:96px;height:96px;border-radius:26px;box-shadow:0 0 0 1px rgba(255,255,255,.1),var(--elev-3),0 20px 60px -18px rgba(245,165,36,.55)}
.lost-mark svg{stroke:none;display:block}.lost-page .note{margin-top:0;max-width:32ch;font-size:.8125rem}
.lost-page h1{font-size:var(--text-heading);letter-spacing:var(--track-display)}.lost-page p{color:var(--muted);max-width:28ch}
.lost-page .btn{width:auto;min-width:220px;margin-top:10px}.lost-page .btn+.btn{margin-top:0}

/* ---------- toast ---------- */
.render-toast{position:fixed;inset:auto 16px calc(16px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;z-index:var(--z-sticky);display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 18px;border-radius:var(--radius-pill);background:var(--glass-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08),var(--elev-3);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);color:var(--ink);font-size:.9375rem;font-weight:700;animation:rise var(--dur-enter) var(--ease-out) both}
.render-toast>span:last-child{margin-left:auto;display:flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--radius-pill);background:var(--grad-accent);box-shadow:var(--btn-primary);color:var(--on-accent);text-shadow:0 1px 0 rgba(255,220,160,.35)}
.render-pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(245,165,36,.9);flex:none;animation:pulse 1.4s ease-in-out infinite}

/* ---------- motion (design/MOTION.md) ---------- */
@keyframes sheet-enter{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sheet-exit{to{transform:translateY(100%)}}
@keyframes fade-in{from{opacity:0}}@keyframes fade-out{to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise))}}
@keyframes sink{to{opacity:0;transform:translateY(calc(var(--rise) * .75))}}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45}}
@keyframes shimmer{to{background-position:-300% 0}}@keyframes sweep{to{transform:translateX(100%)}}
/* The finished video: it develops out of the dark like a print, a warm glow blooms behind it, then the words follow. */
@keyframes reveal{from{opacity:0;transform:scale(.92);filter:brightness(2.2) saturate(0) blur(12px)}35%{opacity:1;filter:brightness(1.55) saturate(.35) blur(3px)}70%{filter:brightness(1.08) saturate(.92) blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes bloom{from{opacity:0;transform:scale(.55)}40%{opacity:1}to{opacity:.85;transform:scale(1)}}
@keyframes pop{from{opacity:0;transform:scale(.9)}}
/* Content arrives: a short rise, staggered for the first few pieces. Docks, bars and sheets never move on load. Under
   reduced motion --rise is 0, so the same rules become short fades (fewer and gentler, not a hard cut). */
:is(.studio-intro,.flow-heading,.composer-reference,.effect-story,.auth>*,.result-copy>:not(.result-dock),.plain-page>*,.lost-page>*,.empty-feature>*,.empty-library){animation:rise var(--dur-enter) var(--ease-out) both}
.effect-grid>:nth-child(1){animation:rise var(--dur-enter) var(--ease-out) 50ms both}.effect-grid>:nth-child(2){animation:rise var(--dur-enter) var(--ease-out) 100ms both}.effect-grid>:nth-child(3){animation:rise var(--dur-enter) var(--ease-out) 150ms both}
:is(.auth>*,.plain-page>*,.lost-page>*):nth-child(2){animation-delay:50ms}:is(.auth>*,.plain-page>*,.lost-page>*):nth-child(3){animation-delay:100ms}:is(.auth>*,.plain-page>*,.lost-page>*):nth-child(n+4){animation-delay:150ms}
.flow-heading{animation-delay:60ms}#journey-form{animation:rise var(--dur-enter) var(--ease-out) 110ms both}
.result-layout:not(.is-ready) .result-media{animation:rise var(--dur-enter) var(--ease-out) both}
.result-layout.is-ready .result-media{animation:reveal 1400ms cubic-bezier(.3,.7,.25,1) both}
.result-layout.is-ready .result-media::before{animation:bloom 1600ms var(--ease-out) 250ms both}
.result-layout.is-ready .result-copy>:not(.result-dock){animation:rise var(--dur-enter) var(--ease-out) both}
.result-layout.is-ready .result-copy>:nth-child(1){animation-delay:500ms}.result-layout.is-ready .result-copy>:nth-child(2){animation-delay:560ms}.result-layout.is-ready .result-copy>:nth-child(3){animation-delay:620ms}.result-layout.is-ready .result-copy>:nth-child(n+4){animation-delay:680ms}
.result-layout.is-ready .result-eyebrow>span+span{animation:pop 360ms var(--ease-out) 700ms both}
@media(min-width:48rem){.result-layout .result-copy>.result-dock{animation:rise var(--dur-enter) var(--ease-out) 110ms both}.result-layout.is-ready .result-copy>.result-dock{animation-delay:740ms}}
/* The purchase sheet leaves the way it came, faster: down on phones, a small drop and fade on desktop. */
.purchase-sheet[open].is-closing{animation:sheet-exit var(--dur-exit) var(--ease-out) forwards}.purchase-sheet[open].is-closing::backdrop{animation:fade-out var(--dur-exit) var(--ease-out) forwards}
.render-toast[data-leaving]{animation:sink 200ms var(--ease-out) forwards}
.render-toast[data-ready] .render-pulse{animation:none;background:var(--success);box-shadow:0 0 10px rgba(157,217,178,.8)}
@media(prefers-reduced-motion:no-preference){
 /* Below the fold, cards reveal as they scroll in, where the browser can tie it to scroll. */
 @supports(animation-timeline:view()){.film-grid:not(.effect-grid)>*,.effect-grid>:nth-child(n+4){animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}}
}
@media(hover:hover) and (pointer:fine){
 .journey-primary:not(:disabled):hover,.btn:not(:disabled):not(.btn-secondary):not(.btn-ghost):hover,.film-cta:hover,.library-new:hover{box-shadow:var(--btn-primary-hover);filter:brightness(1.04)}
 .journey-primary:not(:disabled):hover>svg,.effect-card:hover .film-cta svg{transform:translateX(3px)}
 .btn-secondary:hover,.btn-ghost:hover,.journey-library:hover,.sheet-close:hover{filter:brightness(1.12)}
 .nav-back:hover{background:var(--surface-pressed)}
 .fx-pair:hover .fx-pair-out{transform:translateY(-3px)}
 .effect-card:hover{transform:translateY(-4px);box-shadow:var(--elev-3)}.effect-card:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.effect-card:hover .film-cta{box-shadow:var(--btn-primary-hover);filter:brightness(1.04)}.effect-card:hover .film-cta.is-quiet{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.2);background:rgba(255,255,255,.22);filter:none}.effect-card .film-cta{transition:box-shadow var(--dur-hover) var(--ease-out),filter var(--dur-hover) var(--ease-out)}.film-cover img{transition:transform 600ms var(--ease-out)}.film-loop{transition:opacity 320ms var(--ease-out),transform 600ms var(--ease-out)}.effect-card:hover .film-cover img,.effect-card:hover .film-loop,.library-item:hover .film-cover img{transform:scale(1.03)}.effect-card[data-effect-kind=text]:hover .film-cover img{transform:scale(1.39)}
 .photo-control:hover{background:rgba(255,255,255,.025)}.portrait-picker:hover::before{box-shadow:inset 0 0 0 1.5px rgba(245,165,36,.45)}
}

/* ---------- phones: the thumb dock ---------- */
@media(max-width:47.99rem){
 .journey-nav::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(22,19,14,.8);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06);opacity:0;transition:opacity var(--dur-hover) var(--ease-out);pointer-events:none}html[data-scrolled] .journey-nav::before{opacity:1}
 .flow-action,.result-dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);margin:0;padding:12px max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--glass-strong);box-shadow:0 -1px 0 var(--line);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5)}
 .flow-action::before,.result-dock::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:56px;background:linear-gradient(to top,rgba(22,19,14,.94) 0%,rgba(22,19,14,.8) 30%,rgba(22,19,14,0) 100%);pointer-events:none}
 .flow-action>*,.result-dock{max-width:540px;margin-inline:auto}.result-dock{max-width:none}
 .flow-action .journey-note{margin-top:8px}
 .result-layout.is-ready .result-copy>.result-dock{animation:fade-in 300ms var(--ease-out) 450ms both}
 /* Half-width home tiles: a CTA that fits, no sample thumbnails, and an odd last tile takes the full row. */
 .effect-card:not([data-featured]) .film-cta{min-height:36px;margin-top:8px;padding:0 5px 0 12px;font-size:.8125rem}.effect-card:not([data-featured]) .film-cta svg{width:24px;height:24px;padding:5px}
 .effect-card:not([data-featured]) .film-caption p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .effect-grid>.effect-card:not([data-featured]):last-child:nth-child(odd){grid-column:1/-1}.effect-grid>.effect-card:not([data-featured]):last-child:nth-child(odd) .film-cover{aspect-ratio:4/5}
 html:is([data-page=effect],[data-page=make]) .render-toast,.result-layout:not(.is-pending)~.render-toast{bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
 /* the toast journey.js adds to <body> on a finished video (another one still making) sits above Save video, never on it
    (FIXES 2026-10-01 #5: a tap meant for Save hit the toast) */
 body:has(.result-dock) .render-toast{bottom:calc(var(--result-dock-h,96px) + 10px + env(safe-area-inset-bottom))}
}
@media(max-height:42rem){.studio-intro h1{font-size:2.125rem}.portrait-picker{min-height:clamp(200px,34svh,320px)}.has-photo .portrait-picker{height:clamp(200px,34svh,320px)}.purchase-images img,.purchase-images [data-purchase-line]{aspect-ratio:1}.purchase-images figure{max-width:112px}.purchase-heading h2{font-size:1.375rem}.result-media{height:48svh}}

/* ---------- tablets and desktop ---------- */
@media(min-width:48rem){
 .journey-nav{width:min(100% - 32px,1160px);margin:0 auto;height:72px;padding:0}
 .side-switch+.journey-nav,html:is([data-sides-fold],[data-page=effect]) .side-switch+.journey-nav{height:72px;padding-top:0;top:auto}.side-switch{justify-content:flex-start;padding-inline:max(16px,calc((100% - 1160px)/2))}.side-switch a:active{transform:none}
 html[data-page=effect] .journey-nav{position:relative;width:min(100% - 32px,1160px);background:none}html[data-page=effect] .nav-title{visibility:visible}html[data-page=effect] .nav-back{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}html[data-page=effect] .journey-library{background:var(--grad-raised);box-shadow:var(--btn-secondary)}
 .browse-page,.library-page{padding:16px 24px 56px}.studio-intro{padding:24px 0 40px}.studio-intro h1{font-size:var(--text-desktop);max-width:16ch}.studio-intro>p{font-size:1.125rem;max-width:44ch}
 .effect-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}[data-featured] .film-caption{padding:28px}
 .fx-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:center}.fx-top>.effect-card[data-featured]{grid-column:auto}.fx-pair-row{margin-inline:0;padding-inline:0;scroll-padding-inline:0}[data-featured] .film-caption h2{font-size:3rem}
 .film-grid:not(.effect-grid){grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
 .studio-flow.is-discovering{width:min(100%,1080px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding:8px 32px 56px;align-items:center}
 .is-discovering .cinema-stage{height:min(78svh,760px);min-height:420px;aspect-ratio:9/16;width:auto;justify-self:end;border-radius:var(--radius-media);box-shadow:var(--elev-3),var(--glow-accent)}.cinema-sample{top:12px;left:12px}.cinema-toggle{bottom:12px;right:12px}
 .effect-panel{margin:0;padding:0;border-radius:0;background:none;box-shadow:none;gap:24px}.effect-story h1{font-size:3.25rem}.example-row{margin-inline:0;padding-inline:0}
 .studio-flow.is-making{width:min(100%,960px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px 48px;padding:8px 24px 56px;align-items:start}
 .is-making .composer-reference{grid-column:1;grid-row:1/4;display:block;padding:12px}.is-making .reference-media{width:100%;height:auto;aspect-ratio:9/16}.is-making .reference-media img{border-radius:14px}.is-making .reference-media>span{display:block;position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--glass-strong);font-size:.75rem;font-weight:700;color:var(--muted)}.is-making .effect-receipt{padding:12px 4px 0}
 .is-making .flow-heading,.is-making #journey-form,.is-making>.output-strip,.is-making>.flow-action{grid-column:2}.is-making .flow-heading h1{font-size:2.75rem}
 .purchase-sheet{inset:0;margin:auto;width:460px;max-width:calc(100% - 48px);height:fit-content;max-height:calc(100dvh - 48px);border-radius:var(--radius-sheet);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.06),var(--elev-3)}.purchase-sheet[open]{animation-name:sheet-pop}.sheet-handle{display:none}.auth{padding-top:48px}
 .empty-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.empty-feature-media{aspect-ratio:3/4;max-height:none}
 .result-layout{width:min(100%,1000px);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:24px 56px;padding:8px 32px 56px}.result-media{height:min(76svh,720px);grid-row:1/3}.result-copy h1{font-size:2.75rem}.result-dock{margin-top:24px}
 .plain-page{padding-top:24px}
}
@keyframes sheet-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}@keyframes sheet-drop{to{opacity:0;transform:translateY(6px) scale(.98)}}
@media(min-width:48rem){.purchase-sheet[open]{animation-duration:var(--dur-pop);animation-timing-function:var(--ease-out)}.purchase-sheet[open].is-closing{animation-name:sheet-drop;animation-duration:180ms}.purchase-sheet[open]::backdrop{animation-duration:200ms}.purchase-sheet[open].is-closing::backdrop{animation-duration:180ms}}
/* Reduced motion: nothing travels, nothing loops, nothing is tied to scroll. Short opacity fades stay. */
@media(prefers-reduced-motion:reduce){
 :root{--rise:0px;--press:1}html{scroll-behavior:auto}
 .purchase-sheet[open],.purchase-sheet[open].is-closing{animation-name:fade-in;animation-duration:200ms}.purchase-sheet[open].is-closing{animation-name:fade-out;animation-duration:150ms}
 .result-layout.is-ready .result-media{animation:fade-in 400ms var(--ease-out) both}.result-layout.is-ready .result-media::before{animation:fade-in 400ms var(--ease-out) both}.result-layout.is-ready .result-eyebrow>span+span{animation:fade-in 200ms both}
 .film-cover,.progress-orbit,.stages .is-current,.render-pulse,.result-layout.is-pending .render-wait::after,.ads-status .stages .is-current{animation:none}
 .progress-orbit{border-top-color:rgba(255,255,255,.14);background:radial-gradient(circle,var(--accent) 0 3px,transparent 4px)}
 :is(.journey-primary,.btn,.effect-card,.film-cover img,.nav-back,.cinema-toggle,.sheet-close,.example-pick img,.more-card img,.journey-primary>svg){transition-property:opacity,box-shadow,filter,background-color,color!important;transform:none!important}
}

/* The free first, the packs and the own-photo box (features/templates/journey.mjs, page.mjs; renders/page.mjs sharePage). The credits chip is public/wallet.css. */
.fx-packs{display:block}
.fx-packs h2{font-size:1.25rem;font-weight:650;letter-spacing:var(--track-title)}
.fx-pack-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.fx-plate .fx-pack{position:relative;gap:2px;padding:14px 12px;border-radius:var(--radius-control);background:var(--grad-raised);box-shadow:var(--hi),var(--ring)}
.fx-plate .fx-pack strong{font-size:1.5rem}
.fx-pack.is-popular{box-shadow:var(--hi),0 0 0 2px var(--accent-ring)}
.fx-pack em{font-style:normal;font-size:.75rem;font-weight:700;color:var(--link)}
.fx-packs p{margin-top:6px}
.pack-picker{display:grid;gap:8px;margin:12px 0 0;padding:0;border:0}
.pack-picker legend{font-size:.875rem;font-weight:700;margin-bottom:8px}
.pack-pick{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 12px;min-height:52px;padding:10px 14px;border-radius:var(--radius-control);background:var(--grad-raised);box-shadow:var(--hi),var(--ring);cursor:pointer}
.pack-pick:has(input:checked){box-shadow:var(--hi),0 0 0 2px var(--accent);background:var(--accent-tint)}
.pack-pick input{width:20px;height:20px;accent-color:var(--accent)}
.pack-credits b{font-weight:650;font-variant-numeric:tabular-nums}
.pack-tag{grid-column:2;grid-row:2;font-size:.75rem;font-weight:700;color:var(--muted)}
.pack-price{grid-column:3;grid-row:1/span 2;font-size:1.125rem;font-weight:650;font-variant-numeric:tabular-nums}
.own-photo{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:var(--radius-control);background:var(--grad-raised);box-shadow:var(--hi),var(--ring);font-size:.9375rem;line-height:1.4;cursor:pointer}
.own-photo input{flex:none;width:22px;height:22px;margin-top:1px;accent-color:var(--accent)}
.free-email{display:grid;gap:10px;margin-top:12px}
.free-email .input{min-height:48px;font-size:1rem}
.free-check{margin-top:12px;min-height:65px}
.cinema-still{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.result-still{background:var(--media-bg)}
.share-page .result-dock .btn{min-width:12rem}
@media (max-width:22rem){.fx-pack-row{grid-template-columns:1fr}}
.fx-plate .fx-pack-row{display:grid;flex-direction:initial}
.fx-plate.fx-packs p+p{margin-top:4px}
.purchase-sheet .pack-picker,.purchase-sheet .free-email,.purchase-sheet .free-check{order:6}
/* A pair effect's two photos (features/templates/journey.mjs, Hotel Lobby): left and right tiles, each its own picker. */
.pair-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair-slot{position:relative;display:grid;min-height:clamp(200px,32svh,340px);border-radius:var(--radius-card);background:var(--grad-surface);box-shadow:var(--hi),var(--ring),var(--elev-1);overflow:hidden}
.pair-slot .photo-control{padding:12px}.pair-slot .photo-empty strong{font-size:1rem;margin-top:8px}
.pair-slot .selected-portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* Looks (Fan Transition): five outfit tiles, three then two, each shorter; and five small photos in the purchase sheet. */
.pair-picker[data-slots="5"]{grid-template-columns:repeat(6,1fr);gap:8px}.pair-picker[data-slots="5"] .pair-slot{grid-column:span 2;min-height:clamp(150px,22svh,230px)}
.pair-picker[data-slots="5"] .pair-slot:nth-child(4){grid-column:2/span 2}
.pair-picker[data-slots="5"] .photo-control{padding:8px}.pair-picker[data-slots="5"] .photo-empty strong{font-size:.875rem;margin-top:4px}.pair-picker[data-slots="5"] .photo-icon{transform:scale(.8)}
.purchase-images:has([data-purchase-photo5]) figure{max-width:72px}.purchase-images:has([data-purchase-photo5]) figcaption{font-size:.625rem;margin-top:6px}
.purchase-images:has([data-purchase-photo5]) figure :is(img){transform:none!important;border-radius:10px}
.pair-slot.is-filled .photo-empty{display:none}.pair-slot.is-filled .photo-control{justify-content:flex-end}
.pair-slot.is-filled .photo-select{display:flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--radius-pill);background:var(--glass-strong);font-weight:700;font-size:.875rem}
.pair-tag{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:var(--radius-pill);background:var(--glass-strong);font-size:.75rem;font-weight:700;pointer-events:none}
.studio-flow[data-pair=true] .purchase-images figure{max-width:112px}
.result-sound{margin-top:18px;padding:14px 16px;border-radius:var(--radius-control);background:var(--grad-raised);box-shadow:var(--hi),var(--ring)}
.result-sound h2{font-size:1rem;margin:0 0 8px}.result-sound ol{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:.9375rem;line-height:1.4}