:root{--dt-black:#0f0f0f;--dt-gray-0:#141514;--dt-gray-1:#1e1f1e;--dt-gray-2:#272a28;--dt-gray-3:#3b403c;--dt-gray-4:#585f5b;--dt-gray-7:#9a9c8b;--dt-gray-10:#e3d6c9;--dt-white:#f4decd;--dt-red-7:#ef968f;--dt-green-6:#7ec97e;--dt-green-7:#a4daa4;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:var(--dt-gray-0);color:var(--dt-white);font-family:Inter,system-ui,sans-serif}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}:focus-visible{outline:2px solid var(--dt-green-7);outline-offset:4px}.page{place-items:center;min-height:100svh;padding:40px 22px 64px;display:grid}.workspace{width:min(100%,40rem);min-width:0}h1{letter-spacing:-.065em;text-align:center;text-wrap:balance;margin:0 0 clamp(1.5rem,4vw,2.25rem);font-size:clamp(2.1rem,7.5vw,3.5rem);font-weight:650;line-height:1.06}.drop-zone{border:1px solid var(--dt-gray-3);background-color:var(--dt-gray-1);background-image:radial-gradient(var(--dt-gray-2) .75px, transparent .75px);width:100%;min-height:clamp(14.5rem,36vw,17rem);color:var(--dt-white);cursor:pointer;background-size:12px 12px;align-content:center;justify-items:center;padding:2rem 1.25rem;transition:background-color .14s,border-color .14s;display:grid;position:relative}.drop-zone:before{border:1px dashed var(--dt-gray-4);content:"";pointer-events:none;position:absolute;inset:10px}.drop-zone:hover,.is-dragging .drop-zone{background-color:var(--dt-gray-2);border-color:var(--dt-green-6)}.is-dragging .drop-zone:before{border-color:var(--dt-green-6)}.upload-icon{aspect-ratio:1;border:1px solid var(--dt-gray-3);background:var(--dt-gray-0);width:3.25rem;color:var(--dt-green-6);place-items:center;margin-bottom:1rem;display:grid;position:relative}.upload-icon span{border-bottom:1.5px solid;width:1.15rem;height:1.2rem;position:relative}.upload-icon span:before,.upload-icon span:after{content:"";position:absolute;left:50%}.upload-icon span:before{border-top:1.5px solid;border-left:1.5px solid;width:.5rem;height:.5rem;top:0;transform:translate(-50%,1px)rotate(45deg)}.upload-icon span:after{border-left:1.5px solid;height:.8rem;top:1px;transform:translate(-50%)}.drop-title{font-size:1.125rem;font-weight:600}.browse{color:var(--dt-green-7);text-underline-offset:.2em;margin-top:.35rem;font-size:.875rem;text-decoration:underline}.file-hint{color:var(--dt-gray-7);text-align:center;margin:.875rem 0 0;font:.75rem/1.5 IBM Plex Mono,ui-monospace,monospace}.preview-frame{--checker-light:var(--dt-gray-2);--checker-dark:var(--dt-gray-1);border:1px solid var(--dt-gray-3);background:conic-gradient(var(--checker-light) 25%, var(--checker-dark) 0 50%, var(--checker-light) 0 75%, var(--checker-dark) 0) 0 0 / 24px 24px;height:clamp(13rem,48svh,27rem);position:relative}.is-line-art .preview-frame{--checker-light:var(--dt-gray-10);--checker-dark:color-mix(in srgb, var(--dt-gray-10) 70%, var(--dt-gray-7))}.is-dragging .preview-frame{border-color:var(--dt-green-6)}.preview-frame img{object-fit:contain;width:100%;height:100%;display:block}.processing{background:color-mix(in srgb, var(--dt-black) 83%, transparent);color:var(--dt-white);place-content:center;justify-items:center;gap:.75rem;font-size:.875rem;display:grid;position:absolute;inset:0}.spinner{aspect-ratio:1;border:2px solid var(--dt-gray-4);border-top-color:var(--dt-green-6);border-radius:50%;width:1.25rem;animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}.actions{flex-wrap:wrap;justify-content:space-between;gap:.625rem;margin-top:.875rem;display:flex}.button{border:1px solid var(--dt-gray-4);min-height:44px;color:var(--dt-gray-10);background:var(--dt-gray-1);cursor:pointer;place-items:center;padding:.65rem 1rem;font-size:.875rem;font-weight:600;text-decoration:none;display:inline-grid}.secondary:hover{background:var(--dt-gray-2)}.primary{border-color:var(--dt-green-6);background:var(--dt-green-6);color:var(--dt-black)}.primary:hover{background:var(--dt-green-7)}.error{color:var(--dt-red-7);text-align:center;margin:.875rem 0 0;font-size:.875rem}.error:empty{margin:0}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (width<=360px){.actions{flex-direction:column}}@media (prefers-reduced-motion:reduce){.spinner{animation:none}.drop-zone{transition:none}}
