.rule-of-three-calculator{width:100%;max-width:800px;margin:2rem auto}.proportion-type-selector{display:flex;gap:1rem;margin-bottom:1.5rem;justify-content:center}.type-button{flex:1 1;max-width:250px;padding:1rem;border:2px solid #e0e0e0;border-radius:12px;background:white;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.type-button:hover{border-color:#ff6b6b;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,107,107,.2)}.type-button.active{border-color:#ff6b6b;background:linear-gradient(135deg,#fff5f5,#ffe5e5);box-shadow:0 4px 12px rgba(255,107,107,.3)}.type-icon{font-size:2rem}.type-label{font-size:1.1rem;font-weight:600;color:#333}.type-description{font-size:.85rem;color:#666}.proportion-info{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #3b82f6;padding:1rem 1.5rem;border-radius:8px;margin-bottom:1.5rem}.proportion-info p{margin:0;line-height:1.6;color:#1e40af}.proportion-info strong{color:#1e3a8a}.proportion-info em{display:block;margin-top:.5rem;font-size:.9rem;color:#3b82f6}.rule-of-three-visual{background:linear-gradient(135deg,#fafafa,#f5f5f5);border-radius:16px;padding:2rem;margin-bottom:1.5rem;box-shadow:inset 0 2px 8px rgba(0,0,0,.05)}.proportion-grid{display:flex;flex-direction:column;gap:1rem}.proportion-row{display:flex;align-items:center;justify-content:center;gap:1.5rem}.proportion-cell{display:flex;flex-direction:column;align-items:center;gap:.5rem;flex:1 1;max-width:200px}.proportion-cell label{font-weight:600;font-size:1.1rem;color:#333}.proportion-input{width:100%;padding:.875rem;font-size:1.2rem;text-align:center;border:2px solid #e0e0e0;border-radius:12px;background:white;transition:all .3s ease;font-weight:500}.proportion-input:focus{outline:none;border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.1)}.proportion-arrow{font-size:2rem;color:#ff6b6b;font-weight:700;margin:0 .5rem}.proportion-divider{display:flex;align-items:center;justify-content:center;margin:.5rem 0}.divider-text{font-size:.9rem;color:#666;font-weight:500;text-transform:uppercase;letter-spacing:.5px;padding:.25rem 1rem;background:white;border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.1)}.result-cell{background:linear-gradient(135deg,#fff5f5,#ffe5e5);padding:1rem;border-radius:12px;border:2px solid #ff6b6b}.result-display{width:100%;padding:.875rem;font-size:1.5rem;text-align:center;background:white;border-radius:12px;color:#ff6b6b;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.05)}.result-section{margin:2rem 0}.result-card{background:linear-gradient(135deg,#fff5f5,#ffe5e5);border:2px solid #ff6b6b;border-radius:16px;padding:2rem;text-align:center;box-shadow:0 4px 12px rgba(255,107,107,.2)}.result-title{font-size:1.2rem;color:#333;margin-bottom:1rem;font-weight:600}.result-value{font-size:2.5rem;color:#ff6b6b;font-weight:700;margin:1rem 0}.result-interpretation{font-size:1rem;color:#666;line-height:1.6;margin-top:1rem}.steps-section{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:16px;padding:1.5rem;margin:2rem 0;border:2px solid #22c55e}.steps-title{font-size:1.2rem;color:#166534;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.steps-icon{font-size:1.5rem}.steps-list{display:flex;flex-direction:column;gap:1rem}.step-item{display:flex;align-items:flex-start;gap:1rem;background:white;padding:1rem;border-radius:12px;box-shadow:0 2px 4px rgba(0,0,0,.05)}.step-number{min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#22c55e;color:white;border-radius:50%;font-weight:700;font-size:.9rem}.step-description{flex:1 1;color:#333;line-height:1.6;font-size:.95rem}.examples-section{margin:2rem 0}.examples-title{font-size:1.2rem;color:#333;margin-bottom:1rem;font-weight:600;text-align:center}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:1rem;gap:1rem}.example-button{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;border:2px solid #e0e0e0;border-radius:12px;background:white;cursor:pointer;transition:all .3s ease;text-align:center}.example-button:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,.2)}.example-icon{font-size:2rem}.example-label{font-weight:600;color:#333;font-size:.95rem}.example-description{font-size:.75rem;color:#666;line-height:1.4}.hints-section{background:linear-gradient(135deg,#fef3c7,#fde68a);border-left:4px solid #f59e0b;padding:1.5rem;border-radius:8px;margin:2rem 0}.hints-title{font-size:1.2rem;color:#92400e;margin-bottom:1rem;font-weight:600}.hints-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.hints-list li{padding-left:1.5rem;position:relative;color:#78350f;line-height:1.6;font-size:.9rem}.hints-list li:before{content:"✓";position:absolute;left:0;color:#f59e0b;font-weight:700}.hints-list strong{color:#92400e}@media (max-width:767px){.rule-of-three-calculator{margin:1rem auto}.proportion-type-selector{flex-direction:column}.type-button{max-width:100%}.rule-of-three-visual{padding:1.5rem}.proportion-row{gap:1rem}.proportion-cell{max-width:100px}.proportion-input{font-size:1rem;padding:.75rem}.proportion-arrow{font-size:1.5rem;margin:0 .25rem}.result-value{font-size:2rem}.examples-grid{grid-template-columns:repeat(2,1fr)}.step-item{flex-direction:column;align-items:center;text-align:center}}@media (max-width:375px){.proportion-row{flex-direction:column;gap:.75rem}.proportion-arrow{transform:rotate(90deg)}.proportion-cell{width:100%;max-width:100%}.examples-grid{grid-template-columns:1fr}.result-value{font-size:1.75rem}}