:root{
  color-scheme:dark;
  --account-bg:#07080b;
  --account-panel:#0d1015;
  --account-panel-2:#11151b;
  --account-line:#2b333e;
  --account-line-soft:#1f252e;
  --account-ink:#e9e6de;
  --account-muted:#9aa3af;
  --account-faint:#626d7b;
  --account-amber:#f0a63c;
  --account-amber-bright:#ffbb57;
  --account-cyan:#58c8d8;
  --account-green:#79c98a;
  --account-red:#e88ca1;
  --account-sans:"IBM Plex Sans",ui-sans-serif,"Helvetica Neue",sans-serif;
  --account-condensed:"IBM Plex Sans Condensed",var(--account-sans);
  --account-mono:"IBM Plex Mono",ui-monospace,monospace;
}
html{min-height:100%;background:var(--account-bg)}
body{min-height:100vh;margin:0;background:var(--account-bg);color:var(--account-ink);font-family:var(--account-sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
[hidden]{display:none!important}

.account-shell{position:relative;min-height:100vh;overflow:hidden;background:
  radial-gradient(circle at 76% 18%,rgba(88,200,216,.08),transparent 27rem),
  radial-gradient(circle at 18% 88%,rgba(240,166,60,.07),transparent 30rem),
  var(--account-bg)}
.account-shell::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:
  linear-gradient(rgba(166,174,186,.08) 1px,transparent 1px),
  linear-gradient(90deg,rgba(166,174,186,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom,black,transparent 82%)}
.account-nav{max-width:1240px;margin:0 auto;padding:16px 40px;border-bottom:1px solid var(--account-line-soft)}
.account-brand{display:flex;align-items:center;gap:10px}
.account-brand svg{width:22px;height:22px}.account-brand span{font:600 15px var(--account-condensed);letter-spacing:.14em;text-transform:uppercase}.account-brand em{color:var(--account-amber);font-style:normal}
.account-nav-spacer{flex:1}
.account-nav .nl{color:var(--account-muted)}
.account-nav .nl:hover{color:var(--account-ink)}
.account-nav .ba{border-radius:8px;background:var(--account-amber);color:#0b0b0b;font-weight:600}
.account-nav .ba:hover{background:var(--account-amber-bright);color:#0b0b0b}

.account-main{position:relative;z-index:1;width:min(1180px,calc(100% - 48px));margin:0 auto;padding:82px 0 96px}
.account-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.55fr);gap:60px;align-items:end;padding-bottom:34px;border-bottom:1px solid var(--account-line)}
.account-kicker{margin:0;color:var(--account-cyan);font:500 10px var(--account-mono);letter-spacing:.2em;text-transform:uppercase}
.account-intro h1{max-width:780px;margin:17px 0 0;font:600 clamp(48px,7vw,96px)/.88 var(--account-condensed);letter-spacing:-.025em;text-transform:uppercase}
.account-intro h1 span{color:transparent;-webkit-text-stroke:1px rgba(233,230,222,.72)}
.account-intro-copy{margin:0;padding-left:18px;border-left:2px solid var(--account-amber);color:var(--account-muted);font-size:14px;line-height:1.68;text-wrap:pretty}

.account-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:54px;padding-top:42px}
.account-context{display:grid;align-content:start;gap:30px;padding:12px 0}
.account-context-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:15px;padding-bottom:22px;border-bottom:1px solid var(--account-line-soft)}
.account-context-row>span{display:grid;width:36px;height:36px;place-items:center;border:1px solid var(--account-line);color:var(--account-amber);font:500 9px var(--account-mono)}
.account-context h2{margin:0;font:600 19px var(--account-condensed);letter-spacing:.02em;text-transform:uppercase}
.account-context p{max-width:590px;margin:7px 0 0;color:var(--account-muted);font-size:13.5px;line-height:1.62;text-wrap:pretty}
.account-context strong{color:var(--account-ink);font-weight:600}

.account-card{position:relative;min-height:470px;border:1px solid var(--account-line);background:linear-gradient(145deg,rgba(17,21,27,.98),rgba(10,12,16,.98));box-shadow:0 30px 80px rgba(0,0,0,.38)}
.account-card::before,.account-card::after{content:"";position:absolute;width:15px;height:15px;pointer-events:none}
.account-card::before{top:-1px;left:-1px;border-top:2px solid var(--account-amber);border-left:2px solid var(--account-amber)}
.account-card::after{right:-1px;bottom:-1px;border-right:2px solid var(--account-cyan);border-bottom:2px solid var(--account-cyan)}
.account-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px;border-bottom:1px solid var(--account-line)}
.account-card-head>span{color:var(--account-faint);font:500 9px var(--account-mono);letter-spacing:.14em;text-transform:uppercase}
.account-state-light{display:flex!important;align-items:center;gap:7px;color:var(--account-muted)!important;letter-spacing:.08em!important}
.account-state-light::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--account-faint)}
.account-card[data-account-state="signed-in"] .account-state-light::before{background:var(--account-green);box-shadow:0 0 0 4px rgba(121,201,138,.09)}
.account-card-body{padding:24px 20px 21px}

