@layer components{.x-login{--login-shell-max:40rem;min-height:100%;padding:calc(var(--space) * 2);color:var(--fg);isolation:isolate;place-items:center;display:grid;position:relative}.x-login[data-surface=page]{min-height:100dvh}.x-login-shell{gap:calc(var(--space) * 1.5);inline-size:min(100%, var(--login-shell-max));padding:calc(var(--space) * 2);border:1px solid color-mix(in oklch, var(--lines-strong), transparent 18%);border-radius:calc(var(--panel-radius) * 1.1);background:linear-gradient(180deg, color-mix(in oklch, var(--surface-panel), var(--fg) 3%), color-mix(in oklch, var(--surface-panel), black 8%));box-shadow:var(--shadow);display:grid;position:relative;overflow:clip}.x-login-shell:before{content:"";background:linear-gradient(90deg, color-mix(in oklch, var(--alpha), transparent 12%), color-mix(in oklch, var(--beta), transparent 44%));height:2px;position:absolute;inset:0 0 auto}.x-login-main,.x-login-actions{display:grid}.x-login-main{gap:calc(var(--space) * 1.5);align-content:center}.x-login-actions{gap:calc(var(--pad) * 1.5)}.x-login-note{max-width:28rem;color:color-mix(in oklch, var(--fg), transparent 38%);font-size:.92rem;line-height:1.45}.x-login-brand{gap:calc(var(--space) * .7);align-items:center;display:flex}.x-login-brand img{width:2rem;height:2rem}.x-login-copy{gap:calc(var(--pad) * 1.1);text-align:left;display:grid}.x-login-copy h1{max-width:12ch;color:var(--fg);font-family:inherit;font-size:clamp(1.9rem,4vw,2.8rem);font-style:normal;line-height:1.06}.x-login-copy p{max-width:30rem;color:color-mix(in oklch, var(--fg), transparent 28%);line-height:1.5}.x-login-shell[data-state=guest] .x-btn{border-radius:calc(var(--panel-radius) * .9);justify-self:start}.x-login-error{color:var(--danger)}.x-login[data-surface=panel] .x-login-shell{--login-shell-max:30rem;padding:calc(var(--space) * 1.5)}.x-login[data-surface=panel] .x-login-shell[data-state=guest] .x-btn{inline-size:100%}.x-login-shell[data-state=ready] .x-avatar{--size:4.25rem;--avatar-bg:color-mix(in oklch, var(--beta), var(--neutral) 35%)}.x-login-ready,.x-login-account{display:grid}.x-login-ready{gap:calc(var(--space) * 1.25);justify-items:start}.x-login-account{gap:calc(var(--pad) * .45);padding:var(--space);border:1px solid color-mix(in oklch, var(--lines), transparent 24%);border-radius:calc(var(--panel-radius) * .75);background:color-mix(in oklch, var(--surface-control), transparent 10%)}.x-login-account p{letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklch, var(--fg), transparent 40%);font-size:.78rem}.x-login-account span{color:color-mix(in oklch, var(--fg), transparent 32%);line-height:1.45}}