:root{--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--page-gutter:var(--space-10);--content-width:90rem;color:#303d3a;font-synthesis:none;-webkit-font-smoothing:antialiased;background:#f5f4f0;font-family:Work Sans,sans-serif;font-size:100%}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}button,select,kbd{font:inherit}button,select,a{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer;border:1px solid #0000;border-radius:.5em;padding:.5em .75em;font-size:.75rem}kbd,.credits,.palette-label,.statusbar,h2,footer{font-size:.625rem}.credits a,footer a{color:inherit;text-underline-offset:.25em}button{color:inherit;white-space:nowrap;background:0 0}button:hover:not(:disabled){background:#e8ebe5}button:disabled{opacity:.3;cursor:default}button[aria-pressed=true]{background:#e9eee8;border-color:#d5dfd4}button:focus-visible,select:focus-visible,a:focus-visible{outline-offset:3px;outline:2px solid #427eaa}kbd{color:#77817a;white-space:nowrap;background:#f0f1ec;border:1px solid #e0e3db;border-radius:.25em;padding:0 .5em;line-height:1.5;display:inline-block}button kbd{margin-left:var(--space-2)}select{color:#4c5950;max-width:11rem}.brand,.credits,.tools,.examples,.point-palette button,.guide p{align-items:center;gap:var(--space-1);display:flex}.toolbar,.point-palette,.statusbar{justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;display:flex}select,.toolbar,.point-palette,.statusbar{background:#fffefa;border:1px solid #dfe3da}.tools{flex-wrap:wrap}header,footer{max-width:calc(var(--content-width) + 2 * var(--page-gutter));padding-inline:var(--page-gutter);justify-content:space-between;gap:var(--space-3);margin:auto;display:flex}header{min-height:5.5rem;padding-block:var(--space-3);align-items:center;gap:var(--space-4)}main{width:calc(100% - 2 * var(--page-gutter));max-width:var(--content-width);margin:auto}footer{padding-block:var(--space-8) var(--space-5);color:#9ba294;flex-wrap:wrap}.brand{color:inherit;letter-spacing:0;gap:var(--space-3);font-size:1.5rem;font-weight:650;text-decoration:none}.brand span{margin-left:var(--space-3);padding-left:var(--space-5);color:#7c857d;border-left:1px solid #d6dbd3;font-size:.75rem;font-weight:400}.credits{color:#7c857d;flex-wrap:wrap;justify-content:flex-end;gap:.5em}.toolbar{min-height:3.5rem;padding:var(--space-3) var(--space-4);border-bottom:0;border-radius:.75rem .75rem 0 0;align-items:center}.divider{width:1px;height:1.25rem;margin:0 var(--space-3);background:#e2e5dd}.examples{margin-right:var(--space-3);color:#7c857d;gap:var(--space-3);font-size:.75rem}.workspace{background-color:#fcfcf9;border:1px solid #dfe3da;height:clamp(21rem,60vh,48rem);position:relative;overflow:hidden}canvas{touch-action:none;outline:none;width:100%;height:100%;display:block}canvas:focus-visible{box-shadow:inset 0 0 0 2px #a4b5a7}.empty{pointer-events:none;text-align:center;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}h1{margin:var(--space-3) 0;letter-spacing:0;font-size:1.75rem;font-weight:450}.empty p{color:#8a9389;font-size:.875rem;line-height:2}.point-palette{bottom:var(--space-4);width:max-content;max-width:calc(100% - 2 * var(--space-4));padding:var(--space-1);justify-content:center;gap:var(--space-1);border-radius:.75rem;align-items:center;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 .125rem .75rem #303d3a14}.palette-label{padding-inline:var(--space-2);white-space:nowrap;color:#7c857d}.point-palette button{gap:.375em;padding:.5em}.point-palette svg{width:1.5em;height:1.5em;color:var(--point-color);fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.point-palette :is(rect,circle,.point-symbol){fill:currentColor;stroke:#fffefa;stroke-width:1px}.corner,[data-point-type="0"]{--point-color:#d35d53}.smooth,[data-point-type="1"]{--point-color:#427eaa}.tangent,[data-point-type="2"]{--point-color:#bc852e}.node{background:var(--point-color);flex:0 0 .625em;width:.625em;height:.625em;margin-right:.25em;display:inline-block}.smooth{border-radius:50%}.tangent{clip-path:polygon(50% 0%,100% 100%,0% 100%)}.statusbar{padding:var(--space-3) var(--space-5);color:#889084;gap:var(--space-4);border-top:0;border-radius:0 0 .75rem .75rem}#mode{color:#5d7763;text-align:right;margin-left:auto}.guide{gap:var(--space-8);margin:var(--space-8) var(--space-2) 0;grid-template-columns:1fr 1.25fr 1.5fr;display:grid}.guide>div{min-width:0}.guide>div+div{padding-left:var(--space-8);border-left:1px solid #dfe3da}h2{margin:0 0 var(--space-3);text-transform:uppercase;letter-spacing:.125em;color:#6e7c6f;font-weight:600}.guide p{color:#849080;margin:var(--space-2) 0;flex-wrap:wrap;font-size:.75rem;line-height:1.5}.guide p span{width:3.5rem}@media (width<=900px){:root{--page-gutter:var(--space-6)}header{min-height:4.5rem}.guide{gap:var(--space-5);grid-template-columns:1fr 1.5fr}.guide>div+div{padding-left:var(--space-5)}.guide>div:last-child{border:0;grid-column:1/-1;padding:0}.examples{margin-right:var(--space-1);gap:0;font-size:0}.brand span{display:none}}@media (width<=560px){:root{--page-gutter:var(--space-3)}header{gap:var(--space-2);flex-wrap:wrap}h1{font-size:1.5rem}.toolbar{padding:var(--space-2);gap:var(--space-1)}.divider{margin-inline:var(--space-2)}button kbd{display:none}select{max-width:8rem}.guide{gap:var(--space-4);margin-inline:var(--space-2);grid-template-columns:1fr}.guide>div+div{border:0;padding:0}.guide>div:last-child{grid-column:auto}.statusbar{padding:var(--space-3)}}