@font-face {font-family:"Geist Pixel";src:url("assets/fonts/geist-pixel-latin.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root {
  color-scheme: dark;
  --black: #000; --black-step-1: rgb(10% 10% 10%); --black-step-2: rgb(20% 20% 20%);
  --gray-40: rgb(40% 40% 40%); --gray-60: rgb(60% 60% 60%);
  --white: #fff; --white-step-1: rgb(90% 90% 90%); --white-step-2: rgb(80% 80% 80%);
  --bg: var(--black); --canvas: var(--bg); --panel: var(--black-step-1); --hover: var(--black-step-2);
  --text: var(--white); --secondary: var(--white-step-2); --muted: var(--secondary); --line: var(--black-step-2);
  --primary-hover: var(--white-step-1);
  --placeholder-text: var(--gray-60); --disabled-text: var(--placeholder-text); --disabled-primary-text: var(--gray-40);
  --notification: #00FF00;
  --error: #FF00FF;
  --line-strong: #fff; --line-width: 1px;
  --overlay-dialog: rgb(0 0 0 / .5); --overlay-local: var(--overlay-dialog);
  --overlay-duration: 200ms;
  --menu-hover-duration: 200ms;
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px;
  --font-sm: 12px; --font-body: 14px; --font-title: 16px; --font-display: 32px;
  --line-sm: 16px; --line-body: 24px; --line-title: 24px; --line-display: 40px;
  --weight-regular: 400; --weight-heading: 500; --weight-active: 600;
  --field-gap: var(--space-8); --group-gap: var(--space-24); --section-gap: var(--space-32);
  --gutter: var(--space-48); --thumb: 160px; --thumb-ratio: 9/16;
  --card-column-gap: var(--space-24); --card-row-gap: var(--space-24); --card-caption-height: 48px;
  --control: 48px; --control-pad-y: var(--space-12); --control-pad-x: var(--space-16);
  --compact-font: var(--font-sm); --compact-line: var(--line-sm); --compact-height: 24px;
  --compact-pad-y: var(--space-4); --compact-pad-x: var(--space-8);
  --avatar-size: 28px; --menu-width: 192px; --tab-width: 192px;
  --navigation-height: var(--control); --logo-row-height: var(--space-24); --logo-height: 20px; --prompt-height: 160px;
  --page-max-width: 1800px; --studio-min-width: 840px; --dialog-width: 480px; --dialog-min-height: 192px;
  --font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-ui: "Geist Pixel",var(--font-system);
  --font-shape: "ELSH" 1;
  font-synthesis: none;
}
* {box-sizing: border-box}
body {margin: 0; background: var(--bg); color: var(--text); font: var(--weight-regular) var(--font-body)/var(--line-body) var(--font-ui);font-variation-settings:var(--font-shape,normal)}
button,input,textarea,select {font: inherit;font-variation-settings:inherit}
/* Repeated activation must not select labels; editable fields keep text selection. */
button,summary {-webkit-user-select:none;user-select:none}
button {min-height: var(--control); padding: var(--control-pad-y) var(--control-pad-x); border: 0; border-radius: 0; color: var(--text); background: var(--panel); cursor: pointer; transition:background 200ms ease-out,color 200ms ease-out}
button:hover {background: var(--hover); border: 0; box-shadow: none}
button:disabled {cursor: default}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:none}
summary:focus:not(:focus-visible) {outline:none}
button.primary {background: var(--text); color: var(--bg); font-weight: var(--weight-active)}
button.primary:enabled:hover {background:var(--primary-hover)}
button:disabled,button:disabled:hover {background:var(--panel);color:var(--disabled-text);opacity:1}
button.primary:disabled,button.primary:disabled:hover {background:var(--text);color:var(--disabled-primary-text)}
button.quiet {background: transparent; color: var(--muted)}
button.quiet:hover {background: var(--panel); color: var(--text)}
h1,h2,h3,p {margin: 0}
h1 {font-size: var(--font-display); line-height: var(--line-display); font-weight: var(--weight-heading)}
h2,h3 {font-size: var(--font-title); line-height: var(--line-title); font-weight: var(--weight-heading)}
p {color: var(--muted)}
input,textarea,select {transition:background-color 200ms ease-out;width: 100%; color: var(--text); background: var(--panel); border: 0; border-radius: 0; padding: var(--control-pad-y) var(--control-pad-x); outline: none}
input,select {height:var(--control)}
input:focus,textarea:focus,select:focus,.component-review :is(input,textarea,select)[data-review-focus] {background-color: var(--hover)}
input::placeholder,textarea::placeholder {color:var(--placeholder-text);opacity:1}
textarea {resize:none;min-height:var(--prompt-height);height:var(--prompt-height);overflow-y:auto;overscroll-behavior-y:contain}
/* Fade only field content at the vertical padding; keep native scrolling and pointer input. */
.textarea-shell {position:relative}
.textarea-shell textarea {display:block}
.textarea-shell::before,.textarea-shell::after {content:"";position:absolute;left:0;right:var(--control-pad-x);height:var(--control-pad-y);background:var(--panel);pointer-events:none;transition:background-color 200ms ease-out}
.textarea-shell::before {top:0;mask-image:linear-gradient(to bottom,#000,transparent)}
.textarea-shell::after {bottom:0;mask-image:linear-gradient(to top,#000,transparent)}
.textarea-shell:focus-within::before,.textarea-shell:focus-within::after,.component-review .textarea-shell:has([data-review-focus])::before,.component-review .textarea-shell:has([data-review-focus])::after {background:var(--hover)}
label,.field-label {font-size: var(--font-sm); line-height:var(--line-sm); color: var(--secondary)}
.field {display: flex; flex-direction: column; gap: var(--field-gap)}
.field-heading {display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-16);min-height:var(--line-sm)}
.field-heading>label {flex-shrink:0}
.field-error {margin:0;font-size:var(--font-sm);line-height:var(--line-sm);color:var(--error);text-align:right}
.field-error:not(:empty),.generator-error:not(:empty) {animation:feedback-enter 200ms ease-out}
@keyframes feedback-enter {from{opacity:0}to{opacity:1}}
.top {position: relative; padding: 0 var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 var(--section-gap);align-items:center}
.logo {grid-column:2;grid-row:1;position: relative; display: flex; height: var(--logo-row-height); margin:var(--space-24) 0; align-items: center; justify-content: center}
.logo img {width:auto;height:var(--logo-height);display:block}
.logo a {display:flex;align-items:center;height:var(--logo-row-height)}
.site-links {grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:var(--space-24);margin-right:var(--space-48);font-size:var(--font-sm);line-height:var(--line-sm);white-space:nowrap}
.site-links a {display:flex;align-items:center;min-height:var(--logo-row-height);color:var(--secondary);text-decoration:none;transition:color 200ms ease-out}
.site-links a:hover {color:var(--text)}
/* Temporary state-preview launcher; remove with studio-previews.js. */
.state-previews {grid-column:3;grid-row:1;justify-self:end;position:relative;z-index:50}
.state-preview-trigger {display:flex;align-items:center;justify-content:center;width:var(--logo-row-height);height:var(--logo-row-height);min-height:0;padding:0;background:none;color:var(--secondary)}
.state-preview-trigger:hover,.state-preview-trigger[aria-expanded="true"] {background:none;color:var(--text)}
.state-preview-menu {position:absolute;top:100%;right:0;width:max-content;min-width:360px;max-width:calc(100vw - 2 * var(--gutter));max-height:calc(100dvh - 112px);display:flex;flex-direction:column;background:var(--panel)}
.state-preview-menu[hidden] {display:none}
.state-preview-list {min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0;scrollbar-width:thin}
.state-preview-menu button {width:100%;text-align:left;white-space:nowrap;font-size:var(--font-sm);line-height:var(--line-sm)}
.menu-selection {opacity:0;flex-shrink:0;transition:opacity 200ms ease-out}
[aria-current="true"] .menu-selection {opacity:1}
.navigation-row {position:relative;grid-column:1/-1;display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); height:var(--navigation-height);align-items: center; gap: var(--space-16)}
.navigation-row::after {content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:0;height:var(--line-width);background:var(--line);pointer-events:none}
.navigation-row>.back {grid-column: 1; grid-row: 1; justify-self: start; padding: 0 var(--control-pad-x); background: none; color: var(--muted)}
.navigation-row>.back:hover {color: var(--text)}
.navigation-row>.navigation-action {grid-column:1;grid-row:1;justify-self:start;background:none;color:var(--secondary)}
.navigation-row>.navigation-action:hover {background:none;color:var(--text)}
#root[hidden],#screenNotice[hidden] {display:none}
.site-name {grid-column:1;grid-row:1;justify-self:start;min-width:0;max-width:100%;font-size:var(--font-sm);line-height:var(--line-sm);font-weight:var(--weight-regular);color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs {position:relative;display: flex; grid-column: 2; grid-row: 1; align-self: stretch; gap: 0}
.tabs button {width:var(--tab-width); padding: 0; position: relative; color: var(--muted); background: none; font-weight: var(--weight-heading)}
.tabs button.active {font-weight: var(--weight-active); color: var(--text)}
.tabs button:hover {color: var(--text)}
.unread-label {display:inline-flex;align-items:baseline;gap:.5ch;min-width:0;max-width:100%;vertical-align:bottom}
.unread-marker {flex-shrink:0;color:var(--notification);font:inherit;pointer-events:none}
.unread-marker[hidden] {display:none}
.unread-text {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs .unread-label {display:inline;vertical-align:baseline;white-space:nowrap}
.tabs .unread-marker {margin-inline-end:.5ch}
.navigation-tools {grid-column:3;grid-row:1;justify-self:end;height:100%;min-width:0;max-width:100%;display:flex;align-items:center;gap:var(--group-gap);z-index:20}
.user-account {position: relative;min-width:0;height:100%}
.user-account summary {display: flex; align-items: center; gap: var(--space-8);height:100%;list-style: none; cursor: pointer; color: var(--secondary); font-size:var(--font-sm);line-height:var(--line-sm)}
.user-account summary {transition:color 200ms ease-out}
.user-account summary:hover,.user-account summary[aria-expanded="true"] {color:var(--text)}
.user-account summary::-webkit-details-marker {display: none}
.user-name {max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.avatar {display: inline-grid; place-items: center; width:var(--avatar-size); height:var(--avatar-size); font-size:var(--font-sm); line-height:var(--line-sm); background:var(--hover); color: var(--secondary); border-radius: 50%; flex-shrink: 0}
.user-chevron {color: var(--muted)}
.user-menu {position: absolute;top:100%;right: 0; width:var(--menu-width); background: var(--panel)}
.user-menu button {width:100%;text-align:left}
.credit-region {height:100%;min-width:0;display:flex;align-items:center}
.credit-balance {display: flex; min-width: 0; max-width: 112px; gap:var(--space-4); font-size:var(--font-sm);line-height:var(--line-sm); white-space: nowrap; font-variant-numeric: tabular-nums}
.credit-value {min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 9ch}
.credit-label {color: var(--muted)}
#root,#screenNotice {height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#root>.top,#screenNotice>.top {flex-shrink:0;z-index:40;background:var(--bg)}
.page {width:100%;min-height:0;flex:1;overflow-y:auto;overscroll-behavior-y:contain}
.page {scrollbar-gutter:stable both-edges;padding:var(--space-48) var(--gutter) var(--space-48)}
.studio-page {width:100%;min-height:0;flex:1;display:flex;flex-direction:column}
.studio-heading {flex-shrink:0;position:relative;z-index:30;background:var(--bg)}
.studio-viewport {width:100%;min-height:0;flex:1;overflow:hidden}
.gallery {max-width:calc(var(--page-max-width) - 2 * var(--gutter));margin:auto;display:grid;grid-template-columns:repeat(auto-fill,var(--thumb));justify-content:center;gap:var(--card-row-gap) var(--card-column-gap)}
.empty-state {grid-column:1/-1;font-size:var(--font-body);line-height:var(--line-body);font-weight:var(--weight-regular);color:var(--muted);text-align:center}
.page-empty>.empty-state {max-width:calc(var(--page-max-width) - 2 * var(--gutter));margin:0 auto var(--space-24)}
.page-notice {overflow:visible;overscroll-behavior:auto;padding-top:calc(var(--space-48) + 3 * var(--space-24));display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;scrollbar-gutter:auto}
#root:has(>.page-notice),#screenNotice {overflow:visible}
#root:has(>.page-notice)>.top,#screenNotice>.top {position:fixed;inset:0 0 auto}
.notice-card {display:grid;place-items:center;width:100%;max-width:var(--dialog-width);min-width:0;background:transparent}
.notice-message {font-size:var(--font-body);line-height:var(--line-body);font-weight:var(--weight-regular);color:var(--text);text-align:center;overflow-wrap:anywhere}
.card {min-width: 0}
.cover {position: relative; width: 100%; aspect-ratio:var(--thumb-ratio); padding: 0; border: 0; background: var(--canvas); overflow: hidden; display: block}
.cover>img,.cover>video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block}
button.cover:hover {background: var(--canvas)}
.cover>img {transition:filter 200ms ease-out}
button.cover:hover>img {filter: brightness(1.08)}
.animation-meta {padding-top:var(--space-16);min-height:var(--card-caption-height)}
.card-meta {min-height:var(--card-caption-height);display:grid;align-items:center;text-align:center}
.author-identity {display:inline-flex;align-items:center;gap:var(--space-8);min-width:0;max-width:100%;font-size:var(--font-sm);line-height:var(--line-sm);color:var(--muted)}
.author-name {min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.visibility,.animation-action {display:inline-block;height:var(--compact-height);min-height:var(--compact-height);padding:var(--compact-pad-y) var(--compact-pad-x);border:0;border-radius:0;font-size:var(--compact-font);line-height:var(--compact-line);white-space:nowrap;vertical-align:middle}
.visibility {flex:0 0 auto;box-shadow:inset 0 0 0 var(--line-width) var(--line);color:var(--muted)}
.studio {--scroll-edge-inset:max(var(--gutter),calc((100vw - var(--page-max-width)) / 2 + var(--gutter)));height:100%;max-width:var(--page-max-width);min-width:var(--studio-min-width);margin:auto;padding:0 var(--gutter)}
.character-header {position:relative;display:flex;align-items:center;gap:var(--group-gap);max-width:var(--page-max-width);min-width:var(--studio-min-width);margin:0 auto;padding:var(--space-24) var(--gutter)}
.character-header::after {content:"";position:absolute;left:50%;bottom:0;width:100vw;height:var(--line-width);transform:translateX(-50%);background:var(--line);pointer-events:none}
.character-identity {flex: 1; min-width: 0; min-height:var(--control); display:flex; align-items:center}
.character-title {min-width: 0}
.character-title h1 {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 600px}
.character-context {display:flex;align-items:center;justify-content:flex-end;gap:var(--space-16);min-width:0;max-width:256px}
.character-context .author-identity {max-width: 160px}
.character-actions {display:flex;align-items:center;gap:var(--section-gap);margin-left:auto;flex-shrink:0}
.character-buttons {display:flex;align-items:center;gap:var(--space-16)}
.selection-total {font-size:var(--font-sm);line-height:var(--line-sm);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.character-delete {color:var(--muted)}
.character-delete:hover {color:var(--text)}
.studio-columns {--category-width:176px;--generator-min-width:288px;--animation-width:var(--thumb);--animation-columns:1;--animation-gap:var(--card-column-gap);--form-gap:var(--group-gap);--workspace-gap:var(--section-gap);height:100%;min-height:0;display:grid;grid-template-columns:var(--category-width) minmax(0,1fr);gap:var(--workspace-gap)}
.studio-column {min-width:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-top:var(--space-24);padding-bottom:var(--space-48)}
.category-column,.generator-column {display:flex;flex-direction:column}
.category-column {gap:var(--field-gap);margin-right:calc(-1 * var(--category-scrollbar-width,0px))}
.generator-column {gap:var(--form-gap)}
.category-column>*,.generator-column>* {flex-shrink:0}
.workspace-main-scroll {min-width:0;min-height:0;height:100%;margin-right:calc(-1 * var(--scroll-edge-inset));padding-top:var(--space-24);padding-right:var(--scroll-edge-inset);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.workspace-main {min-height:100%;display:grid;grid-template-columns:var(--animation-width) minmax(var(--generator-min-width),1fr);gap:var(--workspace-gap);align-items:start}
.animation-area {display:flex;flex-direction:column;gap:var(--form-gap);min-width:0;padding-bottom:var(--space-48)}
.animation-heading {display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-16);min-width:0}
.animation-heading h2 {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.animation-heading .selection-total {flex-shrink:0}
.generator-column {position:sticky;top:0;min-width:0;max-height:var(--workspace-height);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.category-panel {position:relative;isolation:isolate}
.category-panel .category,.category-panel .category-group-toggle {position:relative;z-index:1}
.category-selection {position:absolute;z-index:0;background:var(--text);pointer-events:none;transform-origin:top center;transition:background-color 200ms ease-out}
/* The moving marker is the only selected fill. Never fade a second white fill
   out of the destination button after measuring a freshly rendered panel. */
.category-panel[data-sliding-selection] .category.active,.category-panel[data-sliding-selection] .category.active:hover {background:transparent;transition:color 200ms ease-out}
.category-panel[data-disclosing] .category-selection {visibility:hidden;transition:none}
.category-panel:not(:has(.category-items:not([hidden]) .category.active)) .category-selection {visibility:hidden}
.category-panel[data-disclosing] .category.active,.category-panel[data-disclosing] .category.active:hover {background:var(--text)}
.category-group h3 {font-size:var(--font-sm);line-height:var(--line-sm);font-weight:var(--weight-regular)}
.category-group-toggle {display:flex;align-items:center;justify-content:space-between;gap:var(--field-gap);width:100%;padding:var(--control-pad-y) 0;min-height:var(--control);background:transparent;color:var(--secondary);text-align:left}
.category-group-toggle:hover {background:transparent;color:var(--text)}
.category-group-toggle .unread-text {white-space:normal}
.category-group-symbol {flex-shrink:0}
.category {width:100%;min-height:var(--control);display:flex;align-items:center;padding:var(--control-pad-y) var(--control-pad-x);background:transparent;text-align:left;color:var(--muted)}
.category:hover {background:var(--panel);color:var(--text)}
.category.active {background:var(--text);color:var(--bg)}
.category.active:hover {background:var(--primary-hover)}
.animation-grid {display:grid;grid-template-columns:repeat(var(--animation-columns),var(--thumb));gap:var(--card-row-gap) var(--animation-gap);align-items:start}
.animation-card {min-width:var(--thumb)}
.animation-preview {position:relative}
.animation-display {cursor:default;min-width:var(--thumb)}
.animation-display img {transform-origin: center bottom}
.animation-display.is-playing img {animation: preview-breathe 2.8s ease-in-out infinite}
.animation-display[data-motion="Dance"].is-playing img {animation: preview-step 1.2s ease-in-out infinite}
.animation-display[data-motion="Sway"].is-playing img,.animation-display[data-motion="Wave"].is-playing img {animation: preview-sway 2.4s ease-in-out infinite}
@keyframes preview-breathe {0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes preview-step {0%,100%{transform:rotate(-.4deg)}50%{transform:rotate(.4deg)}}
@keyframes preview-sway {0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
.animation-meta {display:flex;align-items:flex-start}
.animation-unread,.animation-status {position:absolute;top:0;z-index:2;font-size:var(--compact-font);line-height:var(--compact-line)}
.animation-unread {left:0;pointer-events:none}
.animation-status {display:grid;right:0;min-width:var(--compact-height);min-height:var(--compact-height);padding:0;text-align:right;white-space:nowrap;color:var(--muted);cursor:default}
.animation-status-symbol,.animation-status-label {grid-area:1/1;transition:opacity 200ms ease-out}
.animation-status-label {opacity:0}
.animation-preview:is(:hover,:has(:focus-visible),:has(.animation-action[aria-busy="true"])) .animation-status-symbol {opacity:0}
.animation-preview:is(:hover,:has(:focus-visible),:has(.animation-action[aria-busy="true"])) .animation-status-label {opacity:1}
.animation-actions {position:absolute;top:var(--compact-height);right:calc(-1 * var(--compact-pad-x));z-index:3;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.animation-action {--action-delay:0ms;transition:opacity 200ms ease-in var(--action-delay),transform 200ms cubic-bezier(.3,0,.35,1.12) var(--action-delay),background 200ms ease-out,color 200ms ease-out;min-width:var(--compact-height);background:var(--panel);color:var(--muted);text-align:right;opacity:0;transform:translateY(-12px);pointer-events:none}
button.animation-action:enabled:hover {background:var(--hover);color:var(--text);border:0;box-shadow:none}
.animation-action:disabled {cursor:default;color:var(--disabled-text);border:0}
.animation-preview:is(:hover,:has(:focus-visible),:has(.animation-action[aria-busy="true"])) .animation-action {opacity:1;transform:translateY(0);pointer-events:auto;transition-timing-function:cubic-bezier(.1,1,.2,1),cubic-bezier(.3,0,.35,1.12),ease-out,ease-out}
.animation-preview:is(:hover,:has(:focus-visible),:has(.animation-action[aria-busy="true"])) .animation-action:nth-child(2) {--action-delay:40ms}
.generation-overlay {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);background:var(--overlay-local);font-size:var(--font-sm);line-height:var(--line-sm);z-index:1}
.loading-dots {display:inline-grid;text-align:left}
.loading-dots::before {content:"...";grid-area:1/1;visibility:hidden}
.loading-dots::after {content:"...";grid-area:1/1;animation:loading-dots 1.2s steps(1,end) infinite}
@keyframes loading-dots {0%,100%{content:"."}33.333%{content:".."}66.666%{content:"..."}}
.generator-panel,.animation-method-panel {display:flex;flex-direction:column;gap:var(--form-gap)}
.animation-methods {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:relative}
.animation-methods::after {content:"";position:absolute;bottom:0;left:0;right:0;height:var(--line-width);background:var(--line);pointer-events:none}
.animation-methods button {position:relative;background:none;color:var(--muted);padding-left:var(--space-8);padding-right:var(--space-8)}
.animation-methods button:hover,.animation-methods button[aria-selected="true"] {background:none;color:var(--text)}
.reference-download:disabled,.reference-download:disabled:hover {background:var(--panel);color:var(--text)}
.animation-file-field {display:flex;flex-direction:column;gap:var(--field-gap);min-width:0}
.animation-file-picker {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);min-width:0;width:100%;min-height:160px;padding:var(--space-16);background:transparent;box-shadow:inset 0 0 0 var(--line-width) var(--line)}
.animation-file-picker:hover,.animation-file-picker.drag {background:var(--panel);box-shadow:inset 0 0 0 var(--line-width) var(--line)}
.animation-file-name {display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.animation-file-detail {color:var(--muted);font-size:var(--font-sm);line-height:var(--line-sm)}
.generator-context {font-size:var(--font-sm);line-height:var(--line-sm);margin:0;color:var(--muted)}
.model-picker {position:relative}
.model-select,.model-option {display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);width:100%;height:var(--control);border:0;border-radius:0;box-shadow:none;background:var(--panel);color:var(--text);text-align:left}
.model-select:hover,.model-select:focus-visible {outline:none;background:var(--hover)}
.model-select:disabled {opacity:1;background:var(--panel);color:var(--disabled-text);cursor:default}
.model-chevron {color:var(--secondary)}
.model-options {position:absolute;top:0;left:0;right:0;z-index:30;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--panel)}
.model-options[hidden] {display:none}
.menu-backdrop {position:fixed;inset:0;z-index:100;background:var(--overlay-dialog)}
.floating-menu {position:fixed;right:auto;bottom:auto;z-index:101;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
.menu-rows-moving:is(.user-menu,.model-options,.state-preview-menu) {background:transparent}
.floating-menu:focus {outline:none}
/* Keep the same row layout for rest, hover and focus. Only the inner paint moves. */
button.menu-row,button.menu-row:hover,button.menu-row:focus-visible {position:relative;isolation:isolate;display:block;padding:0;outline:none;background:transparent;color:var(--secondary);transition:none}
.menu-row-content {position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:var(--control);width:100%;padding:var(--control-pad-y) var(--control-pad-x);background:var(--bg);color:var(--secondary);transition:color var(--menu-hover-duration) linear}
/* Keep the opaque white fill intact; fade a separate gray layer beneath the text. */
.menu-row-content::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--panel);opacity:0;transition:opacity var(--menu-hover-duration) linear}
.menu-row[data-menu-highlighted]>.menu-row-content {color:var(--text)}
.menu-row[data-menu-highlighted]>.menu-row-content::before {opacity:1}
.menu-row>* {pointer-events:none}
.model-check {opacity:0;flex-shrink:0;transition:opacity 200ms ease-out}
.model-option[aria-selected="true"] .model-check {opacity:1}
.generate-button {width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.button-cost {font-size:var(--font-sm);line-height:var(--line-sm);font-weight:var(--weight-regular);white-space:nowrap}
.action-feedback {display:flex;flex-direction:column;gap:var(--field-gap)}
.feedback-slot {min-height:var(--space-32);font-size:var(--font-sm);line-height:var(--line-sm);color:var(--error);margin:0}
.generator-error {font-size:var(--font-sm);color:var(--error);line-height:var(--line-sm);margin:0}
.generator-error:empty {display:none}
dialog,.review-dialog {flex-direction:column;width:var(--dialog-width);height:fit-content;max-width:100%;min-height:min(var(--dialog-min-height),calc(100dvh - var(--space-48)));padding:0;background:var(--bg);color:var(--text);border:var(--line-width) solid var(--line-strong);border-radius:0;overflow:auto}
dialog {opacity:0;transform:scale(.98);transition:opacity var(--overlay-duration) ease-out,transform var(--overlay-duration) ease-out;position:fixed;inset:0;margin:auto;max-width:calc(100vw - var(--space-48));max-height:calc(100dvh - var(--space-48))}
.review-dialog {display:flex;align-self:start}
dialog[open] {display:flex;opacity:1;transform:scale(1)}
/* JS closes only after this fade, so open-layout styles never change while visible. */
dialog::backdrop {background:var(--overlay-dialog);opacity:0;transition:opacity var(--overlay-duration) ease-out}
dialog[open]::backdrop {opacity:1}
dialog.is-closing::backdrop {opacity:0}
dialog.is-closing {opacity:0;transform:scale(.98);pointer-events:none}
@starting-style {dialog[open] {opacity:0;transform:scale(.98)} dialog[open]::backdrop {opacity:0}}
.modal-head {flex-shrink:0;padding:var(--space-32) var(--space-32) var(--space-24);display:flex;align-items:center;justify-content:space-between;gap:var(--group-gap)}
.modal-head h2 {font-size:var(--font-display);line-height:var(--line-display)}
.modal-body {flex:1 0 auto;padding:0 var(--space-32) var(--space-32);display:flex;flex-direction:column;gap:var(--group-gap)}
.modal-body:only-child {padding-top:var(--space-32)}
.modal-body>form {flex:1;display:flex;flex-direction:column;gap:var(--group-gap)}
.modal-body .modal-actions {margin-top:auto}
.dialog-notice {flex:1;display:grid;place-items:center;text-align:center;color:var(--text)}
/* Adjacent options share a 1px edge; the selected border always paints above hover. */
.visibility-options {display:flex;align-items:center;width:100%;gap:0}
.visibility-options label {flex:0 0 calc(100% / 3);min-width:0;transition:border-color 200ms ease-out;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;min-height:var(--control);padding:calc(var(--control-pad-y) - var(--line-width)) calc(var(--control-pad-x) - var(--line-width));border:var(--line-width) solid transparent;background:transparent;color:var(--text);font-size:var(--font-body);line-height:var(--line-body);cursor:pointer;user-select:none}
.visibility-options label+label {margin-left:calc(-1 * var(--line-width))}
.visibility-options label:is(:hover,[data-review-hover]) {z-index:1}
.visibility-options label:has(input:not(:checked)):is(:hover,[data-review-hover]) {border-color:var(--line)}
.visibility-options label:has(input:checked) {border-color:var(--text);cursor:default;z-index:2}
.visibility-options input {position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.visibility-options label:has(input:focus-visible) {outline:none}
.field-note {font-size:var(--font-sm);line-height:var(--line-sm);color:var(--muted)}
.modal-actions {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;gap:var(--space-16);padding-top:0}
.drop {transition:background-color 200ms ease-out;display:flex;position:relative;height:192px;width:100%;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-8);border:var(--line-width) solid var(--line);color:var(--text);background:var(--bg);cursor:pointer;overflow:hidden}
.drop:hover,.drop.drag {background: var(--panel)}
.drop input {position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0}
.drop img {height:100%;width:100%;object-fit:contain;padding:var(--space-16)}
.drop>span {font-size:var(--font-body);line-height:var(--line-body)}
@media(max-width:1200px) { :root{--gutter:var(--space-24);--tab-width:160px}.studio-columns{--category-width:144px;--generator-min-width:256px;--workspace-gap:var(--space-24)}.navigation-tools{gap:var(--space-16)} }
@media(max-width:959px) {
  #screenNotice>.top {grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-16)}
  #screenNotice>.top .logo {grid-column:1;justify-self:start}
  #screenNotice>.top .logo img {width:clamp(112px,calc(100vw - 184px),170px);height:auto}
  #screenNotice>.top .site-links {grid-column:2;margin-right:0;gap:var(--space-16)}
}
@media(min-width:960px) and (max-width:1100px) { :root{--tab-width:128px} }
@media(max-width:1000px) { .navigation-row .user-name,.navigation-row .user-chevron{display:none} }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.animation-display.is-playing img{animation:none}.loading-dots::after{animation:none} }
@media(prefers-reduced-motion:reduce) {:root {--overlay-duration:0ms} dialog::backdrop {transition:none}}

/* Temporary homepage layout annotation. Remove with studio-layout-review.js. */
.layout-review {position:fixed;inset:0;z-index:45;pointer-events:none;font:12px/16px var(--font-system);font-variation-settings:normal;color:#fff}
.layout-review-header,.layout-review-list {position:absolute;left:0;right:0;overflow:hidden}
.layout-review-header {top:0}
.layout-review-box {position:absolute;box-shadow:inset 0 0 0 1px var(--review-color);background:color-mix(in srgb,var(--review-color) 12%,transparent);display:flex;align-items:center;justify-content:center;text-align:center}
.layout-review-box>span,.layout-review-note {color:var(--review-color);background:#101014;padding:0 4px;white-space:nowrap}
.layout-review-note {position:absolute;padding:2px 4px;line-height:16px}
.layout-review-box.review-band {justify-content:flex-start;padding-left:48px}
.layout-review-box.review-vertical>span {writing-mode:vertical-rl;text-orientation:mixed;padding:4px 0}

.layout-review-box.review-row {justify-content:flex-start;padding-left:8px}

/* Temporary component inventory: layout only; controls reuse their production classes. */
.review-content {max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-48)}
.review-intro,.review-section {display:flex;flex-direction:column;gap:var(--space-24);min-width:0}
.review-intro {gap:var(--space-8)}
.review-section>h2 {font-size:var(--font-title)}
.review-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,530px),1fr));gap:var(--space-32);align-items:start}
.review-example {min-width:0}
.review-wide {grid-column:1/-1}
.review-caption {display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:var(--space-32);margin-bottom:var(--space-8)}
.review-caption h3 {font-size:var(--font-sm);line-height:var(--line-sm);color:var(--secondary);font-weight:var(--weight-regular)}
button.review-open {padding:0;min-height:var(--compact-height);font-size:var(--font-sm);line-height:var(--line-sm);background:none;white-space:nowrap}
.review-canvas {position:relative;border:var(--line-width) solid var(--line);padding:var(--space-24);min-width:0;overflow:hidden}
.review-state-group>.review-caption h3 {font-size:var(--font-body);color:var(--text)}
.review-state-group>.review-caption>span {font-size:var(--font-sm);color:var(--muted)}
.review-state-frame {border:var(--line-width) solid var(--line)}
.review-state-tabs {position:relative;display:flex;flex-wrap:wrap;border-bottom:var(--line-width) solid var(--line);min-width:0}
.review-state-tabs>button {flex:none;min-height:var(--space-32);padding:var(--space-8) var(--space-12);font-size:var(--font-sm);line-height:var(--line-sm);background:transparent;color:var(--secondary);white-space:nowrap}
.review-state-tabs>button[aria-selected="true"] {color:var(--text)}
.review-state-indicator,.review-state-hover {position:absolute;height:var(--line-width);background:var(--white);pointer-events:none;transition:left 200ms ease-out,top 200ms ease-out,width 200ms ease-out,opacity 200ms ease-out}
.review-state-hover {background:var(--gray-60);opacity:0}
.review-state-hover[data-visible] {opacity:1}
.review-state-panels {display:grid;min-width:0}
.review-state-panel {grid-area:1/1;min-width:0;visibility:hidden;pointer-events:none}
/* Child visibility rules (such as selected menu arrows) must not escape an inactive sample. */
.review-state-panel:not([data-active]) * {visibility:hidden!important}
.review-state-panel[data-active] {visibility:visible;pointer-events:auto;animation:review-state-enter 200ms ease-out}
.review-state-caption {display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:var(--space-48);padding:var(--space-12) var(--space-24) 0}
.review-state-caption>p {font-size:var(--font-sm);line-height:var(--line-sm)}
.review-state-panel>.review-canvas {border:0}
@keyframes review-state-enter {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce) {.review-state-indicator,.review-state-hover {transition:none}.review-state-panel[data-active] {animation:none}}
.review-dialog-canvas {display:flex;justify-content:center;align-items:flex-start}
.review-dialog {flex-shrink:1}
.review-production-form {--form-gap:var(--group-gap);display:flex;flex-direction:column;gap:var(--group-gap);width:var(--review-form-width);max-width:100%;margin:0 auto}
.review-inline-menu {position:absolute;top:100%}
.review-account-region {min-height:192px}
.review-account-row {display:flex;align-items:start;justify-content:flex-end;gap:var(--space-24);min-width:0;border-bottom:var(--line-width) solid var(--line)}
.review-account-control {min-width:0;position:relative}
button.review-account-trigger {display:flex;align-items:center;gap:var(--space-8);padding:0;font-size:var(--font-sm)}
.review-account-row .credit-region {height:var(--control)}
.review-account-menu {top:100%;right:0}
.review-account-menu[hidden] {display:none}
.review-animation-list {width:var(--thumb);max-width:100%;margin:0 auto}
.review-animation-list>.animation-card {width:var(--thumb);max-width:var(--thumb)}
.review-animation-list .animation-display {width:var(--thumb)}
.review-show-actions .animation-status-symbol {opacity:0}
.review-show-actions .animation-status-label {opacity:1}
.review-show-actions .animation-action {opacity:1;transform:translateY(0);pointer-events:auto}
.review-heading-canvas {overflow-x:auto}
.review-heading-canvas .character-header {padding-inline:0;max-width:none}
.review-heading-canvas .character-header::after {width:100%;left:0;transform:none}
.review-heading-canvas .studio-heading {position:static}
@media(max-width:1100px) {.review-grid {grid-template-columns:minmax(0,1fr)}.review-content {max-width:600px}.review-wide {grid-column:auto}}

/* Component library keeps only its escape/menu entry in the site header. */
.review-top {padding-block:var(--space-24)}
.component-review button[data-review-hover] {background:var(--hover)}
.component-review button.primary:enabled[data-review-hover] {background:var(--primary-hover)}
.component-review .animation-file-picker:enabled[data-review-hover] {background:var(--panel)}
.component-review .category[data-review-hover] {background:var(--panel);color:var(--text)}
.component-review .category.active[data-review-hover] {background:var(--primary-hover);color:var(--bg)}

.tab-indicator {position:absolute;bottom:0;left:0;height:var(--line-width);background:var(--line-strong);pointer-events:none;z-index:1;transform-origin:left center}
.tabs>.tab-indicator {width:var(--tab-width)}
.tabs:has([data-route="library"].active)>.tab-indicator {left:var(--tab-width)}
.tabs:has([data-route="creation"].active)>.tab-indicator {left:calc(2 * var(--tab-width))}
.tabs:not(:has(.active))>.tab-indicator {display:none}
.animation-methods>.tab-indicator {width:50%}
.animation-methods:has([data-method="upload"][aria-selected="true"])>.tab-indicator {left:50%}

.tab-hover-indicator {position:absolute;bottom:0;left:0;height:var(--line-width);width:0;background:var(--gray-60);opacity:0;pointer-events:none;z-index:1;transition:left 200ms ease-out,width 200ms ease-out,opacity 200ms ease-out}
.tab-hover-indicator[data-visible] {opacity:1}
.tab-indicator {z-index:2}

.review-size-probe {position:fixed;top:0;left:0;width:min(100vw,var(--page-max-width));height:1px;padding:0 var(--gutter);visibility:hidden;pointer-events:none;overflow:hidden}

/* Sign-in uses the same field, button and spacing tokens as the workspace. */
.login-page {display:grid;place-items:center}
.login-panel {width:var(--dialog-width);max-width:100%;min-height:var(--dialog-min-height);display:flex;flex-direction:column;background:var(--white);color:var(--black)}
.login-panel form {display:flex;flex-direction:column;gap:var(--group-gap)}
.review-login-canvas {display:flex;justify-content:center;align-items:start}
.review-login-canvas .login-panel {flex-shrink:1}

/* Small random offsets converge on the normal grid; no blur. */
.card-awaiting {opacity:0}
.card-entering>.cover {animation:card-fade 200ms linear both,card-enter 280ms linear both;animation-delay:var(--entry-delay,0ms)}
.card-entering>.animation-preview {animation:card-fade 200ms linear both;animation-delay:var(--entry-delay,0ms)}
.card-entering>.animation-preview>.cover {animation:card-enter 280ms linear both;animation-delay:var(--entry-delay,0ms)}
.card-entering>:is(.card-meta,.animation-meta) {animation:card-caption-enter 200ms linear both;animation-delay:var(--entry-delay,0ms)}
.card-entering .name-reveal-character {animation:card-letter-enter 200ms linear both;animation-delay:calc(var(--entry-delay,0ms) + var(--letter-delay,0ms))}
@keyframes card-letter-enter {from{opacity:0}to{opacity:1}}
@keyframes card-caption-enter {
  from{opacity:0;transform:translate(var(--caption-entry-x,0px),var(--caption-entry-y,0px))}
  to{opacity:1;transform:translate(0,0)}
}
@keyframes card-fade {from{opacity:0}to{opacity:1}}
@keyframes card-enter {
  from{transform:translate(var(--entry-x,0px),var(--entry-y,0px)) scale(.96)}
  25%{transform:translate(calc(var(--entry-x,0px) * .65),calc(var(--entry-y,0px) * .65)) scale(.972)}
  70%{transform:translate(calc(var(--entry-x,0px) * .18),calc(var(--entry-y,0px) * .18)) scale(.992)}
  to{transform:translate(0,0) scale(1)}
}
@media(prefers-reduced-motion:reduce) {.card-entering,.card-entering>*,.card-entering .cover,.card-entering .name-reveal-character,.field-error,.generator-error {animation:none!important}.card-awaiting {opacity:1}}

.review-entry-list {display:grid;grid-template-columns:repeat(3,var(--thumb));gap:var(--card-column-gap);width:max-content;max-width:100%;margin:auto}
.review-category-canvas .category-panel {width:176px;margin:auto}
@media(max-width:1200px) {.review-category-canvas .category-panel {width:144px}}

/* Shared website frame: the same source is shipped to both sites. */
.site-header:not(:has(.state-previews)) .site-links {margin-right:0}
.site-footer {flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-24);padding:var(--space-48) var(--gutter);border:0;color:#000;font-size:var(--font-sm);line-height:var(--line-sm);background:#fff}
.site-footer a {color:#000;text-decoration:none;transition:color 200ms ease-out}
.site-footer a:hover {color:#666}
.landing-site {height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;background:#000}
.landing-site>.top {position:relative;z-index:40;background:#000;flex-shrink:0}
.landing-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
.landing-main {min-height:calc(100dvh - 72px);display:grid;align-items:center;background:#000}
.landing-hero {width:100%;max-width:1920px;aspect-ratio:16/9;margin:0 auto;background:#000}
.landing-hero img {display:block;width:100%;height:100%;object-fit:cover;opacity:1}
@media(max-width:959px) {
 .landing-site>.top {grid-template-columns:minmax(0,1fr) auto;gap:0 var(--space-16)}
 .landing-site>.top .logo {grid-column:1;justify-self:start}
 .landing-site>.top .logo img {width:clamp(112px,calc(100vw - 184px),170px);height:auto}
 .landing-site>.top .site-links {grid-column:2;margin-right:0;gap:var(--space-16)}
}

/* One persistent header with content and footer in the same scroll flow. */
html,body {height:100%;overflow:hidden}
#root {overflow:hidden}
.site-scroll {flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;background:#fff}
.site-scroll>.page {overflow:visible;min-height:calc(100dvh - var(--site-header-height));background:#000}
.site-scroll>.studio-page {height:calc(100dvh - var(--site-header-height));background:#000}
.site-scroll>.landing-main {min-height:calc(100dvh - var(--site-header-height));background:#000}
.site-scroll>.page-notice {padding-top:48px}
.site-header .site-links {margin-right:0}
.credit-region .state-preview-trigger {width:auto;height:var(--control);gap:8px;font-size:var(--font-sm);line-height:var(--line-sm)}

.site-scroll>.landing-main {min-height:0;display:block}

.site-scroll {display:flex;flex-direction:column;background:#000}
.site-scroll>main {flex:1 0 auto}
.site-scroll>.page {min-height:calc(100dvh - var(--site-header-height) - 208px)}
.site-scroll>.landing-main {min-height:0;flex:1 0 auto}
.site-scroll>.studio-page {flex:0 0 auto}
.site-scroll>.site-footer {flex:0 0 auto}

/* Native controls and selection follow each surface, not a custom selection palette. */
.site-footer {color-scheme:light}
.site-header,.site-scroll>main {color-scheme:dark}

/* Boundary canvas is independent of content height and scroll events. */
.site-scroll {background:linear-gradient(to bottom,#000 0%,#000 50%,#fff 50%,#fff 100%);background-attachment:scroll}

@media(min-width:960px){.landing-hero{max-width:none;aspect-ratio:239/100}}

.home-intro{background:#000;color:#fff;text-align:center;padding:48px var(--gutter)}
.home-intro h1{margin:0;font-size:clamp(32px,4vw,64px);line-height:1.2;font-weight:400}

.home-intro p{margin:24px 0 0;font-size:24px;line-height:1.3;font-weight:400;color:#fff}

@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy-regular.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
.home-intro h1{font-family:"Gilroy",sans-serif}

@font-face{font-family:"Gilroy";src:url("assets/fonts/gilroy-bold.otf") format("opentype");font-style:normal;font-weight:700;font-display:swap}
.home-intro h1{font-weight:700}
.home-intro p{font-family:var(--font-ui);font-size:16px;line-height:24px}

.site-footer a[href^="mailto:"]{text-decoration:underline;text-underline-offset:2px}

.site-header a[data-site-destination]{cursor:pointer}