*,*:after,*:before{box-sizing:border-box}:root{font-size:16px;--color-text: #ffffff;--color-bg: #fff;--color-link: #898989;--color-link-hover: #fff;--page-padding: 1.5rem}body{margin:0;color:var(--color-text);background-color:var(--color-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.js canvas{position:fixed;top:0;left:0}.js .loading:before,.js .loading:after{content:"";position:fixed;z-index:1000}.js .loading:before{top:0;left:0;width:100%;height:100%;background:var(--color-bg)}.js .loading:after{top:50%;left:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;opacity:.4;background:var(--color-link);animation:loaderAnim .7s linear infinite alternate forwards}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{text-decoration:none;color:var(--color-link);outline:none;cursor:pointer}a:hover{text-decoration:underline;color:var(--color-link-hover);outline:none}a:focus{outline:none;background:#d3d3d3}a:focus:not(:focus-visible){background:transparent}a:focus-visible{outline:2px solid red;background:transparent}.unbutton{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer}.unbutton:focus{outline:none}.frame{text-transform:uppercase;padding:var(--page-padding);position:relative;display:grid;z-index:1000;width:100%;height:100%;grid-row-gap:1rem;grid-column-gap:2rem;pointer-events:none;justify-items:start;grid-template-columns:auto auto;grid-template-areas:"title" "back" "archive" "github" "sponsor" "demos" "tags"}.frame #cdawrap{justify-self:start}.frame a{pointer-events:auto}.frame__title{grid-area:title;font-size:inherit;margin:0;color:#fff}.frame__back{grid-area:back;justify-self:start}.frame__archive{grid-area:archive;justify-self:start}.frame__sub{grid-area:sub}.frame__github{grid-area:github}.frame__tags{grid-area:tags;display:flex;flex-wrap:wrap;gap:1rem}.frame__hire{grid-area:hire}.frame__demos{grid-area:demos;display:flex;gap:1rem;margin-right:1em}.frame__demos span{opacity:.8}.frame__demos a.selected{font-weight:700;color:var(--color-link-hover)}.content{padding:var(--page-padding);display:flex;flex-direction:column;width:100vw;position:relative}@media screen and (min-width: 53em){body{--page-padding: 2rem 3rem}.frame{position:fixed;top:0;left:0;width:100%;height:100%;grid-template-columns:auto auto auto auto 1fr;grid-template-rows:auto auto;align-content:space-between;grid-template-areas:"title back github archive sponsor" "tags tags demos demos demos"}.frame #cdawrap,.frame__demos{justify-self:end}.content{min-height:100vh;justify-content:center;align-items:center}}*{margin:0;padding:0;box-sizing:border-box}#mainCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#0a0a0a;color:#fff;overflow:hidden;height:100vh;font-weight:400;line-height:1.5}.container{display:flex;height:100vh;padding:20px;border:1px solid #222;margin:10px;height:calc(100vh - 20px);border-radius:12px;background:linear-gradient(135deg,#0a0a0a,#111)}.sidebar{width:180px;padding:30px 20px;display:flex;flex-direction:column;z-index:100;position:relative}.name{font-size:2.5em;font-weight:500;margin-bottom:8px;line-height:1.1;letter-spacing:-.02em}.title{font-size:1em;color:#666;margin-bottom:50px;font-weight:400;letter-spacing:.02em}.nav-menu{list-style:none}.nav-item{margin-bottom:8px;cursor:pointer;font-size:1.1em;color:#888;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:12px;position:relative;border-radius:6px;padding:8px 0 8px 12px;margin-left:-12px}.nav-dot{width:4px;height:4px;border-radius:50%;background-color:#444;transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0}.nav-text{font-weight:400;letter-spacing:.01em}.nav-item:hover{color:#fff;background-color:#ffffff08}.nav-item:hover .nav-dot{background-color:#fff;transform:scale(1.2)}.nav-item.active{color:#fff;background-color:#ffffff0d;font-weight:500}.nav-item.active .nav-dot{background-color:#fff;width:6px;height:6px;box-shadow:0 0 8px #ffffff4d}.center-content{flex:1;position:relative;display:flex;align-items:center;justify-content:center;margin:0 20px;border-radius:8px;overflow:hidden}#particles-canvas{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:8px}.right-content{width:440px;padding:30px 20px;overflow-y:auto;z-index:100;position:relative}.content-section{display:none}.content-section.active{display:block;animation:fadeIn .6s cubic-bezier(.4,0,.2,1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.content-section h2{font-size:1.6em;margin-bottom:20px;color:#fff;font-weight:600;letter-spacing:-.01em}.content-section p{line-height:1.6;margin-bottom:16px;color:#ccc;font-size:1.1em}.project-item{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #222;transition:all .3s ease}.project-item:last-child{border-bottom:none}.project-item:hover{transform:translateY(-2px);background:#ffffff05;padding:16px;margin:-16px -16px 12px;border-radius:8px}.project-title{font-size:1.3em;color:#fff;margin-bottom:8px;font-weight:500;letter-spacing:-.005em}.project-description{color:#aaa;margin-bottom:12px;line-height:1.5;font-size:1.05em}.project-tech{font-size:.8em;color:#666;font-family:JetBrains Mono,Consolas,monospace;letter-spacing:.02em;background:#ffffff08;padding:4px 8px;border-radius:4px;display:inline-block}.contact-info{margin-bottom:24px}.contact-label{color:#666;font-size:.8em;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;font-weight:500}.contact-value{color:#fff;margin-bottom:16px;font-size:.95em;font-family:JetBrains Mono,Consolas,monospace}.footer{position:absolute;bottom:30px;left:20px;font-size:.75em;color:#555;font-weight:400}.right-content::-webkit-scrollbar{width:4px}.right-content::-webkit-scrollbar-track{background:transparent}.right-content::-webkit-scrollbar-thumb{background:#333;border-radius:2px}.right-content::-webkit-scrollbar-thumb:hover{background:#444}.toggle-handle{display:none}@media (max-width: 768px){.container{flex-direction:column;padding:15px;margin:5px;height:calc(100vh - 10px)}.sidebar{width:100%;flex-direction:row;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #222}.sidebar .footer{display:none}.name{font-size:1.5em;margin-bottom:2px}.title{font-size:.8em;margin-bottom:0}.nav-menu{display:flex;gap:8px}.nav-item{margin-bottom:0;padding:6px 8px;font-size:.8em}.nav-text{display:none}.nav-dot{width:6px;height:6px}.nav-item.active .nav-dot{width:8px;height:8px}.center-content{flex:1;margin:10px 0;min-height:200px}.right-content{width:100%;padding:20px;overflow-y:auto}.content-section h2{font-size:1.2em}.content-section p{font-size:.9em}}@media (max-width: 480px){.container{padding:10px;margin:0;height:100vh;border-radius:0;border:none}.sidebar{padding:15px}.name{font-size:1.3em}.center-content{min-height:150px}.right-content{padding:15px}}@media (max-width: 768px){.container{flex-direction:column;height:100vh;overflow:hidden}.sidebar{width:100%;flex-shrink:0;border-bottom:1px solid #222;display:flex;justify-content:space-between;align-items:center;padding:15px}.toggle-handle{display:block;position:sticky;top:0;z-index:20;width:100%;height:40px;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;text-align:center;padding:8px 0;line-height:1}.toggle-handle:focus{outline:none}.toggle-handle i{pointer-events:none}.right-content{position:fixed;left:0;right:0;bottom:0;height:50vh;background:#ffffff14;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-top-left-radius:16px;border-top-right-radius:16px;border:1px solid rgba(255,255,255,.1);box-shadow:0 -4px 12px #0006;overflow-y:auto;-webkit-overflow-scrolling:touch}.frame__demos{position:fixed;top:0;right:0;z-index:9999;background:#0009;padding:6px 10px;border-bottom-left-radius:8px}.nav-text{display:none}}.content-section{opacity:0;transform:translate(20px);transition:opacity .3s ease,transform .3s ease}.content-section.active{opacity:1;transform:translate(0)}a.underline-link{text-decoration:underline;color:var(--color-link)}a.underline-link:hover{color:var(--color-link-hover)}.skills-list{padding-left:1.2em;margin-bottom:30px;color:#ccc;font-size:1.05em;line-height:1.6}.skills-list li{margin-bottom:12px}.language-bar div{margin-bottom:10px}.language-bar span{display:inline-block;width:100px;color:#ccc}.bar{display:inline-block;height:6px;border-radius:4px;background-color:#444;margin-left:10px}.bar.full{width:100px;background-color:#fff}.bar.four{width:80px;background-color:#fff}