: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}.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}}.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}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.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}}.toast-stack{position:absolute;top:calc(var(--space-edge) + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);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}.upload__cta,.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}}