:root{--bg:#fff;--ink:#0a0a0a;--noise:#d2d2d2;--accent:#004225}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.pattern{background:var(--bg);color:var(--ink);cursor:default;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;position:fixed;inset:0;overflow:hidden}.pattern-docs{pointer-events:none;position:absolute;inset:0}.pattern-doc{aspect-ratio:.72;box-sizing:border-box;background:var(--bg);border:1px solid #cfcfcf;flex-direction:column;gap:.45vw;width:7.5vw;padding:.9vw .8vw;display:flex;position:absolute}.pattern-doc span{background:#cfcfcf;height:.18vw;display:block}.pattern-doc .pattern-doc-title{background:var(--ink);width:55%;height:.35vw}.pattern-doc .pattern-doc-grid{box-sizing:border-box;background-color:#0000;background-image:linear-gradient(#cfcfcf 1px,#0000 1px),linear-gradient(90deg,#cfcfcf 1px,#0000 1px);background-size:25% 33.3%;border:1px solid #cfcfcf;width:100%;height:2.2vw}.pattern-layers{clip-path:circle(80%);transition:clip-path 1.8s cubic-bezier(.2,.7,.2,1)}.pattern--intro .pattern-layers{clip-path:circle(0%)}.pattern--ready .pattern-layers{clip-path:circle(80%)}.pattern-layers{-webkit-user-select:none;user-select:none;position:absolute;inset:0}.pattern-layers pre{white-space:pre;margin:0;font-family:inherit;font-size:.998004vw;line-height:1.3;position:absolute;top:0;left:0}.pattern-noise{color:var(--noise);opacity:.76}.pattern-signal{color:var(--ink);opacity:.94;font-weight:500}.pattern-grad{color:var(--accent);opacity:.88;font-weight:500}.pattern-name{background:var(--bg);letter-spacing:.02em;padding:6px 10px;position:absolute;top:20px;left:20px}.pattern-text{white-space:pre;color:var(--accent);background:var(--bg);-webkit-user-select:none;user-select:none;margin:0;font-family:inherit;font-size:.27027vw;font-weight:500;line-height:1.1;transition:opacity .8s 1s;position:absolute;bottom:12px;right:24px}.pattern--intro .pattern-text{opacity:0}