.ms-root{--ms-bg:#0E0E12;--ms-card:#16161C;--ms-line:rgba(255,255,255,.06);--ms-gold:#DCC88D;--ms-warm:#E8E6E1;--ms-muted:#A1A1AA;--ms-bcond:"Barlow Condensed",sans-serif;--ms-bsemi:"Barlow Semi Condensed",sans-serif;--ms-barlow:"Barlow",sans-serif;--ms-mono:"JetBrains Mono",monospace;min-height:100dvh;margin:0;background:var(--ms-bg);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
.ms-root *{box-sizing:border-box}
.back{position:fixed;top:28px;left:32px;z-index:2;color:var(--ms-muted);text-decoration:none;font-family:var(--ms-mono);font-size:9px;font-weight:500;line-height:1;letter-spacing:1.8px;text-transform:uppercase;transition:color .2s}
.back:hover{color:var(--ms-gold)}
.ms-legal{position:fixed;left:0;right:0;bottom:18px;z-index:2;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;padding:0 24px;font-family:var(--ms-mono);font-size:9px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase}.ms-legal a{color:var(--ms-muted);text-decoration:none;transition:color .2s}.ms-legal a:hover{color:var(--ms-gold)}
@media(max-height:620px){.ms-legal{position:static;padding:18px 24px 8px}}
.ms-login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative}
.ms-login:before{content:"";position:fixed;top:-20%;left:50%;transform:translate(-50%);width:680px;height:480px;background:radial-gradient(circle,rgba(220,200,141,.1),transparent 70%);pointer-events:none}
.ms-card{position:relative;width:420px;max-width:100%;background:linear-gradient(160deg,#16161b,#0c0c10);border:1px solid rgba(220,200,141,.2);border-radius:18px;box-shadow:0 30px 80px #0009;padding:40px 36px 34px;text-align:center}
.ms-card:before{content:"";position:absolute;top:-1px;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent,rgba(220,200,141,.8),transparent);box-shadow:0 0 16px 1px #dcc88d80;border-radius:2px}
.ms-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-bottom:24px;color:var(--ms-gold);text-decoration:none}
.ms-logo span{font-family:var(--ms-bcond);text-transform:uppercase;font-weight:700;letter-spacing:.08em;font-size:17px}
.ms-form h1{margin:0;font-family:var(--ms-bcond);text-transform:uppercase;font-weight:800;font-size:34px;letter-spacing:.01em;line-height:1}
.ms-sub{font-family:var(--ms-mono);text-transform:uppercase;letter-spacing:.18em;color:var(--ms-gold);font-size:11px;font-weight:500;line-height:1.5;margin-top:10px}
.intro{color:var(--ms-muted);font-size:14px;line-height:1.6;margin:18px auto 26px;max-width:300px}
#library-login{display:block}
#library-login label{display:block;text-align:left;font-family:var(--ms-bsemi);text-transform:uppercase;letter-spacing:.1em;color:var(--ms-muted);font-size:12px;font-weight:600;margin-bottom:8px}
#library-email{width:100%;background:#121217;border:1px solid var(--ms-line);border-radius:12px;padding:13px 16px;color:#e7e7ea;font-family:Inter,sans-serif;font-size:15px}
#library-email:focus{outline:none;border-color:#dcc88d73}
#library-login>button{width:100%;margin-top:16px;background:linear-gradient(180deg,#e8d9a6,#dcc88d 50%,#b8a46e);color:#0a0a0f;border:none;border-radius:12px;padding:15px;font-family:var(--ms-bcond);text-transform:uppercase;font-weight:800;letter-spacing:.06em;font-size:16px;cursor:pointer;box-shadow:0 10px 28px -8px #dcc88d80}
#library-login>button:disabled{opacity:.55;cursor:not-allowed}
.ms-err{margin-top:16px;border:1px solid rgba(248,113,113,.4);background:#f8717114;color:#fca5a5;border-radius:10px;padding:11px 14px;font-size:13px;line-height:1.5}
.ms-sent .ms-sic{width:54px;height:54px;border-radius:50%;border:1px solid rgba(220,200,141,.4);display:flex;align-items:center;justify-content:center;color:var(--ms-gold);margin:0 auto 18px}
.ms-sic svg{width:24px;stroke:currentColor;stroke-width:1.7}
.ms-sent .ms-sh{margin:0 0 10px;font-family:var(--ms-bcond);text-transform:uppercase;font-weight:800;font-size:24px;line-height:1.1}
.ms-sent .ms-st{color:var(--ms-muted);font-size:14px;line-height:1.6;max-width:300px;margin:0 auto}
.ms-sent .ms-st strong{color:var(--ms-warm);overflow-wrap:anywhere}
.ms-sent .ms-code{margin-top:14px}
.ms-sent .ms-code a{color:var(--ms-warm);text-decoration:underline;text-underline-offset:3px}
.ms-sent .ms-code a:hover{opacity:.85}
.ms-code-form{margin:22px auto 0;max-width:300px;text-align:left}
.ms-code-form label{display:block;font-family:var(--ms-bsemi);text-transform:uppercase;letter-spacing:.1em;color:var(--ms-muted);font-size:12px;font-weight:600;margin-bottom:8px}
.ms-code-row{display:flex;gap:8px}
#library-code{flex:0 0 112px;min-width:0;background:#121217;border:1px solid var(--ms-line);border-radius:12px;padding:12px 14px;color:#e7e7ea;font-family:var(--ms-mono);font-size:20px;letter-spacing:.32em;text-align:center}
#library-code::placeholder{color:#4a4a52;letter-spacing:.32em}
#library-code:focus{outline:none;border-color:#dcc88d73}
.ms-code-row button{flex:1;background:linear-gradient(180deg,#e8d9a6,#dcc88d 50%,#b8a46e);color:#0a0a0f;border:none;border-radius:12px;padding:12px;font-family:var(--ms-bcond);text-transform:uppercase;font-weight:800;letter-spacing:.06em;font-size:15px;cursor:pointer;box-shadow:0 10px 28px -8px #dcc88d80}
.ms-code-row button:disabled{opacity:.55;cursor:not-allowed}
.ms-code-form .code-error{margin-top:12px}
.ms-again{margin-top:22px;background:none;border:1px solid var(--ms-line);border-radius:10px;padding:11px 20px;color:var(--ms-muted);font-family:var(--ms-bcond);text-transform:uppercase;font-weight:600;letter-spacing:.04em;font-size:13px;cursor:pointer}
[hidden]{display:none!important}
@media(max-width:520px){.back{top:20px;left:20px}.ms-login{padding:62px 18px 18px}.ms-card{padding:34px 24px 30px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Same rule as the book site: a tap leaves no system-blue rectangle, and
   moving focus to the "Check your email" heading does not look like selected
   text. Keyboard focus still shows a visible gold ring. */
*{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
[tabindex="-1"]:focus{outline:none}
.ms-card{-webkit-user-select:none;user-select:none}
.ms-card input,.ms-sent strong{-webkit-user-select:text;user-select:text}
a:focus-visible,button:focus-visible{outline:2px solid var(--ms-gold);outline-offset:3px}