*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0a0a0c;--color-surface: #141418;--color-surface-raised: #1a1a1f;--color-border: #2a2a30;--color-text: #e8e6e3;--color-text-muted: #9a9a9a;--color-text-subtle: #6a6a6a;--color-accent: #b8a080;--color-accent-subtle: #8a7a60;--color-link: #90a8c0;--color-link-hover: #b0c8e0;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1)}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;overflow:hidden}#canvas-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1}#canvas-container canvas{display:block}#ui-overlay{position:fixed;top:0;left:0;z-index:100;display:flex;flex-direction:column;gap:.5rem;padding:1rem;font-size:.8125rem}#ui-overlay .nav-link{color:var(--color-text-muted);text-decoration:none;padding:.5rem .75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;transition:color .2s,border-color .2s,background .2s}#ui-overlay .nav-link:hover{color:var(--color-text);border-color:var(--color-text-subtle);background:var(--color-surface-raised)}#ui-overlay button{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted);font-size:inherit;font-family:inherit;cursor:pointer;transition:color .2s,border-color .2s,background .2s;min-width:140px}#ui-overlay button:hover{color:var(--color-text);border-color:var(--color-text-subtle);background:var(--color-surface-raised)}#ui-overlay button.active{border-color:var(--color-accent-subtle);background:var(--color-surface-raised)}#ui-overlay button .toggle-state{font-family:var(--font-mono);font-size:.75rem;opacity:.7}#ui-overlay button.active .toggle-state{color:var(--color-accent);opacity:1}#hint{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%);z-index:100;padding:.5rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted);font-size:.8125rem;pointer-events:none;opacity:1;transition:opacity 1s var(--ease-out)}#hint.fade-out{opacity:0}.panel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;background:#0a0a0c00;pointer-events:none;transition:background .3s var(--ease-out)}.panel-overlay.active{background:#0a0a0cb3;pointer-events:auto}.panel{position:absolute;top:0;right:0;width:100%;max-width:560px;height:100%;background:var(--color-surface);border-left:1px solid var(--color-border);transform:translate(100%);transition:transform .3s var(--ease-out);display:flex;flex-direction:column;overflow:hidden}.panel.active{transform:translate(0)}.panel-close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-muted);font-size:1.5rem;cursor:pointer;z-index:10;transition:color .2s,border-color .2s,background .2s}.panel-close:hover{color:var(--color-text);border-color:var(--color-text-subtle);background:var(--color-surface-raised)}.panel-content{flex:1;overflow-y:auto;padding:4rem 2rem 2rem;-webkit-overflow-scrolling:touch}.panel-content h2{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;color:var(--color-text);letter-spacing:-.01em}.panel-content h3{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--color-text)}.panel-content p{margin-bottom:1rem;color:var(--color-text-muted)}.panel-content p.intro{font-size:1.0625rem;color:var(--color-text);margin-bottom:2rem;line-height:1.7}.panel-content p.meta{font-size:.8125rem;color:var(--color-text-subtle);margin-bottom:.75rem;font-family:var(--font-mono)}.panel-content p.note{font-size:.875rem;font-style:italic;color:var(--color-text-subtle);border-left:2px solid var(--color-border);padding-left:1rem;margin-top:1.5rem}.panel-content ul{margin-bottom:1rem;padding-left:1.25rem}.panel-content li{margin-bottom:.375rem;color:var(--color-text-muted)}.panel-content a{color:var(--color-link);text-decoration:none;transition:color .2s}.panel-content a:hover{color:var(--color-link-hover);text-decoration:underline}.experience-item,.project-item,.skill-section,.thought-section,.contact-section{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}.experience-item:last-child,.project-item:last-child,.skill-section:last-child,.thought-section:last-child,.contact-section:last-child{border-bottom:none;padding-bottom:0}.contact-links{list-style:none;padding-left:0}.contact-links li{margin-bottom:.5rem}.contact-links a{font-size:1rem}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.panel,.panel-overlay,#hint{transition:none}}@media (max-width: 640px){#ui-overlay{padding:.75rem}#ui-overlay button{min-width:120px;padding:.375rem .5rem}#hint{font-size:.75rem;padding:.375rem .75rem}.panel{max-width:100%;border-left:none}.panel-content{padding:3.5rem 1.5rem 1.5rem}.panel-content h2{font-size:1.25rem}.panel-content p.intro{font-size:1rem}}@media print{#ui-overlay,#canvas-container,#hint,.panel-close{display:none!important}.panel-overlay{position:static;background:none}.panel{position:static;transform:none;max-width:none;border:none;background:#fff;color:#000}.panel-content{padding:0}}
