@import url('vendor/type/fonts.css');

/* ---------------------------------------------------------------------------
   Everything visual is derived from three colours: the paper you write on, the
   ink you write with, and the darkest tone on the page. Themes set those three
   and the ladders below regenerate every surface, hairline and text colour.
   A dark theme is just a light paper and a dark depth swapped over, which is
   why there are no per-theme overrides any more.
   --------------------------------------------------------------------------- */
:root, body {
  color-scheme: light;
  --paper: #ffffff;
  --depth: #0f2942;
  --pen-user: #1f6fd0;
  --pen: var(--pen-user);
  --on-pen: #ffffff;
  --tone-mix: 90%;
  --tone: color-mix(in oklab, var(--depth) var(--tone-mix), var(--pen));
  --shade: 16 41 66;

  /* structure: text, hairlines, panels */
  --n99: color-mix(in oklab, var(--tone) 1.2%, var(--paper));
  --n96: color-mix(in oklab, var(--tone) 4.7%, var(--paper));
  --n93: color-mix(in oklab, var(--tone) 8.1%, var(--paper));
  --n90: color-mix(in oklab, var(--tone) 11.6%, var(--paper));
  --n87: color-mix(in oklab, var(--tone) 15.1%, var(--paper));
  --n84: color-mix(in oklab, var(--tone) 18.6%, var(--paper));
  --n81: color-mix(in oklab, var(--tone) 22.1%, var(--paper));
  --n78: color-mix(in oklab, var(--tone) 25.6%, var(--paper));
  --n75: color-mix(in oklab, var(--tone) 29.1%, var(--paper));
  --n72: color-mix(in oklab, var(--tone) 32.6%, var(--paper));
  --n69: color-mix(in oklab, var(--tone) 36.0%, var(--paper));
  --n66: color-mix(in oklab, var(--tone) 39.5%, var(--paper));
  --n63: color-mix(in oklab, var(--tone) 43.0%, var(--paper));
  --n60: color-mix(in oklab, var(--tone) 46.5%, var(--paper));
  --n57: color-mix(in oklab, var(--tone) 50.0%, var(--paper));
  --n54: color-mix(in oklab, var(--tone) 53.5%, var(--paper));
  --n51: color-mix(in oklab, var(--tone) 57.0%, var(--paper));
  --n48: color-mix(in oklab, var(--tone) 60.5%, var(--paper));
  --n45: color-mix(in oklab, var(--tone) 64.0%, var(--paper));
  --n42: color-mix(in oklab, var(--tone) 67.4%, var(--paper));
  --n39: color-mix(in oklab, var(--tone) 70.9%, var(--paper));
  --n36: color-mix(in oklab, var(--tone) 74.4%, var(--paper));
  --n33: color-mix(in oklab, var(--tone) 77.9%, var(--paper));
  --n30: color-mix(in oklab, var(--tone) 81.4%, var(--paper));
  --n27: color-mix(in oklab, var(--tone) 84.9%, var(--paper));
  --n24: color-mix(in oklab, var(--tone) 88.4%, var(--paper));
  --n21: color-mix(in oklab, var(--tone) 91.9%, var(--paper));
  --n18: color-mix(in oklab, var(--tone) 95.3%, var(--paper));
  --n15: color-mix(in oklab, var(--tone) 98.8%, var(--paper));
  --n12: color-mix(in oklab, var(--tone) 100.0%, var(--paper));
  --n09: color-mix(in oklab, var(--tone) 100.0%, var(--paper));
  --n06: color-mix(in oklab, var(--tone) 100.0%, var(--paper));

  /* ink: anything that should follow the chosen pen colour */
  --c99: color-mix(in oklab, var(--pen) 2.0%, var(--paper));
  --c96: color-mix(in oklab, var(--pen) 7.8%, var(--paper));
  --c93: color-mix(in oklab, var(--pen) 13.7%, var(--paper));
  --c90: color-mix(in oklab, var(--pen) 19.6%, var(--paper));
  --c87: color-mix(in oklab, var(--pen) 25.5%, var(--paper));
  --c84: color-mix(in oklab, var(--pen) 31.4%, var(--paper));
  --c81: color-mix(in oklab, var(--pen) 37.3%, var(--paper));
  --c78: color-mix(in oklab, var(--pen) 43.1%, var(--paper));
  --c75: color-mix(in oklab, var(--pen) 49.0%, var(--paper));
  --c72: color-mix(in oklab, var(--pen) 54.9%, var(--paper));
  --c69: color-mix(in oklab, var(--pen) 60.8%, var(--paper));
  --c66: color-mix(in oklab, var(--pen) 66.7%, var(--paper));
  --c63: color-mix(in oklab, var(--pen) 72.5%, var(--paper));
  --c60: color-mix(in oklab, var(--pen) 78.4%, var(--paper));
  --c57: color-mix(in oklab, var(--pen) 84.3%, var(--paper));
  --c54: color-mix(in oklab, var(--pen) 90.2%, var(--paper));
  --c51: color-mix(in oklab, var(--pen) 96.1%, var(--paper));
  --c48: color-mix(in oklab, var(--pen) 97.1%, var(--depth));
  --c45: color-mix(in oklab, var(--pen) 88.6%, var(--depth));
  --c42: color-mix(in oklab, var(--pen) 80.0%, var(--depth));
  --c39: color-mix(in oklab, var(--pen) 71.4%, var(--depth));
  --c36: color-mix(in oklab, var(--pen) 62.9%, var(--depth));
  --c33: color-mix(in oklab, var(--pen) 54.3%, var(--depth));
  --c30: color-mix(in oklab, var(--pen) 45.7%, var(--depth));
  --c27: color-mix(in oklab, var(--pen) 37.1%, var(--depth));
  --c24: color-mix(in oklab, var(--pen) 28.6%, var(--depth));
  --c21: color-mix(in oklab, var(--pen) 20.0%, var(--depth));
  --c18: color-mix(in oklab, var(--pen) 11.4%, var(--depth));
  --c15: color-mix(in oklab, var(--pen) 2.9%, var(--depth));
  --c12: color-mix(in oklab, var(--pen) 0.0%, var(--depth));
  --c09: color-mix(in oklab, var(--pen) 0.0%, var(--depth));
  --c06: color-mix(in oklab, var(--pen) 0.0%, var(--depth));

  --flag-ok: #12854f; --flag-ok-lift: #3fbe84; --flag-bad: #c0392b;
  --flag-bad-lift: #ef8b82; --flag-bad-wash: color-mix(in oklab, var(--flag-bad) 10%, var(--paper));
  --flag-bad-deep: color-mix(in oklab, var(--flag-bad) 22%, var(--depth));
  --flag-warn: #b1791b; --flag-warn-lift: #dcae4e; --flag-warn-deep: #8a5f12;

  /* names the rest of the sheet still speaks in */
  --ink: var(--n21); --muted: var(--n51); --line: var(--n90);
  --panel: var(--n99); --panel-2: var(--n96); --canvas: var(--c96);
  --accent: var(--pen); --accent-dark: var(--c39); --yellow: var(--flag-warn);
  --focus: var(--pen);
  --shadow-soft: 0 1px 2px rgb(var(--shade) / .05), 0 2px 8px rgb(var(--shade) / .05);
  --shadow-lift: 0 8px 26px rgb(var(--shade) / .13);

  /* the writing surface */
  --desk: var(--n95); --sheet: var(--paper);
  --note-face: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --note-leading: 1.75;
  --note-measure: 880px;
  --rule-ink: color-mix(in oklab, var(--pen) 20%, transparent);
}

/* Two surfaces plus the board. Light is the default declared above. */
body[data-theme="dark"] { color-scheme: dark; --paper: #121b25; --depth: #e0ebf5; --shade: 0 0 0; --tone-mix: 88%; }
body[data-theme="dark"] {
  --desk: var(--paper); --sheet: var(--n96);
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .3); --shadow-lift: 0 10px 30px rgb(0 0 0 / .5);
}


