:root {
  color-scheme: dark;
  --cyan: #00aff0;
  --cyan-pale: #122c39;
  --ink: #edf5fb;
  --muted: #a0acb9;
  --line: #2c3542;
  --action: #00aff0;
  background: #0e1117;
  color: #edf5fb;
}

body { background: #0e1117; color: #edf5fb; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #60d5ff; outline-offset: 4px; }
::selection { color: #061722; background: #8cddff; }
.auth-layout { grid-template-columns: minmax(0, 57%) minmax(0, 43%); width: min(1440px, 100%); margin-inline: auto; min-height: 100svh; }
.showcase-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 100svh; padding: 98px 28px 80px 46px; overflow: hidden; }
.showcase-brand { gap: 18px; margin-bottom: 18px; }
.showcase-brand .brand-mark { width: 70px; height: 78px; font-size: 64px; letter-spacing: -19px; padding-right: 15px; color: #00aff0; }
.showcase-brand .brand-mark > span { color: #a4ebff; }
.showcase-brand .wordmark { font-size: 49px; line-height: 1.15; letter-spacing: -2.5px; color: #f2f7fb; }
.showcase-brand .wordmark > span { color: #00aff0; }
.showcase-brand .wordmark small { color: #a5b9c6; font-size: 8px; letter-spacing: 2.3px; margin-top: 9px; }
.showcase-subtitle { margin: 0 0 34px; color: #a5b2bf; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; text-align: center; }
.preview-strip { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; max-width: 670px; min-height: 292px; padding: 8px 1px; }
.reel-preview { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; height: 260px; padding: 0; border: 1px solid #ffffff1a; border-radius: 16px; overflow: hidden; background: #1d2632; box-shadow: 0 15px 30px #00000026; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.reel-preview:nth-child(3) { height: 286px; }
.reel-preview.edge-reel { height: 227px; opacity: .7; }
.reel-preview::after { content: ''; position: absolute; z-index: 1; inset: 45% 0 0; background: linear-gradient(0deg, #050d17cf, #050d1700); pointer-events: none; }
.reel-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.025); transition: transform .35s ease, filter .35s ease; }
.reel-preview.edge-reel > img { filter: blur(2px); transform: scale(1.075); }
.age-locked .reel-preview > img { filter: blur(7px); transform: scale(1.12); }
.reel-preview:hover { border-color: #56cfff83; transform: translateY(-5px); box-shadow: 0 18px 35px #00000040; }
.reel-preview:active { transform: translateY(-2px); }
.reel-preview:hover > img { transform: scale(1.07); }
.age-locked .reel-preview:hover > img { transform: scale(1.14); }
.reel-play { position: absolute; z-index: 3; display: grid; place-items: center; top: 50%; left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%); border: 1px solid #ffffff85; border-radius: 50%; color: #fff; background: #0f1a2b4f; backdrop-filter: blur(8px); box-shadow: 0 2px 10px #00000020; }
.reel-play .icon, .reel-play svg { width: 15px; height: 15px; }
.reel-label { position: absolute; z-index: 3; right: 8px; bottom: 17px; left: 8px; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; line-height: 1.5; text-align: center; text-shadow: 0 1px 5px #0009; }
.reel-label strong, .reel-label small { display: block; }
.reel-label small { margin-top: 2px; color: #d9e2e9; font-size: 8px; font-weight: 400; }
.preview-disclaimer { display: block; max-width: 580px; margin-top: 16px; color: #8c9caa; font-family: 'DM Sans', sans-serif; font-size: 10px; line-height: 1.7; text-align: center; }
.showcase-caption { margin: 35px 0 0; color: #b6c2cc; font-size: 11px; font-weight: 500; letter-spacing: .5px; text-align: center; }
.showcase-caption strong { color: #eef5fa; }
.access-panel { background: transparent; min-height: 100svh; }
.access-header { min-height: 90px; padding: 27px 44px 15px 20px; }
.header-prompt { color: #a8b5c1; }
.header-prompt a, .header-prompt .professional-entry { color: #b2c0cd; font-size: 11px; }
.header-prompt a:hover, .header-prompt .professional-entry:hover { color: #61d2fb; }
.mobile-brand { display: none !important; }
.form-stage { align-items: center; padding: 40px 44px 40px 35px; }
.auth-content { max-width: 365px; }
.welcome-title { margin: 0 0 13px; color: #f3f7fb; font-size: 30px; font-weight: 700; line-height: 1.3; letter-spacing: -1.1px; text-align: center; }
.welcome-description { margin: 0 0 29px; color: #a8b6c3; font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.7; text-align: center; }
.welcome-intro .auth-eyebrow { justify-content: center; margin-bottom: 16px; font-size: 8px; letter-spacing: 1.8px; }
.entry-actions { display: grid; gap: 12px; margin-bottom: 24px; }
.entry-actions .secondary-button { margin-top: 0; }
.main-button { min-height: 49px; background: #00aff0; border-color: #00aff0; border-radius: 28px; box-shadow: none; color: #06202d; font-size: 13px; font-weight: 800; }
.main-button:hover { background: #42c8fb; border-color: #42c8fb; box-shadow: 0 4px 16px #00aff01a; }
.secondary-button { min-height: 49px; background: transparent; border-color: #3a4a5b; border-radius: 28px; color: #d3e1ec; font-size: 13px; font-weight: 600; }
.secondary-button:hover { background: #17212e; border-color: #54b8df; color: #eef8ff; }
.entry-actions .secondary-button { border-color: #008fc5; color: #61d2fb; }
.entry-actions .secondary-button:hover { background: #062b3a; border-color: #00aff0; }
.age-confirmation { display: flex; align-items: flex-start; justify-content: center; gap: 9px; margin: 21px 0 13px; color: #c0cbd5; font-family: 'DM Sans', sans-serif; font-size: 12px; line-height: 1.7; }
.age-confirmation input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #00aff0; }
.age-confirmation label { cursor: pointer; }
.entry-legal { margin: 0 auto 22px; max-width: 335px; color: #9eacba; font-family: 'DM Sans', sans-serif; font-size: 11px; line-height: 1.8; text-align: center; }
.entry-legal a, .entry-legal button { padding: 0; border: 0; color: #62c9f1; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.entry-consent { text-align: center; }
.entry-consent .entry-legal { margin-bottom: 8px; }
.underage-link { display: inline-block; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; color: #a5b5c2; font-family: 'DM Sans', sans-serif; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.underage-link:hover { color: #e0eef7; background: #1c2733; }
.social-buttons { gap: 10px; }
.social-button, .social-button.apple { height: 47px; background: #181e28; border-color: #303a47; border-radius: 25px; color: #eaf1f6; font-size: 12px; }
.social-button:hover, .social-button.apple:hover { border-color: #698394; background: #202a36; }
.social-button svg { width: 18px; height: 18px; }
.divider { color: #97a6b5; margin-block: 23px; }
.divider::before, .divider::after { background: #2a333f; }
.auth-eyebrow { color: #9daebc; }
.auth-eyebrow .icon { color: #47c9fa; }
.auth-title { color: #f0f6fa; font-size: 30px; }
.auth-description { color: #a7b6c3; }
.field-label { color: #c2cfda; }
.input-wrap { background: #151b24; border-color: #303c49; }
.input-wrap:focus-within { background: #18212c; border-color: #58c9f2; box-shadow: 0 0 0 3px #00aff014; }
.input-wrap input { color: #eef6fc; }
.input-wrap input::placeholder { color: #8da0af; }
.input-wrap > .icon, .password-toggle { color: #9aafbe; }
.password-toggle:hover { color: #62d1fb; background: #243646; }
.input-wrap input:-webkit-autofill { -webkit-text-fill-color: #edf5fc; box-shadow: 0 0 0 1000px #18212c inset; caret-color: #edf5fc; }
.checkbox-label { color: #adbdca; }
.checkbox-label input { accent-color: #00aff0; }
.text-link, .form-bottom > a, .legal-check button { color: #5bcef9; }
.text-link:hover, .form-bottom > a:hover, .legal-check button:hover { color: #a4e8ff; }
.form-bottom, .trust-note, .field-help, .password-hint, .session-choice, .loading-message { color: #9baebb; }
.password-hint.valid { color: #78d4a5; }
.field-error { color: #ffa7a7; }
.form-alert { color: #eed1a4; background: #30291e; border-color: #58462b; }
.form-alert.error { color: #ffc0c0; background: #352024; border-color: #674047; }
.form-alert.success { color: #b0e4ca; background: #183529; border-color: #365e48; }
.role-options legend { color: #b5c8d6; }
.role-choice { background: #151c25; border-color: #31404e; }
.role-choice strong { color: #d2e1ed; }
.role-choice small { color: #a4b4c1; }
.role-choice:has(input:checked) { background: #142d3b; border-color: #53bde8; }
.role-choice .icon { color: #93afc1; }
.role-choice:has(input:checked) .icon { color: #6dd8ff; }
.back-link { color: #a6bac8; }
.back-link:hover { color: #67d2fc; }
.status-symbol { color: #64d5ff; background: #122c3b; border-color: #295069; }
.account-details { background: #161e28; border-color: #303e4c; }
.account-details dt { color: #a4b6c5; }
.account-details dd, .inline-code-email { color: #d2e5f2; }
.account-note { color: #a8bdca; }
.access-footer { padding: 18px 22px 29px; }
.footer-links { color: #a5b4c0; font-size: 10px; gap: 20px; }
.footer-links button:hover { color: #6dd8ff; }
.access-footer > p { color: #9ba9b5; }
.preview-status { color: #96a8b6; font-size: 7px; }
.preview-status > span { background: #6fb5cf; }
dialog { color: #edf5fb; background: #151c26; border-color: #354352; box-shadow: 0 24px 100px #0008; }
dialog::backdrop { background: #02060cbf; backdrop-filter: blur(7px); }
dialog h2 { color: #edf5fb; }
dialog p { color: #b3c5d2; }
dialog .eyebrow { color: #60d3ff; }
.dialog-close { color: #adbecc; }
.dialog-close:hover { background: #2b3c4d; color: #fff; }
.preview-dialog { width: min(850px, calc(100vw - 36px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 30px; border-radius: 17px; }
.preview-dialog video { display: block; width: 100%; max-height: min(65dvh, 600px); object-fit: contain; margin: 18px 0 0; border: 1px solid #2b3b4a; border-radius: 11px; background: #03070b; }
.preview-modal-title { margin: 3px 40px 9px 0; color: #edf5fb; font-size: 21px; letter-spacing: -.6px; line-height: 1.4; }
.preview-dialog p { margin-bottom: 0; font-size: 12px; }
.boot-splash { position: fixed; z-index: 1000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: #edf5fb; background: #0e1117; opacity: 1; transition: opacity .3s ease, visibility .3s; }
.boot-splash.is-hidden, .boot-splash.hidden, .boot-splash.leaving, .boot-splash.finished { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 110px; color: #00aff0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 91px; line-height: 1; font-weight: 800; letter-spacing: -27px; padding-right: 21px; }
.splash-mark > span { color: #a4ebff; }
.splash-name { margin-top: 16px; color: #edf5fb; font-size: 24px; font-weight: 800; letter-spacing: -.8px; }
.splash-name > span { color: #00aff0; }
.splash-line { width: 84px; height: 2px; margin-top: 29px; overflow: hidden; border-radius: 2px; background: #273a48; }
.splash-line::after { content: ''; display: block; width: 38px; height: 100%; background: #00aff0; animation: splash-load .75s ease-in-out infinite; }
@keyframes splash-load { from { transform: translateX(-38px); } to { transform: translateX(84px); } }

@media (min-width: 1600px) {
  .form-stage { padding-right: 44px; }
  .showcase-panel { padding-left: 46px; }
}
@media (max-width: 1100px) {
  .auth-layout { grid-template-columns: minmax(0, 54%) minmax(0, 46%); }
  .showcase-panel { padding-inline: 25px 18px; }
  .showcase-brand { gap: 13px; }
  .showcase-brand .wordmark { font-size: 42px; letter-spacing: -2px; }
  .showcase-brand .brand-mark { width: 60px; height: 67px; font-size: 55px; letter-spacing: -16px; padding-right: 13px; }
  .showcase-subtitle { font-size: 13px; margin-bottom: 26px; }
  .preview-strip { gap: 8px; min-height: 265px; }
  .reel-preview { height: 231px; border-radius: 12px; }
  .reel-preview:nth-child(3) { height: 255px; }
  .reel-preview.edge-reel { height: 205px; }
  .reel-label { font-size: 9px; bottom: 13px; }
  .reel-label small { font-size: 7px; }
  .preview-disclaimer { font-size: 9px; max-width: 360px; }
  .form-stage { padding: 36px 30px 38px 22px; }
  .access-header { padding-right: 30px; }
  .welcome-title { font-size: 27px; }
  .welcome-description { font-size: 13px; }
  .showcase-caption { font-size: 10px; margin-top: 28px; }
  .footer-links { gap: 15px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .showcase-panel { padding-left: 19px; padding-right: 13px; }
  .showcase-brand .wordmark { font-size: 37px; letter-spacing: -1.8px; }
  .showcase-brand .brand-mark { width: 53px; height: 61px; font-size: 49px; letter-spacing: -15px; padding-right: 12px; }
  .showcase-brand .wordmark small { font-size: 7px; letter-spacing: 1.6px; }
  .showcase-subtitle { max-width: 290px; font-size: 12px; }
  .preview-strip { min-height: 226px; gap: 7px; }
  .reel-preview { height: 205px; border-radius: 11px; }
  .reel-preview:nth-child(3) { height: 225px; }
  .reel-preview.edge-reel { height: 182px; }
  .reel-play { width: 30px; height: 30px; }
  .reel-play svg, .reel-play .icon { width: 13px; height: 13px; }
  .reel-label { font-size: 8px; left: 5px; right: 5px; }
  .form-stage { padding-left: 18px; padding-right: 24px; }
  .welcome-title { font-size: 25px; }
  .welcome-description { font-size: 12px; }
  .age-confirmation { font-size: 11px; }
  .entry-legal { font-size: 10px; }
  .access-footer { padding-inline: 15px; }
  .footer-links { gap: 13px; font-size: 9px; }
}
@media (max-width: 760px) {
  .auth-layout { display: block; min-height: 100svh; }
  .showcase-panel { min-height: 0; padding: 76px 24px 0; }
  .showcase-brand { margin-bottom: 10px; gap: 11px; }
  .showcase-brand .wordmark { font-size: 38px; letter-spacing: -1.8px; }
  .showcase-brand .brand-mark { width: 55px; height: 61px; font-size: 50px; letter-spacing: -15px; padding-right: 12px; }
  .showcase-brand .wordmark small { font-size: 7px; letter-spacing: 1.7px; margin-top: 7px; }
  .showcase-subtitle { margin: 0 0 18px; max-width: 360px; font-size: 12px; }
  .preview-strip { max-width: 440px; min-height: 180px; gap: 8px; padding: 4px 0; }
  .reel-preview { height: 163px; border-radius: 11px; }
  .reel-preview:nth-child(3) { height: 180px; }
  .reel-preview.edge-reel { height: 144px; }
  .reel-play { width: 28px; height: 28px; }
  .reel-play svg, .reel-play .icon { width: 12px; height: 12px; }
  .reel-label { font-size: 8px; bottom: 10px; left: 5px; right: 5px; }
  .reel-label small { display: none; }
  .preview-disclaimer { margin-top: 10px; font-size: 8px; max-width: 350px; }
  .showcase-caption { margin: 18px 0 0; font-size: 10px; }
  .access-panel { min-height: 0; }
  .access-header { position: absolute; top: 0; right: 0; min-height: 54px; padding: 17px 24px 0; justify-content: flex-end; }
  .header-prompt { font-size: 0; }
  .header-prompt a, .header-prompt .professional-entry { font-size: 10px; color: #aebdca; }
  .form-stage { padding: 35px 26px 25px; align-items: flex-start; scroll-margin-top: 24px; }
  .auth-content { max-width: 400px; }
  .welcome-title { font-size: 26px; margin-bottom: 9px; }
  .welcome-description { font-size: 13px; margin-bottom: 23px; }
  .entry-actions { gap: 10px; margin-bottom: 20px; }
  .entry-actions .main-button, .entry-actions .secondary-button { min-height: 47px; }
  .age-confirmation { margin-top: 18px; font-size: 12px; }
  .entry-legal { margin-bottom: 18px; font-size: 11px; }
  .social-buttons { gap: 9px; }
  .social-button, .social-button.apple { min-height: 47px; height: 47px; font-size: 12px; }
  .auth-title { font-size: 28px; }
  .auth-description { font-size: 14px; }
  .input-wrap input { font-size: 16px; }
  .access-footer { padding: 14px 22px 30px; }
  .footer-links { font-size: 10px; gap: 20px; }
  .preview-status { font-size: 7px; }
  .preview-dialog { width: calc(100vw - 26px); padding: 25px 17px 20px; }
  .preview-dialog video { max-height: 65dvh; }
  .preview-modal-title { font-size: 19px; }
}
@media (max-width: 380px) {
  .showcase-panel { padding: 70px 18px 0; }
  .showcase-brand .wordmark { font-size: 33px; }
  .showcase-brand .brand-mark { width: 48px; height: 55px; font-size: 44px; letter-spacing: -13px; padding-right: 10px; }
  .showcase-subtitle { font-size: 11px; }
  .preview-strip { gap: 6px; min-height: 157px; }
  .reel-preview { height: 143px; border-radius: 9px; }
  .reel-preview:nth-child(3) { height: 156px; }
  .reel-preview.edge-reel { height: 126px; }
  .reel-label { font-size: 7px; }
  .reel-play { width: 25px; height: 25px; }
  .form-stage { padding: 30px 21px 24px; }
  .welcome-title { font-size: 24px; }
  .access-header { padding-right: 20px; }
  .footer-links { gap: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-splash { transition: none; }
  .splash-line::after { animation: none; transform: translateX(23px); }
  .reel-preview, .reel-preview > img { transition: none; }
}

.welcome-intro .auth-eyebrow{justify-content:center}.underage-link{display:block;margin:-10px auto 8px;padding:5px 8px;color:#a8b7c4;background:none;border:0;font-family:'DM Sans',sans-serif;font-size:10px;text-decoration:underline;text-underline-offset:3px}.underage-link:hover{color:#e0f2ff}.preview-dialog video{max-width:430px;margin-inline:auto}.preview-dialog{width:min(520px,calc(100vw - 30px))}.entry-consent{padding-top:4px;border-top:1px solid #2b3440}.footer-links{gap:15px}.boot-splash{animation:boot-fallback 0s 4s forwards}@keyframes boot-fallback{to{visibility:hidden;pointer-events:none}}
@media(max-width:380px){.footer-links{gap:11px;font-size:9px}.preview-disclaimer{font-size:9px}}