.tool-shell{max-width:1080px}
.tool-intro{max-width:70ch;color:var(--muted);font-size:1.08rem}
.tool-index{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 34px}
.tool-index a{padding:9px 13px;border:1px solid var(--line);border-radius:999px;background:#eaf4ef;color:#12665f;text-decoration:none;font-weight:750}
.tool-index a:hover{text-decoration:underline}
.tool-index a:focus-visible,.tool-card button:focus-visible,.tool-card input:focus-visible{outline:3px solid #b87724;outline-offset:3px}
.tool-card{margin:24px 0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--paper,#fffdf8);scroll-margin-top:20px}
.tool-heading{display:flex;gap:16px;align-items:start}
.tool-number{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:#e0f0ea;color:#12665f;font-weight:850}
.tool-heading h2{margin:0;padding:0;border:0;font-size:1.5rem}
.tool-heading p{margin:5px 0 0;color:var(--muted)}
.tool-card form{margin:20px 0 0}
.tool-card label{display:block;margin-bottom:7px;font-weight:750}
.input-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tool-card input[type=number]{width:150px;max-width:100%;min-height:46px;padding:8px 12px;border:1px solid #9bb7b0;border-radius:10px;background:var(--paper,#fffdf8);color:var(--ink);font:inherit}
.tool-card button{min-height:46px;padding:9px 16px;border:0;border-radius:10px;background:var(--teal);color:white;font:inherit;font-weight:800;cursor:pointer}
.tool-card button:hover{filter:brightness(.92)}
.two-inputs{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:12px}
.two-inputs>div{min-width:155px}
.tool-result{margin-top:19px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#f4f8f5}
.tool-result:empty{display:none}
.tool-result h3{margin:0 0 12px;font-size:1.22rem}
.tool-result h4{margin:18px 0 8px;font-size:1rem}
.tool-result p{margin:10px 0}
.tool-error{color:#a3292c;font-weight:750}
.number-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.chip{display:inline-grid;place-items:center;min-width:35px;min-height:35px;padding:4px 8px;border:1px solid #a6c8be;border-radius:8px;background:#fff;color:#193c39;font-weight:750}
.chip.emphasized{background:#147d78;border-color:#147d78;color:white}
.factor-tree,.factor-tree ul{list-style:none;margin:0;padding-left:24px}
.factor-tree{padding-left:0;margin:16px 0}
.factor-tree ul{border-left:2px solid #bdded4;margin-left:13px}
.factor-tree li{margin:6px 0}
.tree-node{display:inline-grid;place-items:center;min-width:38px;min-height:38px;padding:4px 8px;border:1px solid #9fc9be;border-radius:9px;background:#fff;font-weight:800}
.tree-leaf{background:#c8ecdf;border-color:#75b6a5}
.line-slider{width:100%;accent-color:#147d78;min-height:44px}
.number-line{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));margin:18px 0 10px;padding-top:11px;border-top:3px solid #8caaa2}
.tick{position:relative;text-align:center;font-size:.72rem;color:var(--muted);font-weight:700}
.tick::before{content:"";position:absolute;top:-15px;left:50%;height:10px;border-left:2px solid #8caaa2}
.tick.selected{color:#0d6d65;font-size:.9rem;font-weight:900}
.tick.selected::before{height:16px;border-left:4px solid #147d78}
.fraction-models{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:24px;align-items:start}
.fraction-bar{display:flex;width:100%;max-width:430px;height:70px;border:2px solid #608f84;border-radius:8px;overflow:hidden}
.fraction-bar span{flex:1;border-right:1px solid #608f84}
.fraction-bar span:last-child{border-right:0}
.fraction-filled{fill:#147d78;background:#147d78}
.fraction-empty{fill:#edf6f1;background:#edf6f1}
.fraction-circle{width:130px;height:130px}
.fraction-circle path{stroke:#608f84;stroke-width:1.5}
html[data-theme=dark] .tool-index a{background:#42615a;color:#dcffed;border-color:#73958b}
html[data-theme=dark] .tool-card{background:var(--paper);border-color:var(--line)}
html[data-theme=dark] .tool-number{background:#48655d;color:#d7ffef}
html[data-theme=dark] .tool-card input[type=number]{background:#283f46;color:var(--ink);border-color:#8aa8a5}
html[data-theme=dark] .tool-card button{background:#b0eedd;color:#1c3d3a}
html[data-theme=dark] .tool-result{background:#3c5557}
html[data-theme=dark] .chip,html[data-theme=dark] .tree-node{background:#345156;color:#f5f7f1}
html[data-theme=dark] .chip.emphasized,html[data-theme=dark] .tree-leaf{background:#85cdb9;color:#133c35}
html[data-theme=dark] .tool-error{color:#ffb8a9}
html[data-theme=dark] .tick.selected{color:#b0eedd}
@media(max-width:620px){.tool-card{padding:17px;margin:18px 0}.tool-heading{gap:10px}.tool-heading h2{font-size:1.28rem}.fraction-models{grid-template-columns:1fr}.number-line{margin-left:-7px;margin-right:-7px}.tick{font-size:.61rem}.tick.selected{font-size:.78rem}}