.app{position:relative;height:100%;width:100%;background:var(--color-bg);color:var(--color-ink);font-family:system-ui,-apple-system,PingFang SC,sans-serif}.app__stage{position:absolute;inset:0}.app__stage canvas{display:block}.app__status{position:absolute;left:var(--space-edge);bottom:calc(var(--space-edge) + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:.375rem;margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-size:var(--text-meta);opacity:0;transform:translateY(4px);animation:status-in var(--duration-normal) var(--ease-out-expo) .12s forwards}@keyframes status-in{to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.app__status{animation:none;opacity:1;transform:none}}.app__chip{padding:.25rem .625rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:var(--surface-glass);color:var(--color-ink-dim);backdrop-filter:blur(8px);white-space:nowrap}.app__chip--ok{color:var(--color-accent);border-color:#ff7ab859}.app__chip--bad{color:var(--color-danger);border-color:#ff6b6b59}.app__error{position:absolute;inset:0;display:grid;place-content:center;gap:.5rem;padding:var(--space-edge);text-align:center}.app__error p{margin:0;color:var(--color-ink-dim);font-size:.875rem;max-width:32ch}.app__error strong{font-size:1.125rem;color:var(--color-ink)}.app__hint{position:absolute;top:calc(var(--space-edge) + 4rem + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);margin:0;color:var(--color-ink-dim);font-size:var(--text-meta);letter-spacing:.08em;pointer-events:none;animation:hint-fade 6s var(--ease-out-expo) 1.5s forwards}@keyframes hint-fade{to{opacity:0}}@media(prefers-reduced-motion:reduce){.app__hint{animation:none}}.material-bar{position:absolute;top:calc(var(--space-edge) + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);z-index:1;display:flex;align-items:center;gap:.125rem;padding:.25rem;border:1px solid var(--surface-stroke);border-radius:1.25rem;background:#12101ab3;backdrop-filter:blur(12px)}.material-bar__item{display:flex;flex-direction:column;align-items:center;gap:.0625rem;min-width:3rem;padding:.375rem .5rem;border:0;border-radius:1rem;background:transparent;color:var(--color-ink-dim);font:inherit;cursor:pointer;transition:color var(--duration-fast) linear,background var(--duration-fast) linear}.material-bar__icon{font-size:1.125rem;line-height:1;transition:transform var(--duration-normal) var(--ease-out-expo)}.material-bar__label{font-size:.625rem;letter-spacing:.06em}.material-bar__item:hover{color:var(--color-ink);background:#ffffff12}.material-bar__item:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.material-bar__item--active{color:var(--color-ink);background:#ff7ab829;box-shadow:inset 0 0 0 1px #ff7ab866}.material-bar__item--active .material-bar__icon{transform:scale(1.25)}.material-bar__mute{min-width:2.25rem;min-height:2.25rem;margin-left:.25rem;border:0;border-left:1px solid var(--surface-stroke);border-radius:0;padding-left:.5rem;background:transparent;font-size:.9375rem;line-height:1;cursor:pointer;opacity:.7;transition:opacity var(--duration-fast) linear}.material-bar__mute:hover{opacity:1}.material-bar__mute:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){.material-bar__icon{transition:none}}.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;max-width:calc(100vw - var(--space-edge) * 2);padding:.3125rem;border:1px solid var(--surface-stroke);border-radius:1.5rem;background:#12101ac7;backdrop-filter:blur(12px)}.toolbar__button{min-height:2.75rem;padding:0 1.125rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-dim);font:inherit;font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:color var(--duration-fast, .15s) linear,background var(--duration-fast, .15s) linear}.toolbar__button:hover{color:var(--color-ink);background:#ffffff12}.toolbar__button:active{background:#ffffff1f}.toolbar__button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.toolbar__button--active,.toolbar__button--active:hover{color:#1a0d14;background:var(--color-accent)}.toolbar__button--record{color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--surface-stroke)}.toolbar__button--record:hover{background:#ffffff1a}.toolbar__button--accent{color:var(--color-accent);box-shadow:inset 0 0 0 1px #ff7ab852}.toolbar__button--accent:hover{color:var(--color-accent);background:#ff7ab81f}@media(width<=30rem){.app__bottom{width:calc(100vw - var(--space-edge) * 2)}.toolbar{width:100%}.toolbar__divider{flex-basis:100%;width:auto;height:0;margin:0;background:none}}@media(width<=26rem){.toolbar__button{padding:0 .75rem;font-size:.78125rem}}@media(prefers-reduced-motion:reduce){.toolbar__button{transition:none}}.app__hint--sticky{animation:none;opacity:1;padding:.375rem .875rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:#12101ac7;backdrop-filter:blur(10px)}.toolbar__divider{width:1px;align-self:stretch;margin:.375rem .125rem;background:var(--surface-stroke)}.toolbar__button--primary{color:#1a0d14;background:var(--color-accent);font-weight:600}.toolbar__button--primary:hover:not(:disabled){color:#1a0d14;background:color-mix(in oklab,var(--color-accent) 88%,white)}.toolbar__button:disabled{opacity:.4;cursor:not-allowed}.toolbar__button--primary:disabled{color:var(--color-ink-dim);background:#ffffff14}.app--painting .app__stage{touch-action:none;cursor:crosshair}.app__bottom{position:absolute;left:50%;bottom:calc(var(--space-edge) * 2.5 + env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:calc(100vw - var(--space-edge) * 2)}.shake{min-height:2.875rem;padding:0 1.75rem;border:0;border-radius:var(--radius-pill);background:var(--color-accent);color:#1a0d14;font:inherit;font-weight:650;letter-spacing:.04em;cursor:pointer;box-shadow:0 10px 30px -12px #ff7ab8b3;transition:transform var(--duration-fast) var(--ease-out-expo),box-shadow var(--duration-normal) var(--ease-out-expo),min-height var(--duration-normal) var(--ease-out-expo),font-size var(--duration-normal) var(--ease-out-expo)}.shake--prominent{position:absolute;top:50%;left:50%;bottom:auto;transform:translate(-50%,-50%);min-height:4.5rem;padding:0 2.75rem;font-size:1.375rem;box-shadow:0 20px 60px -18px #ff7ab8cc,0 0 #ff7ab873;animation:shake-pulse 2.4s var(--ease-out-expo) infinite}@keyframes shake-pulse{0%,to{box-shadow:0 20px 60px -18px #ff7ab8cc,0 0 #ff7ab873}55%{box-shadow:0 20px 60px -18px #ff7ab8cc,0 0 0 1.25rem #ff7ab800}}.shake:hover:not(:disabled){box-shadow:0 16px 38px -12px #ff7ab8d9}.shake--prominent:hover:not(:disabled){transform:translate(-50%,calc(-50% - 2px))}.shake:active:not(:disabled){transform:scale(.97)}.shake--prominent:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}.shake:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}.shake:disabled{opacity:.6;cursor:progress}.toolbar~.shake,.shake:not(.shake--prominent){bottom:calc(var(--space-edge) * 2.5 + 3.75rem + env(safe-area-inset-bottom,0px))}@media(prefers-reduced-motion:reduce){.shake,.shake--prominent{animation:none;transition:none}}.motion-debug{position:absolute;right:var(--space-edge);bottom:calc(var(--space-edge) + env(safe-area-inset-bottom,0px));display:grid;gap:.375rem;justify-items:center;width:5.5rem;padding:.5rem;border:1px solid var(--surface-stroke);border-radius:.875rem;background:#12101ab8;backdrop-filter:blur(8px);pointer-events:none}.motion-debug__dial{width:3.5rem;height:3.5rem}.motion-debug__ring{fill:none;stroke:var(--surface-stroke);stroke-width:1.5}.motion-debug__needle{stroke:var(--color-accent);stroke-width:5;stroke-linecap:round}.motion-debug__hub{fill:var(--color-ink-dim)}.motion-debug__meter{width:100%;height:.25rem;border-radius:var(--radius-pill);background:var(--surface-stroke);overflow:hidden}.motion-debug__fill{width:100%;height:100%;border-radius:var(--radius-pill);background:var(--color-accent);transform-origin:left center;transform:scaleX(0)}.motion-debug__caption{margin:0;font-family:var(--font-mono);font-size:.625rem;color:var(--color-ink-dim)}.app--dropping:after{content:"松手换这张图";position:absolute;inset:var(--space-edge);display:grid;place-content:center;border:2px dashed var(--color-accent);border-radius:1.25rem;background:#12101ab8;color:var(--color-ink);font-size:.9375rem;pointer-events:none}@media(width<=30rem){.material-bar__item{min-width:2.625rem;padding:.3125rem .375rem}.material-bar__label{font-size:.5625rem}.app__status{top:6.5rem;bottom:auto;left:var(--space-edge);max-width:60vw;font-size:.625rem;gap:.25rem}.app__chip{padding:.125rem .4375rem}.motion-debug{top:11rem;bottom:auto;right:auto;left:var(--space-edge);width:4.25rem;padding:.375rem}.motion-debug__dial{width:2.75rem;height:2.75rem}}:root{--color-bg: #12101a;--color-ink: #f4f1fa;--color-ink-dim: #9a93b4;--color-accent: #ff7ab8;--color-danger: #ff6b6b;--surface-glass: rgb(255 255 255 / 6%);--surface-stroke: rgb(255 255 255 / 12%);--radius-pill: 999px;--space-edge: clamp(.75rem, .5rem + 1.5vw, 1.5rem);--text-meta: .75rem;--duration-fast: .15s;--duration-normal: .3s;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--font-ui: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.record-overlay{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 3px var(--color-danger);animation:record-breathe 1.6s var(--ease-out-expo) infinite}@keyframes record-breathe{0%,to{box-shadow:inset 0 0 0 3px #ff6b6be5}50%{box-shadow:inset 0 0 0 3px #ff6b6b59}}.record-overlay__badge{position:absolute;top:calc(var(--space-edge) + 4rem + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:var(--radius-pill);background:#12101ad9;color:var(--color-danger);font-size:var(--text-meta);font-variant-numeric:tabular-nums;letter-spacing:.08em}.record-overlay__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-danger)}@media(prefers-reduced-motion:reduce){.record-overlay{animation:none}}.export{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:var(--space-edge);background:#08070cd1;backdrop-filter:blur(16px)}.export__panel{display:flex;flex-direction:column;gap:.75rem;width:min(28rem,100%);padding:.75rem;border:1px solid var(--surface-stroke);border-radius:1.25rem;background:#12101aeb}.export__video{width:100%;max-height:55vh;border-radius:.75rem;background:#000}.export__meta{margin:0;color:var(--color-ink-dim);font-size:var(--text-meta);text-align:center;font-variant-numeric:tabular-nums}.export__actions{display:flex;gap:.375rem}.export__button{flex:1;min-height:2.75rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-dim);font:inherit;font-size:.8125rem;white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) linear,background var(--duration-fast) linear}.export__button:hover:not(:disabled){color:var(--color-ink);background:#ffffff12}.export__button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.export__button--primary{flex:1.6;border-color:transparent;background:var(--color-accent);color:#1a0d14;font-weight:600}.export__button--primary:hover:not(:disabled){color:#1a0d14;background:var(--color-accent);filter:brightness(1.08)}.export__button:disabled{opacity:.5;cursor:default}.toast-stack{position:absolute;top:calc(var(--space-edge) + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);z-index:5;display:grid;gap:.5rem;justify-items:center;width:min(calc(100% - var(--space-edge) * 2),30rem)}.toast{width:100%;padding:.75rem 1.125rem;border:1px solid rgb(255 122 184 / 28%);border-radius:.875rem;background:#1e1622eb;backdrop-filter:blur(10px);color:var(--color-ink);font:inherit;font-size:.8125rem;line-height:1.5;text-align:left;cursor:pointer;animation:toast-in var(--duration-normal) var(--ease-out-expo)}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.toast{animation:none}}.home{position:relative;height:100%;width:100%;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-ui);--dock-bottom: calc(var(--space-edge) * 1.5 + env(safe-area-inset-bottom, 0px));--dock-height: calc(var(--dock-bottom) + 10.5rem)}.home__stage{position:absolute;inset:0;bottom:var(--dock-height)}.home__stage canvas{display:block}.home__atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 45% at 50% 108%,rgb(255 122 184 / 26%) 0%,transparent 70%),radial-gradient(60% 40% at 18% -8%,rgb(122 150 255 / 12%) 0%,transparent 70%);mix-blend-mode:screen}.home__atmosphere:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 75% at 50% 42%,transparent 42%,rgb(6 5 10 / 62%) 100%);mix-blend-mode:normal}.home__masthead{position:absolute;top:calc(var(--space-edge) + env(safe-area-inset-top,0px));left:var(--space-edge);z-index:2;display:flex;align-items:baseline;gap:.625rem;pointer-events:none;animation:home-fall var(--duration-normal) var(--ease-out-expo) both}.home__wordmark{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;background:linear-gradient(100deg,var(--color-ink) 30%,var(--color-accent) 130%);background-clip:text;color:transparent}.home__tagline{font-size:.6875rem;letter-spacing:.1em;color:var(--color-ink-dim)}@media(width<=26rem){.home__tagline{display:none}}.home__hint{position:absolute;left:50%;bottom:calc(var(--dock-height) + .5rem);z-index:2;max-width:calc(100vw - var(--space-edge) * 2);margin:0;padding:.375rem .875rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:#12101ad1;backdrop-filter:blur(10px);transform:translate(-50%);color:var(--color-ink);font-size:var(--text-meta);letter-spacing:.06em;white-space:nowrap;pointer-events:none;animation:home-rise var(--duration-normal) var(--ease-out-expo) .24s both}.home__hint--low{bottom:calc(var(--dock-bottom) + 6.75rem)}.home__masthead,.home__hint,.home__dock{user-select:none;-webkit-user-select:none}.home__dock{position:absolute;left:50%;bottom:var(--dock-bottom);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;width:calc(100vw - var(--space-edge) * 2);max-width:30rem;transform:translate(-50%);animation:home-rise .42s var(--ease-out-expo) .12s both}.home__materials{display:flex;align-items:center;gap:.125rem;padding:.1875rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:#12101acc;backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff14}.home__material{display:inline-flex;align-items:center;gap:.25rem;min-height:2rem;padding:0 .625rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-dim);font:inherit;font-size:.6875rem;letter-spacing:.02em;white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) linear,background var(--duration-fast) linear}.home__material:hover{color:var(--color-ink);background:#ffffff12}.home__material:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.home__material--active{color:var(--color-ink);background:#ff7ab82e;box-shadow:inset 0 0 0 1px #ff7ab861}.home__mute{min-width:2rem;min-height:2rem;margin-left:.125rem;border:0;border-left:1px solid var(--surface-stroke);border-radius:0;background:transparent;font-size:.8125rem;line-height:1;cursor:pointer;opacity:.65;transition:opacity var(--duration-fast) linear}.home__mute:hover{opacity:1}.home__mute:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.home__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem;max-width:100%;padding:.1875rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:#12101acc;backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff14}.home__action{min-height:2.25rem;padding:0 .9375rem;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-dim);font:inherit;font-size:.75rem;letter-spacing:.04em;white-space:nowrap;cursor:pointer;transition:color var(--duration-fast) linear,background var(--duration-fast) linear}.home__action:hover:not(:disabled){color:var(--color-ink);background:#ffffff14}.home__action:active:not(:disabled){background:#ffffff21}.home__action:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.home__action--on{color:var(--color-ink);background:#ff7ab82e;box-shadow:inset 0 0 0 1px #ff7ab861}.home__action--primary{color:#1a0d14;background:var(--color-accent);font-weight:600}.home__action--primary:hover:not(:disabled){color:#1a0d14;background:color-mix(in oklab,var(--color-accent) 88%,white)}.home__action:disabled{opacity:.4;cursor:not-allowed}.home__action--primary:disabled{color:var(--color-ink-dim);background:#ffffff14}.home__sizes{display:flex;align-items:center;gap:.125rem;padding:.1875rem;border:1px solid var(--surface-stroke);border-radius:var(--radius-pill);background:#12101acc;backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff14}.home__size{display:grid;place-items:center;width:2.5rem;height:2.25rem;border:0;border-radius:var(--radius-pill);background:transparent;cursor:pointer;transition:background var(--duration-fast) linear}.home__size:hover{background:#ffffff12}.home__size:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.home__size--active{background:#ff7ab82e;box-shadow:inset 0 0 0 1px #ff7ab861}.home__dot{border-radius:50%;background:var(--color-ink-dim);transition:background var(--duration-fast) linear}.home__size--active .home__dot{background:var(--color-ink)}.home__actions--brush{width:100%}.home__actions--brush .home__action{flex:1;min-height:2.75rem;padding:0 .5rem}.home__actions--brush .home__action--primary{flex:1.5}.home__footer{display:grid;gap:.1875rem;margin-top:.5rem;text-align:center}.home__footer p{margin:0}.home__flow{color:var(--color-ink-dim);font-size:.75rem;letter-spacing:.08em}.home__flow span{margin:0 .125rem;opacity:.5}.home__privacy{color:var(--color-ink-dim);font-size:.6875rem;letter-spacing:.06em;opacity:.62}.home--painting .home__stage{touch-action:none;cursor:crosshair}.home--dropping:after{content:"松手换这张图";position:absolute;inset:var(--space-edge);z-index:3;display:grid;place-content:center;border:2px dashed var(--color-accent);border-radius:1.25rem;background:#12101ab8;color:var(--color-ink);font-size:.9375rem;pointer-events:none}.home__error{position:absolute;inset:0;z-index:2;display:grid;place-content:center;gap:.5rem;padding:var(--space-edge);text-align:center}.home__error strong{font-size:1.125rem}.home__error p{max-width:32ch;margin:0;color:var(--color-ink-dim);font-size:.875rem}@keyframes home-rise{0%{opacity:0;transform:translate(-50%,14px)}}@keyframes home-fall{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.home__masthead,.home__dock,.home__hint{animation:none}.home__action,.home__material,.home__mute{transition:none}}@media(width<=26rem){.home__material{padding:0 .4375rem;font-size:.625rem}.home__action{padding:0 .6875rem}.home__flow{font-size:.6875rem;letter-spacing:.06em}.home__privacy{font-size:.625rem}.home__action{min-height:2.5rem}}