*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Microsoft YaHei,黑体,宋体,sans-serif}html,body{scroll-behavior:smooth}li{list-style:none}body{overscroll-behavior:none;background-color:#000;height:100vh;overflow:hidden}#dot-matrix-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}nav{z-index:100;color:#fff;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #0003;border-radius:500px;align-items:center;gap:2rem;width:fit-content;margin:.2rem auto 0;padding:.5rem .6rem .5rem 1.5rem;display:flex;position:sticky;top:.2rem;box-shadow:inset 0 0 .3rem #fff3}nav h1{margin-bottom:-.2rem;font-size:1.2rem;font-weight:700}nav ul{align-items:center;display:flex}nav ul li a{cursor:pointer;color:#fff;border-radius:500px;padding:.5rem 1rem;text-decoration:none;transition:all .2s;display:block}nav ul li a:hover{background-color:#0000001a;box-shadow:inset 0 0 .5rem #fff3}nav ul li a:active{background-color:#00000080;box-shadow:inset 0 0 .5rem #00000080,0 0 .1rem #fff3}header{z-index:3;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}header h1{letter-spacing:.04em;color:#fff;text-shadow:0 2px 30px #0000008c;will-change:transform;font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800}header h1 .title-char{will-change:transform, filter, opacity;display:inline-block}nav ul li a.active{background-color:#ffffff1f;box-shadow:inset 0 0 .5rem #fff3}#scene{z-index:1;perspective:1300px;cursor:grab;touch-action:none;position:fixed;inset:0;overflow:hidden}#scene.dragging{cursor:grabbing}#scene.grid-mode{cursor:default}.grid-mode .stage-ui,.grid-mode .rail{pointer-events:none}.grid-mode .card{cursor:pointer}.grid-mode .card:hover{filter:brightness(1.18);border-color:#ffffff73}.grid-mode .card:hover .card__cta{opacity:1;pointer-events:auto;transform:none}.corridor{transform-style:preserve-3d;position:absolute;inset:0}.card{--cw:300px;--ch:390px;width:var(--cw);height:var(--ch);will-change:transform, opacity;cursor:pointer;background:#10101ab8;border:1px solid #ffffff24;border-radius:18px;transition:filter .25s,border-color .25s;position:absolute;top:50%;left:50%;overflow:hidden;box-shadow:inset 0 0 .6rem #ffffff1f}.card.is-focused{box-shadow:0 0 46px hsl(var(--hue) 90% 62% / .28), inset 0 0 .8rem #ffffff29;border-color:#ffffff8c}.card__bg{background:radial-gradient(circle at 28% 22%, hsl(var(--hue) 85% 60% / .38), transparent 52%), radial-gradient(circle at 78% 82%, hsl(calc(var(--hue) + 70) 85% 55% / .3), transparent 48%), radial-gradient(#ffffff21 1px, transparent 1.5px);background-size:auto,auto,11px 11px;position:absolute;inset:0}.card__body{color:#fff;text-shadow:0 1px 8px #0009;background:linear-gradient(#0000,#05050ce0);flex-direction:column;gap:.45rem;padding:2.6rem 1.1rem 1.1rem;display:flex;position:absolute;bottom:0;left:0;right:0}.card__num{letter-spacing:.25em;color:#ffffff8c;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem}.card__title{font-size:1.35rem}.card__tag{letter-spacing:.08em;color:#ffffffc7;border:1px solid #ffffff40;border-radius:99px;align-self:flex-start;padding:.14rem .6rem;font-size:.66rem}.card__cta{color:#fff;opacity:0;pointer-events:none;border:1px solid #ffffff59;border-radius:500px;align-self:flex-start;margin-top:.2rem;padding:.42rem .95rem;font-size:.72rem;text-decoration:none;transition:opacity .45s,transform .45s,background .3s;transform:translateY(6px);box-shadow:inset 0 0 .3rem #ffffff2e}.card.is-focused .card__cta{opacity:1;pointer-events:auto;transform:none}.card__cta:hover{background:#ffffff1f}.stage-ui{z-index:2;pointer-events:none;opacity:0;flex-direction:column;align-items:center;gap:.7rem;display:flex;position:absolute;bottom:2rem;left:0;right:0}.counter{letter-spacing:.22em;color:#ffffff8c;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem}.counter b{color:#fff;font-size:.95rem}.rail{pointer-events:auto;gap:.45rem;display:flex}.rail button{cursor:pointer;background:#ffffff38;border:none;border-radius:50%;width:7px;height:7px;padding:0;transition:background .25s,transform .25s,box-shadow .25s}.rail button:hover{background:#ffffff80}.rail button.on{background:#fff;transform:scale(1.3);box-shadow:0 0 8px #ffffffb3}.hint{letter-spacing:.22em;color:#fff6;font-size:.66rem}#pointer-follower{will-change:transform, width, height, border-radius;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:none;z-index:9999;background:#ffffff1a;border:1px solid #ffffff1a;border-radius:500px;width:50px;height:50px;transition:background .3s,border-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;position:fixed;top:0;left:0;transform:translate(-100px,-100px);box-shadow:inset 0 0 .5rem #fff3}#pointer-follower.attaching{border-color:#ffffffe6;box-shadow:0 10px 40px #0000001a;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background-color:#fff0!important}.sidebar{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e0e18a8;border:1px solid #ffffff24;border-radius:16px;flex-direction:column;gap:.3rem;width:172px;padding:.9rem .7rem;transition:transform .5s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:78px;left:14px;transform:translate(-130%);box-shadow:inset 0 0 .4rem #ffffff14}.sidebar.open{transform:none}.sidebar__title{letter-spacing:.28em;color:#fff6;padding:0 .8rem .4rem;font-size:.66rem}.sidebar__list{flex-direction:column;gap:.15rem;display:flex}.sidebar__item{color:#b8b8cc;cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:space-between;align-items:center;width:100%;padding:.55rem .8rem;font-family:inherit;font-size:.85rem;transition:background .2s,color .2s;display:flex}.sidebar__item i{color:#66667e;font-size:.68rem;font-style:normal}.sidebar__item:hover{color:#fff;background:#ffffff0f}.sidebar__item.on{color:#fff;background:#ffffff1f}.sidebar__item.on i{color:#9a9ab2}.about{z-index:60;visibility:hidden;pointer-events:none;position:fixed;inset:0}.about.open{visibility:visible;pointer-events:auto}.about__backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;background:#0000008c;transition:opacity .45s;position:absolute;inset:0}.about.open .about__backdrop{opacity:1}.about__panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;opacity:0;background:#0c0c16d9;border:1px solid #ffffff24;border-radius:20px;grid-template-columns:230px 1fr;gap:1.6rem;padding:2rem 2.2rem;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);display:grid;position:absolute;inset:92px 24px 24px;overflow-y:auto;transform:translateY(26px)scale(.97);box-shadow:inset 0 0 .5rem #ffffff14}.about.open .about__panel{opacity:1;transform:none}.about__close{color:#fff;cursor:pointer;background:0 0;border:1px solid #ffffff40;border-radius:50%;width:2rem;height:2rem;transition:background .2s;position:absolute;top:1rem;right:1rem}.about__close:hover{background:#ffffff1f}.about__side{text-align:center;flex-direction:column;align-items:center;gap:.55rem;padding-top:.6rem;display:flex}.about__avatar{background:radial-gradient(circle at 35% 30%, hsl(var(--hue) 85% 60% / .5), transparent 60%), radial-gradient(circle at 70% 75%, hsl(calc(var(--hue) + 70) 85% 55% / .4), transparent 55%), #101018;border:1px solid #ffffff40;border-radius:50%;width:88px;height:88px}.about__name{font-size:1.4rem;font-weight:800}.about__role{color:#9a9ab2;letter-spacing:.1em;font-size:.78rem}.about__links{gap:.5rem;margin-top:.4rem;display:flex}.about__links a{color:#fff;border:1px solid #ffffff4d;border-radius:99px;padding:.32rem .95rem;font-size:.72rem;text-decoration:none;transition:background .2s}.about__links a:hover{background:#ffffff1f}.about__main{flex-direction:column;gap:1.3rem;display:flex}.about__main h3{letter-spacing:.28em;color:#ffffff80;margin-bottom:.5rem;font-size:.8rem}.about__main p{color:#c8c8d8;font-size:.92rem;line-height:1.75}.about__skills{flex-wrap:wrap;gap:.4rem;display:flex}.about__skills span{color:#d8d8e8;border:1px solid #ffffff38;border-radius:99px;padding:.28rem .85rem;font-size:.75rem}.preview{z-index:110;visibility:hidden;pointer-events:none;position:fixed;inset:0}.preview.open{visibility:visible;pointer-events:auto}.preview__backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;background:#0009;transition:opacity .45s;position:absolute;inset:0}.preview.open .preview__backdrop{opacity:1}.preview__frame{opacity:0;background:#0a0a14;border:1px solid #ffffff29;border-radius:16px;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);position:absolute;inset:56px 40px 200px;overflow:hidden;transform:translateY(30px)scale(.98);box-shadow:0 30px 80px #00000080}.preview.open .preview__frame{opacity:1;transform:none}.preview__iframe{background:#fff;border:none;width:100%;height:100%;position:absolute;inset:0}.preview__loading{color:#9a9ab2;letter-spacing:.15em;z-index:1;background:#0a0a14;flex-direction:column;justify-content:center;align-items:center;gap:.9rem;font-size:.8rem;transition:opacity .35s;display:flex;position:absolute;inset:0}.preview__loading:not(.on){opacity:0;pointer-events:none}.preview__loading i{border:2px solid #ffffff26;border-top-color:#ffffffbf;border-radius:50%;width:34px;height:34px;animation:.9s linear infinite preview-spin}@keyframes preview-spin{to{transform:rotate(360deg)}}.preview__info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;opacity:0;background:#0c0c16c7;border:1px solid #ffffff24;border-radius:16px;width:min(460px,100vw - 80px);padding:1.1rem 1.3rem;transition:opacity .5s cubic-bezier(.22,1,.36,1) 80ms,transform .5s cubic-bezier(.22,1,.36,1) 80ms;position:absolute;bottom:32px;left:40px;transform:translateY(24px);box-shadow:inset 0 0 .4rem #ffffff14}.preview.open .preview__info{opacity:1;transform:none}.preview__meta{align-items:center;gap:.55rem;margin-bottom:.5rem;display:flex}.preview__num{letter-spacing:.2em;color:#8a8aa5;font-size:.68rem}.preview__tag{color:hsl(var(--hue) 80% 78%);border:1px solid hsl(var(--hue) 80% 60% / .45);border-radius:99px;padding:.14rem .6rem;font-size:.68rem}.preview__title{margin-bottom:.35rem;font-size:1.35rem;font-weight:800}.preview__desc{color:#c8c8d8;margin-bottom:.7rem;font-size:.85rem;line-height:1.7}.preview__open{color:#fff;border:1px solid #ffffff52;border-radius:99px;padding:.34rem 1rem;font-size:.76rem;text-decoration:none;transition:background .2s;display:inline-block}.preview__open:hover{background:#ffffff1f}.preview__close{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:0;background:#0c0c1699;border:1px solid #ffffff47;border-radius:50%;width:2.4rem;height:2.4rem;font-size:1rem;transition:opacity .4s .15s,background .2s;position:absolute;top:60px;right:48px}.preview.open .preview__close{opacity:1}.preview__close:hover{background:#ffffff24}.toast{z-index:200;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e8e8f2;opacity:0;pointer-events:none;background:#0e0e18d9;border:1px solid #ffffff2e;border-radius:99px;padding:.6rem 1.4rem;font-size:.85rem;transition:opacity .35s,transform .35s;position:fixed;bottom:42px;left:50%;transform:translate(-50%,16px)}.toast.show{opacity:1;transform:translate(-50%)}@media (width<=640px){.card{--cw:230px;--ch:330px}.card__title{font-size:1.15rem}.rail{gap:.35rem}.rail button{width:6px;height:6px}.sidebar{width:auto;padding:.55rem;inset:auto 12px 14px;transform:translateY(160%)}.sidebar.open{transform:none}.sidebar__title{display:none}.sidebar__list{flex-direction:row;gap:.35rem;overflow-x:auto}.sidebar__item{flex-shrink:0;gap:.4rem;width:auto;padding:.45rem .8rem;font-size:.78rem}.about__panel{grid-template-columns:1fr;gap:1.2rem;padding:1.4rem 1.2rem;inset:70px 12px 12px}.about__side{text-align:left;flex-direction:row;justify-content:flex-start;gap:.9rem}.about__avatar{width:64px;height:64px}.about__links{margin-top:0}.preview__frame{inset:20px 12px 180px}.preview__info{width:auto;padding:.85rem 1rem;bottom:14px;left:12px;right:12px}.preview__title{font-size:1.1rem}.preview__desc{margin-bottom:.55rem;font-size:.78rem}.preview__close{top:24px;right:20px}}