@font-face{font-family:Manrope;src:url('/brand/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Newsreader;src:url('/brand/newsreader-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:Newsreader;src:url('/brand/newsreader-italic-variable.ttf') format('truetype');font-weight:200 800;font-style:italic;font-display:swap}
:root{--ink:#181646;--panel:#fffdfb;--muted:#726f9b;--lilac:#dfd6ff;--line:#ccc2f2;--link:#704a39;font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--panel);font-synthesis:none}*{box-sizing:border-box}body{margin:0}.account-layout{display:grid;grid-template-columns:42.5% 57.5%;min-height:100svh}.welcome{background:var(--ink);color:var(--panel);padding:64px;display:flex;flex-direction:column;align-items:flex-start;gap:18px;overflow:hidden}.brand{height:74px;display:flex;align-items:flex-start;gap:12.35px;text-decoration:none;flex:none}.brand-symbol{position:relative;width:54.3px;height:54.3px;display:block}.brand-symbol img{position:absolute;inset:0;width:100%;height:100%}.brand-overlay{mix-blend-mode:multiply}.wordmark{width:138.55px;height:29.79px;margin-top:12.76px}.welcome h1{font:400 60px/70px Newsreader,Georgia,serif;letter-spacing:-1px;margin:0;white-space:nowrap}.welcome h1 em{font-weight:400;line-height:65px;color:var(--lilac)}.welcome>p{font-size:16px;font-weight:500;line-height:26px;max-width:480px;min-height:80px;margin:0;color:var(--lilac)}.otto{display:block;width:460px;height:439px;max-width:100%;object-fit:contain;object-position:left center}.form-column{padding:clamp(100px,13.2vw,212px) 80px 80px;display:flex;align-items:flex-start;justify-content:center}.card{width:520px;max-width:100%}h2{font:400 44px/50px Newsreader,Georgia,serif;letter-spacing:-1px;margin:0 0 24px}#description{font-size:16px;font-weight:500;line-height:26px;color:var(--muted);margin:0 0 24px}label{display:block;font-size:14px;font-weight:600;line-height:21px;margin-top:24px}input,select{display:block;width:100%;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);padding:16px;margin-top:12px;font:500 15px/22.5px Manrope,system-ui,sans-serif}input::placeholder{color:var(--muted)}button,.button{display:block;width:100%;min-height:50px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--panel);padding:13px 18px;margin-top:24px;font:600 14px/21px Manrope,system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer}.secondary{background:transparent;border-color:var(--line);color:var(--ink)}button:disabled{opacity:.55;cursor:wait}.small{font-size:13px;line-height:22px;color:var(--muted);margin:24px 0 0}#notice:empty{display:none}#notice{font-size:14px;line-height:22px;background:#f8f2ff;border-radius:12px;padding:16px;margin:0 0 24px;overflow-wrap:anywhere}.statusbox{background:#f8f2ff;padding:20px;border-radius:12px;line-height:1.6;margin:24px 0}.statusbox p{font-size:14px}code{display:block;background:#f8f2ff;overflow-wrap:anywhere;padding:16px;margin-top:16px;line-height:1.5}a{color:var(--link)}:focus-visible{outline:3px solid #9e8bda;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:761px) and (max-width:1599px){.welcome{padding:40px;gap:18px}.welcome h1{font-size:clamp(30px,3.75vw,60px);line-height:1.16}.welcome h1 em{line-height:1.1}.welcome>p{font-size:14px;line-height:24px}.form-column{padding:clamp(100px,13.2vw,212px) 48px 64px}.otto{height:auto;aspect-ratio:460/439}.brand{height:64px}}
@media(max-width:760px){.account-layout{grid-template-columns:1fr}.welcome{padding:28px 24px;gap:14px}.brand{height:54px;transform:scale(.8);transform-origin:left top}.welcome h1{font-size:36px;line-height:40px;white-space:normal}.welcome h1 em{line-height:40px}.welcome>p{font-size:14px;line-height:22px;min-height:0}.otto{display:none}.form-column{padding:36px 24px 48px;align-items:flex-start}.card{width:100%}h2{font-size:36px;line-height:42px}#description{font-size:15px;line-height:24px}}

/* Shared website typography and action tokens: sumtale-website-v3/typography.css, button-type.css. */
:root{--font-heading:"Newsreader",Georgia,serif;--font-body:"Manrope",system-ui,sans-serif;--weight-heading:400;--weight-body:500;--weight-control:600;--button-font-size:14px;--button-line-height:21px}
html{font-synthesis:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-body);font-weight:var(--weight-body);font-optical-sizing:auto}
h1,h2{font-family:var(--font-heading);font-weight:var(--weight-heading);font-optical-sizing:auto}
p{font-family:var(--font-body);font-weight:var(--weight-body)}
button,.button{font-family:var(--font-body);font-size:var(--button-font-size);font-weight:var(--weight-control);line-height:var(--button-line-height);font-style:normal;letter-spacing:normal;transition:background-color .2s,color .2s}
@media(hover:hover){button:not(:disabled):hover,.button:hover{background:#46406f;color:#fffdfb}.secondary:not(:disabled):hover{background:#dfd6ff;color:#181646}}
@media(prefers-reduced-motion:reduce){button,.button{transition:none}}

/* Match the website's grayscale font smoothing, including form controls. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,button,input,select,textarea{-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit}

/* Centre both login columns within the available screen height. */
@media(min-width:761px){
 .welcome{justify-content:center}
 .form-column{align-items:center;padding-top:64px;padding-bottom:64px}
}