*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0}body{min-width:320px;min-height:100vh}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--color-bg);color:var(--color-text)}#root{min-height:100vh;display:flex}.app{flex:1;max-width:1120px;margin:0 auto;padding:2.5rem 1.5rem 2rem;display:grid;grid-template-rows:auto 1fr auto;gap:2rem}.app__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem}.app__title{margin:0 0 .25rem;font-size:1.75rem}.app__subtitle{margin:0;font-size:.95rem;color:var(--color-text-muted)}.app__main{border-radius:1rem;border:1px solid var(--color-border);background:linear-gradient(135deg,color-mix(in srgb,var(--color-surface) 85%,var(--color-accent) 15%),var(--color-surface));padding:1.5rem}.app__footer{font-size:.8rem;color:var(--color-text-muted)}.theme-switcher{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface)}.theme-switcher__label{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.theme-switcher__select{border-radius:999px;border:1px solid transparent;padding:.25rem .75rem;font-size:.9rem;background:var(--color-surface-hover);color:var(--color-text)}.theme-switcher__select:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}.preview-card{border-radius:.9rem;border:1px solid var(--color-border);background:var(--color-surface);padding:1rem 1.1rem 1.1rem;box-shadow:0 14px 30px #0f172a26}.preview-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.preview-card__badge{display:inline-flex;align-items:center;padding:.1rem .6rem;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface-hover)}.preview-card__title{margin:.4rem 0 0;font-size:1.05rem}.preview-card__body{font-size:.9rem;color:var(--color-text-muted)}.preview-buttons{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.1rem}.preview-button{border-radius:999px;border:1px solid transparent;padding:.45rem .95rem;font-size:.85rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;--btn-bg: var(--color-surface-hover);--btn-bg-hover: var(--color-surface);--btn-border: transparent;--btn-border-hover: var(--color-border);--btn-color: var(--color-text);--btn-shadow: none;--btn-shadow-hover: none;background-color:var(--btn-bg);color:var(--btn-color);border-color:var(--btn-border);box-shadow:var(--btn-shadow);transition:background-color .15s ease-out,color .15s ease-out,box-shadow .18s ease-out,border-color .15s ease-out,transform .12s ease-out;transform-origin:center}.preview-button:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);box-shadow:var(--btn-shadow-hover);transform:translateY(-1px)}.preview-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.preview-button--primary{--btn-bg: var(--color-primary);--btn-bg-hover: var(--color-primary-hover);--btn-border: transparent;--btn-border-hover: transparent;--btn-color: #ffffff;--btn-shadow: 0 14px 30px rgba(37, 99, 235, .35);--btn-shadow-hover: 0 18px 38px rgba(37, 99, 235, .45)}.preview-button--ghost{--btn-bg: transparent;--btn-bg-hover: var(--color-surface-hover);--btn-border: var(--color-border);--btn-border-hover: var(--color-border);--btn-color: var(--color-text)}.preview-button--accent{--btn-bg: var(--color-accent);--btn-bg-hover: var(--color-accent-hover);--btn-border: transparent;--btn-border-hover: transparent;--btn-color: #ffffff;--btn-shadow: 0 12px 26px rgba(16, 185, 129, .38);--btn-shadow-hover: 0 16px 34px rgba(16, 185, 129, .48)}.landing-hero{width:100%;padding:1.75rem 1.75rem 1.9rem;margin-bottom:1.75rem;border-radius:1rem;border:1px solid var(--color-border);background:var(--color-surface)}.landing-hero__title{margin:0 0 .6rem;font-size:2.2rem;text-align:center}.landing-hero__subtitle{margin:0 0 1.1rem;font-size:.95rem;color:var(--color-text-muted);max-width:34rem;text-align:center;margin-left:auto;margin-right:auto}@media(max-width:720px){.landing-hero{padding:1.25rem 1.1rem 1.35rem;margin-bottom:1.25rem}}.code-block{border-radius:.5rem;border:1px solid var(--color-border);background:var(--color-surface-hover);overflow:hidden}.code-block__header{padding:.4rem .75rem;border-bottom:1px solid var(--color-border);background:var(--color-surface);font-size:.75rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.code-block__lang{font-family:ui-monospace,monospace}.code-block__pre{margin:0;padding:.9rem 1rem;overflow-x:auto;font-size:.8rem;line-height:1.5}.code-block__code{font-family:ui-monospace,SF Mono,Monaco,Cascadia Code,monospace;color:var(--color-text);white-space:pre}.section-code{margin-top:1.5rem}.section-code__title{margin:0 0 .5rem;font-size:1rem;font-weight:600;color:var(--color-text)}.section-code__description{margin:0 0 .75rem;font-size:.875rem;color:var(--color-text-muted)}:root[data-theme=light]{color-scheme:light;--color-bg: #f8f9fc;--color-surface: #ffffff;--color-surface-hover: #eef1f6;--color-text: #1a1d24;--color-text-muted: #5c6370;--color-primary: #2563eb;--color-primary-hover: #1d4ed8;--color-accent: #c026d3;--color-accent-hover: #a21caf;--color-border: #e2e6ee}:root[data-theme=dark]{color-scheme:dark;--color-bg: #0d0d12;--color-surface: #16161d;--color-surface-hover: #1e1e28;--color-text: #e8e9ed;--color-text-muted: #8b8f99;--color-primary: #8b5cf6;--color-primary-hover: #7c3aed;--color-accent: #10b981;--color-accent-hover: #059669;--color-border: #2a2a35}:root[data-theme=neon]{color-scheme:dark;--color-bg: #050508;--color-surface: #0c0c14;--color-surface-hover: #141428;--color-text: #e4e8f0;--color-text-muted: #8892a4;--color-primary: #00d4ff;--color-primary-hover: #00b8e6;--color-accent: #ff6b35;--color-accent-hover: #e55a2b;--color-border: #1e3a4a}:root[data-theme=pastel]{color-scheme:light;--color-bg: #f5f3ff;--color-surface: #fef7f7;--color-surface-hover: #fce7f3;--color-text: #4c4f5c;--color-text-muted: #7c7f8c;--color-primary: #6366f1;--color-primary-hover: #4f46e5;--color-accent: #f472b6;--color-accent-hover: #ec4899;--color-border: #e9d5ff}