/* One typeface everywhere: Sora, the logo's. Headings use its weight and tight tracking. */
/* Served from our own site (fonts/, SIL Open Font License), not Google Fonts, which mainland China blocks.
   One variable file per script covers every weight; the Latin one is preloaded by each page. */
@font-face{font-family:Sora;font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/sora-v17-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Sora;font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/sora-v17-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#f5f4f1;--ink:#292e28;--muted:#969b91;--line:#dddfd7;--radius:22px;--font:Sora,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);overscroll-behavior:none}
body{color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;border:0;background:transparent;color:inherit;display:grid;place-items:center;padding:0;cursor:pointer;transition:background .18s,color .18s,transform .18s}
button:active{transform:scale(.96)}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #91a282;outline-offset:4px}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.header{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;gap:24px} /* full width on every page, so the logo and profile stay put from page to page */
.logo{justify-self:start;font:500 22px/1 var(--font);letter-spacing:-.065em}
.view-nav{display:flex;align-items:center;gap:4px;background:#e9eae450;border:1px solid #e3e4dd90;border-radius:30px;padding:4px}
.view-nav a{display:grid;place-items:center;min-width:78px;height:30px;padding:0 18px;border-radius:22px;color:#8a8f85;font-size:12px;white-space:nowrap;transition:background .2s,color .2s}
.view-nav a:hover{color:var(--ink)}
.view-nav a[aria-current=page]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #1822190a}
.nav-toggle,.view-nav .nav-home{display:none}
.header-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}
.profile{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#e9ece4;color:#65735d}
.profile svg{width:17px;height:17px}
.profile:hover{background:#e0e6d7}
.lang-switch{font-size:12px;color:#8a8f85;white-space:nowrap;transition:color .2s} /* 中文, or EN on the Chinese site (site/i18n.js) */
.lang-switch:hover{color:var(--ink)}
body.gallery-route{height:100%;overflow-y:auto;overscroll-behavior-y:auto}
html:has(.gallery-route){overflow-y:auto}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
.gallery-thumb{display:block;aspect-ratio:1.3;overflow:hidden;border-radius:var(--radius);background:#ecece7;transition:transform .25s,box-shadow .25s}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-title{display:block;padding:12px 4px 0;overflow:hidden;font-size:13px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis}
.experience-app{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* The feed moves entire embedded works; its chrome stays outside their viewport. */
.flow-page{height:calc(100dvh - 72px);display:flex;flex-direction:column;padding:4px 20px 0}
.flow-stage{position:relative;flex:1;min-height:0;overflow:hidden;outline:none;border-radius:var(--radius);isolation:isolate}
.flow-stage.is-dragging{cursor:grabbing}
.flow-card{position:absolute;inset:0;overflow:hidden;border-radius:var(--radius);background:#eeeee8;will-change:transform}
/* The scene on screen takes the pointer and keys; swipes and scrolls below it browse. */
.flow-card .experience-app{pointer-events:auto}
.flow-footer{position:relative;min-height:66px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:0 4px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.flow-caption{display:flex;align-items:center;gap:14px;min-width:0}
.flow-title{font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
/* Up / down, left of Save: the previous and next post; the arrows follow the vertical feed. */
.feed-prev,.feed-next{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.feed-prev:hover,.feed-next:hover{border-color:#c9ccc1}
.feed-prev svg,.feed-next svg{width:14px;height:14px}
.feed-next{margin-left:-6px}
/* Full screen, right of them: the scene on screen alone, without its rounded box. */
.flow-fullscreen{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.flow-fullscreen:hover{border-color:#c9ccc1}
.flow-fullscreen svg{width:14px;height:14px}
.flow-fullscreen[hidden]{display:none}
.experience-app:fullscreen{border-radius:0}
.flow-actions{display:flex;align-items:center;justify-self:end;gap:12px}
/* A post in Flow: Save (someone else's), or who sees it (your own). */
.flow-save,.flow-visibility{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:500}
.flow-save[hidden],.flow-visibility[hidden]{display:none}
.flow-save:hover{border-color:#c9ccc1}
.flow-save svg{width:14px;height:14px}
.flow-save.is-saved svg{fill:currentColor}
.flow-visibility{color:var(--muted);font-weight:400}
.flow-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden} /* a honeypot field people never see */
/* Dialogs sit on their own layer: the page behind dims, blurs and loses some colour, and the card
   casts a stacked shadow (hairline edge, contact, ambient) with a lit top edge. */
.use-dialog{width:min(380px,calc(100vw - 32px));padding:28px;border:0;border-radius:22px;background:var(--paper);color:var(--ink);box-shadow:inset 0 1px 0 #ffffffd9,0 0 0 1px #1822191a,0 2px 4px #18221914,0 12px 28px #18221929,0 36px 90px -12px #18221973;animation:dialog-in .32s cubic-bezier(.2,.8,.2,1)}
.use-dialog::backdrop{background:#121813a6;-webkit-backdrop-filter:blur(7px) saturate(.75);backdrop-filter:blur(7px) saturate(.75);animation:backdrop-in .32s ease-out}
@keyframes dialog-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes backdrop-in{from{opacity:0}}
.use-dialog h2{margin:0 26px 0 0;font-size:21px;font-weight:500;line-height:1.2;letter-spacing:-.04em}
.use-dialog p{margin:12px 0 24px;font-size:13px;color:#7e8577;line-height:1.6}
.use-dialog-close{position:absolute;top:18px;right:18px;width:28px;height:28px;border-radius:50%;color:#8a8f85}
.use-dialog-close:hover{background:#e9ece4;color:var(--ink)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 :root{--radius:18px}
 /* The sections fold into the logo, which opens them as a menu under it (nav.js). It's drawn from
    the page's own markup (.nav-toggle comes first in the header), so it's right before any script runs. */
 .header{position:relative;height:60px;padding:0 16px;grid-template-columns:1fr auto;gap:8px}
 .nav-toggle~.logo{display:none}
 .nav-toggle{display:inline-flex;align-items:center;gap:2px;justify-self:start;height:40px;margin-left:-6px;padding:0 6px;border-radius:12px;font:500 20px/1 var(--font);letter-spacing:-.065em}
 .nav-toggle svg{width:18px;height:18px;stroke-width:1.8;transition:transform .2s}
 .nav-open .nav-toggle{background:#e9eae4}
 .nav-open .nav-toggle svg{transform:rotate(180deg)}
 .header-actions{gap:10px;grid-column:2;grid-row:1}
 .nav-toggle~.view-nav{display:none;position:absolute;top:54px;left:10px;z-index:40;flex-direction:column;align-items:stretch;gap:2px;min-width:210px;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px #1822190f,0 18px 40px -12px #18221940}
 .header.nav-open .nav-toggle~.view-nav{display:flex}
 .nav-toggle~.view-nav a{justify-content:start;height:42px;min-width:0;padding:0 12px;border-radius:10px;color:var(--ink);font-size:14px}
 .nav-toggle~.view-nav .nav-home{display:grid}
 .nav-toggle~.view-nav a:hover{background:#f3f4ef}
 .nav-toggle~.view-nav a[aria-current=page]{background:#f0f1eb;box-shadow:none;font-weight:500}
 .header.over.nav-open .nav-toggle{background:#ffffff26}
 .profile{height:28px;width:28px}
 .gallery-grid{gap:20px 12px}
 .gallery-thumb{aspect-ratio:.95;border-radius:16px}
 .gallery-title{padding-top:9px;font-size:12px}
 .flow-page{height:calc(100dvh - 60px);padding:8px 10px 0}
 .flow-footer{min-height:62px;padding:6px 4px max(10px,env(safe-area-inset-bottom));grid-template-columns:1fr auto;gap:6px 10px}
 .flow-caption{gap:9px}
 .flow-title{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.use-dialog,.use-dialog::backdrop{animation:none}}
/* The scene's button (Make this gift), which opens the make page, and the page's form. */
.make{display:flex;align-items:center;justify-content:center;gap:8px;min-width:80px;height:34px;padding:0 16px;border:1px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:500}
.make[hidden]{display:none}
.make:hover{background:#434a3e}
.make svg{width:13px;height:13px}
.field{display:block;margin:0 0 14px;min-width:0}
.field[hidden]{display:none}
.field>span{display:block;margin-bottom:6px;font-size:12px;color:#7e8577}
.field em{margin-left:6px;font-style:normal;font-size:11px;color:var(--muted)}
.field input,.field textarea{display:block;width:100%;min-width:0;padding:11px 12px;font:13px/1.5 var(--font);border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid #91a282;outline-offset:1px}
.field-error{margin:-4px 0 12px!important;font-size:12px!important;color:#a5493b!important}
.field-error[hidden]{display:none}
.form-submit{width:100%;height:42px;border-radius:11px;background:var(--ink);color:#fff;font-size:12px;font-weight:500}
.form-submit:hover:not(:disabled){background:#434a3e}
.form-submit:disabled{opacity:.4;cursor:default}
.form-price{margin:0 0 10px;font-size:14px;font-weight:500;text-align:left;color:var(--ink)}
.form-price s{font-weight:400;color:var(--muted);text-decoration-thickness:1px}
.form-note{margin:12px 0 0!important;font-size:11px!important;text-align:center;color:var(--muted)!important}
.dropzone{display:grid;place-items:center;gap:4px;margin-bottom:14px;padding:22px 12px;border:1.5px dashed #c9ccc1;border-radius:14px;background:#fafbf7;cursor:pointer;transition:background .18s,border-color .18s}
.dropzone:hover,.dropzone.is-over{background:#fff;border-color:#91a282}
.dropzone:focus-within{outline:2px solid #91a282;outline-offset:2px}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone-title{font-size:13px;font-weight:500}
.dropzone-hint{font-size:11px;color:var(--muted)}
.photo-previews{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 16px;padding:0;list-style:none}
.photo-previews[hidden]{display:none}
.photo-previews li{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#ecece7}
.photo-previews img{display:block;width:100%;height:100%;object-fit:cover}
.photo-previews button{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:#182219b3;color:#fff}
.photo-previews button:hover{background:#182219}
.photo-previews button svg{width:10px;height:10px}
@media(hover:none){.photo-previews button{top:3px;right:3px;width:26px;height:26px}} /* big enough for a finger */
@media(max-width:600px){.flow-actions{gap:8px}.feed-prev,.feed-next,.flow-fullscreen{width:30px;height:30px}.feed-next{margin-left:-4px}}
/* The make page: Make your own or Request this for one scene, beside its preview, with the choice
   to send it as a gift. */
.make-page{max-width:1120px;margin:0 auto;padding:8px 28px 56px}
.make-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;color:#7e8577;font-size:12px;transition:color .18s}
.make-back:hover{color:var(--ink)}
.make-back svg{width:14px;height:14px}
.make-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:start}
.make-scene{position:sticky;top:24px;margin:0}
.make-scene .gallery-thumb{aspect-ratio:1.15}
.make-scene-title{padding:12px 4px 0;font-size:13px;font-weight:500;letter-spacing:-.02em}
.make-panel h1{margin:0;font:500 clamp(28px,3.4vw,38px)/1.1 var(--font);letter-spacing:-.055em}
.make-panel h1:focus{outline:none}
.make-lead{margin:12px 0 24px;color:#7e8577;font-size:13px;line-height:1.6}
.make-form[hidden],.make-step[hidden]{display:none}
.team-note textarea{min-height:120px}
.gift-option{margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:#fafbf7;transition:background .18s,border-color .18s}
.gift-option:has(:checked){border-color:#c9ccc1;background:#fff}
.gift-check{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;cursor:pointer}
.gift-check input{flex-shrink:0;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);cursor:pointer}
.gift-check input:focus-visible{outline:2px solid #91a282;outline-offset:2px}
.gift-check strong{display:block;font-size:13px;font-weight:500}
.gift-check-hint{display:block;margin-top:3px;color:var(--muted);font-size:11px;line-height:1.5}
.gift-option .field{margin:0;padding:0 16px 14px}
.make-done{display:grid;place-items:center}
.make-step .signin-slot{margin-top:4px}
.make-checkout:not(:empty){border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
/* The make form on the page: photos first, then a small button to add more under them. */
.make-form>.field{margin-bottom:16px}
.make-form .photo-previews{margin:0 0 10px}
.make-form .dropzone{margin-bottom:16px}
.make-form .dropzone.has-photos{grid-auto-flow:column;gap:6px;padding:11px 12px;border:1px solid var(--line);background:#fff}
.make-form .dropzone.has-photos .dropzone-title::before{content:"+";margin-right:6px}
.make-form .dropzone.has-photos .dropzone-hint,.make-form .dropzone-hint:empty{display:none}
/* Paying: what it's for and its price, then Stripe's form. */
.make-pay .make-back{margin:0 0 14px}
.make-page:has(.make-pay:not([hidden]))>.return-link{display:none} /* the payment step's own Back returns to the form; leaving the page would drop the payment */
.make-pay .make-lead:empty{display:none}
.pay-summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:13px}
.pay-summary[hidden]{display:none}
.pay-item{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay-price{flex-shrink:0;font-weight:500;font-variant-numeric:tabular-nums}
.make-checkout-loading{margin:0 0 12px;padding:56px 16px;border:1px dashed #c9ccc1;border-radius:14px;color:var(--muted);font-size:12px;text-align:center}
.make-checkout-loading[hidden]{display:none}
.pay-terms{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.6}
.pay-terms a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.make-page{max-width:616px}.make-layout{grid-template-columns:1fr;gap:24px}.make-scene{position:static;display:flex;align-items:center;gap:14px}.make-scene .gallery-thumb{flex-shrink:0;width:84px;aspect-ratio:1;border-radius:14px}.make-scene-title{padding:0}}
@media(max-width:600px){.make-page{padding:8px 16px 40px}.make-back{margin-bottom:16px}.make-panel textarea,.make-panel input{font-size:16px}.make-panel .form-submit{height:48px;font-size:13px}} /* 16px keeps iOS from zooming in; 48px buttons fit a thumb */
/* Accounts: Google sign-in and the signed-in avatar. */
.google-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#1f1f1f;font-size:13px;font-weight:500;box-shadow:0 1px 2px #1822190d;transition:background .18s,box-shadow .18s}
.google-button:hover{background:#fafbf7;box-shadow:0 2px 8px #18221914}
.google-g{width:18px;height:18px;stroke:none}
/* Sign-in by emailed code, under Continue with Google (gift-store.js). */
.signin-options .signin-or{display:flex;align-items:center;gap:10px;margin:16px 0;font-size:11px;color:var(--muted)}
.signin-or::before,.signin-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.signin-options .email-signin-note{margin:0 0 14px;font-size:12px;color:#7e8577;line-height:1.6}
.email-signin-again{display:block;margin:12px auto 0;font-size:12px}
.email-signin-again[hidden],.email-signin-note[hidden]{display:none}
@media(max-width:600px){.email-signin input{font-size:16px}} /* 16px keeps iOS from zooming in */
.text-button{color:#7e8577;text-decoration:underline;text-underline-offset:2px}
.text-button:hover{color:var(--ink)}
.profile.is-signed-in{background:var(--ink);border-color:var(--ink);color:#fff;font-size:13px;font-weight:500}
.profile.is-signed-in:hover{background:#434a3e}
.profile-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.profile-avatar{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font-size:18px;font-weight:500}
.use-dialog .profile-empty{margin:0;font-size:12px;color:var(--muted)}
.profile-sign-out{margin-top:24px;font-size:12px}
/* Text pages (the privacy policy) and the small footer that links to them. */
.doc{max-width:680px;margin:0 auto;padding:24px 28px 72px;font-size:14px;line-height:1.7;color:#3d433b}
.doc h1{margin:8px 0 4px;color:var(--ink);font:500 clamp(30px,4.2vw,40px)/1.1 var(--font);letter-spacing:-.05em}
.doc-date{margin:0 0 28px;color:var(--muted);font-size:12px}
.doc-note{margin:-20px 0 28px;color:var(--muted);font-size:12px}
.doc-note:empty{display:none} /* only the Chinese page has one */
.doc h2{margin:36px 0 10px;color:var(--ink);font-size:18px;font-weight:500;letter-spacing:-.03em}
.doc h3{margin:22px 0 6px;color:var(--ink);font-size:14px;font-weight:500;letter-spacing:-.01em}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px;padding-left:20px}
.doc li{margin-bottom:6px}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.doc strong{color:var(--ink);font-weight:500}
.site-footer{display:flex;justify-content:center;gap:18px;padding:8px 28px 36px;font-size:11px}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ink)}
.profile-privacy{margin:14px 0 0;text-align:center;font-size:11px}
.profile-privacy a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){.doc{padding:16px 16px 56px;font-size:13px}}
/* Preview tiles while their photo is decoded in the background, and one that can't be read. */
.photo-previews li.is-loading{background:linear-gradient(100deg,#ecece7 30%,#f7f7f3 50%,#ecece7 70%);background-size:300% 100%;animation:tile-loading 1.2s linear infinite}
@keyframes tile-loading{from{background-position:100% 0}to{background-position:-50% 0}}
.photo-previews li.is-unreadable{background:#f6e8e4;box-shadow:inset 0 0 0 1.5px #c4705f}
.photo-previews li.is-unreadable::after{content:"Can’t read";position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:9px;color:#a5493b}
@media(prefers-reduced-motion:reduce){.photo-previews li.is-loading{animation:none}}
/* The profile page: the scenes an account made, requested and saved. */
.profile-page{max-width:1680px;margin:0 auto;padding:20px 28px 24px}
.profile-loading{color:var(--muted);font-size:12px;text-align:center}
.profile-page-head{display:flex;align-items:center;gap:16px;margin:0 0 30px}
.profile-page-head .profile-avatar{width:56px;height:56px;font-size:22px}
.profile-who{flex:1;min-width:0}
.profile-who h1{margin:0;overflow:hidden;font:500 clamp(26px,3.4vw,36px)/1.1 var(--font);letter-spacing:-.055em;white-space:nowrap;text-overflow:ellipsis}
.profile-who p{margin:6px 0 0;color:#7e8577;font-size:12px}
/* Your own profile's tabs: plain words, the current one underlined, with how many each holds. */
.profile-tabs{display:flex;flex-wrap:wrap;gap:4px 24px;margin:0 0 24px;border-bottom:1px solid var(--line)}
.profile-tab{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-bottom:-1px;border-bottom:1.5px solid transparent;font-size:14px;color:#7e8577}
.profile-tab:hover{color:var(--ink)}
.profile-tab[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}
.profile-tab-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
body.has-invite-banner{padding-bottom:88px}
.invite-banner{position:fixed;left:50%;bottom:16px;z-index:20;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 10px 30px #1822192e;transform:translateX(-50%)}
.invite-banner p{margin:0;font-size:13px;line-height:1.4}
.invite-banner-signin{flex:none;height:34px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.invite-banner-close{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--muted)}
.invite-banner-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
/* The offer of the Chinese page (i18n.js): the invite banner's look; above it when both show. */
body.has-lang-banner{padding-bottom:88px}
.invite-banner.read-only-banner{top:72px;bottom:auto;padding-right:18px}
.lang-banner-go{display:inline-flex;align-items:center;text-decoration:none}
body.has-invite-banner .lang-banner{bottom:84px}
@media(max-width:600px){.invite-banner{left:16px;right:16px;bottom:12px;width:auto;max-width:none;transform:none;padding-left:14px}body.has-invite-banner .lang-banner{bottom:80px}}
.profile-section h2{margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.scene-card{min-width:0}
.scene-thumb{position:relative}
.scene-card:hover .scene-thumb{transform:translateY(-3px);box-shadow:0 10px 28px #18221912}
.scene-card.is-request .scene-thumb img{filter:saturate(.6);opacity:.75}
.scene-chips{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.scene-chip{padding:4px 10px;border-radius:20px;background:#fffffff0;color:#6f7669;font-size:10px;font-weight:500;box-shadow:0 1px 3px #1822191a}
.scene-chip.is-gift{color:#8c5a3c}
.scene-chip.is-making{color:#7e8577}
.scene-info{display:flex;align-items:center;gap:10px;padding:12px 4px 0}
.scene-text{display:grid;flex:1;min-width:0}
.scene-title{padding:0}
.scene-meta{color:var(--muted);font-size:11px}
.scene-actions{display:flex;align-items:center;gap:4px}
.scene-gift{display:grid;place-items:center;height:30px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:500;transition:background .18s}
.scene-gift:hover{background:#434a3e}
.scene-menu-wrap{position:relative}
.scene-more{width:30px;height:30px;border-radius:9px;color:#7e8577}
.scene-more:hover,.scene-more[aria-expanded=true]{background:#e9ece4;color:var(--ink)}
.scene-more svg{width:18px;height:18px;stroke-width:2.2}
.scene-menu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;display:grid;min-width:180px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #1822191a,0 12px 32px #18221926}
.scene-menu[hidden]{display:none}
.scene-menu button{justify-items:start;padding:9px 10px;border-radius:8px;font-size:12px;text-align:left}
.scene-menu button:hover{background:#f3f4ef}
.scene-menu button.is-armed{background:#f6e3de;color:#a5493b;font-weight:500}
/* Share, on the top right of each of your scenes, opens a window in the middle of the page. */
.scene-card{position:relative}
.scene-share{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:7px;height:34px;padding:0 14px;border-radius:999px;background:#fffffff2;color:var(--ink);font-size:12px;font-weight:500;box-shadow:0 4px 14px #1822191f}
.scene-share:hover{background:#fff}
.scene-share svg{width:14px;height:14px}
.share-dialog .share-link{display:block;width:100%;height:40px;margin-bottom:10px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:12px var(--font);text-overflow:ellipsis}
.share-dialog .share-copy{width:100%;height:44px;border-radius:11px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.share-dialog .share-copy:hover{background:#434a3e}
.profile-empty-state{max-width:420px;margin:48px auto;text-align:center}
.profile-empty-state h2{margin:0;font-size:21px;font-weight:500;letter-spacing:-.04em}
.profile-empty-state p{margin:10px 0 22px;color:#7e8577;font-size:13px;line-height:1.6}
.profile-explore{display:inline-grid;place-items:center;width:auto;padding:0 22px}
.profile-signin{max-width:380px;margin:64px auto;text-align:center}
.profile-signin h1{margin:0;font:500 32px/1.1 var(--font);letter-spacing:-.055em}
.profile-signin p{margin:12px 0 24px;color:#7e8577;font-size:13px;line-height:1.6}
.profile-page .profile-sign-out{margin:40px auto 0}
@media(max-width:600px){.profile-page{padding:16px 16px 20px}.profile-page-head{flex-wrap:wrap;gap:12px}.profile-page-head .profile-avatar{width:44px;height:44px;font-size:18px}.scene-grid{grid-template-columns:1fr;gap:26px}}
/* /earnings: a creator's share of their templates' sales, owed and paid. */
.earnings-page{max-width:760px}
.earnings-head h1{margin:8px 0 0;font:500 clamp(26px,3.4vw,36px)/1.1 var(--font);letter-spacing:-.055em}
.earnings-head p{margin:10px 0 0;color:#7e8577;font-size:13px;line-height:1.6}
.earnings-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0 34px}
.earnings-total{display:grid;gap:8px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fafbf7}
.earnings-total.is-owed{background:#fff}
.earnings-total-label{color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.earnings-total strong{font:500 28px/1.1 var(--font);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.earnings-list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.earnings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line)}
.earnings-what{display:grid;gap:3px;min-width:0}
.earnings-title{overflow:hidden;font-size:14px;white-space:nowrap;text-overflow:ellipsis}
.earnings-meta{color:var(--muted);font-size:11px}
.earnings-amount{display:grid;justify-items:end;gap:4px;flex:none}
.earnings-amount strong{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.earnings-amount strong.is-negative{color:#a5493b}
.earnings-status{padding:2px 9px;border-radius:20px;background:#eef0ea;color:#6f7669;font-size:10px;font-weight:500}
.earnings-status.is-owed{background:#f4ecdf;color:#8c5a3c}
.earnings-status.is-paid{background:#e4ecdc;color:#4f6a3f}
.earnings-status.is-waiting{background:#eef0f4;color:#4f5a6e}
.earnings-totals.has-waiting{grid-template-columns:repeat(3,minmax(0,1fr))}
.earnings-status.is-void{text-decoration:line-through}
.earnings-empty{margin:0;color:#7e8577;font-size:13px;line-height:1.6}
.earnings-note{margin:22px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
@media(max-width:600px){.earnings-totals{gap:8px;margin:20px 0 28px}.earnings-total{padding:14px}.earnings-total strong{font-size:22px}.earnings-totals.has-waiting .earnings-total{padding:12px 10px}.earnings-totals.has-waiting .earnings-total strong{font-size:17px}}
/* /review: drafts to try and release, live scenes to roll back. */
.review-page{max-width:1680px;margin:0 auto;padding:20px 28px 24px}
.review-head{margin:0 0 28px}
.review-head h1{margin:0;font:500 clamp(28px,3.6vw,40px)/1.1 var(--font);letter-spacing:-.055em}
.review-head p{max-width:620px;margin:10px 0 0;color:#7e8577;font-size:13px;line-height:1.6}
.review-section{margin:0 0 40px}
.review-section h2{margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.review-empty{margin:0;color:#7e8577;font-size:13px}
.review-card{display:flex;flex-direction:column;min-width:0}
.review-card.is-unfinished .review-thumb{background:repeating-linear-gradient(135deg,#ecece7 0 10px,#f3f3ef 10px 20px)}
.review-thumb{width:100%;padding:0;border:0;cursor:pointer}
.review-thumb:hover{transform:translateY(-3px);box-shadow:0 10px 28px #18221912}
.review-info{display:grid;gap:3px;min-width:0;padding:12px 4px 0}
.review-title{padding:0;font-size:13px;font-weight:500;letter-spacing:-.02em}
.review-meta{color:var(--muted);font-size:11px}
.review-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.review-chip{padding:3px 9px;border-radius:20px;background:#eceee7;color:#6f7669;font-size:10px;font-weight:500;white-space:nowrap}
.review-chip.is-draft{background:#f3e7d9;color:#8c5a3c}
.review-chip.is-live{background:#e1ebd8;color:#4d6b3c}
.review-chip.is-muted{background:#f0efea;color:var(--muted)}
.review-actions{display:flex;gap:8px;padding:12px 4px 0}
.review-try,.review-release,.review-rollback{display:flex;align-items:center;justify-content:center;height:32px;padding:0 14px;border-radius:9px;font-size:12px;font-weight:500;white-space:nowrap}
.review-try{border:1px solid var(--line);background:#fafbf7}
.review-try:hover{background:#fff}
.review-release{background:var(--ink);color:#fff}
.review-release:hover:not(:disabled){background:#434a3e}
.review-release.is-armed,.review-rollback.is-armed{background:#8c5a3c;color:#fff}
.review-release:disabled,.review-rollback:disabled{opacity:.6;cursor:default}
.review-rollback{height:26px;padding:0 10px;border:1px solid var(--line);background:#fff;font-size:11px}
.review-rollback:hover:not(:disabled){background:#f3f4ef}
/* Declining a draft with a note, and the Creators section. */
.review-owner{overflow-wrap:anywhere}
.review-actions{flex-wrap:wrap}
.review-decline{display:grid;gap:8px;padding:10px 4px 0}
.review-decline[hidden]{display:none}
.review-decline-label{display:grid;gap:6px;color:var(--muted);font-size:11px}
.review-decline-note,.review-creator-email{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:13px}
.review-decline-note{resize:vertical}
.review-decline-go{justify-self:start;height:32px;padding:0 14px;border-radius:9px;background:#8b3d2f;color:#fff;font-size:12px;font-weight:500}
.review-decline-go:disabled{opacity:.45;cursor:default}
.review-decline-go.is-armed{background:#6b2a1f}
.review-error{margin:0;color:#8b3d2f;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.review-error[hidden]{display:none}
.review-creators .review-empty{margin:0 0 12px}
.review-creator-list{display:grid;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.review-creator{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#fafbf7}
.review-creator-who{display:grid;gap:2px;min-width:0;overflow-wrap:anywhere}
.review-creator-form{display:flex;gap:8px;max-width:440px}
.review-creator-form .review-release{flex-shrink:0}
.review-creators .review-error{margin-top:10px}
.review-owed{margin:30px 0 0}
.review-owed h3{margin:0 0 6px;font-size:14px;font-weight:500}
.review-owed-amounts{display:grid;justify-items:end;gap:2px;flex:none;font-variant-numeric:tabular-nums}
.review-owed-amounts strong{font-size:14px;font-weight:500}
.preview-decline{padding:0 20px 12px}
.preview-decline[hidden]{display:none}
.preview-decline .review-decline{max-width:520px;padding:0}
.preview-decline .review-decline-label{color:#f2ede4aa}
.preview-actions button.preview-decline-toggle{height:32px;padding:0 12px;border:1px solid #f2ede433;border-radius:9px;color:#f2ede4cc;font-size:12px}
.preview-actions button.preview-decline-toggle:hover{border-color:#f2ede466;color:#fff}
.preview-actions button.preview-decline-toggle[hidden]{display:none}
/* /requests: what visitors asked us to make by hand, with their photos. */
.requests-list{display:grid;gap:16px}
.requests-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fafbf7}
.requests-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;align-content:start}
.requests-thumb{aspect-ratio:1;padding:0;border-radius:10px;overflow:hidden;background:#ecece7;cursor:zoom-in}
.requests-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.requests-thumb:hover img{opacity:.88}
.requests-info{display:grid;gap:12px;align-content:start;min-width:0}
.review-section .requests-scene{margin:0;color:var(--ink);font-size:15px;font-weight:500;letter-spacing:-.02em;text-transform:none}
.requests-fields{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
.requests-field{display:contents}
.requests-field dt{color:var(--muted)}
.requests-field dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.requests-field a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.requests-info .review-actions{padding:0}
.requests-id{user-select:all}
/* The console (console.html): its sections on the left, the chosen one beside them; on a phone,
   the sections scroll across the top. */
.console{display:grid;grid-template-columns:208px minmax(0,1fr);gap:8px;max-width:1680px;margin:0 auto;padding-left:24px;align-items:start}
.console-nav{position:sticky;top:12px;display:grid;gap:22px;padding:24px 0}
.console-nav[hidden]{display:none}
.console-group{display:grid;gap:2px}
.console-group-name{margin:0 0 6px 10px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.console-link{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;color:var(--ink);font-size:14px;text-decoration:none}
.console-link:hover{background:#18221909}
.console-link[aria-current=page]{background:#1822190f;font-weight:500}
.console-count{color:var(--muted);font-size:12px;font-weight:400}
.console-main{min-width:0;margin:0}
.console-main.publish-page{max-width:880px}
@media(max-width:760px){.console{grid-template-columns:1fr;padding-left:0}.console-nav{position:static;display:flex;gap:4px;overflow-x:auto;padding:8px 16px 0}.console-group{display:flex;gap:4px}.console-group-name{display:none}.console-link{white-space:nowrap}}
.publish-made{display:grid;gap:10px}
.publish-made[hidden],.publish-made-post[hidden]{display:none}
.publish-made-post{display:grid;gap:6px}
.requests-more{justify-self:start;margin-top:16px}
@media(max-width:760px){.requests-card{grid-template-columns:1fr}.requests-photos{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}}
.requests-photo{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0e0cf2;color:#f2ede4;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.requests-photo[open]{display:flex}
.requests-photo::backdrop{background:#0d0e0c}
.requests-photo img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 96px);object-fit:contain;border-radius:6px}
.requests-photo-bar{display:flex;align-items:center;gap:12px;font-size:13px}
.requests-photo-step{width:36px;height:36px;border-radius:50%;color:#f2ede4cc;font-size:22px;line-height:1}
.requests-photo-step:hover{background:#f2ede41a;color:#fff}
.requests-photo-step[hidden]{display:none}
/* A request's custom scene on its card, and the dialog that uploads it (the /publish uploader). */
.requests-custom{display:grid;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.requests-custom-title{margin:0;font-size:12px;font-weight:500;letter-spacing:-.01em}
.requests-custom .review-chips,.requests-custom .review-note,.requests-custom .review-history{margin:0}
.requests-custom .review-actions{padding:0}
.requests-upload{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px}
.requests-upload [hidden]{display:none!important}
.requests-upload .publish-panel{margin:0;padding:0;border:0;background:none}
.requests-upload .publish-top{padding-right:36px}
.requests-upload .requests-upload-close{position:absolute;top:16px;right:16px;color:#6f7669}
.requests-upload .requests-upload-close:hover{background:#e9ece4;color:var(--ink)}
@media(max-width:600px){.requests-upload{padding:18px}}
.review-request{margin-top:8px;font-size:12px}
/* The preview: the version full screen, as visitors see it. */
.review-preview{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0d0e0c;color:#f2ede4;display:none;flex-direction:column}
.review-preview[open]{display:flex}
.review-preview::backdrop{background:#0d0e0c}
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 14px 8px 20px}
.preview-name{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px}
.preview-name strong{overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.preview-version{color:#f2ede488}
.preview-actions{display:flex;align-items:center;gap:8px}
.preview-copy{height:32px;padding:0 12px;border:1px solid #f2ede433;border-radius:9px;color:#f2ede4cc;font-size:12px}
.preview-copy:hover{border-color:#f2ede466;color:#fff}
.preview-actions .review-release,.preview-actions .preview-release{height:32px}
.preview-actions button.preview-release{padding:0 14px;border-radius:9px;background:#f2ede4;color:#12100d;font-size:12px;font-weight:500}
.preview-actions button.preview-release.is-armed{background:#e0b08f}
.preview-live{color:#a9c99a;font-size:12px}
.preview-close{width:32px;height:32px;border-radius:50%;color:#f2ede4cc}
.preview-close:hover{background:#f2ede41a;color:#fff}
.preview-frame{flex:1;width:100%;border:0;background:#000}
@media(max-width:600px){.review-page{padding:16px 16px 20px}.preview-bar{flex-wrap:wrap;padding:8px 12px}.preview-copy{display:none}}
.profile-review{display:inline-block;margin-top:8px;font-size:12px}
.profile-review+.profile-review{margin-left:14px}

/* /publish */
.publish-page{max-width:880px}
.publish-page [hidden]{display:none!important}
.publish-panel{margin:0 0 40px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fafbf7}
.publish-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.publish-heading{margin:0;font-size:18px;font-weight:500;letter-spacing:-.03em}
.publish-drop{margin-bottom:0;cursor:default;text-align:center}
.publish-drop.is-over{background:#fff;border-color:#91a282}
.publish-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.publish-form{display:grid;gap:16px;margin-top:18px}
.publish-form[hidden]{display:none}
.publish-form .field{margin:0}
.publish-summary{margin:0;color:var(--muted);font-size:12px}
/* The poster: the chosen image large beside what it is and how to change it; the folder's images below, when asked for. */
.publish-poster-row{display:flex;align-items:center;gap:16px}
.publish-poster-image{flex:none;display:grid;place-items:center;width:96px;aspect-ratio:1.3;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#ecece7}
.publish-poster-image img{display:block;width:100%;height:100%;object-fit:cover}
.publish-poster-empty{padding:4px;color:var(--muted);font-size:10px;text-align:center}
.publish-poster-side{display:grid;gap:10px;min-width:0}
.publish-poster-side .publish-hint{margin:0;overflow-wrap:anywhere}
.publish-poster-side .publish-actions{margin:0;justify-content:flex-start}
.publish-poster-side .text-button{font-size:13px;text-align:left}
.publish-folder-posters{margin-top:12px}
.publish-folder-posters[hidden]{display:none}
@media(max-width:600px){.publish-poster-row{align-items:flex-start}}
.publish-posters{display:grid;grid-template-columns:repeat(auto-fill,96px);gap:8px}
.publish-poster{position:relative;display:block;cursor:pointer}
.publish-poster input{position:absolute;width:1px;height:1px;opacity:0}
.publish-poster img{display:block;width:100%;aspect-ratio:1.3;object-fit:cover;border:2px solid transparent;border-radius:8px;background:#ecece7}
.publish-poster input:checked+img{border-color:var(--ink)}
.publish-poster input:focus-visible+img{outline:2px solid #91a282;outline-offset:2px}
.publish-poster span{display:block;margin-top:3px;overflow:hidden;color:var(--muted);font-size:10px;white-space:nowrap;text-overflow:ellipsis}
.publish-hint,.publish-status{margin:6px 0 0;color:var(--muted);font-size:11px}
.publish-hint[hidden],.publish-status[hidden]{display:none}
.publish-check{display:flex;align-items:center;gap:10px;font-size:13px}
.publish-check input{width:16px;height:16px;margin:0}
.publish-error{padding:12px 14px;border-radius:12px;background:#f6e6e1;color:#8b3d2f;font-size:12px;line-height:1.5}
.publish-error[hidden]{display:none}
.publish-panel>.publish-error{margin-top:12px}
.publish-problems{margin:6px 0 0;padding-left:18px}
.publish-problems li{margin:2px 0;overflow-wrap:anywhere}
.publish-more{list-style:none;margin-left:-18px;color:#a5493b}
.publish-track{height:6px;overflow:hidden;border-radius:6px;background:#e4e6dd}
.publish-track span{display:block;height:100%;width:0;border-radius:6px;background:var(--ink);transition:width .2s}
.publish-cancel{justify-self:center}
.publish-done{text-align:center;padding:12px 0}
.publish-done h2{margin:0;font-size:21px;font-weight:500;letter-spacing:-.04em}
.publish-done p{margin:10px auto 0;max-width:380px;color:#7e8577;font-size:13px;line-height:1.6}
.review-chip.publish-declined{background:#f6e6e1;color:#8b3d2f}
@media(max-width:600px){.publish-page{padding:16px}.publish-panel{padding:14px}.publish-top{flex-wrap:wrap}}
.paging-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.paging-tab{height:32px;padding:0 14px;border:1px solid var(--line);border-radius:20px;background:#fafbf7;color:#6f7669;font-size:12px;font-weight:500}
.paging-tab:hover{background:#fff}
.paging-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.paging-count{margin-left:4px;opacity:.65}
.paging-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px 0 0;font-size:12px;color:var(--muted)}
.paging-step{height:30px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:#fafbf7;font-size:12px}
.paging-step:disabled{opacity:.4;cursor:default}
.compare{display:grid;gap:14px}
.compare-panes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-pane{display:flex;flex-direction:column;gap:8px;min-width:0}
.compare-pane-head{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.compare-reload{height:26px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:11px}
.compare-frame{width:100%;height:60vh;border:1px solid var(--line);border-radius:14px;background:#fff}
.compare-gone{display:grid;place-items:center;height:60vh;margin:0;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:13px}
.compare-switch{display:none;gap:2px;align-self:flex-start;padding:2px;border:1px solid var(--line);border-radius:10px;background:#fafbf7}
.compare-switch button{height:26px;padding:0 12px;border-radius:7px;color:#6f7669;font-size:11px;font-weight:500}
.compare-switch button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px #18221914}
.compare-changes{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fafbf7}
.compare-changes-title{margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.compare-list{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:12px;overflow-wrap:anywhere}
.compare-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:767px){
  .compare-switch{display:inline-flex}
  .compare-panes{grid-template-columns:1fr}
  .compare-pane:not(.is-shown){display:none}
}
/* /review in tabs: one card per scene, its History, the notice for actions that went stale, and the compare dialog. */
.review-grid .review-card{padding-bottom:4px}
.review-thumb.is-empty{cursor:default;background:repeating-linear-gradient(135deg,#ecece7 0 10px,#f3f3ef 10px 20px)}
.review-thumb.is-empty:hover{transform:none;box-shadow:none}
.review-note{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:#f6e6e1;color:#8b3d2f;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.review-card>.review-error{padding:8px 4px 0}
.review-notice{display:grid;gap:4px;margin:0 0 16px;padding:10px 14px;border-radius:12px;background:#f6e6e1}
.review-history{margin:12px 4px 0;font-size:12px}
.review-history summary{cursor:pointer;color:#7e8577;font-size:11px;font-weight:500}
.review-history summary:hover{color:var(--ink)}
.review-history-list{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.review-history-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.review-history-line .review-meta{overflow-wrap:anywhere}
.review-compare{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);display:none;flex-direction:column}
.review-compare[open]{display:flex}
.review-compare::backdrop{background:var(--paper)}
.review-compare .preview-version{color:var(--muted)}
.review-compare .preview-close{color:var(--ink)}
.review-compare .preview-close:hover{background:#18221912;color:var(--ink)}
.compare-body{display:grid;align-content:start;gap:12px;flex:1;overflow-y:auto;padding:0 20px 20px}
.compare-switch{justify-self:start}
.compare-body .review-decline{max-width:520px;padding:0}
.paging-tab{display:inline-flex;align-items:center;white-space:nowrap}
.review-actions .review-rollback{height:32px;padding:0 14px;font-size:12px}
@media(max-width:600px){.review-grid{grid-template-columns:minmax(0,1fr)}.review-grid .review-thumb{aspect-ratio:1.6}.compare-body{padding:0 12px 16px}}
/* /publish in tabs: the same cards as /review, two to a row, plus who removed a scene and the undo warning. */
.publish-page .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.publish-removed{margin:6px 0 0;color:var(--muted);font-size:12px}
.publish-undo{align-self:center}
.is-armed+.publish-undo{display:none}
.review-history-line .text-button{font-size:12px}
@media(max-width:600px){.publish-page .review-grid{grid-template-columns:minmax(0,1fr)}}
/* /stats: a few numbers and a 12-week chart for one scene. */
.stats-page{max-width:760px}
.stats-back{display:inline-block;margin:0 0 14px;font-size:12px}
.stats-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}
.stats-tile{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fafbf7}
.stats-label{color:var(--muted);font-size:11px}
.stats-total{font:500 34px/1.1 var(--font);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stats-recent{color:#7e8577;font-size:11px}
.stats-card{margin:0 0 20px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fafbf7}
.stats-card h2{margin:0;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.stats-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 16px}
.stats-legend{display:flex;gap:14px;font-size:11px;color:#7e8577}
.stats-key{display:inline-flex;align-items:center;gap:6px}
.stats-swatch{width:10px;height:10px;border-radius:3px}
.stats-swatch.is-sent,.stats-bar.is-sent{background:var(--ink)}
.stats-swatch.is-opened,.stats-bar.is-opened{background:#9fb88f}
.stats-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.stats-week{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.stats-bars{display:flex;align-items:flex-end;justify-content:center;gap:2px;width:100%;height:140px;border-bottom:1px solid var(--line)}
.stats-bar{display:block;width:40%;max-width:14px;border-radius:3px 3px 0 0}
.stats-week-label{color:var(--muted);font-size:9px;white-space:nowrap}
.stats-empty{margin:14px 0 0;color:#7e8577;font-size:12px;text-align:center}
.stats-soon{margin:10px 0 0;color:#7e8577;font-size:13px;line-height:1.6}
@media(max-width:600px){.stats-tiles{grid-template-columns:1fr}.stats-week-label{font-size:8px;writing-mode:vertical-rl;transform:rotate(180deg)}}

/* Profiles, follows, posts and saves (social.js) */
.profile-avatar{overflow:hidden}
.profile-avatar img,.post-by-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.post-by{display:inline-flex;align-items:center;gap:6px;min-width:0;margin-top:3px;color:var(--muted);font-size:11px}
.post-by:hover{color:var(--ink)}
.post-by-avatar{display:grid;place-items:center;flex-shrink:0;width:16px;height:16px;border-radius:50%;overflow:hidden;background:var(--ink);color:#fff;font-size:8px;font-weight:500}
.post-by-avatar.is-list{width:36px;height:36px;font-size:14px}
.follow-button{flex-shrink:0;padding:0 16px;border:1px solid var(--ink)}
.follow-button.is-following,.follow-button.is-following:hover{border-color:var(--line);background:#fff;color:var(--ink)}
.profile-counts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;color:#7e8577;font-size:12px}
.profile-counts button{color:inherit}
.profile-counts button:hover,.profile-counts strong{color:var(--ink)}
.profile-counts strong{font-weight:500}
.profile-page-head .follow-button{align-self:center}
@media(max-width:480px){.profile-page-head .follow-button{flex:1 0 100%}}
.people-list{display:grid;gap:12px;max-height:min(60vh,420px);margin:18px 0 0;padding:0;overflow-y:auto;list-style:none}
.people-row{display:flex;align-items:center;gap:12px}
.people-who{display:flex;flex:1;align-items:center;gap:10px;min-width:0}
.people-names{display:grid;min-width:0}
.people-name{overflow:hidden;font-size:13px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.people-handle{color:var(--muted);font-size:11px}
.people-more{margin-top:14px;font-size:12px}
.people-more[hidden]{display:none}
.use-dialog .username-hint{margin:-6px 0 14px;font-size:11px;color:#4d6b3c}
.use-dialog .username-hint.is-bad{color:#a5493b}
.use-dialog .username-hint:empty{display:none}
.use-dialog .username-note{margin:-6px 0 14px;font-size:11px;color:var(--muted)}
.edit-picture{display:flex;align-items:center;gap:16px;margin:20px 0;font-size:12px}
.edit-picture label{cursor:pointer}
.edit-picture .profile-avatar{width:56px;height:56px;font-size:22px}
.edit-remove[hidden]{display:none}
.follow-requests{display:grid;gap:12px;margin:0 0 30px;padding:0;list-style:none}
.post-choice{min-width:0;margin:0 0 16px;padding:0;border:0}
.post-choice legend{float:left;width:100%;margin:0 0 6px;padding:0;color:#7e8577;font-size:12px} /* floated: a label above the choice, like the fields' */
.post-choice-options{clear:both;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:14px;background:#fafbf7}
.post-choice label{display:grid;place-items:center;height:34px;border-radius:10px;color:#7e8577;font-size:12px;cursor:pointer;transition:background .18s,color .18s}
.post-choice label:has(:checked){background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 3px #1822191a}
.post-choice label:has(:disabled){opacity:.4;cursor:default}
.post-choice label:has(:focus-visible){outline:2px solid #91a282;outline-offset:1px}
.post-choice input{position:absolute;opacity:0;pointer-events:none}
.post-choice.has-prices label{height:auto;min-height:44px;padding:6px 4px;gap:2px;align-content:center;line-height:1.2} /* each choice's price under it */
.post-choice-price{font-size:10px;font-weight:400;color:var(--muted)}
.pay-methods .post-choice-options{grid-template-columns:repeat(2,minmax(0,1fr))} /* two ways to pay, side by side */
.pay-methods label{padding:8px 6px;text-align:center}
.post-choice label:has(:checked) .post-choice-price{color:#5d6a55}
.profile{position:relative}
.profile-picture{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.flow-name{display:flex;align-items:baseline;gap:14px;min-width:0}
.flow-by{flex-shrink:0;color:var(--muted);font-size:11px}
@media(max-width:600px){.flow-name{display:grid;gap:1px}.flow-by{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.flow-by:hover{color:var(--ink)}
.flow-by[hidden]{display:none}
.profile-counts>*{display:inline-flex;align-items:baseline;gap:4px}

/* Site pages: home, Digital gifts, a template, community and events. One column of sections inside
   .wrap. Body text is #555b51 for contrast on paper. */
.site-page{--soft:#555b51;--faint:#6b7066;--sage:#e9ece4}
/* Long pages scroll the document itself, so phones can tuck their address bar away. */
html:has(body.site-page),body.site-page{height:auto;min-height:100%;overflow:visible}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px} /* sides only: sections set their own top and bottom */
.site-page h1{margin:0;font-weight:500;letter-spacing:-.045em}
.site-page h2{margin:0;font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.15}
.site-page h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.025em}
.eyebrow{margin:0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#65735d}
.lead{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:560px}
.lead:empty{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:500;transition:background .18s,border-color .18s}
.button svg{width:15px;height:15px}
.button.primary{background:var(--ink);color:#fff}
.button.primary:hover{background:#434a3e}
.button.secondary{border:1px solid #cfd2c8;background:#fff}
.button.secondary:hover{border-color:#a9ada0}
.button.light{background:var(--paper);color:var(--ink)}
.button.light:hover{background:#fff}
.button.wide{width:100%}
.button[hidden]{display:none}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.more-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:13px;font-weight:500}
.section{padding-top:72px;padding-bottom:8px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:32px 22px}
/* A card's poster, with its clip faded in over it once the clip plays. */
.gallery-thumb{position:relative}
.gallery-thumb .clip,.strip-tile .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.has-clip.is-playing .clip{opacity:1}
.template-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.template-card:hover .gallery-thumb{transform:translateY(-3px);box-shadow:0 10px 28px #18221912}
.template-card:focus-visible{outline:0}
.template-card:focus-visible .gallery-thumb{outline:2px solid #91a282;outline-offset:4px}
.template-text{display:flex;flex-direction:column;gap:3px;padding:0 4px}
.template-name{font-size:15px;font-weight:500;letter-spacing:-.02em}
/* Under the name, for a template our team makes: a quiet Made by hand. */
.template-tag{align-self:flex-start;padding:0 7px;border:1px solid var(--line);border-radius:999px;font-size:11px;line-height:18px;color:var(--faint)}
.made-with{display:block;margin-top:4px;font-size:11px;color:#4e5a47;text-decoration:underline;text-underline-offset:3px}
/* Templates' and an occasion page's paragraph, after the cards: for anyone who reads on, and for search engines. */
.occasion-about,.templates-about{max-width:680px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.occasion-about h2{margin:0 0 10px!important;font-size:15px!important;letter-spacing:-.01em!important}
.occasion-about p,.templates-about p{margin:0;font-size:14px;line-height:1.7;color:var(--soft)}
.occasion-about p+p{margin-top:10px}
/* The occasion row on Digital gifts and occasion pages: plain words, the current one underlined. */
.chips.occasion-links{gap:4px 22px}
.occasion-links .chip{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;border-radius:0;background:none;font-size:14px;color:var(--faint);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:1.5px;transition:color .15s,text-decoration-color .15s}
.occasion-links .chip:hover{color:var(--ink);text-decoration-color:currentColor}
.occasion-links .chip[aria-current=page]{background:none;color:var(--ink);text-decoration-color:currentColor}
.site-footer.wide{max-width:1240px;margin:88px auto 0;padding:28px 24px 40px;border-top:1px solid var(--line);justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:13px}
.site-footer.wide nav{display:flex;flex-wrap:wrap;gap:22px}
.site-footer.wide a{color:var(--soft)}
.site-footer.wide .logo{font-size:18px}
/* Digital gifts and Community */
.page-main{padding-top:32px}
.page-intro{display:flex;flex-direction:column;gap:14px;max-width:720px;margin-bottom:28px}
.page-intro h1{font-size:clamp(34px,4vw,46px);line-height:1.1}
/* Signed in on Digital gifts: free scenes left and the invite link, beside the title and the occasion row (browse.js). */
.page-main.has-invite{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px}
.page-main.has-invite>:not(.page-intro,.filters,.templates-invite){grid-column:1/-1}
.page-main.has-invite>:is(.page-intro,.filters){grid-column:1}
.page-main.has-invite>.templates-invite{grid-column:2;grid-row:1/span 2}
.templates-invite{align-self:start;width:300px;margin-bottom:28px}
.templates-invite[hidden]{display:block;visibility:hidden}
.templates-invite h2{margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.templates-invite p{margin:0;font-size:13px;line-height:1.45;color:var(--ink)}
.templates-invite-row{display:flex;gap:8px;margin-top:10px}
.templates-invite-row .share-link[hidden]{display:none}
.templates-invite-row .share-link{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:12px var(--font);text-overflow:ellipsis}
.templates-invite-row .share-copy{flex:none;height:40px;padding:0 16px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.templates-invite-row .share-copy:hover{background:#434a3e}
@media(max-width:760px){.page-main.has-invite{display:block}.templates-invite{width:auto}}
/* The occasion row on Digital gifts and occasion pages. */
.filters{display:grid;gap:12px;margin-bottom:32px}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.filter-label{min-width:72px;font-size:12px;color:var(--faint)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.empty-note{color:var(--soft);font-size:14px}
.empty-note[hidden]{display:none}
.more-posts{display:flex;margin:36px auto 0}
/* A template */
/* A template, on one grid and an 8-px spacing scale (8 within a group, 24 between blocks, 64
   between sections) with two corner radii (12px controls, 20px media). Wide: the clip on the left
   (3/5) and the name, what it is, the facts and the buttons on the right. Narrow: one column, in the
   order you'd decide in: name, clip, what it is, facts, buttons. */
.template-page{padding-top:8px}
.template-hero{width:min(1192px,calc(100% - 48px));margin:0 auto} /* the same column as the sections under it (.wrap) */
.template-page .section{padding-top:64px}
.return-link{display:flex;align-items:center;gap:6px;width:fit-content;min-height:28px;margin:0 0 16px;color:#6b7066;font-size:12px;transition:color .18s}
.return-link svg{width:14px;height:14px}
.return-link:hover{color:var(--ink)}
.template-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(300px,2fr);grid-template-areas:"media head" "media info";grid-template-rows:auto 1fr;gap:24px 48px;align-items:start}
.template-head{grid-area:head;display:flex;flex-direction:column;gap:12px;margin-bottom:8px} /* 12 to its chips, 32 (with the grid's 24) to what follows */
.template-head h1{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.08}
.occasion-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
/* Flat tags, a shade darker than the page; hovering shows they lead to that occasion's templates. */
.occasion-chips a{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:12px;background:#ebebe4;color:#4e5a47;font-size:13px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:background .18s,color .18s,text-decoration-color .18s}
.occasion-chips a:hover{background:#e2e3da;color:var(--ink);text-decoration-color:currentColor}
/* The clip, at its own shape (1040×800), so nothing of it is cut off; it opens Preview. */
.template-preview{grid-area:media;position:relative;display:block;aspect-ratio:1.3;overflow:hidden;border-radius:20px;background:#ecece7}
.template-preview::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#18221900;transition:background .2s}
.template-preview:hover::after{background:#1822190d}
.template-media{display:block;width:100%;height:100%;object-fit:cover}
.template-info{grid-area:info;display:flex;flex-direction:column;gap:24px;min-width:0}
.template-info .lead{max-width:none;font-size:16px;line-height:1.65;color:var(--ink)}
.template-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.template-buttons .button{min-height:44px;padding:0 16px;border-radius:12px;font-size:14px}
.template-buttons .button.secondary{border:1.5px solid #9a9f94;background:transparent}
.template-buttons .button.secondary:hover{border-color:var(--ink)}
.template-info .aside-note{margin:-16px 0 0}
@media(max-width:900px){
 .template-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "info";grid-template-rows:none}
}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;width:100%;margin:0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px}
.facts dt{color:var(--faint)}
.facts dd{margin:0}
.facts [hidden]{display:none}
.template-price{font-weight:500}
.template-price s{margin-right:2px;font-weight:400;color:var(--muted);text-decoration-thickness:1px}
.aside-note{margin:-6px 0 0;font-size:12px;line-height:1.6;color:var(--faint)}
/* Events */
.events-page{display:flex;flex-wrap:wrap;align-items:flex-start;gap:48px;padding-top:48px}
.events-intro{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:22px}
.events-intro h1{font-size:clamp(36px,4.6vw,52px);line-height:1.05}
.events-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.strip-tile{position:relative;aspect-ratio:.8;overflow:hidden;border-radius:18px;background:#ecece7}
.strip-tile img{display:block;width:100%;height:100%;object-fit:cover}
.contact-card{flex:1 1 420px;min-width:0;padding:36px;border-radius:28px;background:#fff}
.contact-card h2{font-size:26px;margin-bottom:20px}
.contact-form .field{font-size:12px;color:var(--soft)}
.contact-form .field input,.contact-form .field textarea{margin-top:7px;font-size:15px;background:var(--paper)}
.contact-form .button{margin-top:6px}
.contact-done{display:flex;flex-direction:column;gap:10px;min-height:260px;justify-content:center}
.contact-done[hidden],.contact-form-step[hidden]{display:none}
.contact-done svg{width:30px;height:30px;stroke:#65735d;stroke-width:1.8}
.contact-done p{margin:0;color:var(--soft)}
@media(max-width:600px){
 .wrap{padding-left:16px;padding-right:16px}
 .template-hero{width:calc(100% - 32px)}
 .section{padding-top:56px}
 .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
 .template-name{font-size:13px}
 .contact-card{padding:24px}
 .contact-form .field input,.contact-form .field textarea{font-size:16px}
}
/* /review: a scene's occasions. */
.review-occasions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0;padding:0;border:0;font-size:12px}
.review-occasions legend{float:left;margin-right:4px;color:var(--muted)}
.review-occasion{display:inline-flex;align-items:center;gap:5px;min-height:28px;cursor:pointer}
.review-occasion input{margin:0;accent-color:var(--ink)}
.review-occasions-status{color:var(--muted)}
.review-words{display:grid;gap:14px;padding:10px 4px 0}
.review-words[hidden]{display:none}
.review-words-lang{display:grid;gap:8px;margin:0;padding:0;border:0}
.review-words-lang legend{margin-bottom:6px;font-size:12px;font-weight:500}
.review-words-note{margin:0;color:var(--muted);font-size:11px}
.review-words-note.is-stale{color:#8b3d2f}
.review-words-save{display:flex;align-items:center;gap:10px;font-size:12px}
/* /review: a template's price (Price). */
.review-words .review-occasion{font-size:12px}

/* Home: one scene after another fills the first screen, with the header and the opening words over
   it; then a shelf per occasion, a small label and one row of templates, with a hairline between. */
.home-main{overflow-x:clip}
.landing{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#141813;color:#fff}
.landing-media,.sequence-layer{position:absolute;inset:0}
.sequence-layer{opacity:0;transition:opacity 1.1s ease}
.sequence-layer.is-current{opacity:1}
.sequence-layer img,.sequence-layer .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sequence-layer .clip{opacity:0;transition:opacity .5s}
.sequence-layer.is-playing .clip{opacity:1}
.landing-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,#0e120dcc,#0e120d00 22%,#0e120d00 52%,#0e120de6);pointer-events:none}
/* The header over the scene: white, on frosted glass. */
.header.over{position:absolute;top:0;left:0;right:0;z-index:3;color:#fff}
.header.over .view-nav{background:#ffffff1f;border-color:#ffffff33;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.header.over .view-nav a{color:#ffffffcc}
.header.over .view-nav a:hover{color:#fff}
.header.over .profile{background:#ffffff26;border-color:#ffffff40;color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.header.over .profile:hover{background:#ffffff40}
.header.over .lang-switch{color:#ffffffcc}
.header.over .lang-switch:hover{color:#fff}
.landing-copy{position:absolute;left:0;right:0;bottom:clamp(96px,14vh,140px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
/* The headline keeps to the left on wide screens, clear of the scene, which plays in the middle. */
.landing-copy h1{max-width:6em;font-size:clamp(44px,6vw,92px)!important;line-height:.94!important;letter-spacing:-.055em!important;text-shadow:0 2px 30px #0007,0 1px 4px #0004}
.landing-copy p{margin:0;max-width:440px;font-size:16px;line-height:1.55;color:#ffffffd9}
.landing-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.landing-actions .button{min-height:46px;padding:0 22px;border-radius:12px;white-space:nowrap}
.button.ghost{border:1.5px solid #ffffff8c;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff14}
.button.ghost:hover{border-color:#fff;background:#ffffff26}
.landing-facts{margin:0!important;font-size:13px!important;color:#ffffffbf!important}
.landing-bar{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.stage-caption{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:0;color:#ffffffd9;font-size:13px}
.stage-caption:hover{color:#fff}
.stage-label{color:#ffffff8c}
.stage-name{font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-caption svg{flex:none;width:14px;height:14px;transition:transform .2s}
.stage-caption:hover svg{transform:translateX(3px)}
.landing-controls{display:flex;align-items:center;gap:6px}
.stage-dots{display:flex}
.stage-dot{width:36px;height:44px}
.stage-dot::before{content:"";width:22px;height:2px;border-radius:2px;background:#ffffff59;transition:background .2s}
.stage-dot[aria-pressed=true]::before{background:#fff}
.clip-toggle{width:44px;height:44px;border-radius:50%;color:#fff;background:#ffffff1f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.clip-toggle:hover{background:#ffffff38}
.clip-toggle[hidden]{display:none}
.clip-toggle svg{width:15px;height:15px}
/* Each landing section has its own ground: blush, paper, sage. */
.band[hidden]{display:none}
.tone-blush{background:#f2e8e3}
.tone-sage{background:var(--sage)}
.shelf{padding-top:56px;padding-bottom:64px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.shelf-head h2{margin:0;font-size:13px!important;font-weight:500;letter-spacing:.14em!important;text-transform:uppercase;line-height:1.4!important}
.shelf-more{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--faint)}
.shelf-more:hover{color:var(--ink)}
.shelf-more[hidden]{display:none}
.shelf-head{align-items:center}
.shelf-head h2{margin-right:auto!important}
.shelf-arrows{display:flex;gap:6px}
.shelf-arrows[hidden]{display:none}
.shelf-arrow{width:34px;height:34px;border-radius:12px;background:#0000000d;color:var(--ink)}
.shelf-arrow:hover:not(:disabled){background:#0000001a}
.shelf-arrow:disabled{opacity:.35;cursor:default}
.shelf-arrow svg{width:18px;height:18px;stroke-width:1.8}
/* How it works: three steps in a row; Questions: a list that opens one answer at a time. */
.how-it-works .wrap,.faq .wrap{padding-top:56px;padding-bottom:64px}
.band-label{margin:0 0 24px!important;font-size:13px!important;font-weight:500;letter-spacing:.14em!important;text-transform:uppercase;line-height:1.4!important}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 48px;margin:0;padding:0;list-style:none}
.steps li{display:flex;flex-direction:column;gap:8px}
.step-number{display:grid;place-items:center;width:32px;height:32px;margin-bottom:8px;border-radius:12px;background:#ebebe4;font-size:13px;font-weight:500}
.steps h3{margin:0;font-size:18px!important;letter-spacing:-.02em!important}
.steps p{margin:0;font-size:14px;line-height:1.65;color:var(--soft)}
.faq-list{max-width:760px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:20px;font-weight:400;color:var(--faint);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:640px;margin:0 0 20px;font-size:14px;line-height:1.7;color:var(--soft)}
.faq-privacy{margin-top:16px;color:#4e5a47}
.shelf-row{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -24px;padding:0 24px 6px;scroll-padding:0 24px}
.shelf-row::-webkit-scrollbar{display:none}
.shelf-row .template-card{flex:1 0 clamp(190px,17vw,240px);max-width:320px;scroll-snap-align:start} /* a short row stretches to the width */
.shelf-row .gallery-thumb{aspect-ratio:4/3;border-radius:18px} /* one shape for every row */
.shelf-row .template-name{font-size:14px}
/* Birthday: one template large and playing, with a line about it. */
.spotlight-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(24px,5vw,72px);align-items:center}
.spotlight-media{position:relative;display:block;aspect-ratio:1.45;overflow:hidden;border-radius:24px;background:#e8dcd6;box-shadow:0 30px 60px -30px #4a1f2e59}
.spotlight-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spotlight-media .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.spotlight-words{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.spotlight-line{margin:0;font-size:clamp(26px,2.8vw,38px);line-height:1.12;letter-spacing:-.035em;font-weight:500}
.spotlight-words h3{margin:10px 0 0!important;font-size:15px!important;letter-spacing:-.01em!important}
.spotlight-words .button{margin-top:10px}
.spotlight .shelf-row:not(:empty){margin-top:32px}
/* Travel: wide cards, like postcards. */
.postcards .shelf-row .template-card{flex-basis:clamp(260px,27vw,360px);max-width:420px}
.site-page.home .site-footer.wide{margin-top:0;border-top:0}
@media(max-width:760px){
 .header.over .view-nav{background:#ffffff26}
 .landing-copy{bottom:96px}
 /* The words sit on the lower part of the scene: darker there, so the scene's own lights and words don't fight them. */
 .landing-scrim{background:linear-gradient(to bottom,#0e120dcc,#0e120d00 18%,#0e120d00 34%,#0e120de0 64%,#0e120df5)}
 .landing-actions{flex-wrap:nowrap;width:100%}
 .landing-actions .button{flex:1;min-width:0;padding:0 12px;font-size:14px}
 .site-footer.wide{padding-left:16px;padding-right:16px}
 .spotlight-line{font-size:22px}
 .steps{grid-template-columns:minmax(0,1fr)}
 .how-it-works .wrap,.faq .wrap{padding-top:48px;padding-bottom:48px}
 .landing-copy h1{max-width:none}
 .landing-copy p{font-size:15px}
 .stage-label{display:none}
 .shelf-row{margin:0 -16px;padding:0 16px 6px;scroll-padding:0 16px}
 .shelf-row .template-card{flex-basis:46%}
 .postcards .shelf-row .template-card{flex-basis:78%}
 .spotlight-body{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.sequence-layer,.sequence-layer .clip,.stage-caption svg{transition:none}}

/* The Chinese site (/zh/, where the html is lang="zh-Hans"): Sora has no Chinese, so Chinese text is
   in the system's Chinese typeface, and nothing keeps the tight tracking, which crowds Chinese
   characters, except the logo. Big headings get room between lines, since Chinese fills the em box. */
html:lang(zh){--font:Sora,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
html:lang(zh) *{letter-spacing:normal!important}
html:lang(zh) .logo,html:lang(zh) .nav-toggle span{letter-spacing:-.065em!important}
html:lang(zh) .landing-copy h1{line-height:1.12!important}
/* The phone menu over the home page's scene is the same white card as everywhere else. */
@media(max-width:600px){
 .header.over .nav-toggle~.view-nav{background:#fff;border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
 .header.over .nav-toggle~.view-nav a{color:var(--ink)}
}
/* What a social scene's owner sees (scene-triggers.js): a note at the foot of the page, like the invite banner. */
.trigger-note{position:fixed;left:50%;bottom:16px;z-index:30;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 10px 30px #1822192e;transform:translateX(-50%)}
.trigger-note p{margin:0;font-size:13px;line-height:1.4}
.trigger-note-ok{flex:none;height:34px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.trigger-note-signin{flex:none;height:34px;padding:0 4px;background:none;border:0;color:var(--ink);font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.flow-route .trigger-note{bottom:82px} /* above Flow's caption and buttons */
@media(max-width:600px){.trigger-note{left:16px;right:16px;bottom:12px;width:auto;max-width:none;transform:none;padding-left:14px}.flow-route .trigger-note{bottom:calc(72px + env(safe-area-inset-bottom))}}
/* Community, signed out (community.js): the sign-in options, in place of the posts. */
/* Your profile's Activity tab (profile-page.js): who did what in your social scenes. */
.profile-tab-count.is-new{min-width:18px;padding:1px 6px;border-radius:10px;background:#e5484d;color:#fff;font-size:11px;text-align:center}
.activity-list{display:grid;gap:2px;max-width:640px}
.activity-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line)}
.activity-face{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--line);color:var(--ink);font-size:14px;font-weight:500}
.activity-face img{width:100%;height:100%;object-fit:cover}
.activity-words{min-width:0}
.activity-text{margin:0;font-size:14px;line-height:1.4}
.activity-row.is-new .activity-text{font-weight:500}
.activity-who{color:inherit;font-weight:500;text-decoration:none}
.activity-meta{margin:2px 0 0;color:var(--muted);font-size:12px}

/* Community: Everyone or Following, posts as same-size cards, and a line to what's new in your own scenes. */
.community-intro{margin:0 0 8px;font-size:15px;line-height:1.5;color:var(--soft)}
.community-intro[hidden]{display:none}
.community-intro a{color:var(--ink);font-weight:500;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.community-pulse{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;box-shadow:0 2px 10px #1822190d;transition:box-shadow .2s,transform .2s}
.community-pulse[hidden]{display:none}
.community-pulse:hover{transform:translateY(-1px);box-shadow:0 8px 22px #18221914}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#7f9a6a;box-shadow:0 0 0 0 #7f9a6a80;animation:pulse 1.8s ease-out infinite}
.pulse-go{color:var(--muted)}
@keyframes pulse{to{box-shadow:0 0 0 8px #7f9a6a00}}
.community-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:22px}
/* Discover and Following: words, not a second pill under the menu's; the one showing in ink, marked beneath. */
.community-feeds{display:flex;gap:26px}
.community-feeds button{position:relative;height:44px;padding:0;color:var(--muted);font-size:20px;font-weight:500;letter-spacing:-.03em;transition:color .18s}
.community-feeds button:hover{color:var(--ink)}
.community-feeds button[aria-selected=true]{color:var(--ink)}
.community-feeds button::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:3px;margin-left:-9px;border-radius:2px;background:var(--ink);opacity:0;transition:opacity .18s}
.community-feeds button[aria-selected=true]::after{opacity:1}
.card-save{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:50%;background:#fffffff2;color:var(--ink);box-shadow:0 4px 14px #1822191f;opacity:0;transition:opacity .2s,background .2s}
.card-save svg{width:15px;height:15px}
.scene-card:hover .card-save,.card-save:focus-visible,.card-save.is-saved{opacity:1}
.card-save.is-saved svg{fill:currentColor}
@media(hover:none){.card-save{opacity:1}}
@media(prefers-reduced-motion:reduce){.pulse-dot{animation:none}}

/* Profile: who it is in a band at the top, then tabs; Activity reads as notifications by day. */
.profile-page-head.profile-hero{gap:22px;padding:26px 28px;border-radius:var(--radius);background:linear-gradient(135deg,#fff 0%,#f0f2ea 100%);box-shadow:inset 0 0 0 1px #e3e4dd}
.profile-hero .profile-avatar{width:84px;height:84px;font-size:32px;box-shadow:0 0 0 4px #fff,0 6px 18px #1822191a}
.profile-hero .profile-counts{gap:6px 18px;margin-top:12px;font-size:13px}
@media(max-width:600px){.profile-page-head.profile-hero{padding:20px}.profile-hero .profile-avatar{width:60px;height:60px;font-size:24px}}
.activity-list{max-width:680px}
.activity-day{margin:22px 4px 4px;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.activity-feed .activity-row{position:relative;padding:12px 10px;border-radius:14px;border-bottom:0;transition:background .2s}
.activity-feed .activity-row:hover{background:#ecede7}
.activity-feed .activity-row.is-new{background:#eef3e8}
.activity-feed .activity-row.is-new::before{content:"";position:absolute;left:-6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#7f9a6a}
.activity-feed .activity-words{flex:1}
.activity-faces{position:relative;flex:none;display:flex;width:40px;height:40px}
.activity-faces .activity-face{width:40px;height:40px}
.activity-faces.is-stack .activity-face{position:absolute;width:30px;height:30px;font-size:12px;box-shadow:0 0 0 2px var(--paper)}
.activity-faces.is-stack .activity-face:first-child{top:0;left:0;z-index:1}
.activity-faces.is-stack .activity-face:nth-child(2){right:0;bottom:0}
.activity-face.is-someone{background:#dfe3d8;color:#7e8577}
.activity-cover{flex:none;width:48px;height:48px;overflow:hidden;border-radius:10px;background:#ecece7}
.activity-cover img{display:block;width:100%;height:100%;object-fit:cover}
.flow-visitors{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:500}
.flow-visitors[hidden]{display:none}
.flow-visitors:hover{border-color:#c9ccc1}
.visitors-dialog{width:min(460px,calc(100vw - 32px))}
.visitors-dialog h2{margin:0 0 8px;font-size:20px;letter-spacing:-.04em}
.visitors-body{max-height:min(60vh,520px);overflow-y:auto;margin:0 -10px}
.visitors-body .activity-day:first-child{margin-top:8px}
.visitors-body .activity-text{margin:0;color:var(--ink);font-size:14px;line-height:1.4}
.visitors-body .activity-meta{margin:2px 0 0;font-size:12px;line-height:1.4}
.visitors-body .profile-empty{margin:12px 10px 8px}
@media(max-width:600px){.profile-tabs{flex-wrap:nowrap;overflow-x:auto;gap:20px;scrollbar-width:none}.profile-tab{white-space:nowrap}}
/* Something new happened in your scenes (profile.js): a red dot on the header's profile button until you open Activity. */
.profile.has-unseen::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px var(--paper)}