.route-animator-page {
  overflow: hidden;
}

.route-page-shell {
  min-height: 100dvh;
}

.route-tool-frame {
  min-height: 0;
  overflow: hidden;
}

.route-tool-frame #root,
.route-tool-frame .app-root {
  min-height: 0;
}

.route-tool-frame .app-root {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100dvh - var(--route-header-height, 76px));
  min-height: 0;
  overflow: hidden;
}

.route-tool-frame .app-shell {
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.route-tool-frame #root,
.route-tool-frame .app-root {
  height: calc(100dvh - var(--route-header-height, 76px));
}

.route-tool-frame .route-panel,
.route-tool-frame .style-panel,
.route-tool-frame .detached-style-panel {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.route-tool-frame .style-panel {
  padding-top: 0;
}

.route-tool-frame .preview-column,
.route-tool-frame .preview-stack {
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.route-tool-frame .preview-column {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

.style-panel .panel-window-row {
  position: sticky;
  top: 0;
  z-index: 21;
  margin: 0 -16px;
  padding: 14px 16px 8px;
  background: #efe5cf;
}

.style-panel .panel-window-row button {
  display: none;
}

.style-panel .settings-mode-tabs {
  position: sticky;
  top: 41px;
  z-index: 20;
  margin: 0 -16px 12px;
  padding: 0 16px 12px;
  background: #efe5cf;
}

.style-panel .settings-mode-tab {
  border-radius: 7px;
}

.style-panel .settings-mode-tab.active {
  border-radius: 7px;
}

.style-panel .settings-mode-tab span {
  width: 20px;
  height: 20px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--settings-tab-icon) center / 16px 16px no-repeat;
  mask: var(--settings-tab-icon) center / 16px 16px no-repeat;
}

.style-panel .settings-mode-tab:nth-child(1) span {
  --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}

.style-panel .settings-mode-tab:nth-child(2) span {
  --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='13.5' r='2.5'/%3E%3Ccircle cx='8.5' cy='16.5' r='2.5'/%3E%3Cpath d='M8.5 19H7a5 5 0 0 1-5-5 10 10 0 0 1 10-10h1.5'/%3E%3C/svg%3E");
}

.style-panel .settings-mode-tab:nth-child(3) span {
  --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4 17 7h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3l2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
}

.style-panel .settings-mode-tab:nth-child(4) span {
  --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E");
}

.style-panel .settings-mode-tab:nth-child(5) span {
  --settings-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}

.style-panel .panel-section:has(.preset-thumbnail-grid) > h2 {
  order: 0;
}

.style-panel .panel-section:has(.preset-thumbnail-grid) > label:has(.segmented-control) {
  order: 1;
}

.style-panel .panel-section:has(.preset-thumbnail-grid) > .preset-thumbnail-grid {
  order: 2;
}

.style-panel .panel-section:has(.preset-thumbnail-grid) > :not(h2):not(label):not(.preset-thumbnail-grid) {
  order: 3;
}

.camera-tab-hidden {
  display: none !important;
}

.map-studio-card {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(16, 37, 30, .18);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 10px 24px rgba(16, 37, 30, .08);
}

.map-studio-header,
.map-studio-media-row,
.map-studio-two-col {
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-studio-header {
  justify-content: space-between;
}

.map-studio-header div:first-child {
  display: grid;
  gap: 2px;
}

.map-studio-header span,
.map-studio-card small {
  color: #60757a;
  font-size: 11px;
  font-weight: 800;
}

.map-studio-header strong,
.map-studio-subsection > strong {
  color: #07110e;
  font-size: 14px;
  font-weight: 900;
}

.map-studio-history {
  display: flex;
  gap: 6px;
}

.map-studio-history button,
.map-studio-toggle-grid button,
.map-studio-media-row button,
.map-studio-file,
.map-studio-segmented button,
.map-studio-scene-row button {
  min-height: 34px;
  border: 1px solid rgba(16, 37, 30, .18);
  border-radius: 7px;
  background: #fffaf0;
  color: #10251e;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.map-studio-history button {
  min-width: 52px;
  padding: 0 9px;
  font-size: 11px;
}

.map-studio-history button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.map-studio-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.map-studio-toggle-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px;
}

.map-studio-toggle-grid button.active,
.map-studio-segmented button.active,
.map-studio-scene-row button.active {
  border-color: #0f5132;
  background: #0f5132;
  color: #fffaf0;
}

.map-studio-range {
  display: grid;
  gap: 7px;
  color: #10251e;
  font-size: 12px;
  font-weight: 900;
}

.map-studio-range span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.map-studio-range input {
  width: 100%;
  accent-color: #0f5132;
}

.map-studio-range.compact {
  margin-top: 8px;
}

.map-studio-subsection {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(16, 37, 30, .12);
}

.map-studio-subsection.first {
  padding-top: 0;
  border-top: 0;
}

.map-studio-media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch;
}

.map-studio-media-row button,
.map-studio-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.map-studio-file {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.map-studio-file input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.map-studio-two-col {
  align-items: end;
}

.map-studio-two-col label {
  display: grid;
  flex: 1;
  gap: 6px;
  color: #10251e;
  font-size: 12px;
  font-weight: 900;
}

.map-studio-two-col select {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(16, 37, 30, .18);
  border-radius: 7px;
  background: #fffaf0;
  color: #10251e;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.map-studio-segmented,
.map-studio-scene-row {
  display: grid;
  gap: 8px;
}

.map-studio-segmented {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px;
  border: 1px solid rgba(16, 37, 30, .14);
  border-radius: 8px;
  background: rgba(16, 37, 30, .06);
}

.map-studio-segmented button {
  border-color: transparent;
  background: transparent;
}

.map-studio-scene-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.map-studio-scene-row button {
  padding: 0 10px;
}

.preview-stack {
  isolation: isolate;
}

.preview-stack > :not(.map-studio-preview-bg):not(.map-studio-preview-media):not(.map-studio-terrain-layer):not(.map-studio-buildings-layer):not(.map-studio-label-chip) {
  position: relative;
  z-index: 2;
  transition: filter .18s ease, opacity .18s ease;
}

.map-studio-preview-bg,
.map-studio-preview-media,
.map-studio-terrain-layer,
.map-studio-buildings-layer,
.map-studio-label-chip {
  pointer-events: none;
}

.map-studio-preview-bg,
.map-studio-preview-media,
.map-studio-terrain-layer,
.map-studio-buildings-layer {
  position: absolute;
  inset: 0;
}

.map-studio-preview-bg {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(38, 113, 91, .48), transparent 38%),
    linear-gradient(135deg, #071812, #1a4a39);
}

.preview-stack[data-studio-scene="space"] .map-studio-preview-bg {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 250, 240, .32), transparent 12%),
    radial-gradient(circle at 64% 58%, rgba(59, 116, 150, .38), transparent 28%),
    linear-gradient(135deg, #05070d, #17223c);
}

.preview-stack[data-studio-scene="sunset"] .map-studio-preview-bg {
  background:
    radial-gradient(circle at 65% 28%, rgba(244, 211, 141, .52), transparent 24%),
    linear-gradient(135deg, #352b43, #e4a35a);
}

.preview-stack[data-studio-scene="parchment"] .map-studio-preview-bg {
  background:
    linear-gradient(135deg, rgba(128, 109, 62, .14), transparent),
    linear-gradient(135deg, #f4efe3, #d9c79b);
}

.preview-stack[data-studio-scene="transparent"] .map-studio-preview-bg {
  background: #000;
}

.preview-stack[data-studio-media="on"] .map-studio-preview-bg {
  filter: saturate(.75);
}

.map-studio-preview-media {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--studio-media-opacity, 1);
  filter: blur(var(--studio-media-blur, 0));
}

.preview-stack canvas,
.preview-stack .maplibregl-canvas,
.preview-stack .mapboxgl-canvas {
  filter: var(--studio-map-filter, none);
  opacity: var(--studio-map-opacity, 1);
}

.map-studio-labels-off .preview-stack {
  --studio-map-filter: saturate(.72) contrast(.88) brightness(1.06);
}

.map-studio-terrain-layer {
  z-index: 3;
  display: none;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(15, 81, 50, .18), transparent 28%),
    radial-gradient(ellipse at 70% 66%, rgba(198, 161, 91, .16), transparent 32%),
    repeating-linear-gradient(135deg, rgba(16, 37, 30, .08) 0 1px, transparent 1px 18px);
  mix-blend-mode: multiply;
}

.map-studio-terrain-on .map-studio-terrain-layer {
  display: none;
}

.map-studio-buildings-layer {
  z-index: 4;
  display: none;
  opacity: .6;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(16, 37, 30, .22) 10% 12%, transparent 12% 24%, rgba(16, 37, 30, .16) 24% 27%, transparent 27%),
    linear-gradient(0deg, transparent 0 14%, rgba(255, 250, 240, .16) 14% 15%, transparent 15% 31%, rgba(255, 250, 240, .12) 31% 32%, transparent 32%);
  transform: perspective(420px) rotateX(58deg) translateY(22%);
  transform-origin: center bottom;
}

.map-studio-globe-map .map-studio-buildings-layer {
  opacity: .78;
}

.map-studio-buildings-on .map-studio-buildings-layer {
  display: none;
}

.map-studio-label-chip {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: none;
  padding: 6px 9px;
  border: 1px solid rgba(16, 37, 30, .18);
  border-radius: 7px;
  background: rgba(255, 250, 240, .9);
  color: #10251e;
  font-size: 11px;
  font-weight: 900;
}

.map-studio-labels-off .map-studio-label-chip {
  display: block;
}

.runtime-error-panel {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  padding: 10px 12px;
  border: 1px solid #8a3f2d;
  border-radius: 7px;
  background: #fff0e8;
  color: #5c281b;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(7, 17, 14, .28);
}

.intro-tour-overlays {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

.intro-tour-scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 14, .32);
}

.intro-tour-frame {
  position: absolute;
  border: 2px solid #c6a15b;
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(7, 17, 14, .16),
    0 16px 40px rgba(7, 17, 14, .28),
    inset 0 0 0 1px rgba(255, 250, 240, .72);
  transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}

.intro-tour-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c6a15b;
  box-shadow: 0 0 0 0 rgba(198, 161, 91, .55);
  transform: translate(-50%, -50%);
  animation: intro-pulse 1.5s ease-out infinite;
}

