@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=DM+Sans:wght@500;600;700&family=Fraunces:opsz,wght@9..144,600&display=swap');
:root { color-scheme:light; --ink:#1c1e38; --muted:#696e88; --paper:#f8f8fb; --panel:#ffffff; --line:#dfe1ec; --lav:#eceaff; --violet:#6959d1; --coral:#ff7956; --graph-background:#ffffff; --graph-grid:#edf0f5; --graph-axis:#a9adbf; --graph-label:#6a6e85; --graph-plot:#ff7956; --graph-point:#6959d1; --graph-point-fill:#ffffff; --graph-point-label:#5142ad; --graph-hover:rgba(105,89,209,.24); }
* { box-sizing:border-box; } html,body { height:100%; } body { margin:0; min-height:100dvh; overflow:hidden; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:3px solid var(--coral); outline-offset:2px; }
.calc-topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(18px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--line); background:#fff; }.calc-brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; text-decoration:none; letter-spacing:-.03em; }.calc-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; color:#fff; background:var(--violet); font-family:Fraunces,serif; }.calc-topbar p { margin:0; color:var(--muted); font-size:.82rem; }.back { padding:9px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font-weight:700; text-decoration:none; font-size:.84rem; }
.calculator { display:grid; grid-template-columns:minmax(300px,390px) minmax(0,1fr); height:calc(100dvh - 64px); min-height:0; }.expression-pane { display:flex; min-height:0; flex-direction:column; overflow:auto; border-right:1px solid var(--line); background:#fff; }.pane-heading { display:flex; align-items:center; justify-content:space-between; padding:19px 20px 14px; }.pane-heading h1 { margin:0; font:600 1.15rem Fraunces,serif; }.clear { padding:7px 9px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:.78rem; font-weight:700; }.clear:hover { color:var(--coral); background:#fff0ed; }.expression-card { margin:0 14px; padding:13px; border:1px solid #d8d6ef; border-radius:14px; background:#fdfdff; }.expression-label { color:#6a619b; font:500 .69rem 'DM Mono',monospace; letter-spacing:.06em; }.expression { width:100%; margin-top:10px; padding:8px 0; border:0; outline:0; background:transparent; color:var(--ink); font:600 1.38rem 'DM Mono',monospace; }.expression::placeholder { color:#a7a8b9; }.result { min-height:22px; color:var(--muted); text-align:right; font:500 .9rem 'DM Mono',monospace; }.result.error { color:#bf4a33; }.helper { margin:14px 20px; color:var(--muted); font-size:.81rem; line-height:1.5; }.keypad { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:auto; padding:16px; border-top:1px solid var(--line); background:#fafafd; }.key { min-height:43px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-size:.88rem; font-weight:700; }.key:hover { border-color:#a9a0e7; background:var(--lav); }.key.operator { color:#5142ad; background:#f5f3ff; }.key.action { color:#fff; border-color:var(--violet); background:var(--violet); }.key.clear-key { color:#be4b34; background:#fff3ef; border-color:#ffd9ce; }
.graph-pane { display:grid; grid-template-rows:auto minmax(0,1fr); min-width:0; min-height:0; background:#fbfbfd; }.graph-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 20px; border-bottom:1px solid var(--line); background:#fff; }.graph-toolbar div { display:flex; align-items:center; gap:9px; }.graph-toolbar h2 { margin:0; font-size:.9rem; }.graph-toolbar span { color:var(--muted); font-size:.78rem; }.graph-toolbar button { padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:.78rem; font-weight:700; }.graph-toolbar button:hover { background:var(--lav); border-color:#b5afe5; }.canvas-wrap { position:relative; min-height:0; padding:20px; }.graph { width:100%; height:100%; display:block; touch-action:none; border:1px solid #e3e4ed; border-radius:14px; background:#fff; }.graph-note { position:absolute; bottom:34px; left:36px; padding:7px 9px; border-radius:8px; color:#575176; background:rgba(236,234,255,.9); font:500 .7rem 'DM Mono',monospace; }
@media (max-width:800px) { body { overflow:auto; }.calc-topbar p { display:none; }.calculator { height:auto; min-height:calc(100dvh - 64px); grid-template-columns:1fr; grid-template-rows:auto minmax(360px,1fr); }.expression-pane { overflow:visible; border-right:0; border-bottom:1px solid var(--line); }.keypad { margin-top:0; grid-template-columns:repeat(5,minmax(0,1fr)); }.graph-pane { min-height:460px; }.canvas-wrap { padding:14px; }.graph-note { left:28px; bottom:28px; } }
@media (max-width:430px) { .calc-topbar { padding:0 12px; }.calc-brand { font-size:.9rem; }.keypad { gap:6px; padding:12px; }.key { min-height:39px; font-size:.76rem; }.graph-toolbar { padding:13px; }.graph-toolbar span { display:none; } }

:root[data-theme='dark'] {
  color-scheme:dark;
  --ink:#f5f3ff;
  --muted:#c8c5d7;
  --paper:#171723;
  --panel:#252532;
  --line:#48475a;
  --lav:#37334f;
  --violet:#bfb4ff;
  --coral:#ff967a;
  --graph-background:#191a25;
  --graph-grid:#2f3040;
  --graph-axis:#72758a;
  --graph-label:#c5c7d6;
  --graph-plot:#ff967a;
  --graph-point:#c7bdff;
  --graph-point-fill:#191a25;
  --graph-point-label:#e1dcff;
  --graph-hover:rgba(199,189,255,.22);
}
:root[data-theme='dark'] :is(.calc-topbar,.back,.expression-pane,.expression-card,.keypad,.key,.graph-toolbar,.graph-toolbar button,.graph) { color:var(--ink); background:var(--panel); border-color:var(--line); }
:root[data-theme='dark'] .calc-mark { color:#1c1e38; background:#c7bdff; }
:root[data-theme='dark'] .expression-card { background:#20202c; }
:root[data-theme='dark'] .keypad { background:#1d1d29; }
:root[data-theme='dark'] .key:hover { background:#37334f; border-color:#8177bd; }
:root[data-theme='dark'] .key.operator { color:#d9d2ff; background:#343149; }
:root[data-theme='dark'] .key.action { color:#1c1e38; background:#c7bdff; border-color:#c7bdff; }
:root[data-theme='dark'] .key.clear-key { color:#ffc0b1; background:#442925; border-color:#684039; }
:root[data-theme='dark'] .clear:hover { color:#ffae9b; background:#402722; }
:root[data-theme='dark'] .graph-pane { background:#191923; }
:root[data-theme='dark'] .graph-toolbar button:hover { background:#37334f; border-color:#8177bd; }
:root[data-theme='dark'] .graph-note { color:#e3dfff; background:rgba(55,51,79,.94); }
:root[data-theme='dark'] .result.error { color:#ffad99; }

@media (max-width:760px) {
  .calc-topbar { gap:8px; }
  .calc-brand { min-width:0; }
  .back { padding:8px 10px; }
}

.selected-points { margin-top:12px; padding-top:11px; border-top:1px solid #e2e1ef; }
.selected-points-heading { margin-bottom:7px; color:#6a619b; font:500 .67rem 'DM Mono',monospace; letter-spacing:.06em; }
.selected-points-list { display:flex; flex-wrap:wrap; gap:6px; }
.selected-point-item { padding:5px 7px; border:1px solid #cbc5ef; border-radius:7px; color:#5142ad; background:#f5f3ff; font:500 .72rem 'DM Mono',monospace; }
.selected-point-item:hover { border-color:#9a90d9; background:#eceaff; }
.key.negative-key { grid-column:1 / -1; min-height:38px; color:#5142ad; }
:root[data-theme='dark'] .selected-points { border-color:#48475a; }
:root[data-theme='dark'] .selected-points-heading { color:#d8d2ff; }
:root[data-theme='dark'] .selected-point-item { color:#e3dfff; border-color:#71699e; background:#343149; }
:root[data-theme='dark'] .selected-point-item:hover { border-color:#a99ee8; background:#403b59; }
:root[data-theme='dark'] .key.negative-key { color:#d9d2ff; background:#343149; border-color:#48475a; }

@media (max-width:800px) {
  html { scroll-behavior:smooth; }
  .calc-topbar { position:sticky; top:0; z-index:10; box-shadow:0 1px 0 rgba(28,30,56,.08); }
  .graph-toolbar { position:sticky; top:64px; z-index:5; padding:12px 14px; }
  .graph-toolbar > div:last-child { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
  .graph-toolbar button { min-height:44px; padding:9px 12px; }
  .graph { touch-action:pan-y; }
  .graph-note { max-width:calc(100% - 56px); line-height:1.45; pointer-events:none; }
  .selected-point-item { min-height:36px; padding:7px 8px; }
}

@media (max-width:430px) {
  .graph-toolbar { align-items:flex-start; flex-direction:column; }
  .graph-toolbar > div:last-child { width:100%; margin-left:0; justify-content:stretch; }
  .graph-toolbar button { flex:1; }
  .graph-note { bottom:25px; left:25px; }
}

/* Expandable graph workspace and coordinate callouts. */
.panel-toggle { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:6px 9px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font-size:.73rem; font-weight:700; }
.panel-toggle > span:first-child { font-size:1.25rem; line-height:.7; }
.panel-toggle:hover { border-color:#9a90d9; background:var(--lav); }
.calculator.panel-collapsed { grid-template-columns:0 minmax(0,1fr); }
.calculator.panel-collapsed .expression-pane { width:0; overflow:hidden; border-right:0; opacity:0; pointer-events:none; }
.calculator.panel-collapsed .canvas-wrap { padding-inline:14px; }
.canvas-wrap { padding-block:12px; }
:root[data-theme='dark'] .panel-toggle { color:var(--ink); border-color:var(--line); background:#252532; }
:root[data-theme='dark'] .panel-toggle:hover { background:#37334f; border-color:#8177bd; }
@media (min-width:801px) { .graph-toolbar { min-height:58px; padding-block:10px; }.graph-pane { min-height:0; }.graph { border-radius:10px; } }
@media (max-width:800px) { .graph-pane { min-height:560px; }.calculator.panel-collapsed { grid-template-columns:1fr; grid-template-rows:minmax(520px,1fr); }.calculator.panel-collapsed .expression-pane { display:none; }.calculator.panel-collapsed .graph-pane { min-height:calc(100dvh - 64px); }.panel-toggle { min-height:40px; }.canvas-wrap { padding-block:10px; } }
@media (max-width:430px) { .panel-toggle > span:last-child { display:none; }.panel-toggle { min-width:40px; justify-content:center; padding:7px; } }

/* Switch between the graph workspace and a focused scientific calculator. */
.calculator-mode-switch { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:#f4f4f8; }
.mode-choice { display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:5px 9px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:.72rem; font-weight:700; text-decoration:none; }
.mode-choice.active { color:#fff; background:#5142ad; }
.mode-choice:hover:not(.active) { color:var(--ink); background:#e7e5f4; }
.calculator.scientific-mode { grid-template-columns:minmax(320px,680px); justify-content:center; padding:24px; background:linear-gradient(135deg,#f6f5fb,#fbfbfd); }
.calculator.scientific-mode .expression-pane { border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 45px rgba(28,30,56,.09); }
.calculator.scientific-mode .graph-pane { display:none; }
.calculator.scientific-mode .expression-card { margin:0 20px; padding:18px; }
.calculator.scientific-mode .expression { padding-block:15px; font-size:clamp(1.55rem,4vw,2.25rem); }
.calculator.scientific-mode .helper { margin:17px 25px; }
.calculator.scientific-mode .keypad { gap:10px; padding:20px; }
.calculator.scientific-mode .key { min-height:51px; font-size:.95rem; }
:root[data-theme='dark'] .calculator-mode-switch { border-color:#58566e; background:#242432; }
:root[data-theme='dark'] .mode-choice.active { color:#1c1e38; background:#c7bdff; }
:root[data-theme='dark'] .mode-choice:hover:not(.active) { color:#f5f3ff; background:#37334f; }
:root[data-theme='dark'] .calculator.scientific-mode { background:linear-gradient(135deg,#171723,#20202c); }
:root[data-theme='dark'] .calculator.scientific-mode .expression-pane { border-color:#48475a; box-shadow:0 18px 45px rgba(0,0,0,.3); }
@media (max-width:800px) { .calc-topbar { flex-wrap:wrap; height:auto; min-height:64px; padding-block:9px; }.calculator-mode-switch { order:4; width:100%; }.mode-choice { flex:1; min-height:38px; }.calculator.scientific-mode { display:block; min-height:calc(100dvh - 118px); padding:14px; }.calculator.scientific-mode .expression-pane { min-height:calc(100dvh - 146px); }.calculator.scientific-mode .expression-card { margin:0 14px; }.calculator.scientific-mode .keypad { gap:7px; padding:14px; }.calculator.scientific-mode .key { min-height:47px; } }

/* Standalone scientific calculator page. */
.scientific-only-layout { min-height:calc(100dvh - 64px); display:grid; place-items:center; padding:28px; background:linear-gradient(135deg,#f6f5fb,#fbfbfd); }
.scientific-only-pane { width:min(100%,680px); min-height:min(720px,calc(100dvh - 120px)); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 45px rgba(28,30,56,.09); }
.scientific-only-pane .pane-heading { align-items:flex-start; padding:25px 25px 17px; }.scientific-only-pane .expression-card { margin:0 20px; padding:18px; }.scientific-only-pane .expression { padding-block:15px; font-size:clamp(1.55rem,4vw,2.25rem); }.scientific-only-pane .helper { margin:17px 25px; }.scientific-only-pane .keypad { gap:10px; padding:20px; }.scientific-only-pane .key { min-height:51px; font-size:.95rem; }
.scientific-kicker { margin:0 0 5px; color:#6a619b; font:500 .69rem 'DM Mono',monospace; letter-spacing:.06em; }.scientific-only-pane h1 { margin:0; font:600 1.35rem Fraunces,serif; }
:root[data-theme='dark'] .scientific-only-layout { background:linear-gradient(135deg,#171723,#20202c); }.scientific-only-page .scientific-only-pane { border-color:#48475a; box-shadow:0 18px 45px rgba(0,0,0,.3); }.scientific-only-page .scientific-kicker { color:#d8d2ff; }
@media (max-width:800px) { .scientific-only-layout { min-height:calc(100dvh - 118px); padding:14px; place-items:stretch; }.scientific-only-pane { width:100%; min-height:calc(100dvh - 146px); }.scientific-only-pane .expression-card { margin:0 14px; }.scientific-only-pane .keypad { gap:7px; padding:14px; }.scientific-only-pane .key { min-height:47px; } }

@media (min-width:801px) {
  .scientific-only-layout { height:calc(100dvh - 64px); min-height:0; padding:18px; }
  .scientific-only-pane { height:100%; min-height:0; }
  .scientific-only-pane .pane-heading { padding:20px 22px 13px; }
  .scientific-only-pane .expression-card { margin:0 18px; padding:14px 18px; }
  .scientific-only-pane .expression { padding-block:10px; }
  .scientific-only-pane .helper { margin:13px 22px; }
  .scientific-only-pane .keypad { gap:8px; padding:16px; }
  .scientific-only-pane .key { min-height:44px; }
}

/* The calculators use the same full site navigation as every standard page. */
.calculator { height:calc(100dvh - var(--site-header-height,86px)); }
.expression-pane > .calculator-mode-switch {
  align-self:flex-start;
  margin:14px 14px 0;
}
.scientific-only-pane .calculator-mode-switch { margin-top:14px; }
.scientific-only-layout { min-height:calc(100dvh - var(--site-header-height,86px)); }
@media (min-width:801px) {
  .scientific-only-layout { height:calc(100dvh - var(--site-header-height,86px)); }
}
@media (max-width:800px) {
  .calculator { height:auto; min-height:calc(100dvh - var(--site-header-height,72px)); }
  .expression-pane > .calculator-mode-switch { width:auto; order:-1; }
  .graph-toolbar { top:0; }
  .calculator.panel-collapsed .graph-pane { min-height:calc(100dvh - var(--site-header-height,72px)); }
  .scientific-only-layout { min-height:calc(100dvh - var(--site-header-height,72px)); }
  .scientific-only-pane { min-height:calc(100dvh - var(--site-header-height,72px) - 28px); }
}