.viewport-expand,
.expanded-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 9px;
  border: 1px solid #72939e55;
  border-radius: 10px;
  color: #c6e5e7;
  background: #10222cde;
  cursor: pointer;
  transition:
    color 160ms,
    border-color 160ms,
    background 160ms,
    transform 160ms;
}
.viewport-expand {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 4;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px #0003;
}
.viewport-expand svg,
.expanded-tool svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.viewport-expand::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 9px);
  padding: 7px 10px;
  border: 1px solid #43616a;
  border-radius: 6px;
  background: #10202ff5;
  color: #d5e7ec;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 160ms,
    transform 160ms;
  pointer-events: none;
}
.viewport-expand:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: none;
}
.viewport-expand:is(:hover, :focus-visible),
.expanded-tool:is(:hover, :focus-visible) {
  color: #a9fff0;
  border-color: #74e8deaa;
  background: #1d3b43;
}
.viewport-expand:hover svg {
  transform: scale(1.08);
}
.viewport-expand:active,
.expanded-tool:active {
  transform: scale(0.94);
}
.viewport-is-expanded > .viewport-expand {
  display: none;
}
.viewport-placeholder {
  min-height: 0;
  pointer-events: none;
}
.expanded-viewport {
  --expanded-accent: #80e8dc;
  position: fixed;
  inset: 0;
  width: 96vw;
  height: 94vh;
  height: 94dvh;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #dcebf2;
}
.expanded-viewport::backdrop {
  background: #030810cc;
  backdrop-filter: blur(12px) saturate(0.65);
  animation: expanded-backdrop-in 220ms ease-out;
}
.expanded-viewport.is-closing::backdrop {
  animation: expanded-backdrop-out 150ms ease-in forwards;
}
.expanded-viewport[data-view="variant"] {
  --expanded-accent: #c3adf3;
}
.expanded-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #5c7b8b88;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at 50% 42%,
    #1c303c,
    #0f1a25 62%,
    #0b1520
  );
  box-shadow:
    0 30px 100px #000b,
    0 0 0 1px #ffffff08 inset;
}
.expanded-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
  padding: 17px 24px;
  border-bottom: 1px solid #526d7a4d;
  background: #0c1823aa;
}
.expanded-heading-copy {
  min-width: 0;
}
.expanded-eyebrow {
  color: var(--expanded-accent);
  font-size: 10px;
  letter-spacing: 2.8px;
}
.expanded-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 450;
  letter-spacing: -0.35px;
}
.expanded-kind {
  border-left: 1px solid #6a839355;
  padding-left: 24px;
  color: #a6bdcc;
  font-size: 11px;
  letter-spacing: 1.5px;
}
.expanded-tools {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.expanded-flat-tool {
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
}
.expanded-flat-tool:nth-child(3) {
  width: auto;
  min-width: 46px;
  font-size: 12px;
}
.expanded-mount {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background-image: radial-gradient(#7aafc021 0.7px, transparent 0.7px);
  background-size: 24px 24px;
}
.expanded-mount > .viewport,
.expanded-mount > .flat-canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
}
.expanded-mount .overlay-controls {
  top: 20px;
  right: 24px;
}
.expanded-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 10px 24px;
  border-top: 1px solid #526d7a4d;
  color: #9eb6c5;
  font-size: 12px;
  line-height: 1.5;
}
.expanded-context {
  max-width: 35%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #c6d9e3;
  font-variant-numeric: tabular-nums;
}
.expanded-escape {
  white-space: nowrap;
}
.expanded-escape kbd {
  padding: 2px 5px;
  margin-right: 4px;
  border: 1px solid #56708077;
  border-radius: 4px;
  color: #ccdee8;
  font: inherit;
}
@keyframes expanded-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes expanded-backdrop-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 700px) {
  .expanded-viewport {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    border-radius: 12px;
  }
  .expanded-heading {
    padding: 13px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .expanded-kind,
  .expanded-context,
  .expanded-escape {
    display: none;
  }
  .expanded-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
  }
  .expanded-heading h2 {
    font-size: 16px;
  }
  .expanded-tools {
    gap: 5px;
  }
  .expanded-tool {
    width: 34px;
    height: 34px;
    padding: 7px;
  }
  .expanded-footer {
    padding: 10px 14px;
    font-size: 11px;
  }
  .expanded-mount .overlay-controls {
    top: 12px;
    right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .expanded-viewport::backdrop {
    animation: none !important;
  }
  .viewport-expand,
  .viewport-expand::after,
  .expanded-tool {
    transition: none;
  }
}