/* Generated from design/tokens.json + design/components.css. Do not edit this output. */
:root{--q-space-1:4px;--q-space-2:8px;--q-space-3:12px;--q-space-4:16px;--q-space-6:24px;--q-space-8:32px;--q-space-12:48px;--q-space-16:64px;--q-radius-control:12px;--q-radius-card:24px;--q-radius-dialog:24px;--q-radius-small:8px;--q-radius-pill:999px;--q-type-font:-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;--q-type-xs:12px;--q-type-sm:14px;--q-type-body:16px;--q-type-h3:20px;--q-type-h2:24px;--q-type-h1:36px;--q-type-line:1.5;--q-type-heading-line:1.2;--q-size-control:44px;--q-size-control-large:48px;--q-size-icon:20px;--q-size-stroke:1.75;--q-motion-fast:140ms;--q-motion-normal:220ms;--q-motion-ease:cubic-bezier(.2,.8,.2,1);--q-canvas:#F7F5EF;--q-surface:#FFFFFF;--q-raised:#FFFFFF;--q-soft:#F0EBE3;--q-ink:#173547;--q-muted:#526776;--q-border:#D4DDE1;--q-control-border:#8296A2;--q-primary:#C69F7A;--q-primary-hover:#BA906A;--q-on-primary:#142B3A;--q-focus:#23668C;--q-success:#226746;--q-success-soft:#EAF5EE;--q-danger:#AC3435;--q-danger-soft:#FBEDEE;--q-warning:#805518;--q-shadow:0 12px 36px #1735470D;--q-backdrop:#10233166;--bg:var(--q-canvas);--surface:var(--q-surface);--soft:var(--q-soft);--ink:var(--q-ink);--muted:var(--q-muted);--line:var(--q-border);--accent:var(--q-primary);--purple:var(--q-focus);--purple-soft:var(--q-soft);--danger:var(--q-danger);--shadow:var(--q-shadow);--radius:var(--q-radius-card);color-scheme:light}
:root[data-theme=dark]{--q-canvas:#101D27;--q-surface:#192B38;--q-raised:#203542;--q-soft:#233846;--q-ink:#F7F5EF;--q-muted:#ADBCC5;--q-border:#344D5C;--q-control-border:#637F8F;--q-primary:#C69F7A;--q-primary-hover:#D1AE8C;--q-on-primary:#142B3A;--q-focus:#CFAE8D;--q-success:#A1D4B7;--q-success-soft:#203D34;--q-danger:#F0AAAB;--q-danger-soft:#432C35;--q-warning:#DFC08C;--q-shadow:0 12px 36px #00000026;--q-backdrop:#07121BB3;--bg:var(--q-canvas);--surface:var(--q-surface);--soft:var(--q-soft);--ink:var(--q-ink);--muted:var(--q-muted);--line:var(--q-border);--accent:var(--q-primary);--purple:var(--q-focus);--purple-soft:var(--q-soft);--danger:var(--q-danger);--shadow:var(--q-shadow);--radius:var(--q-radius-card);color-scheme:dark}
/* Shared component contract. Existing class names are adapters, not independent designs. */
html body{font-family:var(--q-type-font);font-size:var(--q-type-body);line-height:var(--q-type-line);color:var(--q-ink);background:var(--q-canvas)}
html body :is(button,input,select,textarea){font-family:var(--q-type-font);letter-spacing:normal}
html body :is(h1,h2,h3){font-family:var(--q-type-font);line-height:var(--q-type-heading-line);font-weight:650;letter-spacing:-.025em}
html body :is(.page-heading h1,.section-heading h1){font-size:clamp(28px,3vw,var(--q-type-h1))}
html body :is(.card-header h2,.preview-label,.account-info h2,.settings-title h2){font-size:var(--q-type-h3);line-height:1.3}
html body :is(.section-heading p,.page-heading p,.field>span,.settings-row,.creation-body p){font-size:var(--q-type-sm);line-height:1.5}
html body :is(.eyebrow,.sidebar-label,.word-hint,.status-pill,.plan-badge){font-size:var(--q-type-xs);line-height:1.5}
/* Buttons: primary=sand, secondary=outline, tertiary=text. */
html body :is(.button,.legal-actions button,.cookie-save,.q-button,.primary-button,.secondary-button,.text-button,.motion-words-button,.avatar-tools button,.avatar-background-button,.custom-background>button,.ai-word-tools>button){
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--q-space-2);min-height:var(--q-size-control);padding:var(--q-space-3) var(--q-space-4);border:1px solid var(--q-control-border);border-radius:var(--q-radius-control);background:transparent;color:var(--q-ink);font-size:var(--q-type-sm);font-weight:600;line-height:1.25;box-shadow:none;text-decoration:none;cursor:pointer;transition:background var(--q-motion-fast),border-color var(--q-motion-fast),color var(--q-motion-fast),transform var(--q-motion-fast)
}
html body :is(.q-button.q-button--primary,.primary-button),html body :is(.hero-actions>.button:not(.text-link),.closing>.button,.price-card.featured .button,.cookie-save){background:var(--q-primary);border-color:var(--q-primary);color:var(--q-on-primary);min-height:var(--q-size-control-large);box-shadow:none}
html body :is(.q-button.q-button--text,.text-button){border-color:transparent;background:transparent;color:var(--q-muted);padding-inline:var(--q-space-2)}
html body :is(.q-button.q-button--danger){color:var(--q-danger);border-color:var(--q-danger)}
@media(hover:hover){
 html body :is(.q-button,.secondary-button,.avatar-tools button,.motion-words-button,.custom-background>button,.ai-word-tools>button):hover:not(:disabled):not([aria-disabled=true]){background:var(--q-soft);border-color:var(--q-ink)}
 html body :is(.q-button.q-button--primary,.primary-button):hover:not(:disabled):not([aria-disabled=true]),html body .hero-actions>.button:not(.text-link):hover{background:var(--q-primary-hover);border-color:var(--q-primary-hover);color:var(--q-on-primary);box-shadow:none}
 html body :is(.q-button.q-button--text,.text-button):hover:not(:disabled){background:var(--q-soft);color:var(--q-ink);border-color:transparent}
}
html body :is(.q-button,.primary-button,.secondary-button,.text-button,.avatar-tools button):active:not(:disabled){transform:translateY(1px)}
html body :is(button,a,input,textarea,select):focus-visible{outline:2px solid var(--q-focus);outline-offset:3px}
html body :is(.q-button,.primary-button,.secondary-button,.text-button,.avatar-tools button,.motion-words-button):disabled,
html body .q-button[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
html body :is(.q-button.q-button,.primary-button.primary-button,.secondary-button.secondary-button)[aria-busy=true]{cursor:progress;opacity:1}
.q-spinner{display:inline-block;width:var(--q-size-icon);height:var(--q-size-icon);border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:q-spinner .8s linear infinite;flex:none}
@keyframes q-spinner{to{transform:rotate(360deg)}}
/* Consistent field treatment, without applying it to color/range/checkbox inputs. */
html body :is(.q-input,.field input,.field textarea,.field select,.motion-words-dialog input[type=search],.avatar-tools select,.settings-row select){box-sizing:border-box;min-height:var(--q-size-control);padding:var(--q-space-3);border:1px solid var(--q-control-border);border-radius:var(--q-radius-control);background:var(--q-canvas);color:var(--q-ink);font-size:var(--q-type-sm);line-height:1.4;box-shadow:none;transition:border-color var(--q-motion-fast),background var(--q-motion-fast)}
html body :is(.q-input,.field input,.field textarea)::placeholder{color:var(--q-muted);opacity:1}
html body :is(.q-input,.field input,.field textarea,.field select):focus{border-color:var(--q-focus)}
html body :is(.q-input,.field input,.field textarea)[aria-invalid=true],html body .field.has-error input{border-color:var(--q-danger);background:var(--q-danger-soft)}
html body :is(.q-input,.field input):disabled{opacity:.55;cursor:not-allowed}
html body :is(.field-error,#authError,#actionError){font-size:var(--q-type-xs);line-height:1.5;color:var(--q-danger);margin-top:var(--q-space-2)}
html body .field{gap:var(--q-space-2);margin-bottom:var(--q-space-4)}
html body .field>span{font-weight:500;color:var(--q-ink)}
html body .password-input input{padding-right:var(--q-space-12)}
html body input[type=checkbox]{width:18px;height:18px;accent-color:var(--q-focus);flex-shrink:0}
/* Cards and screen rhythm. Layout-specific heights remain in their own stylesheet. */
html body :is(.q-card,.editor-card,.preview-card,.account-card,.settings-card,.plan-card,.creation-card,.recognition-intro,.price-card){border:1px solid var(--q-border);border-radius:var(--q-radius-card);background:var(--q-surface);color:var(--q-ink);box-shadow:var(--q-shadow)}
html body :is(.q-card,.account-card,.settings-card,.plan-card,.price-card){padding:var(--q-space-6)}
html body #screen-studio :is(.editor-card,.preview-card){padding:var(--q-space-6);border-radius:var(--q-radius-card)}
html body :is(.studio-grid,.profile-grid,.plans-grid,.pricing-grid){gap:var(--q-space-6)}
html body :is(.card-header,.preview-header,.section-heading){margin-bottom:var(--q-space-6);gap:var(--q-space-4)}
html body :is(.composer-actions,.dialog-actions){gap:var(--q-space-3)}
html body .word-hints{gap:var(--q-space-2);margin-bottom:var(--q-space-4)}
html body .word-hint{padding:var(--q-space-1) var(--q-space-2);border:1px solid var(--q-border);border-radius:var(--q-radius-small);color:var(--q-muted)}
html body .word-hint.available{color:var(--q-success);background:var(--q-success-soft);border-color:var(--q-success)}
html body .word-hint.missing{color:var(--q-danger);background:var(--q-danger-soft);border-color:var(--q-danger)}
html body #textInput{font-family:var(--q-type-font);font-size:18px;line-height:1.6;color:var(--q-ink);background:transparent;letter-spacing:normal}
html body #avatar3dCanvas{border-radius:var(--q-radius-control)}
html body .avatar-tools{gap:var(--q-space-2);padding-top:var(--q-space-4)}
html body :is(.editor-meta,#avatar3dStatus,.custom-color,.background-image-options label){font-size:var(--q-type-xs);line-height:1.5;color:var(--q-muted)}
/* Dialog structure and dimming are shared across auth, backgrounds, dictionary and confirmation. */
html body :is(dialog,.q-dialog){border:1px solid var(--q-border);border-radius:var(--q-radius-dialog);background:var(--q-surface);color:var(--q-ink);box-shadow:var(--q-shadow)}
html body :is(.motion-words-dialog,.avatar-background-dialog,.action-dialog,.legal-dialog){padding:var(--q-space-6)}
html body dialog::backdrop{background:var(--q-backdrop);backdrop-filter:blur(5px)}
html body :is(.motion-words-dialog form,.avatar-background-dialog form){display:flex;justify-content:space-between;align-items:center;gap:var(--q-space-4);margin-bottom:var(--q-space-4)}
html body :is(.motion-words-dialog form button,.avatar-background-dialog form button,.legal-close,.modal-close){width:var(--q-size-control);height:var(--q-size-control);min-width:var(--q-size-control);padding:var(--q-space-3);display:grid;place-items:center;border-radius:var(--q-radius-control);background:var(--q-soft);color:var(--q-ink)}
html body :is(.motion-words-dialog strong,.avatar-background-dialog strong,.action-heading h2){font-size:var(--q-type-h3);line-height:1.3}
html body :is(.background-choice,.motion-words-list button){border-radius:var(--q-radius-control);border-color:var(--q-control-border);color:var(--q-ink);padding:var(--q-space-3);min-height:var(--q-size-control)}
html body .background-choice[aria-pressed=true]{border-color:var(--q-focus);box-shadow:0 0 0 1px var(--q-focus)}
html body .background-swatch{border-radius:var(--q-radius-small);margin-bottom:var(--q-space-2)}
html body .motion-words-list small{font-size:var(--q-type-xs);color:var(--q-muted)}
/* Uniform line icons; never select brand artwork or filled theme glyphs. */
html body :is(.q-icon,.side-nav svg,.icon-button svg,.primary-button>svg,.secondary-button>svg,.text-button>svg,.player-controls svg,.composer-actions svg){width:var(--q-size-icon);height:var(--q-size-icon);stroke-width:var(--q-size-stroke);stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
html body .q-icon{display:block;fill:none;stroke:currentColor}
html body .q-alert{padding:var(--q-space-3) var(--q-space-4);border:1px solid var(--q-border);border-radius:var(--q-radius-control);color:var(--q-muted);font-size:var(--q-type-sm)}
html body .q-alert--error{color:var(--q-danger);background:var(--q-danger-soft);border-color:var(--q-danger)}
html body .q-alert--success{color:var(--q-success);background:var(--q-success-soft);border-color:var(--q-success)}
html[data-theme=light] body :is(.topbar,.sidebar,.storage-notice){background:var(--q-surface);color:var(--q-ink);border-color:var(--q-border)}
html[data-theme=light] body :is(.nav-login,.language-trigger,.account-button){color:var(--q-ink)}
html body .q-icon-button{width:var(--q-size-control);padding:var(--q-space-3)}
@media(max-width:700px){html body #screen-studio :is(.editor-card,.preview-card){padding:var(--q-space-4)}html body :is(.q-card,.plan-card,.account-card,.settings-card){padding:var(--q-space-4)}html body :is(.studio-grid,.profile-grid,.plans-grid){gap:var(--q-space-4)}html body :is(.page-heading h1,.section-heading h1){font-size:28px}html body .avatar-tools{gap:var(--q-space-2)}html body .avatar-tools button{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){html body :is(.q-button,.primary-button,.secondary-button,.text-button,.q-input){transition:none;transform:none}.q-spinner{animation:none;border-style:dotted}}

html body .landing-demo.q-card{padding:0}
html body :is(.nav-login,.language-trigger,.theme-button){border-radius:var(--q-radius-control);min-height:var(--q-size-control)}
html body .legal-actions{gap:var(--q-space-2)}
html body .auth-consent :is(a,button),html body .legal-body a{color:var(--q-ink);text-decoration:underline;text-underline-offset:3px}

/* Remove the old auth-only decorative wave so all primary buttons share one surface. */
html body #authDialog #authSubmit::before,html body #authDialog #authSubmit::after{display:none!important;animation:none!important}
html body #authDialog .registration-consent button,html body #authDialog #authSwitch{color:var(--q-focus)}

html body .account-button{background:var(--q-soft);color:var(--q-ink);border:1px solid var(--q-border)}
html body #textInput::placeholder{color:var(--q-muted);opacity:1}

html body #screen-studio #generateButton{border-radius:var(--q-radius-control);min-height:var(--q-size-control-large);font-size:var(--q-type-sm)}