@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--accent: #ff7a45;--accent-strong: #f05b2a;--accent-gradient: linear-gradient(135deg, #ff8a5b 0%, #f05b2a 100%);--accent-glow: rgba(255, 122, 69, .45);--glass-bg: rgba(255, 255, 255, .1);--glass-bg-strong: rgba(255, 255, 255, .16);--glass-border: rgba(255, 255, 255, .2);--glass-border-strong: rgba(255, 255, 255, .4);--blur: 18px;--card-bg: rgba(255, 255, 255, .92);--ink: #1d2b44;--ink-soft: #2c3f5b;--text: #f4f7ff;--text-soft: rgba(255, 255, 255, .74);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--shadow-card: 0 24px 60px rgba(8, 24, 52, .45);--shadow-soft: 0 10px 30px rgba(8, 24, 52, .25);--focus-ring: 0 0 0 3px rgba(255, 138, 91, .55)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background-color:#0c2c5a;background-image:radial-gradient(1200px 600px at 75% -10%,rgba(255,122,69,.18),transparent 60%),radial-gradient(900px 500px at 0% 110%,rgba(36,102,178,.35),transparent 55%),linear-gradient(180deg,#08183473,#081834b3),url(/background.png);background-size:cover;background-position:center top;background-repeat:no-repeat;background-attachment:fixed;color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}button,input,select{font-family:Inter,sans-serif}:where(button,a,input,select,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}::selection{background:#ff8a5b59;color:#fff}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin:0 auto 36px;max-width:1180px;padding:16px clamp(16px,2.5vw,24px);flex-wrap:wrap;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));box-shadow:var(--shadow-soft)}.brand-title{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,#cdddff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#f4f7ff}.top-controls{display:flex;gap:16px;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;gap:6px;min-width:150px}.control-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);font-weight:600}.language-switcher select,.separator-switcher select{width:100%;background:#ffffff1f;border:1px solid var(--glass-border);color:#fff;padding:9px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;outline:none;cursor:pointer;transition:background .2s ease,border-color .2s ease}.language-switcher select:hover,.separator-switcher select:hover{background:#fff3;border-color:var(--glass-border-strong)}.language-switcher select option,.separator-switcher select option{background:#0f2b50;color:#fff}.hero{display:flex;flex-direction:column;gap:32px}.subtitle{color:var(--text-soft);max-width:420px;font-size:.98rem}.hero-section h2{font-size:1.05rem;font-weight:700;color:#e1e9ff;margin-bottom:14px}.pill-grid{display:flex;flex-wrap:wrap;gap:10px}.examples-more{margin-top:10px;animation:fade-in-up .3s ease both}@keyframes fade-in-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.pill{display:inline-block;background:var(--glass-bg);border:1px solid var(--glass-border);color:#e9f0ff;padding:9px 15px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;text-decoration:none;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.pill:hover{border-color:var(--glass-border-strong);background:var(--glass-bg-strong);transform:translateY(-2px);box-shadow:0 8px 20px #0818344d}.pill:active{transform:translateY(0)}.link-button{margin-top:12px;align-self:flex-start;background:none;border:none;color:#9fd3ff;font-size:.9rem;font-weight:600;cursor:pointer;text-align:left;padding:4px 2px;transition:color .2s ease}.link-button:hover{color:#c8e6ff}.form{padding:24px 22px 16px;background:linear-gradient(180deg,#f7faff,#eef3fb);border-bottom:1px solid #d5e0f3}.input-group{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:14px;margin-bottom:14px}.input-group label{color:var(--ink-soft);font-weight:600;font-size:.85rem}.input-group input{width:100%;padding:11px 13px;border-radius:var(--radius-sm);border:1px solid #b9c7e2;background:#fff;font-size:.98rem;font-weight:500;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.input-group input::placeholder{color:#9aa9c4;font-weight:400}.input-group input:hover{border-color:#9db0d4}.input-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #ff7a4533}.input-group input.active{border-color:#8fa4cb}.input-group input.calculated{background:#eef3fb;color:var(--ink-soft);border-style:dashed}.button-row{display:flex;justify-content:flex-end;gap:12px;margin-top:12px}.primary-button{background:var(--accent-gradient);border:none;color:#fff;padding:8px 16px;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.primary-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px var(--accent-glow)}.secondary-button{background:#364a6d;border:none;color:#fff;padding:8px 16px;border-radius:var(--radius-sm);font-weight:600;cursor:pointer}@media(max-width:540px){.input-group{grid-template-columns:1fr;gap:6px}.button-row{flex-direction:column;align-items:stretch}}.tab-row{display:grid;grid-template-columns:repeat(4,1fr);background:#e7eef9;border-bottom:1px solid #d5e0f3}.tab{position:relative;padding:13px 8px;font-size:.75rem;font-weight:600;border:none;background:transparent;color:#2b3a55;cursor:pointer;transition:color .2s ease,background .2s ease}.tab:hover:not(.active){background:#ff7a4514;color:var(--accent-strong)}.tab.active{background:var(--accent-gradient);color:#fff}.tab.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff8c}@media(max-width:960px){.tab-row{grid-template-columns:repeat(2,1fr)}}.result-panel{padding:20px 22px 22px;background:linear-gradient(160deg,#23395b,#1a2c49);color:#e9f0ff}.result-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px}.result-label{font-size:.95rem;color:#ffffffb3}.result-label:after{content:":"}.result-value{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;background:linear-gradient(135deg,#ffd9c6,#ff9e7a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.result-formula{font-size:.9rem;color:#ffffffc7}.result-formula strong{color:#fff;font-weight:700}.result-actions{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ghost-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#e9f0ff;padding:9px 10px;border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}.ghost-button:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px)}.ghost-button:active{transform:translateY(0)}@media(max-width:540px){.result-actions{grid-template-columns:1fr}}.calculator-card{width:100%;position:relative;background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(calc(var(--blur) + 4px));-webkit-backdrop-filter:blur(calc(var(--blur) + 4px))}.calculator-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-gradient);z-index:2}.calculator-panel{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.card-explainer{color:var(--text-soft);font-size:.95rem;line-height:1.5;max-width:440px;text-align:left}@media(max-width:960px){.calculator-panel{align-items:center}.card-explainer{text-align:center}}#root{width:100%}.app-container{width:100%;padding:28px clamp(16px,4vw,48px) 72px}.page{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);max-width:1180px;margin:0 auto;align-items:start}@media(max-width:960px){.page{grid-template-columns:1fr}}