:root{
  --ink:#14171A;
  --ink-2:#1D2024;
  --ink-3:#24282D;
  --paper:#F5F6F3;
  --muted:#9A9F97;
  --line:#2A2E33;
  --accent:#F0A73D;
  --accent-soft:rgba(240,167,61,0.14);
  --accent-line:rgba(240,167,61,0.4);
  --danger:#E2685C;
  --danger-soft:rgba(226,104,92,0.12);
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 24px 80px;}

nav{display:flex;align-items:center;justify-content:space-between;padding:26px 0;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-0.01em;}
.brand .word .a{color:var(--accent);}
.badge{
  font-size:12px;color:var(--muted);background:var(--ink-2);
  border:1px solid var(--line);padding:6px 12px;border-radius:100px;
  display:flex;align-items:center;gap:6px;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--paper);}
.add-more{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--paper);background:var(--ink-2);border:1px solid var(--line);
  padding:8px 14px;border-radius:8px;cursor:pointer;
}

/* ---- hero / empty state ---- */
header.hero{padding:52px 0 8px;text-align:center;}
h1{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(34px,6vw,54px);line-height:1.08;letter-spacing:-0.02em;
  margin:0 0 18px;
}
.hero-sub{color:var(--muted);font-size:17px;max-width:44ch;margin:0 auto 36px;line-height:1.6;}

.dropzone{
  border:2px dashed var(--line);border-radius:20px;padding:48px 24px 40px;
  text-align:center;background:var(--ink-2);
  transition:border-color .18s ease, background .18s ease;
}
.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);}
.dz-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;margin-bottom:6px;}
.dz-sub{color:var(--muted);font-size:14px;margin-bottom:24px;}

.cta-btn{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;
  background:var(--accent);color:var(--ink);
  border:none;padding:13px 28px;border-radius:10px;
  cursor:pointer;transition:filter .15s ease, transform .15s ease;
}
.cta-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.dz-or{color:var(--muted);font-size:13px;margin:16px 0;}

.formats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px;}
.format-pill{
  font-size:12.5px;font-family:'Space Grotesk',sans-serif;color:var(--muted);
  border:1px solid var(--line);padding:5px 12px;border-radius:100px;
  transition:border-color .15s ease, color .15s ease;
}
.format-pill:hover{border-color:rgba(245,246,243,0.35);color:var(--paper);}

/* compression indicator — amber's functional role, not just decoration */
.demo-card{
  margin:40px auto 0;max-width:420px;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px;text-align:left;
}
.demo-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px;}
.demo-name{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--paper);}
.demo-stat{color:var(--muted);}
.demo-stat b{color:var(--accent);font-weight:600;}
.demo-track{height:6px;border-radius:100px;background:#2A2E33;overflow:hidden;}
.demo-fill{height:100%;width:23%;background:var(--accent);border-radius:100px;}

.brand-band{
  margin:60px 0;padding:44px 24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;
}
.brand-band .tag{
  font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:clamp(18px,2.6vw,24px);color:var(--paper);
}
.brand-band .tag .a{color:var(--accent);}
.brand-band .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:12px 0 60px;}
.feature .fi{color:var(--paper);opacity:0.7;margin-bottom:14px;}
.feature h3{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:600;margin:0 0 6px;}
.feature p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0;}

footer{
  border-top:1px solid var(--line);padding:28px 0 48px;
  display:flex;align-items:center;justify-content:space-between;
  color:var(--muted);font-size:12.5px;flex-wrap:wrap;gap:12px;
}

/* ---- workspace state ---- */
.level-control{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--ink-2);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:20px;
}
.level-label{font-size:13px;color:var(--muted);}
.level-options{display:flex;gap:6px;background:var(--ink);padding:4px;border-radius:9px;}
.level-btn{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  color:var(--muted);background:transparent;border:none;
  padding:7px 13px;border-radius:6px;cursor:pointer;transition:all .15s ease;
}
.level-btn.active{background:var(--accent);color:var(--ink);}

.panel-title{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.panel-title h2{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin:0;}
.panel-title span{font-size:12.5px;color:var(--muted);}

.file-list{display:flex;flex-direction:column;gap:10px;}
.file-row{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.file-top{display:flex;align-items:center;gap:12px;}
.file-icon{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:var(--ink-3);
}
.file-meta{flex:1;min-width:0;}
.file-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.file-sub b{color:var(--accent);font-weight:600;}

.dl-btn{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  background:var(--accent);color:var(--ink);border:none;
  padding:8px 14px;border-radius:8px;cursor:pointer;flex-shrink:0;
}
.retry-btn{
  font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:600;
  background:transparent;color:var(--paper);border:1px solid var(--line);
  padding:8px 14px;border-radius:8px;cursor:pointer;flex-shrink:0;
}

.progress-track{height:5px;border-radius:100px;background:var(--ink);overflow:hidden;margin-top:12px;}
.progress-fill{height:100%;border-radius:100px;background:var(--accent);}
.progress-fill.indeterminate{width:40%;will-change:transform;animation:slide 1.1s ease-in-out infinite;}
@keyframes slide{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}

/* GPU-accelerated spinner for processing icon — won't freeze during WASM work */
.file-icon.spinning svg{will-change:transform;animation:spin .9s linear infinite;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.file-row.queued{opacity:0.5;}
.file-row.error{border-color:rgba(226,104,92,0.3);background:var(--danger-soft);}
.error-msg{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--danger);margin-top:10px;}

.summary-band{
  margin-top:26px;padding:18px 20px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.summary-text{font-size:13.5px;color:var(--muted);}
.summary-text b{color:var(--paper);}
.summary-text .a{color:var(--accent);font-weight:600;}
.dl-all{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;
  background:var(--accent);color:var(--ink);border:none;
  padding:11px 22px;border-radius:9px;cursor:pointer;
}

@media (max-width:640px){
  .features{grid-template-columns:1fr;}
  .dropzone{padding:36px 18px;}
}