/* calculate: Material 3 styling.
   Colour roles are generated from seed #3a5ba0 (SchemeTonalSpot) with
   material-color-utilities: tools/m3-tokens.mjs. */

@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/roboto-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/roboto-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/roboto-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/roboto-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --md-primary: #465d91;
  --md-on-primary: #ffffff;
  --md-primary-container: #d9e2ff;
  --md-on-primary-container: #2e4578;
  --md-secondary: #575e71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #dce2f9;
  --md-on-secondary-container: #404659;
  --md-tertiary: #725572;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #fdd7fa;
  --md-on-tertiary-container: #593d5a;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #93000a;
  --md-surface: #faf8ff;
  --md-on-surface: #1a1b20;
  --md-surface-variant: #e1e2ec;
  --md-on-surface-variant: #44464f;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f4f3fa;
  --md-surface-container: #eeedf4;
  --md-surface-container-high: #e8e7ef;
  --md-surface-container-highest: #e2e2e9;
  --md-outline: #757780;
  --md-outline-variant: #c5c6d0;
  --md-inverse-surface: #2f3036;
  --md-inverse-on-surface: #f1f0f7;
  --md-inverse-primary: #b0c6ff;
  --md-scrim: #000000;

  /* graph series: distinct hues that sit next to the blue scheme */
  --g0: #3f63c9; --g1: #c8432f; --g2: #23845a; --g3: #8a4fbf; --g4: #c27a0e; --g5: #127f8e;

  --elev-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15);
  --elev-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15);
  --elev-3: 0 1px 3px rgb(0 0 0 / .3), 0 4px 8px 3px rgb(0 0 0 / .15);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-decel: cubic-bezier(.05, .7, .1, 1);
  --font: Roboto, system-ui, -apple-system, "Segoe UI", "Noto Sans", "Noto Sans Hebrew", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --math-size: 1.25em;
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dark: 1; } }
:root[data-theme="dark"] { --dark: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-primary: #b0c6ff; --md-on-primary: #142e60; --md-primary-container: #2e4578; --md-on-primary-container: #d9e2ff;
    --md-secondary: #bfc6dc; --md-on-secondary: #293042; --md-secondary-container: #404659; --md-on-secondary-container: #dce2f9;
    --md-tertiary: #e0bbde; --md-on-tertiary: #412742; --md-tertiary-container: #593d5a; --md-on-tertiary-container: #fdd7fa;
    --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
    --md-surface: #121318; --md-on-surface: #e2e2e9; --md-surface-variant: #44464f; --md-on-surface-variant: #c5c6d0;
    --md-surface-container-lowest: #0c0e13; --md-surface-container-low: #1a1b20; --md-surface-container: #1e1f25;
    --md-surface-container-high: #282a2f; --md-surface-container-highest: #33353a;
    --md-outline: #8f9099; --md-outline-variant: #44464f;
    --md-inverse-surface: #e2e2e9; --md-inverse-on-surface: #2f3036; --md-inverse-primary: #465d91;
    --g0: #8fb0ff; --g1: #ff8f7c; --g2: #6fd39f; --g3: #cfa6f5; --g4: #f3b65a; --g5: #5fd0de;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-primary: #b0c6ff; --md-on-primary: #142e60; --md-primary-container: #2e4578; --md-on-primary-container: #d9e2ff;
  --md-secondary: #bfc6dc; --md-on-secondary: #293042; --md-secondary-container: #404659; --md-on-secondary-container: #dce2f9;
  --md-tertiary: #e0bbde; --md-on-tertiary: #412742; --md-tertiary-container: #593d5a; --md-on-tertiary-container: #fdd7fa;
  --md-error: #ffb4ab; --md-on-error: #690005; --md-error-container: #93000a; --md-on-error-container: #ffdad6;
  --md-surface: #121318; --md-on-surface: #e2e2e9; --md-surface-variant: #44464f; --md-on-surface-variant: #c5c6d0;
  --md-surface-container-lowest: #0c0e13; --md-surface-container-low: #1a1b20; --md-surface-container: #1e1f25;
  --md-surface-container-high: #282a2f; --md-surface-container-highest: #33353a;
  --md-outline: #8f9099; --md-outline-variant: #44464f;
  --md-inverse-surface: #e2e2e9; --md-inverse-on-surface: #2f3036; --md-inverse-primary: #465d91;
  --g0: #8fb0ff; --g1: #ff8f7c; --g2: #6fd39f; --g3: #cfa6f5; --g4: #f3b65a; --g5: #5fd0de;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  font: 400 16px/24px var(--font);
  letter-spacing: .03125em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
code, kbd { font-family: var(--mono); font-size: .9em; }
.ic { width: 24px; height: 24px; fill: currentColor; flex: none; display: block; }

/* ---------- state layers (M3: hover 8%, focus/press 10%) ---------- */
.icon-btn, .seg button, .note-list button, .menu button, .text-btn, .fab-ext, .res, .tonal-btn, .keys button, .row-act {
  position: relative; isolation: isolate;
}
.icon-btn::after, .seg button::after, .note-list button::after, .menu button::after, .text-btn::after, .fab-ext::after,
.res::after, .tonal-btn::after, .keys button::after, .row-act::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0;
  transition: opacity 150ms linear; pointer-events: none; z-index: -1;
}
@media (hover: hover) {
  .icon-btn:hover::after, .seg button:hover::after, .note-list button:hover::after, .menu button:hover::after,
  .text-btn:hover::after, .fab-ext:hover::after, .res:hover::after, .tonal-btn:hover::after, .keys button:hover::after,
  .row-act:hover::after { opacity: .08; }
}
.icon-btn:active::after, .seg button:active::after, .note-list button:active::after, .menu button:active::after,
.text-btn:active::after, .fab-ext:active::after, .res:active::after, .tonal-btn:active::after, .keys button:active::after,
.row-act:active::after, :focus-visible::after { opacity: .1; }
:focus-visible { outline: 2px solid var(--md-secondary); outline-offset: 2px; }

