:root { color-scheme: dark; --bg:#07090b; --surface:#101419; --line:rgba(241,238,230,.16); --text:#f1eee6; --muted:#929aa4; --gold:#d8bd85; --cyan:#86d9ee; font-family:Inter,"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{display:grid;place-items:center;padding:24px;background:var(--bg);color:var(--text);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 13% 10%,rgba(99,199,231,.09),transparent 28%),radial-gradient(circle at 90% 5%,rgba(199,169,107,.08),transparent 25%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(#000,transparent 78%)}
.gate-shell{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(390px,.72fr);width:min(1180px,100%);min-height:650px;border:1px solid var(--line);border-radius:22px;background:rgba(10,13,16,.9);box-shadow:0 38px 130px rgba(0,0,0,.55);overflow:hidden}
.gate-context{display:flex;flex-direction:column;justify-content:space-between;padding:38px 46px;border-right:1px solid var(--line);background:linear-gradient(155deg,rgba(99,199,231,.045),transparent 46%)}
.context-top{display:flex;align-items:center;gap:11px;font-size:12px;font-weight:800;letter-spacing:.14em}.context-top small{color:var(--muted);font-size:8px;letter-spacing:.12em}.monogram{display:grid;place-items:center;width:43px;aspect-ratio:1;border:1px solid rgba(134,217,238,.36);border-radius:9px;color:var(--cyan);font:700 12px/1 ui-monospace,monospace}
.eyebrow{color:var(--cyan);font:700 9px/1.4 ui-monospace,monospace;letter-spacing:.15em}.gate-context h1{margin:18px 0 23px;font-size:clamp(54px,6.1vw,86px);line-height:.91;letter-spacing:-.065em;font-weight:610}.gate-context h1 em{color:var(--gold);font-style:normal;font-weight:450}.context-copy{max-width:620px;margin:0;color:#b8bdc1;font-size:16px;line-height:1.65}
.context-ledger{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.context-ledger span{padding:14px 12px 14px 0;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.05em}.context-ledger b{display:block;margin-bottom:5px;color:var(--text);font-size:18px}
.gate-card{position:relative;display:flex;flex-direction:column;justify-content:center;padding:46px}.frame-label{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;color:#737c85;font:600 7px/1 ui-monospace,monospace;letter-spacing:.1em}.lock-mark{display:grid;place-items:center;width:54px;aspect-ratio:1;margin-bottom:27px;border:1px solid rgba(216,189,133,.3);border-radius:50%;background:rgba(216,189,133,.05)}.lock-mark span{position:relative;width:17px;height:14px;border:1.5px solid var(--gold);border-radius:3px}.lock-mark span::before{content:"";position:absolute;left:3px;right:3px;bottom:11px;height:9px;border:1.5px solid var(--gold);border-bottom:0;border-radius:8px 8px 0 0}
.gate-card .eyebrow{color:var(--gold)}.gate-card h2{margin:10px 0 8px;font-size:40px;letter-spacing:-.045em}.login-copy{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
form{margin-top:30px}label{display:block;margin-bottom:7px;color:#aeb4b8;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.password-frame{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid var(--line);border-radius:9px;background:#080a0d;transition:border-color .2s,box-shadow .2s}.password-frame:focus-within{border-color:rgba(216,189,133,.7);box-shadow:0 0 0 3px rgba(216,189,133,.08)}input{width:100%;height:50px;padding:0 14px;border:0;outline:0;background:transparent;color:var(--text);font-size:17px;letter-spacing:.16em}input::placeholder{color:#525960}.password-frame>span{padding:0 14px;color:var(--gold);font:700 12px/1 ui-monospace,monospace}
button{display:flex;justify-content:space-between;width:100%;margin-top:11px;padding:14px 15px;border:1px solid var(--gold);border-radius:9px;background:var(--gold);color:#14120d;cursor:pointer;font-size:11px;font-weight:800;transition:transform .2s,filter .2s}button:hover{transform:translateY(-1px);filter:brightness(1.05)}button:disabled{cursor:wait;opacity:.7}.form-error{min-height:18px;margin:9px 0 0;color:#db9183;font-size:10px}
.security-note{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.security-note>span{width:6px;height:6px;margin-top:4px;border-radius:50%;background:#75c596;box-shadow:0 0 0 4px rgba(117,197,150,.08)}.security-note p{margin:0;color:var(--muted);font-size:9px;line-height:1.55}.security-note b{color:#b9c0c2}
@media(max-width:820px){body{padding:10px}.gate-shell{grid-template-columns:1fr;min-height:0}.gate-context{min-height:360px;padding:28px;border-right:0;border-bottom:1px solid var(--line)}.context-top{margin-bottom:64px}.gate-context h1{font-size:clamp(48px,12vw,68px)}.context-ledger{margin-top:50px}.gate-card{padding:72px 28px 34px}}
@media(max-width:480px){.gate-context{min-height:330px;padding:22px}.context-top{margin-bottom:45px}.context-copy{font-size:13px}.context-ledger span{padding-right:5px;font-size:7px}.context-ledger b{font-size:15px}.gate-card{padding:66px 22px 28px}.gate-card h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}