@font-face{font-family:Inter;src:url(/fonts/Inter.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:Fira Code;src:url(/fonts/FiraCode-VariableFont_wght.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: hsl(42, 24%, 97%);--bg-card: hsla(0, 0%, 100%, .72);--bg-card-hover: hsla(0, 0%, 100%, .94);--bg-ui-element: hsla(0, 0%, 0%, .025);--text-primary: hsl(0, 0%, 8%);--text-secondary: hsl(0, 0%, 32%);--text-muted: hsl(0, 0%, 48%);--text-shadow: none;--border-primary: hsla(0, 0%, 10%, .72);--border-secondary: hsla(0, 0%, 10%, .34);--border-hover: hsl(0, 0%, 5%);--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-2xl: 4rem;--spacing-3xl: 6rem;--radius-large: 3px;--radius-small: 2px;--font-mono: "Fira Code", Monaco, "Cascadia Code", "SF Mono", Consolas, monospace;--font-default: "Inter", -apple-system, BlinkM6cSystemFont, "Segoe UI", Roboto, sans-serif;--grid-line: hsla(0, 0%, 7%, .34);--grid-size: 30px;--max-page-width: 1600px;--code-variable: hsl(12, 54%, 38%);--code-function: hsl(209, 31%, 31%);--code-type: hsl(166, 26%, 30%);--code-bracket: hsl(38, 42%, 31%);--code-public: hsl(132, 24%, 30%);--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--blur-amount: 0px}.main{min-height:100vh;background:linear-gradient(90deg,hsla(0,0%,0%,.035) 1px,transparent 1px),linear-gradient(0deg,hsla(0,0%,0%,.03) 1px,transparent 1px),var(--bg-primary);background-size:120px 120px,120px 120px,auto;color:var(--text-primary);font-family:var(--font-default);position:relative;overflow:hidden}.dot-grid{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.dot-grid.soft{opacity:.6}.main-content{position:relative;z-index:2;padding:0 var(--spacing-xl);max-width:var(--max-page-width);margin:0 auto}.nav{position:relative;z-index:3;padding:var(--spacing-lg) var(--spacing-xl);display:flex;justify-content:right;align-items:center;gap:var(--spacing-lg)}.nav-link{color:var(--text-secondary);font-family:var(--font-mono);font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;transition:color var(--transition-fast);text-decoration:none;cursor:pointer;border-bottom:1px solid transparent}.nav-link:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}.hero-section{text-align:left;margin-bottom:var(--spacing-2xl);height:90vh;display:flex;flex-direction:column;justify-content:center;transition:height var(--transition-slow);position:relative}.hero-section.played{height:50vh}.hero-title{font-size:clamp(3rem,8vw,6rem);font-weight:360;line-height:1.1;margin:0 0 var(--spacing-sm) 0;letter-spacing:0}.hero-subtitle{font-size:clamp(1.2rem,2vw,1.7rem);color:var(--text-secondary);font-weight:300;margin:0;max-width:760px}.section-title{font-size:clamp(2.4rem,5vw,4rem);font-weight:360;line-height:1.1;margin:0 0 var(--spacing-sm) 0;letter-spacing:0}.section-subtitle{font-size:clamp(1rem,1.4vw,1.25rem);color:var(--text-secondary);font-weight:300;margin:0;max-width:680px}.cursor{display:inline-block;animation:blink 1s infinite;color:var(--text-primary);font-weight:100}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.feature-card{border:1px solid var(--border-primary);border-radius:var(--radius-large);padding:var(--spacing-lg);background-color:var(--bg-card);-webkit-backdrop-filter:blur(var(--blur-amount));backdrop-filter:blur(var(--blur-amount));transition:all var(--transition-normal);box-shadow:inset 0 0 0 1px #ffffffb3,8px 8px #00000009;position:relative}.feature-card:hover{border-color:var(--border-hover);background-color:var(--bg-card-hover);transform:translate(-2px,-2px);box-shadow:inset 0 0 0 1px #ffffffe6,11px 11px #0000000d}.feature-card:before,.feature-card:after{content:"";position:absolute;pointer-events:none}.feature-card:before{top:10px;right:10px;width:34px;height:34px;border-top:1px solid var(--border-secondary);border-right:1px solid var(--border-secondary)}.feature-card:after{right:10px;bottom:20px;width:24px;border-top:1px solid var(--border-secondary)}.feature-card{cursor:pointer}.about-title{font-size:1.5rem;font-weight:400;color:var(--text-primary)}.about-title{margin-bottom:var(--spacing-sm)}.about-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--spacing-md) var(--spacing-xl)}.code{font-family:var(--font-mono);color:var(--text-secondary);line-height:1.4;font-size:.88em;letter-spacing:.03em}.code.comment{color:var(--text-muted);font-style:normal;margin-bottom:var(--spacing-sm)}.code.indent{margin-left:var(--spacing-lg)}.code.variable{color:var(--code-variable);font-weight:500}.code.function{color:var(--code-function)}.code.type{color:var(--code-type)}.code.bracket{color:var(--code-bracket);font-weight:600}.code.access-modifier{font-weight:600}.code.public{color:var(--code-public);font-weight:600}.draft-note{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--spacing-sm)}.draft-note:before{content:"";width:36px;border-top:1px solid var(--border-secondary)}.video-showcase{display:flex;flex-direction:column;gap:var(--spacing-sm)}.video-container{position:relative;width:100%;border-radius:var(--radius-small);overflow:hidden}.showcase-video{width:100%;height:auto;max-height:200px;object-fit:cover;border-radius:var(--radius-small)}.video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm);opacity:0;transition:opacity var(--transition-normal)}.video-container:hover .video-controls{opacity:1}.video-nav-btn{background:#fff3;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background-color var(--transition-fast)}.video-nav-btn:hover{background:#ffffff4d}.video-title{color:#fff;font-size:.9rem;font-weight:500;text-shadow:var(--text-shadow)}.video-indicators{display:flex;justify-content:center;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.indicator{width:8px;height:8px;border-radius:50%;border:none;background-color:var(--border-secondary);cursor:pointer;transition:background-color var(--transition-fast)}.indicator.active{background-color:var(--text-primary)}.indicator:hover{background-color:var(--border-hover)}.ui-mockup{display:flex;flex-direction:column;gap:.8rem}.ui-header{border:1px solid var(--border-secondary);border-radius:var(--radius-small);padding:var(--spacing-xs);font-size:.8rem;color:var(--text-muted);text-align:center}.ui-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xs)}.ui-element,.ui-element-full{border:1px solid var(--border-secondary);border-radius:var(--radius-small);background-color:var(--bg-ui-element)}.ui-element{height:2rem}.ui-element-full{height:1.5rem}.about-section{margin-top:var(--spacing-3xl);text-shadow:var(--text-shadow);padding-bottom:var(--spacing-xl)}.about-description p{font-size:1.2rem;line-height:1.6;color:var(--text-primary);margin-bottom:var(--spacing-sm);max-width:820px}.about-description p:last-child{margin-bottom:0}.skill-category h3{font-size:1.2rem;font-weight:400;margin-bottom:var(--spacing-sm);color:var(--text-primary);border-bottom:1px solid var(--border-primary);padding-bottom:var(--spacing-xs)}.skill-category ul{list-style:none;padding:0;margin:0}.skill-category li{color:var(--text-primary);padding:.3rem 0;font-size:1.2rem;margin-left:0;border-bottom:1px solid hsla(0,0%,0%,.08);transition:color var(--transition-fast)}.skill-category li:before{content:"+";display:inline-block;width:1.4rem;color:var(--text-muted);font-family:var(--font-mono)}.footer{position:relative;z-index:2;margin-top:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-xl);text-align:center}@media (max-width: 1200px){.about-grid{grid-template-columns:1fr;gap:var(--spacing-lg)}.about-description{order:-1}}@media (max-width: 768px){.nav{padding:var(--spacing-md) var(--spacing-lg)}.nav-right{gap:var(--spacing-md)}.main-content{padding:0 var(--spacing-lg)}.feature-card{padding:var(--spacing-md)}.about-description p{font-size:.9rem}.footer{padding:var(--spacing-md) var(--spacing-lg)}}.projects-home-section{scroll-margin-top:var(--spacing-2xl);margin-top:var(--spacing-2xl)}.projects-section-header,.filter-section{margin-bottom:var(--spacing-xl)}.filter-pills{display:flex;flex-wrap:wrap;gap:var(--spacing-md)}.filter-pill{padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--border-primary);background:transparent;color:var(--text-secondary);border-radius:20px;cursor:pointer;font-size:.9rem;font-family:var(--font-mono);letter-spacing:.05em;transition:all .2s ease}.filter-pill:hover{border-color:var(--text-primary);color:var(--text-primary)}.filter-pill.active{background:var(--text-primary);color:#fff;border-color:var(--text-primary)}.project-category-section{margin-bottom:var(--spacing-3xl)}.project-category-header{font-family:var(--font-mono);font-size:.9rem;margin-bottom:var(--spacing-lg);color:var(--text-secondary);letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border-primary);padding-bottom:var(--spacing-xs)}.project-category-close{font-family:var(--font-mono);font-size:1.4rem;color:var(--text-secondary);margin-top:var(--spacing-md)}.project-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);padding-left:0}.project-card{cursor:pointer;display:flex;flex-direction:column;gap:var(--spacing-sm)}.project-card-title{font-size:1.3rem;font-weight:460;color:var(--text-primary)}.project-card-subtitle{font-size:.9rem;color:var(--text-secondary);flex:1;line-height:1.5}.project-card-labels{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.project-label{display:inline-block;padding:2px 8px;font-size:.75rem;font-family:var(--font-mono);color:var(--text-secondary);border:1px solid var(--border-primary);border-radius:12px;letter-spacing:.03em}.project-card-footer{margin-top:auto;padding-top:var(--spacing-sm);border-top:1px solid var(--border-primary)}@media (max-width: 1200px){.project-cards-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.project-cards-grid{grid-template-columns:1fr;padding-left:0}}.project-detail-content{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-3xl)}.back-button{background:none;border:1px solid var(--border-secondary);border-radius:var(--radius-small);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);margin-bottom:var(--spacing-xl);display:inline-flex;align-items:center;gap:var(--spacing-xs);font-family:var(--font-mono);font-size:1rem;color:var(--text-secondary);transition:color var(--transition-fast)}.back-button:hover{color:var(--text-primary);border-color:var(--border-hover);background:var(--bg-card-hover)}.project-loading,.project-error{padding:var(--spacing-xl) 0}.project-detail-header{margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--border-primary);position:relative}.project-detail-header:after{content:"";position:absolute;left:0;bottom:-8px;width:120px;border-top:1px solid var(--border-secondary)}.project-detail-title{font-size:clamp(2rem,5vw,4rem);font-weight:380;margin:var(--spacing-sm) 0;line-height:1.2}.project-detail-subtitle{font-size:1.2rem;color:var(--text-secondary);line-height:1.5}.markdown-content{max-width:860px;color:var(--text-primary);font-family:var(--font-default);font-size:1.1rem;line-height:1.8}.markdown-content h1{font-size:2rem;font-weight:400;margin:var(--spacing-2xl) 0 var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-primary);color:var(--text-primary)}.markdown-content h2{font-size:1.5rem;font-weight:400;margin:var(--spacing-xl) 0 var(--spacing-sm);color:var(--text-primary)}.markdown-content h3{font-size:1.2rem;font-weight:500;margin:var(--spacing-lg) 0 var(--spacing-sm);color:var(--text-secondary)}.markdown-content h4{font-size:1rem;font-weight:600;margin:var(--spacing-md) 0 var(--spacing-xs);color:var(--text-secondary)}.markdown-content p{margin-bottom:var(--spacing-md);color:var(--text-primary)}.markdown-content a{color:var(--code-function);text-decoration:underline;text-underline-offset:3px}.markdown-content a:hover{color:var(--text-primary)}.markdown-content ul,.markdown-content ol{margin:var(--spacing-sm) 0 var(--spacing-md) var(--spacing-xl)}.markdown-content li{margin-bottom:var(--spacing-xs)}.markdown-content blockquote{border-left:3px solid var(--border-secondary);padding-left:var(--spacing-md);margin:var(--spacing-md) 0;color:var(--text-secondary);font-style:italic}.markdown-content hr{border:none;border-top:1px solid var(--border-primary);margin:var(--spacing-2xl) 0}.markdown-content img{max-width:100%;border-radius:var(--radius-small);border:1px solid var(--border-secondary);margin:var(--spacing-md) 0}.markdown-content video{max-width:100%;border-radius:var(--radius-small);border:1px solid var(--border-secondary);margin:var(--spacing-md) 0}.markdown-content iframe{max-width:100%;border-radius:var(--radius-small);border:1px solid var(--border-secondary);margin:var(--spacing-md) 0}.markdown-content button{background:none;border:1px solid var(--border-primary);border-radius:var(--radius-small);color:var(--text-primary);padding:var(--spacing-xs) var(--spacing-md);font-family:var(--font-mono);font-size:.9rem;cursor:pointer;transition:all var(--transition-fast);margin:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0}.markdown-content button:hover{background:var(--bg-card);border-color:var(--border-hover)}.markdown-content code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-card);padding:.1em .4em;border-radius:3px;color:var(--text-secondary);border:1px solid var(--border-secondary)}.markdown-content pre{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-small);padding:var(--spacing-md);overflow-x:auto;margin:var(--spacing-md) 0}.markdown-content pre code{background:none;padding:0;color:var(--text-primary)}.markdown-content table{width:100%;border-collapse:collapse;margin:var(--spacing-md) 0;font-size:.95rem}.markdown-content th,.markdown-content td{border:1px solid var(--border-primary);padding:var(--spacing-xs) var(--spacing-sm);text-align:left}.markdown-content th{background:var(--bg-card);color:var(--text-secondary);font-weight:500}