.coordinate-preview-launch {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0;
}

.coordinate-preview-launch .button {
    align-items: center;
    background: var(--base, #f4f2fd) !important;
    border: 1px solid var(--secondary, #917ac2) !important;
    color: var(--secondary, #917ac2) !important;
    gap: .5rem;
    padding: .75rem 1rem !important;
}

.coordinate-preview-launch .button:hover,
.coordinate-preview-launch .button:focus-visible {
    background: #e6dff5 !important;
    border-color: var(--primary, #8122a1) !important;
    color: var(--primary, #8122a1) !important;
}

.coordinate-preview-launch .button:disabled {
    background: var(--base, #f4f2fd) !important;
    border-color: #cec6df !important;
    color: #91899f !important;
    cursor: not-allowed;
    opacity: .75;
}

.coordinate-preview-launch__status {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.coordinate-preview-launch .help {
    margin: 0;
}

.coordinate-preview-launch--selector {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0;
    width: auto;
}

/* The coordinate system selector and the launch button share one line; the button
   stretches to the selector's height. */
.coordinate-preview-selector-row {
    align-items: stretch;
    display: flex;
    gap: .75rem;
    width: 100%;
}

.coordinate-preview-selector-row > select,
.coordinate-preview-selector-row > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
}

.coordinate-preview-selector-row > .coordinate-preview-launch--selector {
    align-items: stretch;
}

.coordinate-preview-selector-row .coordinate-preview-launch--selector .button {
    display: flex;
    height: auto;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.coordinate-preview-launch--selector .button {
    white-space: nowrap;
}

.coordinate-preview-launch--selector .help {
    display: none;
}

.coordinate-preview-modal__wrapper {
    display: none;
    z-index: 10000;
}

.tooltip.coordinate-preview__bootstrap-tooltip {
    --bs-tooltip-zindex: 10020;
    z-index: 10020;
}

.coordinate-preview-modal__modal {
    box-sizing: border-box;
    height: 96vh;
    max-height: 96vh;
    max-width: 1200px;
    width: min(94vw, 1200px);
}

.coordinate-preview-modal__modal .generic-modal__header--branded {
    flex-shrink: 0;
    padding-bottom: 1.25rem !important;
    padding-top: 1.25rem !important;
}

.coordinate-preview-modal__modal .generic-modal__header--branded > div {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.coordinate-preview-modal__modal .generic-modal__header--branded .generic-modal__title {
    line-height: 1.2 !important;
}

.coordinate-preview-modal__subtitle {
    margin: 0;
}

.coordinate-preview-modal__body {
    flex: 1;
    min-height: 0;
    overflow: auto !important;
}

.coordinate-preview-modal__footer {
    display: none !important;
}

.coordinate-preview {
    --coordinate-blue: #2f9bff;
    --coordinate-light-purple: #c6afe6;
    --coordinate-purple: #b968d1;
    --coordinate-reference-coronal: #e34ce8;
    --coordinate-reference-horizontal: #00b7f4;
    --coordinate-reference-sagittal: #7c4dff;
    --coordinate-render-blue: #67cfff;
    --coordinate-device: #52e5c4;
    --coordinate-device-external: #a8f4e5;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.coordinate-preview__status {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.coordinate-preview__viewport > canvas {
    background: #111;
    display: block;
    height: 100%;
    min-height: 480px;
    width: 100%;
}

.coordinate-preview canvas[hidden],
.coordinate-preview__fallback[hidden] {
    display: none;
}

.coordinate-preview__viewport {
    background: #111;
    border-radius: .5rem;
    flex: 1;
    min-height: 480px;
    overflow: hidden;
    position: relative;
}

.coordinate-preview__track-guide {
    height: 100%;
    inset: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.coordinate-preview__track-guide[hidden] {
    display: none;
}

.coordinate-preview__track-guide-line {
    fill: none;
    stroke: var(--coordinate-render-blue);
    stroke-dasharray: 7 6;
    stroke-linecap: round;
    stroke-width: 3;
}

.coordinate-preview__track-guide-point {
    fill: var(--coordinate-render-blue);
}

.coordinate-preview__track-guide-label {
    fill: rgb(255 255 255 / 78%);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 500;
    paint-order: stroke;
    stroke: rgb(0 0 0 / 80%);
    stroke-linejoin: round;
    stroke-width: 4px;
}

.coordinate-preview__loading {
    align-items: center;
    background: #111;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    inset: 0;
    justify-content: center;
    padding: 2rem;
    position: absolute;
    text-align: center;
    z-index: 6;
}

.coordinate-preview__loading[hidden] {
    display: none;
}

.coordinate-preview__loading-spinner {
    animation: coordinate-preview-spin .85s linear infinite;
    border: 3px solid rgb(185 104 209 / 28%);
    border-radius: 50%;
    border-top-color: var(--coordinate-render-blue);
    height: 2.25rem;
    width: 2.25rem;
}

.coordinate-preview__loading strong {
    font-size: 1rem;
}

.coordinate-preview__loading [data-coordinate-loading-detail] {
    color: #bbb8c5;
    font-size: .85rem;
    max-width: 32rem;
}

.coordinate-preview__loading-steps {
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(3, 3.5rem);
    margin-top: .35rem;
}

.coordinate-preview__loading-steps i {
    background: #47444f;
    border-radius: 999px;
    height: .22rem;
}

.coordinate-preview__loading-steps i.is-complete {
    background: var(--coordinate-light-purple);
}

.coordinate-preview__loading-steps i.is-active {
    animation: coordinate-preview-loading-pulse 1.1s ease-in-out infinite alternate;
    background: var(--coordinate-render-blue);
}

@keyframes coordinate-preview-loading-pulse {
    from {
        opacity: .45;
    }

    to {
        opacity: 1;
    }
}

.coordinate-preview__viewport-tools {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    position: absolute;
    right: .75rem;
    top: .75rem;
    z-index: 5;
}

.coordinate-preview__help {
    order: 1;
    position: relative;
}

.coordinate-preview__zoom-controls {
    background: rgb(55 55 55 / 78%);
    border-radius: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    order: 2;
    padding: .15rem .2rem;
}

.coordinate-preview__zoom-controls[hidden] {
    display: none;
}

.coordinate-preview__zoom-controls button {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: rgb(255 255 255 / 88%) !important;
    display: flex;
    height: 1.75rem !important;
    justify-content: center;
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0 !important;
    width: 1.75rem !important;
}

.coordinate-preview__zoom-controls button:hover,
.coordinate-preview__zoom-controls button:focus-visible {
    background: rgb(185 104 209 / 36%) !important;
    color: #fff !important;
}

.coordinate-preview__zoom-controls button:disabled {
    cursor: default;
    opacity: .4;
}

.coordinate-preview__current-location {
    align-items: center;
    color: #393843;
    display: flex;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    gap: .45rem;
    line-height: inherit;
    max-width: min(48rem, 100%);
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coordinate-preview__current-position {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
    min-width: 0;
}

.coordinate-preview__current-position-label {
    flex: 0 0 auto;
}

.coordinate-preview__mode-control {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: .2rem;
    justify-content: center;
    min-height: 3.25rem;
    white-space: nowrap;
}

.coordinate-preview__mode-control[hidden] {
    display: none;
}

.coordinate-preview__mode-label {
    line-height: 1;
    padding-left: .1rem;
}

.coordinate-preview__mode-toggle {
    background: #eceaf1;
    border: 1px solid #d4cfdd;
    border-radius: .35rem;
    display: inline-flex;
    overflow: hidden;
}

.coordinate-preview__mode-toggle button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #5e5968 !important;
    min-height: auto;
    padding: .42rem .55rem !important;
}

.coordinate-preview__mode-toggle button[hidden] {
    display: none;
}

.coordinate-preview__mode-toggle button + button {
    border-left: 1px solid #d4cfdd !important;
}

.coordinate-preview__mode-toggle button[aria-pressed="true"] {
    background: var(--coordinate-purple) !important;
    color: #fff !important;
}

.coordinate-preview__mode-toggle button[data-coordinate-display="none"][aria-pressed="true"],
.coordinate-preview__mode-toggle button[data-coordinate-reference="none"][aria-pressed="true"] {
    background: #77727f !important;
}

.coordinate-preview__mode-toggle button[data-coordinate-display="implant"][aria-pressed="true"],
.coordinate-preview__mode-toggle button[data-coordinate-reference="planes"][aria-pressed="true"] {
    background: var(--coordinate-blue) !important;
}

.coordinate-preview__mode-toggle button:focus-visible {
    box-shadow: inset 0 0 0 2px #fff;
    outline: 2px solid var(--coordinate-purple);
    outline-offset: -2px;
}

.coordinate-preview__current-location[hidden],
.coordinate-preview__current-region[hidden] {
    display: none;
}

.coordinate-preview__current-region {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
    min-width: 0;
}

.coordinate-preview__current-location-separator {
    background: rgb(57 56 67 / 28%);
    height: 1rem;
    margin: 0 .1rem;
    width: 1px;
}

.coordinate-preview__current-region-swatch {
    border: 1px solid rgb(57 56 67 / 35%);
    border-radius: 50%;
    flex: 0 0 .7rem;
    height: .7rem;
    width: .7rem;
}

.coordinate-preview__current-location [data-coordinate-current-coordinates],
.coordinate-preview__current-region [data-coordinate-current-region-label] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.coordinate-preview__help-trigger {
    align-items: center;
    aspect-ratio: 1;
    background: rgb(55 55 55 / 78%) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none;
    box-sizing: border-box;
    color: rgb(255 255 255 / 92%) !important;
    cursor: help;
    display: flex;
    flex: 0 0 2.15rem;
    font-size: 1.4rem;
    height: 2.15rem !important;
    justify-content: center;
    max-height: 2.15rem;
    max-width: 2.15rem;
    min-height: 2.15rem;
    min-width: 2.15rem;
    overflow: hidden;
    padding: 0;
    transition: color .15s ease;
    width: 2.15rem !important;
}

.coordinate-preview__help-trigger i {
    color: inherit !important;
    font-size: 1.4rem;
    opacity: 1 !important;
}

.coordinate-preview__help-trigger:hover,
.coordinate-preview__help-trigger:focus-visible {
    background: rgb(185 104 209 / 36%) !important;
    box-shadow: none;
    color: #fff !important;
    outline: 0;
}

.coordinate-preview__help-panel {
    background: #fff;
    border: 1px solid #bfbfbf;
    border-radius: .75rem;
    box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
    color: #393843;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    min-width: 17rem;
    opacity: 0;
    padding: .85rem 1rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    transform: translateY(-.2rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
    visibility: hidden;
    width: min(24rem, calc(100vw - 4rem));
}

.coordinate-preview__help-panel > div {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.coordinate-preview__help-panel > div[hidden] {
    display: none;
}

.coordinate-preview__help-panel span {
    font-size: .82rem;
    line-height: 1.35;
}

.coordinate-preview__help-panel > strong,
.coordinate-preview__help-panel b,
.coordinate-preview__help-about > strong {
    font-weight: 700;
}

.coordinate-preview__help-note {
    border-top: 1px solid #e3e1ea;
    color: #767486;
    padding-top: .65rem;
}

.coordinate-preview__help-about {
    border-top: 1px solid #e3e1ea;
    padding-top: .65rem;
}

.coordinate-preview__help-about .coordinate-preview__attribution {
    color: #767486;
    margin: 0;
}

.coordinate-preview__help:hover .coordinate-preview__help-panel,
.coordinate-preview__help:focus-within .coordinate-preview__help-panel {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.coordinate-preview__metadata {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.coordinate-preview__toolbar {
    align-items: center;
    display: flex;
    font-family: "Inter", sans-serif;
    font-size: .875rem;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
    line-height: 1.2;
    margin: .5rem 0 .75rem;
}

.coordinate-preview__toolbar button,
.coordinate-preview__toolbar label,
.coordinate-preview__toolbar output,
.coordinate-preview__toolbar select,
.coordinate-preview__region-status {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.coordinate-preview__toolbar button,
.coordinate-preview__toolbar label {
    font-weight: 500 !important;
}

.coordinate-preview__views {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    margin: 0;
}

.coordinate-preview__views .button[aria-pressed="true"] {
    background: var(--primary, #8122a1) !important;
    color: #fff !important;
}

.coordinate-preview__views .button {
    border: 1px solid #d5d3df !important;
}

.coordinate-preview__views .coordinate-preview__reset-view {
    align-items: center;
    background: #f4effa !important;
    color: var(--secondary, #7655ac) !important;
    display: inline-flex !important;
    gap: .4rem;
    margin-left: .25rem;
}

.coordinate-preview__views .coordinate-preview__reset-view:hover,
.coordinate-preview__views .coordinate-preview__reset-view:focus-visible {
    background: #ece2f6 !important;
    color: var(--primary, #8122a1) !important;
}

.coordinate-preview__views .coordinate-preview__reset-view:disabled {
    cursor: default;
    opacity: .45;
}

.coordinate-preview__point-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    line-height: inherit;
    white-space: nowrap;
}

.coordinate-preview__point-legend[hidden] {
    display: none;
}

.coordinate-preview__point-legend span,
.coordinate-preview__switch-control,
.coordinate-preview__region-opacity,
.coordinate-preview__atlas-switcher,
.coordinate-preview__brain-opacity {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
}

.coordinate-preview__guide-controls {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: .75rem;
    white-space: nowrap;
}

.coordinate-preview__display-controls {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-height: 3.25rem;
    min-width: 0;
}

.coordinate-preview__switch-control {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: .45rem;
    user-select: none;
}

.coordinate-preview__guide-controls[hidden] {
    display: none !important;
}

.coordinate-preview__auto-rotate-control[hidden] {
    display: none !important;
}

.coordinate-preview__switch-control input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.coordinate-preview__switch-track {
    background: #c9c5d1;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgb(57 56 67 / 14%);
    display: inline-flex;
    flex: 0 0 auto;
    height: 1.15rem;
    padding: .12rem;
    transition: background-color .15s ease;
    width: 2rem;
}

.coordinate-preview__switch-track > span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 28%);
    display: block;
    height: .91rem;
    transform: translateX(0);
    transition: transform .15s ease;
    width: .91rem;
}

.coordinate-preview__switch-control input:checked + .coordinate-preview__switch-track {
    background: var(--coordinate-purple);
}

.coordinate-preview__switch-control input[data-coordinate-show-regions]:checked
    + .coordinate-preview__switch-track {
    background: var(--coordinate-blue);
}

.coordinate-preview__switch-control input:checked + .coordinate-preview__switch-track > span {
    transform: translateX(.85rem);
}

.coordinate-preview__switch-control input:focus-visible + .coordinate-preview__switch-track {
    outline: 2px solid var(--coordinate-purple);
    outline-offset: 2px;
}

.coordinate-preview__switch-control input:disabled + .coordinate-preview__switch-track {
    cursor: not-allowed;
    opacity: .45;
}

.coordinate-preview__region-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.coordinate-preview__region-controls[hidden] {
    display: none !important;
}

.coordinate-preview__mobile-row-break {
    display: none;
}

.coordinate-preview__mobile-simple-row-break {
    display: none;
}

.coordinate-preview__mobile-label {
    display: none;
}

.coordinate-preview__region-controls input[type="range"] {
    accent-color: var(--primary, #8122a1);
    width: 7rem;
}

.coordinate-preview__region-controls output {
    min-width: 2.5rem;
    text-align: right;
}

.coordinate-preview__region-opacity > span {
    white-space: nowrap;
}

.coordinate-preview__region-controls[aria-disabled="true"] .coordinate-preview__region-opacity {
    opacity: .45;
}

.coordinate-preview__region-style-toggle {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer;
    display: inline-flex !important;
    gap: .45rem;
    overflow: visible !important;
    padding: 0 !important;
}

.coordinate-preview__region-style-option {
    color: #858291;
    font-size: inherit;
    font-weight: 500;
    transition: color .15s ease;
}

.coordinate-preview__region-style-switch {
    background: #d8d3e5;
    border-radius: 999px;
    display: inline-flex;
    height: 1.15rem;
    padding: .15rem;
    transition: background .15s ease, box-shadow .15s ease;
    width: 2rem;
}

.coordinate-preview__region-style-switch > span {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(29, 27, 38, .25);
    height: .85rem;
    transform: translateX(0);
    transition: transform .15s ease;
    width: .85rem;
}

.coordinate-preview__region-style-toggle[aria-checked="false"]
    > .coordinate-preview__region-style-option:first-of-type,
.coordinate-preview__region-style-toggle[aria-checked="true"]
    > .coordinate-preview__region-style-option:last-of-type {
    color: #393843;
}

.coordinate-preview__region-style-toggle[aria-checked="true"]
    > .coordinate-preview__region-style-switch {
    background: var(--secondary, #917ac2);
}

.coordinate-preview__region-style-toggle[aria-checked="true"]
    > .coordinate-preview__region-style-switch > span {
    transform: translateX(.85rem);
}

.coordinate-preview__region-style-toggle:focus-visible
    > .coordinate-preview__region-style-switch {
    box-shadow: 0 0 0 .18rem rgba(129, 34, 161, .2);
}

.coordinate-preview__region-style-toggle:disabled {
    cursor: default;
    opacity: .45;
}

.coordinate-preview__region-status {
    color: #696775;
    font-weight: 400;
    min-width: 5rem;
}

.coordinate-preview__region-status[data-state="loading"]::before {
    animation: coordinate-preview-spin .8s linear infinite;
    border: 2px solid #d9cfe8;
    border-radius: 50%;
    border-top-color: var(--primary, #8122a1);
    content: "";
    display: inline-block;
    height: .7rem;
    margin-right: .35rem;
    vertical-align: -.1rem;
    width: .7rem;
}

@keyframes coordinate-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

.coordinate-preview__atlas-switcher {
    margin-left: 0;
    white-space: nowrap;
}

.coordinate-preview__atlas-switcher select {
    background: #fff;
    border: 1px solid #d5d3df;
    border-radius: .35rem;
    color: inherit;
    max-width: 18rem;
    padding: .45rem 2rem .45rem .65rem;
}

.coordinate-preview__point {
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.coordinate-preview__point--entry {
    background: var(--coordinate-purple, #b968d1);
    height: .55rem;
    width: .55rem;
}

.coordinate-preview__point--endpoint {
    background: var(--coordinate-light-purple, #c6afe6);
    height: .8rem;
    width: .8rem;
}

.coordinate-preview__point--volume {
    background: var(--coordinate-device, #52e5c4);
    box-shadow: 0 0 0 .12rem rgb(82 229 196 / 35%);
    height: .8rem;
    width: .8rem;
}

.coordinate-preview__track,
.coordinate-preview__device {
    display: inline-block;
    height: .2rem;
    width: 1.25rem;
}

.coordinate-preview__track {
    background: var(--coordinate-render-blue, #67cfff);
}

.coordinate-preview__device {
    background: var(--coordinate-device, #52e5c4);
}

.coordinate-preview__ring {
    border: .14rem solid var(--coordinate-device, #52e5c4);
    border-radius: 50%;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: .8rem;
    width: .8rem;
}

.coordinate-preview__patch {
    border: .14rem solid var(--coordinate-device, #52e5c4);
    border-radius: .1rem;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 auto;
    height: .7rem;
    width: .9rem;
}

.coordinate-preview__brain-opacity {
    flex: 0 0 auto;
    margin-left: auto;
    transform: translateY(.2rem);
    white-space: nowrap;
}

.coordinate-preview__brain-opacity input {
    accent-color: var(--primary, #8122a1);
    width: 9rem;
}

.coordinate-preview__brain-opacity output {
    min-width: 2.75rem;
    text-align: right;
}

.coordinate-preview__badge {
    background: #e8eef8;
    border-radius: 1rem;
    padding: .2rem .65rem;
}

.coordinate-preview__plane-guides {
    display: grid;
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

.coordinate-preview__plane-guides[data-layout="all"] {
    grid-template-columns: repeat(3, 1fr);
}

.coordinate-preview__plane-guides[data-layout="single"] {
    grid-template-columns: 1fr;
}

.coordinate-preview__plane-guides[data-layout="all"] .coordinate-preview__plane-guide
    + .coordinate-preview__plane-guide {
    border-left: 1px solid rgb(255 255 255 / 45%);
}

.coordinate-preview__plane-guides[data-layout="single"] .coordinate-preview__plane-guide > strong {
    display: none;
}

.coordinate-preview__plane-guides[hidden],
.coordinate-preview__brain-opacity[hidden],
.coordinate-preview__orientation[hidden] {
    display: none !important;
}

.coordinate-preview__plane-guide {
    min-width: 0;
    position: relative;
}

.coordinate-preview__plane-guide[hidden],
.coordinate-preview__plane-guides--hide-axes .coordinate-preview__plane-axes,
.coordinate-preview__plane-guides--hide-reference .coordinate-preview__plane-reference,
.coordinate-preview__plane-guides--hide-scales .coordinate-preview__scale {
    display: none !important;
}

.coordinate-preview__plane-guide > strong {
    background: rgb(0 0 0 / 58%);
    border-radius: .35rem;
    color: #fff;
    display: block;
    font-weight: 600;
    margin: .75rem auto 0;
    padding: .3rem .55rem;
    text-align: center;
    text-shadow: 0 1px 3px #000;
    width: fit-content;
}

.coordinate-preview__plane-axes {
    background: rgb(0 0 0 / 58%);
    border-radius: .35rem;
    bottom: .75rem;
    height: 5.25rem;
    left: .75rem;
    position: absolute;
    width: 7rem;
}

.coordinate-preview__plane-axes circle {
    fill: #fff;
}

.coordinate-preview__plane-axes line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2.5;
}

.coordinate-preview__plane-axes .coordinate-preview__arrowhead {
    fill: currentColor;
    stroke: none;
}

.coordinate-preview__plane-axes text {
    fill: currentColor;
    font-size: 13px;
    font-weight: 600;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 2px;
}

.coordinate-preview__plane-axes .coordinate-preview__positive {
    font-size: 12px;
}

.coordinate-preview__plane-reference {
    aspect-ratio: 4 / 3;
    background: #111;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: .35rem;
    bottom: .75rem;
    height: auto;
    left: .75rem;
    overflow: hidden;
    position: absolute;
    width: min(10rem, calc(100% - 6.5rem));
}

.coordinate-preview__plane-guides--hide-scales .coordinate-preview__plane-reference {
    width: min(10rem, calc(100% - 1.5rem));
}

.coordinate-preview__plane-reference img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.coordinate-preview__axis--ap {
    color: var(--coordinate-purple, #b968d1);
}

.coordinate-preview__axis--ml {
    color: var(--coordinate-light-purple, #c6afe6);
}

.coordinate-preview__axis--dv {
    color: var(--coordinate-blue, #2f9bff);
}

.coordinate-preview__scale {
    align-items: flex-end;
    background: rgb(0 0 0 / 58%);
    border-radius: .35rem;
    bottom: .75rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    font-weight: 600;
    padding: .4rem .5rem;
    position: absolute;
    right: .75rem;
    text-shadow: 0 1px 2px #000;
}

.coordinate-preview__scale i {
    border-bottom: 3px solid #fff;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
    display: block;
    height: .35rem;
    margin-top: .15rem;
}

.coordinate-preview__orientation {
    background: rgb(0 0 0 / 55%);
    border-radius: .35rem;
    bottom: .75rem;
    height: 5.5rem;
    left: .75rem;
    pointer-events: none;
    position: absolute;
    width: 5.5rem;
    z-index: 2;
}

.coordinate-preview__orientation circle {
    fill: #fff;
}

.coordinate-preview__orientation line {
    stroke-width: 2.1;
}

.coordinate-preview__orientation text {
    fill: #fff;
    font-size: 12px;
    font-weight: 600;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 2px;
}

.coordinate-preview__orientation [data-coordinate-axis="ap"] line {
    stroke: var(--coordinate-purple, #b968d1);
}

.coordinate-preview__orientation [data-coordinate-axis="ml"] line {
    stroke: var(--coordinate-light-purple, #c6afe6);
}

.coordinate-preview__orientation [data-coordinate-axis="dv"] line {
    stroke: var(--coordinate-blue, #2f9bff);
}

.coordinate-preview__orientation-arrow--ap {
    fill: var(--coordinate-purple, #b968d1);
}

.coordinate-preview__orientation-arrow--ml {
    fill: var(--coordinate-light-purple, #c6afe6);
}

.coordinate-preview__orientation-arrow--dv {
    fill: var(--coordinate-blue, #2f9bff);
}

.coordinate-preview__fallback {
    align-items: center;
    background: #f8f7fb;
    color: #4f4d59;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 2rem;
    position: absolute;
    text-align: center;
}

.coordinate-preview__fallback .fa {
    color: #c77c00;
    font-size: 1.5rem;
    margin-right: .75rem;
}

.coordinate-preview__fallback p {
    margin: 0;
}

.coordinate-preview__attribution {
    color: #696775;
    font-size: .85rem;
    margin: .4rem 0 0;
}

.coordinate-preview__below-viewer {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    line-height: 1.4;
    margin-top: .65rem;
    min-height: 1.4em;
}

.coordinate-preview__below-viewer[hidden] {
    display: none;
}

.coordinate-preview__below-viewer .coordinate-preview__point-legend {
    justify-content: flex-end;
    margin-left: auto;
}

.coordinate-preview-detail-heading {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}

.coordinate-preview-detail-heading__title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.coordinate-preview-launch--detail {
    flex: 0 0 auto;
    margin: 0;
}

@media screen and (max-width: 601px) {
    .coordinate-preview__responsive-prefix {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .coordinate-preview__metadata {
        align-items: flex-start;
        flex-direction: column;
        flex-wrap: nowrap;
        margin-bottom: .5rem;
        width: 100%;
    }

    .coordinate-preview__badge {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: fit-content;
    }

    .coordinate-preview__metadata .coordinate-preview__responsive-prefix {
        clip: auto;
        clip-path: none;
        height: auto;
        overflow: visible;
        position: static;
        white-space: nowrap;
        width: auto;
    }

    .coordinate-preview-launch--selector {
        position: static;
    }

    .coordinate-preview-modal__wrapper {
        align-content: center;
        padding-top: 0;
    }

    .coordinate-preview-modal__modal {
        gap: .75rem;
        max-height: calc(100vh - 2rem);
        padding: 1rem;
        width: 96vw;
    }

    .coordinate-preview-modal__modal .generic-modal__header--branded {
        margin: -1rem -1rem 0 !important;
        padding: 1rem !important;
    }

    .coordinate-preview__viewport > canvas,
    .coordinate-preview__viewport {
        min-height: 320px;
    }

    .coordinate-preview__toolbar {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .65rem;
        margin: .25rem 0 .5rem;
        width: 100%;
    }

    .coordinate-preview__views {
        flex: 0 0 100%;
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        width: 100%;
    }

    .coordinate-preview__views::-webkit-scrollbar {
        display: none;
    }

    .coordinate-preview__views .button {
        flex: 0 0 auto;
    }

    .coordinate-preview__views .coordinate-preview__reset-view {
        justify-content: center;
        margin-left: 0;
        min-width: 2.75rem;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .coordinate-preview__reset-view span {
        display: none;
    }

    .coordinate-preview__reset-view i {
        display: inline-block;
    }

    .coordinate-preview__guide-controls {
        display: contents;
    }

    .coordinate-preview__display-controls {
        display: contents;
        min-height: 0;
    }

    .coordinate-preview__mode-toggle button {
        font-size: .78rem !important;
        padding: .38rem !important;
    }

    .coordinate-preview__mode-control[data-coordinate-display-control] {
        order: 1;
    }

    .coordinate-preview__mode-control[data-coordinate-reference-control] {
        order: 2;
    }

    .coordinate-preview__atlas-switcher {
        flex: 0 0 100%;
        order: 3;
    }

    .coordinate-preview__guide-controls > .coordinate-preview__switch-control,
    .coordinate-preview__display-controls > .coordinate-preview__switch-control,
    .coordinate-preview__brain-opacity {
        order: 4;
    }

    .coordinate-preview__mobile-simple-row-break {
        display: block;
        flex: 0 0 100%;
        height: 0;
        order: 4;
    }

    .coordinate-preview__auto-rotate-control,
    .coordinate-preview__legend-control,
    .coordinate-preview__switch-control {
        flex: 0 0 auto;
    }

    .coordinate-preview__wide-label {
        display: none;
    }

    .coordinate-preview__mobile-label {
        display: inline;
    }

    .coordinate-preview__region-controls {
        display: contents;
    }

    .coordinate-preview__region-controls > .coordinate-preview__switch-control {
        order: 4;
    }

    .coordinate-preview__mobile-row-break {
        display: block;
        flex: 0 0 100%;
        height: 0;
        order: 5;
    }

    .coordinate-preview__region-opacity {
        flex: 1 1 12rem;
        gap: .35rem;
        min-width: 0;
        order: 5;
        width: auto;
    }

    .coordinate-preview__region-controls input[type="range"] {
        flex: 1 1 auto;
        min-width: 3.5rem;
        width: auto;
    }

    .coordinate-preview__region-style-toggle,
    .coordinate-preview__region-status {
        order: 5;
    }

    .coordinate-preview__region-status {
        max-width: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .coordinate-preview__region-status:not([data-state]) {
        display: none;
    }

    .coordinate-preview__atlas-switcher {
        margin-left: 0;
    }

    .coordinate-preview__brain-opacity {
        flex: 1 1 6rem;
        font-size: .78rem;
        gap: .3rem;
        margin-left: 0;
        min-width: 6rem;
        transform: none;
    }

    .coordinate-preview__brain-opacity input {
        flex: 1 1 3rem;
        min-width: 3rem;
        width: auto;
    }

    .coordinate-preview__brain-opacity output {
        display: none;
    }

    .coordinate-preview__auto-rotate-control,
    .coordinate-preview__legend-control {
        font-size: .78rem !important;
        gap: .3rem;
    }

    .coordinate-preview__below-viewer {
        align-items: flex-start;
        flex-direction: column;
    }

    .coordinate-preview__below-viewer .coordinate-preview__point-legend {
        justify-content: flex-start;
        margin-left: 0;
    }

    .coordinate-preview__plane-guides[data-layout="all"] .coordinate-preview__plane-reference {
        width: min(10rem, calc(100% - 1.5rem));
    }

    .coordinate-preview__plane-guides[data-layout="all"][data-reference-mode="planes"]
        .coordinate-preview__scale {
        bottom: 6.5rem;
    }

    .coordinate-preview-detail-heading {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (prefers-reduced-motion: reduce) {
    .coordinate-preview * {
        scroll-behavior: auto !important;
    }

    .coordinate-preview__region-status[data-state="loading"]::before {
        animation: none;
    }

    .coordinate-preview__loading-spinner,
    .coordinate-preview__loading-steps i.is-active {
        animation: none;
    }
}