*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(90deg,#e3f2fd 1px,#0000 0),linear-gradient(#e3f2fd 1px,#0000 0);background-color:#fefefe;background-size:20px 20px;color:#333;font-family:Indie Flower,cursive;line-height:1.6}.notebook-page{padding:20px}.notebook-page:before{background:linear-gradient(90deg,#e3f2fd 1px,#0000 0),linear-gradient(#e3f2fd 1px,#0000 0)}.section{margin:40px 0;padding:30px}.section-title{margin-bottom:20px;position:relative}.section-title:after{background:#4ecdc4;border-radius:2px;bottom:-5px;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);width:60px}.sketch-text{color:#2c3e50;font-size:1.1rem;line-height:1.8}.hand-drawn-border{border:2px solid #333;border-radius:15px;position:relative}.hand-drawn-border:before{border:1px dashed #666;border-radius:18px;bottom:-3px;content:"";left:-3px;pointer-events:none;position:absolute;right:-3px;top:-3px}.hero-section{padding:60px 30px}.hero-subtitle{color:#4ecdc4;font-family:Permanent Marker,cursive;font-size:1.8rem;margin:20px 0}.about-content{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>') 12 12,auto;margin:0 auto;max-width:800px;text-align:left}.timeline-container{margin:40px 0;position:relative}.timeline{align-items:center;display:flex;justify-content:space-between;padding:20px 0;position:relative}.timeline:before{background:linear-gradient(90deg,#ff6b6b,#4ecdc4,#45b7d1);border-radius:2px;content:"";height:3px;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:1}.timeline-item{align-items:center;background:#fff;border-radius:10px;box-shadow:3px 3px 0 #333;display:flex;flex-direction:column;padding:15px;position:relative;transform:rotate(-1deg);transition:transform .3s ease;z-index:2}.timeline-item:nth-child(2){transform:rotate(1deg)}.timeline-item:nth-child(3){transform:rotate(-1deg)}.timeline-item:hover{transform:rotate(0deg) translateY(-5px)}.timeline-icon{font-size:2rem;margin-bottom:10px}.timeline-title{color:#2c3e50;font-family:Permanent Marker,cursive;font-size:1.1rem;margin-bottom:5px;text-align:center}.timeline-description{color:#34495e;font-family:Indie Flower,cursive;font-size:.9rem;max-width:120px;text-align:center}.timeline-arrow{background:#fff;border-radius:50%;box-shadow:2px 2px 0 #333;color:#4ecdc4;font-size:1.5rem;font-weight:700;padding:5px;z-index:2}.tools-illustration{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin:40px 0}.tool-item{align-items:center;background:#ffffffe6;border:2px solid #333;border-radius:10px;box-shadow:3px 3px 0 #333;display:flex;flex-direction:column;padding:15px;transform:rotate(-2deg);transition:transform .3s ease}.tool-item:nth-child(2){transform:rotate(1deg)}.tool-item:nth-child(3){transform:rotate(-1deg)}.tool-item:nth-child(4){transform:rotate(2deg)}.tool-item:hover{transform:rotate(0deg) translateY(-3px)}.tool-icon{font-size:2rem;margin-bottom:8px}.tool-name{color:#2c3e50;font-family:Phitradesign Handwritten,cursive;font-size:.9rem;font-weight:700}.sticky-notes-about{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:40px 0}.sticky-note-about{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);border-radius:8px;box-shadow:3px 3px 0 #333;padding:20px;text-align:center;transform:rotate(-2deg);transition:all .3s ease}.sticky-note-about:nth-child(2){background:linear-gradient(135deg,#4ecdc4,#6ee7df);transform:rotate(1deg)}.sticky-note-about:nth-child(3){background:linear-gradient(135deg,#45b7d1,#67c9e1);transform:rotate(-1deg)}.sticky-note-about:nth-child(4){background:linear-gradient(135deg,#96ceb4,#b8e6c8);transform:rotate(2deg)}.sticky-note-about:hover{box-shadow:5px 5px 0 #333;transform:rotate(0deg) translateY(-5px)}.note-icon-small{font-size:1.5rem;margin-bottom:10px}.note-text{color:#fff;font-family:Indie Flower,cursive;font-size:1rem;font-weight:700;margin:0}.about-details{grid-gap:15px;gap:15px}.detail-item{align-items:center;background:#ffffffb3;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>') 12 12,auto;gap:10px;padding:10px}.detail-label{color:#2c3e50;font-family:Phitradesign Handwritten,cursive;font-weight:700;min-width:150px}.detail-value{color:#34495e}.skills-container{display:flex;flex-direction:column;gap:50px;margin-top:30px;position:relative}.skill-category-sketch{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><path d="M7 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7z"/><path d="M12 3v18"/><path d="M8 7h8"/><path d="M8 11h8"/><path d="M8 15h8"/></svg>') 12 12,auto;position:relative}.skill-category-title{font-family:Permanent Marker,cursive;font-size:1.8rem;margin-bottom:25px;position:relative;transform:rotate(-1deg)}.skill-cards{grid-gap:20px;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0 auto;max-width:800px}.skill-card{background:#ffffffe6;border:2px solid #333;border-radius:8px;box-shadow:3px 3px 0 #333;cursor:pointer;padding:20px;transform:rotate(-1deg)}.skill-card:nth-child(2n){transform:rotate(1deg)}.skill-card:hover{box-shadow:5px 5px 0 #333;transform:rotate(0deg) translateY(-10px)}.skill-card:hover .skill-note{opacity:1;transform:translateY(0)}.skill-name{font-family:Permanent Marker,cursive;font-size:1.1rem;margin-bottom:8px}.skill-note{color:#4ecdc4;font-family:Phitradesign Handwritten,cursive;font-size:.9rem;opacity:0;transform:translateY(10px);transition:all .3s ease}.connecting-line{background:#333;height:2px;margin:20px auto;position:relative;transform:rotate(-2deg);width:200px}.connecting-line:before{border-bottom:4px solid #0000;border-left:8px solid #333;border-top:4px solid #0000;content:"";height:0;position:absolute;right:-8px;top:-3px;width:0}.connecting-line:after{align-items:center;background:#fff;border:2px solid #333;border-radius:50%;content:"";display:flex;height:30px;justify-content:center;left:50%;position:absolute;top:-15px;transform:translateX(-50%);width:30px}.skill-category-sketch:before{border:1px dashed #bbb;border-radius:20px;bottom:-10px;content:"";left:-10px;opacity:.5;pointer-events:none;position:absolute;right:-10px;top:-10px}.notebook-container{display:flex;gap:40px;margin-top:30px;min-height:600px;position:relative}.notebook-page-left{background:#0000;border:2px solid #333;box-shadow:5px 5px 0 #333;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>') 12 12,auto;flex:1 1;padding:30px;transform:rotate(-1deg)}.project-details{display:flex;flex-direction:column;height:100%}.project-screenshot{border-radius:10px;box-shadow:3px 3px 0 #333;height:300px;margin-left:auto;margin-right:auto;overflow:hidden;width:500px}.project-screenshot img{display:block}.project-info{flex:1 1}.project-detail-title{font-family:Permanent Marker,cursive;margin-bottom:15px}.project-detail-description{color:#34495e;font-family:Indie Flower,cursive;margin-bottom:20px}.project-role{color:#4ecdc4;font-size:1rem;font-weight:700}.project-role,.project-tech-detail strong{font-family:Phitradesign Handwritten,cursive}.project-tech-detail strong{color:#2c3e50;display:block;margin-bottom:10px}.gallery-container{padding:10px 0}.gallery-container img{border:2px solid #ddd;border-radius:8px;cursor:pointer;height:80px;object-fit:cover;transition:transform .3s ease;width:120px}.gallery-container img:hover{transform:scale(1.1)}.gallery-container img.active{border:3px solid #4ecdc4;box-shadow:0 0 10px #4ecdc480}.project-actions{align-items:center;display:flex;justify-content:space-between;margin-top:auto}.project-card:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-5px)}.project-title{color:#2c3e50;font-family:Permanent Marker,cursive;font-size:1.4rem;margin-bottom:15px}.project-description{line-height:1.6;margin-bottom:20px}.project-tech{display:flex;flex-wrap:wrap;gap:8px}.tech-tag{background:#e8f4fd;border:1px solid #bdc3c7;border-radius:12px;color:#2980b9;font-family:Phitradesign Handwritten,cursive;font-weight:700;padding:4px 12px}.sns-links{margin-top:30px}.sns-icon-link{text-decoration:none;transition:transform .3s ease,opacity .3s ease}.sns-icon-link:hover{opacity:.8;transform:translateY(-3px) scale(1.1)}.sns-icon-img{height:32px;width:32px}@media (max-width:768px){.notebook-page{padding:10px}.section{margin:20px 0;padding:20px}.section-title{font-size:2rem}.hero-section{padding:40px 20px}.hero-subtitle{font-size:1.5rem}.skills-container{gap:30px}.skill-cards{gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.skill-card{padding:15px}.skill-category-title{font-size:1.5rem}.connecting-line{width:150px}.notebook-container{flex-direction:column;gap:20px}.notebook-page-left,.notebook-page-right{padding:20px;transform:none}.project-actions{align-items:stretch;flex-direction:column;gap:15px}.gallery-container img{height:70px;width:100px}.sns-links{gap:20px}.sns-icon-img{height:28px;width:28px}.detail-item{align-items:flex-start;flex-direction:column;gap:5px}.detail-label{min-width:auto}.timeline{flex-direction:column;gap:20px}.timeline:before{display:none}.timeline-arrow{transform:rotate(90deg)}.tools-illustration{gap:15px}.tool-item{padding:10px}.sticky-notes-about{gap:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.sticky-note-about{padding:15px}}.navbar{left:0;padding:25px 0;position:fixed;right:0;top:0;transition:background .3s ease;z-index:1000}.navbar.scrolled{background:#fff;border-bottom:2px solid #333;box-shadow:3px 3px 0 #333}.nav-container{justify-content:center;margin:0 auto;max-width:1200px;padding:0 20px}.nav-container,.nav-links{align-items:center;display:flex}.nav-links{gap:30px}.nav-link{align-items:center;border-radius:20px;color:#25282d;display:flex;flex-direction:row;font-family:Indie Flower,cursive;font-size:1.2rem;font-weight:900;gap:8px;padding:12px 20px;position:relative;text-decoration:none}.nav-icon,.nav-link{transition:all .3s ease}.nav-icon{height:20px;width:20px}.nav-line{bottom:0;height:auto;left:50%;margin-top:5px;max-width:70px;opacity:70%;position:absolute;transform:translateX(-50%);width:100%}.nav-link:hover{color:#2c3e50;transform:translateY(-2px)}.nav-link:hover .nav-icon{opacity:1;transform:scale(1.1)}.contact-social-container{grid-gap:60px;display:grid;gap:60px;grid-template-columns:1fr 1fr;margin:0 auto;max-width:1000px}.contact-left{max-width:none;text-align:left;width:100%}.social-right{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.social-title{color:#2c3e50;font-family:Permanent Marker,cursive;font-size:1.5rem;margin-bottom:30px}.contact-info{max-width:800px!important;min-height:300px;position:relative;width:100%}.contact-svg{height:100%!important;left:0;object-fit:contain;position:absolute;top:0;width:100%!important;z-index:1}.contact-content{display:flex;flex-direction:column;padding:40px;position:relative;z-index:2}.contact-text{color:#1d2124;font-size:1.1rem;line-height:1.6;margin-bottom:30px}.contact-details{display:flex;flex-direction:column;gap:0}.contact-item{justify-content:space-between;line-height:1;min-height:50px;padding:15px 0}.contact-item,.contact-label{align-items:center;display:flex}.contact-label{color:#1d2124;font-size:1rem;font-weight:700;margin:0;min-width:120px;padding:0}.contact-link,.contact-text{align-items:center;color:#1d2124;display:flex;font-weight:500;line-height:1;margin:0;padding:0;text-decoration:none;transition:color .3s ease}.contact-item:last-child{border-bottom:none;padding-bottom:0}.contact-link:hover{color:#0768a9;text-decoration:underline}.notebook-page{font-family:Indie Flower,cursive;min-height:100vh;padding:80px 20px 20px;position:relative}.notebook-page,.notebook-page:before{background:linear-gradient(90deg,#e6f3ff 1px,#0000 0),linear-gradient(#e6f3ff 1px,#0000 0);background-color:#fefefe;background-size:20px 20px}.notebook-page:before{bottom:0;content:"";left:0;opacity:.4;position:fixed;right:0;top:0;z-index:-1}.section{margin-bottom:60px;margin-left:auto;margin-right:auto;max-width:1200px;padding-left:40px;padding-right:40px}.section-title{color:#2c3e50;font-family:Permanent Marker,cursive;font-size:2.5rem;font-weight:700;margin-bottom:100px;text-align:center;text-shadow:2px 2px 4px #0000001a}.hero-section{align-items:center;display:flex;justify-content:center;padding:150px 40px;text-align:center}.hero-content{margin:0 auto;max-width:1200px}.hero-subtitle{color:#34495e;font-size:2.2rem;font-weight:600}.hero-subtitle,.sketch-text{font-family:Indie Flower,cursive;margin:25px 0}.sketch-text{color:#5a6c7d;font-size:1.3rem;line-height:1.6}.hero-buttons{display:flex;gap:12px;justify-content:center;margin-top:35px}.view-projects-btn{background:url(/portfolio-new/static/media/but1.621508cfbe2be9a2a413.svg) no-repeat 50%;background-size:100% 100%}.contact-btn,.hero-btn,.view-projects-btn{border:none;color:#000;display:inline-block;font-family:Permanent Marker,cursive;font-size:1rem;padding:12px 24px;position:relative;text-decoration:none;transition:all .3s ease}.contact-btn{background:url(/portfolio-new/static/media/but.8bcc2deb9bd6c8d78717.svg) no-repeat 50%;background-size:100% 100%}.contact-btn:hover,.view-projects-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.book-container{align-items:center;display:flex;justify-content:center;margin-bottom:30px;min-height:700px;overflow:hidden;position:relative}.questionnaire-book{box-shadow:0 0 30px 0 #0003;margin:0 auto;position:relative;z-index:100}.book-page{background-color:#f7f7f7;background-image:radial-gradient(circle,#d4d4d4 1px,#0000 0);background-size:20px 20px;border:none;border-radius:0;box-shadow:0 8px 16px #00000026,0 4px 8px #0000001a,0 2px 4px #00000014,inset 0 1px 3px #ffffffe6,inset 0 -1px 3px #0000001a,inset 1px 0 2px #0000000d,inset -1px 0 2px #0000000d;padding:30px;position:relative}.book-page:nth-child(odd){border:10px solid #5d5d5d;border-radius:25px 0 0 25px;border-right:none}.book-page:nth-child(2n){border:10px solid #5d5d5d;border-left:none;border-radius:0 25px 25px 0}.book-page:nth-child(odd):after{background:#5d5d5d;border-radius:40px 0 0 40px;bottom:-10px;content:"";height:calc(100% + 14px);left:-10px;pointer-events:none;position:absolute;top:-10px;width:10px;z-index:-1}.book-page:nth-child(odd):before{border-radius:40px 0 0 0;top:-10px}.book-page:nth-child(odd) .bottom-border,.book-page:nth-child(odd):before{background:#5d5d5d;content:"";height:10px;left:-10px;pointer-events:none;position:absolute;right:-10px;z-index:-1}.book-page:nth-child(odd) .bottom-border{border-radius:0 0 0 40px;bottom:-10px}.book-page:nth-child(2n):after{border-radius:0 40px 40px 0;bottom:-10px;height:calc(100% + 14px);width:10px;z-index:10}.book-page:nth-child(2n):after,.book-page:nth-child(2n):before{background:#5d5d5d;content:"";pointer-events:none;position:absolute;right:-10px;top:-10px}.book-page:nth-child(2n):before{border-radius:0 40px 0 0;height:10px;left:-10px;z-index:-1}.book-page:nth-child(2n) .bottom-border{border-radius:0 0 40px 0;height:10px;left:-10px;z-index:-1}.book-page:nth-child(2n) .bottom-border,.book-page:nth-child(2n) .right-border{background:#5d5d5d;bottom:-10px;content:"";pointer-events:none;position:absolute;right:-10px}.book-page:nth-child(2n) .right-border{border-radius:0 40px 40px 0;height:calc(100% + 14px);top:-10px;width:10px;z-index:15}.book-page:nth-child(odd) .left-border{background:#5d5d5d;border-radius:40px 0 0 40px;bottom:-10px;content:"";height:calc(100% + 14px);left:-10px;pointer-events:none;position:absolute;top:-10px;width:10px;z-index:25}.book-page:before{background:linear-gradient(135deg,#fff3,#0000001a),linear-gradient(45deg,#ffffff26,#0000 50%,#00000014),linear-gradient(90deg,#ffffff1a,#fff6 20%,#ffffff1a 50%,#00000014 80%,#00000026);border-radius:inherit;content:"";left:0;pointer-events:none;top:0}.book-page:before,.folded-corner{bottom:0;position:absolute;right:0}.folded-corner{border-color:#fffef8 #0000 #0000;border-radius:0 0 10px 0;border-style:solid;border-width:50px 50px 0 0;box-shadow:-3px -3px 6px #43434333,-1px -1px 3px #0000001a,inset 2px 2px 4px #ffffff4d;height:0;width:0;z-index:10}.cover-page{align-items:center;background:linear-gradient(135deg,#e7ecff,#f7efff);border:2px solid #5c5c5c;display:flex;height:100%;justify-content:center}.cover-title{color:#fff;font-family:Comic Sans MS,cursive,sans-serif;font-size:3rem;font-weight:700;margin:0;text-align:center}.page-content{display:flex;flex-direction:column;height:100%;justify-content:flex-start}.page-title{color:#0abacd;font-family:Permanent Marker,cursive;font-size:1.4rem;font-weight:700;margin-bottom:15px;text-align:center}.page-footer{margin-top:auto;padding-top:20px;text-align:center}.footer-text{color:#005a5c;font-family:Comic Sans MS,cursive,sans-serif;font-size:1rem;font-weight:700}.image-page{align-items:center;display:flex;height:100%;justify-content:center;padding:20px}.image-page img{border-radius:8px;box-shadow:0 4px 8px #0000001a;max-height:100%;max-width:100%;object-fit:contain}.about-content{line-height:1.6;padding:20px}.about-content p{color:#333;font-size:1.4rem;margin-bottom:15px}.questionnaire-item{align-items:center;display:flex;margin-bottom:15px}.question-marker{font-size:1rem;margin-right:10px;min-width:20px}.question-text{color:#29167d;font-weight:900;margin-right:8px}.answer-text,.question-text{font-family:Indie Flower,cursive;font-size:1.1rem}.answer-text{color:#000;font-weight:500;line-height:1.3}.about-details{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:30px}.detail-item{background:#f8f9fa;border-left:4px solid #007bff;border-radius:8px;display:flex;justify-content:space-between;padding:15px}.detail-label{color:#495057;font-weight:600}.detail-value{color:#6c757d}.skills-container{grid-gap:180px;display:grid;gap:180px;grid-template-columns:repeat(3,1fr);margin-top:140px;min-height:450px;padding-bottom:30px}.skill-category-container{overflow:visible;position:relative}.skills-svg{height:auto;left:-50%;object-fit:contain;position:absolute;top:0;width:200%;z-index:1}.skill-left .skills-svg{left:-90%}.skill-right .skills-svg{left:-10%}.skills-content{padding:40px;position:relative;z-index:2}.skill-category-title{border-bottom:1px solid #4c4d4e;color:#2c3e50;font-size:1.5rem;font-weight:700;margin-bottom:30px;padding-bottom:8px;text-align:center}.skill-left .skill-category-title{border-bottom:none;margin-left:-80px;position:relative;text-align:left}.skill-left .skill-category-title:after{background:#4c4d4e;bottom:0;content:"";height:1px;left:25%;position:absolute;transform:translateX(-50%);width:170px}.skill-left .skill-cards{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(2,1fr);margin-left:-190px}.skill-left .skill-card:last-child{grid-column:1/-1;justify-self:center}.skill-right .skill-category-title{border-bottom:none;margin-right:-80px;position:relative;text-align:right}.skill-right .skill-cards{margin-right:-180px}.skill-right .skill-category-title:after{background:#4c4d4e;bottom:0;content:"";height:1px;left:80%;position:absolute;transform:translateX(-50%);width:170px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skill-cards{grid-gap:20px 20px;grid-row-gap:0;display:grid;gap:20px 20px;grid-template-columns:repeat(3,1fr);row-gap:0}.skill-card{background:#0000;border:none;border-radius:6px;box-shadow:none;overflow:hidden;padding:8px 12px;position:relative;transition:all .3s ease}.skill-card:before{display:none}.skill-card:hover{border-color:#0000;box-shadow:none;transform:none}.skill-name{color:#2c3e50;display:block;font-size:.9rem;font-weight:700;margin-bottom:4px}.skill-note{color:#6c757d;font-size:.75rem;font-style:italic}.connecting-line{background:linear-gradient(180deg,#3498db,#e74c3c);margin:0 20px;min-height:200px;width:2px}.notebook-container{grid-gap:200px;display:grid;gap:200px;grid-template-columns:800px 600px;justify-items:center;margin:0 auto;max-width:1600px}.notebook-page-left{background:none;background-image:url(/portfolio-new/static/media/note.c405d653b6a264961613.svg);background-position:-50px 20%;background-repeat:no-repeat;background-size:90% 90%;box-shadow:none;margin-left:-90px;padding:20px 20px 20px 50px;transform:translateX(-100px);width:100%;z-index:0}.notebook-page-left,.notebook-page-right{border:none;border-radius:15px;justify-self:start;position:relative}.notebook-page-right{background:url(/portfolio-new/static/media/projectlist.bf7d71e16b371fbb4218.svg) no-repeat 10%;background-size:100% 100%;height:100%;margin-left:-500px;max-width:800px;overflow:hidden;padding:30px}.notebook-page-right .project-details{max-width:100%;overflow:hidden;transform:scale(.95);transform-origin:center}.notebook-page-right .project-detail-title{font-size:1.5rem;margin-bottom:12px;max-width:100%;text-align:center}.notebook-page-right .project-screenshot img{display:block;height:100%;margin:0 auto;object-fit:cover;width:100%}.notebook-page-right .gallery-container{align-items:center;display:flex;gap:8px;justify-content:center;max-width:100%}.notebook-page-right .gallery-image{height:60px;object-fit:cover;width:100px}.notebook-page-right .project-info{font-size:.85rem;margin-left:70px;max-width:80%;width:85%}.notebook-page-right .tech-tags .tech-tag{font-size:.75rem;margin:2px;padding:3px 6px}.notebook-page-right .project-actions{margin-top:25px;max-width:100%;padding:0 20px}.notebook-page-right .view-project-btn{font-size:1rem;margin-bottom:20px;margin-left:50px;margin-top:5px;max-width:90%;padding:12px 20px}.notebook-page-right .project-navigation{display:flex;gap:10px;justify-content:flex-start;max-width:100%;transform:translateX(-50px)}.notebook-page-right .next-btn,.notebook-page-right .previous-btn{font-size:.9rem;min-width:80px;padding:10px 18px;position:relative;z-index:1001}.notebook-tabs{display:flex;gap:5px;margin-bottom:15px;margin-left:150px;margin-top:100px;position:relative;z-index:10}.tab{background:#f8f9fa;border-radius:8px 8px 0 0;box-shadow:0 2px 5px #0000001a;color:#6c757d;cursor:pointer;font-size:.85rem;font-weight:900;padding:5px 12px}.tab.active{background:#87ceeb;color:#fff}.sticky-notes-grid{display:flex;flex-direction:column;gap:80px;margin-left:150px;position:relative;z-index:10}.project-card{height:30px;max-width:250px;position:relative;width:100%}.project-svg{background:#0000!important;height:auto;left:0;position:absolute;top:0;width:100%;z-index:1}.project-content{align-items:center;background:#0000!important;display:flex;flex-direction:column;font-size:1rem;padding:15px;position:relative;text-align:center;z-index:2}.project-card:hover{transform:translateY(-2px)}.project-card:hover,.project-card:hover .project-content,.sticky-notes-grid .project-card,.sticky-notes-grid .project-card *,.sticky-notes-grid .project-card:hover,.sticky-notes-grid .project-card:hover *{background:#0000!important}.note-description,.note-description:hover,.note-icon,.note-icon:hover,.note-title,.note-title:hover,.project-card,.project-card *,.project-card:hover,.project-card:hover *,.project-content,.project-content *,.project-content:hover,.project-content:hover *,.project-svg,.project-svg *,.project-svg:hover,.project-svg:hover *{background:#0000!important;background-color:initial!important}.project-card{background:#0000!important}.note-icon{font-size:1.5rem;margin-bottom:8px;text-align:center}.note-title{color:#2c3e50;font-family:Permanent Marker,cursive;font-size:1rem;font-weight:700;margin-bottom:3px;text-align:center}.note-description{color:#6c757d;font-size:.85rem;line-height:1.2;margin:0;text-align:center}.project-details{position:relative;z-index:1}.project-detail-title{color:#2c3e50;font-size:1.8rem;font-weight:700;margin-bottom:20px;text-align:center}.project-screenshot{margin-bottom:20px}.project-screenshot img{border-radius:10px;box-shadow:0 4px 15px #0000001a;height:100%;object-fit:cover;width:100%}.project-gallery{margin-bottom:20px}.gallery-container{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;padding-left:50px}.gallery-image{border:2px solid #0000;border-radius:8px;cursor:pointer;height:60px;object-fit:cover;transition:transform .2s;width:80px}.gallery-image:hover{transform:scale(1.05)}.gallery-image.active{border-color:#3498db;transform:scale(1.1)}.project-info{margin-bottom:25px}.project-detail-description{color:#5a6c7d;font-size:1rem;line-height:1.6;margin-bottom:15px}.project-role{color:#2c3e50;font-weight:500;margin-bottom:15px}.project-tech-detail{margin-bottom:20px}.tech-tags{display:flex;flex-wrap:wrap;gap:8px}.tech-tag{background:#e3f2fd;border-radius:20px;color:#1976d2;font-size:.8rem;font-weight:500;padding:5px 12px}.project-actions{text-align:center}.view-project-btn{background:url(/portfolio-new/static/media/but1.621508cfbe2be9a2a413.svg) no-repeat 50%;background-size:100% 100%;border:none;color:#000;display:inline-block;font-family:Permanent Marker,cursive;font-size:1rem;margin-bottom:20px;padding:12px 24px;position:relative;text-decoration:none;transition:all .3s ease}.view-project-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.project-navigation{display:flex;gap:15px;justify-content:flex-start;margin-left:-100px}.previous-btn{background:url(/portfolio-new/static/media/but.8bcc2deb9bd6c8d78717.svg) no-repeat 50%;background-size:100% 100%}.next-btn,.previous-btn{border:none;color:#000;cursor:pointer;font-weight:500;padding:8px 16px;position:relative;transition:all .2s}.next-btn{background:url(/portfolio-new/static/media/but2.df7cc8445bd449ff861c.svg) no-repeat 50%;background-size:100% 100%;margin-right:30px}.next-btn:hover,.previous-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}.sns-links{flex-wrap:wrap;gap:30px}.sns-icon-link,.sns-links{display:flex;justify-content:center}.sns-icon-link{align-items:center;transition:transform .2s}.sns-icon-link:hover{transform:translateY(-5px)}.sns-icon-img{height:40px;width:40px}@media (max-width:1024px){.contact-info{max-width:500px!important;min-height:250px}.contact-content{padding:30px}.notebook-container{gap:40px}.project-card{max-width:200px}.section{padding-left:20px;padding-right:20px}}@media (max-width:900px){.contact-info{max-width:450px!important;min-height:220px}.contact-content{padding:25px}.contact-social-container{gap:40px}}.questionnaire-book .stf__page,.questionnaire-book .stf__parent,.questionnaire-book .stf__wrapper{overflow:hidden}.questionnaire-book .stf__backHardShadow,.questionnaire-book .stf__backHardShadowLeft,.questionnaire-book .stf__backHardShadowRight,.questionnaire-book .stf__backShadow,.questionnaire-book .stf__backShadowLeft,.questionnaire-book .stf__backShadowRight,.questionnaire-book .stf__hardShadow,.questionnaire-book .stf__hardShadowLeft,.questionnaire-book .stf__hardShadowRight,.questionnaire-book .stf__shadow,.questionnaire-book .stf__shadowLeft,.questionnaire-book .stf__shadowRight{display:none!important}.questionnaire-book .stf__block,.questionnaire-book .stf__pageWrapper{overflow:hidden}.scroll-to-top{align-items:center;background:#0000;border:none;bottom:30px;cursor:pointer;display:flex;height:100px;justify-content:center;position:fixed;right:30px;transition:all .3s ease;width:100px;z-index:1000}.scroll-to-top:hover{transform:translateY(-2px)}.scroll-to-top img{height:50px;opacity:.7;transition:all .3s ease;width:50px}.scroll-to-top:hover img{opacity:1}.scroll-to-top.clicked img{animation:flyUp .6s ease-out}@keyframes flyUp{0%{opacity:.7;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-20px) scale(1.2)}to{opacity:.7;transform:translateY(0) scale(1)}}.certificates-container{align-items:center;display:flex;gap:40px;justify-content:center;margin:0 auto;max-width:1200px;padding:40px 20px}.certificate-svg{height:auto;transition:transform .3s ease;width:500px}.certificate-svg:hover{transform:scale(1.05)}@media (max-width:768px){.certificates-container{flex-direction:column;gap:30px;padding:20px 15px}.certificate-svg{width:250px}}.interests-container{grid-gap:30px;display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));margin:0 auto;max-width:1200px;padding:40px 20px}.interest-category{background:#fff;border:2px solid #25282d;border-radius:12px;box-shadow:0 4px 12px #0000001a;overflow:hidden;padding:25px;position:relative;transition:all .3s ease}.interest-category:before{background:linear-gradient(90deg,#ff9a9e,#fecfef,#fecfef,#ff9a9e);content:"";height:6px;left:0;position:absolute;right:0;top:0}.interest-category:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-3px)}.interest-category-title{color:#25282d;font-family:Permanent Marker,cursive;font-size:1.5rem;margin:0 0 20px;position:relative;text-align:center}.interest-category-title:after{background:linear-gradient(90deg,#ff9a9e,#fecfef);border-radius:1px;bottom:-8px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:60px}.interest-items{display:flex;flex-direction:column;gap:15px}.interest-item{align-items:flex-start;background:#f8f9fa;border-left:4px solid #dee2e6;border-radius:8px;display:flex;gap:12px;padding:12px;transition:all .3s ease}.interest-item:hover{background:#e9ecef;border-left-color:#adb5bd;transform:translateX(5px)}.interest-icon{flex-shrink:0;font-size:1.5rem;text-align:center;width:30px}.interest-text{color:#495057;font-family:Indie Flower,cursive;font-size:1rem;line-height:1.4;margin:0}@media (max-width:768px){.interests-container{gap:20px;grid-template-columns:1fr;padding:20px 15px}.interest-category{padding:20px}.interest-category-title{font-size:1.3rem}.interest-item{gap:10px;padding:10px}.interest-icon{font-size:1.3rem;width:25px}.interest-text{font-size:.95rem}}.mobile-book-navigation,.mobile-menu-btn{display:none}@media (max-width:768px){.mobile-menu-btn{align-items:center;background:none;border:none;cursor:pointer;display:flex;justify-content:center;padding:10px;transition:all .3s ease;z-index:1001}.nav-links{display:none}.navbar{background:#0000;padding:15px 0}.nav-container{align-items:center;display:flex;justify-content:flex-end;padding:0 15px;position:relative}.mobile-menu-btn:hover{transform:scale(1.1)}.menu-icon{box-shadow:none;display:block;filter:invert(.2);filter:invert(.2) drop-shadow(none);height:32px;width:32px}.mobile-menu-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.mobile-menu{animation:slideIn .3s ease-out;background:#fff;border-radius:15px;box-shadow:0 15px 30px #0000004d;max-height:70vh;max-width:300px;overflow-y:auto;padding:20px;width:90%}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.mobile-menu-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:10px}.mobile-menu-header h3{color:#333;font-size:1.2rem;font-weight:600;margin:0}.mobile-menu-close{align-items:center;background:none;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:2rem;height:30px;justify-content:center;padding:0;transition:all .3s ease;width:30px}.mobile-menu-close:hover{background-color:#f0f0f0;color:#333}.mobile-menu-links{display:flex;flex-direction:column;gap:10px}.mobile-nav-link{align-items:center;border:2px solid #0000;border-radius:10px;color:#333;display:flex;font-size:1rem;font-weight:500;gap:12px;padding:12px 15px;text-decoration:none;transition:all .3s ease}.mobile-nav-link:hover{background-color:#f8f9fa;border-color:#e9ecef;transform:translateX(3px)}.mobile-nav-icon{filter:invert(.3);height:20px;width:20px}.hero-section{padding:100px 20px 60px;text-align:center}.section-title{font-size:2rem;margin-bottom:60px}.hero-subtitle{font-size:1.4rem;line-height:1.4;margin:20px 0}.hero-buttons{align-items:center;flex-direction:row;flex-wrap:wrap;gap:15px;justify-content:center}.contact-btn,.view-projects-btn{font-size:.9rem;max-width:200px;padding:10px 20px}.mobile-book-navigation{align-items:center;display:flex;justify-content:space-between;margin-top:20px;max-width:300px;padding:0 10px;width:100%}.mobile-nav-btn{background:#333;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.9rem;min-width:80px;padding:10px 15px;transition:all .3s ease}.mobile-nav-btn:hover:not(:disabled){background:#555;transform:translateY(-2px)}.mobile-nav-btn:disabled{background:#ccc;cursor:not-allowed;opacity:.6}.page-indicator{color:#333;font-size:.9rem;font-weight:500;padding:0 10px}.book-container{align-items:center;display:flex;flex-direction:column;margin-bottom:40px;min-height:auto}.questionnaire-book{margin:-100px auto;transform:scale(.7)}.book-container{background-attachment:local;background-image:url(/portfolio-new/static/media/moabout.8ac4f8af5987d48fed48.svg);background-position:50%;background-repeat:no-repeat;background-size:100%;margin-top:100px;min-height:220px;padding:40px 20px;width:100%}.questionnaire-book{display:none!important;height:0!important;opacity:0!important;overflow:hidden!important;visibility:hidden!important;width:0!important}.book-container:before{content:"About Me";font-size:1.5rem;font-weight:600;margin-bottom:20px}.book-container:after,.book-container:before{color:#333;display:block;padding:0 40px;text-align:center}.book-container:after{content:"Hi! I'm Alyona — designer and aspiring frontend developer.\A I combine aesthetics with usability, creating projects that both look and work well. Currently growing my skills in JavaScript, HTML, CSS, and React while building real projects.\A Passionate about user experience, open to international opportunities, and always ready for challenges.\A Outside of work — I love motorcycles and sports.";font-size:1rem;line-height:1.6;margin-top:20px;white-space:pre-line}.skills-container{align-items:center;display:flex;flex-direction:column;gap:40px;margin-top:60px;padding:0 20px}.skill-category-container{max-width:400px;overflow:visible;position:static;text-align:center;width:100%}.skills-svg{display:block!important;height:auto!important;left:auto!important;margin:0!important;max-width:400px!important;position:static!important;top:auto!important;transform:none!important;width:100%!important;z-index:auto!important}.skills-content{display:none!important}.skill-category-container:not(.skill-left):not(.skill-right) .skills-svg,.skill-left .skills-svg,.skill-right .skills-svg{left:auto!important;margin-left:0!important}.skills-content{background:#fff;border:2px solid #333;border-radius:15px;box-shadow:0 4px 15px #0000001a;padding:20px}.skill-category-title{border-bottom:2px solid #333;font-size:1.3rem;margin-bottom:20px;padding-bottom:10px;text-align:center}.skill-left .skill-category-title,.skill-right .skill-category-title{border-bottom:2px solid #333;margin:0 0 20px;text-align:center}.skill-left .skill-category-title:after,.skill-right .skill-category-title:after{display:none}.skill-cards,.skill-left .skill-cards,.skill-right .skill-cards{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(2,1fr);margin:0}.skill-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:10px;box-shadow:0 2px 8px #0000000d;padding:15px 10px;text-align:center}.skill-name{font-size:.8rem;margin-bottom:5px}.skill-note{font-size:.7rem}.notebook-container{display:flex;flex-direction:column;gap:30px;max-width:none;padding:0 20px 0 0;width:100%}.notebook-page-left{background:#fff;background-image:none;border:2px solid #333;border-radius:15px;box-shadow:0 4px 15px #0000001a;margin:0;max-width:none;order:2;padding:20px 5px 20px 15px;transform:none;width:100%}.notebook-tabs{align-items:center;display:flex;gap:10px;justify-content:center;margin:0 auto 20px;padding:0 10px;position:relative;width:100%}.notebook-tabs .tab{background:#f8f9fa;border:1px solid #dee2e6;border-radius:20px;color:#6c757d;cursor:pointer;font-size:.85rem;font-weight:900;min-width:60px;padding:8px 16px;text-align:center;transition:all .3s ease}.notebook-tabs .tab:hover{background:#e9ecef;border-color:#adb5bd}.notebook-tabs .tab.active{background:#87ceeb;border-color:#87ceeb;box-shadow:0 2px 5px #0000001a;color:#fff}.notebook-page-left .sticky-notes-grid{-webkit-overflow-scrolling:touch;display:flex;flex-direction:row;flex-wrap:nowrap;gap:15px;justify-content:flex-start;margin-left:0;max-width:none;overflow-x:auto;padding:20px 5px 20px 15px;scroll-behavior:smooth;width:100%}.notebook-page-left .sticky-notes-grid .project-card{background:#f8f9fa;border:1px solid #dee2e6;border-radius:12px;box-shadow:0 2px 10px #0000001a;cursor:pointer;flex:1 1;height:auto;max-width:none;min-width:auto;padding:12px;position:static;transition:transform .3s ease,box-shadow .3s ease;white-space:normal;width:100%;z-index:auto}.notebook-page-left .sticky-notes-grid .project-card:hover{box-shadow:0 4px 15px #00000026;transform:translateY(-2px)}.notebook-page-left .sticky-notes-grid::-webkit-scrollbar{height:6px}.notebook-page-left .sticky-notes-grid::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.notebook-page-left .sticky-notes-grid::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.notebook-page-left .sticky-notes-grid::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.project-svg{display:none}.project-content{background:#0000;max-width:none;padding:0;position:static;width:100%}.note-title{color:#2c3e50;font-size:.9rem;line-height:1.2;margin-bottom:6px}.note-description{color:#6c757d;font-size:.8rem;line-height:1.3}.notebook-page-right{background:#fff;background-image:none;border:2px solid #333;border-radius:15px;box-shadow:0 4px 15px #0000001a;height:auto;margin:0;max-width:none;order:1;overflow:visible;padding:20px;width:100%}.notebook-page-right .project-details{max-width:none;transform:none;width:100%}.project-detail-title{font-size:1.3rem;margin-bottom:15px;max-width:none;width:100%}.contact-social-container{display:flex;flex-direction:column;gap:30px}.contact-info{max-width:none!important;min-height:auto;width:100%}.contact-svg{display:none}.contact-left{background-attachment:local;background-image:url(/portfolio-new/static/media/mocontact.d4dc5c1561289d44227a.svg);background-position:50%;background-repeat:no-repeat;background-size:cover}.contact-content{background:#0000;border:none;border-radius:0;box-shadow:none;padding:20px;position:static}.contact-text{font-size:1rem;margin-bottom:20px}.contact-item{align-items:flex-start;flex-direction:column;gap:5px;padding:10px 0}.contact-label{font-weight:700;min-width:auto}.contact-label,.contact-link,.contact-text{font-size:.9rem}.social-right{background:#0000;border:none;border-radius:0;box-shadow:none;padding:20px}.social-title{font-size:1.3rem;margin-bottom:20px}.sns-links{gap:20px}.sns-icon-img{height:35px;width:35px}.certificates-container{flex-direction:column;gap:20px;padding:20px}.certificate-svg{max-width:300px;width:100%}.scroll-to-top{bottom:20px;height:60px;right:20px;width:60px}.scroll-to-top img{height:30px;width:30px}.section{margin-bottom:40px;padding-left:20px;padding-right:20px}.notebook-page{padding:80px 15px 15px}.gallery-container,.project-gallery{display:none}.project-screenshot{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;display:flex;gap:0;height:120px;margin:0;overflow-x:auto;padding:0;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-scroll-snap-type:x mandatory;scrollbar-width:thin;white-space:nowrap;width:100%}.project-screenshot img{border-radius:0;box-shadow:none;cursor:pointer;flex:0 0 auto;height:120px;min-width:300px;object-fit:cover;scroll-snap-align:start;-webkit-scroll-snap-align:start;transition:transform .3s ease;width:300px}.project-screenshot img:hover{box-shadow:none;transform:none}.project-screenshot::-webkit-scrollbar{height:6px}.project-screenshot::-webkit-scrollbar-track{background:#f0f0f0;border-radius:3px}.project-screenshot::-webkit-scrollbar-thumb{background:#87ceeb;border-radius:3px}.project-screenshot::-webkit-scrollbar-thumb:hover{background:#5f9ea0}.project-detail-description{font-size:.9rem;line-height:1.5;margin-top:15px;text-align:left!important}.project-detail-description,.project-info{margin-left:0!important;max-width:none!important;padding:0;width:100%!important}.project-info{margin-top:20px;text-align:left}.project-title{font-weight:600;margin-bottom:12px}.project-description,.project-title{margin-left:0!important;max-width:none!important;text-align:left;width:100%!important}.project-description{line-height:1.6;margin-bottom:15px}.next-btn,.previous-btn{display:none!important}.project-actions{align-items:center!important;display:flex!important;justify-content:center!important}.project-actions,.view-project-btn{text-align:center!important;width:100%!important}.view-project-btn{display:block!important;margin:-40px auto 0!important;max-width:200px!important}}html{scroll-behavior:smooth}.dev-modal-overlay{align-items:center;background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:9999}.dev-modal{background:#fefefe;background-image:radial-gradient(circle,#d4d4d4 1px,#0000 0);background-size:20px 20px;border:2px solid #333;border-radius:15px;box-shadow:0 15px 40px #0003;max-width:500px;padding:30px;position:relative;text-align:center;width:100%}.dev-modal-header h2{color:#2c3e50;font-family:Permanent Marker,cursive;font-size:1.8rem;margin-bottom:20px;position:relative}.dev-modal-header h2:after{background:linear-gradient(90deg,#ff9a9e,#fecfef);border-radius:1px;bottom:-8px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);width:60px}.dev-modal-content{margin-bottom:25px}.dev-modal-content p{color:#5a6c7d;font-size:1.1rem;line-height:1.6;margin-bottom:15px}.dev-modal-actions{display:flex;justify-content:center}.dev-modal-btn{background:linear-gradient(135deg,#4ecdc4,#6ee7df);border:2px solid #4ecdc4;border-radius:25px;box-shadow:0 4px 15px #4ecdc44d;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:15px 30px;transition:all .3s ease}.dev-modal-btn:hover{background:linear-gradient(135deg,#6ee7df,#4ecdc4);box-shadow:0 6px 20px #4ecdc466;transform:translateY(-2px)}.dev-modal-btn:active{transform:translateY(0)}@media (max-width:768px){.dev-modal{margin:20px;max-width:none;padding:25px 20px}.dev-modal-header h2{font-size:1.5rem;margin-bottom:15px}.dev-modal-content p{font-size:1rem;margin-bottom:12px}.dev-modal-btn{font-size:1rem;padding:12px 25px}}
/*# sourceMappingURL=main.62decb56.css.map*/