/* RAW — Attention. Look borrowed from rawstudio.ai (type, greys, logo)
   and the RAW project deck (hairline frame, mono labels, warm accent). */

@font-face {
  font-family: "BDO Grotesk";
  /* RAW's own site font, served from its Webflow CDN */
  src: url("https://cdn.prod.website-files.com/69d0ec09525b50afe6484c58/69d0ec0c525b50afe6484cae_BDOGrotesk-Medium-BF648a656fc86b8.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d0d0d;      /* rawstudio.ai colors--950 */
  --line: #252525;    /* colors--900 */
  --muted: #6e6e6e;   /* colors--600 */
  --text: #e5e5e5;    /* colors--200 */
  --white: #fff;
  --accent: #d69670;  /* deck label orange, measured from the slides */
  --sans: "BDO Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pad: clamp(16px, 2.2vw, 32px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.24;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { height: 100svh; } }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--white); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.label {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.label.lit { color: var(--text); }
.accent { color: var(--accent); }

/* ---------- frame ---------- */

.bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px var(--pad);
}
.bar > :last-child { justify-self: end; }
.bar.top { border-bottom: 1px solid var(--line); }
.bar.bottom { border-top: 1px solid var(--line); }
.logo { display: inline-flex; width: 52px; color: var(--white); }
.logo svg { display: block; width: 100%; height: auto; }

main { position: relative; display: flex; flex-direction: column; min-height: 0; }

/* ---------- empty state ---------- */

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(28px, 5vw, 72px) var(--pad) var(--pad);
  cursor: pointer;
}
.display {
  margin: 0;
  font-size: clamp(54px, 10.5vw, 172px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.048em;
  color: var(--white);
}
.display .dim { color: var(--muted); }
.empty-foot { display: grid; gap: 16px; }
.empty-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.lede, .cta {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}
.lede { max-width: 30ch; color: var(--text); }
.cta {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 3px;
  color: var(--white);
  cursor: pointer;
}
.cta:hover { color: var(--accent); }

/* ---------- work state ---------- */

.work { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.stage { position: relative; flex: 1 1 auto; min-height: 56svh; overflow: hidden; }
@media (min-width: 900px) { .stage { min-height: 0; } }
.stage canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.status {
  position: absolute;
  left: var(--pad);
  bottom: 14px;
  padding: 5px 8px;
  background: rgba(13, 13, 13, 0.78);
  color: var(--text);
}
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.progress i {
  display: block;
  height: 100%;
  background: var(--white);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.15s linear;
}

.transport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 10px var(--pad);
  border-top: 1px solid var(--line);
}
.transport button {
  appearance: none;
  background: none;
  border: 0;
  padding: 4px 0;
  min-width: 44px;
  text-align: left;
  cursor: pointer;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 36px;
  padding: 14px var(--pad);
  border-top: 1px solid var(--line);
}
.meta { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.name {
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
}

.modes { display: flex; gap: 22px; }
.modes button {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 6px 0;
  display: inline-flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.modes button:hover:not(:disabled) { color: var(--text); }
.modes button[aria-checked="true"] { color: var(--white); border-bottom-color: var(--white); }
.modes button:disabled { opacity: 0.35; cursor: default; }

.intensity { display: flex; align-items: center; gap: 12px; }
.intensity input { width: 120px; }

.actions { display: flex; gap: 24px; align-items: baseline; }
.link {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 2px;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--white);
  cursor: pointer;
}
.link:hover:not(:disabled) { color: var(--accent); }
.link.quiet { color: var(--muted); }
.link:disabled { opacity: 0.35; cursor: default; }

.note { padding: 0 var(--pad) 14px; }

/* ---------- verdict ---------- */

:root {
  /* element colours: categorical slots 1-3, checked for colour-blind separation on --bg */
  --brand: #3987e5;
  --product: #d95926;
  --message: #199e70;
  --elsewhere: #3a3a38;
  /* traffic lights: status colours, always shown with an icon and a word */
  --good: #0ca30c;
  --warn: #fab219;
  --bad: #d03b3b;
}

.work.is-verdict {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 452px);
  grid-template-rows: minmax(0, 1fr) auto auto auto;
}
.work.is-verdict > :not(.verdict) { grid-column: 1; }
.verdict {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px var(--pad) 32px;
  border-left: 1px solid var(--line);
}
.verdict > * { flex-shrink: 0; } /* the panel scrolls; nothing in it should squash */
@media (max-width: 899px) {
  .work.is-verdict { display: flex; flex-direction: column; }
  .verdict { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
}

.v-empty { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: -0.03em; color: var(--white); max-width: 18ch; }
.v-hero { display: flex; align-items: flex-end; gap: 18px; }
.v-score {
  font-size: clamp(76px, 7.4vw, 116px);
  line-height: 0.8;
  letter-spacing: -0.055em;
  color: var(--white);
}
.v-hero-side { display: grid; gap: 8px; padding-bottom: 2px; }
.v-line { margin: 0; font-size: 19px; line-height: 1.16; letter-spacing: -0.02em; color: var(--text); max-width: 24ch; }

.v-light {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.v-light i {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  color: #fff;
}
.v-light.green i { background: var(--good); }
.v-light.amber i { background: var(--warn); color: #0b0b0b; }
.v-light.red i { background: var(--bad); }

.meter { position: relative; height: 6px; margin-top: 2px; background: var(--line); border-radius: 3px; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.meter i.green { background: var(--good); }
.meter i.amber { background: var(--warn); }
.meter i.red { background: var(--bad); }
.meter b { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--muted); }
.meter-scale { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: -10px; }

.tools { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  background: none;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.chips button:hover { color: var(--text); }
.chips button[aria-checked="true"] { color: var(--white); border-color: var(--white); }
.hint { margin: 0; font-size: 13px; line-height: 1.38; letter-spacing: -0.01em; color: var(--muted); }
.link.small { font-size: 13px; margin-left: 6px; }

.sw { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; flex: none; }
.sw.brand { background: var(--brand); }
.sw.product { background: var(--product); }
.sw.message { background: var(--message); }
.sw.elsewhere { background: var(--elsewhere); }

.v-els { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v-el { display: grid; gap: 10px; padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.v-el-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v-el-head .label { display: inline-flex; align-items: center; gap: 0; color: var(--text); }
.v-el-head .label .accent { margin-right: 8px; }
.v-el-body { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; align-items: start; }
.v-el-score { font-size: 46px; line-height: 0.86; letter-spacing: -0.045em; color: var(--white); }
.v-el-text p { margin: 0 0 7px; font-size: 14px; line-height: 1.36; letter-spacing: -0.01em; color: var(--text); }
.v-el-text strong { font-weight: 500; color: var(--white); }
.dim { color: var(--muted); }
.v-el-text p.dim { font-size: 13px; }
.todo { padding-top: 2px; }
.todo .label { margin-right: 6px; }

.v-sec { display: grid; gap: 10px; }
.v-sec h3 { margin: 0; }
.segbar { display: flex; gap: 2px; height: 28px; }
.seg {
  flex-basis: 0;
  min-width: 2px;
  display: flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
}
.seg.brand { background: var(--brand); }
.seg.product { background: var(--product); }
.seg.message { background: var(--message); }
.seg.elsewhere { background: var(--elsewhere); color: var(--text); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text); }
.legend span { display: inline-flex; align-items: center; }

.spots { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; font-size: 13px; letter-spacing: -0.01em; }
.spots li { display: grid; grid-template-columns: 22px 1fr auto minmax(0, 1fr); gap: 10px; align-items: center; }
.spots li > :last-child { text-align: right; }
.spot-tag {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--white);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--white);
}

.facts { margin: 0; padding-left: 16px; display: grid; gap: 7px; font-size: 13px; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.facts strong { font-weight: 500; color: var(--white); }
.facts.warn li::marker { color: var(--warn); }
.src a { text-decoration: underline; text-underline-offset: 2px; }

.timeline { position: relative; display: grid; gap: 6px; cursor: crosshair; }
.tl-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: center; }
.tl-row .label { display: inline-flex; align-items: center; color: var(--text); }
.tl-row svg { display: block; width: 100%; height: 46px; }
.tl-row .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tl-row .area { stroke: none; opacity: 0.12; }
.line.brand { stroke: var(--brand); }
.line.product { stroke: var(--product); }
.line.message { stroke: var(--message); }
.area.brand { fill: var(--brand); }
.area.product { fill: var(--product); }
.area.message { fill: var(--message); }
.tl-row .cut { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-row .base { stroke: #383835; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-axis { display: flex; justify-content: space-between; margin-left: 92px; }
.tl-head { position: absolute; top: 0; bottom: 22px; left: 92px; width: 1px; background: var(--white); pointer-events: none; }
.tl-tip {
  position: absolute;
  top: -6px;
  transform: translate(-50%, -100%);
  padding: 4px 7px;
  background: #1a1a19;
  border: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}

/* boxes and spots drawn over the picture */
.marks {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: crosshair;
  user-select: none;
}
.mark {
  --c: var(--brand);
  position: absolute;
  border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  cursor: pointer;
}
.mark.product { --c: var(--product); }
.mark.message { --c: var(--message); }
.mark.sel { outline: 1px solid var(--white); outline-offset: 2px; }
.mark .tag {
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 2px 6px;
  background: var(--c);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.mark.tag-in .tag { bottom: auto; top: 0; left: 0; }
.mark .del {
  position: absolute;
  right: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: #0b0b0b;
  font-size: 15px;
  line-height: 24px;
  cursor: pointer;
}
.spot {
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  display: grid;
  place-items: center;
  border: 1.5px solid #fff;
  border-radius: 50%;
  background: rgba(13, 13, 13, 0.82);
  font-family: var(--mono);
  font-size: 11px;
  color: #fff;
  pointer-events: none;
}

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { display: block; height: auto; }
  .bar, .controls, .transport, .note, .tools, .veil { display: none !important; }
  .work.is-verdict { display: block; }
  .stage { height: 55vh; min-height: 0; break-inside: avoid; }
  .verdict { overflow: visible; border: 0; padding: 16px 0; }
}

/* ---------- sliders: hairline track, square thumb ---------- */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--muted); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border: 0;
  border-radius: 0;
  background: var(--white);
}
input[type="range"]::-moz-range-track { height: 1px; background: var(--muted); }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 0; background: var(--white); }
input[type="range"]:disabled { opacity: 0.35; cursor: default; }

/* ---------- misc ---------- */

#video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.veil {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(13, 13, 13, 0.92);
  pointer-events: none;
}
.veil p {
  margin: 0;
  font-size: clamp(54px, 10vw, 160px);
  letter-spacing: -0.048em;
  color: var(--white);
}
[hidden] { display: none !important; }

@media (max-width: 600px) {
  .hide-small { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .controls { gap: 14px 24px; }
  .meta { flex-basis: 100%; }
  .intensity input { width: 96px; }
}