html,body{height:100%;overflow:hidden}
.calculator-app{height:calc(100dvh - var(--site-header-height));display:flex;flex-direction:column;background:var(--bg)}
.calculator-appbar{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 18px;border-bottom:1px solid var(--line);background:var(--portfolio-elevated);font-size:11px;color:var(--muted)}
.calculator-appbar>div{display:flex;align-items:baseline;gap:14px}.calculator-appbar strong{font-size:13px;font-weight:650;color:var(--text)}
.calculator-workspace{--sidebar-width:410px;position:relative;display:grid;grid-template-columns:54px var(--sidebar-width) 5px minmax(0,1fr);flex:1;min-height:0}
.tool-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border-right:1px solid var(--line);background:var(--portfolio-elevated);z-index:6}
.tool-rail button{display:grid;place-items:center;position:relative;width:40px;height:42px;border:0;border-radius:7px;background:transparent;color:var(--muted)}
.tool-rail button.active,.tool-rail button:hover{background:var(--portfolio-accent-soft);color:var(--accent)}.tool-rail button.active:before{content:'';position:absolute;left:-6px;height:24px;width:2px;background:var(--accent)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.equations-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel);overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;height:77px;flex:none;border-bottom:1px solid var(--line)}
.panel-heading small{display:block;font-size:9px;letter-spacing:1.3px;color:var(--accent)}.panel-heading h1{margin:3px 0 0;font-size:18px;font-weight:590;letter-spacing:-.02em}
.icon-button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:24px;padding:0;line-height:1}.icon-button:hover{color:var(--accent);background:var(--hover)}
#expression-list{flex:1;overflow:auto;min-height:0;scrollbar-color:var(--line2) transparent}
.expression-row{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;grid-template-rows:auto auto;min-height:100px;position:relative;border-bottom:1px solid var(--line);border-left:2px solid transparent;background:transparent;transition:background .12s}
.expression-row:focus-within{border-left-color:var(--row-color,var(--accent));background:var(--portfolio-accent-soft)}.expression-row.is-empty{min-height:85px}
.row-controls{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:center;gap:7px;padding:15px 0 6px;background:var(--portfolio-elevated);border-right:1px solid var(--line)}
.row-number{order:0;font:10px ui-monospace,monospace;color:var(--muted)}
.plot-toggle{order:1;width:25px;height:25px;border:2px solid var(--row-color);border-radius:50%;background:var(--row-color);color:var(--portfolio-bg);display:grid;place-items:center;padding:0}
.plot-toggle svg{width:16px;height:16px;stroke-width:2}.plot-toggle[aria-pressed=false]{background:transparent;color:var(--row-color)}.plot-toggle[aria-pressed=false] svg{opacity:.35}.plot-toggle:disabled{background:transparent;border-color:var(--line2);opacity:.45}.plot-toggle:disabled svg{display:none}
.drag-handle{order:2;border:0;width:22px;height:19px;padding:0;font-size:17px;line-height:1;background:transparent;color:var(--muted);cursor:grab;touch-action:none;opacity:0}.expression-row:hover .drag-handle,.drag-handle:focus-visible{opacity:1}.drag-handle:disabled{visibility:hidden}
.source-cell{grid-column:2;grid-row:1;min-width:0;display:flex;align-items:center;padding:10px 0 0 9px;overflow:auto}
.formula-editor{display:block;width:100%;min-width:90px;min-height:48px;padding:4px 0;border:0;border-radius:0;background:transparent;color:var(--text);font-size:24px;--caret-color:var(--accent);--selection-background-color:var(--portfolio-accent-border)}.formula-editor:focus-within{outline:none}.formula-editor::part(menu-toggle){display:none}.formula-editor::part(virtual-keyboard-toggle){color:var(--muted)}
.result-cell{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;padding:0 3px 12px 10px;overflow:auto}.result-value{display:inline-block;width:auto;min-width:0;max-width:calc(100% - 27px);padding:0;border:0;background:transparent;color:var(--portfolio-soft);font-size:19px;pointer-events:none}.result-value::part(menu-toggle),.result-value::part(virtual-keyboard-toggle){display:none}
.plot-summary{font-size:10px;color:var(--muted);margin-right:auto;display:flex;align-items:center;gap:6px}.plot-summary:before{content:'';width:5px;height:5px;background:var(--row-color);border-radius:50%}.plot-disabled .plot-summary:before{background:var(--muted)}
.unit-picker{flex:none;display:grid;place-items:center;width:22px;height:24px;border:1px solid var(--line2);border-radius:4px;background:transparent;color:var(--muted);padding:0}.unit-picker:after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}.unit-picker:hover{color:var(--accent);background:var(--hover)}
.row-error{color:#e49b9b;font-size:11px;line-height:1.5;text-align:left;overflow-wrap:anywhere;display:none}.has-error .result-cell{justify-content:flex-start}.has-error .row-error{display:block}.has-error .plot-summary{display:none}.is-empty .result-cell{display:none}
.row-actions{grid-column:3;grid-row:1/3;padding-top:7px;opacity:0}.expression-row:hover .row-actions,.expression-row:focus-within .row-actions{opacity:1}.row-action{width:22px;height:24px;border:0;background:transparent;color:var(--muted);font-size:19px;padding:0}.row-action:hover{color:#e49b9b}
.notebook-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;flex:none;border-top:1px solid var(--line);background:var(--portfolio-elevated);color:var(--muted);font-size:10px}.notebook-actions #status{text-align:right}
.panel-resizer{position:relative;background:var(--portfolio-elevated);border-inline:1px solid var(--line);cursor:col-resize;touch-action:none;z-index:5}.panel-resizer:hover,.panel-resizer:focus-visible{background:var(--portfolio-accent-border)}
.calculator-workspace:not(.inspector-open){grid-template-columns:54px 0 0 minmax(0,1fr)}.calculator-workspace:not(.inspector-open) .equations-panel,.calculator-workspace:not(.inspector-open) .panel-resizer{visibility:hidden}
.graph-panel{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--bg)}#graph-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline-offset:-3px}#graph-canvas.panning{cursor:grabbing}
.graph-viewbar{position:absolute;top:15px;left:17px;display:flex;align-items:center;gap:9px;height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:7px;background:var(--panel);box-shadow:0 5px 18px #0002;color:var(--muted);font-size:11px;pointer-events:none}.view-dot{height:6px;width:6px;border-radius:50%;background:var(--accent)}.viewbar-separator{height:16px;width:1px;background:var(--line2)}
.graph-controls{position:absolute;right:15px;top:15px;display:flex;flex-direction:column;gap:10px}.graph-controls>.icon-button,.zoom-controls{border:1px solid var(--line2);border-radius:7px;background:var(--panel);box-shadow:0 5px 18px #0002}.zoom-controls .icon-button{border-radius:0}.zoom-controls .icon-button:first-child{border-bottom:1px solid var(--line)}
.graph-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--muted);font-size:10px;white-space:nowrap;pointer-events:none}
#graph-settings{position:fixed;inset:auto 18px auto auto;top:calc(var(--site-header-height) + 106px);margin:0;width:270px;padding:16px;border:1px solid var(--line2);border-radius:9px;background:var(--panel);color:var(--text);box-shadow:0 8px 25px #0003;max-height:calc(100dvh - 180px);overflow:auto}#graph-settings::backdrop{background:transparent}.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.settings-heading h2{font-size:15px;margin:0}.settings-heading .icon-button{width:24px;height:24px;font-size:20px}.switch-row{display:flex;justify-content:space-between;align-items:center;font-size:12px}.settings-section{margin:18px 0 10px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}.axis-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.axis-inputs label{font-size:11px;color:var(--muted)}.axis-inputs input{display:block;width:100%;margin:5px 0 14px;font-size:12px}#graph-settings .tool-button{width:100%;font-size:12px;min-height:32px}#settings-error{font-size:11px;color:#e49b9b}
.expression-row.drop-before:before,.expression-row.drop-after:after{content:'';position:absolute;left:0;right:0;height:3px;background:var(--accent);z-index:3}.expression-row.drop-before:before{top:0}.expression-row.drop-after:after{bottom:0}.expression-row.dragging{opacity:.45}
 .unit-menu{position:fixed;inset:auto;margin:0;width:min(286px,calc(100vw - 16px));box-sizing:border-box;padding:10px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--text);box-shadow:0 5px 18px #0003;overflow:auto}.unit-menu::backdrop{background:transparent}.unit-menu-title{margin:0 0 8px;color:var(--muted);font-size:11px;font-weight:400}
