/* 主页：作品大图、独立居中说明，以及轻量交互。 */
.wide-shell{width:min(1600px,calc(100% - 80px));margin-inline:auto}
.portfolio-home .nav-shell{width:min(1600px,calc(100% - 80px))}
.cover-sheet{min-height:calc(100svh - 80px);display:flex;flex-direction:column}
.cover-type{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 0;text-align:center}
.cover-type h1{font-size:clamp(112px,17vw,246px);line-height:1.18;font-weight:700;letter-spacing:-.075em;text-indent:-.075em}
.cover-subtitle{font-size:clamp(23px,2.5vw,38px);font-weight:500;line-height:1.5;letter-spacing:-.025em;margin-top:18px}
.cover-disciplines{font-size:12px;color:var(--muted);margin-top:16px;letter-spacing:1px}
.cover-disciplines span{margin:0 10px}
.profile-section{width:min(900px,calc(100% - 80px));min-height:calc(100svh - 80px);padding-block:64px 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px}
.profile-name{text-align:center;width:100%}.profile-name h2{font-size:58px;font-weight:600;letter-spacing:-2.5px;line-height:1.2}
.profile-name>p{font-size:11px;color:var(--muted);margin-top:12px}
.profile-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:480px;gap:34px;margin:28px auto 0}
.profile-tools>div{display:flex;flex-direction:column;align-items:center;gap:9px}.profile-tools img{width:30px;height:30px;object-fit:contain}.profile-tools span{font-size:11px}
.profile-content{display:grid;gap:30px;align-self:stretch;width:auto;margin-left:var(--profile-left,0px)}
.profile-content h3{text-align:left;font-size:14px;font-weight:550;margin:0 0 15px;line-height:1.7}
.profile-content ul{margin:0;padding-left:1.2em;list-style:disc;font-size:12px;color:var(--muted);line-height:2.05}
.profile-content li{padding-left:5px;margin-bottom:7px}.profile-content li:last-child{margin-bottom:0}
.portfolio-section{padding-top:88px}.portfolio-section-title{margin-bottom:24px;text-align:center}
.portfolio-section-title :is(h2,h3){font-size:clamp(22px,2.43vw,35.72px);line-height:1.3;color:var(--muted);font-weight:500}
.image-collection+.image-collection{margin-top:clamp(42px,6vw,80px)}
.collection-heading{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:8px;margin-bottom:16px}
.gallery-dots{display:flex;align-items:center;justify-content:center;gap:0}
.gallery-dot{width:34px;height:30px;display:grid;place-items:center;padding:0;border:0;background:transparent}
.gallery-dot>span{width:6px;height:6px;border-radius:20px;background:var(--muted);opacity:.4;transition:width .2s,opacity .2s,background .2s}
.gallery-dot:hover>span{opacity:.75}.gallery-dot[aria-pressed=true]>span{width:18px;background:var(--ink);opacity:1}
.collection-stage{position:relative}.collection-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:start;touch-action:pan-x pan-y}
.collection-track::-webkit-scrollbar{display:none}.collection-slide{min-width:0;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.collection-image{border-radius:0;overflow:hidden}.collection-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.portfolio-home .image-button,.model-project-link{cursor:pointer;border-radius:0}
.collection-caption{justify-self:stretch;min-width:0;overflow:hidden;text-align:center}
.caption-content{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
 gap:5px clamp(12px,1.6vw,22px);width:max-content;max-width:100%;margin-inline:auto;
 clip-path:inset(0 0 0 0);
}
.collection-caption h4{font-size:clamp(26px,3vw,42px);font-weight:550;line-height:1.2;letter-spacing:-.6px;margin:0}
.caption-entry{display:inline-flex;align-items:center;gap:9px}
.caption-entry>span:last-child{font-size:16px;font-weight:400;line-height:1}
.collection-caption p{font-size:12px;color:var(--muted);line-height:1.55;margin:0;text-align:left}
.collection-caption [data-caption-process]{white-space:pre-line}
.collection-edge-controls{position:absolute;inset:0;pointer-events:none;z-index:6}
.gallery-edge-arrow{position:absolute;inset-block:0;display:grid;place-items:center;width:62px;padding:0;border:0;background:transparent;color:#fff;font-size:0;border-radius:var(--radius-control);opacity:0;pointer-events:auto;transition:opacity .18s}
.edge-previous{left:0;padding-inline-start:18px}.edge-next{right:0;padding-inline-end:18px}
[data-image-hover=true] .gallery-edge-arrow,[data-keyboard-focus=true] .gallery-edge-arrow{opacity:1}
.gallery-edge-arrow:focus-visible{outline-offset:-3px}
.model-view-tabs{
 position:absolute;inset-block-start:21px;inset-inline-end:23px;z-index:5;pointer-events:auto;
 display:flex;border:1px solid var(--line);padding:3px;background:var(--bg);
}
.model-view-tabs button{font-size:11px;padding:6px 18px;color:var(--muted)}.model-view-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.model-comparison{position:relative;aspect-ratio:2200/1240;background:#e7e7e5;overflow:hidden;isolation:isolate}
.model-project-link{position:absolute;inset:0;display:block;touch-action:pan-x pan-y}
.model-comparison .model-reference,.model-render-layer img{width:100%;height:100%;object-fit:contain}
.model-render-layer{position:absolute;inset:0;background:#e7e7e5;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.model-corner{position:absolute;top:21px;font-size:11px;color:#444;padding:5px 11px;background:rgba(255,255,255,.8);z-index:2;pointer-events:none}.model-render-label{left:23px}.model-reference-label{right:23px}
.model-divider{position:absolute;top:0;bottom:0;left:var(--split);width:1px;background:white;z-index:2;pointer-events:none}
.model-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:white;color:#222;font-size:21px;box-shadow:0 1px 8px #0002}
.page-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;font-size:12px;font-weight:500;line-height:1.5;min-height:43px;padding:11px 18px;border:1px solid #18181a;background:#18181a;color:#fff;white-space:nowrap}
.page-action-icon{display:inline-flex;font-size:19px;line-height:1}
.strategy-heading{display:grid;justify-items:center;gap:12px}
.strategy-intro{max-width:760px;margin:0 auto 20px;font-size:13px;line-height:1.85;color:var(--muted);text-align:center}
.strategy-filmstrip{display:block;overflow:hidden;background:var(--soft);padding:26px 24px;touch-action:pan-y pinch-zoom}
.strategy-track{display:flex;width:max-content;animation:strategy-drift var(--strategy-duration) linear infinite paused}
.strategy-group{display:flex;gap:24px;padding-right:24px;flex:none}
.strategy-preview{align-self:start;width:clamp(165px,18vw,300px);min-width:0;flex:none}
.strategy-preview img{width:100%;height:auto;aspect-ratio:1264/2608;object-fit:contain}
.strategy-filmstrip[data-running=true] .strategy-track{animation-play-state:running;will-change:transform}
.finished-works{
 --finished-gap:clamp(12px,1.4vw,22px);
 --finished-tile:clamp(148px,26vw,385px);
 display:grid;
 gap:clamp(2px,.65vw,10px);
 margin-top:clamp(44px,7vw,92px);
}
.finished-row{min-width:0;overflow:hidden;padding-block:12px;user-select:none;cursor:grab;touch-action:pan-y pinch-zoom}
.finished-row[data-scrubbing]{cursor:grabbing}
.finished-row:focus-visible{outline:1px solid var(--line);outline-offset:-2px}
.finished-track,.finished-run,.finished-series{display:flex;width:max-content}
.finished-track{
 animation:finished-drift var(--finished-duration) linear var(--finished-delay) infinite paused;
}
.finished-row:nth-child(even) .finished-track{animation-direction:reverse}
.finished-row[data-running=true] .finished-track{animation-play-state:running}
.finished-row:focus-visible .finished-track,.finished-row[data-scrubbing] .finished-track,.strategy-filmstrip[data-scrubbing] .strategy-track{animation-play-state:paused}
.finished-run,.finished-series{gap:var(--finished-gap)}
.finished-run{padding-inline-end:var(--finished-gap)}
.finished-tile{
 display:block;
 width:var(--finished-tile);
 aspect-ratio:1;
 object-fit:cover;
 background:var(--soft);
 border-radius:var(--radius);
}
@keyframes finished-drift{to{transform:translate3d(calc(-100% / var(--finished-repeats)),0,0)}}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .finished-row:hover .finished-track{animation-play-state:paused}
 .finished-tile{transition:transform .24s cubic-bezier(.22,.61,.36,1)}
 .finished-row:not([data-scrubbing]) .finished-tile:hover{position:relative;z-index:1;transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
 .strategy-filmstrip,.finished-row{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;touch-action:pan-x pan-y pinch-zoom}
 .strategy-track,.finished-track{animation:none}
 .strategy-group[data-clone],.finished-run[data-finished-clone]{display:none}
}
.portfolio-home main{padding-bottom:80px}
@keyframes strategy-drift{to{transform:translate3d(-50%,0,0)}}
@media(max-width:1100px){.wide-shell,.portfolio-home .nav-shell{width:calc(100% - 56px)}.profile-section{width:min(850px,calc(100% - 72px))}.cover-type h1{font-size:19vw}.strategy-group{gap:20px;padding-right:20px}}
@media(max-width:760px){
 .wide-shell,.portfolio-home .nav-shell{width:calc(100% - 36px)}.cover-sheet{min-height:calc(100svh - 65px)}
 .cover-type{padding:51px 0 55px}.cover-type h1{font-size:clamp(92px,26vw,180px);letter-spacing:-.09em;text-indent:-.09em}.cover-subtitle{font-size:25px;margin-top:20px}.cover-disciplines{font-size:10px;letter-spacing:0;margin-top:13px}.cover-disciplines span{margin:0 6px}
 .profile-section{width:calc(100% - 36px);min-height:0;padding-block:44px 52px;gap:32px}.profile-name h2{font-size:46px;letter-spacing:-2px}.profile-name>p{font-size:10px}.profile-tools{gap:14px;margin-top:24px;max-width:350px}.profile-tools img{width:28px;height:28px}.profile-tools span{font-size:10px}
 .profile-content{gap:27px;margin-left:0}.profile-content h3{font-size:15px;margin-bottom:10px}.profile-content ul{font-size:13px;line-height:1.85;padding-left:1.2em}
 .portfolio-section{padding-top:57px}.portfolio-section-title{margin-bottom:16px}
 .collection-heading{row-gap:5px;margin-bottom:10px}
 .collection-stage{margin-inline:-18px;width:calc(100% + 36px)}
 .collection-caption p{font-size:11px}
 .model-view-tabs{inset-block-start:14px;inset-inline-end:17px;padding:2px}.model-view-tabs button{font-size:11px;padding:5px 9px}
 .model-corner{font-size:9px;top:14px;padding:4px 8px}.model-render-label{left:17px}.model-reference-label{right:17px}.model-divider>span{width:36px;height:36px;font-size:18px}
 .strategy-intro{margin-bottom:18px}.page-action{min-height:44px;padding:9px 14px}.page-action-icon{font-size:17px}
 .strategy-filmstrip{padding:20px 18px;margin-inline:-18px}.strategy-group{gap:14px;padding-right:14px}.strategy-preview{width:clamp(150px,48vw,220px)}
 .finished-works{--finished-tile:clamp(156px,54vw,230px)}
 .portfolio-home main{padding-bottom:44px}
}

/* 对比控件固定在画廊上方，两条同步图轨从固定遮罩下面经过。 */
.collection-stage{--comparison-width:100%;border-radius:var(--radius);overflow:hidden}
.gallery-render-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;border-radius:var(--radius);clip-path:inset(0 calc((100% - var(--comparison-width)) / 2 + var(--comparison-width) * (1 - var(--split-ratio,.5))) 0 0)}
.collection-render-track{height:100%;overflow:hidden;scroll-snap-type:none;pointer-events:none}
.gallery-render-mask .collection-render-track .model-render-layer{clip-path:none}
.gallery-comparison-controls{position:absolute;inset-block:0;left:calc((100% - var(--comparison-width)) / 2);width:var(--comparison-width);z-index:7;pointer-events:none}
.gallery-comparison-controls input{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;opacity:0;cursor:ew-resize;z-index:4;pointer-events:auto;clip-path:inset(0 max(0px,calc(100% - var(--split) - 24px)) 0 max(0px,calc(var(--split) - 24px)));touch-action:none}
.gallery-comparison-controls input:disabled{pointer-events:none}
[data-keyboard-focus=true] .gallery-comparison-controls:has(input:focus) .model-divider>span{outline:2px solid var(--ink);outline-offset:3px}
.model-divider .ui-icon{width:21px;height:21px}
.selected-collection .collection-stage{--comparison-width:calc(100% * 1240 / 2200)}
.collection-image,.portfolio-home .image-button,.model-project-link,.model-comparison,.comparison-frame{border-radius:var(--radius)}
.model-view-tabs,.model-view-tabs button,.model-corner{border-radius:var(--radius-control)}
.profile-tools img{border-radius:var(--radius-icon)}
/* 毛玻璃只裁成箭头形状，保持透明的按钮区域。 */
.gallery-edge-arrow .ui-icon{grid-area:1/1;width:28px;height:28px;stroke-width:2.8;opacity:0}
.gallery-edge-arrow::before{content:"";grid-area:1/1;width:28px;height:28px;background:rgba(255,255,255,.52);-webkit-mask:var(--arrow-mask) center/contain no-repeat;mask:var(--arrow-mask) center/contain no-repeat;backdrop-filter:blur(6px) saturate(1.15);-webkit-backdrop-filter:blur(6px) saturate(1.15);pointer-events:none;transition:transform .22s cubic-bezier(.22,.61,.36,1),background .22s}
.gallery-edge-arrow:hover::before,.gallery-edge-arrow:focus-visible::before{background:rgba(255,255,255,.68)}
.edge-previous:hover::before{transform:translateX(-2px)}.edge-next:hover::before{transform:translateX(2px)}
.caption-entry>span:first-child,.page-action-label{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;transition:background-size .18s}
.caption-entry:is(:hover,:focus-visible)>span:first-child,.page-action:is(:hover,:focus-visible) .page-action-label{background-size:100% 1px}
.caption-entry:hover .ui-icon,.page-action:is(:hover,:focus-visible) .ui-icon{transform:translate(2px,-2px)}
.page-action{border-radius:var(--radius-control)}
.collection-project-hint:not([hidden]){
 position:absolute;inset-block-start:21px;inset-inline-start:23px;z-index:8;
 display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--radius-control);
 border:1px solid #ffffff4d;background:#17181b99;color:#fff;
 font-size:12px;opacity:var(--project-hint-opacity,0);visibility:var(--project-hint-visibility,hidden);
 transition:opacity .18s ease;
}
.model-stage .collection-project-hint:not([hidden]){inset-block-start:58px}
.collection-project-hint .ui-icon{width:13px;height:13px}
[data-image-hover=true]:not([data-moving=true]) .collection-stage:has(.collection-project-hint:not([hidden])),
.collection-stage:has(.collection-slide[aria-hidden=false] a[href]:focus-visible){
 --project-hint-opacity:1;
 --project-hint-visibility:visible;
}
@media(max-width:760px){
 .selected-collection .collection-stage{--comparison-width:100%}
 .collection-project-hint:not([hidden]){inset-block-start:14px;inset-inline-start:17px}
 .model-stage .collection-project-hint:not([hidden]){inset-block-start:46px}
}
@media(hover:none),(pointer:coarse){
 .gallery-edge-arrow{display:none}
 .gallery-dot{width:44px;height:44px}
 .model-view-tabs button{min-height:40px;padding-inline:12px}
 .collection-track[data-swipe-managed]{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y pinch-zoom}
 .collection-project-hint:not([hidden]){--project-hint-opacity:0;--project-hint-visibility:hidden}
}

/* 循环画廊仅在过渡期间关闭吸附，副本归位不可见。 */
.collection-track.is-moving,.collection-track.is-positioning{scroll-snap-type:none;scroll-behavior:auto}
.comparison-frame{position:absolute;inset:0}
.comparison-pair .model-reference{position:relative;inset:auto;width:100%;height:auto;object-fit:contain}
.comparison-pair .model-render-layer{inset:0;width:100%;clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.comparison-pair .model-render-layer img{width:100%;height:100%;object-fit:contain}
.selected-collection .collection-image{background:var(--soft)}

.selected-collection .model-comparison{aspect-ratio:2200/1240;display:flex;align-items:center;justify-content:center;background:transparent}

.collection-caption[data-phase="erase"] .caption-content,.collection-caption[data-phase="gap"] .caption-content,.collection-caption[data-phase="reveal"] .caption-content{will-change:clip-path,transform}

.selected-collection .comparison-frame{position:relative;inset:auto;width:calc(100% * 1240 / 2200);flex:none;aspect-ratio:1;overflow:hidden}
.selected-collection .collection-edge-controls{inset-inline:calc(50% - 100% * 620 / 2200)}
.selected-collection .collection-image{aspect-ratio:2200/1240;display:grid;place-items:center}
.selected-collection .collection-image img{height:100%;aspect-ratio:auto;object-fit:contain}
@media(max-width:760px){
 .selected-collection .model-comparison,.selected-collection .collection-image{aspect-ratio:1}
 .selected-collection .comparison-frame{width:100%}
 .selected-collection .collection-edge-controls{inset-inline:0}
}

/* 小面积毛玻璃拖动按钮：首次提示、图片悬停和键盘操作时显现。 */
.model-divider>span{background:rgba(255,255,255,.38);border:1px solid rgba(255,255,255,.72);color:#fff;backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);box-shadow:0 2px 12px #0002,inset 0 1px 0 #ffffff80;opacity:0;visibility:hidden;transition:opacity .55s cubic-bezier(.22,.61,.36,1),visibility 0s linear .55s}
[data-theme=dark] .model-divider>span{background:rgba(35,35,40,.44);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:0 2px 12px #0003,inset 0 1px 0 #ffffff24}
[data-hint-seen=true][data-image-hover=true] .model-divider>span,[data-keyboard-focus=true] .model-divider>span,[data-hint-active=true] .model-divider>span{opacity:1;visibility:visible;transition:opacity .28s cubic-bezier(.22,.61,.36,1),visibility 0s}
@media(hover:none),(pointer:coarse){
 .model-divider>span{opacity:1;visibility:visible;transition:none}
 .gallery-comparison-controls input{inset-block:calc(50% - 27px) auto;height:54px}
}

@media(min-width:761px){html:has(.portfolio-home){scrollbar-gutter:stable}}
 html.project-viewer-open{overflow:hidden}
 .project-viewer{
  --viewer-height:clamp(230px,55dvh,650px);
  position:fixed;
  width:min(1060px,calc(100vw - 84px));
  max-height:calc(100dvh - 48px);
  margin:auto;
  padding:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 20px 60px #0003;
 }
 .project-viewer::backdrop{background:rgba(15,15,17,.66)}
 .project-viewer[open]:not([data-strategy]){animation:project-viewer-in .22s cubic-bezier(.22,.61,.36,1) both}
 .project-viewer-scroll{
  max-height:calc(100dvh - 50px);
  padding:28px 30px 22px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable both-edges;
 }
 .project-viewer-close{
  position:absolute;
  z-index:2;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--bg);
  transition:background .18s;
 }
 .project-viewer-close:hover{background:var(--soft)}
 .project-viewer-close .ui-icon{width:19px;height:19px}
 .project-viewer-wheel-hint{display:none}
 .project-viewer[data-square][open] .project-viewer-wheel-hint{
  position:absolute;inset-inline-start:calc(100% + 12px);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:4px;
  color:var(--muted);font-size:10px;white-space:nowrap;pointer-events:none;
  animation:project-viewer-wheel-hint 2s ease both;
 }
 .project-viewer-wheel-hint svg{width:29px;height:24px}
 .project-viewer[data-square][open] .project-viewer-wheel-mark{
  animation:project-viewer-wheel-mark .55s .16s ease-in-out 2;
 }
 @keyframes project-viewer-wheel-hint{
  0%,100%{opacity:0}
  17%,76%{opacity:1}
 }
 @keyframes project-viewer-wheel-mark{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
 }
 .project-viewer-heading{text-align:center;margin:0 48px 19px}
 .project-viewer-title-row{position:relative;width:fit-content;max-width:100%;margin-inline:auto}
 .project-viewer-heading h2{font-size:clamp(22px,2.5vw,32px);font-weight:600;line-height:1.35}
 .project-viewer-frame{
  position:relative;
  display:grid;
  place-items:center;
  height:var(--viewer-height);
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--soft);
 }
 .project-viewer-image,.project-viewer-artwork{width:100%;height:100%;overflow:hidden}
 .project-viewer-image{touch-action:pan-y pinch-zoom}
 .project-viewer-image img{width:100%;height:100%;object-fit:contain}
 .project-viewer[data-square]{
  width:min(calc(var(--viewer-height) + 190px),calc(100vw - 84px));
 }
 .project-viewer[data-square] .project-viewer-gallery{
  --rail-width:72px;
  --rail-gap:16px;
  display:grid;
  grid-template-columns:var(--rail-width) min(var(--viewer-height),calc(100% - var(--rail-width) - var(--rail-gap)));
  justify-content:center;
  gap:var(--rail-gap);
 }
 .project-viewer[data-square] .project-viewer-frame{
  grid-area:1 / 2;
  width:100%;
  height:auto;
  aspect-ratio:1;
 }
 .project-viewer[data-square] .project-viewer-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
 }
 .project-viewer[data-square] .project-viewer-image:has(img){cursor:zoom-in}
 .project-viewer[data-square] .project-viewer-artwork{
  transform-origin:var(--zoom-origin,center);
  transition:transform .16s ease-out;
 }
 .project-viewer-image.is-magnified .project-viewer-artwork{transform:scale(1.65)}
 .project-viewer-image .project-viewer-outgoing{position:absolute;inset:0;pointer-events:none}
 .project-viewer-status{
  position:absolute;
  inset:auto auto 12px;
  border-radius:4px;
  padding:4px 9px;
  background:var(--bg);
  color:var(--muted);
  font-size:12px;
 }
 .project-viewer-rail{margin-top:13px;padding:3px 3px 5px;overflow-x:auto;scrollbar-width:thin}
 .project-viewer-thumbs{display:flex;gap:8px;width:max-content;margin-inline:auto}
 .project-viewer[data-square] .project-viewer-rail{
  grid-area:1 / 1;
  contain:size;
  margin:0;
  padding:4px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
 }
 .project-viewer[data-square] .project-viewer-thumbs{flex-direction:column;gap:6px}
 .project-viewer-thumbs button{
  width:55px;
  height:55px;
  overflow:hidden;
  padding:0;
  border:0;
  border-radius:4px;
  background:var(--soft);
  opacity:.68;
  transition:opacity .16s;
 }
 .project-viewer-thumbs button:hover,.project-viewer-thumbs button[aria-pressed=true]{opacity:1}
 .project-viewer[data-square] .project-viewer-thumbs button{
  width:clamp(34px,calc(6.875dvh - 7px),54px);
  height:auto;
  aspect-ratio:1;
 }
 .project-viewer-thumbs button[aria-pressed=true]{outline:1px solid var(--ink);outline-offset:2px}
 .project-viewer-thumbs button:focus-visible{outline-offset:2px}
 .project-viewer-thumbs img{width:100%;height:100%;object-fit:cover}
 .project-viewer [data-detail-drawing]{background:#f5f5f3}
 .project-viewer [data-detail-drawing] img{object-fit:contain}
 .project-viewer[data-strategy] .project-viewer-scroll{
  display:grid;
  align-content:stretch;
  grid-template-rows:minmax(0,1fr) auto;
  height:min(800px,calc(100dvh - 50px));
  padding:26px 24px;
  overflow:hidden;
  scrollbar-gutter:auto;
 }
 .project-viewer[data-strategy] .project-viewer-heading{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);
 }
 .project-viewer[data-strategy] .project-viewer-gallery{align-self:center}
 .project-viewer[data-strategy] .project-viewer-frame{height:70px;background:transparent}
 .project-viewer[data-strategy] .strategy-view{height:100%}
 .project-viewer-fallback{display:table;margin:16px auto 0;text-decoration:underline;font-size:13px}
 @keyframes project-viewer-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px),(max-width:950px) and (pointer:coarse){
 .project-viewer,.project-viewer[data-square]{width:min(620px,calc(100% - 20px));max-height:calc(100dvh - 20px)}
 .project-viewer-scroll{max-height:calc(100dvh - 22px);padding:18px 12px 14px;scrollbar-gutter:auto}
 .project-viewer-close{top:8px;right:8px;width:44px;height:44px}
 .project-viewer-heading{margin:0 42px 14px}
 .project-viewer-heading h2{font-size:clamp(19px,5vw,25px);overflow-wrap:anywhere}
 .project-viewer[data-square] .project-viewer-gallery{
  grid-template-columns:minmax(0, min(100%, clamp(155px, calc(100dvh - 200px), 560px)));
  gap:9px;
 }
 .project-viewer[data-square] .project-viewer-frame,.project-viewer[data-square] .project-viewer-rail{grid-area:auto}
 .project-viewer[data-square] .project-viewer-rail{contain:none;overflow-x:auto;overflow-y:hidden}
 .project-viewer[data-square] .project-viewer-thumbs{flex-direction:row}
 .project-viewer[data-square] .project-viewer-thumbs button{width:48px}
 .project-viewer[data-strategy] .project-viewer-scroll{height:min(900px,calc(100dvh - 22px));padding:55px 12px 12px}
}
@media(max-width:760px),(hover:none),(pointer:coarse){
 .project-viewer[data-square][open] .project-viewer-wheel-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
 .project-viewer[open]{animation:none}
 .project-viewer[data-square] .project-viewer-artwork{transition:none}
 .project-viewer[data-square][open] .project-viewer-wheel-mark{animation:none}
}