:root{--bg: #f7f9fc;--panel: #ffffff;--text: #172033;--muted: #667085;--border: #d9e1ec;--accent: #2563eb;--accent-strong: #163fa3;--acid: #ef4444;--neutral: #22c55e;--base: #7c3aed;--warning: #f59e0b;--danger: #dc2626;--shadow: 0 18px 40px rgba(23, 32, 51, .08);--radius: 22px;--radius-sm: 14px;--font-body: "Avenir Next", "Segoe UI", sans-serif;--font-display: "Iowan Old Style", "Georgia", serif}*,*:before,*:after{box-sizing:border-box}html{font-family:var(--font-body);color:var(--text);background:radial-gradient(circle at top left,rgba(37,99,235,.12),transparent 28%),radial-gradient(circle at top right,rgba(124,58,237,.1),transparent 25%),linear-gradient(180deg,#fbfcff 0%,var(--bg) 100%)}body{margin:0;min-height:100vh}.skip-link{position:absolute;left:1rem;top:-3rem;z-index:1000;padding:.75rem 1rem;border-radius:12px;background:#fff;color:var(--accent-strong);font-weight:700;box-shadow:var(--shadow)}.skip-link:focus{top:1rem;outline:3px solid rgba(37,99,235,.45);outline-offset:3px}button,input,select{font:inherit}button{cursor:pointer}.app-shell{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:1.25rem 0 2.5rem}.noscript-panel{margin-top:.75rem}.hero{padding:1.5rem 0 1rem}.eyebrow{margin:0 0 .4rem;color:var(--accent);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}.hero h1{margin:0;font-family:var(--font-display);font-size:clamp(2.2rem,5vw,4.4rem);line-height:.95}.subtitle{max-width:54rem;margin:.75rem 0 0;color:var(--muted);font-size:1.05rem}.supporting-copy{max-width:60rem;margin:.75rem 0 0;color:var(--text);line-height:1.55}.layout{display:grid;gap:1.25rem}.panel{background:#ffffffeb;border:1px solid rgba(217,225,236,.9);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.panel-header h2,.detail-header h3,.scale-header h3{margin:0}.panel-header p,.detail-header p,.scale-header p,.footer p{color:var(--muted)}.mode-switcher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:1.2rem 0 1rem}.mode-tab{border:1px solid var(--border);background:#f4f7fb;color:var(--text);padding:.9rem;border-radius:999px;font-weight:600;transition:transform .16s ease,background .16s ease,border-color .16s ease}.mode-tab:hover,.mode-tab:focus-visible{border-color:var(--accent);transform:translateY(-1px);outline:3px solid rgba(37,99,235,.4);outline-offset:3px}.mode-tab.active{background:linear-gradient(135deg,#1d4ed8,#3b82f6);color:#fff;border-color:transparent}.mode-tab[aria-selected=false]{box-shadow:inset 0 0 0 1px #ffffff59}.mode-section{display:grid;gap:.95rem}.hidden{display:none}.field{display:grid;gap:.45rem}.field label{font-weight:600}.field input,.field select{width:100%;border:1px solid var(--border);border-radius:14px;background:#fff;color:var(--text);padding:.88rem .95rem;transition:border-color .16s ease,box-shadow .16s ease}.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #2563eb24}.inline-note{margin:0;padding:.8rem .95rem;border-radius:14px;background:#f59e0b1f;color:#8a5a00}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.button{border:none;border-radius:999px;padding:.9rem 1.2rem;font-weight:700}.button-primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);color:#fff}.button-secondary{background:#e9eef7;color:var(--text)}.button:hover,.button:focus-visible{transform:translateY(-1px);outline:3px solid rgba(37,99,235,.4);outline-offset:3px}.results-panel{display:grid;gap:1rem;align-content:start}.info-panel{margin-top:1.25rem}.consent-panel{margin-bottom:1rem}.info-grid{display:grid;gap:1rem}.result-hero{display:flex;justify-content:space-between;align-items:start;gap:1rem;padding:1.2rem;border-radius:18px;background:linear-gradient(140deg,#2563eb1a,#7c3aed1a),#f8fbff;border:1px solid rgba(37,99,235,.12)}.result-hero.placeholder{opacity:.82}.metric-label{margin:0;color:var(--muted);font-size:.92rem;text-transform:uppercase;letter-spacing:.08em}.metric-value{margin:.35rem 0 0;font-size:clamp(3rem,7vw,5rem);line-height:.95;font-weight:800}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:6.5rem;padding:.5rem .85rem;border-radius:999px;font-weight:700;border:1px solid transparent}.badge-acidic{background:#ef44441f;color:#9f1239}.badge-neutral{background:#22c55e24;color:#166534}.badge-basic{background:#7c3aed1f;color:#5b21b6}.secondary-grid{display:grid;gap:.85rem}.mini-card,.scale-card,.detail-card{border:1px solid var(--border);border-radius:18px;padding:1rem;background:#fff}.mini-value{margin:.35rem 0 0;font-size:1.15rem;font-weight:700;word-break:break-word}.ph-scale{position:relative;height:20px;border-radius:999px;margin-top:.9rem;background:linear-gradient(90deg,#dc2626,#f97316,#22c55e,#3b82f6,#7c3aed);overflow:visible}.ph-pointer{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--text);transform:translate(-50%,-50%);box-shadow:0 6px 16px #17203338}.ph-ticks{display:flex;justify-content:space-between;margin-top:.55rem;color:var(--muted);font-size:.92rem}.message-list,.steps-list{margin:.75rem 0 0;padding-left:1.1rem;display:grid;gap:.55rem}.message-list li,.steps-list li{line-height:1.45}.empty-message{color:var(--muted)}.warning-item{color:#92400e}.faq-list{margin:.75rem 0 0;display:grid;gap:.75rem}.faq-list dt{font-weight:700}.faq-list dd{margin:.25rem 0 0;color:var(--muted)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.footer{padding-top:1rem}.footer-links{display:flex;flex-wrap:wrap;gap:.85rem 1.1rem;margin-top:.8rem}.footer a,.noscript-panel a,.consent-panel a{color:var(--accent-strong);font-weight:600}@media(min-width:700px){.mode-switcher{grid-template-columns:repeat(4,minmax(0,1fr))}.secondary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:980px){.layout{grid-template-columns:minmax(340px,420px) minmax(0,1fr);align-items:start}.panel{padding:1.5rem}}