/* A small working record beside the ink, not a second hero. */
.equation-output{position:absolute;z-index:2;left:45%;top:450px;width:240px;max-width:calc(100% - 48px);margin:0;background:#fff;border:1px solid #d2d2cb;box-shadow:none;transform:scale(1.1);transform-origin:top left}
.equation-output::before,.equation-output::after{content:'';position:absolute;width:14px;height:1px;background:#222;left:-1px;top:-1px;transform:rotate(-1.5deg);transform-origin:left}
.equation-output::after{left:auto;right:-1px;top:auto;bottom:-1px;transform:rotate(-1.5deg)}
.output-header{display:flex;align-items:center;justify-content:space-between;padding:11px 12px 10px;gap:12px;border-bottom:1px solid #d2d2cb;font:6px/1.4 var(--mono);letter-spacing:.03em}
.output-status{font-size:6px;color:#686860;font-variant-numeric:tabular-nums}
.output-rows{padding:0 12px;margin:0;list-style:none}
.output-row{position:relative;display:grid;grid-template-columns:12px minmax(0,1fr) 4px;align-items:center;gap:6px;min-height:29px;border-bottom:1px solid #e2e2dc}
.output-row:last-child{border-bottom:0}
.output-number{font:5px var(--mono);color:#7b7b72}
.output-equation{font:400 12px/1.3 var(--serif);letter-spacing:-.025em;margin:0;padding:7px 0;text-shadow:0 .2px .4px #0002;white-space:nowrap}
.output-row:nth-child(2) .output-equation{font-size:11px}
.output-equation sub{font-size:.55em;line-height:0;vertical-align:-.2em}
.output-fraction{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;font-size:.77em;line-height:1.15;margin-inline:3px}
.output-fraction>span:first-child{border-bottom:1px solid #777;padding:0 6px 1px}.output-fraction>span:last-child{padding-top:2px}
/* Keep division explicit for linear text and assistive readers. */
.math-linear{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.output-mark{font:10px var(--serif);color:#444;justify-self:end}
.output-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid #d2d2cb;font:5px/1.5 var(--mono);color:#6b6b62}
.output-footer>div{display:none;gap:9px}.output-ready .output-footer>div{display:flex}
.output-footer button{padding:5px 0;border:0;background:none;font:6px var(--mono);color:inherit;cursor:pointer}
.output-footer button:hover{text-decoration:underline;text-underline-offset:3px}
.output-footer button:disabled{opacity:.45;cursor:default}
.output-ready .output-equation{clip-path:inset(0 calc((1 - var(--written,1))*100%) 0 0)}
.output-ready .output-mark{opacity:var(--arrived,1)}
.output-row.is-writing::after{content:'';position:absolute;right:-15px;width:3px;height:3px;top:50%;border-radius:50%;background:#222;box-shadow:0 0 2px #0004}
/* Moving SVG glyphs must not become the browser's viewport scroll anchor. */
.output-conduit{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:hidden;pointer-events:none;overflow-anchor:none}
.output-conduit path{stroke:#37372d;stroke-opacity:.12;stroke-width:.7;fill:none}
.output-conduit text{fill:#111;font:9px Mono,monospace;filter:drop-shadow(0 0 1px #0004)}
@media(max-width:750px){.output-conduit{display:none}.has-equation-output .equation-output{position:relative;left:auto!important;top:auto!important;width:224px;margin-top:35px}.has-equation-output .opening-bottom{margin-top:55px}.has-equation-output .opening{min-height:1050px}.has-equation-output .orbit-control{bottom:110px}.has-equation-output .ink-caption{display:none}}
@media(min-width:1001px) and (max-width:1200px){.has-equation-output .ink-field{right:-12%}}
@media(max-width:750px){.has-equation-output .equation-output{transform:translate(-10%,-10%) scale(1.1)}}
@media(min-width:751px) and (max-width:1350px){.has-equation-output .ink-caption{visibility:hidden}}
/* Equations lead the source, while the narrow-screen composition stays intact. */
@media(max-width:750px){.opening{display:flex;flex-direction:column}.opening-copy{order:0}.equation-output{order:1}.opening-bottom{order:2}}