/* =============================================================================
   GIRLGORITHM
   One committed visual world: a bureau instrument panel. Every colour is
   explicit so the page holds on any host background.
   ============================================================================= */
:root{
  --ground:#17090F;
  --ground-2:#1E0D15;
  --panel:#24111A;
  --panel-2:#2C1622;
  --line:#45222E;
  --line-soft:#331823;
  --ink:#F6EAE5;
  --muted:#B49AA2;
  --dim:#7E656E;
  --signal:#FF3B5C;
  --signal-dim:#B02440;
  --data:#74D6BE;
  --warn:#FFB020;
  --cop-red:#FF2E4A;
  --cop-blue:#3D7BFF;

  --f-display:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --r:3px;
  --maxw:660px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--ground);
  background-image:
    radial-gradient(1100px 620px at 50% -12%, #3A1626 0%, rgba(58,22,38,0) 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, rgba(0,0,0,0) 1px 3px);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shell ---------- */
.shell{
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px 20px 90px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.masthead{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--line);padding-bottom:10px;
}
.masthead .mark{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--signal);
}
.masthead .file{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- progress rail ---------- */
.rail{display:flex;gap:4px;}
.rail i{display:block;height:3px;flex:1;background:var(--line-soft);transition:background .35s ease;}
.rail i.done{background:var(--signal-dim);}
.rail i.now{background:var(--signal);}

/* ---------- card ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px 28px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
  animation:rise .34s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.eyebrow{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px;
}
.eyebrow b{color:var(--data);font-weight:700;}

h1.big{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(38px,9vw,62px);line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;margin:0 0 16px;text-wrap:balance;
}
h2.q{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(26px,5.4vw,36px);line-height:1.02;
  text-transform:uppercase;margin:0 0 10px;text-wrap:balance;
}
.sub{color:var(--muted);margin:0 0 22px;font-size:16.5px;max-width:56ch;}
.sub em{color:var(--ink);font-style:italic;}
.sub strong{color:var(--ink);}

/* ---------- buttons ---------- */
.stack{display:flex;flex-direction:column;gap:9px;}
.row{display:flex;gap:9px;flex-wrap:wrap;}

button{
  font-family:var(--f-body);font-size:16.5px;color:var(--ink);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 16px;text-align:left;cursor:pointer;line-height:1.35;
  transition:border-color .16s, background .16s, transform .08s;
}
button:hover{border-color:var(--signal);background:#331A26;}
button:active{transform:translateY(1px);}
button:focus-visible{outline:2px solid var(--data);outline-offset:2px;}
button .hint{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:var(--dim);margin-top:4px;
}
button:hover .hint{color:var(--muted);}

button.primary{
  background:var(--signal);border-color:var(--signal);color:#1A060C;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;
  font-size:19px;padding:15px 26px;text-align:center;
}
button.primary:hover{background:#FF5470;border-color:#FF5470;}
button.ghost{
  background:transparent;text-align:center;
  font-family:var(--f-display);text-transform:uppercase;letter-spacing:.03em;
  font-size:19px;padding:15px 26px;color:var(--muted);
}
button.ghost:hover{color:var(--ink);}
button.small{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 14px;text-align:center;
}

/* ---------- height input ---------- */
.measure{
  display:flex;align-items:flex-end;gap:12px;
  border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:6px;
}
.measure input{
  font-family:var(--f-display);font-size:clamp(48px,13vw,86px);line-height:1;
  background:transparent;border:0;color:var(--ink);width:100%;padding:0;
  font-variant-numeric:tabular-nums;
}
.measure input:focus{outline:none;}
.measure input::-webkit-outer-spin-button,
.measure input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.measure input[type=number]{-moz-appearance:textfield;}
.measure .unit{
  font-family:var(--f-mono);font-size:13px;letter-spacing:.2em;color:var(--dim);
  padding-bottom:12px;
}
.err{
  color:var(--warn);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;
  min-height:18px;margin:0 0 16px;
}

/* ---------- slider ---------- */
.slider-wrap{margin:6px 0 20px;}
.slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px;}
.slider-val{
  font-family:var(--f-display);font-size:60px;line-height:1;color:var(--signal);
  font-variant-numeric:tabular-nums;
}
.slider-label{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--data);text-align:right;max-width:22ch;
}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:2px;}
input[type=range]::-moz-range-track{height:4px;background:var(--line);border-radius:2px;}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--signal);border:3px solid var(--panel);margin-top:-9px;
  box-shadow:0 0 0 1px var(--signal);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--signal);
  border:3px solid var(--panel);box-shadow:0 0 0 1px var(--signal);
}
input[type=range]:focus-visible{outline:2px solid var(--data);outline-offset:4px;}
.ticks{
  display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:10px;color:var(--dim);letter-spacing:.08em;margin-top:-2px;
}

