body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:1rem;line-height:1.6;color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;transition:background 0.2s,color 0.2s}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:2rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.18s}
.reveal-delay-3{transition-delay:0.26s}
.reveal-delay-4{transition-delay:0.34s}
.reveal-delay-5{transition-delay:0.42s}
.reveal-delay-6{transition-delay:0.50s}
nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border);height:56px;transition:background 0.2s,border-color 0.2s}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-brand{display:flex;align-items:center;gap:0.6rem;font-weight:700;font-size:1.05rem;color:var(--text-primary);letter-spacing:-0.01em;text-decoration:none}
.nav-brand:hover{text-decoration:none}
.nav-logo-mark{width:28px;height:28px;border-radius:7px;background:var(--text-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s}
.nav-logo-mark svg{width:16px;height:16px}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:0.875rem;font-weight:500;color:var(--text-secondary);transition:color 0.2s}
.nav-links a:hover{color:var(--text-primary);text-decoration:none}
.nav-cta{display:flex;align-items:center;gap:0.75rem}
.theme-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s,color 0.2s,border-color 0.2s;flex-shrink:0}
.theme-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.theme-btn svg{width:15px;height:15px;display:none}
.theme-btn .icon-light{display:block}
[data-theme="dark"] .theme-btn .icon-light{display:none}
[data-theme="dark"] .theme-btn .icon-dark{display:block}
.btn{display:inline-flex;align-items:center;gap:0.4rem;font-family:inherit;font-size:0.875rem;font-weight:600;line-height:1;padding:0.65rem 1.5rem;border-radius:12px;border:none;cursor:pointer;transition:background 0.25s ease,transform 0.2s ease,box-shadow 0.25s ease;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,113,227,0.28)}
.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-strong)}
.btn-secondary:hover{background:var(--bg-tertiary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-lg{font-size:1rem;padding:0.85rem 2rem;border-radius:14px}
.hero{padding-top:var(--hero-pad-top);padding-bottom:var(--hero-pad-bot);text-align:center;position:relative;overflow:hidden;will-change:transform}
.hero::before{content:'';position:absolute;inset:-200px 0 -200px 0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;transform:translateY(var(--gy,0px))}
.hero-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-subtle);border:1px solid rgba(0,113,227,0.15);padding:0.35rem 0.85rem;border-radius:100px;margin-bottom:2rem}
.hero-title{font-size:clamp(3.5rem,6vw,5.5rem);font-weight:900;letter-spacing:-0.04em;line-height:1.05;color:var(--text-primary);margin-bottom:1.5rem}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-subtitle{font-size:clamp(1.125rem,2vw,1.375rem);color:var(--text-secondary);font-weight:400;line-height:1.6;max-width:640px;margin:0 auto 2.5rem}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.hero-meta{margin-top:3rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap}
.hero-meta-item{display:flex;align-items:center;gap:0.4rem;font-size:0.8125rem;color:var(--text-secondary);font-weight:500}
.hero-meta-item svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}
.code-section{padding:var(--section-pad) 0;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.code-section-header{text-align:center;margin-bottom:3rem}
.section-eyebrow{font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);margin-bottom:0.75rem}
.section-title{font-size:clamp(1.875rem,3vw,2.5rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:var(--text-primary);margin-bottom:1rem}
.section-subtitle{font-size:1.0625rem;color:var(--text-secondary);max-width:540px;margin:0 auto}
.code-window{border-radius:14px;overflow:hidden;border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);background:var(--code-bg);max-width:820px;margin:0 auto}
.code-titlebar{display:flex;align-items:center;gap:0.5rem;padding:0.875rem 1.25rem;background:var(--bg-primary);border-bottom:1px solid var(--border);position:relative;transition:background 0.2s,border-color 0.2s}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.dot-red{background:#ff5f57}
.dot-yellow{background:#febc2e}
.dot-green{background:#28c840}
.code-filename{position:absolute;left:50%;transform:translateX(-50%);font-size:0.8125rem;font-weight:500;color:var(--text-secondary);font-family:'SF Mono','JetBrains Mono','Fira Code',monospace}
.code-body{overflow-x:auto;padding:1.75rem 2rem}
pre{margin:0;font-family:'SF Mono','JetBrains Mono','Fira Code',monospace;font-size:13.5px;line-height:1.75;color:var(--code-text);tab-size:4}
.tok-keyword{color:var(--syn-keyword);font-weight:600}
.tok-meta{color:var(--syn-meta-key)}
.tok-string{color:var(--syn-string)}
.tok-component{color:var(--syn-component);font-weight:600}
.tok-attr{color:var(--syn-attr)}
.tok-comment{color:var(--syn-comment);font-style:italic}
.tok-punct{color:var(--syn-punct)}
.tok-builtin{color:var(--syn-builtin);font-weight:600}
.tok-operator{color:var(--syn-punct)}
.features-section{padding:var(--section-pad) 0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-top:3.5rem}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2rem;box-shadow:var(--shadow-sm);transition:box-shadow 0.3s ease,transform 0.3s ease,border-color 0.3s ease}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--border-strong)}
.feature-icon{width:42px;height:42px;border-radius:10px;background:var(--accent-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;color:var(--accent)}
.feature-icon svg{width:20px;height:20px}
.feature-name{font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem;letter-spacing:-0.01em}
.feature-desc{font-size:0.9375rem;color:var(--text-secondary);line-height:1.65}
.reactive-section{padding:var(--section-pad) 0;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.reactive-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3.5rem}
.reactive-form-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:2rem;box-shadow:var(--shadow-sm)}
.form-title{font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;color:var(--text-primary);margin-bottom:0.375rem}
.form-subtitle{font-size:0.9375rem;color:var(--text-secondary);margin-bottom:1.75rem;line-height:1.6}
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--text-primary);margin-bottom:0.4rem}
.form-input{width:100%;padding:0.65rem 0.9rem;background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:10px;font-family:inherit;font-size:0.9375rem;color:var(--text-primary);outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.form-input::placeholder{color:var(--text-tertiary)}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.form-textarea{resize:vertical;min-height:90px}
.form-submit{width:100%;margin-top:0.25rem;font-family:inherit;font-size:0.9375rem;font-weight:600;padding:0.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:background 0.2s,transform 0.2s,opacity 0.2s}
.form-submit:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}
.form-submit:disabled{opacity:0.4;cursor:default}
.form-success{display:none;padding:1.5rem 0;text-align:center}
.form-success.visible{display:block;animation:fadeUp 0.4s ease forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.form-success-icon{width:48px;height:48px;border-radius:50%;background:rgba(26,158,76,0.1);color:#1a9e4c;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;animation:popIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes popIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
.form-success-title{font-size:1.0625rem;font-weight:700;color:var(--text-primary);margin-bottom:0.375rem;letter-spacing:-0.01em}
.form-success-text{font-size:0.9375rem;color:var(--text-secondary);line-height:1.6}
.form-reset{margin-top:0.875rem;font-size:0.8125rem;font-weight:500;color:var(--accent);background:none;border:none;cursor:pointer;font-family:inherit;padding:0}
.form-reset:hover{text-decoration:underline}
.comparison-section{padding:var(--section-pad) 0;background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.table-wrapper{overflow-x:auto;border-radius:14px;border:1px solid var(--border-strong);box-shadow:var(--shadow-md);margin-top:3.5rem;background:var(--bg-card)}
table{width:100%;border-collapse:collapse;font-size:0.875rem}
thead th{padding:1rem 1.25rem;font-weight:700;text-align:center;font-size:0.8125rem;letter-spacing:0.01em;color:var(--text-secondary);background:var(--bg-tertiary);border-bottom:1px solid var(--border);white-space:nowrap}
thead th:first-child{text-align:left;color:var(--text-primary)}
thead th.col-sinth{color:var(--accent);background:var(--accent-subtle)}
tbody tr:nth-child(even){background:var(--bg-tertiary)}
tbody td{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);text-align:center;color:var(--text-secondary);font-size:0.875rem}
tbody tr:last-child td{border-bottom:none}
tbody td:first-child{text-align:left;font-weight:500;color:var(--text-primary)}
.check{color:#1a9e4c;font-size:1rem;font-weight:700}
.dash{color:var(--text-secondary);opacity:0.5}
.col-sinth{background:rgba(0,113,227,0.04)}
[data-theme="dark"] .col-sinth{background:rgba(41,151,255,0.05)}
.install-section{padding:var(--section-pad) 0}
.install-wrap{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.install-copy h2{font-size:clamp(2rem,3vw,2.75rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15;margin-bottom:1rem;color:var(--text-primary)}
.install-copy p{font-size:1.0625rem;color:var(--text-secondary);line-height:1.7;margin-bottom:2rem}
.install-commands{display:flex;flex-direction:column;gap:0.75rem}
.cmd-block{background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:10px;padding:0.875rem 1.25rem;font-family:'SF Mono','JetBrains Mono','Fira Code',monospace;font-size:0.875rem;color:var(--text-primary);display:flex;align-items:center;gap:0.75rem;position:relative}
.cmd-prompt{color:var(--accent);font-weight:700;user-select:none}
.cmd-copy-btn{position:absolute;right:0.75rem;background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:0.25rem;border-radius:6px;display:flex;align-items:center;transition:color 0.2s,background 0.2s}
.cmd-copy-btn:hover{color:var(--text-primary);background:var(--border)}
.cmd-copy-btn svg{width:14px;height:14px}
.philosophy-section{padding:var(--section-pad) 0;background:var(--bg-secondary);border-top:1px solid var(--border)}
.philosophy-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;margin-top:3.5rem}
.philosophy-block h3{font-size:1.25rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:0.75rem;color:var(--text-primary)}
.philosophy-block p{font-size:0.9375rem;color:var(--text-secondary);line-height:1.75;margin-bottom:1rem}
.not-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.not-list li{display:flex;align-items:center;gap:0.6rem;font-size:0.9375rem;color:var(--text-secondary)}
.not-list li::before{content:'×';color:#c0392b;font-weight:700;font-size:1rem;line-height:1;flex-shrink:0}
footer{border-top:1px solid var(--border);padding:3rem 0;background:var(--bg-primary)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.footer-brand{display:flex;align-items:center;gap:0.6rem;font-weight:700;font-size:0.9375rem;color:var(--text-primary)}
.footer-copy{font-size:0.8125rem;color:var(--text-secondary)}
.footer-links{display:flex;gap:1.5rem;list-style:none}
.footer-links a{font-size:0.8125rem;color:var(--text-secondary);transition:color 0.2s}
.footer-links a:hover{color:var(--text-primary);text-decoration:none}
@media(max-width:768px){
  :root{--section-pad:5rem;--hero-pad-top:7rem;--hero-pad-bot:4rem}
  .nav-links{display:none}
  .install-wrap,.philosophy-grid,.reactive-grid{grid-template-columns:1fr;gap:2.5rem}
  .features-grid{grid-template-columns:1fr}
  .hero-meta{gap:1.25rem}
}
@media(max-width:480px){
  .container{padding-inline:1.25rem}
  .code-body{padding:1.25rem}
  pre{font-size:12px}
}