:root {
  --deep-ink: #000e14;
  --off-white: #f2f6f5;
  --teal: #2d8880;
  --purple: #37256a;
  --coral: #ed6a5a;
  --yellow: #ffba49;
  --blush: #ffd9ce;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--off-white);
  color: var(--deep-ink);
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  overflow-x: hidden;
}

.lm-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  isolation: isolate;
  overflow: hidden;
}

.lm-paper-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.lm-page > :not(.lm-paper-field) {
  position: relative;
  z-index: 1;
}

.lm-page--multi {
  --slab-top-width: 440px;
  --slab-canvas-width: 528px;
  --visible-slab-space: 140.8px;
  display: grid;
  grid-template-rows: 80px auto min-content;
  align-content: center;
  gap: 0;
  padding:
    max(38px, calc(var(--visible-slab-space) - var(--slab-top-width) * 0.10))
    max(30px, calc(var(--visible-slab-space) - var(--slab-top-width) * 0.10));
}

.lm-page--detail {
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
}

.lm-scale-label {
  align-self: start;
  justify-self: start;
  min-width: 178px;
  margin: 0;
  padding: 7px 22px 9px;
  font-size: clamp(20px, 2vw, 29px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  background:
    radial-gradient(ellipse at 18% 42%, rgba(77, 176, 164, 0.62), transparent 56%),
    radial-gradient(ellipse at 82% 64%, rgba(45, 136, 128, 0.44), transparent 62%),
    linear-gradient(90deg, rgba(45, 136, 128, 0.48), rgba(78, 184, 171, 0.56), rgba(45, 136, 128, 0.38));
  box-shadow:
    0 0 12px rgba(45, 136, 128, 0.18),
    inset 0 0 9px rgba(242, 246, 245, 0.32);
  transform: rotate(-0.35deg);
  filter: saturate(0.9);
}

.lm-multi-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--slab-canvas-width));
  gap:
    calc(var(--visible-slab-space) - var(--slab-top-width) * 0.20)
    calc(var(--visible-slab-space) - var(--slab-top-width) * 0.20);
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.lm-slab-link {
  display: block;
  width: var(--slab-canvas-width);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  outline-offset: 8px;
}

.lm-slab-link:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
}

.lm-slab-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--teal) 70%, var(--deep-ink));
  border-radius: 4px;
}

.lm-slab {
  --category-color: var(--teal);
  position: relative;
  margin: 0 auto;
  isolation: isolate;
}

.lm-slab--preview {
  width: var(--slab-canvas-width);
}

.lm-slab__canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.lm-slab--detail {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.lm-slab--detail.is-rotating {
  cursor: grabbing;
}

.lm-slab__canvas--base,
.lm-slab__canvas--overlay,
.lm-slab__live-surface {
  position: absolute;
  left: 0;
  top: 0;
}

.lm-slab__canvas--base {
  z-index: 1;
}

.lm-slab__live-surface {
  z-index: 2;
  overflow: hidden;
  background: #d9e2df;
  will-change: transform, clip-path;
}

.lm-slab__canvas--overlay {
  z-index: 3;
  pointer-events: none;
}

.lm-slab__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #d9e2df;
  pointer-events: none;
  filter: saturate(1.28) contrast(1.07) brightness(1.04);
}

.lm-slab__iframe.is-hidden {
  visibility: hidden;
}

.lm-slab__iframe.is-active {
  visibility: visible;
}

.lm-slab__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 26%, rgba(45, 136, 128, 0.34), transparent 16%),
    radial-gradient(circle at 72% 66%, rgba(47, 104, 75, 0.42), transparent 18%),
    linear-gradient(135deg, #c6c7ae 0 22%, #8faa72 22% 42%, #cfc5a9 42% 64%, #6d8f63 64% 100%);
}

.lm-detail-shell {
  position: relative;
  width: min(100%, 1260px);
  min-height: min(740px, calc(100vh - 90px));
  display: grid;
  place-items: center;
}

.lm-detail-composition {
  position: relative;
  width: min(100%, var(--detail-slab-width, 1260px));
  height: min(calc(100vh - 96px), var(--detail-slab-height, 760px));
  display: grid;
  place-items: center;
}

.lm-detail-composition > .lm-slab {
  transform-origin: center;
}

.lm-detail-controls {
  position: absolute;
  right: clamp(20px, 4vw, 50px);
  top: clamp(20px, 4vw, 46px);
  z-index: 10;
  display: flex;
  gap: 9px;
}

.lm-layer-switch,
.lm-pose-reset {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 14, 20, 0.28);
  border-radius: 50%;
  color: var(--deep-ink);
  background: rgba(242, 246, 245, 0.84);
  box-shadow: 0 10px 22px rgba(0, 14, 20, 0.14);
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.lm-layer-switch:hover,
.lm-pose-reset:hover {
  background: rgba(242, 246, 245, 0.97);
}

.lm-layer-switch:focus-visible,
.lm-pose-reset:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.lm-layer-switch svg {
  width: 19px;
  height: 19px;
  display: block;
}

.lm-pose-reset {
  padding: 0 0 2px;
  font: 500 25px/1 Georgia, serif;
}

.lm-loading {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 11;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 3px solid rgba(242, 246, 245, 0.78);
  border-top-color: var(--coral);
  filter: drop-shadow(0 8px 16px rgba(0, 14, 20, 0.18));
  animation: lm-spin 0.8s linear infinite;
}

.lm-loading[hidden] {
  display: none;
}

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

.lm-status {
  min-height: 1px;
  margin: 18px auto 0;
  max-width: 680px;
  color: rgba(0, 14, 20, 0.72);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.lm-status:empty {
  display: none;
}

.lm-map-attribution {
  position: absolute !important;
  right: 12px;
  bottom: 8px;
  z-index: 12 !important;
  margin: 0;
  padding: 3px 6px;
  border-radius: 2px;
  color: rgba(0, 14, 20, 0.72);
  background: rgba(242, 246, 245, 0.78);
  font-size: 10px;
  line-height: 1.2;
  backdrop-filter: blur(4px);
}

.lm-map-attribution a {
  color: inherit;
  text-decoration: none;
}

.lm-map-attribution a:hover,
.lm-map-attribution a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 1180px) {
  .lm-page--multi {
    --slab-top-width: 390px;
    --slab-canvas-width: 468px;
    --visible-slab-space: 124.8px;
  }
}

@media (max-width: 1010px) {
  .lm-page--multi {
    --slab-top-width: 340px;
    --slab-canvas-width: 408px;
    --visible-slab-space: 108.8px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 790px) {
  .lm-page--multi {
    grid-template-rows: 72px auto min-content;
    padding: 28px 14px 44px;
  }

  .lm-multi-grid {
    grid-template-columns: minmax(0, var(--slab-canvas-width));
    gap: 34px;
  }

  .lm-slab-link,
  .lm-slab--preview {
    width: min(100%, var(--slab-canvas-width));
  }

  .lm-slab-link:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .lm-page--detail {
    padding: 14px;
  }

  .lm-detail-shell {
    min-height: calc(100vh - 28px);
  }

  .lm-detail-composition {
    transform: scale(0.82);
    transform-origin: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-loading {
    animation-duration: 1.6s;
  }
}