/* ---------- readout ---------- */
.readout{
  border:1px solid var(--line);border-left:3px solid var(--data);
  background:var(--ground-2);padding:16px 18px;margin:0 0 20px;
  font-family:var(--f-mono);font-size:13px;line-height:1.85;color:var(--muted);
  overflow-x:auto;
}
.readout b{color:var(--data);font-weight:700;}
.readout .huge{
  display:block;font-family:var(--f-display);font-size:54px;line-height:1;
  color:var(--ink);margin:6px 0 8px;font-variant-numeric:tabular-nums;
}

/* ---------- interstitial ---------- */
.veil{
  position:fixed;inset:0;z-index:60;background:rgba(10,3,6,.93);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
  animation:fade .2s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.veil-inner{
  width:100%;max-width:520px;background:var(--panel);
  border:1px solid var(--signal);border-radius:var(--r);padding:26px 24px 24px;
  animation:pop .28s cubic-bezier(.2,.8,.3,1) both;
  box-shadow:0 0 0 1px rgba(255,59,92,.18), 0 40px 90px -40px #000;
}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(10px);}to{opacity:1;transform:none;}}
.veil-inner.warn{border-color:var(--warn);box-shadow:0 0 0 1px rgba(255,176,32,.2),0 40px 90px -40px #000;}
.veil-inner.cop{border-color:var(--cop-blue);box-shadow:0 0 0 1px rgba(61,123,255,.25),0 40px 90px -40px #000;}
.veil h3{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(28px,7vw,42px);line-height:.95;margin:0 0 12px;color:var(--signal);
  text-wrap:balance;
}
.veil-inner.warn h3{color:var(--warn);}
.veil-inner.cop h3{color:var(--cop-blue);}
.veil p{margin:0 0 18px;color:var(--muted);font-size:16.5px;}
.veil p strong{color:var(--ink);}

/* ---------- image slots ---------- */
.slot{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:4/3;margin:0 0 18px;
  border:1px dashed var(--line);border-radius:var(--r);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 8px,rgba(0,0,0,0) 8px 16px),
    var(--ground-2);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);text-align:center;padding:14px;
}
/* Interstitials are a mixed bag — screen-print illustrations, portrait memes,
   whatever fits the joke — so they letterbox rather than get cropped. */
.slot img{width:100%;height:100%;object-fit:contain;border-radius:2px;display:block;}
.slot.filled{border-style:solid;border-color:var(--line);padding:0;background:var(--ground);}
/* The verdict portrait is full-length, so it is shot and cropped 3:4. On a wide
   screen it sits beside the verdict text rather than above it — a standing figure
   in a 660px-wide block would otherwise be 880px tall and swallow the page. */
.slot.portrait{aspect-ratio:3/4;margin:0;height:100%;}
.slot.portrait img{object-fit:cover;}
.verdict-row{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch;}
@media (min-width:620px){ .verdict-row{grid-template-columns:272px 1fr;} }

/* ---------- siren ---------- */
#siren{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:0;mix-blend-mode:screen;}
#siren.on{animation:cops .55s steps(1,end) infinite;}
@keyframes cops{
  0%{opacity:.55;background:var(--cop-red);}
  50%{opacity:.55;background:var(--cop-blue);}
  100%{opacity:.55;background:var(--cop-red);}
}

