*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--white:#fafafa;--black:#1a1a1a;--gray:#888;--light-gray:#e0e0e0;--line-width:1.5px;--bg:var(--white);--text:var(--black);--text-muted:#333;--text-secondary:#444;--text-dim:#555;--nav-bg:#fafafad9;--card-shadow:var(--light-gray);transition:background-color .5s,color .5s}body.dark{--bg:#0a0a0a;--text:#eaeaea;--gray:#999;--light-gray:#2a2a2a;--text-muted:#ccc;--text-secondary:#bbb;--text-dim:#aaa;--nav-bg:#0a0a0ad9;--card-shadow:#222}html{scroll-behavior:auto}body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,sans-serif;line-height:1.6;transition:background-color .5s,color .5s;overflow-x:hidden}#loader{z-index:99999;background:var(--bg);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .6s,visibility .6s;display:flex;position:fixed;top:0;left:0}#loader.done{opacity:0;visibility:hidden;pointer-events:none}.loader-pencil{width:120px;height:20px}.loader-stroke{fill:none;stroke:var(--text);stroke-width:2px;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200px;animation:1.2s ease-in-out forwards loader-draw}@keyframes loader-draw{0%{stroke-dashoffset:200px}to{stroke-dashoffset:0}}#bg-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}#draw-canvas{z-index:9999;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}.pen-cursor{background:var(--text);pointer-events:none;z-index:10000;border-radius:50%;width:10px;height:10px;transition:transform .15s,background .5s;position:fixed;transform:translate(-50%,-50%)}.pen-cursor.drawing{transform:translate(-50%,-50%)scale(.7)}body:has(#draw-canvas){cursor:none}body:has(#draw-canvas) a{cursor:none}body:has(#draw-canvas) button{cursor:none}body:has(#draw-canvas) input{cursor:none}body:has(#draw-canvas) textarea{cursor:none}body:has(#draw-canvas) select{cursor:none}body:has(#draw-canvas) [role=button]{cursor:none}body.is-drawing{-webkit-user-select:none;user-select:none}#nav{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:var(--nav-bg);border-bottom:var(--line-width) solid transparent;justify-content:space-between;align-items:center;padding:1.2rem 3rem;transition:border-color .3s,background .5s;display:flex;position:fixed;top:0;left:0;right:0}#nav.scrolled{border-bottom-color:var(--light-gray)}.nav-logo{color:var(--text);letter-spacing:-.5px;font-size:1.1rem;font-weight:600;text-decoration:none;transition:color .5s}.nav-links{gap:2rem;display:flex}.nav-links a{color:var(--text);font-size:.9rem;font-weight:400;text-decoration:none;transition:opacity .3s,color .5s;position:relative}.nav-links a:after{content:"";background:var(--text);width:0;height:1.5px;transition:width .3s,background .5s;position:absolute;bottom:-4px;left:0}.nav-links a:hover:after{width:100%}.nav-links a:hover{opacity:.7}.nav-toggle{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:5px;padding:4px;display:none}.nav-toggle span{background:var(--text);width:24px;height:1.5px;transition:transform .3s,opacity .3s,background .5s}.section{z-index:1;justify-content:center;align-items:center;min-height:100vh;padding:6rem 3rem;display:flex;position:relative}.section-container{width:100%;max-width:1100px}.section-header{margin-bottom:4rem}.section-header h2{letter-spacing:-1px;font-size:2.5rem;font-weight:600}.header-underline{width:180px;height:12px;margin-top:.5rem}.sketch-line{fill:none;stroke:var(--text);stroke-width:var(--line-width);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000px;transition:stroke .5s}.sketch-line.drawn{stroke-dashoffset:0}.hero{flex-direction:column;justify-content:center;min-height:100vh;padding-top:0}.hero-content{text-align:center}.hero-greeting{color:var(--gray);opacity:0;letter-spacing:-.5px;margin-bottom:.5rem;font-size:1.2rem;font-weight:300;transform:translateY(20px)translate(-6px)}.hero-name{letter-spacing:-3px;margin-bottom:.5rem;font-size:clamp(3rem,8vw,6rem);font-weight:500;line-height:1.1}.typewriter,.typewriter-sub{display:inline}.cursor{width:0;margin-left:2px;font-weight:300;animation:1.8s step-end infinite blink;display:inline-block;position:relative;overflow:visible}@keyframes blink{50%{opacity:0}}.hero-title{color:var(--gray);opacity:0;margin-bottom:2rem;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:300;transform:translateY(20px)}.hero-line{opacity:0;width:300px;margin:0 auto 2.5rem}.hero-line svg{width:100%;height:20px}.hero-tip{color:var(--gray);opacity:0;font-size:.9rem;font-style:italic;transition:color .5s;transform:translateY(20px)}.scroll-indicator{opacity:0;animation:2s ease-in-out infinite float;position:absolute;bottom:3rem;left:50%;transform:translate(-50%)}.scroll-arrow{width:24px;height:40px}.scroll-arrow .sketch-line{stroke-dasharray:0;stroke-dashoffset:0}@keyframes float{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(8px)}}.scroll-label{letter-spacing:2px;text-transform:uppercase;color:var(--gray);margin-bottom:.5rem;font-size:.7rem}.corner-bracket{border-color:var(--light-gray);border-style:solid;width:40px;height:40px;transition:border-color .5s;position:absolute}.corner-bracket.top-left{border-width:2px 0 0 2px;top:8rem;left:3rem}.corner-bracket.top-right{border-width:2px 2px 0 0;top:8rem;right:3rem}.corner-bracket.bottom-left{border-width:0 0 2px 2px;bottom:6rem;left:3rem}.corner-bracket.bottom-right{border-width:0 2px 2px 0;bottom:6rem;right:3rem}.sketch-doodles{pointer-events:none;z-index:1;width:100%;height:100vh;position:absolute;top:0;left:0;overflow:hidden}.doodle{visibility:hidden;position:absolute;opacity:0!important}.doodle.visible{visibility:visible;transition:opacity .8s;opacity:1!important}.doodle .sketch-line{stroke:var(--light-gray);stroke-width:1.5px;stroke-dasharray:200;stroke-dashoffset:200px}.doodle-star{width:35px;top:15%;left:5%}.doodle-circle{width:45px;top:30%;right:6%}.doodle-arrow{width:55px;top:50%;left:4%}.doodle-spiral{width:45px;top:65%;right:5%}.doodle-brackets{width:35px;top:80%;left:6%}.doodle-zigzag{width:70px;top:20%;right:4%}.doodle-dots{width:55px;top:45%;left:3%}.doodle-cross{width:25px;top:75%;right:4%}.section-divider{z-index:1;padding:0 3rem;position:relative;overflow:hidden}.section-divider svg{width:100%;height:30px;display:block}.divider-line{stroke:var(--light-gray);stroke-width:1.5px}.margin-note{color:var(--light-gray);letter-spacing:1px;writing-mode:vertical-rl;font-family:Courier New,monospace;font-size:.7rem;transition:color .5s;position:absolute}.margin-note-left{top:50%;left:1.5rem;transform:translateY(-50%)rotate(180deg)}.margin-note-right{top:50%;right:1.5rem;transform:translateY(-50%)}.section-accents{pointer-events:none;z-index:0;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.section-accent{pointer-events:none;position:absolute}.section-accent .accent-line{stroke:var(--text);stroke-width:2px;stroke-dasharray:500;stroke-dashoffset:500px;opacity:.15;transition:stroke .5s}.accent-a1{width:120px;top:8%;right:5%}.accent-a2{width:55px;bottom:12%;right:12%}.accent-a3{width:80px;bottom:20%;left:3%}.accent-a4{width:50px;top:15%;left:6%}.accent-p1{width:130px;top:8%;right:4%}.accent-p2{width:70px;bottom:8%;left:4%}.accent-p3{width:60px;top:20%;left:5%}.accent-p4{width:100px;bottom:15%;right:8%}.accent-s1{width:80px;top:8%;right:5%}.accent-s2{width:110px;bottom:10%;left:3%}.accent-s3{width:60px;bottom:15%;right:10%}.accent-s4{width:65px;top:15%;left:5%}.accent-e1{width:140px;top:8%;left:4%}.accent-e2{width:65px;top:12%;right:5%}.accent-e3{width:80px;bottom:12%;right:8%}.accent-e4{width:55px;bottom:15%;left:6%}.accent-c1{width:60px;top:10%;right:6%}.accent-c2{width:100px;bottom:15%;left:4%}.accent-c3{width:50px;top:18%;left:8%}body:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(circle, var(--light-gray) .8px, transparent .8px);opacity:.4;will-change:opacity;background-size:30px 30px;width:100%;height:100%;transition:opacity .5s;position:fixed;top:0;left:0;transform:translateZ(0)}body.dark:before{opacity:.15}.about-grid{grid-template-columns:1.5fr 1fr;align-items:center;gap:4rem;display:grid}.about-text p{color:var(--text-muted);margin-bottom:1.2rem;font-size:1.05rem;line-height:1.8;transition:color .5s}#wireframe-canvas{width:300px;max-width:100%;height:300px;transform:translate(40px,-50px)}.cube-hint{opacity:0;align-items:center;gap:.4rem;display:flex;position:absolute;bottom:15%;right:-10px}.cube-hint-arrow{width:50px;height:35px}.cube-hint-arrow .accent-line{stroke:var(--text);stroke-width:2px;stroke-dasharray:200;stroke-dashoffset:200px;opacity:.5}.cube-hint-text{color:var(--gray);white-space:nowrap;letter-spacing:.5px;font-family:Courier New,monospace;font-size:.75rem;transition:color .5s}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;display:grid}.project-card{border:var(--line-width) solid var(--light-gray);border-radius:4px;padding:1.5rem;transition:border-color .3s,transform .3s,box-shadow .3s,background .5s}.project-card:hover{border-color:var(--text);box-shadow:4px 4px 0 var(--card-shadow);transform:translateY(-4px)}.project-sketch svg{width:100%;height:auto;margin-bottom:1rem}.project-sketch .sketch-line{stroke:var(--gray);stroke-width:1px}.project-card h3{margin-bottom:.5rem;font-size:1.3rem;font-weight:600}.project-card p{color:var(--text-dim);margin-bottom:1rem;font-size:.95rem;line-height:1.6;transition:color .5s}.project-tags{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.project-tags span{border:1px solid var(--light-gray);color:var(--gray);border-radius:2px;padding:.3rem .7rem;font-size:.8rem}.project-links{gap:1.2rem;display:flex}.project-links a{color:var(--text);font-size:.9rem;font-weight:500;text-decoration:none;transition:color .5s;position:relative}.project-links a:after{content:"";background:var(--text);width:100%;height:1px;transition:transform .3s,background .5s;position:absolute;bottom:-2px;left:0;transform:scaleX(0)}.project-links a:hover:after{transform:scaleX(1)}.skills-grid{grid-template-columns:repeat(3,1fr);gap:3rem;display:grid}.skill-category h3{border-bottom:var(--line-width) solid var(--light-gray);margin-bottom:1.2rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600;transition:border-color .5s}.skill-category ul{list-style:none}.skill-category li{align-items:center;gap:.7rem;padding:.5rem 0;font-size:.95rem;display:flex}.skill-dot{border:var(--line-width) solid var(--text);border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:border-color .5s}.timeline{padding-left:3rem;position:relative}.timeline:before{content:"";width:var(--line-width);background:var(--light-gray);position:absolute;top:0;bottom:0;left:8px}.timeline-item{padding-bottom:3rem;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-dot{width:20px;height:20px;position:absolute;top:.3rem;left:-2.85rem}.timeline-dot .sketch-line{stroke-dasharray:0;stroke-dashoffset:0;stroke:var(--text);fill:var(--bg);stroke-width:2px;transition:stroke .5s,fill .5s}.timeline-date{color:var(--gray);font-size:.85rem;font-weight:400}.timeline-content h3{margin:.3rem 0;font-size:1.2rem;font-weight:600}.timeline-company{color:var(--gray);margin-bottom:.5rem;font-size:.95rem}.timeline-content p:last-child{color:var(--text-secondary);font-size:.95rem;line-height:1.7;transition:color .5s}.contact-content{text-align:center;max-width:600px;margin:0 auto}.contact-text{color:var(--text-secondary);margin-bottom:2.5rem;font-size:1.1rem;line-height:1.8;transition:color .5s}.contact-links{flex-direction:column;align-items:center;gap:1.2rem;display:flex}.contact-link{color:var(--text);border:var(--line-width) solid var(--light-gray);border-radius:3px;align-items:center;gap:.8rem;width:fit-content;padding:.7rem 1.5rem;font-size:1rem;text-decoration:none;transition:border-color .3s,transform .2s,color .5s;display:flex}.contact-link:hover{border-color:var(--text);transform:translate(4px)}.contact-icon{width:22px;height:22px}.contact-icon .sketch-line{stroke-dasharray:0;stroke-dashoffset:0}footer{z-index:1;text-align:center;padding:2rem 3rem 3rem;position:relative}.footer-line{width:100%;height:12px;margin-bottom:1.5rem}.footer-line .sketch-line{stroke:var(--light-gray);stroke-dasharray:0;stroke-dashoffset:0}footer p{color:var(--gray);font-size:.85rem}.sound-toggle{border:var(--line-width) solid var(--light-gray);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:border-color .3s,transform .2s;display:flex;position:relative}.sound-toggle:hover{border-color:var(--text);transform:scale(1.1)}.sound-toggle svg{fill:none;width:18px;height:18px;stroke:var(--text);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .3s;position:absolute}.sound-toggle .icon-sound-on{opacity:1}.sound-toggle .icon-sound-off,.sound-toggle.muted .icon-sound-on{opacity:0}.sound-toggle.muted .icon-sound-off{opacity:1}.theme-toggle{border:var(--line-width) solid var(--light-gray);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:border-color .3s,transform .2s;display:flex;position:relative}.theme-toggle:hover{border-color:var(--text);transform:scale(1.1)}.theme-toggle svg{width:18px;height:18px;transition:opacity .4s,transform .4s;position:absolute}.theme-toggle .icon-sun{fill:none;stroke:var(--text);stroke-width:2px;stroke-linecap:round;opacity:1;transform:rotate(0)}.theme-toggle .icon-moon{fill:none;stroke:var(--text);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:rotate(-90deg)}body.dark .theme-toggle .icon-sun{opacity:0;transform:rotate(90deg)}body.dark .theme-toggle .icon-moon{opacity:1;transform:rotate(0)}body.dark .nav-links{background:var(--bg)}.reveal-up{opacity:0;will-change:transform, opacity;transform:translateY(40px)}.section{will-change:transform}@media (width<=768px){.section{padding:5rem 1.5rem}#nav{padding:1rem 1.5rem}.nav-links{background:var(--white);border-bottom:var(--line-width) solid var(--light-gray);flex-direction:column;gap:1rem;padding:1.5rem;display:none;position:absolute;top:100%;left:0;right:0}.nav-links.open,.nav-toggle{display:flex}.about-grid{grid-template-columns:1fr;gap:2rem}.about-sketch{display:none}.projects-grid{grid-template-columns:1fr}.skills-grid{grid-template-columns:1fr;gap:2rem}.hero-name{letter-spacing:-1.5px}.section-header h2{font-size:2rem}.sketch-doodles,.section-accents,.margin-note,.corner-bracket{display:none}.section-divider{padding:0 1.5rem}}