:root{--bg-deep:#070714;--bg-space:#0b0b22;--indigo:#6366f1;--violet:#8b5cf6;--peri:#818cf8;--cyan:#67e8f9;--text-hi:#eef0ff;--text-lo:#9aa0c3;--card-bg:#1415308c;--card-border:#8b5cf638;--font-display:"Orbitron", "Noto Sans SC", sans-serif;--font-body:"Noto Sans SC", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg-deep);color:var(--text-hi);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}::selection{color:#fff;background:#8b5cf673}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--indigo), var(--violet));border-radius:5px}.container{max-width:1280px;margin:0 auto;padding:0 32px}.nav{z-index:100;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(#070714d9,#07071459);border-bottom:1px solid #8b5cf626;justify-content:space-between;align-items:center;padding:18px 40px;display:flex;position:fixed;inset:0 0 auto}.nav-logo{font-family:var(--font-display);letter-spacing:4px;background:linear-gradient(120deg, var(--cyan), var(--peri), var(--violet));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:800;text-decoration:none}.nav-links{align-items:center;gap:28px;display:flex}.nav-links a{color:var(--text-lo);letter-spacing:1px;font-size:14px;text-decoration:none;transition:color .25s}.nav-links a:hover{color:var(--cyan)}.nav-github{background:#8b5cf614;border:1px solid #8b5cf680;border-radius:999px;align-items:center;gap:8px;padding:8px 18px;display:inline-flex;color:var(--text-hi)!important;font-size:13px!important;transition:all .3s cubic-bezier(.2,.8,.3,1)!important}.nav-github:hover{background:#8b5cf647;transform:translateY(-1px);box-shadow:0 0 24px #8b5cf673}.nav-github svg{fill:currentColor;width:16px;height:16px}.hero{perspective:1200px;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.hero-inner{text-align:center;transform-style:preserve-3d}.hero-tag{font-family:var(--font-display);letter-spacing:6px;color:var(--cyan);text-transform:uppercase;opacity:.85;font-size:12px;transform:translateZ(40px)}.hero-title{font-family:var(--font-display);letter-spacing:10px;background:linear-gradient(115deg, #c7d2fe 0%, var(--peri) 35%, var(--violet) 65%, #f0abfc 100%);color:#0000;filter:drop-shadow(0 0 40px #8b5cf659);-webkit-background-clip:text;background-clip:text;margin:20px 0;font-size:clamp(48px,10vw,128px);font-weight:900;line-height:1.1;transform:translateZ(80px)}.hero-sub{color:var(--text-lo);letter-spacing:3px;font-size:16px;transform:translateZ(30px)}.hero-cta{letter-spacing:3px;color:var(--text-hi);background:linear-gradient(120deg,#6366f12e,#8b5cf62e);border:1px solid #67e8f966;border-radius:999px;margin-top:44px;padding:14px 42px;font-size:14px;text-decoration:none;transition:all .35s cubic-bezier(.2,.8,.3,1);display:inline-block;transform:translateZ(50px)}.hero-cta:hover{transform:translateZ(50px)translateY(-3px);box-shadow:0 0 40px #67e8f959}.hero-hint{color:var(--text-lo);letter-spacing:4px;font-size:11px;animation:2.4s ease-in-out infinite hintFloat;position:absolute;bottom:36px;left:50%;transform:translate(-50%)}.hero-hint:after{content:"";background:linear-gradient(180deg, var(--cyan), transparent);width:1px;height:34px;margin:10px auto 0;display:block}@keyframes hintFloat{0%,to{opacity:.5}50%{opacity:1}}.filter-bar{z-index:90;flex-wrap:wrap;justify-content:center;gap:12px;padding:70px 32px 40px;display:flex;position:sticky;top:62px}.filter-chip{cursor:pointer;letter-spacing:2px;color:var(--text-lo);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-user-select:none;user-select:none;background:#0b0b22b8;border:1px solid #8b5cf640;border-radius:999px;padding:9px 22px;font-size:13px;transition:all .3s cubic-bezier(.2,.8,.3,1)}.filter-chip:hover{color:var(--text-hi);border-color:#8b5cf699}.filter-chip.active{color:#fff;background:linear-gradient(120deg, var(--indigo), var(--violet));border-color:#0000;box-shadow:0 4px 26px #8b5cf680}.masonry-wrap{perspective:1400px;max-width:1280px;margin:0 auto;padding:10px 32px 120px}.masonry{columns:3 300px;column-gap:24px}.card{break-inside:avoid;background:var(--card-bg);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transform-style:preserve-3d;opacity:0;will-change:transform, opacity;border-radius:18px;margin-bottom:24px;transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s,opacity .6s,border-color .4s;overflow:hidden;transform:translateY(48px)rotateX(6deg)}.card.revealed{opacity:1;transform:translateY(0)rotateX(0)}.card:hover{border-color:#8b5cf68c;box-shadow:0 18px 60px #6366f147,inset 0 0 0 1px #67e8f91f}.card-visual{width:100%;display:block;position:relative;overflow:hidden}.card-visual .visual-canvas{width:100%;transition:transform .8s cubic-bezier(.2,.8,.3,1);display:block}.card:hover .visual-canvas{transform:scale(1.06)}.card-body{padding:20px 22px 24px}.card-cat{font-family:var(--font-display);letter-spacing:3px;text-transform:uppercase;color:var(--cyan);opacity:.9;font-size:10px}.card-title{letter-spacing:1px;margin:8px 0 10px;font-size:19px;font-weight:600}.card-desc{color:var(--text-lo);font-size:13.5px;line-height:1.75}.card-tags{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.card-tag{color:var(--peri);letter-spacing:1px;border:1px solid #818cf859;border-radius:999px;padding:3px 12px;font-size:11px}.flip-enter-active,.flip-leave-active{transition:all .55s cubic-bezier(.3,.7,.3,1)}.flip-enter-from{opacity:0;transform:rotateY(-32deg)translateZ(-180px)}.flip-leave-to{opacity:0;transform:rotateY(28deg)translateZ(-160px)}.footer{text-align:center;color:var(--text-lo);letter-spacing:2px;z-index:5;border-top:1px solid #8b5cf626;padding:48px 32px 60px;font-size:12px;position:relative}.footer .f-logo{font-family:var(--font-display);letter-spacing:5px;color:var(--peri);margin-bottom:10px;font-size:15px}.site-pet{z-index:200;cursor:pointer;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 6px 22px #67e8f94d);width:128px;height:104px;transition:transform .3s;position:fixed;bottom:12px;right:22px}.site-pet:hover{transform:translateY(-4px)scale(1.04)}.site-pet canvas{image-rendering:auto;width:100%;height:100%}.pet-bubble{letter-spacing:1px;max-width:200px;color:var(--text-hi);opacity:0;pointer-events:none;white-space:nowrap;background:#0b0b22e6;border:1px solid #8b5cf673;border-radius:14px 14px 4px;padding:10px 16px;font-size:12px;line-height:1.6;transition:all .35s cubic-bezier(.2,.8,.3,1);position:absolute;bottom:64px;right:118px;transform:translateY(8px)}.site-pet.show-bubble .pet-bubble{opacity:1;transform:translateY(0)}@media (width<=900px){.masonry{columns:2 240px}.nav{padding:14px 20px}.nav-links a:not(.nav-github){display:none}}@media (width<=560px){.masonry{columns:1}.container,.masonry-wrap{padding-left:18px;padding-right:18px}.site-pet{width:96px;height:78px;right:12px}.pet-bubble{max-width:160px;right:88px}}.starfield[data-v-bf324456]{z-index:0;pointer-events:none;position:fixed;inset:0}