.pn-mode-toggle{width:min(100%,24rem);min-height:var(--control-h);border:1px solid var(--border);border-radius:var(--radius,6px);background:var(--bg-surface);grid-template-columns:repeat(2,minmax(0,1fr));display:inline-grid;overflow:hidden}.pn-mode-toggle .pn-mode-btn{width:100%;min-height:var(--control-h);color:var(--text-dim);background:0 0;border:0;border-radius:0;font-weight:650;position:relative}.pn-mode-toggle .pn-mode-btn+.pn-mode-btn{border-left:1px solid var(--border)}.pn-mode-toggle .pn-mode-btn:hover:not(.active){background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--text)}.pn-mode-toggle .pn-mode-btn.active,.pn-mode-toggle .pn-mode-btn[aria-pressed=true]{background:var(--accent);color:#fff;box-shadow:inset 0 -3px #00000038}.pn-chart-container{place-items:center;padding:.45rem;display:grid;overflow:auto}.pn-input-invalid{box-shadow:0 0 0 2px #f973162e;background:color-mix(in srgb, #f97316 8%, var(--bg-surface))!important;border-color:#f97316!important}#pn-svg{border:1px solid var(--border);border-radius:var(--radius,6px);width:min(100%,30rem);max-height:30rem;box-shadow:var(--shadow-sm,0 1px 2px #0f172a14);background:linear-gradient(135deg,#fbfdf8 0%,#f6fbff 100%);display:block}.pn-result-box{gap:.85rem;display:grid}.pn-validation-box{background:color-mix(in srgb, #f97316 9%, var(--bg-surface));border-color:#fed7aa;gap:.2rem;display:grid}.pn-validation-box strong{color:#9a3412}.pn-validation-box span{color:var(--text)}.pn-ratio-card{min-width:0}.pn-ratio-title{color:var(--text-dim);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.45rem;font-size:.78rem;font-weight:750}.pn-ratio-grid{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.45rem;display:grid}.pn-ratio-chip{border:1px solid color-mix(in srgb, var(--pn-chip-color) 42%, var(--border));border-radius:var(--radius,6px);background:color-mix(in srgb, var(--pn-chip-color) 12%, var(--bg-surface));grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"swatch label value""swatch label percent";align-items:center;gap:.1rem .45rem;min-width:0;padding:.48rem .58rem;display:grid}.pn-ratio-swatch{background:var(--pn-chip-color);border-radius:999px;grid-area:swatch;width:.75rem;height:100%;min-height:1.9rem}.pn-ratio-label{overflow-wrap:anywhere;min-width:0;color:var(--text);grid-area:label;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:.98rem}.pn-ratio-value,.pn-ratio-percent{white-space:nowrap;justify-self:end;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}.pn-ratio-value{color:var(--text);grid-area:value;font-weight:800}.pn-ratio-percent{color:var(--text-dim);grid-area:percent;font-size:.76rem}@media (width<=560px){.pn-mode-toggle{width:100%}.pn-ratio-grid{grid-template-columns:1fr}}.tool-container,[class*=-container],[class*=-card],[class*=-shell],[class*=-wrapper],[class*=-grid]{box-sizing:border-box;max-width:100%}*{box-sizing:border-box}