.proportion-page{gap:24px;display:grid}.proportion-intro,.proportion-calculator-card,.proportion-guide{background:#fff;border:1px solid #e2e6ef;border-radius:22px;box-shadow:0 16px 40px #1f29370f}.proportion-intro{padding:22px 24px}.proportion-intro p{color:#5e6b82;margin:0;font-size:1.02rem;line-height:1.75}.proportion-calculator-card{padding:clamp(20px,4vw,30px)}.proportion-card-heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;display:flex}.proportion-card-heading span,.result-heading>span,.calculation-steps>span{color:#6a45f5;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:850;display:block}.proportion-card-heading h2{color:#121a2b;margin:7px 0 8px;font-size:clamp(1.35rem,3vw,1.8rem)}.proportion-card-heading p{color:#637087;margin:0;line-height:1.65}.proportion-status-badge{color:#603ce9;background:#eee9ff;border-radius:999px;flex:none;padding:10px 15px;font-weight:850}.proportion-example-buttons{flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:22px;display:flex}.proportion-example-buttons>span{color:#667288;font-size:.86rem;font-weight:750}.example-button{color:#5533d9;cursor:pointer;font:inherit;background:#faf9ff;border:1px solid #dcd5ff;border-radius:999px;padding:8px 12px;font-size:.84rem;font-weight:750}.example-button:hover{background:#f1edff;border-color:#8c70fa}.proportion-equation{background:#f9f8ff;border:1px solid #e2ddfb;border-radius:20px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(18px,4vw,34px);padding:clamp(18px,4vw,28px);display:grid}.ratio-group{gap:11px;display:grid}.ratio-group label{gap:7px;display:grid}.ratio-group label>span{color:#20283a;font-size:.82rem;font-weight:850}.ratio-group input,.proportion-options select{box-sizing:border-box;color:#111827;width:100%;font:inherit;background:#fff;border:1px solid #dce1ec;border-radius:14px;outline:none;font-weight:750}.ratio-group input{text-align:center;padding:14px 15px}.ratio-group input:focus,.proportion-options select:focus{border-color:#7957f7;box-shadow:0 0 0 3px #7957f721}.fraction-line{background:#7048f5;border-radius:999px;height:4px}.proportion-equals{color:#7048f5;font-size:2rem;font-weight:900}.proportion-options{margin-top:18px}.proportion-options label{gap:8px;display:grid}.proportion-options label>span{color:#20283a;font-size:.84rem;font-weight:850}.proportion-options select{padding:13px 14px}.proportion-error{color:#b42318;background:#fff1f2;border:1px solid #fecaca;border-radius:13px;margin-top:16px;padding:14px 16px;font-weight:750}.proportion-actions{grid-template-columns:minmax(0,1.7fr) 1fr 1fr;gap:10px;margin-top:18px;display:grid}.proportion-actions button{cursor:pointer;min-height:48px;font:inherit;border-radius:13px;padding:12px 16px;font-weight:850}.primary-action{color:#fff;background:#7048f5;border:1px solid #7048f5}.primary-action:hover{background:#5f38dc}.secondary-action{color:#263044;background:#fff;border:1px solid #dce1eb}.secondary-action:hover{background:#f8f6ff;border-color:#9b87ed}.proportion-result{background:radial-gradient(circle at 90% 5%,#7048f51f,#0000 32%),#f5f2ff;border:1px solid #ddd6fe;border-radius:18px;margin-top:20px;padding:clamp(18px,4vw,24px)}.result-heading strong{color:#121a2b;margin-top:7px;font-size:clamp(1.25rem,3vw,1.8rem);display:block}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:18px;display:grid}.result-grid>div{background:#ffffffc7;border:1px solid #ded8fa;border-radius:14px;padding:15px}.result-grid span{color:#68748a;font-size:.76rem;font-weight:750;display:block}.result-grid strong{color:#171f31;margin-top:6px;line-height:1.45;display:block}.calculation-steps{margin-top:18px}.calculation-steps ol{color:#56647a;margin:10px 0 0;padding-left:22px}.calculation-steps li+li{margin-top:8px}.proportion-guide{padding:clamp(22px,4vw,30px)}.proportion-guide h2{color:#121a2b;margin-top:0}.proportion-guide p,.proportion-guide li{color:#5f6d83;line-height:1.75}.proportion-formula{background:#f4f1ff;border:1px solid #ddd6fe;border-radius:16px;margin:22px 0;padding:20px}.proportion-formula span,.proportion-formula-grid span,.proportion-comparison-grid span,.proportion-step-cards span,.proportion-use-grid span,.proportion-related-grid span{color:#6842f4;letter-spacing:.07em;text-transform:uppercase;font-size:.74rem;font-weight:850}.proportion-formula strong{color:#111827;margin-top:7px;font-size:clamp(1.2rem,3vw,1.65rem);display:block}.proportion-formula-grid,.proportion-comparison-grid,.proportion-use-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;display:grid}.proportion-formula-grid>div,.proportion-comparison-grid article,.proportion-use-grid article{background:#fafbfe;border:1px solid #e1e4ec;border-radius:16px;padding:18px}.proportion-formula-grid strong,.proportion-comparison-grid strong,.proportion-use-grid strong{color:#141c2d;margin-top:7px;display:block}.proportion-comparison-grid p,.proportion-use-grid p{margin-bottom:0}.proportion-step-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0;display:grid}.proportion-step-cards>div{text-align:center;background:#f7f5ff;border:1px solid #ded8fa;border-radius:16px;padding:18px}.proportion-step-cards strong{color:#151d2f;margin-top:8px;line-height:1.45;display:block}.proportion-table-wrap{margin-top:22px;overflow-x:auto}.proportion-table{border-collapse:collapse;width:100%}.proportion-table th,.proportion-table td{text-align:left;border:1px solid #e0e4ec;padding:14px 16px}.proportion-table th{color:#151d2e;background:#f3f0ff}.proportion-table td{color:#5f6c82}.proportion-table tbody tr:nth-child(2n){background:#fafbfe}.proportion-related-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:20px;display:grid}.proportion-related-grid a{min-height:150px;color:inherit;background:#faf9ff;border:1px solid #e0dcf8;border-radius:17px;flex-direction:column;padding:19px;text-decoration:none;display:flex}.proportion-related-grid strong{color:#141c2d;margin-top:8px;display:block}.proportion-related-grid small{color:#6842f4;margin-top:auto;padding-top:18px;font-weight:800}.proportion-faqs{gap:10px;margin-top:20px;display:grid}.proportion-faqs details{background:#fafbfe;border:1px solid #e1e4ec;border-radius:14px;padding:16px 18px}.proportion-faqs summary{color:#172033;cursor:pointer;font-weight:850}.proportion-faqs p{margin-bottom:0}@media (width<=800px){.proportion-card-heading{display:grid}.proportion-status-badge{justify-self:start}.proportion-equation{grid-template-columns:1fr}.proportion-equals{text-align:center}.proportion-actions,.result-grid,.proportion-formula-grid,.proportion-comparison-grid,.proportion-step-cards,.proportion-use-grid,.proportion-related-grid{grid-template-columns:1fr}}