.icon-btn { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; color: var(--md-on-surface-variant); flex: none; }
.icon-btn.on { color: var(--md-on-secondary-container); background: var(--md-secondary-container); }
.icon-btn.tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.text-btn { height: 40px; padding: 0 12px; border-radius: 20px; color: var(--md-primary); font: 500 14px/20px var(--font); letter-spacing: .00714em; display: inline-flex; align-items: center; gap: 8px; }
.text-btn .ic { width: 18px; height: 18px; }

/* ---------- layout ---------- */
.app { height: 100dvh; display: grid; grid-template-rows: 64px 1fr; grid-template-columns: 1fr; }
.topbar {
  grid-row: 1; grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; padding: 0 8px 0 4px;
  background: var(--md-surface); transition: background-color 200ms linear; z-index: 3; min-width: 0;
}
.topbar.scrolled { background: var(--md-surface-container); }
.title { font: 400 22px/28px var(--font); margin: 0 auto 0 4px; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.main { grid-row: 2; display: flex; min-height: 0; min-width: 0; }
.sheet { flex: 1 1 auto; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 0 40vh; overscroll-behavior: contain; scroll-padding: 96px 0; container-type: inline-size; }
.graph-pane {
  position: relative; flex: 0 0 46%; min-width: 340px; margin: 0 16px 16px 0;
  background: var(--md-surface-container-low); border-radius: 16px; overflow: hidden;
  transition: flex-basis 320ms var(--ease), min-width 320ms var(--ease), margin 320ms var(--ease), opacity 220ms linear, visibility 0s;
}
/* closing slides the pane away; the sheet takes the room back smoothly */
.graph-pane.closed {
  flex-basis: 0%; min-width: 0; margin-right: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: flex-basis 280ms var(--ease), min-width 280ms var(--ease), margin 280ms var(--ease), opacity 160ms linear, visibility 0s 280ms;
}
.graph-pane canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.graph-pane canvas[hidden] { display: none; }
.view-seg { position: absolute; left: 12px; top: 12px; height: 36px; background: var(--md-surface-container-low); }
.view-seg button { padding: 0 14px; font-size: 13px; }
.graph-pane canvas.dragging { cursor: grabbing; }
.graph-tools { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.graph-tools .icon-btn { border-radius: 12px; width: 40px; height: 40px; box-shadow: var(--elev-1); }
.graph-close { position: absolute; right: 8px; top: 8px; display: none; }

/* compact + medium: graph stacks above the sheet */
@media (max-width: 839px) {
  .main { flex-direction: column; }
  .graph-pane { order: -1; flex: 0 0 auto; height: min(44dvh, 420px); min-width: 0; margin: 0 12px 8px;
    transition: height 320ms var(--ease), margin 320ms var(--ease), opacity 220ms linear, visibility 0s; }
  .graph-pane.closed { flex-basis: auto; height: 0; margin-top: 0; margin-bottom: 0; margin-right: 12px;
    transition: height 280ms var(--ease), margin 280ms var(--ease), opacity 160ms linear, visibility 0s 280ms; }
  .graph-close { display: grid; }
  .seg button { padding: 0 10px; }
}
@media (max-width: 480px) {
  .title { display: none; }
  .seg { margin-left: auto; }
  .topbar { gap: 0; padding-right: 4px; }
}
@media (max-width: 420px) {
  .seg button { padding: 0 8px; font-size: 13px; }
  .seg .seg-check { display: none !important; }
  .title { font-size: 20px; }
}

/* ---------- segmented button ---------- */
.seg { display: flex; height: 40px; border: 1px solid var(--md-outline); border-radius: 20px; overflow: hidden; margin-right: 4px; flex: none; }
.seg button { display: flex; align-items: center; gap: 6px; padding: 0 14px; font: 500 14px/20px var(--font); letter-spacing: .00714em; color: var(--md-on-surface); }
.seg button + button { border-left: 1px solid var(--md-outline); }
.seg button[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.seg .seg-check { display: none; }
.seg .seg-check .ic { width: 18px; height: 18px; }
.seg button[aria-pressed="true"] .seg-check { display: block; }

/* ---------- navigation drawer ---------- */
.drawer {
  position: fixed; z-index: 20; top: 0; bottom: 0; left: 0; width: min(360px, calc(100vw - 56px));
  background: var(--md-surface-container-low); border-radius: 0 16px 16px 0; padding: 12px; display: flex; flex-direction: column;
  transform: translateX(-105%); transition: transform 300ms var(--ease-decel), visibility 0s 300ms; visibility: hidden; box-shadow: var(--elev-1);
}
.drawer.open { transform: none; visibility: visible; transition: transform 400ms var(--ease-decel); }
.scrim { position: fixed; inset: 0; z-index: 19; background: var(--md-scrim); opacity: 0; pointer-events: none; transition: opacity 250ms linear; }
.scrim.on { opacity: .32; pointer-events: auto; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 4px 0 16px; }
.drawer-brand { display: flex; align-items: center; gap: 12px; font: 500 16px/24px var(--font); letter-spacing: .009em; color: var(--md-on-surface-variant); }
.brand-mark { width: 24px; height: 24px; border-radius: 7px; background: var(--md-primary) url("icon-mark.svg") center / 18px no-repeat; }
.fab-ext {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 16px; margin: 4px 4px 16px; align-self: flex-start;
  border-radius: 16px; background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: var(--elev-1);
  font: 500 14px/20px var(--font); letter-spacing: .00714em;
}
.drawer-label { font: 500 14px/20px var(--font); color: var(--md-on-surface-variant); padding: 18px 16px 10px; letter-spacing: .00714em; }
.note-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.note-list li { display: flex; align-items: center; }
.note-list button.pick {
  flex: 1; min-width: 0; height: 56px; border-radius: 28px; display: flex; flex-direction: column; justify-content: center; text-align: left;
  padding: 0 16px; color: var(--md-on-surface-variant);
}
.note-list button.pick .nt { font: 500 14px/20px var(--font); letter-spacing: .00714em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.note-list button.pick .nd { font: 400 12px/16px var(--font); letter-spacing: .033em; opacity: .85; }
.note-list li.active button.pick { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.drawer-foot { font: 400 12px/16px var(--font); color: var(--md-on-surface-variant); padding: 12px 16px 4px; letter-spacing: .033em; }

@media (min-width: 1200px) {
  .app { grid-template-columns: 0px 1fr; transition: grid-template-columns 320ms var(--ease); }
  .app.drawer-docked { grid-template-columns: 300px 1fr; }
  .drawer, .drawer.open {
    position: relative; grid-row: 2; grid-column: 1; width: auto; min-width: 0; transform: none; box-shadow: none; background: transparent;
    border-radius: 0; padding: 0 0 12px 12px; z-index: 1; overflow: hidden; opacity: 0; visibility: hidden;
    transition: opacity 160ms linear, visibility 0s 320ms;
  }
  .app.drawer-docked .drawer { opacity: 1; visibility: visible; transition: opacity 220ms linear 90ms, visibility 0s; }
  /* fixed-width contents, so nothing reflows while the column grows or shrinks */
  .drawer .note-list, .drawer .drawer-label, .drawer .drawer-foot { min-width: 276px; max-width: 276px; }
  .drawer-head, .scrim { display: none; }
  .main { grid-column: 2; }
}

/* ---------- rows ---------- */
.rows { padding: 0 8px; }
.row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 8px; align-items: start;
  min-height: 48px; padding: 0 8px 0 0; border-radius: 12px; position: relative;
}
.row + .row { margin-top: 6px; }
.row.active { background: var(--md-surface-container); }
.gut {
  grid-column: 1; height: 56px; display: flex; align-items: center; justify-content: flex-end; padding-right: 2px;
  font: 500 11px/16px var(--font); color: var(--md-outline); user-select: none; font-variant-numeric: tabular-nums;
}
.gut .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 0; cursor: pointer; margin-right: 2px; position: relative; }
.gut .dot.off { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.gut .dot::before { content: ""; position: absolute; inset: -13px; }
.body { grid-column: 2; min-width: 0; padding: 8px 0; cursor: text; }
.disp {
  min-height: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; padding: 2px 0;
}
.disp .katex { font-size: var(--math-size); }
.disp .label { font: 500 14px/20px var(--font); color: var(--md-on-surface-variant); letter-spacing: .00714em; unicode-bidi: plaintext; }
.disp.text { font: 400 16px/24px var(--font); unicode-bidi: plaintext; white-space: pre-wrap; overflow-wrap: anywhere; display: block; padding: 8px 0; }
.disp.text .katex { font-size: 1.1em; }
.disp.h1 { font: 400 24px/32px var(--font); padding: 12px 0 4px; display: block; unicode-bidi: plaintext; }
.disp.h2 { font: 400 22px/28px var(--font); padding: 10px 0 4px; display: block; unicode-bidi: plaintext; }
.disp.h3 { font: 500 16px/24px var(--font); letter-spacing: .009em; padding: 10px 0 2px; display: block; unicode-bidi: plaintext; }
.disp.comment { color: var(--md-on-surface-variant); font: 400 14px/20px var(--font); display: block; padding: 12px 0; unicode-bidi: plaintext; white-space: pre-wrap; }
.disp.raw { font-family: var(--mono); font-size: 14px; color: var(--md-on-surface-variant); white-space: pre-wrap; overflow-wrap: anywhere; display: block; padding: 10px 0; }
.disp.empty { min-height: 40px; }
.disp[hidden] { display: none !important; }
.disp .hint { color: var(--md-on-surface-variant); font: 400 16px/24px var(--font); opacity: .75; }

.ed {
  display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--md-on-surface);
  font: 400 15px/24px var(--mono); padding: 8px 0; margin: 0; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere;
  caret-color: var(--md-primary); tab-size: 2;
}
.ed::placeholder { color: var(--md-on-surface-variant); opacity: .7; }
.preview { padding: 0 0 8px; min-height: 0; overflow-x: auto; overflow-y: hidden; }
.preview .katex { font-size: var(--math-size); }
.preview:empty { display: none; }

.res {
  grid-column: 3; min-height: 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 2px;
  padding: 8px 12px; border-radius: 12px; text-align: right; max-width: min(48cqw, 460px); overflow: hidden; color: var(--md-on-surface);
}
/* maths never wraps mid-formula; long lines scroll sideways */
.disp .katex-html, .preview .katex-html, .res .main-r .katex-html, .steps .katex-html { white-space: nowrap; }
.res:empty, .res.none { visibility: hidden; pointer-events: none; }
.res .main-r { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 6px 0; margin: -6px 0; white-space: nowrap; }
.res .main-r .katex { font-size: var(--math-size); }
.res .alt { display: block; font: 400 14px/1.6 var(--font); color: var(--md-on-surface-variant); letter-spacing: .01em; padding: 2px 0; max-width: 100%; text-align: right; }
.res .alt .katex { font-size: 1.1em; }
.res.solution .main-r { color: var(--md-primary); }
.res.quiet .main-r { color: var(--md-on-surface-variant); }
.res.quiet .main-r .katex { font-size: 1.1em; }
.res.note { color: var(--md-on-surface-variant); font: 400 13px/18px var(--font); }
.res.note .katex { font-size: 1.05em; }
.res.error { color: var(--md-error); font: 400 13px/18px var(--font); cursor: default; }
.res.bool .pill, .res.sign .pill {
  display: inline-flex; vertical-align: middle; margin: 2px 0; align-items: center; gap: 4px; height: 28px; padding: 0 12px; border-radius: 8px;
  font: 500 14px/20px var(--font); letter-spacing: .00714em;
}
.res.bool.yes .pill { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.res.bool.no .pill { background: var(--md-error-container); color: var(--md-on-error-container); }
.res.bool .pill .ic { width: 18px; height: 18px; }
.res.bool .main-r { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
.res.sign .main-r .katex { font-size: 1.15em; }
/* the answer sign sits in a bubble drawn with a shadow, so it adds no width KaTeX doesn't know about */
.res .ans { border-radius: 50%; background: var(--md-primary-container); box-shadow: 0 0 0 .3em var(--md-primary-container); color: var(--md-on-primary-container); font-weight: bold; }

.sub { padding: 2px 0 10px; display: flex; flex-direction: column; gap: 8px; }
.sub:empty { display: none; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 8px; font: 400 13px/20px var(--font); color: var(--md-on-surface-variant); letter-spacing: .02em; align-items: center; }
.facts .f { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px; border-radius: 8px; border: 1px solid var(--md-outline-variant); white-space: nowrap; }
.facts .f .katex { font-size: 1.05em; color: var(--md-on-surface); }
.row-act { height: 28px; padding: 0 10px 0 8px; border-radius: 8px; font: 500 13px/20px var(--font); color: var(--md-primary); display: inline-flex; align-items: center; gap: 4px; }
.row-act .ic { width: 18px; height: 18px; }
.steps { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-left: 2px solid var(--md-outline-variant); margin-left: 4px; overflow-x: auto; }
.steps .st { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.steps .st .n { font: 500 11px/16px var(--font); color: var(--md-outline); width: 14px; text-align: right; flex: none; }
.steps .katex { font-size: 1.12em; }

/* ---------- values tables ---------- */
.vt { max-width: 560px; overflow-x: auto; }
.vt table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--md-outline-variant); border-radius: 12px; overflow: hidden; }
.vt th { font: 500 13px/20px var(--font); color: var(--md-on-surface-variant); text-align: left; padding: 8px 12px; background: var(--md-surface-container); border-bottom: 1px solid var(--md-outline-variant); white-space: nowrap; }
.vt th .katex { font-size: 1.12em; color: var(--md-on-surface); }
.vt th.out .katex { color: var(--md-primary); }
.vt td { padding: 0; border-bottom: 1px solid var(--md-outline-variant); }
.vt tbody tr:last-child td { border-bottom: 0; }
.vt td + td { border-left: 1px solid var(--md-outline-variant); }
.vt td:last-child { width: 44px; border-left: 0; }
.vt input {
  width: 100%; min-width: 72px; border: 0; background: transparent; color: var(--md-on-surface); outline: none;
  font: 400 15px/24px var(--font); font-variant-numeric: tabular-nums; padding: 8px 12px;
}
.vt input:focus { background: var(--md-surface-container-high); box-shadow: inset 0 -2px 0 var(--md-primary); }
.vt input.calc { color: var(--md-primary); font-weight: 500; }
.vt input.bad { color: var(--md-error); }
.vt .vt-del { width: 32px; height: 32px; margin: 0 6px; }
.vt .vt-del .ic { width: 18px; height: 18px; }
.vt .vt-add { margin-top: 6px; }

/* M3 slider */
.slider { display: flex; align-items: center; max-width: 420px; }
.slider input { flex: 1; -webkit-appearance: none; appearance: none; height: 40px; background: transparent; margin: 0; --p: 50%; cursor: pointer; }
.slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--c, var(--md-primary)) var(--p), var(--md-surface-container-highest) var(--p)); }
.slider input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--md-surface-container-highest); }
.slider input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--c, var(--md-primary)); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--c, var(--md-primary)); margin-top: -8px; box-shadow: var(--elev-1); border: 0; }
.slider input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--c, var(--md-primary)); border: 0; box-shadow: var(--elev-1); }
.slider input:focus-visible { outline: none; }
.slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 10px color-mix(in srgb, var(--c, var(--md-primary)) 12%, transparent); }

