/* Native dialog keeps keyboard focus within the panel and the page inert. */
.display-preferences{box-sizing:border-box;width:min(33.75rem,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:28px 30px 22px;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border:0;border-radius:22px;font:400 1.0625rem/1.85 var(--body);box-shadow:0 20px 90px #0002} /* taste-skill-ignore: this native modal is a floating overlay. */
.display-preferences::backdrop{background:#14141666}
.display-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.display-panel-head h2{font-size:1.5625rem;line-height:1.7}
.display-close{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--soft);color:var(--ink)}
.display-close span{font:400 1.875rem/1 Arial,sans-serif}
.display-close:hover{background:var(--surface)}
.display-preferences>p{font-size:.9375rem;color:var(--muted);margin-block:14px 22px}
.display-options{border:0;padding:0;margin:0;min-width:0}
.display-text-setting{padding-block:4px 20px;border-block-end:1px solid var(--line)}
.display-setting-label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:1.0625rem}
.display-setting-label output{font-size:1rem;color:var(--muted);font-variant-numeric:tabular-nums}
.display-range{display:block;inline-size:100%;block-size:44px;accent-color:var(--blue);padding:0;margin:8px 0 0;cursor:pointer}
.display-scale-limits{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.display-option{display:flex;align-items:center;justify-content:space-between;gap:20px;min-width:0;min-height:70px;padding-block:13px;border-block-end:1px solid var(--line);cursor:pointer;font-size:1.0625rem}
.display-option input{inline-size:24px;block-size:24px;flex-shrink:0;margin:0;accent-color:var(--blue);cursor:pointer}
.display-option:has(input:disabled){cursor:default}
.display-option input:disabled{opacity:1;cursor:default}
.display-panel-bottom{padding-block-start:16px}
.display-reset{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:.875rem;color:var(--blue);padding:6px 0;text-align:start}
.display-reset svg{width:20px;height:20px}
.display-reset:hover{text-decoration:underline;text-underline-offset:5px}
.display-status{font-size:.8125rem;color:var(--muted);margin:6px 0 0;min-height:1.85em}
[data-display-settings]{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:.875rem;line-height:1.8;white-space:nowrap}
[data-display-settings]:hover{background:var(--soft);color:var(--blue)}
[data-display-settings] svg{width:20px;height:20px}
.site-footer [data-display-settings]{justify-content:flex-start;padding-inline:0}

/* Relative type respects browser defaults; the native range scales it once. */
html{font-size:calc(100% * var(--text-scale,1))}
html[data-large-text] :is(.choice-list,.unit-picker,.actions,.billing-switch,.workspace-heading,.footer-top,.footer-bottom){flex-wrap:wrap}
html[data-large-text] .choice-list button{min-width:100px;min-height:48px;flex:1 1 100px}
html[data-large-text] :is(.workspace-columns,.tour-explanation){grid-template-columns:minmax(0,1fr)}
html[data-large-text] :is(.workspace-body,.tour-copy){min-width:0}
html[data-large-text] .workspace-columns .graph-block{max-width:420px;width:100%;margin-inline:auto}
html[data-large-text] :is(.plan-card h3,.plan-card>p,.plan-card .plan-pitch,.plan-card .price-current,.plans-grid .plan-card ul){min-height:0}
html[data-large-text] .button{white-space:normal;text-align:center}
html[data-large-text] .formula{overflow-wrap:anywhere}
html[data-large-text] .tour-tabs [role=tab]{white-space:normal;text-align:center;padding-inline:6px}
html[data-large-text] .tour-intro{flex-wrap:wrap;gap:20px}
@media(max-width:1100px){
  html[data-large-text] :is(.plans-grid,.plan-overview){grid-template-columns:1fr;max-width:650px;margin-inline:auto}
  html[data-large-text] .site-header nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;background:var(--paper);padding:12px 20px 22px;gap:2px;font-size:1.125rem;max-height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain}
  html[data-large-text] .site-header nav.is-open{display:flex;flex-direction:column}
  html[data-large-text] .site-header nav a{min-height:48px;padding:10px 12px}
  html[data-large-text] .site-header nav :is(.mobile-account,.mobile-settings){display:flex}
  html[data-large-text] .site-header .header-settings,html[data-large-text] .nav-actions .login{display:none}
  html[data-large-text] .menu-toggle{display:block}
}
@media(max-width:680px){
  html[data-large-text] .nav-actions .button.small{padding-inline:10px;font-size:.7rem}
  html[data-large-text] .wordmark{font-size:1.25rem}
  html[data-large-text] .nav-wrap{gap:8px}
}

/* Palette variables update the entire site, including muted copy and fields. */
html[data-high-contrast="true"]{--ink:#101012;--muted:#3a3a3f;--blue:#004a94;--blue-dark:#00386f;--line:#76767e;--soft:#f0f0f2;--surface:#e4e4e8;--paper:#fff}
html[data-high-contrast="true"] .site-header.is-scrolled{background:var(--paper)}
html[data-high-contrast="true"] .workspace-nav{background:var(--soft)}
html[data-high-contrast="true"] :is(input:not([type="checkbox"]):not([type="range"]),textarea,select,.choice-list button){border:2px solid var(--line);color:var(--ink);background:var(--paper)}
html[data-high-contrast="true"] input::placeholder{color:var(--muted);opacity:1}
html[data-high-contrast="true"] :is(.choice-list button[aria-pressed="true"],.plan-card.featured){background:#e4efff}
html[data-high-contrast="true"] .choice-list button[aria-pressed="true"]{border-color:var(--blue);color:var(--blue)}
html[data-high-contrast="true"] .math-graph .axis{stroke:#74747b}
html[data-high-contrast="true"] .dark{color:#fff;background:#111113}
html[data-high-contrast="true"] .dark .text-link{color:#a3ceff}
html[data-high-contrast="true"] .dark .small-note{color:#d6d6dc}
html[data-high-contrast="true"] .dark .hint-demo{color:var(--ink)}
html[data-high-contrast="true"] :focus-visible{outline:3px solid var(--blue);outline-offset:5px}
html[data-high-contrast="true"] .dark :focus-visible{outline-color:#a3ceff}
html[data-high-contrast="true"] .dark .hint-demo :focus-visible{outline-color:var(--blue)}

/* Stored motion preference has the same effect as the device preference. */
html[data-reduce-motion="true"]{scroll-behavior:auto!important}
html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *::before,html[data-reduce-motion="true"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-reduce-motion="true"] [data-reveal]{opacity:1!important;transform:none!important}
html[data-reduce-motion="true"] .math-graph .curve{stroke-dashoffset:0!important}
html[data-reduce-motion="true"] :is(.hero-product,.text-link,.plan-overview>a):hover{transform:none!important}
@media(prefers-reduced-motion:reduce){
  html,html *{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .math-graph .curve{stroke-dashoffset:0!important}
  :is(.hero-product,.text-link,.plan-overview>a):hover{transform:none!important}
}
@media(max-width:680px){
  .display-preferences{padding:22px 22px 18px;border-radius:18px}
  .display-panel-head h2{font-size:1.375rem}
}