:root { color-scheme: light dark; --ff-canvas: #fafafa; --ff-surface: #ffffff; --ff-surface-2: #f4f4f5; --ff-surface-3: #f4f4f5; --ff-border: #e4e4e7; --ff-border-strong: #e4e4e7; --ff-text: #18181b; --ff-muted: #71717a; --ff-faint: #71717a; --ff-accent: #18181b; --ff-accent-2: #6366f1; --ff-success: #24b47e; --ff-warning: #d98e2b; --ff-danger: #e35463; --ff-inverse: #09090b; --ff-shadow: 0 18px 50px rgba(35,40,65,.12); --ff-radius: 14px; }
.light, [data-theme="light"] { color-scheme: light; --ff-canvas: #fafafa; --ff-surface: #ffffff; --ff-surface-2: #f4f4f5; --ff-surface-3: #f4f4f5; --ff-border: #e4e4e7; --ff-border-strong: #e4e4e7; --ff-text: #18181b; --ff-muted: #71717a; --ff-faint: #71717a; --ff-inverse: #09090b; --ff-shadow: 0 18px 50px rgba(35,40,65,.12); }
.dark, [data-theme="dark"] { color-scheme: dark; --ff-canvas: #09090b; --ff-surface: #18181b; --ff-surface-2: #27272a; --ff-surface-3: #27272a; --ff-border: #3f3f46; --ff-border-strong: #3f3f46; --ff-text: #fafafa; --ff-muted: #a1a1aa; --ff-faint: #a1a1aa; --ff-inverse: #fafafa; --ff-shadow: 0 22px 60px rgba(0,0,0,.34); }
@media (prefers-color-scheme: dark) { :root:not(.light):not([data-theme="light"]) { color-scheme: dark; --ff-canvas: #09090b; --ff-surface: #18181b; --ff-surface-2: #27272a; --ff-surface-3: #27272a; --ff-border: #3f3f46; --ff-border-strong: #3f3f46; --ff-text: #fafafa; --ff-muted: #a1a1aa; --ff-faint: #a1a1aa; --ff-inverse: #fafafa; --ff-shadow: 0 22px 60px rgba(0,0,0,.34); } }
* { box-sizing: border-box; } html, body { width: 100%; min-height: 100%; } body { margin: 0; overflow: hidden; background: var(--ff-canvas); color: var(--ff-text); font-family: GeistSans, "GeistSans Fallback", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } button, input, textarea, select { color: inherit; font: inherit; } button { cursor: pointer; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--ff-accent) 40%, transparent); outline-offset: 2px; }
.element-canvas { display: grid; min-height: 600px; place-items: center; padding: 36px; background: var(--ff-canvas); } .ff-component { width: min(100%, 520px); } .ff-spec { transition: background .2s ease, border-color .2s ease; } .ff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 12px; } .ff-kicker { display: block; margin-bottom: 6px; color: var(--ff-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .ff-title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.035em; } .ff-copy { margin: 0 0 18px; color: var(--ff-muted); font-size: 13px; line-height: 1.55; } .ff-muted { display: block; margin-top: 5px; color: var(--ff-muted); font-size: 12px; line-height: 1.4; } .ff-center { text-align: center; } .ff-label { display: block; margin: 0 0 7px; color: var(--ff-muted); font-size: 11px; font-weight: 700; } .ff-field { width: 100%; min-height: 42px; border: 1px solid var(--ff-border); border-radius: 10px; background: var(--ff-surface); padding: 0 12px; font-size: 13px; outline: none; } .ff-textarea { min-height: 118px; padding: 12px; resize: vertical; } .ff-field::placeholder { color: var(--ff-faint); } .ff-field:focus { border-color: var(--ff-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ff-accent) 14%, transparent); } .ff-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; } .ff-btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--ff-border); border-radius: 9px; background: var(--ff-surface); padding: 0 14px; color: var(--ff-text); font-size: 12px; font-weight: 750; } .ff-btn:hover, .ff-btn.is-active { border-color: var(--ff-border-strong); background: var(--ff-surface-2); } .ff-btn--primary { border-color: var(--ff-accent); background: var(--ff-accent); color: #fff; } .ff-btn--primary:hover { filter: brightness(1.08); } .ff-btn--small { min-height: 31px; padding: 0 10px; font-size: 11px; } .ff-output { display: block; min-height: 20px; margin-top: 14px; color: var(--ff-muted); font-size: 12px; } .ff-badge { display: inline-flex; min-height: 23px; align-items: center; gap: 6px; border: 1px solid var(--ff-border); border-radius: 999px; background: var(--ff-surface-2); padding: 0 9px; color: var(--ff-muted); font-size: 10px; font-weight: 800; white-space: nowrap; } .ff-badge--accent { border-color: color-mix(in srgb, var(--ff-accent) 35%, var(--ff-border)); background: color-mix(in srgb, var(--ff-accent) 15%, var(--ff-surface)); color: var(--ff-accent); } .ff-badge--green { border-color: color-mix(in srgb, var(--ff-success) 35%, var(--ff-border)); color: var(--ff-success); } .ff-badge--outline { cursor: pointer; color: var(--ff-text); } .ff-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ff-success); font-size: 11px; font-weight: 700; } .ff-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .ff-status--muted { color: var(--ff-faint); } .ff-avatar { display: inline-grid; width: 34px; height: 34px; place-items: center; border: 2px solid var(--ff-canvas); border-radius: 50%; background: color-mix(in srgb, var(--ff-accent) 24%, var(--ff-surface-2)); color: var(--ff-text); font-size: 10px; font-weight: 800; } .ff-avatar--alt { background: color-mix(in srgb, var(--ff-accent-2) 24%, var(--ff-surface-2)); } .ff-avatar--third { background: color-mix(in srgb, var(--ff-warning) 20%, var(--ff-surface-2)); } .ff-icon-btn { display: inline-grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--ff-border); border-radius: 8px; background: var(--ff-surface); font-size: 16px; } .ff-icon-btn--accent { border-color: var(--ff-accent); background: var(--ff-accent); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 520px) { .element-canvas { padding: 22px; } .ff-title { font-size: 18px; } .ff-head { gap: 8px; } .ff-head .ff-badge { font-size: 9px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; } }