:host{color-scheme:dark;--card:calc(182 * var(--u));--gap:calc(69 * var(--u));--logo:calc(95 * var(--u));--face:calc(143 * var(--u));--label:calc(23 * var(--u));--step:calc(251 * var(--u));--mask:calc(90 * var(--u))}
*{box-sizing:border-box}
:host{margin:0;color:#f5f7ff;background:#030d29;font-family:"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
.showcase{min-height:100svh;background-color:#030d29;background-image:url('https://oss.shujiang.top/gw-static/modules/projects/assets/background.jpg');background-repeat:no-repeat;background-size:max(100%, calc(1200 * var(--u))) auto;background-position:right calc(-1 * max(calc(166 * var(--u)), 13.85vw));padding:calc(110 * var(--u)) 0 calc(70 * var(--u));overflow:hidden}
.container{width:calc(100% - calc(64 * var(--u)));max-width:calc(1360 * var(--u));margin:0 auto}
header{margin-bottom:calc(32 * var(--u))}
.module-title{margin:0;font-size:calc(48 * var(--u));line-height:1.4;font-weight:650;letter-spacing:calc(1 * var(--u))}
header p{font-size:calc(23 * var(--u));letter-spacing:calc(1 * var(--u));margin:calc(12 * var(--u)) 0 0;line-height:1.6;color:#e0e7f9}
.window{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 var(--mask),#000 calc(100% - var(--mask)),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mask),#000 calc(100% - var(--mask)),transparent);touch-action:pan-y;cursor:grab}
.window.dragging{cursor:grabbing}
.row{height:calc(233 * var(--u));position:relative;overflow:visible;touch-action:pan-y}
.track{position:absolute;left:0;top:calc(13 * var(--u));display:flex;gap:var(--gap);will-change:transform}
.project{width:var(--card);flex:none;border:0;padding:0;color:#f1f4ff;background:none;font:inherit;text-align:center;position:relative;outline:none;cursor:inherit;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.face{width:100%;height:var(--face);border-radius:calc(23 * var(--u));border:calc(1 * var(--u)) solid rgba(43,100,228,.24);display:flex;align-items:center;justify-content:center;position:relative;isolation:isolate;background:linear-gradient(135deg,rgba(7,37,107,.55),rgba(3,20,66,.7));transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.face:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;background:radial-gradient(ellipse at var(--mx,30%) var(--my,10%),rgba(75,134,255,.38),transparent 65%),linear-gradient(135deg,#1d50bb,#082469 62%,#1454d3);transition:opacity .28s ease}
.face img{width:var(--logo);height:var(--logo);border-radius:25%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.label{display:block;font-size:var(--label);line-height:1.5;margin-top:calc(15 * var(--u));white-space:nowrap;transition:color .25s,transform .25s,text-shadow .25s}
.arrow{position:absolute;top:calc(10 * var(--u));right:calc(14 * var(--u));font-size:calc(24 * var(--u));opacity:0;transform:translate(calc(-3 * var(--u)),calc(3 * var(--u)));transition:opacity .25s,transform .25s;color:#e8f2ff}
.project.active .face,.project:focus-visible .face{transform:translateY(calc(-7 * var(--u))) scale(1.045);border-color:#5799ff;box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-13 * var(--u)) rgba(10,91,255,.65),inset 0 calc(1 * var(--u)) calc(1 * var(--u)) #82abff66}
.project.active .face:before,.project:focus-visible .face:before{opacity:1}
.project.active .label,.project:focus-visible .label{color:white;text-shadow:0 0 calc(18 * var(--u)) #4387ff77;transform:translateY(calc(-2 * var(--u)));font-weight:600}
.project.active .arrow,.project:focus-visible .arrow{opacity:1;transform:translate(0,0)}
footer{display:flex;align-items:center;justify-content:space-between;margin-top:calc(18 * var(--u));color:#7082ad;font-size:calc(13 * var(--u));letter-spacing:calc(.6 * var(--u));padding:0 calc(2 * var(--u))}
.dot{padding:0 calc(12 * var(--u))}
.pause{font:inherit;letter-spacing:inherit;color:#aabbe0;background:#07183b99;border:calc(1 * var(--u)) solid #23447977;border-radius:calc(20 * var(--u));padding:calc(8 * var(--u)) calc(15 * var(--u));cursor:pointer;transition:background .2s}
.pause:hover,.pause:focus-visible{background:#143875;color:#fff;outline:calc(1 * var(--u)) solid #4e8af6}
@media(max-width:760px){:host{--card:164px;--gap:61px;--step:225px;--face:133px;--logo:88px;--label:20px}
.showcase{padding-top:74px}
.module-title{font-size:40px}
header p{font-size:19px}
.row{height:213px}}
@media(max-width:760px){:host{--card:150px;--gap:38px;--step:188px;--face:126px;--logo:84px;--label:18px;--mask:48px}
.container{width:calc(100% - 40px)}
.module-title{font-size:30px;max-width:650px}
.showcase{padding-top:65px}
.row{height:200px}
header{margin-bottom:30px}
header p{font-size:16px}}
@media(max-width:520px){:host{--card:122px;--gap:27px;--step:149px;--face:108px;--logo:72px;--label:15px;--mask:24px}
.container{width:calc(100% - 32px)}
.showcase{padding-top:48px;padding-bottom:32px}
.module-title{font-size:27px;line-height:1.55;letter-spacing:0}
header p{font-size:14px;line-height:1.8;max-width:290px}
.row{height:173px}
.face{border-radius:20px}
footer{font-size:11px;letter-spacing:0}
.dot{padding:0 6px}
.pause{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.face,.face:before,.label,.arrow{transition:none}}
:host{display:block;position:relative;--u:min(1px,.052083333333vw);font-size:16px;background:#020b25;color:#f5f8ff}section{scroll-margin-top:90px}button,a,input,textarea{touch-action:manipulation}section,article,div{box-sizing:border-box}.overlay{z-index:300}dialog::backdrop{background:#00071bc9;backdrop-filter:blur(12px)}@media(max-width:760px){:host{--u:1px}}
:host{background:#020b25}.showcase{min-height:0;padding-top:calc(60 * var(--u));padding-bottom:calc(70 * var(--u));background-color:#020b25;background-image:linear-gradient(to bottom,#020b25,transparent 20%,transparent 78%,#020b25),url('https://oss.shujiang.top/gw-static/modules/projects/assets/background.jpg');background-size:100% 100%,100% auto;background-position:center,right calc(-166 * var(--u))}.container{width:calc(1360 * var(--u));max-width:calc(100% - 40px)}footer{padding-inline:calc(10 * var(--u))}.row{height:calc(233 * var(--u))}.project{cursor:grab}.window.dragging .project{cursor:grabbing}
@media(max-width:760px){.showcase{padding:55px 0 45px}.container{width:calc(100% - 40px)}.row{height:200px}header .module-title{font-size:28px}header p{font-size:15px}footer{font-size:11px}}
@media(max-width:520px){.row{height:173px}}

/* Smaller project tiles and tighter rows keep all four tracks in view. */
@media(min-width:761px){
 :host{--card:calc(108 * var(--u));--gap:calc(24 * var(--u));--step:calc(132 * var(--u));--face:calc(86 * var(--u));--logo:calc(60 * var(--u));--label:calc(14 * var(--u));--mask:calc(32 * var(--u))}
 .showcase{padding-top:calc(42 * var(--u));padding-bottom:calc(38 * var(--u))}
 header{margin-bottom:calc(22 * var(--u))}
 header .module-title{font-size:calc(34 * var(--u));line-height:1.4}
 header p{font-size:calc(17 * var(--u));margin-top:calc(10 * var(--u))}
 .row{height:calc(132 * var(--u))}
 .track{top:calc(10 * var(--u))}
 .face{border-radius:calc(18 * var(--u))}
 .label{margin-top:calc(10 * var(--u))}
 footer{margin-top:calc(8 * var(--u))}
}
@media(max-width:760px){
 :host{--card:88px;--gap:16px;--step:104px;--face:74px;--logo:52px;--label:12px;--mask:16px}
 .showcase{padding:32px 0 28px}header{margin-bottom:18px}header .module-title{font-size:24px}header p{font-size:13px}.row{height:118px}.label{margin-top:9px}.face{border-radius:16px}
}

.window,.project,.window.dragging .project{cursor:default;pointer-events:none}.project .face{transform:none!important}

.label{overflow:hidden;text-overflow:ellipsis}