* { box-sizing: border-box; }
body { margin: 0; min-width: 700px; height: 100vh; overflow: hidden; color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; background: var(--canvas); }
button, input { font: inherit; } button { cursor: pointer; } 
.toolbar { height: 62px; display: flex; align-items: center; gap: 28px; padding: 0 20px 0 24px; background: var(--n09); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; font-family: Newsreader, Georgia, serif; font-weight: 600; font-size: 23px; letter-spacing: -.7px; white-space: nowrap; }.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border: 1px solid var(--n42); border-radius: 8px; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 15px; }.brand sup { font-family: 'DM Sans', sans-serif; font-size: .46em; margin-left: 1px; }
.document-meta { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }.document-meta input { width: min(280px, 26vw); padding: 6px 8px; color: var(--n90); font-size: 14px; font-weight: 500; background: transparent; border: 1px solid transparent; border-radius: 6px; outline: none; }.document-meta input:hover, .document-meta input:focus { background: var(--n12); border-color: var(--n24); }.save-state { color: var(--muted); font-size: 12px; white-space: nowrap; }
.toolbar-actions { display: flex; align-items: center; gap: 3px; }.tool-button, .icon-button, .chip, .add-line, .graph-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--n81); border: 1px solid transparent; background: transparent; border-radius: 7px; transition: .16s ease; }.tool-button { height: 34px; padding: 0 9px; font-size: 12px; }.tool-button:hover, .icon-button:hover { color: white; background: var(--n15); }.tool-button svg, .icon-button svg { width: 15px; height: 15px; }.icon-button { width: 34px; height: 34px; }.toolbar-rule { height: 22px; border-left: 1px solid var(--n24); margin: 0 6px; }
.app-shell { height: calc(100vh - 62px); display: grid; grid-template-columns: minmax(390px, 1.65fr) 8px minmax(300px, 1fr); }.workspace-pane, .graph-pane { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }.workspace-pane { background: radial-gradient(circle at 82% 2%, var(--n12) 0, transparent 34%), var(--panel); }.graph-pane { background: var(--n06); }.divider { position: relative; z-index: 2; cursor: col-resize; background: var(--n12); transition: background .15s; }.divider:hover, .divider.dragging { background: var(--n54); }.divider span { position: absolute; top: 50%; left: 2px; width: 5px; height: 32px; transform: translateY(-50%); border-radius: 4px; background: var(--n30); }.divider:hover span { background: var(--n12); }
.pane-heading { min-height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 23px 25px 17px 30px; border-bottom: 1px solid rgba(61, 73, 67, .55); }.eyebrow { margin: 0 0 3px; color: var(--n51); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.25px; font-weight: 500; }.pane-heading h1, .pane-heading h2 { margin: 0; color: var(--n93); font-family: Newsreader, Georgia, serif; font-size: 25px; line-height: 1; letter-spacing: -.55px; font-weight: 500; }.graph-heading { padding-left: 25px; }.graph-heading h2 { color: var(--n87); }
.graph-button { padding: 8px 11px; color: var(--c84); border-color: var(--n27); background: var(--n15); font-size: 12px; font-weight: 600; }.graph-button:hover { background: var(--n21); border-color: var(--n45); }.graph-button svg { width: 15px; height: 15px; }.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c66); box-shadow: 0 0 0 3px rgba(168, 211, 119, .1); }
.workspace-toolbar { display: flex; align-items: center; gap: 7px; padding: 12px 25px 11px 30px; border-bottom: 1px solid rgba(61, 73, 67, .45); }.chip { height: 29px; padding: 0 9px; color: var(--n69); border-color: var(--n24); background: var(--n12); font-family: 'DM Mono', monospace; font-size: 11px; }.chip:hover, .chip.active { color: var(--c84); border-color: var(--n36); background: var(--n15); }.chip svg { width: 13px; height: 13px; }.workspace-toolbar-spacer { flex: 1; }.add-line { padding: 6px 0 6px 8px; color: var(--n63); font-size: 12px; }.add-line:hover { color: var(--c81); }.add-line svg { width: 14px; }
.editor-scroll { flex: 1; overflow-y: auto; padding: 26px 42px 24px 30px; }.math-editor { max-width: 720px; margin: 0 auto; }.equation-block { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; margin-bottom: 8px; padding: 7px 7px 7px 0; border: 1px solid transparent; border-radius: 8px; transition: .14s ease; }.equation-block:hover, .equation-block.selected { background: rgba(188, 217, 139, .035); border-color: var(--n21); }.equation-block.selected { border-color: var(--n36); box-shadow: 0 0 0 1px rgba(121, 154, 90, .09); }.line-number { width: 27px; color: var(--n36); font-family: 'DM Mono', monospace; font-size: 11px; text-align: center; user-select: none; }.equation-block math-field { flex: 1; min-width: 0; padding: 8px 10px; color: var(--n93); background: var(--n06); border: 1px solid var(--n21); border-radius: 5px; font-size: 23px; --caret-color: var(--c81); --selection-background-color: var(--n24); --contains-highlight-background-color: var(--c18); --placeholder-color: var(--n42); }.equation-block math-field:focus-within { border-color: var(--n45); box-shadow: 0 0 0 3px rgba(137, 174, 100, .12); outline: 0; }.remove-line { opacity: 0; width: 25px; height: 25px; color: var(--n48); }.equation-block:hover .remove-line, .equation-block.selected .remove-line { opacity: 1; }.remove-line:hover { color: var(--flag-bad-lift); background: var(--flag-bad-deep); }.remove-line svg { width: 14px; height: 14px; }.editor-hint { max-width: 720px; margin: 22px auto 0 39px; color: var(--n48); font-size: 12px; line-height: 1.65; }.editor-hint code { color: var(--c69); font-family: 'DM Mono', monospace; }.editor-hint kbd { color: var(--n84); }
.workspace-footer { height: 35px; display: flex; justify-content: space-between; align-items: center; padding: 0 28px; color: var(--n48); border-top: 1px solid rgba(61, 73, 67, .5); font-size: 11px; }.workspace-footer .status-dot { width: 5px; height: 5px; margin-right: 6px; }
.notebook-tabs { display: flex; align-items: end; gap: 4px; min-height: 36px; margin: -8px -12px 15px -14px; padding: 0 4px 0 0; border-bottom: 1px solid var(--c90); }.tab-list { display: flex; min-width: 0; flex: 1; gap: 3px; overflow-x: auto; }.workspace-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 155px; height: 33px; padding: 0 7px 0 10px; color: var(--n51); border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; font-size: 11px; white-space: nowrap; }.workspace-tab:hover { color: var(--c39); background: var(--c96); }.workspace-tab.active { color: var(--c36); border-color: var(--c87); background: var(--paper); font-weight: 600; }.workspace-tab-label { overflow: hidden; text-overflow: ellipsis; }.tab-close { display: grid; place-items: center; width: 17px; height: 17px; padding: 0; color: var(--n60); border: 0; border-radius: 3px; background: transparent; }.tab-close:hover { color: var(--flag-bad); background: var(--flag-bad-wash); }.tab-close svg { width: 12px; height: 12px; }.new-tab { display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 3px; color: var(--c48); border: 0; border-radius: 5px; background: transparent; }.new-tab:hover { background: var(--c93); }.new-tab svg { width: 15px; height: 15px; }.note-editor { min-height: 260px; height: calc(100% - 53px); max-width: 880px; margin: 0 auto; padding: 4px 12px 50px 27px; color: var(--c30); outline: 0; font-size: 16px; line-height: 1.75; caret-color: var(--c42); }.note-editor:empty::before { content: 'Start typing your work…'; color: var(--n69); pointer-events: none; }.note-editor p { margin: 0 0 10px; }.note-editor .inline-math { display: inline-flex; min-width: 18px; margin: 0 2px; vertical-align: middle; }.note-editor .inline-math math-field { width: auto; min-width: 24px; padding: 1px 3px; color: var(--c24); border: 0; border-bottom: 1px solid var(--c81); border-radius: 3px; background: var(--c99); font-size: 1.04em; --caret-color: var(--c42); --selection-background-color: var(--c93); }.note-editor .inline-math math-field:focus-within { border-bottom-color: var(--c51); box-shadow: 0 2px 0 rgba(57, 139, 208, .15); }.note-editor .inline-math math-field::part(menu-toggle), .note-editor .inline-math math-field::part(virtual-keyboard-toggle) { display: none; }
.scientific-calculator { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 24px; overflow-y: auto; background: linear-gradient(135deg, var(--c96), var(--c99) 48%, var(--c96)); }.calculator-screen { padding: 18px 19px 15px; border: 1px solid var(--c84); border-radius: 12px; background: var(--paper); box-shadow: 0 8px 24px rgba(45, 118, 184, .08); }.screen-label { display: flex; justify-content: space-between; align-items: center; color: var(--n57); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; }.angle-mode { padding: 3px 6px; color: var(--c42); border: 1px solid var(--c84); border-radius: 4px; background: var(--c96); font: inherit; font-size: 10px; letter-spacing: .5px; }.angle-mode:hover { background: var(--c93); }.calculator-screen output { display: block; min-height: 44px; margin: 9px 0 3px; overflow: hidden; color: var(--c24); font-family: 'DM Mono', monospace; font-size: clamp(25px, 3vw, 35px); line-height: 1.2; text-align: right; text-overflow: ellipsis; white-space: nowrap; }.calculator-screen input { width: 100%; padding: 8px 0 0; color: var(--n45); border: 0; border-top: 1px solid var(--c93); outline: 0; background: transparent; font-family: 'DM Mono', monospace; font-size: 13px; text-align: right; }.calculator-screen input::placeholder { color: var(--n72); }.calculator-history { min-height: 24px; padding: 9px 2px 4px; color: var(--n57); font-family: 'DM Mono', monospace; font-size: 11px; text-align: right; }.history-item { margin-bottom: 4px; }.calculator-keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; }.key { min-height: 46px; color: var(--c30); border: 1px solid var(--c87); border-radius: 8px; background: var(--paper); box-shadow: 0 1px 0 rgba(36, 97, 149, .04); font-family: 'DM Mono', monospace; font-size: 14px; transition: .12s ease; }.key:hover { border-color: var(--c72); background: var(--c96); transform: translateY(-1px); }.key:active { transform: translateY(0); background: var(--c93); }.key svg { width: 17px; height: 17px; }.key-function { color: var(--c45); background: var(--c96); }.key-operator { color: var(--c39); background: var(--c93); font-size: 19px; }.key-utility { color: var(--n45); background: var(--c96); }.key-equals { color: var(--on-pen); border-color: var(--c48); background: var(--c48); font-size: 20px; }.key-equals:hover { border-color: var(--c39); background: var(--c39); }
.right-pane-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--c87); border-radius: 7px; background: var(--paper); }.right-pane-tab { padding: 5px 7px; color: var(--n54); border: 0; border-radius: 4px; background: transparent; font-size: 10px; font-weight: 600; }.right-pane-tab:hover { color: var(--c39); background: var(--c96); }.right-pane-tab.active { color: var(--on-pen); background: var(--c48); }.formula-view { flex: 1; overflow-y: auto; padding: 17px; background: linear-gradient(135deg, var(--c96), var(--c99) 48%, var(--c96)); }.formula-intro { margin-bottom: 15px; color: var(--n54); font-size: 11px; line-height: 1.45; }.formula-section { margin-bottom: 18px; }.formula-section h3 { margin: 0 0 7px; color: var(--c42); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }.formula-item { position: relative; display: grid; grid-template-columns: 1fr auto; width: 100%; margin-bottom: 6px; padding: 9px 29px 9px 10px; color: var(--c36); border: 1px solid var(--c87); border-radius: 7px; background: var(--paper); text-align: left; transition: .12s ease; }.formula-item:hover { border-color: var(--c72); background: var(--c99); transform: translateY(-1px); }.formula-item > span { grid-column: 1 / -1; margin-bottom: 3px; color: var(--n51); font-size: 10px; }.formula-item math-field { width: auto; padding: 0; color: var(--c27); border: 0; background: transparent; font-size: 16px; pointer-events: none !important; user-select: none; }.formula-item > svg { position: absolute; top: 50%; right: 9px; width: 14px; color: var(--c54); transform: translateY(-50%); }
.triangle-widget { display: block; width: min(410px, 100%); margin: 13px 0; padding: 12px; color: var(--c30); border: 1px solid var(--c84); border-radius: 10px; background: linear-gradient(135deg, var(--c96), var(--paper)); box-shadow: 0 5px 15px rgba(39, 112, 175, .07); }.triangle-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--c45); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: .8px; }.triangle-title i { width: 15px; height: 15px; }.triangle-layout { display: grid; grid-template-columns: 115px 1fr; gap: 13px; align-items: center; }.triangle-drawing { position: relative; display: block; height: 91px; color: var(--c63); }
.triangle-drawing svg { width: 100%; height: 100%; overflow: visible; }
.triangle-drawing .triangle-vertex { fill: var(--c42); font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700; }
.triangle-drawing .triangle-side { fill: var(--n60); font-family: 'DM Mono', monospace; font-size: 10px; font-style: italic; }.triangle-drawing span { position: absolute; color: var(--c42); font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700; }.triangle-drawing .point-a { top: 0; left: 50%; }.triangle-drawing .point-b { right: 0; bottom: -20px; }.triangle-drawing .point-c { bottom: -20px; left: 0; }.triangle-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.triangle-field { display: grid; gap: 2px; color: var(--n54); font-family: 'DM Mono', monospace; font-size: 10px; }.triangle-field input { width: 100%; min-width: 0; padding: 4px; color: var(--c36); border: 1px solid var(--c84); border-radius: 4px; outline: 0; background: var(--paper); font: inherit; font-size: 11px; }.triangle-field input:focus { border-color: var(--c60); box-shadow: 0 0 0 2px rgba(92, 160, 216, .14); }.triangle-tip { margin: 13px 0 0; color: var(--n57); font-size: 10px; }