.sheet-tail { min-height: 120px; cursor: text; }
.source { display: block; width: calc(100% - 32px); margin: 8px 16px; min-height: 70vh; resize: none; border: 1px solid var(--md-outline); border-radius: 4px;
  background: transparent; color: var(--md-on-surface); font: 400 15px/24px var(--mono); padding: 12px 16px; outline: 0; }
.source:focus { border: 2px solid var(--md-primary); padding: 11px 15px; }
.source[hidden] { display: none; }

/* compact: answer under the expression */
@media (max-width: 599px) {
  .rows { padding: 0 4px; }
  /* formula, then its answer on the same line if it fits (else just below,
     on the right), then facts/steps */
  .row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; padding: 4px 4px 4px 0; }
  .gut { order: 0; width: 28px; height: 48px; align-self: flex-start; }
  .row > .body { display: contents; }
  .row > .body > .disp { order: 1; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 36px); }
  .row > .body > .disp.text, .row > .body > .disp.h1, .row > .body > .disp.h2, .row > .body > .disp.h3,
  .row > .body > .disp.comment, .row > .body > .disp.raw { flex: 1 1 calc(100% - 36px); }
  .row > .body > .ed { order: 1; flex: 1 1 calc(100% - 36px); min-width: 0; }
  .row > .body > .preview { order: 2; flex: 1 1 100%; padding-left: 36px; }
  .res { order: 3; margin-left: auto; min-height: 0; padding: 4px 8px; max-width: 100%; }
  .row > .body > .sub { order: 4; flex: 1 1 100%; padding-left: 36px; }
  .res:empty, .res.none { display: none; }
}

