:root{--bg:#ffffff;--fg:#0a0a0a;--card:#ffffff;--card-fg:#0a0a0a;--muted:#f5f5f5;--muted-fg:#737373;--border:#e5e5e5;--primary:#171717;--primary-fg:#fafafa;--destructive:#ef4444;--secondary:#f5f5f5;--secondary-fg:#171717;--accent:#f5f5f5;--radius:8px;--ring:#a3a3a3}
.dark{--bg:#0a0a0a;--fg:#fafafa;--card:#141414;--card-fg:#fafafa;--muted:#1c1c1c;--muted-fg:#a3a3a3;--border:#262626;--primary:#fafafa;--primary-fg:#0a0a0a;--destructive:#dc2626;--secondary:#262626;--secondary-fg:#fafafa;--accent:#262626;--ring:#525252}
*{margin:0;padding:0;box-sizing:border-box}
[v-cloak]{display:none!important}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;transition:background .4s,color .4s}
a{color:inherit;text-decoration:none}

/* Nav (shared) */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--border);transition:background .4s;height:56px;display:flex;align-items:center;padding:0 24px}
.dark .nav{background:rgba(10,10,10,.85)}
.nav-brand{font-size:16px;font-weight:700;letter-spacing:-.5px;display:flex;align-items:center;gap:8px;margin-right:auto}
.nav-brand svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
.nav-links{display:flex;align-items:center;gap:16px}
.nav-link{font-size:14px;color:var(--muted-fg);cursor:pointer;transition:color .2s;font-weight:500}
.nav-link:hover,.nav-link.active{color:var(--fg)}
.nav-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--border);cursor:pointer;background:var(--bg);color:var(--fg);transition:all .2s;font-size:14px}
.nav-btn:hover{background:var(--accent)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes skeleton{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeInUp .5s ease both}
.fade-in-d1{animation-delay:.1s}
.fade-in-d2{animation-delay:.2s}
.fade-in-d3{animation-delay:.3s}
.fade-in-d4{animation-delay:.4s}
.fade-in-d5{animation-delay:.5s}
@media(prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}