.dropzone{justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-5);border:2px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-surface);text-align:center;transition:border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-out);display:grid;position:relative}.dropzone__icon{width:56px;height:56px;margin-bottom:var(--space-1);background:var(--sand);color:var(--color-link);border-radius:50%;place-items:center;display:grid}.dropzone__title{font-weight:var(--weight-bold)}.dropzone__hint{color:var(--color-text-muted);font-size:var(--text-small)}.dropzone .btn{margin-top:var(--space-2)}.dropzone__desktop{display:none}@media (hover:hover) and (pointer:fine){.dropzone__desktop{display:inline}.dropzone__touch{display:none}}.dropzone.is-dragover{border-color:var(--color-accent);background:var(--color-selected-bg);transform:scale(1.01)}.dropzone.is-error{border-color:var(--color-error);background:var(--color-error-bg)}.dropzone.is-error .dropzone__icon{color:var(--color-error);background:#f6cfc9}.upload-progress{align-items:center;gap:var(--space-3);padding:var(--space-4);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);grid-template-columns:56px 1fr auto;display:grid}.upload-progress__thumb{border-radius:14px;width:56px;height:56px;overflow:hidden}.upload-progress__thumb .art{width:100%;height:100%}.upload-progress__text{min-width:0;font-size:var(--text-small);font-weight:var(--weight-semi)}.upload-progress__slow{grid-column:1/-1}.upload{align-items:center;gap:var(--space-3);display:flex}.upload__thumb{background:var(--sand) center / cover no-repeat;width:56px;height:56px;color:var(--color-link);border-radius:14px;flex:none;place-items:center;display:grid;position:relative}.upload__check{border:2px solid var(--color-surface);background:var(--color-primary);color:#fff;width:24px;height:24px;transition:transform var(--dur-slow) var(--ease-spring);border-radius:50%;place-items:center;display:grid;position:absolute;bottom:-6px;right:-6px;transform:scale(0)}.upload__check .icon{stroke-width:2.6px;width:14px;height:14px}.upload__text{flex:1;min-width:0}.upload__sub{color:var(--color-text-muted);font-size:var(--text-small)}.upload.is-added .upload__thumb{animation:pop var(--dur-slow) var(--ease-spring)}.upload.is-added .upload__thumb>.icon{visibility:hidden}.upload.is-added .upload__check{transform:scale(1)}.cropper{gap:var(--space-3);display:grid}.cropper__frame{width:min(100%,300px);aspect-ratio:var(--slot-ratio,4 / 4.6);border-radius:var(--radius-sm);background:var(--night);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;margin-inline:auto;position:relative;overflow:hidden}.cropper__frame:active{cursor:grabbing}.cropper__frame:focus-visible{box-shadow:var(--focus-ring)}.cropper__image{transform-origin:50%;pointer-events:none;will-change:transform;width:100%;height:100%;position:absolute;top:0;left:0}.cropper__image .art{width:100%;height:100%}.cropper__grid{pointer-events:none;opacity:0;transition:opacity var(--dur);background:linear-gradient(90deg,#0000 33.1%,#ffffff8c 33.1% 33.6%,#0000 33.6% 66.4%,#ffffff8c 66.4% 66.9%,#0000 66.9%),linear-gradient(#0000 33.1%,#ffffff8c 33.1% 33.6%,#0000 33.6% 66.4%,#ffffff8c 66.4% 66.9%,#0000 66.9%);position:absolute;inset:0;box-shadow:inset 0 0 0 2px #ffffffd9}.cropper.is-moving .cropper__grid,.cropper__frame:focus-visible .cropper__grid{opacity:1}.cropper__help{color:var(--color-text-muted);font-size:var(--text-small);text-align:center}.cropper__controls{align-items:center;gap:var(--space-2);display:flex}.preview{--poster-w:210px;justify-items:center;gap:var(--space-3);min-width:0;display:grid}.preview__stage{width:100%;height:calc(var(--poster-w) * 1.36);border-radius:var(--radius-xl);place-items:center;display:grid;position:relative}.preview__frame{width:var(--poster-w);transform:scale(var(--poster-scale,.875));transition:transform var(--dur-slow) var(--ease-spring);position:relative;container-type:inline-size}.preview__frame[data-size=s]{--poster-scale:.76}.preview__frame[data-size=m]{--poster-scale:.875}.preview__frame[data-size=l]{--poster-scale:1}.preview__frame .poster{width:100%;transition:background-color var(--dur) var(--ease-out)}.poster__photo{position:relative;overflow:hidden}.poster__img{transform-origin:50%;transition:opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);background:50%/cover no-repeat;position:absolute;inset:0}.poster[data-theme=cream]{--poster-mat:var(--frame-cream)}.poster[data-theme=sage]{--poster-mat:var(--frame-sage);--poster-ink-soft:#e6ecd9}.poster[data-theme=peach]{--poster-mat:var(--frame-peach);--poster-ink-soft:#fbe3d8}.poster[data-theme=night]{--poster-mat:var(--frame-night);--poster-ink:var(--sand);--poster-ink-soft:#6b5b4d}.poster.is-updated .poster__photo{animation:photo-in var(--dur-slow) var(--ease-out)}.preview:not(.has-photo) .poster__photo{background:var(--color-surface-muted)}.preview:not(.has-photo) .watermark{display:none}.preview__add{place-content:center;justify-items:center;gap:var(--space-2);aspect-ratio:4/4.6;width:86cqi;padding:var(--space-2);border:2px dashed var(--color-border-strong);color:var(--color-link);font-weight:var(--weight-heavy);cursor:pointer;transition:border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-spring);background:0 0;border-radius:3px;font-size:max(1rem,5.4cqi);line-height:1.2;display:grid;position:absolute;top:7cqi;left:7cqi}.preview__add-icon{background:var(--color-primary);color:#fff;width:max(52px,19cqi);height:max(52px,19cqi);box-shadow:var(--clay);border-radius:50%;place-items:center;display:grid}.preview__add:hover{border-color:var(--color-accent);background:#ffffff59}.preview__add:active{transform:scale(.97)}.preview__add:focus-visible{box-shadow:var(--focus-ring)}.preview.has-photo .preview__add{display:none}.preview__ring{width:clamp(40px,24cqi,76px);height:clamp(40px,24cqi,76px);display:none;position:absolute;top:56cqi;left:50%;transform:translate(-50%,-50%)}.preview__ring-track{fill:#ffffffeb;stroke:var(--color-border);stroke-width:4px}.preview__ring-fill{fill:none;stroke:var(--color-accent);stroke-width:4px;stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:calc(125.66px * (1 - var(--p,0)));transform-origin:50%;transition:stroke-dashoffset var(--dur) var(--ease-out);transform:rotate(-90deg)}.preview.is-uploading .preview__ring{display:block}.preview.is-uploading .poster__img{opacity:.55;filter:saturate(.6)}.preview.is-uploading .watermark{display:none}.preview__drop{z-index:1;align-content:center;place-items:center;gap:var(--space-2);border:2px dashed var(--color-accent);border-radius:var(--radius-xl);color:var(--color-link);font-weight:var(--weight-heavy);pointer-events:none;background:#f6e3d8eb;display:none;position:absolute;inset:0}.preview__stage.is-dragover .preview__drop{animation:fade-up var(--dur) var(--ease-out);display:grid}.preview__tools{justify-content:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;display:flex}.preview:not(.has-photo) .preview__tools{display:none}.preview.is-uploading .preview__tools{visibility:hidden}.preview.is-loading .poster__photo{background:linear-gradient(90deg, var(--color-skeleton) 0%, var(--color-skeleton-shine) 50%, var(--color-skeleton) 100%) 0 0 / 200% 100%;animation:shimmer calc(var(--dur-slower) * 2) linear infinite}.preview.is-loading .poster__photo:before,.preview.is-loading .poster__photo:after{content:none}.preview__loading{align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--text-small);font-weight:var(--weight-semi);display:none}.preview.is-loading .preview__loading{display:flex}.preview.is-loading .note{display:none}.poster--protected{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow:hidden}.watermark{color:var(--color-accent);font-family:var(--font-serif);font-size:max(7px,9cqi);font-weight:var(--weight-semi);white-space:nowrap;opacity:.45;pointer-events:none;flex-direction:column;justify-content:center;gap:7.6cqi;line-height:1;display:flex;position:absolute;inset:-45%;transform:rotate(-28deg)}.watermark span:nth-child(2n){margin-left:-33cqi}.poster[data-theme=night] .watermark{color:var(--blush);opacity:.35}.poster[data-theme=peach] .watermark{color:var(--terracotta-strong)}.note{color:var(--color-text-muted);font-size:var(--text-caption);text-align:center;text-wrap:balance}.note .icon{vertical-align:-3px;width:16px;height:16px;margin-right:6px;display:inline-block}.photo-card{gap:var(--space-3);display:grid}.photo-card.is-empty{border-style:dashed;border-color:var(--color-border-strong)}.photo-card.is-empty .upload__thumb{background-color:var(--color-selected-bg)}.photo-card.is-uploading .upload__thumb:after{content:"";border-radius:inherit;background:#ffffff8c;position:absolute;inset:0}.photo-card__progress{align-items:center;gap:var(--space-4);display:flex}.photo-card__progress .progress{flex:1;margin-top:0}.photo-card__progress .text-link{font-size:var(--text-small)}.photo-card__hint{color:var(--color-text-muted);font-size:var(--text-small)}.photo-card__drag{display:block}.photo-card .alert{margin:0}.photo-card .upload__sub{overflow-wrap:anywhere}.crop-quality{min-height:24px;font-size:var(--text-small);font-weight:var(--weight-bold);text-align:center;justify-content:center;align-items:center;gap:6px;display:flex}.crop-quality .icon{flex:none;width:18px;height:18px}.crop-quality.is-good{color:var(--color-success)}.crop-quality.is-low{color:var(--color-warning)}.crop-sheet .cropper__frame{width:min(100%,300px,36.5217dvh)}.crop-sheet .sheet__foot .btn--ghost{flex:none}.viewer .preview{--poster-w:min(calc(100vw - 72px), calc((88dvh - 190px) / 1.36), 420px)}.viewer .preview__frame{transform:none}.viewer .preview__stage{height:auto;padding:var(--space-2) 0}@media not ((hover:hover) and (pointer:fine)){.pointer-fine-only{display:none!important}}@keyframes photo-in{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}.congrats-art{width:124px;margin:var(--space-2) auto var(--space-5);position:relative}.congrats-art .poster{box-shadow:var(--elevation-2);transform:rotate(-4deg)}.popup .congrats-art .panda{width:80px;height:80px;margin:0;position:absolute;bottom:-18px;right:-50px}