@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');
:root{
--su-ink:#15181b;--su-ink-hover:#30353a;--su-text-2:#30353a;--su-muted:#555b61;--su-subtle:#8b9096;--su-faint:#b8bdc2;
--su-bg:#f4f5f6;--su-surface:#fff;--su-line:#dfe2e5;--su-border:#dfe2e5;--su-divider:#eef0f2;
--su-accent:oklch(0.5 0.11 210);
--su-success-bg:#e6f2ee;--su-success:#1f6b4f;--su-warning:#c9822b;--su-danger:#a63a2e;--su-danger-border:#e5b3ad;
--su-brand-line:#06c755;--su-overlay:rgba(21,24,27,.45);--su-shadow-float:0 8px 30px rgba(21,24,27,.12);
--su-radius:12px;--su-r-sm:8px;--su-r-input:10px;--su-r-md:12px;--su-r-card:14px;--su-r-modal:16px;--su-r-pill:999px;
--su-h-btn:40px;--su-h-touch:44px;--su-h-form:48px;--su-h-header:64px;
--su-pad-x:clamp(16px,3vw,28px);--su-max:1160px;
--su-font:Anuphan,system-ui,sans-serif;--su-mono:"JetBrains Mono",monospace;
}
.su-mono{font-family:var(--su-mono)}
.su-card{background:var(--su-surface);border:1px solid var(--su-border);border-radius:var(--su-r-card);padding:20px}
.su-btn{display:inline-flex;align-items:center;justify-content:center;height:var(--su-h-btn);padding:0 16px;border-radius:var(--su-r-sm);border:1px solid var(--su-ink);background:var(--su-ink);color:#fff;font:600 14px var(--su-font);cursor:pointer;text-decoration:none}
.su-btn:hover{background:var(--su-ink-hover);color:#fff;text-decoration:none}
.su-btn--ghost{background:var(--su-surface);color:var(--su-ink);border-color:var(--su-border)}
.su-btn--ghost:hover{background:var(--su-surface);color:var(--su-ink);border-color:var(--su-ink)}
.su-btn--danger{background:var(--su-surface);color:var(--su-danger);border-color:var(--su-danger-border)}
.su-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--su-r-pill);font-size:12px;font-weight:600;background:var(--su-divider);color:var(--su-muted)}
.su-pill--ok{background:var(--su-success-bg);color:var(--su-success)}