/* Open Rainbow Studio keeps the paper dominant and every choice picture-led. */
.studio {
  --studio-ink: #4a3b34;
  --studio-paper: #fffdf8;
  --studio-shadow: 0 7px 0 rgba(102, 74, 54, .18), 0 14px 34px rgba(76, 50, 35, .18);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--studio-ink);
  background: linear-gradient(180deg, rgba(214, 242, 255, .3), rgba(255, 241, 205, .42));
}

.studio-main {
  position: absolute;
  z-index: 3;
  inset: 8px 10px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 144px;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.studio-materials,
.studio-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.studio-materials {
  flex-direction: column;
  gap: 8px;
  padding-top: 70px;
}

.studio-tools {
  display: grid;
  grid-template-columns: repeat(2, 56px);
  gap: 6px;
}

.studio-tray {
  display: grid;
  grid-template-columns: repeat(2, 56px);
  gap: 6px;
  place-content: center;
}

.studio-paper {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  border: 6px solid rgba(255, 255, 255, .92);
  border-radius: 25px;
  overflow: hidden;
  background: var(--studio-paper);
  box-shadow: var(--studio-shadow);
  isolation: isolate;
}

.studio-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px rgba(242, 165, 101, .14);
}

.studio-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.studio.is-stamp .studio-canvas { cursor: copy; }

.studio-actions {
  align-content: center;
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 9px;
  padding-top: 58px;
}

.studio-button,
.studio-choice,
.studio-picture {
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid rgba(74, 59, 52, .3);
  color: var(--studio-ink);
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 4px 0 rgba(74, 59, 52, .18);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.studio-button {
  width: 64px;
  height: 64px;
  padding: 8px;
  border-radius: 20px;
}

.studio-button svg { width: 100%; height: 100%; display: block; }

.studio-choice {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  padding: 5px;
  overflow: hidden;
}

.studio-choice img,
.studio-choice svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.studio-choice.is-selected,
.studio-tool.is-selected {
  border-color: #f2a565;
  box-shadow: 0 0 0 3px #ffe98a, 0 4px 0 rgba(74, 59, 52, .18);
}

.studio-button.is-down,
.studio-choice.is-down,
.studio-picture.is-down {
  transform: translateY(3px) scale(.98);
  box-shadow: 0 1px 0 rgba(74, 59, 52, .16);
}

.studio-button:disabled {
  opacity: .38;
  box-shadow: none;
}

.studio-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid rgba(255, 255, 255, .8);
  border-radius: 50% 47% 52% 45%;
  box-shadow: inset 0 -5px 0 rgba(74, 59, 52, .09);
}

.studio-page {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  padding: 8px;
  background: #bfe3ff;
}

.studio-tool {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  padding: 7px;
}

.studio-undo { background: #d9c7ff; }
.studio-clear { background: #ffd3ab; }
.studio-pictures { background: #bfe3ff; }
.studio-save { background: #b8f0d2; }
.studio-save.is-ready { box-shadow: 0 0 0 3px rgba(255, 233, 138, .85), 0 5px 0 rgba(74, 59, 52, .18); }
.studio-guide { background: #fff2b6; grid-column: 1 / -1; justify-self: center; }

.studio-overlay-host { position: absolute; inset: 0; z-index: 14; pointer-events: none; }
.studio-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 74px 16px 16px;
  background: rgba(75, 61, 51, .32);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.studio-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(620px, 88vw);
  min-height: 154px;
  max-height: calc(100dvh - 96px);
  padding: 18px;
  overflow: auto;
  border: 7px solid #fff;
  border-radius: 30px;
  background: #fff8e6;
  box-shadow: 0 12px 0 rgba(74, 59, 52, .2), 0 25px 55px rgba(74, 59, 52, .3);
}

.studio-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.studio-dialog-actions .studio-button {
  width: 78px;
  height: 78px;
  border-radius: 24px;
}

.studio-dialog-keep { background: #b8f0d2; }
.studio-dialog-clear { background: #ffd3ab; }
.studio-dialog-new { background: #fffdf8; }
.studio-dialog-pictures, .studio-dialog-next { background: #bfe3ff; }
.studio-dialog-talk { background: #fff2b6; }
.studio-dialog-map { background: #b8f0d2; }
.studio-dialog-map.is-pinned { box-shadow: 0 0 0 4px #ffe98a, 0 5px 0 rgba(74, 59, 52, .18); }

.studio-saved-preview {
  display: block;
  width: min(380px, 72vw);
  max-height: 46vh;
  object-fit: contain;
  border: 6px solid #fff;
  border-radius: 22px;
  background: var(--studio-paper);
  box-shadow: 0 5px 0 rgba(74, 59, 52, .15);
}

.studio-picture-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(94px, 1fr));
  gap: 12px;
  width: 100%;
}

.studio-picture,
.studio-picture-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 1.25;
  min-height: 88px;
  padding: 6px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--studio-paper);
}

.studio-picture img,
.studio-picture svg,
.studio-picture-empty svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (orientation: portrait), (max-aspect-ratio: 1.15) {
  .studio-main {
    inset: 8px;
    padding-top: 78px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 120px minmax(0, 1fr) 82px;
    gap: 9px;
  }

  .studio-materials {
    flex-direction: row;
    gap: 10px;
    padding: 0;
  }

  .studio-tools { grid-template-columns: repeat(2, 58px); }
  .studio-tool { width: 58px; height: 58px; }

  .studio-tray {
    grid-template-columns: repeat(3, 54px);
    gap: 7px;
    max-width: 184px;
  }

  .studio-choice,
  .studio-page { width: 56px; height: 56px; }

  .studio-paper {
    width: 100%;
    height: 100%;
    border-radius: 23px;
  }

  .studio-actions {
    display: flex;
    gap: 7px;
    padding: 0;
  }

  .studio-actions .studio-button {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
  }

  .studio-guide { grid-column: auto; }
  .studio-picture-grid { grid-template-columns: repeat(2, minmax(105px, 1fr)); }
}

@media (orientation: portrait) and (min-width: 600px) {
  .studio-main {
    grid-template-rows: 112px minmax(0, 1fr) 92px;
    padding-top: 80px;
  }
  .studio-materials { gap: 24px; }
  .studio-tray { grid-template-columns: repeat(5, 64px); max-width: none; }
  .studio-choice, .studio-page { width: 64px; height: 64px; }
  .studio-tools { grid-template-columns: repeat(2, 68px); }
  .studio-tool { width: 68px; height: 68px; }
  .studio-actions { gap: 15px; }
  .studio-actions .studio-button { width: 76px; height: 76px; flex-basis: 76px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .studio-main { inset: 6px 8px; grid-template-columns: 128px minmax(0, 1fr) 142px; gap: 8px; }
  .studio-materials { padding-top: 57px; gap: 5px; }
  .studio-tools { grid-template-columns: repeat(2, 56px); gap: 5px; }
  .studio-tool { width: 56px; height: 56px; }
  .studio-tray { grid-template-columns: repeat(2, 56px); gap: 5px; }
  .studio-choice, .studio-page { width: 56px; height: 56px; }
  .studio-actions { padding-top: 54px; gap: 7px; grid-template-columns: repeat(2, 60px); }
  .studio-actions .studio-button { width: 60px; height: 60px; }
  .studio-paper { border-width: 5px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-button,
  .studio-choice,
  .studio-picture { transition: none; }
}