:root { color-scheme: dark; --bg:#100d1d; --panel:#1d182d; --line:#ffffff23; --text:#f8f3ff; --muted:#c6b8d2; --pink:#f1bce6; --mint:#9ce1d4; --gold:#f5d597; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--text); background: radial-gradient(circle at 75% 0%, #52336988, transparent 34%), #100d1d; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.skip { position: absolute; top: -80px; left: 16px; z-index: 20; padding: .7rem 1rem; border-radius: 8px; color: #111326; background: #fff; }
.skip:focus { top: 12px; }
.eyebrow { color: var(--pink); font-size: .66rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.graph-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding: .75rem clamp(16px, 2.5vw, 40px); border-bottom: 1px solid var(--line); background: #100d1beb; }
.graph-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; white-space: nowrap; }
.graph-brand > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #271636; background: linear-gradient(135deg, #f8d8e9, #aacff3); font: 700 1.3rem Georgia, serif; }
.graph-brand strong { font: 700 1.17rem Georgia, serif; }
.graph-brand small { color: #c6b8d2; font-size: .75rem; font-weight: 700; }
.graph-header nav { display: flex; gap: .55rem; }
.graph-header nav a, .graph-workspace__heading-actions button { display: inline-flex; align-items: center; min-height: 39px; padding: .52rem .75rem; border: 1px solid #e6d0ef42; border-radius: 9px; color: #efe4f4; background: #ffffff0b; font-size: .76rem; font-weight: 760; text-decoration: none; }
.graph-header nav a:hover, .graph-workspace__heading-actions button:hover { border-color: #ebcbef; background: #ffffff19; }
.graph-layout { display: grid; grid-template-columns: minmax(285px, 345px) minmax(0, 1fr); gap: clamp(12px, 1.5vw, 24px); max-width: 1900px; margin: 0 auto; padding: clamp(12px, 1.4vw, 22px); }
.graph-sidebar { display: grid; align-content: start; gap: 12px; min-width: 0; max-height: calc(100dvh - 92px); overflow-y: auto; scrollbar-color: #b69ac4 transparent; }
.graph-sidebar__intro { padding: .75rem .55rem .25rem; }
.graph-sidebar__intro h1 { margin: .3rem 0; font: 700 clamp(1.65rem, 2vw, 2rem)/1.1 Georgia, serif; }
.graph-sidebar__intro p { margin: .35rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.graph-sidebar__intro a { display: none; }
.graph-panel { min-width: 0; padding: 1rem; border: 1px solid #e4c9ed38; border-radius: 16px; background: linear-gradient(145deg, #241a36f2, #171528f2); }
.graph-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .75rem; }
.graph-panel__heading h2 { margin: .2rem 0 0; font: 700 1.1rem Georgia, serif; }
.graph-panel__heading > span { color: #a9eada; font-size: .7rem; font-weight: 850; white-space: nowrap; }
.graph-panel summary { list-style: none; cursor: pointer; }
.graph-panel summary::-webkit-details-marker { display: none; }
.graph-panel--collapsible:not([open]) > summary { margin-bottom: 0; }
.graph-panel__copy, .graph-help { margin: 0 0 .7rem; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.graph-help { margin: .75rem 0 0; }
.graph-expression-list { display: grid; gap: .55rem; }
.graph-expression { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .55rem; padding: .65rem; border: 1px solid #ffffff25; border-radius: 10px; background: #ffffff09; }
.graph-expression > label:first-child { display: grid; place-items: center; width: 22px; height: 34px; }
.graph-expression input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--mint); }
.graph-expression__body { min-width: 0; }
.graph-expression__body label { display: flex; align-items: center; gap: .5rem; color: #e7dcea; font-size: .72rem; font-weight: 800; }
.graph-expression__body label i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--curve-color); }
.graph-expression__body input { width: 100%; min-height: 36px; margin-top: .25rem; padding: .4rem .55rem; border: 1px solid #ffffff40; border-radius: 7px; color: #fff; background: #0c1022; font-size: .8rem; }
.graph-expression__body small { display: block; margin-top: .28rem; color: #ffb9ab; font-size: .67rem; line-height: 1.3; }
.graph-expression__delete { width: 31px; height: 31px; border: 1px solid #ffffff2e; border-radius: 7px; color: #e9c7d5; background: #ffffff0b; }
.graph-expression__delete:hover { color: #fff; border-color: #f1bce6; }
.graph-add-form { margin-top: .9rem; }
.graph-add-form > label { display: flex; justify-content: space-between; margin-bottom: .4rem; color: #eee4f4; font-size: .74rem; font-weight: 800; }
.graph-add-form > div { display: flex; gap: .4rem; }
.graph-add-form input { min-width: 0; flex: 1; padding: .55rem .6rem; border: 1px solid #dac2e65c; border-radius: 8px; color: #fff; background: #0e1020; font-size: .8rem; }
.graph-add-form button, .graph-point-form button { min-height: 40px; padding: .48rem .65rem; border: 1px solid var(--mint); border-radius: 8px; color: #17312e; background: var(--mint); font-size: .73rem; font-weight: 850; }
.graph-add-form button:hover, .graph-point-form button:hover { background: #baf4e8; }
.graph-form-error { min-height: 1rem; margin: .3rem 0 0; color: #ffb9ab; font-size: .69rem; }
.graph-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.graph-presets button { min-height: 32px; padding: .35rem .55rem; border: 1px solid #e3cfe052; border-radius: 7px; color: #f1e8f6; background: #ffffff0d; font-size: .68rem; font-weight: 760; }
.graph-presets button:hover { border-color: var(--pink); }
.graph-parameters { display: grid; gap: .4rem; }
.graph-parameters label { display: flex; justify-content: space-between; color: #e9d9ed; font-size: .8rem; font-weight: 850; }
.graph-parameters output { color: var(--mint); font-variant-numeric: tabular-nums; }
.graph-parameters input { width: 100%; margin: 0 0 .6rem; accent-color: var(--pink); }
.graph-point-form { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.graph-point-form label { color: #e6dbea; font-size: .7rem; font-weight: 780; }
.graph-point-form input { display: block; width: 100%; min-height: 38px; margin-top: .3rem; padding: .4rem .5rem; border: 1px solid #dac2e65c; border-radius: 8px; color: #fff; background: #0e1020; }
.graph-point-form button { grid-column: 1 / -1; }
.graph-point-list { display: grid; gap: .3rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.graph-point-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .5rem; border-radius: 7px; background: #ffffff0b; font-size: .74rem; }
.graph-point-list button { border: 0; color: #f0c7db; background: transparent; font-weight: 800; }
.graph-workspace { min-width: 0; }
.graph-workspace__heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: .4rem .3rem 1rem; }
.graph-workspace__heading h2 { margin: .3rem 0 .2rem; font: 700 clamp(1.65rem, 2.6vw, 2.5rem)/1.1 Georgia, serif; }
.graph-workspace__heading p { margin: 0; color: var(--muted); font-size: .79rem; }
.graph-workspace__heading-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.graph-workspace__heading-actions button { white-space: nowrap; }
.graph-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem; border: 1px solid #d6c7e347; border-bottom: 0; border-radius: 16px 16px 0 0; background: #221c33; }
.graph-toolbar > div { display: flex; align-items: center; gap: .3rem; }
.graph-toolbar button { min-height: 38px; padding: .45rem .65rem; border: 1px solid transparent; border-radius: 8px; color: #eadff1; background: transparent; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.graph-toolbar button:hover { border-color: #e8d5ee5c; background: #ffffff13; }
.graph-toolbar button.is-active { color: #182c30; background: var(--mint); }
.graph-toolbar output { min-width: 52px; text-align: center; color: #d3c4dc; font-size: .72rem; font-variant-numeric: tabular-nums; }
.graph-canvas-wrap { position: relative; overflow: hidden; height: clamp(420px, 58dvh, 760px); border: 1px solid #d6c7e347; background: #fcfbff; }
.graph-canvas-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.graph-canvas-wrap.is-point-mode canvas { cursor: crosshair; }
.graph-canvas-wrap canvas.is-dragging { cursor: grabbing; }
.graph-canvas-hint { position: absolute; right: 12px; bottom: 12px; padding: .35rem .55rem; border: 1px solid #39475524; border-radius: 7px; color: #344056; background: #ffffffd9; font-size: .65rem; font-weight: 750; pointer-events: none; }
.graph-readout { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border: 1px solid #d6c7e347; border-top: 0; border-radius: 0 0 13px 13px; color: #cfeadf; background: #162a31; font-size: .73rem; font-variant-numeric: tabular-nums; }
.graph-readout span { overflow-wrap: anywhere; }
.graph-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.graph-result-card { min-width: 0; padding: 1rem; border: 1px solid #ddc8eb3d; border-radius: 14px; background: #1e1a30dc; }
.graph-result-card__heading { display: flex; justify-content: space-between; align-items: end; gap: .7rem; }
.graph-result-card h3 { margin: .25rem 0 .7rem; font: 700 1.05rem Georgia, serif; }
.graph-result-card__heading label { white-space: nowrap; font-size: .74rem; font-weight: 800; }
.graph-result-card__heading input { width: 80px; min-height: 34px; margin-left: .25rem; padding: .3rem .4rem; border: 1px solid #e2cee54c; border-radius: 7px; color: #fff; background: #0e1020; }
.graph-table-scroll { overflow-x: auto; }
.graph-result-card table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.graph-result-card th, .graph-result-card td { padding: .5rem .35rem; border-bottom: 1px solid #ffffff1e; text-align: left; }
.graph-result-card th:last-child, .graph-result-card td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.graph-result-card th { color: #cfc1d8; font-size: .67rem; }
.graph-result-card td i { display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 50%; background: var(--curve-color); }
.graph-result-card__note { margin: 0 0 .55rem; color: var(--muted); font-size: .71rem; line-height: 1.4; }
.graph-crossing-list { display: grid; gap: .35rem; max-height: 205px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.graph-crossing-list li { display: flex; justify-content: space-between; gap: .5rem; padding: .42rem .55rem; border: 1px solid #ffffff1b; border-radius: 7px; color: #eadff1; background: #ffffff08; font-size: .7rem; }
.graph-crossing-list button { border: 0; color: #b9f0e3; background: none; font-weight: 800; text-align: right; white-space: nowrap; }
.graph-crossing-list button:hover { text-decoration: underline; }
.graph-status { min-height: 1.2rem; margin: .6rem 0; color: #c9e8df; font-size: .72rem; }
@media (max-width: 1080px) { .graph-layout { grid-template-columns: 285px minmax(0, 1fr); } .graph-workspace__heading { align-items: start; flex-direction: column; } .graph-results { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .graph-header { min-height: 62px; } .graph-brand small { display: none; } .graph-header nav a { padding-inline: .48rem; font-size: .67rem; } .graph-layout { display: flex; flex-direction: column; gap: 15px; padding: 11px; } .graph-sidebar { max-height: none; overflow: visible; } .graph-sidebar__intro { padding: .5rem .25rem 0; } .graph-sidebar__intro h1 { font-size: 1.6rem; } .graph-sidebar__intro a { display: inline-block; margin-top: .45rem; color: var(--mint); font-size: .73rem; font-weight: 800; text-underline-offset: 3px; } .graph-panel { padding: .8rem; } .graph-panel--collapsible summary::after { content: '⌄'; color: var(--mint); font-size: 1.3rem; } .graph-panel--collapsible[open] summary::after { transform: rotate(180deg); } .graph-canvas-wrap { height: clamp(360px, 52dvh, 520px); scroll-margin-top: 10px; } .graph-toolbar { flex-wrap: wrap; } .graph-toolbar > div { flex: 1 1 auto; } .graph-toolbar > div:last-child { justify-content: flex-end; } .graph-toolbar button { min-height: 42px; } .graph-canvas-hint { left: 8px; right: auto; bottom: 8px; } .graph-readout { flex-direction: column; gap: .15rem; } }
@media (max-width: 420px) { .graph-header nav a:last-child { display: none; } .graph-workspace__heading-actions button { min-height: 42px; } .graph-toolbar { padding: .35rem; } .graph-toolbar button { padding: .4rem .5rem; font-size: .67rem; } .graph-canvas-wrap { height: 370px; } }