:root {
    color: #262a5e;
    font-synthesis: none;
    text-rendering: optimizelegibility;
    background: #f6f4f8;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
}

* {
    box-sizing: border-box
}

html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden
}

button {
    color: inherit;
    font: inherit
}

.visually-hidden {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.app-shell {
    isolation: isolate;
    background: radial-gradient(circle at 50% 28%, #ffffffe6, #0000 48%), #f2eff5;
    /* min-height: 100dvh; */
    position: relative
}

.map-viewport,
.map-viewport canvas {
    width: 100%;
    height: 100%;
    display: block
}

.map-viewport {
    touch-action: none;
    position: absolute;
    inset: 0
}

.map-label-layer,
.map-label-layer__labels {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.map-label-layer {
    z-index: 2
}

.map-label {
    max-width: var(--map-label-max-width);
    min-height: var(--map-label-icon-button-size);
    padding: var(--map-label-padding-y) var(--map-label-padding-x);
    transform-origin: 50%;
    border: 1px solid color-mix(in srgb, var(--label-color) 24%, white);
    color: var(--label-color);
    font-family: var(--map-label-font-family);
    font-size: var(--map-label-font-size);
    font-weight: var(--map-label-font-weight);
    line-height: var(--map-label-line-height);
    letter-spacing: var(--map-label-letter-spacing);
    white-space: nowrap;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    background: #ffffffe8;
    border-radius: 999px;
    align-items: center;
    margin: 0;
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 4px 12px #262a5e1f
}

button.map-label {
    cursor: pointer
}

.map-label[hidden] {
    display: none
}

.map-label--corridor {
    min-height: auto;
    color: var(--label-color);
    box-shadow: none;
    font-size: var(--map-label-corridor-font-size);
    letter-spacing: .055em;
    text-transform: uppercase;
    pointer-events: none;
    background: #ffffffb8;
    border-color: #5f557524;
    padding: .16rem .38rem
}

.map-label--exhibitor {
    color: var(--stand-label-text-color);
    background: var(--stand-label-background);
    font-size: var(--map-label-exhibitor-font-size)
}

.map-label--exhibitor.has-stand-marker {
    width: auto;
    height: var(--stand-label-height);
    min-height: var(--stand-label-height);
    max-width: var(--map-label-max-width);
    padding: 0 var(--stand-label-padding-x);
    border-color: var(--stand-label-border-color);
    border-radius: 0 var(--stand-label-radius) var(--stand-label-radius) 0;
    box-shadow: var(--stand-label-shadow);
    transform-origin: 0 100%;
    justify-content: flex-start;
    overflow: visible
}

.map-label--exhibitor.has-stand-marker.is-flipped {
    border-radius: var(--stand-label-radius) 0 0 var(--stand-label-radius);
    transform-origin: 100% 100%
}

.map-label--exhibitor.has-stand-marker:before,
.map-label--exhibitor.has-stand-marker:after {
    pointer-events: none;
    content: "";
    position: absolute
}

.map-label--exhibitor.has-stand-marker:before {
    bottom: var(--stand-marker-stem-negative);
    left: var(--stand-marker-stem-half-negative);
    width: var(--stand-marker-stem-width);
    height: var(--stand-marker-stem-height);
    background: var(--stand-marker-stem-color);
    border-radius: 999px
}

.map-label--exhibitor.has-stand-marker:after {
    bottom: var(--stand-marker-dot-bottom);
    left: var(--stand-marker-dot-half-negative);
    width: var(--stand-marker-dot-size);
    height: var(--stand-marker-dot-size);
    background: var(--stand-marker-dot-color);
    transform: scaleY(var(--stand-marker-dot-scale-y));
    transform-origin: 50%;
    border-radius: 50%;
    box-shadow: 0 2px 5px #30394f2e
}

.map-label--exhibitor.has-stand-marker.is-flipped:before {
    right: var(--stand-marker-stem-half-negative);
    left: auto
}

.map-label--exhibitor.has-stand-marker.is-flipped:after {
    right: var(--stand-marker-dot-half-negative);
    left: auto
}

.map-label--waypoint {
    width: var(--map-label-icon-button-size);
    min-width: var(--map-label-icon-button-size);
    height: var(--map-label-icon-button-size);
    min-height: var(--map-label-icon-button-size);
    justify-content: center;
    padding: .22rem;
    transition: width .14s, padding .14s, box-shadow .14s;
    overflow: visible
}

.map-label--waypoint .map-label__text {
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    transition: max-width .14s, margin-left .14s, opacity .1s
}

.map-label--waypoint.is-revealed,
.map-label--waypoint.is-selected,
.map-label-layer.is-keyboard-armed .map-label--waypoint:focus-visible {
    width: auto;
    max-width: var(--map-label-max-width);
    padding-right: var(--map-label-padding-x);
    justify-content: flex-start
}

.map-label--waypoint.is-revealed .map-label__text,
.map-label--waypoint.is-selected .map-label__text,
.map-label-layer.is-keyboard-armed .map-label--waypoint:focus-visible .map-label__text {
    max-width: 8.5rem;
    margin-left: var(--map-label-icon-gap);
    opacity: 1
}

@media (hover:hover) and (pointer:fine) {
    .map-label-layer.is-hover-armed .map-label--waypoint:hover {
        width: auto;
        max-width: var(--map-label-max-width);
        padding-right: var(--map-label-padding-x);
        justify-content: flex-start
    }

    .map-label-layer.is-hover-armed .map-label--waypoint:hover .map-label__text {
        max-width: 8.5rem;
        margin-left: var(--map-label-icon-gap);
        opacity: 1
    }
}

.map-label__icon {
    width: var(--map-label-icon-size);
    height: var(--map-label-icon-size);
    color: #fff;
    background: var(--label-color);
    font-size: var(--map-label-legend-glyph-size);
    border-radius: 50%;
    flex: none;
    place-items: center;
    margin-right: 0;
    font-weight: 900;
    line-height: 1;
    display: inline-grid
}

.map-label:not(.map-label--waypoint) .map-label__icon {
    margin-right: var(--map-label-icon-gap)
}

.map-label__icon.has-custom-svg,
.map-legend__symbol.has-custom-svg {
    color: var(--label-color);
    background: 0 0
}

.map-label__icon.has-custom-svg {
    width: var(--map-label-custom-svg-size);
    height: var(--map-label-custom-svg-size)
}

.map-label__icon.has-sprite-svg {
    width: var(--map-sprite-map-size);
    height: var(--map-sprite-map-size);
    color: var(--map-sprite-color)
}

.map-legend__symbol.has-sprite-svg svg {
    width: var(--map-sprite-legend-size);
    height: var(--map-sprite-legend-size);
    color: var(--map-sprite-color)
}

.has-sprite-svg svg {
    opacity: var(--map-sprite-opacity);
    transform: translate(var(--map-sprite-offset-x), var(--map-sprite-offset-y)) rotate(var(--map-sprite-rotation)) scale(var(--map-sprite-scale));
    transform-origin: 50%
}

.map-label__icon svg,
.map-label__icon img,
.map-legend__symbol svg,
.map-legend__symbol img {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible
}

.map-label__icon svg *,
.map-legend__symbol svg * {
    vector-effect: non-scaling-stroke
}

.map-label__text {
    text-overflow: ellipsis;
    min-width: 0;
    overflow: hidden
}

.map-label--exhibitor.has-stand-marker .map-label__text {
    max-width: var(--stand-label-text-max-width)
}

.map-label.is-selected {
    z-index: 3;
    color: #3f176f;
    background: #fff;
    border-color: #7314ff;
    box-shadow: 0 7px 20px #7314ff3d
}

.map-label:focus-visible,
.map-legend button:focus-visible,
.map-legend input:focus-visible+.map-legend__symbol {
    outline-offset: 2px;
    outline: 3px solid #7314ff47
}

.map-legend {
    z-index: 4;
    top: calc(5.4rem + env(safe-area-inset-top));
    left: calc(.8rem + env(safe-area-inset-left));
    pointer-events: auto;
    position: absolute
}

.map-legend__toggle,
.map-legend__close {
    color: #504392;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #fffffff0;
    border: 1px solid #50439229;
    box-shadow: 0 8px 24px #262a5e1a
}

.map-legend__toggle {
    min-height: 2.45rem;
    font-family: var(--map-label-font-family);
    font-size: var(--map-label-legend-font-size);
    font-weight: var(--map-label-font-weight);
    border-radius: .78rem;
    padding: 0 .72rem
}

.map-legend__panel {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fffffff7;
    border: 1px solid #50439224;
    border-radius: 1rem;
    width: min(17rem, 100vw - 1.6rem);
    max-height: min(28rem, 100dvh - 8rem);
    overflow: hidden;
    box-shadow: 0 18px 48px #262a5e2e
}

.map-legend__panel[hidden] {
    display: none
}

.map-legend__header {
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .7rem .7rem .45rem .85rem;
    display: flex
}

.map-legend__header h2 {
    font-family: var(--map-label-font-family);
    font-size: var(--map-label-legend-title-size);
    font-weight: var(--map-label-font-weight);
    margin: 0
}

.map-legend__close {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1.15rem;
    line-height: 1
}

.map-legend__list {
    overscroll-behavior: contain;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(23rem, 100dvh - 12rem);
    padding: .3rem .7rem .8rem;
    display: grid;
    overflow-y: auto
}

.map-legend__item {
    color: #4f5067;
    min-height: 2.15rem;
    font-family: var(--map-label-font-family);
    font-size: var(--map-label-legend-font-size);
    font-weight: var(--map-label-font-weight);
    line-height: var(--map-label-line-height);
    cursor: pointer;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: .35rem;
    display: grid
}

.map-legend__item input {
    accent-color: #7314ff;
    width: .9rem;
    height: .9rem;
    margin: 0
}

.map-legend__symbol {
    width: var(--map-label-legend-icon-size);
    height: var(--map-label-legend-icon-size);
    color: #fff;
    background: var(--label-color);
    font-size: var(--map-label-legend-glyph-size);
    border-radius: 50%;
    place-items: center;
    font-weight: 900;
    display: inline-grid
}

.app-header {
    z-index: 2;
    padding: calc(.9rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 2.8rem calc(1rem + env(safe-area-inset-left));
    pointer-events: none;
    background: linear-gradient(#f6f4f8f5 0%, #0000 100%);
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.app-header h1 {
    letter-spacing: -.025em;
    margin: 0;
    font-size: clamp(1.25rem, 4.5vw, 1.65rem)
}

.map-status {
    color: #504392;
    text-align: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #ffffffd1;
    border: 1px solid #50439224;
    border-radius: 999px;
    max-width: 11rem;
    padding: .5rem .7rem;
    font-size: .72rem;
    font-weight: 750;
    box-shadow: 0 8px 24px #262a5e14
}

.map-status[data-ready=true] {
    color: #276757
}

.app-header__actions {
    pointer-events: auto;
    justify-items: end;
    gap: .45rem;
    display: grid
}

.search-toggle {
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: #504392;
    border: 1px solid #50439229;
    border-radius: .8rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    min-width: 9.75rem;
    min-height: 3rem;
    padding: 0 1rem;
    font-size: .84rem;
    font-weight: 800;
    display: inline-flex;
    box-shadow: 0 8px 24px #262a5e24
}

.search-toggle span {
    font-size: 1.25rem;
    line-height: 1
}

.search-panel {
    z-index: 8;
    position: absolute;
    inset: 0
}

.search-panel[hidden] {
    display: none
}

.search-panel__backdrop {
    background: #1f1a3661;
    position: absolute;
    inset: 0
}

.search-panel__surface {
    max-height: min(82dvh, 42rem);
    padding: 1rem calc(1rem + env(safe-area-inset-right)) calc(.8rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    background: #fff;
    border: 1px solid #50439224;
    border-bottom: 0;
    border-radius: 1.35rem 1.35rem 0 0;
    flex-direction: column;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -18px 52px #262a5e3d
}

.search-panel__header {
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .85rem;
    display: flex
}

.search-panel__eyebrow {
    color: #7314ff;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .18rem;
    font-size: .66rem;
    font-weight: 800
}

.search-panel h2 {
    letter-spacing: -.02em;
    margin: 0;
    font-size: 1.12rem
}

.search-panel__close {
    color: #504392;
    cursor: pointer;
    background: #f6f4f8;
    border: 1px solid #50439229;
    border-radius: 50%;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    line-height: 1
}

.search-field {
    align-items: center;
    display: flex;
    position: relative
}

.search-field__icon {
    color: #504392;
    pointer-events: none;
    font-size: 1.2rem;
    position: absolute;
    left: .85rem
}

.search-field input {
    color: #262a5e;
    background: #f8f7fa;
    border: 2px solid #5043922e;
    border-radius: .9rem;
    outline: none;
    width: 100%;
    min-height: 3rem;
    padding: .7rem .85rem .7rem 2.45rem;
    font-size: 1rem
}

.search-field input:focus {
    background: #fff;
    border-color: #7314ff;
    box-shadow: 0 0 0 3px #7314ff1f
}

.search-field input::placeholder {
    color: #85859a
}

.search-status {
    color: #686a80;
    min-height: 1.2rem;
    margin: .55rem 0 .35rem;
    font-size: .72rem
}

.search-results {
    overscroll-behavior: contain;
    gap: .45rem;
    padding-bottom: .2rem;
    display: grid;
    overflow-y: auto;
}

.search-result {
    color: #262a5e;
    text-align: left;
    cursor: pointer;
    background: #f8f7fa;
    border: 1px solid #5043921f;
    border-radius: .85rem;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 3.55rem;
    padding: .72rem .8rem;
    display: flex
}

.search-result:not(:disabled):active {
    background: #f3edff;
    transform: scale(.99)
}

.search-result:disabled {
    color: #8b8c9d;
    cursor: not-allowed;
    opacity: .72
}

.search-result__content {
    gap: .2rem;
    min-width: 0;
    display: grid
}

.search-result__content strong {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    line-height: 1.22;
    overflow: hidden
}

.search-result__content span {
    color: #666881;
    font-size: .7rem
}

.search-result__action {
    color: #7314ff;
    flex: none;
    font-size: .72rem;
    font-weight: 850
}

.search-toggle:focus-visible,
.search-panel button:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #7314ff47
}

.app-shell[data-search-open=true] .map-actions,
.app-shell[data-search-open=true] .gesture-hint {
    opacity: 0;
    pointer-events: none
}

.gesture-hint {
    z-index: 2;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    color: #504392;
    white-space: nowrap;
    pointer-events: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #ffffffdb;
    border: 1px solid #5043921f;
    border-radius: 999px;
    margin: 0;
    padding: .55rem .75rem;
    font-size: .7rem;
    font-weight: 650;
    transition: opacity .16s;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 8px 24px #262a5e14
}

.app-shell[data-panel-open=true] .gesture-hint {
    opacity: 0
}

.map-actions {
    z-index: 3;
    right: calc(.9rem + env(safe-area-inset-right));
    bottom: calc(4.2rem + env(safe-area-inset-bottom));
    gap: .45rem;
    display: grid;
    position: absolute
}

.map-action-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    display: grid
}

.map-action-group .map-action {
    min-width: 2.65rem
}

.map-action--walkable {
    color: #176a55;
    width: 7.1rem;
    padding: .45rem .6rem;
    font-size: .68rem;
    line-height: 1.15
}

.map-action--walkable[aria-pressed=true] {
    background: #e8faf4f0;
    border-color: #20b4866b
}

.map-action,
.error-panel button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #ffffffeb;
    border: 1px solid #50439229;
    border-radius: .9rem;
    min-width: 2.9rem;
    min-height: 2.9rem;
    font-weight: 800;
    box-shadow: 0 10px 28px #262a5e21
}

.route-status {
    z-index: 5;
    top: calc(5.6rem + env(safe-area-inset-top));
    left: calc(.9rem + env(safe-area-inset-left));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: #fffffff0;
    border: 1px solid #7314ff29;
    border-radius: 1rem;
    align-items: center;
    gap: .85rem;
    max-width: min(27rem, 100vw - 1.8rem);
    padding: .72rem .78rem .72rem .9rem;
    display: flex;
    position: absolute;
    box-shadow: 0 12px 32px #262a5e29
}

.route-status[hidden] {
    display: none
}

.route-status>div {
    min-width: 0
}

.route-status__eyebrow {
    color: #7314ff;
    letter-spacing: .055em;
    text-transform: uppercase;
    margin: 0 0 .12rem;
    font-size: .62rem;
    font-weight: 800
}

.route-status strong {
    color: #282344;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
    display: block;
    overflow: hidden
}

.route-status button,
.location-route-action__button {
    color: #fff;
    font: inherit;
    cursor: pointer;
    background: #5b35ad;
    border: 0;
    border-radius: .75rem;
    font-size: .76rem;
    font-weight: 800
}

.route-status button {
    flex: none;
    min-height: 2.35rem;
    padding: .5rem .7rem
}

.location-panel {
    z-index: 6;
    max-height: min(58dvh, 34rem);
    padding: 1rem calc(1rem + env(safe-area-inset-right)) calc(.8rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #50439224;
    border-bottom: 0;
    border-radius: 1.35rem 1.35rem 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    box-shadow: 0 -18px 48px #262a5e2e
}

.location-panel[hidden] {
    display: none
}

.location-panel__header {
    z-index: 1;
    background: #fff;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: -1rem -.2rem 0;
    padding: 1rem .2rem .8rem;
    display: flex;
    position: sticky;
    top: -1rem
}

.location-panel__eyebrow {
    color: #7314ff;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 .2rem;
    font-size: .68rem;
    font-weight: 800
}

.location-panel h2 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.18
}

.location-panel__close {
    color: #504392;
    cursor: pointer;
    background: #f6f4f8;
    border: 1px solid #50439229;
    border-radius: 50%;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    line-height: 1
}

.location-panel__content {
    padding-bottom: .5rem
}

.location-route-action {
    background: linear-gradient(#fff0, #fff .6rem);
    margin-top: 1rem;
    padding-top: .6rem;
    position: sticky;
    bottom: -.5rem
}

.location-route-action__button {
    width: 100%;
    min-height: 3rem;
    padding: .7rem 1rem;
    font-size: .9rem
}

.location-panel__message {
    color: #5d5f78;
    margin: .35rem 0 .5rem;
    font-size: .88rem;
    line-height: 1.5
}

.location-panel__message--loading {
    color: #504392
}

.location-panel__message--error {
    color: #7a3340;
    background: #fff1f2;
    border-radius: .8rem;
    padding: .8rem
}

.location-section+.location-section {
    margin-top: 1rem
}

.location-section h3 {
    letter-spacing: .045em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    font-size: .78rem
}

.location-list {
    gap: .55rem;
    display: grid
}

.location-card {
    background: #f8f7fa;
    border: 1px solid #5043921f;
    border-radius: .85rem;
    padding: .8rem
}

.location-card--exhibitor {
    background: #f7f1ff;
    border-color: #7314ff38;
    padding: .95rem .95rem .95rem 1.1rem;
    position: relative;
    overflow: hidden
}

.location-card--exhibitor:before {
    content: "";
    background: #7314ff;
    width: .28rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

.location-card--exhibitor h4 {
    color: #3f176f;
    letter-spacing: -.015em;
    font-size: 1.08rem;
    font-weight: 850
}

.location-card h4 {
    margin: 0;
    font-size: .94rem;
    line-height: 1.3
}

.location-card__meta {
    color: #504392;
    margin: .25rem 0 0;
    font-size: .76rem;
    font-weight: 700
}

.location-card__description {
    color: #5d5f78;
    margin: .45rem 0 0;
    font-size: .8rem;
    line-height: 1.48
}

.location-card__link {
    color: #fff;
    background: #504392;
    border-radius: .65rem;
    margin-top: .65rem;
    padding: .55rem .75rem;
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex
}

.map-action:active,
.error-panel button:active {
    transform: translateY(1px)scale(.98)
}

.map-action:focus-visible,
.error-panel button:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #7314ff47
}

.map-action--reset {
    padding: 0 .8rem;
    font-size: .72rem
}

.error-panel {
    z-index: 5;
    text-align: center;
    background: #fffffff5;
    border: 1px solid #50439224;
    border-radius: 1.25rem;
    width: min(88vw, 24rem);
    padding: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 64px #262a5e2e
}

.error-panel h2 {
    margin: 0 0 .5rem;
    font-size: 1.05rem
}

.error-panel p {
    color: #5d5f78;
    margin: 0 0 1rem;
    font-size: .9rem;
    line-height: 1.45
}

.error-panel button {
    color: #fff;
    background: #504392;
    padding: 0 1rem
}

@media (width>=720px) {
    .app-header {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .map-actions {
        right: 1.5rem
    }

    .route-status {
        top: 6.2rem;
        left: 1.5rem
    }

    .location-panel {
        border-bottom: 1px solid #50439224;
        border-radius: 1.35rem;
        width: min(26rem, 100vw - 3rem);
        max-height: calc(100dvh - 8rem);
        padding: 1rem;
        bottom: 1.5rem;
        left: auto;
        right: 1.5rem
    }

    .search-panel__surface {
        border-bottom: 1px solid #50439224;
        border-radius: 1.25rem;
        width: min(28rem, 100vw - 3rem);
        max-height: calc(100dvh - 3rem);
        padding: 1rem;
        inset: 1.5rem 1.5rem auto auto;
        box-shadow: 0 24px 64px #262a5e3d
    }
}

@media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}