.modal { width: min(600px, calc(100vw - 32px)); padding: 0; color: var(--ink); border: 1px solid var(--n27); border-radius: 11px; background: var(--n09); box-shadow: 0 24px 80px #000a; }.modal::backdrop { background: #030705aa; backdrop-filter: blur(2px); }.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 23px 24px 17px; border-bottom: 1px solid var(--n21); }.modal-header h2 { margin: 0; font-family: Newsreader, Georgia, serif; font-size: 25px; font-weight: 500; }.saved-list { min-height: 122px; max-height: 330px; overflow-y: auto; padding: 10px; }.saved-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 7px; }.saved-item:hover { background: var(--n15); }.saved-item i { color: var(--c66); }.saved-item-main { flex: 1; min-width: 0; }.saved-item strong, .saved-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.saved-item strong { font-size: 13px; font-weight: 500; }.saved-item small, .empty-library { margin-top: 3px; color: var(--n54); font-size: 11px; }.saved-item button { padding: 6px 9px; font-size: 11px; }.empty-library { padding: 30px 12px; text-align: center; }.modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; color: var(--n51); border-top: 1px solid var(--n21); font-size: 11px; }.secondary-button { padding: 7px 11px; color: var(--n81); border-color: var(--n30); background: var(--n12); font-size: 12px; }.secondary-button:hover { background: var(--n18); }.compact-modal { max-width: 480px; }.shortcuts { margin: 0; padding: 10px 24px 20px; }.shortcuts div { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--n18); }.shortcuts div:last-child { border: 0; }.shortcuts dt { color: var(--n81); font-size: 13px; }.shortcuts dd { margin: 0; color: var(--n54); font-size: 12px; } kbd { display: inline-block; margin-left: 3px; padding: 2px 5px; color: var(--n75); border: 1px solid var(--n27); border-bottom-width: 2px; border-radius: 4px; background: var(--n15); font-family: 'DM Mono', monospace; font-size: 10px; }
.toast { position: fixed; z-index: 10; bottom: 25px; left: 50%; padding: 10px 14px; color: var(--c90); border: 1px solid var(--n33); border-radius: 7px; background: var(--n12); box-shadow: 0 8px 30px #0008; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .2s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1120px) { .tool-button span { display: none; } .toolbar { gap: 12px; }.document-meta { gap: 4px; }.workspace-toolbar .chip-optional { display: none; } }

/* Snapped-window layout: designed for a second browser window alongside it. */
@media (max-width: 1100px) {
  .toolbar { height: 54px; gap: 9px; padding: 0 12px 0 15px; }.brand { font-size: 20px; }.brand-mark { width: 26px; height: 26px; margin-right: 5px; }.document-meta input { width: min(190px, 22vw); font-size: 13px; }.save-state { display: none; }.tool-button { height: 31px; padding: 0 7px; }.icon-button { width: 31px; height: 31px; }
  .app-shell { height: calc(100vh - 54px); grid-template-columns: minmax(355px, 1.45fr) 6px minmax(274px, .8fr); }.divider span { left: 1px; width: 4px; height: 27px; }
  .pane-heading { min-height: 72px; padding: 17px 15px 13px 19px; }.graph-heading { padding-left: 15px; }.pane-heading h1, .pane-heading h2 { font-size: 21px; }.eyebrow { font-size: 9px; }.graph-button { padding: 7px 8px; font-size: 11px; }.graph-button svg { width: 13px; }
  .workspace-toolbar { gap: 5px; padding: 8px 14px 8px 19px; }.chip { height: 27px; padding: 0 7px; font-size: 10px; }.add-line { padding-right: 0; font-size: 0; }.add-line svg { width: 16px; height: 16px; }
  .editor-scroll { padding: 17px 16px 16px 18px; }.equation-block { min-height: 48px; margin-bottom: 5px; gap: 7px; }.line-number { width: 22px; font-size: 10px; }.equation-block math-field { padding: 6px 8px; font-size: 20px; }.remove-line { display: none; }.editor-hint { margin: 15px 4px 0 29px; font-size: 11px; }.workspace-footer { height: 29px; padding: 0 17px; font-size: 10px; }.workspace-footer span:last-child { display: none; }
  .notebook-tabs { min-height: 32px; margin: -5px -6px 10px -7px; }.workspace-tab { height: 29px; max-width: 120px; padding-left: 7px; font-size: 10px; }.new-tab { width: 24px; height: 24px; }.note-editor { padding: 2px 7px 35px 14px; font-size: 14px; line-height: 1.65; }.note-editor .inline-math math-field { font-size: 1.03em; }
  .scientific-calculator { padding: 13px; }.calculator-screen { padding: 13px 14px 11px; border-radius: 9px; }.calculator-screen output { min-height: 37px; margin: 7px 0 2px; font-size: 26px; }.calculator-screen input { padding-top: 7px; font-size: 11px; }.calculator-history { min-height: 18px; padding: 6px 1px 3px; font-size: 10px; }.calculator-keypad { gap: 5px; }.key { min-height: 37px; border-radius: 6px; font-size: 12px; }.key-operator, .key-equals { font-size: 16px; }
}

@media (max-width: 790px) {
  .document-meta input { display: none; }.toolbar { justify-content: space-between; }.toolbar-actions { gap: 0; }.toolbar-rule { margin: 0 2px; }.app-shell { grid-template-columns: minmax(350px, 1.28fr) 5px minmax(248px, .8fr); }.pane-heading { min-height: 65px; padding-left: 13px; }.pane-heading h1, .pane-heading h2 { font-size: 19px; }.graph-button { font-size: 0; padding: 7px; }.graph-button svg { width: 15px; height: 15px; }.workspace-toolbar .chip-optional-late { display: none; }.editor-hint { display: none; }.scientific-calculator { padding: 10px; }.key { min-height: 34px; font-size: 11px; }.key-operator, .key-equals { font-size: 15px; }
}



body { color: var(--ink); background: var(--canvas); }
.toolbar { background: var(--paper); border-color: var(--line); box-shadow: 0 1px 0 rgba(34, 105, 171, .03); }
.brand { color: var(--c30); }.brand-mark { color: var(--c42); border-color: var(--c78); background: var(--c96); }
.document-meta input { color: var(--c27); }.document-meta input:hover, .document-meta input:focus { background: var(--c96); border-color: var(--c84); }.save-state { color: var(--n54); }
.tool-button, .icon-button, .chip, .add-line, .graph-button, .secondary-button { color: var(--c39); }.tool-button:hover, .icon-button:hover { color: var(--c36); background: var(--c96); }.toolbar-rule { border-color: var(--c90); }
.app-shell { background: var(--c96); }.workspace-pane { background: radial-gradient(circle at 82% 2%, var(--c96) 0, transparent 37%), var(--c99); }.graph-pane { background: var(--c99); }.divider { background: var(--c93); }.divider:hover, .divider.dragging { background: var(--c57); }.divider span { background: var(--c72); }.divider:hover span { background: var(--paper); }
.pane-heading { border-color: var(--c90); }.eyebrow { color: var(--c51); }.pane-heading h1, .pane-heading h2 { color: var(--c24); }.graph-heading h2 { color: var(--c33); }
.graph-button { color: var(--on-pen); border-color: var(--c48); background: var(--c48); box-shadow: 0 2px 6px rgba(35, 113, 190, .18); }.graph-button:hover { background: var(--c39); border-color: var(--c36); }.status-dot { background: var(--c60); box-shadow: 0 0 0 3px rgba(67, 160, 237, .14); }
.workspace-toolbar { border-color: var(--c90); }.chip { color: var(--c45); border-color: var(--c84); background: var(--paper); }.chip:hover, .chip.active { color: var(--c39); border-color: var(--c72); background: var(--c96); }.add-line { color: var(--c45); }.add-line:hover { color: var(--c36); }
.equation-block:hover, .equation-block.selected { background: rgba(41, 130, 211, .035); border-color: var(--c90); }.equation-block.selected { border-color: var(--c75); box-shadow: 0 0 0 1px rgba(78, 153, 217, .10); }.line-number { color: var(--n66); }.equation-block math-field { color: var(--c24); background: var(--paper); border-color: var(--c87); --caret-color: var(--c42); --selection-background-color: var(--c93); --contains-highlight-background-color: var(--c96); --placeholder-color: var(--n63); }.equation-block math-field:focus-within { border-color: var(--c66); box-shadow: 0 0 0 3px rgba(74, 151, 217, .14); }.remove-line { color: var(--n57); }.remove-line:hover { color: var(--flag-bad); background: var(--flag-bad-wash); }.editor-hint { color: var(--n54); }.editor-hint code { color: var(--c45); }.editor-hint kbd { color: var(--c33); }.workspace-footer { color: var(--n57); border-color: var(--c90); }.workspace-footer .status-dot { background: var(--c60); }
.modal { color: var(--c24); border-color: var(--c84); background: var(--paper); box-shadow: 0 24px 80px rgba(20, 68, 112, .22); }.modal::backdrop { background: rgba(13, 55, 91, .28); }.modal-header, .modal-footer { border-color: var(--c90); }.modal-header h2 { color: var(--c24); }.saved-item:hover { background: var(--c96); }.saved-item i { color: var(--c51); }.saved-item small, .empty-library, .modal-footer { color: var(--n54); }.secondary-button { color: var(--c39); border-color: var(--c81); background: var(--c96); }.secondary-button:hover { background: var(--c96); }.shortcuts div { border-color: var(--c93); }.shortcuts dt { color: var(--c33); }.shortcuts dd { color: var(--n54); }kbd { color: var(--c36); border-color: var(--c84); background: var(--c96); }
.toast { color: var(--on-pen); border-color: var(--c48); background: var(--c42); box-shadow: 0 8px 30px rgba(23, 91, 154, .25); }
.toast button { margin-left: 10px; padding: 2px 7px; color: var(--c42); border: 0; border-radius: 4px; background: var(--paper); font-size: 11px; font-weight: 700; pointer-events: auto; }.simplify-popover { position: fixed; z-index: 12; display: none; padding: 5px 8px; color: var(--c36); border: 1px solid var(--c72); border-radius: 5px; background: var(--c99); box-shadow: 0 4px 14px rgba(31, 101, 160, .16); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; pointer-events: none; }.simplify-popover.show { display: block; }.simplify-popover span { margin-left: 5px; color: var(--n54); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 400; }

.formula-search { width: 100%; margin-bottom: 13px; padding: 7px 10px; color: var(--c33); border: 1px solid var(--c87); border-radius: 7px; background: var(--paper); font: inherit; font-size: 12px; }
.formula-search:focus { border-color: var(--c72); outline: none; }
.formula-empty { color: var(--n54); font-size: 11px; }

/* .scientific-calculator sets display:flex, which outranks the UA [hidden] rule and left
   both right-hand panes visible at once when switching tabs. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Calculator: live expression list
   --------------------------------------------------------------------------- */
.calc-toolbar { display: flex; align-items: center; gap: 7px; padding: 9px 11px 7px; border-bottom: 1px solid var(--c90); }
.calc-toolbar-spacer { flex: 1; }
.calc-mini { padding: 4px 8px; color: var(--c45); border: 1px solid var(--c87); border-radius: 6px; background: var(--paper); font: inherit; font-size: 10px; cursor: pointer; }
.calc-mini:hover { border-color: var(--c72); background: var(--c96); }

.calc-rows { flex: 1; min-height: 96px; overflow-y: auto; padding: 8px 10px; }
.calc-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto auto; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 7px; border: 1px solid transparent; }
.calc-row:hover { border-color: var(--c90); background: var(--c99); }
.calc-index { color: var(--n69); font-family: 'DM Mono', monospace; font-size: 10px; text-align: right; }
.calc-row math-field { width: 100%; min-width: 0; padding: 4px 6px; color: var(--c21); border: 1px solid var(--c90); border-radius: 6px; background: var(--paper); font-size: 16px; }
.calc-row math-field:focus-within { border-color: var(--c66); box-shadow: 0 0 0 2px rgba(92, 160, 216, .14); outline: none; }
/* No percentage max-width here: the column is content-sized, so a percentage resolves
   against the text's own width and clips it to a fraction of itself. */
.calc-result { overflow: hidden; padding: 2px 6px; color: var(--c39); border: 0; border-radius: 5px; background: transparent; font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.calc-result:hover { background: var(--c96); }
.calc-result.calc-error { color: var(--flag-bad); cursor: default; }
.calc-result.calc-error:hover { background: transparent; }
.calc-send, .calc-remove { width: 20px; height: 20px; padding: 0; color: var(--n66); border: 0; border-radius: 5px; background: transparent; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.calc-row:hover .calc-send, .calc-row:hover .calc-remove, .calc-row:focus-within .calc-send, .calc-row:focus-within .calc-remove { opacity: 1; }
.calc-send:hover, .calc-remove:hover { color: var(--c39); background: var(--c93); }

#calculator-keypad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 9px 10px 11px; border-top: 1px solid var(--c90); }
body[data-keypad="hidden"] #calculator-keypad { display: none; }
/* min-height must be set too: a narrow-window rule pins .key to 37px, so padding alone
   left every size identical. */
body[data-keysize="small"] #calculator-keypad .key { min-height: 28px; padding: 4px 2px; font-size: 11px; }
body[data-keysize="medium"] #calculator-keypad .key { min-height: 40px; padding: 9px 3px; font-size: 13px; }
body[data-keysize="large"] #calculator-keypad .key { min-height: 56px; padding: 14px 4px; font-size: 17px; }
body[data-keysize="large"] #calculator-keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
   Calculator docking
   --------------------------------------------------------------------------- */
body[data-dock="left"] .app-shell { grid-template-columns: minmax(300px, 1fr) 8px minmax(390px, 1.65fr); }
body[data-dock="left"] .graph-pane { order: 1; }
body[data-dock="left"] .divider { order: 2; }
body[data-dock="left"] .workspace-pane { order: 3; }
body[data-dock="top"] .app-shell, body[data-dock="bottom"] .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(160px, 1fr) 8px minmax(220px, 1.4fr); }
body[data-dock="top"] .graph-pane { order: 1; }
body[data-dock="top"] .divider { order: 2; }
body[data-dock="top"] .workspace-pane { order: 3; }
body[data-dock="bottom"] .app-shell { grid-template-rows: minmax(220px, 1.4fr) 8px minmax(160px, 1fr); }
body[data-dock="top"] .divider, body[data-dock="bottom"] .divider { cursor: row-resize; }
body[data-dock="top"] .divider span, body[data-dock="bottom"] .divider span { top: 2px; left: 50%; width: 32px; height: 5px; transform: translateX(-50%); }
body[data-dock="top"] #calculator-keypad, body[data-dock="bottom"] #calculator-keypad { grid-template-columns: repeat(8, minmax(0, 1fr)); }
body[data-dock="top"][data-keysize="large"] #calculator-keypad, body[data-dock="bottom"][data-keysize="large"] #calculator-keypad { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------------
   Notes text size
   --------------------------------------------------------------------------- */
body[data-notesize="small"] .note-editor { font-size: 14px; }
body[data-notesize="medium"] .note-editor { font-size: 16px; }
body[data-notesize="large"] .note-editor { font-size: 19px; }

/* ---------------------------------------------------------------------------
   Settings controls
   --------------------------------------------------------------------------- */
.setting-group { margin-top: 16px; }
.setting-group > p { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; color: var(--c42); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.setting-note { display: block; margin-bottom: 7px; color: var(--n60); font-size: 10px; }
.segmented { display: grid; grid-auto-flow: column; gap: 5px; }
.segment { padding: 7px 6px; color: var(--c45); border: 1px solid var(--c87); border-radius: 7px; background: var(--paper); font: inherit; font-size: 11px; cursor: pointer; transition: .12s; }
.segment:hover { border-color: var(--c72); }
.segment.active { color: var(--on-pen); border-color: var(--c48); background: var(--c48); }
.key-toggles { max-height: 190px; overflow-y: auto; padding-right: 3px; }
.key-toggle-group { margin-bottom: 9px; }
.key-toggle-group h4 { margin: 0 0 5px; color: var(--n60); font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .7px; text-transform: uppercase; }
.key-toggle-row { display: flex; flex-wrap: wrap; gap: 4px; }
.key-toggle { min-width: 30px; padding: 4px 7px; color: var(--n63); border: 1px solid var(--c90); border-radius: 6px; background: var(--c99); font: inherit; font-size: 11px; cursor: pointer; transition: .12s; }
.key-toggle:hover { border-color: var(--c72); }
.key-toggle.on { color: var(--c30); border-color: var(--c69); background: var(--c93); font-weight: 600; }

/* Hover box for a simplifiable sub-expression. Drawn as a page overlay because this
   build of MathLive renders no data attribute inside its shadow DOM to style. */
/* MathLive renders its own virtual-keyboard and menu buttons inside every field, which
   crowd out the expression in a narrow row. */
math-field::part(virtual-keyboard-toggle), math-field::part(menu-toggle) { display: none; }

/* Nudge the mark's glyph so the superscript sits in the upper-right of the badge. */
.brand-mark-text { display: inline-block; line-height: 1; white-space: nowrap; }
.brand-mark-text sup { vertical-align: super; line-height: 0; }

/* ---------------------------------------------------------------------------
   Mobile. Same page, same URL — the calculator becomes a bottom sheet instead of a
   docked pane, so a shared link opens correctly on any device.
   --------------------------------------------------------------------------- */
.calc-fab { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 34; width: 52px; height: 52px; align-items: center; justify-content: center; color: var(--on-pen); border: 0; border-radius: 50%; background: var(--c48); box-shadow: 0 6px 18px rgba(20, 70, 120, .34); cursor: pointer; }
.calc-fab svg { width: 24px; height: 24px; }

@media (max-width: 820px) {
  /* The base stylesheet pins body to min-width:700px, which forced phones to zoom out
     and scroll sideways. Everything below is pointless without this. */
  body { min-width: 0; }
  .app-shell { height: calc(100vh - 54px); grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
  .divider { display: none !important; }
  .workspace-pane { order: 1 !important; }

  .graph-pane {
    order: 2 !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 33;
    height: 68vh; max-height: 68vh;
    border-top-left-radius: 16px; border-top-right-radius: 16px;
    box-shadow: 0 -8px 28px rgba(15, 45, 80, .22);
    transform: translateY(102%); transition: transform .22s ease;
  }
  body[data-sheet="open"] .graph-pane { transform: none; }
  .calc-fab { display: flex; }
  body[data-sheet="open"] .calc-fab { display: none; }

  .toolbar { padding: 8px 10px; }
  .document-meta { display: none; }
  .tool-button span { display: none; }
  .workspace-toolbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .workspace-toolbar::-webkit-scrollbar { display: none; }
  .chip, .add-line { flex: 0 0 auto; }
  .pane-heading { padding: 10px 12px; }
  .workspace-footer { display: none; }

  /* Touch has no hover, so affordances that hide behind it must stay visible. */
  .math-drag, .widget-remove, .calc-send, .calc-remove { opacity: .55; }
  .math-drag { left: -15px; font-size: 13px; }
  #calculator-keypad .key { min-height: 46px; }
  .modal { width: calc(100vw - 24px); max-width: none; }
}

@media (max-width: 820px) and (display-mode: browser) {
  .graph-pane { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* Equivalence check marks. Rendered with ::after from a data attribute so they never
   become part of the document or interfere with selection. */
#note-editor [data-chalk-check] { position: relative; }
#note-editor [data-chalk-check]::after { position: absolute; right: -4px; margin-left: 8px; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 700; }
#note-editor [data-chalk-check="first"]::after { content: "▸"; color: var(--n75); font-size: 11px; }
#note-editor [data-chalk-check="ok"]::after { content: "✓"; color: var(--flag-ok); }
#note-editor [data-chalk-check="bad"]::after { content: "✗"; color: var(--flag-bad); }
#note-editor [data-chalk-check="unknown"]::after { content: "?"; color: var(--n75); }
#note-editor [data-chalk-check="bad"] { background: rgba(204, 75, 75, .07); border-radius: 4px; }
#note-editor [data-chalk-check="ok"] { background: rgba(28, 154, 95, .07); border-radius: 4px; }

/* Remove control for block widgets (triangle organizer), shown on hover. */
.triangle-widget { position: relative; }
.widget-remove { position: absolute; top: 6px; right: 8px; z-index: 6; width: 18px; height: 18px; color: var(--n66); border-radius: 5px; font-size: 14px; line-height: 18px; text-align: center; opacity: 0; cursor: pointer; user-select: none; transition: opacity .12s, background-color .12s; }
.triangle-widget:hover .widget-remove { opacity: 1; }
.widget-remove:hover { color: var(--c39); background: var(--c93); }

/* Drag grip for inline math — hidden until the expression is hovered. */
.inline-math { position: relative; }
.math-drag { position: absolute; top: 50%; left: -13px; z-index: 6; width: 13px; color: var(--c69); font-size: 11px; line-height: 1; opacity: 0; transform: translateY(-50%); cursor: grab; user-select: none; transition: opacity .12s; }
.inline-math:hover .math-drag, .inline-math.dragging .math-drag { opacity: 1; }
.math-drag:active { cursor: grabbing; }
.inline-math.dragging { opacity: .45; }
.math-drop-caret { position: absolute; z-index: 45; display: none; width: 2px; border-radius: 2px; background: var(--c48); box-shadow: 0 0 0 2px rgba(40, 120, 200, .18); pointer-events: none; }
.math-drop-caret.show { display: block; }

.simplify-box { position: absolute; z-index: 40; display: none; border: 1.6px solid rgba(37, 99, 235, .9); border-radius: 5px; background: rgba(37, 99, 235, .14); pointer-events: none; }
.simplify-box.show { display: block; }

/* Per-line check badges for multi-line math boxes (page overlays: the rows live in
   MathLive's shadow DOM, which we measure but never inject into). */
.check-badge { position: absolute; left: 100%; margin-left: 8px; z-index: 6; font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 700; line-height: 1; transform: translateY(-50%); pointer-events: none; user-select: none; }
.check-badge.check-ok { color: var(--flag-ok); }
.check-badge.check-bad { color: var(--flag-bad); }
.check-badge.check-unknown { color: var(--n75); }

/* Mobile bottom-sheet controls */
.sheet-close { display: none; }
@media (max-width: 820px) {
  .sheet-grip { display: block; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; border-radius: 3px; background: var(--c84); transform: translateX(-50%); }
  .sheet-close { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; z-index: 4; width: 30px; height: 30px; color: var(--c48); border: 1px solid var(--c87); border-radius: 50%; background: var(--paper); font-size: 16px; line-height: 1; }
  .graph-pane { padding-top: 8px; }
  body[data-sheet="open"] .sheet-scrim { display: block; }
}
.sheet-grip { display: none; }
.sheet-scrim { display: none; position: fixed; inset: 0; z-index: 32; background: rgba(12, 34, 56, .28); }

/* Help dialog */
.help-body { max-height: 62vh; overflow-y: auto; padding-right: 6px; }
.help-lede { margin: 0 0 16px; color: var(--c45); font-size: 13px; line-height: 1.6; }
.help-section { margin-bottom: 17px; }
.help-section h3 { margin: 0 0 6px; color: var(--c42); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.help-section p { margin: 0 0 7px; color: var(--c42); font-size: 12.5px; line-height: 1.62; }
.help-section code { padding: 1px 4px; color: var(--c36); border-radius: 4px; background: var(--c96); font-family: 'DM Mono', monospace; font-size: 11.5px; }
.help-section b { color: var(--c30); }
.help-ok { color: var(--flag-ok); font-weight: 700; }
.help-bad { color: var(--flag-bad); font-weight: 700; }
.calc-mini.active { color: var(--on-pen); border-color: var(--c48); background: var(--c48); }

@media (max-width: 820px) {
  /* Keep the sheet's close button clear of the Calculator/Formulas tabs. */
  /* Reserve a strip at the top of the sheet for the grip and close button so the
     Calculator/Formulas tabs cannot sit underneath them. */
  .graph-pane .pane-heading { padding-top: 46px; padding-right: 14px; flex-wrap: wrap; row-gap: 8px; }
  .sheet-close { top: 6px; right: 8px; }
}

/* A faded toast must not remain a click target: opacity:0 does not disable hit testing,
   so the undo button stayed live and invisible after the toast timed out. */
.toast:not(.show), .toast:not(.show) button { pointer-events: none !important; }
.save-state.save-error { color: var(--flag-bad); font-weight: 600; }

/* ===========================================================================
   Interaction, accessibility and typographic polish.
   Appended last so it wins over the older rules without editing them.
   =========================================================================== */

/* Focus was removed in seven places with nothing put back, which left keyboard
   users with no idea where they were. :focus-visible only shows for keyboard use,
   so pointer users see no change. */
:where(button, input, [tabindex], math-field, .formula-item, .key, .chip, .key-toggle, .segment):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.divider:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* Pressed feedback. On a keypad this is the difference between a button and a
   picture of a button. */
.key:active, .tool-button:active, .icon-button:active, .chip:active,
.calc-mini:active, .segment:active, .key-toggle:active, .secondary-button:active,
.graph-button:active, .formula-item:active, .calc-fab:active {
  transform: translateY(1px) scale(.985);
}
.key, .tool-button, .icon-button, .chip, .calc-mini, .segment, .key-toggle,
.secondary-button, .graph-button, .formula-item, .calc-fab {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .09s ease;
}

/* Digits that change in place should not reflow. Every readout is tabular. */
.calc-result, .calc-index, .calc-row math-field, .triangle-field input,
.history-item, .save-state, .check-badge {
  font-variant-numeric: tabular-nums;
}

/* Measure: an unbounded contenteditable ran the full width of a 1440px screen. */
.note-editor { max-width: 78ch; text-wrap: pretty; }
.help-section p, .lede, .formula-intro, .setting-note, .editor-hint { text-wrap: pretty; }

/* Micro-texture on the writing surface. Reinforces the paper metaphor and stops
   the pane reading as a flat fill. Costs one inlined SVG, no requests. */
.workspace-pane::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.workspace-pane { position: relative; }
.workspace-pane > * { position: relative; z-index: 1; }

/* Optical spacing: equal top and bottom padding reads as top-heavy. */
.editor-scroll { padding-bottom: 34px; }

/* Respect a reduced-motion preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .graph-pane { transition: none !important; }
}

/* The simplify pill is a real control: single click applies it. It sits outside MathLive,
   so nothing MathLive does to its own shadow DOM can interfere with the click. */
.simplify-popover { pointer-events: auto; cursor: pointer; user-select: none; }
.simplify-popover:hover { filter: brightness(1.06); }
.simplify-popover:active { transform: translateY(1px); }

/* ===========================================================================
   Marker layer — freehand annotation over the notes.
   =========================================================================== */
.ink-stage { position: relative; }
.ink-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
body[data-ink="on"] .ink-layer { pointer-events: auto; cursor: crosshair; }
body[data-ink="on"] .note-editor { caret-color: transparent; }
body[data-ink="on"] #ink-eraser.active { color: var(--on-pen); border-color: var(--c48); background: var(--c48); }

.ink-bar { position: fixed; left: 50%; bottom: 22px; z-index: 45; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  box-shadow: var(--shadow-lift); transform: translateX(-50%); }
.ink-bar[hidden] { display: none; }
.ink-colors, .ink-widths { display: flex; align-items: center; gap: 6px; }
.ink-sep { width: 1px; height: 20px; background: var(--line); }
.ink-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.ink-swatch.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel) inset; }
.ink-width { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: transparent; cursor: pointer; }
.ink-width span { display: block; border-radius: 999px; background: currentColor; }
.ink-width.active { border-color: var(--focus); background: var(--panel-2); }
.ink-tool { padding: 5px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  background: transparent; font-size: 11.5px; cursor: pointer; }
.ink-tool:hover { border-color: var(--focus); }
@media (max-width: 820px) { .ink-bar { bottom: 84px; gap: 7px; padding: 7px 9px; } .ink-tool { padding: 5px 8px; font-size: 11px; } }

/* ===========================================================================
   Reclaimed vertical space. The old .pane-heading was ~88px on each side to hold
   one small label and a button, and the footer repeated the header's save state.
   Both are gone; their controls moved into the existing toolbar rows.
   =========================================================================== */
.pane-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--line); }
.workspace-toolbar { padding: 9px 16px 9px 20px; flex-wrap: wrap; row-gap: 7px; }
.workspace-toolbar .graph-button { padding: 5px 10px; font-size: 11.5px; }
.workspace-toolbar .add-line { padding: 5px 8px; }
.editor-scroll { padding: 12px 30px 30px 20px; }
.notebook-tabs { margin-bottom: 6px; }
.ink-stage { min-height: 60vh; }

@media (max-width: 820px) {
  /* The sheet's close button now sits in the slim bar rather than a tall heading. */
  .graph-pane .pane-bar { padding-top: 26px; padding-right: 46px; }
  .editor-scroll { padding: 10px 14px 26px; }
  .workspace-toolbar { padding: 8px 12px; }
}

/* "Follows from the line above, but with fewer solutions" — correct as a deduction,
   worth a second look in case a solution was divided away. */
.check-badge.check-narrowed { color: var(--flag-warn-deep); }
#note-editor [data-chalk-check="narrowed"]::after { content: "✓"; color: var(--flag-warn-deep); }
#note-editor [data-chalk-check="narrowed"] { background: rgba(184, 134, 11, .07); border-radius: 4px; }

/* ===========================================================================
   Design pass — the page is a sheet of paper on a desk.
   Everything below either builds that sheet or gets out of its way.
   =========================================================================== */

/* --- the desk ------------------------------------------------------------ */
.editor-scroll { padding: 20px 24px 26px; background: var(--desk); }
.workspace-pane { background: var(--desk); }

/* --- the sheet ----------------------------------------------------------- */
.note-editor {
  --pitch: calc(var(--note-leading) * 1em);
  max-width: var(--note-measure);
  padding: 26px 30px 64px 34px;
  font-family: var(--note-face);
  line-height: var(--note-leading);
  background-color: var(--sheet);
  border: 1px solid var(--n90);
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
}
/* Defaults lean wide: this is a workbook, not an article, and a centred column
   with half the pane empty either side was the single biggest waste of space. */
/* Fixed widths rather than ch: the ch unit is measured against whichever font has
   actually loaded, so a blocked webfont quietly shrinks the page to two thirds. */
body[data-measure="narrow"] { --note-measure: min(100%, 620px); }
body[data-measure="normal"] { --note-measure: min(100%, 1020px); }
body[data-measure="full"]   { --note-measure: 100%; }

body[data-face="sans"]  { --note-face: 'DM Sans', 'Segoe UI', system-ui, sans-serif; }
body[data-face="serif"] { --note-face: Newsreader, Georgia, 'Times New Roman', serif; --note-leading: 1.8; }
body[data-face="mono"]  { --note-face: 'DM Mono', ui-monospace, 'Cascadia Mono', monospace; --note-leading: 1.8; }
body[data-face="round"] { --note-face: 'Segoe UI Variable Text', 'Segoe UI', Avenir Next, Nunito, system-ui, sans-serif; }

/* Ruling is phased to the content box so the lines land under the text baselines
   rather than wherever the padding happens to leave them. Paragraph margins are
   dropped on ruled paper for the same reason: one paragraph, one line, like a pad. */
body[data-paper="ruled"] .note-editor,
body[data-paper="grid"] .note-editor,
body[data-paper="dots"] .note-editor { background-origin: content-box; }
body[data-paper="ruled"] .note-editor p,
body[data-paper="grid"] .note-editor p,
body[data-paper="dots"] .note-editor p { margin: 0; }

body[data-paper="ruled"] .note-editor {
  background-image:
    linear-gradient(to right, transparent 0 15px, var(--rule-edge) 15px 16px, transparent 16px),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), var(--rule-ink) calc(var(--pitch) - 1px) var(--pitch));
  background-origin: padding-box, content-box;
  background-repeat: no-repeat, repeat;
}
body[data-paper="grid"] .note-editor {
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(var(--pitch) - 1px), var(--rule-ink) calc(var(--pitch) - 1px) var(--pitch)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--pitch) - 1px), var(--rule-ink) calc(var(--pitch) - 1px) var(--pitch));
}
body[data-paper="dots"] .note-editor {
  background-image: radial-gradient(circle at center, var(--rule-dot) 1.1px, transparent 1.2px);
  background-size: var(--pitch) var(--pitch);
}
:root, body { --rule-edge: color-mix(in oklab, var(--pen) 42%, transparent); --rule-dot: color-mix(in oklab, var(--pen) 30%, transparent); }

