:root{
  --bg:#151515; --fg:#ffffff;
  --card:#1B1B1B; --card-hi:#212121;
  --surface:#272727; --line:#2e2e2e;
  --accent:#a04747; --accent-hi:#b85252;
  --good:#7bc49a; --bad:#ff6b6b; --busy:#d6a85c;
  --sans:"Geist",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:clamp(2.5rem,9vh,5.5rem) 1.25rem 3rem;
  background:var(--bg);color:var(--fg);
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;position:relative;min-height:100vh;
}

/* ---- Signature: morphing gradient blob behind a heavy blur ---- */
/* Two elements: the wrapper is positioned by JS, the inner one runs the
   morph keyframes. Sharing one element would let the CSS animation
   overwrite the inline transform every frame. */
#blob{
  position:fixed;top:0;left:0;z-index:-2;
  width:min(46vw,34rem);aspect-ratio:1;
  will-change:transform;pointer-events:none;
}
#blob i{
  display:block;width:100%;height:100%;
  background-image:linear-gradient(to right,#fff,var(--accent));
  opacity:.30;
  animation:blobMorph 5s infinite ease-in-out;
}
#blobBlur{
  position:fixed;inset:0;z-index:-1;
  backdrop-filter:blur(200px);-webkit-backdrop-filter:blur(200px);
  pointer-events:none;
}
@keyframes blobMorph{
  0%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%;transform:rotate(0) scale(1.1)}
  25%{border-radius:60% 40% 70% 40%/60% 50% 60% 40%;transform:rotate(30deg) scale(1.2,1.4)}
  50%{border-radius:50% 60% 50% 70%/70% 60% 50% 50%;transform:rotate(180deg) scale(1.3,1)}
  75%{border-radius:40% 70% 60% 50%/50% 60% 40% 60%;transform:rotate(300deg) scale(1.1,1.3)}
  100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%;transform:rotate(360deg) scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
  #blob i{animation:none;opacity:.22}
}

main{max-width:42rem;margin:0 auto;position:relative}

/* ---- Hero ---- */
header{text-align:center;margin-bottom:2.75rem}
.wordmark{
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 1rem;font-size:clamp(2rem,6vw,2.75rem);
  font-weight:800;letter-spacing:-.035em;line-height:1;
}
.wordmark .mark{
  width:.95em;height:.95em;border-radius:.28em;flex-shrink:0;
  background:var(--accent);display:grid;place-items:center;
  box-shadow:0 6px 24px -6px var(--accent);
}
.wordmark .mark svg{width:.5em;height:.5em}
.wordmark em{font-style:normal;color:var(--accent)}
.tagline{margin:0 auto;max-width:26rem;opacity:.62;font-size:1.0625rem}

