@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/static/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Variable"; src: url(/static/fonts/ibm-plex-sans-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 100 700; font-style: normal; font-display: swap; }
:root { --bg:#f6f2ea; --panel:#fffdf8; --ink:#1b1814; --ink-2:#3b362e; --muted:#776e61; --faint:#a69c8c; --line:#e7dfd0; --line-strong:#d6cab5; --accent-line:#e9b893; --accent-soft:#f7e6d8; --primary:linear-gradient(180deg,#cf6224,#b74e14); --primary-ink:#fffaf2; --primary-shadow:0 1px 0 rgb(255 255 255/.25) inset,0 6px 16px -8px rgb(178 74 18/.7); --focus:0 0 0 3px rgb(194 86 26/.25); --bad:#a8321f; --bad-bg:#f8e1da; --ok:#2d6a43; --ok-bg:#e4f0e4; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg:#08080a; --panel:#111114; --ink:#eeece7; --ink-2:#cfccc5; --muted:#8e8b85; --faint:#5d5b57; --line:rgb(236 234 228/.08); --line-strong:rgb(236 234 228/.15); --accent-line:rgb(226 223 216/.35); --accent-soft:rgb(226 223 216/.09); --primary:linear-gradient(135deg,#f6f5f1 0%,#d9d7d1 38%,#b3b1ab 55%,#ebe9e4 78%,#c6c4be 100%); --primary-ink:#0b0b0c; --primary-shadow:0 1px 0 rgb(255 255 255/.6) inset,0 8px 22px -10px rgb(230 228 222/.35); --focus:0 0 0 3px rgb(226 223 216/.22); --bad:#f2917f; --bad-bg:rgb(242 145 127/.1); --ok:#8fd3a6; --ok-bg:rgb(143 211 166/.1); color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 "IBM Plex Sans Variable", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.art { position: relative; overflow: hidden; background: #070708; color: #e9e7e2; padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between; }
.art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 500px at 20% 10%, rgb(235 233 228/.10), transparent 60%), radial-gradient(600px 500px at 90% 100%, rgb(214 110 40/.16), transparent 60%); }
.art::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255/.035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255/.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 40% 40%, black 30%, transparent 75%); mask-image: radial-gradient(ellipse at 40% 40%, black 30%, transparent 75%); }
.art > * { position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand svg { width: 34px; height: 34px; }
.brand b { font: 400 25px/1 "Instrument Serif", Georgia, serif; letter-spacing: .01em; display: block; }
.brand small { display: block; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #8d8a84; margin-top: 4px; }
.line { font: 400 clamp(40px, 4.4vw, 64px)/1.02 "Instrument Serif", Georgia, serif; letter-spacing: -.015em; max-width: 520px; margin: 0; }
.line em { font-style: italic; background: linear-gradient(135deg,#f7f6f2,#bdbbb5 45%,#e6e4df 70%,#a9a7a1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fine { color: #8d8a84; font-size: 13px; max-width: 440px; margin: 0; }
.panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.card { width: min(420px, 100%); }
h1 { font: 400 38px/1.05 "Instrument Serif", Georgia, serif; margin: 0 0 10px; letter-spacing: -.005em; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); }
form { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 12.5px; font-weight: 560; color: var(--ink-2); margin-top: 10px; }
input[type=email], input[type=password], input[type=text] { width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 9px; font: inherit; background: var(--panel); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input:focus { outline: none; border-color: var(--accent-line); box-shadow: var(--focus); }
.row { display: flex; gap: 12px; } .row > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
button, .button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; padding: 12px; border-radius: 10px; border: 1px solid transparent; background: var(--primary); color: var(--primary-ink); box-shadow: var(--primary-shadow); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .button:hover { filter: brightness(1.05); }
button:focus-visible, .button:focus-visible { outline: none; box-shadow: var(--focus); }
.button.secondary { background: var(--panel); color: var(--ink); border-color: var(--line-strong); box-shadow: none; font-weight: 500; margin-top: 10px; }
.button.secondary:hover { border-color: var(--accent-line); filter: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 20px 0 6px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.error { background: var(--bad-bg); color: var(--bad); border-radius: 9px; padding: 10px 13px; font-size: 14px; }
.ok { background: var(--ok-bg); color: var(--ok); border-radius: 9px; padding: 10px 13px; font-size: 14px; }
.foot { margin-top: 28px; font-size: 12px; color: var(--faint); }
@media (max-width: 860px) { .wrap { grid-template-columns: 1fr; } .art { padding: 28px 24px; min-height: 0; gap: 28px; } .line { font-size: 38px; } }