/* Hallmark · component: authentication form · genre: atmospheric · theme: Hermes-aligned
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (40–41)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
@font-face { font-display: swap; font-family: "Hermes Rules"; src: url('https://hermes-agent.nousresearch.com/font/Rules/RulesVariable.woff2') format('woff2'); unicode-range: U+0000-024F; }
@font-face { font-display: swap; font-family: "Hermes Rules Gothic"; src: url('https://hermes-agent.nousresearch.com/font/Rules/RulesGothicCnd-Light.woff2') format('woff2'); unicode-range: U+0000-024F; }
:root { --color-ink: oklch(95% .01 264); --color-muted: oklch(62% .02 264); --color-ground: oklch(12% .02 264); --color-surface: oklch(16% .024 264); --color-rule: oklch(31% .03 264); --color-brand: oklch(43.45% .301 264.05); --color-focus: oklch(74% .18 264.05); --color-error: oklch(70% .16 25); --font-chinese: "Noto Sans SC", "Microsoft YaHei", sans-serif; --font-body: "Hermes Rules", var(--font-chinese); --font-display: "Hermes Rules Gothic", var(--font-chinese); --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 28px; --space-6: 32px; --space-7: 56px; --radius: 8px; --radius-lg: 12px; --ease-out: cubic-bezier(.2, .75, .25, 1); --dur-fast: 140ms; }
* { box-sizing: border-box; } html, body { min-height: 100%; overflow-x: clip; } body { align-items: center; background: var(--color-ground); color: var(--color-ink); display: grid; font-family: var(--font-body); margin: 0; padding: var(--space-4); } main { margin: auto; max-width: 420px; width: 100%; }.mark { align-items: center; display: flex; font-weight: 700; gap: var(--space-2); margin-bottom: var(--space-7); }.mark span { align-items: center; background: var(--color-brand); border-radius: var(--radius); color: var(--color-ink); display: inline-flex; height: var(--space-5); justify-content: center; width: var(--space-5); }.panel { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: var(--space-5); }.panel > p:first-child { color: var(--color-brand); font-size: 12px; font-weight: 600; letter-spacing: .08em; margin: 0 0 var(--space-2); }.panel h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 12vw, 4rem); line-height: 1; margin: 0 0 var(--space-3); min-width: 0; overflow-wrap: anywhere; }.panel > p { color: var(--color-muted); font-size: 14px; line-height: 1.7; margin: 0 0 var(--space-6); } form { display: grid; gap: var(--space-4); } label { display: grid; font-size: 14px; font-weight: 500; gap: var(--space-2); } input, button { font: inherit; min-height: 44px; } input { background: var(--color-ground); border: 1px solid var(--color-rule); border-radius: var(--radius); color: var(--color-ink); outline: 2px solid transparent; padding: 0 var(--space-3); } input:hover { background: var(--color-surface); } input:focus-visible, button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; } input[aria-invalid="true"] { border-color: var(--color-error); } button { background: var(--color-brand); border: 1px solid var(--color-brand); border-radius: var(--radius); color: var(--color-ink); cursor: pointer; font-weight: 600; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; } button:hover { background: var(--color-surface); border-color: var(--color-focus); } button:active { transform: translateY(1px); } button:disabled { cursor: not-allowed; opacity: .55; } button[data-state="loading"] { cursor: wait; } button[data-state="error"] { border-color: var(--color-error); } button[data-state="success"] { background: var(--color-surface); border-color: var(--color-focus); } #message { color: var(--color-muted); font-size: 13px; min-height: 1lh; margin: 0; } #message.error { color: var(--color-error); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }