:root{
  --bg:#0b0a0f; --surf:#14121b; --surf2:#1b1824; --line:#2a2634;
  --ink:#ece9f2; --muted:#8f8a9e; --faint:#57536a;
  --accent:#a78bfa; --accent-dim:#7c6bd6; --bad:#f47186; --ok:#5dd6a0;
  --sans:"JetBrains Mono",ui-monospace,monospace; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
::selection{ background:var(--accent); color:var(--bg); }
a{ color:inherit; }

.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before{
  content:""; position:fixed; top:-260px; left:50%; transform:translateX(-50%);
  width:1100px; height:760px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 56% 56% at 50% 40%, rgba(167,139,250,0.13), transparent 70%);
}

.wrap{ max-width:760px; margin:0 auto; padding:0 22px 80px; }

nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; letter-spacing:-0.01em; }
.brand svg{ color:var(--accent); }
.brand .sub{ color:var(--faint); font-weight:400; }
.src{ font-size:13.5px; color:var(--muted); text-decoration:none; }
.src:hover{ color:var(--ink); }

.hero{ padding:46px 0 34px; }
.kick{ font-family:var(--mono); font-size:12.5px; color:var(--accent); margin:0 0 20px; }
.hero h1{ font-size:clamp(34px,6vw,54px); line-height:1.03; letter-spacing:-0.03em; font-weight:700; margin:0; }
.lede{ margin:22px 0 0; max-width:52ch; font-size:16.5px; line-height:1.62; color:var(--muted); }

.tool{ margin-top:8px; }
.tabs{ display:flex; gap:4px; padding:4px; background:var(--surf); border:1px solid var(--line); border-radius:3px; width:fit-content; margin-bottom:16px; }
.tab{ font-family:var(--sans); font-size:14px; color:var(--muted); background:none; border:0; padding:7px 18px; border-radius:3px; cursor:pointer; transition:.15s; }
.tab:hover{ color:var(--ink); }
.tab.is-on{ background:var(--surf2); color:var(--ink); }

.pane{ display:none; flex-direction:column; gap:12px; }
.pane.is-on{ display:flex; }

.drop{ display:block; width:100%; padding:0; background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.drop-empty{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:40px 20px; border:1.5px dashed var(--line); border-radius:3px; background:var(--surf);
  color:var(--muted); transition:.15s;
}
.drop:hover .drop-empty{ border-color:var(--accent-dim); color:var(--ink); }
.drop.drag .drop-empty{ border-color:var(--accent); color:var(--ink); background:var(--surf2); }
.drop-empty svg{ color:var(--faint); }
.drop:hover .drop-empty svg{ color:var(--accent); }
.drop-empty .hint{ font-family:var(--mono); font-size:11.5px; color:var(--faint); }

.frame{ position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surf); }
.frame img{ display:block; width:100%; max-height:340px; object-fit:contain; }
.frame.done{ border-color:rgba(167,139,250,0.4); }

.scan{ position:absolute; left:0; right:0; top:0; height:38%; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(167,139,250,0.28) 82%, rgba(196,181,253,0.9)); }
.scan.run{ animation:scan 1.15s ease-in-out 1 forwards; }
@keyframes scan{ 0%{ opacity:1; transform:translateY(-40%); } 92%{ opacity:1; } 100%{ opacity:0; transform:translateY(260%); } }

textarea,input[type=password]{
  width:100%; font-family:var(--mono); font-size:13.5px; color:var(--ink);
  background:var(--surf); border:1px solid var(--line); border-radius:3px; padding:13px 15px;
  outline:none; transition:.15s; resize:vertical;
}
textarea{ min-height:118px; line-height:1.55; }
textarea::placeholder,input::placeholder{ color:var(--faint); }
textarea:focus,input:focus{ border-color:var(--accent-dim); }

.meter{ height:5px; border-radius:99px; background:var(--surf2); overflow:hidden; }
.meter span{ display:block; height:100%; width:0; background:var(--accent); transition:width .18s ease; }
.meter span.over{ background:var(--bad); }
.meter-label{ font-family:var(--mono); font-size:11.5px; color:var(--faint); }
.meter-label.over{ color:var(--bad); }

.go{
  align-self:flex-start; font-family:var(--sans); font-size:15px; font-weight:500;
  color:var(--bg); background:var(--accent); border:0; border-radius:3px; padding:12px 24px;
  cursor:pointer; transition:.15s; margin-top:4px;
}
.go:hover{ filter:brightness(1.08); }
.go:disabled{ opacity:0.4; cursor:not-allowed; }

.err{ font-size:13px; color:var(--bad); margin:0; }

/* An author display rule outranks the UA sheet's [hidden], so say it here. */
[hidden]{ display:none !important; }
.result{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.result-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dl{ font-family:var(--sans); font-size:14px; font-weight:500; color:var(--bg); background:var(--accent);
  border-radius:3px; padding:11px 20px; text-decoration:none; }
.dl:hover{ filter:brightness(1.08); }
.note{ font-family:var(--mono); font-size:12px; color:var(--faint); }

.message{ font-family:var(--mono); font-size:14px; line-height:1.6; color:var(--ink);
  background:var(--surf); border:1px solid rgba(167,139,250,0.35); border-radius:3px;
  padding:16px 18px; white-space:pre-wrap; word-break:break-word; max-height:50vh; overflow:auto; }
.copy{ align-self:flex-start; font-family:var(--sans); font-size:13.5px; color:var(--muted);
  background:none; border:1px solid var(--line); border-radius:3px; padding:8px 16px; cursor:pointer; transition:.15s; }
.copy:hover{ color:var(--ink); border-color:var(--accent-dim); }

.how{ margin-top:60px; border-top:1px solid var(--line); padding-top:28px; }
.how-title{ font-family:var(--mono); font-size:12.5px; color:var(--faint); margin:0 0 16px; }
.how ol{ margin:0; padding:0; list-style:none; display:grid; gap:14px; counter-reset:step; }
.how li{ position:relative; padding-left:32px; font-size:14px; line-height:1.6; color:var(--muted); counter-increment:step; }
.how li::before{ content:counter(step); position:absolute; left:0; top:0; width:22px; height:22px;
  display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--accent);
  border:1px solid var(--line); border-radius:3px; }
.how li b{ color:var(--ink); font-weight:600; }

footer{ margin-top:56px; border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; font-family:var(--mono); font-size:12.5px; color:var(--faint); }
footer a{ color:var(--muted); text-decoration:none; }
footer a:hover{ color:var(--ink); }

@media (max-width:560px){
  .hero{ padding:32px 0 26px; }
  .frame img{ max-height:260px; }
}