.route-empty-state.is-intro-guide {
  position: fixed;
  z-index: 100;
  display: grid;
  gap: 14px;
  max-height: min(88vh, 620px);
  overflow: visible;
  padding: 14px;
  border: 1px solid rgba(16, 37, 30, .24);
  border-radius: 10px;
  background: #fffaf0;
  box-shadow: 0 24px 70px rgba(7, 17, 14, .42);
  transform: none;
  transition: left .22s ease, top .22s ease;
}

.route-empty-state.is-intro-guide:before {
  position: absolute;
  width: 18px;
  height: 18px;
  content: "";
  background: #fffaf0;
  border: inherit;
  transform: rotate(45deg);
}

.route-empty-state.is-intro-guide[data-pointer-side="left"]:before {
  left: -10px;
  top: 34px;
  border-right: 0;
  border-top: 0;
}

.route-empty-state.is-intro-guide[data-pointer-side="right"]:before {
  right: -10px;
  top: 34px;
  border-left: 0;
  border-bottom: 0;
}

.route-empty-state.is-intro-guide[data-pointer-side="top"]:before {
  left: 50%;
  top: -10px;
  border-right: 0;
  border-bottom: 0;
}

.route-empty-state.is-intro-guide[data-pointer-side="bottom"]:before {
  left: 50%;
  bottom: -10px;
  border-left: 0;
  border-top: 0;
}

