@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap";*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{color:#0f172a;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;background:#eef2ff;margin:0;font-family:Inter,system-ui,-apple-system,sans-serif}h1,h2,h3{margin:0;font-family:Sora,Inter,sans-serif}input,button{font-family:inherit}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield}:root{--glass-bg:#ffffff8c;--glass-bg-strong:#ffffffb8;--glass-border:#ffffffb3;--stroke:#6366f12e;--ink:#0f172a;--ink-soft:#475569;--ink-faint:#94a3b8;--primary:#6366f1;--primary-2:#3b82f6;--accent:#22d3ee;--radius-lg:28px;--radius-md:20px;--radius-sm:14px;--shadow-glass:0 20px 60px -20px #4f46e547, 0 8px 30px -12px #94a3b840;--shadow-soft:0 6px 24px -8px #4f46e52e}.app{background:linear-gradient(160deg,#eef2ff 0%,#f4f8ff 40%,#eaf4ff 70%,#eef2ff 100%);min-height:100%;position:relative;overflow-x:hidden}.orbs{z-index:0;pointer-events:none;position:fixed;inset:0;overflow:hidden}.orb{filter:blur(80px);opacity:.55;border-radius:50%;position:absolute}.orb-1{background:radial-gradient(circle,#6366f18c,#0000 65%);width:520px;height:520px;top:-140px;left:-120px}.orb-2{background:radial-gradient(circle,#22d3ee80,#0000 65%);width:460px;height:460px;top:20%;right:-160px}.orb-3{background:radial-gradient(circle,#818cf873,#0000 65%);width:420px;height:420px;bottom:-120px;left:30%}.grid-overlay{z-index:0;pointer-events:none;background-image:linear-gradient(#6366f10b 1px,#0000 1px),linear-gradient(90deg,#6366f10b 1px,#0000 1px);background-size:46px 46px;position:fixed;inset:0;-webkit-mask-image:radial-gradient(90% 60% at 50% 0,#000 30%,#0000 75%);mask-image:radial-gradient(90% 60% at 50% 0,#000 30%,#0000 75%)}.topbar,.main,.footer{z-index:1;position:relative}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:22px clamp(20px,5vw,48px);display:flex}.nav{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);border-radius:999px;align-items:center;gap:4px;padding:6px;display:flex}.nav-link{color:var(--ink-soft);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .25s}.nav-link:hover{color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-2))}.intext{color:var(--primary);border-bottom:1px solid color-mix(in srgb, var(--primary) 35%, transparent);font-weight:600;text-decoration:none;transition:border-color .2s}.intext:hover{border-bottom-color:var(--primary)}.logo{align-items:center;gap:10px;display:inline-flex}.logo-mark{color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-2));border-radius:12px;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 8px 22px -8px #6366f1b3}.logo-text{letter-spacing:-.02em;color:var(--ink);font-family:Sora,sans-serif;font-size:18px;font-weight:700}.logo-accent{background:linear-gradient(90deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.topbar-pill{color:var(--ink-soft);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:600;display:inline-flex}.dot{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #6366f126}.main{flex-direction:column;gap:28px;max-width:860px;margin:0 auto;padding:24px clamp(20px,5vw,48px) 80px;display:flex}.hero{text-align:center;padding:12px 0 8px}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--primary);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(10px);background:linear-gradient(120deg,#6366f11f,#22d3ee24);border-radius:999px;margin-bottom:18px;padding:7px 16px;font-size:12px;font-weight:700;display:inline-block}.hero-title{letter-spacing:-.03em;color:var(--ink);font-size:clamp(30px,5.4vw,46px);font-weight:800;line-height:1.14}.grad{background:linear-gradient(90deg, var(--primary) 0%, var(--primary-2) 45%, var(--accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-sub{max-width:560px;color:var(--ink-soft);margin:16px auto 0;font-size:16.5px;line-height:1.65}.glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);-webkit-backdrop-filter:blur(24px)saturate(160%);padding:clamp(22px,4vw,34px)}.tabs{border:1px solid var(--glass-border);border-radius:var(--radius-md);background:#ffffff80;gap:6px;width:fit-content;margin-bottom:24px;padding:6px;display:flex}.tab{cursor:pointer;color:var(--ink-soft);background:0 0;border:none;border-radius:14px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .25s}.tab:hover{color:var(--primary)}.tab.active{color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-2));box-shadow:0 8px 20px -8px #6366f1a6}.calc-body{flex-direction:column;gap:18px;display:flex}.input-group{flex-direction:column;gap:8px;display:flex}.field-label{color:var(--ink-soft);font-size:13.5px;font-weight:600}.field{align-items:center;display:flex;position:relative}.field input{border:1.5px solid var(--stroke);border-radius:var(--radius-md);background:var(--glass-bg-strong);width:100%;height:58px;color:var(--ink);-webkit-backdrop-filter:blur(8px);outline:none;padding:0 64px 0 18px;font-size:20px;font-weight:600;transition:border-color .25s,box-shadow .25s}.field input::placeholder{color:var(--ink-faint);font-weight:500}.field input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6366f129}.field-suffix{color:var(--ink-faint);pointer-events:none;font-size:15px;font-weight:700;position:absolute;right:18px}.unit-toggle{gap:8px;margin-bottom:4px;display:flex}.unit-btn{border:1.5px solid var(--stroke);cursor:pointer;color:var(--ink-soft);background:#ffffff80;border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;transition:all .25s}.unit-btn:hover{border-color:var(--primary);color:var(--primary)}.unit-btn.active{color:#fff;background:linear-gradient(135deg, var(--primary), var(--accent));border-color:#0000;box-shadow:0 8px 20px -8px #22d3ee8c}.btn-primary{cursor:pointer;border-radius:var(--radius-md);color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-2));border:none;justify-content:center;align-items:center;gap:8px;height:56px;padding:0 28px;font-size:15.5px;font-weight:700;transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 14px 30px -10px #6366f1b3}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px #6366f1cc}.btn-primary:active{transform:translateY(0)}.btn-primary.btn-sm{height:46px;padding:0 20px;font-size:14px}.btn-ghost{border:1.5px solid var(--stroke);cursor:pointer;border-radius:var(--radius-md);color:var(--ink-soft);background:#ffffff8c;padding:12px 20px;font-size:14px;font-weight:600;transition:all .25s}.btn-ghost:hover{color:var(--primary);border-color:var(--primary)}.btn-ghost:disabled{opacity:.5;cursor:not-allowed}.result-panel{border-top:1px solid var(--stroke);margin-top:26px;padding-top:26px;animation:.5s cubic-bezier(.22,1,.36,1) rise}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.result-hero{flex-wrap:wrap;align-items:center;gap:26px;display:flex}.result-ring{background:radial-gradient(circle at 30% 25%, #ffffffe6, transparent 60%), var(--glass-bg-strong);border:2px solid var(--glass-border);width:128px;height:128px;box-shadow:0 0 0 10px color-mix(in srgb, var(--ring-color) 10%, transparent), var(--shadow-soft);border-radius:50%;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:3px;display:flex;position:relative}.result-ring:before{content:"";border:3px solid #0000;border-top-color:var(--ring-color);border-right-color:var(--ring-color);border-radius:50%;animation:3.5s linear infinite spin;position:absolute;inset:-2px}@keyframes spin{to{transform:rotate(360deg)}}.result-ring-value{letter-spacing:-.03em;color:var(--ink);font-family:Sora,sans-serif;font-size:34px;font-weight:800;line-height:1}.result-ring-label{letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;font-size:12px;font-weight:700}.result-summary{flex-direction:column;flex:1;justify-content:center;align-items:flex-start;min-width:180px;display:flex}.result-chip{border-radius:999px;padding:7px 16px;font-size:13.5px;font-weight:700;display:inline-block}.result-cat-text{color:var(--ink-soft);text-align:left;margin:10px 0 0;font-size:15px;line-height:1.5}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:22px;display:grid}.stat-card{border-radius:var(--radius-md);background:var(--glass-bg-strong);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);padding:18px 20px;position:relative;overflow:hidden}.stat-card:before{content:"";background:linear-gradient(90deg, var(--tone), transparent);height:3px;position:absolute;top:0;left:0;right:0}.stat-label{color:var(--ink-faint);letter-spacing:.02em;font-size:12.5px;font-weight:600;display:block}.stat-value{letter-spacing:-.02em;color:var(--ink);margin-top:6px;font-family:Sora,sans-serif;font-size:30px;font-weight:800;display:block}.stat-sub{color:var(--tone);margin-top:2px;font-size:13px;font-weight:600;display:block}.gauge-block{border-radius:var(--radius-md);border:1px solid var(--glass-border);background:#fff6;margin-top:24px;padding:18px 24px 12px}.gauge{width:220px;margin:0 auto;position:relative}.gauge-svg{width:100%;display:block}.gauge-scale{height:16px;margin-top:6px;position:relative}.gauge-scale span{color:var(--ink-faint);font-size:11px;font-weight:600;position:absolute;transform:translate(-50%)}.result-note{color:var(--ink-faint);margin:18px 0 0;font-size:13px;line-height:1.6}.card-title{letter-spacing:-.02em;color:var(--ink);font-size:20px;font-weight:700}.card-sub{color:var(--ink-soft);margin:6px 0 0;font-size:14.5px;line-height:1.55}.avg-card{flex-direction:column;gap:18px;display:flex}.avg-head{flex-direction:column;align-items:flex-start;gap:6px;display:flex}.avg-row{gap:10px;display:flex}.avg-row .field{flex:1}.avg-row .field input{height:48px;font-size:16px}.avg-row .btn-ghost{white-space:nowrap}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{color:var(--primary);border:1px solid var(--stroke);background:linear-gradient(120deg,#6366f124,#22d3ee24);border-radius:999px;align-items:center;gap:8px;padding:7px 12px;font-size:13.5px;font-weight:700;animation:.3s cubic-bezier(.22,1,.36,1) rise;display:inline-flex}.chip-x{cursor:pointer;color:inherit;opacity:.6;background:0 0;border:none;padding:0 2px;font-size:15px;line-height:1}.chip-x:hover{opacity:1}.avg-actions{align-items:center;gap:10px;display:flex}.avg-result{border-top:1px solid var(--stroke);padding-top:18px;animation:.5s cubic-bezier(.22,1,.36,1) rise}.range-list{flex-direction:column;gap:10px;margin-top:18px;display:flex}.range-row{border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#ffffff80;align-items:center;gap:14px;padding:14px 16px;display:flex}.range-swatch{width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);border-radius:50%;flex-shrink:0}.range-info{flex-direction:column;flex:1;gap:2px;display:flex}.range-label{color:var(--ink);font-size:14.5px;font-weight:700}.range-text{color:var(--ink-soft);font-size:13px}.range-value{color:var(--ink-soft);white-space:nowrap;font-size:14px;font-weight:700}.disclaimer{color:var(--ink-faint);margin:18px 0 0;font-size:13px;line-height:1.6}.footer{max-width:1180px;color:var(--ink-faint);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin:0 auto;padding:26px clamp(20px,5vw,48px) 40px;font-size:13px;display:flex}.footer-links{flex-wrap:wrap;gap:18px;display:flex}.footer-links a{color:var(--ink-soft);font-weight:500;text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--primary)}.footer-right{font-weight:500}.faq-list{flex-direction:column;gap:10px;margin-top:18px;display:flex}.faq-item{border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:#ffffff80;overflow:hidden}.faq-item summary{cursor:pointer;color:var(--ink);justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-size:15px;font-weight:700;list-style:none;display:flex}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--primary);font-size:20px;font-weight:600;transition:transform .25s}.faq-item[open] summary:after{transform:rotate(45deg)}.faq-item p{color:var(--ink-soft);margin:0;padding:0 18px 16px;font-size:14.5px;line-height:1.65}.hero-slim{padding-bottom:4px}.article-body{flex-direction:column;gap:22px;display:flex}.article-block{flex-direction:column;gap:8px;display:flex}.article-text{color:var(--ink-soft);margin:0;font-size:15.5px;line-height:1.75}.article-text+.article-text{margin-top:12px}.quick-cta{flex-wrap:wrap;gap:12px;margin-top:18px;display:flex}.home-guide{gap:40px}.home-guide .article-block{border-top:1px solid var(--stroke);gap:10px;padding-top:30px}.home-guide .article-block:first-of-type{border-top:none;padding-top:0}.article-h3{letter-spacing:-.01em;color:var(--ink);margin:10px 0 2px;font-size:17px;font-weight:700}.formula-box{border-radius:var(--radius-md);border:1px solid var(--stroke);background:linear-gradient(120deg,#6366f11a,#22d3ee1a);flex-direction:column;gap:6px;margin:12px 0 6px;padding:16px 18px;display:flex}.formula-title{letter-spacing:.06em;text-transform:uppercase;color:var(--primary);font-size:12px;font-weight:700}.formula-line{color:var(--ink);font-family:Sora,sans-serif;font-size:15px;font-weight:600}.example-box{border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#ffffff8c;margin-top:12px;padding:14px 16px}.example-label{color:var(--primary);margin-bottom:6px;font-size:12.5px;font-weight:700;display:inline-block}.example-steps p{color:var(--ink-soft);margin:0;font-size:14.5px;line-height:1.7}.source-list{color:var(--ink-soft);flex-direction:column;gap:8px;margin:8px 0 0;padding-left:18px;font-size:14.5px;line-height:1.65;display:flex}.chart-wrap{border-radius:var(--radius-md);border:1px solid var(--glass-border);margin-top:18px;overflow-x:auto}.chart-table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}.chart-table th{text-align:left;letter-spacing:.02em;color:var(--ink-soft);border-bottom:1px solid var(--stroke);white-space:nowrap;background:#6366f114;padding:14px 18px;font-size:13px;font-weight:700}.chart-table td{color:var(--ink);border-bottom:1px solid #6366f114;padding:11px 18px;font-weight:500}.chart-table tbody tr:last-child td{border-bottom:none}.chart-table tbody tr:hover{background:#6366f10d}.chart-a1c{font-weight:700}@media (width<=560px){.result-hero{flex-direction:column;align-items:flex-start}.result-summary{width:100%}.stat-grid{grid-template-columns:1fr}.tabs{width:100%}.tab{flex:1}.topbar{justify-content:center}.nav{border-radius:999px;order:3;justify-content:center;width:100%;overflow-x:auto}.nav-link{white-space:nowrap}.topbar-pill{display:none}.footer{text-align:center;flex-direction:column;justify-content:center}.footer-links{justify-content:center}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}