:root {
  color-scheme: dark;
  font-family: Inter, system-ui, sans-serif;
  background: #071019;
  color: #eaf2f8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
main { min-height: 100vh; display: grid; grid-template-columns: 330px 1fr; }
aside {
  padding: 28px;
  background: #0c1823;
  border-right: 1px solid #263746;
  overflow: auto;
}
h1 { margin: 0 0 16px; font-size: 1.55rem; }
.author-name {
  margin: -10px 0 16px;
  color: #91adbf;
  font-size: .75rem;
}
.citation { color: #b8c8d5; line-height: 1.4; font-size: .78rem; }
.implementation-note {
  color: #91adbf;
  font-size: .82rem;
  line-height: 1.45;
  padding: 12px;
  border: 1px solid #294052;
  border-radius: 8px;
  background: #0a141d;
}
a { color: #70c8ff; }
label { display: block; margin: 20px 0; font-size: .9rem; color: #b8c8d5; }
select, input[type="range"] { width: 100%; margin-top: 8px; }
select {
  padding: 10px;
  border: 1px solid #395064;
  border-radius: 7px;
  background: #101f2d;
  color: white;
}
.progress-wrap { margin: 24px 0; }
progress { width: 100%; height: 16px; }
#progress-label { display: block; margin-top: 8px; font-size: .86rem; color: #a9c2d4; }
#progress-label.inference-active {
  color: #ff4d4d;
  font-weight: 700;
  animation: inference-blink 1.2s steps(2, start) infinite;
}
@keyframes inference-blink {
  50% { opacity: .2; }
}
.info { white-space: pre-line; line-height: 1.55; font-size: .9rem; }
.detection-control {
  display: flex;
  align-items: center;
  gap: 9px;
  color: white;
  margin: 14px 0 0;
  font-weight: 600;
}
.detection-control input { width: auto; margin: 0; }
.warning { margin-top: 24px; color: #ffc16b; font-size: .83rem; line-height: 1.45; }
.workspace { min-width: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; overflow: hidden; }
#dropzone {
  width: min(900px, 90%);
  min-height: 420px;
  border: 2px dashed #47718d;
  border-radius: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #0b1620;
}
#dropzone.drag { border-color: #57d4ff; background: #0e2230; }
#drop-message { text-align: center; display: grid; gap: 12px; color: #a9c2d4; }
#drop-message strong { font-size: 1.45rem; color: white; }
.hourglass-emoji {
  display: inline-block;
  margin-left: 8px;
  animation: blink-hourglass .9s ease-in-out infinite;
}
@keyframes blink-hourglass {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.privacy-policy {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: .76rem;
  line-height: 1.4;
  color: #8ea5b5;
}
#viewer { width: 100%; height: calc(100vh - 32px); display: grid; grid-template-rows: minmax(0, 1fr); }
.viewer-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: stretch;
}
.canvas-wrap {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  display: grid;
  place-items: center;
}
canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: auto;
}
#overlay-canvas { pointer-events: none; }
.viewer-shortcut {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: .78rem;
  pointer-events: none;
}
.vertical-slider {
  width: 100%;
  height: 100%;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
}
@media (max-width: 850px) {
  main { grid-template-columns: 1fr; }
  aside { border-right: 0; border-bottom: 1px solid #263746; }
}