:root{color-scheme:light;--prototype-paper:rgba(249,250,248,.96);--prototype-ink:#1e2a32}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body.interactive-project-page{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#17232b;color:var(--prototype-ink);-webkit-font-smoothing:antialiased}
.interactive-project-page button{font:inherit}
.interactive-project-page button:focus-visible{outline:2px solid #d1c5ff;outline-offset:5px}
.prototype-viewer{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;touch-action:none;cursor:grab;background:#17232b}
.prototype-viewer.is-dragging{cursor:grabbing}
.prototype-artboard{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;user-select:none;touch-action:none}
.prototype-artboard>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none;user-select:none}
/* v2.74: one clear purple ring, transparent center, soft glow. No stacked outlines. */
/* Inverse sizing preserves ~44px/40px ring controls on high-resolution images. */
.prototype-point{
 position:absolute;z-index:3;
 width:calc(44px * var(--prototype-inverse-scale,1));
 height:calc(44px * var(--prototype-inverse-scale,1));
 border:calc(3px * var(--prototype-inverse-scale,1)) solid #ad81ff;
 border-radius:50%;background:transparent;
 box-shadow:0 0 calc(9px * var(--prototype-inverse-scale,1)) calc(2px * var(--prototype-inverse-scale,1)) rgba(162,104,255,.67),0 0 calc(25px * var(--prototype-inverse-scale,1)) calc(5px * var(--prototype-inverse-scale,1)) rgba(126,68,239,.46);
 display:grid;place-items:center;transform:translate(-50%,-50%);
 cursor:pointer;-webkit-tap-highlight-color:transparent;
 animation:prototypeGlow 2.7s ease-in-out infinite;
 transition:border-color .16s ease;
}
.prototype-point:before,.prototype-point:after{content:none}
.prototype-point:hover,.prototype-point[aria-expanded=true]{
 border-color:#c5a5ff;animation:none;
 box-shadow:0 0 calc(12px * var(--prototype-inverse-scale,1)) calc(3px * var(--prototype-inverse-scale,1)) rgba(180,125,255,.82),0 0 calc(29px * var(--prototype-inverse-scale,1)) calc(7px * var(--prototype-inverse-scale,1)) rgba(132,74,244,.58);
}
@keyframes prototypeGlow{
 0%,100%{box-shadow:0 0 calc(8px * var(--prototype-inverse-scale,1)) calc(2px * var(--prototype-inverse-scale,1)) rgba(162,104,255,.58),0 0 calc(21px * var(--prototype-inverse-scale,1)) calc(5px * var(--prototype-inverse-scale,1)) rgba(126,68,239,.38)}
 50%{box-shadow:0 0 calc(11px * var(--prototype-inverse-scale,1)) calc(3px * var(--prototype-inverse-scale,1)) rgba(180,125,255,.82),0 0 calc(27px * var(--prototype-inverse-scale,1)) calc(7px * var(--prototype-inverse-scale,1)) rgba(132,74,244,.53)}
}
.prototype-detail{position:absolute;z-index:20;width:min(365px,calc(100% - 24px));max-height:calc(100% - 24px);display:flex;flex-direction:column;background:var(--prototype-paper);border:1px solid rgba(255,255,255,.88);box-shadow:0 22px 90px rgba(0,0,0,.29),0 4px 18px rgba(0,0,0,.16);border-radius:9px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(9px) scale(.985);transition:transform .22s ease,opacity .22s ease,visibility .22s;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.prototype-detail.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.prototype-detail-scroll{overflow-y:auto;overscroll-behavior:contain}
.prototype-close{position:absolute;z-index:5;top:11px;right:11px;background:rgba(255,255,255,.92);color:#27353c;border:0;width:31px;height:31px;border-radius:50%;font-size:23px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 8px rgba(0,0,0,.12)}
.prototype-figure{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#e6e9e8}
.prototype-figure[hidden]{display:none}
.prototype-figure img{width:100%;height:100%;object-fit:cover;display:block}
.prototype-image-controls{position:absolute;bottom:9px;right:9px;display:flex;align-items:center;gap:5px;background:rgba(16,28,36,.72);padding:4px;border-radius:999px;backdrop-filter:blur(8px)}
.prototype-image-controls button{border:0;border-radius:50%;background:transparent;color:#fff;width:27px;height:27px;font-size:22px;cursor:pointer}
.prototype-image-controls button:disabled{opacity:.38;cursor:default}
.prototype-image-controls span{color:#e2e9eb;font-size:10px;font-weight:650;min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.prototype-copy{padding:22px 25px 25px}
.prototype-copy h2{font-size:22px;line-height:1.2;letter-spacing:-.04em;margin:0 0 10px;font-weight:720}
.prototype-copy h2:empty{display:none}
.prototype-copy p{color:#5e6d75;margin:0;font-size:13.5px;line-height:1.65;white-space:pre-line}
@media(max-width:640px){.prototype-point{width:calc(40px * var(--prototype-inverse-scale,1));height:calc(40px * var(--prototype-inverse-scale,1))}.prototype-detail{width:min(310px,calc(100% - 24px))}.prototype-copy{padding:19px 19px 21px}.prototype-copy h2{font-size:20px}.prototype-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v2.72: minimal framed prototype, shared portfolio navigation. No case-study chrome. */
body.interactive-project-page{background:#1c2830;color:#fff;overflow:hidden}
body.interactive-project-page .prototype-layout{
 position:fixed;inset:0;z-index:1;display:flex;align-items:flex-start;justify-content:center;
 padding:106px 26px 30px;overflow:hidden;
 background:linear-gradient(180deg,#1b2831 0%,#27353d 48%,#526069 74%,#e8ebeb 100%);
}
body.interactive-project-page .prototype-frame{width:min(1160px,100%);min-width:0;display:flex;flex-direction:column;gap:15px}
body.interactive-project-page .prototype-strapline{
 display:flex;justify-content:space-between;align-items:baseline;gap:16px;
 font:700 11px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
 letter-spacing:.095em;text-transform:uppercase;color:#e2eaf0;
}
body.interactive-project-page .prototype-strapline-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.interactive-project-page .prototype-strapline-name span{opacity:.65;padding:0 3px}
body.interactive-project-page .prototype-strapline-count{color:#ecdca4;white-space:nowrap}
body.interactive-project-page .prototype-viewer{
 border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 58px rgba(8,14,20,.24);
 background:#17232b;flex:none;min-height:0;
}
body.interactive-project-page .prototype-detail{z-index:25;color:var(--prototype-ink)}
body.interactive-project-page .grid-toolbar{z-index:90}
body.interactive-project-page .grid-scrim{z-index:100}
body.interactive-project-page .sidenav{z-index:110!important}
@media(max-width:800px){
 body.interactive-project-page .prototype-layout{padding:128px 14px 22px}
 body.interactive-project-page .prototype-frame{gap:12px;width:100%}
 body.interactive-project-page .prototype-strapline{font-size:10px;letter-spacing:.06em}
}
@media(max-width:640px){
 body.interactive-project-page .prototype-layout{padding:124px 0 0;align-items:flex-start;justify-content:flex-start}
 body.interactive-project-page .prototype-frame{gap:12px;width:100%}
 body.interactive-project-page .prototype-strapline{padding:0 15px;gap:8px}
 body.interactive-project-page .prototype-strapline-count{font-size:9px}
 body.interactive-project-page .prototype-viewer{aspect-ratio:auto;height:calc(100dvh - 170px);border-left:0;border-right:0}
}
@media(max-width:390px){body.interactive-project-page .prototype-strapline{font-size:9px}}

/* v2.73: fullscreen supporting-image lightbox and compact enlarge control. */
.prototype-enlarge{position:absolute;bottom:9px;left:9px;z-index:4;width:35px;height:35px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:grid;place-items:center;background:rgba(18,31,40,.78);color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.prototype-enlarge:hover{background:rgba(42,54,70,.95);transform:scale(1.06)}
.prototype-lightbox[hidden]{display:none!important}
.prototype-lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(10,15,23,.94);padding:48px 18px 24px;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.prototype-lightbox img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 56px rgba(0,0,0,.18);user-select:none;-webkit-user-drag:none}
.interactive-project-page .prototype-lightbox-close{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:2;width:44px;height:44px;border:1px solid rgba(255,255,255,.27);border-radius:50%;background:rgba(27,39,50,.85);color:#fff;display:grid;place-items:center;font:300 30px/1 Arial,sans-serif;cursor:pointer}
.prototype-lightbox-close:hover{background:rgba(64,74,87,.98)}
@media(max-width:640px){.prototype-lightbox{padding:64px 12px 22px}.prototype-lightbox-close{width:40px;height:40px}}