.note-editor:empty::before { content: 'Write the problem out. Ctrl+M drops in a math box.'; }

/* --- settings: paper, ink, type ------------------------------------------ */
.settings-body { max-height: min(70vh, 620px); overflow-y: auto; padding: 4px 24px 22px; }
.setting-group { margin-top: 22px; }
.setting-group:first-child { margin-top: 8px; }
/* Sentence case, not a mono all-caps eyebrow. */
.setting-group > p { margin: 0 0 10px; color: var(--n24); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.setting-row { display: grid; grid-template-columns: 66px 1fr; gap: 10px; align-items: center; margin-bottom: 6px; }
.setting-row > span { color: var(--n51); font-size: 11.5px; }
.setting-note { margin: -4px 0 9px; font-size: 11.5px; line-height: 1.5; }

.pen-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pen-swatch { width: 30px; height: 30px; padding: 0; border: 1px solid var(--n84); border-radius: 50%; background: var(--swatch); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.pen-swatch:hover { transform: translateY(-1px); }
.pen-swatch.active { box-shadow: 0 0 0 2px var(--paper) inset, 0 0 0 2px var(--swatch); }
.pen-custom { display: inline-flex; align-items: center; gap: 9px; color: var(--n51); font-size: 11.5px; }
.pen-custom input { width: 34px; height: 26px; padding: 0; border: 1px solid var(--n84); border-radius: 6px; background: none; cursor: pointer; }

/* --- quieter chrome, so the sheet is the loudest thing on screen ---------- */
.toolbar { background: var(--n99); border-bottom: 1px solid var(--n90); }
.workspace-toolbar { border-bottom: 1px solid var(--n92); }
.chip.active { color: var(--on-pen); border-color: var(--pen); background: var(--pen); }
.divider:hover, .divider.dragging { background: var(--c78); }

/* Send selection is a helper, not the headline action on the page. */
.graph-button { color: var(--c39); border-color: var(--c84); background: var(--c96); font-weight: 600; }
.graph-button:hover { border-color: var(--c72); background: var(--c93); }

/* The sheet fills the pane rather than stopping wherever the text runs out —
   a half-height page with a hard bottom edge reads as a bug, not a document. */
.editor-scroll { display: flex; flex-direction: column; }
.notebook-tabs, .editor-hint { flex: none; }
.ink-stage { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; }
.note-editor { flex: 1 0 auto; width: 100%; height: auto; min-height: 0; }
.editor-hint { width: 100%; max-width: var(--note-measure); margin: 12px auto 0; padding: 0 4px; }

/* Segments in a labelled row share the width evenly; ragged pill widths read as
   an accident rather than a set of equal choices. */
.setting-row .segmented { grid-auto-columns: 1fr; }
/* Keypad group names, in sentence case like every other label. */
.key-toggle-group h4 { font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* On ruled, grid or dotted paper a math box with its own fill reads as a patch stuck
   over the page. Drop the fill and let the ruling run underneath it. */
body[data-paper="ruled"] .note-editor .inline-math math-field,
body[data-paper="grid"] .note-editor .inline-math math-field,
body[data-paper="dots"] .note-editor .inline-math math-field { background: transparent; }

/* Icon-only buttons keep their footprint even if the icon set fails to load, so the
   toolbar cannot collapse to nothing on a flaky connection. */
.tool-button, .icon-button { min-width: 31px; }

/* Help headings read as headings, not as mono all-caps labels stacked down the page. */
.help-section h3 { font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--n21); }

/* Browsers without color-mix (roughly pre-2023) get the default blue palette
   frozen to static values. Themes and custom ink stop working there, but the
   app stays fully legible instead of losing every colour at once. */
@supports not (color: color-mix(in oklab, red, blue)) {
  :root, body {
    --n99: #fcfdfd;
    --n96: #f4f5f7;
    --n93: #eceef1;
    --n90: #e3e7eb;
    --n87: #dbe0e5;
    --n84: #d3d8de;
    --n81: #cad1d8;
    --n78: #c2cad2;
    --n75: #bac3cc;
    --n72: #b1bcc6;
    --n69: #a9b4c0;
    --n66: #a1adba;
    --n63: #98a6b4;
    --n60: #909fae;
    --n57: #8898a8;
    --n54: #7f90a2;
    --n51: #77899b;
    --n48: #6f8295;
    --n45: #677b8f;
    --n42: #5e7389;
    --n39: #566c83;
    --n36: #4e657d;
    --n33: #455e77;
    --n30: #3d5771;
    --n27: #354f6b;
    --n24: #2c4865;
    --n21: #24415e;
    --n18: #1c3a58;
    --n15: #133252;
    --n12: #113050;
    --n09: #113050;
    --n06: #113050;
    --c99: #fbfcfe;
    --c96: #edf4fb;
    --c93: #e0ebf9;
    --c90: #d3e3f6;
    --c87: #c6daf3;
    --c84: #b9d2f0;
    --c81: #acc9ed;
    --c78: #9ec1eb;
    --c75: #91b8e8;
    --c72: #84b0e5;
    --c69: #77a7e2;
    --c66: #6a9fe0;
    --c63: #5c97dd;
    --c60: #4f8eda;
    --c57: #4286d7;
    --c54: #357dd5;
    --c51: #2875d2;
    --c48: #1f6dcc;
    --c45: #1d67c0;
    --c42: #1c61b4;
    --c39: #1a5ba7;
    --c36: #19559b;
    --c33: #184f8f;
    --c30: #164983;
    --c27: #154377;
    --c24: #143d6b;
    --c21: #12375e;
    --c18: #113152;
    --c15: #0f2b46;
    --c12: #0f2942;
    --c09: #0f2942;
    --c06: #0f2942;
    --tone: #14304a; --rule-ink: #d3e3f5; --rule-edge: #a9c8ea; --rule-dot: #b4cfee;
    --flag-bad-wash: #f8e7e5; --flag-bad-deep: #3a2320;
  }
}

/* Inline math kept the user-agent focus outline — a hard black rectangle around the
   box. Replaced rather than removed, so keyboard focus is still obvious. */
.note-editor .inline-math math-field:focus,
.note-editor .inline-math math-field:focus-within {
  outline: 2px solid color-mix(in oklab, var(--pen) 50%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- hiding the tool row, and giving the board the whole window ------------ */
.chip-toggle { padding: 0 6px; }
.chip-toggle svg { width: 14px; height: 14px; }
body[data-tools="hidden"] .workspace-toolbar > *:not(#tools-toggle) { display: none; }
body[data-tools="hidden"] .workspace-toolbar { padding-top: 5px; padding-bottom: 5px; }

/* !important because dragging the divider writes an inline grid-template on the shell,
   and that would otherwise win over this rule. */
body[data-calc="hidden"] .app-shell { grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
body[data-calc="hidden"] .divider,
body[data-calc="hidden"] .graph-pane,
body[data-calc="hidden"] .calc-fab { display: none !important; }
body[data-calc="hidden"] #focus-board { color: var(--on-pen); background: var(--pen); }

.ink-textures { display: flex; gap: 4px; }
.ink-texture.active { color: var(--on-pen); border-color: var(--pen); background: var(--pen); }

/* --- expressions lifted off the ruled lines ------------------------------- */
.note-editor { position: relative; }
.note-editor .inline-math.floating {
  z-index: 3;
  padding: 2px 4px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--sheet) 88%, var(--pen));
  box-shadow: 0 1px 3px rgb(var(--shade) / .18);
}
.note-editor .inline-math.dragging { opacity: .85; cursor: grabbing; }
.math-dock {
  position: absolute; top: -9px; right: -9px;
  display: none; place-items: center;
  width: 19px; height: 19px;
  color: var(--on-pen); border-radius: 50%; background: var(--pen);
  font-size: 11px; line-height: 1; cursor: pointer; user-select: none;
}
.note-editor .inline-math.floating:hover .math-dock,
.note-editor .inline-math.floating:focus-within .math-dock { display: grid; }

/* --- chalkboard, as a choice of writing surface --------------------------- */
/* Grain comes from an inline SVG turbulence filter rather than a photograph: a few
   hundred bytes, no extra request, and it tiles without a visible seam. */
body[data-paper="chalkboard"] .note-editor {
  --rule-ink: transparent;
  color: #f0f4ec;
  caret-color: #f0f4ec;
  border: 12px solid;
  border-image: linear-gradient(150deg, #9a7647, #6d4f2e 32%, #a3805a 58%, #5c4227) 12;
  border-radius: 0;
  background-color: #26332e;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"),
    radial-gradient(70% 50% at 22% 18%, rgb(255 255 255 / .07), transparent 70%),
    radial-gradient(60% 45% at 78% 72%, rgb(255 255 255 / .05), transparent 70%),
    radial-gradient(90% 60% at 55% 45%, rgb(255 255 255 / .035), transparent 75%);
  box-shadow: inset 0 0 140px rgb(0 0 0 / .55), 0 6px 18px rgb(0 0 0 / .28);
}
body[data-paper="chalkboard"] .note-editor:empty::before { color: #9fb0a4; }
body[data-paper="chalkboard"] .note-editor .inline-math math-field {
  color: #f0f4ec; background: transparent; border-bottom-color: rgb(240 244 236 / .35);
  --caret-color: #f0f4ec; --selection-background-color: rgb(240 244 236 / .22);
}
body[data-paper="chalkboard"] .note-editor .inline-math.floating {
  background: rgb(255 255 255 / .07);
  box-shadow: 0 1px 3px rgb(0 0 0 / .4);
}
body[data-paper="chalkboard"] .math-drag { color: rgb(240 244 236 / .55); }
body[data-paper="chalkboard"] .note-editor code { color: #dbe6d8; background: rgb(255 255 255 / .09); }
/* White chalk needs an outline to be visible in the picker on a light bar. */
.ink-swatch[data-colour="#ffffff"] { border: 1px solid var(--n78); }

/* --- formula groups, collapsed until asked for ---------------------------- */
.formula-section { margin-bottom: 7px; border: 1px solid var(--n90); border-radius: 8px; background: var(--n99); overflow: hidden; }
.formula-section > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; color: var(--n27); font-size: 12.5px; font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
.formula-section > summary::-webkit-details-marker { display: none; }
.formula-section > summary::before {
  content: '›'; margin-right: 2px; color: var(--muted); font-size: 15px; line-height: 1;
  transition: transform .15s ease;
}
.formula-section[open] > summary::before { transform: rotate(90deg); }
.formula-section > summary:hover { background: var(--n96); }
.formula-section > summary small { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 400; }
.formula-section > summary > span { flex: 1; }
.formula-section .formula-item { margin: 0 8px 6px; width: calc(100% - 16px); }
.formula-section[open] > summary { border-bottom: 1px solid var(--n93); margin-bottom: 7px; }
@media (prefers-reduced-motion: reduce) { .formula-section > summary::before { transition: none; } }

.board-object {
  position: relative; display: inline-block; vertical-align: top;
  margin: 6px 8px 6px 0; padding: 3px;
  border: 1px solid transparent; border-radius: 7px;
  line-height: 0; user-select: none;
}
.board-object:hover, .board-object:focus-within { border-color: var(--c78); background: color-mix(in oklab, var(--pen) 5%, transparent); }
.board-object > .object-body { display: block; width: 100%; height: 100%; overflow: hidden; line-height: 0; }
.board-object img { display: block; width: 100%; height: 100%; border-radius: 4px; object-fit: fill; }
.board-object[data-kind="table"] { line-height: normal; }
.board-object svg { display: block; width: 100%; height: 100%; }

.object-move, .object-remove, .object-edit {
  position: absolute; z-index: 4; display: none; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--on-pen); background: var(--pen);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.object-move { top: -9px; left: -9px; cursor: grab; }
.object-remove { top: -9px; right: -9px; background: var(--flag-bad); }
.object-edit { top: -9px; right: 15px; }
.board-object:hover .object-move, .board-object:hover .object-remove, .board-object:hover .object-edit,
.board-object:focus-within .object-move, .board-object:focus-within .object-remove, .board-object:focus-within .object-edit { display: grid; }
.object-resize {
  position: absolute; z-index: 4; right: -4px; bottom: -4px;
  width: 15px; height: 15px; border: 1px solid var(--paper); border-radius: 3px;
  background: var(--pen); cursor: nwse-resize; opacity: 0; transition: opacity .12s;
}
.board-object:hover .object-resize, .board-object:focus-within .object-resize { opacity: 1; }

/* graphs */
.graph-grid { stroke: color-mix(in oklab, var(--pen) 18%, transparent); stroke-width: 1; }
.graph-axis { stroke: color-mix(in oklab, var(--pen) 60%, transparent); stroke-width: 1.4; }
.graph-tick-label { fill: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; }
.graph-curve { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.graph-curve-0 { stroke: var(--pen); }
.graph-curve-1 { stroke: var(--flag-bad); }
.graph-curve-2 { stroke: var(--flag-ok); }
.graph-curve-3 { stroke: var(--flag-warn); }
body[data-paper="chalkboard"] .graph-tick-label { fill: rgb(240 244 236 / .7); }

/* tables */
.board-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
.board-table th, .board-table td { padding: 4px 8px; border: 1px solid var(--n84); text-align: left; }
.board-table th { color: var(--n30); background: var(--n95); font-weight: 600; font-size: 11.5px; }
.board-table td { color: var(--ink); }
body[data-paper="chalkboard"] .board-table th, body[data-paper="chalkboard"] .board-table td { border-color: rgb(240 244 236 / .3); color: #f0f4ec; }
body[data-paper="chalkboard"] .board-table th { background: rgb(255 255 255 / .07); }

/* the editor dialog */
.object-field { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; margin-bottom: 9px; }
.object-field > span { color: var(--n45); font-size: 12px; }
.object-field input { padding: 7px 9px; color: var(--ink); border: 1px solid var(--n84); border-radius: 7px; background: var(--paper); font: inherit; font-size: 13px; }
.object-field input:focus { border-color: var(--pen); outline: 2px solid color-mix(in oklab, var(--pen) 35%, transparent); outline-offset: 1px; }


/* --- periodic table ------------------------------------------------------- */
.periodic-view { flex: 1; overflow: auto; padding: 15px; }
.ptable-grid { display: grid; grid-template-columns: repeat(18, minmax(26px, 1fr)); gap: 2px; min-width: 560px; }
.ptable-cell {
  display: grid; align-content: center; gap: 0;
  padding: 3px 1px; border: 1px solid transparent; border-radius: 3px;
  color: var(--n21); text-align: center; cursor: pointer; line-height: 1.1;
}
.ptable-cell small { color: var(--muted); font-size: 7px; }
.ptable-cell strong { font-size: 12px; font-weight: 700; }
.ptable-cell span { color: var(--muted); font-size: 6.5px; }
.ptable-cell:hover { outline: 2px solid var(--pen); outline-offset: -1px; }
.cat-am { background: #f7d9c4; } .cat-ae { background: #f5eec4; } .cat-tm { background: #d6e5f5; }
.cat-pm { background: #dbe7dd; } .cat-md { background: #e2dcf0; } .cat-nm { background: #cfe9d8; }
.cat-hl { background: #f9e0ea; } .cat-ng { background: #d9e9f7; } .cat-ln { background: #efdcc8; }
.cat-an { background: #e8d3d3; }
body[data-theme="dark"] .ptable-cell { color: #10202c; }
.ptable-key { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.ptable-key-chip { padding: 3px 7px; border-radius: 20px; color: #16303f; font-size: 9.5px; }

/* --- chemical equations --------------------------------------------------- */
.board-object[data-kind="chem"] { line-height: normal; }
.chem-field {
  display: block; width: 100%; min-height: 40px; padding: 8px 32px 8px 10px;
  color: var(--ink); border: 1px solid var(--n84); border-radius: 7px;
  background: var(--paper); font-size: 18px;
  --caret-color: var(--pen); --selection-background-color: color-mix(in oklab, var(--pen) 22%, transparent);
}
.chem-field:focus-within { border-color: var(--pen); outline: 2px solid color-mix(in oklab, var(--pen) 30%, transparent); outline-offset: 1px; }
.chem-field::part(menu-toggle), .chem-field::part(virtual-keyboard-toggle) { display: none; }
.chem-verdict { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 15px; font-weight: 700; pointer-events: none; }
.chem-verdict[data-verdict="ok"] { color: var(--flag-ok); }
.chem-verdict[data-verdict="bad"] { color: var(--flag-bad); }
.chem-verdict[data-verdict="?"] { color: var(--muted); }
body[data-paper="chalkboard"] .chem-field { color: #f0f4ec; background: rgb(255 255 255 / .07); border-color: rgb(240 244 236 / .3); }

/* --- page breaks and printing --------------------------------------------- */
.page-break {
  position: relative; height: 0; margin: 26px 0;
  border-top: 2px dashed color-mix(in oklab, var(--pen) 45%, transparent);
  text-align: center; user-select: none;
}
.page-break span {
  position: relative; top: -9px; padding: 0 8px;
  color: var(--muted); background: var(--sheet);
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .6px;
}

@media print {
  /* Everything that is chrome disappears; what is left is the board at full width. */
  .toolbar, .workspace-toolbar, .notebook-tabs, .divider, .graph-pane,
  .editor-hint, .ink-bar, .calc-fab, .toast, .simplify-popover, .sheet-scrim,
  .math-drag, .math-dock, .object-move, .object-remove, .object-edit, .object-resize,
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .app-shell { display: block !important; height: auto !important; }
  .workspace-pane { overflow: visible !important; background: #fff !important; }
  .editor-scroll { display: block !important; overflow: visible !important; padding: 0 !important; background: #fff !important; }
  .ink-stage { display: block !important; }
  .note-editor {
    width: 100% !important; max-width: none !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    color: #111 !important; background: #fff !important; box-shadow: none !important;
    background-image: none !important;
  }
  /* A ruled or chalkboard background is screen decoration; paper already has a colour. */
  .note-editor .inline-math math-field { color: #111 !important; background: transparent !important; }
  .board-object { break-inside: avoid; page-break-inside: avoid; border-color: transparent !important; background: none !important; }
  .page-break { break-after: page; page-break-after: always; height: 0; margin: 0; border: 0; }
  .page-break span { display: none; }
  .check-badge { display: none !important; }
  @page { margin: 16mm; }
}

/* The toolbar gained Print and full-screen; on a phone they push it past the
   viewport, and neither is much use there. */
@media (max-width: 790px) {
  #print-board, #focus-board { display: none; }
}

/* Maths fields inside the object editor */
.object-mathfield {
  padding: 6px 9px; color: var(--ink); border: 1px solid var(--n84); border-radius: 7px;
  background: var(--paper); font-size: 17px;
  --caret-color: var(--pen); --selection-background-color: color-mix(in oklab, var(--pen) 22%, transparent);
}
.object-mathfield:focus-within { border-color: var(--pen); outline: 2px solid color-mix(in oklab, var(--pen) 30%, transparent); outline-offset: 1px; }
.object-mathfield::part(menu-toggle), .object-mathfield::part(virtual-keyboard-toggle) { display: none; }

/* Tables are typed into directly, and resize freely in both directions. */

.board-object[data-kind="table"] > .object-body { overflow: auto; }
.board-table th, .board-table td { min-width: 54px; height: 28px; }
.board-table th:focus, .board-table td:focus {
  outline: 2px solid var(--pen); outline-offset: -2px; background: color-mix(in oklab, var(--pen) 7%, transparent);
}