:root{--ground:#0b0c10;--fg:#f2f3f5;--dim:#7c8291;--teal:#1fe0c2;--acid-bg:#0a0d11;--acid-line:#26333d;--ink-bg:#14111f;--ink-line:#2c2740;--violet:#b48cff;--milk:#efeaf7}*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%}body{background:var(--ground);color:var(--fg);flex-direction:column;min-height:100vh;padding:48px clamp(20px,6vw,80px) 28px;font-family:system-ui,Segoe UI,sans-serif;display:flex;position:relative;overflow-x:hidden}body:before,body:after{content:"";pointer-events:none;z-index:-1;filter:blur(60px);border-radius:50%;width:60vmax;height:60vmax;position:fixed}body:before{background:radial-gradient(circle,#1fe0c212,#0000 65%);top:-20vmax;left:-18vmax}body:after{background:radial-gradient(circle,#b48cff14,#0000 65%);bottom:-22vmax;right:-16vmax}header{text-align:center;margin-bottom:44px}.eyebrow{letter-spacing:6px;color:var(--dim);font-family:JetBrains Mono,Consolas,monospace;font-size:11px}h1{margin:10px 0 8px;font-family:Georgia,Iowan Old Style,serif;font-size:clamp(38px,6vw,64px);font-style:italic;font-weight:400}.sub{color:var(--dim);font-size:15px}main{flex-direction:column;flex:1;justify-content:center;gap:26px;width:100%;max-width:1500px;margin:0 auto;display:flex}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,360px));justify-content:center;gap:clamp(14px,2vw,24px);display:grid}.card.featured{grid-template-rows:auto auto auto;grid-template-columns:minmax(200px,320px) 1fr;align-content:center;column-gap:clamp(20px,4vw,44px);width:100%;max-width:1120px;min-height:0;margin:0 auto;padding:clamp(22px,3vw,36px);display:grid}.card.featured .motif{grid-row:1/4;height:100%;min-height:150px;margin:0}.card.featured h2{align-self:end;margin-top:0}.card.featured p{max-width:60ch}.divider{align-items:center;gap:14px;width:100%;max-width:1120px;margin:6px auto 0;display:flex}.divider:before,.divider:after{content:"";background:#ffffff14;flex:1;height:1px}.divider span{letter-spacing:5px;text-transform:uppercase;color:var(--dim);font-family:JetBrains Mono,Consolas,monospace;font-size:10px}.card{border-radius:18px;flex-direction:column;justify-content:flex-end;gap:10px;min-height:300px;padding:clamp(22px,3vw,40px);text-decoration:none;transition:transform .25s,box-shadow .25s;display:flex}.card:hover,.card:focus-visible{transform:translateY(-6px)}.card:focus-visible{outline:2px solid var(--fg);outline-offset:4px}.card p{font-size:14px;line-height:1.6}.card .go{letter-spacing:2px;margin-top:10px;font-size:13px}.motif{background:#ffffff08;border:1px solid #ffffff0f;border-radius:16px;justify-content:center;align-items:center;width:100%;height:130px;margin:auto 0;transition:transform .3s;display:flex}.card:hover .motif,.card:focus-visible .motif{transform:scale(1.05)}.card h2{margin-top:22px}.card.acid{background:var(--acid-bg);border:1px solid var(--acid-line);font-family:JetBrains Mono,Consolas,monospace}.card.acid:hover{box-shadow:0 18px 50px #1fe0c21f}.card.acid h2{color:var(--teal);letter-spacing:4px;font-size:24px}.card.acid p{color:#aab1b1}.card.acid .go{color:var(--teal)}.motif.seq{grid-template-columns:repeat(4,26px);place-content:center;gap:7px;display:grid}.motif.seq span{border:1px solid var(--acid-line);background:#10151b;height:26px}.motif.seq span.on{background:var(--teal);border-color:var(--teal)}.motif.seq span.hot{background:#f36;border-color:#f36}.card.loom{background:radial-gradient(120% 100% at 50% 0%, var(--ink-bg) 0%, #0d0b16 100%);border:1px solid var(--ink-line);font-family:Georgia,Iowan Old Style,serif}.card.loom:hover{box-shadow:0 18px 50px #b48cff24}.card.loom h2{color:var(--milk);font-size:28px;font-style:italic;font-weight:400}.card.loom p{color:#8d84a6}.card.loom .go{color:var(--violet);font-style:italic}.card.loom svg{width:min(220px,70%);height:auto}.card.loom .thread{filter:drop-shadow(0 0 6px var(--violet))}.card.loom .spark{filter:drop-shadow(0 0 5px)}.card.orbit{background:#090d1a;border:1px solid #232c48}.card.orbit:hover{box-shadow:0 18px 50px #e8a8521f}.card.orbit h2{color:#e7ecf7;letter-spacing:9px;font-size:22px;font-weight:200}.card.orbit p{color:#5d6785}.card.orbit .go{color:#e8a852;font-weight:300}.card.orbit svg{width:min(200px,65%);height:auto}.card.orbit .sun{filter:drop-shadow(0 0 6px #e8a852)}.card.rain{background:linear-gradient(#131920,#0a0d10);border:1px solid #1e2831}.card.rain:hover{box-shadow:0 18px 50px #9fd8e81a}.card.rain h2{color:#dfe8ee;letter-spacing:7px;font-size:22px;font-weight:300}.card.rain p{color:#5f7280}.card.rain .go{color:#d9a066}.card.rain svg{width:min(200px,65%);height:auto}.card.rain .brass{filter:drop-shadow(0 0 5px #d9a066)}.card.cells{background:#000;border:1px solid #4a4a48;font-family:JetBrains Mono,Consolas,monospace}.card.cells:hover{box-shadow:0 18px 50px #ff2d3f1f}.card.cells h2{color:#e9e6e0;letter-spacing:7px;font-size:20px}.card.cells p{color:#6f6f6d}.card.cells .go{color:#ff2d3f}.motif.grid-c{grid-template-columns:repeat(6,20px);place-content:center;gap:4px;display:grid}.motif.grid-c span{background:#111;height:20px}.motif.grid-c span.w{background:#e9e6e0}.motif.grid-c span.r{background:#ff2d3f}.card.eel{background:radial-gradient(120% 100% at 50% 0,#131807 0%,#0c0f04 100%);border:1px solid #232b12}.card.eel:hover{box-shadow:0 18px 50px #d8ff3e24}.card.eel h2{color:#d8ff3e;letter-spacing:8px;font-size:22px;font-weight:800}.card.eel p{color:#6d7a48}.card.eel .go{color:#d8ff3e}.card.eel svg{width:min(200px,65%);height:auto}.card.eel .eelbody{filter:drop-shadow(0 0 7px #d8ff3e)}.card.eel .eelhead{filter:drop-shadow(0 0 6px #f4ffb0)}.card.rave{background:radial-gradient(120% 100% at 50% 20%,#170a10 0%,#0b0508 100%);border:1px solid #2e1622}.card.rave:hover{box-shadow:0 18px 50px #ff2d6f29}.card.rave h2{color:#ff2d6f;letter-spacing:11px;font-size:21px;font-weight:900}.card.rave p{color:#6e4a5c}.card.rave .go{color:#ff2d6f;font-weight:800}.card.rave svg{width:min(200px,65%);height:auto}.card.rave .strobe{filter:drop-shadow(0 0 8px #ff2d6f)}.card.ridge{background:linear-gradient(#241118,#0d0709);border:1px solid #3a2028}.card.ridge:hover{box-shadow:0 18px 50px #ff8c4221}.card.ridge h2{color:#ffd9a0;letter-spacing:10px;font-size:20px;font-weight:800}.card.ridge p{color:#8a6f63}.card.ridge .go{color:#ff8c42;font-weight:700}.card.ridge svg{width:min(200px,65%);height:auto}.card.ridge .skyline{filter:drop-shadow(0 0 6px #ff8c42)}.card.ridge .rider{filter:drop-shadow(0 0 6px #ffd9a0)}.card.swing{background:linear-gradient(#f7f4ee,#e9e3d8);border:1px solid #d8d2c6;font-family:Georgia,Iowan Old Style,serif}.card.swing:hover{box-shadow:0 18px 50px #b0813f40}.card.swing .motif{background:#2a27210a;border-color:#2a272114}.card.swing h2{color:#2a2721;font-size:26px;font-style:italic;font-weight:400}.card.swing p{color:#97907f}.card.swing .go{color:#b0813f;font-style:italic}.card.swing svg{width:min(200px,65%);height:auto}.card.swing .bob{filter:drop-shadow(0 2px 3px #2a27214d)}.card.swarm{background:radial-gradient(120% 100% at 50% 0,#07211a 0%,#04100c 100%);border:1px solid #12352a}.card.swarm:hover{box-shadow:0 18px 50px #7dffcf1f}.card.swarm h2{color:#7dffcf;letter-spacing:6px;font-size:22px;font-weight:300}.card.swarm p{color:#3f6f5e}.card.swarm .go{color:#7dffcf}.card.swarm svg{width:min(200px,65%);height:auto}.card.swarm .fish{filter:drop-shadow(0 0 4px #7dffcf)}.card.tide{background:linear-gradient(#0a1c22,#04141a);border:1px solid #16333a}.card.tide:hover{box-shadow:0 18px 50px #bfe8dc1a}.card.tide h2{color:#bfe8dc;letter-spacing:8px;font-size:22px;font-weight:300}.card.tide p{color:#4e7a72}.card.tide .go{color:#bfe8dc;font-weight:300}.card.tide svg{width:min(200px,65%);height:auto}.card.tide .breath{filter:drop-shadow(0 0 6px #bfe8dc)}.card.bowls{background:radial-gradient(120% 100% at 50% 0,#1a120c 0%,#0e0906 100%);border:1px solid #3a2a1a}.card.bowls:hover{box-shadow:0 18px 50px #c98d4a24}.card.bowls h2{color:#e8c9a0;letter-spacing:8px;font-size:22px;font-weight:300}.card.bowls p{color:#7a6248}.card.bowls .go{color:#c98d4a}.card.bowls svg{width:min(200px,65%);height:auto}.card.bowls .bowl{filter:drop-shadow(0 0 6px #c98d4a)}.card.sand{background:linear-gradient(#efe7d3,#ddd2b6);border:1px solid #d1c5a8}.card.sand:hover{box-shadow:0 18px 50px #6b645947}.card.sand .motif{background:#3a32260d;border-color:#3a322614}.card.sand h2{color:#3a3226;letter-spacing:9px;font-size:22px;font-weight:300}.card.sand p{color:#a3977c}.card.sand .go{color:#6b6459}.card.sand svg{width:min(200px,65%);height:auto}.card.sand .stone{filter:drop-shadow(0 3px 4px #3a322659)}.card.lanterns{background:linear-gradient(#11142c,#050614);border:1px solid #1d2240}.card.lanterns:hover{box-shadow:0 18px 50px #ffb06624}.card.lanterns h2{color:#ffb066;letter-spacing:7px;font-size:22px;font-weight:300}.card.lanterns p{color:#545a7d}.card.lanterns .go{color:#ffb066}.card.lanterns svg{width:min(200px,65%);height:auto}.card.lanterns .lamp{filter:drop-shadow(0 0 8px #ffb066)}.card.om{background:radial-gradient(120% 100% at 50% 40%,#171008 0%,#0d0a08 100%);border:1px solid #2b2118}.card.om:hover{box-shadow:0 18px 50px #ff993324}.card.om h2{color:#f93;letter-spacing:12px;font-size:22px;font-weight:300}.card.om p{color:#6e5c48}.card.om .go{color:#f93}.card.om svg{width:min(200px,65%);height:auto}.card.om .omring{filter:drop-shadow(0 0 7px #f93)}footer{text-align:center;letter-spacing:2px;color:var(--dim);margin-top:40px;font-size:11px}@media (width<=760px){body{padding-top:34px}.card{min-height:240px}header{margin-bottom:28px}.card.featured{flex-direction:column;justify-content:flex-end;display:flex}.card.featured .motif{width:100%;height:130px;min-height:130px;margin:auto 0}.card.featured h2{margin-top:22px}}@media (prefers-reduced-motion:no-preference){@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}header,.card{animation:.7s ease-out both rise}.card.featured{animation-delay:80ms}.grid .card:first-child{animation-delay:.16s}.grid .card:nth-child(2){animation-delay:.24s}.grid .card:nth-child(3){animation-delay:.32s}.grid .card:nth-child(4){animation-delay:.4s}.grid .card:nth-child(5){animation-delay:.48s}.grid .card:nth-child(6){animation-delay:.56s}.grid .card:nth-child(7){animation-delay:.64s}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}body:before{animation:11s ease-in-out infinite breathe}body:after{animation:13s ease-in-out 2s infinite breathe}@keyframes stepPulse{0%,74%,to{opacity:1}78%,92%{opacity:.25}}.motif.seq span.on{animation:1.6s step-end infinite stepPulse}.motif.seq span.on:nth-of-type(2){animation-delay:0s}.motif.seq span.on:nth-of-type(4){animation-delay:.2s}.motif.seq span.on:nth-of-type(7){animation-delay:.4s}.motif.seq span.hot{animation-delay:.6s}.motif.seq span.on:nth-of-type(9){animation-delay:.8s}.motif.seq span.on:nth-of-type(12){animation-delay:1s}.motif.seq span.on:nth-of-type(14){animation-delay:1.2s}@keyframes flow{to{stroke-dashoffset:-34px}}.card.loom .thread{stroke-dasharray:26 8;animation:2.2s linear infinite flow}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.3}}.card.loom .spark{animation:1.8s ease-in-out infinite twinkle}.card.loom .spark.s2{animation-delay:.5s}.card.loom .spark.s3{animation-delay:1.1s}@keyframes spin{to{transform:rotate(360deg)}}.card.orbit .orbiting{transform-origin:110px 45px;animation:16s linear infinite spin}@keyframes sunGlow{0%,to{opacity:1}50%{opacity:.6}}.card.orbit .sun{animation:4s ease-in-out infinite sunGlow}@keyframes fall{0%{opacity:0;transform:translateY(-12px)}15%{opacity:1}85%{opacity:1}to{opacity:0;transform:translateY(58px)}}.card.rain .d{animation:1.5s linear infinite fall}.card.rain .d2{animation-delay:.5s}.card.rain .d3{animation-delay:1s}@keyframes tick{0%,to{opacity:1}50%{opacity:.15}}.motif.grid-c span.r{animation:1.2s step-end infinite tick}.motif.grid-c span.w:nth-of-type(3){animation:2.4s step-end .6s infinite tick}.motif.grid-c span.w:nth-of-type(11){animation:2.4s step-end 1.4s infinite tick}@keyframes pop{0%{transform:scale(1)}55%{transform:scale(1.1)}to{transform:scale(1.05)}}.card:hover .motif{animation:.4s pop}.motif.seq span.on,.card.loom .thread,.card.loom .spark,.card.orbit .orbiting,.card.orbit .sun,.card.rain .d,.motif.grid-c span.r,.motif.grid-c span.w{animation-play-state:paused}.card:hover .motif.seq span.on,.card.loom:hover .thread,.card.loom:hover .spark,.card.orbit:hover .orbiting,.card.orbit:hover .sun,.card.rain:hover .d,.card.cells:hover .motif.grid-c span.r,.card.cells:hover .motif.grid-c span.w,.card:focus-visible .motif.seq span.on,.card.loom:focus-visible .thread,.card.loom:focus-visible .spark,.card.orbit:focus-visible .orbiting,.card.orbit:focus-visible .sun,.card.rain:focus-visible .d,.card.cells:focus-visible .motif.grid-c span.r,.card.cells:focus-visible .motif.grid-c span.w{animation-play-state:running}}
