:root{--text-h:#08060d;--grad-bg:#f0eeff;--blob-1:#c084fc;--blob-2:#93c5fd;--blob-3:#f9a8d4;--blob-4:#6ee7b7;--blob-5:#fcd34d;--blob-mouse:#a78bfa;--blob-sz-1:80vw;--blob-sz-2:45vw;--blob-sz-3:40vw;--blob-sz-4:35vw;--blob-sz-5:30vw;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text-h:#f3f4f6;--grad-bg:#0d0e14;--blob-1:#aa3bff;--blob-2:#3b8eff;--blob-3:#ff3b8e;--blob-4:#3bffd5;--blob-5:#ff9f3b;--blob-mouse:#c084fc}}body{background:var(--grad-bg);-webkit-user-select:none;user-select:none;margin:0}.grain{content:"";pointer-events:none;z-index:9;opacity:.8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:250px 250px;position:fixed;inset:0}#app{z-index:1;flex-direction:column;min-height:100svh;display:flex;position:relative}#center{flex-grow:1;place-content:center;place-items:center;display:flex}h1{font-family:var(--sans);letter-spacing:-.03em;margin:0;font-size:clamp(1.5rem,5vw,4.5rem);font-weight:800}h1 .letter{background:linear-gradient(135deg, var(--blob-1), var(--blob-3), var(--blob-2));-webkit-text-fill-color:transparent;-webkit-text-stroke-width:0px;-webkit-text-stroke-color:#ffffffeb;will-change:transform, -webkit-text-stroke-width;-webkit-background-clip:text;background-clip:text;display:inline-block}.gradient-bg{background:linear-gradient(-45deg, var(--blob-1), var(--blob-3), var(--blob-2), var(--blob-5), var(--blob-4));background-size:400% 400%;animation:18s infinite gradientShift;position:fixed;inset:0;overflow:hidden}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.goo-filter{width:0;height:0;position:absolute}.blobs{filter:url(#goo);width:100%;height:100%}.blob{opacity:.8;will-change:transform;border-radius:50%;position:absolute}.blob-1{width:var(--blob-sz-1);height:var(--blob-sz-1);background:radial-gradient(circle at center, var(--blob-1) 0%, transparent 70%);animation:20s linear infinite orbit;top:10%;left:20%}.blob-2{width:var(--blob-sz-2);height:var(--blob-sz-2);background:radial-gradient(circle at center, var(--blob-2) 0%, transparent 70%);animation:14s ease-in-out infinite alternate slideX;top:15%;left:-10%}.blob-3{width:var(--blob-sz-3);height:var(--blob-sz-3);background:radial-gradient(circle at center, var(--blob-3) 0%, transparent 70%);animation:16s ease-in-out infinite alternate slideY;bottom:-10%;left:30%}.blob-4{width:var(--blob-sz-4);height:var(--blob-sz-4);background:radial-gradient(circle at center, var(--blob-4) 0%, transparent 70%);animation:18s ease-in-out infinite alternate diagonal;bottom:15%;right:5%}.blob-5{width:var(--blob-sz-5);height:var(--blob-sz-5);background:radial-gradient(circle at center, var(--blob-5) 0%, transparent 70%);animation:45s ease-in-out infinite figure8;bottom:-10%;left:-10%}.blob-mouse{background:radial-gradient(circle at center, var(--blob-mouse) 0%, transparent 70%);pointer-events:none;width:200px;height:200px;top:-100px;left:-100px}@media (pointer:coarse){.blob-mouse{width:80px;height:80px;top:-40px;left:-40px}}@keyframes orbit{0%{transform:translate(0)scale(1)}25%{transform:translate(35%,-25%)scale(1.1)}50%{transform:translate(20%,-50%)scale(.95)}75%{transform:translate(-15%,-25%)scale(1.05)}to{transform:translate(0)scale(1)}}@keyframes slideX{0%{transform:translate(0)scale(1)}to{transform:translate(80vw)scale(.9)}}@keyframes slideY{0%{transform:translateY(0)scale(1)}to{transform:translateY(-70vh)scale(1.1)}}@keyframes diagonal{0%{transform:translate(0)scale(1)}to{transform:translate(-25%,-30%)scale(1.15)}}@keyframes figure8{0%{transform:translate(0)scale(1)}25%{transform:translate(70vw,-40vh)scale(1.1)}50%{transform:translate(30vw,-80vh)scale(1)}75%{transform:translate(-20vw,-40vh)scale(.9)}to{transform:translate(0)scale(1)}}#frame{pointer-events:none;z-index:100;box-shadow:0 0 0 9999px var(--frame-fill,#fff);border-radius:16px;position:fixed;inset:32px}@media (pointer:coarse),(width<=640px){#frame{display:none}}body[data-design=gradient]{--frame-fill:var(--grad-bg);touch-action:none}body[data-design=zencube],body[data-design=relaxify],body[data-design=strata],body[data-design=lattice]{--frame-fill:#fff}body[data-design=motions]{--frame-fill:#f0ede8}body[data-design=pattern]{--frame-fill:#e8e8ed}body[data-design=fluid],body[data-design=morph]{--frame-fill:#fff}body[data-design=gradient] #frame,body[data-design=zencube] #frame,body[data-design=relaxify] #frame,body[data-design=strata] #frame{border:1px solid #0000001a}body[data-design=motions] #frame{display:none}body[data-design=fluid] #frame,body[data-design=morph] #frame{border:1px solid #fff3}body[data-design=lattice] #frame{border:1px solid #0000001a}@media (prefers-color-scheme:dark){body[data-design=gradient] #frame{border-color:#ffffff26}}#design-nav{z-index:101;-webkit-user-select:none;user-select:none;justify-content:center;display:flex;position:fixed;bottom:20px;left:0;right:0}#design-tabs{gap:4px;display:flex}.design-tab{color:#000000bf;cursor:pointer;letter-spacing:.08em;text-transform:uppercase;background:#f8f7f4;border:none;border-radius:2px 2px 0 0;padding:6px 18px;font-family:SF Mono,Fira Code,monospace;font-size:11px;transition:transform .18s,background-color .15s}.design-tab:hover{transform:translateY(-3px)}.design-tab.active{color:#000000e6;background:#e8e5de}#design-select{appearance:none;-webkit-backdrop-filter:blur(12px);color:var(--text-h);cursor:pointer;font-family:var(--sans);letter-spacing:.04em;background:#ffffff26 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right .65rem center no-repeat;border:1px solid #ffffff4d;border-radius:999px;margin-bottom:1rem;padding:.4rem 2rem .4rem .9rem;font-size:.75rem;font-weight:600;transition:background-color .2s,border-color .2s}#design-select:hover{background-color:#ffffff40;border-color:#ffffff80}#design-select:focus{border-color:var(--blob-1);outline:none}@media (width<=640px){#design-tabs{display:none}}@media (width>=641px){#design-select{display:none}}body:not([data-design=gradient]) #design2-container,body:not([data-design=fluid]) #design1-container,body:not([data-design=morph]) #design3-container,body:not([data-design=relaxify]) #design6-container,body:not([data-design=strata]) #design7-container,body:not([data-design=zencube]) #design5-container,body:not([data-design=lattice]) #design8-container,body:not([data-design=motions]) #design9-container,body:not([data-design=pattern]) #design10-container{display:none}body[data-design=fluid] .blob-mouse{width:500px;height:500px;top:-250px;left:-250px}body[data-design=fluid]{color:#fff;background-color:#fff;font-family:Raleway,sans-serif;overflow:hidden}body[data-design=fluid] p{margin:0;padding:0}body[data-design=fluid] #design1-container{isolation:isolate;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}body[data-design=fluid] .bgimage{background-size:cover;width:100%;height:100%;position:absolute}body[data-design=fluid] .sketch-bg{background-image:url(/images/lapalma-schets-sml.png)}body[data-design=fluid] .image-blur{filter:invert();background-image:url(/images/lapalma-highres.png)}body[data-design=fluid] #fluid-canvas{filter:invert();mix-blend-mode:color-dodge;touch-action:none;width:100%;height:100%;position:absolute}body[data-design=fluid] .marquee-overlay{pointer-events:none;mix-blend-mode:difference;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}body[data-design=fluid] .content{pointer-events:visible;filter:invert();mix-blend-mode:darken;text-align:center;opacity:.7;width:100%}body[data-design=fluid] .marquee{width:max-content;height:1em;font-family:var(--sans);letter-spacing:-.03em;place-items:center;margin:0 auto;font-size:clamp(1.5rem,5vw,4.5rem);font-weight:800;display:grid;position:relative;overflow:hidden}body[data-design=fluid] .marquee_text{white-space:nowrap}body[data-design=fluid] .marquee-blur{filter:contrast(4);background-color:#000;background-image:radial-gradient(circle at 5% 5%,#fff 0%,#0000 5px);grid-area:1/1;place-items:center;display:grid}body[data-design=fluid] .marquee-blur p{filter:blur(.07em)}body[data-design=fluid] .marquee-clear{cursor:none;grid-area:1/1;place-items:center;display:grid}body[data-design=relaxify] #design6-container{display:block;position:fixed;inset:0}#d6-frame{border:none;width:100%;height:100%;display:block}body[data-design=strata] #design7-container{display:block;position:fixed;inset:0}body[data-design=strata] #d7-title{white-space:nowrap;pointer-events:none;z-index:10;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body[data-design=strata] #d7-title .letter{-webkit-text-fill-color:#ffffffe6;-webkit-text-stroke-color:#ffffffe6;background:0 0}body[data-design=morph],body[data-design=relaxify],body[data-design=strata],body[data-design=motions]{background:#fff;overflow:hidden}body[data-design=morph] #design3-container{display:block;position:fixed;inset:0}#morph-canvas{touch-action:none;width:100%;height:100%;display:block}#design3-title{pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#morph-mode-toggle{z-index:200;cursor:pointer;background:0 0;border:2px solid #ffffff8c;border-radius:50%;width:20px;height:20px;padding:0;transition:background .25s,border-color .25s;position:fixed;top:2.5rem;right:2.5rem}body:not([data-design=morph]) #morph-mode-toggle{display:none}#morph-mode-toggle.active{background:#ffffffe6;border-color:#ffffffe6}.morph-h1{font-family:var(--sans);letter-spacing:-.03em;color:#fff;mix-blend-mode:difference;-webkit-text-fill-color:inherit;background:0 0;margin:0;font-size:clamp(1.5rem,5vw,4.5rem);font-weight:800}.morph-h1 span{will-change:transform;display:inline-block}body[data-design=zencube] #design5-container{background-color:#f2dbf3;background-image:radial-gradient(55% 50% at 12% 18%,#c382ff61 0%,#0000 70%),radial-gradient(50% 55% at 88% 14%,#78afff57 0%,#0000 70%),radial-gradient(48% 52% at 82% 84%,#ff78af4d 0%,#0000 70%),radial-gradient(52% 48% at 16% 82%,#3cdcc347 0%,#0000 70%),radial-gradient(38% 38% at 52% 48%,#ffc85038 0%,#0000 65%);display:block;position:fixed;inset:0}#d5-canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block}#d5-canvas:active{cursor:grabbing}#d5-hint{color:#ada49a;letter-spacing:.06em;pointer-events:none;white-space:nowrap;font-family:system-ui,-apple-system,sans-serif;font-size:.8rem;animation:1.2s 3s forwards d5-fadeHint;position:absolute;bottom:2rem;left:50%;transform:translate(-50%)}@keyframes d5-fadeHint{to{opacity:0}}#sound-toggle{appearance:none;cursor:pointer;touch-action:manipulation;z-index:200;background:0 0;border:none;justify-content:center;align-items:center;width:2.4rem;height:2.4rem;padding:0;transition:color .15s;display:none;position:fixed;bottom:2.5rem;right:2.5rem}#sound-toggle svg{width:18px;height:18px}body[data-design=zencube] #sound-toggle,body[data-design=lattice] #sound-toggle{display:flex}body[data-design=zencube] #sound-toggle{color:#7a6870}body[data-design=zencube] #sound-toggle.muted{color:#bdb5ad}body[data-design=lattice] #sound-toggle{color:#ffffff8c}body[data-design=lattice] #sound-toggle.muted{color:#ffffff2e}#d5-hue-wheel{pointer-events:none;opacity:0;transform-origin:50% calc(100% + 14px);-webkit-user-select:none;user-select:none;z-index:200;width:64px;height:64px;margin-top:-78px;margin-left:-32px;position:fixed}#d5-hue-wheel.visible{opacity:1;transition:opacity .12s}#d5-hue-wheel.suck-in{transition:none;animation:.3s ease-in forwards d5-suck-in}@keyframes d5-suck-in{0%{opacity:1;transform:scale(1)}18%{opacity:1;transform:scale(1.12)}to{opacity:0;transform:scale(0)}}#d5-counter{letter-spacing:-.02em;color:#7a6870;pointer-events:none;-webkit-user-select:none;user-select:none;text-align:center;opacity:0;font-family:system-ui,-apple-system,sans-serif;font-size:1.9rem;font-weight:300;transition:color .3s;position:absolute;top:calc(23% - 50px);left:50%;transform:translate(-50%)}#d5-counter.visible:not(.hiding){opacity:1;animation:.5s cubic-bezier(.34,1.56,.64,1) both d5-counter-bounce-in}#d5-counter.celebrate:not(.hiding){color:#b86a10}#d5-counter.visible.celebrate:not(.hiding){animation:.5s cubic-bezier(.34,1.56,.64,1) both d5-counter-bounce-in,.5s ease-in-out .5s infinite alternate d5-counter-text-glow}#d5-counter.hiding{animation:.42s ease-in forwards d5-counter-float-out}@keyframes d5-counter-bounce-in{0%{opacity:0;transform:translate(-50%)translateY(16px)scale(.65)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}@keyframes d5-counter-float-out{0%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-18px)}}@keyframes d5-counter-text-glow{0%{text-shadow:0 0 6px #ffaf3c4d}to{text-shadow:0 0 22px #ffaf3ce6}}#d5-counter-val{line-height:1;display:block}#d5-debug{color:#7a6870;-webkit-backdrop-filter:blur(10px);pointer-events:none;white-space:pre;letter-spacing:.04em;-webkit-user-select:none;user-select:none;background:#fcfaf685;border:1px solid #94806c2e;border-radius:8px;padding:.45rem .8rem;font-family:Courier New,Courier,monospace;font-size:.7rem;line-height:1.7;position:absolute;top:2.5rem;right:2.5rem}.confetti-dot{pointer-events:none;z-index:999;border:2px solid #fff9;border-radius:50%;animation:1.5s cubic-bezier(.15,.85,.35,1) forwards confetti-fly;position:fixed;transform:translate(-50%,-50%)}@keyframes confetti-fly{0%{opacity:1;transform:translate(-50%,-50%)scale(1.3)}75%{opacity:.55}to{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.1);opacity:0}}#d5-counter .counter-val-exit{text-align:center;pointer-events:none;width:100%;line-height:1;display:block;position:absolute;top:0;left:0}#d5-counter .counter-val-exit.up{animation:.3s ease-in forwards digit-exit-up}#d5-counter .counter-val-exit.down{animation:.3s ease-in forwards digit-exit-down}@keyframes digit-exit-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes digit-exit-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}#d5-counter-val.enter-up{animation:.4s cubic-bezier(.34,1.56,.64,1) digit-enter-up}#d5-counter-val.enter-down{animation:.4s cubic-bezier(.34,1.56,.64,1) digit-enter-down}@keyframes digit-enter-up{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes digit-enter-down{0%{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}body[data-design=motions] #design9-container{display:block;position:fixed;inset:0}#d9-frame{border:none;width:100%;height:100%;display:block}body[data-design=pattern] #design10-container{display:block;position:fixed;inset:0}#d10-frame{border:none;width:100%;height:100%;display:block}body[data-design=pattern] #frame{display:none}body[data-design=lattice] #design8-container{background:radial-gradient(at 15% 25%,#3b1272 0%,#0000 45%),radial-gradient(at 80% 15%,#220c54 0%,#0000 40%),radial-gradient(at 65% 75%,#4a0f80 0%,#0000 50%),radial-gradient(at 5% 80%,#1a083a 0%,#0000 38%),radial-gradient(at 45%,#2d0e60 0%,#0000 60%),#0d0520;border-radius:16px;justify-content:center;align-items:center;display:flex;position:fixed;inset:32px;overflow:hidden}#design8-container .wrapper{display:inline-block;position:relative}#design8-container .grid{touch-action:none;grid-template-rows:repeat(12,64px);grid-template-columns:repeat(24,64px);display:grid}#design8-container .cell{cursor:crosshair;border:1px dashed #ffffff26;width:64px;height:64px;transition:border-color .2s;position:relative}#design8-container .cell.active{border-color:#b4ff008c}#design8-container .cell-x{transition:transform .2s;position:absolute;inset:0}#design8-container .cell-x:before,#design8-container .cell-x:after{content:"";background:#b4ff001f;width:36%;height:1.5px;transition:background .2s;position:absolute;top:50%;left:50%}#design8-container .cell-x:before{transform:translate(-50%,-50%)rotate(45deg)}#design8-container .cell-x:after{transform:translate(-50%,-50%)rotate(-45deg)}#design8-container .cell.active .cell-x{transition:transform .5s ease-out;transform:rotate(90deg)}#design8-container .cell.returning .cell-x{transition:transform .5s ease-in;transform:rotate(-90deg)}#design8-container .cell.settling{border-color:#b4ff004d}#design8-container .cell.active .cell-x:before,#design8-container .cell.active .cell-x:after{background:#b4ff00cc}#design8-container .dot-canvas{pointer-events:none;position:absolute;top:0;left:0}@media (pointer:coarse),(width<=640px){body[data-design=lattice] #design8-container{border-radius:0;inset:0}}