/* Mobile exploration uses the site's existing artwork, tokens and typefaces. */
.interactive-page main {background:var(--paper);background-image:radial-gradient(#192d381c .8px,transparent .8px);background-size:24px 24px}
.interactive-shell {max-width:1120px;margin:0 auto;padding:32px 24px 56px}
.interactive-back {display:inline-flex;align-items:center;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.interactive-intro {margin:16px 0 28px}
.interactive-intro h1 {font-size:clamp(15px,4.4vw,30px);line-height:1.2}
.interactive-intro h1 span {color:var(--muted)}
.interactive-page .ev-controls {grid-template-columns:1fr 1fr;gap:12px;margin:16px 0;padding:0;border:0}
.interactive-page .ev-phases {grid-column:1/-1;gap:8px}
.interactive-page .ev-phase {border:1px solid var(--line);background:var(--card);border-radius:6px;min-height:60px;margin:0;padding:12px;font-size:13px;white-space:normal;gap:8px}
.interactive-page .ev-phase[aria-pressed=true] {background:var(--ink);color:var(--paper);border-color:var(--ink)}
.interactive-page .ev-phase[aria-pressed=true] span:first-child {color:var(--mint)}
.interactive-page .ev-play,.interactive-page .ev-compare {position:static;min-height:48px;padding:10px 12px;border:1px solid var(--ink);border-radius:6px;font-size:14px;color:var(--ink)}
.interactive-page .ev-play {background:var(--ink);color:var(--mint)}
.interactive-page .ev-compare {background:var(--card)}
.interactive-page .ev-scrubber {display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0 0 20px}
.interactive-page .ev-scrubber label {font-size:12px;max-width:none}
.interactive-page .ev-scrubber input[type=range] {grid-row:2;grid-column:1/-1;min-height:44px}
.interactive-page .ev-scrubber output {grid-column:2;grid-row:1;font-size:12px}
.interactive-page .ev-visual {display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.interactive-page .ev-scene {width:100%;max-width:100%;margin:0 auto;border:1px solid var(--line);border-radius:6px;container-type:inline-size}
.interactive-page .ev-info {min-width:0}
.interactive-page .ev-zoom-open {display:block;margin:8px 0 12px;font-size:13px}
.interactive-page .ev-annotations {position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;pointer-events:none}
.interactive-page .ev-annotation-layer {position:absolute;inset:0;display:block;padding:0}
.interactive-page .ev-note {position:absolute;display:flex;align-items:flex-start;height:auto;gap:8px;padding:11px 12px;border:1px solid rgb(255 255 255 / 49%);border-radius:5px;background:rgb(248 248 243 / 79%);box-shadow:0 3px 18px rgb(25 45 56 / 3%);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.interactive-page .ev-note-1 {left:3%;top:6%;right:auto;bottom:auto;width:23%}
.interactive-page .ev-note-2 {right:3%;top:8%;left:auto;bottom:auto;width:25%}
.interactive-page .ev-note-3 {left:52%;bottom:4%;right:auto;top:auto;width:26%}
.interactive-page .ev-note-copy {display:block;width:auto}
.interactive-page .ev-note-number {display:block;width:auto;height:auto;border:0;border-radius:0;align-self:auto;font-size:9px;padding-top:1px}
.interactive-page .ev-annotation-disclaimer {position:absolute;left:3%;bottom:3%;margin:0;padding:4px 6px;background:rgb(248 248 243 / 75%);font-size:9px}
.interactive-page .ev-annotation-leaders,.interactive-page .ev-annotation-dimensions,.interactive-page .ev-annotation-pin {display:block}
.interactive-page .ev-trace-route {display:grid;grid-template-columns:1fr;gap:6px;margin-top:9px}
.interactive-page .ev-trace-route li {display:flex;flex-direction:row;align-items:center;font-size:10px;gap:7px}
.interactive-page .ev-trace-step-state {display:inline;font-size:8px}
.interactive-page [data-annotation-phase="3"] .ev-note-title {display:block}
.interactive-page .ev-annotation-mobile-pins,.interactive-page .ev-annotation-empty {display:none}
.interactive-page .ev-gene-cta {display:flex;justify-content:space-between;gap:12px;margin-top:12px;min-height:48px;font-size:14px}
.interactive-page .ev-lower {min-height:0;padding:0;margin-top:18px;flex-wrap:wrap;gap:12px}
.interactive-page .ev-caption {font-size:13px}
.interactive-page .ev-factory-toggle {font-size:14px;min-height:48px}
.interactive-page :focus-visible {outline:3px solid var(--terra);outline-offset:3px}
@media(max-width:600px) {
  .interactive-shell {padding:16px 16px 40px}
  .interactive-intro {margin:8px 0 20px}
  .interactive-page .ev-phases {grid-template-columns:repeat(2,minmax(0,1fr))}
  .interactive-page .ev-phase {flex-direction:row;align-items:center;justify-content:flex-start;font-size:13px}
  .interactive-page .ev-phase {padding:8px;gap:5px;font-size:12px}
}
/* Reflow only the toolbar at high zoom; the scene and its geometry stay intact. */
@media(max-width:320px) {
  .interactive-page .ev-controls,.interactive-page .ev-phases {grid-template-columns:minmax(0,1fr)}
  .interactive-page .ev-play,.interactive-page .ev-compare {white-space:normal;min-width:0}
}
@container(max-width:700px) {
  .interactive-page .ev-note {padding:5px;gap:3px}
  .interactive-page .ev-note-1 {left:2%;top:3%;width:44%}
  .interactive-page .ev-note-2 {right:2%;top:3%;width:44%}
  .interactive-page .ev-note-3 {left:auto;right:2%;bottom:3%;width:58%}
  .interactive-page .ev-note-number {font-size:8px}
  .interactive-page .ev-note .ev-note-area {font-size:8px;line-height:1.2}
  .interactive-page .ev-note .ev-note-title {font-size:10px;line-height:1.2;margin-top:2px}
  .interactive-page .ev-note .ev-note-detail {font-size:9px;line-height:1.2;margin-top:3px}
  .interactive-page .ev-note .ev-note-meta {font-size:8px;line-height:1.2;margin-top:2px}
  .interactive-page .ev-note .ev-note-price {font-size:13px}
  .interactive-page .ev-annotation-disclaimer {left:2%;bottom:3%;font-size:8px;padding:3px}
  .interactive-page .ev-trace-route {gap:2px;margin-top:4px}
  .interactive-page .ev-trace-route li {font-size:8px;gap:3px}
  .interactive-page .ev-trace-step-state {font-size:7px}
}
/* At phone widths the overlay cards are taller than the drawing and hide one
   another. Let only their text reflow below the unchanged SVG viewport. */
@media(max-width:480px) {
  .interactive-page gabster-evolution {container-type:inline-size}
  .interactive-page .ev-annotations {position:relative;inset:auto;height:auto}
  .interactive-page .ev-annotation-layer.is-visible {position:relative;display:grid;grid-template-rows:auto;gap:8px;padding:8px}
  .interactive-page .ev-annotation-layer:not(.is-visible) {overflow:clip}
  .interactive-page .ev-note {position:relative;inset:auto;width:100%;min-width:0}
  .interactive-page .ev-note-copy {min-width:0;overflow-wrap:anywhere}
  .interactive-page .ev-annotation-disclaimer {position:relative;inset:auto;margin:0 8px 8px}
  .interactive-page .ev-trace-route li {flex-wrap:wrap}
}