/* Complete screenshot frames: keep interface proportions and separate captions. */
.case-access-note{display:flex;align-items:center;gap:11px;padding:12px 15px;margin:-18px 0 28px;border:1px solid #344362;border-left:2px solid #8685ef;border-radius:4px;background:#192238;color:#b1c0df;font-size:12px;line-height:1.7}
.case-access-note>.icon{height:17px;width:17px;color:#a6adff}
.work-image-link{height:clamp(280px,47vw,620px);aspect-ratio:auto;background:#101827}
.work-image-link>img{object-fit:contain;object-position:center;padding:16px;transform:none;transition:none}
.work-image-link:hover>img{transform:none}
.work-image-link:after{box-shadow:none}
.work-open{display:none}
.work-image-link:has(>.rag-diagram){height:430px;aspect-ratio:auto}
.work-image-link>.rag-diagram{height:100%}
.work-caption h2{max-width:390px}
.project-media:has(.project-screenshot){height:auto;min-height:0;max-height:none;aspect-ratio:16/11;background:#141b2b}
.project-media .project-screenshot,.project-featured .project-screenshot,.project-media.anime-love .project-screenshot{width:100%;height:100%;padding:55px 20px 20px;transform:none;display:flex;align-items:center;justify-content:center}
.project-screenshot>img{width:100%;height:100%;object-fit:contain;object-position:center;border:0;border-radius:3px;box-shadow:none}
.project-card:hover .project-screenshot,.project-featured:hover .project-screenshot{transform:none}
.product-screen{height:auto;aspect-ratio:16/10;background:#091c32}
.product-screen>img{height:100%;width:100%;object-fit:contain;object-position:center}
.case-cover{max-width:1120px;margin-inline:auto}
.case-cover>img{height:auto;object-fit:contain}
.case-image-chrome{background:#1b2234;color:#adbbd5}
.structured-gallery>.section-head{margin-bottom:35px}
.gallery-index{position:sticky;top:88px;z-index:12;display:flex;align-items:center;gap:28px;overflow:auto;padding:17px 0;margin-bottom:42px;border-block:1px solid #2e3951;background:#10121bf5;backdrop-filter:blur(16px);scrollbar-width:thin;scrollbar-color:#485777 transparent}
.gallery-index>a{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;min-height:27px;padding:3px 0;font-size:11px;color:#a7b7d4;white-space:nowrap}
.gallery-index>a>span{font:9px var(--mono);color:#727fa2}
.gallery-index>a:hover{color:#d4ceff}
.gallery-index>a:hover>span{color:#a6adff}
.screen-stories{display:grid;gap:62px}
.screen-story{display:grid;grid-template-columns:.62fr 1.7fr;gap:50px;margin:0;align-items:start;scroll-margin-top:60px}
.screen-story-note{position:sticky;top:178px;padding-top:7px}
.screen-story-number{display:block;margin-bottom:16px;font:10px var(--mono);letter-spacing:.8px;color:#818fb3}
.screen-story-note h3{font-size:24px;line-height:1.18;letter-spacing:-.65px;margin-bottom:14px}
.screen-story-note>p{font-size:12px;line-height:1.85;color:#96a7c4;max-width:260px}
.screen-detail-link{display:inline-flex;align-items:center;gap:12px;min-height:43px;padding:4px 0;margin-top:14px;background:none;border:0;font-size:10px;color:#b4bdf1}
.screen-detail-link>.icon{height:13px;width:13px}
.screen-detail-link:hover{color:#e2ddff}
.screen-frame{border:1px solid #394764;border-radius:7px;overflow:hidden;background:#111a29;box-shadow:0 15px 45px #00000018}
.screen-frame-toolbar{min-height:37px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 15px;background:#1a2335;border-bottom:1px solid #303e58;color:#94a8cc;font-size:9px}
.screen-frame-toolbar>span:last-child{font:7px var(--mono);letter-spacing:.7px;color:#7389ad;white-space:nowrap}
.screen-frame .screenshot-static{position:relative;display:block;width:100%;overflow:hidden}
.screen-frame .screenshot-static>img{width:100%;height:auto;object-fit:contain;border:0;transform:none;transition:none}
.screen-frame .image-zoom{bottom:13px;right:13px;background:#151e35e6;border-color:#9aabdc66;color:#c0c5ff}
.viewer-toolbar{height:64px;padding:12px 23px;gap:20px}
.viewer-toolbar>p{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.viewer-controls{display:flex;align-items:center;gap:7px;flex-shrink:0}
.viewer-controls>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:36px;padding:7px 10px;border:1px solid #465574;border-radius:5px;background:#1a263d;color:#c0ceee;font-size:10px}
.viewer-controls>.viewer-close{margin-left:7px;padding:7px;min-width:36px;width:36px;height:36px}
.viewer-controls .icon{height:15px;width:15px}
.viewer-controls>button:hover{border-color:#9a9bdf;color:#f3f3ff}
.viewer-controls>button[aria-pressed="true"]{border-color:#9b8be5;background:#37325a;color:#e4dcff}
.viewer-controls>.viewer-original[hidden]{display:none}
.viewer-prev>.icon{transform:rotate(180deg)}
.viewer-stage{height:calc(100dvh - 112px);padding:24px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#63769e #151d2c;scrollbar-width:thin}
.viewer-stage>img{max-width:100%;max-height:100%;height:auto;object-fit:contain;border-radius:3px;flex-shrink:0}
.viewer-stage.is-zoomed{display:block;padding:18px;cursor:grab}
.viewer-stage.is-zoomed:active{cursor:grabbing}
.viewer-stage.is-zoomed>img{max-width:none;max-height:none;height:auto;border-radius:2px}
.viewer-hint{height:48px;padding:7px 15px 0;font:9px/1.7 var(--mono);color:#8296b9}
.viewer-stage:focus-visible{outline:1px solid #8889c0;outline-offset:-5px}
@media(max-width:1150px){.screen-story{grid-template-columns:.62fr 1.6fr;gap:35px}.screen-story-note h3{font-size:22px}.screen-story-note>p{font-size:11px}.gallery-index{gap:23px}.work-image-link{height:clamp(280px,48vw,560px)}.project-media .project-screenshot,.project-featured .project-screenshot,.project-media.anime-love .project-screenshot{padding:52px 17px 17px}}
@media(max-width:900px){.gallery-index{top:76px;margin-bottom:33px;gap:24px}.gallery-index>a{font-size:10px;gap:8px}.screen-story{grid-template-columns:.65fr 1.6fr;gap:28px}.screen-story-note{top:160px}.screen-story-note h3{font-size:21px}.screen-story-number{font-size:9px;margin-bottom:14px}.screen-story-note>p{font-size:11px}.screen-detail-link{font-size:9px;gap:9px}.screen-frame-toolbar{padding:9px 12px;font-size:8px;min-height:34px}.screen-frame-toolbar>span:last-child{font-size:6px}.screen-stories{gap:42px}.case-access-note{font-size:11px;margin-top:-10px}.work-image-link{height:clamp(270px,52vw,470px)}.work-image-link>img{padding:13px}.project-media .project-screenshot,.project-featured .project-screenshot,.project-media.anime-love .project-screenshot{padding:51px 15px 15px}}
@media(max-width:650px){.case-access-note{font-size:10px;align-items:flex-start;gap:9px;padding:11px 12px;margin:-8px 0 23px;line-height:1.8}.case-access-note>.icon{height:15px;width:15px;margin-top:2px}.work-image-link{height:auto;aspect-ratio:16/10;min-height:0}.work-image-link>img{padding:7px}.work-image-link:has(>.rag-diagram){height:245px}.project-media:has(.project-screenshot){aspect-ratio:16/11;height:auto;min-height:0;max-height:none}.project-media .project-screenshot,.project-featured .project-screenshot,.project-media.anime-love .project-screenshot{padding:49px 14px 14px;width:100%;height:100%}.product-screen{height:auto;aspect-ratio:16/10}.structured-gallery>.section-head{margin-bottom:25px}.gallery-index{top:70px;gap:21px;padding:13px 0;margin-bottom:28px;scroll-padding-inline:10px}.gallery-index>a{font-size:10px;gap:7px}.gallery-index>a>span{font-size:8px}.screen-story{grid-template-columns:1fr;gap:16px;scroll-margin-top:45px}.screen-story-note{position:static;padding-top:0}.screen-story-number{font-size:9px;margin-bottom:11px}.screen-story-note h3{font-size:25px;letter-spacing:-.6px;margin-bottom:11px}.screen-story-note>p{font-size:12px;line-height:1.8;max-width:none}.screen-detail-link{font-size:10px;min-height:36px;margin-top:7px}.screen-stories{gap:37px}.screen-frame{border-radius:5px}.screen-frame-toolbar{min-height:32px;font-size:7px;padding:8px 11px;gap:13px}.screen-frame-toolbar>span:last-child{font-size:6px}.screen-frame .image-zoom{width:27px;height:27px;bottom:9px;right:9px}.screen-frame .image-zoom>.icon{height:12px;width:12px}.viewer-toolbar{height:108px;padding:12px 14px;flex-wrap:wrap;gap:9px}.viewer-toolbar>p{flex-basis:100%;font-size:11px;line-height:1.5}.viewer-controls{width:100%;gap:6px}.viewer-controls>button{min-height:39px;min-width:39px;padding:8px 10px;font-size:10px}.viewer-controls>.viewer-close{margin-left:auto;min-width:39px;width:39px;height:39px}.viewer-controls .icon{height:14px;width:14px}.viewer-stage{height:calc(100dvh - 152px);padding:10px}.viewer-stage.is-zoomed{padding:10px}.viewer-hint{height:44px;padding:9px 10px 0;font-size:7px;line-height:1.7}}
@media(prefers-reduced-motion:reduce){.screen-frame .screenshot-static>img,.work-image-link>img{transition:none}}