/* The reference's glass controls and gentle steps, within the existing dotted screen. */
#authForm.auth-card{
  inline-size:min(460px,100%);gap:24px;padding:32px 36px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface-2) 94%,transparent),color-mix(in srgb,var(--surface-auth) 78%,transparent));
  border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);border-radius:28px;
  box-shadow:0 24px 70px #0005,inset 0 1px 0 color-mix(in srgb,var(--fg) 6%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:auth-card-in 360ms cubic-bezier(.22,1,.36,1) both;
}
#authForm.auth-card>*{flex-shrink:0}
#authForm.auth-resizing{overflow:hidden;will-change:height}
.auth-body{display:flex;flex-direction:column;gap:22px;min-inline-size:0}
#authForm .auth-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:650;letter-spacing:.09em}
#authForm .auth-brand .logo{display:grid;place-items:center;inline-size:48px;block-size:48px;margin:0;color:var(--accent);animation:auth-mark-arrive 700ms cubic-bezier(.22,1,.36,1) both}
#authForm .auth-brand .mone-icon{inline-size:42px;block-size:42px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 30%,transparent));animation:auth-mark-breathe 1800ms ease-in-out 700ms 2}
#authForm .auth-brand .mone-icon path{stroke-dasharray:60;animation:auth-mark-draw 700ms cubic-bezier(.22,1,.36,1) 150ms both}
.auth-brand-name{line-height:18px;animation:auth-name-reveal 520ms cubic-bezier(.22,1,.36,1) 650ms both}
.auth-modes{position:relative;display:grid;grid-template-columns:1fr 1fr;align-self:center;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px;background:color-mix(in srgb,var(--surface-auth) 30%,transparent)}
.auth-modes::before{content:"";position:absolute;inset-block:4px;inset-inline-start:4px;inline-size:calc(50% - 6px);border-radius:999px;background:color-mix(in srgb,var(--fg) 9%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 8%,transparent),0 2px 6px #0002;transition:inset-inline-start 280ms cubic-bezier(.22,1,.36,1);pointer-events:none}
#authForm[data-mode=sign-up] .auth-modes::before{inset-inline-start:calc(50% + 2px)}
.auth-modes button{position:relative;border:0;background:transparent;border-radius:999px;padding:9px 23px;color:var(--fg-muted);font-size:13px;font-weight:550;transition:color 180ms}
.auth-modes button[aria-pressed=true],.auth-modes button:hover{color:var(--fg)}
#authForm .auth-heading{text-align:center;display:grid;gap:10px}
#authForm h1{font-family:var(--font-display),Georgia,serif;font-size:clamp(30px,4.5vw,40px);line-height:1.12;font-weight:400;letter-spacing:-.035em;text-wrap:balance}
#authForm .sub{margin:0;font-size:13px;line-height:1.6;color:var(--fg-muted)}
.auth-fields{display:flex;flex-direction:column;gap:22px;min-inline-size:0}
.auth-field{display:grid;gap:9px;min-inline-size:0}
#authForm .field-label{font-size:12px;font-weight:500;padding-inline:16px}
.auth-glass-field{position:relative;display:flex;align-items:center;min-block-size:54px;min-inline-size:0;padding:4px;border-radius:999px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--fg) 3%,transparent),color-mix(in srgb,var(--fg) 7%,transparent),color-mix(in srgb,var(--fg) 3%,transparent));
  border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--fg) 7%,transparent),inset 0 -1px 2px #0004,0 5px 12px #0002;
  transition:border-color 180ms,box-shadow 180ms,background 180ms}
.auth-glass-field:focus-within{border-color:color-mix(in srgb,var(--accent) 68%,var(--fg));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 1px 1px color-mix(in srgb,var(--fg) 9%,transparent)}
.auth-glass-field:has([aria-invalid=true]){border-color:color-mix(in srgb,var(--fg) 45%,transparent)}
.auth-field-icon{display:flex;justify-content:center;flex:0 0 40px;color:var(--fg-muted)}
#authForm .auth-glass-field .input{flex:1;min-inline-size:0;inline-size:0;block-size:42px;border:0;padding:0 6px;background:transparent;box-shadow:none;outline:0;font-size:14px;border-radius:999px;color:var(--fg)}
#authForm .auth-glass-field .input::placeholder{color:var(--fg-muted);opacity:.8}
#authForm .input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px var(--surface-2) inset;-webkit-text-fill-color:var(--fg);caret-color:var(--fg)}
.auth-inline-next,.auth-visibility{display:grid;place-items:center;flex:0 0 42px;block-size:42px;border-radius:999px;border:0;background:transparent;color:var(--fg-muted);transition:background 160ms,color 160ms,transform 160ms}
.auth-inline-next{background:color-mix(in srgb,var(--fg) 9%,transparent);color:var(--fg);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 13%,transparent),0 2px 3px #0003}
.auth-inline-next:hover,.auth-visibility:hover{background:color-mix(in srgb,var(--fg) 13%,transparent);color:var(--fg)}
.auth-inline-next:active{transform:scale(.94)}
.auth-identity{display:flex;align-items:center;gap:10px;max-inline-size:100%;align-self:center;background:transparent;border:0;padding:0 6px;color:var(--fg-muted);font-size:12px}
.auth-identity span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
.auth-identity .mone-icon{inline-size:16px;block-size:16px;flex-shrink:0}
.auth-identity:hover{color:var(--fg)}
#authForm .auth-glass-button{display:flex;align-items:center;justify-content:center;gap:12px;min-block-size:51px;padding:12px 22px;inline-size:100%;border-radius:999px;color:var(--fg);font-size:14px;font-weight:600;
  background:linear-gradient(120deg,color-mix(in srgb,var(--fg) 8%,transparent),color-mix(in srgb,var(--fg) 16%,transparent),color-mix(in srgb,var(--fg) 7%,transparent));
  border:1px solid color-mix(in srgb,var(--fg) 23%,transparent);box-shadow:inset 0 1px 1px color-mix(in srgb,var(--fg) 15%,transparent),0 6px 16px #0003;
  transition:transform 180ms,box-shadow 180ms,background 180ms}