.intro-guide-topline,
.intro-guide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.intro-guide-topline span {
  color: #60757a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.intro-guide-stage {
  display: grid;
  gap: 10px;
}

.intro-eyebrow {
  margin: 0;
  color: #8a3f2d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.route-empty-state.is-intro-guide h1 {
  margin: 0;
  max-width: 16ch;
  color: #07110e;
  font-size: 26px;
  line-height: 1.02;
}

.route-empty-state.is-intro-guide p {
  margin: 0;
  color: #35534d;
  font-size: 13px;
  line-height: 1.45;
}

.intro-visual {
  position: relative;
  height: 118px;
  overflow: hidden;
  border: 1px solid rgba(16, 37, 30, .16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(16, 37, 30, .07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16, 37, 30, .06) 1px, transparent 1px),
    #e8dcc3;
  background-size: 24px 24px;
}

.intro-visual:after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 72px;
  height: 16px;
  content: "";
  border-radius: 99px;
  background: rgba(255, 250, 240, .82);
}

.intro-visual--route span {
  position: absolute;
  left: 22px;
  top: 66px;
  width: 260px;
  height: 42px;
  border-top: 5px solid #8a3f2d;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.intro-visual--route i,
.intro-visual--timeline i {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 3px solid #10251e;
  border-radius: 50%;
  background: #c6a15b;
}

.intro-visual--route i:nth-child(2) {
  left: 30px;
  top: 62px;
}

.intro-visual--route i:nth-child(3) {
  left: 130px;
  top: 46px;
}

.intro-visual--route i:nth-child(4) {
  right: 42px;
  top: 72px;
}

.intro-visual--phone span {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 58px;
  height: 96px;
  border: 4px solid #10251e;
  border-radius: 14px;
  background: linear-gradient(#245b73 0 42%, #fffaf0 42%);
  transform: translateX(-50%);
}

.intro-visual--phone b,
.intro-visual--phone i {
  position: absolute;
  left: calc(50% - 18px);
  width: 36px;
  height: 6px;
  border-radius: 99px;
  background: #c6a15b;
}

.intro-visual--phone b {
  top: 65px;
}

.intro-visual--phone i {
  top: 78px;
  background: #10251e55;
}

.intro-visual--timeline span {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 54px;
  height: 8px;
  border-radius: 99px;
  background: rgba(16, 37, 30, .16);
}

.intro-visual--timeline i:nth-child(2) {
  left: 38px;
  top: 50px;
}

.intro-visual--timeline i:nth-child(3) {
  left: 45%;
  top: 50px;
}

.intro-visual--timeline i:nth-child(4) {
  right: 40px;
  top: 50px;
}

.intro-visual--camera span {
  position: absolute;
  left: 26px;
  top: 25px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fffaf0 0 18px, #245b73 19px 24px, transparent 25px);
}

.intro-visual--camera i {
  position: absolute;
  left: 100px;
  top: 54px;
  width: 130px;
  height: 3px;
  background: #10251e;
  transform: rotate(-12deg);
}

.intro-visual--camera b {
  position: absolute;
  right: 28px;
  top: 34px;
  width: 54px;
  height: 54px;
  border: 3px solid #8a3f2d;
  border-radius: 12px;
}

.intro-visual--popup span {
  position: absolute;
  left: 38px;
  top: 24px;
  width: 188px;
  height: 70px;
  border: 2px solid #10251e;
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 10px 22px rgba(7, 17, 14, .22);
}

.intro-visual--popup b,
.intro-visual--popup i {
  position: absolute;
  left: 58px;
  height: 8px;
  border-radius: 99px;
}

.intro-visual--popup b {
  top: 42px;
  width: 82px;
  background: #8a3f2d;
}

.intro-visual--popup i:nth-child(3) {
  top: 60px;
  width: 142px;
  background: #10251e33;
}

.intro-visual--popup i:nth-child(4) {
  top: 76px;
  width: 94px;
  background: #c6a15b;
}

.intro-visual--export span {
  position: absolute;
  left: 26px;
  top: 22px;
  width: 134px;
  height: 76px;
  border-radius: 8px;
  background: #07110e;
}

.intro-visual--export i {
  position: absolute;
  left: 52px;
  top: 47px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #fffaf0;
}

.intro-visual--export b {
  position: absolute;
  right: 36px;
  top: 38px;
  width: 88px;
  height: 42px;
  border: 2px solid #8a3f2d;
  border-radius: 7px;
  background: #fffaf0;
}

.intro-progress {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-top: 2px;
}

.intro-progress span {
  width: 18px;
  height: 5px;
  border-radius: 99px;
  background: rgba(16, 37, 30, .18);
}

.intro-progress span.active {
  width: 34px;
  background: #10251e;
}

.route-empty-state .intro-skip-button,
.route-empty-state .intro-back-button {
  border-color: rgba(16, 37, 30, .26);
  background: #fffaf0;
}

.intro-guide-actions button {
  min-width: 112px;
}

.timeline-lane-name--popups {
  color: #8a3f2d;
}

.timeline-clip-block--popups,
.clip-lane-tag--popups {
  border-color: #8a3f2d;
  background: #f5d8cc;
  color: #5c281b;
}

.popup-block {
  will-change: transform;
}

.marker-animation-settings {
  gap: 10px;
}

.marker-image-panel {
  margin-top: 2px;
}

.marker-image-preview {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.marker-image-preview img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid rgba(16, 37, 30, .18);
  border-radius: 6px;
  background: #fffaf0;
}

.marker-image-preview strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-picker-field {
  display: grid;
  gap: 8px;
}

.vehicle-picker-label {
  color: #07110e;
  font-size: 13px;
  font-weight: 800;
}

.vehicle-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.vehicle-picker-option {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-height: 66px;
  padding: 8px 5px;
  border: 1px solid rgba(16, 37, 30, .2);
  border-radius: 7px;
  background: #fffaf0;
  color: #10251e;
  font-size: 11px;
  font-weight: 850;
  text-transform: capitalize;
}

.vehicle-picker-option.active {
  border-color: #10251e;
  background: #10251e;
  color: #fffaf0;
  box-shadow: inset 0 0 0 1px #10251e;
}

.vehicle-icon-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes intro-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(198, 161, 91, .55);
  }
  80% {
    box-shadow: 0 0 0 18px rgba(198, 161, 91, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(198, 161, 91, 0);
  }
}

@media (max-width: 760px) {
  .route-animator-page {
    overflow: auto;
  }

  .route-tool-header {
    position: sticky;
    top: 0;
  }

  .route-tool-frame {
    min-height: calc(100dvh - var(--route-header-height, 76px));
    overflow: visible;
  }

  .route-tool-frame #root,
  .route-tool-frame .app-shell {
    height: auto;
    min-height: 0;
  }

  .route-tool-frame .app-root {
    min-height: 100dvh;
  }

  .app-toolbar {
    gap: 8px;
    padding: 10px;
  }

  .app-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .app-toolbar-actions button,
  .app-toolbar-actions select {
    min-width: 0;
    width: 100%;
    font-size: 12px;
  }

  .route-panel,
  .style-panel,
  .detached-style-panel {
    max-height: none;
    overflow: visible;
  }

  .preview-column {
    height: min(76dvh, 640px);
    min-height: 460px;
  }

  .route-empty-state.is-intro-guide {
    width: min(430px, calc(100% - 24px)) !important;
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }

  .intro-visual {
    height: 96px;
  }
}

@media (max-width: 480px) {
  .route-tool-nav {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 14px;
  }

  .route-tool-nav .nav-menu,
  .route-tool-nav .route-tool-cta,
  .route-tool-nav > a {
    width: 100%;
  }

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline-transport {
    justify-content: center;
  }
}