/* The Card Studio's own look, over the family's: the felt with the card on it and the controls beside it. */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.studio-felt {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.studio-stage {
  position: relative;
  overflow: hidden;
  height: clamp(300px, calc(52svh - 48px), 512px);
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.18) 70%);
}
.studio-stage:focus-visible {
  outline: 3px solid var(--felt-ink);
  outline-offset: 3px;
}
.studio-zoomer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 50% 50%;
}
.studio-zoomer fuda-card {
  flex: none;
  --fuda-perspective: 2400px;
}
.studio-felt kazoku-view-controls {
  --kazoku-ink: var(--felt-ink);
  --kazoku-surface: rgba(0, 0, 0, 0.28);
  --kazoku-line: rgba(255, 255, 255, 0.35);
  --kazoku-accent: var(--felt-ink);
}
.studio-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}
#controls {
  min-height: 404px;
}
.bld-options {
  gap: 16px;
}
.bld-row {
  display: grid;
  gap: 6px;
}
.bld-row .fam-field {
  width: 100%;
}
.bld-number {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.bld-number input[type="range"] {
  width: 100%;
  min-height: 44px;
}
.bld-stack {
  display: grid;
  gap: 8px;
}
.studio-actions {
  gap: 10px;
}
.studio-file {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.studio-file input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}
.studio-file:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.fam-tabs {
  flex-wrap: wrap;
}
.fam-tabs button {
  min-width: 5rem;
  border-radius: 8px;
}
/* The choosers have no size until they are defined, and the nav's words arrive after the page. Reserve both so the studio does not jump when they appear. The pill widths are the Japanese ones, the wider of the two languages. */
header nav {
  min-height: 6.5rem;
}
header nav a[data-say="toStudio"] {
  min-width: 131px;
}
header nav a[data-say="toBuilder"] {
  min-width: 87px;
}
header nav a[data-say="toCollections"] {
  min-width: 160px;
}
header nav a[data-say="toBinder"] {
  min-width: 173px;
}
header nav a[data-say="toVintage"] {
  min-width: 159px;
}
header nav a[data-say="toLive"] {
  min-width: 93px;
}
header nav a[data-say="pageDocs"] {
  min-width: 116px;
}
kazoku-language-picker:where(:not(:defined)) {
  display: inline-block;
  width: 158px;
  height: 48px;
  vertical-align: middle;
}
kazoku-theme-switch:where(:not(:defined)) {
  display: inline-block;
  width: 270px;
  height: 48px;
  vertical-align: middle;
}
@media (max-width: 700px) {
  header nav {
    min-height: 264px;
  }
  /* The wider Japanese pills add a row here, and the zoom number leaves the first screen. The phone reserves the English pills. */
  header nav a[data-say="toStudio"] {
    min-width: 114px;
  }
  header nav a[data-say="toBuilder"] {
    min-width: 79px;
  }
  header nav a[data-say="toCollections"] {
    min-width: 143px;
  }
  header nav a[data-say="toBinder"] {
    min-width: 142px;
  }
  header nav a[data-say="toVintage"] {
    min-width: 126px;
  }
  header nav a[data-say="toLive"] {
    min-width: 81px;
  }
  header nav a[data-say="pageDocs"] {
    min-width: 65px;
  }
  kazoku-theme-switch:where(:not(:defined)) {
    width: 152px;
  }
}
@media (max-width: 860px) {
  .studio {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The bar sits under the stage, and its zoom number has to be on the first screen of a phone. */
  header {
    margin-bottom: 0;
  }
  .studio-felt {
    padding: 0 12px;
    gap: 4px;
  }
  .studio-stage {
    height: 230px;
  }
}
.builder-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
  overflow: hidden;
}
.builder-stage fuda-card {
  --fuda-perspective: 2400px;
}
.builder-stage fuda-collection {
  width: 100%;
}
.builder-code {
  margin-top: 24px;
}
.builder-code pre {
  max-height: 22rem;
}