:root{--black:#0A0A0A;--white:#F5F4F0;--red:#E8352A;--gray-1:#1A1A1A;--gray-2:#2E2E2E;--gray-3:#6B6B6B;--gray-4:#9A9A9A;--gray-5:#CECECE;--gray-6:#EBEBEB;--mono:'DM Mono',monospace;--sans:'Syne',sans-serif;--nav-h:68px}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--black);color:var(--white);font-family:var(--sans);overflow-x:hidden;cursor:auto}img{display:block;max-width:100%}a{color:inherit}.cursor,.cursor-ring,.cursor-dot,#cursor-canvas{display:none!important}.grid-overlay{position:fixed;inset:0;pointer-events:none;z-index:0;display:grid;grid-template-columns:repeat(12,1fr);opacity:.025}.grid-overlay span{border-right:1px solid var(--white);height:100vh}nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid var(--gray-2);background:rgba(10,10,10,0.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.nav-logo{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--white);text-decoration:none;display:flex;align-items:center;gap:0}.nav-logo .logo-accent{color:var(--red)}.nav-logo .logo-sep{color:var(--red);font-size:10px;margin:0 10px;opacity:.7}.nav-logo .logo-sub{color:var(--gray-4);font-size:9px;font-weight:400;letter-spacing:.25em}.nav-links{display:flex;gap:36px;list-style:none;position:absolute;left:50%;transform:translateX(-50%)}.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-4);text-decoration:none;transition:color .2s}.nav-links a:hover{color:var(--white)}.nav-right{display:flex;align-items:center;gap:10px}.nav-cta-wrap{position:relative}.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--black);background:var(--white);padding:9px 20px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s;cursor:pointer}.nav-cta:hover{background:var(--red);color:var(--white)}.nav-cta-arrow{font-size:9px;transition:transform .25s;display:inline-block}.nav-cta-wrap.open .nav-cta-arrow{transform:rotate(180deg)}.nav-dropdown{position:absolute;top:calc(100%+6px);right:0;background:var(--gray-1);border:1px solid var(--gray-2);min-width:230px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s;z-index:300}.nav-dropdown.open{opacity:1;pointer-events:all;transform:translateY(0)}.nav-dropdown a,.nav-dropdown button{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-5);text-decoration:none;background:none;border:none;border-bottom:1px solid var(--gray-2);cursor:pointer;transition:background .15s,color .15s;text-align:left}.nav-dropdown a:last-child,.nav-dropdown button:last-child{border-bottom:none}.nav-dropdown a:hover,.nav-dropdown button:hover{background:var(--gray-2);color:var(--white)}.nav-dropdown .dd-icon{color:var(--red);font-size:12px;flex-shrink:0}.copy-feedback{font-size:8px;color:#22C55E;margin-left:auto;opacity:0;transition:opacity .2s}.copy-feedback.show{opacity:1}.section-header{display:flex;align-items:baseline;gap:20px;margin-bottom:64px;padding-bottom:18px;border-bottom:1px solid var(--gray-2)}.section-num{font-family:var(--mono);font-size:10px;color:var(--red);letter-spacing:.15em;flex-shrink:0}.section-title{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--white);flex-shrink:0}.section-rule{flex:1;height:1px;background:var(--gray-2)}.btn-primary{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--black);background:var(--white);padding:14px 28px;text-decoration:none;transition:background .2s,color .2s;display:inline-block;cursor:pointer}.btn-primary:hover{background:var(--red);color:var(--white)}.btn-ghost{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray-4);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s;cursor:pointer}.btn-ghost:hover{color:var(--white)}.btn-ghost::after{content:'→'}.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.theme-toggle{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--gray-2);padding:7px 12px;cursor:pointer;transition:border-color .2s;color:var(--gray-4);flex-shrink:0}.theme-toggle:hover{border-color:var(--gray-3);color:var(--white)}.theme-toggle-icon{display:flex;align-items:center}.theme-toggle-icon--sun{display:none}.theme-toggle-track{width:28px;height:16px;background:var(--gray-2);border-radius:99px;position:relative;transition:background .25s;flex-shrink:0}.theme-toggle-thumb{position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:var(--gray-4);transition:transform .25s,background .25s}body.light-mode .theme-toggle-icon--moon{display:none}body.light-mode .theme-toggle-icon--sun{display:flex}body.light-mode .theme-toggle-track{background:var(--red)}body.light-mode .theme-toggle-thumb{transform:translateX(12px);background:#fff}body.light-mode{--black:#F5F4F0;--white:#0A0A0A;--gray-1:#EAEAE6;--gray-2:#D4D4CE;--gray-3:#3A3A36;--gray-4:#505050;--gray-5:#3A3A36;--gray-6:#1A1A16;--red:#e93e0a;background:#F5F4F0;color:#0A0A0A}body.light-mode nav{background:rgba(245,244,240,0.96);border-bottom-color:var(--gray-2)}body.light-mode .nav-cta{background:#0A0A0A;color:#F5F4F0}body.light-mode .nav-cta:hover{background:var(--red);color:#F5F4F0}body.light-mode .btn-primary{background:#0A0A0A;color:#F5F4F0}body.light-mode .btn-primary:hover{background:var(--red);color:#F5F4F0}body.light-mode .btn-ghost{color:var(--gray-4)}body.light-mode .btn-ghost:hover{color:#0A0A0A}body.light-mode .nav-dropdown{background:#EAEAE6;border-color:var(--gray-2)}body.light-mode .nav-dropdown a,body.light-mode .nav-dropdown button{color:var(--gray-5);border-bottom-color:var(--gray-2)}body.light-mode .nav-dropdown a:hover,body.light-mode .nav-dropdown button:hover{background:var(--gray-2);color:#0A0A0A}body.light-mode .theme-toggle{border-color:var(--gray-2);color:var(--gray-4)}body.light-mode .theme-toggle:hover{border-color:var(--gray-3);color:#0A0A0A}body.light-mode .hero-photo-frame{background:var(--gray-1);border-color:var(--gray-2)}body.light-mode .hero-nameplate{background:var(--gray-1);border-color:var(--gray-2)}body.light-mode .glitch-toggle{border-color:var(--gray-2)}body.light-mode .section-rule{background:var(--gray-2)}body.light-mode .project-item{border-color:var(--gray-2)}body.light-mode .project-num{border-right-color:var(--gray-2)}body.light-mode .project-info{border-right-color:var(--gray-2)}body.light-mode .project-tag{border-color:var(--gray-2);color:var(--gray-4)}body.light-mode .project-arrow{border-color:var(--gray-2);color:var(--gray-4)}body.light-mode .project-item:hover .project-arrow{border-color:var(--red);color:var(--red)}body.light-mode .project-placeholder{border-color:var(--gray-2)}body.light-mode .comp-card{background:#F5F4F0}body.light-mode .comp-preview{background:var(--gray-1);border-color:var(--gray-2)}body.light-mode .comp-badge{color:var(--gray-3);border-color:var(--gray-2)}body.light-mode .comp-props{border-top-color:var(--gray-2)}body.light-mode .comp-props-toggle{color:var(--gray-4)}body.light-mode .comp-props-toggle:hover{color:#0A0A0A}body.light-mode .comp-props-list{border-color:var(--gray-2)}body.light-mode .comp-props-list li{border-bottom-color:var(--gray-2)}body.light-mode .comp-copy-btn,body.light-mode .comp-download-btn{border-color:var(--gray-2);color:var(--gray-4)}body.light-mode .comp-copy-btn:hover,body.light-mode .comp-download-btn:hover{color:#0A0A0A;border-color:var(--gray-3)}body.light-mode .mag-btn{background:#0A0A0A;color:#F5F4F0}body.light-mode .mag-btn:hover{background:var(--red);color:#F5F4F0}body.light-mode .stagger-line{background:var(--gray-3)}body.light-mode .tools-grid{background:var(--gray-2)}body.light-mode .tool-item{background:#F5F4F0}body.light-mode .process-item{border-top-color:var(--gray-2);background:#F5F4F0!important}body.light-mode .creds-list{background:var(--gray-2)}body.light-mode .cred-item{background:#F5F4F0}body.light-mode .comp-note{border-top-color:var(--gray-2)}body.light-mode .comp-note-copy{border-color:var(--gray-2);color:var(--gray-4)}body.light-mode .comp-note-copy:hover{color:#0A0A0A;border-color:var(--gray-3)}body.light-mode footer{border-top-color:var(--gray-2)}body.light-mode .footer-nav a{color:var(--gray-4)}body.light-mode .footer-nav a:hover{color:#0A0A0A}body.light-mode .footer-divider{background:var(--gray-2)}body.light-mode .footer-framer-badge{border-color:var(--gray-2);color:var(--gray-3)}body.light-mode .grid-overlay span{border-right-color:#0A0A0A}body.light-mode .work-section,body.light-mode .components-section,body.light-mode .about-section{border-top-color:var(--gray-2)}body.light-mode .hero-left{border-right-color:var(--gray-2)}body.light-mode .audio-preview-wrap{background:#EAEAE6}body.light-mode .audio-preview-track{background:rgba(0,0,0,0.12)}body.light-mode .comp-copy-btn.copied{color:#06b449!important;border-color:rgba(6,180,73,0.5)!important}body.light-mode .comp-note-copy.copied{color:#06b449!important;border-color:rgba(6,180,73,0.5)!important}body.light-mode .comp-note-feedback{color:#06b449!important}body.light-mode .copy-feedback{color:#06b449!important}