@font-face{font-family:Iosevka Web;font-weight:400;font-style:normal;font-display:swap;src:url(./iosevka-400-normal-DLDHbzYF.woff2)format("woff2")}@font-face{font-family:Iosevka Web;font-weight:700;font-style:normal;font-display:swap;src:url(./iosevka-700-normal-BaQ--3KU.woff2)format("woff2")}@font-face{font-family:Iosevka Web;font-weight:400;font-style:italic;font-display:swap;src:url(./iosevka-400-italic-Bml3ZmeD.woff2)format("woff2")}:root{--ink:#000;--paper:#fff;--mute:#888;--highlight:#ffcfdc;--ease:cubic-bezier(.3, .7, 0, 1);--spring:cubic-bezier(.34, 1.56, .64, 1);--bg:oklch(from var(--highlight) calc(l + .08) calc(c - .075) calc(h + 100));--onBg:var(--ink)}@supports (color:lab(0% 0 0)){:root{--highlight:lab(85.5063% 75.0226 1.01175)}}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--ink);background-clip:content-box;border:2px solid #0000}::-webkit-scrollbar-corner{background:0 0}html,body{margin:0;padding:0}html{background:var(--bg);color:var(--onBg);font-family:Iosevka Web,Iosevka,ui-monospace,Menlo,monospace;line-height:1.6;overflow-x:clip}p{line-height:1.6}::selection{background:var(--ink);color:var(--paper)}a{color:var(--ink);text-underline-offset:.25em;text-decoration-thickness:.1em;transition:text-underline-offset .2s}a:hover{text-underline-offset:.15em;text-decoration-thickness:.05em}.page{--padding:5vmin;padding:var(--padding);width:800px;max-width:calc(100% - var(--padding) * 2);margin:auto;padding-bottom:8rem}.page h1,.page h2,.page h3{margin:0 0 .5em;font-weight:700;line-height:1.2}.page h1{margin-top:1em;font-size:3.5rem}.page h2{margin-top:2em;font-size:2.5rem}.page h3{margin-top:1.5em;font-size:1.5rem}.page [data-puff] svg{width:auto;max-width:100%;display:block;overflow:visible}.page h1[data-puff] svg{height:2.8em}.page h2[data-puff] svg{height:1.9em}.page h3[data-puff] svg,.page h3.preset-name svg{height:2.8em}.page h3.preset-name svg{width:auto;max-width:100%;display:block;overflow:visible}.page h3.preset-name.pending,.page [data-puff].pending{color:#0000}.page svg path[stroke]:not([data-part=band]){vector-effect:non-scaling-stroke;stroke-width:var(--line,2.5px)}.page h1{--line:3.5px}.page h2{--line:2px}.page h3{--line:1.75px}.page :is(h2,h3) svg [data-part=band]{vector-effect:non-scaling-stroke;stroke-width:calc(var(--line) * 2.5)}.sbs{--line:2.5px}.sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.page p,.page ul{max-width:50ch;margin-top:5vmin;margin-left:7vw}.page .lead{margin-top:3vmin;margin-bottom:5vmin}.page code{font:inherit;font-weight:700}.page pre.code{border:2px solid var(--ink);background:#fff;margin:5vmin 0 0 7vw;padding:1rem 1.25rem;font:.9rem/1.6 inherit;overflow-x:auto}.page pre.code code{font-weight:400}.sbs svg{width:100%;height:auto;display:block;overflow:visible}.sbs{grid-template-columns:1fr 1fr 1fr;gap:5vmin;margin:5vmin -10vmin;display:grid}.sbs figure{margin:0}figcaption{color:var(--mute);margin-top:.75rem;font-size:.8em}.presets{margin-left:7vw}.presets section{margin-top:3vmin}.presets h3.preset-name{cursor:pointer;margin-left:-3.5vw}.presets h3.preset-name:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.presets p{margin:.25rem 0 0}.toggle{cursor:pointer;text-underline-offset:.25em;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0;-webkit-text-decoration:underline dashed;text-decoration:underline dashed;text-decoration-thickness:.08em}.toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.toggle:hover{text-decoration-style:solid}.toggle:before{content:"";vertical-align:-.02em;border:.12em solid;width:.6em;height:.6em;margin-right:.35em;display:inline-block}.toggle[role=radio]:before{border-radius:50%}.toggle[role=radio][aria-checked=true]:before{background:radial-gradient(circle,currentColor 0 35%,#0000 40%)}.toggle-select{display:inline-block;position:relative}.toggle-select select{field-sizing:content;appearance:none;font:inherit;color:inherit;cursor:pointer;text-underline-offset:.25em;background:0 0;border:0;padding:0 1em 0 0;-webkit-text-decoration:underline dashed;text-decoration:underline dashed;text-decoration-thickness:.08em}.toggle-select:after{content:"";pointer-events:none;border-bottom:.12em solid;border-right:.12em solid;width:.4em;height:.4em;position:absolute;top:50%;right:.15em;transform:translateY(-70%)rotate(45deg)}@supports (appearance:base-select){.toggle-select select{appearance:base-select}.toggle-select select::picker(select){appearance:base-select}.toggle-select select{min-block-size:0}.toggle-select selectedcontent .opt-icon{display:none}.toggle-select select::picker-icon{display:none}.toggle-select option::checkmark{display:none}.toggle-select select::picker(select){border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;box-shadow:none;border-radius:0;margin-block-start:4px;padding:.25rem 0;text-decoration:none}.toggle-select option{align-items:center;gap:.6em;padding:.2rem .75rem;text-decoration:none;display:flex}.toggle-select option:checked{font-weight:700}.toggle-select option:hover,.toggle-select option:focus-visible{background:var(--bg);outline:0}.opt-icon{justify-content:center;inline-size:2.2em;display:inline-flex}.opt-icon:empty{display:none}.opt-icon svg{block-size:1.3em;inline-size:auto;max-inline-size:2.2em}.opt-icon svg *{vector-effect:non-scaling-stroke}.opt-icon svg [stroke=currentColor],.opt-icon svg :is([data-part=outline],[data-part=lines]){stroke-width:1.25px}.opt-icon svg [data-part=band]{vector-effect:none}#preset .opt-icon{inline-size:2.6em}#preset .opt-icon svg{block-size:2em;max-inline-size:2.6em}}.toggle-select select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.toggle[role=switch][aria-checked=true]:before{box-shadow:inset 0 0 0 .1em var(--surface,var(--bg));background:currentColor}.parts{--line:3px;margin:5vmin -10vmin}.parts svg{width:100%;height:auto;display:block;overflow:visible}.parts [data-part=letter]{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%;animation:2.8s ease-in-out infinite hop}.parts :is([data-part=shine],[data-part=inline]){animation-composition:add,add;animation:2.8s ease-in-out infinite hop-unmove,2.8s ease-in-out infinite hop-move}.parts [data-part=inline]{animation-composition:add,add,replace;animation:2.8s ease-in-out infinite hop-unmove,2.8s ease-in-out infinite hop-move,2.8s step-end infinite ink-lines}.parts [data-part=fill]{animation:2.8s step-end infinite ink}.parts [data-part=lines]{animation:2.8s step-end infinite ink-lines}.parts .inked{translate:0 calc(-1 * var(--lift));animation:none}.parts .inked :is([data-part=shine],[data-part=inline]){animation:none;translate:0}.parts .inked [data-part=fill]{fill:var(--ink);animation:none}.parts .inked [data-part=inline],.parts .inked [data-part=lines]{stroke:var(--paper);animation:none}@keyframes ink{0%{fill:var(--paper)}20%{fill:var(--ink)}40%,to{fill:var(--paper)}}@keyframes ink-lines{0%{stroke:var(--ink)}20%{stroke:var(--paper)}40%,to{stroke:var(--ink)}}@keyframes hop{0%,9%{translate:0;scale:1}13%{translate:0;scale:1.1 .86}18%{translate:0 calc(-1.35 * var(--lift));scale:.92 1.12}23%{translate:0 calc(-.92 * var(--lift));scale:1.03 .97}27%,35%{translate:0 calc(-1 * var(--lift));scale:1}41%{translate:0;scale:.92 1.1}44%{translate:0;scale:1.14 .82}48%{translate:0 calc(-.3 * var(--lift));scale:.97 1.04}52%,to{translate:0;scale:1}}@keyframes hop-move{0%,13%{translate:0}18%{translate:0 calc(-1.35 * var(--lift))}23%{translate:0 calc(-.92 * var(--lift))}27%,35%{translate:0 calc(-1 * var(--lift))}41%,44%{translate:0}48%{translate:0 calc(-.3 * var(--lift))}52%,to{translate:0}}@keyframes hop-unmove{0%,13%{translate:0}18%{translate:0 calc(1.35 * var(--lift))}23%{translate:0 calc(.92 * var(--lift))}27%,35%{translate:0 calc(1 * var(--lift))}41%,44%{translate:0}48%{translate:0 calc(.3 * var(--lift))}52%,to{translate:0}}@media (prefers-reduced-motion:reduce){.parts [data-part=letter],.parts [data-part=fill],.parts [data-part=lines],.parts [data-part=inline],.parts [data-part=shine]{animation:none}}@media (max-width:800px){.parts{margin-left:0;margin-right:0}.sbs{grid-template-columns:1fr;margin-left:0;margin-right:0}.page p,.page ul,.page pre.code,.presets,.presets h3.preset-name{margin-left:0}.page h1{font-size:2.5rem}.page h2{font-size:1.8rem}}.page.page-tail{padding-top:0;padding-bottom:3vmin}:is(.page:has(+.page-tail),.page:has(+.settings+.page-tail)){padding-bottom:0}.pg{border-top:2px solid var(--ink);background:#fff;height:100vh;min-height:640px;font-size:13px;line-height:1.4}.pg-inner{height:100%}.pg-main{flex-direction:column;min-width:0;height:100%;display:flex}#stage{min-height:0;padding:32px calc(var(--panel) + 3rem) 32px 32px;flex:1;place-items:center;display:grid;overflow:auto}#stage svg{max-width:100%;height:auto;max-height:100%}#stage [data-part=fill]{fill:var(--bg)}.pg button,.settings button{font:inherit;color:inherit;background:var(--paper);border:2px solid var(--ink);cursor:pointer;border-radius:0;padding:6px 8px}.pg button:hover,.settings button:hover{background:var(--ink);color:var(--paper)}.pg .row{grid-template-columns:1fr auto;align-items:center;gap:6px;display:grid}.pg .label{color:var(--mute);text-transform:uppercase;font-size:11px}.pg .err{font-size:11px}.pg .btns{white-space:nowrap}.pg textarea.error{border-style:dashed}.code-panel{border-top:2px solid var(--ink);padding:10px calc(var(--panel) + 3rem) 10px 16px}.code-panel[open]{padding-bottom:16px}.code-panel[open]>*+*{margin-top:8px}.code-panel summary .summary-tools{float:right;text-transform:none;align-items:center;gap:8px;font-size:12px;display:flex}.code-panel summary #status{color:var(--mute)}.code-panel summary{cursor:pointer;text-transform:uppercase;-webkit-user-select:none;user-select:none;font-size:11px}:root{--panel:300px}.settings{z-index:100;width:var(--panel);background:var(--paper);border:2px solid var(--ink);opacity:0;pointer-events:none;max-height:calc(100vh - 2.4rem);transition:opacity .25s ease, transform .35s var(--ease);--surface:var(--paper);font-size:12px;line-height:1.4;position:fixed;top:1.2rem;right:1.2rem;overflow:auto;transform:translateY(-.5rem)}.settings.visible{opacity:1;pointer-events:auto;transform:none}.settings{color:var(--ink)}@media (prefers-color-scheme:dark){.settings{--ink:#fff;--paper:#000;--mute:#9a9a9a}}.settings-title{cursor:pointer;-webkit-user-select:none;user-select:none;text-transform:uppercase;letter-spacing:.04em;justify-content:space-between;align-items:center;padding:.6rem .8rem;font-weight:700;list-style:none;display:flex}.settings-title::-webkit-details-marker{display:none}.settings-icon{transition:transform .3s;display:inline-block}.settings[open] .settings-icon{transform:rotate(90deg)}.settings-section{border-top:2px solid var(--ink);text-transform:uppercase;letter-spacing:.04em;justify-content:space-between;align-items:center;padding:.5rem .8rem;font-size:11px;font-weight:700;display:flex}.settings .btn-play{all:unset;cursor:pointer;flex:none;width:1.4em;height:1.4em;position:relative}.settings .btn-play:before{content:"";border:.5em solid #0000;border-left:.85em solid;border-right-width:0;position:absolute;top:.2em;left:.3em}.settings .btn-play.playing:before{background:currentColor;border:0;width:.25em;height:1em;left:.3em;box-shadow:.45em 0}.settings .btn-play:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.settings .btn-shuffle{all:unset;cursor:pointer;font-size:14px;line-height:1;transition:transform .3s}.settings .btn-shuffle:hover{transform:rotate(180deg)}.settings-fields{flex-direction:column;padding-bottom:.3rem;display:flex}.field{align-items:center;gap:.5rem;min-width:0;padding:.3rem .8rem;display:flex}.field>span{min-width:6.5em;color:var(--mute)}.field>select,.field>input:not([type=range]),.field>textarea{flex:1;min-width:0}.field>.toggle-select{min-width:0;color:var(--ink);flex:1}.settings .toggle-select select{field-sizing:fixed;width:100%}.field>.toggle{min-width:0;color:var(--ink)}.field input[type=range]{appearance:none;cursor:pointer;background:0 0;border:0;flex:1;min-width:0;height:1.2em;padding:0}.field input[type=range]::-webkit-slider-runnable-track{background:var(--ink);height:2px}.field input[type=range]::-moz-range-track{background:var(--ink);height:2px}.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--paper);border:2px solid var(--ink);border-radius:0;width:.8em;height:.8em;margin-top:calc(1px - .4em)}.field input[type=range]::-moz-range-thumb{background:var(--paper);border:2px solid var(--ink);border-radius:0;width:.8em;height:.8em}.field input[type=range]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.field input[type=range]:disabled{opacity:.35;cursor:default}.field output{text-align:right;font-variant-numeric:tabular-nums;min-width:2.8em}.field-pair{gap:1rem}.field-wide{flex-direction:column;align-items:stretch;gap:.25rem}.settings input:not([type=range]),.settings textarea{font:inherit;color:inherit;background:0 0;border:0;border-bottom:.12em dashed;border-radius:0;padding:2px 0}.settings input:not([type=range]):focus,.settings textarea:focus{border-bottom-style:solid;outline:0}.settings textarea{resize:vertical;border:.12em dashed;padding:4px 6px}.settings textarea:focus{border-style:solid}.settings select:disabled{opacity:.35}.editor{background:var(--bg);height:34vh;position:relative}.pg #code,#codeHl{border:2px solid var(--ink);white-space:pre;tab-size:2;width:100%;height:100%;margin:0;padding:6px 8px;font:12px/1.5 Iosevka Web,Iosevka,ui-monospace,Menlo,monospace;position:absolute;inset:0;overflow:auto}.pg #code{resize:none;color:#0000;min-height:0;caret-color:var(--ink);background:0 0}.pg #code::selection{color:#0000;background:#00000026}#codeHl{pointer-events:none;color:var(--ink);border-color:#0000;overflow:hidden}.t-kw{font-weight:700}.t-str{color:#5a5a5a}.t-num{color:#333;font-weight:700}.t-com{color:#9a9a9a;font-style:italic}.t-key{text-underline-offset:2px;-webkit-text-decoration:underline #ccc;text-decoration:underline #ccc}.t-pun{color:#8a8a8a}@media (max-width:800px){.settings{border-width:0 0 2px;width:auto;max-height:45svh;top:0;left:0;right:0}.pg{height:100svh;min-height:0;padding-top:2.6rem}body:has(.settings[open].visible) .pg{padding-top:45svh}#stage{padding:16px}#stage svg{width:100%;max-height:none}.code-panel{padding-right:16px}.editor{height:40svh}}:is([data-puff],.preset-name) [data-part=shine]{fill:var(--highlight);stroke:none}.toggle[aria-disabled]{opacity:.35;cursor:default}:is(#stage,[data-puff],.preset-name) [data-part=shade]{fill:oklch(from var(--bg) calc(l - .3) calc(c - .02) h)}:is(#stage,[data-puff],.preset-name) [data-part=obstructions]{display:none}.fx-card+.fx-card{border-top:1px dashed var(--ink)}.fx-card{padding-top:.2rem}.fx-head{justify-content:space-between;align-items:center;padding:.2rem .8rem 0;display:flex}.fx-name{font-weight:700}.settings .fx-remove{all:unset;cursor:pointer;padding:0 .15em;font-size:1.1em;line-height:1}.settings .fx-remove:hover{transform:scale(1.2)}.fx-remove:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.fx-add{border-top:1px dashed var(--ink)}#fxCards:empty+.fx-add{border-top:0}.fx-grid{grid-template-columns:1fr auto;align-items:center;display:grid}.fx-controls{min-width:0}.fx-row{grid-column:1/-1}.fx-light{color:var(--mute);flex-direction:column;align-items:center;gap:.25rem;padding:.3rem .8rem .3rem 0;display:flex}.fx-light output{color:var(--ink);font-variant-numeric:tabular-nums}.dial{--size:4.4em;--line:2px;width:var(--size);height:var(--size);box-sizing:border-box;border:var(--line) solid var(--ink);cursor:grab;touch-action:none;border-radius:50%;position:relative}.dial:active{cursor:grabbing}.dial:after{content:"";background:var(--ink);border-radius:50%;width:.3em;height:.3em;margin:-.15em 0 0 -.15em;position:absolute;top:50%;left:50%}.dial-knob{box-sizing:border-box;background:var(--paper);border:2px solid var(--ink);width:.8em;height:.8em;transform:rotate(var(--a,225deg)) translateX(calc(var(--size) / 2 - var(--line) / 2)) rotate(calc(45deg - var(--a,225deg)));margin:-.4em 0 0 -.4em;position:absolute;top:50%;left:50%}.dial:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.dial[aria-disabled]{opacity:.35;cursor:default}.sbs[data-effects]{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:800px){.sbs[data-effects]{grid-template-columns:repeat(2,minmax(0,1fr))}}