.digital-portfolio{margin-block:56px 80px;color:#18486b}
.digital-portfolio-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px}
.digital-portfolio-heading h2{font-size:32px;margin:0;letter-spacing:0}
.digital-work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.digital-work{position:relative;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 420px}
.device-stage{aspect-ratio:1.3;display:flex;align-items:center;justify-content:center;background:#f1f5f8;border-radius:8px;overflow:hidden;padding:24px 18px;position:relative}
.digital-work:nth-child(3n+2) .device-stage{background:#fdf3e9}
.digital-work:nth-child(3n) .device-stage{background:#eaf4f6}
.device-laptop{width:100%;padding-top:5%;filter:drop-shadow(0 14px 10px #18486b16)}
.laptop-lid{background:#233548;border:2px solid #a8b5c1;border-radius:10px 10px 4px 4px;padding:9px 6px 6px;position:relative;margin:0 9px}
.laptop-camera{height:3px;width:3px;background:#8397a8;border-radius:50%;position:absolute;top:3px;left:50%}
.device-screen{display:block;position:relative;padding:0;border:0;overflow:hidden;width:100%;background:#fff;cursor:pointer;direction:ltr;color:#18486b;isolation:isolate}
.device-screen:focus-visible{outline:3px solid #ec8b2e;outline-offset:2px}
.device-laptop .device-screen{aspect-ratio:16/10;border-radius:2px}
.device-screen img{display:block;width:100%;height:auto;max-width:none;min-height:100%;object-fit:cover;object-position:top;animation:device-site-scan var(--scan-duration,24s) linear infinite alternate;animation-play-state:paused;transform:translateY(0)}
.digital-work.is-scanning .device-screen img{animation-play-state:running}
.laptop-base{height:8px;background:linear-gradient(90deg,#b4bec6,#e2e8ec 20%,#f1f4f6 50%,#c5cfd6 80%,#a4afb8);border-radius:1px 1px 55% 55%;position:relative}
.laptop-base:before{content:"";position:absolute;left:39%;width:22%;height:3px;background:#a4b0bb;border-radius:0 0 4px 4px}
.device-phone{width:35%;max-width:170px;border:2px solid #a3afba;background:#26394b;border-radius:26px;padding:4px;position:relative;box-shadow:0 0 0 1px #526779,0 16px 24px #18486b24;isolation:isolate}
.device-phone .device-screen{aspect-ratio:9/19.5;border-radius:21px}
.phone-notch{position:absolute;top:10px;left:34%;width:32%;height:8px;background:#233548;border-radius:12px;z-index:2;pointer-events:none}
.phone-home{position:absolute;bottom:8px;left:35%;width:30%;height:3px;border-radius:2px;background:#26394baa;z-index:2}
.digital-work [hidden]{display:none!important}
.digital-work-tools{display:flex;align-items:center;gap:8px;justify-content:space-between;padding-block:14px 8px;min-width:0}
.digital-work-kind{font-size:12px;color:#5a6877}
.device-modes{display:flex;gap:8px;align-items:center}
.device-modes button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #dce4eb;background:transparent;border-radius:6px;color:#526779;cursor:pointer}
.device-modes button svg{width:18px;height:18px}
.device-modes button[aria-pressed="true"]{background:#18486b;color:#fff;border-color:#18486b}
.digital-work-visit{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:700;color:#18486b;white-space:nowrap;text-decoration:none}
.digital-work-visit svg{width:16px}
.digital-work-detail{display:flex;align-items:center;gap:7px;justify-content:flex-end;color:#637789;text-decoration:none;font-size:11px;padding-top:2px}
.digital-work-detail svg{width:14px;height:14px}
.digital-work.is-single{max-width:920px;margin:32px auto;contain-intrinsic-size:auto 700px}
.digital-work.is-single .device-stage{aspect-ratio:1.6;padding:40px 60px}
.digital-work.is-single .device-phone{max-width:220px;width:30%}
.digital-work.is-single .digital-work-kind,.digital-work.is-single .digital-work-visit{font-size:14px}
@keyframes device-site-scan{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(var(--scan-distance,0px))}}
@media(max-width:1100px){.digital-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.digital-work-grid{grid-template-columns:1fr;gap:30px}.digital-portfolio{margin-block:36px 50px}.digital-portfolio-heading h2{font-size:26px}.device-stage{aspect-ratio:1.3}.digital-work.is-single .device-stage{aspect-ratio:1.1;padding:20px}.digital-work.is-single .device-phone{width:42%}.digital-work-tools{gap:6px}.digital-work-kind{font-size:11px}}
@media(prefers-reduced-motion:reduce){.device-screen img{animation:none!important}.digital-work .device-screen{overflow-y:auto;scrollbar-width:thin;touch-action:pan-y}}

.digital-portfolio+.digital-portfolio{border-top:1px solid #dce4eb;padding-top:42px}
.digital-portfolio-heading .text-link{width:44px;height:44px;justify-content:center}
.digital-work{transition:transform .35s ease}
.digital-work:focus-within{z-index:1}
.digital-work.is-app .device-stage{background:#e9f2f5;aspect-ratio:1.1}
.digital-work.is-app .device-phone{width:43%;transform:rotate(-5deg);transition:transform .6s ease}
.digital-work.is-app:nth-child(even) .device-phone{transform:rotate(5deg)}
.digital-work.is-app.is-scanning .device-phone,.digital-work.is-app:focus-within .device-phone{transform:rotate(0deg) translateY(-5px)}
.identity-portfolio{margin-block:60px 90px;color:#18486b}
.identity-exhibition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 36px;align-items:start}
.identity-project{position:relative;min-width:0;--identity-shift:0px}
.identity-project:nth-child(even){margin-top:65px}
.identity-scene{display:block;position:relative;aspect-ratio:1.5;overflow:hidden;border-radius:8px;background:#edf2f5;isolation:isolate}
.identity-scene>img{position:absolute;width:112%;max-width:none;height:auto;left:-6%;top:-34%;transform:translateY(var(--identity-shift));transition:scale .7s ease}
.identity-project:nth-child(4n+2) .identity-scene{aspect-ratio:1.15}
.identity-project:nth-child(4n+2) .identity-scene>img{width:146%;left:-23%;top:-34%}
.identity-project:nth-child(4n+3) .identity-scene{aspect-ratio:1.25}
.identity-project:nth-child(4n+3) .identity-scene>img{width:134%;left:-17%;top:-34%}
.identity-mark{position:absolute;top:24px;inset-inline-end:24px;display:block;width:122px;height:64px;background:#fff;overflow:hidden;border-radius:6px;box-shadow:0 8px 24px #18486b18;transform:rotate(-5deg);transition:transform .4s ease}
.identity-mark>img{position:absolute;width:150%;max-width:none;height:auto;left:-25%;top:-26px}
.identity-open{position:absolute;bottom:16px;inset-inline-end:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#18486b}
.identity-project-links{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid #dce4eb;font-size:13px;font-weight:600}
.identity-project-links a{min-height:44px;display:flex;align-items:center;gap:8px}
@media(hover:hover){.identity-scene:hover>img{scale:1.025}.identity-mark:hover{transform:rotate(0deg) translateY(-4px)}.digital-work:hover{transform:translateY(-3px)}}
@media(max-width:680px){.identity-exhibition{grid-template-columns:1fr;gap:28px}.identity-project:nth-child(even){margin-top:0}.identity-project:nth-child(n) .identity-scene{aspect-ratio:1.35}.identity-project:nth-child(n) .identity-scene>img{width:124%;left:-12%;top:-34%}.identity-mark{width:100px;height:54px;top:16px;inset-inline-end:16px}.identity-mark>img{top:-22px}.digital-portfolio-heading h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.digital-work,.identity-scene>img,.identity-mark,.device-phone{transition:none!important}.identity-scene>img{transform:none!important}.digital-work:hover{transform:none}}