:root{--color-primary:#e63946;--color-primary-light:#ff5a67;--color-primary-dark:#b8232e;--color-primary-50:#fff1f2;--color-primary-100:#ffe1e3;--color-primary-200:#ffc7cb;--color-primary-300:#ff9fa6;--color-primary-400:#ff6b77;--color-primary-500:#e63946;--color-primary-600:#d62839;--color-primary-700:#b8232e;--color-primary-800:#991f28;--color-primary-900:#7a1c23;--color-white:#fff;--color-black:#000;--color-gray-50:#fafafa;--color-gray-100:#f5f5f5;--color-gray-200:#eee;--color-gray-300:#e0e0e0;--color-gray-400:#bdbdbd;--color-gray-500:#9e9e9e;--color-gray-600:#757575;--color-gray-700:#616161;--color-gray-800:#424242;--color-gray-900:#212121;--color-success:#10b981;--color-success-light:#34d399;--color-success-dark:#059669;--color-warning:#f59e0b;--color-warning-light:#fbbf24;--color-warning-dark:#d97706;--color-error:var(--color-primary);--color-info:#3b82f6;--color-info-light:#60a5fa;--color-info-dark:#2563eb;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-xxl:32px;--radius-none:0;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-circle:999px;--font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--text-display:3.5625rem;--text-headline:1.5rem;--text-title-lg:1.375rem;--text-title:1rem;--text-body:1rem;--text-body-sm:.875rem;--text-label:.75rem;--text-label-sm:.6875rem;--shadow-none:none;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 2px 4px #00000014;--shadow-lg:0 4px 8px #0000001f;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease;--bg-dark:#0f1419;--bg-dark-gradient:linear-gradient(160deg,#0f1419 0%,#1a1f2e 100%);--surface-dark:#1e1e1e;--surface-dark-alt:#232323;--text-dark-primary:#ffffffde;--text-dark-muted:#ffffff8c;--text-dark-dim:#ffffff59;--border-dark:#ffffff14;--card-bg:#ffffff0d;--card-border:#e6394633;--card-hover:#ffffff14;--content-max-width:1100px;--card-max-width:760px;--section-padding:5rem 1.5rem;--icon-xs:16px;--icon-sm:20px;--icon-md:24px;--icon-lg:32px;--icon-xl:48px;--icon-xxl:64px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--font-family);background:var(--bg-dark);color:var(--text-dark-primary);min-height:100vh;line-height:1.6}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}code,pre{font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:var(--text-body-sm)}code{border-radius:var(--radius-sm);color:var(--color-primary-light);background:#ffffff14;padding:2px 6px}pre{border:1px solid var(--border-dark);border-radius:var(--radius-md);padding:var(--space-lg);background:#0000004d;line-height:1.5;overflow-x:auto}pre code{color:var(--text-dark-primary);background:0 0;padding:0}.sg-topbar{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-dark);padding:var(--space-md)var(--space-xl);align-items:center;gap:var(--space-lg);background:#0f1419eb;display:flex;position:sticky;top:0}.sg-topbar-brand{font-size:var(--text-title-lg);color:var(--color-primary);letter-spacing:-.02em;font-weight:700}.sg-topbar-brand span{color:var(--text-dark-muted);margin-left:var(--space-sm);font-weight:400;font-size:var(--text-body)}.sg-topbar-nav{gap:var(--space-md);flex-wrap:wrap;margin-left:auto;display:flex}.sg-topbar-nav a{color:var(--text-dark-muted);font-size:var(--text-body-sm);padding:var(--space-xs)var(--space-sm);border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast)}.sg-topbar-nav a:hover{color:var(--color-primary-light);background:#ffffff0d;text-decoration:none}.sg-container{max-width:1000px;padding:var(--space-xxl)var(--space-xl);margin:0 auto}.sg-hero{text-align:center;padding:4rem var(--space-xl)3rem;border-bottom:1px solid var(--border-dark)}.sg-hero h1{letter-spacing:-.03em;margin-bottom:var(--space-md);font-size:2.5rem;font-weight:700}.sg-hero h1 em{color:var(--color-primary);font-style:normal}.sg-hero p{color:var(--text-dark-muted);font-size:var(--text-body);max-width:560px;margin:0 auto}.sg-hero .sg-meta{margin-top:var(--space-lg);font-size:var(--text-label);color:var(--text-dark-dim)}.sg-section{border-bottom:1px solid var(--border-dark);padding:3rem 0}.sg-section:last-child{border-bottom:none}.sg-section h2{font-size:var(--text-headline);margin-bottom:var(--space-xl);color:var(--text-dark-primary);letter-spacing:-.02em;font-weight:700}.sg-section h3{font-size:var(--text-title-lg);margin-top:var(--space-xl);margin-bottom:var(--space-lg);color:var(--text-dark-primary);font-weight:600}.sg-section h4{font-size:var(--text-title);margin-top:var(--space-lg);margin-bottom:var(--space-md);color:var(--text-dark-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:var(--text-body-sm)}.sg-section p,.sg-section li{color:var(--text-dark-muted);margin-bottom:var(--space-sm);line-height:1.7}.sg-section ul,.sg-section ol{padding-left:var(--space-xl);margin-bottom:var(--space-lg)}.sg-note{border-left:3px solid var(--color-primary);padding:var(--space-md)var(--space-lg);border-radius:0 var(--radius-md)var(--radius-md)0;margin:var(--space-lg)0;font-size:var(--text-body-sm);color:var(--text-dark-muted);background:#ffffff0a}.sg-note strong{color:var(--color-primary-light)}.sg-swatches{gap:var(--space-md);margin-bottom:var(--space-xl);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.sg-swatch{border-radius:var(--radius-lg);border:1px solid var(--border-dark);background:var(--card-bg);overflow:hidden}.sg-swatch-color{width:100%;height:72px}.sg-swatch-info{padding:var(--space-sm)var(--space-md)}.sg-swatch-name{font-size:var(--text-label);color:var(--text-dark-primary);font-weight:600;display:block}.sg-swatch-hex{font-size:var(--text-label-sm);color:var(--text-dark-dim);font-family:SF Mono,Fira Code,monospace}.sg-spacing-demo{gap:var(--space-md);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.sg-spacing-row{align-items:center;gap:var(--space-lg);display:flex}.sg-spacing-bar{background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));border-radius:var(--radius-sm);height:28px;transition:width var(--transition-normal)}.sg-spacing-label{min-width:80px;font-size:var(--text-body-sm);color:var(--text-dark-primary);font-weight:500}.sg-spacing-value{font-size:var(--text-label);color:var(--text-dark-dim);min-width:40px;font-family:SF Mono,Fira Code,monospace}.sg-radius-demo{gap:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.sg-radius-item{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.sg-radius-box{background:var(--card-bg);border:2px solid var(--color-primary);justify-content:center;align-items:center;width:72px;height:72px;display:flex}.sg-radius-box span{font-size:var(--text-label-sm);color:var(--text-dark-dim);font-family:SF Mono,Fira Code,monospace}.sg-radius-name{font-size:var(--text-label);color:var(--text-dark-primary);font-weight:500}.sg-type-demo{gap:var(--space-lg);margin-bottom:var(--space-xl);flex-direction:column;display:flex}.sg-type-row{align-items:baseline;gap:var(--space-xl);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-dark);display:flex}.sg-type-meta{flex-shrink:0;min-width:140px}.sg-type-name{font-size:var(--text-label);color:var(--text-dark-primary);font-weight:600;display:block}.sg-type-size{font-size:var(--text-label-sm);color:var(--text-dark-dim);font-family:SF Mono,Fira Code,monospace}.sg-type-sample{color:var(--text-dark-primary);white-space:nowrap}.sg-shadow-demo{gap:var(--space-xl);margin-bottom:var(--space-xl);flex-wrap:wrap;display:flex}.sg-shadow-item{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.sg-shadow-box{background:var(--surface-dark-alt);border-radius:var(--radius-lg);justify-content:center;align-items:center;width:100px;height:72px;display:flex}.sg-shadow-name{font-size:var(--text-label);color:var(--text-dark-primary);font-weight:500}.sg-shadow-value{font-size:var(--text-label-sm);color:var(--text-dark-dim);text-align:center;font-family:SF Mono,Fira Code,monospace}.sg-button-demo{gap:var(--space-lg);margin-bottom:var(--space-xl);flex-wrap:wrap;align-items:center;display:flex}.sg-btn{align-items:center;gap:var(--space-sm);padding:var(--space-md)var(--space-xl);border-radius:var(--radius-lg);font-size:var(--text-body);cursor:pointer;transition:all var(--transition-fast);font-weight:500;font-family:var(--font-family);border:none;display:inline-flex}.sg-btn-primary{background:var(--color-primary);color:var(--color-white)}.sg-btn-primary:hover{background:var(--color-primary-light)}.sg-btn-secondary{background:var(--color-gray-200);color:var(--color-primary)}.sg-btn-secondary:hover{background:var(--color-gray-300)}.sg-btn-outlined{color:var(--text-dark-primary);border:1px solid var(--text-dark-dim);background:0 0}.sg-btn-outlined:hover{border-color:var(--color-primary);color:var(--color-primary)}.sg-btn-text{color:var(--color-primary);padding:var(--space-sm)var(--space-md);background:0 0}.sg-btn-text:hover{background:#e639461a}.sg-btn-disabled{background:var(--color-gray-600);color:var(--color-gray-400);cursor:not-allowed;opacity:.6}.sg-card-demo{gap:var(--space-lg);margin-bottom:var(--space-xl);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.sg-demo-card{border:1px solid var(--border-dark);border-radius:var(--radius-lg);padding:var(--space-lg);background:var(--card-bg);transition:all var(--transition-fast)}.sg-demo-card:hover{background:var(--card-hover);border-color:var(--card-border);transform:translateY(-2px)}.sg-demo-card h4{text-transform:none;letter-spacing:normal;font-size:var(--text-title);color:var(--text-dark-primary);margin-bottom:var(--space-sm);margin-top:0}.sg-demo-card p{font-size:var(--text-body-sm);color:var(--text-dark-muted);margin-bottom:0}.sg-table{border-collapse:collapse;width:100%;margin-bottom:var(--space-xl);font-size:var(--text-body-sm)}.sg-table th{text-align:left;padding:var(--space-sm)var(--space-md);border-bottom:2px solid var(--border-dark);color:var(--text-dark-muted);font-weight:600;font-size:var(--text-label);text-transform:uppercase;letter-spacing:.05em}.sg-table td{padding:var(--space-sm)var(--space-md);border-bottom:1px solid var(--border-dark);color:var(--text-dark-primary)}.sg-table code{font-size:var(--text-label)}.sg-theme-cards{gap:var(--space-lg);margin-bottom:var(--space-xl);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.sg-theme-card{border:1px solid var(--border-dark);border-radius:var(--radius-lg);background:var(--card-bg);overflow:hidden}.sg-theme-card-header{padding:var(--space-xl)var(--space-lg)var(--space-lg);text-align:center}.sg-theme-card-header h4{text-transform:none;letter-spacing:normal;font-size:var(--text-title);color:var(--color-white);margin-top:0}.sg-theme-card-header p{font-size:var(--text-body-sm);opacity:.8;color:var(--color-white);margin:0}.sg-theme-card-body{padding:var(--space-lg);gap:var(--space-sm);flex-wrap:wrap;display:flex}.sg-theme-chip{padding:var(--space-xs)var(--space-md);border-radius:var(--radius-circle);font-size:var(--text-label);color:var(--color-white);font-family:SF Mono,Fira Code,monospace;font-weight:500}.sg-rules{counter-reset:rule;padding:0;list-style:none}.sg-rules li{counter-increment:rule;padding:var(--space-md)0;border-bottom:1px solid var(--border-dark);gap:var(--space-md);align-items:baseline;display:flex}.sg-rules li:before{content:counter(rule);border-radius:var(--radius-circle);background:var(--color-primary);width:28px;height:28px;color:var(--color-white);font-size:var(--text-label);flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.sg-icon-demo{gap:var(--space-xl);margin-bottom:var(--space-xl);flex-wrap:wrap;align-items:flex-end;display:flex}.sg-icon-item{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.sg-icon-box{color:var(--color-primary);justify-content:center;align-items:center;display:flex}.sg-icon-name{font-size:var(--text-label);color:var(--text-dark-primary);font-weight:500}.sg-icon-size{font-size:var(--text-label-sm);color:var(--text-dark-dim);font-family:SF Mono,Fira Code,monospace}.sg-comparison{overflow-x:auto}.sg-footer{text-align:center;padding:var(--space-xxl)var(--space-xl);color:var(--text-dark-dim);font-size:var(--text-label);border-top:1px solid var(--border-dark)}@media (max-width:640px){.sg-hero h1{font-size:1.75rem}.sg-topbar{padding:var(--space-sm)var(--space-md)}.sg-topbar-nav{display:none}.sg-container{padding:var(--space-xl)var(--space-lg)}.sg-type-row{gap:var(--space-sm);flex-direction:column}.sg-spacing-label{min-width:60px}}