:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#101126;background:#faf9ff;--purple:#7833ff;--muted:#677092}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 37% 62%,#dfceff9c,transparent 55%),linear-gradient(120deg,#faf9ff,#f5f3ff 70%,#fff)}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a673ff;outline-offset:4px}.welcome-header{direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px max(5vw,24px);border-bottom:1px solid #ded9ed99;background:#ffffff8c}.brand{display:block;flex:none}.official-logo{width:200px;height:auto;display:block}.header-tools{display:flex;align-items:center;gap:24px}.login-button,.form-login,.auth-link{border:0;background:transparent;color:#762aff;font-weight:550;text-underline-offset:5px}.login-button,.form-login{text-decoration:underline}.login-button{padding:12px 0}#languageChoice{border:1px solid #ddd6ef;border-radius:10px;background:#ffffffb0;color:#677092;padding:9px;max-width:125px;font-size:13px}.welcome{max-width:1500px;margin:auto;min-height:calc(100svh - 165px);display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,420px);grid-template-rows:auto 1fr;column-gap:28px;padding:65px max(5vw,24px) 38px;position:relative}.welcome-copy{grid-column:1;grid-row:1;z-index:1;pointer-events:none;padding-top:20px;max-width:510px}h1{font-size:clamp(42px,4.6vw,68px);line-height:1.03;letter-spacing:-2.5px;margin:0;font-weight:800}.intro{color:var(--muted);font-size:19px;line-height:1.5;margin:18px 0 0}.welcome-art{grid-column:1;grid-row:1 / 3;align-self:end;justify-self:end;width:min(100%,650px);margin-top:110px;margin-right:-10px;pointer-events:none}.world{display:block;width:100%;height:auto;filter:drop-shadow(0 15px 25px #996bdd25)}.registration{grid-column:2;grid-row:1 / 3;align-self:center;width:100%;padding:36px 30px 24px;background:#ffffffdc;border:1px solid #fff;border-radius:20px;box-shadow:0 16px 60px #6944a307}.dialog-heading h2{font-size:29px;line-height:1.15;letter-spacing:-1.1px;margin:0;font-weight:800}.registration-intro{color:var(--muted);font-size:17px;line-height:1.45;margin:12px 0 28px}.auth-fields{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);min-width:0}.auth-fields>*{min-width:0}.auth-fields label{font-size:14px;font-weight:550;display:block}.phone-row{display:flex;align-items:center;border:1px solid #c9cbdc;border-radius:8px;min-height:54px;background:#ffffff80;overflow:hidden}.phone-row select{width:115px;flex:none;border:0;border-right:1px solid #d8d6e2;padding:9px;background:transparent;color:#20223c;font-size:14px;text-overflow:ellipsis}.phone-row input{width:0;flex:1;min-width:0;border:0;padding:14px 12px;background:transparent;font-size:16px;color:#20223c}.phone-row input::placeholder{color:#7e839e}.auth-note{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.pill-button{min-height:52px;border:1px solid #ddd4eb;border-radius:9px;padding:13px 17px;background:#f6f1ff;color:#7543af;font-weight:650}.pill-button.primary{color:white;border:0;background:linear-gradient(165deg,#b167ff 0,#8a3bff 42%,#6828ff 100%);box-shadow:0 5px 14px #7934fa2b;transition:transform .18s,box-shadow .18s}.pill-button.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px #7934fa42}.privacy-note{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;margin:19px 0}.privacy-note svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}.auth-link{font-size:12px;padding:5px 0;line-height:1.5;text-align:start}.form-login{width:100%;padding:20px 8px 0;margin-top:18px;border-top:1px solid #dedeea;font-size:14px}.form-control{width:100%;display:block;min-height:50px;border:1px solid #cecade;border-radius:8px;padding:12px;margin-top:8px;background:#fff;font-size:16px}.auth-error,#welcomeStatus{font-size:13px;color:#ac294c;line-height:1.5;overflow-wrap:anywhere}.auth-error:empty,#welcomeStatus:empty{display:none}#sheetBody{min-width:0}#recaptchaContainer{direction:ltr;max-width:100%;min-width:0}#recaptchaContainer:empty{display:none}.welcome-footer{display:flex;align-items:center;gap:18px;border-top:1px solid #ded9ed99;background:#ffffff70;padding:18px max(5vw,24px);font-size:12px;color:var(--muted)}.welcome-footer img{width:110px;height:auto}.welcome-footer span{border-inline-start:1px solid #ccc7dd;padding-inline-start:18px}html[dir=rtl] .welcome-copy{text-align:right}.registration[data-screen=code] .registration-intro,.registration[data-screen=profile] .registration-intro,.registration[data-screen=recovery] .registration-intro{display:none}.registration[data-screen=code] .dialog-heading,.registration[data-screen=profile] .dialog-heading,.registration[data-screen=recovery] .dialog-heading{margin-bottom:24px}
@media(min-width:1100px){.welcome-art{width:85%;margin-top:105px}.welcome-copy{max-width:470px}}
@media(max-width:900px){.welcome{column-gap:20px;padding:42px 28px 30px;grid-template-columns:minmax(0,1fr) minmax(320px,360px)}h1{font-size:44px}.intro{font-size:16px}.welcome-art{margin-top:170px;margin-right:0}.registration{padding:28px 23px}.dialog-heading h2{font-size:26px}.welcome-header{padding:20px 28px}.official-logo{width:185px}}
@media(max-width:700px){.welcome-header{border:0;padding:18px 22px 5px;background:transparent;gap:12px}.official-logo{width:168px}.header-tools{gap:0}#languageChoice{max-width:99px;font-size:12px;padding:7px}.login-button{display:none}.welcome{display:flex;flex-direction:column;gap:0;min-height:0;max-width:460px;padding:0 24px 28px}.welcome-copy{display:none}.welcome-art{width:100%;max-width:330px;margin:0 auto;align-self:center}.registration{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.dialog-heading h2{font-size:34px;max-width:300px;letter-spacing:-1.2px;line-height:1.08}.registration-intro{font-size:17px;margin:8px 0 24px}.auth-fields{gap:11px}.form-login{margin-top:14px}.welcome-footer{display:none}.privacy-note{margin:16px 0}.auth-note{font-size:11px}.phone-row select{width:106px}.registration[data-screen=code],.registration[data-screen=profile]{padding-top:14px}}
@media(max-width:360px){.welcome{padding-inline:18px}.welcome-header{padding-inline:18px}.official-logo{width:149px}#languageChoice{max-width:90px}.dialog-heading h2{font-size:30px}#recaptchaContainer{zoom:.88}.welcome-art{max-width:270px}}
@media(prefers-reduced-motion:reduce){.pill-button.primary{transition:none}}
@media(min-width:1000px){.welcome{grid-template-rows:minmax(0,1fr);height:calc(100svh - 183px);min-height:660px;padding-top:40px;padding-bottom:30px}.welcome-copy{position:absolute;top:65px;inset-inline-start:5vw;max-width:560px;padding:0}.welcome-copy h1{font-size:64px;max-width:560px}.welcome-art{grid-row:1;width:min(88%,580px);margin:110px -5px 0 0;align-self:end}.registration{grid-row:1}}
.phone-row{position:relative}.country-flag{display:block;width:22px;height:16px;flex:none;margin-left:12px;object-fit:contain;background:transparent;border-radius:2px}.phone-row select{width:79px;padding-left:5px}.pill-button.primary{position:relative;padding-inline:28px}.pill-button.primary::after{content:'→';position:absolute;right:15px;font-size:21px;top:50%;transform:translateY(-50%)}html[dir=rtl] .pill-button.primary::after{right:auto;left:15px;content:'←'}



/* Approved homepage refinement: original artwork, lighter type, compact header actions. */
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope-variable.woff2') format('woff2'),url('/assets/fonts/Manrope-variable.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:optional}
:root{font-family:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;font-weight:400}
h1,.dialog-heading h2{font-weight:500;letter-spacing:-.045em}
.pill-button,.auth-fields label,.auth-link{font-weight:500}
.header-tools{gap:12px;align-items:center}
.welcome-header select#languageChoice,.welcome-header .login-button{height:40px;min-height:40px;border:1px solid #ddd6ef;border-radius:8px;background-color:#ffffffb0;font-size:13px;font-weight:400;line-height:20px}
.welcome-header select#languageChoice{width:106px;max-width:none;padding:9px 21px 9px 28px;background-size:16px 16px,10px 10px;background-position:left 8px center,right 7px center}
@supports(field-sizing:content){.welcome-header select#languageChoice{field-sizing:content;width:auto}}
.welcome-header .login-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;white-space:nowrap;color:#762aff;text-decoration:none;flex-shrink:0}
.login-button svg{width:18px;height:18px;flex:none}
.auth-link{text-decoration:none}
.auth-link:hover,.auth-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.login-button:hover{background-color:#f3edff}
.registration{padding-bottom:30px}
@media(max-width:700px){
 .welcome-header{flex-wrap:wrap;padding:16px 20px 8px;gap:12px}
 .welcome-header .brand{flex-basis:100%}
 .welcome-header .official-logo{width:168px}
 .header-tools{width:100%;justify-content:flex-end;gap:8px}
 .welcome-header select#languageChoice,.welcome-header .login-button{height:44px;min-height:44px}
 .registration{padding-bottom:0}
}
@media(max-width:360px){.welcome-header{padding-inline:18px}}

/* The country picker and number share one focus boundary; child outlines were clipped. */
.phone-row:focus-within{border-color:#a673ff;box-shadow:0 0 0 2px #a673ff33}
.phone-row input:focus,.phone-row input:focus-visible,.phone-row select:focus,.phone-row select:focus-visible{outline:none;box-shadow:none}

/* Keep full localized names in every native option, including the selected country.
   Only the closed control's decorative label shows the short calling code. */
.phone-country{position:relative;display:block;width:79px;flex:none;align-self:stretch;border:0}
.phone-country-code{position:absolute;inset:0;display:flex;align-items:center;padding-left:5px;padding-right:22px;font-size:14px;color:#20223c;pointer-events:none}
.phone-country::after{content:'';position:absolute;right:12px;top:50%;width:6px;height:6px;border-right:1.5px solid #20223c;border-bottom:1.5px solid #20223c;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.phone-row .phone-country select{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0;appearance:none;-webkit-appearance:none;color:transparent;background:transparent;opacity:0;cursor:pointer}
.phone-row .phone-country select option{color:#20223c;background:#fff}
@media(forced-colors:active){.phone-country-code{color:CanvasText}.phone-country::after{border-color:CanvasText}.phone-row .phone-country select{opacity:0}}

.welcome-footer{flex-wrap:wrap}.welcome-information{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;flex:1 0 100%;padding:8px 16px;font-size:12px;line-height:1.5}.welcome-information a{color:inherit;text-decoration:none}.welcome-information a:hover,.welcome-information a:focus-visible{text-decoration:underline;text-underline-offset:3px}

@media(max-width:700px){.welcome-footer{display:flex;border:0;background:transparent;padding:16px 12px}.welcome-footer>img,.welcome-footer>span{display:none}.welcome-information{padding:0;font-size:11px;gap:8px 14px}}

.registration[data-screen=eligibility] .registration-intro,.registration[data-screen=parental] .registration-intro{display:none}.registration[data-screen=eligibility] .dialog-heading,.registration[data-screen=parental] .dialog-heading{margin-bottom:20px}.registration[data-screen=eligibility],.registration[data-screen=parental]{align-self:center}@media(min-width:1000px){.welcome:has(.registration[data-screen=parental]){height:auto}}

/* Keep the native country picker accessible; only its compact code is painted. */
.phone-country:focus-within{outline:2px solid var(--hw-accent,#803cf2);outline-offset:-2px;border-radius:4px}

/* Compact mobile entry: artwork supports the form instead of pushing it away. */
@media(max-width:700px){
 .welcome-header{flex-wrap:nowrap;padding:12px 16px;gap:8px}
 .welcome-header .brand{flex-basis:auto;min-width:0}
 .welcome-header .official-logo{width:148px;max-width:100%}
 .welcome-header .header-tools{width:auto;flex:0 1 auto;gap:6px;flex-wrap:nowrap}
 .welcome-header .login-button{display:none}
 .welcome-header select#languageChoice{width:112px;max-width:130px;min-width:0;height:44px;font-size:12px}
 .welcome{padding:0 20px 24px}
 .welcome-art{width:min(68vw,250px);margin:0 auto 14px}
 .dialog-heading h2{font-size:30px;line-height:1.12;max-width:none}
 .registration-intro{font-size:15px;line-height:1.45;margin:10px 0 20px}
 .registration[data-screen=code],.registration[data-screen=profile]{padding-top:0}
 .welcome:has(.registration:not([data-screen=phone])) .welcome-art{width:min(48vw,180px);margin-bottom:12px}
 .welcome-footer{padding:14px 16px 20px}
 .welcome-footer .hw-theme-brand{display:none!important}
}
@media(max-width:360px){
 .welcome-header .official-logo{width:135px}
 .welcome-header select#languageChoice{width:108px}
 .welcome{padding-inline:18px}
 .dialog-heading h2{font-size:28px}
}

/* Match the discreet, left-aligned information footer used across Hello World. */
.welcome-footer{
  box-sizing:border-box;justify-content:flex-start;min-height:52px;
  padding:12px 28px;gap:0;font-size:10px;line-height:1.5;
  background:var(--hw-card,#fff);color:var(--hw-muted,#80758f);
  border-top:1px solid var(--hw-border,#e5deee);
}
.welcome-footer .welcome-information{
  flex:0 1 auto;justify-content:flex-start;padding:0;gap:8px 20px;
  font-size:10px;line-height:1.5;text-align:start;
}
@media(max-width:700px){
  .welcome-footer{padding:8px 12px;min-height:0}
  .welcome-footer .welcome-information{gap:5px 14px}
}

/* Share the logo's horizontal alignment and keep the footer at page bottom. */
body{display:flex;flex-direction:column;min-height:100svh;min-height:100dvh}
body>.welcome-header,body>.welcome-footer{flex:0 0 auto}
body>.welcome{flex:1 0 auto;width:100%;height:auto;margin:0 auto}
body>.welcome-footer{margin:0;padding-inline:max(5vw,24px)}
@media(max-width:900px){body>.welcome-footer{padding-inline:28px}}
@media(max-width:700px){body>.welcome-footer{padding-inline:16px}}

/* Desktop entry fits the viewport; short screens and mobile retain scrolling. */
@media(min-width:1000px) and (min-height:760px){
  body{height:100dvh}
  body>.welcome{flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr)}
  .welcome-art{min-height:0;max-height:100%;margin-top:0}
  .welcome-art .world{max-height:100%;object-fit:contain}
}

/* Right edge matches the centered 1500px main container and its 5vw inset. */
@media(min-width:901px){
  .welcome-header{padding-right:calc(max(0px,(100% - 1500px)/2) + 5vw)}
}

/* Requested artwork offset, without changing surrounding layout. */
.welcome-art{left:-25px;position:relative}

/* Match the artwork's requested horizontal offset. */
.welcome-copy{transform:translateX(-15px)}

/* Lift the desktop introduction and globe together. */
@media(min-width:1000px){
  .welcome-art{top:-20px}
  .welcome-copy{transform:translate(-15px,-20px)}
}

/* Public entry shortcuts share the information footer baseline. */
body>.welcome-footer{gap:8px 24px;align-items:center}
.welcome-footer .welcome-information{flex:1 1 auto}
.welcome-footer-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-left:auto;flex:0 0 auto;direction:ltr}
.welcome-footer .welcome-footer-tools #languageChoice,.welcome-footer .welcome-footer-tools .login-button{display:inline-flex;align-items:center;gap:5px;min-height:32px;height:32px;margin:0;padding:5px 0;border:0;border-radius:4px;background:transparent!important;box-shadow:none;color:var(--hw-muted,#80758f)!important;font-family:inherit;font-size:10px;font-weight:400;line-height:1.5;text-decoration:none;white-space:nowrap}
.welcome-footer .welcome-footer-tools #languageChoice{width:auto;max-width:140px;padding-inline:4px;cursor:pointer}
.welcome-footer .welcome-footer-tools .login-button svg{width:13px;height:13px}
.welcome-footer .welcome-footer-tools .login-button span{border:0;padding:0}
.welcome-footer .welcome-footer-tools .login-button:hover{color:var(--hw-accent,#7833ff)!important}
@media(max-width:700px){.welcome-footer .welcome-information{flex-basis:100%}.welcome-footer-tools{margin-left:auto}.welcome-footer .welcome-footer-tools #languageChoice,.welcome-footer .welcome-footer-tools .login-button{min-height:36px;height:36px}}

/* Language stays in the footer; sign-in retains its original header position. */
.welcome-footer-tools{gap:5px;color:var(--hw-muted,#80758f)}
.welcome-language-icon{width:13px;height:13px;flex:none}

/* Same desktop right edge as the registration panel and sign-in button. */
@media(min-width:901px){
 body>.welcome-footer{padding-right:calc(max(0px,(100% - 1500px)/2) + 5vw)}
}

/* Switching appearance must not change the header's dimensions. */
.welcome-header .hw-theme-brand{width:200px;height:auto;aspect-ratio:2048/684}
@media(max-width:900px){.welcome-header .hw-theme-brand{width:185px}}
@media(max-width:700px){.welcome-header .hw-theme-brand{width:148px}}
@media(max-width:360px){.welcome-header .hw-theme-brand{width:135px}}