:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{width:100%;height:100vh;overflow:hidden}.container{position:relative;min-height:100vh;width:100vw;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:6vw;box-sizing:border-box;transition:filter .3s ease}.container.blurred{filter:blur(8px)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,2vw,16px);width:95%;box-sizing:border-box}.background{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none}.gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,#1a0f24,#0d0d1b);z-index:0}.stars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.card{width:100%;aspect-ratio:2 / 3;background:transparent;perspective:1000px;box-sizing:border-box;opacity:0;animation:cardAppear .8s ease-out forwards,cardFloat 4s ease-in-out .8s infinite;cursor:pointer}.card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .8s;transform-style:preserve-3d;border-radius:clamp(4px,1vw,12px);box-shadow:0 0 clamp(6px,1.5vw,12px) #ffdc964d}.card.viewing{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)!important;width:clamp(200px,25vw,300px);z-index:9999;animation:none!important;opacity:1!important;pointer-events:none}.card.viewing .card-inner{animation:flipAndZoom 1s ease-out forwards;box-shadow:0 0 50px #00000080}@keyframes flipAndZoom{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(90deg) scale(1.1)}to{transform:rotateY(180deg) scale(1.25)}}.card.selected{position:fixed;width:clamp(120px,15vw,180px);bottom:20px;z-index:1000;animation:none!important;transition:all .8s ease;opacity:1!important}.card.selected .card-inner{transform:rotateY(180deg) scale(1);box-shadow:0 0 20px #ffdc96}.card:hover:not(.viewing):not(.selected) .card-inner{transform:translateY(-10px) scale(1.05);box-shadow:0 0 clamp(12px,3vw,24px) #ffdc96}.card-front,.card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:clamp(4px,1vw,12px);overflow:hidden}.card-front{background-color:#fff}.card-back{background:#000;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}.card-back img{width:100%;height:100%;display:block;object-fit:contain}.card-back-content{color:#fff;text-align:center}.card-back-content h3{margin:0;font-size:clamp(16px,2vw,24px);font-weight:600;text-shadow:0 0 10px rgba(0,0,0,.5)}.card-back-content p{margin:10px 0 0;font-size:clamp(24px,4vw,48px)}@keyframes cardAppear{0%{opacity:0;transform:translateY(50px) scale(.95) rotateX(-15deg) rotateY(10deg)}60%{opacity:1;transform:translateY(5px) scale(1.02) rotateX(2deg) rotateY(-2deg)}to{opacity:1;transform:translateY(0) scale(1) rotateX(0) rotateY(0)}}@keyframes cardFloat{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(3px,-3px) rotate(.5deg)}50%{transform:translate(-2px,2px) rotate(0)}75%{transform:translate(-3px,-2px) rotate(-.5deg)}}.card-front img{width:100%;height:100%;display:block;object-fit:cover}.overlay{position:fixed;inset:0;background:#000000b3;z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s ease}.overlay.active{opacity:1;pointer-events:all}.card-preview{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(200px,25vw,300px);aspect-ratio:2 / 3;z-index:9999;pointer-events:none}.card-preview .card-inner{border-radius:clamp(4px,1vw,12px);box-shadow:0 0 clamp(10px,2vw,24px) #00000080;opacity:0;will-change:transform,opacity;animation:previewEnter .9s ease-out forwards}@keyframes previewEnter{0%{transform:rotateY(0) scale(1);opacity:0}50%{opacity:.5}to{transform:rotateY(180deg) scale(1.25);opacity:1}}.portal-container{margin-top:clamp(20px,4vw,40px);display:flex;justify-content:center;align-items:center;width:100%}.portal-svg{width:clamp(250px,40vw,400px);height:auto;filter:drop-shadow(0 0 10.6402px rgb(255,107,26)) drop-shadow(0 0 18.7718px rgb(255,170,68));animation:portalGlow 2s ease-in-out 4.2s infinite}.portal-path{fill:none;stroke:#ff6b1a;stroke-width:2;stroke-dasharray:610.082;stroke-dashoffset:610.082;animation:portalDraw 2s ease-out 2.2s forwards}.portal-text{fill:#fff;font-size:18px;font-weight:600;opacity:0;text-shadow:0 0 10px rgba(255,107,26,.8),0 0 20px rgba(255,170,68,.6),0 0 30px rgba(255,107,26,.4);animation:fadeIn 1s ease-out 3.7s forwards}@keyframes portalDraw{0%{stroke-dashoffset:610.082;opacity:0}to{stroke-dashoffset:0;opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes portalGlow{0%,to{filter:drop-shadow(0 0 10.6402px rgb(255,107,26)) drop-shadow(0 0 18.7718px rgb(255,170,68))}50%{filter:drop-shadow(0 0 16px rgb(255,107,26)) drop-shadow(0 0 28px rgb(255,170,68))}}