:root{--midnight: #1e272e;--bg: #f2f5f8;--blue: #3498db;--orange: #f39c12;--mint: #2ecc71;--berry: #e84393;--white: #ffffff;--brutal-shadow: 8px 8px 0px var(--midnight)}body{font-family:Inter,sans-serif;background-color:var(--bg);background-image:radial-gradient(var(--midnight) .5px,transparent .5px);background-size:30px 30px;margin:0;padding:0;color:var(--midnight);overflow-x:hidden}.wrapper{max-width:1000px;margin:0 auto;padding:80px 20px}h1{font-size:58px;font-weight:900;line-height:.9;margin:0;text-transform:uppercase;letter-spacing:-2px}.sub{font-family:Space Mono,monospace;background:var(--midnight);color:#fff;padding:5px 12px;display:inline-block;margin-top:15px;border-radius:4px;font-size:14px}.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}.card{background:var(--white);border:3px solid var(--midnight);border-radius:12px;padding:25px 30px;box-shadow:var(--brutal-shadow);display:flex;flex-direction:column;transition:all .2s ease}.card-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:30px}.card-text{flex:1}.card-text h2{margin:0 0 8px;font-size:24px;font-weight:900}.card-text p{margin:0;color:#4b5563;font-size:15px;line-height:1.5}.card-actions{display:flex;gap:15px;align-items:stretch}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border:3px solid var(--midnight);border-radius:8px;text-decoration:none;text-align:center;font-weight:900;font-size:14px;text-transform:uppercase;box-shadow:4px 4px 0 var(--midnight);cursor:pointer;background:transparent;transition:all .1s}.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--midnight)}.btn-blue{background:var(--blue);color:#fff;cursor:grab}.btn-orange{background:var(--orange);color:var(--midnight);cursor:grab}.btn-mint{background:var(--mint);color:var(--midnight);cursor:grab}.btn-berry{background:var(--berry);color:#fff;cursor:grab}.card-gif{margin-top:25px;border-top:3px dashed var(--midnight);padding-top:25px;text-align:center;animation:slideDown .3s ease-out forwards}.card-gif img,.card-gif video{max-width:400px;width:100%;border:3px solid var(--midnight);border-radius:8px;box-shadow:4px 4px 0 var(--midnight);display:inline-block}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.card-header{flex-direction:column;align-items:flex-start}.card-actions{width:100%;margin-top:15px}}.btn-expand{background:var(--white);color:var(--midnight);padding:0 16px}.btn-expand:hover{background:var(--bg)}.btn-expand svg{width:24px;height:24px}.card-expanded{margin-top:25px;border-top:3px dashed var(--midnight);padding-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:30px;animation:slideDown .3s ease-out forwards}.media-col img,.media-col video{width:100%;max-width:100%;border:3px solid var(--midnight);border-radius:8px;box-shadow:4px 4px 0 var(--midnight);display:block}.no-media{height:100%;min-height:150px;display:flex;align-items:center;justify-content:center;border:3px dashed var(--midnight);border-radius:8px;background:var(--bg);color:#4b5563;font-weight:700;text-transform:uppercase}.code-col{background:var(--midnight);border-radius:8px;padding:20px;overflow-x:auto;overflow-y:auto;max-height:400px;box-shadow:4px 4px 0 var(--blue)}.code-col pre,.code-col code{margin:0;font-family:Space Mono,monospace;font-size:12px;line-height:1.5;color:var(--mint);white-space:pre-wrap}@media(max-width:900px){.card-expanded{grid-template-columns:1fr}}.geode-wrap{position:fixed;top:-100px;right:-100px;width:500px;height:500px;z-index:-1;pointer-events:none}@keyframes float-s1{0%,to{transform:translate(0) rotate(12deg)}50%{transform:translate(15px,-20px) rotate(14deg)}}@keyframes float-s3{0%,to{transform:translate(0) rotate(25deg)}50%{transform:translate(-20px,15px) rotate(22deg)}}@keyframes float-s2{0%,to{transform:translate(0) rotate(-8deg)}50%{transform:translate(10px,10px) rotate(-10deg)}}.floating-1{animation:float-s1 10s ease-in-out infinite}.floating-2{animation:float-s3 14s ease-in-out infinite}.floating-3{animation:float-s2 8s ease-in-out infinite}.shape{position:absolute;border:4px solid var(--midnight);border-radius:16px;box-shadow:12px 12px 0 var(--midnight);transition:top .7s cubic-bezier(.16,1,.3,1),right .7s cubic-bezier(.16,1,.3,1);will-change:transform,top,right}.s1{width:350px;height:350px;background:var(--blue)}.s2{width:280px;height:180px;background:var(--orange)}.s3{width:200px;height:200px;background:transparent;border:6px dashed var(--midnight);box-shadow:none}