/* ---- Dropzone ---- */
#drop{
  position:relative;display:block;width:100%;
  background:#1b1b1bcc;backdrop-filter:blur(8px);
  border:1.5px dashed var(--line);border-radius:1.125rem;
  padding:3.5rem 1.5rem;text-align:center;cursor:pointer;
  transition:border-color .25s,background .25s,transform .15s;
}
#drop:hover{border-color:#3f3f3f;background:#212121cc}
#drop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#drop.over{border-color:var(--accent);background:#212121e6;transform:scale(1.01)}
#drop.over .drop-icon{transform:translateY(-4px);color:var(--accent)}
.drop-icon{display:block;margin:0 auto 1rem;color:#5c5c5c;transition:transform .25s,color .25s}
.drop-title{display:block;font-size:1.1875rem;font-weight:600;margin-bottom:.35rem}
.drop-hint{display:block;opacity:.5;font-size:.875rem}
/* Quieter than the hint: useful to know, not the first thing to read. */
.drop-limit{
  display:inline-block;margin-top:.9rem;
  padding:.2rem .6rem;border-radius:999px;
  background:#ffffff08;border:1px solid #ffffff0f;
  font-size:.75rem;opacity:.45;
}

/* ---- Toolbar ---- */
/* display:flex would otherwise beat the [hidden] attribute's display:none. */
#bar[hidden]{display:none}
#bar{
  display:flex;align-items:center;gap:.625rem;
  margin-top:1.5rem;animation:rise .3s both;
}
#count{flex:1;opacity:.5;font-size:.8125rem;font-weight:500}
.tbtn{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface);color:var(--fg);
  border:1px solid var(--line);border-radius:.5rem;
  font:inherit;font-size:.8125rem;font-weight:600;
  padding:.45rem .85rem;cursor:pointer;
  transition:background .18s,border-color .18s,opacity .18s;
}
.tbtn:hover:not(:disabled){background:#323232;border-color:#414141}
.tbtn:disabled{opacity:.35;cursor:not-allowed}
.tbtn.primary{background:var(--accent);border-color:transparent}

/* Working state: swap the icon for a spinner so a long ZIP build reads as
   progress rather than a dead button. */
.tbtn.working{cursor:progress;opacity:1}
.tbtn.working svg{display:none}
.tbtn.working::before{
  content:"";width:.75rem;height:.75rem;flex-shrink:0;
  border:1.6px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;
}
.tbtn.working:disabled{opacity:.9}
@media (prefers-reduced-motion:reduce){.tbtn.working::before{animation:none;opacity:.6}}
.tbtn.primary:hover:not(:disabled){background:var(--accent-hi)}
.tbtn svg{width:13px;height:13px}

/* ---- Cards ---- */
#results{margin-top:.875rem;display:flex;flex-direction:column;gap:.75rem}
.card{
  background:#1b1b1be6;backdrop-filter:blur(8px);
  border:1px solid #ffffff0a;border-radius:.875rem;
  padding:1.125rem 1.25rem;
  animation:rise .32s cubic-bezier(.2,.7,.3,1) both;
}
.card[data-tone="good"]{border-color:#7bc49a2e}
.card[data-tone="bad"]{border-color:#ff6b6b2e}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card,#bar{animation:none}}

.card-main{display:flex;align-items:flex-start;gap:1rem}
.card-text{min-width:0;flex:1}
.card-name{margin:0;font-weight:600;font-size:.9375rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-note{margin:.15rem 0 0;opacity:.55;font-size:.8125rem}

.badge{
  display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;
  font-size:.75rem;font-weight:600;padding:.25rem .625rem;border-radius:999px;
}
.badge.good{color:var(--good);background:#7bc49a1a}
.badge.bad{color:var(--bad);background:#ff6b6b1a}
.badge.busy{color:var(--busy);background:#d6a85c1a}
.spin{width:.7em;height:.7em;border:1.5px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;opacity:.6}}

.bar{margin-top:.875rem;height:3px;border-radius:2px;background:#ffffff0f;overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px;background:var(--busy);
  transition:width .5s ease;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  background:var(--accent);color:#fff;text-decoration:none;
  font-size:.875rem;font-weight:600;padding:.5rem 1rem;border-radius:.5rem;
  transition:background .18s,transform .12s;
}
.btn:hover{background:var(--accent-hi)}
.btn:active{transform:translateY(1px)}
/* Already downloaded: quieter, but still fully clickable. */
.btn.again{
  background:transparent;color:var(--good);
  border:1px solid #7bc49a3d;font-weight:500;
}
.btn.again:hover{background:#7bc49a14;border-color:#7bc49a66}

/* Saved cards recede so outstanding work reads first. */
.card.is-saved{opacity:.62}
.card.is-saved:hover{opacity:1}
#results{transition:none}
.card{transition:opacity .25s ease}

/* ---- Footer ---- */
footer{
  margin-top:3.5rem;padding-top:1.75rem;
  border-top:1px solid #ffffff0d;text-align:center;
  font-size:.8125rem;line-height:1.9;
}
footer a{color:var(--accent);text-decoration:none;font-weight:600;
  border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
footer a:hover{color:var(--accent-hi);border-bottom-color:currentColor}
footer .rights{display:block;margin-top:.25rem;opacity:.32;font-size:.75rem}

::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}

@media (max-width:30rem){
  #drop{padding:2.75rem 1rem}
  .card-main{flex-direction:column-reverse;align-items:flex-start;gap:.5rem}
  .btn{width:100%;justify-content:center}
  #bar{flex-wrap:wrap}
  #count{flex-basis:100%;margin-bottom:.25rem}
}

/* Crawlable content section. Visible, readable, and deliberately understated
   so it supports the tool rather than competing with it. */
.prose{
  margin-top:4.5rem;padding-top:2.5rem;
  border-top:1px solid #ffffff0d;
  max-width:42rem;margin-inline:auto;
}
.prose h2{
  font-size:1.25rem;font-weight:700;letter-spacing:-.015em;
  margin:2.5rem 0 .75rem;
}
.prose h2:first-child{margin-top:0}
.prose h3{
  font-size:1rem;font-weight:600;
  margin:1.75rem 0 .4rem;color:var(--fg);opacity:.92;
}
.prose p{margin:0 0 .9rem;opacity:.62;font-size:.9375rem;line-height:1.7}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.875em;background:var(--surface);
  padding:.12em .4em;border-radius:4px;opacity:.9;
}
.prose strong{color:var(--fg);opacity:.95;font-weight:600}

@media (max-width:30rem){
  .prose{margin-top:3rem;padding-top:2rem}
}