:root { color-scheme: light dark; --background: oklch(1 0 0); --foreground: oklch(.145 0 0); --primary: oklch(.205 0 0); --primary-foreground: oklch(.985 0 0); --border: oklch(.922 0 0); --muted-foreground: oklch(.50 0 0); --ring: oklch(.556 0 0); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
@media (prefers-color-scheme: dark) { :root { --background: oklch(.145 0 0); --foreground: oklch(.985 0 0); --primary: oklch(.922 0 0); --primary-foreground: oklch(.205 0 0); --border: oklch(1 0 0 / 10%); --muted-foreground: oklch(.708 0 0); --ring: oklch(.708 0 0); } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: var(--background); color: var(--foreground); font-size: 16px; line-height: 1.5; }
main { width: min(360px, calc(100% - 40px)); padding: 32px; border: 1px solid var(--border); border-radius: 26px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
h1 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; margin: 0 0 24px; }
button { font: inherit; font-size: 14px; font-weight: 500; min-height: 44px; width: 100%; padding: 10px 16px; border: 1px solid transparent; border-radius: 26px; background: var(--primary); color: var(--primary-foreground); cursor: pointer; transition: background-color 150ms ease-out; }
button:hover:not(:disabled) { background: color-mix(in oklch, var(--primary) 85%, var(--background)); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
p { color: var(--muted-foreground); font-size: 14px; margin: 20px 0 0; overflow-wrap: anywhere; }
p:empty { display: none; }
::selection { background: var(--primary); color: var(--primary-foreground); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }