:root{color-scheme:light;--paper:#f6f3eb;--ink:#252820;--muted:#74766a;--line:#d7d8c8;--green:#416344}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;line-height:1.6}body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#d9d5c8 4px)}main{position:relative;width:min(100% - 40px,540px);margin:10vh auto 32px}header{display:flex;align-items:center;gap:8px;margin-left:-12px}header img{object-fit:contain}h1{font-size:46px;letter-spacing:-4px;margin:0;font-weight:800}h1 span{color:var(--green)}h2{font-family:system-ui,sans-serif;font-size:30px;letter-spacing:-1px;line-height:1.2;margin:28px 0 8px}.intro{color:var(--muted);margin:26px 0 30px;max-width:440px}.drop{width:100%;min-height:210px;border:1px dashed #8d9881;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;transition:background .15s}.drop:hover,.drop.dragging{background:#e8ecd9}.drop:focus-visible,a:focus-visible{outline:3px solid var(--green);outline-offset:5px}.drop strong{font-weight:500}.drop>.drop-hint{font-size:12px;color:var(--muted)}.plus{font-size:36px;color:var(--green);line-height:1}.formats{font-size:11px;color:var(--muted);margin:10px 0}.completion{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;margin-top:14px}#status{font-size:12px;margin:0}#status.error{color:#a03926}#status.done{color:var(--green)}#download{color:var(--muted);font-size:11px;text-underline-offset:3px;white-space:nowrap}footer{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;display:flex;flex-direction:column;align-items:center;gap:12px}.retro-gif{width:90px;height:90px;object-fit:contain;image-rendering:pixelated}.footer-tag{color:var(--muted);font-size:11px;letter-spacing:.18em;text-decoration:none}.hl-glitch{display:inline-block;padding:1px 5px;background:#ffea00;color:#111;line-height:1.1;animation:hl-glitch-jitter 210ms steps(1,end) infinite}[hidden]{display:none!important}@media(max-width:540px){main{margin-top:6vh}h2{font-size:27px}.drop{min-height:190px}.completion{align-items:baseline}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@keyframes hl-glitch-jitter {
  0%,
  100% {
    text-shadow:
      1px 0 0 rgba(255, 0, 89, 0.52),
      -1px 0 0 rgba(0, 229, 255, 0.52),
      0 1px 0 rgba(0, 0, 0, 0.38);
  }
  33% {
    text-shadow:
      -1px -1px 0 rgba(255, 0, 89, 0.58),
      1px 1px 0 rgba(0, 229, 255, 0.56),
      0 -1px 0 rgba(0, 0, 0, 0.42);
  }
  67% {
    text-shadow:
      1px 1px 0 rgba(255, 0, 89, 0.48),
      -1px -1px 0 rgba(0, 229, 255, 0.5),
      0 0 0 rgba(0, 0, 0, 0.4);
  }
}
@media(prefers-reduced-motion:reduce){.hl-glitch{animation:none}}
.drop{position:relative;overflow:hidden}.drop.scrubbing>span:not(.scrub-stage),.drop.scrubbing>strong{visibility:hidden}.scrub-stage{position:absolute;inset:12px;display:block;pointer-events:none}#scrub-preview{width:100%;height:100%;object-fit:contain}.drop.scrubbing{background:#e8ecd9}.retro-gif{width:100px;height:75px;object-fit:contain}

header{position:relative}#scrub-sponge{position:relative;z-index:5;pointer-events:none;will-change:transform}#status{position:absolute;right:0;top:22px;max-width:130px;text-align:right;font-size:12px;transition:opacity .25s}#status.done{font-weight:700;color:#315e38}#status.faded{opacity:0}.completion{justify-content:flex-end;min-height:24px;margin-top:10px}#soap{position:absolute;inset:0}#soap i{position:absolute;border:1px solid #b5d7d5;background:#faffff99;border-radius:50%;box-shadow:inset 1px 1px 0 #fff;pointer-events:none}@media(max-width:420px){#status{max-width:100px;font-size:11px}}

.drop #status{position:absolute;top:14px;right:16px;max-width:calc(100% - 32px);font-size:12px;text-align:right;z-index:6;visibility:visible}.drop #status.done{background:var(--paper);padding:3px 7px}.drop #status.error{background:var(--paper);padding:3px 7px}

#result{display:flex;align-items:center}#share,#download{border:0;border-radius:0;background:transparent;color:#587747;font:inherit;font-size:11px;padding:6px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}#share:hover,#download:hover{color:var(--green)}#share:focus-visible{outline:3px solid var(--green);outline-offset:4px}#share:disabled{opacity:.6;cursor:wait}

#share,#download{font-size:12px;font-weight:600;color:#416344;text-decoration-thickness:1px}
.completion{justify-content:space-between;align-items:baseline;gap:8px;margin-top:8px;min-height:28px}.completion .formats{margin:0}.completion #result{flex-shrink:0}#share,#download{padding:0}
main{margin-bottom:24px}.intro{margin-bottom:42px}.drop{min-height:260px}.completion{margin-top:14px}footer{margin-top:max(80px,calc(90svh - 570px));padding-top:26px}@media(max-width:540px){.intro{margin-bottom:38px}.drop{min-height:250px}footer{margin-top:max(90px,calc(90svh - 510px))}}