*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#111;font-family:Arial,'Helvetica Neue',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #111;outline-offset:6px}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}header{height:96px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3}.brand{font-size:28px;letter-spacing:-2px;border:0;background:none;padding:0}.brand sup{font-size:12px;margin-left:6px;vertical-align:top;letter-spacing:0}#cameraButton{background:none;border:0;border-bottom:1px solid #aaa;padding:8px 0;font-size:14px}#cameraButton span{margin-left:16px}#intro{min-height:calc(100svh - 96px);padding:9vh 24px 155px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:64px}.wordmark{font-size:clamp(76px,14vw,220px);letter-spacing:-.075em;line-height:1;white-space:nowrap}.wordmark strong{font-weight:650}.wordmark sup{font-size:clamp(20px,3vw,40px);vertical-align:top;display:inline-block;margin-top:15px;margin-left:15px;letter-spacing:0}.interaction{text-align:center;max-width:490px}#instruction{font-size:16px;line-height:1.6;margin:0 0 24px}#shiftKey{margin:0 auto 25px;width:230px;height:80px;border:1px solid #bcbcbc;border-radius:8px;background:#fafafa;color:#111;box-shadow:0 5px 0 #e7e7e7,0 6px 0 1px #ccc;display:flex;align-items:center;padding:22px;gap:16px;position:relative;transition:background .15s,transform .1s}#shiftKey>span{font-size:32px}#shiftKey b{font-weight:400;font-size:19px;letter-spacing:.08em}#shiftKey small{margin-left:auto;font-size:12px}#shiftKey i{position:absolute;bottom:0;left:0;height:3px;background:#111;width:0;border-radius:8px}#shiftKey.active{border-color:#111;background:#eee}#shiftKey:hover{border-color:#111}.hint{font-size:14px;line-height:1.6;margin:0 0 16px}.text-button{border:0;border-bottom:1px solid #bbb;background:none;padding:5px 0;font-size:14px}#monitor{position:fixed;right:4vw;bottom:30px;width:220px;background:#fff;z-index:5}.monitor-top{display:flex;justify-content:space-between;padding:8px 0;font:12px monospace;color:#111}.feed{position:relative;aspect-ratio:4/3;background:#f2f2f2;display:none}.camera-on .feed{display:block}video,canvas{position:absolute;width:100%;height:100%;object-fit:fill;transform:scaleX(-1)}#cameraPlaceholder{display:none}#message{font-size:12px;line-height:1.6;margin:5px 0;color:#111}#fps{display:none}.camera-on #fps{display:inline}#handCursor{position:fixed;width:22px;height:22px;border:2px solid #111;background:#ffffff66;border-radius:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:none;display:none}#portfolio{padding:30px 4vw}nav,.caption,footer{font-family:monospace;font-size:13px;letter-spacing:.06em}nav{display:flex;justify-content:space-between}nav div{display:flex;gap:30px}nav button{background:none;border:0;font:inherit}h1{font-size:clamp(55px,10vw,155px);line-height:.88;letter-spacing:-.075em;font-weight:500;margin:100px 0}h1 span{color:#111}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px 28px}.empty{aspect-ratio:16/9;background:#f5f5f5;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.empty>span{font-size:52px;letter-spacing:-.06em}.empty p{font-size:14px;letter-spacing:.1em}.caption{margin-top:15px;display:flex;justify-content:space-between}.caption span{letter-spacing:0}#about{border-top:1px solid #ddd;margin-top:120px;padding-top:30px;display:flex;justify-content:space-between}#about p{font-size:clamp(20px,3vw,42px);margin:0;line-height:1.3}footer{margin-top:100px;padding:30px 0;display:flex;justify-content:space-between}[hidden]{display:none!important}body.entered #monitor{display:none}@media(max-width:1050px){#monitor{width:180px}.camera-on #intro{padding-bottom:220px}}@media(max-width:700px){header{height:78px;padding:0 24px}#intro{padding:60px 20px 55px;min-height:calc(100svh - 210px);gap:50px}.wordmark{font-size:18vw}.wordmark sup{margin-left:5px;margin-top:5px}.interaction{max-width:100%}.hint{font-size:14px}#monitor{position:relative;right:auto;bottom:auto;width:calc(100% - 48px);margin:0 24px 24px}.camera-on #intro{padding-bottom:40px}.camera-on #monitor{max-width:280px;margin:0 auto 24px}.feed{aspect-ratio:4/3}#portfolio{padding:25px 24px}nav{gap:20px;font-size:12px}nav div{gap:14px;flex-wrap:wrap;justify-content:flex-end}.work-grid{grid-template-columns:1fr}h1{margin:65px 0}#about{flex-direction:column;gap:25px}footer{font-size:12px;gap:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Unified reference lockup: Le + supplied GLB. */
#intro{gap:38px;padding-top:5vh;padding-bottom:140px}.logo-lockup{display:flex;align-items:center;justify-content:center;width:min(850px,90vw);gap:0}.le-word{font-family:Arial,'Helvetica Neue',sans-serif;font-size:clamp(90px,20vw,230px);font-weight:700;letter-spacing:-.075em;line-height:1;flex:none;margin-right:-.015em}#shiftKey{width:68%;height:auto;aspect-ratio:1.82;margin:0;padding:0;display:block;position:relative;border:0;border-radius:0;background:none!important;box-shadow:none;touch-action:none;cursor:grab;flex:none;transform:none!important}#shiftKey:active{cursor:grabbing}.model-canvas{width:100%;height:100%;position:absolute;inset:0;transform:none;object-fit:contain}#modelState{position:absolute;inset:0;display:grid;place-content:center;font-size:14px;line-height:1.6;font-weight:400;letter-spacing:0;padding:20px;text-align:center;pointer-events:none}#modelState:empty{display:none}.hold-track{width:160px;height:2px;margin:18px auto;background:#e6e6e6;overflow:hidden}.hold-track i{display:block;width:0;height:100%;background:#111}.actions{display:flex;gap:25px;justify-content:center}.mouse-hint{font-size:12px;line-height:1.6;margin-top:22px;color:#666}.interaction{max-width:550px}#instruction{margin-bottom:12px;min-height:26px}.hint{margin-bottom:18px}#shiftKey:focus-visible{outline:1px solid #111;outline-offset:4px}@media(max-width:700px){#intro{gap:35px;padding:50px 12px 45px;min-height:calc(100svh - 220px)}.logo-lockup{width:96vw}.le-word{font-size:26vw}#shiftKey{width:66%;aspect-ratio:1.65}.interaction{padding:0 12px}.mouse-hint{max-width:290px;margin:20px auto}.camera-on #intro{padding-bottom:30px}}

