* { box-sizing: border-box; }

html { min-width: 20rem; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  transition: background-color 360ms var(--ease-out), color 240ms ease;
}

button,
input,
select { font: inherit; }

button,
a { color: inherit; }

a { text-decoration: none; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--coral-ink);
  outline-offset: 4px;
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--font-ui-lg);
  letter-spacing: -0.03em;
}

.auth-brand svg {
  width: 2rem;
  margin-right: 0.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.auth-brand small {
  margin-left: 0.65rem;
  color: var(--slate);
  font-family: var(--font-label);
  font-size: var(--font-ui-2xs);
  letter-spacing: 0.04em;
}

.auth-topbar__actions { display: flex; align-items: center; gap: 1.2rem; }
.back-link { font-size: var(--font-ui-sm); font-weight: 700; }
.back-link span { margin-right: 0.35rem; color: var(--coral-ink); }
.back-link:hover { text-decoration: underline; text-underline-offset: 0.28rem; }

.theme-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--silver-dark);
  border-radius: 99px;
  background: var(--paper-bright);
  color: var(--ink);
}

.theme-switch__track {
  position: relative;
  width: 2rem;
  height: 1rem;
  border-radius: 99px;
  background: var(--silver);
}

.theme-switch__track i {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--cobalt);
  box-shadow: 2px 2px 0 var(--coral);
  transition: transform 360ms var(--ease-out), background-color 240ms ease;
}

:root[data-theme="dark"] .theme-switch__track i { transform: translateX(1rem); }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(28rem, 0.92fr);
  width: calc(100% - (2 * var(--page-gutter)));
  max-width: 88rem;
  min-height: min(48rem, calc(100vh - 9rem));
  margin: 1rem auto 2.5rem;
  overflow: hidden;
  border: 1px solid var(--silver-dark);
  border-radius: var(--radius-frame);
  background: var(--paper-bright);
  box-shadow: var(--shadow-frame);
}

.product-showcase,
.auth-docket { min-width: 0; }

.product-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 6vh, 5rem);
  min-height: 100%;
  padding: clamp(2rem, 4vw, 4.5rem);
  overflow: hidden;
  background-color: var(--field-dark);
  color: var(--field-on);
}

.showcase-copy,
.production-preview { position: relative; z-index: 1; }

.showcase-eyebrow,
.production-preview__bar,
.production-preview__label,
.production-preview__footer,
.access-state,
.auth-docket__header p,
.preview-note {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.showcase-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--coral);
  font-size: var(--font-ui-xs);
  font-weight: 700;
}

.showcase-copy h1 {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-ui-title);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}

.showcase-copy > p:last-child {
  max-width: 38rem;
  margin: 1.5rem 0 0;
  color: var(--on-dark-muted);
  font-size: var(--font-ui-lg);
}

.production-preview {
  width: min(100%, 42rem);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--outline-light);
  border-radius: var(--radius-frame);
  background: var(--paper-bright);
  color: var(--ink);
  box-shadow: 0 1.5rem 4rem var(--shadow-dark);
}

.production-preview__bar,
.production-preview__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--paper-dim);
  font-size: var(--font-ui-2xs);
  font-weight: 700;
}

.production-preview__bar { border-bottom: 1px solid var(--silver-dark); }
.production-preview__status { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--chartreuse-deep); }
.production-preview__status i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--chartreuse-deep); }

.production-preview__body { padding: 1.35rem 1rem 1.1rem; }
.production-preview__label { margin: 0 0 0.45rem; color: var(--slate); font-size: var(--font-ui-2xs); }
.production-preview__body h2 { margin: 0; font-family: var(--font-display); font-size: var(--font-ui-xl); letter-spacing: -0.025em; }

.production-path {
  display: grid;
  gap: 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--silver-dark);
}

.production-stage {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(8rem, 0.7fr) minmax(9rem, 1fr);
  gap: 0.7rem;
  align-items: center;
  min-width: 0;
  min-height: 3.75rem;
  padding: 0.55rem 0.7rem;
  overflow: hidden;
  border-bottom: 1px solid var(--silver-dark);
  background: var(--paper-bright);
}

.production-stage::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.25rem;
  background: var(--coral);
  content: "";
  opacity: 0;
  transform: scaleY(0.2);
}

