:root{--bg: #151520;--surface: #1e1e2a;--surface-elevated: #252538;--border: #333347;--text-primary: #f4f4f8;--text-secondary: #b4b4c7;--accent: #9768ff;--accent-hover: #7c3aed;--accent-strong: #6d28d9;--accent-secondary: #2dd4bf;--accent-secondary-soft: #134e4a;--link-dark-bg: #c4b5fd;--focus: var(--accent-secondary);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .45);--shadow-md: 0 12px 30px rgba(0, 0, 0, .6);--radius-sm: 6px;--radius-md: 14px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:DM Sans,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text-primary);line-height:1.6;font-size:16px}h1,h2,h3,.header-name,.project-title,.filter-button,.project-tags,.project-role{font-family:JetBrains Mono,monospace}a{color:var(--link-dark-bg);text-decoration:none}a:hover{color:var(--accent-secondary);text-decoration:underline}a:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.app-root{min-height:100vh}.app-shell{max-width:960px;margin:0 auto;padding:2rem 1.25rem 3rem}.construction-banner{background:#2a2445;border:1px solid #3b3563;color:#ddd6fe;border-radius:var(--radius-sm);padding:.6rem 1rem;font-size:.9rem;text-align:center;margin-bottom:2rem}.construction-banner a{text-decoration:underline}.app-header{margin-bottom:2.5rem}.header-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.header-name{font-weight:700;font-size:1.25rem;margin:0}.header-role{margin:.25rem 0 0;font-size:.95rem;color:var(--text-secondary)}.header-links{display:flex;align-items:center;gap:.75rem}.header-links a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);transition:transform .15s ease,border-color .15s ease,color .15s ease,background .15s ease}.header-links a:hover{border-color:var(--accent-secondary);color:var(--accent-secondary);background:var(--surface-elevated);transform:translateY(-2px)}.header-links svg{width:18px;height:18px;display:block}.hero{margin-bottom:2.5rem}.hero-eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0}.hero-title{margin:.5rem 0 1rem;font-size:2rem;line-height:1.3}.hero-text{max-width:40rem;color:var(--text-secondary)}.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:2.5rem;font-size:.9rem}.filter-button{font-size:.8rem;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--border);background:#2a2a3c;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.filter-button:hover{border-color:var(--accent);background:#343450;color:var(--text-primary)}.filter-button--active{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;font-weight:600}.project-grid{display:grid;gap:1.5rem}.project-card{background:var(--surface);position:relative;border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-md);padding:1.25rem;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;overflow:hidden}.project-card:hover{border-left-color:var(--accent-secondary);background:linear-gradient(to right,var(--accent-secondary-soft),var(--surface))}.project-card:after{content:"✦";position:absolute;top:10px;right:12px;font-size:1.5rem;color:var(--accent-secondary);opacity:0;transform:scale(.5) rotate(0)}.project-card:hover:after{animation:sparkle .8s ease forwards}@keyframes sparkle{0%{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}to{opacity:0;transform:scale(.2) rotate(45deg)}}.project-role{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0 0 .5rem}.project-title{margin:0 0 .75rem;font-size:1.2rem}.project-short{margin:0 0 1rem;color:var(--text-secondary);font-size:.95rem}.project-tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;list-style:none}.project-tags li{background:#eef2ff;color:#3730a3;font-size:.75rem;padding:.25rem .6rem;border-radius:999px}.modal-backdrop{position:fixed;inset:0;background:#0f172a99;display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal{background:var(--surface);max-width:720px;width:100%;max-height:85vh;overflow:auto;padding:1.75rem;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.modal-role{font-size:.9rem;color:var(--text-secondary);margin:.25rem 0 0}.modal-close{background:transparent;color:var(--accent);border:none;font-size:1.2rem;cursor:pointer}.modal-links{padding-left:1.25rem}.view-full-project-button,.back-button{margin-top:1.5rem;padding:.6rem 1rem;border-radius:var(--radius-sm);border:none;background:var(--accent-strong);color:#fff;cursor:pointer;font-weight:600}.view-full-project-button:hover,.back-button:hover{background:var(--accent-hover)}.pixel-reveal{position:relative;display:inline-block;overflow:hidden}.pixel-reveal:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--bg) 0px,var(--bg) 4px,transparent 4px,transparent 8px),repeating-linear-gradient(90deg,var(--bg) 0px,var(--bg) 4px,transparent 4px,transparent 8px);transform-origin:bottom left;mask-image:linear-gradient(45deg,var(--bg) 40%,transparent 70%);-webkit-mask-image:linear-gradient(45deg,var(--bg) 40%,transparent 70%);mask-size:200% 200%;-webkit-mask-size:200% 200%;animation:pixelDiagonalCollapse 1.2s linear forwards;z-index:2;pointer-events:none}@keyframes pixelDiagonalCollapse{0%{transform:scale(1);mask-position:0% 0%;-webkit-mask-position:0% 0%}to{transform:scale(0);mask-position:100% 100%;-webkit-mask-position:100% 100%}}.reveal-on-scroll{opacity:0;transform:translateY(30px);filter:blur(6px);animation-name:fadeInSoft;animation-duration:1ms;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:view();animation-range:entry 0% cover 10%}@keyframes fadeInSoft{0%{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@media(max-width:600px){.header-inner{flex-direction:column;align-items:flex-start}.hero-title{font-size:1.6rem}}@media(prefers-reduced-motion:reduce){.project-card:after,.pixel-reveal:before,.reveal-on-scroll{animation:none!important;transform:none!important;filter:none!important}}