.studio-account-dialog {
  box-sizing: border-box;
  margin: auto;
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  padding: 30px;
  border: 1px solid #334055;
  border-radius: 20px;
  background: #121722;
  color: #d7deea;
  box-shadow: 0 24px 90px #00000070;
  font-family: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.studio-account-dialog::backdrop { background: #020408c7; backdrop-filter: blur(10px); }
.studio-account-dialog h2 { margin: 0 42px 16px 0; font-size: 23px; line-height: 1.4; }
.studio-account-dialog h3 { margin: 24px 0 12px; }
.studio-account-help { color: #9aa7b9; font-size: 14px; line-height: 1.7; }
.studio-account-form { display: grid; gap: 15px; margin: 18px 0 8px; }
.studio-account-field { display: grid; gap: 7px; font-size: 14px; font-weight: 600; }
.studio-account-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #334055;
  border-radius: 9px;
  background: #0d121b;
  color: #f6f8fb;
  font: inherit;
  font-weight: 400;
}
.studio-account-button, .studio-account-secondary, .studio-account-entry, .studio-account-link, .studio-account-close {
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #ff4268;
  border-radius: 10px;
  background: #ff4268;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.studio-account-secondary, .studio-account-entry { background: #1b2230; color: #d7deea; border-color: #334055; }
.studio-account-entry { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-account-entry[hidden] { display: none; }
.studio-account-floating { position: fixed; right: 20px; top: 15px; z-index: 100; }
.studio-account-link { margin-top: 12px; border: 0; background: transparent; color: #ff6685; text-decoration: underline; }
.studio-account-close { position: absolute; right: 12px; top: 12px; background: transparent; border: 0; color: #9aa7b9; }
.studio-account-dialog button:disabled { opacity: .6; cursor: wait; }
.studio-account-dialog :focus-visible, .studio-account-entry:focus-visible { outline: 3px solid #bd6c39; outline-offset: 3px; }
.studio-account-notice { margin: 0; color: #ff6685; line-height: 1.6; font-size: 14px; overflow-wrap: anywhere; }
.studio-account-notice:empty { display: none; }
.studio-account-access-note {
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid #334055;
  border-left: 3px solid #c7f36b;
  border-radius: 10px;
  background: #0d121b;
}
.studio-account-access-note strong { display: block; color: #c7f36b; font-size: 13px; }
.studio-account-access-note p { margin: 6px 0 0; color: #b2bfd0; font-size: 12px; line-height: 1.65; }
.studio-account-details { padding: 13px 0; border-top: 1px solid #232c3b; }
.studio-account-details summary { cursor: pointer; font-weight: 600; min-height: 26px; line-height: 1.6; }
.studio-account-member { margin-top: 14px; padding: 16px; border: 1px solid #232c3b; border-radius: 12px; overflow-wrap: anywhere; }
.studio-account-member > p { margin: 7px 0 12px; font-size: 14px; color: #9aa7b9; }
.studio-account-member .studio-account-details { margin-top: 12px; }
.studio-account-gate {
  width: min(920px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(340px, 1fr);
  overflow: auto;
  border-color: #45516b;
}
.studio-account-gate:not([open]) { display: none; }
.studio-account-gate-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 490px;
  overflow: hidden;
  padding: 40px;
  background: #c7f36b;
  color: #151d17;
  isolation: isolate;
}
.studio-account-gate-intro::before,
.studio-account-gate-intro::after {
  content: '';
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(21, 29, 23, .22);
  border-radius: 50%;
  pointer-events: none;
}
.studio-account-gate-intro::before { width: 460px; height: 460px; right: -245px; top: 90px; }
.studio-account-gate-intro::after { width: 310px; height: 310px; right: -130px; top: 165px; background: rgba(255,255,255,.15); }
.studio-account-kicker,
.studio-account-panel-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.studio-account-slogan { margin-top: 65px; white-space: pre-line; font-size: clamp(32px, 3.5vw, 47px); line-height: 1.22; letter-spacing: -.04em; }
.studio-account-intro-copy { max-width: 290px; margin-top: 18px; font-size: 15px; line-height: 1.75; }
.studio-account-gate-steps { display: grid; gap: 9px; margin: auto 0 22px; padding: 0; list-style: none; counter-reset: gate-step; }
.studio-account-gate-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; counter-increment: gate-step; }
.studio-account-gate-steps li::before { content: '0' counter(gate-step); width: 27px; font: 800 11px ui-monospace, monospace; }
.studio-account-gate-intro small { font-size: 11px; line-height: 1.55; }
.studio-account-gate-panel { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 44px 48px; }
.studio-account-panel-kicker { margin-bottom: 13px; color: #c7f36b; }
.studio-account-gate-panel h2 { margin: 0 0 13px; color: #f6f8fb; font-size: 28px; letter-spacing: -.025em; }
.studio-account-gate-panel .studio-account-help { margin: 0 0 8px; }
.studio-account-gate-panel .studio-account-form { margin-top: 22px; }
.studio-account-gate-panel .studio-account-form > .studio-account-button { margin-top: 5px; min-height: 48px; font-weight: 800; }
.studio-account-gate-panel .studio-account-link { align-self: flex-start; padding-left: 0; }
@media (max-width: 600px) {
  .studio-account-dialog { padding: 24px 20px; }
  .studio-account-gate { grid-template-columns: 1fr; padding: 0; }
  .studio-account-gate-intro { min-height: 0; padding: 24px 26px; }
  .studio-account-slogan { margin-top: 18px; font-size: 27px; }
  .studio-account-intro-copy { margin-top: 8px; font-size: 12px; }
  .studio-account-gate-steps, .studio-account-gate-intro small { display: none; }
  .studio-account-gate-panel { padding: 26px; }
  .studio-account-gate-panel h2 { font-size: 23px; }
  .studio-account-entry { max-width: 130px; padding-inline: 8px; font-size: 12px; }
}