/* Autonomous Trace scenes around the original Otto video. */
.otto__trace { display: none; }
.otto.trace-ready { overflow: clip; }
.trace-ready .otto__grid { display: block; width: min(100% - 44px, 1440px); }
.trace-ready .otto__copy { max-width: 760px; margin: 0 auto 36px; }
.trace-ready .otto__visual { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 880px) minmax(140px, 1fr); align-items: center; gap: 12px; }
.trace-ready .otto__screen { width: 100%; }
.trace-ready .otto__trace { display: block; height: clamp(240px, 25vw, 380px); min-width: 0; pointer-events: none; }
.otto__trace canvas, .trace-decoration canvas { display: block; width: 100%; height: 100%; }
.otto__greeting { display: none; }
.trace-decoration { position: absolute; width: 220px; height: 280px; bottom: 70px; left: max(12px, calc(50% - 780px)); pointer-events: none; }
#pour-qui .trace-decoration { left: auto; right: max(12px, calc(50% - 780px)); }
@media (min-width: 1201px) {
  .trace-ready .otto__trace--left { transform: translateY(-440px); }
}
@media (max-width: 1200px) {
  .trace-decoration, #pour-qui .trace-decoration { position: relative; left: auto; right: auto; bottom: auto; width: 180px; height: 190px; margin: 24px auto 0; }
}
@media (max-width: 900px) {
  .trace-ready .otto__visual { grid-template-columns: minmax(100px, 1fr) minmax(0, 3fr) minmax(100px, 1fr); gap: 0; }
}
@media (max-width: 600px) {
  .trace-ready .otto__visual { grid-template-columns: 1fr 1fr; gap: 8px; }
  .trace-ready .otto__screen { grid-column: 1 / -1; grid-row: 1; }
  .trace-ready .otto__trace { grid-row: 2; height: 170px; }
  .trace-ready .otto__copy { position: relative; margin-bottom: 24px; }
  .trace-ready .otto__copy h2 { padding-right: 110px; }
  .trace-ready .otto__trace--right { grid-column: 1 / -1; width: 200px; margin-inline: auto; }
  .trace-ready .otto__greeting { display: block; position: absolute; right: -12px; top: -20px; width: 120px; height: 110px; }
  .trace-ready .otto__greeting .otto__trace { height: 110px; }
}