/* ---------- dossier ---------- */
.dossier{display:flex;flex-direction:column;gap:16px;}
.verdict{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:26px 24px;
}
.verdict .type{
  font-family:var(--f-display);font-size:clamp(34px,8.5vw,56px);line-height:.92;
  text-transform:uppercase;margin:6px 0 10px;color:var(--signal);text-wrap:balance;
}
.verdict .blurb{color:var(--muted);margin:0;font-size:16.5px;}
.verdict .stature{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.7;color:var(--dim);
  margin:0 0 16px;padding-left:11px;border-left:2px solid var(--data);
}
.verdict .stature b{color:var(--data);font-weight:700;}
.verdict .tier{
  font-family:var(--f-mono);font-size:11.5px;line-height:1.7;color:var(--dim);
  margin:0 0 14px;max-width:58ch;
}
.verdict .tier span{
  display:inline-block;margin-right:8px;padding:2px 8px;border-radius:2px;
  background:rgba(116,214,190,.12);border:1px solid rgba(116,214,190,.35);
  color:var(--data);letter-spacing:.14em;text-transform:uppercase;font-size:10px;
}
.fit{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.fit b{color:var(--data);font-weight:700;}

.specs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
@media (min-width:540px){ .specs{grid-template-columns:repeat(3,1fr);} }
.spec{background:var(--panel);padding:14px 16px;}
.spec .k{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:5px;
}
.spec .v{font-family:var(--f-display);font-size:28px;line-height:1.05;font-variant-numeric:tabular-nums;}
.spec .v small{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);
  display:block;margin-top:4px;text-transform:uppercase;
}
.spec.zone .v{color:var(--data);font-size:23px;}
.spec.bad .v{color:var(--warn);font-size:23px;}

.panel-h{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px;
}
.block{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:20px 22px;}
.matrix-wrap{overflow-x:auto;}
.matrix-wrap svg{display:block;width:100%;min-width:280px;height:auto;}

.mathlist{list-style:none;margin:0;padding:0;font-family:var(--f-mono);font-size:12.5px;}
.mathlist li{
  display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px dotted var(--line);color:var(--muted);
}
.mathlist li:last-child{border-bottom:0;}
.mathlist li span:last-child{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mathlist li.total{border-top:1px solid var(--line);border-bottom:0;margin-top:6px;padding-top:12px;}
.mathlist li.total span{color:var(--signal);font-weight:700;}

.flags{display:flex;flex-direction:column;gap:8px;}
.flag{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--f-mono);font-size:12px;line-height:1.6;color:var(--muted);
  border-left:2px solid var(--warn);padding:2px 0 2px 12px;
}
.flag b{color:var(--warn);font-weight:700;letter-spacing:.1em;}

/* ---------- share ---------- */
.share{
  border:1px solid var(--signal);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,59,92,.09),var(--panel));padding:20px 22px;
}
.code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.code{
  font-family:var(--f-display);font-size:clamp(30px,8vw,44px);line-height:1;
  letter-spacing:.14em;color:var(--signal);
}
.share .link{
  font-family:var(--f-mono);font-size:12px;color:var(--muted);
  word-break:break-all;background:var(--ground-2);border:1px solid var(--line);
  border-radius:2px;padding:10px 12px;margin:0 0 12px;
}
.share .msg{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--data);min-height:16px;margin:10px 0 0;
}
.share .msg.off{color:var(--dim);}

/* ---------- group stats ---------- */
.bars{display:flex;flex-direction:column;gap:9px;margin:0;}
.bar{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;}
.bar .bl{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.bar .bn{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums;}
.bar .track{
  grid-column:1/-1;height:8px;background:var(--ground-2);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;
}
.bar .fill{height:100%;background:var(--signal-dim);min-width:2px;}
.bar.you .bl{color:var(--signal);}
.bar.you .fill{background:var(--signal);}

.bignum{
  display:flex;flex-wrap:wrap;gap:22px;margin:0 0 18px;
}
.bignum div{min-width:96px;}
.bignum .n{
  font-family:var(--f-display);font-size:38px;line-height:1;color:var(--data);
  font-variant-numeric:tabular-nums;
}
.bignum .l{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-top:5px;
}

.footnote{
  font-family:var(--f-mono);font-size:11px;line-height:1.8;color:var(--dim);
  border-top:1px solid var(--line-soft);padding-top:14px;
}
.footnote a{color:var(--muted);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  #siren.on{animation:none;opacity:.4;background:var(--cop-red);}
}