:root{--vt-c-white: #e0f0ff;--vt-c-white-soft: #c8e4f8;--vt-c-white-mute: #b8d4e6;--vt-c-black: #0a0a0f;--vt-c-black-soft: #0d1117;--vt-c-black-mute: #161b22;--vt-c-divider-light-1: rgba(0, 212, 255, .3);--vt-c-divider-light-2: rgba(0, 212, 255, .15);--vt-c-divider-dark-1: rgba(0, 212, 255, .4);--vt-c-divider-dark-2: rgba(0, 212, 255, .2);--vt-c-text-light-1: #1a3a4a;--vt-c-text-light-2: rgba(0, 80, 120, .8);--vt-c-text-dark-1: #00d4ff;--vt-c-text-dark-2: #b8d4e6}:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2);--section-gap: 160px}@media (prefers-color-scheme: light){:root{--color-background: #0d1a20;--color-background-soft: #142830;--color-background-mute: #1a3a4a;--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:15px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary-color: #00d4ff;--primary-dark: #00a8cc;--primary-dim: #0088aa;--primary-rgb: 0, 212, 255;--bg-color: #0a0a0f;--bg-secondary: #0d1117;--card-bg: rgba(0, 20, 40, .7);--card-bg-rgb: 0, 20, 40;--header-bg: rgba(10, 10, 15, .95);--text-color: #ffffff;--text-bright: #00d4ff;--text-dim: #7ca8c8;--text-color-secondary: #ffffff;--border-color: rgba(0, 212, 255, .2);--border-glow: rgba(0, 212, 255, .4);--glow-color: rgba(0, 212, 255, .5);--glow-xs: 0 0 3px rgba(0, 212, 255, .2);--glow-sm: 0 0 8px rgba(0, 212, 255, .3);--glow-md: 0 0 15px rgba(0, 212, 255, .4);--glow-lg: 0 0 25px rgba(0, 212, 255, .5);--glow-xl: 0 0 40px rgba(0, 212, 255, .6);--glass-bg: rgba(0, 20, 40, .6);--glass-bg-solid: rgba(10, 15, 25, .9);--glass-border: rgba(0, 212, 255, .15);--glass-border-hover: rgba(0, 212, 255, .35);--shadow-color: rgba(0, 212, 255, .1);--animation-speed: .3s}:root.dark,body.dark-mode,.dark-mode{--primary-color: #00d4ff;--primary-dark: #00a8cc;--primary-dim: #0088aa;--primary-rgb: 0, 212, 255;--bg-color: #0a0a0f;--bg-secondary: #0d1117;--card-bg: rgba(0, 20, 40, .7);--card-bg-rgb: 0, 20, 40;--header-bg: rgba(10, 10, 15, .95);--text-color: #b8d4e6;--text-bright: #00d4ff;--text-dim: #7ca8c8;--text-color-secondary: #7ca8c8;--border-color: rgba(0, 212, 255, .2);--shadow-color: rgba(0, 212, 255, .15)}.page-title{font-size:2.5rem;margin-bottom:2rem;position:relative;display:block;text-align:center;width:100%;color:var(--primary-color);text-shadow:0 0 20px rgba(0,212,255,.5)}.page-title:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);box-shadow:0 0 10px #00d4ff80}.glass-card{background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:12px;transition:all var(--animation-speed) ease}.glass-card:hover{border-color:var(--glass-border-hover);box-shadow:var(--glow-sm)}.tech-card{background-color:var(--glass-bg);border-radius:12px;padding:1.5rem;box-shadow:0 0 10px var(--shadow-color);transition:all var(--animation-speed) ease;border:1px solid var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.tech-card:hover{transform:translateY(-5px);box-shadow:0 0 25px #00d4ff33,0 10px 40px #0000004d;border-color:#00d4ff66}.tech-tag{background-color:#00d4ff14;color:var(--primary-color);padding:.2rem .6rem;border-radius:4px;font-size:.8rem;transition:all var(--animation-speed) ease;border:1px solid rgba(0,212,255,.2)}.tech-tag:hover{background-color:#00d4ff26;border-color:#00d4ff66;box-shadow:0 0 8px #00d4ff33}.filter-tag{background:#00142866;border:1px solid rgba(0,212,255,.2);padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all var(--animation-speed) ease;color:var(--text-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.filter-tag:hover{border-color:#00d4ff99;color:var(--primary-color);box-shadow:0 0 10px #00d4ff33}.filter-tag.active{background-color:#00d4ff26;border-color:var(--primary-color);color:var(--primary-color);box-shadow:0 0 15px #00d4ff4d,inset 0 0 10px #00d4ff1a}.tech-button{display:inline-block;background-color:#00d4ff1a;color:var(--primary-color);padding:.6rem 1.2rem;border-radius:6px;text-decoration:none;transition:all var(--animation-speed) ease;border:1px solid rgba(0,212,255,.3);cursor:pointer;font-family:inherit;font-size:inherit}.tech-button:hover{background-color:#00d4ff33;box-shadow:0 0 15px #00d4ff4d;border-color:#00d4ff99}.tech-input{width:100%;padding:.8rem 1rem;border:1px solid rgba(0,212,255,.2);border-radius:8px;font-size:1rem;background-color:var(--glass-bg);color:var(--text-color);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all var(--animation-speed) ease}.tech-input:focus{outline:none;border-color:#00d4ff99;box-shadow:0 0 15px #00d4ff33,inset 0 0 10px #00d4ff0d}.tech-input::placeholder{color:#00d4ff66}.section-title{font-size:1.8rem;margin-bottom:1.5rem;position:relative;display:inline-flex;align-items:center;color:var(--primary-color);text-shadow:0 0 15px rgba(0,212,255,.4)}.section-title:after{content:"";position:absolute;bottom:-8px;left:0;width:70px;height:2px;background:linear-gradient(90deg,var(--primary-color),transparent);box-shadow:0 0 10px var(--glow-color)}.section-content{background-color:var(--glass-bg);padding:1.5rem;border-radius:12px;box-shadow:0 0 15px var(--shadow-color);transition:all var(--animation-speed) ease;border:1px solid var(--glass-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.section-content:hover{transform:translateY(-5px);box-shadow:0 0 25px #00d4ff33,0 10px 40px #0000004d;border-color:#00d4ff4d}.tech-link{color:var(--primary-color);text-decoration:none;transition:all var(--animation-speed) ease}.tech-link:hover{text-shadow:0 0 10px var(--glow-color)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes glow-pulse{0%,to{box-shadow:var(--glow-sm)}50%{box-shadow:var(--glow-md)}}.main-nav a,.shop-link,.timeline-title,.timeline-desc,.social-link,.post-summary,.post-content,.post-content p,.project-description,.project-card,.filter-tag,.info-list li,.skill-note,.invite-info,.invite-info span,.benefit-item,.benefit-text,.modal-subtitle,.skill-tag,.song-tag,.info-section,.commit-link,.commit-body,.commit-meta,.commit-author,.text-content p,.text-content h2,.cookie-list,.cookie-list li,.setting-info h3,.setting-info p{color:#fff!important}.timeline-dot,.timeline-item:hover .timeline-dot{background-color:var(--primary-color)!important;color:var(--bg-color)!important}@media (max-width: 768px){.page-title{font-size:2rem}.section-content,.tech-card{padding:1rem}}#app{width:100%;margin:0 auto;font-weight:400;min-height:100vh;position:relative}html,body{margin:0;padding:0;width:100%;height:100%}html.dark,body.dark-mode{background-color:#0a0a0f;color:#b8d4e6}body.dark-mode:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:0}::selection{background:#00d4ff4d;color:#00d4ff}::-moz-selection{background:#00d4ff4d;color:#00d4ff}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0a0a0f}::-webkit-scrollbar-thumb{background:#00d4ff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#00d4ff80}:root{--primary-color: #00d4ff;--primary-color-dark: #00a8cc;--primary-color-dim: #0088aa;--text-color: #b8d4e6;--text-color-bright: #00d4ff;--bg-color: #0a0a0f;--card-bg: rgba(0, 20, 40, .7);--header-bg: rgba(10, 10, 15, .95);--border-color: rgba(0, 212, 255, .2);--shadow-color: rgba(0, 212, 255, .1);--animation-speed: .3s;--primary-rgb: 0, 212, 255;--text-color-secondary: #7ca8c8;--glow-sm: 0 0 8px rgba(0, 212, 255, .3);--glow-md: 0 0 15px rgba(0, 212, 255, .4)}:root.dark,body.dark-mode,.dark-mode{--primary-color: #00d4ff;--primary-color-dark: #00a8cc;--primary-color-dim: #0088aa;--text-color: #b8d4e6;--text-color-bright: #00d4ff;--bg-color: #0a0a0f;--card-bg: rgba(0, 20, 40, .7);--header-bg: rgba(10, 10, 15, .95);--border-color: rgba(0, 212, 255, .2);--shadow-color: rgba(0, 212, 255, .15);--primary-rgb: 0, 212, 255;--text-color-secondary: #7ca8c8}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);transition:background-color var(--animation-speed),color var(--animation-speed);min-height:100vh;width:100%;position:relative}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:1rem 2rem;box-shadow:0 1px #00d4ff1a,0 4px 20px #0000004d;position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;transition:background-color var(--animation-speed),box-shadow var(--animation-speed);height:60px;border-bottom:1px solid rgba(0,212,255,.15)}.right-section{display:flex;align-items:center;height:100%}.header-controls{display:flex;align-items:center;gap:1rem}.logo-container{display:flex;align-items:center;height:100%}.logo-link{display:flex;align-items:center;text-decoration:none;gap:10px}.logo-image{height:36px;width:auto;border-radius:50%}.site-title{margin:0;font-size:1.5rem;font-weight:700;color:var(--primary-color);line-height:1;text-shadow:0 0 10px rgba(0,212,255,.5);transition:text-shadow .3s ease}.logo-link:hover .site-title{text-shadow:0 0 20px rgba(0,212,255,.8),0 0 40px rgba(0,212,255,.4)}.main-nav{height:100%;display:flex;align-items:center;margin-right:1rem}.main-nav ul{display:flex;list-style:none;margin:0;padding:0;height:100%;align-items:center}.main-nav li{margin-left:2rem;display:flex;align-items:center;height:100%}.main-nav a{color:var(--text-color);text-decoration:none;font-weight:500;transition:color .2s;position:relative;display:flex;align-items:center;height:100%}.main-nav a:after,.shop-link:after{content:"";position:absolute;width:0;height:2px;bottom:-4px;left:0;background-color:var(--primary-color);box-shadow:0 0 8px #00d4ff99;transition:width .3s ease}.main-nav a:hover:after,.main-nav a.router-link-active:after,.shop-link:hover:after{width:100%}.main-nav a:hover,.main-nav a.router-link-active,.shop-link:hover{color:var(--primary-color);text-shadow:0 0 10px rgba(0,212,255,.5)}.main-nav a.router-link-active{text-shadow:0 0 10px rgba(0,212,255,.5)}.shop-link{color:var(--text-color);text-decoration:none;font-weight:500;transition:color .2s;position:relative;display:flex;align-items:center;height:100%}.app-content{flex:1;padding:2rem;width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box}.app-footer{text-align:center;padding:1.5rem;background-color:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px #00d4ff1a;margin-top:auto;transition:background-color var(--animation-speed),box-shadow var(--animation-speed);border-top:1px solid rgba(0,212,255,.15)}.footer-content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.footer-links{display:flex;align-items:center;gap:1rem;margin-top:0}.divider{color:var(--text-color-secondary);opacity:.5}.footer-link{color:var(--text-color-secondary);font-size:.9rem;text-decoration:none;transition:color .3s ease,text-shadow .3s ease}.footer-link:hover{color:var(--primary-color);text-decoration:none;text-shadow:0 0 10px rgba(0,212,255,.5)}.mobile-menu-button{display:none;flex-direction:column;justify-content:space-around;width:2rem;height:2rem;background:transparent;border:none;cursor:pointer;padding:0}.mobile-menu-button span{width:2rem;height:.25rem;background-color:var(--text-color);border-radius:10px;transition:all .3s linear}@media (max-width: 768px){.app-header{height:auto;padding:.8rem 1.5rem}.logo-image{height:28px}.site-title{font-size:1.3rem}.mobile-menu-button{display:flex;z-index:200}.right-section{order:3}.main-nav{position:fixed;top:0;right:-100%;width:45%;height:100vh;margin-right:0;background-color:rgba(var(--card-bg-rgb),.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:-2px 0 5px var(--shadow-color);transition:right .3s ease-in-out;z-index:150}.main-nav.open{right:0}.nav-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:transparent;z-index:140}.main-nav ul{flex-direction:column;padding:4rem 2rem 2rem;height:fit-content;align-items:flex-start}.main-nav li{margin:1rem 0;height:auto}.main-nav a,.shop-link{height:auto;padding:.5rem 0;display:flex;align-items:center;gap:1rem}.nav-icon{font-size:1.2rem;width:2rem;display:flex;justify-content:flex-start;align-items:center}.footer-content{flex-wrap:nowrap;gap:.25rem;width:100%;justify-content:center}.footer-content p{font-size:.8rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer-links{gap:.25rem}.footer-link{font-size:.7rem;white-space:nowrap}.divider{font-size:.7rem;margin:0 .1rem}}@media (min-width: 769px){.nav-icon{display:none}.main-nav ul .home-nav-item{display:none!important;visibility:hidden!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;padding:0!important}.main-nav ul li:first-child.home-nav-item{display:none!important}}.back-to-top-btn{position:fixed;bottom:2rem;right:2rem;width:3rem;height:3rem;background-color:#001428cc;color:var(--primary-color);border:1px solid rgba(0,212,255,.4);border-radius:50%;cursor:pointer;box-shadow:0 0 15px #00d4ff33;transition:all .3s ease;z-index:1000;display:flex;align-items:center;justify-content:center;font-size:1.2rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.back-to-top-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 0 25px #00d4ff80,0 0 50px #00d4ff33;background-color:#00d4ff1a;border-color:#00d4ffcc}.back-to-top-btn:active{transform:translateY(0)}.back-to-top-enter-active,.back-to-top-leave-active{transition:all .3s ease}.back-to-top-enter-from,.back-to-top-leave-to{opacity:0;transform:translateY(20px) scale(.8)}@media (max-width: 768px){.back-to-top-btn{bottom:1.5rem;right:1.5rem;width:2.8rem;height:2.8rem;font-size:1.1rem}}@media (max-width: 768px){.main-nav{border-left:1px solid rgba(0,212,255,.2)}.main-nav.open{box-shadow:-5px 0 30px #00d4ff1a}}