/* Generated by tools/split-subpage-css.php. Edit assets/css/source/subpage-modern.full.css instead. */
.fractioncalc-page {color:#111827}
.fractioncalc-heading {margin-bottom:2rem}
.fractioncalc-eyebrow {margin:0 0 .65rem;color:#087f72;font-size:.88rem;font-weight:800}
.fractioncalc-heading h1 {margin:0 0 .8rem;color:#0f172a;font-size:clamp(2.1rem,5vw,3.45rem);line-height:1.08}
.fractioncalc-heading>p {max-width:820px;margin:0;color:#53657d;line-height:1.8}
.fractioncalc-tool,.fractioncalc-guide {border:1px solid #d7e1ee;border-radius:8px;background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.06);overflow:hidden}
.fractioncalc-panel-head {display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.35rem;background:#f8fafc;border-bottom:1px solid #dfe8f2}
.fractioncalc-panel-head h2,.fractioncalc-extra h2,.fractioncalc-guide h2,.fractioncalc-guide h3 {margin:0;color:#12263e}
.fractioncalc-panel-head h2 {font-size:1.22rem}
.fractioncalc-panel-head p {margin:.35rem 0 0;color:#6b7d93;line-height:1.6}
.fractioncalc-panel-head code,.fractioncalc-guide code {padding:.08rem .32rem;border-radius:4px;background:#eef4f7;color:#0f766e}
.fractioncalc-panel-head button,.fractioncalc-actions button,.fractioncalc-extra button,.fractioncalc-examples button {min-height:42px;border:1px solid #cbd8e8;border-radius:7px;padding:.6rem .9rem;background:#fff;color:#29405a;font-weight:800;cursor:pointer}
.fractioncalc-form {padding:1.35rem;background:#fff}
.fractioncalc-expression {display:grid;grid-template-columns:1fr 180px 1fr;gap:.8rem}
.fractioncalc-expression label,.fractioncalc-extra label {min-width:0;color:#30445e;font-size:.84rem;font-weight:800}
.fractioncalc-expression input,.fractioncalc-expression select,.fractioncalc-extra input {width:100%;height:50px;margin-top:.4rem;border:1px solid #cbd8e8;border-radius:7px;background:#fff;color:#172033}
.fractioncalc-expression input,.fractioncalc-extra input {padding:0 .9rem}
.fractioncalc-actions {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.fractioncalc-actions button {min-height:48px}
.fractioncalc-actions button:first-child {min-width:160px;border-color:#087f72;background:#087f72;color:#fff}
.fractioncalc-actions button:disabled {opacity:.48;cursor:not-allowed}
.fractioncalc-status {margin:1rem 0 0;padding:.9rem 1rem;border-radius:7px;background:#edf2f7;color:#53677f}
.fractioncalc-status[data-type=success] {background:#eaf7f2;color:#176a55}
.fractioncalc-status[data-type=error] {background:#fff0ef;color:#a53b34}
.fractioncalc-result {padding:1.35rem;background:#f8fafc;border-top:1px solid #dfe8f2}
.fractioncalc-main-result {padding:1.25rem;border-radius:8px;background:#0f172a;color:#fff}
.fractioncalc-main-result span {color:#99f6e4;font-size:.82rem;font-weight:800}
.fractioncalc-main-result strong {display:block;margin:.25rem 0;color:#fff;font-size:clamp(1.8rem,5vw,2.8rem);line-height:1.1;overflow-wrap:anywhere}
.fractioncalc-main-result p {margin:0;color:#cbd5e1;line-height:1.55}
.fractioncalc-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:1rem}
.fractioncalc-metrics div {min-width:0;padding:1rem;border:1px solid #dce5ef;border-radius:7px;background:#fff}
.fractioncalc-metrics span,.fractioncalc-metrics strong {display:block}
.fractioncalc-metrics span {color:#7a8ba0;font-size:.74rem}
.fractioncalc-metrics strong {margin-top:.3rem;color:#263b55;font-size:1.05rem;overflow-wrap:anywhere}
.fractioncalc-steps {margin-top:1rem;padding:1rem;border-left:3px solid #087f72;background:#f0f8f6}
.fractioncalc-steps h3 {margin:0 0 .5rem;color:#143f3a;font-size:1rem}
.fractioncalc-steps ol {margin:0;padding-left:1.25rem;color:#536b66;line-height:1.8}
.fractioncalc-extra {display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.35rem;border-top:1px solid #dfe8f2}
.fractioncalc-extra>div {padding:1rem;border:1px solid #dce5ef;border-radius:8px;background:#fff}
.fractioncalc-extra p {color:#63758b;line-height:1.65}
.fractioncalc-extra button {margin-top:.75rem}
.fractioncalc-examples {display:grid;gap:.5rem}
.fractioncalc-examples button {text-align:left}
.fractioncalc-guide {margin-top:1.2rem;padding:1.45rem}
.fractioncalc-guide>header p {margin:.65rem 0 0;color:#5f7188;line-height:1.75}
.fractioncalc-guide-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:1rem}
.fractioncalc-guide-grid section {padding:1rem;border:1px solid #dbe4ee;border-radius:7px;background:#f8fafc}
.fractioncalc-guide-grid h3 {font-size:1rem}
.fractioncalc-guide-grid p,.fractioncalc-note p {margin:.45rem 0 0;color:#63758b;font-size:.9rem;line-height:1.72}
.fractioncalc-note {margin-top:1rem;padding:1rem;border-radius:7px;background:#fff7df;border:1px solid #f1dba6}
.fractioncalc-note strong {color:#705a20}
.fractioncalc-tool input:focus,.fractioncalc-tool select:focus,.fractioncalc-tool button:focus-visible {outline:3px solid rgba(8,127,114,.2);outline-offset:2px}
@media screen and (max-width:980px) {
.fractioncalc-expression {grid-template-columns:1fr}
.fractioncalc-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
.fractioncalc-extra {grid-template-columns:1fr}
}
@media screen and (max-width:640px) {
.fractioncalc-panel-head,.fractioncalc-actions {align-items:stretch;flex-direction:column}
.fractioncalc-panel-head button,.fractioncalc-actions button {width:100%}
.fractioncalc-form,.fractioncalc-result,.fractioncalc-extra,.fractioncalc-guide {padding:1rem}
.fractioncalc-metrics,.fractioncalc-guide-grid {grid-template-columns:1fr}
.fractioncalc-actions {display:grid;grid-template-columns:1fr}
}