:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;position:relative}.App .logo{padding:0 0 .75em;position:relative}.App .navigation{text-align:start;padding:1rem 2rem;position:relative}.App .navigation ul{padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.5rem}.App.examples .logo{padding:0;margin-bottom:0}.App.examples .navigation{text-align:center}.NavLink{display:block}.NavLink button{min-width:100px}.AxisH{pointer-events:none;top:0;left:0}.AxisH.absolute{position:absolute;height:100%;width:100%}.AxisH.fixed{position:fixed;z-index:19791306;height:100vh;width:100vw}.AxisH line{stroke:#58d34880;stroke-width:1;stroke-dasharray:10 5 1 5}.AxisV{pointer-events:none;top:0;left:0}.AxisV.absolute{position:absolute;height:100%;width:100%}.AxisV.fixed{position:fixed;z-index:19791306;height:100vh;width:100vw}.AxisV line{stroke:#5b53d180;stroke-width:1;stroke-dasharray:10 5 1 5}.Grid{pointer-events:none;top:0;left:0}.Grid.absolute{position:absolute;height:100%;width:100%}.Grid.fixed{position:fixed;z-index:1979;height:100vh;width:100vw}.Grid_pattern_main{stroke:#d1535580}.Grid_pattern_sub{stroke:#d1535540}.Grid_units .value-label{fill:light-dark(rgb(161.2697247706,43.1302752294,45.0055045872),rgb(222.8,134.6,136));font-family:monospace;font-size:10px;alignment-baseline:text-before-edge}.Grid_units .value-label tspan{alignment-baseline:text-before-edge}.Grid_units .value-label.horizontal{text-anchor:start}.Grid_units .value-label.horizontal.first{text-anchor:end}.Grid_units .value-label.vertical{text-anchor:start}.Ruler{pointer-events:none}.Ruler.absolute{position:absolute}.Ruler.absolute.vertical{height:100%}.Ruler.absolute.horizontal{width:100%}.Ruler.fixed{position:fixed;z-index:1979}.Ruler.fixed.vertical{height:100vh}.Ruler.fixed.horizontal{width:100vw}.Ruler.top{top:0;left:0}.Ruler.bottom{bottom:0;left:0}.Ruler.right{top:0;right:0}.Ruler.left{top:0;left:0}.Ruler_pattern_line{fill:#5b53d180}.Ruler_pattern_main{stroke:#5b53d180;stroke-width:1}.Ruler_pattern_sub{stroke:#5b53d140;stroke-width:1}.Ruler_units .value-label{fill:light-dark(rgb(50.6311926606,43.1302752294,161.2697247706),rgb(140.2,134.6,222.8));font-family:monospace;font-size:10px}.Ruler_units .value-label.horizontal{text-anchor:start}.Ruler_units .value-label.horizontal.first{text-anchor:end}.Ruler_units .value-label.vertical{text-anchor:start}.LabelExample .Example_content{min-height:300px}.LabelExample .Example_content>svg{height:300px}.Example{padding:1rem;border:1px solid light-dark(#888,#aaa);display:flex;flex-direction:column;gap:.5rem;width:75vw}.Example_controls{display:flex;margin:0 auto;flex-direction:column;gap:.25rem}.Example_controls form{display:flex;flex-direction:column;gap:.25rem}.Example_content>svg.container{background-color:light-dark(rgba(136,136,136,.6666666667),rgba(170,170,170,.6666666667));width:100%;height:600px}.Example .control-group{padding:.25rem 0}.Example .control-group label{display:flex;align-items:center;justify-content:center;gap:.5rem}.GridExample.Example{position:relative}.GridExample .flex-row{display:flex;flex-direction:row;justify-content:center;gap:1rem}.RulerExample.Example{position:relative}.RulerExample .flex-row{display:flex;flex-direction:row;justify-content:center;gap:1rem}.AxisExample.Example{position:relative}