:root{
  --ink:#fff; --bg:#000; --cyan:#19c3ff; --blue:#0a4fd6;
  --grey:#2b2b2b; --grey2:#1c1c1c; --line:#3a3a3a; --muted:#9aa0a6;
  --green:#2fbf2f; --green2:#1f8f1f; --amber:#ffb000; --red:#e53012;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:#0a0a0a;
  color:var(--ink);
  font-family:Verdana,Geneva,Tahoma,sans-serif;
  padding:14px;
  display:flex;justify-content:center;
}
.screen{
  width:min(760px,100%);
  background:#000;
  border:1px solid #333;
  border-radius:6px;
  padding:18px 18px 10px;
  box-shadow:0 0 0 2px #111, 0 10px 40px rgba(0,0,0,.6);
}
.masthead{text-align:center}
.logo{
  margin:2px 0 0;
  font-family:Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:1px;
  font-size:clamp(34px,10vw,72px);
  line-height:.95;
  color:#fff;
  text-shadow:2px 2px 0 #06224f, 4px 4px 0 rgba(10,79,214,.5);
  -webkit-text-stroke:1px #0a4fd6;
}
.rule{
  height:12px;margin:8px 0 4px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue) 60%,#06224f);
}
.tagline{color:var(--muted);font-size:11px;margin:4px 0 14px;font-style:italic}

.catalog{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px}
.panel{border:1px solid var(--line);border-radius:3px;padding:10px 12px;font-size:12px}
.panel h2,.panel h3{margin:0 0 6px}
.releases{background:linear-gradient(160deg,var(--amber),var(--red));border-color:#7a1b0c}
.releases h2{color:#1b1b00;font-size:18px;font-style:italic}
.releases ul{margin:0;padding-left:16px;color:#2a0b00;font-weight:bold}
.releases li{margin:2px 0}
.releases .spot{margin:8px 0 0;color:#2a0b00;font-size:11px}
.releases code{background:rgba(0,0,0,.25);color:#2a0b00;padding:0 3px}
.grey{background:linear-gradient(180deg,var(--grey),var(--grey2));color:#d8d8d8}
.grey h3{color:var(--cyan);font-size:12px;border-bottom:1px solid var(--line);padding-bottom:3px}
.grey ol,.grey ul{margin:0 0 6px;padding-left:18px}
.grey li{margin:2px 0;color:#cfcfcf}

.genres{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 0;padding:8px 2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:11px;color:var(--muted);letter-spacing:1px;
}
.genres a{color:#cdd3da;font-weight:bold;cursor:default}

.activate{text-align:center;padding:14px 4px 4px}
.activate label{display:block;font-size:13px;color:#e9edf1;margin-bottom:8px}
#mid{
  width:min(360px,100%);padding:10px 12px;border-radius:3px;
  background:#f3f3f3;border:2px inset #ccc;color:#111;
  font:16px "Courier New",monospace;letter-spacing:1px;text-align:center;
}
.hint{color:var(--muted);font-size:11px;margin:6px 0 12px}
.download{
  font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:2px;
  font-size:clamp(18px,5vw,24px);max-width:100%;
  color:#063b06;background:linear-gradient(180deg,#53e053,var(--green) 55%,var(--green2));
  border:2px solid #0d5f0d;border-radius:5px;padding:11px 26px;cursor:pointer;
  box-shadow:0 2px 0 #0a4b0a, inset 0 1px 0 rgba(255,255,255,.5);
}
.download:active{transform:translateY(1px);box-shadow:0 1px 0 #0a4b0a}
.download[disabled]{filter:grayscale(.6) brightness(.8);cursor:progress}

.progress{margin:16px auto 0;width:min(420px,100%)}
.progress .track{height:20px;background:#111;border:1px solid #3b3b3b;border-radius:3px;overflow:hidden}
.progress .fill{
  height:100%;width:0;transition:width .25s ease-out;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(90deg,#063bb0,#0a4fd6 25%,#19c3ff 70%,#8ff0ff);
  background-size:40px 100%, 100% 100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 10px rgba(25,195,255,.5);
  animation:stripe 1s linear infinite;
}
@keyframes stripe{from{background-position:0 0,0 0}to{background-position:40px 0,0 0}}
.progress .status{font-size:12px;color:var(--cyan);margin:7px 0 0;font-family:"Courier New",monospace}

.result{margin:14px auto 0;width:min(460px,100%);font-size:13px}
.result:empty{display:none}
.result.ok{border:1px solid #2f7a2f;background:#0f1f0f;padding:12px;border-radius:4px}
.result.err{border:1px solid #7a2f2f;background:#1f0f0f;padding:12px;border-radius:4px}
.ok-h{color:#5bd75b;font-weight:bold;margin-bottom:8px}
.err-h{color:#ff6a5a;font-weight:bold;margin-bottom:6px}
.result .lbl{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.code{
  width:100%;padding:9px;border:1px solid #2f7a2f;border-radius:3px;background:#06110a;color:#8ef08e;
  font:14px "Courier New",monospace;text-align:center;
}
.note{color:#cfe0cf;font-size:12px;margin:10px 0 0}
.wink{color:var(--muted);font-size:11px;font-style:italic;margin:9px 0 0}
.wink a{color:var(--cyan);font-weight:bold;text-decoration:underline}

.legal{text-align:center;color:#666;font-size:10px;margin-top:16px;border-top:1px solid #222;padding-top:8px}
.legal .robots{color:#7a7a7a;font-size:11px;font-style:italic;margin:0 0 8px}
.ffg{height:1.3em;width:auto;vertical-align:-0.3em;image-rendering:pixelated}

@media(max-width:620px){
  .catalog{grid-template-columns:1fr}
  .grey:last-child{display:none}
}