.login-page { background:var(--yellow); }
.login-shell { max-width:1440px; margin:0 auto; padding:30px 48px 20px; }
.login-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:28px; border-bottom:4px solid var(--ink); }
.login-header .wordmark { font-size:34px; }
.login-header .brand-symbol { background:var(--cyan); width:60px; height:60px; }
.login-edition { font-size:13px; font-weight:900; text-align:right; }
.login-edition>span { display:block; font-size:11px; margin-top:4px; font-weight:600; }
.login-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr); gap:64px; align-items:center; width:auto; max-width:none; min-height:0; margin:0; padding:50px 0; }
.login-story { position:relative; min-width:0; }
.login-tag { display:inline-block; font-size:11px; font-weight:900; letter-spacing:.11em; }
.login-story>.login-tag { background:var(--paper); border:3px solid var(--ink); padding:5px 10px; transform:rotate(-3deg); margin-bottom:24px; box-shadow:4px 4px 0 var(--ink); }
.login-story h1 { font-size:clamp(32px,3.6vw,52px); line-height:1.3; letter-spacing:-.06em; }
.login-title-dot { color:var(--coral); -webkit-text-stroke:2px var(--ink); }
.login-story-copy { margin:20px 0 32px; font-size:15px; font-weight:700; max-width:31em; }
.login-network { position:relative; display:grid; grid-template-columns:1fr 24px 1fr 24px 1fr; align-items:center; gap:8px; padding:28px 18px 22px; background:var(--cyan); border:4px solid var(--ink); box-shadow:7px 7px 0 var(--ink); transform:rotate(-2deg); }
.login-node { text-align:center; font-weight:900; }
.login-node b { display:flex; align-items:center; justify-content:center; width:68px; height:68px; margin:0 auto 10px; border:4px solid var(--ink); background:var(--yellow); box-shadow:4px 4px 0 var(--ink); font:900 36px var(--mono); }
.login-node:nth-of-type(2) b { background:var(--coral); transform:rotate(7deg); }
.login-node:nth-of-type(3) b { background:var(--pink); border-radius:50%; }
.login-node>span { display:block; font-size:12px; }
.login-connector { font-size:24px; font-weight:900; text-align:center; }
.login-network-note { grid-column:1/-1; border-top:3px dashed var(--ink); margin-top:10px; padding-top:13px; text-align:center; font-size:12px; font-weight:800; }
.login-feature-row { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; font-weight:800; margin-top:28px; }
.login-card { position:relative; min-width:0; background:var(--paper); border:4px solid var(--ink); padding:28px 30px; box-shadow:9px 9px 0 var(--ink); }
.login-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.login-star { display:inline-block; color:var(--coral); font-size:52px; line-height:1; -webkit-text-stroke:2px var(--ink); }
.login-card h2 { font-size:36px; margin:8px 0; }
.login-lead { font-size:13px; font-weight:600; }
.login-message { margin:18px 0; padding:9px 12px; border:3px solid var(--ink); background:var(--cyan); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.login-message[data-state=error] { background:var(--coral); }
.login-message[data-state=success] { background:var(--green); }
#login-form { display:grid; gap:10px; }
#login-form label { margin-top:3px; }
.login-password-field { display:flex; min-width:0; border:4px solid var(--ink); background:var(--paper); }
.login-password-field input { border:0; flex:1; min-width:0; }
.login-password-field button { border:0; border-left:3px solid var(--ink); background:var(--yellow); font-size:12px; font-weight:900; padding:0 12px; min-width:56px; }
.login-password-field button:hover:not(:disabled) { background:var(--pink); }
#login-submit { margin:12px 0 6px; }
.login-demo { margin-top:22px; padding:14px; border:3px solid var(--ink); background:var(--green); }
.login-demo-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.login-demo-heading strong { font-size:13px; }
.login-demo .text-button { padding:3px 7px; font-size:10px; min-height:32px; border-width:3px; white-space:nowrap; }
.login-demo dl { margin:12px 0 8px; display:grid; gap:4px; }
.login-demo dl>div { display:flex; gap:16px; align-items:baseline; }
.login-demo dt { font-size:11px; font-weight:700; }
.login-demo dd { margin:0; font:800 14px var(--mono); overflow-wrap:anywhere; }
.login-demo p { font-size:10px; font-weight:700; }
#login-continue { margin-top:18px; }
.login-local-link { display:block; margin-top:20px; font-size:12px; }
#login-reconnect { margin-top:16px; }
.login-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; border-top:4px solid var(--ink); padding-top:16px; font-size:11px; font-weight:800; }
.login-page .skip-link { left:16px; }
@media (max-width:1000px) { .login-shell{padding:24px 28px;} .login-layout{gap:32px;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);} .login-card{padding:22px;} .login-node b{width:52px;height:52px;font-size:28px;} .login-story h1{font-size:36px;} }
@media (max-width:760px) { .login-shell{padding:22px 20px;} .login-header{padding-bottom:20px;} .login-header .wordmark{font-size:27px;} .login-header .brand-symbol{width:48px;height:48px;} .login-edition{font-size:11px;} .login-edition>span{display:none;} .login-layout{grid-template-columns:minmax(0,1fr);padding:30px 0;gap:28px;} .login-story>.login-tag{margin-bottom:16px;} .login-story h1{font-size:36px;} .login-story-copy{font-size:13px;margin:14px 0 0;} .login-network,.login-feature-row{display:none;} .login-card{padding:22px 20px;box-shadow:6px 6px 0 var(--ink);} .login-card h2{font-size:30px;} .login-footer{font-size:10px;} }