#authForm .auth-glass-button:hover{box-shadow:inset 0 1px 1px color-mix(in srgb,var(--fg) 20%,transparent),0 8px 18px #0004;transform:translateY(-1px)}
#authForm .auth-glass-button:active{transform:translateY(1px)}
.auth-submit-icon{display:grid;place-items:center}
.auth-submit-icon .spinner{inline-size:17px;block-size:17px}
.auth-back{align-self:center;display:flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--fg-muted);font-size:12px;padding:0}
.auth-back:hover{color:var(--fg)}
.auth-back .mone-icon{inline-size:15px;block-size:15px}
[dir=rtl] .auth-back .mone-icon,[dir=rtl] .auth-inline-next .mone-icon,[dir=rtl] .auth-submit-icon>.mone-icon{transform:scaleX(-1)}
.auth-feedback{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:start;padding-inline:20px;margin-block-start:-8px;min-inline-size:0}
.auth-feedback-icon{display:grid;place-items:center;color:var(--fg-muted);padding-block-start:1px}
.auth-feedback-icon .mone-icon{inline-size:18px;block-size:18px}
#authForm .auth-error{margin:0;min-block-size:0;min-inline-size:0;color:color-mix(in srgb,var(--fg) 75%,var(--fg-muted));font-size:12px;font-weight:400;line-height:1.65;text-align:start;text-wrap:pretty;overflow-wrap:anywhere}
.auth-recovery-actions{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-inline-size:0}
.auth-recovery-button{display:flex;align-items:center;justify-content:center;gap:6px;min-block-size:34px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--fg);font-size:11px;transition:background 180ms,border-color 180ms,transform 180ms}
.auth-recovery-button.secondary{background:transparent;color:var(--fg-muted)}
.auth-recovery-button:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 12%,transparent);border-color:color-mix(in srgb,var(--fg) 25%,transparent)}
.auth-recovery-button:active{transform:scale(.97)}
.auth-recovery-button .mone-icon{inline-size:14px;block-size:14px}
[dir=rtl] .auth-recovery-button .mone-icon{transform:scaleX(-1)}
.auth-notice{font-size:12px;color:var(--fg-muted);line-height:1.6;text-align:center;margin:0}
#authForm .auth-footnote{margin:0;padding-block-start:2px;font-size:11px;color:var(--fg-muted);text-align:center;line-height:1.5}
.auth-workspace-options{font-size:12px;color:var(--fg-muted)}
.auth-workspace-options summary{cursor:pointer;text-align:center;list-style:none;padding:2px;display:flex;justify-content:center;align-items:center;gap:8px}
.auth-workspace-options summary::-webkit-details-marker{display:none}
.auth-workspace-options summary::before{content:"";inline-size:6px;block-size:6px;border-inline-end:1px solid currentColor;border-block-end:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.auth-workspace-options[open] summary::before{transform:rotate(225deg) translateY(-2px)}
.auth-workspace-options summary[aria-disabled=true]{cursor:default}
#authWorkspaceFields{display:grid;gap:14px;padding-block-start:18px}
#authWorkspaceOptions .field{gap:8px}
#authWorkspaceOptions .input,#authWorkspaceOptions .select{border-radius:999px;min-block-size:46px;background:transparent;font-size:13px;padding-inline:16px}
#authForm button:focus-visible,#authWorkspaceOptions summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#authForm button:disabled{opacity:.55;cursor:wait;transform:none}
#authForm.auth-moving button:disabled{opacity:1;cursor:default}
@keyframes auth-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes auth-mark-arrive{from{opacity:0;transform:translateY(5px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes auth-mark-draw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes auth-mark-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.96)}}
@keyframes auth-name-reveal{from{opacity:0;transform:translateY(5px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:480px){#authForm.auth-card{padding:26px 22px;border-radius:24px;gap:22px}#authForm h1{font-size:34px}.auth-modes button{padding-inline:24px}}
@media(max-height:640px){#authForm.auth-card{padding-block:24px;gap:18px}.auth-body{gap:18px}}
@media(prefers-reduced-motion:reduce){#authForm,#authForm *,#authForm *::before,#authForm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}