:root{--primary-color: #00a6fb;--primary-color-hover: #0582ca;--secondary-color: #006494;--secondary-color-hover: #003554;--neutral-color: #051923;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--primary-color);background-color:var(--neutral-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;flex-direction:row;min-height:100vh;background-color:var(--neutral-color);color:var(--primary-color)}a{font-weight:500;color:var(--secondary-color);text-decoration:inherit}a:hover{color:var(--secondary-color-hover)}h1{font-size:3.2em;line-height:1.1;color:var(--primary-color)}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em rgba(255,107,107,.67))}.logo.vanilla:hover{filter:drop-shadow(0 0 2em rgba(247,223,30,.67))}.card{padding:2em;background-color:var(--neutral-color);border-radius:8px;box-shadow:0 4px 6px #0000001a}.read-the-docs{color:#888}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--primary-color);color:var(--neutral-color);cursor:pointer;transition:border-color .25s,background-color .25s}button:hover{border-color:var(--secondary-color);background-color:var(--primary-color-hover)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:var(--primary-color);background-color:var(--neutral-color)}a:hover{color:var(--secondary-color-hover)}button{background-color:var(--primary-color)}}.scastie{margin:1rem;height:1200px;width:100%;overflow-y:auto;position:relative}canvas{padding:1rem}.animation-controller{padding:20px;background-color:var(--neutral-color);max-width:500px;margin:0 auto;box-shadow:0 4px 6px #0000001a}.info-section p{margin:8px 0;font-size:16px;color:var(--primary-color)}.controls{display:flex;justify-content:space-around;margin:20px 0}.control-button{background-color:var(--primary-color);color:var(--neutral-color);border:none;padding:10px 15px;font-size:16px;border-radius:5px;cursor:pointer;display:flex;align-items:center;transition:background-color .3s ease}.control-button i{margin-right:8px}.control-button:hover{background-color:var(--secondary-color-hover)}.slider-container{display:flex;align-items:center}.slider-container label{margin-right:10px;font-size:16px;color:var(--primary-color);display:flex;align-items:center}.slider-container i{margin-right:5px}.slider-container input[type=range]{flex:1}.form-container{display:contents}.engine-form-layout{display:grid;grid-template-areas:"header header header" "x distX edgeDist" "y distY engineSettingsButton" "z distZ engineSettingsButton";grid-gap:15px;max-width:500px;margin:0 auto}.engine-form-layout h3{grid-area:header;text-align:center;margin-bottom:20px}.engine-form-layout>div{display:contents}.engine-form-layout>div>div:nth-child(1){grid-area:x}.engine-form-layout>div>div:nth-child(2){grid-area:y}.engine-form-layout>div>div:nth-child(3){grid-area:z}.engine-form-layout>div>div:nth-child(4){grid-area:distX}.engine-form-layout>div>div:nth-child(5){grid-area:distY}.engine-form-layout>div>div:nth-child(6){grid-area:distZ}.engine-form-layout>div>div:nth-child(7){grid-area:edgeDist}.engine-form-layout>button{grid-area:engineSettingsButton;padding:10px 20px;cursor:pointer}.engine-form-layout input[type=number]{width:100%;padding:5px;box-sizing:border-box}#scastie-form{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;grid-gap:15px;max-width:700px;margin:0 auto}#scastie-form label{font-weight:500;color:var(--primary-color)}#scastie-form label:nth-of-type(1){grid-column:1 / 2;grid-row:1 / 2}#scastie-form input:nth-of-type(1){grid-column:1 / 2;grid-row:2 / 3}#scastie-form label:nth-of-type(2){grid-column:2 / 3;grid-row:1 / 2}#scastie-form input:nth-of-type(2){grid-column:2 / 3;grid-row:2 / 3}#scastie-form label:nth-of-type(3){grid-column:1 / 2;grid-row:3 / 4}#scastie-form input:nth-of-type(3){grid-column:1 / 2;grid-row:4 / 5}#scastie-form button{grid-column:2 / 3;grid-row:3 / 5;padding:10px 20px;cursor:pointer;justify-self:start;width:100%}#scastie-form input[type=text],#scastie-form input[type=number]{width:100%;padding:8px 10px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px}.grid-view-controller{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px;max-width:500px;margin:0 auto}
