@oneworks/avatar-react 0.0.0-onboarding.0

package/dist/style.css

@@ -0,0 +1 @@
+:root{--oneworks-visual-viewport-height: 100dvh;--oneworks-keyboard-inset-bottom: 0px;--oneworks-mobile-panel-action-size: 36px;--oneworks-mobile-panel-field-height: 36px;--oneworks-mobile-panel-gap: 4px;--oneworks-mobile-panel-radius: 8px;--oneworks-mobile-panel-top-padding: 8px;--app-chrome-icon-size: 18px;--app-chrome-content-height: var(--app-chrome-icon-size);--app-chrome-action-gap: 4px;--app-chrome-padding-block: 10px;--app-chrome-padding-inline: 10px;--app-chrome-border-width: 1px;--app-chrome-divider-color: var(--border-color);--app-chrome-overlay-background: color-mix( in srgb, var(--bg-color) 48%, transparent );--app-chrome-overlay-height: calc( var(--app-chrome-content-height) + var(--app-chrome-padding-block) + var(--app-chrome-padding-block) + var(--app-chrome-border-width) );--route-container-header-border-width: var(--app-chrome-border-width);--route-container-header-content-height: var(--app-chrome-content-height);--route-container-header-padding-block: var(--app-chrome-padding-block);--route-container-header-padding-inline: var(--app-chrome-padding-inline);--route-container-header-overlay-height: var(--app-chrome-overlay-height);--nav-rail-window-spacer-width: 64px;--nav-rail-collapsed-window-spacer-width: 66px;--nav-rail-window-action-size: var(--app-chrome-icon-size);--nav-rail-window-icon-size: var(--app-chrome-icon-size);--nav-rail-window-action-gap: var(--app-chrome-action-gap);--nav-rail-window-gap: var(--app-chrome-action-gap);--nav-rail-collapsed-window-bar-max-width: calc(100vw - 96px) ;--nav-rail-traffic-light-gap: 8px;--nav-rail-traffic-light-size: 14px;--nav-rail-traffic-light-x: 12px;--nav-rail-traffic-light-y: 12px;--nav-rail-traffic-light-group-width: calc( var(--nav-rail-traffic-light-size) + var(--nav-rail-traffic-light-gap) + var(--nav-rail-traffic-light-size) + var(--nav-rail-traffic-light-gap) + var(--nav-rail-traffic-light-size) );--nav-rail-traffic-light-action-offset: calc( var(--nav-rail-traffic-light-x) + var(--nav-rail-traffic-light-group-width) + var(--nav-rail-window-gap) );--nav-rail-collapsed-window-bar-padding-x: var( --route-container-header-padding-inline );--nav-rail-collapsed-window-bar-action-count: 1;--nav-rail-collapsed-window-bar-computed-width: calc( var( --nav-rail-collapsed-window-bar-padding-left, var(--nav-rail-collapsed-window-bar-padding-x) ) + var( --nav-rail-collapsed-window-bar-padding-right, var(--nav-rail-collapsed-window-bar-padding-x) ) + var(--nav-rail-collapsed-window-bar-action-count) * var(--nav-rail-window-action-size) + ( var(--nav-rail-collapsed-window-bar-action-count) - 1 ) * var(--nav-rail-window-action-gap) );--nav-rail-collapsed-window-bar-width: var( --nav-rail-collapsed-window-bar-computed-width );--nav-rail-window-icon-color: var(--placeholder-color);--sidebar-inline-action-size: 20px;--sidebar-inline-action-icon-size: 16px;--sidebar-inline-action-radius: 5px;--oneworks-compact-action-size: var(--sidebar-inline-action-size);--oneworks-compact-action-icon-size: var(--sidebar-inline-action-icon-size);--oneworks-compact-action-gap: 4px;--oneworks-compact-action-divider-width: 0px;--oneworks-compact-action-divider-color: var(--border-color);--oneworks-control-radius: 6px;--oneworks-group-radius: 8px;--oneworks-surface-radius: 12px;--oneworks-interactive-card-radius: 8px;--oneworks-switch-radius: 999px;--oneworks-switch-handle-radius: 999px;--oneworks-resize-handle-hit-size: 8px;--oneworks-resize-handle-line-width: 1px;--oneworks-resize-handle-active-line-width: 3px;--oneworks-resize-handle-line-radius: 999px;--oneworks-resize-handle-idle-color: var(--border-color);--oneworks-resize-handle-affordance-idle-color: transparent;--oneworks-resize-handle-hover-color: color-mix( in srgb, var(--primary-color) 48%, transparent );--oneworks-resize-handle-active-color: var( --oneworks-resize-handle-hover-color );--oneworks-resize-handle-shadow: none;--oneworks-resize-handle-mask-image: linear-gradient( to bottom, transparent 0%, #000 28%, #000 72%, transparent 100% );--oneworks-resize-handle-horizontal-mask-image: linear-gradient( to right, transparent 0%, #000 28%, #000 72%, transparent 100% );--oneworks-resize-handle-transition: background-color .16s ease, opacity .16s ease, width .16s ease, height .16s ease;--nav-rail-preview-radius: 0 10px 10px 0;--bg-color: #ffffff;--sub-bg-color: #f6f6f6;--sub-sub-bg-color: #e1e1e1;--text-color: #000000;--sub-text-color: #1b1b1b;--sub-sub-text-color: #303030;--border-color: #d0d0d0;--sub-border-color: #c0c0c0;--sub-sub-border-color: #a0a0a0;--placeholder-color: #9ca3af;--tag-bg: #f9fafb;--tag-hover-bg: #f3f4f6;--code-bg: #f0f2f4;--code-border: #f1f5f9;--star-color: #f59e0b;--primary-color: #e23f12;--primary-soft-bg: color-mix( in srgb, var(--primary-color) 12%, var(--bg-color) );--success-color: #0f766e;--warning-color: #b45309;--primary-text-color: color-mix( in srgb, var(--primary-color) 82%, var(--text-color) );--danger-color: #dc2626}@media (max-width: 420px){:root{--oneworks-mobile-panel-action-size: 32px;--oneworks-mobile-panel-radius: 7px}}html.dark{--app-chrome-overlay-background: color-mix( in srgb, var(--bg-color) 42%, transparent );--bg-color: #141414;--sub-bg-color: #262626;--sub-sub-bg-color: #303030;--text-color: #ffffff;--sub-text-color: #8c8c8c;--sub-sub-text-color: #a5a5a5;--border-color: #303030;--sub-border-color: #434343;--sub-sub-border-color: #595959;--placeholder-color: #575859;--tag-bg: #1f1f1f;--tag-hover-bg: #262626;--code-bg: #1e293b;--code-border: #334155;--star-color: #ffb81c;--primary-color: #e23f12;--primary-soft-bg: color-mix( in srgb, var(--primary-color) 12%, var(--bg-color) );--success-color: #2dd4bf;--warning-color: #f59e0b;--primary-text-color: color-mix( in srgb, var(--primary-color) 82%, var(--text-color) );--danger-color: #f87171}.oneworks-avatar,.oneworks-avatar-editor{box-sizing:border-box;color:var(--text-color);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.oneworks-avatar *,.oneworks-avatar-editor *{box-sizing:border-box}.oneworks-avatar{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--oneworks-avatar-background, transparent)}.oneworks-avatar[data-frame=rounded]{border-radius:12.5%}.oneworks-avatar[data-frame=circle]{border-radius:50%}.oneworks-avatar>.interactive-avatar{width:100%;height:100%}.oneworks-avatar-editor{position:relative;display:block;width:100%;min-width:0;min-height:640px;overflow:hidden;background:var(--bg-color)}.oneworks-avatar-editor>.avatar-app{min-height:inherit}.oneworks-avatar-editor>.avatar-app.dark{--app-chrome-overlay-background: color-mix( in srgb, var(--bg-color) 42%, transparent );--bg-color: #141414;--sub-bg-color: #262626;--sub-sub-bg-color: #303030;--text-color: #ffffff;--sub-text-color: #8c8c8c;--sub-sub-text-color: #a5a5a5;--border-color: #303030;--sub-border-color: #434343;--sub-sub-border-color: #595959;--placeholder-color: #575859;--tag-bg: #1f1f1f;--tag-hover-bg: #262626;--code-bg: #1e293b;--code-border: #334155;--star-color: #ffb81c;--primary-color: #e23f12;--primary-soft-bg: color-mix( in srgb, var(--primary-color) 12%, var(--bg-color) );--success-color: #2dd4bf;--warning-color: #f59e0b;--primary-text-color: color-mix( in srgb, var(--primary-color) 82%, var(--text-color) );--danger-color: #f87171}.avatar-app{min-height:100vh;background:linear-gradient(180deg,color-mix(in srgb,var(--primary-color) 6%,var(--bg-color)),var(--bg-color) 220px)}.avatar-app__workspace{display:grid;min-height:100vh;grid-template-columns:minmax(0,1fr) min(var(--avatar-controls-width, 420px),100vw - 160px);grid-template-rows:minmax(0,1fr)}.avatar-app__workspace[data-animation-open=true]{height:100vh;min-height:0;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.avatar-app__workspace[data-controls-collapsed=true]{grid-template-columns:minmax(0,1fr)}.avatar-app__workspace[data-controls-collapsed=true]>.avatar-controls{display:none}.avatar-app__workspace[data-controls-collapsed=true] .avatar-app__stage{grid-column:1/-1}.avatar-app__preset-capture{position:fixed;z-index:-1;top:0;left:-10000px;display:grid;grid-auto-flow:column;pointer-events:none}.avatar-app__preset-capture-frame{width:256px;height:256px}.avatar-app__stage{position:relative;display:grid;container:avatar-stage/inline-size;grid-column:1;grid-row:1;min-width:0;min-height:100vh;grid-template-rows:minmax(0,1fr);padding:clamp(20px,4vw,48px)}.avatar-app__workspace>.avatar-controls{grid-column:2;grid-row:1;min-width:0}.avatar-app__workspace[data-animation-open=true] .avatar-app__stage{min-height:0}.avatar-app__workspace[data-animation-open=true]>.avatar-controls{height:auto;min-height:0}.avatar-app__camera-tools{position:absolute;z-index:2;top:16px;left:16px;display:flex;align-items:center;gap:8px}.avatar-app__stage-actions{position:absolute;z-index:2;top:16px;right:16px;display:flex;align-items:center;justify-content:flex-end;gap:8px}.avatar-app__camera-toggle,.avatar-app__home-link,.avatar-app__controls-toggle,.avatar-app__github-link,.avatar-app__language-toggle,.avatar-app__save-preset,.avatar-app__theme-toggle,.avatar-app__animation-toggle{display:inline-grid;width:42px;height:42px;place-items:center;border:1px solid var(--border-color);border-radius:8px;background:color-mix(in srgb,var(--bg-color) 90%,transparent);color:var(--sub-text-color);backdrop-filter:blur(12px);cursor:pointer}.avatar-app__camera-toggle svg,.avatar-app__home-link svg,.avatar-app__controls-toggle svg,.avatar-app__github-link svg,.avatar-app__language-toggle svg,.avatar-app__save-preset svg,.avatar-app__theme-toggle svg,.avatar-app__animation-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.avatar-app__camera-toggle[aria-pressed=true],.avatar-app__home-link[aria-pressed=true],.avatar-app__controls-toggle[aria-pressed=true],.avatar-app__github-link[aria-pressed=true],.avatar-app__language-toggle[aria-pressed=true],.avatar-app__save-preset[aria-pressed=true],.avatar-app__theme-toggle[aria-pressed=true],.avatar-app__animation-toggle[aria-pressed=true],.avatar-app__camera-toggle[data-state=saved],.avatar-app__home-link[data-state=saved],.avatar-app__controls-toggle[data-state=saved],.avatar-app__github-link[data-state=saved],.avatar-app__language-toggle[data-state=saved],.avatar-app__save-preset[data-state=saved],.avatar-app__theme-toggle[data-state=saved],.avatar-app__animation-toggle[data-state=saved]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-app__camera-toggle[data-state=error],.avatar-app__home-link[data-state=error],.avatar-app__controls-toggle[data-state=error],.avatar-app__github-link[data-state=error],.avatar-app__language-toggle[data-state=error],.avatar-app__save-preset[data-state=error],.avatar-app__theme-toggle[data-state=error],.avatar-app__animation-toggle[data-state=error]{border-color:var(--danger-color, #d95a4e);color:var(--danger-color, #d95a4e)}.avatar-app__camera-toggle:disabled,.avatar-app__home-link:disabled,.avatar-app__controls-toggle:disabled,.avatar-app__github-link:disabled,.avatar-app__language-toggle:disabled,.avatar-app__save-preset:disabled,.avatar-app__theme-toggle:disabled,.avatar-app__animation-toggle:disabled{cursor:wait;opacity:.64}.avatar-app__camera-toggle:focus-visible,.avatar-app__home-link:focus-visible,.avatar-app__controls-toggle:focus-visible,.avatar-app__github-link:focus-visible,.avatar-app__language-toggle:focus-visible,.avatar-app__save-preset:focus-visible,.avatar-app__theme-toggle:focus-visible,.avatar-app__animation-toggle:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-app__github-link{text-decoration:none}.avatar-app__github-link svg{fill:currentColor;stroke:none}.avatar-app__home-link{text-decoration:none}.avatar-app__animation-toggle{position:absolute;z-index:3;left:16px;bottom:16px}.avatar-app__stage-preview{display:grid;width:min(100%,560px);min-height:0;align-items:center;justify-self:center;justify-items:stretch}.avatar-app__preview-art{display:grid;aspect-ratio:1;width:100%;max-width:304px;place-items:center;align-self:center;border:1px solid transparent;border-radius:0;background:transparent;overflow:visible;transition:background-color .18s ease,border-color .18s ease,border-radius .18s ease,box-shadow .18s ease}.avatar-app__preview-art--hero{max-width:none}.avatar-app__stage[data-camera-mode=true] .avatar-app__preview-art{border-color:var(--border-color);background:var(--avatar-camera-background);box-shadow:var(--avatar-frame-shadow);overflow:hidden}.avatar-app__stage[data-camera-mode=true][data-camera-background=transparent] .avatar-app__preview-art{background-color:transparent;background-image:linear-gradient(45deg,color-mix(in srgb,var(--text-color) 9%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--text-color) 9%,transparent) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,color-mix(in srgb,var(--text-color) 9%,transparent) 75%),linear-gradient(-45deg,transparent 75%,color-mix(in srgb,var(--text-color) 9%,transparent) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.avatar-app__stage[data-camera-mode=true][data-camera-frame=rounded] .avatar-app__preview-art{border-radius:32px}.avatar-app__stage[data-camera-mode=true][data-camera-frame=circle] .avatar-app__preview-art{border-radius:50%}.avatar-app__interaction-mode{position:absolute;bottom:16px;left:66px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border-color);border-radius:8px;padding:3px;background:color-mix(in srgb,var(--bg-color) 90%,transparent);backdrop-filter:blur(12px);transition:left .16s ease}.avatar-app__workspace[data-animation-open=true] .avatar-app__interaction-mode{left:16px}.avatar-app__interaction-mode--docked{position:static;flex:0 0 auto;height:34px}.avatar-app__interaction-mode--docked .avatar-app__interaction-mode-option{height:26px}.avatar-app__interaction-mode-option{display:inline-flex;width:34px;min-width:34px;height:34px;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--sub-text-color);cursor:pointer;font-size:12px;font-weight:700}.avatar-app__interaction-mode-option svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.avatar-app__interaction-mode-option[aria-pressed=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-app__interaction-mode-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-app[data-embedded=true],.avatar-app[data-embedded=true] .avatar-app__workspace,.avatar-app[data-embedded=true] .avatar-app__workspace[data-animation-open=true]{height:100%;min-height:inherit}.avatar-app[data-embedded=true] .avatar-app__stage{min-height:inherit}.avatar-orientation-control{position:absolute;z-index:3;right:16px;bottom:16px;width:96px;height:96px}.avatar-orientation-control__reset,.avatar-orientation-control__orbit{display:inline-grid;flex:0 0 auto;place-items:center;border:1px solid var(--border-color);background:color-mix(in srgb,var(--bg-color) 90%,transparent);color:var(--sub-text-color);backdrop-filter:blur(12px);cursor:pointer}.avatar-orientation-control__reset:focus-visible,.avatar-orientation-control__orbit:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.avatar-orientation-control__reset{position:absolute;z-index:2;right:1px;bottom:1px;width:26px;height:26px;border-radius:7px;background:color-mix(in srgb,var(--bg-color) 86%,transparent);box-shadow:0 3px 10px color-mix(in srgb,black 12%,transparent)}.avatar-orientation-control__reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}.avatar-orientation-control__orbit{width:96px;height:96px;border:0;border-radius:50%;padding:4px;background:transparent;box-shadow:none;cursor:default;touch-action:none}.avatar-orientation-control__orbit[data-active-control]{cursor:grabbing}.avatar-orientation-control__orbit svg{width:100%;height:100%;overflow:visible}.avatar-orientation-control__outer-ring{fill:none;opacity:.9;pointer-events:none;stroke:#ffd84d;stroke-width:3;transition:opacity .12s ease,stroke-width .12s ease;vector-effect:non-scaling-stroke}.avatar-orientation-control__outer-ring[data-highlighted=true]{opacity:1;stroke-width:5.8}.avatar-orientation-control__roll-handle{fill:#ffd84d;opacity:.92;pointer-events:none}.avatar-orientation-control__roll-handle[data-highlighted=true]{opacity:1;r:3px}.avatar-orientation-control__ring{pointer-events:none;transition:opacity .12s ease,stroke-width .12s ease;vector-effect:non-scaling-stroke}.avatar-orientation-control__ring--far{opacity:.38;stroke-width:2.8}.avatar-orientation-control__ring--front{opacity:.94;stroke-linecap:round;stroke-width:3.6}g[data-highlighted=true] .avatar-orientation-control__ring--far{opacity:.7;stroke-width:5}g[data-highlighted=true] .avatar-orientation-control__ring--front{opacity:1;stroke-width:6.6}.avatar-orientation-control__ring-hit{fill:none;pointer-events:stroke;stroke:transparent;stroke-width:16;cursor:grab}.avatar-orientation-control__ring-hit--outer{stroke-width:15}@container avatar-stage (max-width: 340px){.avatar-orientation-control{right:10px;bottom:10px;width:72px;height:72px}.avatar-orientation-control__reset{width:22px;height:22px}.avatar-orientation-control__reset svg{width:13px;height:13px}.avatar-orientation-control__orbit{width:72px;height:72px}}.avatar-language-switcher{position:relative;display:flex;flex:0 0 auto}.avatar-language-switcher__dialog{position:absolute;z-index:20;top:calc(100% + 8px);right:0;width:236px;padding:8px;border:1px solid var(--border-color);border-radius:12px;background:color-mix(in srgb,var(--bg-color) 96%,transparent);box-shadow:0 16px 42px color-mix(in srgb,black 34%,transparent);backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%)}.avatar-language-switcher__title{display:block;padding:6px 8px 10px;color:var(--sub-text-color);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.avatar-language-switcher__options{display:grid;gap:4px}.avatar-language-switcher__option{display:flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:8px;padding:8px 10px;background:transparent;color:var(--text-color);cursor:pointer;text-align:left}.avatar-language-switcher__option>span{display:grid;gap:2px}.avatar-language-switcher__option strong{font-size:14px;font-weight:700}.avatar-language-switcher__option small{color:var(--sub-text-color);font-size:11px}.avatar-language-switcher__option svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;opacity:0}.avatar-language-switcher__option:hover{background:color-mix(in srgb,var(--text-color) 7%,transparent)}.avatar-language-switcher__option[aria-checked=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-language-switcher__option[aria-checked=true] svg{opacity:1}.avatar-language-switcher__option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}@media (max-width: 840px){.avatar-app__workspace{grid-template-columns:1fr;grid-template-rows:auto auto}.avatar-app__workspace[data-animation-open=true]{height:auto;min-height:100vh;grid-template-rows:auto auto auto;overflow:visible}.avatar-app__workspace[data-controls-collapsed=true][data-animation-open=true]{grid-template-rows:auto auto}.avatar-app__stage{grid-column:1;grid-row:1;min-height:auto;grid-template-rows:auto}.avatar-app__workspace>.avatar-controls{grid-column:1;grid-row:2}.avatar-app__preview-art{max-width:240px}.avatar-app__preview-art--hero{max-width:none}}@media (max-width: 520px){.avatar-app__stage{padding:16px}}@media (prefers-reduced-motion: reduce){.avatar-app__preview-art{transition:none}}.avatar-animation-panel{position:relative;z-index:2;display:grid;grid-column:1/-1;grid-row:2;width:100%;height:min(var(--avatar-animation-height, 244px),100vh - 96px);grid-template-rows:auto minmax(0,1fr);border-top:1px solid var(--border-color);padding:12px 16px 16px;background:color-mix(in srgb,var(--bg-color) 70%,transparent);box-shadow:inset 0 1px color-mix(in srgb,white 24%,transparent);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%)}.avatar-animation-panel[data-resizing=true]{user-select:none}.avatar-animation-panel__resize-handle{position:absolute;z-index:4;top:-5px;left:50%;width:72px;height:12px;border-radius:999px;transform:translate(-50%);cursor:ns-resize;touch-action:none}.avatar-animation-panel__resize-handle:after{position:absolute;top:5px;left:50%;width:42px;height:3px;border-radius:999px;background:color-mix(in srgb,var(--sub-text-color) 42%,transparent);content:"";transform:translate(-50%);transition:background-color .14s ease,width .14s ease}.avatar-animation-panel__resize-handle:hover:after,.avatar-animation-panel__resize-handle:focus-visible:after,.avatar-animation-panel[data-resizing=true] .avatar-animation-panel__resize-handle:after{width:52px;background:var(--primary-color)}.avatar-animation-panel__resize-handle:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-animation-panel__header,.avatar-animation-panel__header-leading,.avatar-animation-panel__tabs,.avatar-animation-panel__duration,.avatar-animation-panel__actions,.avatar-animation-panel__keyframes,.avatar-animation-panel__settings-frames,.avatar-animation-panel__setting-row,.avatar-animation-panel__segments{display:flex;align-items:center}.avatar-animation-panel__header{justify-content:space-between;gap:12px;min-width:0;padding-bottom:10px}.avatar-animation-panel__header-leading{min-width:0;gap:10px}.avatar-animation-panel__close{display:inline-grid;flex:0 0 34px;width:34px;height:34px;place-items:center;border:1px solid var(--primary-color);border-radius:7px;background:var(--primary-soft-bg);color:var(--primary-text-color);cursor:pointer}.avatar-animation-panel__close:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-animation-panel__close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.45}.avatar-animation-panel__tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid var(--border-color);border-radius:7px;padding:3px;background:var(--bg-color)}.avatar-animation-panel__tabs .avatar-animation-panel__tab-button{display:inline-flex;min-width:98px;height:26px;align-items:center;justify-content:center;gap:6px;border:0;border-radius:5px;background:transparent;color:var(--sub-text-color);cursor:pointer;font-size:11px;font-weight:700}.avatar-animation-panel__tabs .avatar-animation-panel__tab-button[aria-selected=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-animation-panel__tabs .avatar-animation-panel__tab-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-animation-panel__tabs .avatar-animation-panel__tab-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.45}.avatar-animation-panel__create-tab{display:flex;min-width:98px;height:26px;align-items:center;overflow:hidden;border-radius:5px;color:var(--sub-text-color)}.avatar-animation-panel__create-tab[data-selected=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-animation-panel__create-tab .avatar-animation-panel__tab-button{min-width:0;flex:1 1 auto;padding-right:3px;background:transparent;color:inherit}.avatar-animation-panel__create-tab .avatar-animation-panel__tab-button[aria-selected=true]{background:transparent}.avatar-animation-panel__tab-label{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar-animation-panel__deselect-library{display:inline-grid;min-width:20px;width:20px;height:20px;flex:0 0 20px;place-items:center;border:0;border-radius:5px;padding:0;margin-right:3px;background:transparent;color:inherit;cursor:pointer}.avatar-animation-panel__deselect-library:hover,.avatar-animation-panel__deselect-library:focus-visible{outline:none;background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-animation-panel__deselect-library svg{width:12px;height:12px}.avatar-animation-panel__deselect-library svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.45}.avatar-animation-panel__body{display:grid;min-height:0;grid-template-columns:minmax(0,1fr);gap:12px;border-top:1px solid var(--border-color);padding-top:10px}.avatar-animation-panel__body[data-settings-open=true]{grid-template-columns:minmax(0,1fr) minmax(260px,310px)}.avatar-animation-panel__content{min-width:0;min-height:0;overflow:hidden}.avatar-animation-panel__keyframes,.avatar-animation-panel__library{gap:7px;padding:2px}.avatar-animation-panel__keyframes button,.avatar-animation-panel__library button{display:inline-grid;flex:0 0 auto;place-items:center;border:1px solid var(--border-color);background:var(--bg-color);color:var(--sub-text-color);cursor:pointer;font-size:10px;font-weight:750}.avatar-animation-panel__keyframes button:focus-visible,.avatar-animation-panel__library button:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-animation-panel__keyframes{overflow-x:auto;overscroll-behavior-x:contain}.avatar-animation-panel__library{display:grid;height:100%;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));align-content:start;align-items:flex-start;gap:8px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.avatar-animation-panel__library-item{position:relative;width:100%;min-width:0;height:88px;overflow:hidden;border-radius:8px;padding:0;background:transparent!important}.avatar-animation-panel__library-item:hover,.avatar-animation-panel__library-item[aria-pressed=true]{border-color:var(--primary-color);color:var(--primary-text-color)}.avatar-animation-panel__library-item[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--primary-color)}.avatar-animation-panel__library-item-wrapper{position:relative;min-width:0;height:88px}.avatar-animation-panel__library-item-wrapper .avatar-animation-panel__library-item{height:100%}.avatar-animation-panel__library-delete{position:absolute;z-index:2;top:5px;right:5px;display:inline-grid!important;width:22px!important;min-width:22px!important;height:22px!important;place-items:center;border-color:color-mix(in srgb,var(--border-color) 76%,transparent)!important;border-radius:6px!important;padding:0!important;background:color-mix(in srgb,var(--bg-color) 88%,transparent)!important;color:var(--sub-text-color)!important;backdrop-filter:blur(6px)}.avatar-animation-panel__library-delete:hover,.avatar-animation-panel__library-delete:focus-visible{border-color:#ef5b51!important;color:#ef5b51!important}.avatar-animation-panel__library-delete svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.45}.avatar-animation-panel__library-preview{display:block;width:100%;height:100%;pointer-events:none}.avatar-animation-panel__library-preview .interactive-avatar,.avatar-animation-panel__library-preview .interactive-avatar__canvas{width:100%;height:100%;pointer-events:none}.avatar-animation-panel__library-name{position:absolute;right:4px;bottom:4px;max-width:calc(100% - 8px);overflow:hidden;border-radius:999px;padding:2px 6px;background:color-mix(in srgb,var(--bg-color) 82%,transparent);color:var(--text-color);font-size:9px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(5px);pointer-events:none}.avatar-animation-panel__confirmation-backdrop{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:18px;background:color-mix(in srgb,var(--bg-color) 56%,transparent);backdrop-filter:blur(8px)}.avatar-animation-panel__confirmation{display:grid;width:min(360px,100%);gap:9px;border:1px solid var(--border-color);border-radius:10px;padding:16px;background:color-mix(in srgb,var(--bg-color) 94%,black 6%);box-shadow:0 16px 48px color-mix(in srgb,black 42%,transparent);color:var(--text-color)}.avatar-animation-panel__confirmation p{margin:0;color:var(--sub-text-color);font-size:11px;line-height:1.5}.avatar-animation-panel__confirmation-title{font-size:13px;font-weight:800}.avatar-animation-panel__confirmation-actions{display:flex;justify-content:flex-end;gap:7px;padding-top:3px}.avatar-animation-panel__confirmation-actions button{min-width:72px;height:30px;border:1px solid var(--border-color);border-radius:7px;padding:0 12px;background:var(--bg-color);color:var(--text-color);cursor:pointer;font-size:10px;font-weight:750}.avatar-animation-panel__confirmation-actions button:hover,.avatar-animation-panel__confirmation-actions button:focus-visible{border-color:var(--primary-color);outline:none;color:var(--primary-text-color)}.avatar-animation-panel__confirmation-actions button:last-child{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-animation-panel__confirmation-actions button[data-danger=true]{border-color:#ef5b51;background:color-mix(in srgb,#ef5b51 15%,var(--bg-color));color:#ef776f}.avatar-animation-panel__keyframe-item{position:relative;flex:0 0 48px;width:48px;height:48px}.avatar-animation-panel__keyframe,.avatar-animation-panel__add-keyframe{position:relative;width:48px;min-width:48px;height:48px;overflow:hidden;border-radius:8px}.avatar-animation-panel__keyframe{border-width:2px!important;border-color:transparent!important;padding:0}.avatar-animation-panel__keyframe img{display:block;width:100%;height:100%;object-fit:cover}.avatar-animation-panel__keyframe[aria-pressed=true]{border-color:var(--primary-color)!important}.avatar-animation-panel__delete-keyframe{position:absolute;z-index:2;top:3px;right:3px;display:inline-grid!important;width:18px!important;min-width:18px!important;height:18px!important;place-items:center;border:0!important;border-radius:50%!important;padding:0!important;background:color-mix(in srgb,var(--bg-color) 86%,transparent)!important;color:var(--text-color)!important;opacity:0;transition:opacity .12s ease}.avatar-animation-panel__delete-keyframe svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7}.avatar-animation-panel__keyframe-item:hover .avatar-animation-panel__delete-keyframe,.avatar-animation-panel__keyframe-item:focus-within .avatar-animation-panel__delete-keyframe,.avatar-animation-panel__keyframe-item[data-active=true] .avatar-animation-panel__delete-keyframe{opacity:1}.avatar-animation-panel__keyframe-fallback{display:inline-grid;width:18px;height:18px;place-items:center;border:1px solid currentColor;transform:rotate(45deg)}.avatar-animation-panel__keyframe-number,.avatar-animation-panel__settings-frame>span{position:absolute;right:3px;bottom:3px;display:inline-grid;min-width:16px;height:16px;place-items:center;border-radius:999px;padding:0 4px;background:color-mix(in srgb,var(--bg-color) 84%,transparent);color:var(--text-color);font-size:9px;font-weight:800;backdrop-filter:blur(5px)}.avatar-animation-panel__keyframes .avatar-animation-panel__add-keyframe{border-style:dashed}.avatar-animation-panel__keyframes .avatar-animation-panel__add-keyframe svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.5}.avatar-animation-panel__keyframes .avatar-animation-panel__add-keyframe:disabled{cursor:wait;opacity:.44}.avatar-animation-panel__settings{display:grid;min-height:0;min-width:0;align-content:start;gap:9px;overflow-y:auto;border-left:1px solid var(--border-color);padding-left:12px}.avatar-animation-panel__settings-frames{gap:5px;overflow-x:auto;padding-bottom:2px}.avatar-animation-panel__settings-frame{position:relative;display:block;width:36px;min-width:36px;height:36px;overflow:hidden;border:1px solid var(--border-color);border-radius:6px;padding:0;background:var(--bg-color);cursor:pointer}.avatar-animation-panel__settings-frame[aria-pressed=true]{border-color:var(--primary-color);box-shadow:inset 0 0 0 1px var(--primary-color)}.avatar-animation-panel__settings-frame:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-animation-panel__settings-frame>img,.avatar-animation-panel__settings-frame .interactive-avatar,.avatar-animation-panel__settings-frame .interactive-avatar__canvas{display:block;width:100%;height:100%;pointer-events:none}.avatar-animation-panel__settings-frame>img{object-fit:cover}.avatar-animation-panel__settings-frame>span{min-width:13px;height:13px;padding:0 3px;font-size:8px}.avatar-animation-panel__settings-title{color:var(--text-color);font-size:11px;font-weight:800;letter-spacing:.01em}.avatar-animation-panel__timing-help{margin:0;color:var(--sub-text-color);font-size:9px;line-height:1.45}.avatar-animation-panel__group-name{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px;color:var(--sub-text-color);font-size:10px;font-weight:700}.avatar-animation-panel__group-name input{min-width:0;height:28px;border:1px solid var(--border-color);border-radius:6px;padding:0 8px;background:var(--bg-color);color:var(--text-color);font:inherit}.avatar-animation-panel__group-name input:focus-visible{border-color:var(--primary-color);outline:2px solid color-mix(in srgb,var(--primary-color) 28%,transparent);outline-offset:1px}.avatar-animation-panel__lock-toggle{min-width:132px;height:28px;border:1px solid var(--border-color);border-radius:6px;padding:0 9px;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer;font:inherit}.avatar-animation-panel__lock-toggle[aria-pressed=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-animation-panel__start-frame-setting{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px;color:var(--sub-text-color);font-size:10px;font-weight:700}.avatar-animation-panel__start-frames{display:flex;min-width:0;gap:5px;overflow-x:auto;padding:2px;overscroll-behavior-x:contain}.avatar-animation-panel__start-frames button{position:relative;display:block;flex:0 0 34px;width:34px;height:34px;overflow:hidden;border:1px solid var(--border-color);border-radius:6px;padding:0;background:var(--bg-color);cursor:pointer}.avatar-animation-panel__start-frames button[aria-pressed=true]{border-color:var(--primary-color);box-shadow:inset 0 0 0 1px var(--primary-color)}.avatar-animation-panel__start-frames button:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-animation-panel__start-frames button>img,.avatar-animation-panel__start-frames button .interactive-avatar,.avatar-animation-panel__start-frames button .interactive-avatar__canvas{display:block;width:100%;height:100%;pointer-events:none}.avatar-animation-panel__start-frames button>img{object-fit:cover}.avatar-animation-panel__start-frames button>span{position:absolute;right:2px;bottom:2px;display:inline-grid;min-width:13px;height:13px;place-items:center;border-radius:999px;padding:0 3px;background:color-mix(in srgb,var(--bg-color) 84%,transparent);color:var(--text-color);font-size:8px;font-weight:800}.avatar-animation-panel__duration{display:grid;grid-template-columns:52px minmax(70px,1fr) 34px;gap:8px;color:var(--sub-text-color);font-size:10px;font-weight:700}.avatar-animation-panel__duration input{width:100%;accent-color:var(--primary-color);cursor:pointer}.avatar-animation-panel__duration output{color:var(--primary-text-color);font-variant-numeric:tabular-nums;text-align:right}.avatar-animation-panel__setting-row{justify-content:space-between;gap:10px;color:var(--sub-text-color);font-size:10px;font-weight:700}.avatar-animation-panel__setting-row>span{flex:0 0 52px}.avatar-animation-panel__setting-row select{width:min(100%,170px);height:28px;border:1px solid var(--border-color);border-radius:6px;padding:0 8px;background:var(--bg-color);color:var(--text-color);font:inherit}.avatar-animation-panel__segments{display:grid;width:min(100%,170px);grid-template-columns:repeat(2,1fr);overflow:hidden;border:1px solid var(--border-color);border-radius:8px;padding:3px;background:var(--bg-color)}.avatar-animation-panel__segments button{height:28px;border:0;border-radius:6px;background:transparent;color:var(--sub-text-color);cursor:pointer;font:inherit}.avatar-animation-panel__segments button[aria-pressed=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-animation-panel__segments button:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-animation-panel__actions{flex:0 0 auto;justify-content:flex-end;gap:6px}.avatar-animation-panel__actions button{display:inline-grid;width:32px;height:32px;place-items:center;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer}.avatar-animation-panel__actions button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.avatar-animation-panel__actions button[data-active=true],.avatar-animation-panel__actions button:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-text-color)}.avatar-animation-panel__actions button:disabled{cursor:not-allowed;opacity:.38}@media (max-width: 840px){.avatar-animation-panel{grid-column:1;grid-row:3}.avatar-animation-panel__body[data-settings-open=true]{grid-template-columns:minmax(0,1fr) minmax(230px,280px)}.avatar-app__workspace[data-controls-collapsed=true]>.avatar-animation-panel{grid-row:2}}@media (max-width: 520px){.avatar-animation-panel{height:auto;max-height:none;min-height:300px}.avatar-animation-panel__resize-handle{display:none}.avatar-animation-panel__body[data-settings-open=true]{grid-template-columns:1fr}.avatar-animation-panel__settings{border-top:1px solid var(--border-color);border-left:0;padding-top:10px;padding-left:0}}.avatar-controls{position:sticky;top:0;display:flex;height:100vh;flex-direction:column;padding:16px;border-left:1px solid var(--border-color);background:color-mix(in srgb,var(--bg-color) 70%,transparent);box-shadow:inset 1px 0 color-mix(in srgb,white 22%,transparent);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);overflow:visible}.avatar-controls[data-resizing=true]{user-select:none}.avatar-controls__header{display:flex;flex:0 0 auto;min-width:0;align-items:center;gap:8px}.avatar-controls__collapse{display:inline-grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border:1px solid var(--primary-color);border-radius:8px;background:var(--primary-soft-bg);color:var(--primary-text-color);cursor:pointer}.avatar-controls__collapse:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-controls__collapse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.avatar-controls__header-actions{display:flex;flex:0 0 auto;gap:6px}.avatar-controls__header-actions .avatar-app__github-link,.avatar-controls__header-actions .avatar-app__camera-toggle,.avatar-controls__header-actions .avatar-app__language-toggle,.avatar-controls__header-actions .avatar-app__theme-toggle{width:42px;height:42px}.avatar-controls__resize-handle{position:absolute;z-index:4;top:50%;left:-6px;width:12px;height:82px;border-radius:999px;transform:translateY(-50%);cursor:col-resize;touch-action:none}.avatar-controls__resize-handle:after{position:absolute;top:50%;left:5px;width:3px;height:44px;border-radius:999px;background:color-mix(in srgb,var(--sub-text-color) 42%,transparent);content:"";transform:translateY(-50%);transition:background-color .14s ease,height .14s ease}.avatar-controls__resize-handle:hover:after,.avatar-controls__resize-handle:focus-visible:after,.avatar-controls[data-resizing=true] .avatar-controls__resize-handle:after{height:56px;background:var(--primary-color)}.avatar-controls__resize-handle:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-controls__tabs{display:grid;min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));flex:1 1 auto;overflow:hidden;border:1px solid var(--border-color);border-radius:8px;padding:3px;background:var(--bg-color)}.avatar-controls__tab{display:inline-flex;height:34px;align-items:center;justify-content:center;gap:0;border:0;border-radius:6px;background:transparent;color:var(--sub-text-color);cursor:pointer;font-size:12px;font-weight:700}.avatar-controls__tab[aria-selected=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__tab:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__tab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.avatar-controls__panel{display:flex;min-height:0;flex-direction:column;gap:18px;padding-top:18px;overflow-y:auto;overscroll-behavior-y:contain}.avatar-controls__field-group,.avatar-controls__part-row,.avatar-controls__saved-presets{display:grid;gap:8px}.avatar-controls__saved-preset-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,52px));align-content:start;justify-content:start;gap:8px;padding:2px;overflow-x:hidden}.avatar-controls__saved-preset{display:block;position:relative;aspect-ratio:1;min-width:0;border:0;border-radius:0;padding:0;background:transparent;cursor:pointer;overflow:hidden}.avatar-controls__saved-preset img{display:block;width:100%;height:100%;object-fit:cover}.avatar-controls__saved-preset[aria-pressed=true]{box-shadow:0 0 0 2px var(--primary-color)}.avatar-controls__saved-preset[data-frame=rounded]{border-radius:7px}.avatar-controls__saved-preset[data-frame=circle]{border-radius:50%}.avatar-controls__saved-preset:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__saved-preset--entity-preset{display:grid;place-items:center;align-content:center;gap:1px;border-radius:8px;background:color-mix(in srgb,var(--bg-color) 86%,transparent);box-shadow:0 0 0 1px var(--border-color);color:var(--sub-text-color);font-size:8px;font-weight:700;line-height:1}.avatar-controls__saved-preset--entity-preset:hover{box-shadow:0 0 0 1px var(--primary-color);color:var(--primary-text-color)}.avatar-controls__saved-preset--entity-preset[aria-pressed=true]{box-shadow:0 0 0 2px var(--primary-color)}.avatar-controls__entity-preset-icon{display:block;width:100%;height:100%;overflow:hidden}.avatar-controls__entity-parts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.avatar-controls__entity-parts button{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:1px solid var(--border-color);border-radius:8px;padding:7px;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer}.avatar-controls__entity-parts button[aria-selected=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__entity-parts button:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.avatar-controls__entity-parts button>svg{width:24px;height:24px}.avatar-controls__entity-parts button>span{position:absolute;right:3px;bottom:2px;font-size:8px;font-weight:700}.avatar-controls__entity-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.avatar-controls__field-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.avatar-controls__inline-action,.avatar-controls__danger-action{border:1px solid var(--border-color);border-radius:8px;padding:7px 10px;background:var(--bg-color);color:var(--text-color);font:inherit;cursor:pointer}.avatar-controls__inline-action{color:var(--primary-text-color)}.avatar-controls__danger-action{width:100%;color:#e7594f}.avatar-controls__hint{margin:0;color:var(--sub-text-color);font-size:12px;line-height:1.5}.avatar-controls__decal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.avatar-controls__decal-list button{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--border-color);border-radius:8px;padding:8px;overflow:hidden;background:var(--bg-color);color:var(--sub-text-color);text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.avatar-controls__decal-list button[aria-selected=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__decal-list button>span{flex:0 0 auto;width:14px;height:14px;border:1px solid rgba(127,127,127,.35);border-radius:50%}.avatar-controls__decal-editor{display:grid;gap:10px}.avatar-controls__select-field{display:grid;gap:6px;color:var(--sub-text-color);font-size:12px}.avatar-controls__select-field select{width:100%;border:1px solid var(--border-color);border-radius:8px;padding:8px 10px;background:var(--bg-color);color:var(--text-color);font:inherit}.avatar-controls__entity-color{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border-color);border-radius:8px;padding:7px 8px;color:var(--sub-text-color);font-size:11px;font-weight:700}.avatar-controls__entity-color input{width:30px;height:24px;flex:0 0 auto;border:0;padding:0;background:transparent;cursor:pointer}.avatar-controls__saved-preset-item{position:relative;width:100%;min-width:0;aspect-ratio:1}.avatar-controls__saved-preset-item:hover .avatar-controls__saved-preset-remove,.avatar-controls__saved-preset-item:focus-within .avatar-controls__saved-preset-remove{opacity:1}.avatar-controls__saved-preset-remove{position:absolute;z-index:1;top:-4px;right:-4px;display:grid;width:18px;height:18px;place-items:center;border:1px solid var(--border-color);border-radius:50%;padding:0;background:color-mix(in srgb,var(--bg-color) 92%,transparent);color:var(--text-color);cursor:pointer;opacity:0;transition:opacity .14s ease,border-color .14s ease,color .14s ease}.avatar-controls__saved-preset-remove:hover,.avatar-controls__saved-preset-remove:focus-visible{border-color:var(--primary-color);color:var(--primary-color);opacity:1}.avatar-controls__saved-preset-remove:focus-visible{outline:2px solid var(--primary-soft-bg);outline-offset:1px}.avatar-controls__saved-preset-remove svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.6}.avatar-controls__saved-preset-empty{margin:0;padding:12px;border:1px dashed var(--border-color);border-radius:8px;color:var(--sub-text-color);font-size:11px;line-height:16px}.avatar-controls__body-grid{display:flex;flex-wrap:wrap;gap:8px}.avatar-controls__body-option{display:inline-grid;width:48px;height:48px;flex:0 0 48px;place-items:center;border:1px solid var(--border-color);border-radius:8px;padding:6px;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer}.avatar-controls__body-option[aria-pressed=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color);box-shadow:0 0 0 2px var(--primary-soft-bg)}.avatar-controls__body-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__face-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,56px));align-content:start;justify-content:start;gap:8px;overflow-x:hidden}.avatar-controls__face-preset{display:grid;min-width:0;height:56px;place-items:center;align-content:center;overflow:hidden;border:0;border-radius:8px;padding:4px;background:transparent;color:var(--sub-text-color);cursor:pointer}.avatar-controls__face-preset:hover{background:color-mix(in srgb,var(--primary-soft-bg) 58%,transparent);color:var(--primary-text-color)}.avatar-controls__face-preset[aria-pressed=true]{background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__face-preset:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__face-preset-preview{display:block;width:46px;height:46px;fill:currentColor}.avatar-controls__face-preset-head{fill:color-mix(in srgb,currentColor 9%,var(--bg-color));stroke:color-mix(in srgb,currentColor 38%,transparent);stroke-width:2}.avatar-controls__preset-more{display:grid;min-width:0;place-items:center;align-content:center;gap:3px;overflow:hidden;border:1px dashed var(--border-color);border-radius:8px;padding:4px;background:color-mix(in srgb,var(--bg-color) 82%,transparent);color:var(--sub-text-color);cursor:pointer}.avatar-controls__preset-more svg{display:block;width:24px;height:18px;fill:currentColor}.avatar-controls__preset-more:hover,.avatar-controls__preset-more:focus-visible{border-color:var(--primary-color);outline:none;background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__saved-preset-list>.avatar-controls__preset-more{aspect-ratio:1}.avatar-controls__face-presets>.avatar-controls__preset-more{width:56px;height:56px}.avatar-controls__preset-browser-backdrop{position:absolute;z-index:12;inset:0;display:grid;place-items:center;padding:18px;background:color-mix(in srgb,var(--bg-color) 52%,transparent);backdrop-filter:blur(8px)}.avatar-controls__preset-browser{display:grid;width:min(390px,100%);max-height:min(620px,100% - 16px);grid-template-rows:auto auto minmax(0,1fr);gap:10px;border:1px solid var(--border-color);border-radius:12px;padding:14px;background:color-mix(in srgb,var(--bg-color) 96%,black 4%);box-shadow:0 18px 56px color-mix(in srgb,black 44%,transparent);color:var(--text-color)}.avatar-controls__preset-browser-header{display:flex;min-width:0;align-items:center;justify-content:space-between;gap:10px}.avatar-controls__preset-browser-header h2{margin:0;font-size:13px;font-weight:800}.avatar-controls__preset-browser-header button{display:grid;width:28px;height:28px;flex:0 0 28px;place-items:center;border:1px solid var(--border-color);border-radius:7px;padding:0;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer}.avatar-controls__preset-browser-header button:hover,.avatar-controls__preset-browser-header button:focus-visible{border-color:var(--primary-color);outline:none;color:var(--primary-text-color)}.avatar-controls__preset-browser-header button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.6}.avatar-controls__preset-browser-search{display:flex;min-width:0;height:34px;align-items:center;gap:7px;border:1px solid var(--border-color);border-radius:8px;padding:0 9px;background:var(--bg-color);color:var(--sub-text-color)}.avatar-controls__preset-browser-search:focus-within{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-soft-bg)}.avatar-controls__preset-browser-search svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.5}.avatar-controls__preset-browser-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--text-color);font:inherit;font-size:11px}.avatar-controls__preset-browser-grid{display:grid;min-height:0;grid-template-columns:repeat(auto-fill,minmax(52px,56px));align-content:start;justify-content:start;gap:8px;padding:2px;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain}.avatar-controls__preset-browser-grid>.avatar-controls__face-preset{height:56px}.avatar-controls__preset-browser-empty{margin:0;padding:28px 12px;color:var(--sub-text-color);font-size:11px;text-align:center}.avatar-controls__body-shape-icon{display:block;width:32px;height:32px;fill:color-mix(in srgb,currentColor 18%,transparent);stroke:currentColor;stroke-linejoin:round;stroke-width:1.5}.avatar-controls__shape-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}.avatar-controls__shape-option{display:grid;min-width:0;min-height:72px;place-items:center;align-content:center;gap:5px;border:1px solid var(--border-color);border-radius:8px;padding:8px;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer;font-size:11px;font-weight:700}.avatar-controls__shape-option[aria-checked=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color);box-shadow:0 0 0 2px var(--primary-soft-bg)}.avatar-controls__shape-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__shape-icon{display:block;width:40px;height:32px;fill:color-mix(in srgb,currentColor 22%,transparent);stroke:currentColor;stroke-linejoin:round;stroke-width:1.5}.avatar-controls__label{display:inline-flex;align-items:center;gap:7px;color:var(--sub-text-color);font-size:12px;font-weight:700;text-transform:uppercase}.avatar-controls__part-builder{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px 6px}.avatar-controls__eye-grid{display:contents}.avatar-controls__eye-grid>.avatar-controls__part-row:first-child{grid-column:1/span 4}.avatar-controls__eye-grid>.avatar-controls__part-row:last-child{grid-column:5/span 4}.avatar-controls__part-builder>.avatar-controls__part-row{grid-column:1/-1}.avatar-controls__part-row{gap:6px}.avatar-controls__part-row-label{color:var(--sub-text-color);font-size:12px;line-height:16px}.avatar-controls__part-options{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.avatar-controls__eye-grid .avatar-controls__part-options{grid-template-columns:repeat(4,minmax(0,1fr))}.avatar-controls__part-option{display:grid;aspect-ratio:1;width:100%;min-width:0;place-items:stretch;border:1px solid var(--border-color);border-radius:7px;padding:0;background:var(--bg-color);cursor:pointer;overflow:hidden}.avatar-controls__part-option img{display:block;width:100%;height:100%;border-radius:6px;object-fit:cover}.avatar-controls__part-option[aria-pressed=true]{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-soft-bg)}.avatar-controls__swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.avatar-controls__swatch{display:grid;aspect-ratio:1;min-width:0;place-items:center;border:1px solid var(--border-color);border-radius:8px;padding:4px;background:var(--bg-color);cursor:pointer}.avatar-controls__swatch span{width:100%;height:100%;border-radius:5px;background:linear-gradient(135deg,var(--avatar-bg) 0 48%,var(--avatar-bg-end) 48% 72%,var(--avatar-fg) 72% 100%)}.avatar-controls__swatch[aria-pressed=true]{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft-bg)}.avatar-controls__palette-more{height:32px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-color);color:var(--sub-text-color);cursor:pointer;font-size:12px;font-weight:700}.avatar-controls__palette-more[aria-expanded=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__palette-confirmation-backdrop{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:18px;background:color-mix(in srgb,var(--bg-color) 56%,transparent);backdrop-filter:blur(8px)}.avatar-controls__palette-confirmation{display:grid;width:min(360px,100%);gap:9px;border:1px solid var(--border-color);border-radius:10px;padding:16px;background:color-mix(in srgb,var(--bg-color) 94%,black 6%);box-shadow:0 16px 48px color-mix(in srgb,black 42%,transparent);color:var(--text-color)}.avatar-controls__palette-confirmation p{margin:0;color:var(--sub-text-color);font-size:11px;line-height:1.5}.avatar-controls__palette-confirmation-title{font-size:13px;font-weight:800}.avatar-controls__palette-confirmation-actions{display:flex;justify-content:flex-end;gap:7px;padding-top:3px}.avatar-controls__palette-confirmation-actions button{min-width:72px;height:30px;border:1px solid var(--border-color);border-radius:7px;padding:0 12px;background:var(--bg-color);color:var(--text-color);cursor:pointer;font-size:10px;font-weight:750}.avatar-controls__palette-confirmation-actions button:hover,.avatar-controls__palette-confirmation-actions button:focus-visible{border-color:var(--primary-color);outline:none;color:var(--primary-text-color)}.avatar-controls__palette-confirmation-actions button:last-child{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-controls__segments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid var(--border-color);border-radius:8px;padding:3px;background:var(--bg-color)}.avatar-controls__face-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-controls__segment{display:inline-flex;height:34px;align-items:center;justify-content:center;gap:6px;border:0;border-radius:6px;background:transparent;color:var(--sub-text-color);cursor:pointer}.avatar-controls__segment[aria-pressed=true],.avatar-controls__segment[aria-selected=true]{background:var(--primary-soft-bg);color:var(--primary-text-color);font-weight:700}.avatar-controls__segment:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__toggle-row{display:flex;min-height:38px;align-items:center;justify-content:space-between;gap:12px}.avatar-controls__toggle-label{display:inline-flex;align-items:center;gap:8px;color:var(--sub-text-color);font-size:13px;line-height:18px}.avatar-controls__parameter-controls{display:grid;gap:14px;padding:12px;border:1px solid var(--border-color);border-radius:8px;background:color-mix(in srgb,var(--bg-color) 82%,var(--primary-color))}.avatar-controls__value-slider{display:grid;gap:8px}.avatar-controls__value-slider>span{display:flex;align-items:center;justify-content:space-between;color:var(--sub-text-color);font-size:12px}.avatar-controls__value-slider output{color:var(--primary-text-color);font-variant-numeric:tabular-nums;font-weight:700}.avatar-controls__value-slider input{width:100%;accent-color:var(--primary-color);cursor:pointer}.avatar-controls__number-field{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;color:var(--sub-text-color);font-size:12px}.avatar-controls__number-field>span:last-child{display:flex;align-items:center;gap:6px;color:var(--primary-text-color);font-variant-numeric:tabular-nums;font-weight:700}.avatar-controls__number-field input{width:108px;min-width:0;border:1px solid var(--border-color);border-radius:6px;padding:7px 9px;background:var(--bg-color);color:var(--text-color);font:inherit;font-variant-numeric:tabular-nums;text-align:right}.avatar-controls__number-field input:focus-visible{border-color:var(--primary-color);outline:2px solid var(--primary-soft-bg)}.avatar-controls__color-control{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--sub-text-color);font-size:12px}.avatar-controls__color-control>span:last-child{display:flex;align-items:center;gap:8px}.avatar-controls__color-control input{width:34px;height:28px;border:1px solid var(--border-color);border-radius:6px;padding:3px;background:var(--bg-color);cursor:pointer}.avatar-controls__color-control output{min-width:58px;color:var(--primary-text-color);font-variant-numeric:tabular-nums;font-weight:700;text-align:right}.avatar-controls__curve-scale,.avatar-controls__value-scale{display:flex;justify-content:space-between;margin-top:-9px;color:var(--sub-text-color);font-size:10px;line-height:14px}.avatar-controls__camera-background{display:grid;gap:10px;padding:12px;border:1px solid var(--border-color);border-radius:8px;background:color-mix(in srgb,var(--bg-color) 82%,var(--primary-color))}.avatar-controls__color-input{display:flex;align-items:center;justify-content:space-between;gap:12px}.avatar-controls__color-input input{width:42px;height:32px;border:1px solid var(--border-color);border-radius:6px;padding:3px;background:var(--bg-color);cursor:pointer}.avatar-controls__color-input output{color:var(--primary-text-color);font-size:12px;font-variant-numeric:tabular-nums;font-weight:700}.avatar-controls__camera-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.avatar-controls__camera-presets button{aspect-ratio:1;min-width:0;border:1px solid var(--border-color);border-radius:6px;padding:3px;background:var(--camera-preset) content-box;cursor:pointer}.avatar-controls__camera-presets button[aria-pressed=true]{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-soft-bg)}.avatar-controls__camera-presets button:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-controls__icon{display:block;flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.avatar-controls__switch{position:relative;flex:0 0 auto;width:48px;height:28px;border:1px solid var(--border-color);border-radius:var(--oneworks-switch-radius);background:var(--bg-color);cursor:pointer}.avatar-controls__switch span{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:var(--oneworks-switch-handle-radius);background:var(--sub-text-color);transition:background-color .16s ease,transform .16s ease}.avatar-controls__switch[aria-checked=true]{border-color:var(--primary-color);background:var(--primary-soft-bg)}.avatar-controls__switch[aria-checked=true] span{background:var(--primary-text-color);transform:translate(20px)}@media (max-width: 840px){.avatar-controls{position:static;height:auto;border-top:1px solid var(--border-color);border-left:0}.avatar-controls__resize-handle{display:none}.avatar-controls__panel{overflow:visible}}@media (max-width: 520px){.avatar-controls{padding:16px}.avatar-controls__swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}.interactive-avatar{position:relative;width:100%;height:100%;overflow:visible;background:transparent;user-select:none}.interactive-avatar__canvas{display:block;width:100%;height:100%;overflow:visible;cursor:grab;outline:none;touch-action:none}.interactive-avatar__canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--primary-color)}.interactive-avatar[data-dragging=true] .interactive-avatar__canvas{cursor:grabbing}.interactive-avatar[data-interaction-mode=move] .interactive-avatar__canvas{cursor:move}.interactive-avatar[data-interaction-mode=move] .interactive-avatar__canvas:active{cursor:grabbing}.interactive-avatar__face-part{transition:opacity .18s ease-out}@media (prefers-reduced-motion: reduce){.interactive-avatar__face-part{transition:none}}.avatar-export-toolbar{position:relative}.avatar-export-toolbar__trigger{display:inline-grid;width:42px;height:42px;place-items:center;border:1px solid var(--border-color);border-radius:8px;background:color-mix(in srgb,var(--bg-color) 90%,transparent);color:var(--sub-text-color);backdrop-filter:blur(12px);cursor:pointer}.avatar-export-toolbar__trigger[aria-expanded=true]{border-color:var(--primary-color);background:var(--primary-soft-bg);color:var(--primary-text-color)}.avatar-export-toolbar__trigger:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-export-toolbar__menu{position:absolute;z-index:8;top:calc(100% + 8px);right:0;display:grid;width:196px;overflow:hidden;border:1px solid var(--border-color);border-radius:9px;padding:5px;background:color-mix(in srgb,var(--bg-color) 94%,transparent);box-shadow:0 14px 34px color-mix(in srgb,black 24%,transparent);backdrop-filter:blur(18px) saturate(145%)}.avatar-export-toolbar__size-row,.avatar-export-toolbar__menu-action{display:grid;min-height:38px;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px;border:0;border-radius:6px;padding:0 9px;background:transparent;color:var(--sub-text-color);font-size:12px;font-weight:700}.avatar-export-toolbar__size-row{grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--border-color);border-radius:0;margin-bottom:4px;padding-right:0;padding-bottom:4px}.avatar-export-toolbar__size-control{position:relative;width:104px;height:30px}.avatar-export-toolbar__size-control svg{position:absolute;top:50%;right:9px;width:12px;height:12px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;transform:translateY(-50%);pointer-events:none}.avatar-export-toolbar__size{width:100%;height:30px;appearance:none;border:1px solid var(--border-color);border-radius:6px;padding:0 30px 0 10px;background:var(--bg-color);color:var(--text-color);cursor:pointer;font-size:12px;font-weight:700}.avatar-export-toolbar__size:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-export-toolbar__size:disabled{color:var(--placeholder-color);cursor:not-allowed;opacity:.52}.avatar-export-toolbar__menu-action{width:100%;text-align:left;cursor:pointer}.avatar-export-toolbar__menu-action:disabled{color:var(--placeholder-color);cursor:not-allowed;opacity:.52}.avatar-export-toolbar__menu-action:hover,.avatar-export-toolbar__menu-action:focus-visible,.avatar-export-toolbar__menu-action[data-copied=true]{background:var(--primary-soft-bg);color:var(--primary-color)}.avatar-export-toolbar__menu-action:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.avatar-export-toolbar__icon{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}@container avatar-stage (max-width: 224px){.avatar-export-toolbar__menu{position:fixed;top:66px;right:auto;left:8px}}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@oneworks/avatar-react",
+  "version": "0.0.0-onboarding.0",
+  "description": "React renderer and embeddable editor for OneWorks 3D Avatar",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": [
+    "./dist/style.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oneworks-ai/avatar.git",
+    "directory": "packages/react"
+  },
+  "exports": {
+    ".": {
+      "__oneworks__": "./src/index.tsx",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "__oneworks__": "./src/style.scss",
+      "default": "./dist/style.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.zh-Hans.md"
+  ],
+  "dependencies": {
+    "@oneworks/avatar": "1.0.0-rc.6"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.0 <20",
+    "react-dom": ">=18.3.0 <20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc -p tsconfig.json --noEmit --pretty false"
+  }
+}