:root{--primary:#0052B3;--primary-hover:#4338CA;--secondary:#9CA3AF;--secondary-hover:#6B7280;--card-bg:#f9f9f9;--text-main:#111827;--text-muted:#6B7280;--border:#E5E7EB;--success:#10B981;--danger:#DC2626}*{box-sizing:border-box;margin:0;padding:0}.calculator-wrapper{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3.5rem;margin-bottom:2rem;border:var(--form-border);border-radius:8px;box-sizing:border-box;padding:18px;background:#fff}.fraction-block{display:flex;align-items:center;gap:.75rem;background:#F3F4F6;padding:1rem;border-radius:12px}.whole-number-input{width:60px;height:60px;text-align:center;font-size:1.6rem;border:1px solid var(--border);border-radius:8px;font-weight:600;outline:none;transition:border-color 0.2s}.whole-number-input:focus,.fraction-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgb(79 70 229 / .2)}.fraction-col{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:70px}.fraction-input{width:100%;text-align:center;padding:.5rem;border:1px solid var(--border);border-radius:6px;font-size:1.6rem;outline:none;transition:border-color 0.2s}.fraction-line-ui{width:100%;height:3px;background-color:var(--text-main);border-radius:2px}.operator-select{appearance:none;font-size:1.8rem;padding:.75rem 3rem .75rem 1rem;border:2px solid var(--border);border-radius:50px;background-color:#fff;color:var(--primary);font-weight:700;cursor:pointer;outline:none;text-align:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234F46E5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;background-size:1.25rem;box-shadow:0 1px 2px rgb(0 0 0 / .05)}.button-group{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;border:var(--form-border);border-radius:8px;box-sizing:border-box;padding:18px;background:#fff}.btn{padding:1rem 2rem;border-radius:50px;font-size:1.8rem;font-weight:600;cursor:pointer;transition:all 0.2s;border:none}.btn-calculate{background-color:var(--primary);color:#fff;min-width:200px}.btn-calculate:hover{background-color:var(--primary-hover);box-shadow:0 4px 6px rgb(79 70 229 / .25)}.btn-reset{background-color:#F3F4F6;color:var(--text-main);border:1px solid var(--border)}.btn-reset:hover{background-color:#E5E7EB}.results-section{margin-top:2.5rem;display:none;animation:fadeIn 0.4s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-card{background-color:#EEF2FF;border:1px solid #C7D2FE;padding:1.5rem;border-radius:12px;text-align:center;margin-bottom:1.5rem}.result-title{color:var(--primary);font-weight:600;margin-bottom:1rem;font-size:1.9rem;text-transform:uppercase;letter-spacing:.05em}.final-answer{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:2.5rem;font-weight:700;color:var(--text-main)}.decimal-result{margin-top:.75rem;font-size:1.5rem;color:var(--text-muted);font-weight:500}.visual-container{margin-top:2rem;padding-top:2rem;border-top:1px dashed #C7D2FE}.visual-label-main{width:100%;font-size:1.9rem;color:var(--primary);font-weight:700;margin-bottom:1.25rem;text-transform:uppercase;text-align:center}.visual-equation{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.5rem}.visual-term{display:flex;flex-direction:column;align-items:center;background:#fff;padding:1.25rem;border-radius:12px;border:1px solid #C7D2FE;min-width:140px;box-shadow:0 2px 4px rgb(0 0 0 / .05)}.visual-term-label{font-size:1.2rem;color:var(--text-muted);margin-bottom:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.visual-operator{font-size:2rem;font-weight:700;color:var(--text-main)}.pie-chart-svg{width:75px;height:75px;display:block;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1));margin:.25rem}.pie-chart-wrapper{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:280px}.inline-fraction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .2rem}.inline-num{font-size:1.4em;line-height:1;padding-bottom:2px}.inline-den{font-size:1.4em;line-height:1;padding-top:2px;border-top:2px solid currentColor}.formula-box{background-color:#F8FAFC;border:1px solid #E2E8F0;border-radius:6px;padding:.75rem;margin-top:.5rem;font-family:monospace;font-size:1.4rem;color:#334155;display:inline-block;line-height:1.5}.steps-card{background-color:#fff;border:1px solid var(--border);border-radius:12px;padding:1.5rem}.steps-card h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-main);border-bottom:1px solid var(--border);padding-bottom:.5rem}.step-item{margin-bottom:1.25rem;line-height:1.6;color:#374151;display:flex;align-items:baseline;gap:.75rem}.step-num{background:var(--primary);color:#fff;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;flex-shrink:0;margin-top:.25rem}.step-content{flex:1}.error-msg{color:var(--danger);text-align:center;margin-top:1rem;font-weight:500;display:none;background:#FEE2E2;padding:.75rem;border-radius:8px;border:1px solid #FCA5A5}@media (max-width:768px){.calculator-wrapper{flex-direction:column}.operator-select{transform:rotate(90deg);margin:-.5rem 0}.visual-equation{flex-direction:column;gap:1rem}.button-group{flex-direction:column}.btn{width:100%}}.conv-select{appearance:none;font-size:1.1rem;padding:.75rem 2.5rem .75rem 1.5rem;border:2px solid var(--border);border-radius:50px;background-color:#fff;color:var(--primary);font-weight:700;cursor:pointer;outline:none;text-align:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234F46E5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.25rem;box-shadow:0 1px 2px rgb(0 0 0 / .05);margin-bottom:.5rem;transition:all 0.2s}