.production-stage__index {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--silver-dark);
  border-radius: var(--radius-control);
  color: var(--slate);
  font-family: var(--font-label);
  font-size: var(--font-ui-2xs);
}

.production-stage__copy { display: grid; gap: 0.15rem; min-width: 0; }
.production-stage__copy strong { font-size: var(--font-ui-sm); }
.production-stage__copy small { overflow: hidden; color: var(--slate); font-size: var(--font-ui-2xs); text-overflow: ellipsis; white-space: nowrap; }

.stage-plan,
.stage-wave,
.stage-board,
.stage-render { justify-self: stretch; min-width: 0; height: 2rem; }

.stage-plan { display: grid; align-content: center; gap: 0.25rem; }
.stage-plan i { height: 0.22rem; background: var(--cobalt); transform-origin: left; }
.stage-plan i:nth-child(1) { width: 88%; }
.stage-plan i:nth-child(2) { width: 68%; }
.stage-plan i:nth-child(3) { width: 78%; }

.stage-wave { display: flex; align-items: center; gap: 0.22rem; }
.stage-wave i { width: 0.22rem; height: 100%; background: var(--cobalt); transform-origin: center; }
.stage-wave i:nth-child(1),
.stage-wave i:nth-child(9) { transform: scaleY(0.28); }
.stage-wave i:nth-child(2),
.stage-wave i:nth-child(8) { transform: scaleY(0.5); }
.stage-wave i:nth-child(3),
.stage-wave i:nth-child(7) { transform: scaleY(0.72); }
.stage-wave i:nth-child(4),
.stage-wave i:nth-child(6) { transform: scaleY(0.92); }

.stage-board { display: grid; grid-template-columns: 1.1fr 0.8fr 1fr; gap: 0.3rem; }
.stage-board i { border: 1px solid var(--cobalt); background: var(--cobalt-pale); }
.stage-board i:nth-child(2) { transform: translateY(0.3rem); }

.stage-render { display: grid; grid-template-columns: 1fr 1.75rem; gap: 0.5rem; align-items: center; }
.stage-render > span { height: 0.45rem; overflow: hidden; background: var(--silver); }
.stage-render > span i { display: block; width: 100%; height: 100%; background: var(--cobalt); transform-origin: left; }
.stage-render b { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--chartreuse); color: var(--field-dark); font-size: var(--font-ui-sm); }

.production-preview__footer { justify-content: flex-start; flex-wrap: wrap; border-top: 1px solid var(--silver-dark); }
.production-preview__footer span + span::before { margin-right: 0.7rem; color: var(--coral-ink); content: "·"; }

.auth-docket {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 36rem;
  justify-self: center;
  padding: clamp(2rem, 5vw, 4.5rem);
}

.auth-docket__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--silver);
}

.auth-docket__header p { margin: 0 0 0.7rem; color: var(--cobalt-deep); font-size: var(--font-ui-xs); font-weight: 700; }
.auth-docket__header h2 { margin: 0; font-family: var(--font-display); font-size: var(--font-ui-title); letter-spacing: -0.04em; line-height: 0.98; }
.auth-docket__header div > span { display: block; margin-top: 0.7rem; color: var(--slate); font-size: var(--font-ui-md); }

.access-state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.38rem 0.5rem;
  border: 1px solid var(--silver-dark);
  color: var(--cobalt-deep);
  font-size: var(--font-ui-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.access-state i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--coral); }

.auth-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1.5rem 0;
  padding: 0.25rem;
  border: 1px solid var(--silver-dark);
  border-radius: var(--radius-control);
  background: var(--paper-dim);
}

.auth-switch button {
  min-height: 2.75rem;
  padding: 0.7rem;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--slate);
  font-size: var(--font-ui-md);
  font-weight: 800;
}

.auth-switch button[aria-selected="true"] { background: var(--field-dark); color: var(--field-on); box-shadow: var(--shadow-small); }

.provider-button,
.auth-submit { width: 100%; min-height: 3.25rem; border-radius: var(--radius-control); font-weight: 800; }

