:root{--color-page: #ffffff;--color-ground: #f6f3ec;--color-ground-active: #e9f0ff;--color-line: #b9b4a7;--color-ink: #1d1c19;--color-muted: #7a766b;--color-focus: #2b6cff;--color-error: #c2331f;--radius-s: 8px;--radius-l: 20px;--line-width: 1.5px;--focus-width: 3px;--focus-offset: 2px;--font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;--text-s: 13px;--text-m: 16px;--text-l: 28px;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 40px;--dur-fast: .18s;--dur-draw: .4s;--ease-out: cubic-bezier(.2, .7, .2, 1)}*{box-sizing:border-box}body{margin:0;background:var(--color-page);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-m)}.button{font:inherit;font-size:var(--text-m);padding:var(--space-2) var(--space-3);border:var(--line-width) solid var(--color-ink);border-radius:var(--radius-s);background:var(--color-ink);color:var(--color-page);cursor:pointer}.button:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.dropzone{position:relative;width:100%;height:220px;border:var(--line-width) dashed var(--color-line);border-radius:var(--radius-l);background:var(--color-ground);color:var(--color-ink);font-family:var(--font-sans)}.dropzone[data-state=idle]:hover,.dropzone[data-state=idle][data-look=hover],.dropzone:not([data-state=error]):has(.dropzone__trigger:focus-visible){border-style:solid;border-color:var(--color-ink)}.dropzone:has(.dropzone__trigger:focus-visible),.dropzone[data-look=hover]{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.dropzone[data-state=drag]{background:var(--color-ground-active)}.dropzone[data-state=drag] .dropzone__arrow{transform:translateY(-6px)}.dropzone[data-state=uploading]{border-color:transparent}.dropzone[data-state=error]{border-style:solid;border-color:var(--color-error)}.dropzone__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.dropzone__trigger,.dropzone__body{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3);text-align:center}.dropzone__trigger{border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:pointer;outline:none}.dropzone__arrow,.dropzone__tick{width:40px;height:40px;margin-bottom:var(--space-2);fill:none;stroke:var(--color-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.dropzone__arrow{transition:transform var(--dur-fast) var(--ease-out)}.dropzone__line{font-size:var(--text-m);color:var(--color-ink)}.dropzone__name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropzone__note{font-size:var(--text-s);color:var(--color-muted);font-variant-numeric:tabular-nums}.dropzone__note--error{color:var(--color-error)}.dropzone__progress{position:absolute;inset:calc(var(--line-width) * -1);width:calc(100% + var(--line-width) * 2);height:calc(100% + var(--line-width) * 2);overflow:visible;pointer-events:none}.dropzone__progress rect{x:calc(var(--line-width) / 2);y:calc(var(--line-width) / 2);width:calc(100% - var(--line-width));height:calc(100% - var(--line-width));rx:calc(var(--radius-l) - var(--line-width) / 2);fill:none;stroke:var(--color-ink);stroke-width:var(--line-width);transition:stroke-dasharray var(--dur-fast) linear}.dropzone__tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:dropzone-draw var(--dur-draw) var(--ease-out) forwards}.dropzone__after{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);max-width:100%;opacity:0;animation:dropzone-show var(--dur-fast) var(--ease-out) var(--dur-draw) forwards}.dropzone__remove{border:0;padding:0;background:none;font:inherit;font-size:var(--text-s);color:var(--color-muted);text-decoration:underline;cursor:pointer}.dropzone__remove:hover{color:var(--color-ink)}.dropzone__remove:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.dropzone__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes dropzone-draw{to{stroke-dashoffset:0}}@keyframes dropzone-show{to{opacity:1}}@media (max-width: 640px){.dropzone{height:160px}}@media (prefers-reduced-motion: reduce){.dropzone__arrow{transition:none}.dropzone[data-state=drag] .dropzone__arrow{transform:none}.dropzone__tick path{animation:none;stroke-dashoffset:0}.dropzone__after{animation:none;opacity:1}.dropzone__progress rect{transition:none}}.demo{padding:var(--space-5)}.demo__title{margin:0 0 var(--space-2);font-size:var(--text-l);font-weight:500}.demo__intro{margin:0 0 var(--space-5);max-width:640px;color:var(--color-muted);font-size:var(--text-m);line-height:1.5}.demo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5) var(--space-4)}.demo__label{margin:0 0 var(--space-3);font-size:var(--text-s);font-weight:400;color:var(--color-muted)}@media (max-width: 640px){.demo{padding:var(--space-3)}.demo__grid{grid-template-columns:1fr;gap:var(--space-4)}}