:root { color-scheme: dark; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #101315; color: #ededeb; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, select, summary { cursor: pointer; }
a { color: inherit; text-underline-offset: .25em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #dadcbd; outline-offset: 5px; }
button:disabled { opacity: .5; cursor: wait; }
.workspace { max-width: 1280px; margin: auto; padding: 2rem clamp(1.25rem, 5vw, 5rem) 4rem; }
.back { font-size: .875rem; color: #b1b5b6; }
header { margin: 2.5rem 0 2rem; }
h1 { font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 500; line-height: 1.1; margin: 0 0 .8rem; letter-spacing: normal; }
h2 { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 500; }
p { font-size: 1rem; line-height: 1.55; }
.intro { color: #aeb4b6; max-width: 60ch; margin: 0; }
.tabs { display: flex; gap: 2rem; border-bottom: 1px solid #343b3e; margin-bottom: 1.75rem; }
.tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #aeb4b6; padding: 0 0 1rem; font-size: 1rem; }
.tabs button[aria-selected="true"] { color: #f2f2ee; border-color: #f2f2ee; }
.controls { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: end; }
.field { display: grid; gap: .6rem; }
.field label { font-size: .875rem; color: #c4c8c9; }
select { background: #101315; color: inherit; border: 1px solid #586063; border-radius: 0; padding: .65rem 2rem .65rem .8rem; max-width: 100%; }
.threshold { flex: 1; min-width: 200px; max-width: 310px; }
.threshold label { display: flex; justify-content: space-between; gap: 1rem; }
input[type="range"] { width: 100%; height: 2.65rem; margin: 0; accent-color: #d8dcc4; }
.overlay-control { display: flex; gap: .5rem; align-items: center; min-height: 2.75rem; font-size: .875rem; }
input[type="checkbox"] { accent-color: #d8dcc4; width: 1rem; height: 1rem; }
.status { color: #c0c6c7; min-height: 1.5em; margin: 1rem 0; font-size: .875rem; }
.status.error { color: #efb5a4; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
figure { margin: 0; min-width: 0; }
figcaption { display: flex; justify-content: space-between; padding: .5rem 0 .7rem; font-size: 1rem; }
figcaption span { color: #aeb4b6; font-size: .875rem; }
.scene { display: block; position: relative; padding: 0; width: 100%; border: 0; background: #080a0b; cursor: crosshair; overflow: hidden; }
.scene img { display: block; width: 100%; height: auto; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hint { color: #aeb4b6; font-size: .875rem; max-width: 72ch; }
.legend { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .875rem; }
.legend span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; margin-right: .4rem; background: var(--swatch); }
.lost { --swatch: #e59c4b; } .stable { --swatch: #709c7d; } .gained { --swatch: #62a8b5; } .excluded { --swatch: #85878a; }
.metrics { display: flex; flex-wrap: wrap; gap: 3rem; margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid #343b3e; }
.metrics dt { font-size: .875rem; color: #c0c6c7; }
.metrics dd { font-size: clamp(2.5rem, 5vw, 4rem); margin: .25rem 0; font-weight: 400; line-height: 1.1; }
.metrics span { color: #aeb4b6; font-size: .875rem; }
.counts { color: #aeb4b6; font-size: .875rem; }
.method { border-top: 1px solid #343b3e; margin-top: 2rem; padding-top: 1.25rem; }
.method summary { font-size: .875rem; }
.method div { max-width: 80ch; padding-top: .5rem; color: #b7bec0; }
.method p { font-size: .875rem; }
.classifier-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding-top: .5rem; }
.upload-label { display: block; margin: 1.5rem 0 .75rem; font-size: .875rem; }
input[type="file"] { max-width: 100%; font-size: .875rem; }
input[type="file"]::file-selector-button { padding: .65rem .8rem; border: 1px solid #586063; background: #101315; color: #ededeb; font: inherit; margin-right: .75rem; border-radius: 0; cursor: pointer; }
.preview-wrap { margin-top: 1.5rem; }
#preview { display: block; width: min(224px, 100%); height: auto; background: #080a0b; }
#image-label { font-size: .875rem; color: #aeb4b6; }
.classify { margin-top: 1.5rem; padding: .8rem 1.2rem; background: #ededeb; color: #101315; border: 1px solid #ededeb; border-radius: 0; }
.prediction-label { font-size: clamp(2rem, 4vw, 3rem); margin: 1.5rem 0; overflow-wrap: anywhere; }
.scores { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.scores li { padding: .75rem 0; border-bottom: 1px solid #343b3e; font-size: .875rem; }
.score-row { display: flex; justify-content: space-between; gap: 1rem; }
.score-track { margin-top: .6rem; height: 3px; background: #343b3e; }
.score-fill { height: 100%; background: #d8dcc4; }
@media (max-width: 700px) {
  .workspace { padding-top: 1.5rem; }
  header { margin-top: 2rem; }
  .controls { gap: 1rem; }
  .field:first-child { width: 100%; }
  .threshold { min-width: 160px; }
  .comparison { gap: .75rem; }
  .metrics { gap: 1.5rem; }
  .classifier-layout { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 380px) { .comparison { grid-template-columns: 1fr; } }