/* Reference logo proportions; transparent rotation space does not shrink the key. */
.logo-lockup{display:grid;grid-template-columns:36.6% 60.5%;column-gap:2.9%;container-type:inline-size;overflow:visible}
.le-word{font-size:38cqw;margin:0;position:relative;z-index:2}
#shiftKey{width:100%;aspect-ratio:1.85;overflow:visible}
#shiftKey .model-canvas{inset:auto;max-width:none;max-height:none}
.interaction{position:relative;z-index:2}
body{overflow-x:clip}
@media(max-width:700px){.logo-lockup{width:90vw}.le-word{font-size:38cqw}#shiftKey{width:100%;aspect-ratio:1.85}}

/* Reference artwork bounds: x=34..413, y=8..134. Preserve size without outer whitespace. */
.logo-lockup{display:block;position:relative;aspect-ratio:379/126;container-type:normal}
.le-word{position:absolute;left:0;top:12.698412698%;width:35.883905013%;height:80.158730159%;overflow:hidden;font-size:0;line-height:0;letter-spacing:0;pointer-events:none}
.le-word img{position:absolute;left:-25%;top:-23.762376238%;width:329.411764706%;height:148.514851485%;max-width:none;display:block}
#shiftKey{position:absolute;left:39.050131926%;top:0;width:60.949868074%;height:100%;aspect-ratio:auto;margin:0}
@media(max-width:700px){.logo-lockup{width:90vw}.le-word{font-size:0}#shiftKey{width:60.949868074%;aspect-ratio:auto}}

/* Live Arial Bold type, fitted to reference ink bounds without raster scaling. */
.le-word{overflow:visible}
.le-word svg{width:100%;height:100%;display:block;overflow:visible;fill:#000}
.logo-lockup{margin-bottom:var(--hold-clearance,70px)}
.hold-track{position:absolute;left:50%;top:calc(100% + var(--hold-clearance,70px) - 12px);width:min(160px,40%);height:3px;margin:0;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;background:#e6e6e6;z-index:3}
.hold-track.visible{opacity:1;visibility:visible}

/* Center the logo itself in the viewport, independently of the instructions. */
#intro{height:100svh;min-height:100svh;margin-top:-96px;padding:0;display:block;position:relative}
.logo-lockup{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-bottom:0;width:min(850px,90vw)}
.interaction{position:absolute;left:50%;top:calc(50% + min(141.3px,14.9604vw) + var(--intro-clearance,90px));transform:translateX(-50%);width:min(550px,90vw)}
#monitor{width:340px;right:28px;bottom:24px}
@media(max-width:1050px){#monitor{width:280px}.camera-on #intro{padding:0}}
@media(max-width:700px){#intro{margin-top:-78px;height:100svh;min-height:100svh;padding:0}.logo-lockup{width:90vw}.interaction{padding:0;top:calc(50% + 14.9604vw + var(--intro-clearance,65px))}#monitor,.camera-on #monitor{position:relative;right:auto;bottom:auto;width:calc(100% - 32px);max-width:480px;margin:20px auto 24px}.camera-on #intro{padding:0}.mouse-hint{margin-top:14px}}


@media(min-width:701px) and (max-width:1050px){#monitor{position:relative;right:auto;bottom:auto;width:min(480px,calc(100% - 48px));margin:24px auto}.camera-on #intro{padding:0}}

/* Fit logo, instructions and camera into the first screen. */
#intro{height:calc(100svh - 96px);min-height:0;margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;align-content:center;gap:26px;padding:0 4vw 6vh}
.logo-lockup{position:relative;left:auto;top:auto;transform:none;width:min(720px,100%);margin:0 auto;grid-column:1}
.interaction{position:relative;left:auto;top:auto;transform:none;width:min(550px,100%);margin:0 auto;grid-column:1}
.logo-lockup{margin-bottom:var(--hold-clearance,55px)}
#monitor{position:fixed;width:340px;right:4vw;bottom:auto;top:50%;transform:translateY(-50%);margin:0}
@media(max-width:1050px){header{height:78px}#intro{height:auto;min-height:calc(100svh - 78px);grid-template-columns:1fr;padding:16px 20px 20px;align-content:start;gap:16px}.logo-lockup{width:min(520px,75vw);margin-bottom:20px}.interaction{width:100%}.camera-on #intro{padding:16px 20px 20px}#monitor,.camera-on #monitor{position:relative;top:auto;right:auto;bottom:auto;transform:none;width:min(440px,calc(100% - 40px));margin:0 auto 16px;max-width:440px}.camera-on #intro{min-height:0}.logo-lockup .hold-track{top:calc(100% + 8px)}}
@media(max-height:700px) and (min-width:1051px){#intro{padding-bottom:0;gap:16px}.logo-lockup{width:min(600px,100%);margin-bottom:25px}.hold-track{top:calc(100% + 8px)}.mouse-hint{margin-top:12px}}

@media(min-width:701px) and (max-width:1050px){#intro,.camera-on #intro{height:calc(100svh - 78px);min-height:0;grid-template-columns:minmax(0,1fr) 280px;align-content:center;padding:12px 24px 30px}.logo-lockup{width:min(520px,100%);margin-bottom:var(--hold-clearance,45px)}#monitor,.camera-on #monitor{position:fixed;right:24px;top:50%;transform:translateY(-50%);width:280px;margin:0}.logo-lockup .hold-track{top:calc(100% + var(--hold-clearance,45px) - 12px)}}
@media(max-width:700px){#intro,.camera-on #intro{height:auto;min-height:0;padding:8px 18px 8px;gap:12px}.logo-lockup{width:min(400px,76vw);margin-bottom:18px}.interaction{font-size:14px}#instruction{margin-bottom:6px;min-height:0}.hint{margin-bottom:8px}.mouse-hint{margin:8px auto 0;font-size:12px;line-height:1.3}.actions{gap:20px}#monitor,.camera-on #monitor{width:min(340px,29.3svh,calc(100% - 36px));margin:8px auto 12px}.monitor-top{padding:4px 0}#message{font-size:12px;margin:3px 0}.feed{aspect-ratio:4/3}}

/* Restore the centered logo and original lower-right camera position. */
#intro,.camera-on #intro{height:calc(100svh - 96px);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 24px 4vh}
.logo-lockup{position:relative;left:auto;top:auto;transform:none;width:min(850px,86vw);margin:0 auto var(--hold-clearance,55px);flex:none}
.interaction{position:relative;left:auto;top:auto;transform:none;width:min(550px,90vw);margin:0 auto}
#monitor,.camera-on #monitor{position:fixed;top:auto;right:4vw;bottom:24px;transform:none;width:340px;max-width:340px;margin:0}
@media(max-width:1050px){#intro,.camera-on #intro{height:calc(100svh - 78px);padding:0 20px 8vh;gap:16px}.logo-lockup{width:min(720px,86vw)}#monitor,.camera-on #monitor{width:280px;right:24px;bottom:20px}}
@media(max-width:700px){#intro,.camera-on #intro{justify-content:flex-start;padding-top:7vh;padding-bottom:0;gap:12px}.logo-lockup{width:86vw;margin-bottom:22px}#monitor,.camera-on #monitor{width:min(280px,32svh,calc(100% - 36px));right:18px;bottom:12px}.logo-lockup .hold-track{top:calc(100% + 8px)}}

/* Lower the logo without moving the camera or instructions. */
.logo-lockup{position:relative;top:48px}
@media(max-width:700px){.logo-lockup{top:32px}}

/* Preserve the existing header logo footprint with the supplied artwork. */
.brand{position:relative}.brand-size{visibility:hidden}.brand-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}

/* Offset the progress track upward to keep the instruction text clear. */
.logo-lockup .hold-track{top:calc(100% + var(--hold-clearance,55px) - 60px)}
@media(max-width:700px){.logo-lockup .hold-track{top:calc(100% - 24px)}}

.video-frame{position:relative;aspect-ratio:16/9;background:#f2f2f2;overflow:hidden}.video-preview{display:block;width:100%;height:100%;padding:0;border:0;background:none;position:relative}.video-preview img{display:block;width:100%;height:100%;object-fit:cover}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:#000b;color:#fff;display:grid;place-items:center;font-size:22px;padding-left:3px;transition:background .15s}.video-preview:hover .video-play{background:#000}.video-frame iframe{display:block;width:100%;height:100%;border:0}.video-work .caption{gap:16px}.video-work .caption a{letter-spacing:0;white-space:nowrap}