@font-face { font-family:"Manrope"; src:url("/assets/fonts/manrope-variable.ttf") format("truetype"); font-style:normal; font-weight:200 800; font-display:swap; }
:root { color-scheme:light; font-family:Arial,Helvetica,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; }
body { height:100dvh; padding:3dvh 7.5vw; background:radial-gradient(ellipse at 48% 112%,#302075 0,transparent 59%),#0c0e11; color:#080808; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.6; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #7461ff; outline-offset:3px; }
[hidden] { display:none !important; }
.login-shell { width:100%; height:100%; min-height:0; display:grid; grid-template-columns:54.2% 45.8%; border-radius:40px; overflow:hidden; isolation:isolate; }
/* One accent per category; all titles, ambient light and progress use the same tokens. */
.showcase { position:relative; min-width:0; min-height:0; z-index:2; display:flex; flex-direction:column; padding:clamp(20px,5dvh,54px) 7% clamp(16px,4dvh,42px); gap:clamp(16px,3dvh,32px); --showcase-tint:#ff9b4a; --showcase-rgb:255,155,74; background:radial-gradient(ellipse at 75% 60%,rgba(var(--showcase-rgb),.13),transparent 68%),#100c10; }
.showcase[data-theme="printing"] { --showcase-tint:#ff9b4a; --showcase-rgb:255,155,74; }
.showcase[data-theme="gaming"] { --showcase-tint:#ffe16b; --showcase-rgb:255,225,107; }
.showcase[data-theme="film"] { --showcase-tint:#ff5b62; --showcase-rgb:255,91,98; }
.showcase[data-theme="design"] { --showcase-tint:#67e8a2; --showcase-rgb:103,232,162; }
.showcase[data-theme="commerce"] { --showcase-tint:#6baeff; --showcase-rgb:107,174,255; }
.showcase[data-theme="xr"] { --showcase-tint:#be8bff; --showcase-rgb:190,139,255; }
.showcase[data-theme="other"] { --showcase-tint:#5ce3ef; --showcase-rgb:92,227,239; }
.showcase-copy { position:relative; z-index:4; flex:none; pointer-events:none; }
.welcome { color:#f5f5f5; font-size:clamp(26px,3.65vw,62px); line-height:1.12; font-weight:750; letter-spacing:-1.5px; white-space:nowrap; pointer-events:auto; font-family:"Manrope",system-ui,sans-serif; display:inline-flex; align-items:baseline; gap:.24em; }
 .welcome .welcome-intro { color:#f6f4f0; font-weight:500; letter-spacing:-.055em; }
.welcome .welcome-name { color:var(--showcase-tint); font-weight:800; letter-spacing:-.055em; text-shadow:0 0 6px rgba(var(--showcase-rgb),.3),0 0 24px rgba(var(--showcase-rgb),.45),0 0 54px rgba(var(--showcase-rgb),.2); transition:color .5s ease,text-shadow .5s ease; }
.showcase-copy p { font-size:clamp(18px,2.1vw,32px); line-height:1.35; color:#fff6; margin:clamp(12px,2dvh,24px) 0 0; letter-spacing:-.5px; }
.showcase-art { position:absolute; z-index:3; inset:0 -10% 0 19%; pointer-events:none; }
.showcase-art img,.showcase-placeholder { display:block; height:100%; width:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(16px 18px 14px #0004); }
.showcase-placeholder { opacity:.9; }
.showcase-categories { position:relative; z-index:5; flex:1; min-height:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:clamp(5px,1.35dvh,12px); }
.showcase-category { display:flex; flex:none; align-items:center; gap:7px; height:clamp(28px,4.8dvh,42px); padding:0 16px; border:0; border-radius:99px; background:#ffffff08; color:#ffffff65; font-size:13px; font-weight:600; transition:color .2s,background .2s; }
.showcase-category svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.showcase-category:hover,.showcase-category[aria-pressed="true"] { color:#fff; background:#ffffff20; }
.login-panel { position:relative; z-index:1; background:#fff; min-height:0; min-width:0; padding:clamp(20px,9dvh,80px) clamp(24px,4vw,64px) clamp(20px,9dvh,80px); display:flex; flex-direction:column; align-items:center; text-align:center; }
.login-panel h1 { position:relative; z-index:4; margin:0; font-size:clamp(20px,1.9vw,28px); line-height:1.3; font-weight:750; letter-spacing:-.7px; }
.login-methods { position:relative; z-index:4; width:100%; max-width:360px; margin-top:clamp(24px,8dvh,76px); }
.google-button,.email-button { width:100%; min-height:44px; height:clamp(44px,6.8dvh,56px); display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #dadce0; border-radius:999px; background:white; color:#3c4043; font-size:15px; font-weight:500; transition:background .15s,box-shadow .15s; }
.google-button:hover:not(:disabled) { background:#f8faff; box-shadow:0 1px 3px #3c404326; }
.google-button svg { width:21px; height:21px; flex:none; }
.email-button { background:#e8e8e8; border-color:transparent; color:#080808; font-weight:650; }
.email-button:hover:not(:disabled) { background:#ddd; }
.email-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.method-divider { color:#99999f; font-size:14px; margin:clamp(14px,2.4dvh,24px) 0; }
.auth-message { color:#655777; background:#f4f1fa; border-radius:12px; padding:10px 14px; font-size:13px; line-height:1.5; margin-top:14px; overflow-wrap:anywhere; }
.login-terms { position:relative; z-index:4; font-size:13px; line-height:1.6; margin:auto 0 0; padding-top:20px; max-width:380px; }
.login-terms a,.text-button { color:#6650ff; }
.login-terms a:hover { text-decoration:underline; }
.mobile-brand { display:none; }
.back-button { position:absolute; z-index:4; top:24px; left:24px; background:transparent; border:0; font-size:28px; width:36px; height:36px; }
.field-label { display:block; text-align:left; font-size:13px; margin:0 0 8px; color:#555; }
.auth-input { display:block; width:100%; height:48px; padding:12px 16px; border:1px solid #dedee3; border-radius:12px; background:#f7f7f8; color:#171717; font-size:16px; margin-bottom:20px; }
.code-input { text-align:center; letter-spacing:8px; font-size:22px; }
.code-description { font-size:13px; line-height:1.5; color:#777; margin:0 0 18px; overflow-wrap:anywhere; }
.text-button { background:none; border:0; padding:12px; font-size:13px; }
@media(max-width:1100px) { body { padding-inline:4vw; } .welcome { font-size:3.8vw; } .login-panel { padding-inline:30px; } .showcase-category { font-size:12px; padding-inline:12px; } }
@media(max-width:960px), (max-height:560px) { body { padding:3dvh 5vw; } .login-shell { display:flex; flex-direction:column; border-radius:28px; max-width:520px; margin:auto; } .showcase { display:none; } .login-panel { flex:1; padding:clamp(20px,5dvh,40px) 24px clamp(20px,4dvh,32px); } .mobile-brand { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:750; margin-bottom:clamp(24px,7dvh,64px); } .login-panel h1 { font-size:clamp(20px,5vw,25px); } .login-methods { margin-top:clamp(20px,5dvh,48px); } .login-terms { font-size:12px; } }
@media(min-width:961px) and (max-height:720px) { .showcase-copy p { font-size:20px; line-height:1.25; } .showcase { padding-top:24px; gap:20px; } .showcase-category { height:30px; } .showcase-categories { gap:8px; } }
@media(max-height:560px) { .mobile-brand { display:none; } .login-shell { max-width:600px; } .login-panel { padding:14px 24px; } .login-panel h1 { font-size:20px; } .login-methods { margin-top:16px; } .google-button,.email-button { min-height:36px; height:36px; font-size:14px; } .method-divider { margin:10px 0; } .login-terms { font-size:11px; padding-top:10px; } .auth-input { height:40px; margin-bottom:12px; } .code-description { margin-bottom:10px; font-size:12px; } .auth-message { margin-top:8px; padding:7px 10px; font-size:12px; } .back-button { top:8px; left:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }
/* Keep verification usable in short landscape viewports, including an error message. */
@media(min-width:560px) and (max-height:560px) {
  #email-form,#code-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 12px; align-items:center; }
  #email-form .field-label,#code-form .field-label,.code-description,#email-resend { grid-column:1 / -1; margin:0; }
  #email-form .auth-input,#code-form .auth-input { margin:0; min-width:0; }
  #email-resend { padding:6px; }
}
/* Direct email entry shares the first screen with Google. */
body { display:grid; place-items:center; }
.login-shell { max-width:1440px; max-height:880px; }
.showcase-copy p { max-width:360px; color:#c8c2b9; font-weight:400; text-shadow:0 2px 20px #0008; }
.login-panel { padding-top:clamp(28px,8dvh,76px); padding-bottom:clamp(24px,7dvh,64px); }
.login-methods { max-width:380px; margin-top:clamp(24px,6dvh,56px); }
#email-form .email-button { background:#191919; color:#fff; }
#email-form .email-button:hover:not(:disabled) { background:#343434; }
.auth-input { border-radius:14px; background:#fafafa; }
.method-divider { display:flex; align-items:center; gap:16px; color:#aaa; font-size:13px; margin:22px 0; }
.method-divider::before,.method-divider::after { content:''; height:1px; flex:1; background:#ededed; }
@media(max-width:960px) { .login-panel { padding:clamp(24px,4dvh,40px) 26px; } .login-methods { margin-top:28px; } .mobile-brand { margin-bottom:clamp(24px,5dvh,42px); } }
@media(max-height:700px) and (max-width:960px) { .mobile-brand { display:none; } .login-panel { padding:20px 24px; } .login-methods { margin-top:20px; } .google-button,.email-button { height:44px; min-height:44px; } .method-divider { margin:16px 0; } .auth-input { margin-bottom:14px; } .login-terms { font-size:11px; padding-top:12px; } }
@media(min-width:560px) and (max-height:560px) {
  .login-panel { padding:14px 26px; }
  .login-methods { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 24px; max-width:540px; margin-top:14px; }
  #auth-options { align-self:center; }
  #auth-options .method-divider { display:none; }
  #email-form { display:block; }
  #email-form .field-label { margin-bottom:5px; }
  #email-form .auth-input { height:38px; margin-bottom:8px; }
  #email-form .email-button { height:36px; min-height:36px; }
  #code-form,.auth-message { grid-column:1 / -1; }
  .auth-message { margin-top:0; }
  .login-terms { padding-top:8px; }
}
/* Keep the panel overlap clear of form labels on narrower desktops. */
.showcase-art { right:calc(-1 * clamp(14px,3vw,44px)); }
.showcase-category { background:#00000035; backdrop-filter:blur(8px); }
@media(min-width:961px) and (max-width:1100px) { .showcase-art { right:-18px; } }
/* A single aligned category rail, with a quiet progress line for the active item. */
.showcase-categories { align-items:stretch; width:158px; max-width:100%; }
.showcase-category { position:relative; display:grid; grid-template-columns:18px minmax(0,1fr); justify-content:start; gap:10px; width:100%; padding-inline:14px; text-align:left; line-height:1.2; border:1px solid #ffffff16; border-radius:13px; overflow:hidden; color:#c8c6c3; }
.showcase-category svg { width:18px; height:18px; }
.showcase-category[aria-pressed="true"] { border-color:#ffffff40; background:#ffffff22; }
.showcase-category[aria-pressed="true"]::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--showcase-tint); transform:scaleX(0); transform-origin:left; }
.is-playing .showcase-category[aria-pressed="true"]::after { animation:category-progress 2s linear forwards; }
@keyframes category-progress { to { transform:scaleX(1); } }
.use-password { display:block; width:100%; margin-top:9px; padding:11px; }
.password-field { position:relative; }
.password-field .auth-input { padding-right:68px; }
.password-toggle { position:absolute; right:10px; top:7px; height:34px; padding:0 7px; border:0; border-radius:7px; background:transparent; color:#777; font-size:12px; }
#password-form .email-button,#set-password-form .email-button,#reset-form .email-button { background:#191919; color:white; }
@media(min-width:560px) and (max-height:560px) {
  .use-password { grid-column:1 / -1; margin-top:0; padding:4px; }
  #password-form,#reset-form,#set-password-form { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 12px; align-items:center; }
  #password-form .field-label { display:none; }
  #password-form .auth-input,#set-password-form .auth-input,#reset-form .auth-input { margin:0; height:40px; }
  #password-form .text-button,#set-password-form .text-button { padding:7px; }
  #reset-form .code-description,#reset-form .field-label,#set-password-form .code-description { grid-column:1 / -1; margin:0; }
  #set-password-form .field-label { display:none; }
  #set-password-form .email-button { grid-column:1; }
  #set-password-form .text-button { grid-column:2; }
}
@media(prefers-reduced-motion:reduce) { .is-playing .showcase-category[aria-pressed="true"]::after { animation:none; } }
@media(max-width:960px) and (max-height:700px) {
  .login-panel[data-view="set-password"] .login-methods { margin-top:14px; }
  #set-password-form .auth-input { height:42px; margin-bottom:10px; }
  #set-password-form .field-label { margin-bottom:6px; }
  #set-password-form .code-description { font-size:12px; line-height:1.4; margin-bottom:12px; }
  #set-password-form .text-button { padding:8px; }
  .login-panel:has(.auth-message:not([hidden])) .login-methods { margin-top:12px; }
  .login-panel:has(.auth-message:not([hidden])) .method-divider { margin:10px 0; }
  .login-panel:has(.auth-message:not([hidden])) .use-password { margin-top:4px; padding:6px; }
  .auth-message { padding:8px 10px; font-size:12px; line-height:1.4; margin-top:8px; }
}

/* Compact modal sizing and a little more depth across the panel seam. */
.login-shell { max-width:1360px; max-height:800px; }
.login-panel h1 { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-weight:900; font-size:clamp(18px,1.7vw,24px); letter-spacing:-.8px; text-wrap:balance; }
.showcase-art { right:calc(-1 * clamp(24px,4.2vw,64px)); }
.login-methods { max-width:360px; }
@media(min-width:961px) and (max-width:1100px) { .showcase-art { right:-34px; } .login-panel { padding-inline:36px; } }
@media(max-width:960px) { .login-shell { max-width:500px; max-height:820px; } .login-panel h1 { font-size:clamp(19px,5.5vw,25px); } }
@media(min-width:560px) and (max-height:560px) { .login-shell { max-width:680px; } }

.showcase-category[aria-pressed="true"] { border-color:rgba(var(--showcase-rgb),.4); background:rgba(var(--showcase-rgb),.1); box-shadow:inset 0 0 18px rgba(var(--showcase-rgb),.07); }

/* Desktop: the card always fills the window (no fixed pixel cap), so the 3D artwork keeps its size and stays fully visible at any browser zoom. */
@media(min-width:961px) and (min-height:561px) {
  .login-shell { max-width:none; max-height:none; width:100%; height:100%; }
  .showcase-art { inset:0 calc(-1 * clamp(24px,4.2vw,64px)) 0 19%; }
  .showcase-art img { object-position:center center; }
}