.menu-button{position:fixed;top:24px;left:24px;z-index:200;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:#fff9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:24px;color:#6b5e7a;cursor:pointer}.menu-overlay{position:fixed;inset:0;z-index:150;background:#0000001a}.side-panel{position:fixed;top:0;left:0;height:100vh;width:300px;z-index:200;padding:40px;background:#fffaf5eb;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:0 30px 30px 0;transform:translate(-100%);transition:.3s ease}.side-panel.open{transform:translate(0)}.close-button{position:absolute;right:25px;top:25px;border:none;background:none;font-size:20px}.side-panel h2{margin-top:40px;color:#6b5e7a;font-size:30px}.side-panel p{color:#8b8195;margin-bottom:30px}.side-panel nav{display:flex;flex-direction:column;gap:12px}.side-panel nav a{display:flex;align-items:center;gap:15px;padding:15px;border-radius:18px;text-decoration:none;color:#756b7c}.side-panel nav a:hover{background:#fff}.side-panel footer{margin-top:auto;padding-top:200px}.tech-page{min-height:100vh;padding:80px 40px;background:linear-gradient(180deg,#dfe8d5,#fffaf5,#f7f3ff)}.tech-container{max-width:1100px;margin:auto}.tech-header{text-align:center;margin-bottom:70px}.tech-header h1{font-size:3rem;font-weight:600;color:#6b5e7a}.tech-links{display:flex;justify-content:center;gap:22px;margin:24px 0}.tech-links a{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:#fffaf5cc;border:1px solid rgba(180,150,130,.25);color:#6b5e7a;font-size:1.9rem;text-decoration:none;box-shadow:0 10px 25px #6b5e7a1f;transition:transform .3s ease,box-shadow .3s ease,color .3s ease,background .3s ease}.tech-links a:hover{transform:translateY(-5px) scale(1.08);color:#9b72b6;background:#fff;box-shadow:0 18px 35px #6b5e7a33}.tech-header p{margin-top:1px;color:#8b8195;font-size:1.1rem}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px}.project-card{text-decoration:none;color:inherit;background:#fffaf5bf;border:1px solid rgba(180,150,130,.25);border-radius:28px;padding:18px;box-shadow:0 15px 35px #6b5e7a1f;transition:transform .3s ease,box-shadow .3s ease}.project-card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 25px 45px #6b5e7a33}.project-image{height:220px;overflow:hidden;border-radius:22px;background:#eee5da;border:1px solid rgba(180,150,130,.2)}.project-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.project-card:hover img{transform:scale(1.08)}.project-info{padding:22px 10px 10px}.project-info h2{color:#4b4453;font-size:1.35rem;font-weight:600}.project-info p{margin-top:12px;color:#7a7285;line-height:1.6}.art-page{min-height:100vh;padding:80px 30px;background:#fcfbf8}.art-container{max-width:1200px;margin:auto}.art-header{text-align:center;margin-bottom:50px}.art-header h1{color:#262626;font-size:3rem;font-weight:600}.art-header p{color:#777;margin-top:15px;font-size:1.1rem}.art-socials{display:flex;justify-content:center;gap:18px;margin:25px 0}.art-socials a{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#262626;font-size:1.6rem;text-decoration:none;border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 20px #00000014;transition:transform .3s ease,box-shadow .3s ease,color .3s ease}.art-socials a:hover{transform:translateY(-5px);color:#a98c67;box-shadow:0 15px 30px #00000026}.art-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:35px}.art-filters button{border:none;background:#f1eee8;color:#555;padding:10px 22px;border-radius:30px;cursor:pointer;font-size:.95rem;transition:.25s ease}.art-filters button:hover{background:#e7dfd2}.art-filters .active{background:#23395d;color:#fff}.art-grid{columns:4 250px;column-gap:25px}.art-piece{break-inside:avoid;margin-bottom:25px;cursor:pointer;overflow:hidden;border-radius:18px;background:#f7f3ec;position:relative}.art-piece img,.art-piece video{width:100%;display:block;border-radius:18px;background:#f7f3ec;transition:transform .3s ease,box-shadow .3s ease}.art-piece video{object-fit:contain;object-position:center;aspect-ratio:4 / 3}.art-piece:hover img,.art-piece:hover video{transform:translateY(-5px);box-shadow:0 15px 35px #0000001f}.art-piece:has(video):after{content:"▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffffd9;color:#23395d;font-size:1.2rem;pointer-events:none;opacity:0;transition:.3s ease}.art-piece:hover:after{opacity:1}.art-modal{position:fixed;inset:0;background:#000000a6;display:flex;justify-content:center;align-items:center;padding:25px;z-index:1000}.modal-content{max-width:850px;max-height:90vh;overflow:auto;background:#fff;border-radius:25px;padding:25px;box-shadow:0 25px 60px #00000040}.modal-content img,.modal-content video{width:100%;border-radius:15px}.modal-content video{background:#f7f3ec}.modal-content h2{margin-top:20px;color:#262626}.modal-content p{color:#666;line-height:1.7}@media (max-width:700px){.art-page{padding:70px 18px}.art-header h1{font-size:2.3rem}.art-header p{font-size:1rem}.art-socials{margin:20px 0}.art-socials a{width:46px;height:46px;font-size:1.4rem}.art-grid{columns:2 150px;column-gap:15px}.art-piece{margin-bottom:15px}.modal-content{padding:18px;border-radius:20px}}.about-page{min-height:100vh;padding:80px 24px;background-color:#fff9d9;background-image:linear-gradient(rgba(55,72,110,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(55,72,110,.08) 1px,transparent 1px);background-size:32px 32px}.about-container{max-width:700px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:32px}.about-title{color:#23395d;font-size:3rem;font-weight:700;text-align:center;margin-bottom:10px}.about-photo{width:240px;height:240px;border-radius:28px;overflow:hidden;background:#e8e8e8;border:3px solid #23395d;box-shadow:0 18px 40px #23395d26}.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%)}.about-socials{display:flex;justify-content:center;gap:18px;margin-top:-10px}.about-socials a{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffffd9;border:1px solid rgba(35,57,93,.15);color:#23395d;font-size:1.6rem;text-decoration:none;box-shadow:0 8px 20px #23395d1f;transition:transform .3s ease,box-shadow .3s ease,color .3s ease}.about-socials a:hover{transform:translateY(-5px);color:#a98c67;box-shadow:0 15px 30px #23395d33}.about-card{width:100%;background:#ffffffd1;border:2px solid rgba(35,57,93,.18);border-radius:26px;padding:28px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 12px 30px #23395d14}.about-card h2{color:#23395d;text-align:center;font-size:2rem;margin-bottom:-10px}.about-card h2 span{color:#c88b55}.about-card h3{text-align:center;color:#23395d;margin-bottom:0;font-size:1.1rem;font-weight:500;font-style:italic}.about-card p{color:#4f5d73;line-height:1.8;font-size:1.05rem}.timeline{display:flex;flex-direction:column;gap:26px}.timeline-item{padding-left:20px;border-left:4px solid #23395d;position:relative}.timeline-item:before{content:"";width:12px;height:12px;background:#23395d;border-radius:50%;position:absolute;left:-8px;top:6px}.timeline-item h4{color:#23395d;margin-bottom:4px;font-size:1.1rem}.timeline-item span{display:block;color:#8b8195;margin-bottom:10px;font-size:.95rem}.timeline-item p{margin:0}.timeline-item a{color:#23395d;font-weight:600}.timeline-item a:hover{color:#a98c67}.about-footer{width:100%;text-align:center;padding:24px;color:#23395d}.about-footer h3{margin-bottom:12px;font-size:1.7rem}.about-footer p{color:#4f5d73;line-height:1.8}@media (max-width:600px){.about-page{padding:70px 18px}.about-title{font-size:2.4rem}.about-photo{width:190px;height:190px}.about-socials a{width:46px;height:46px;font-size:1.4rem}.about-card{padding:22px}}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#b9ddf2;color:#fff;font-family:cochin}.home{position:relative;width:100vw;height:100vh;overflow:hidden;background:#b9ddf2;display:flex;align-items:center;justify-content:center}.intro{position:absolute;top:5%;left:50%;transform:translate(-50%);width:100%;text-align:center;color:#fff1d6;z-index:10;text-shadow:0 4px 15px rgba(80,120,140,.25)}.intro h1{font-size:3rem;margin:0}.intro p{font-size:1.2rem}canvas{position:absolute;inset:0;z-index:1}.home button,.home aside{position:fixed!important;z-index:200!important}