/* ---------- menu ---------- */
.menu {
  position: fixed; z-index: 30; min-width: 232px; max-width: 300px; padding: 8px 0; border-radius: 4px; background: var(--md-surface-container);
  box-shadow: var(--elev-2); transform-origin: top right; animation: menu-in 200ms var(--ease-decel);
}
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: scaleY(.6); } }
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; font: 500 14px/20px var(--font); letter-spacing: .00714em; text-align: left; color: var(--md-on-surface); }
.menu button .ic { color: var(--md-on-surface-variant); }
.menu button kbd { margin-left: auto; color: var(--md-on-surface-variant); font: 400 12px/16px var(--font); }
.menu button.danger { color: var(--md-error); }
.menu button.danger .ic { color: var(--md-error); }
.menu hr { border: 0; border-top: 1px solid var(--md-outline-variant); margin: 8px 0; }

/* ---------- dialog ---------- */
.dialog {
  border: 0; padding: 24px 0 0; border-radius: 28px; background: var(--md-surface-container-high); color: var(--md-on-surface);
  width: min(640px, calc(100vw - 32px)); max-height: min(86dvh, 820px); box-shadow: var(--elev-3);
}
.dialog[open] { display: flex; flex-direction: column; animation: dlg-in 250ms var(--ease-decel); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(-16px) scale(.98); } }
.dialog::backdrop { background: rgb(0 0 0 / .32); }
.dialog h2 { font: 400 24px/32px var(--font); margin: 0 24px 16px; }
.dialog-body:focus-visible { outline: none; }
.dialog-body { overflow-y: auto; padding: 0 24px; color: var(--md-on-surface-variant); font: 400 14px/20px var(--font); letter-spacing: .018em; }
.dialog-body h3 { font: 500 14px/20px var(--font); color: var(--md-primary); margin: 20px 0 4px; letter-spacing: .00714em; }
.dialog-body h3:first-child { margin-top: 0; }
.dialog-body dl { margin: 0; display: grid; grid-template-columns: minmax(150px, max-content) 1fr; }
.dialog-body dt, .dialog-body dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--md-outline-variant); }
.dialog-body dt { padding-right: 20px; color: var(--md-on-surface); }
.dialog-body dt code { font-size: 13px; }
.dialog-body dd .katex { color: var(--md-on-surface); }
.dialog-body p { margin: 8px 0; }
.dialog-actions { display: flex; justify-content: flex-end; padding: 16px 24px 24px; }
@media (max-width: 520px) { .dialog-body dl { grid-template-columns: 1fr; } .dialog-body dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- snackbar ---------- */
.snackbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  min-height: 48px; max-width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; padding: 14px 16px; border-radius: 4px;
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); font: 400 14px/20px var(--font); letter-spacing: .018em;
  box-shadow: var(--elev-3); transition: transform 250ms var(--ease-decel), opacity 150ms linear;
}
.snackbar.on { transform: translate(-50%, 0); opacity: 1; }
.snackbar .katex { font-size: 1.05em; }

/* ---------- symbol keys for touch keyboards ---------- */
.keys {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  overflow-x: auto; background: var(--md-surface-container); box-shadow: var(--elev-2); scrollbar-width: none;
}
.keys[hidden] { display: none; }
.keys button { flex: 1 0 auto; min-width: 44px; height: 40px; border-radius: 8px; background: var(--md-surface-container-highest);
  font: 500 16px/20px var(--font); color: var(--md-on-surface); }

/* KaTeX colour follows the theme */
.katex { color: inherit; }
.katex .ans { color: var(--md-on-primary-container); }