@charset "UTF-8";
@font-face {
  font-family:Oswald;
  src:url('/web/fonts/oswald/Oswald-Variable.ttf') format('truetype');
  font-weight:200 700;
  font-style:normal;
  font-display:swap;
}
:root {
  color-scheme:dark;
  --bg:#111123;
  --panel:#1c1932;
  --panel-raised:#29243e;
  --line:#c8b8f425;
  --text:#f5f0ff;
  --muted:#b7abc9;
  --pink:#ffa9c8;
  --peach:#fff3b0;
  --lavender:#c8b8f4;
  --radius:18px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:Oswald,"Arial Narrow",sans-serif;
  --sidebar:240px;
  --heading-size:clamp(38px,4.8vw,64px);
  --body-size:clamp(16px,1.3vw,18px);
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text); font:400 var(--body-size)/1.65 var(--font); -webkit-font-smoothing:antialiased }
button,input,a { -webkit-tap-highlight-color:transparent }
button,input { font:inherit }
button,a { touch-action:manipulation }
button { cursor:pointer; color:inherit; border:0 }
button:disabled { cursor:not-allowed }
a { color:inherit; text-decoration:none }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--peach); outline-offset:5px }
img { display:block; max-width:100% }
h1,h2,h3,p { margin:0 }
button,svg { flex-shrink:0 }
[hidden] { display:none!important }
::selection { background:var(--pink); color:var(--bg) }
.icon-library { position:absolute; width:0; height:0; overflow:hidden }
.icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none }
.tropical-ribbon {
  position:absolute; top:0; left:0; right:0; height:24px; z-index:25; pointer-events:none;
  background:linear-gradient(90deg,#c8a6d9a8,#ffb5bca8,#bf9bd9a8),url('/v1/styles/tropical-sunset/background') center 24%/cover;
  background-blend-mode:screen;
}
.skip-link { position:fixed; top:-90px; left:16px; z-index:100; padding:14px 20px; background:var(--peach); color:var(--bg); border-radius:8px }
.skip-link:focus { top:30px }
.gradient-text { color:var(--lavender) }
.wordmark { display:flex; align-items:center; width:230px; max-width:100%; line-height:1 }
.brand-logo { width:100%; height:auto }
.button {
  min-height:54px; padding:15px 24px; display:inline-flex; justify-content:center; align-items:center; gap:10px;
  border-radius:100px; font-size:var(--body-size); font-weight:650; line-height:1.4;
  transition:background .18s,color .18s,transform .18s;
}
.button-primary { min-height:56px; padding:16px 26px; font:600 var(--body-size)/1.5 var(--display); text-transform:uppercase; white-space:normal; background:var(--pink); color:#20162b }
.button-primary:active:not(:disabled) { transform:translateY(0); background:#ff9fc2 }
.button>span { min-width:0; overflow-wrap:anywhere }
.button-primary:hover:not(:disabled) { background:#ffc3d9; transform:translateY(-1px) }
.button-primary:disabled { background:#363047; color:#c0b5cb }
.button-secondary { background:#c8b8f40a; border:1px solid #c8b8f44a; color:var(--lavender) }
.button-secondary:hover:not(:disabled) { background:#c8b8f41a }
.icon-button { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border-radius:50%; color:var(--lavender); transition:background .18s }
.icon-button:hover { background:#c8b8f41a }
.bordered { border:1px solid var(--line) }
.text-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:transparent; color:var(--pink); font-size:var(--body-size); font-weight:600; padding:10px 4px; text-underline-offset:5px }
.text-button:hover { text-decoration:underline }
.spinner { width:22px; height:22px; display:inline-block; border:2px solid #c8b8f435; border-top-color:var(--pink); border-radius:50%; animation:spin 1s linear infinite; flex:none }
@keyframes spin { to { transform:rotate(360deg) } }

/* Welcome: display headings and two shared text scales. */
.welcome-page { --welcome-heading:var(--heading-size); --welcome-text:var(--body-size); font:400 var(--welcome-text)/1.65 var(--font) }
.welcome-screen { position:relative; min-height:min(780px,100svh); overflow:hidden; background:var(--bg); display:flex; flex-direction:column; padding:44px 7vw 72px }
.welcome-art,.welcome-shade { position:absolute; inset:0; pointer-events:none }
.welcome-art { left:40%; background:url('/media/welcome') center 24%/cover no-repeat; mask-image:linear-gradient(90deg,transparent,#000 30%) }
.welcome-shade { background:linear-gradient(90deg,#111123 0%,#111123ed 30%,#11112380 58%,#11112310),linear-gradient(0deg,#111123b0,transparent 40%) }
.welcome-header { position:relative; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; z-index:3 }
.welcome-header .wordmark { width:210px; transition:opacity .2s,transform .3s,visibility 0s }
/* Fixed globe anchor; the capsule expands left without moving the header. */
.welcome-language-picker { position:relative; flex:none; width:48px; height:48px; isolation:isolate; --language-ease:cubic-bezier(.22,1,.36,1) }
.welcome-language-picker::before { content:""; position:absolute; top:0; right:0; width:48px; height:48px; border:1px solid #c8b8f43a; border-radius:100px; background:#1c1932f5; pointer-events:none; transition:width .36s var(--language-ease),box-shadow .36s }
.welcome-language-picker.is-open::before { width:276px; box-shadow:0 8px 28px #0003 }
.welcome-language-toggle { position:relative; z-index:1; width:48px; height:48px; border:1px solid transparent; background:transparent }
.welcome-language-toggle:hover,.welcome-language-toggle[aria-expanded="true"] { background:#c8b8f414 }
.welcome-languages { position:absolute; top:2px; right:52px; display:flex; width:220px; height:44px; visibility:hidden; opacity:0; transform:translateX(8px); clip-path:inset(0 0 0 100% round 24px); pointer-events:none; transition:clip-path .36s var(--language-ease),transform .36s var(--language-ease),opacity .2s,visibility 0s .36s }
.welcome-language-picker.is-open .welcome-languages { visibility:visible; opacity:1; transform:translateX(0); clip-path:inset(0 0 0 0 round 24px); pointer-events:auto; transition-delay:0s }
.welcome-languages button { width:44px; min-height:44px; padding:6px 0; font:inherit; line-height:1.4; border-radius:100px; color:var(--lavender); background:transparent; transition:background .18s,color .18s }
.welcome-languages button:focus-visible { outline-offset:-3px; outline-width:2px }
.welcome-languages button:hover { background:#c8b8f41a }
.welcome-languages button[aria-pressed="true"] { background:var(--lavender); color:var(--bg) }
.welcome-copy { position:relative; width:52%; max-width:560px; margin-block:auto; padding-top:80px; z-index:1 }
.welcome-heading { font:450 var(--welcome-heading)/1.12 var(--display); letter-spacing:normal; text-transform:none; text-wrap:balance; color:var(--peach); overflow-wrap:break-word }
.welcome-description { font:inherit; max-width:490px; color:#e2dbe9; margin-top:24px }
.welcome-page .welcome-continue { width:310px; max-width:100%; justify-content:space-between; min-height:56px; padding:16px 26px; font:600 var(--welcome-text)/1.5 var(--display); text-transform:uppercase; white-space:normal; text-align:left }
.welcome-copy>.welcome-continue { margin-top:32px }

/* Two fixed layers; the divider reveals the original without moving either photo. */
.comparison-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); align-items:center; gap:clamp(40px,7vw,100px); max-width:1180px; margin:auto; padding:88px 40px 100px; border-top:1px solid var(--line) }
.comparison-copy>p { font:inherit; color:var(--muted); max-width:400px; margin-top:24px }
.comparison-figure { margin:0; min-width:0 }
.comparison-frame { --split:50%; position:relative; width:100%; aspect-ratio:9/16; overflow:hidden; border:1px solid #c8b8f444; border-radius:24px; background:var(--panel); isolation:isolate; box-shadow:0 18px 65px #0004 }
.comparison-image { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; user-select:none; pointer-events:none }
/* Registration for this example: align eyes, waist and boots with the original.
   Keep the uncropped artwork wider than the frame so shifting it leaves no gap.
   Percentages preserve the alignment at every responsive frame size. */
.comparison-after { inset:auto; top:-2.2%; left:-11.7%; width:118.51852%; height:102.2%; object-fit:fill }
.comparison-before { clip-path:inset(0 calc(100% - var(--split)) 0 0) }
.comparison-labels { position:absolute; inset:16px 16px auto; display:flex; justify-content:space-between; gap:12px; pointer-events:none }
.comparison-labels span { padding:5px 12px; border:1px solid #fff4; border-radius:100px; background:#111123e6; color:#fff; font:inherit }
.comparison-divider { position:absolute; top:0; bottom:0; left:var(--split); width:2px; transform:translateX(-50%); background:#fff3b0; pointer-events:none; box-shadow:0 0 8px #0006 }
.comparison-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; display:grid; place-items:center; border:3px solid #fff8; border-radius:50%; background:var(--pink); color:#20162b; box-shadow:0 4px 20px #0005 }
.comparison-handle svg { width:28px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.comparison-range { position:absolute; inset:0; margin:0; width:100%; height:100%; opacity:0; cursor:ew-resize; touch-action:pan-y }
.comparison-frame:has(.comparison-range:focus-visible) { outline:3px solid var(--peach); outline-offset:6px }
.welcome-page .comparison-figure>.button { width:100%; margin-top:24px }
@media(max-width:700px) {
  .welcome-page { --welcome-heading:clamp(36px,8.8vw,48px); --welcome-text:16px }
  .welcome-screen { min-height:0; padding:32px 24px 48px }
  .welcome-header { gap:16px }
  .welcome-header .wordmark { width:170px }
  .welcome-art { left:0; background-position:62% top; background-size:cover; mask-image:none }
  .welcome-shade { background:linear-gradient(0deg,#111123 4%,#111123f7 30%,#111123bd 50%,#11112320 80%) }
  .welcome-copy { width:100%; max-width:none; margin:0; padding-top:230px }
  .welcome-description { margin-top:20px }
  .welcome-page .welcome-continue { width:100% }
  .welcome-copy>.welcome-continue { margin-top:28px }
  .comparison-section { grid-template-columns:minmax(0,1fr); gap:28px; padding:48px 24px }
  .comparison-copy>p { margin-top:20px; max-width:100% }
  .comparison-figure { width:100%; max-width:420px; justify-self:center }
  .comparison-frame { border-radius:18px }
}
@media(max-width:520px) {
  .welcome-header:has(.welcome-language-picker.is-open) .wordmark { opacity:0; visibility:hidden; transform:translateX(-8px); transition-delay:0s,0s,.2s }
}

/* Token offer. The skip action remains visible before the packages. */
.offer-screen { position:relative; isolation:isolate; min-height:100svh; background:var(--bg); padding:155px 6vw 64px; display:flex; justify-content:center }
.offer-art { position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#111123 0%,#111123ef 35%,#11112388),url('/media/tokens') center/cover no-repeat }
.offer-header { z-index:3; position:absolute; top:46px; left:6vw; right:6vw; display:flex; justify-content:space-between; align-items:center }
.offer-header .wordmark { width:200px }
.offer-header .icon-button { background:var(--panel-raised) }
.offer-content { width:850px; max-width:100%; text-align:center }
.offer-content h1 { font:450 var(--heading-size)/1.12 var(--display); text-transform:none; color:var(--peach); max-width:780px; margin:auto }
.offer-skip-top { margin-top:18px; color:var(--text) }
.generation-price { display:flex; justify-content:center; align-items:center; gap:10px; color:var(--lavender); font-size:var(--body-size); margin:25px 0 20px }
.token-packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.token-package { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; border:1px solid var(--line); border-radius:var(--radius); background:#1c1932e8; padding:30px 20px 22px; text-align:center }
.token-package.popular { border-color:#ffa9c875; background:#302239 }
.token-package>.icon { color:var(--pink); width:22px; height:22px; margin-bottom:8px }
.package-amount { font:500 52px/1.2 var(--display); color:var(--peach) }
.package-unit { font-size:var(--body-size); color:var(--muted) }
.package-price { font-size:22px; font-weight:650; margin-top:12px }
.package-purchase { margin-top:12px; min-height:44px; width:100%; font-size:var(--body-size); background:#c8b8f40c; border:1px solid var(--line); border-radius:100px; color:var(--muted) }
.purchase-note { font-size:var(--body-size); color:var(--muted); text-align:center; margin-top:20px }
.offer-content>.button { width:380px; max-width:100%; margin-top:25px; justify-content:space-between }

/* Application shell. */
.app-shell { min-height:100svh; background:radial-gradient(ellipse at 55% 0,#60405f3d,transparent 650px),var(--bg) }
.sidebar { position:fixed; inset:24px auto 0 0; width:var(--sidebar); z-index:20; display:flex; flex-direction:column; padding:32px 22px 16px; background:#141426; border-right:1px solid #c8b8f412 }
.app-wordmark { width:100%; max-width:190px }
.main-nav { margin-top:35px; display:flex; flex-direction:column; gap:7px }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:10px 12px; border-radius:14px; background:transparent; color:var(--lavender); font:500 var(--body-size)/1.4 var(--font); text-transform:none; text-align:left; transition:background .18s,color .18s }
.nav-item>.icon { width:21px; height:21px }
.nav-item:hover { background:#c8b8f409; color:var(--text) }
.nav-item.is-active { color:var(--pink); background:#ffa9c814 }
.nav-indicator { display:none; margin-left:auto; width:5px; height:5px; background:var(--peach); border-radius:50% }
.nav-item.is-active .nav-indicator { display:none }
.sidebar-poster { margin-top:auto; padding-top:32px }
.sidebar-scene { height:126px; border-radius:60px 60px 8px 8px; opacity:.65; background:linear-gradient(0deg,#14142680,#14142600),url('/v1/styles/tropical-sunset/background') 8% center/cover }
.poster-link { display:flex; align-items:center; justify-content:space-between; min-height:48px; gap:12px; width:100%; margin-top:14px; padding:8px 2px; background:transparent; color:var(--lavender); font-size:var(--body-size) }
.poster-link .icon { width:18px; height:18px }
.sidebar-footer { display:flex; align-items:center; gap:7px; min-height:44px; margin-top:8px; color:var(--muted); font-size:var(--body-size) }
.sidebar-footer .icon-button { margin-left:auto; width:44px; height:44px }
.sidebar-footer .icon { width:17px; height:17px }
.connection-dot { width:6px; height:6px; background:#9bc5b3; border-radius:50%; flex:none }
.connection-dot.is-offline { background:#ffc496 }
.main-content { margin-left:var(--sidebar); padding:24px clamp(28px,3.6vw,60px) 0; min-height:100svh; outline:none }
.app-topbar { position:relative; z-index:3; min-height:90px; display:flex; align-items:center; gap:18px; max-width:1200px; margin:0 auto 34px; border-bottom:1px solid var(--line) }
.mobile-wordmark { transition:opacity .2s,visibility 0s; display:none; width:150px; flex-shrink:0 }
.balance-pill { transition:opacity .2s,background .18s,visibility 0s; margin-left:auto; display:flex; align-items:center; gap:9px; min-height:44px; padding:6px 8px 6px 16px; font-size:var(--body-size); font-weight:650; background:#c8b8f40d; border:1px solid #c8b8f43b; border-radius:100px; color:var(--text) }
.balance-pill>.icon { width:18px; height:18px; color:var(--peach) }
.balance-pill-label { font-size:var(--body-size); font-weight:400; color:var(--muted) }
.balance-pill-plus { display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:var(--panel-raised); border-radius:50%; color:var(--pink); font-size:22px; font-weight:400 }
.balance-pill:hover { background:#c8b8f41a }
.page { max-width:1200px; margin:auto; animation:reveal .22s ease-out; min-width:0 }
.page-intro { max-width:850px; margin-bottom:28px }
.page-intro h1,.page-heading h1 { font:450 var(--heading-size)/1.12 var(--display); text-transform:none; letter-spacing:normal; text-wrap:balance; overflow-wrap:break-word; color:var(--peach) }
.page-intro>p { color:var(--muted); font-size:var(--body-size); line-height:1.7; margin-top:20px; max-width:620px }
.main-content:has(#page-create:not([hidden])) .app-topbar { max-width:1100px; min-height:72px; margin-bottom:24px }
.create-page { --create-visual-height:clamp(280px,23vw,320px); --create-footer-height:72px; max-width:1100px; padding-bottom:32px }
.create-page .page-intro { margin-bottom:24px }
.create-page .page-intro h1 { font-size:clamp(32px,3.2vw,44px); line-height:1.15 }
.create-page .page-intro>p { margin-top:8px; line-height:1.5 }
.create-page .section-heading { min-height:32px; margin-bottom:12px }
.create-page .section-heading h2 { font-size:clamp(22px,2vw,26px) }
.create-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start }
.photo-column,.styles-column { min-width:0 }
.section-heading { flex-wrap:wrap; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; margin-bottom:16px }
.section-heading>div { display:flex; align-items:center; gap:12px; min-width:0 }
.section-heading h2 { font:450 clamp(24px,2.6vw,30px)/1.25 var(--display); color:var(--peach) }
.upload-zone { position:relative; overflow:hidden; border:1px solid #c8b8f43b; border-radius:var(--radius); background:#19182d; transition:border-color .18s,background .18s }
.upload-zone.has-photo { border-style:solid; border-color:var(--line) }
.upload-zone.is-dragging { border-color:var(--peach); background:#3b304b; outline:3px solid #fff3b04a; outline-offset:3px }
.upload-empty { position:relative; text-align:center }
.upload-prompt { min-height:var(--create-visual-height); display:flex; align-items:center; justify-content:center; flex-direction:column; padding:24px 16px }
.upload-symbol { position:relative; display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:16px; color:var(--lavender) }
.upload-symbol>.icon { width:36px; height:36px }
.upload-symbol>span { position:absolute; right:3px; bottom:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--lavender); color:var(--bg); font-weight:700; font-size:var(--body-size) }
.upload-empty p { max-width:320px; font-size:var(--body-size); color:var(--muted); line-height:1.5; margin:0 0 16px }
.upload-empty .button { min-height:48px; max-width:100%; padding:12px 24px; font-size:var(--body-size); background:#c8b8f40b; border-color:#c8b8f470; color:var(--lavender) }
.upload-empty .button:hover:not(:disabled) { background:#c8b8f41c; border-color:var(--lavender) }
.upload-empty .button:active:not(:disabled) { background:#c8b8f430 }
.upload-formats { display:flex; align-items:center; justify-content:center; min-height:var(--create-footer-height); padding:16px; border-top:1px solid var(--line); font-size:var(--body-size); color:var(--muted); line-height:1.5 }
.upload-selected { position:relative; background:#10101e }
.upload-selected>img { width:100%; height:var(--create-visual-height); object-fit:contain }
.photo-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; min-height:var(--create-footer-height); padding:12px; border-top:1px solid var(--line); background:var(--panel) }
.photo-control { display:flex; flex:1; align-items:center; justify-content:center; gap:6px; min-height:44px; border-radius:100px; padding:8px 10px; background:#c8b8f410; color:var(--text); font-size:var(--body-size) }
.photo-control:hover:not(:disabled) { background:#c8b8f424 }
.photo-control:active:not(:disabled) { background:#c8b8f438 }
.photo-control:disabled { opacity:.55 }
.photo-control.remove-photo { color:var(--pink) }
.photo-control .icon { width:18px; height:18px }
.photo-loading { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:#1c1932f2; text-align:center }
.photo-loading strong { font-size:18px }
.photo-loading>span:last-child { font-size:var(--body-size); color:var(--muted) }
.photo-file-detail { color:var(--muted); font-size:var(--body-size); line-height:1.5; margin-top:12px; overflow-wrap:anywhere }
.photo-help-anchor { position:relative; flex:none; width:44px; height:28px }
.photo-help-toggle { position:absolute; top:50%; right:0; transform:translateY(-50%) }
.photo-help-toggle>.icon { width:20px; height:20px }
.photo-help-toggle[aria-expanded="true"] { background:#c8b8f41c; color:var(--peach) }
.photo-guidance { position:fixed; z-index:60; width:360px; max-width:calc(100vw - 24px); overflow-y:auto; overscroll-behavior:contain; padding:20px; border:1px solid #c8b8f459; border-radius:18px; background:#211d35; box-shadow:0 12px 32px #0005; font:400 16px/1.5 var(--font); color:var(--text); animation:photo-guide-in .16s ease-out }
.photo-guidance h3 { margin:0 0 8px; font:450 24px/1.25 var(--display); color:var(--peach) }
.photo-guidance>p,.photo-guidance li { color:var(--muted) }
.photo-guide-examples { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 }
.photo-guide-examples figure { margin:0; min-width:0 }
.photo-guide-illustration { display:block; width:100%; height:116px }
.photo-guide-examples figcaption { display:flex; align-items:flex-start; justify-content:center; gap:6px; margin-top:8px; text-align:center; line-height:1.4; color:var(--lavender) }
.photo-guide-examples figcaption>.icon { width:18px; height:18px; margin-top:2px; color:#8be0ac }
.photo-guide-examples figcaption>span { min-width:0; overflow-wrap:anywhere }
.photo-guidance ul { padding-left:18px; margin:0 }
.photo-guidance li+li { margin-top:8px }
.photo-guidance li::marker { color:var(--lavender) }
.guide-frame { fill:#151426; stroke:#c8b8f44d }
.guide-crop { fill:none; stroke:var(--lavender); stroke-width:1.5; opacity:.6 }
.guide-shadow { fill:#c8b8f41a }
.guide-shirt { fill:var(--lavender) }
.guide-trousers { fill:#9877b9 }
.guide-skin { fill:#ffcfb1 }
.guide-skin-line { fill:none; stroke:#ffcfb1; stroke-width:7; stroke-linecap:round }
.guide-hair,.guide-shoes { fill:#554666 }
.guide-waist-line { fill:none; stroke:var(--pink); stroke-width:2; stroke-dasharray:4 3 }
@keyframes photo-guide-in { from { opacity:0 } to { opacity:1 } }
.photo-error { margin-top:12px; color:#ffc0ca; font-size:var(--body-size); padding:12px 14px; background:#ff839d10; border-left:2px solid var(--pink); border-radius:4px }
.generation-panel { grid-column:1 / -1; min-width:0; border-top:1px solid var(--line); padding-top:16px }
.generation-action-bar { display:flex; align-items:center; justify-content:space-between; gap:24px }
.generation-action-copy { display:flex; flex:1; flex-wrap:wrap; align-items:baseline; gap:8px 16px; min-width:0 }
.generation-cost { color:var(--text); font-size:var(--body-size) }
.generation-action-copy>.generation-cost { white-space:nowrap }
.generate-button { min-width:240px; max-width:100%; gap:12px }
.generate-button>.icon { width:19px; height:19px }
.generate-help { font-size:var(--body-size); color:var(--muted); line-height:1.45; overflow-wrap:anywhere }
.generation-panel>.photo-error,.generation-panel>.generation-status,.generation-panel>.pending-actions { margin:0 0 16px }
.style-card { position:relative; width:100%; height:var(--create-visual-height); touch-action:pan-y pinch-zoom; user-select:none; cursor:grab; background:var(--panel); overflow:hidden }
.style-card>img { pointer-events:none; width:100%; height:100%; object-fit:cover }
.style-name { flex:1; min-width:0; display:block; font:450 clamp(20px,1.8vw,24px)/1.3 var(--display); overflow-wrap:anywhere; hyphens:auto; color:var(--lavender) }
.style-check { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; background:#11112370; border:1px solid #eee5ff90; display:flex; align-items:center; justify-content:center }
.style-check .icon { width:17px; height:17px; opacity:0; stroke-width:2.5 }
.style-card.is-selected .style-check { background:var(--pink); border-color:var(--pink); color:var(--bg) }
.style-card.is-selected .style-check .icon { opacity:1 }
.style-card img.broken-image { opacity:.1 }
.styles-placeholder { min-height:calc(var(--create-visual-height) + var(--create-footer-height) + 2px); display:flex; align-items:center; justify-content:center; gap:12px; padding:24px; color:var(--muted); border:1px solid var(--line); border-radius:var(--radius) }

.style-carousel { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel) }
.style-carousel.is-selected { border-color:#ffa9c899 }
.style-card:active { cursor:grabbing }
.style-card[aria-disabled="true"] { cursor:default }
.style-card:focus-visible { outline-offset:-4px }
.style-carousel-footer { display:flex; align-items:center; gap:12px; min-height:var(--create-footer-height); padding:12px 16px; border-top:1px solid var(--line) }
.style-carousel-controls { display:flex; flex:none; align-items:center; gap:4px }
.style-arrow { width:44px; height:44px; background:#c8b8f40b; border:1px solid #c8b8f445; color:var(--lavender) }
.style-arrow:hover:not(:disabled) { background:#c8b8f424; border-color:var(--lavender) }
.style-arrow:active:not(:disabled) { background:#c8b8f438 }
.style-arrow:disabled { opacity:.4 }
.style-arrow:focus-visible { outline-offset:2px }
.style-previous>.icon { transform:rotate(180deg) }
.style-position { min-width:44px; text-align:center; font-size:var(--body-size); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--muted) }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }

.connection-banner { display:flex; align-items:center; gap:12px; padding:14px 18px; margin:0 auto 28px; max-width:1200px; border:1px solid #fff3b035; border-radius:12px; background:#fff3b009; color:#f1ddb8; font-size:var(--body-size) }
.connection-banner>span { flex:1; min-width:0 }
.connection-banner .text-button { margin-left:auto; white-space:nowrap; font-size:var(--body-size) }
.generation-status { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:16px; background:#c8b8f40b; border-left:2px solid var(--lavender); border-radius:6px }
.generation-status strong { font-size:var(--body-size); font-weight:600 }
.generation-status p { font-size:var(--body-size); color:var(--muted); margin-top:5px; line-height:1.7 }
.generation-status .spinner { margin-top:3px }
.pending-actions { display:flex; flex-direction:column; gap:5px; margin-top:15px }
.pending-actions .button { font-size:var(--body-size) }

/* Gallery, balance and results. */
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px }
.gallery-label { display:flex; align-items:center; gap:10px; padding:16px 0; margin-bottom:6px; border-bottom:1px solid var(--line); color:var(--muted); font-size:var(--body-size); letter-spacing:normal }
.gallery-label .icon { width:19px; height:19px }
.gallery-label span { margin-left:0; font-size:var(--body-size); letter-spacing:0; color:var(--muted) }
.gallery-label span:empty { display:none }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px }
.gallery-item { position:relative; aspect-ratio:1; background:var(--panel); overflow:hidden; border:0; padding:0; display:block; min-width:0 }
.gallery-item>img { width:100%; height:100%; object-fit:cover; transition:transform .3s }
.gallery-item:hover>img { transform:scale(1.03) }
.gallery-hover { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#11112350; opacity:0; transition:opacity .18s }
.gallery-item:hover .gallery-hover,.gallery-item:focus-visible .gallery-hover { opacity:1 }
.gallery-item:focus-visible { z-index:1; outline-offset:-5px }
.gallery-image-error { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; text-align:center; color:var(--muted); font-size:var(--body-size) }
.gallery-test-label { position:absolute; top:7px; left:7px; padding:3px 7px; color:var(--peach); background:#111123e0; font-size:var(--body-size); border-radius:4px }
.gallery-activity:empty { display:none }
.gallery-activity { display:grid; gap:10px; margin:20px 0 }
.activity-row { display:flex; align-items:center; gap:14px; padding:16px; background:var(--panel); border-radius:12px }
.activity-row>div { flex:1; min-width:0 }
.activity-row strong { font-size:var(--body-size); font-weight:550 }
.activity-row p { color:var(--muted); font-size:var(--body-size); margin-top:4px }
.activity-row time { color:var(--muted); font-size:var(--body-size); white-space:nowrap }
.empty-state { padding:70px 20px; text-align:center }
.empty-symbol { width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; color:var(--lavender); background:var(--panel); border-radius:50%; margin-bottom:25px }
.empty-symbol .icon { width:28px; height:28px }
.empty-state h2 { font:450 34px/1.3 var(--display); color:var(--peach) }
.empty-state p { max-width:370px; font-size:var(--body-size); color:var(--muted); margin:15px auto 26px }
.gallery-error { padding:24px 0; color:var(--pink); font-size:var(--body-size) }
.load-more { display:flex; margin:28px auto 0; min-width:190px }
.balance-card { position:relative; isolation:isolate; overflow:hidden; padding:36px; min-height:260px; border-radius:var(--radius); background:var(--panel) }
.balance-card p { font-size:var(--body-size); color:#e4d9ed }
.balance-card-art { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#1c1932 10%,#1c1932d0 45%,#1c193250),url('/media/tokens') center 44%/cover }
.balance-total { display:flex; align-items:center; gap:14px; margin:12px 0 }
.balance-total>.icon { color:var(--pink); width:30px; height:30px }
.balance-total strong { font:500 86px/1.1 var(--display); color:var(--peach) }
.balance-total>span { color:var(--lavender); font-size:var(--body-size); align-self:flex-end; margin-bottom:8px }
.balance-card .balance-equivalent { color:var(--lavender); font-size:var(--body-size) }
.balance-shop { margin-top:38px }
.balance-shop .token-packages { margin-top:22px }
.balance-note { display:flex; align-items:flex-start; gap:14px; padding:24px 0; margin-top:28px; border-top:1px solid var(--line) }
.balance-note>.icon { color:var(--lavender); margin-top:3px }
.balance-note strong { font-size:var(--body-size); font-weight:600 }
.balance-note p { color:var(--muted); font-size:var(--body-size); max-width:650px; margin-top:8px }
.about-link { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:54px; padding:12px 0; background:transparent; border-top:1px solid var(--line); color:var(--lavender); font-size:var(--body-size) }
.about-link>span { display:flex; align-items:center; gap:10px }
.result-dialog { padding:0; background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:22px; max-width:1120px; width:calc(100% - 48px); max-height:calc(100svh - 48px); overflow:auto; overscroll-behavior:contain }
.result-dialog::backdrop { background:#080813eb; backdrop-filter:blur(8px) }
.result-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) }
.result-image-wrap { display:flex; align-items:center; justify-content:center; position:relative; background:#090914; min-height:400px }
.result-image-wrap>img { width:100%; max-height:calc(100svh - 50px); object-fit:contain }
.result-image-error { display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px; text-align:center; color:var(--muted) }
.result-copy { position:relative; padding:74px 34px 36px; display:flex; flex-direction:column; justify-content:center }
.result-close { position:absolute; top:15px; right:16px; background:var(--panel-raised) }
.result-copy h2 { font:450 var(--heading-size)/1.12 var(--display); color:var(--peach); text-transform:none; overflow-wrap:break-word }
.result-location { display:flex; align-items:center; gap:8px; font-size:var(--body-size); color:var(--lavender); margin-top:24px }
.result-date { font-size:var(--body-size); color:var(--muted); margin:8px 0 28px }
.result-copy>.button { width:100%; margin-top:10px }
.result-copy>.text-button { margin-top:14px }
.test-badge { color:var(--peach); font-size:var(--body-size); letter-spacing:normal; margin-bottom:10px }
.toast-region { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:100; width:max-content; max-width:min(560px,calc(100% - 32px)); padding:15px 20px; color:var(--text); background:#30283ff5; border:1px solid #c8b8f44d; border-radius:14px; box-shadow:0 10px 30px #0003; font-size:var(--body-size); opacity:0; pointer-events:none; transition:opacity .18s }
.toast-region.is-visible { opacity:1 }
.noscript { position:fixed; bottom:0; left:0; right:0; background:var(--peach); color:var(--bg); padding:20px; text-align:center; z-index:200 }
@keyframes reveal { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:none } }

/* At tablet widths navigation becomes a compact bottom bar. */
@media(min-width:1440px) {
  :root { --sidebar:248px }
  .sidebar { padding-inline:28px }
}
@media(max-width:1100px) {
  :root { --sidebar:224px }
  .sidebar { padding-inline:16px }
  .nav-item { gap:9px; padding-inline:8px }
  .sidebar-footer { gap:5px; font-size:var(--body-size) }
  .main-content { padding-inline:28px }
  .create-layout { gap:24px }
  .generate-button { flex-wrap:wrap }
}
@media(max-width:900px) {
  .sidebar { inset:auto auto max(12px,env(safe-area-inset-bottom)) 50%; transform:translateX(-50%); width:350px; max-width:calc(100% - 32px); padding:6px; background:#252139f5; border:1px solid #c8b8f43a; border-radius:100px; box-shadow:0 8px 30px #0004 }
  .sidebar>.wordmark,.sidebar-poster,.sidebar-footer { display:none }
  .main-nav { margin:0; flex-direction:row; gap:4px }
  .nav-item { flex:1; width:auto; min-width:0; min-height:56px; flex-direction:column; justify-content:center; gap:3px; padding:6px; border-radius:100px; font:500 var(--body-size)/1.35 var(--font); text-align:center; overflow-wrap:break-word; text-transform:none }
  .nav-item>.icon { width:22px; height:22px }
  .nav-item.is-active { color:var(--pink); background:#ffa9c814 }
  .nav-item.is-active .nav-indicator { display:none }
  .main-content { margin-left:0; padding:24px 32px calc(100px + env(safe-area-inset-bottom)) }
  .app-topbar { position:relative; z-index:3; min-height:90px; margin-bottom:30px }
  .mobile-wordmark { display:block; width:160px }
  .page-intro h1 { font-size:var(--heading-size) }
  .section-heading h2 { font-size:23px }
  .toast-region { bottom:calc(100px + env(safe-area-inset-bottom)) }
  .result-copy { padding-inline:25px }
  .result-copy h2 { font-size:40px }
}
@media(max-width:650px) {
  .tropical-ribbon { height:16px }
  .main-content { padding:16px 20px calc(100px + env(safe-area-inset-bottom)) }
  .app-topbar { min-height:88px; margin-bottom:26px }
  .mobile-wordmark { width:146px }
  .balance-pill { padding-left:12px; gap:7px; font-size:var(--body-size) }
  .balance-pill-label { display:none }
  .balance-pill>.icon { width:16px; height:16px }
  .balance-pill-plus { width:27px; height:27px }
  .page-intro { margin-bottom:22px }
  .page-intro h1,.page-heading h1 { font-size:var(--heading-size); line-height:1.12; letter-spacing:normal; }
  .page-intro>p { font-size:var(--body-size); line-height:1.7; margin-top:20px }
  .section-heading { margin-bottom:16px }
  .section-heading h2 { font-size:26px }
  .upload-empty p { max-width:260px }
  .generate-button { flex-wrap:wrap; font-size:var(--body-size) }
  .connection-banner { flex-wrap:wrap; font-size:var(--body-size); padding:14px }
  .connection-banner>span { flex:1; min-width:200px }
  .connection-banner .text-button { margin-left:32px }
  .offer-screen { padding:130px 20px 36px }
  .offer-header { top:30px; left:20px; right:20px }
  .offer-header .wordmark { width:180px }
  .offer-content { text-align:left }
  .offer-content h1 { font-size:var(--heading-size); line-height:1.12 }
  .offer-art { background:linear-gradient(0deg,#111123 0%,#111123ed 50%,#11112380),url('/media/tokens') center top/auto 80svh no-repeat }
  .offer-skip-top { justify-content:flex-start; margin-top:18px }
  .generation-price { justify-content:flex-start; font-size:var(--body-size); margin:20px 0 }
  .token-packages { gap:8px }
  .token-package { padding:22px 8px 14px; border-radius:13px; gap:5px }
  .package-amount { font-size:38px }
  .package-unit { font-size:var(--body-size) }
  .package-price { font-size:18px; margin-top:9px }
  .package-purchase { padding:8px; font-size:var(--body-size); overflow-wrap:anywhere }
  .purchase-note { font-size:var(--body-size); line-height:1.7 }
  .offer-content>.button { width:100%; margin-top:22px }
  .balance-card { padding:26px; min-height:235px }
  .balance-total strong { font-size:74px }
  .balance-shop .section-heading { align-items:flex-start; flex-wrap:wrap; gap:8px }
  .balance-shop .section-heading h2 { font-size:25px }
  .balance-note { gap:10px }
  .activity-row { flex-wrap:wrap }
  .activity-row time { margin-left:36px }
  .gallery-grid { gap:3px }
  .gallery-image-error { font-size:var(--body-size) }
  .gallery-label { letter-spacing:normal }
  .empty-state { padding:45px 0 }
  .result-dialog { width:calc(100% - 20px); max-height:calc(100svh - 20px); border-radius:16px }
  .result-layout { display:flex; flex-direction:column }
  .result-image-wrap { min-height:180px; padding-top:60px }
  .result-image-wrap>img { width:100%; height:auto; max-height:65svh; object-fit:contain }
  .result-copy { position:static; padding:24px 20px 30px }
  .result-close { position:absolute; top:9px; right:10px; z-index:2 }
  .result-copy h2 { font-size:35px }
  .result-location { margin-top:16px; font-size:var(--body-size) }
  .result-date { margin-bottom:14px }
}
@media(max-width:374px) {
  .main-content { padding-inline:16px }
  .mobile-wordmark { width:134px }
  .generate-button { padding-inline:20px; font-size:var(--body-size) }
  .offer-content h1 { font-size:var(--heading-size) }
  .package-purchase { font-size:var(--body-size) }
}
@media(max-height:740px) and (min-width:901px) {
  .sidebar-scene { height:90px }
  .sidebar { padding-top:24px }
  .main-nav { margin-top:24px }
}
/* Keep the complete workspace visible on shorter laptop screens. */
@media(min-width:761px) and (max-height:800px) {
  .main-content:has(#page-create:not([hidden])) .app-topbar { min-height:56px; margin-bottom:16px }
  .create-page { --create-visual-height:280px; --create-footer-height:64px }
  .create-page .page-intro { margin-bottom:16px }
  .create-page .page-intro h1 { font-size:36px }
  .create-page .section-heading { min-height:28px }
  .create-layout { row-gap:16px }
  .generation-panel { padding-top:12px }
  .style-carousel-footer,.photo-controls { padding-block:8px }
  .upload-formats { padding-block:12px }
}
/* The action dock follows the measured bottom navigation, even when labels wrap. */
@media(max-width:760px) {
  :root { --nav-clearance:112px; --create-dock-height:120px }
  html:has(#app-shell:not([hidden]) #page-create:not([hidden])) { scroll-padding-bottom:calc(var(--nav-clearance) + var(--create-dock-height) + 24px) }
  .main-content:has(#page-create:not([hidden])) { padding-bottom:0 }
  .create-page { --create-visual-height:260px; padding-bottom:calc(var(--nav-clearance) + var(--create-dock-height) + 24px) }
  .create-page .page-intro { margin-bottom:24px }
  .create-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:24px }
  .styles-column,.generation-panel { grid-column:auto; grid-row:auto }
  .style-carousel-footer { padding-inline:12px }
  .generation-panel { padding-top:0; border:0 }
  .generation-action-bar { position:fixed; z-index:21; bottom:var(--nav-clearance); left:12px; right:12px; display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px 16px; border:1px solid #c8b8f445; border-radius:18px; background:#1c1932fa; box-shadow:0 8px 28px #0005 }
  .generation-action-copy { display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px 12px; margin:0 }
  .generation-cost { flex:none; white-space:nowrap }
  .generate-help { min-width:0 }
  .generate-button { width:100%; min-width:0; min-height:50px; padding:12px 18px }
  .generation-panel>.photo-error { scroll-margin-bottom:calc(var(--nav-clearance) + var(--create-dock-height) + 24px) }
  body:has(#app-shell:not([hidden]) #page-create:not([hidden])) .toast-region { bottom:calc(var(--nav-clearance) + var(--create-dock-height) + 12px) }
}

/* One language control moves between the welcome, offer and application headers. */
.app-tools,.offer-tools { display:flex; align-items:center; gap:12px; margin-left:auto }
#app-language-slot,#offer-language-slot,#welcome-language-slot { flex:none }
.offer-header .wordmark { transition:opacity .2s,visibility 0s }
.offer-tools>#offer-close { transition:opacity .2s,visibility 0s }
.offer-header:has(.is-open) #offer-close { opacity:0; visibility:hidden; transition-delay:0s,.2s }
.app-topbar:has(.is-open) .balance-pill { opacity:0; visibility:hidden; transition-delay:0s,0s,.2s }
@media(max-width:700px) {
  :root { --heading-size:clamp(36px,8.8vw,48px); --body-size:16px }
}
@media(max-width:650px) {
  .app-topbar { gap:12px }
  .app-tools,.offer-tools { gap:8px }
  .mobile-wordmark { width:clamp(120px,30vw,146px) }
  .balance-pill { padding:8px 12px; gap:6px }
  .balance-pill-plus { display:none }
  .app-topbar:has(.is-open) .mobile-wordmark,
  .offer-header:has(.is-open) .wordmark { opacity:0; visibility:hidden; transition-delay:0s,.2s }
  .offer-header .wordmark { width:clamp(140px,36vw,180px) }
  .creation-steps { gap:16px; justify-content:space-between }
  .creation-steps li { gap:6px; flex-wrap:wrap }
  .creation-steps li>span { font:400 var(--body-size)/1.5 var(--font) }
  .token-packages { grid-template-columns:minmax(0,1fr) }
  .token-package { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px 12px; padding:18px; text-align:left; align-items:center }
  .token-package>.icon { grid-column:1; grid-row:1/3; margin:0 }
  .package-amount { grid-column:2; grid-row:1; font:450 32px/1.2 var(--display) }
  .package-unit { grid-column:2; grid-row:2; font-size:var(--body-size) }
  .package-price { grid-column:3; grid-row:1; font-size:18px; margin:0 }
  .package-purchase { grid-column:1/-1; margin-top:6px; width:100%; min-height:44px }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important }
}