.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:22px;padding:3px;border:1px solid var(--account-line);background:#090b0f}
.account-tabs button{min-height:38px;border:0;background:transparent;color:var(--account-faint);font:500 9px var(--account-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.account-tabs button[aria-selected="true"]{background:var(--account-ink);color:#0b0b0b}
.account-tabs button:focus-visible,.account-google:focus-visible,.account-form button:focus-visible,.account-secondary:focus-visible{outline:2px solid var(--account-amber);outline-offset:2px}
.account-view h2{margin:0;font:600 25px var(--account-condensed);text-transform:uppercase}
.account-view>p{margin:7px 0 20px;color:var(--account-muted);font-size:12.5px;line-height:1.55}
.account-google{display:flex;width:180px;height:40px;align-items:center;justify-content:center;padding:0;border:0;border-radius:20px;background:transparent;cursor:pointer}
.account-google img{display:block;width:180px;height:40px}
.account-google:disabled{cursor:wait;opacity:.55}
.account-form{display:grid;gap:13px}
.account-field{display:grid;gap:6px;color:var(--account-muted);font:500 9px var(--account-mono);letter-spacing:.08em;text-transform:uppercase}
.account-field input{box-sizing:border-box;width:100%;height:44px;padding:0 12px;border:1px solid #35404c;border-radius:2px;outline:0;background:#090b0f;color:var(--account-ink);font:400 14px var(--account-sans);letter-spacing:0;text-transform:none}
.account-field input::placeholder{color:#596371}.account-field input:focus{border-color:var(--account-amber);box-shadow:0 0 0 2px rgba(240,166,60,.12)}
.account-password-note{margin:-3px 0 2px;color:var(--account-faint);font-size:10.5px;line-height:1.45}
.account-primary{min-height:44px;border:1px solid var(--account-amber);border-radius:3px;background:var(--account-amber);color:#0b0b0b;font:600 10px var(--account-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.account-primary:hover{border-color:var(--account-amber-bright);background:var(--account-amber-bright)}
.account-primary:disabled,.account-secondary:disabled{cursor:wait;opacity:.55}
.account-secondary{appearance:none;min-height:38px;padding:7px 0;border:0;background:transparent;color:var(--account-cyan);font:500 10px var(--account-mono);letter-spacing:.03em;text-align:left;cursor:pointer}
.account-secondary:hover{color:#8adce8}
.account-divider{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:16px 0;color:var(--account-faint);font:500 8px var(--account-mono);letter-spacing:.1em;text-transform:uppercase}
.account-divider::before,.account-divider::after{content:"";height:1px;background:var(--account-line-soft)}

.account-status{min-height:42px;margin:0 20px 20px;padding:10px 11px;border:1px solid var(--account-line-soft);background:rgba(88,200,216,.035);color:var(--account-muted);font-size:11.5px;line-height:1.45}
.account-status:empty{display:none}
.account-status[data-kind="success"]{border-color:rgba(121,201,138,.36);color:var(--account-green)}
.account-status[data-kind="error"]{border-color:rgba(232,140,161,.4);color:var(--account-red)}
.account-status[data-kind="info"]{border-color:rgba(88,200,216,.34);color:#94dce5}

.account-identity{margin:18px 0;padding:15px;border:1px solid var(--account-line);background:#090b0f}
.account-identity span{display:block;color:var(--account-faint);font:500 8px var(--account-mono);letter-spacing:.14em;text-transform:uppercase}
.account-identity strong{display:block;margin-top:7px;overflow-wrap:anywhere;font-size:14px}
.account-identity small{display:block;margin-top:6px;color:var(--account-muted);font-size:11px}
.account-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.account-actions a,.account-actions button{display:flex;min-height:42px;align-items:center;justify-content:center;border:1px solid var(--account-line);border-radius:3px;background:transparent;color:var(--account-ink);font:500 9px var(--account-mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.account-actions a:hover,.account-actions button:hover{border-color:var(--account-amber);color:var(--account-amber)}
.account-actions .account-signout{grid-column:1/-1;color:var(--account-muted)}
.account-loading{display:grid;min-height:330px;place-items:center;color:var(--account-muted);font:500 10px var(--account-mono);letter-spacing:.12em;text-transform:uppercase}
.account-loading span{display:flex;align-items:center;gap:10px}.account-loading span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--account-amber);animation:account-pulse 1.2s ease-in-out infinite}

.account-foot{display:flex;align-items:center;gap:15px;margin-top:48px;padding-top:18px;border-top:1px solid var(--account-line-soft);color:var(--account-faint);font:500 9px var(--account-mono);letter-spacing:.07em;text-transform:uppercase}
.account-foot span:nth-child(2){flex:1;height:1px;background:var(--account-line-soft)}
@keyframes account-pulse{50%{opacity:.2;transform:scale(.7)}}

@media(max-width:820px){
  .account-main{width:min(100% - 32px,680px);padding:54px 0 70px}
  .account-intro{grid-template-columns:1fr;gap:24px}.account-intro-copy{max-width:560px}
  .account-stage{grid-template-columns:1fr;gap:32px}.account-context{grid-template-columns:1fr 1fr;gap:14px}.account-context-row{grid-template-columns:38px 1fr}
  .account-card{min-height:0}
}
@media(max-width:560px){
  .account-main{width:calc(100% - 24px);padding-top:38px}.account-intro h1{font-size:44px}.account-context{grid-template-columns:1fr}.account-context-row{padding-bottom:15px}
  .account-card-body{padding:20px 15px}.account-status{margin-inline:15px}.account-actions{grid-template-columns:1fr}.account-actions .account-signout{grid-column:auto}.account-foot{align-items:flex-start;flex-direction:column}.account-foot span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){.account-loading span::before{animation:none}}