@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow-x:hidden}.bg-pattern{z-index:-1;--color:#7272724d;background-color:#191a1a;background-image:linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent), linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);background-size:55px 55px;width:100vw;height:100vh;position:fixed;top:0;left:0}header{justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:1.5rem 3rem;display:flex}.header-left{align-items:center;gap:2rem;display:flex}.title-img{object-fit:contain;height:50px}.header-right{align-items:center;gap:clamp(2px,1.5vw,1.5rem);display:flex}.input{color:#fff;outline-offset:3px;background-color:#28282d;border:0;border-radius:10px;outline:2px solid #febf00;width:220px;padding:10px 1rem;font-family:monospace;transition:all .25s}.input::placeholder{color:#a0a0a0}.input:focus{outline-offset:5px;background-color:#191a1a}main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 3rem}.btn{color:#d4af37;letter-spacing:.1em;cursor:pointer;z-index:1;background:0 0;border:0;outline:none;padding:.65em .95em;font-family:monospace;font-size:15.5px;font-weight:700;text-decoration:none;display:block}.cube{transition:all .5s;position:relative}.cube .bg-top{background:#d4af37;height:10px;margin:0;transition:all .4s;position:absolute;bottom:100%;left:5px;right:-5px;transform:skew(-45deg)}.cube .bg-top .bg-inner{bottom:0}.cube .bg{background:#d4af37;transition:all .4s;position:absolute;inset:0}.cube .bg-right{z-index:0;background:#d4af37;width:10px;transition:all .4s;position:absolute;top:-5px;bottom:5px;left:100%;transform:skewY(-45deg)}.cube .bg-right .bg-inner{left:0}.cube .bg-inner{background:#28282d;position:absolute;inset:2px}.cube .text{transition:all .4s;position:relative}.cube:hover .bg-inner{background:#d4af37;transition:all .4s}.cube:hover .text{color:#28282d;transition:all .4s}.cube:hover .bg-right,.cube:hover .bg,.cube:hover .bg-top{background:#28282d}.cube:active{z-index:9999;animation:.1s linear bounce}@keyframes bounce{50%{transform:scale(.9)}}.section-title{background:linear-gradient(90deg,#9f9f9f 0,#fff 10%,#868686 20%) 0;-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:2.5rem;font-weight:700;animation:3s linear infinite forwards shine}@keyframes shine{0%{background-position:0}60%{background-position:400px}to{background-position:400px}}.intro-container{margin-bottom:4rem}.intro-text h2{margin-bottom:.5rem;font-size:2rem;font-weight:600}.intro-text .skill-text{color:#d4af37;margin-bottom:1.5rem;font-size:1.2rem;display:inline-block}.intro-text p.desc{color:#ccc;font-size:1.1rem;line-height:1.6}.works-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));justify-items:center;gap:2rem;display:grid}.card{perspective:1000px;background-color:#f2f2f2;border-radius:10px;justify-content:center;align-items:center;width:300px;height:200px;transition:all .6s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 5px #ffffff80}.card img.card__image{object-fit:cover;width:100%;height:100%;transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card:hover{transform:scale(1.05);box-shadow:0 8px 16px #fff3}.card__content{box-sizing:border-box;transform-origin:bottom;background-color:#f2f2f2f2;flex-direction:column;justify-content:center;width:100%;height:100%;padding:20px;transition:all .6s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;top:0;left:0;transform:rotateX(-90deg)}.card:hover .card__content{transform:rotateX(0)}.card__title{color:#333;margin:0;font-size:24px;font-weight:700}.card:hover img.card__image{opacity:.2;scale:.8}.card__description{color:#555;max-height:100px;margin:10px 0 0;font-size:14px;line-height:1.4;overflow-y:auto}#loading-state{text-align:center;color:#d4af37;padding:2rem;font-size:1.2rem}@media (width<=768px){header{flex-direction:column;gap:1rem;padding:1rem}.header-left,.header-right{flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:100%}.input{width:100%;max-width:300px}main{padding:1.5rem 1rem}.section-title{text-align:center;font-size:2rem}.intro-text{text-align:center}.works-grid{grid-template-columns:1fr}.card{width:100%;max-width:350px}}