:root{--bg-yellow: #fdfd6e;--text-black: #111111;--accent-blue: #00F0FF;--accent-purple: #9d00ff;--accent-magenta: #ff00ff;--font-mono: "Space Mono", monospace;--font-display: "Outfit", sans-serif;--border-width: 2px}*{margin:0;padding:0;box-sizing:border-box;cursor:none!important}html,body,#root,.hub-layout,canvas,iframe{cursor:none!important}body{background-color:var(--bg-yellow);color:var(--text-black);font-family:var(--font-mono);width:100vw;height:100vh;height:100dvh;overflow:hidden;display:flex;justify-content:center;align-items:center}#grid-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:10;position:relative}.cursor{width:48px;height:48px;position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transform:translate(-5%,-5%);image-rendering:pixelated}.cursor-inner{width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 10V6H22V2H26V6H30V10H34V14H38V18H42V26H38V30H34V34H30V38H26V42H22V46H18V42H14V38H10V34H6V26H2V18H6V14H10V10H14V6H18V10Z' fill='white'/%3E%3Cpath d='M18 6V10M18 6H14V10M18 6H22V2H26V6M22 6V10M26 6V10M30 6V10M14 10V14M30 10V14M10 14V18M34 14V18M6 18V22M38 18V22M42 18V26H38M2 18V26H6M6 26V30M38 26V30M10 30V34M34 30V34M14 34V38M30 34V38M18 38V42M26 38V42M22 42V46' stroke='black' stroke-width='2'/%3E%3Cpath d='M22 10V18H26V10H22Z' fill='black'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;transition:transform .1s}.cursor.active .cursor-inner{transform:scale(.85) translateY(4px)}.intro-container{display:flex;flex-direction:column;align-items:center;gap:3rem;text-align:center}.intro-title{font-family:var(--font-display);font-size:6rem;font-weight:900;text-transform:uppercase;letter-spacing:-2px;line-height:.8}.btn-discover{background:var(--text-black);color:var(--bg-yellow);border:none;padding:1.5rem 3rem;font-family:var(--font-mono);font-size:1.2rem;font-weight:700;cursor:pointer;box-shadow:10px 10px 0 var(--accent-blue);transition:all .2s}.btn-discover:hover{transform:translate(-3px,-3px);box-shadow:15px 15px 0 var(--accent-purple);filter:hue-rotate(15deg)}.hub-layout{width:100vw;height:100vh;display:flex;flex-direction:column;padding:3rem}.hub-header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:var(--border-width) solid var(--text-black);padding-bottom:1.5rem;margin-bottom:2rem}.brand-title{font-family:var(--font-display);font-size:3rem;font-weight:900;text-transform:uppercase;letter-spacing:-1px}.main-grid{flex:1;display:grid;grid-template-columns:320px 1fr;gap:4rem;min-height:0}.sidebar-nav{display:flex;flex-direction:column;gap:2rem;border-right:var(--border-width) solid var(--text-black);padding-right:2rem}.portfolio-list{list-style:none;display:flex;flex-direction:column;gap:1.5rem}.portfolio-item{font-size:2.5rem;font-weight:700;cursor:pointer;transition:all .2s;position:relative}.portfolio-item:hover{color:var(--accent-purple);padding-left:1rem}.portfolio-item.active{color:var(--text-black);padding-left:3.5rem}.portfolio-item.active:before{content:">>";position:absolute;left:0;color:var(--accent-blue)}.portfolio-viewer{display:flex;flex-direction:column;gap:2rem;overflow:hidden}.preview-window{flex:1;border:var(--border-width) solid var(--text-black);background:#fff;box-shadow:20px 20px 0 var(--text-black);display:flex;flex-direction:column}.window-bar{height:40px;background:var(--text-black);color:#fff;display:flex;align-items:center;padding:0 1rem;gap:.8rem;font-weight:700;font-size:.8rem}.window-dot{width:12px;height:12px;border:1px solid white;border-radius:50%}.iframe-container{flex:1;position:relative;background:#000}iframe{width:200%;height:200%;border:none;transform:scale(.5);transform-origin:0 0}.iframe-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5}.hub-footer{margin-top:auto;padding-top:2rem;display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.9rem}.footer-nav{display:flex;gap:2rem}.footer-btn{background:none;border:none;font-family:inherit;font-weight:inherit;cursor:pointer;text-decoration:underline}.footer-btn:hover{color:var(--accent-purple)}.overlay-page{position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--bg-yellow);color:var(--text-black);z-index:9999;padding:5rem;display:flex;flex-direction:column}.close-btn{position:absolute;top:3rem;right:3rem;background:none;border:2px solid var(--bg-yellow);color:var(--bg-yellow);padding:.8rem 1.5rem;font-family:var(--font-mono);cursor:pointer}.overlay-content h2{font-family:var(--font-display);font-size:5rem;margin-bottom:2rem}.overlay-content p{font-size:1.8rem;max-width:900px;line-height:1.5}.tv-isometric{position:fixed;bottom:8rem;right:4rem;width:120px;z-index:100;cursor:pointer;filter:drop-shadow(10px 10px 0 rgba(0,0,0,.1))}.tv-svg{width:100%;height:auto;transition:transform .3s}.tv-isometric:hover .tv-svg{transform:scale(1.1) rotate(3deg)}.vhs-scanline{position:absolute;top:20%;left:15%;width:55%;height:2px;background:#fff6;z-index:5;animation:vhs-scroll 2s infinite linear}@keyframes vhs-scroll{0%{top:20%}to{top:75%}}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#000;border:1px solid rgba(255,255,255,.1)}.custom-scrollbar::-webkit-scrollbar-thumb{background:#fff;border:2px solid black}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--accent-magenta)}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@media (max-width: 900px){.main-grid{grid-template-columns:1fr}.sidebar-nav{border-right:none;border-bottom:2px solid black;padding:0 0 2rem;flex-direction:row;overflow-x:auto}.portfolio-list{flex-direction:row}.portfolio-item{font-size:1.5rem}.brand-title{font-size:2rem}.intro-title{font-size:3rem}.tv-isometric{display:none}}