.graph-lab-page{padding:58px 0 96px}.graph-lab-hero{max-width:850px;padding:28px 0 48px}.graph-lab-back{display:inline-block;margin-bottom:30px;color:#625e58;font-size:14px;font-weight:800}.graph-lab-back:hover{color:var(--graphite)}.graph-lab-kicker{color:#765b00;font-size:12px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}.graph-lab-hero h1{margin:11px 0 16px;font-size:clamp(43px,7vw,70px);line-height:1;letter-spacing:-.055em}.graph-lab-hero p{max-width:735px;margin:0;color:#5d5851;font-size:19px;line-height:1.65}.graph-lab{overflow:hidden;border:1px solid #d9d2c6;border-radius:26px;background:#fff;box-shadow:0 18px 50px rgba(47,47,47,.09)}.graph-lab-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid #ded8cf;background:#faf8f4}.graph-function-tabs{display:flex;flex-wrap:wrap;gap:5px}.graph-function-tabs button,.graph-reset{border:1px solid #d3ccc1;border-radius:10px;padding:9px 14px;background:#fff;color:#5e5851;cursor:pointer;font:inherit;font-size:13px;font-weight:850}.graph-function-tabs button.selected,.graph-function-tabs button:hover{border-color:var(--graphite);background:var(--graphite);color:var(--pencil-yellow)}.graph-reset:hover{background:#fff7d8;color:var(--graphite)}.graph-equation{overflow-x:auto;padding:24px 24px 20px;border-bottom:1px solid #e2ddd5;font-family:Georgia,Times New Roman,serif;font-size:clamp(26px,4vw,39px);text-align:center;white-space:nowrap}.graph-equation strong{color:#1d5dcc;font-weight:500}.lab-pi-value{display:inline-flex;align-items:center;vertical-align:middle}.lab-pi-fraction{display:inline-grid;grid-template-rows:auto auto;min-width:1.05em;margin:0 .08em;line-height:1;text-align:center;vertical-align:middle}.lab-pi-fraction>span:first-child{padding:0 .1em .07em;border-bottom:.055em solid}.lab-pi-fraction>span:last-child{padding:.07em .1em 0}.graph-lab-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr)}.graph-canvas-panel{min-width:0;padding:22px;border-right:1px solid #e2ddd5}.graph-canvas-panel canvas{display:block;width:100%;height:480px;border:1px solid #ded8cf;border-radius:16px;background:#fffdf9;cursor:crosshair;touch-action:none}.graph-drag-hint{margin:10px 0 0;color:#625d56;font-size:11px;font-weight:750;text-align:center}.graph-drag-hint span{display:inline-grid;place-items:center;width:20px;height:20px;margin:0 5px 0 10px;border-radius:50%}.graph-drag-hint span:first-child{margin-left:0}.graph-drag-hint .move-hint{background:#e8f0ff;color:#1d5dcc}.graph-drag-hint .amplitude-hint{background:#fff2bd;color:#765b00}.graph-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:13px;color:#6d665e;font-size:11px;font-weight:750}.graph-legend span{display:inline-flex;align-items:center;gap:6px}.graph-legend i{display:inline-block;width:20px;height:3px;border-radius:99px;background:#b5afa6}.graph-legend i.transformed{background:#2176ff}.graph-legend i.midline{height:0;border-top:2px dashed #9a7a1a;background:transparent}.graph-legend i.asymptote{height:0;border-top:2px dotted #c92b36;background:transparent}.graph-controls{display:grid;align-content:start}.graph-controls label{display:grid;gap:10px;padding:21px 22px;border-bottom:1px solid #e2ddd5}.graph-controls label:last-child{border-bottom:0}.graph-controls label>span{display:flex;align-items:baseline;gap:7px;color:#625c54;font-size:13px;font-weight:750}.graph-controls label strong{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff2bd;color:#5d4700;font-family:Georgia,Times New Roman,serif;font-size:16px}.graph-controls output{margin-left:auto;color:var(--graphite);font-size:15px;font-weight:900}.graph-controls input[type=range]{width:100%;accent-color:#2176ff;cursor:pointer}.graph-controls small{min-height:30px;color:#746d64;font-size:11px;line-height:1.45}.graph-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e2ddd5;border-bottom:1px solid #e2ddd5;background:#faf8f4}.graph-feature-grid>div{display:grid;gap:5px;padding:21px;border-right:1px solid #ded8cf}.graph-feature-grid>div:last-child{border-right:0}.graph-feature-grid span{color:#857c70;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.graph-feature-grid strong{font-family:Georgia,Times New Roman,serif;font-size:25px;font-weight:500}.graph-feature-grid small{color:#756e65;font-size:11px;line-height:1.4}.graph-presets{padding:28px 24px 32px}.graph-presets-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}.graph-presets-heading span{font-size:19px;font-weight:850}.graph-presets-heading p{margin:0;color:#756e65;font-size:13px}.graph-preset-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.graph-preset-grid button{display:grid;gap:5px;min-height:92px;padding:14px;border:1px solid #d8d1c6;border-radius:12px;background:#fff;color:#6a635b;cursor:pointer;font:inherit;text-align:left}.graph-preset-grid button:hover{border-color:#b79a31;background:#fff8dc;transform:translateY(-2px)}.graph-preset-grid strong{color:var(--graphite);font-size:13px}.graph-preset-grid span{font-size:11px;line-height:1.4}@media (max-width:900px){.graph-lab-main{grid-template-columns:1fr}.graph-canvas-panel{border-right:0;border-bottom:1px solid #e2ddd5}.graph-controls{grid-template-columns:repeat(2,1fr)}.graph-controls label:nth-child(odd){border-right:1px solid #e2ddd5}.graph-feature-grid{grid-template-columns:repeat(2,1fr)}.graph-feature-grid>div:nth-child(2){border-right:0}.graph-feature-grid>div:nth-child(-n+2){border-bottom:1px solid #ded8cf}.graph-preset-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:600px){.graph-lab-page{padding:38px 0 70px}.graph-lab-hero{padding:20px 0 38px}.graph-lab-toolbar{align-items:stretch;flex-direction:column}.graph-function-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.graph-reset{align-self:flex-start}.graph-canvas-panel{padding:12px}.graph-canvas-panel canvas{height:350px}.graph-controls{grid-template-columns:1fr}.graph-controls label:nth-child(odd){border-right:0}.graph-feature-grid,.graph-preset-grid{grid-template-columns:1fr 1fr}.graph-presets-heading{align-items:flex-start;flex-direction:column;gap:6px}}@media (max-width:390px){.graph-feature-grid{grid-template-columns:1fr}.graph-feature-grid>div{border-right:0;border-bottom:1px solid #ded8cf}.graph-preset-grid{grid-template-columns:1fr}}