*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px system-ui,Segoe UI,Arial,sans-serif;color:#17202a;background:#dfe6ee}
.print-fit{height:100%;min-height:0;--print-panel-width:250px;--print-panel-gap:8mm;--print-top-padding:10mm}
.app{position:relative;height:100%;min-height:0;display:grid;grid-template-columns:390px 1fr}
.app.panel-collapsed{grid-template-columns:0 1fr}
.panel{display:flex;min-height:0;overflow:hidden;flex-direction:column;padding:18px;background:linear-gradient(180deg,#ffffff,#f4f7fa);border-right:1px solid #cbd5df;box-shadow:0 18px 42px #18253620;z-index:2}
.app.panel-collapsed .panel{padding-left:0;padding-right:0;border-right:0;box-shadow:none}
button{height:38px;padding:0 13px;border:1px solid #a7b5c2;border-radius:7px;background:#eef3f7;color:#13202c;font-weight:700;cursor:pointer}
button:hover{background:#e2e9f0}
button:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover{background:#1769aa}
.primary{border-color:#1f6fb2;background:#1769aa;color:#fff}
.primary:hover{background:#135b94}
.functions{display:grid;flex:0 0 auto;gap:12px;margin-left:-3px}
.fn{display:grid;grid-template-columns:auto 1fr 20px;gap:7px;align-items:center;padding:3px;border-radius:7px}
.fn.selected{background:#eaf4ff;box-shadow:inset 0 0 0 2px #66aee8}
.fn.hidden{opacity:.58}
.color-button{container-type:inline-size;position:relative;width:38px;height:38px;padding:3px;border-radius:8px;background:#f7f9fb;overflow:hidden}
.color-button::before{content:"";display:block;width:100%;height:100%;border-radius:5px;background:var(--graph-color);box-shadow:inset 0 0 0 1px #0002}
.color-label{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:800 min(12px,38cqw) ui-monospace,Consolas,monospace;line-height:1;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none}
.color-dialog{position:fixed;z-index:20;width:288px;padding:8px;border:1px solid #b8c5d1;border-radius:8px;background:#fff;box-shadow:0 18px 48px #16253636}
.color-picker-body{display:grid;grid-template-columns:156px 1fr;gap:8px;margin-top:8px}
.color-area{position:relative;width:156px;height:148px;border:1px solid #aeb9c4;border-radius:7px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--hue-color));cursor:crosshair;touch-action:none}
.color-thumb{position:absolute;width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #263747,0 2px 5px #0005;pointer-events:none}
.color-hue-thumb{left:var(--hue-pos,0)}
.color-area-thumb{left:var(--sat-pos,0);top:var(--val-pos,0)}
.color-area-thumb{transform:translate(-50%,-50%)}
.color-side{display:grid;align-content:start;gap:7px}
.color-preview-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.color-preview{height:50px;padding:0;border:1px solid #9eacb8;border-radius:7px;box-shadow:inset 0 0 0 1px #0002}
.color-preview.current{background:var(--draft-color)}
.color-preview.previous{background:var(--original-color)}
.color-hex-row{display:grid;gap:4px;color:#526170;font-size:12px;font-weight:700}
.color-hex{width:100%;height:31px;padding:5px 7px;border:1px solid #aeb9c4;border-radius:6px;font:13px ui-monospace,Consolas,monospace;text-transform:lowercase}
.color-hue{position:relative;width:100%;height:18px;border:1px solid #aeb9c4;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer;touch-action:none}
.color-hue-thumb{top:50%;transform:translate(-50%,-50%)}
.color-presets{display:grid;grid-template-columns:repeat(10,20px);justify-content:space-between;gap:0;margin-top:8px}
.color-preset{width:20px;height:20px;padding:0;border-radius:5px;background:var(--preset)}
.color-preset:hover{background:var(--preset);border-color:#405b72}
.color-preset.active{outline:2px solid #1f6fb2;outline-offset:1px}
.color-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}
.color-actions button{height:30px;padding:0 9px;font-size:12px}
.color-apply{border-color:#1f6fb2;background:#1769aa;color:#fff}
.color-apply:hover{background:#135b94}
.fn input[type=text]{width:100%;min-width:0;height:38px;padding:9px 11px;border:1px solid #aeb9c4;border-radius:7px;background:#fbfcfe;font:15px ui-monospace,Consolas,monospace}
.fn input[type=text]:focus{outline:2px solid #8cc5f4;border-color:#1f6fb2;background:#fff}
.fn-actions{display:grid;gap:2px}
.icon-btn{width:20px;height:18px;padding:0;border-radius:5px;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.icon-btn .ui-icon{width:16px;height:16px}
.visibility{color:#30475c;background:#f7fafc;border-color:#cbd5df}
.visibility.off{color:#7b8794;background:#eef1f4}
.remove{color:#9a2b35;background:#fff2f3;border-color:#e2b9bd;font-size:14px}
.remove:hover{background:#ffe4e7}
.panel-toggle{position:absolute;left:389px;top:12px;z-index:4;display:grid;place-items:center;width:20px;height:28px;padding:0;border-radius:0 6px 6px 0;color:#344454;font-size:0;line-height:1}
.panel-toggle::before{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(135deg);margin-left:2px}
.app.panel-collapsed .panel-toggle{left:0}
.app.panel-collapsed .panel-toggle::before{transform:rotate(-45deg);margin-left:-2px}
.actions{display:flex;flex:0 0 auto;gap:8px;margin-top:14px}
#addFn,.icon-action{width:38px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.graph-action{display:none;min-width:38px;padding:0;font-size:17px}
.graph-action.visible{display:inline-flex;align-items:center;justify-content:center}
.graph-action.active{border-color:#0e5f9d;background:#d7eaff;color:#0b4f83;box-shadow:inset 0 2px 5px #0d477333,inset 0 0 0 1px #ffffff66}
.graph-action.active .ui-icon{transform:translate(0,0)}
#tableFn:disabled{opacity:1;cursor:pointer}
#tableFn:disabled:hover{background:#f7fafc}
#tableFn.active:disabled:hover{background:#d7eaff}
.syntax-help-action{display:none;width:38px;min-width:38px;padding:0;font-size:22px;line-height:1}
.axis-reset-action{margin-left:auto}
.ui-icon{display:inline-block;width:18px;height:18px;background:var(--icon-image) center/contain no-repeat;filter:var(--icon-filter,none)}
.icon-action .ui-icon,.graph-action .ui-icon{width:32px;height:32px;background-size:100%;background-position:center;transform:translate(0px,0px)}
.primary .ui-icon{--icon-filter:brightness(0) invert(1)}
.remove .ui-icon{--icon-filter:invert(19%) sepia(58%) saturate(1402%) hue-rotate(322deg) brightness(91%) contrast(89%)}
.icon-eye{--icon-image:url("../img/icons/show.png")}
.icon-eye-off{--icon-image:url("../img/icons/hide.png")}
.icon-trash{--icon-image:url("../img/icons/delete.png")}
.icon-add{--icon-image:url("../img/icons/add.png")}
.icon-table{--icon-image:url("../img/icons/value-table.png")}
.icon-area{--icon-image:url("../img/icons/measure-area.png")}
.icon-area-clear{--icon-image:url("../img/icons/clear-areas.png")}
.icon-derive{--icon-image:url("../img/icons/derive.png")}
.icon-simplify{--icon-image:url("../img/icons/simplify.png")}
.icon-reset-axes{--icon-image:url("../img/icons/reset-axes.png")}
.secondary{background:#f7fafc}
.status{display:none;flex:0 0 auto;margin-top:12px;padding:8px 10px;border-radius:7px;background:#eef3f7;color:#4e6070;line-height:1.35}
.status.error{background:#fff0f1;color:#b00020}
.status:not(:empty){display:block}
.reference{display:flex;flex:1 1 0;min-height:0;flex-direction:column;margin-top:14px;border:1px solid #d8e0e7;border-radius:8px;background:#fff;overflow:hidden}
  .ref-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid #d8e0e7;color:#405261;font-weight:800}
  .ref-title-tools{display:flex;align-items:center;gap:12px}
  .language-toggle{display:flex;align-items:center;gap:8px;color:#b8c0c8;font-size:14px;font-weight:500;letter-spacing:0;text-transform:uppercase}
  .language-toggle button{width:auto;height:22px;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:#9aa5af;font:inherit}
  .language-toggle button:hover{background:transparent;color:#405261}
  .language-toggle button.active{color:#405261}
  .language-toggle span{color:#cbd2d9}
.syntax-help-close{display:none}
.ref-list{flex:1 1 auto;min-height:0;overflow:auto}
.ref-group{border-bottom:1px solid #d8e0e7}
.ref-group:last-child{border-bottom:0}
.ref-group summary{display:flex;align-items:center;gap:7px;min-height:32px;padding:7px 11px;background:#f8fafc;color:#405261;font-weight:800;cursor:pointer;list-style:none}
.ref-group summary::-webkit-details-marker{display:none}
.ref-group summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg)}
.ref-group[open] summary::before{transform:rotate(45deg);margin-top:-3px}
.ref-row{display:grid;grid-template-columns:minmax(88px,112px) minmax(0,1fr);gap:10px;padding:7px 11px;border-top:1px solid #d8e0e7}
code{font:12px ui-monospace,Consolas,monospace;color:#13202c}
.ref-list span{min-width:0;color:#607181;font-size:12px;line-height:1.25}
.base-input{width:100%;max-width:100%;height:16px;padding:0 2px;border:1px solid #d8e0e7;border-radius:0;background:transparent;color:inherit;font:12px ui-monospace,Consolas,monospace}
.base-input.decimal{width:10ch;color:#607181}
.base-input:focus{outline:1px solid #9fc5e7;border-color:#9fc5e7;background:#fff}
.base-input.invalid{border-color:#d9a5a5;background:#fff7f7}
.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 11px;border-top:1px solid #d8e0e7}
.example-card{position:relative;height:auto;min-width:0;display:grid;gap:5px;padding:7px;border-radius:7px;background:#fbfcfe;text-align:left}
.example-card:hover{background:#eef6ff;border-color:#81b9e7}
.example-preview{width:100%;height:auto;border:1px solid #d8e0e7;border-radius:5px;background:#fff;cursor:pointer;touch-action:pan-y}
.example-card.matched{box-shadow:0 0 0 2px var(--example-match-color)}
.example-card code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{position:relative;min-width:0;min-height:0;background:#fff}
.imprint-link{position:absolute;right:8px;bottom:6px;z-index:3;color:#888;font-size:10px;line-height:1;text-decoration:none;opacity:.8}
.imprint-link:hover{text-decoration:underline}
.table-popup{position:absolute;left:390px;right:auto;bottom:0;z-index:5;width:max-content;min-width:120px;max-width:calc(100% - 390px);max-height:34vh;display:flex;flex-direction:column;border:1px solid #d8e0e7;border-radius:6px 6px 0 0;background:#fff;box-shadow:0 10px 28px #18253622;overflow:hidden}
.table-popup-opening,.table-popup-closing{pointer-events:none;transform-origin:0 0}
.table-popup-opening{animation:table-popup-open .25s linear both}
.table-popup-closing{animation:table-popup-close .25s linear both}
@keyframes table-popup-open{0%{box-shadow:none;transform:translate(var(--table-flow-x),var(--table-flow-y)) scale(var(--table-flow-scale-x),var(--table-flow-scale-y))}100%{box-shadow:0 10px 28px #18253622;transform:translate(0,0) scale(1)}}
@keyframes table-popup-close{0%{box-shadow:0 10px 28px #18253622;transform:translate(0,0) scale(1)}100%{box-shadow:none;transform:translate(var(--table-flow-x),var(--table-flow-y)) scale(var(--table-flow-scale-x),var(--table-flow-scale-y))}}
.table-button-cover{position:absolute;z-index:6;display:flex;align-items:center;justify-content:center;border:1px solid #a7b5c2;border-radius:7px;background:#f7fafc;color:#13202c;font-weight:700;pointer-events:none}
.table-button-cover.active{border-color:#0e5f9d;background:#d7eaff;color:#0b4f83;box-shadow:inset 0 2px 5px #0d477333,inset 0 0 0 1px #ffffff66}
.table-button-cover .ui-icon{width:32px;height:32px;background:var(--icon-image) center/100% no-repeat;filter:var(--icon-filter,none)}
.table-tooltip{position:fixed;z-index:8;display:none;max-width:calc(100vw - 16px);padding:6px 8px;border-radius:4px;background:#13202c;color:#fff;font:12px system-ui;line-height:1.2;text-align:center;white-space:nowrap;transform:translate(-50%,-100%);pointer-events:none}
.app.panel-collapsed .table-popup{left:0;max-width:100%}
.table-body{min-height:24px;overflow:hidden}
.value-table{display:flex;width:max-content;max-width:100%;font:12px ui-monospace,Consolas,monospace}
.table-axis-column{flex:0 0 auto}
.value-table-window{min-width:0;overflow:auto}
.value-table-values{display:grid;width:max-content}
.table-popup-printing .value-table-window{overflow:hidden}
.table-popup-printing .value-table-values{transform:translateX(calc(-1 * var(--table-print-screen-scroll,0px)))}
.table-axis,.table-cell{min-width:0;padding:4px 11px 4px 6px;border-right:1px solid #d8e0e7;border-bottom:1px solid #d8e0e7;text-align:right;white-space:nowrap;overflow:hidden}
.table-cell.top.special-x{text-decoration:underline;text-underline-offset:2px}
.table-cell.inflection-value{font-style:italic}
.table-axis{width:2ch;background:#eef1f4;color:#526170;text-align:center;font-weight:800}
.origin-cell{background:#eef1f4;color:#526170}
.bottom{border-bottom:0}
.last{border-right:0}
canvas{display:block;width:100%;height:100%;background:#fff;touch-action:none;cursor:grab}
canvas.scaling-x{cursor:ew-resize}
canvas.scaling-y{cursor:ns-resize}
canvas.point-hover{cursor:pointer}
canvas.area-measure{cursor:crosshair}
@media(max-width:760px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .app.panel-collapsed{grid-template-columns:1fr;grid-template-rows:0 1fr}
  .panel{border-right:0;border-bottom:1px solid #cfd7df;padding:12px}
  .app.panel-collapsed .panel{padding-top:0;padding-bottom:0;border-bottom:0}
  .panel-toggle{left:auto;right:12px;top:var(--panel-toggle-top,0);width:34px;height:22px;border-top:0;border-radius:0 0 7px 7px}
  .panel-toggle::before{transform:rotate(-135deg);margin:2px 0 0}
  .app.panel-collapsed .panel-toggle{left:auto;border-top:1px solid #a7b5c2}
  .app.panel-collapsed .panel-toggle::before{transform:rotate(45deg);margin:-2px 0 0}
  .syntax-help-action{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .axis-reset-action{margin-left:0}
  .reference{display:none}
  .app.syntax-help-open .panel{z-index:20}
  .reference.mobile-open{position:fixed;inset:0;z-index:20;height:100dvh;display:flex;margin:0;border:0;border-radius:0;overscroll-behavior:contain}
  .reference.mobile-open .ref-title{flex:0 0 auto;padding-top:max(9px,env(safe-area-inset-top));padding-right:max(11px,env(safe-area-inset-right))}
  .reference.mobile-open .syntax-help-close{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:#405261;font-size:25px;font-weight:400;line-height:1}
  .reference.mobile-open .syntax-help-close:hover{background:#eef3f7}
  .table-popup,.app.panel-collapsed .table-popup{position:fixed;left:0;right:auto;bottom:0;bottom:env(safe-area-inset-bottom,0px);width:max-content;min-width:0;max-width:100%;max-height:45vh;max-height:45dvh;border-radius:6px 6px 0 0}
  .table-tooltip{display:block}
}
@page{margin:10mm 8mm}
/* Print layout contract:
   - One browser print action should produce exactly one page.
   - The graph canvas must keep its aspect ratio; never fit by changing only width or height.
   - If output is too large, scale the complete print composition, not individual regions.
   - The composition has three regions: function list, graph stage, optional value table.
   - Function list and graph should use the page area efficiently in portrait and landscape.
   - When visible, the value table stays aligned with the graph area and fits on the same page.
   - Value table text, cell padding, and scroll offset must scale together so it resembles the browser table.
   - Screen layout state is the source: graph center/scale, visible functions, selected function, table scroll anchor.
   - Print CSS should avoid browser-fragile grid/page fragmentation and duplicated geometry constants.
   Target concept:
   - Compute page orientation and available page box once.
   - Allocate stable regions for sidebar, graph, and optional table.
   - Render graph into its region with unchanged world proportions.
   - The grid print layout keeps page width filled and shrinks tall graphs by canvas width.
   Failed attempts:
   - Canvas-only max-height fitted the page by distorting graph proportions.
   - Transform-only scaling kept visual size small but Chrome paginated the unscaled layout.
   - Print zoom still produced unstable pagination in Chrome.
   - A fixed bottom table escaped the composition scale, so font and visible columns no longer matched the browser.
   - Placing the table below the stage used page-height stage metrics and pushed it out of view.
   Current plan:
   - Keep the fixed one-page print viewport to avoid blank trailing pages.
   - Keep graph, sidebar, and table inside one print composition at scale 1.
   - Keep grid rows packed at the top; fixed page height must not stretch the gap before the table row.
   - Never force the canvas height in print CSS; measure the rendered canvas and place the table below it.
   Stable grid print path:
   - Use one CSS grid: sidebar and stage in row 1, value table in row 2, align-content:start.
   - Grid cells start at the top; do not add hidden padding rows above sidebar or stage.
   - JS only feeds measured variables: table scale/scroll shift and optional canvas width.
   - If JS changes the grid canvas width, the print view must render once more before final measurement.
   - Tall graphs shrink by canvas width only; height follows aspect ratio after table and a page-size-relative edge guard are reserved.
   - Value-table text scaling uses saved screen widths, a right-edge safety margin/gutter, and a maximum scale.
   - Print-dialog paper-size changes are not handled by resize events until verified in real print preview.
*/
@media print{
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  html,body{height:0;background:#fff;overflow:visible}
  body{background:#fff}
  .print-fit{position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden}
  .app,.app.panel-collapsed{position:relative;width:100vw;height:var(--print-content-height,auto);display:block;overflow:visible}
  .print-fit.print-layout-grid .app,.print-fit.print-layout-grid .app.panel-collapsed{display:grid;grid-template-columns:var(--print-panel-width) minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--print-panel-gap);row-gap:10px;align-items:start;align-content:start}
  .print-fit.print-layout-grid .panel,.print-fit.print-layout-grid .app.panel-collapsed .panel{position:static;grid-column:1;grid-row:1;width:auto;display:flex;padding:0;border:0;box-shadow:none;background:#fff;overflow:visible}
  .print-fit.print-layout-grid .stage{position:static;grid-column:2;grid-row:1;width:auto;display:block;min-width:0;min-height:0;background:#fff;padding:0}
  canvas{width:100%;height:auto;cursor:default}
  .print-fit.print-layout-grid canvas{width:var(--print-canvas-width,100%);max-width:100%;height:auto;margin-left:auto}
  .panel-toggle,.actions,.fn-actions{display:none}
  .imprint-link{display:none}
  .functions{gap:7px;margin-left:0}
  .fn{grid-template-columns:auto 1fr;gap:5px;padding:1px;border-radius:4px;break-inside:avoid}
  .fn.hidden{display:none}
  .fn.selected{background:#fff;box-shadow:inset 0 0 0 1px #66aee8}
  .color-button{width:18px;height:18px;padding:0;border-radius:4px;background:var(--graph-color);border-color:#6c7780}
  .color-button::before{display:none}
  .color-dialog{display:none}
  .fn input[type=text]{height:auto;padding:1px 0;border:0;background:#fff;color:#111;font-size:11px;line-height:1.25}
  .status{margin-top:7px;padding:4px 0;background:#fff;color:#4e6070}
  .status.error{background:#fff;color:#8a0014}
  .reference{display:none}
  .table-tooltip{display:none}
  .print-fit.print-layout-grid .table-popup{position:static;grid-column:1 / 3;grid-row:2;align-self:start;justify-self:end;width:var(--table-print-target-width,max-content);height:auto;min-width:0;max-width:100%;max-height:none;margin:0;padding-right:0;border:1px solid #d8e0e7;border-radius:4px;box-shadow:none;overflow:hidden;z-index:1}
  .table-body,.value-table,.value-table-window{min-width:0;max-width:none;overflow:hidden}
  .table-body{height:auto}
  .print-fit.print-layout-grid .value-table{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:calc(7px * var(--table-print-font-scale,1))}
  .value-table-window{flex:1 1 auto;width:auto}
  .table-axis,.table-cell{padding:.333em .917em .333em .5em}
  .print-fit.print-layout-grid .value-table-values{transform:translateX(calc(-1 * var(--table-print-shift,0px)))}
}