.studio-panel {
  position: fixed;
  z-index: 65;
  top: 88px;
  right: 24px;
  bottom: 90px;
  width: 360px;
  max-height: 830px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #242422;
  background: #f3f3f0;
  border: 1px solid #e8e8e3;
  border-radius: 18px;
  box-shadow: 0 12px 42px #2424220b;
  opacity: 0;
  transform: translateY(-14px) scaleY(.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity .2s ease, transform .26s cubic-bezier(.22,.68,.2,1);
  isolation: isolate;
}

.studio-panel.is-open { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: auto; }
.case-page .studio-panel { top: 82px; bottom: 24px; }
.studio-panel-cap { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; height: 48px; padding: 0 19px 0 22px; border-bottom: 1px solid #dfdfd8; }
.studio-panel-cap h2 { margin: 0; font-size: 13px; font-weight: 400; letter-spacing: -.1px; }
.studio-panel-close { display: grid; place-items: center; width: 27px; height: 27px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #686863; transition: background .2s, color .2s; }
.studio-panel-close:hover { background: #e4e4dd; color: #181817; }
.studio-panel-close span { position: relative; width: 11px; height: 11px; }
.studio-panel-close span::before, .studio-panel-close span::after { position: absolute; top: 5px; left: 0; width: 11px; height: 1px; background: currentColor; content: ''; transform: rotate(45deg); }
.studio-panel-close span::after { transform: rotate(-45deg); }
.studio-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9c9c0 transparent; padding: 16px 22px; }
.studio-panel-scroll::-webkit-scrollbar { width: 3px; }
.studio-panel-scroll::-webkit-scrollbar-thumb { border-radius: 3px; background: #c9c9c0; }
.studio-panel-scroll:focus-visible { outline: 1px solid #bdbdb5; outline-offset: -5px; }
.studio-panel-section + .studio-panel-section { margin-top: 18px; }
.studio-panel-section h3 { margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid #ddddd5; color: #92928a; font: 9px/1.3 var(--mono, 'SFMono-Regular', Consolas, monospace); font-weight: 400; letter-spacing: .035em; text-transform: uppercase; }
.studio-panel-section p, .studio-panel-section ul { margin: 0; padding: 0; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: -.1px; }
.studio-panel-section ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; list-style: none; }
.studio-panel-section li { margin: 0; }
.studio-panel-details { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.studio-panel-details .studio-panel-section { margin-top: 0; }
.studio-panel-details ul { display: block; }
.studio-panel > .studio-team-section { flex: 0 0 auto; margin-top: 0; padding: 16px 22px; border-top: 1px solid #dfdfd8; }
.studio-team-section h3 { margin-bottom: 9px; }
.studio-founders-portrait { margin: 0; }
.studio-head-stage { --head-turn: 0deg; --head-nod: 0deg; --head-shift: 0px; position: relative; height: 176px; perspective: 700px; }
.studio-head-tilt { position: absolute; z-index: 1; inset: 0; height: 100%; transform: translateX(var(--head-shift)) rotateY(var(--head-turn)) rotateX(var(--head-nod)); transform-origin: center 57%; transform-style: preserve-3d; }
.studio-head-tilt img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; }
.studio-founder-names { display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 264px); margin: 8px auto 0; text-align: center; font-size: 12px; line-height: 1.2; }
.menu-item[data-studio-toggle] { appearance: none; border: 0; background: transparent; }
.menu-item[data-studio-toggle][aria-expanded='true'] { color: #fff; }
.case-header .case-studio-toggle:hover { opacity: .55; }
.case-header .case-studio-toggle[aria-expanded='true'] { box-shadow: 0 1px 0 currentColor; }
.case-studio-mobile { display: none; }

@media (min-width: 1600px) {
  .studio-panel { right: 32px; }
}

@media (max-width: 600px) {
  .studio-panel, .case-page .studio-panel { top: 80px; right: 16px; bottom: 90px; left: 16px; width: auto; max-height: none; }
  .studio-panel-cap { padding-right: 18px; padding-left: 20px; }
  .studio-panel-scroll { padding: 19px 20px 22px; }
  .studio-panel-section + .studio-panel-section { margin-top: 27px; }
  .studio-panel-details .studio-panel-section { margin-top: 0; }
  .studio-head-stage { height: auto; aspect-ratio: 3 / 2; }
  .studio-founder-names { width: 100%; }
  .studio-panel > .studio-team-section { padding: 14px 20px 18px; }
  .case-header .case-studio-toggle { display: none; }
  .case-studio-mobile { position: fixed; z-index: 66; right: 18px; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; min-width: 76px; height: 36px; padding: 0 16px; border: 1px solid #d1d1cb; border-radius: 20px; background: #eeeee9; color: #282825; font-size: 12px; box-shadow: 0 4px 14px #22222208; }
  .case-studio-mobile[aria-expanded='true'] { background: #e1e1d9; border-color: #bdbdb4; }
}

@media (max-height: 650px) and (min-width: 601px) {
  .studio-panel { top: 75px; bottom: 90px; }
  .case-page .studio-panel { top: 75px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-panel, .studio-panel-close { transition: none; }
  .studio-panel { transform: none; }
  .studio-head-tilt { transform: none; }
}