:root{--color-primary:#166534;--color-primary-light:#22c55e;--color-primary-pale:#dcfce7;--color-accent:#b45309;--color-accent-pale:#fef3c7;--color-bg:#fafaf9;--color-surface:#ffffff;--color-surface-alt:#f5f5f4;--color-border:#e7e5e4;--color-border-strong:#d6d3d1;--color-text:#1c1917;--color-text-muted:#78716c;--color-text-faint:#a8a29e;--color-dark:#1c1917;--color-dark-surface:#292524;--color-dark-border:#44403c;--color-dark-text:#f5f5f4;--color-dark-muted:#a8a29e;--color-error:#dc2626;--color-error-pale:#fef2f2;--color-warning:#d97706;--color-warning-pale:#fffbeb;--font-display:'Newsreader',Georgia,serif;--font-body:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--max-width:1200px;--radius-sm:4px;--radius:6px;--radius-lg:12px;--shadow-sm:0 1px 2px rgba(0,0,0,0.06);--shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 6px rgba(0,0,0,0.07),0 2px 4px rgba(0,0,0,0.04);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img,video{max-width:100%;height:auto;display:block;}
a{color:var(--color-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;}
.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;color:var(--color-text);}
h1{font-size:2.25rem;font-weight:700;}
h2{font-size:1.5rem;font-weight:600;}
h3{font-size:1.125rem;font-weight:600;}
h4{font-size:1rem;font-weight:600;}
.text-sm{font-size:0.875rem;}
.text-xs{font-size:0.75rem;}
.text-muted{color:var(--color-text-muted);}
.font-mono{font-family:var(--font-mono);}
.container{width:100%;max-width:var(--max-width);margin-left:auto;margin-right:auto;padding-left:var(--space-6);padding-right:var(--space-6);}
.section{padding-top:var(--space-12);padding-bottom:var(--space-12);}
.section-sm{padding-top:var(--space-8);padding-bottom:var(--space-8);}
.nav{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:var(--space-6);}
.nav-logo{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--color-primary);text-decoration:none;letter-spacing:-0.02em;}
.nav-links{display:flex;align-items:center;gap:var(--space-1);}
.nav-link{font-size:0.875rem;font-weight:500;color:var(--color-text-muted);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);text-decoration:none;transition:color 0.15s,background 0.15s;}
.nav-link:hover{color:var(--color-text);background:var(--color-surface-alt);text-decoration:none;}
.nav-link.active{color:var(--color-primary);font-weight:600;}
.nav-link.active::after{content:'';display:block;height:2px;background:var(--color-primary);border-radius:1px;margin-top:2px;}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);}
.nav-mobile-btn{display:none;padding:var(--space-2);background:none;border:none;color:var(--color-text);border-radius:var(--radius-sm);}
.nav-mobile-menu{display:none;border-top:1px solid var(--color-border);padding:var(--space-4) var(--space-6);background:var(--color-surface);}
.nav-mobile-menu.open{display:block;}
.nav-mobile-menu a{display:block;padding:var(--space-3) 0;color:var(--color-text-muted);font-size:0.9rem;border-bottom:1px solid var(--color-border);text-decoration:none;}
.nav-mobile-menu a:last-child{border-bottom:none;}
@media (max-width:768px){.nav-links{display:none;}
.nav-actions .btn{display:none;}
.nav-mobile-btn{display:flex;}
}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background 0.15s,color 0.15s,border-color 0.15s;white-space:nowrap;line-height:1.5;}
.btn:hover{text-decoration:none;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.btn-primary:hover{background:#14532d;border-color:#14532d;color:#fff;}
.btn-secondary{background:transparent;color:var(--color-text);border-color:var(--color-border-strong);}
.btn-secondary:hover{background:var(--color-surface-alt);}
.btn-ghost{background:transparent;color:var(--color-text-muted);border-color:transparent;}
.btn-ghost:hover{background:var(--color-surface-alt);color:var(--color-text);}
.btn-sm{padding:0.35rem 0.75rem;font-size:0.8rem;}
.btn-lg{padding:0.65rem 1.25rem;font-size:1rem;}
.btn-icon{width:2rem;height:2rem;padding:0;border-radius:var(--radius);}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow 0.15s,border-color 0.15s;}
.card-hover:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong);}
.card-flat{background:var(--color-surface-alt);border:none;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;font-size:0.7rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;border-radius:9999px;}
.badge-live{background:var(--color-primary-pale);color:var(--color-primary);}
.badge-beta{background:var(--color-accent-pale);color:var(--color-accent);}
.badge-prototype{background:#f5f5f4;color:#78716c;border:1px solid #e7e5e4;}
.badge-coming-soon{background:#f5f5f4;color:#a8a29e;}
.badge-error{background:var(--color-error-pale);color:var(--color-error);}
.form-group{margin-bottom:var(--space-4);}
.form-label{display:block;font-size:0.8rem;font-weight:500;color:var(--color-text-muted);margin-bottom:var(--space-1);letter-spacing:0.01em;}
.form-input{width:100%;padding:0.55rem 0.75rem;font-size:0.875rem;color:var(--color-text);background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:border-color 0.15s,box-shadow 0.15s;appearance:none;}
.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(22,101,52,0.1);}
.form-input::placeholder{color:var(--color-text-faint);}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.75rem center;padding-right:2.5rem;}
.form-hint{font-size:0.75rem;color:var(--color-text-muted);margin-top:var(--space-1);}
.form-error{font-size:0.75rem;color:var(--color-error);margin-top:var(--space-1);}
.form-textarea{resize:vertical;min-height:80px;}
.result-table{width:100%;border-collapse:collapse;}
.result-table th{text-align:left;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-border);}
.result-table td{font-size:0.875rem;padding:var(--space-3);border-bottom:1px solid var(--color-border);color:var(--color-text);}
.result-table tr:last-child td{border-bottom:none;}
.result-table td.value{font-family:var(--font-mono);font-size:0.85rem;color:var(--color-primary);font-weight:600;}
.chart-container{width:100%;min-height:360px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);}
.alert{padding:var(--space-3) var(--space-4);border-radius:var(--radius);font-size:0.875rem;border-left:3px solid;}
.alert-error{background:var(--color-error-pale);border-color:var(--color-error);color:#991b1b;}
.alert-warning{background:var(--color-warning-pale);border-color:var(--color-warning);color:#92400e;}
.alert-info{background:#eff6ff;border-color:#3b82f6;color:#1e40af;}
.alert-success{background:var(--color-primary-pale);border-color:var(--color-primary);color:#14532d;}
.tool-shell{max-width:var(--max-width);margin:0 auto;padding:var(--space-8) var(--space-6);}
.tool-header{margin-bottom:var(--space-8);}
.tool-header h1{font-size:1.75rem;margin-bottom:var(--space-2);}
.tool-header .desc{color:var(--color-text-muted);font-size:1rem;margin-bottom:var(--space-3);}
.tool-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4);}
.panel-dark{background:var(--color-dark);color:var(--color-dark-text);border-radius:var(--radius-lg);padding:var(--space-6);}
.panel-dark .result-table th{color:var(--color-dark-muted);border-color:var(--color-dark-border);}
.panel-dark .result-table td{border-color:var(--color-dark-border);}
.panel-dark .result-table td.value{color:var(--color-primary-light);}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);}
.tool-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:box-shadow 0.15s,border-color 0.15s;text-decoration:none;display:block;color:inherit;}
.tool-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border-strong);text-decoration:none;}
.tool-card .tool-card-icon{font-size:1.5rem;color:var(--color-primary);margin-bottom:var(--space-3);}
.tool-card .tool-card-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:var(--space-2);color:var(--color-text);}
.tool-card .tool-card-desc{font-size:0.85rem;color:var(--color-text-muted);line-height:1.5;margin-bottom:var(--space-4);}
.tool-card .tool-card-footer{display:flex;align-items:center;justify-content:space-between;}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center;padding:var(--space-16) 0;}
.hero-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;margin-bottom:var(--space-4);}
.hero-sub{font-size:1.05rem;color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-6);}
.stats-bar{display:flex;gap:var(--space-8);padding:var(--space-6) 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin:var(--space-8) 0;}
.stats-bar .stat-value{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--color-primary);line-height:1;}
.stats-bar .stat-label{font-size:0.8rem;color:var(--color-text-muted);margin-top:var(--space-1);}
.section-label{font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2);}
.divider{border:none;border-top:1px solid var(--color-border);margin:var(--space-8) 0;}
.footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-8) 0;margin-top:auto;}
.footer-links{display:flex;gap:var(--space-6);flex-wrap:wrap;}
.footer-links a{font-size:0.8rem;color:var(--color-text-muted);text-decoration:none;}
.footer-links a:hover{color:var(--color-text);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-2{gap:var(--space-2);}
.gap-4{gap:var(--space-4);}
.gap-6{gap:var(--space-6);}
.grid{display:grid;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.mt-4{margin-top:var(--space-4);}
.mt-6{margin-top:var(--space-6);}
.mt-8{margin-top:var(--space-8);}
.mb-4{margin-bottom:var(--space-4);}
.mb-6{margin-bottom:var(--space-6);}
.mb-8{margin-bottom:var(--space-8);}
.p-4{padding:var(--space-4);}
.p-6{padding:var(--space-6);}
.text-center{text-align:center;}
.w-full{width:100%;}
@media (max-width:1024px){.hero{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-12) 0;}
.hero>:last-child{display:none;}
.grid-3{grid-template-columns:repeat(2,1fr);}
}@media (max-width:640px){.container{padding-left:var(--space-4);padding-right:var(--space-4);}
h1{font-size:1.75rem;}
.grid-2,.grid-3{grid-template-columns:1fr;}
.stats-bar{gap:var(--space-6);}
.tools-grid{grid-template-columns:1fr;}
.tool-shell{padding:var(--space-6) var(--space-4);}
}