/* Lumetrix Liquid Glass. Existing artwork and media are intentionally untouched. */
:root {
  --glass-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #24212c; --ink-2: #35313e; --paper: #f5f5f7;
  --text: #514d5b; --muted: #625d6d; --violet: #6448aa;
  --violet-light: #ece8f3; --line-dark: #dcd8e3;
  --glass-surface: rgba(255,255,255,.82);
  --glass-edge: rgba(255,255,255,.88);
  --glass-shadow: 0 12px 32px rgba(40,27,65,.1), inset 0 1px 0 rgba(255,255,255,.95);
  --glass-blur: blur(22px) saturate(125%);
}
body, button, input, select, textarea, h1, h2, h3, .brand, .button,
.faq-list summary, .premiere-intro h1, .premiere-process h2, .story-stats strong {
  font-family: var(--glass-font);
}
body {background:var(--paper); color:var(--ink); line-height:1.65}
h1,h2,h3 {font-weight:600; letter-spacing:-.03em}
h2,.section-heading-row h2,.frames-section h2,.story-detail-section h2,.faq-layout h2 {
  font-size:clamp(30px,3.5vw,48px); line-height:1.15; letter-spacing:-.03em;
}
::selection {background:#6448aa; color:#fff}
html {scroll-padding-top:100px; scrollbar-color:#b2a7c8 #f5f5f7}
input,textarea {caret-color:var(--violet)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible {outline:3px solid var(--violet); outline-offset:4px}
.site-header, .premiere-home .site-header {
  position:sticky; top:0; height:84px; background:transparent; border:0;
  padding:12px 20px; z-index:30; pointer-events:none;
}
.nav-shell, .premiere-home .nav-shell {
  width:min(100%,1200px); height:60px; padding:0 20px; gap:24px; pointer-events:auto;
  background:var(--glass-surface); border:1px solid var(--glass-edge);
  border-radius:32px; box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.brand,.premiere-home .brand {font-size:25px; font-weight:600; letter-spacing:-.035em; gap:9px}
.brand small,.premiere-home .brand small {font-size:12px; font-weight:400; color:var(--text)}
.brand-mark {background:#6448aa; width:21px; height:21px}
.desktop-nav,.premiere-home .desktop-nav {font-size:14px; font-weight:500; gap:22px; color:var(--text)}
.premiere-home .desktop-nav a:first-child,.premiere-home .desktop-nav a:last-child {display:inline}
.desktop-nav a:hover,.plain-link:hover {color:var(--violet)}
.nav-account {background:rgba(255,255,255,.62); color:var(--ink); border:1px solid #dfdbe6; min-height:48px; padding:10px 20px; font-weight:500; gap:12px}
.nav-account:hover {background:#ece8f3; color:var(--violet)}
.mobile-menu summary {background:rgba(255,255,255,.6); border:1px solid #dfdbe6; border-radius:50%}
.mobile-menu-panel {
  background:rgba(255,255,255,.96); border:1px solid #ece8f3; border-radius:20px;
  box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.button {font-weight:600; border-radius:28px; min-height:54px; letter-spacing:-.015em; transition:background .2s ease,box-shadow .2s ease}
.button:hover {transform:none}
.button-primary,.auth-panel .button-primary,.end-cta .button-primary {
  background:var(--violet); color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(55,35,93,.14);
}
.button-primary:hover,.auth-panel .button-primary:hover {background:#51358f; color:#fff}
.button-primary:active {background:#472c81; box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.button-ghost {background:#fff; border:1px solid #dcd8e3; color:var(--ink); box-shadow:none}
.button-ghost:hover {background:#ece8f3; color:var(--violet)}
.button:disabled {background:#e6e3eb; color:#625d6d; border-color:transparent; box-shadow:none}
.plain-link {font-weight:500}
.premiere-hero {padding:36px 0 84px; background:#e3d8f4}
.premiere-scenery {inset:-84px 0 -14px}
.premiere-scenery img {filter:none}
.premiere-intro {width:min(100% - 48px,1130px); text-align:center; padding-bottom:26px}
.premiere-intro h1 {
  font-family:var(--glass-font); font-weight:600; font-size:clamp(44px,5vw,72px);
  line-height:1.07; letter-spacing:-.035em; max-width:1000px; margin:0 auto 20px;
}
.premiere-intro>p {font-size:20px; font-weight:400; line-height:1.55; color:#514166; max-width:760px; margin:auto}
@media(min-width:761px) {
  .premiere-intro>p {
    width:fit-content; padding:8px 18px; background:rgba(255,255,255,.86);
    border-radius:20px; color:#514166;
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
}
.premiere-screen {
  width:56%; margin-top:18px; border-radius:24px; background:#fff;
  outline:1px solid rgba(255,255,255,.82); outline-offset:6px;
  box-shadow:0 18px 48px rgba(39,23,62,.18);
}
.premiere-start {
  width:min(100% - 48px,1030px); margin:32px auto 0; padding:20px 24px;
  background:var(--glass-surface); border:1px solid var(--glass-edge); border-radius:28px;
  box-shadow:var(--glass-shadow); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.premiere-start input {
  background:rgba(255,255,255,.82); border:1px solid #c9c3d3; border-radius:16px;
  color:var(--ink); font-size:17px; height:54px;
}
.premiere-start input::placeholder {color:#625d6d}
.premiere-flow {font-size:13px; color:var(--text); border-color:#dcd8e3}
.premiere-process {background:#f5f5f7; padding:64px 0 72px}
.premiere-process h2 {font-family:var(--glass-font); font-weight:600; font-size:clamp(30px,3.5vw,46px); line-height:1.15}
.process-layout {gap:56px}
.process-list h3 {font-size:20px; font-weight:600; line-height:1.25}
.process-list p {font-size:16px; color:var(--text)}
.process-count {background:#e8e3f0; color:#51358f; font-weight:600}
.prototype-note,.collection-note {color:var(--muted)}
.premiere-stories {background:#efedf3; padding:80px 0}
.premiere-story,.catalog-card {
  background:rgba(255,255,255,.88); border-radius:24px;
  box-shadow:0 12px 36px rgba(40,27,65,.08);
}
.premiere-story-copy {padding:40px}
.premiere-story-copy h3 {font-size:clamp(32px,3.3vw,45px); font-weight:600; line-height:1.12}
.premiere-story-copy p,.catalog-content p {color:var(--text)}
.premiere-story-copy .story-mood {font-size:14px; color:var(--muted)}
.premiere-care,.premiere-faq {background:var(--paper); padding:80px 0}
.premiere-care {background:#fff}
.care-layout>div>p {font-size:18px; color:var(--text)}
.faq-list summary {font-family:var(--glass-font); font-weight:500; font-size:18px}
.faq-list p {color:var(--text)}
.faq-list,.faq-list details {border-color:#dcd8e3}
.premiere-finale {background:#ece8f3; padding:72px 0}
.footer {background:#f5f5f7; color:var(--ink)}
.footer .brand,.footer .brand small {color:var(--ink)}
.footer-main p,.footer-bottom,.footer-links,.footer-legal-note {color:var(--muted)}
.footer-bottom {border-color:#dcd8e3}
.footer a:hover {color:var(--violet)}
/* Product, account and reading surfaces share the same quieter system. */
.page-hero,.story-page-hero,.auth-section,.form-page,.project-page,.account-section,
.document-page,.photo-step,.frames-section {background:var(--paper); color:var(--ink)}
.page-hero h1,.story-page-copy h1,.auth-intro h1,.account-top h1,.form-page h1,
.project-head h1,.document-page h1,.photo-step-copy h1 {
  font-size:clamp(36px,5.2vw,64px); font-weight:600; line-height:1.12; letter-spacing:-.03em;
}
.page-hero p,.story-page-copy p,.auth-intro p,.form-page-grid>div:first-child>p,
.quiet-note,.back-link,.story-stats span {color:var(--text)}
.auth-panel,.form-panel,.upload-panel,.balance-card,.photo-guidance,.soft-panel,
.project-card,.flow-notice,.flow-demo-banner {
  background:var(--glass-surface); color:var(--ink); border-radius:20px;
  box-shadow:0 8px 24px rgba(40,27,65,.06);
}
.auth-panel h2,.flow h1,.flow h2,.flow legend,.flow-details summary {font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea {color:var(--ink)}
.flow {color:var(--ink)}
.flow-steps li {background:#eae7ef; color:var(--text)}
.flow-steps [aria-current],.flow-choices input:checked+span {background:var(--violet); color:#fff}
.flow-choices span {border-color:#c9c3d3; background:#fff; border-radius:14px}
.flow input:not([type=checkbox]):not([type=radio]) {border-color:#c9c3d3; color:var(--ink)}
.pilot-moment figcaption {font-weight:500; color:var(--text)}
.legal-page {color:var(--ink)}
.legal-page h1,.legal-page h2,.legal-page h3 {font-family:var(--glass-font); font-weight:600}
.legal-page .legal-draft {background:#ece8f3; color:var(--ink)}
.account-balance {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 24px;
  padding:24px; margin:0 0 32px; background:var(--glass-surface);
  border-radius:24px; box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
}
.account-balance-main {display:flex; align-items:center; gap:16px; min-width:0}
.account-balance-main svg {color:var(--violet); flex-shrink:0}
.account-balance #balance-heading {font-size:16px; font-weight:500; color:var(--text); margin:0 0 4px; line-height:1.5}
.account-balance .account-token-count {font-size:32px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; margin:0; overflow-wrap:anywhere}
.account-token-count span {font-size:20px; font-weight:400}
.account-balance-actions {display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.account-balance-actions a {min-height:48px; display:flex; align-items:center; color:var(--violet); font-size:16px; text-decoration:underline; text-underline-offset:4px}
.account-balance .account-balance-note {grid-column:1/-1; color:var(--muted); font-size:14px; margin:0; line-height:1.6}
.account-operations {scroll-margin-top:100px}
.account-flow > p {overflow-wrap:anywhere}
.account-navigation {display:flex; gap:8px; flex-wrap:wrap; padding-top:16px; padding-bottom:0}
.account-navigation a {display:flex; align-items:center; justify-content:center; min-height:48px; padding:10px 16px; border-radius:24px; font-size:14px; color:var(--text); background:#fff}
.account-navigation a:hover,.account-navigation a[aria-current="page"] {background:var(--violet-light); color:var(--violet)}
.account-heading {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom:32px}
.account-heading h1 {margin:0 0 8px}
.account-heading p {margin:0; color:var(--muted)}
.email-address {overflow-wrap:anywhere}
.account-project-layout {display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:40px}
.account-project {display:flex; align-items:start; flex-wrap:wrap; gap:16px; padding:24px 0; border-bottom:1px solid var(--line-dark)}
.account-project img {width:72px; height:72px; border-radius:16px; object-fit:cover; flex-shrink:0}
.account-project>div {flex:1; min-width:180px}
.account-project h3 {font-size:20px; margin:0 0 8px; overflow-wrap:anywhere}
.account-project p {margin:0 0 8px; font-size:16px}
.account-project .project-version,.account-project .project-date {font-size:14px; color:var(--muted)}
.account-project .project-status {color:var(--text)}
.account-empty {padding:24px 0}
.account-empty h3 {font-size:20px; margin:0 0 12px}
.account-logout {margin-top:40px}
.character-style-groups {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:24px 0}
.character-style-group {min-width:0;padding:24px;background:var(--glass-surface);border-radius:24px;box-shadow:var(--glass-shadow)}
.character-style-group h3 {font-size:25px;margin:0 0 8px}
.character-style-group .group-description {font-size:16px;color:var(--text);margin:0 0 20px}
.character-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.candidate-cell {min-width:0}
.candidate-option {display:block;position:relative;cursor:pointer}
.candidate-option input {position:absolute;top:12px;left:12px;width:22px;height:22px;accent-color:var(--violet);z-index:1}
.candidate-option>span {display:block;border:2px solid transparent;border-radius:16px;overflow:hidden;background:white}
.candidate-option input:checked+span {border-color:var(--violet)}
.candidate-option input:focus-visible+span {outline:3px solid var(--violet);outline-offset:4px}
.candidate-image {width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:white}
.candidate-label {display:block;padding:10px 6px;font-size:14px;line-height:1.5;text-align:center;color:var(--text)}
.candidate-placeholder {aspect-ratio:1;display:grid;place-items:center;background:white;border-radius:16px;color:var(--muted);font-size:14px;text-align:center;padding:12px}
.candidate-error {font-size:14px;color:var(--text);line-height:1.6;overflow-wrap:anywhere}
.character-group-price {display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:24px;font-variant-numeric:tabular-nums}
.character-group-price strong {font-size:32px;font-weight:600;line-height:1.2}
.character-group-price span {font-size:16px;color:var(--text)}
.character-style-group .group-price-note {font-size:14px;color:var(--text);margin:12px 0 20px}
.character-style-group .button {width:100%}
.group-selection-note {font-size:14px;color:var(--text)}
.film-version-options {display:grid; gap:12px}
.flow-form .film-version-option {display:flex; flex-direction:row; align-items:start; gap:12px; padding:18px; border:1px solid var(--line-dark); border-radius:16px; background:#fff; cursor:pointer}
.film-version-option:has(input:checked) {border-color:var(--violet); background:#f1edf8}
.film-version-option:has(input:focus-visible) {outline:3px solid var(--violet); outline-offset:4px}
.film-version-option input {width:20px; height:20px; margin:4px 0 0; flex-shrink:0; accent-color:var(--violet)}
.film-version-option strong,.film-version-price,.film-version-description {display:block}
.film-version-option strong {font-size:18px; font-weight:600}
.film-version-price {font-size:20px; margin:6px 0; font-variant-numeric:tabular-nums}
.film-version-price small {font-size:14px; color:var(--text)}
.film-version-description,.version-note {font-size:14px; line-height:1.6; color:var(--text)}
.flow-form .version-note {margin-top:12px}
.story-prices {margin:24px 0}
.story-prices h2 {font-size:25px; margin:0 0 12px}
.story-prices dl {margin:0}
.story-prices dl>div {padding:12px 0; border-bottom:1px solid var(--line-dark)}
.story-prices dt {font-size:16px; font-weight:600}
.story-prices dd {font-size:20px; font-variant-numeric:tabular-nums; margin:4px 0 0}
.story-prices dd span {font-size:14px; color:var(--text)}
.story-prices p {font-size:14px; line-height:1.6; margin:12px 0}
.auth-panel .email-address {font-weight:600}
.auth-panel #code {font-variant-numeric:tabular-nums; font-size:24px; letter-spacing:.15em}
.auth-panel #code-expiry,.auth-panel [data-resend-hint] {font-size:14px; color:var(--muted); margin:0 0 12px}
.login-help {border-block:1px solid var(--line-dark); margin:24px 0 0}
.login-help summary {min-height:48px; display:flex; align-items:center; cursor:pointer; font-size:16px; font-weight:500}
.login-help p {font-size:14px; line-height:1.7; color:var(--text)}
.auth-panel [data-resend-form] {margin-top:16px}
@media(max-width:760px) {
  .account-balance {grid-template-columns:1fr; padding:20px; gap:16px; margin-bottom:24px}
  .account-balance-actions {display:grid; grid-template-columns:1fr; gap:4px}
  .account-balance-actions .button {width:100%}
  .account-balance-actions a {justify-content:center}
  .account-navigation {display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .account-navigation a {padding:10px 8px; text-align:center; font-size:14px; line-height:1.3}
  .account-project-layout {grid-template-columns:1fr; gap:32px}
  .account-heading {gap:16px}
  .account-heading .button,.account-project>.button {width:100%}
  .film-version-price small,.story-prices dd span {display:block}
  .account-flow {padding-top:24px}
  .character-style-groups {grid-template-columns:1fr;gap:24px}
  .character-style-group {padding:20px}
  .character-group-price {display:grid;gap:6px}
}
@media(prefers-reduced-transparency:reduce) {
  .account-balance {background:#faf9fc; -webkit-backdrop-filter:none; backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .account-balance {background:#faf9fc}
}
@media(max-width:1099px) {
  .desktop-nav,.premiere-home .desktop-nav {gap:14px; font-size:13px}
  .premiere-screen {width:67%}
}
@media(max-width:760px) {
  .wrap {width:calc(100% - 36px)}
  .site-header,.premiere-home .site-header {height:80px; padding:10px 12px}
  .nav-shell,.premiere-home .nav-shell {padding:0 12px; height:60px; gap:8px; border-radius:30px}
  .brand,.premiere-home .brand {font-size:22px; gap:6px}
  .brand small,.premiere-home .brand small {font-size:10px}
  .brand-mark {width:17px; height:17px}
  .nav-account {min-height:48px; padding:10px 14px; font-size:14px}
  .mobile-menu summary {width:48px; height:48px; padding:14px}
  .mobile-menu-panel {right:0; top:62px; width:min(300px,calc(100vw - 48px))}
  .mobile-menu-panel a {min-height:48px; font-weight:500}
  .premiere-hero {
    min-height:calc(100vh - 80px); min-height:calc(100svh - 80px);
    padding:24px 0 28px; gap:24px;
  }
  .premiere-scenery {inset:0}
  .premiere-intro {width:calc(100% - 36px); padding:0}
  .premiere-intro h1 {font-size:clamp(32px,8.9vw,44px); line-height:1.12; font-weight:600; margin-bottom:16px}
  .premiere-intro>p {font-size:16px; font-weight:400; line-height:1.55; max-width:35ch}
  .premiere-video-stage .premiere-screen {width:calc(100% - 44px); border-radius:20px}
  .premiere-start {width:calc(100% - 36px); padding:18px; border-radius:24px; margin:0 auto}
  .premiere-start input {font-size:16px}
  .premiere-start .button {min-height:54px}
  .premiere-flow {font-size:13px}
  .premiere-process,.premiere-stories,.premiere-care,.premiere-faq {padding:48px 0}
  .process-layout {gap:22px}
  .premiere-process h2,h2,.faq-layout h2,.frames-section h2 {font-size:31px; line-height:1.16}
  .process-list {gap:28px}
  .process-list h3 {font-size:20px}
  .premiere-story-copy {padding:28px 24px}
  .premiere-story-copy h3 {font-size:34px}
  .premiere-story-copy p {font-size:16px}
  .premiere-finale {padding:48px 0}
  .premiere-finale h2 {font-size:31px}
  .care-layout>div>p {font-size:16px}
  .footer .brand {font-size:23px}
  .page-hero h1,.story-page-copy h1,.auth-intro h1,.account-top h1,.form-page h1,
  .project-head h1,.document-page h1,.photo-step-copy h1 {font-size:36px}
}
@media(max-width:360px) {
  .brand,.premiere-home .brand {font-size:20px}
  .brand small {display:none}
  .nav-shell,.premiere-home .nav-shell {padding:0 8px}
  .nav-account {padding:10px 12px}
  .premiere-intro h1 {font-size:30px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .nav-shell,.premiere-home .nav-shell,.premiere-start,.mobile-menu-panel {background:#faf9fc}
}
@media(prefers-reduced-transparency:reduce) {
  .nav-shell,.premiere-home .nav-shell,.premiere-start,.mobile-menu-panel {
    background:#faf9fc; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation:none!important; transition:none!important}
}