@font-face{font-family:Poppins;src:url('assets/Poppins-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/Poppins-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/Poppins-SemiBold.woff') format('woff');font-weight:600;font-display:swap}

/* Continuous full-character artwork: no cut edges at the neck or arms. */
.mascot-turn{position:relative}
#mascot-canvas,#mascot-fallback{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.mascot-rig{position:relative;z-index:1;aspect-ratio:1;overflow:visible}

/* The original symbol becomes a soft ribbon running through the scene. */
.brand-sculpture{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.brand-ribbon,.brand-ribbon-depth{position:absolute;width:138%;height:91%;left:-19%;top:1%;transform:rotate(-19deg);-webkit-mask:url('assets/logo.svg') center/contain no-repeat;mask:url('assets/logo.svg') center/contain no-repeat}
.brand-ribbon-depth{background:#b8af9b;opacity:.14;translate:3px 8px;filter:blur(2px)}
.brand-ribbon{background:linear-gradient(142deg,#fffdf4 2%,#e7dfcd 29%,#fffcf1 50%,#cec5af 74%,#fdf9eb 94%);opacity:.77}
.scene::after{display:none}
.scene-grain{z-index:1}
.decor{z-index:1}

/* Reference coordinates are normalized to the supplied 880 × 1258 panel. */
body{min-height:100svh;justify-content:center;padding-block:24px}
.login-card{max-width:1200px;min-height:0;padding:18px;border-radius:48px;grid-template-columns:1.06fr 1fr;flex-shrink:0}
.form-panel{position:relative;container-type:inline-size;display:block;padding:0;min-width:0;min-height:0;aspect-ratio:880/1258;background:#fff;font-family:Poppins,"PingFang SC",sans-serif;color:#202023}
.form-topline{position:absolute;top:9%;left:-1.25%;width:100%;height:3.7%;margin:0;display:flex;align-items:center;justify-content:center}
.mast-wordmark{width:18%;height:auto;flex-shrink:0;overflow:hidden}
#form-view{position:absolute;inset:0}
.form-heading{position:absolute;top:19%;left:1.25%;width:97.5%;text-align:center}
.form-heading h1{font-family:Poppins,sans-serif;font-size:7.05cqw;font-weight:600;letter-spacing:-.23cqw;line-height:1.2;margin:0;white-space:nowrap;color:#202023}
.form-heading>p:last-child{margin:1.2cqw 0 0;font-size:2.38cqw;line-height:1.5;font-weight:500;letter-spacing:-.035cqw;color:#a2a2a4}
#login-form{position:absolute;inset:0}
.form-panel .field{position:absolute;left:14.2%;width:69.1%;margin:0}
.username-field{top:35.98%}
.password-field{top:48.7%}
.form-panel .field label{font-family:inherit;font-size:2.27cqw;font-weight:500;line-height:1.55;letter-spacing:-.035cqw;margin:0;color:#99999b}
.form-panel .input-wrap input{width:100%;height:7.12cqw;padding:0 4.9cqw 1.35cqw 0;border:0;border-bottom:.29cqw solid #c6c6c8;border-radius:0;background:transparent;box-shadow:none;font-family:inherit;font-size:2.95cqw;font-weight:500;line-height:1.4;letter-spacing:-.075cqw;color:#27272a;outline:none;transition:border-color .18s}
.form-panel .input-wrap input::placeholder{font-family:inherit;font-size:inherit;letter-spacing:inherit;font-weight:inherit;color:#c4c4c4;opacity:1}
.form-panel .input-wrap input:focus{background:transparent;border-bottom-color:#39393c;box-shadow:none;outline:none}
.form-panel .input-wrap input[aria-invalid=true]{border-bottom-color:#bd5140}
.form-panel #password{letter-spacing:.1cqw}
.form-panel #password-toggle{top:0;right:-.5cqw;height:5.5cqw;width:5.5cqw;border-radius:50%;color:#77777a}
.form-panel #password-toggle svg{width:3.5cqw;height:3.5cqw;stroke-width:1.8}
.form-panel #password-toggle:hover{color:#202023;background:transparent}
.form-panel .form-options{position:absolute;left:14.2%;top:58.18%;width:69.1%;height:2.6%;margin:0;display:flex;justify-content:space-between;align-items:center;gap:0}
.form-panel .check-label{font-family:inherit;font-size:2.23cqw;font-weight:500;letter-spacing:-.04cqw;color:#99999c;gap:1.3cqw}
.form-panel .check-label input{appearance:none;display:grid;place-content:center;width:2.5cqw;height:2.5cqw;margin:0;border:.25cqw solid #b5b5b8;border-radius:.22cqw;background:white;accent-color:#a2a2a4}
.form-panel .check-label input:checked::after{content:"";width:1.25cqw;height:.65cqw;border-left:.3cqw solid #929295;border-bottom:.3cqw solid #929295;transform:rotate(-45deg) translateY(-.15cqw)}
#forgot-button{border:0;padding:0;background:transparent;color:#c5c5c8;font-family:inherit;font-size:2.23cqw;letter-spacing:-.035cqw;font-weight:500;white-space:nowrap}
#forgot-button:hover{color:#77777c}
.form-panel .form-error{position:absolute;left:14.2%;top:61.1%;width:69.1%;font-size:1.7cqw;line-height:1.35;letter-spacing:0;min-height:0;margin:0;color:#b95040}
.form-panel .primary-button,.google-button{height:7.8%;border:0;border-radius:999px;box-shadow:none;font-family:inherit;font-size:2.7cqw;line-height:1;font-weight:500;letter-spacing:-.06cqw;display:flex;align-items:center;justify-content:center;gap:1.8cqw;transition:background .18s,transform .18s}
#submit-button{position:absolute;left:13.75%;top:64.55%;width:69.3%;background:#202024;color:white}
#submit-button:hover{background:#303034;box-shadow:none;transform:translateY(-1px)}
.google-button{position:absolute;left:14.2%;top:74.8%;width:69.1%;background:linear-gradient(#f6f5f5,#f0efef);color:#202024}
.google-button:hover{background:#ecebeb;transform:translateY(-1px)}
.google-icon{width:3.75cqw;height:3.75cqw;flex-shrink:0}
.signup-row{position:absolute;left:0;top:92.6%;width:97.5%;display:flex;align-items:center;justify-content:center;gap:1.05cqw;font-size:1.95cqw;font-weight:400;line-height:1.5;letter-spacing:-.045cqw;color:#727275;white-space:nowrap}
#signup-button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#29292c;letter-spacing:-.04cqw}
#signup-button:hover{text-decoration:underline;text-underline-offset:3px}
.form-panel .success-view{position:absolute;left:14.2%;right:16.7%;top:27%;margin:0;text-align:center}
.form-panel .success-view .eyebrow{justify-content:center;font-size:1.5cqw}
.form-panel .success-mark{margin:0 auto 24px}
.form-panel .success-view h1{font-family:inherit;font-size:6cqw;letter-spacing:-.2cqw}
.form-panel .success-view>p:not(.eyebrow){font-size:2.15cqw}
.form-panel .success-view .primary-button{position:static;width:100%;height:10.5cqw;background:#202024}
.form-panel .success-view .success-caption{font-size:1.55cqw!important}
.form-panel .demo-account{font-size:2cqw;border-radius:8px;background:#f8f8f8;color:#777}
.form-panel .demo-tag{font-size:1.2cqw}
.form-panel .demo-account>i{background:#97979a}
.form-panel .spinner{width:2.4cqw;height:2.4cqw}

#account-dialog{border:1px solid #ececec;border-radius:24px;padding:38px;width:min(420px,calc(100vw - 36px));font-family:Poppins,"PingFang SC",sans-serif;box-shadow:0 25px 100px #0003;color:#242428}
#account-dialog::backdrop{background:#24242755;backdrop-filter:blur(6px)}
#account-dialog-close{position:absolute;right:15px;top:10px;width:32px;height:32px;border:0;background:none;color:#999;font-size:27px;line-height:1}
.dialog-eyebrow{font-size:9px;letter-spacing:1.8px;color:#999;margin:0 0 20px}
#account-dialog-title{font-size:24px;line-height:1.3;letter-spacing:-.8px;margin:0 0 18px;font-weight:600}
#account-dialog-description{font-size:13px;line-height:1.8;color:#888;margin:0 0 28px}
#account-dialog-action{font-family:inherit;border-radius:999px;background:#202024;letter-spacing:0}

@media(min-width:681px){.scene{min-height:0;border-radius:30px}.mascot-position{top:50%;width:460px;max-width:88%;transform:translate(-50%,-50%)}.ground-shadow{top:calc(50% + 180px);bottom:auto}}
@media(min-width:1600px){.login-card{max-width:1320px}.mascot-position{width:500px}.ground-shadow{top:calc(50% + 200px)}}
@media(max-width:900px) and (min-width:681px){.login-card{padding:10px;border-radius:32px}.scene{border-radius:24px}.scene-copy{margin:28px 22px}.scene-copy h2{font-size:24px}.mascot-position{max-width:100%}.scene-caption{font-size:9px}.scene-status{font-size:8px}.mascot-note{font-size:8px;right:10px}.form-panel .check-label,.form-panel #forgot-button{font-size:2.2cqw}}
@media(max-width:680px){.site-header{height:72px}.login-card{padding:8px;border-radius:23px;display:flex}.form-panel{padding:0;min-height:540px;margin:0;aspect-ratio:880/1258}.form-topline{top:9%}.form-heading h1{font-size:max(7.05cqw,28px)}.form-heading>p:last-child{font-size:max(2.38cqw,11px)}.form-panel .field label{font-size:max(2.27cqw,11px)}.form-panel .input-wrap input{font-size:16px;height:max(7.12cqw,38px);padding-bottom:8px}.form-panel #password-toggle{width:32px;height:30px;right:-8px}.form-panel #password-toggle svg{width:19px;height:19px}.form-panel .check-label,#forgot-button{font-size:max(2.23cqw,10px)}.form-panel .check-label input{width:12px;height:12px;border-width:1px}.form-panel .check-label input:checked::after{width:6px;height:3px;border-width:0 0 1.5px 1.5px}.form-panel .primary-button,.google-button{font-size:max(2.7cqw,13px);height:max(7.8%,44px)}.google-icon{width:max(3.75cqw,18px);height:max(3.75cqw,18px)}.signup-row{font-size:max(1.95cqw,10px)}.form-panel .form-error{font-size:9px}.form-panel .success-view>p:not(.eyebrow){font-size:12px}.form-panel .success-view .success-caption{font-size:9px!important}.form-panel .success-view .primary-button{height:44px;font-size:13px}.form-panel .demo-account{font-size:11px}.form-panel .demo-tag{font-size:8px}.form-panel .success-view h1{font-size:30px}.brand-ribbon,.brand-ribbon-depth{width:130%;height:117%;left:-26%;top:-17%;opacity:.65}.site-footer{height:52px}}
@media(max-width:480px){.form-panel .form-options{top:61.6%}.form-panel .form-error{top:64.7%;font-size:8px}#submit-button{top:67.2%}.google-button{top:78.2%}}

/* Keep the ring circular throughout its float, without perspective flattening. */
.torus{transform:none;animation:ring-float 10s ease-in-out infinite}
@keyframes ring-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:680px){.mascot-position{left:50%;right:auto;top:50%;width:260px;max-width:88%;transform:translate(-50%,-50%)}.ground-shadow{left:50%;right:auto;top:calc(50% + 100px);bottom:auto;transform:translateX(-50%)}}

/* Chinese greeting keeps a balanced single line at every viewport. */
.form-heading h1{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:6cqw;letter-spacing:.015em;line-height:1.35}
#time-greeting{color:inherit}
.form-heading>p:last-child{font-family:"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.035em}
.google-button:disabled{color:#a2a2a4;cursor:default;transform:none;background:linear-gradient(#f6f5f5,#f0efef)}
@media(max-width:680px){.form-heading h1{font-size:max(6cqw,22px)}}

/* Align the input text and visibility icon closer to their underline. */
.form-panel .input-wrap input{padding-bottom:0}
.form-panel #password-toggle{top:.675cqw}
.google-notice{position:absolute;top:84.7%;left:14.2%;width:69.1%;margin:0;text-align:center;font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:2.1cqw;line-height:1.5;color:#94948f;pointer-events:none}
@media(max-width:680px){.form-panel #password-toggle{top:4px}.google-notice{font-size:11px}}
@media(max-width:480px){.google-notice{top:87.8%}}