.percentage-mode-bar{overflow-x:auto}.percentage-mode-switch{min-width:max-content}.percentage-mode-switch .mode-button{white-space:nowrap}.percentage-workspace{padding:var(--space-5) var(--space-4);gap:var(--space-5);border-bottom:1px solid var(--line);background:var(--input-surface);display:grid}.percentage-equation{justify-content:center;align-items:flex-end;gap:var(--space-3);min-height:112px;display:flex}.percentage-phrase{min-height:36px;color:var(--muted);align-items:center;font-size:14px;font-weight:500;line-height:1.4;display:inline-flex}.percentage-phrase:empty{display:none}.percentage-term{gap:var(--space-2);width:min(190px,24vw);min-width:126px;display:grid}.percentage-field-label{color:var(--muted);font-size:11px;font-weight:600;line-height:1.3}.percentage-input-shell{border-radius:var(--radius-control);min-width:0;height:36px;color:var(--muted);background:var(--control);box-shadow:0 0 0 1px var(--control-line);grid-template-columns:minmax(0,1fr) auto;align-items:center;display:grid}.percentage-input-shell:focus-within{box-shadow:0 0 0 1px var(--focus)}.percentage-input-shell:has(input[aria-invalid=true]){box-shadow:0 0 0 1px var(--danger)}.percentage-input-shell input{width:100%;min-width:0;height:36px;padding:0 var(--space-3);color:var(--ink);font-family:var(--code-font);text-align:end;background:0 0;border:0;outline:0;font-size:15px}.percentage-input-shell>span{font-family:var(--code-font);padding-inline-end:var(--space-3);font-size:13px}.percentage-actions{justify-content:flex-end;gap:var(--space-2);display:flex}.percentage-actions .primary-button,.percentage-actions .secondary-button,.percentage-result-heading .text-button{justify-content:center;align-items:center;gap:var(--space-1);display:inline-flex}.percentage-results{background:var(--output-surface);transform-origin:top;animation:.16s ease-out both percentage-result-in}.percentage-result-heading{min-height:44px;padding:var(--space-2) var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-3);border-bottom:1px solid var(--line);display:flex}.percentage-result-heading h2,.percentage-working h3{color:var(--ink);margin:0;font-size:14px;line-height:1.4}.percentage-result-main{min-height:144px;padding:var(--space-5) var(--space-4);align-content:center;place-items:center;gap:var(--space-2);text-align:center;display:grid}.percentage-result-main>p{color:var(--muted);margin:0;font-size:12px;line-height:1.4}.percentage-result-main output{max-width:100%;color:var(--ink);overflow-wrap:anywhere;font-family:var(--code-font);letter-spacing:-.045em;text-align:center;unicode-bidi:isolate;font-size:clamp(32px,7vw,54px);font-weight:650;line-height:1.05}.percentage-result-main .percentage-direction{color:var(--success);font-weight:600}.percentage-working{padding:var(--space-3) var(--space-4);align-items:baseline;gap:var(--space-4);border-top:1px solid var(--line);background:var(--recessed);grid-template-columns:auto minmax(0,1fr);display:grid}.percentage-working h3{color:var(--muted);font-size:11px}.percentage-working p{min-width:0;color:var(--ink);overflow-wrap:anywhere;font-family:var(--code-font);text-align:end;unicode-bidi:isolate;margin:0;font-size:12px;line-height:1.6}@keyframes percentage-result-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (width<=680px){.percentage-workspace{padding-block:var(--space-4)}.percentage-equation{align-items:stretch;gap:var(--space-2);grid-template-columns:minmax(0,1fr);min-height:0;display:grid}.percentage-phrase{min-height:0;font-size:12px}.percentage-term{width:100%;min-width:0}.percentage-input-shell,.percentage-input-shell input{height:44px}.percentage-actions{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.percentage-actions .primary-button,.percentage-actions .secondary-button,.percentage-result-heading .text-button{min-height:44px}.percentage-result-main{min-height:128px}.percentage-working{gap:var(--space-1);grid-template-columns:minmax(0,1fr)}.percentage-working p{text-align:start}}@media (prefers-reduced-motion:reduce){.percentage-results{animation:none}}