@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{font:14px 'DM Sans',sans-serif;color:#23362f;background:#f8fafc;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background-color:#f8fafc;background-image:radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.08) 0%, transparent 40%);background-attachment:fixed}header{height:58px;border-bottom:1px solid #e3e8e1;display:flex;align-items:center;justify-content:space-between;padding:0 4%;gap:16px}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#237454;font-size:32px;font-weight:700}.brand span{font-size:20px;color:#23362f}.tag,.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:700;color:#637b6e}main{width:100%;max-width:1600px;margin:auto;padding:18px 4% 12px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;height:calc(100dvh - 58px)}.intro h1{font-family:Manrope,sans-serif;font-size:32px;letter-spacing:-1px;margin:6px 0;line-height:1.15}.intro p{color:#77847d;margin:0;font-size:14px}.workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px;min-height:0}aside,.chart-card{background:white;border:1px solid #dfe6de;border-radius:14px;box-shadow:0 5px 20px #203d2510}aside{padding:16px;position:relative}.section-title{font-weight:700;font-size:16px;margin-bottom:12px}.dot{display:inline-block;width:8px;height:8px;background:#2b9870;border-radius:50%;margin-right:8px}label{display:block;font-size:13px;color:#67776c}input{width:100%;min-width:0;border:1px solid #dfe5dd;background:#f8faf7;border-radius:7px;padding:7px 10px;color:#253e32;font:inherit;margin-top:5px;outline:none}input:focus{border-color:#2b9870;box-shadow:0 0 0 3px #2b987015}.expression-field{display:flex;align-items:center;margin-top:5px;background:#f8faf7;border:1px solid #dfe5dd;border-radius:8px;padding-left:10px;gap:8px;font-family:monospace;font-size:17px}.expression-field input{margin:0;border:0;background:transparent;font-size:17px;padding-left:0;min-width:0}.hint{font-size:11px;color:#7e8c83;line-height:1.4;margin:5px 0 10px}h2{font-size:13px;font-weight:600;margin:12px 0 7px}.examples{display:flex;flex-wrap:wrap;gap:6px}button{font:inherit;cursor:pointer;border:1px solid #dfe6de;border-radius:7px;background:white;padding:6px 10px;color:#4b6254;font-size:13px}button:hover{background:#edf5ee;border-color:#aecdbb}button:focus-visible{outline:3px solid #78b699;outline-offset:2px}.examples button{font-family:monospace;background:#f7faf6}.range{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}.primary{background:#287b59;color:white;width:100%;display:flex;justify-content:space-between;margin-top:10px;padding:9px 12px;border:0;font-weight:600}.primary:hover{background:#206447}.primary:disabled{opacity:.6}#status{font-size:12px;line-height:1.4;margin:6px 0;color:#a3413b}#status:empty{display:none}details{border-top:1px solid #e5eae3;padding-top:8px;margin-top:8px;font-size:12px;color:#77867a}details p{line-height:1.6}details[open] p{position:absolute;z-index:2;bottom:34px;left:12px;right:12px;background:white;border:1px solid #dfe6de;border-radius:8px;padding:12px;box-shadow:0 4px 18px #203d2520}summary{cursor:pointer}.chart-card{display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}.chart-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid #e8ede6;flex-wrap:wrap}.chart-header strong{font:500 14px monospace}.actions{display:flex;gap:6px;flex-wrap:wrap}.actions button{font-size:12px}.canvas-wrap{position:relative;flex:1;min-height:0}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;position:absolute}#coordinates{position:absolute;bottom:10px;right:12px;font:14px monospace;color:#728578;pointer-events:none}.chart-footer{padding:10px 16px;border-top:1px solid #e8ede6;display:flex;justify-content:space-between;gap:10px;color:#839085;font-size:11px;flex-wrap:wrap}.chart-footer .dot{width:6px;height:6px}footer{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#92a093;flex-wrap:wrap}.second-dot{background:#7057c7}#plot-legend{display:grid;gap:5px;min-width:0}#plot-legend strong{overflow-wrap:anywhere}
@media(min-width:801px) and (max-height:760px){header{height:48px}main{height:calc(100dvh - 48px);padding-top:10px;gap:10px}.intro h1{font-size:26px;margin:3px 0}.eyebrow{font-size:9px}aside{padding:12px}.section-title{font-size:15px;margin-bottom:8px}h2{margin-top:8px}.hint{margin-bottom:7px}.range{margin-bottom:6px}}
@media(min-width:801px) and (max-height:650px){main{grid-template-rows:auto minmax(0,1fr) auto;gap:8px}.intro{display:flex;align-items:center;flex-wrap:wrap;column-gap:18px}.intro .eyebrow{width:100%}.intro h1{font-size:24px}.intro p{font-size:12px}.section-title{margin-bottom:6px}.hint{font-size:10px;margin:3px 0 5px}label,h2{font-size:12px}h2{margin:6px 0 5px}input{padding:5px 8px}.expression-field,.expression-field input{font-size:15px}.examples{gap:4px}.examples button{padding:4px 8px}.primary{margin-top:6px;padding:7px 10px}details{padding-top:6px;margin-top:6px}}
@media(max-width:800px),(max-height:540px){main{height:auto;display:block;padding:16px 4%}.intro{margin-bottom:16px}.workspace{grid-template-columns:1fr}.canvas-wrap{min-height:350px}.chart-card{margin-top:0}footer{margin-top:14px}header .tag{display:none}details[open] p{position:static;box-shadow:none}.intro h1{font-size:28px}}

.brand{line-height:1}.brand-icon{display:block;width:28px;height:28px;flex-shrink:0}.brand span{line-height:28px}

.third-dot{background:#ce681f}.third-label{margin-top:8px}@media(min-width:801px) and (max-height:650px){.section-title{margin-bottom:4px}.third-label{margin-top:5px}.hint{margin-bottom:4px}.examples button{padding:3px 7px}h2{margin:5px 0 4px}.range{margin-bottom:4px}.range input{margin-top:3px;padding:4px 8px}}

@media(min-width:801px) and (max-height:650px){aside{padding:10px}.expression-field input{padding-top:3px;padding-bottom:3px}.range input{padding-top:3px;padding-bottom:3px}details{padding-top:4px;margin-top:4px}}

@media(min-width:801px) and (max-height:650px){.section-title{font-size:14px;margin-bottom:2px}.third-label{margin-top:3px}h2{margin:3px 0 2px}.range{margin-bottom:2px}}

/* Keep the graph edge-to-edge, with readable controls above it. */
.chart-card{position:relative;display:block}
.chart-card .canvas-wrap{position:absolute;inset:0;min-height:0}
.chart-header{position:absolute;z-index:2;top:12px;left:12px;right:12px;padding:0;border:0;align-items:flex-start;pointer-events:none}
#plot-legend,.chart-header .actions,.chart-footer,#coordinates{background:#fff;border:1px solid #dfe6de;border-radius:8px;box-shadow:0 2px 8px #203d2510}
#plot-legend{padding:9px 12px;max-width:100%;pointer-events:auto}
.chart-header .actions{padding:6px;pointer-events:auto}
.chart-footer{position:absolute;z-index:2;left:12px;bottom:12px;padding:7px 10px;max-width:calc(100% - 24px);pointer-events:none}
#coordinates{z-index:2;bottom:12px;right:12px;padding:6px 9px}
#coordinates:empty{display:none}
@media(max-width:1100px){.chart-footer{bottom:48px}}
@media(max-width:800px),(max-height:540px){.chart-card{min-height:350px}.chart-header{top:10px;left:10px;right:10px;gap:6px}.chart-header strong{font-size:12px}.chart-header .actions{padding:4px}}

/* One compact heading replaces the separate brand bar. */
main{height:100dvh}
.intro-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;width:100%}
.intro-title .brand{flex-shrink:0}
.intro-title h1{margin:0}
.intro p{margin-top:6px}
@media(max-width:800px),(max-height:540px){main{height:auto}.intro-title{gap:8px 18px}.intro-title h1{font-size:24px}}

.intro-title{gap:8px 12px}
.intro-title .brand,.intro-title .brand span,.intro-title h1{font-family:Manrope,sans-serif;font-size:32px;font-weight:700;line-height:1.15;letter-spacing:-1px}
.intro-title .brand-icon{width:32px;height:32px}
@media(min-width:801px) and (max-height:760px){.intro-title .brand,.intro-title .brand span,.intro-title h1{font-size:26px}.intro-title .brand-icon{width:26px;height:26px}}
@media(min-width:801px) and (max-height:650px),(max-width:800px),(max-height:540px){.intro-title .brand,.intro-title .brand span,.intro-title h1{font-size:24px}.intro-title .brand-icon{width:24px;height:24px}}

.intro > .eyebrow{width:100%;margin-bottom:6px}

.intro-title{column-gap:12px}
.header-separator{display:flex;align-items:center;justify-content:center;align-self:center;font-family:Manrope,sans-serif;font-size:32px;font-weight:700;line-height:1.15;flex-shrink:0}
@media(min-width:801px) and (max-height:760px){.header-separator{font-size:26px}}
@media(min-width:801px) and (max-height:650px),(max-width:800px),(max-height:540px){.header-separator{font-size:24px}}

.surface-link{display:inline-block;margin-top:6px;font-size:12px;color:#287b59}

#png-preview{width:min(92vw,780px);max-height:90dvh;padding:16px;border:1px solid #dfe6de;border-radius:12px;color:#23362f;background:white;overflow:auto}
#png-preview::backdrop{background:#10271db3}.png-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.png-preview-heading h2{margin:0;font-size:18px}#png-preview p{font-size:14px;line-height:1.5}#png-preview-image{display:block;width:100%;height:auto;margin:12px 0;user-select:auto;-webkit-touch-callout:default}#share-png{background:#287b59;color:white}#png-save-status:empty{display:none}