.unit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.unit-tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px;min-width:0;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--text);cursor:pointer}.unit-tile:hover{border-color:var(--portfolio-accent-border);background:var(--portfolio-accent-soft)}.unit-tile[aria-pressed=true]{border-color:var(--accent);background:var(--portfolio-accent-soft);color:var(--accent)}.unit-tile:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.unit-tile-label{font-size:15px;font-weight:400;overflow-wrap:anywhere}.unit-tile-preview{max-width:100%;color:var(--muted);font:9px ui-monospace,monospace;overflow-wrap:anywhere}
.unit-search{box-sizing:border-box;width:100%;margin-bottom:8px;padding:7px 8px;border:1px solid var(--line2);border-radius:5px;background:var(--panel);color:var(--text);font:inherit;font-size:12px}.unit-search:focus-visible{outline:2px solid var(--accent)}.unit-tile[hidden]{display:none}.unit-empty{color:var(--muted);font-size:12px}

@media not (pointer:coarse){.formula-editor::part(virtual-keyboard-toggle){display:none}}
@media(max-width:1000px){.calculator-workspace{--sidebar-width:340px}.formula-editor{font-size:22px}}
@media(max-width:700px){.calculator-workspace,.calculator-workspace:not(.inspector-open){grid-template-columns:44px minmax(0,1fr)}.tool-rail{padding-inline:3px}.tool-rail button{width:36px}.equations-panel{position:absolute;left:44px;top:0;bottom:0;width:min(330px,calc(100% - 92px));z-index:4;border-right:1px solid var(--line2);box-shadow:8px 0 25px #0003}.panel-resizer{display:none}.graph-panel{grid-column:2}.calculator-appbar>div>span{display:none}.calculator-appbar{padding-inline:12px}.graph-viewbar{left:10px;top:10px}.graph-controls{right:10px;top:10px}.row-actions,.drag-handle{opacity:1}.graph-hint{display:none}.notebook-actions>span:first-child{display:none}.notebook-actions #status{width:100%;text-align:left}}