:root { --paper:#f4f1ea; --light:#faf8f3; --ink:#20201e; --muted:#77736d; --faint:#aaa49a; --line:#d8d2c7; --accent:#a64032; --max:1060px; }
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background:linear-gradient(rgba(68,62,53,.025) 1px,transparent 1px),var(--paper);background-size:100% 8px;font-family:"Yu Gothic","Noto Sans SC","Microsoft YaHei",sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.site-header{display:flex;width:min(calc(100% - 48px),var(--max));height:90px;margin:0 auto;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px}
.brand{display:inline-flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:16px}
.brand span{display:grid;width:34px;height:34px;place-items:center;background:var(--accent);color:white;font-family:"Yu Mincho",serif}
.brand b{font-weight:400}
.site-header>a:last-child{color:var(--muted)}
main{display:grid;width:min(calc(100% - 48px),var(--max));min-height:calc(100vh - 200px);margin:0 auto;grid-template-columns:1fr 430px;align-items:center;gap:10vw;padding:80px 60px}
.eyebrow{margin:0 0 20px;color:var(--accent);font-size:9px;letter-spacing:.2em}
.login-copy{position:relative}
.login-copy h1{margin:0;font-family:"Yu Mincho","Noto Serif SC",serif;font-size:clamp(58px,7vw,88px);font-weight:500;letter-spacing:-.05em;line-height:1.15}
.login-copy h1 span{font-size:.48em;letter-spacing:-.02em}
.login-copy>p:last-of-type{max-width:380px;margin:28px 0 0;color:var(--muted);font-size:13px}
.login-copy__mark{position:absolute;right:10px;bottom:-48px;display:grid;width:110px;height:110px;place-items:center;border:1px solid var(--line);border-radius:50%;font-family:"Yu Mincho",serif;font-size:44px}
.login-copy__mark i{position:absolute;width:140%;height:1px;background:var(--accent);transform:rotate(-35deg)}
.login-copy__mark span{z-index:1;padding:0 5px;background:var(--paper)}
.login-panel{padding:42px;border:1px solid var(--ink);background:var(--light);box-shadow:12px 12px 0 transparent,12px 12px 0 -1px var(--line)}
.login-panel__number{color:var(--accent);font-family:Georgia,serif;font-size:9px;letter-spacing:.18em}
.login-panel h2{margin:16px 0 0;font-family:"Yu Mincho","Noto Serif SC",serif;font-size:32px;font-weight:500}
.login-panel>p{margin:4px 0 30px;color:var(--muted);font-size:11px}
form>label{display:block;margin:17px 0 7px;color:var(--muted);font-size:11px}
input{width:100%;height:48px;padding:0 13px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);outline:none}
input:focus{border-color:var(--accent)}
.password-field{position:relative}
.password-field input{padding-right:58px}
.password-field button{position:absolute;top:0;right:0;height:48px;padding:0 13px;border:0;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}
.form-error{margin:14px 0 0!important;color:var(--accent)!important;font-size:11px!important}
.submit-button{display:flex;width:100%;height:50px;margin-top:26px;padding:0 16px;align-items:center;justify-content:space-between;border:1px solid var(--ink);background:var(--ink);color:var(--light);cursor:pointer}
.submit-button:disabled{opacity:.55;cursor:wait}
.preview-account{margin:18px 0 0!important;padding-top:15px;border-top:1px solid var(--line);font-size:10px!important}
.preview-account code{color:var(--accent)}
footer{display:flex;width:min(calc(100% - 48px),var(--max));min-height:110px;margin:0 auto;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--faint);font-family:Georgia,serif;font-size:9px;letter-spacing:.14em}
@media(max-width:760px){.site-header,main,footer{width:min(calc(100% - 32px),var(--max))}main{grid-template-columns:1fr;gap:70px;padding:70px 20px}.login-copy__mark{display:none}.login-panel{padding:28px}.preview-account{line-height:1.8}}