:root{--bg-primary: #F8F8F5;--bg-card: #FFFFFF;--bg-elevated: #FFFFFF;--bg-surface: #F4F4EE;--bg-surface-hover: #EAEBE3;--bg-secondary: #F4F4EE;--bg-cream: #F2EBDD;--bg-sage: #E7EEE5;--bg-glass: rgba(255, 255, 255, .92);--border-subtle: #ECECE6;--border-medium: #E5E6DF;--border-strong: #D5D7CD;--border-accent: #55745C;--text-primary: #252821;--text-secondary: #595D54;--text-muted: #74786F;--text-inverse: #FFFFFF;--accent-green: #55745C;--accent-green-hover: #45614B;--accent-green-active: #38503D;--accent-sage: #E7EEE5;--accent-cream: #F2EBDD;--accent-blue: #55745C;--accent-cyan: #4A6E55;--accent-violet: #55745C;--status-success: #446E4C;--status-warning: #B26D1E;--status-error: #B54242;--status-idle: #74786F;--status-active: #55745C;--shadow-xs: 0 1px 2px rgba(37, 40, 33, .04);--shadow-sm: 0 1px 3px rgba(37, 40, 33, .05), 0 1px 2px rgba(37, 40, 33, .03);--shadow-md: 0 4px 12px rgba(37, 40, 33, .05), 0 1px 3px rgba(37, 40, 33, .03);--shadow-lg: 0 12px 28px rgba(37, 40, 33, .07), 0 2px 6px rgba(37, 40, 33, .03);--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;--transition-fast: .15s cubic-bezier(.16, 1, .3, 1);--transition-normal: .22s cubic-bezier(.16, 1, .3, 1);--transition-slow: .35s cubic-bezier(.16, 1, .3, 1);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-pill: 9999px;--container-max: 1180px;--container-padding: 24px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;overflow-x:hidden;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}::selection{background:var(--accent-sage);color:var(--text-primary)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#d8dacf;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#bcc0b4}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;color:var(--text-primary);line-height:1.25;letter-spacing:-.015em}p{color:var(--text-secondary)}code,pre,.mono{font-family:var(--font-mono)}a{color:var(--accent-green);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-green-hover)}.container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding)}.section{padding-top:64px;padding-bottom:64px;position:relative}.section-header{margin-bottom:36px;max-width:720px}.section-eyebrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green);margin-bottom:12px;padding:3px 8px;background:var(--accent-sage);border:1px solid rgba(85,116,92,.2);border-radius:var(--radius-xs)}.section-title{font-size:clamp(1.8rem,3.2vw,2.5rem);font-weight:700;margin-bottom:12px;letter-spacing:-.02em;color:var(--text-primary)}.section-subtitle{font-size:1rem;color:var(--text-secondary);line-height:1.6}.tech-card{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:24px;position:relative;box-shadow:var(--shadow-xs);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.tech-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.section{padding-top:48px;padding-bottom:48px}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-size:.88rem;font-weight:500;line-height:1;padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}.btn-primary{background:var(--accent-green);color:#fff;font-weight:600;border-color:#496450;box-shadow:0 1px 2px #25282114}.btn-primary:hover{background:var(--accent-green-hover);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #2528211f}.btn-primary:active{background:var(--accent-green-active);transform:translateY(0)}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-medium);box-shadow:var(--shadow-xs)}.btn-secondary:hover{background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-surface)}.btn-sm{padding:6px 12px;font-size:.8rem}.btn-lg{padding:13px 24px;font-size:.95rem;font-weight:600}.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;padding:3px 8px;border-radius:var(--radius-xs);border:1px solid transparent;line-height:1.2}.badge-green,.badge-blue,.badge-cyan{background:var(--accent-sage);color:#314e38;border-color:#55745c40;font-weight:600}.badge-warning{background:#f8f1e4;color:#8c5212;border-color:#b26d1e40;font-weight:600}.badge-error,.badge-danger{background:#fbebeb;color:#9e3333;border-color:#b5424240;font-weight:600}.badge-neutral{background:var(--bg-surface);color:var(--text-muted);border-color:var(--border-medium)}.pulse-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.pulse-dot.success{background:var(--status-success)}.pulse-dot.warning{background:var(--status-warning)}.pulse-dot.error{background:var(--status-error)}.pulse-dot.idle{background:var(--status-idle)}.navbar{position:sticky;top:0;z-index:50;background:#f8f8f5f2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-medium);padding:12px 0;transition:all var(--transition-normal)}.navbar-inner{display:flex;align-items:center;justify-content:space-between}.navbar-brand{display:flex;align-items:center;gap:10px;color:var(--text-primary);text-decoration:none}.brand-icon{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--accent-sage);border:1px solid rgba(85,116,92,.3);display:flex;align-items:center;justify-content:center;color:var(--accent-green)}.navbar-links{display:flex;align-items:center;gap:20px;list-style:none}.navbar-link{font-size:.85rem;font-weight:500;color:var(--text-secondary);transition:color var(--transition-fast)}.navbar-link:hover{color:var(--text-primary)}.nav-tabs{display:flex;align-items:center;gap:2px;background:#eaebe3;border:1px solid var(--border-medium);border-radius:var(--radius-sm);padding:3px}.nav-tab-btn{background:transparent;border:1px solid transparent;color:var(--text-secondary);font-family:var(--font-body);font-size:.82rem;font-weight:500;padding:6px 13px;border-radius:var(--radius-xs);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--transition-fast);white-space:nowrap}.nav-tab-btn:hover{color:var(--text-primary);background:#ffffff80}.nav-tab-btn.active{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-medium);box-shadow:0 1px 3px #2528210f;font-weight:600}.tab-pane-container{padding:24px 0 64px;animation:fadeIn .18s ease-out}@media(max-width:1024px){.nav-tabs{overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nav-tabs::-webkit-scrollbar{display:none}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.modal-animate{animation:fadeIn .15s cubic-bezier(.16,1,.3,1) forwards}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}