:root{--font-size:.7rem}body{font-family:sans-serif;font-size:var(--font-size);height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;overscroll-behavior:none;background-color:#000;flex-direction:column;margin:0;display:flex;overflow:hidden}header{z-index:2;background-color:#0a0a0fa6;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;align-self:flex-start;gap:.5rem;margin:.5rem .5rem 0;padding:.5rem;display:flex;position:relative;box-shadow:0 4px 16px #0006}main{flex:1}.header-brand-row{justify-content:flex-start;align-items:center;gap:.75rem;display:flex}h1{font-size:var(--font-size);color:#fff;margin:0;padding:0;font-weight:600}.header-links{align-items:center;gap:.75rem;margin-inline-start:auto;display:flex}.version{color:#94a3b8;font-style:italic;font-weight:100;font-size:calc(var(--font-size) * .8)}a{color:#93c5fd;text-decoration:none;transition:color .15s}a:hover{color:#3b82f6}.render-area{-webkit-user-select:none;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{z-index:2;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;-webkit-user-select:none;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{box-shadow:none;background:0 0;border:none;padding:0}.stats>form{flex-flow:wrap;font-family:monospace;display:flex}.stats label{font-size:var(--font-size);color:#cbd5e1;background-color:#00000059;border:1px solid #ffffff1a;border-radius:4px;align-items:center;gap:.2rem;margin:.1rem .15rem;padding:.15rem .3rem;display:flex}.stats input{color:#f1f5f9;font-family:monospace;font-size:var(--font-size);background-color:#0000;border:none;outline:none}.stats input[readonly]{cursor:default;opacity:.7;color:#94a3b8}@keyframes spin{to{transform:rotate(360deg)}}#iter-icon.busy{animation:2.5s linear infinite spin;display:inline-block}.stats input:focus{border-radius:2px;outline:1px solid #ffa60080}input[name=centerx],input[name=centery]{width:14ch}input[name=zoom],input[name=hue],input[name=huestep],input[name=rotation],input[name=iterations]{width:8ch}footer{z-index:2;align-self:center;max-width:95%;margin:.5rem auto 1rem;position:relative}.controls{background-color:#0a0a0fa6;border:1px solid #ffffff1a;border-radius:12px;padding:.15rem .5rem;box-shadow:0 8px 32px #00000080}.controls form,.controls form>div{flex-flow:wrap;justify-content:center;align-items:center;gap:.4rem;display:flex}.controls fieldset{font-size:calc(var(--font-size) * 2);border:none;flex-flow:column;flex:1 0 auto;align-content:center;align-items:center;min-width:max-content;margin:.15rem;padding:0;display:flex}.icon{-webkit-user-select:none;user-select:none;margin:.15rem;display:inline-block}.controls button,.controls a{font-size:calc(var(--font-size) * 2);text-shadow:-2px -2px 4px #00000080;-webkit-user-select:none;user-select:none;cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #ffa60000;outline:none;margin:0;padding:0;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)}@media (max-width:540px){header a .link-text{display:none}}#shortcuts{color:#cbd5e1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:calc(var(--font-size) * 1.3);background-color:#0a0a0fd9;border:1px solid #ffffff1a;border-radius:12px;padding:.75rem 1rem;box-shadow:0 8px 32px #00000080}#shortcuts::backdrop{background:#0000004d}#shortcuts h2{font-size:inherit;color:#fff;margin:0 0 .5rem}#shortcuts dl{grid-template-columns:auto auto;gap:.35rem 1rem;margin:0;display:grid}#shortcuts dd{margin:0}kbd{background:#ffffff14;border:1px solid #ffffff40;border-radius:3px;padding:0 .3em;font-family:monospace}@media (hover:none) and (pointer:coarse){.controls .help{display:none}}
