/* A branded cut-paper scene, shared by the static poster and 8fps animation. */
.tsi-cover { --scene-violet: #5955ef; margin: 0; font-family: 'Onest', sans-serif; scroll-margin-top: 110px; }
.tsi-cover__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 26px; background: var(--scene-violet); box-shadow: 0 16px 44px #3632a018; }
.tsi-cover__frame *, .tsi-cover__frame *::before, .tsi-cover__frame *::after { box-sizing: border-box; }
.tsi-cover__poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.tsi-cover__poster img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; margin: 0; }
.tsi-cover__canvas { position: absolute; inset: 0; container-type: inline-size; visibility: hidden; background: var(--scene-violet); color: #fff; isolation: isolate; }
.tsi-cover.is-enhanced .tsi-cover__canvas, .tsi-cover--render .tsi-cover__canvas { visibility: visible; }
.tsi-cover--render .tsi-cover__poster { opacity: 0; }
.tsi-cover__headline { position: absolute; z-index: 4; left: 7%; top: 10%; width: 67%; font-family: 'Onest', sans-serif; font-size: 5.35cqw; font-weight: 650; line-height: 1.08; letter-spacing: -.048em; }
.tsi-cover__brand { position: absolute; z-index: 5; display: flex; align-items: center; gap: .8cqw; top: 11%; right: 7%; color: #fff; }
.tsi-cover__brand img { width: 3.3cqw; height: 3.3cqw; object-fit: contain; margin: 0; filter: brightness(0) invert(1); }
.tsi-cover__brand span { font-size: 2cqw; font-weight: 600; letter-spacing: -.055em; }
.tsi-cover .tsi-scene__brand-shadow { position: absolute; z-index: -1; right: -7%; top: 13%; width: 49%; height: 92%; max-width: none; object-fit: contain; margin: 0; opacity: .065; filter: brightness(0) invert(1); transform: rotate(12deg); }
.tsi-scene__floor { position: absolute; z-index: 0; left: -10%; bottom: -17%; width: 119%; height: 44%; border-radius: 50%; background: #aaa5ff; transform: rotate(-5deg); }
.tsi-scene__floor::after { content: ''; position: absolute; inset: 8% 4% auto; height: 62%; border-radius: 50%; border-top: 1px solid #ffffff55; }
.tsi-scene__car { position: absolute; z-index: 3; left: 3.2%; bottom: 7%; width: 72%; filter: drop-shadow(0 1.2cqw 1.1cqw #30267738); }
.tsi-cover .tsi-scene__car img { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.tsi-scene__car-note { position: absolute; z-index: 5; bottom: 4.5%; left: 13%; color: #30256e; font: 600 2.2cqw/1.1 'Caveat', cursive; transform: rotate(-3deg); }
.tsi-scene__inspector { --actor-x: 0cqw; --actor-y: 0cqw; --actor-turn: 0deg; position: absolute; z-index: 2; right: 5%; bottom: 9.2%; width: 27%; aspect-ratio: 2 / 3; transform: translate(var(--actor-x), var(--actor-y)) rotate(var(--actor-turn)); transform-origin: 50% 96%; filter: drop-shadow(0 .8cqw .8cqw #30267728); }
.tsi-cover .tsi-scene__inspector img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; visibility: hidden; }
.tsi-cover .tsi-scene__inspector img[data-pose="explain"] { visibility: inherit; }
.tsi-cover[data-scene-phase="approach"] .tsi-scene__inspector img,
.tsi-cover[data-scene-phase="inspect"] .tsi-scene__inspector img { visibility: hidden; }
.tsi-cover[data-scene-phase="approach"] .tsi-scene__inspector img[data-pose="walk"],
.tsi-cover[data-scene-phase="inspect"] .tsi-scene__inspector img[data-pose="inspect"] { visibility: inherit; }
.tsi-scene__bubble { position: absolute; z-index: 5; left: 55.5%; top: 24%; width: 20.5%; padding: 1.25cqw 1.6cqw 1.5cqw; border-radius: 2cqw 2cqw .7cqw 2cqw; background: #fff; box-shadow: 0 .7cqw 1.6cqw #2821691c; color: #3632a0; transform: rotate(3deg); text-align: center; font: 600 2.5cqw/1.03 'Caveat', cursive; }
.tsi-scene__bubble::after { content: ''; position: absolute; right: -.6cqw; top: 45%; width: 1.5cqw; height: 1.5cqw; background: #fff; transform: rotate(-25deg); border-radius: 0 0 .2cqw 0; }
.tsi-scene__bubble span { display: none; }
.tsi-scene__bubble span[data-line="explain"] { display: block; }
.tsi-cover[data-scene-phase="approach"] .tsi-scene__bubble span,
.tsi-cover[data-scene-phase="inspect"] .tsi-scene__bubble span { display: none; }
.tsi-cover[data-scene-phase="approach"] .tsi-scene__bubble span[data-line="approach"],
.tsi-cover[data-scene-phase="inspect"] .tsi-scene__bubble span[data-line="inspect"] { display: block; }
.tsi-scene__attention { position: absolute; z-index: 4; left: 57%; top: 44%; width: 10%; height: 12%; overflow: visible; max-width: none; max-height: none; opacity: 0; }
.tsi-cover[data-scene-phase="inspect"] .tsi-scene__attention { opacity: 1; }
.tsi-scene__attention path { stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }
.tsi-cover__toggle { position: absolute; z-index: 6; bottom: 15px; right: 15px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid #ffffff99; background: #fff; color: #5143cc; font: 12px 'Onest', sans-serif; cursor: pointer; }
.tsi-cover__toggle[hidden], .tsi-cover--render .tsi-cover__toggle { display: none; }
.tsi-cover__toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tsi-cover--render .tsi-cover__frame { border: 0; border-radius: 0; box-shadow: none; }
.tsi-cover--render figcaption { display: none; }
@media (max-width: 600px) {
  .tsi-cover { scroll-margin-top: 90px; }
  .tsi-cover__frame { aspect-ratio: 4 / 5; border-radius: 21px; }
  .tsi-cover__headline { left: 8%; top: 14%; width: 86%; font-size: 8.6cqw; line-height: 1.08; }
  .tsi-cover__brand { top: 6.2%; left: 8%; right: auto; gap: 1.5cqw; }
  .tsi-cover__brand img { width: 5.2cqw; height: 5.2cqw; }
  .tsi-cover__brand span { font-size: 4.1cqw; }
  .tsi-cover .tsi-scene__brand-shadow { top: 33%; right: -22%; width: 92%; height: 65%; }
  .tsi-scene__floor { bottom: -12%; height: 34%; left: -35%; width: 160%; transform: rotate(-8deg); }
  .tsi-scene__car { left: -1%; bottom: 8%; width: 94%; }
  .tsi-scene__inspector { right: 3%; bottom: 21.5%; width: 41%; }
  .tsi-scene__bubble { right: auto; left: 8%; top: 40%; width: 42%; padding: 2.4cqw 2.7cqw 2.8cqw; font-size: 5.25cqw; border-radius: 3.5cqw 3.5cqw 1cqw 3.5cqw; transform: rotate(-5deg); }
  .tsi-scene__bubble::after { right: -.6cqw; bottom: 3cqw; width: 2.5cqw; height: 2.5cqw; transform: rotate(-25deg); }
  .tsi-scene__attention { top: 62%; left: 54%; width: 15%; height: 9%; }
  .tsi-scene__car-note { bottom: 6%; left: 10%; font-size: 4.25cqw; }
  .tsi-cover__toggle { width: 30px; height: 30px; bottom: 9px; right: 9px; font-size: 10px; }
}