.fr-wrap{max-width:860px;margin:0 auto;padding:36px 20px 64px}.fr-hero h1{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}.fr-hero p{font-size:14px;color:var(--text-muted);font-family:var(--font-mono);font-weight:500;margin-bottom:28px}.op-bar{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}.op-btn{font-size:22px;font-weight:900;width:56px;height:56px;border-radius:14px;border:1.5px solid var(--border2);background:var(--surface2);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);color:var(--text-muted);box-shadow:var(--shadow-sm)}.op-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-md)}.op-btn:hover:not(.active){background:var(--surface3);color:var(--text)}.fr-input-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px;background:var(--surface2);border-radius:18px;padding:22px 24px;border:1.5px solid var(--border)}.fr-input-group{display:flex;flex-direction:column;align-items:center;gap:4px}.fr-input-label{font-size:9px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-bottom:4px}.fr-num-input{width:74px;height:54px;font-size:26px;font-weight:800;font-family:var(--font-mono);text-align:center;border:1.5px solid var(--border2);border-radius:12px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s;box-shadow:var(--shadow-sm)}.fr-num-input:focus{border-color:var(--accent)}.fr-bar-line{width:74px;height:3px;background:var(--text);border-radius:99px}.op-display{font-size:34px;font-weight:900;color:var(--accent);font-family:var(--font-mono)}.eq-sign{font-size:34px;font-weight:900;color:var(--text-muted)}.result-frac{display:flex;flex-direction:column;align-items:center;gap:5px}.res-top{font-size:32px;font-weight:900;font-family:var(--font-mono);color:var(--accent);line-height:1}.res-bar{width:60px;height:4px;background:var(--accent);border-radius:99px}.res-bot{font-size:32px;font-weight:900;font-family:var(--font-mono);color:var(--accent);line-height:1}.result-panel{background:var(--surface);border:1.5px solid var(--border2);border-radius:20px;padding:26px 28px;margin-bottom:20px;box-shadow:var(--shadow-sm)}.res-meta{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;margin-bottom:20px}.res-decimal{font-family:var(--font-mono);font-size:22px;font-weight:800;color:var(--text)}.res-pct{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--text-muted)}.res-note{font-size:12px;font-family:var(--font-mono);font-weight:700;color:var(--text-dim)}.vis-section{margin-bottom:20px}.vis-row{margin-bottom:10px}.vis-label{font-size:11px;font-family:var(--font-mono);font-weight:700;color:var(--text-muted);margin-bottom:5px}.vis-bar{display:flex;height:34px;border-radius:9px;overflow:hidden;border:1.5px solid var(--border2);max-width:500px}.vis-seg{flex:1;border-right:1px solid rgba(255,255,255,.5)}.vis-seg:last-child{border-right:none}.vis-filled{background:var(--accent);opacity:.8}.vis-empty{background:var(--surface2)}.vis-result{background:#10b981;opacity:.8}.steps-label{font-size:11px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-bottom:10px}.step-item{font-size:13px;font-weight:600;color:var(--text);font-family:var(--font-mono);background:var(--surface2);border-radius:9px;padding:9px 13px;margin-bottom:6px;border-left:3px solid var(--accent);line-height:1.65}.step-item.final{border-left-color:#10b981;background:#d1fae5}.equiv-section{margin-top:6px}.equiv-label{font-size:10px;font-family:var(--font-mono);font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-bottom:8px}.equiv-row{display:flex;flex-wrap:wrap;gap:8px}.equiv-pill{font-family:var(--font-mono);font-size:13px;font-weight:800;padding:5px 14px;border-radius:99px;background:#ede9fe;color:#4f46e5;border:1px solid #c4b5fd}.err-box{background:#fee2e2;border:1.5px solid #fca5a5;border-radius:12px;padding:14px 18px;color:#991b1b;font-size:14px;font-weight:700}@media (max-width: 600px){.fr-num-input{width:62px;font-size:22px}.fr-bar-line{width:62px}.fr-input-row{gap:12px;padding:16px}.op-display,.eq-sign{font-size:26px}}