/* The first three steps' screens: the harness's own screens, built here rather than captured, so they stay
   sharp at any size and each part can be moved on its own when the steps become videos. They behave as
   pictures do: one fixed drawing, 56em wide, scaled by the panel's width and laid from the panel's top left
   corner, so a panel that is too short or too narrow crops the right and the bottom and never the start.
   Amber is OTTO and its agents; teal is the expert. The words are the product's, in English. */

.how-show:has(.shot) {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 56 / 47;
  min-height: 24rem;
  padding: 0;
  overflow: hidden;
  background: var(--bg);
}

.shot {
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 56em;
  height: 100%;
  min-height: 47em;
  background: var(--bg);
  color: var(--ink);
  font: 400 max(11px, calc(100cqi / 56)) / 1.45 var(--sans);
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.shot * { margin: 0; padding: 0; list-style: none; }
.shot svg { display: block; flex: none; }
.shot .sh-mono { font: 500 0.58em / 1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.shot .sh-amber { color: var(--amber); }
.shot .sh-teal { color: var(--teal); }
.shot .sh-muted { color: var(--muted); }

/* The bar every screen shares: OTTO, the course, and the three gates. */
.sh-bar { display: flex; align-items: center; gap: 1.1em; flex: none; height: 4.3em; padding: 0 1.4em; border-bottom: 1px solid var(--border); }
.sh-brand { display: flex; align-items: center; gap: 0.5em; font: 700 0.95em / 1 var(--display); letter-spacing: 0.02em; }
.sh-brand svg { width: 1.7em; height: 1.7em; fill: var(--amber); }
.sh-tag { padding: 0.35em 0.7em; border: 1px solid var(--border); border-radius: 99em; background: var(--surface); font: 500 0.55em / 1 var(--mono); letter-spacing: 0.16em; color: var(--muted); }
.sh-course { display: grid; gap: 0.2em; min-width: 0; margin-right: auto; }
.sh-course strong { font-size: 0.82em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-course span { font: 400 0.58em / 1.2 var(--mono); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.sh-gates { display: flex; gap: 0.5em; flex: none; }
.sh-gate { display: flex; align-items: center; gap: 0.55em; padding: 0.45em 0.8em 0.45em 0.5em; border: 1px solid transparent; border-radius: 0.6em; }
.sh-gate b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border: 1px solid var(--border); border-radius: 0.4em; font: 500 0.58em / 1 var(--mono); color: var(--muted); }
.sh-gate span { display: grid; gap: 0.15em; font-size: 0.72em; font-weight: 600; line-height: 1.1; color: var(--muted); white-space: nowrap; }
.sh-gate span small { font: 500 0.72em / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.sh-gate.is-on { border-color: var(--amber); background: var(--amber-tint); }
.sh-gate.is-on b { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }
.sh-gate.is-on span { color: var(--ink); }
.sh-gate.is-done b { border-color: var(--teal); color: var(--teal); }
.sh-btn { flex: none; padding: 0.7em 1.15em; border-radius: 99em; background: var(--amber); color: var(--on-amber); font-size: 0.78em; font-weight: 600; line-height: 1; }
.sh-btn.is-teal { background: var(--teal); }

.sh-body { display: flex; flex: 1; min-height: 0; }
.sh-h { font-size: 1.5em; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.sh-lede { font-size: 0.8em; line-height: 1.5; }
.sh-pill { display: inline-block; padding: 0.3em 0.75em; border: 1px solid currentColor; border-radius: 99em; font: 400 0.64em / 1.2 var(--mono); white-space: nowrap; }
.sh-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.sh-chips li { padding: 0.3em 0.7em; border: 1px solid var(--border); border-radius: 99em; font-size: 0.66em; line-height: 1.3; white-space: nowrap; }

/* Step one: the sources, and the walkthrough recording being read. */
.sh-sources { display: flex; flex-direction: column; gap: 1em; flex: none; width: 29em; padding: 1.6em 1.4em; border-right: 1px solid var(--border); }
.sh-sources header { display: grid; gap: 0.5em; }
.sh-drop { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1em; border: 1px dashed var(--line); border-radius: 0.6em; font-size: 0.74em; color: var(--muted); }
.sh-drop svg { width: 1.5em; height: 1.5em; stroke: var(--muted); }
.sh-drop b { color: var(--ink); font-weight: 500; }
.sh-files { display: grid; gap: 0.35em; }
.sh-files li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8em; padding: 0.6em 0.8em; border: 1px solid transparent; border-radius: 0.6em; background: var(--surface); }
.sh-files i { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.4em; background: var(--bg); font: 600 0.5em / 1 var(--mono); letter-spacing: 0.06em; font-style: normal; color: var(--muted); }
.sh-files div { display: grid; gap: 0.1em; min-width: 0; }
.sh-files strong { font: 500 0.7em / 1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-files div span { font-size: 0.66em; color: var(--muted); }
.sh-files em { display: flex; align-items: center; gap: 0.4em; font: 500 0.56em / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.sh-files em svg { width: 1.3em; height: 1.3em; stroke: currentColor; }
.sh-files .is-on { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: var(--amber-tint); }
.sh-files .is-on i, .sh-files .is-on em { color: var(--amber); }
.sh-ready { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 0.9em; border-top: 1px solid var(--border); font-size: 0.74em; color: var(--muted); }
.sh-ready b { color: var(--amber); font-weight: 500; }

.sh-rec { display: flex; flex-direction: column; gap: 1em; flex: 1; min-width: 0; padding: 1.6em 1.4em; background: var(--surface); }
.sh-rec header { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.sh-rec header strong { font-size: 0.9em; font-weight: 600; }
.sh-tape { display: grid; gap: 0.7em; padding: 1em; border-radius: 0.6em; background: var(--bg); }
.sh-wave { width: 100%; height: 5em; fill: var(--line); }
.sh-wave .is-read { fill: var(--amber); }
.sh-scrub { position: relative; height: 0.25em; border-radius: 99em; background: var(--border); }
.sh-scrub::before { content: ""; position: absolute; inset: 0 38% 0 0; border-radius: inherit; background: var(--amber); }
.sh-scrub::after { content: ""; position: absolute; top: 50%; left: 62%; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--amber); transform: translate(-50%, -50%); }
.sh-times { display: flex; justify-content: space-between; }
.sh-said { display: grid; gap: 0.5em; }
.sh-said li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8em; padding: 0.7em 0.8em; border-left: 2px solid var(--border); border-radius: 0 0.5em 0.5em 0; background: var(--bg); font-size: 0.74em; line-height: 1.45; }
.sh-said time { font: 500 0.82em / 1.6 var(--mono); color: var(--muted); }
.sh-said .is-new { border-left-color: var(--amber); }
.sh-said .is-new time { color: var(--amber); }
.sh-found { display: flex; align-items: center; gap: 0.7em; margin-top: auto; color: var(--muted); }
.sh-found span + span { font-size: 0.74em; }

/* Step two: the knowledge map gate. A summary beside the graph, as the harness lays it out. */
.sh-side { display: flex; flex-direction: column; gap: 0.9em; flex: none; width: 16.5em; padding: 1.6em 0.6em 1.4em 1.4em; }
.sh-stats { display: flex; gap: 1.1em; white-space: nowrap; }
.sh-stats div { display: grid; gap: 0.3em; }
.sh-stats dd { font-size: 1.15em; font-weight: 600; line-height: 1; }
.sh-pills { display: flex; flex-wrap: wrap; gap: 0.4em; }
.sh-read { display: grid; gap: 0.5em; }
.sh-read ul { display: grid; gap: 0.3em; }
.sh-read li { font: 400 0.64em / 1.4 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-read li::before { content: "· "; color: var(--muted); }
.sh-hint { font-size: 0.7em; line-height: 1.5; color: var(--muted); }

.sh-canvas { position: relative; flex: 1; min-width: 0; margin: 1.2em 1.2em 1.2em 0.6em; border: 1px solid var(--border); border-radius: 0.875em; background: radial-gradient(circle, rgb(255 255 255 / 0.07) 1px, transparent 1.5px) 0 0 / 1.6em 1.6em; overflow: hidden; }
.sh-legend { position: absolute; top: 1em; left: 1.1em; display: flex; align-items: center; gap: 1em; }
.sh-legend span { display: flex; align-items: center; gap: 0.5em; }
.sh-legend svg { width: 0.9em; height: 0.9em; stroke: var(--muted); }
.sh-legend b { padding: 0.35em 0.9em; border: 1px solid var(--amber); border-radius: 99em; font: 500 0.58em / 1 var(--mono); letter-spacing: 0.16em; color: var(--amber); }
.sh-graph { position: absolute; top: max(3.6em, calc(50% - 17.5em)); left: 1.4em; width: 35.6em; height: 34em; }
.sh-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--muted); stroke-width: 0.9; stroke-dasharray: 4 3; opacity: 0.6; }
.sh-edges .is-lit { stroke: var(--amber); stroke-width: 1.4; opacity: 1; }
.sh-node { position: absolute; left: calc(var(--x) * 0.1em); top: calc(var(--y) * 0.1em); display: flex; align-items: center; gap: 0.4em; transform: translate(-0.65em, -50%); line-height: 1; white-space: nowrap; }
.sh-node i { display: grid; place-items: center; width: 1.3em; height: 1.3em; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.sh-node b { font-size: 0.74em; font-weight: 400; }
.sh-node svg { width: 0.65em; height: 0.65em; stroke: var(--muted); }
.sh-node.is-near i { border-color: color-mix(in srgb, var(--amber) 60%, transparent); }
.sh-node.is-near svg { stroke: var(--ink); }
.sh-node.is-on b { margin-left: 0.5em; font-weight: 600; }
.sh-node.is-on i { border-color: var(--amber); background: var(--amber-tint); box-shadow: 0 0 0 0.15em var(--bg), 0 0 0 0.3em var(--amber); }
.sh-node.is-on svg { stroke: var(--amber); }
.sh-detail { position: absolute; top: 16.6em; right: 0; display: grid; gap: 0.75em; width: 17em; padding: 1.1em; border: 1px solid var(--border); border-radius: 0.6em; background: var(--surface); box-shadow: 0 0.8em 2em rgb(0 0 0 / 0.45); }
.sh-detail h4 { font-size: 0.86em; font-weight: 600; line-height: 1.3; }
.sh-detail p { font-size: 0.7em; line-height: 1.5; }
.sh-detail section { display: grid; gap: 0.4em; }
.sh-prior { padding-left: 0.7em; border-left: 2px solid var(--amber); }
.sh-zoom { position: absolute; left: 1.1em; bottom: 1em; display: grid; border: 1px solid var(--border); border-radius: 0.5em; background: var(--surface); overflow: hidden; }
.sh-zoom svg { width: 1.9em; height: 1.9em; padding: 0.55em; stroke: var(--ink); }
.sh-zoom svg + svg { border-top: 1px solid var(--border); }
.sh-canvas > .sh-mono:last-child { position: absolute; left: 4.4em; bottom: 1.3em; opacity: 0.7; }

/* Step three: the expert's gate. Their notes and the Approve button on the left, the outline they are
   correcting on the right, the change they asked for marked in it. */
.sh-chat { display: flex; flex-direction: column; flex: none; width: 19em; border-right: 1px solid var(--border); background: var(--surface); }
.sh-chat > header { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 1.1em 1.2em; border-bottom: 1px solid var(--border); }
.sh-chat > header div { display: grid; gap: 0.3em; }
.sh-chat > header strong { font-size: 0.86em; font-weight: 600; }
.sh-thread { display: grid; align-content: start; gap: 0.8em; flex: 1; min-height: 0; padding: 1.2em; overflow: hidden; }
.sh-thread li { display: grid; gap: 0.4em; max-width: 92%; padding: 0.8em 0.9em; border-radius: 0.7em; font-size: 0.74em; line-height: 1.5; }
.sh-thread li > .sh-mono { font-size: 0.74em; }
.sh-note { justify-self: end; border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent); background: var(--teal-tint); }
.sh-note .sh-mono { color: var(--teal); }
.sh-agent { border-left: 2px solid var(--amber); border-radius: 0 0.7em 0.7em 0; background: var(--bg); }
.sh-agent .sh-mono { color: var(--amber); }
.sh-thread .sh-round { justify-self: center; max-width: none; padding: 0; font-size: 1em; }
.sh-compose { display: flex; justify-content: space-between; align-items: flex-end; height: 5.4em; margin: 0 1.2em 1.2em; padding: 0.8em 0.9em; border: 1px solid var(--border); border-radius: 0.7em; background: var(--bg); font-size: 0.76em; color: var(--muted); }
.sh-compose span { align-self: flex-start; }
.sh-compose svg { width: 1.8em; height: 1.8em; padding: 0.4em; border-radius: 0.4em; background: var(--teal-tint); stroke: var(--teal); }

.sh-outline { display: flex; flex-direction: column; gap: 0.9em; flex: 1; min-width: 0; padding: 1.5em 1.4em; }
.sh-outline > header { display: grid; gap: 0.5em; padding-bottom: 1em; border-bottom: 1px solid var(--border); }
.sh-unit { display: grid; gap: 0.6em; padding: 1em 1.1em; border: 1px solid var(--border); border-radius: 0.875em; background: var(--surface); }
.sh-unit > .sh-mono { letter-spacing: 0.08em; text-transform: none; font-size: 0.62em; }
.sh-unit h4 { font-size: 0.98em; font-weight: 600; line-height: 1.25; }
.sh-unit p { font-size: 0.74em; line-height: 1.5; color: var(--muted); }
.sh-unit.is-changed { border-color: color-mix(in srgb, var(--teal) 55%, transparent); }
.sh-change { display: grid; gap: 0.5em; padding: 0.7em 0.8em; border-left: 2px solid var(--teal); border-radius: 0 0.5em 0.5em 0; background: var(--teal-tint); }
.sh-change .sh-mono { color: var(--teal); }
.sh-change p { color: var(--ink); }
.sh-change del { color: var(--muted); }
.sh-change mark { padding: 0.05em 0.3em; border-radius: 0.25em; background: color-mix(in srgb, var(--teal) 28%, transparent); color: var(--ink); }

/* Step four: a guided room in the course player. The 3D scene is a still taken from the player's own canvas
   (assets/product/guided-room-*.webp), three by two, with the player's points, card and OTTO laid over it
   where the player puts them. Under the still the ground carries on in the scene's own grey. */
.shot-room .sh-bar { gap: 1.2em; }
.sh-back { flex: none; padding: 0.7em 1em; border: 1px solid var(--border); border-radius: 99em; font: 500 0.66em / 1 var(--mono); color: var(--muted); }
.shot-room .sh-course span { letter-spacing: 0.14em; }
.shot-room .sh-course strong { font-size: 0.95em; }
.sh-meta { display: flex; align-items: center; gap: 1em; flex: none; font: 400 0.62em / 1 var(--mono); color: var(--muted); }
.sh-meta svg { width: 2.6em; height: 2.6em; padding: 0.5em; border: 1px solid var(--border); border-radius: 0.6em; background: var(--surface); stroke: var(--ink); }
.sh-path { display: grid; gap: 0.7em; flex: none; padding: 0.8em 1.4em 0.9em; border-bottom: 1px solid var(--border); background: var(--surface); }
.sh-path p { display: flex; justify-content: space-between; }
.sh-path ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4em; }
.sh-step { display: flex; justify-content: center; align-items: center; gap: 0.6em; padding: 0.7em 0.4em; border: 1px solid transparent; border-top: 0.25em solid var(--border); font: 400 0.62em / 1 var(--mono); color: var(--muted); white-space: nowrap; }
.sh-step b { display: grid; place-items: center; width: 2em; height: 2em; border: 1px solid var(--line); border-radius: 0.45em; font-weight: 500; }
.sh-step svg { width: 1.5em; height: 1.5em; stroke: var(--muted); }
.sh-step.is-on { border-color: var(--amber); border-radius: 0 0 0.8em 0.8em; background: var(--amber-tint); color: var(--ink); }
.sh-step.is-on b { border-color: var(--amber); background: var(--amber); color: var(--on-amber); }
.sh-scene { position: relative; flex: 1; min-height: 0; background: #a5afb5; overflow: hidden; }
.sh-world { position: absolute; top: 0; left: 0; width: 56em; aspect-ratio: 3 / 2; }
.how .how-show .shot .sh-world img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; background: none; object-fit: cover; }
.sh-spot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: grid; justify-items: center; gap: 0.35em; white-space: nowrap; transform: translateX(-50%); }
.sh-spot i { width: 1.1em; height: 1.1em; margin-top: -0.55em; border: 0.14em solid var(--ink); border-radius: 50%; background: rgb(11 12 15 / 0.25); }
.sh-spot b { padding: 0.3em 0.7em; border-radius: 99em; background: rgb(11 12 15 / 0.82); font-size: 0.64em; font-weight: 500; line-height: 1.2; }
/* At the still's edges the label is laid inward, the ring staying on its point. */
.sh-spot.is-edge { justify-items: start; transform: translateX(-0.55em); }
.sh-spot.is-end { justify-items: end; transform: translateX(calc(-100% + 0.55em)); }
.sh-setup { position: absolute; top: 1.2em; left: 1.2em; display: grid; gap: 0.6em; width: 25em; padding: 1.1em 1.2em; border: 1px solid var(--border); border-radius: 0.875em; background: var(--surface); }
.sh-setup p { font-size: 0.82em; line-height: 1.55; }
.sh-otto { position: absolute; top: 24.6em; right: 1.2em; display: grid; justify-items: end; gap: 0.6em; }
.sh-otto p { display: grid; justify-items: start; gap: 0.7em; padding: 1em 1.1em; border: 1px solid var(--border); border-radius: 0.875em 0.875em 0.2em 0.875em; background: var(--bg); font-size: 0.86em; }
.sh-otto .sh-btn { font-size: 0.9em; }
.sh-otto i { display: grid; place-items: center; width: 3.8em; height: 3.8em; border: 0.18em solid var(--amber); border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 0.3em rgb(255 198 26 / 0.25); }
.sh-otto svg { width: 2.2em; height: 2.2em; fill: var(--amber); }
.sh-caption { position: absolute; left: 1.94em; top: 53.5em; padding: 0.5em 0.9em; border-radius: 0.4em; background: rgb(11 12 15 / 0.72); font: 400 0.62em / 1.2 var(--mono); letter-spacing: 0.06em; color: var(--muted); }

/* Side by side: the panel's height is the pin's, so the screen fills it and the shape is the panel's own. */
@media (min-width: 64rem) {
  .how.is-sideways .how-show:has(.shot) {
    aspect-ratio: auto;
    min-height: 0;
  }
}

@media (forced-colors: active) {
  .sh-gate.is-on, .sh-files .is-on, .sh-unit.is-changed { border-color: Highlight; }
}