:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17324e;background:#f9fcff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,select{font:inherit}header,main,footer{max-width:1180px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:26px 30px}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:650}.brand img{border-radius:8px}nav{display:flex;align-items:center;gap:26px;font-size:14px}select{border:1px solid #c9d8e7;border-radius:8px;padding:7px;background:white;color:#17324e}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:68px;padding:85px 30px 80px;align-items:center}.eyebrow{font-size:11px;font-weight:650;letter-spacing:1.5px;color:#42779e;line-height:1.7}h1{font-size:clamp(38px,4.4vw,58px);font-weight:630;line-height:1.12;letter-spacing:-2px;margin:22px 0}p{line-height:1.7;color:#526b81}.intro{font-size:18px;max-width:480px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 10px}.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 17px;border:1px solid #d0deea;border-radius:10px;background:white;color:#1b496e;font-weight:550;font-size:14px;cursor:pointer}.button.primary{background:#176fc1;border-color:#176fc1;color:white}.button[aria-disabled=true],.button:disabled{opacity:.55;cursor:default}.small{font-size:12px}.notebook{background:white;border:1px solid #dbe7f1;border-radius:14px;padding:26px 30px;box-shadow:0 20px 65px #1b5f8e0c;transform:rotate(1.3deg)}.notebook-top{display:flex;justify-content:space-between;color:#7a92a8;font-size:9px;letter-spacing:1px;border-bottom:1px solid #e4edf4;padding-bottom:20px;margin-bottom:28px}.notebook h2{font-size:27px;line-height:1.2;letter-spacing:-.5px;font-weight:600}.notebook p{font-size:13px}.sample-point{display:flex;gap:12px;padding-top:12px}.bullet{flex:0 0 6px;height:6px;background:#2985d6;border-radius:50%;margin-top:7px}.sample-point strong{font-size:14px}.sample-point p{margin:7px 0 10px}.source{display:inline-block;background:#eef6fd;color:#276ca8;font-size:10px;padding:5px 8px;border-radius:5px}.paper-lines{padding:26px 0 16px;display:grid;gap:9px}.paper-lines i{height:5px;background:#edf2f6;width:92%;border-radius:3px}.paper-lines i:nth-child(2){width:83%}.paper-lines i:nth-child(3){width:65%}.notebook-footer{margin-top:10px;padding-top:17px;border-top:1px solid #e4edf4;color:#8095a7;font-size:10px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;padding:40px 30px 70px;border-top:1px solid #dfebf5}.features article>span{font-size:12px;color:#5c8db4}.features h2{font-size:19px;font-weight:600}.features p{font-size:14px}.account{margin:0 30px 70px;background:#edf5fc;border-radius:16px;padding:36px;display:grid;grid-template-columns:1.1fr 1fr;gap:65px}.account h2{font-size:28px;font-weight:600;letter-spacing:-.5px}.account p{font-size:14px}.account-card{background:#fff;border-radius:12px;padding:24px;border:1px solid #d9e7f2}.device{display:flex;justify-content:space-between;gap:10px;align-items:center;border-top:1px solid #e8eff5;padding-top:14px;margin-top:14px;font-size:13px}.device button{font-size:12px;background:none;border:0;color:#176fc1;cursor:pointer}.panel{max-width:720px;margin:50px auto 70px;padding:36px}.panel h1{font-size:40px}.code{font-family:ui-monospace,monospace;letter-spacing:5px;font-size:38px;margin:30px 0;color:#176fc1}#status{padding:0 30px;color:#97430e}footer{display:flex;gap:25px;padding:30px;border-top:1px solid #dfebf5;color:#6e8499;font-size:12px}footer span{margin-right:auto}[hidden]{display:none!important}a:hover,button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #499deb;outline-offset:4px}@media(max-width:800px){.hero{grid-template-columns:1fr;gap:35px;padding-top:35px}.notebook{transform:none;max-width:520px}.features{grid-template-columns:1fr;gap:15px}.account{grid-template-columns:1fr;gap:20px;padding:24px}.panel{padding:22px;margin:20px auto}nav{gap:13px}header{padding:20px}.brand{font-size:16px}h1{letter-spacing:-1.3px}footer{flex-wrap:wrap}}