.provider-button { display: flex; align-items: center; justify-content: center; gap: 0.65rem; border: 1px solid var(--silver-dark); background: var(--paper); }
.provider-button span { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid var(--silver-dark); border-radius: 50%; font-size: var(--font-ui-sm); }
.provider-button:hover { border-color: var(--cobalt); background: var(--cobalt-pale); }
.provider-button:disabled { cursor: wait; opacity: 0.62; }
.provider-note { margin: 0.85rem 0 0; color: var(--slate); font-size: var(--font-ui-sm); line-height: 1.55; }
.provider-note strong { color: var(--ink); }

.auth-form { display: grid; gap: 1rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: grid; gap: 0.38rem; }
.form-field label { font-size: var(--font-ui-sm); font-weight: 800; }

.form-field input,
.form-field select {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--silver-dark);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--duration-short) ease, box-shadow var(--duration-short) ease, background-color var(--duration-short) ease;
}

.form-field input::placeholder { color: var(--slate); opacity: 0.86; }
.form-field input:focus,
.form-field select:focus { border-color: var(--cobalt); outline: 0; box-shadow: 0 0 0 3px var(--cobalt-pale); }
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"] { border-color: var(--error); }
.field-error { min-height: 1rem; color: var(--error); font-size: var(--font-ui-xs); }

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--field-dark);
  background: var(--field-dark);
  color: var(--field-on);
  box-shadow: 5px 6px 0 var(--coral);
}

.auth-submit:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 7px 8px 0 var(--coral); }
.auth-submit:disabled { cursor: wait; opacity: 0.66; box-shadow: none; }
.auth-submit i { font-style: normal; font-size: 1.15rem; }

.panel-intro { margin: 0 0 1.2rem; color: var(--slate); font-size: var(--font-ui-md); }
.form-status { min-height: 1.4rem; margin: 1.15rem 0 0; padding: 0; font-size: var(--font-ui-sm); font-weight: 700; }
.form-status:not(:empty) { padding: 0.7rem 0.8rem; background: var(--cobalt-pale); color: var(--cobalt-deep); }
.form-status[data-tone="error"] { background: var(--coral-pale); color: var(--error); }
.form-status[data-tone="success"] { background: var(--chartreuse); color: var(--field-dark); }
.preview-note { margin: 0.9rem 0 0; color: var(--slate); font-size: var(--font-ui-2xs); line-height: 1.5; }

.auth-footer {
  display: flex;
  justify-content: space-between;
  max-width: 92rem;
  min-height: 3.75rem;
  margin: 0 auto;
  padding: 1rem var(--page-gutter);
  color: var(--slate);
  font-family: var(--font-label);
  font-size: var(--font-ui-2xs);
}

@media (prefers-reduced-motion: no-preference) {
  .auth-shell { animation: studio-arrive 620ms var(--ease-out) both; }
  .production-preview.is-running .production-stage { animation: stage-register 9.6s var(--ease-in-out) infinite both; }
  .production-preview.is-running .production-stage::after { animation: stage-rule 9.6s var(--ease-in-out) infinite both; }
  .production-preview.is-running .production-stage__index { animation: stage-index 9.6s var(--ease-in-out) infinite both; }
  .production-preview.is-running .production-stage--plan,
  .production-preview.is-running .production-stage--plan::after,
  .production-preview.is-running .production-stage--plan .production-stage__index { animation-delay: 0s; }
  .production-preview.is-running .production-stage--narrate,
  .production-preview.is-running .production-stage--narrate::after,
  .production-preview.is-running .production-stage--narrate .production-stage__index { animation-delay: 2.4s; }
  .production-preview.is-running .production-stage--visualize,
  .production-preview.is-running .production-stage--visualize::after,
  .production-preview.is-running .production-stage--visualize .production-stage__index { animation-delay: 4.8s; }
  .production-preview.is-running .production-stage--render,
  .production-preview.is-running .production-stage--render::after,
  .production-preview.is-running .production-stage--render .production-stage__index { animation-delay: 7.2s; }
  .production-preview.is-running .stage-plan i { animation: plan-write 9.6s var(--ease-in-out) infinite both; }
  .production-preview.is-running .stage-plan i:nth-child(2) { animation-delay: 0.12s; }
  .production-preview.is-running .stage-plan i:nth-child(3) { animation-delay: 0.24s; }
  .production-preview.is-running .stage-wave i { animation: waveform-speak 9.6s var(--ease-in-out) 2.4s infinite both; }
  .production-preview.is-running .stage-wave i:nth-child(2),
  .production-preview.is-running .stage-wave i:nth-child(8) { animation-delay: 2.48s; }
  .production-preview.is-running .stage-wave i:nth-child(3),
  .production-preview.is-running .stage-wave i:nth-child(7) { animation-delay: 2.56s; }
  .production-preview.is-running .stage-wave i:nth-child(4),
  .production-preview.is-running .stage-wave i:nth-child(6) { animation-delay: 2.64s; }
  .production-preview.is-running .stage-wave i:nth-child(5) { animation-delay: 2.72s; }
  .production-preview.is-running .stage-board i { animation: storyboard-build 9.6s var(--ease-in-out) 4.8s infinite both; }
  .production-preview.is-running .stage-board i:nth-child(2) { animation-delay: 4.96s; }
  .production-preview.is-running .stage-board i:nth-child(3) { animation-delay: 5.12s; }
  .production-preview.is-running .stage-render > span i { animation: render-fill 9.6s var(--ease-in-out) 7.2s infinite both; }
  .production-preview.is-running .stage-render b { animation: render-check 9.6s var(--ease-in-out) 7.2s infinite both; }
}

