:root{--primary-color: #4CAF50;--secondary-color: #2196F3;--background-color: #f9f9f9;--text-color: #333;--border-color: #ddd;--shadow: 0 2px 8px rgba(0, 0, 0, .1);--border-radius: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6}.container{max-width:1200px;margin:0 auto;padding:0 1rem}a{color:var(--secondary-color);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{margin-bottom:1rem;line-height:1.2}h2#percentage-calculation,h2#reverse-percentage,h2#percentage-change{font-weight:700}.card{background:#fff;border-radius:var(--border-radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 5px 15px #00000026}.btn{display:inline-block;background-color:var(--primary-color);color:#fff;padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);cursor:pointer;text-align:center;transition:background-color .3s ease}.btn:hover{background-color:#388e3c;text-decoration:none}input,textarea{background:var(--bg-1);color:inherit;width:110px;padding:10px;font-size:16px;border:2px solid var(--border-color);border-radius:4px;transition:border-color .3s ease}input:focus{outline:2px solid var(--primary-color);outline-offset:2px;border-color:var(--primary-color)}.percent{width:90px}footer{margin-top:2em;background-color:#555;color:#fff}#intro{font-size:1.5rem;font-weight:400;padding-bottom:0;margin:.5rem 0 0}p{font-size:1rem}input:read-only{background-color:#a7de83;font-weight:600;cursor:default}.answer{width:120px}.increase{color:#2e7d32;font-weight:600}.decrease{color:#c62828;font-weight:600}.result-with-percent{display:inline-flex;align-items:center;gap:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.examples{background-color:#f0f8ff;border-left:3px solid var(--secondary-color);padding:.75rem 1rem;margin:.5rem 0 1.5rem;border-radius:4px}.examples p{margin:0;font-size:.9rem;color:var(--text-color)}.use-cases{list-style:none;padding:0;margin:.5rem 0}.use-cases li{padding:.5rem 0;border-bottom:1px solid #eee}.use-cases li:last-child{border-bottom:none}.how-to-content h3,.faq-item h3{font-size:1rem;margin:1rem 0 .5rem;color:var(--text-color)}.how-to-content h3:first-child,.faq-item:first-child h3{margin-top:0}.how-to-content p,.faq-item p{margin:.5rem 0;line-height:1.6}.faq-item{margin-bottom:1.5rem}.faq-item:last-child{margin-bottom:0}.formula-content{line-height:1.6}.formula-content ul{list-style:none;padding-left:0;margin:1rem 0}.formula-content li{padding:.5rem 0;border-bottom:1px solid #eee}.formula-content li:last-child{border-bottom:none}