/* Qol motion: 140ms input, 220ms surfaces, 320ms screens. Layout stays stable. */
html body dialog[open]{animation:qol-surface-in var(--q-motion-normal) var(--q-motion-ease) both;transform-origin:50% 42%}
html body dialog[open].is-closing{animation:qol-surface-out var(--q-motion-close) ease both;pointer-events:none}
html body dialog[open]::backdrop{animation:qol-fade-in var(--q-motion-normal) ease both}
html body dialog.is-closing::backdrop{animation:qol-fade-out var(--q-motion-close) ease both}
html body dialog[open] :is(.sheet-content,.auth-panel,.welcome-screen){animation:none!important}
html body .screen.active{animation:qol-fade-in var(--q-motion-screen) var(--q-motion-ease)}
html body .word-choice-menu:not([hidden]){animation:qol-surface-in var(--q-motion-normal) var(--q-motion-ease)}
html body .understanding-token[data-motion=enter]{animation:qol-fade-in var(--q-motion-normal) ease both;animation-delay:var(--word-delay,0ms)}
html body :is(#saveDraft,#saveVideo,#saveErrorDraft){min-inline-size:156px;position:relative}
html body [data-save-state=success] .save-button-icon{animation:qol-check-in var(--q-motion-normal) var(--q-motion-ease)}
html body [data-save-state=success]{border-color:var(--q-success);color:var(--q-success)}
html body [data-save-state=busy] .save-button-icon{animation:qol-save-pulse 900ms ease-in-out infinite}
html body #avatarDownload{position:relative;isolation:isolate;overflow:hidden;min-inline-size:180px;font-variant-numeric:tabular-nums;gap:8px}
html body #avatarDownload::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--q-primary);opacity:0;transform:scaleX(0);transform-origin:left center}
html body #avatarDownload[data-export-state=busy]{opacity:1;cursor:progress;border-color:var(--q-primary)}
html body #avatarDownload[data-export-state=busy]::before{opacity:.25;width:var(--export-progress,0%);transform:none;transition:width var(--q-motion-fast) linear}
html body #avatarDownload[data-export-state=done]{color:var(--q-success);border-color:var(--q-success)}
html body #avatarDownload[data-export-state=done] svg{animation:qol-check-in var(--q-motion-normal) var(--q-motion-ease)}
html body #avatarCancelExport[hidden]{display:none!important}
html body #avatarCancelExport{min-inline-size:130px}
.avatar-canvas-shell{position:relative;width:100%;min-width:0;isolation:isolate}
.avatar-canvas-shell canvas{display:block}
.avatar-loading-placeholder{position:absolute;inset:0;display:grid;place-items:center;border-radius:18px;background:var(--q-soft);pointer-events:none;z-index:1;overflow:hidden}
.avatar-loading-placeholder::before{content:'';position:absolute;width:24%;height:75%;inset:12% auto auto;background:var(--q-control-border);opacity:.14;border-radius:45% 45% 20% 20%;clip-path:polygon(40% 0,60% 0,66% 10%,63% 17%,72% 20%,88% 55%,77% 58%,65% 35%,66% 58%,74% 100%,55% 100%,50% 66%,45% 100%,26% 100%,34% 58%,35% 35%,23% 58%,12% 55%,28% 20%,37% 17%,34% 10%)}
.avatar-loading-placeholder[hidden]{display:none}
html body #avatar3dPanel[data-loading=true] .avatar-canvas-shell{background:var(--q-soft);border-radius:18px}
html body #librarySkeleton :is(.skeleton-card,.skeleton-preview,.skeleton-line){animation:none!important;background-image:none!important}
html body #librarySkeleton .skeleton-preview{aspect-ratio:16/9;height:auto;background:var(--q-soft)}
html body #librarySkeleton .skeleton-line{background:var(--q-border)}
html body #librarySkeleton .skeleton-card{border-radius:var(--q-radius-card);border:1px solid var(--q-border)}
html body .creation-preview{aspect-ratio:16/9;height:auto;min-height:0}
.sort-grip{display:inline-flex;flex:none;align-items:center;justify-content:center;min-width:20px;min-height:28px;margin-inline-start:-4px;color:var(--q-muted);cursor:grab;touch-action:none;font-size:17px;line-height:1;user-select:none}
html body .understanding-token{display:inline-flex;align-items:center;gap:3px}
html body .qol-drag-source{opacity:.3!important;border-style:dashed!important;border-color:var(--q-focus)!important;outline:2px solid var(--q-focus);outline-offset:2px;cursor:grabbing}
html body .qol-sorting :is(.understanding-token,[data-sort-scene]){user-select:none}
@keyframes qol-fade-in{from{opacity:0}to{opacity:1}}
@keyframes qol-fade-out{to{opacity:0}}
@keyframes qol-surface-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes qol-surface-out{to{opacity:0;transform:translateY(5px) scale(.995)}}
@keyframes qol-check-in{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@keyframes qol-save-pulse{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){html body dialog[open]::backdrop{animation:none!important}html body :is(dialog[open],dialog[open]::backdrop,.screen.active,.understanding-token,.word-choice-menu,[data-save-state] .save-button-icon,#avatarDownload svg){animation:none!important;transition:none!important;transform:none!important}html body :is(button,a,input,select,textarea,.qol-drag-source,#avatarDownload::before){transition:none!important;animation:none!important}html{scroll-behavior:auto!important}}
.export-preview-freeze{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;border-radius:inherit;pointer-events:auto}