@keyframes studio-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stage-register {
  0%, 22%, 100% { background: var(--paper-bright); }
  3%, 18% { background: var(--coral-pale); }
}

@keyframes stage-rule {
  0%, 22%, 100% { opacity: 0; transform: scaleY(0.2); }
  3%, 18% { opacity: 1; transform: scaleY(1); }
}

@keyframes stage-index {
  0%, 22%, 100% { border-color: var(--silver-dark); background: transparent; color: var(--slate); }
  3%, 18% { border-color: var(--coral); background: var(--coral); color: var(--field-dark); }
}

@keyframes plan-write {
  0%, 2%, 22%, 100% { opacity: 0.35; transform: scaleX(0.16); }
  10%, 18% { opacity: 1; transform: scaleX(1); }
}

@keyframes waveform-speak {
  0%, 2%, 22%, 100% { opacity: 0.35; transform: scaleY(0.18); }
  7% { opacity: 1; transform: scaleY(1); }
  12% { opacity: 1; transform: scaleY(0.42); }
  18% { opacity: 1; transform: scaleY(0.78); }
}

@keyframes storyboard-build {
  0%, 2%, 22%, 100% { opacity: 0.3; clip-path: inset(100% 0 0); transform: translateY(0.35rem); }
  10%, 18% { opacity: 1; clip-path: inset(0); transform: translateY(0); }
}

@keyframes render-fill {
  0%, 2%, 22%, 100% { opacity: 0.4; transform: scaleX(0.06); }
  16%, 18% { opacity: 1; transform: scaleX(1); }
}

@keyframes render-check {
  0%, 13%, 22%, 100% { opacity: 0.25; transform: scale(0.72) rotate(-12deg); }
  16%, 18% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (max-width: 64rem) {
  .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(25rem, 0.9fr); width: calc(100% - 2rem); }
  .product-showcase { padding: 2.5rem; }
  .showcase-copy h1 { font-size: var(--font-ui-display-sm); white-space: normal; }
  .auth-docket { padding: 2.5rem; }
  .field-pair { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .auth-topbar { min-height: 4.5rem; }
  .auth-brand small,
  .back-link { display: none; }
  .auth-shell { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .auth-docket { order: -1; max-width: none; }
  .product-showcase { min-height: 40rem; }
  .showcase-copy h1 { max-width: none; }
}

@media (max-width: 36rem) {
  .auth-topbar { padding-right: 1rem; padding-left: 1rem; }
  .auth-shell { width: calc(100% - 1rem); border-radius: var(--radius-frame); }
  .auth-docket,
  .product-showcase { padding: 1.5rem; }
  .auth-docket__header { display: block; }
  .access-state { margin-top: 1rem; }
  .showcase-copy h1 { font-size: var(--font-ui-display-sm); }
  .production-stage { grid-template-columns: 2.25rem minmax(6.25rem, 0.8fr) minmax(6.5rem, 1fr); gap: 0.45rem; padding-right: 0.45rem; padding-left: 0.45rem; }
  .production-stage__copy small { white-space: normal; }
  .production-preview__footer { gap: 0.45rem; }
  .auth-footer { display: grid; gap: 0.35rem; padding-right: 1rem; padding-left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}