:root{--font-size:.7rem}body{font-family:sans-serif;font-size:var(--font-size);background-color:#000;margin:0;padding:0;overflow:hidden}header{color:#fdf5e6;background-color:#0003;justify-content:space-between;padding:.2rem .4rem .1rem;display:flex}h1{font-size:var(--font-size);margin:0;padding:0;font-weight:100}.version{color:silver;font-style:italic;font-weight:100}a{color:#eee8aa}.render-area{user-select:none;touch-action:none;z-index:-1;position:absolute;inset:0}canvas{z-index:1;cursor:grab;width:100%;height:100%;position:absolute;top:0;left:0}canvas:active{cursor:grabbing}#fractal-bg{z-index:0}.pin{place-content:flex-end center;width:0;height:0;display:flex;position:absolute;top:50%;left:50%;right:50%}.pinpoint{text-shadow:-2px -2px 4px #000c;user-select:none;touch-action:none;opacity:.001;align-self:flex-end;font-size:28px;transition:opacity .1s,transform .1s ease-in;display:inline-block;position:relative;transform:translateY(-40px)}.pinpoint.moving{opacity:1;transform:translateY(0)}.stats{color:#fdf5e6;background-color:#0003;padding:0 .4rem .2rem}.stats>form{flex-flow:wrap;font-family:monospace;display:flex}.stats label{font-size:var(--font-size);border:1px solid #fdf5e6;margin:.1rem .1rem 0 0;padding:.2rem .1rem}.stats input{color:#fdf5e6;font-family:monospace;font-size:var(--font-size);background-color:#0003;border:none;max-width:20vw}.stats input[readonly]{cursor:default;opacity:.7;color:silver}.stats input:focus{border-radius:2px;outline:1px solid #ffa60080}input[name=centerx],input[name=centery]{width:17ch}input[name=zoom]{width:10ch}input[name=hue],input[name=huestep],input[name=rotation],input[name=iterations]{width:7ch}footer{position:absolute;bottom:0;left:0;right:0}.controls{background-color:#0003;position:relative}.controls form{flex-flow:wrap;place-content:center space-evenly;align-items:center;display:flex}.controls fieldset{border:none;flex-flow:column;align-content:center;align-items:center;margin:.5rem;padding:0;font-size:16px;display:flex}.icon{user-select:none;margin:.3rem;display:inline-block}.controls button,.controls a{text-shadow:-2px -2px 4px #00000080;user-select:none;cursor:pointer;background:0 0;border:1px solid #ffa60000;outline:none;margin:0;padding:0;font-size:28px;text-decoration:none;transition:transform .1s,border-color .2s}.controls button:focus-visible,.controls button:hover,.controls a:focus-visible,.controls a:hover{border:1px solid #ffa60080;border-radius:4px;outline:none}.controls button:active,.controls a:active{transform:scale(.9)}