:root[data-theme=dark]{--bg:#0a0a0a;--card-bg:#111;--text:#e0e0e0;--text-dim:#999;--border:#222;--hover-bg:#151515;--hover-border:#3a3a3a;--accent:#fff;--bubble-bg:#202020;--shadow:#00000059}:root[data-theme=light]{--bg:#fafafa;--card-bg:#fff;--text:#1a1a1a;--text-dim:#666;--border:#e0e0e0;--hover-bg:#f3f3f3;--hover-border:#c8c8c8;--accent:#0c0c0c;--bubble-bg:#c7c7c7;--shadow:#0000002e}html.theme-switching,html.theme-switching *,html.theme-switching :before,html.theme-switching :after{transition:none!important}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;min-height:100vh;padding:clamp(1.5rem,4vw,3rem);font-family:Quicksand,sans-serif;display:flex}.theme-toggle{background:var(--card-bg);border:1px solid var(--border);cursor:pointer;z-index:100;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:border-color .2s,background-color .2s,transform .2s;display:flex;position:fixed;top:2rem;right:2rem}.theme-toggle:hover{background:var(--hover-bg);border-color:var(--hover-border);transform:rotate(10deg)}.sun-icon{display:none}.moon-icon,[data-theme=light] .sun-icon{color:var(--text);display:block}[data-theme=light] .moon-icon{display:none}.container{text-align:center;width:100%;max-width:720px}.header{margin-bottom:2.25rem}.avatar{width:100px;height:100px;box-shadow:none;object-fit:cover;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;margin:0 auto 1.5rem;transition:transform .1s;display:block}.avatar:active{transform:scale(.95)}h1{color:var(--accent);cursor:default;-webkit-user-select:none;user-select:none;margin-bottom:.5rem;font-size:2.5rem;font-weight:700;display:block}h1 span{cursor:pointer;display:inline-block}.tagline{color:var(--text-dim);min-height:1.5rem;margin-bottom:1.5rem;font-size:1rem}.tagline .cursor{margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.bio{color:var(--text);line-height:1.8}.bio:not(:last-child){margin-bottom:1.5rem}.bio span{color:var(--accent)}.bio strong{color:var(--accent);font-weight:700}.bio a{color:var(--accent);font-weight:600;text-decoration:none;transition:opacity .2s}.bio a:hover{opacity:.8}.tabs{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:2rem;display:flex}.tab{border:1px solid var(--border);color:var(--text-dim);cursor:pointer;background:0 0;border-radius:20px;padding:.6rem 1.4rem;font-family:Quicksand,sans-serif;font-size:.95rem;font-weight:500;transition:background-color .2s,border-color .2s,color .2s}.tab:hover{background:var(--hover-bg);border-color:var(--hover-border);color:var(--text)}.tab.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}.tab-panel{display:none}.tab-panel.active{display:block}.tab-panel.entering{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.social-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;display:grid}.social-btn{border:1px solid var(--border);background:0 0;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;height:56px;padding:0 1rem;text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s;display:flex}.social-btn:hover{border-color:var(--hover-border);background:var(--hover-bg);transform:translateY(-1px)}.social-btn svg{width:20px;height:20px;color:var(--text);flex-shrink:0}.social-btn span{color:var(--text);font-size:.9rem;font-weight:500}.tags{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.tag{border:1px solid var(--border);background:0 0;border-radius:20px;padding:.4rem .9rem;font-size:.85rem;font-weight:500;transition:background-color .2s,border-color .2s}.tag:hover{background:var(--hover-bg);border-color:var(--hover-border)}.skills-section{text-align:left;flex-direction:column;gap:2rem;display:flex}.skill-category .category-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.75rem;font-size:.9rem;font-weight:600}.skill-category .tags{justify-content:flex-start}.project-category{margin-bottom:2.1rem}.project-category:last-child{margin-bottom:0}.category-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;text-align:left;margin-bottom:.75rem;font-size:.9rem;font-weight:600}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem;display:grid}.project-btn{border:1px solid var(--border);text-align:left;background:0 0;border-radius:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:.1rem;min-height:58px;padding:.65rem .9rem;text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s,opacity .2s;display:flex}.project-btn:hover{border-color:var(--hover-border);background:var(--hover-bg);transform:translateY(-1px)}.project-name{color:var(--text);font-size:.9rem;font-weight:600}.project-year{color:var(--text-dim);font-size:.75rem;font-weight:500}.project-btn.unreleased{opacity:.55}.project-btn.unreleased:hover{opacity:.75}.speech-bubble{background:var(--bubble-bg);box-shadow:0 16px 40px var(--shadow);color:var(--text);pointer-events:none;z-index:10000;word-wrap:break-word;text-align:center;border-radius:14px;max-width:min(300px,100vw - 2rem);padding:.7rem 1rem;font-weight:600;line-height:1.35;animation:3s ease-out forwards bubbleFadeOut;position:fixed;transform:translate(-50%,calc(-100% - 18px))}.speech-bubble:after{content:"";border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--bubble-bg);width:0;height:0;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}@keyframes bubbleFadeOut{0%{opacity:0;transform:translate(-50%,calc(-100% - 8px))scale(.95)}5%{opacity:1;transform:translate(-50%,calc(-100% - 18px))scale(1)}80%{opacity:1;transform:translate(-50%,calc(-100% - 18px))}to{opacity:0;transform:translate(-50%,calc(-100% - 8px))}}@media (width<=768px){body{padding:1rem}.container{padding:0}.header{flex-direction:column;align-items:center;display:flex}h1{font-size:2rem}.tagline{text-align:center}.theme-toggle{top:1rem;right:1rem}.social-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.projects-grid{grid-template-columns:1fr}.tabs{gap:.4rem}.tab{padding:.5rem 1rem;font-size:.9rem}}