/* Native sign-in handoff: a focused, branded surface with real state transitions. */
body:has(.auth-journey:not([hidden])){background:radial-gradient(ellipse at 18% 18%,#e7f7ef 0,transparent 45%),radial-gradient(ellipse at 85% 80%,#eee7fb 0,transparent 45%),#faf9f6;color:#29243d;min-height:100svh}
body:has(.auth-journey:not([hidden])) header{max-width:1000px}body:has(.auth-journey:not([hidden])) nav a,body:has(.auth-journey:not([hidden])) #status{display:none}
.auth-journey{width:min(520px,calc(100% - 40px));margin:clamp(12px,6vh,70px) auto 60px;padding:40px 32px 30px;text-align:center;background:#ffffffd9;border-radius:32px;box-shadow:0 24px 80px #3d285408;border:1px solid #ffffff;animation:auth-enter .35s ease-out both}
.auth-journey h1{font-size:clamp(23px,4.8vw,29px);letter-spacing:-.6px;line-height:1.35;margin:12px 0;font-weight:650}.auth-eyebrow{font-size:11px;letter-spacing:2.5px;color:#82709f;margin:16px 0 0;font-weight:700}.auth-description{font-size:15px;line-height:1.7;color:#777181;max-width:340px;margin:0 auto;min-height:50px}.auth-footnote{font-size:12px;color:#8b8494;margin:26px 0 0}.auth-journey .button{border:0;border-radius:15px;min-height:48px;padding:13px 28px;margin-top:20px;background:#f0edf7;color:#7250bc}.auth-journey .primary{background:#8054ce;color:white;box-shadow:0 5px 18px #8054ce22}.auth-journey .button:focus-visible{outline:3px solid #39ad8b;outline-offset:4px}.auth-error{font-size:14px;color:#a54443;background:#fff1ee;padding:12px;border-radius:12px}.auth-art{position:relative;width:230px;height:190px;margin:0 auto}.auth-orbit{position:absolute;inset:4px 12px;border:1px solid #d9cee9;border-radius:50%;transform:rotate(-25deg)}.auth-book{position:absolute;width:110px;height:140px;left:62px;top:22px;border-radius:8px 18px 18px 8px;border-bottom:6px solid #f2ebd9;box-shadow:0 12px 20px #45376118}.book-back{background:#62b4a0;transform:rotate(-19deg) translate(-25px,6px)}.book-front{background:linear-gradient(135deg,#a17de2,#7b53c6);transform:rotate(9deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:auth-book-float 3.4s ease-in-out infinite}.book-front:before{content:"";position:absolute;left:8px;inset-block:10px;width:2px;background:#ffffff30}.book-front img{border-radius:13px}.book-front i{height:3px;width:40px;background:#ffffff80;border-radius:4px}.book-front i:last-child{width:25px;align-self:flex-start;margin-left:33px;margin-top:-6px}.auth-star{position:absolute;color:#edb74e;animation:auth-twinkle 2.4s ease-in-out infinite}.star-one{right:7px;top:14px;font-size:36px}.star-two{left:10px;top:80px;font-size:28px;color:#f18c70;animation-delay:.7s}.auth-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#38b6c5;right:24px;bottom:28px}.auth-seal{position:absolute;right:20px;bottom:14px;width:52px;height:52px;border-radius:18px;background:#fff;box-shadow:0 5px 18px #42365912;display:grid;place-items:center;transform:rotate(-7deg)}.auth-spinner{width:24px;height:24px;border:2px solid #e9e1f6;border-top-color:#8054ce;border-radius:50%;animation:auth-spin 1s linear infinite}.auth-check{display:none;width:29px;stroke:#39ad8b;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.auth-progress{display:flex;justify-content:center;gap:6px;margin-top:22px}.auth-progress span{width:22px;height:4px;background:#dcd0f0;border-radius:4px;animation:auth-breathe 1.3s ease-in-out infinite}.auth-progress span:nth-child(2){animation-delay:.15s}.auth-progress span:nth-child(3){animation-delay:.3s}.auth-journey[data-state=success] .auth-check{display:block;animation:auth-enter .3s ease-out}.auth-journey[data-state=success] .auth-spinner,.auth-journey[data-state=success] .auth-progress,.auth-journey[data-state=error] .auth-progress,.auth-journey[data-state=error] .auth-spinner{display:none}.auth-journey:not([data-state=pending]) .book-front,.auth-journey:not([data-state=pending]) .auth-star{animation:none}
@keyframes auth-spin{to{transform:rotate(360deg)}}@keyframes auth-book-float{50%{transform:translateY(-5px) rotate(6deg)}}@keyframes auth-twinkle{50%{transform:scale(.85) rotate(12deg);opacity:.65}}@keyframes auth-breathe{50%{background:#8054ce}}@keyframes auth-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.auth-journey{padding:28px 22px;margin-top:18px}body:has(.auth-journey:not([hidden])) header{padding:20px}.auth-art{transform:scale(.9);margin-block:-8px}.auth-description{min-height:0}}
@media(prefers-reduced-motion:reduce){.auth-journey,.auth-journey *{animation:none!important;transition:none!important}}
