:root{color-scheme:dark}
.project-page,.portfolio-stage{--project-accent:#94b4ff;--project-accent-soft:rgba(126,157,255,.12);font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#eef2fb;background:#0b101a}
.portfolio-apps{--project-accent:#70dfc5;--project-accent-soft:rgba(72,213,173,.1)}
.project-page{margin:0;min-height:100vh;background-image:radial-gradient(ellipse at 85% 0,var(--project-accent-soft),transparent 55%)}
.project-page *,.portfolio-stage *{box-sizing:border-box}
.project-page a,.portfolio-stage a{color:inherit;text-decoration:none}
.project-page a:focus-visible,.portfolio-stage a:focus-visible,.project-page button:focus-visible,.portfolio-stage button:focus-visible{outline:2px solid var(--project-accent);outline-offset:5px}
.project-site-header{max-width:1240px;margin:auto;padding:28px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff10;font-size:13px}
.project-brand{font-weight:800;letter-spacing:.13em;font-size:20px}.project-brand span{font-size:10px;font-weight:500;color:#8b97ad;letter-spacing:.16em;margin-left:12px}
.portfolio-shell{width:100%;max-width:1240px;margin:auto;padding:36px 32px 24px}
.positioning.portfolio-stage{display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background-image:radial-gradient(ellipse at 85% 0,var(--project-accent-soft),transparent 60%);scrollbar-color:#465167 #0b101a}
.portfolio-stage .portfolio-shell{padding-top:80px;padding-bottom:70px}
.portfolio-switch{display:flex;align-items:center;gap:6px;margin-bottom:52px;border-bottom:1px solid #ffffff16;padding-bottom:16px;font-size:14px}
.portfolio-switch a{padding:11px 18px;border-radius:7px;color:#9da9be;font-weight:600}
.portfolio-switch a[aria-current=page]{color:var(--project-accent);background:var(--project-accent-soft)}
.portfolio-switch .portfolio-all{margin-left:auto;font-size:12px;background:none}
.project-heading{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;margin-bottom:38px}
.project-eyebrow{color:var(--project-accent);font-size:11px;font-weight:700;letter-spacing:.18em;margin:0 0 18px}
.project-heading h2{font-size:clamp(26px,3vw,42px);font-weight:650;line-height:1.35;letter-spacing:-.035em;margin:0 0 18px;color:#f2f5ff}
.project-intro{font-size:14px;line-height:1.9;color:#a1adc1;max-width:650px;margin:0}
.project-count{flex-shrink:0;text-align:right;display:flex;flex-direction:column;gap:7px}.project-count strong{font-size:56px;font-weight:300;letter-spacing:-.06em;line-height:1;color:var(--project-accent)}.project-count span{font-size:10px;letter-spacing:.15em;color:#8f9bb0}
.project-toolbar{display:flex;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid #ffffff15;padding:20px 0}
.project-section-label{font-size:12px;font-weight:700;letter-spacing:.08em}
.project-collection-note{font-size:11px;color:#8290a8;text-align:right}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.project-card{min-width:0;background:#111a28;border:1px solid #ffffff14;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}
.project-card:hover{border-color:#ffffff40;box-shadow:0 16px 36px #0003}
.project-preview{display:block;background:#0d1421;border-bottom:1px solid #ffffff12}
.project-window-bar{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#8f9cb3;font-size:9px;letter-spacing:.1em;border-bottom:1px solid #ffffff0d;background:#172132}
.project-window-dots{display:flex;gap:5px}.project-window-dots i{width:5px;height:5px;border-radius:50%;background:#536179}
.project-image{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(135deg,#18263b,#0d1421)}
.portfolio-apps .project-image{background:linear-gradient(135deg,#173032,#0c1721)}
.project-image img{display:block;width:100%;height:100%;max-height:290px;object-fit:contain;filter:drop-shadow(0 10px 18px #0004);border-radius:4px}
.project-image-fallback{display:flex;flex-direction:column;gap:16px;padding:24px}.project-image-fallback span{font-size:12px;letter-spacing:.2em;color:var(--project-accent)}.project-image-fallback strong{font-size:24px;line-height:1.5;overflow-wrap:anywhere}
.project-card-copy{display:flex;flex-direction:column;flex:1;padding:24px}
.project-card-meta{display:flex;align-items:center;gap:10px;font-size:10px;color:#93a1b8;margin-bottom:15px;letter-spacing:.04em}
.project-platform{border:1px solid #ffffff1b;border-radius:5px;padding:4px 8px;color:var(--project-accent);background:var(--project-accent-soft)}
.project-card h3{font-size:19px;line-height:1.65;font-weight:600;letter-spacing:0;overflow-wrap:anywhere;margin:0 0 10px;color:#f2f5fc}
.project-card-copy>p{font-size:13px;line-height:1.9;color:#a2adc0;margin:0 0 22px;overflow-wrap:anywhere}
.project-card-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid #ffffff12;font-size:12px}
.project-details-link{color:var(--project-accent)!important;font-weight:600;display:flex;gap:15px}.project-external-link{color:#a8b5cb!important}.project-card-actions a:hover{text-decoration:underline}
.portfolio-footer{display:flex;justify-content:space-between;gap:20px;padding:32px 0 0;margin-top:32px;border-top:1px solid #ffffff16;font-size:11px;color:#8290a8}.portfolio-footer a{color:var(--project-accent)}
.project-filters{display:flex;gap:6px;flex-wrap:wrap}.project-filters button{border:1px solid #ffffff18;border-radius:5px;background:none;color:#a2adc0;padding:6px 10px;cursor:pointer}.project-filters button[aria-pressed=true]{color:var(--project-accent);background:var(--project-accent-soft)}
.project-empty{padding:48px 0;color:#a2adc0}.project-card[hidden]{display:none}
.project-detail-shell{max-width:1180px;margin:auto;padding:36px 32px 72px}
.project-breadcrumb{font-size:12px;color:#9cabc2;margin-bottom:36px}.project-breadcrumb a{color:var(--project-accent)}
.project-detail-hero{max-width:900px;margin-bottom:36px}.project-detail-hero h1{font-size:clamp(27px,4vw,46px);line-height:1.45;letter-spacing:-.03em;overflow-wrap:anywhere;margin:16px 0;color:#f2f5ff}.project-detail-hero>p{color:#a7b3c8;line-height:1.95;font-size:16px;max-width:800px}
.project-detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.project-primary-action{padding:12px 20px;background:var(--project-accent);color:#08101b!important;border-radius:7px;font-size:13px;font-weight:700}.project-secondary-action{padding:12px 20px;border:1px solid #ffffff26;border-radius:7px;color:#b5c2d8!important;font-size:13px}
.project-gallery{background:#111a28;border:1px solid #ffffff1c;border-radius:14px;padding:24px;margin:0 0 42px}.project-gallery-main{display:block;width:100%;height:auto;max-height:680px;object-fit:contain;background:#0b101a;border-radius:7px}.project-gallery-thumbs{display:flex;gap:12px;overflow-x:auto;padding-top:16px}.project-gallery-thumbs button{flex:0 0 110px;padding:3px;background:#0b101a;border:1px solid #ffffff20;border-radius:5px;cursor:pointer}.project-gallery-thumbs button[aria-pressed=true]{border-color:var(--project-accent)}.project-gallery-thumbs img{width:100%;height:64px;object-fit:contain;display:block}.project-gallery figcaption{font-size:11px;color:#8290a8;margin-top:14px;line-height:1.7}
.project-prose{max-width:820px;margin:auto;color:#b5c1d5;font-size:15px;line-height:2;overflow-wrap:anywhere}.project-prose h2{font-size:25px;color:#f0f4ff;margin:44px 0 18px;line-height:1.5}.project-prose h3{font-size:20px;color:#e5ecfa}.project-prose p{margin:18px 0}.project-prose img{display:block;max-width:100%;height:auto;margin:26px auto;border-radius:8px}.project-prose a{color:var(--project-accent);text-decoration:underline}.project-prose ul,.project-prose ol{padding-left:25px}.project-prose li{margin:10px 0}.project-prose pre{overflow:auto;max-width:100%}.project-video{max-width:100%;max-height:650px;width:100%;margin:24px 0;background:#000}
@media(max-width:700px){.portfolio-shell,.project-detail-shell{padding:24px 18px 40px}.project-site-header{padding:20px 18px}.project-brand span{display:none}.portfolio-stage .portfolio-shell{padding:68px 18px 60px}.portfolio-switch{margin-bottom:32px;gap:2px}.portfolio-switch a{padding:10px 12px;font-size:12px}.portfolio-switch .portfolio-all{display:none}.project-heading{gap:18px;align-items:flex-start}.project-heading h2{font-size:28px}.project-count strong{font-size:36px}.project-count span{font-size:9px}.project-intro{font-size:13px}.project-toolbar{flex-wrap:wrap;gap:12px}.project-collection-note{font-size:10px}.project-grid{grid-template-columns:1fr;gap:20px}.project-card-copy{padding:20px}.project-card h3{font-size:19px}.project-image{padding:12px}.project-image img{max-height:320px}.project-gallery{padding:12px}.project-detail-hero>p{font-size:14px}.project-prose{font-size:14px}.project-prose h2{font-size:23px}.portfolio-footer{line-height:1.8}}
.portfolio-switch{margin-bottom:32px}
.project-heading{margin-bottom:24px}
.project-eyebrow{margin-bottom:12px}
.project-heading h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.project-intro{line-height:1.8}
.project-image{aspect-ratio:auto;height:220px}
@media(max-width:700px){.project-image{height:200px}.project-heading h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.project-card{transition:none}}

/* Full-screen project stages: wheel is reserved for the surrounding page. */
body:has(.stage-deck){position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
.positioning.portfolio-stage:has(.stage-deck){overflow:hidden;display:flex;align-items:stretch;justify-content:center}
.stage-deck{width:min(1240px,100%);height:100%;min-height:0;margin:auto;padding:64px 40px 30px;display:flex;flex-direction:column;gap:18px;touch-action:pinch-zoom}
.deck-header{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-shrink:0}
.deck-header p{font:10px/1.5 monospace;letter-spacing:.22em;color:var(--project-accent);margin:0 0 8px}
.deck-header h2{font-size:clamp(24px,3vw,38px);font-weight:650;letter-spacing:-.04em;margin:0;color:#eef5ff;line-height:1.3}
.deck-header h2 span{font:14px monospace;color:#698397;letter-spacing:0}
.deck-header>a{font-size:12px;color:var(--project-accent);min-height:44px;display:flex;align-items:center;white-space:nowrap}
.deck-slides{flex:1;min-height:0;position:relative}
.deck-slide{height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:36px;align-items:center;min-width:0}
.deck-slide[hidden]{display:none}
.deck-copy{min-width:0}.deck-platform{font:10px/1.5 monospace;letter-spacing:.15em;color:var(--project-accent);border:1px solid #70dfc540;padding:7px 10px;display:inline-block;border-radius:4px}
.deck-copy h3{font-size:clamp(23px,2.8vw,36px);line-height:1.45;color:#f4f8ff;letter-spacing:-.03em;margin:20px 0 16px;overflow-wrap:anywhere}
.deck-copy p{font-size:14px;line-height:1.85;color:#aabbd0;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.deck-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.deck-actions a{min-height:44px;display:flex;align-items:center;padding:10px 16px;font-size:13px;border:1px solid #ffffff30;border-radius:5px}.deck-actions a:first-child{background:var(--project-accent);color:#08141e}
.deck-preview{height:min(100%,460px);min-height:0;display:flex;flex-direction:column;border:1px solid #ffffff24;border-radius:10px;background:linear-gradient(145deg,#173036,#0a121e);box-shadow:0 24px 70px #0005;overflow:hidden;position:relative}
.portfolio-web .deck-preview{background:linear-gradient(145deg,#1a2a48,#0b1221)}
.deck-window{height:34px;flex-shrink:0;display:flex;justify-content:space-between;padding:0 14px;align-items:center;font:10px monospace;color:#7f9cae;border-bottom:1px solid #ffffff12}
.deck-preview img{display:block;width:100%;height:calc(100% - 34px);min-height:0;object-fit:contain;padding:16px}
.deck-preview strong{padding:32px;font-size:26px}
.deck-controls{display:flex;gap:12px;align-items:center;flex-shrink:0;border-top:1px solid #ffffff1c;padding-top:14px}
.stage-deck button{font:12px/1 monospace;color:#a8bacc;min-width:44px;min-height:44px;border:1px solid #ffffff1b;border-radius:5px;background:transparent;cursor:pointer;touch-action:manipulation}
.stage-deck button:hover{border-color:var(--project-accent);color:var(--project-accent)}
.deck-dots{display:flex;gap:6px;flex-wrap:wrap}.deck-dots button[aria-pressed=true]{background:var(--project-accent);border-color:var(--project-accent);color:#0a1621}
.deck-status{font:12px monospace;color:var(--project-accent);margin-left:auto;white-space:nowrap}
.deck-page-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.deck-page-nav button{font:11px/1.4 "Segoe UI",sans-serif;border:0;min-width:66px;color:var(--project-accent);padding:6px}
.deck-page-nav>span{font-size:10px;color:#7f93a9;text-align:center}
@media(max-width:700px){
 body:has(.stage-deck) #container{width:100vw;height:100vh}
 .stage-deck{padding:56px 18px 24px;gap:12px}
 .deck-header{gap:10px}.deck-header h2{font-size:25px}.deck-header p{font-size:9px;margin-bottom:5px}.deck-header>a{font-size:11px}
 .deck-slide{display:flex;flex-direction:column-reverse;gap:14px;align-items:stretch;justify-content:center}
 .deck-preview{height:auto;flex:1;max-height:40vh;min-height:80px;box-shadow:0 12px 28px #0004}
 .deck-preview img{padding:8px;flex:1;height:0;min-height:0}
 .deck-copy{flex-shrink:0}.deck-platform{font-size:9px;padding:5px 7px}
 .deck-copy h3{font-size:20px;line-height:1.4;margin:10px 0 8px}
 .deck-copy p{font-size:12px;line-height:1.7;-webkit-line-clamp:2}
 .deck-actions{margin-top:12px;gap:8px}.deck-actions a{font-size:12px;padding:8px 12px}
 .deck-controls{gap:6px;padding-top:10px}.deck-dots{gap:4px;flex:1}.deck-dots button{min-width:14px;width:14px;min-height:44px;padding:0;font-size:0;border:0;background:linear-gradient(#597384,#597384) center/5px 5px no-repeat}.deck-dots button[aria-pressed=true]{background:linear-gradient(var(--project-accent),var(--project-accent)) center/12px 5px no-repeat}
 .deck-status{font-size:10px}.deck-page-nav>span{font-size:9px}.deck-page-nav{gap:4px}
}
@media(max-height:680px){.stage-deck{padding-top:44px;padding-bottom:20px;gap:8px}.deck-header h2{font-size:23px}.deck-header p{display:none}.deck-copy h3{font-size:19px;margin:8px 0}.deck-copy p{-webkit-line-clamp:2}.deck-actions{margin-top:8px}.deck-page-nav>span{display:none}.deck-controls{padding-top:6px}.deck-slide{gap:10px}}

@media(max-width:700px){.stage-deck{padding-bottom:62px}.deck-page-nav>span{display:none}.deck-page-nav{padding:0 6px}.deck-dots button{min-width:24px;width:24px}}
@media(max-width:700px) and (max-height:680px){.stage-deck{padding-top:46px;padding-bottom:52px;gap:6px}.deck-copy p{-webkit-line-clamp:1}.deck-copy h3{font-size:18px;line-height:1.35}.deck-preview{min-height:64px}.deck-platform{padding:3px 6px}.deck-controls{padding-top:4px}}
@media(max-width:700px){.deck-dots{min-width:0;flex-wrap:nowrap}.deck-dots button{flex:1;min-width:8px;width:auto}}
/* Overlay slides during transitions; each incoming project slides into the same viewport. */
.deck-slide{position:absolute;inset:0;width:100%;will-change:transform,opacity}
.deck-slides{isolation:isolate}
.portfolio-stage .deck-preview{background:linear-gradient(145deg,rgba(var(--neon-accent-rgb,112,223,197),.16),#0a121e);border-color:rgba(var(--neon-accent-rgb,112,223,197),.35)}
.portfolio-stage .deck-platform{border-color:rgba(var(--neon-accent-rgb,112,223,197),.4)}
.portfolio-stage .deck-header h2{color:var(--project-accent)}
@media(prefers-reduced-motion:reduce){.deck-slide{will-change:auto}}