/* Retro 80s look: pure CSS (no web fonts, no images), so the page needs nothing from any other server. */
:root{
  color-scheme:dark;
  --bg:#0d0221;--bg2:#1a0b3b;--bg3:#3a0f5c;--panel:rgba(13,2,33,.88);
  --ink:#f6edff;--mute:#c4b2e6;
  --pink:#ff2a9d;--cyan:#00e5ff;--yellow:#ffe14d;--orange:#ff6a3d;--violet:#7b2ff7;--bad:#ff8fa3;
  --mono:"Courier New",Courier,monospace;
  --display:Impact,Haettenschweiler,"Arial Black",sans-serif;
}
*{box-sizing:border-box}
html,body{overflow-x:hidden}
html{-webkit-text-size-adjust:100%;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 55%,var(--bg3) 100%) fixed;background-color:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:17px/1.65 "Trebuchet MS",Verdana,system-ui,sans-serif}

/* striped sunset and glowing grid floor */
.sun{position:fixed;top:70px;left:50%;width:min(440px,80vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;z-index:-2;opacity:.3;
  background:linear-gradient(#ffe14d 8%,var(--orange) 42%,var(--pink) 72%,var(--violet));
  -webkit-mask-image:linear-gradient(#000 52%,transparent 52% 56%,#000 56% 62%,transparent 62% 67%,#000 67% 74%,transparent 74% 80%,#000 80% 88%,transparent 88% 94%,#000 94%);
  mask-image:linear-gradient(#000 52%,transparent 52% 56%,#000 56% 62%,transparent 62% 67%,#000 67% 74%,transparent 74% 80%,#000 80% 88%,transparent 88% 94%,#000 94%)}
.floor{position:fixed;left:-50%;width:200%;bottom:-8vh;height:55vh;z-index:-1;transform:perspective(380px) rotateX(64deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(0,229,255,.55) 0 2px,transparent 2px 64px),repeating-linear-gradient(0deg,rgba(255,42,157,.5) 0 2px,transparent 2px 44px);
  -webkit-mask-image:linear-gradient(to top,#000 20%,transparent);mask-image:linear-gradient(to top,#000 20%,transparent)}
/* old-TV scanlines over everything, kept faint so text stays readable */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}

a{color:var(--cyan)}
header,main,footer{max-width:800px;margin:0 auto;padding:0 16px}
header{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:6px}
.brand{font:700 1.05rem var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--cyan);text-shadow:0 0 8px rgba(0,229,255,.8)}
nav{display:flex;flex-wrap:wrap;gap:8px}
nav a{font:700 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--pink);padding:5px 10px;background:rgba(13,2,33,.6);box-shadow:2px 2px 0 var(--violet)}
nav a:hover,nav a:focus-visible{color:var(--yellow);border-color:var(--yellow)}

.badge{display:inline-block;margin:26px 0 0;font:700 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);border:1px solid var(--yellow);padding:3px 10px;background:rgba(13,2,33,.6)}
h1{margin:10px 0 10px;font:italic 400 clamp(2rem,7vw,3.4rem)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;
  color:#ffd1ec;background:linear-gradient(#fff 18%,#ffb3dd 52%,var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,42,157,.75)) drop-shadow(3px 3px 0 var(--violet))}
h2{margin:36px 0 8px;font:700 1.15rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);text-shadow:0 0 8px rgba(255,225,77,.5)}
h2::before{content:"> ";color:var(--pink)}
.lead{margin:0 0 22px;color:var(--mute);font-size:1.05rem}
p{margin:0 0 14px}
main p,dt,dd,footer p{text-shadow:0 1px 4px rgba(13,2,33,.95),0 0 10px rgba(13,2,33,.8)}

.tool{background:var(--panel);border:2px solid var(--cyan);border-radius:4px;padding:18px;
  box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--pink),0 0 30px rgba(0,229,255,.45),0 0 60px rgba(255,42,157,.25)}
.drop{display:block;text-align:center;border:2px dashed var(--pink);border-radius:4px;padding:34px 16px;cursor:pointer;background:rgba(123,47,247,.12)}
.drop.over,.drop:focus-within{border-color:var(--yellow);background:rgba(255,225,77,.1)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop strong{font:400 1.35rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.drop small{display:block;color:var(--mute);margin-top:6px;font-family:var(--mono)}
.link{color:var(--cyan);text-decoration:underline}
.options{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin:18px 0 6px;font-family:var(--mono);font-size:.92rem}
fieldset{border:0;margin:0;padding:0;display:flex;gap:16px;align-items:center}
legend{float:left;margin-right:12px;padding:0;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em}
.options label{cursor:pointer}
input[type=radio],input[type=range]{accent-color:var(--pink)}
#qualityRow,#bgRow{display:flex;gap:10px;align-items:center}
#bgRow input{width:42px;height:30px;padding:0;border:2px solid var(--cyan);border-radius:3px;background:none}
output{min-width:2ch;color:var(--yellow)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
#status{color:var(--cyan);margin:8px 0;min-height:1.5em;font:.92rem var(--mono)}
#status:not(:empty)::before{content:"> "}
.list{list-style:none;margin:0;padding:0}
.row{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px dashed rgba(0,229,255,.5)}
.thumb{width:58px;height:58px;border:2px solid var(--pink);border-radius:3px;object-fit:cover;background:var(--bg2);flex:none;box-shadow:3px 3px 0 var(--violet)}
.info{flex:1;min-width:0}
.name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.detail{color:var(--mute);font:.82rem var(--mono)}
.detail.bad{color:var(--bad)}
.rowActions{display:flex;gap:8px;flex:none}

button,.btn{font:800 .82rem var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:8px 16px;cursor:pointer;color:var(--ink);background:rgba(13,2,33,.7);border:2px solid var(--cyan);border-radius:3px;box-shadow:3px 3px 0 var(--violet)}
button:hover,.btn:hover{border-color:var(--yellow);color:var(--yellow)}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--violet)}
.btn.primary,#zip{color:#1a0b3b;border-color:#fff;background:linear-gradient(var(--yellow),var(--orange) 55%,var(--pink))}
.btn.primary:hover,#zip:hover{color:#1a0b3b;border-color:var(--yellow);filter:brightness(1.1)}
.btn.ghost{border-color:rgba(196,178,230,.6);color:var(--mute)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.privacy{color:var(--mute);font:.85rem var(--mono);margin:16px 0 0;border-top:1px dashed rgba(255,42,157,.6);padding-top:12px}

/* The ad deliberately uses its own light, ordinary-web styling so it reads as an ad, not as part of the page. */
.ad{position:relative;z-index:60;margin:36px 0;background:#fffdf7;color:#1d1d1b;border:1px solid #b9b3a6;border-radius:6px;padding:10px 14px 14px;font:15px/1.45 Arial,Helvetica,sans-serif}
.ad-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:11px;color:#6b6a65}
.ad-tag{font-weight:700;background:#ffd400;color:#1d1d1b;border-radius:3px;padding:1px 6px;letter-spacing:.04em;text-transform:uppercase}
.ad-body{display:flex;gap:14px;align-items:center}
.ad-logo{flex:none;width:56px;height:56px;object-fit:contain}
.ad-copy{flex:1;min-width:0}
.ad p.ad-head{margin:0 0 2px;font-size:1.1rem;font-weight:700;color:#14213d;text-shadow:none}
.ad p.ad-text{margin:0;color:#4a4943;text-shadow:none}
.ad-btn{flex:none;background:#2b4acb;color:#fff;font-weight:700;text-decoration:none;padding:10px 16px;border-radius:6px;white-space:nowrap}
.ad-btn:hover{background:#1f38a3}
.ad :focus-visible{outline-color:#2b4acb}
dt{font:700 .95rem var(--mono);color:var(--cyan);margin-top:16px}
dd{margin:3px 0 0;color:var(--mute)}
footer{color:var(--mute);font:.85rem var(--mono);padding-top:18px;padding-bottom:48px}
footer p{border-top:1px dashed rgba(0,229,255,.5);padding-top:14px}
select{font:700 .85rem var(--mono);color:var(--ink);background:rgba(13,2,33,.85);border:2px solid var(--cyan);border-radius:3px;padding:6px 8px}
#sizeRow{display:flex;gap:10px;align-items:center}
.note{color:var(--yellow);font:.85rem var(--mono);margin:6px 0}
.steps{padding-left:1.4rem;margin:0 0 14px}
.steps li{margin:4px 0}
.more a{display:inline-block;margin:0 14px 6px 0}
[hidden]{display:none!important}
@media (max-width:560px){.ad-body{flex-wrap:wrap}.ad-btn{width:100%;text-align:center}}
@media (max-width:520px){.row{flex-wrap:wrap}.rowActions{width:100%}.sun{top:110px}}
@media (prefers-reduced-motion:no-preference){button,.btn{transition:transform .08s,border-color .15s}}