/* A dark writing surface; equation ink is made from local SVG pen paths. */
#math { scroll-margin-top: 90px; }
#math .container { max-width: 1160px; }
#math .header-row { max-width: none; }
#math .section-sub { max-width: 620px; }
#math .math-details { border-color: #394250; }
#math .math-details > summary { color: #c8bbdf; }
#math .math-content { padding: 0; }
#math .ink-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 20px; background: #101620; border: 1px solid #394250; border-bottom: 0; }
#math .ink-tools button { border: 1px solid #465162; background: #0a0f17; color: #e8e3d6; font: 11px/1.4 var(--mono); padding: 10px 13px; cursor: pointer; }
#math .ink-tools button:hover { border-color: #b39ddb; }
#math .ink-tools button[aria-pressed="true"] { color: #0a0f17; background: #b39ddb; border-color: #b39ddb; }
#math .ink-tools button:focus-visible { outline: 2px solid #4dd0e1; outline-offset: 4px; }
#math .ink-status { margin-right: auto; min-width: 160px; color: #c8bbdf; font: 10px/1.6 var(--mono); letter-spacing: .04em; }
#math .ink-status::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 9px; background: #b39ddb; border-radius: 50%; }
#math .ink-instruction { margin: 0; padding: 12px 20px; border: 1px solid #394250; border-bottom: 0; color: #a39c8c; font: 11px/1.7 var(--sans); }
#math.ink-ready .eq { --pen: #e8e3d6; margin: 0; padding: 27px 32px 28px; border: 1px solid #394250; border-bottom: 0; gap: 0; position: relative; background-color: #0c121c; background-image: radial-gradient(#65738924 .65px, transparent .8px); background-size: 20px 20px; }
#math.ink-ready .eq:last-child { border-bottom: 1px solid #394250; }
#math.ink-ready .eq.yours { --pen: #c8b0ef; }
#math.ink-ready .eq-label { font: 10px/1.7 var(--mono); letter-spacing: .13em; color: #a39c8c; padding-left: 15px; border-left: 2px solid var(--pen); }
#math .ink-surface { color: var(--pen); margin: 14px 0 13px; min-width: 0; }
#math .ink-surface svg { width: 100%; display: block; overflow: visible; }
#math .ink-stroke { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
#math .ink-tip { fill: #f2eaff; filter: drop-shadow(0 0 3px #b39ddb); }
#math.ink-ready .eq-note { font: 14px/1.85 var(--sans); font-style: normal; color: #b5afa4; margin: 0; max-width: 96ch; }
#math.ink-ready .eq-note em { font-style: italic; color: #c7c0b3; }
#math.ink-ready:not(.ink-typeset) .eq-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#math.ink-typeset .ink-surface { display: none; }
#math.ink-typeset .eq-line { margin: 24px 0; font-size: clamp(14px, 1.7vw, 20px); overflow-wrap: anywhere; }
#math .ink-footer { display: flex; gap: 20px; justify-content: space-between; color: #a39c8c; font: 9px/1.8 var(--mono); letter-spacing: .05em; padding: 17px 0; }
#math .ink-footer span:first-child { color: #c8bbdf; }
@media (max-width: 620px) {
  #math.ink-ready .eq { padding: 23px 17px; }
  #math .ink-tools { padding: 14px; gap: 7px; }
  #math .ink-status { flex-basis: 100%; margin-bottom: 3px; }
  #math .ink-tools button { padding: 10px; }
  #math .ink-instruction { padding: 12px 14px; }
  #math.ink-ready .eq-note { font-size: 13px; }
  #math .ink-footer { flex-direction: column; gap: 6px; }
  #math.ink-ready .eq-label { font-size: 9px; letter-spacing: .08em; }
}