@font-face{font-family:Persona5Menu;src:url(/Portfolio/fonts/Persona5MenuFontPrototype-Regular.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:P5Hatty;src:url(/Portfolio/fonts/p5hatty-1.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--p5-red:#e60012;--p5-red-dark:#b3000b;--p5-black:#080808;--p5-charcoal:#181818;--p5-white:#fff;--p5-yellow:#00f0ff;--font-p5-ransom:"Persona5Menu", Impact, sans-serif;--font-p5-hand:"P5Hatty", cursive, sans-serif;--font-p5-body:"Inter", sans-serif;--font-p5-header:"Inter", Impact, sans-serif}html{scroll-behavior:smooth}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-p5-body);background-color:var(--p5-black);color:var(--p5-white);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--p5-black)}::-webkit-scrollbar-thumb{background:var(--p5-red);border:3px solid var(--p5-black)}::-webkit-scrollbar-thumb:hover{background:var(--p5-white)}a{color:inherit;text-decoration:none;transition:all .15s ease-out}button{font-family:var(--font-p5-header);cursor:pointer;background:0 0;border:none;outline:none;font-weight:900}.p5-bg-canvas{z-index:-10;background-color:var(--p5-black);width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.p5-bg-stripes{background:repeating-linear-gradient(45deg, var(--p5-black), var(--p5-black) 40px, #111 40px, #111 80px);opacity:.7;width:200%;height:200%;position:absolute;top:-50%;left:-50%;transform:rotate(-15deg)}.p5-bg-halftone{pointer-events:none;background-image:radial-gradient(#e600121a 1.5px,#0000 1.5px);background-size:24px 24px;width:100%;height:100%;position:absolute}.p5-bg-spiral{background:repeating-radial-gradient(circle, var(--p5-black), var(--p5-black) 40px, var(--p5-red) 40px, var(--p5-red) 80px);opacity:.12;pointer-events:none;width:140vmax;height:140vmax;transition:opacity .6s cubic-bezier(.19,1,.22,1);animation:120s linear infinite p5-spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.view-home .p5-bg-spiral{opacity:.65}@keyframes p5-spin{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.p5-transition-snappy{transition:all .18s cubic-bezier(.19,1,.22,1)}.skew-l-5{transform:skew(-5deg)}.skew-l-10{transform:skew(-10deg)}.skew-l-15{transform:skew(-15deg)}.skew-r-5{transform:skew(5deg)}.skew-r-10{transform:skew(10deg)}.skew-r-15{transform:skew(15deg)}.p5-clip-1{clip-path:polygon(4% 0%,100% 0%,96% 100%,0% 100%)}.p5-clip-2{clip-path:polygon(0% 8%,100% 0%,98% 92%,2% 100%)}.p5-clip-star{clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.spin-slow{animation:30s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.p5-ransom-letter{font-family:var(--font-p5-ransom);text-transform:uppercase;transform:rotate(var(--r-rot)) translateY(var(--r-y));background-color:var(--r-bg);color:var(--r-fg);border:var(--r-border);line-height:1;font-size:var(--r-size);box-shadow:4px 4px 0px var(--p5-black);margin:.05em;padding:.2em .3em;display:inline-block}.p5-menu-item{font-family:var(--font-p5-header);text-transform:uppercase;color:var(--p5-white);cursor:pointer;z-index:10;background:0 0;margin:10px 0;padding:5px 25px;font-size:3.5rem;font-weight:900;transition:all .15s cubic-bezier(.19,1,.22,1);display:inline-block;position:relative;transform:skew(-12deg)}.p5-menu-item:before{content:"";background-color:var(--p5-red);z-index:-1;width:0%;height:100%;transition:all .15s cubic-bezier(.19,1,.22,1);position:absolute;top:0;left:0}.p5-menu-item:hover{color:var(--p5-black);text-shadow:2px 2px 0 var(--p5-white);transform:skew(-12deg)scale(1.1)translate(15px)}.p5-menu-item:hover:before{width:100%;box-shadow:-8px 8px 0 var(--p5-yellow)}.p5-layout-grid{grid-template-columns:1fr;gap:30px;display:grid}@media (width>=1024px){.p5-layout-grid{grid-template-columns:1.2fr 2fr}}.p5-stats-panel{background:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:8px 8px 0 var(--p5-red);padding:30px;position:relative;transform:rotate(-1deg)}.p5-modal-overlay{z-index:900;background-color:#080808f2;width:100vw;height:100vh;padding:40px 20px;position:fixed;top:0;left:0;overflow-y:auto}.p5-header{z-index:100;pointer-events:none;background:linear-gradient(#080808e6 0%,#0000 100%);justify-content:space-between;align-items:center;padding:15px 40px;display:flex;position:fixed;top:0;left:0;right:0}.p5-header-nav{pointer-events:auto;gap:20px;display:flex}.p5-header-left{pointer-events:auto;cursor:pointer;align-items:center;gap:15px;display:flex}.p5-header-logo-text{font-family:var(--font-p5-ransom);background-color:var(--p5-white);color:var(--p5-black);box-shadow:4px 4px 0 var(--p5-red);text-transform:uppercase;letter-spacing:-1px;padding:4px 18px;font-size:2.2rem;transition:all .15s ease-out;transform:skew(-15deg)rotate(-2deg)}.p5-header-left:hover .p5-header-logo-text{background-color:var(--p5-red);color:var(--p5-white);box-shadow:4px 4px 0 var(--p5-yellow);transform:skew(-15deg)rotate(1deg)scale(1.05)}.p5-nav-btn{font-family:var(--font-p5-header);background-color:var(--p5-white);color:var(--p5-black);border:2px solid var(--p5-black);box-shadow:4px 4px 0 var(--p5-black);align-items:center;gap:8px;padding:6px 18px;font-size:1.2rem;font-weight:900;transition:all .15s cubic-bezier(.19,1,.22,1);display:flex;transform:skew(-12deg)rotate(-1deg)}.p5-nav-btn span.num{font-family:var(--font-p5-ransom);color:var(--p5-red);font-size:.95rem;font-weight:700}.p5-nav-btn.active{background-color:var(--p5-red);color:var(--p5-white);border-color:var(--p5-white);box-shadow:6px 6px 0 var(--p5-black);transform:skew(-12deg)rotate(-2deg)scale(1.05)}.p5-nav-btn:hover:not(.active){background-color:var(--p5-yellow);color:var(--p5-black);box-shadow:6px 6px 0 var(--p5-red);transform:skew(-12deg)rotate(2deg)scale(1.1)}@media (width<=768px){.p5-header{border-bottom:3px solid var(--p5-red);pointer-events:auto;background-color:#080808f2;flex-direction:column;gap:8px;padding:10px 15px;position:sticky}.p5-header-left{justify-content:center;align-items:center;height:60px;display:flex;min-width:unset!important;min-height:unset!important}.p5-header-left div{transform:scale(.7)}.p5-header-nav{flex-wrap:wrap;justify-content:center;gap:8px;width:100%}.p5-nav-btn{padding:4px 8px;font-size:.9rem}}.p5-home-container{justify-content:center;align-items:center;min-height:calc(100vh - 120px);padding:40px 0;display:flex}.p5-home-layout{grid-template-columns:1fr;gap:50px;width:100%;display:grid}@media (width>=1024px){.p5-home-layout{grid-template-columns:1fr 1.2fr;align-items:center;gap:80px}}.p5-hero-left{flex-direction:column;align-items:flex-start;gap:20px;display:flex}.p5-hero-title-plate{background-color:var(--p5-white);color:var(--p5-black);border:4px solid var(--p5-black);box-shadow:8px 8px 0 var(--p5-red);margin-top:15px;padding:10px 25px;transform:skew(-12deg)rotate(-3deg)}.p5-hero-title-plate h1{font-family:var(--font-p5-header);letter-spacing:-1px;font-size:2.8rem;font-weight:900;line-height:1}.p5-hero-subtitle{font-family:var(--font-p5-hand);color:var(--p5-yellow);text-shadow:2px 2px 0 var(--p5-black);font-size:2.2rem;line-height:1.1;transform:rotate(-1deg)}.p5-hero-desc{border-left:5px solid var(--p5-red);background-color:#080808d9;max-width:500px;padding:15px 20px;font-size:1.15rem;line-height:1.6;transform:skew(-6deg);box-shadow:4px 4px #00000080}.p5-home-menu{flex-direction:column;align-items:flex-start;gap:25px;padding-left:20px;display:flex}.p5-main-menu-item{font-family:var(--font-p5-header);text-transform:uppercase;background-color:var(--p5-black);color:var(--p5-white);border:4px solid var(--p5-white);text-align:left;cursor:pointer;width:100%;max-width:550px;box-shadow:8px 8px 0 var(--p5-black);justify-content:space-between;align-items:center;padding:10px 30px;font-size:3rem;font-weight:900;transition:all .15s cubic-bezier(.19,1,.22,1);display:flex;position:relative;transform:skew(-15deg)rotate(-2deg)}.p5-main-menu-item .menu-num{font-family:var(--font-p5-ransom);color:var(--p5-red);margin-right:15px;font-size:1.8rem}.p5-main-menu-item .menu-arrow{opacity:0;color:var(--p5-yellow);transition:all .15s cubic-bezier(.175,.885,.32,1.275);transform:translateY(-10px)}.p5-main-menu-item:hover{background-color:var(--p5-red);color:var(--p5-white);box-shadow:-10px 10px 0 var(--p5-yellow), 8px 8px 0 var(--p5-black);border-color:var(--p5-white);transform:skew(-15deg)rotate(-4deg)scale(1.05)translate(15px)}.p5-main-menu-item:hover .menu-num{color:var(--p5-white)}.p5-main-menu-item:hover .menu-arrow{opacity:1;transform:translateY(0)}.p5-main-menu-item:nth-child(2){margin-left:20px;transform:skew(-15deg)rotate(1deg)}.p5-main-menu-item:nth-child(2):hover{transform:skew(-15deg)rotate(-1deg)scale(1.05)translate(15px)}.p5-main-menu-item:nth-child(3){margin-left:-10px;transform:skew(-15deg)rotate(-3deg)}.p5-main-menu-item:nth-child(3):hover{transform:skew(-15deg)rotate(-5deg)scale(1.05)translate(15px)}@media (width<=768px){.p5-main-menu-item{padding:8px 15px;font-size:1.8rem}.p5-main-menu-item .menu-num{font-size:1.2rem}.p5-home-menu{width:100%;padding-left:0}.p5-main-menu-item:nth-child(2),.p5-main-menu-item:nth-child(3){margin-left:0}}.p5-about-layout{grid-template-columns:1fr;gap:40px;padding:20px 0;display:grid}@media (width>=1024px){.p5-about-layout{grid-template-columns:1fr 1.5fr;gap:60px}}.p5-profile-card{background-color:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:8px 8px 0 var(--p5-red);padding:30px;position:relative;overflow:hidden;transform:rotate(-1.5deg)}.p5-profile-card:after{content:"";background-color:var(--p5-red);z-index:1;width:100px;height:100px;position:absolute;bottom:-20px;right:-20px;transform:rotate(45deg)}.p5-profile-header{border-bottom:3px double var(--p5-white);margin-bottom:20px;padding-bottom:15px}.p5-profile-name{font-family:var(--font-p5-menu);color:var(--p5-white);margin-bottom:5px;font-size:2.2rem}.p5-profile-title{font-family:var(--font-p5-hand);color:var(--p5-yellow);font-size:1.6rem}.p5-stat-meta-row{font-family:var(--font-p5-menu);justify-content:space-between;margin-bottom:10px;font-size:1.1rem;display:flex}.p5-stat-meta-label{color:#888}.p5-stat-meta-value{color:var(--p5-white)}.p5-stats-section{flex-direction:column;gap:20px;display:flex}.p5-stat-row{background-color:var(--p5-black);border-left:5px solid var(--p5-red);grid-template-columns:80px 1fr 50px;align-items:center;gap:15px;padding:10px 15px;display:grid;transform:skew(-10deg);box-shadow:4px 4px #0000004d}.p5-stat-label{font-family:var(--font-p5-menu);letter-spacing:1px;font-size:1.2rem}.p5-stat-bar-container{background-color:var(--p5-charcoal);border:1px solid #444;height:16px;position:relative;overflow:hidden}.p5-stat-bar-fill{background-color:var(--p5-red);transform-origin:0;height:100%}.p5-stat-bar-value{font-family:var(--font-p5-menu);color:var(--p5-yellow);text-align:right;font-size:1.2rem}.p5-skills-card{background-color:var(--p5-white);color:var(--p5-black);border:4px solid var(--p5-black);box-shadow:-8px 8px 0 var(--p5-red);padding:25px;transform:rotate(1deg)}.p5-skills-card h3{font-family:var(--font-p5-menu);border-bottom:2px solid var(--p5-black);margin-bottom:15px;padding-bottom:5px;font-size:1.8rem}.p5-skills-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;display:grid}.p5-skill-item{background-color:var(--p5-black);color:var(--p5-white);font-family:var(--font-p5-menu);align-items:center;gap:10px;padding:8px 12px;display:flex;transform:skew(-8deg)}.p5-skill-bullet{color:var(--p5-yellow)}.p5-profile-silhouette{background-color:var(--p5-black);border:2px solid #333;justify-content:center;align-items:center;width:100%;height:220px;margin-bottom:20px;display:flex;position:relative;overflow:hidden}.p5-profile-silhouette:before{content:"";background:repeating-linear-gradient(-45deg,#e6001233,#e6001233 10px,#0000 10px 20px);width:140%;height:140%;position:absolute}.p5-profile-star-decor{opacity:.15;position:absolute;bottom:-40px;left:-40px}.p5-cv-download{font-family:var(--font-p5-header);color:var(--p5-black);background-color:var(--p5-yellow);border:3px solid var(--p5-black);box-shadow:5px 5px 0 var(--p5-black);margin-top:18px;padding:10px 18px;font-size:.95rem;font-weight:900;text-decoration:none;transition:transform .15s ease-out,box-shadow .15s ease-out;display:inline-block;transform:skew(-6deg)}.p5-cv-download:hover{box-shadow:7px 7px 0 var(--p5-red);color:var(--p5-black);transform:skew(-6deg)translate(-2px,-2px)}.p5-works-container{flex-direction:column;gap:40px;display:flex}.p5-featured-project{background-color:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:10px 10px 0 var(--p5-red);padding:35px;position:relative;overflow:hidden;transform:rotate(-.5deg)}.knockout-lava-bg{z-index:1;pointer-events:none;background:radial-gradient(circle at 70% 40%,#e6001226 0%,#0000 60%),linear-gradient(135deg,#080808f2 40%,#b3000b66 100%);width:100%;height:100%;position:absolute;top:0;left:0}.p5-featured-header{border-bottom:2px solid var(--p5-white);z-index:2;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:20px;padding-bottom:15px;display:flex;position:relative}.p5-featured-title-wrap{flex-direction:column;display:flex}.p5-featured-subtitle{font-family:var(--font-p5-hand);color:var(--p5-yellow);margin-top:5px;font-size:1.6rem}.p5-badge-unity{background-color:var(--p5-white);color:var(--p5-black);font-family:var(--font-p5-menu);border:2px solid var(--p5-black);padding:4px 15px;font-size:1.2rem;transform:skew(-15deg)}.p5-featured-content{z-index:2;grid-template-columns:1fr;gap:30px;display:grid;position:relative}@media (width>=1024px){.p5-featured-content{grid-template-columns:1.4fr 1fr}}.p5-project-mockup{border:4px solid var(--p5-black);background-color:#1a1a1a;justify-content:center;align-items:center;height:320px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #000c}.p5-project-mockup-content{text-align:center;z-index:5;flex-direction:column;align-items:center;gap:10px;display:flex}.hex-grid-mockup{opacity:.15;background-image:radial-gradient(var(--p5-white) 1px, transparent 1px);background-size:30px 30px;width:100%;height:100%;position:absolute}.p5-tag-column{flex-direction:column;gap:12px;display:flex}.p5-feature-tag{background-color:var(--p5-white);color:var(--p5-black);font-family:var(--font-p5-menu);border-left:6px solid var(--p5-red);padding:8px 16px;font-size:1.15rem;transition:all .15s ease-out;transform:skew(-12deg);box-shadow:4px 4px #0000004d}.p5-feature-tag:hover{background-color:var(--p5-red);color:var(--p5-white);transform:skew(-12deg)scale(1.03)translate(5px)}.p5-feature-tag.right-tag{background-color:var(--p5-black);color:var(--p5-white);border-left:6px solid var(--p5-yellow)}.p5-feature-tag.right-tag:hover{background-color:var(--p5-yellow);color:var(--p5-black)}.p5-projects-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;display:grid}.p5-project-card{background-color:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:6px 6px 0 var(--p5-black);cursor:pointer;flex-direction:column;justify-content:space-between;height:auto;min-height:250px;padding:25px;transition:all .15s ease-out;display:flex;transform:rotate(1deg)}.p5-project-card:hover{box-shadow:8px 8px 0 var(--p5-red);border-color:var(--p5-yellow);transform:rotate(-1deg)scale(1.03)}.p5-card-header{border-bottom:2px solid #333;margin-bottom:15px;padding-bottom:10px}.p5-card-title{font-family:var(--font-p5-menu);color:var(--p5-white);font-size:1.8rem}.p5-card-genre{font-family:var(--font-p5-hand);color:var(--p5-red);font-size:1.2rem}.p5-card-desc{color:#bbb;flex-grow:1;font-size:.9rem;line-height:1.4}.p5-card-action{font-family:var(--font-p5-menu);color:var(--p5-yellow);text-align:right;margin-top:10px;font-size:1rem}.p5-card-page-wrapper{flex-direction:column;justify-content:center;align-items:center;width:100%;padding:40px 0;display:flex}.p5-contact-subtitle{font-family:var(--font-p5-hand);color:var(--p5-yellow);text-align:center;max-width:550px;text-shadow:2px 2px 0 var(--p5-black);margin-bottom:20px;font-size:1.6rem;line-height:1.3}.p5-contact-panel{background-color:var(--p5-red);border:6px solid var(--p5-black);box-shadow:14px 14px 0 var(--p5-black);width:100%;max-width:600px;margin:20px 0;padding:30px;position:relative;overflow:hidden;transform:rotate(-1deg)skew(-2deg)}.p5-contact-panel:before{content:"";pointer-events:none;background:repeating-linear-gradient(45deg,#08080814,#08080814 15px,#0000 15px 30px);width:100%;height:100%;position:absolute;top:0;left:0}.p5-contact-star-decor{opacity:.15;pointer-events:none;z-index:1;position:absolute;top:-20px;right:-30px}.p5-contact-info-list{z-index:5;flex-direction:column;gap:20px;display:flex;position:relative}.p5-contact-block{background-color:var(--p5-black);border:3px solid var(--p5-white);box-shadow:6px 6px 0 var(--p5-black);cursor:pointer;padding:20px 25px;text-decoration:none;transition:all .15s cubic-bezier(.19,1,.22,1);display:block;transform:skew(-8deg)rotate(1deg)}.p5-contact-block.email-block{transform:skew(-8deg)rotate(1deg)}.p5-contact-block.linkedin-block{transform:skew(-8deg)rotate(-1deg)}.p5-contact-block.cv-block{transform:skew(-8deg)rotate(.5deg)}.p5-contact-header{justify-content:space-between;align-items:center;display:flex}.contact-tag{font-family:var(--font-p5-header);color:var(--p5-yellow);letter-spacing:1px;font-size:1rem;font-weight:900;transition:color .15s ease-out}.contact-action{background-color:var(--p5-red);color:var(--p5-white);font-size:.8rem;font-family:var(--font-p5-header);box-shadow:3px 3px 0 var(--p5-black);padding:4px 12px;font-weight:900;transition:all .15s ease-out;transform:skew(-6deg)}.contact-detail{font-family:var(--font-p5-header);color:var(--p5-white);word-break:break-all;letter-spacing:-.5px;margin-top:10px;font-size:1.5rem;font-weight:900;transition:color .15s ease-out}.p5-contact-block:hover{background-color:var(--p5-white);border-color:var(--p5-black);box-shadow:-8px 8px 0 var(--p5-yellow), 6px 6px 0 var(--p5-black)}.p5-contact-block.email-block:hover{transform:skew(-8deg)rotate(-1deg)scale(1.03)}.p5-contact-block.linkedin-block:hover{transform:skew(-8deg)rotate(1deg)scale(1.03)}.p5-contact-block:hover .contact-tag{color:var(--p5-red)}.p5-contact-block:hover .contact-detail{color:var(--p5-black)}.p5-contact-block:hover .contact-action{background-color:var(--p5-black);color:var(--p5-white);box-shadow:3px 3px 0 var(--p5-red)}.p5-contact-layout-grid{z-index:2;flex-direction:row;justify-content:center;align-items:stretch;gap:40px;width:100%;max-width:1000px;margin:20px 0;display:flex}.p5-cv-panel{background-color:var(--p5-white);border:6px solid var(--p5-black);box-shadow:-14px 14px 0 var(--p5-black);flex-direction:column;justify-content:space-between;width:100%;max-width:380px;padding:30px;display:flex;position:relative;overflow:hidden;transform:rotate(1.5deg)skew(2deg)}.p5-cv-panel:before{content:"";pointer-events:none;background:repeating-linear-gradient(-45deg,#e03c3c0d,#e03c3c0d 15px,#0000 15px 30px);width:100%;height:100%;position:absolute;top:0;left:0}.p5-cv-star-decor{opacity:.15;pointer-events:none;z-index:1;position:absolute;bottom:-40px;left:-40px}.p5-cv-card-content{z-index:5;flex-direction:column;justify-content:space-between;gap:20px;height:100%;display:flex;position:relative}.p5-cv-title-section{flex-direction:column;gap:5px;display:flex}.p5-cv-badge{background-color:var(--p5-black);color:var(--p5-yellow);font-family:var(--font-p5-header);align-self:flex-start;padding:3px 10px;font-size:.8rem;font-weight:900;transform:skew(-10deg)}.p5-cv-heading{font-family:var(--font-p5-header);color:var(--p5-black);text-transform:uppercase;margin:5px 0 0;font-size:2rem;font-weight:900;line-height:1.1}.p5-cv-status-box{background-color:var(--p5-black);color:var(--p5-white);border:3px solid var(--p5-red);justify-content:space-between;align-items:center;padding:10px 15px;display:flex;transform:skew(-5deg)}.p5-status-label{font-family:var(--font-p5-header);color:var(--p5-yellow);font-size:.9rem;font-weight:900}.p5-status-val{font-family:var(--font-p5-header);letter-spacing:.5px;font-size:1rem;font-weight:900}.p5-status-val.locked{color:var(--p5-red)}.p5-status-val.unlocked{color:#0f6;text-shadow:0 0 5px #0f66}.p5-cv-action-btn{font-family:var(--font-p5-header);border:3px solid var(--p5-black);cursor:pointer;box-shadow:5px 5px 0 var(--p5-black);justify-content:center;align-items:center;gap:10px;padding:18px;font-size:1.2rem;font-weight:900;text-decoration:none;transition:all .15s cubic-bezier(.19,1,.22,1);display:flex}.p5-cv-action-btn.view-btn{background-color:var(--p5-red);color:var(--p5-white);transform:skew(-8deg)rotate(-1deg)}.p5-cv-action-btn.view-btn:hover{background-color:var(--p5-black);color:var(--p5-yellow);box-shadow:-5px 5px 0 var(--p5-red);transform:skew(-8deg)rotate(1deg)scale(1.04)}.p5-cv-action-btn.download-btn{background-color:var(--p5-yellow);color:var(--p5-black);transform:skew(-8deg)rotate(1deg)}.p5-cv-action-btn.download-btn:hover{background-color:var(--p5-black);color:var(--p5-white);border-color:var(--p5-yellow);box-shadow:5px 5px 0 var(--p5-yellow);transform:skew(-8deg)rotate(-1deg)scale(1.04)}.p5-cv-file-details{font-family:var(--font-p5-header);color:#777;justify-content:space-between;font-size:.8rem;font-weight:900;display:flex}@media (width<=850px){.p5-contact-layout-grid{flex-direction:column;align-items:center;gap:30px;padding:0 15px}.p5-cv-panel{max-width:600px;box-shadow:14px 14px 0 var(--p5-black);transform:rotate(-1deg)skew(-2deg)}}@media (width<=768px){.p5-contact-panel{box-shadow:8px 8px 0 var(--p5-black);padding:20px 15px}.p5-contact-subtitle{padding:0 10px;font-size:1.3rem}.p5-contact-block{padding:15px}.contact-detail{font-size:1.15rem}.contact-tag{font-size:.85rem}.contact-action{padding:2px 8px;font-size:.75rem}}.p5-doc-page{background-color:var(--p5-black);color:var(--p5-white);min-height:100vh;font-family:var(--font-p5-body)}.p5-doc-hero{background:linear-gradient(135deg, var(--p5-charcoal) 0%, var(--p5-black) 100%);border-bottom:8px solid var(--p5-red);grid-template-columns:1fr;align-items:center;gap:40px;padding:80px 40px;display:grid;position:relative}@media (width>=1024px){.p5-doc-hero{grid-template-columns:1.2fr 1fr;padding:100px 80px}}.p5-p5hatty-title{font-family:var(--font-p5-hand);color:var(--p5-white);background-color:var(--p5-red);box-shadow:6px 6px 0 var(--p5-white);letter-spacing:2px;margin-bottom:25px;padding:5px 30px;font-size:5rem;display:inline-block;transform:skew(-12deg)rotate(-2deg)}.p5-doc-subtitle{font-family:var(--font-p5-header);color:var(--p5-yellow);text-shadow:2px 2px 0 var(--p5-black);margin-bottom:20px;font-size:2rem;font-weight:900}.p5-doc-desc{color:#ccc;max-width:700px;margin-bottom:30px;font-size:1.25rem;line-height:1.6}.p5-doc-tech-row{flex-wrap:wrap;gap:12px;margin-bottom:40px;display:flex}.p5-doc-tech-badge{background-color:var(--p5-white);color:var(--p5-black);font-family:var(--font-p5-header);box-shadow:4px 4px 0 var(--p5-red);padding:6px 16px;font-size:1.1rem;font-weight:900;transform:skew(-10deg)}.p5-doc-back-btn{font-family:var(--font-p5-header);color:var(--p5-white);border:3px solid var(--p5-white);cursor:pointer;background-color:#0000;padding:10px 25px;font-size:1.4rem;font-weight:900;transition:all .15s ease-out;transform:skew(-12deg)}.p5-doc-back-btn:hover{background-color:var(--p5-white);color:var(--p5-black);box-shadow:-6px 6px 0 var(--p5-red)}.p5-doc-back-btn.block-btn{background-color:var(--p5-red);width:100%;max-width:400px;box-shadow:5px 5px 0 var(--p5-white);border:none;font-size:1.6rem}.p5-doc-back-btn.block-btn:hover{background-color:var(--p5-white);color:var(--p5-black);box-shadow:-5px 5px 0 var(--p5-red)}.p5-doc-hero-visual{background-color:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:12px 12px 0 var(--p5-red);padding:15px;transform:rotate(1deg)}.p5-doc-main-img{border:2px solid #333;width:100%;height:auto}.p5-doc-img-label{font-family:var(--font-p5-header);color:var(--p5-yellow);text-align:right;margin-top:8px;font-size:.9rem;font-weight:900}.p5-doc-section{border-bottom:4px solid var(--p5-charcoal);padding:80px 40px}@media (width>=1024px){.p5-doc-section{padding:100px 80px}}.dark-sec{background-color:var(--p5-black);color:var(--p5-white)}.light-sec{background-color:var(--p5-white);color:var(--p5-black)}.p5-sec-header{font-family:var(--font-p5-hand);color:var(--p5-white);background-color:var(--p5-black);box-shadow:-5px 5px 0 var(--p5-red);margin-bottom:45px;padding:5px 25px;font-size:3.5rem;display:inline-block;transform:skew(-12deg)}.p5-sec-header span{color:var(--p5-red);margin-right:15px}.p5-sec-header.red-header{background-color:var(--p5-red);box-shadow:-5px 5px 0 var(--p5-black)}.p5-sec-header.red-header span{color:var(--p5-white)}.section-intro{max-width:900px;margin-bottom:40px;font-size:1.3rem;font-weight:700;line-height:1.6}.p5-sec-grid{grid-template-columns:1fr;gap:50px;display:grid}@media (width>=1024px){.p5-sec-grid{grid-template-columns:1.2fr 1fr}}.p5-sec-left p{color:#ccc;font-size:1.1rem;line-height:1.7}.p5-sec-left em{color:var(--p5-red);font-style:normal;font-weight:700}.p5-card-skew{background-color:var(--p5-charcoal);border:3px solid var(--p5-white);box-shadow:8px 8px 0 var(--p5-red);padding:10px;transform:rotate(2deg)}.p5-card-img{border:1px solid #444;width:100%;height:auto}.p5-card-caption{color:#bbb;margin-top:8px;font-size:.9rem;font-style:italic}.p5-multiplicative-grid{grid-template-columns:1fr;gap:30px;display:grid}@media (width>=768px){.p5-multiplicative-grid{grid-template-columns:1fr 1fr}}.p5-mech-card{background-color:var(--p5-black);color:var(--p5-white);border:3px solid var(--p5-black);box-shadow:6px 6px 0 var(--p5-red);padding:30px;transition:transform .2s;transform:rotate(-.5deg)}.p5-mech-card:hover{transform:scale(1.02)rotate(.5deg)}.p5-mech-card h4{font-family:var(--font-p5-header);color:var(--p5-yellow);border-bottom:2px solid var(--p5-red);margin-bottom:12px;padding-bottom:5px;font-size:1.3rem;font-weight:900}.p5-mech-card p{color:#ddd;font-size:1.05rem;line-height:1.5}.p5-diagrams-gallery{flex-direction:column;gap:30px;display:flex}.p5-diagram-tabs{flex-wrap:wrap;gap:10px;display:flex}.p5-diagram-tab{background-color:var(--p5-charcoal);color:var(--p5-white);border:2px solid var(--p5-white);font-family:var(--font-p5-header);cursor:pointer;padding:8px 18px;font-size:1rem;font-weight:900;transition:all .15s;transform:skew(-10deg)}.p5-diagram-tab:hover{background-color:var(--p5-yellow);border-color:var(--p5-yellow);color:var(--p5-black);box-shadow:-4px 4px 0 var(--p5-white)}.p5-diagram-tab.active{background-color:var(--p5-red);border-color:var(--p5-red);color:var(--p5-white);box-shadow:-4px 4px 0 var(--p5-white)}.p5-diagram-display{background-color:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:10px 10px 0 var(--p5-red);padding:20px}.clickable-diagram-wrapper{cursor:pointer;transition:transform .2s;position:relative;overflow:hidden}.clickable-diagram-wrapper:hover{transform:scale(1.01)}.p5-diagram-zoom-indicator{color:var(--p5-white);font-family:var(--font-p5-header);border:2px solid var(--p5-red);pointer-events:none;opacity:.85;background-color:#000000d9;padding:6px 14px;font-size:.85rem;font-weight:900;transition:all .2s;position:absolute;bottom:15px;right:15px;transform:skew(-10deg)}.clickable-diagram-wrapper:hover .p5-diagram-zoom-indicator{background-color:var(--p5-red);border-color:var(--p5-white);opacity:1;transform:skew(-10deg)scale(1.05)}.p5-diagram-lightbox{z-index:1500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#080808f2;justify-content:center;align-items:center;width:100vw;height:100vh;padding:30px;display:flex;position:fixed;top:0;left:0}.p5-lightbox-card{background-color:var(--p5-charcoal);border:4px solid var(--p5-white);box-shadow:15px 15px 0 var(--p5-red);flex-direction:column;width:100%;max-width:900px;animation:.25s cubic-bezier(.19,1,.22,1) forwards lightbox-appear;display:flex;position:relative}@keyframes lightbox-appear{0%{opacity:0;transform:scale(.9)rotate(-1deg)}to{opacity:1;transform:scale(1)rotate(0)}}.p5-lightbox-close{background-color:var(--p5-red);width:45px;height:45px;color:var(--p5-white);border:3px solid var(--p5-white);cursor:pointer;font-size:2rem;line-height:1;font-family:var(--font-p5-header);box-shadow:4px 4px 0 var(--p5-black);z-index:20;justify-content:center;align-items:center;font-weight:900;transition:all .15s;display:flex;position:absolute;top:-20px;right:-20px;transform:rotate(45deg)}.p5-lightbox-close:hover{background-color:var(--p5-white);color:var(--p5-black);box-shadow:-4px 4px 0 var(--p5-red);transform:rotate(45deg)scale(1.1)}.p5-lightbox-img-wrapper{border-bottom:3px solid var(--p5-white);background-color:#0c0c0c;justify-content:center;align-items:center;max-height:70vh;padding:20px;display:flex;overflow:hidden}.p5-lightbox-img-wrapper img{object-fit:contain;max-width:100%;max-height:65vh}.p5-lightbox-caption{color:var(--p5-white);padding:25px}.p5-lightbox-caption h4{font-family:var(--font-p5-header);color:var(--p5-yellow);text-transform:uppercase;margin-bottom:10px;font-size:1.6rem;font-weight:900}.p5-lightbox-caption p{color:#ccc;font-size:1.05rem;line-height:1.6}.p5-diag-image-wrapper{background-color:#0f0f0f;border:2px solid #333;justify-content:center;align-items:center;min-height:250px;padding:10px;display:flex;overflow:hidden}.p5-diag-image-wrapper img{object-fit:contain;max-width:100%;height:auto;max-height:480px}.p5-diag-meta{border-top:1px solid #444;margin-top:15px;padding-top:15px}.p5-diag-meta h5{font-family:var(--font-p5-header);color:var(--p5-yellow);margin-bottom:5px;font-size:1.4rem;font-weight:900}.p5-diag-meta p{color:#ddd;font-size:1.05rem;line-height:1.6}.p5-code-container{flex-direction:column;gap:20px;display:flex}.p5-code-tabs{flex-wrap:wrap;gap:10px;display:flex}.p5-code-tab{color:#333;border:2px solid var(--p5-black);font-family:var(--font-p5-header);cursor:pointer;background-color:#eee;padding:8px 18px;font-weight:900;transition:all .15s;transform:skew(-10deg)}.p5-code-tab:hover,.p5-code-tab.active{background-color:var(--p5-black);color:var(--p5-white);box-shadow:-4px 4px 0 var(--p5-red)}.p5-code-flex-layout{grid-template-columns:1fr;align-items:start;gap:30px;display:grid}@media (width>=1024px){.p5-code-flex-layout{grid-template-columns:1.3fr 1fr}}.p5-code-window{border:4px solid var(--p5-black);box-shadow:10px 10px 0 var(--p5-red);background-color:#1e1e1e;border-radius:4px;overflow:hidden}.p5-code-header{border-bottom:2px solid var(--p5-black);background-color:#121212;align-items:center;gap:8px;padding:10px 20px;display:flex}.p5-code-header .dot{border-radius:50%;width:12px;height:12px;display:inline-block}.p5-code-header .dot.red{background-color:#ff5f56}.p5-code-header .dot.yellow{background-color:#ffbd2e}.p5-code-header .dot.green{background-color:#27c93f}.p5-code-header .file-name{color:#888;margin-left:15px;font-family:monospace;font-size:.9rem;font-weight:700}.p5-code-pre{background-color:#1a1a1a;margin:0;padding:20px;overflow-x:auto}.p5-code-pre code{color:#d4d4d4;font-family:Consolas,Courier New,Courier,monospace;font-size:.95rem;line-height:1.5}.p5-code-keyword{color:#569cd6;font-weight:700}.p5-code-comment{color:#6a9955;font-style:italic}.p5-code-string{color:#d69d85}.p5-code-number{color:#b5cea8}.p5-code-attribute{color:gold}.p5-code-explanation-card{background-color:var(--p5-black);color:var(--p5-white);border:4px solid var(--p5-white);box-shadow:8px 8px 0 var(--p5-red);padding:30px;transition:all .2s;transform:rotate(.5deg)}.p5-code-explanation-card:hover{box-shadow:-8px 8px 0 var(--p5-yellow);transform:rotate(-.5deg)scale(1.01)}.p5-explanation-badge{background-color:var(--p5-red);color:var(--p5-white);font-family:var(--font-p5-header);box-shadow:3px 3px 0 var(--p5-white);margin-bottom:15px;padding:4px 12px;font-size:.9rem;font-weight:900;display:inline-block;transform:skew(-10deg)}.p5-code-explanation-card h3{font-family:var(--font-p5-header);color:var(--p5-yellow);text-transform:uppercase;margin-bottom:15px;font-size:1.8rem;font-weight:900}.explanation-desc{color:#ccc;margin-bottom:20px;font-size:1.05rem;line-height:1.6}.explanation-divider{background:repeating-linear-gradient(90deg, var(--p5-red), var(--p5-red) 10px, transparent 10px, transparent 20px);height:2px;margin:20px 0}.p5-code-explanation-card h4{font-family:var(--font-p5-header);color:var(--p5-white);letter-spacing:1px;margin-bottom:12px;font-size:1.1rem;font-weight:900}.explanation-points{flex-direction:column;gap:10px;list-style:none;display:flex}.explanation-points li{color:#bbb;padding-left:20px;font-size:.95rem;line-height:1.5;position:relative}.explanation-points li:before{content:"★";color:var(--p5-red);font-weight:700;position:absolute;left:0}.p5-rules-grid{grid-template-columns:1fr;gap:50px;display:grid}@media (width>=1024px){.p5-rules-grid{grid-template-columns:1fr 1.2fr}}.p5-rules-list{flex-direction:column;gap:15px;list-style:none;display:flex}.p5-rules-list li{color:#ccc;padding-left:25px;font-size:1.05rem;line-height:1.6;position:relative}.p5-rules-list li:before{content:"★";color:var(--p5-red);font-weight:700;position:absolute;left:0}.p5-controls-table{border-collapse:collapse;background-color:var(--p5-charcoal);border:3px solid var(--p5-white);width:100%;font-size:.95rem}.p5-controls-table th,.p5-controls-table td{text-align:left;padding:12px 15px}.p5-controls-table th{background-color:var(--p5-red);color:var(--p5-white);font-family:var(--font-p5-header);letter-spacing:1px;font-weight:900}.p5-controls-table tr{border-bottom:1px solid #333}.p5-controls-table tr:hover{background-color:#222}.p5-controls-table td.kbd{color:var(--p5-yellow);font-family:monospace;font-weight:700}.p5-controls-table td.pad{color:#bbb}.p5-designer-guide h3{font-family:var(--font-p5-header);color:var(--p5-black);margin-bottom:30px;font-size:1.6rem;font-weight:900}.p5-steps-grid{grid-template-columns:1fr;gap:30px;display:grid}@media (width>=768px){.p5-steps-grid{grid-template-columns:1fr 1fr}}.p5-step-card{background-color:var(--p5-white);border:4px solid var(--p5-black);box-shadow:6px 6px 0 var(--p5-red);flex-direction:column;gap:15px;padding:25px;transition:all .2s;display:flex;transform:rotate(-.5deg)}.p5-step-card:hover{box-shadow:-6px 6px 0 var(--p5-black);transform:rotate(.5deg)scale(1.02)}.p5-step-header{align-items:center;gap:15px;display:flex}.p5-step-header .step-num{font-family:var(--font-p5-hand);color:var(--p5-white);background-color:var(--p5-black);padding:2px 12px;font-size:2.2rem;line-height:1;transform:skew(-10deg)}.p5-step-header h5{font-family:var(--font-p5-header);color:var(--p5-red);text-transform:uppercase;font-size:1.25rem;font-weight:900}.p5-step-card p{color:#333;font-size:1rem;line-height:1.5}.p5-step-image{border:2px solid var(--p5-black);background-color:#f0f0f0;justify-content:center;align-items:center;margin-top:auto;padding:8px;display:flex;overflow:hidden}.p5-step-image img{object-fit:contain;border:1px solid #ddd;max-width:100%;height:auto}.p5-doc-footer{background-color:var(--p5-black);border-top:8px solid var(--p5-red);text-align:center;padding:80px 40px}@media (width>=1024px){.p5-doc-footer{padding:100px 80px}}.p5-bib-list{text-align:left;flex-direction:column;gap:15px;max-width:800px;margin:0 auto;list-style:none;display:flex}.p5-bib-list li{color:#aaa;border-left:3px solid var(--p5-red);padding-left:15px;font-size:1rem;line-height:1.5}.p5-slogan-ribbon-container{z-index:-2;pointer-events:none;width:100vw;position:fixed;top:55%;left:0}.p5-slogan-ribbon{justify-content:center;align-items:center;padding:clamp(10px,1.8vw,25px) 0;display:flex;position:relative;transform:rotate(-7deg)}.p5-slogan-ribbon:before{content:"";background-color:var(--p5-white);border-top:clamp(4px, .7vw, 10px) solid var(--p5-black);border-bottom:clamp(4px, .7vw, 10px) solid var(--p5-black);z-index:-1;width:140vw;height:100%;position:absolute;top:0;left:-20vw;box-shadow:0 15px 35px #0009}.p5-slogan-content{justify-content:center;align-items:center;gap:clamp(10px,2.8vw,40px);width:100%;max-width:95vw;margin:0 auto;display:flex}.p5-slogan-word{align-items:center;gap:clamp(3px,.5vw,8px);display:flex}.p5-slogan-letter-box{font-family:var(--font-p5-ransom);text-transform:uppercase;box-shadow:clamp(2px, .4vw, 6px) clamp(2px, .4vw, 6px) 0px var(--p5-black);-webkit-user-select:none;user-select:none;white-space:nowrap;padding:clamp(4px,1vw,10px) clamp(7px,1.6vw,18px);font-size:clamp(1.1rem,3.8vw,3.8rem);font-weight:900;line-height:1;display:inline-block}@media (width<=768px){.p5-slogan-ribbon-container{top:50%}}.app-container{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}main{flex-direction:column;flex-grow:1;gap:140px;width:100%;max-width:1200px;margin:0 auto;padding:80px 40px 40px;display:flex}@media (width<=768px){main{gap:85px;padding:60px 20px 40px}}.page-container{width:100%;animation:.25s cubic-bezier(.175,.885,.32,1.275) both p5-slam-in}@keyframes p5-slam-in{0%{opacity:0;transform:scale(.9)rotate(-3deg)translateY(30px)}to{opacity:1;transform:scale(1)rotate(0)translateY(0)}}