:root{
  --bg:#0b0f14;
  --panel:#121821;
  --panel2:#171f2a;
  --line:#243040;
  --txt:#e7edf5;
  --dim:#93a3b8;
  --accent:#5eead4;
  --accent2:#38bdf8;
  --warn:#fbbf24;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--txt);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1120px;margin:0 auto;padding:20px 16px 64px}

header.top{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
h1{font-size:26px;line-height:1.25;margin:0;letter-spacing:-.02em}
h1 span{color:var(--accent)}
.sub{color:var(--dim);font-size:14px;margin:0 0 14px}

.privacy{
  display:flex;gap:10px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(94,234,212,.10),rgba(94,234,212,.03));
  border:1px solid rgba(94,234,212,.35);
  border-radius:var(--radius);
  padding:12px 14px;margin:0 0 18px;font-size:14.5px
}
.privacy b{color:var(--accent)}
.privacy .ico{flex:0 0 auto;font-size:18px;line-height:1.2}

.grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:901px){.grid>section:first-child{position:sticky;top:16px}}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h2{font-size:15px;margin:0 0 12px;letter-spacing:.02em;text-transform:uppercase;color:var(--dim);font-weight:600}

#drop{
  border:1.5px dashed #2f3f52;border-radius:12px;background:var(--panel2);
  padding:22px 16px;text-align:center;transition:.15s;cursor:pointer
}
#drop.hot{border-color:var(--accent);background:rgba(94,234,212,.07)}
#drop .big{font-size:16px;font-weight:600;margin-bottom:4px}
#drop .small{color:var(--dim);font-size:13px}
input[type=file]{display:none}
button{
  font:inherit;cursor:pointer;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);padding:10px 14px;transition:.15s
}
button:hover{border-color:#3a4d63}
button.primary{background:linear-gradient(180deg,var(--accent),#2dd4bf);color:#04201c;border:none;font-weight:700}
button.primary:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:transparent}
button.ghost:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.hint{color:var(--dim);font-size:13px}

.stage{position:relative;background:#0a0e13;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-height:180px;display:flex;align-items:center;justify-content:center}
.stage canvas{max-width:100%;height:auto;display:block}
.stage .empty{color:var(--dim);font-size:14px;padding:36px 16px;text-align:center}

.scoreTop{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.scoreNum{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em}
.scoreNum small{font-size:18px;color:var(--dim);font-weight:600}
.tier{font-size:13px;color:var(--dim)}
.tier b{display:block;color:var(--txt);font-size:15px;margin-bottom:2px}

.bar{height:8px;border-radius:99px;background:#1d2735;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}

.metrics{display:flex;flex-direction:column;gap:10px}
.m{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.m.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(94,234,212,.25) inset}
.m .mhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.m .mname{font-weight:650;font-size:15px}
.m .mval{font-variant-numeric:tabular-nums;font-size:14px;color:var(--dim)}
.m .mval b{color:var(--txt);font-size:16px}
.m .mbody{display:flex;gap:10px;align-items:center;margin-top:8px}
.m .mbody .bar{flex:1;margin:0}
.m .msub{font-variant-numeric:tabular-nums;font-size:13px;color:var(--dim);min-width:52px;text-align:right}
.m details{margin-top:9px}
.m summary{cursor:pointer;color:var(--accent2);font-size:13px;list-style:none}
.m summary::-webkit-details-marker{display:none}
.m summary:before{content:"▸ ";}
.m details[open] summary:before{content:"▾ ";}
.m .spec{margin-top:8px;font-size:13.5px;color:var(--dim);display:flex;flex-direction:column;gap:6px}
.m .spec code{background:#0d141c;border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--txt);font-size:12.5px}
.m .hl{background:transparent;border:1px solid var(--line);color:var(--dim);font-size:12.5px;padding:4px 9px;border-radius:8px}

.sliders{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
@media (max-width:640px){.sliders{grid-template-columns:1fr}}
.sl{font-size:13.5px}
.sl label{display:flex;justify-content:space-between;color:var(--dim);margin-bottom:2px}
.sl label b{color:var(--txt);font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:#22303f}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--accent);border:3px solid #0b0f14;margin-top:-8px
}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:#22303f}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid #0b0f14}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{padding:7px 12px;font-size:13.5px}
.tabs button.act{border-color:var(--accent);color:var(--accent)}

footer{margin-top:28px;color:var(--dim);font-size:13px;line-height:1.7}
footer ul{margin:8px 0 0;padding-left:20px}
.err{color:var(--warn);font-size:14px}

/* The page relied on the browser's default focus ring, which differs per engine and per
   input modality. Draw it explicitly so a keyboard user can always see where they are. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#drop:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-color:var(--accent)}
.m summary:focus-visible,.m .hl:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* Footer navigation, present on every page so the three extra pages are always reachable. */
.footnav{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px
}
.footnav a{color:var(--accent);text-decoration:none;padding:3px 0}
.footnav a:hover{text-decoration:underline}

/* Long-form pages (about / privacy / contact) reuse the same shell and palette. */
.page{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 26px;margin:4px 0 0}
.page h2{font-size:18px;line-height:1.3;margin:26px 0 8px;color:var(--txt);text-transform:none;letter-spacing:0;font-weight:700}
.page h2:first-child{margin-top:0}
.page h3{font-size:15px;margin:18px 0 6px;color:var(--txt);font-weight:650}
.page p{color:#c8d4e3;font-size:15px;margin:0 0 12px}
.page ul{color:#c8d4e3;font-size:15px;margin:0 0 12px;padding-left:22px}
.page li{margin:0 0 6px}
.page code{background:#0d141c;border:1px solid var(--line);border-radius:6px;padding:1px 5px;color:var(--txt);font-size:13px}
.page a{color:var(--accent2)}
.page .lead{font-size:16px;color:var(--txt)}
@media (max-width:640px){
  .wrap{padding:16px 13px 48px}
  h1{font-size:22px}
  .page{padding:16px}
}