@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}.x-login-form,.x-login-alternates,.x-login-stage{gap:calc(var(--pad) * .9);display:grid}.x-login-shell[data-flow=credentials],.x-login-shell[data-flow=credentials] .x-login-main{gap:var(--space)}.x-login-form .x-btn,.x-login-alternates .x-btn{justify-self:stretch;inline-size:100%}.x-login-modes{gap:calc(var(--pad) * 1.5);border-bottom:1px solid var(--line-soft);display:flex}.x-login-modes button{appearance:none;border:none;color:color-mix(in oklch, var(--fg), transparent 40%);font:inherit;cursor:pointer;background:0 0;border-block-end:2px solid #0000;margin-block-end:-1px;padding:0 .15em .55em;font-size:1.05em;font-weight:500}.x-login-modes button:is(:hover,:focus-visible){color:var(--fg);outline:none}.x-login-modes button[data-active]{border-block-end-color:var(--alpha);color:var(--fg);font-weight:600}.x-login-stage{animation:x-login-stage-in var(--motion-fast) var(--ease-enter) both}@keyframes x-login-stage-in{0%{opacity:0;transform:translateY(.25em)}}@media (prefers-reduced-motion:reduce){.x-login-stage{animation:none}}.x-login-labeled{gap:.35em;display:grid}.x-login-labeled>:is(label,span){color:color-mix(in oklch, var(--fg), transparent 35%);letter-spacing:.02em;font-size:.75em;font-weight:500}.x-login-label-row{justify-content:space-between;align-items:baseline;display:flex}.x-login-forgot{color:color-mix(in oklch, var(--fg), transparent 45%);font:inherit;cursor:pointer;text-underline-offset:2px;background:0 0;border:none;padding:0;text-decoration:underline}.x-login-forgot:is(:hover,:focus-visible){color:var(--fg);outline:none}.x-login-password{display:block;position:relative}.x-login-password .x-login-field{padding-inline-end:2.6em}.x-login-reveal{color:color-mix(in oklch, var(--fg), transparent 45%);cursor:pointer;background:0 0;border:none;place-items:center;padding:0 .4em;display:grid;position:absolute;inset-block:0;inset-inline-end:.35em}.x-login-reveal:is(:hover,:focus-visible){color:var(--fg);outline:none}.x-login-reveal svg{block-size:1.1em;inline-size:1.1em}.x-login-notice{color:color-mix(in oklch, var(--alpha), var(--fg) 25%);margin:0;font-size:.85em}.x-login-form .x-login-copy{gap:calc(var(--pad) * .5)}.x-login-form .x-login-copy h1{max-width:none;margin:0;font-size:1.15em;font-weight:680;line-height:1.3}.x-login-form .x-login-copy p{color:color-mix(in oklch, var(--fg), transparent 40%);margin:0;font-size:.85em}.x-login-back{color:color-mix(in oklch, var(--fg), transparent 35%);font:inherit;cursor:pointer;text-underline-offset:2px;background:0 0;border:none;justify-self:center;padding:.25em;font-size:.85em;text-decoration:underline}.x-login-back:is(:hover,:focus-visible){color:var(--fg);outline:none}.x-login-field{box-sizing:border-box;border:1px solid color-mix(in oklch, var(--lines-strong), transparent 18%);border-radius:calc(var(--panel-radius) * .9);background:color-mix(in oklch, var(--surface-panel), black 10%);inline-size:100%;color:var(--fg);font:inherit;padding:.75em 1em;font-size:.9em}.x-login-field::placeholder{color:color-mix(in oklch, var(--fg), transparent 55%)}.x-login-field:-webkit-autofill{-webkit-text-fill-color:var(--fg);-webkit-box-shadow:0 0 0 100px color-mix(in oklch, var(--surface-panel), black 10%) inset;caret-color:var(--fg)}.x-login-field:focus{border-color:color-mix(in oklch, var(--alpha), transparent 30%);outline:none}.x-login-form .x-btn{font-weight:600;position:relative;overflow:hidden}.x-login-form .x-btn:after{content:"";pointer-events:none;background:linear-gradient(105deg, transparent 35%, color-mix(in oklch, var(--fg), transparent 86%) 50%, transparent 65%);position:absolute;inset:0;transform:translate(-120%)}.x-login-form .x-btn:is(:hover,:focus-visible):not(:disabled):after{animation:x-login-cta-sheen .9s var(--ease-enter)}@keyframes x-login-cta-sheen{to{transform:translate(120%)}}@media (prefers-reduced-motion:reduce){.x-login-form .x-btn:after{animation:none}}.x-login-divider{color:color-mix(in oklch, var(--fg), transparent 55%);align-items:center;gap:.8em;font-size:.8em;display:flex}.x-login-divider:before,.x-login-divider:after{content:"";background:color-mix(in oklch, var(--lines-strong), transparent 40%);flex:auto;height:1px}.x-login-alternates .x-btn svg{block-size:1.1em;inline-size:1.1em;margin-inline-end:.5em}}