:root{color-scheme:light;--navy:#172c4c;--ink:#152a47;--muted:#657287;--line:#dde3ec;--blue:#285ac8;--paper:#f6f8fc;--mint:#9be2ca}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'Anuphan',system-ui,sans-serif}.login-shell{min-height:100svh;display:grid;grid-template-columns:1.08fr 1fr}.story{background:var(--navy);color:white;padding:48px clamp(32px,5.5vw,96px);display:flex;flex-direction:column;position:relative;overflow:hidden}.story:after{content:"";position:absolute;border:1px solid #ffffff0b;border-radius:50%;width:650px;height:650px;right:-400px;top:18%;pointer-events:none}.brand{display:flex;gap:14px;align-items:center;font-weight:600;font-size:25px;letter-spacing:-.5px}.brand-mark{width:46px;height:50px;border:1px solid #ffffff38;border-radius:12px;display:grid;place-items:center;color:var(--mint)}.brand-mark svg{width:27px;height:27px}.brand-caption{display:block;font-size:12px;font-weight:400;letter-spacing:.4px;color:#bfccdf}.story-content{margin:auto 0;padding:62px 0 48px;position:relative;z-index:1;max-width:510px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--mint);font-weight:600;margin:0 0 22px}h1{font-size:clamp(36px,3.4vw,54px);font-weight:600;line-height:1.3;letter-spacing:-1px;margin:0 0 22px;text-wrap:balance}.story-description{color:#c5d1e2;font-size:15px;line-height:1.85;margin:0}.work-illustration{margin-top:38px;padding:0 23px;background:#ffffff08;border:1px solid #ffffff23;border-radius:16px;max-width:430px}.sheet-top{display:flex;align-items:center;gap:10px;padding:18px 0;border-bottom:1px solid #ffffff17;font-size:12px;color:#d4dfed}.sheet-icon{background:#9be2ca1f;color:var(--mint);border-radius:6px;width:24px;height:24px;text-align:center}.sheet-dots{margin-left:auto;color:#93a5be;letter-spacing:2px}.sheet-row{display:flex;gap:15px;align-items:center;padding:18px 0;font-size:14px}.sheet-row+.sheet-row{border-top:1px solid #ffffff0e}.step{font-size:12px;color:#a7bbd7;font-variant-numeric:tabular-nums}.sheet-sub{display:block;font-size:12px;color:#b8c7dc;margin-top:2px}.row-check{margin-left:auto;color:var(--mint);font-size:14px}.story-footer{color:#b8c7dc;font-size:12px;display:flex;gap:12px;align-items:center;margin:0}.footer-line{width:28px;height:1px;background:#7890af}.sign-in{display:flex;flex-direction:column;padding:48px clamp(28px,5vw,80px);background:#fff}.institution{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;justify-content:flex-end}.institution img{background:var(--navy);border-radius:6px;object-fit:contain;padding:7px 8px;width:72px;height:40px}.sign-in-content{width:100%;max-width:390px;margin:auto; padding:64px 0}.section-label{font-size:11px;letter-spacing:1.5px;font-weight:600;color:var(--blue);margin:0 0 16px}h2{font-size:36px;font-weight:600;letter-spacing:-.7px;line-height:1.3;margin:0 0 12px}.intro{color:var(--muted);margin:0 0 36px;font-size:15px}.google-button{display:flex;align-items:center;justify-content:center;gap:14px;min-height:58px;border:1px solid #bcc8d9;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:500;transition:background .18s,border-color .18s,box-shadow .18s;padding:12px 18px}.google-button>svg{width:19px;height:19px;margin-left:auto;color:var(--muted)}.google-button>span{flex:1;text-align:center}.google-button:hover{background:#f5f8ff;border-color:var(--blue);box-shadow:0 4px 14px #172c4c0a}.google-button:active{background:#ebf0fa}.google-button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.account-hint{font-size:12px;color:var(--muted);text-align:center;margin:14px 0 35px}.access-note{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:28px}.access-note>svg{width:21px;height:24px;flex-shrink:0;color:#66809b;margin-top:3px}.access-note h3{font-size:14px;font-weight:500;margin:0 0 5px}.access-note p{font-size:13px;color:var(--muted);line-height:1.9;margin:0}.sign-in-footer{text-align:center;font-size:11px;color:var(--muted)}.sign-in-footer span{padding:0 7px}@media(min-width:1500px){.story-content{align-self:center}.brand,.story-footer{margin-left:calc((100% - 510px)/2)}}@media(max-width:900px){.story{padding:32px}.sign-in{padding:32px}.institution{font-size:11px}.desktop-break{display:none}h1{font-size:38px}.work-illustration{padding:0 16px}}@media(max-width:700px){.login-shell{grid-template-columns:1fr}.story{padding:24px 28px 30px}.brand{font-size:23px}.brand-mark{width:40px;height:44px}.story-content{padding:28px 0 0;margin:0;max-width:none}.eyebrow{display:none}h1{font-size:30px;line-height:1.4;margin-bottom:12px}h1 br{display:none}.story-description{font-size:14px}.work-illustration,.story-footer{display:none}.sign-in{padding:28px;min-height:480px}.institution{justify-content:flex-start;order:2;margin:16px auto}.institution img{width:52px;height:30px}.sign-in-content{padding:12px 0 28px;max-width:420px}h2{font-size:30px}.intro{margin-bottom:26px}.section-label{margin-bottom:10px}.account-hint{margin-bottom:26px}.sign-in-footer{order:3}.access-note{padding-top:22px}.access-note p br{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:360px){.story,.sign-in{padding-left:20px;padding-right:20px}.google-button{gap:10px;font-size:15px}}
.mobile-download{margin-top:28px;padding-top:20px;border-top:1px solid var(--line);text-align:center}.mobile-download-link{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px;color:var(--blue);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;border-radius:8px}.mobile-download-link svg{width:20px;height:20px;flex-shrink:0}.mobile-download-link:hover{background:var(--paper)}.mobile-download-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.mobile-download p{margin:4px 0 0;color:var(--muted);font-size:12px}