*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f2f2f7;--bg-card:#fff;--bg-input:#f7f7fc;--border:#e4e4ef;--text-1:#0a0a14;--text-2:#5c5c7a;--text-3:#9999b8;--accent:#5c60d8;--accent-soft:#5c60d81a;--green-dark:#15803d;--green-dark-soft:#15803d1f;--green:#16a34a;--green-soft:#16a34a1f;--green-light:#22c55e;--green-light-soft:#22c55e1f;--violet:#7c3aed;--violet-soft:#7c3aed1f;--blue:#2563eb;--blue-soft:#2563eb1f;--yellow:#d97706;--yellow-soft:#d977061a;--orange:#ea580c;--orange-soft:#ea580c1a;--red:#dc2626;--red-soft:#dc26261a;--shadow:0 1px 3px #0000000a, 0 4px 16px #0000000a;--radius:16px;--radius-sm:10px;--t:.22s cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg:#1c1c1e;--bg-card:#2c2c2e;--bg-input:#242426;--border:#3a3a3c;--text-1:#f2f2f7;--text-2:#aeaeb2;--text-3:#636366;--accent:#4f46e5;--accent-soft:#4f46e51f;--green-dark:#15803d;--green-dark-soft:#15803d26;--green:#16a34a;--green-soft:#16a34a26;--green-light:#22c55e;--green-light-soft:#22c55e26;--violet:#7c3aed;--violet-soft:#7c3aed26;--blue:#3b82f6;--blue-soft:#3b82f626;--yellow:#d97706;--yellow-soft:#d9770626;--orange:#ea580c;--orange-soft:#ea580c26;--red:#f87171;--red-soft:#f871711f;--shadow:0 1px 3px #00000040, 0 4px 20px #00000040}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text-1);min-height:100vh;transition:background var(--t), color var(--t);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif}.app{flex-direction:column;min-height:100vh;display:flex}.header{z-index:100;background:var(--bg);border-bottom:1px solid var(--border);transition:background var(--t), border-color var(--t);position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:960px;height:60px;margin:0 auto;padding:0 24px;display:flex}.logo{cursor:pointer;background:0 0;border:none;align-items:center;gap:9px;padding:0;text-decoration:none;display:flex}.logo-mark{flex-shrink:0;width:34px;height:34px}.logo-name{letter-spacing:-.6px;color:var(--text-1);transition:color var(--t);font-size:26px;font-weight:600}.logo-name span{color:var(--accent)}.toggle-switch{cursor:pointer;color:var(--text-3);transition:color var(--t);align-items:center;gap:9px;display:flex}.toggle-switch:hover{color:var(--text-2)}.toggle-switch svg{flex-shrink:0;width:15px;height:15px}.toggle-switch input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.toggle-track{background:var(--border);width:42px;height:24px;transition:background var(--t);border-radius:99px;flex-shrink:0;position:relative}.toggle-switch input:checked~.toggle-track{background:var(--accent)}.toggle-thumb{width:18px;height:18px;transition:transform var(--t);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #00000040}.toggle-switch input:checked~.toggle-track .toggle-thumb{transform:translate(18px)}.main{flex-direction:column;flex:1;gap:18px;width:100%;max-width:960px;margin:0 auto;padding:52px 24px 72px;display:flex}.hero{text-align:center;padding:8px 0 12px}.hero-eyebrow{letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:11px;font-weight:600;display:inline-block}.hero-title{letter-spacing:-1.2px;color:var(--text-1);font-size:clamp(28px,5vw,40px);font-weight:700;line-height:1.18}.hero-title em{color:var(--accent);font-style:normal}.hero-sub{color:var(--text-2);margin-top:12px;font-size:15px;font-weight:400;line-height:1.5}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:background var(--t), border-color var(--t), box-shadow var(--t)}.calc-card{flex-direction:column;gap:22px;padding:28px 28px 24px;display:flex}.calc-card-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.calc-card-header .input-label{margin-bottom:0}.mode-pill{background:var(--bg-input);border:1.5px solid var(--border);transition:background var(--t), border-color var(--t);border-radius:99px;gap:2px;padding:3px;display:flex}.mode-pill-btn{color:var(--text-2);cursor:pointer;transition:all var(--t);white-space:nowrap;background:0 0;border:none;border-radius:99px;padding:5px 14px;font-family:Inter,sans-serif;font-size:12px;font-weight:500}.mode-pill-btn.active{background:var(--accent);color:#fff;font-weight:600}.mode-pill-btn:not(.active):hover{color:var(--text-1)}.unit-toggle{border-left:1.5px solid var(--border);transition:border-color var(--t);flex-direction:column;display:flex}.unit-btn{color:var(--text-3);cursor:pointer;transition:all var(--t);white-space:nowrap;background:0 0;border:none;flex:1;padding:0 16px;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:500}.unit-btn:first-child{border-bottom:1px solid var(--border)}.unit-btn.active{color:var(--accent);background:var(--accent-soft);font-weight:600}.unit-btn:not(.active):hover{color:var(--text-1)}.input-label{letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);margin-bottom:9px;font-size:11px;font-weight:600;display:block}.input-row{background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);transition:border-color var(--t), box-shadow var(--t), background var(--t);align-items:center;gap:0;display:flex;overflow:hidden}.input-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--bg-card)}.sla-input{color:var(--text-1);letter-spacing:-1px;appearance:textfield;background:0 0;border:none;outline:none;flex:1;min-width:0;padding:14px 4px 14px 18px;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:30px;font-weight:500}.sla-input[type=text]{letter-spacing:-1px;font-size:30px}.sla-input::-webkit-inner-spin-button{-webkit-appearance:none}.sla-input::-webkit-outer-spin-button{-webkit-appearance:none}.input-suffix{color:var(--text-3);-webkit-user-select:none;user-select:none;pointer-events:none;transition:color var(--t);padding:0 18px 0 4px;font-family:JetBrains Mono,monospace;font-size:22px;font-weight:400}.presets-label{letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);margin-bottom:10px;font-size:11px;font-weight:600}.presets{flex-wrap:wrap;gap:8px;display:flex}.preset-btn{border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-2);cursor:pointer;transition:all var(--t);letter-spacing:-.3px;border-radius:20px;padding:5px 14px;font-family:JetBrains Mono,monospace;font-size:14px;font-weight:500;line-height:1.6}.preset-btn:hover{border-color:var(--text-1);color:var(--text-1);background:var(--bg-input)}.preset-btn.active{background:color-mix(in srgb, currentColor 18%, var(--bg-input));border-color:currentColor;font-weight:600}.preset-nines{opacity:.7;letter-spacing:0;margin-top:1px;font-family:Inter,sans-serif;font-size:10px;font-weight:400;line-height:1;display:block}.quality-card{flex-direction:column;gap:14px;padding:20px 28px;display:flex}.quality-top{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.quality-badge{letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;border:1.5px solid;border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700}.quality-nines{color:var(--text-1);font-size:14px;font-weight:500}.quality-value{margin-left:auto;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:500}.quality-bar-track{background:var(--bg-input);border-radius:3px;height:5px;overflow:hidden}.quality-bar-fill{border-radius:3px;height:100%;transition:width .55s cubic-bezier(.4,0,.2,1),background-color .4s}.quality-badge.tier-elite{color:var(--violet)}.quality-badge.tier-excellent{color:var(--blue)}.quality-badge.tier-great{color:var(--green-dark)}.quality-badge.tier-good{color:var(--green-light)}.quality-badge.tier-fair{color:#f59e0b}.quality-badge.tier-poor{color:var(--red)}.preset-btn.active.tier-elite{color:var(--violet);border-color:var(--violet);background:var(--violet-soft)}.preset-btn.active.tier-excellent{color:var(--blue);border-color:var(--blue);background:var(--blue-soft)}.preset-btn.active.tier-great{color:var(--green-dark);border-color:var(--green-dark);background:var(--green-dark-soft)}.preset-btn.active.tier-good{color:var(--green-light);border-color:var(--green-light);background:var(--green-light-soft)}.preset-btn.active.tier-fair{color:#f59e0b;background:#f59e0b1f;border-color:#f59e0b}.preset-btn.active.tier-poor{color:var(--red);border-color:var(--red);background:var(--red-soft)}.bar-elite{background-color:var(--violet)}.bar-excellent{background-color:var(--blue)}.bar-great{background-color:var(--green-dark)}.bar-good{background-color:var(--green-light)}.bar-fair{background-color:#f59e0b}.bar-poor{background-color:var(--red)}.results-card{overflow:hidden}.results-head{border-bottom:1px solid var(--border);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3);transition:border-color var(--t);grid-template-columns:1fr 1fr 44px;padding:11px 28px;font-size:10.5px;font-weight:600;display:grid}.results-head--reverse{grid-template-columns:1fr 1fr 1fr 1fr}.results-row{border-bottom:1px solid var(--border);transition:background var(--t), border-color var(--t);grid-template-columns:1fr 1fr 44px;align-items:center;padding:15px 28px;display:grid}.results-row--reverse{grid-template-columns:1fr 1fr 1fr 1fr}.results-row:last-child{border-bottom:none}.results-row:hover{background:var(--bg-input)}.period-label{color:var(--text-2);font-size:14px;font-weight:500}.period-down{color:var(--text-1);letter-spacing:-.5px;font-family:JetBrains Mono,Fira Code,monospace;font-size:15px;font-weight:500}.copy-btn{border:1px solid var(--border);width:32px;height:32px;color:var(--text-3);cursor:pointer;transition:all var(--t);opacity:0;background:0 0;border-radius:7px;justify-content:center;align-items:center;margin-left:auto;font-size:13px;display:flex}.results-row:hover .copy-btn{opacity:1}.copy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.copy-btn.copied{opacity:1;border-color:var(--green);color:var(--green);background:var(--green-soft)}.share-row{justify-content:center;margin-top:4px;display:flex}.share-btn{border:1.5px solid var(--border);color:var(--text-2);cursor:pointer;transition:all var(--t);background:0 0;border-radius:10px;align-items:center;gap:7px;padding:9px 20px;font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:500;display:inline-flex}.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.share-btn.shared{border-color:var(--green);color:var(--green);background:var(--green-soft)}.error-card{border-radius:var(--radius);background:var(--red-soft);border:1px solid var(--red);color:var(--red);padding:16px 22px;font-size:14px}.footer{border-top:1px solid var(--border);color:var(--text-3);transition:border-color var(--t), color var(--t);padding:20px 24px;font-size:12px;line-height:1.8}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;max-width:960px;margin:0 auto;display:flex}.footer-logo{align-items:center;gap:9px;display:flex}.footer-logo .logo-mark{width:28px;height:28px}.footer-logo .logo-name{font-size:16px}.footer-right{text-align:right}.footer a{color:var(--text-3);transition:color var(--t);text-decoration:none}.footer a:hover{color:var(--accent)}@media (width<=520px){.hero-title{letter-spacing:-.8px;font-size:26px}.main{padding:32px 16px 60px}.calc-card{padding:22px 20px 20px}.results-head,.results-row{padding:13px 20px}.quality-card{padding:18px 20px}.sla-input{font-size:26px}}