/* Dmitry's design system «Brøks · Nothing» (https://claude.ai/artifact/A23VzTAR9r1CX3kNs3o2XS):
   white widgets on a dotted ground, black pill for the main action, one light theme. */
:root {
  --bg: #F2F2F2; --dots: #CFCFCF; --surface: #FFFFFF; --ink: #111111; --ink-hover: #3A3A3A;
  --muted: #8C8C8C; --line: #E6E6E6; --soft: #D4D4D4; --accent-ink: #C25A00;
  --pad: 24px; --gap: 16px; --step-dots: 16px; --radius-widget: 24px; --radius-pill: 999px;
  --font-head: Tektur, Onest, system-ui, sans-serif; --font-body: Onest, system-ui, sans-serif;
  --font-label: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: light;
}
body { margin: 0; color: var(--ink); font: 400 15px/1.45 var(--font-body);
  background: var(--bg) radial-gradient(circle, var(--dots) 1px, transparent 1.2px) 0 0 / var(--step-dots) var(--step-dots); }
.wrap { max-width: 440px; margin: 0 auto; padding-block: max(48px, 12vh) 56px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: var(--gap); }
[hidden] { display: none !important; }
.w { box-sizing: border-box; background: var(--surface); border-radius: var(--radius-widget); padding: var(--pad);
  display: flex; flex-direction: column; gap: 12px; margin: 0; min-width: 0; }
h1 { margin: 0 0 4px; font: 400 clamp(26px, 6vw, 34px)/1.12 var(--font-head); }
p { margin: 0; overflow-wrap: anywhere; }
b { font-weight: 500; }
.lbl { margin: 0; font: 500 11px/1.3 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
label.lbl { margin-top: 8px; }
.quiet { color: var(--muted); }
input { box-sizing: border-box; width: 100%; font: 400 16px/1.2 var(--font-body); padding: 12px 18px;
  border-radius: var(--radius-pill); border: 1px solid var(--soft); background: var(--surface); color: var(--ink); }
input:focus { outline: none; border-color: var(--ink); }
#otp { font: 500 22px/1.2 var(--font-label); letter-spacing: .3em; }
.pill, .ghost { font: 400 15px/1 var(--font-body); min-height: 44px; padding: 12px 20px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.pill { border: 1px solid var(--ink); background: var(--ink); color: var(--surface); }
.pill:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.ghost { align-self: flex-start; border: 1px solid var(--soft); background: var(--surface); color: var(--ink); }
.ghost:hover { border-color: var(--ink); }
.pill:disabled, .ghost:disabled, .more:disabled { opacity: .4; cursor: default; }
.msg { font-size: 14px; color: var(--accent-ink); }
.msg:empty { display: none; }
.links { display: flex; gap: 20px; flex-wrap: wrap; }
.more { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; border-bottom: 1px dashed var(--soft);
  padding: 0 0 2px; min-height: 32px; cursor: pointer; }
.more:hover:not(:disabled) { color: var(--ink); }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }