/* Studio's interface carries the same ink and particle material as the journey.
   Decorative graphics stay outside the artwork canvases and pointer surfaces. */
.studio-page .studio .panel {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
  isolation: isolate;
  background: #07101d;
  border: 1px solid #1c3245;
  padding: 16px;
}
.studio-page .studio .panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 330px;
  z-index: -1;
  background: url('/tools/assets/studio-wave.svg') 60% 30% / 650px auto no-repeat;
  opacity: .24;
  pointer-events: none;
}
.studio-page .studio .panel-head { margin-bottom: 8px; }
.studio-page .studio .panel h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.studio-page .studio .panel h3 { color: #bad0de; font-weight: 600; }
.studio-page .studio .block { padding: 12px 0; }
.studio-page .studio #photo-block:has(#processing[hidden]):has(#photo-controls[hidden]) { display: none; }
.studio-page .studio .frames canvas { max-width: 64px; }
.studio-page .studio #looks-block .looks canvas { max-width: 48px; }
.studio-page .studio .frames button,
.studio-page .studio #looks-block .looks button {
  background: #0a1725;
  border: 1px solid #253d50;
  border-radius: 6px;
  color: #bad0de;
  box-shadow: none;
  transition: background-color .16s ease-out, border-color .16s ease-out;
}
.studio-page .studio .frames button:hover,
.studio-page .studio #looks-block .looks button:hover {
  background: #102536;
  border-color: #5c9bb5;
  color: var(--white);
}
.studio-page .studio .frames button[aria-pressed="true"],
.studio-page .studio #looks-block .looks button[aria-pressed="true"] {
  background: #112c3e;
  border-color: var(--electric);
  color: var(--white);
  box-shadow: none;
}
.studio-page .studio .seg { border: 1px solid #20384b; background: #06111e; }
.studio-page .studio .seg button { background: transparent; color: #bad0de; }
.studio-page .studio .seg button:hover { background: #102536; color: var(--white); }
.studio-page .studio .seg button[aria-pressed="true"] { background: #173a50; color: var(--white); }
.studio-page .studio .tabs { padding: 4px; gap: 4px; border-radius: 8px; }
.studio-page .studio .tabs button { min-height: 44px; font-weight: 600; border-radius: 5px; }
.studio-page .studio .tabs button[aria-selected="true"] { background: var(--electric); color: var(--ink); }
.studio-page .studio .stage::after {
  content: "";
  position: absolute;
  inset: -60px -15% -30px;
  z-index: -2;
  background: url('/tools/assets/studio-wave.svg') center 52% / 100% auto no-repeat;
  opacity: .6;
  pointer-events: none;
}
.studio-page .studio .stage::before { opacity: .28; }
.studio-page .studio .icon-btn,
.studio-page .studio .pill,
.studio-page .studio .secondary {
  background: #091a29;
  border-color: #34566c;
  border-radius: 6px;
}
.studio-page .studio .icon-btn:hover:not(:disabled),
.studio-page .studio .pill:hover,
.studio-page .studio .secondary:hover {
  background: #112d41;
  border-color: var(--electric);
  color: var(--white);
}
.studio-page .studio .primary { border: 1px solid var(--electric); font-weight: 700; }
.studio-page .studio .primary:hover { background: #b6ebff; border-color: #b6ebff; }
.studio-page .studio :is(.frames, .looks, .seg) button:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.studio-page .studio .tabs button[aria-selected="true"]:focus-visible {
  outline-color: var(--ink);
  outline-offset: -4px;
}
.studio-page .studio .at-input,
.studio-page .studio textarea { background: #06111e; border-color: #34566c; }
@media (max-width: 1099px) {
  .studio-page .studio .panel { position: relative; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .studio-page .studio .intro { margin-bottom: 14px; }
  .studio-page .studio .panel { padding: 14px; }
  .studio-page .studio .panel-head { margin-bottom: 4px; }
  .studio-page .studio .panel h3 { margin-bottom: 8px; }
  .studio-page .studio .block { padding: 6px 0; }
  .studio-page .studio .frames button { padding: 8px 4px; }
  .studio-page .studio .frames canvas { width: 48px; height: 48px; }
  .studio-page .studio #looks-block .looks button { padding: 6px 4px; }
  .studio-page .studio #looks-block .looks { gap: 6px; }
  .studio-page .studio #looks-block .looks canvas { max-width: 40px; }
}
@media (max-width: 700px) {
  .studio-page .studio .panel { padding: 18px; }
  .studio-page .studio .stage::after { inset-inline: -35%; opacity: .48; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-page .studio .frames button,
  .studio-page .studio #looks-block .looks button { transition: none; }
}