.crew-page {
  --plum: #201925;
  --ivory: #f3ead8;
  --muted: #b9abbf;
  --amber: #f1bf7e;
  --mint: #a3d6bb;
  --mono: 'Space Mono', monospace;
  margin: 0;
  background: radial-gradient(ellipse at 50% 36%, #3c2b3c 0, #281e2d 38%, var(--plum) 75%);
  color: var(--ivory);
  font: 16px/1.5 'Space Grotesk', Arial, sans-serif;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.crew-page *, .crew-page *::before, .crew-page *::after { box-sizing: border-box; }
.crew-page :where(h1,p) { margin: 0; }
.crew-page :where(button,input) { font: inherit; }
.crew-page :focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
.crew-page ::selection { background: var(--amber); color: var(--plum); }
.skip { position: absolute; top: -100px; left: 16px; z-index: 10; padding: 12px 20px; background: var(--ivory); color: var(--plum); }
.skip:focus { top: 12px; }
.brand { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 21px 20px 12px; font-size: 15px; font-weight: 700; letter-spacing: .025em; }
.brand-mark { color: var(--amber); font-size: 23px; line-height: 1; }
main { display: grid; justify-items: center; padding: 0 24px; }
h1 { text-align: center; font-size: clamp(32px, 3.25vw, 45px); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; padding: 4px 0 22px; }
h1 span { color: var(--amber); }
.monitor-stage { width: min(100%, 690px); position: relative; margin-bottom: 10px; }
.monitor-stage::after { content: ''; position: absolute; bottom: -6px; left: 9%; width: 82%; height: 26px; border-radius: 50%; background: #0b0712; filter: blur(13px); opacity: .6; z-index: -1; }
.monitor { position: relative; isolation: isolate; padding: 24px 27px 0; border-radius: 31px 31px 27px 27px; background: linear-gradient(115deg, #f7efd9 0%, #e7dec7 43%, #c5bca5 100%); border: 1px solid #ece1cb; box-shadow: inset 3px 3px 2px #fff8e8, inset -5px -6px 2px #9f967f, 0 6px 0 #918775, 0 12px 0 #392d38, 0 24px 45px #0c08164d; }
.monitor::after { content: ''; position: absolute; pointer-events: none; inset: 0; border-radius: inherit; opacity: .1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.top-vents { position: absolute; height: 7px; top: 8px; right: 44px; width: 77px; border-radius: 3px; background: repeating-linear-gradient(90deg, #a89e89 0 2px, transparent 2px 6px); opacity: .6; }
.screen-surround { padding: 9px 10px 11px; background: #655f54; border-radius: 18px 18px 26px 26px; box-shadow: -1px -2px 2px #a59c88, 1px 2px 0 #fff7e7, inset 3px 5px 6px #29272a, 0 0 16px #a3d6bb25; }
.screen { position: relative; aspect-ratio: 900/438; border-radius: 11px 11px 20px 20px; overflow: hidden; background: #222c2c; box-shadow: 0 0 12px #adc9a82e; }
.screen-ui { position: absolute; top: 13px; left: 20px; right: 20px; z-index: 3; display: flex; justify-content: space-between; gap: 10px; font: 10px/1.5 var(--mono); color: #c1dcc7; }
.screen-ui > span:first-child { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.screen-ui i { width: 4px; height: 4px; background: var(--mint); }
.screen-status { text-align: right; color: #e1caa5; }
#workshop, .scene-fallback { width: 100%; height: 100%; display: block; object-fit: contain; }
#workshop { visibility: hidden; }
.scene-fallback { position: absolute; inset: 0; }
.screen.is-ready #workshop { visibility: visible; }
.screen.is-ready .scene-fallback { display: none; }
.glass { pointer-events: none; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: repeating-linear-gradient(0deg, #00000008 0 1px, transparent 1px 3px), linear-gradient(125deg, #ffffff0c, transparent 36%, transparent 75%, #9ec0c208); box-shadow: inset 0 0 27px 8px #080f1466, inset 0 2px 4px #cbe6dd24; }
.monitor-chin { min-height: 59px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 6px 2px 10px; color: #403e38; position: relative; z-index: 4; }
.hardware-brand { line-height: 1.1; flex-shrink: 0; }
.hardware-brand > span { font-size: 16px; font-weight: 700; letter-spacing: -.06em; }
.hardware-brand small { display: block; font: 8px/1.8 var(--mono); color: #615b50; }
.monitor-controls { display: flex; align-items: center; gap: 10px; }
.task-button, .pause-button { color-scheme: light; border: 1px solid #9f957f; border-radius: 5px; background: linear-gradient(#ede4d0,#d6ccb6); color: #3d3a33; box-shadow: inset 1px 1px 0 #fffae9, 0 2px 0 #a09580; cursor: pointer; min-height: 36px; transition: background .15s, transform .15s; }
.task-button { font-size: 11px; padding: 8px 11px; min-width: 179px; }
.task-button span { margin-left: 8px; }
.task-button:hover, .pause-button:hover { background: #faf1df; }
.task-button:active, .pause-button:active { transform: translateY(1px); }
.monitor-controls :focus-visible { outline-color: #3a6151; outline-offset: 3px; }
.task-button:disabled { color: #665f52; cursor: default; background: #d6cbb6; }
.pause-button { display: grid; place-items: center; width: 36px; padding: 0; }
.pause-button svg { fill: none; stroke: currentColor; stroke-width: 2.5; }
.pause-button:disabled { opacity: .5; cursor: default; }
.power { width: 6px; height: 6px; border-radius: 50%; background: #598969; border: 1px solid #406248; box-shadow: 0 0 5px #a4d5a7; margin-inline: 3px 5px; }
.monitor-foot { width: 37%; height: 21px; margin: 7px auto 0; background: linear-gradient(#8c8371,#c0b49b 55%,#a99d87); border-radius: 0 0 8px 8px; box-shadow: inset 0 -3px #8b806d, 0 5px 0 #14101b55; }
.invitation { text-align: center; width: min(100%, 620px); }
.support { font-size: 16px; color: #ece2eb; }
.launch { font-size: 13px; color: var(--muted); margin-top: 2px; }
.wl-form { width: min(100%, 460px); margin: 13px auto 0; text-align: left; }
.wl-form label { display: block; font-size: 12px; margin-bottom: 5px; color: #e4d9e8; }
.form-row { display: flex; gap: 8px; }
.wl-form input { flex: 1; min-width: 0; width: 100%; border: 1px solid #827087; background: #ffffff05; border-radius: 6px; min-height: 47px; color: var(--ivory); padding: 10px 13px; }
.wl-form input::placeholder { color: #ae9eb3; }
.signup-button { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; gap: 18px; border: 1px solid #f4d2a4; border-radius: 6px; background: var(--amber); color: #302132; font-size: 15px; font-weight: 700; padding: 10px 18px; min-height: 47px; cursor: pointer; box-shadow: 0 2px 0 #92694b; transition: background .15s, transform .15s; }
.signup-button:hover { background: #ffd6a4; }
.signup-button:active { transform: translateY(1px); }
.signup-button:disabled { opacity: .7; cursor: wait; }
.signup-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 8px; }
.wl-preview-note { text-align: center; color: #b9abbf; font-size: 10px; margin-top: 5px; }
.wl-preview-note > span { color: #d1bfd8; border-right: 1px solid #73617d; padding-right: 7px; margin-right: 4px; }
.form-status { margin-top: 9px; font-size: 14px; color: var(--mint); text-align: center; }
.form-status:empty { display: none; }
.signup-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.wl-form[data-state="error"] .form-status { color: #ffb0a8; }
.wl-form input[aria-invalid="true"] { border-color: #ffb0a8; }
footer { max-width: 690px; margin: 23px auto 0; padding: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font: 10px/1.5 var(--mono); }
footer nav { display: flex; gap: 22px; }
footer a { color: inherit; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; text-decoration: none; }
footer a:hover { color: var(--amber); }
.motion-note { font-size: 12px; text-align: center; margin-top: 12px; color: var(--muted); }
@media (min-width: 1000px) and (min-height: 850px) { .brand { padding-top: 30px; padding-bottom: 18px; } h1 { padding-bottom: 28px; } .monitor-stage { margin-bottom: 19px; } footer { margin-top: 30px; } }
@media (min-width: 701px) and (max-height: 800px) { .brand { padding-top: 17px; padding-bottom: 10px; } h1 { font-size: 40px; padding-bottom: 18px; } .monitor-stage { width: min(100%, 650px); } }
@media (max-width: 700px) {
  .brand { padding-top: 26px; }
  main { padding-inline: 20px; }
  h1 { font-size: clamp(30px, 7.5vw, 42px); padding: 13px 0 23px; }
  .invitation { grid-row: 2; margin-bottom: 31px; max-width: 450px; }
  .support { max-width: 340px; margin: auto; }
  .launch { margin-top: 7px; }
  .wl-form { margin-top: 21px; }
  .wl-form label { font-size: 13px; margin-bottom: 7px; }
  .form-row { flex-wrap: wrap; }
  .wl-form input { flex-basis: 180px; }
  .signup-button { flex-grow: 1; }
  .signup-note, .wl-preview-note { font-size: 11px; }
  .monitor { padding: 18px 15px 0; border-radius: 22px; }
  .screen-surround { padding: 6px 7px 8px; border-radius: 13px 13px 18px 18px; }
  .screen { aspect-ratio: 900/490; border-radius: 8px 8px 15px 15px; }
  .screen-ui { top: 9px; left: 12px; right: 12px; font-size: 9px; }
  .screen-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .monitor-chin { flex-wrap: wrap; gap: 4px; padding-top: 7px; padding-bottom: 11px; }
  .hardware-brand small { display: none; }
  .hardware-brand > span { font-size: 13px; }
  .monitor-controls { gap: 6px; }
  .task-button { min-width: 0; padding-inline: 8px; font-size: 10px; min-height: 44px; }
  .task-button span { display: none; }
  .pause-button { width: 44px; height: 44px; }
  .power { margin: 0 2px; width: 5px; height: 5px; }
  .monitor-foot { height: 17px; }
  footer { padding: 0 20px 18px; margin-top: 20px; font-size: 10px; }
  footer nav { gap: 15px; }
  footer a { min-height: 44px; }
}
@media (max-width: 360px) { .monitor-chin { justify-content: center; } .hardware-brand { display: none; } footer { flex-wrap: wrap; justify-content: center; gap: 0 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.signup-fields { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 10px; }
.signup-submit { width: 100%; margin-top: 10px; }
@media (max-width: 420px) { .signup-fields { grid-template-columns: 1fr; gap: 12px; } }