.speed-icon[data-astro-cid-mq7kvvfd]{grid-template-areas:"full";width:30px;display:grid}.speed-icon[data-astro-cid-mq7kvvfd] .dial[data-astro-cid-mq7kvvfd]{grid-area:full}.speed-icon[data-astro-cid-mq7kvvfd] .needle[data-astro-cid-mq7kvvfd]{transform-origin:50% 82.6%;transition:transform var(--small-spring);grid-area:full;transform:rotate(6deg)}.speed-icon[data-astro-cid-mq7kvvfd].fast .needle[data-astro-cid-mq7kvvfd]{animation:.2s infinite both dial-jitter;transform:rotate(119deg)}@keyframes dial-jitter{0%{rotate:0deg}56%{rotate:10deg}to{rotate:0deg}}.grid-icon[data-astro-cid-ykp2llym]{--color:currentColor;border:solid 2px var(--color);border-radius:4px;grid-template-areas:"full";align-self:center;width:18px;height:18px;padding:0;display:grid;position:relative;overflow:hidden;& .grid-row,& .grid-col{transition:left var(--small-spring), top var(--small-spring);grid-area:full;position:absolute;inset:0;&:after{content:"";background-color:var(--color);position:absolute;inset:0}}& .grid-row{width:100%;height:1.5px;margin-top:-.75px}& .grid-col{width:1.5px;height:100%;margin-left:-.75px}&[data-size=Large]{& .grid-row-1,& .grid-row-2,& .grid-row-3{top:50%}& .grid-col-1,& .grid-col-2,& .grid-col-3{left:50%}}&[data-size=Medium]{& .grid-row-1,& .grid-row-2{top:33.33%}& .grid-row-3{top:66.66%}& .grid-col-1,& .grid-col-2{left:33.33%}& .grid-col-3{left:66.66%}}&[data-size=Small]{& .grid-row-1{top:25%}& .grid-row-2{top:50%}& .grid-row-3{top:75%}& .grid-col-1{left:25%}& .grid-col-2{left:50%}& .grid-col-3{left:75%}}}.palette-icon[data-astro-cid-55wzcizm]{--size:24px;width:var(--size);height:var(--size);position:relative;& .color{width:calc(var(--size) * .7);height:calc(var(--size) * .7);background-color:red;border-radius:10px;transition:background-color .3s linear;position:absolute}& .color-1{background-color:var(--color-1);left:calc(var(--size) * .15);top:0}& .color-2{background-color:var(--color-2);left:0;top:calc(var(--size) * .3)}& .color-3{background-color:var(--color-3);left:calc(var(--size) * .3);top:calc(var(--size) * .3)}}.columns[data-astro-cid-lcdefpme]{align-items:top;grid-template-columns:minmax(18rem,2fr) 3fr;gap:2rem;display:grid;@media (width<=50rem){grid-template-columns:1fr;gap:1rem}& .content{flex-direction:column;justify-content:space-between;align-self:stretch;display:flex;& .top{& p{font-size:1.125rem}}& h1{margin-top:1rem;font-size:1.65rem}& h3{margin-top:1.75rem;font-size:1.1rem}& .pages{margin:0}}& .art{aspect-ratio:7/5;background-color:#ddd;border-radius:.5rem;flex:1;margin-top:1rem;position:relative;overflow:hidden;box-shadow:0 2px 4px #0000001a,0 4px 8px #0000001a;& .art-canvas{width:100%;height:100%;position:absolute;top:0;left:0}& .controls{background-color:var(--offWhite);box-shadow:0 2px 4px #0000001a;box-shadow:0px 4px 4px #00000026, inset 0px 1px 0px var(--offWhite);border-radius:4px;flex-flow:wrap;padding:0;display:flex;position:absolute;inset:auto .25rem .25rem;overflow:hidden;& button{appearance:none;font:inherit;font-family:var(--font-mono);vertical-align:baseline;min-width:3rem;color:var(--fadedGray);text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--fadedGray), transparent 40%);border:none;border-right:solid 1px color-mix(in srgb, var(--fadedGray), transparent 70%);cursor:pointer;box-shadow:1px 0px 0px var(--offWhite);background:0 0;border-radius:.125rem;justify-content:center;align-items:center;padding:.35rem .5rem;transition:background-color .2s ease-out,color .2s ease-out;display:flex;& .icon{vertical-align:middle;margin:0 auto}&:hover{color:var(--mainAccent);background-color:color-mix(in srgb, var(--offWhite), var(--fg) 10%)}&:active{& .icon{transition:scale 50ms ease-out,translate .2s ease-out;translate:0 1px;scale:.95}}}& .seed{color:var(--fadedGray);font:inherit;font-family:var(--font-mono);align-items:center;margin-left:auto;padding:0 1rem;display:flex;& input{field-sizing:content;background:0 0;border:none;border-radius:.125rem;padding:.1rem .5rem}}}}@media (width<=480px){& .art{aspect-ratio:unset;box-shadow:none;background:0 0;flex-direction:column;display:flex;overflow:visible;& .art-canvas{aspect-ratio:7/5;border-radius:.5rem;width:100%;position:static;box-shadow:0 2px 4px #0000001a,0 4px 8px #0000001a}& .controls{box-shadow:none;inset:unset;top:unset;background:0 0;margin-top:.5rem;padding:0 0 1rem;position:static;& .seed{padding:0 .25rem;& .lg{display:none}}& button{min-width:2.4rem;box-shadow:none;border:none;border-radius:4px;padding:.1rem 0;& .icon{scale:.85}}}}}}