/* The experimental surface is deliberately separate from the portfolio. */
body[data-view="motion"] .header{height:62px;min-height:62px;flex-direction:row;align-items:center;padding:0;gap:20px}
body[data-view="motion"] .brand{font-size:13px;letter-spacing:.24em}
body[data-view="motion"] .brand span{display:none}
body[data-view="motion"] .header nav{width:auto;font-size:10px;gap:25px}
body[data-view="motion"] .header nav button{display:none}
body[data-view="motion"] .footer{display:none}
.motion-study{max-width:1140px;margin:auto;padding:42px 5% 34px}
.study-heading{position:relative}.study-back{font:10px var(--sans);color:var(--muted);display:inline-block;min-height:30px}.study-kicker{float:right;font:8px var(--sans);letter-spacing:.15em;color:#78766d}
.study-heading h1{font-weight:400;font-size:clamp(44px,6.2vw,76px);letter-spacing:-.055em;line-height:1.05;margin:14px 0 13px}.study-heading p{font:11px/1.7 var(--sans);color:var(--muted);margin:0 0 29px}
.study-tabs{display:flex;gap:32px;border-bottom:1px solid var(--soft-line);margin-bottom:24px}.study-tabs a{font:11px var(--sans);color:#77766d;min-height:43px;display:flex;gap:10px;align-items:center;border-bottom:1px solid transparent}.study-tabs a span{font:10px var(--serif);color:#6e6a61}.study-tabs a[aria-current]{color:var(--fg);border-color:var(--fg)}.study-tabs a[aria-current] span{color:var(--fg)}
.study-stage{height:clamp(310px,43vw,440px);position:relative;background:#141413;overflow:hidden;isolation:isolate;border:1px solid #242420;display:grid;place-items:center;contain:layout paint}
.study-frame{position:relative;width:min(82%,660px);aspect-ratio:1.65;overflow:hidden;cursor:crosshair;isolation:isolate;touch-action:pan-y}
.study-art{position:absolute;inset:0;overflow:hidden;background:#777974}.art-block{position:absolute;inset:0;background:#666862}.art-one{left:42%;transform:skewX(-18deg);background:#989a92}.art-two{top:68%;background:#4d504c;transform:rotate(-8deg);inset-inline:-10%}.art-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 47px,#e3dfd133 47px 48px),repeating-linear-gradient(90deg,transparent 0 47px,#e3dfd133 47px 48px);opacity:.5}.art-number{position:absolute;left:8%;top:13%;font-size:clamp(58px,10vw,130px);line-height:1;color:#d2d2c4;font-weight:400}.art-caption{position:absolute;left:8%;bottom:9%;font:8px var(--sans);letter-spacing:.15em;color:#d6d5c8}.water-lens{position:absolute;inset:0;pointer-events:none;will-change:clip-path,opacity}.study-filter{position:absolute;width:0;height:0;pointer-events:none}.layer-cover{position:absolute;inset:0;pointer-events:none;display:grid;grid-template-rows:repeat(4,1fr)}.layer-cover i{display:block;background:#10100f;transform-origin:top}.layer-cover i:nth-child(even){transform-origin:bottom}.layer-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--fg);transform-origin:center}
.decode-display{text-align:center;width:95%}.decode-output{display:block;font:clamp(70px,13vw,145px)/1 var(--serif);letter-spacing:-.03em;height:1em;min-width:6ch}.decode-sub{display:block;font:clamp(10px,1.8vw,15px)/1.4 monospace;letter-spacing:.28em;margin:26px 0 35px;min-height:1.4em}.decode-rule{display:block;width:40px;height:1px;background:var(--fg);margin:auto}
.study-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;margin-top:25px}.study-toolbar h2{font-size:22px;font-weight:400;letter-spacing:-.02em;margin:0 0 12px}.study-toolbar p{font:11px/1.8 var(--sans);color:var(--muted);margin:0;max-width:570px}.study-actions{display:flex;gap:18px;flex-shrink:0}.study-actions button{font:10px var(--sans);min-height:44px;border-bottom:1px solid #45443c;white-space:nowrap}.study-actions button[aria-pressed="true"]{color:var(--fg);border-color:var(--fg)}.study-actions button:disabled{opacity:.3;cursor:default}.study-status{font:10px/1.8 var(--sans);color:#928e81;margin-top:17px}.study-footnote{font:8px/1.8 var(--sans);color:#626057;margin:25px 0 0;letter-spacing:.06em}
.arc-viewport{position:absolute;inset:0 0 45px;overflow:hidden;touch-action:pan-y;cursor:grab;outline-offset:-4px!important;user-select:none}.arc-viewport:active{cursor:grabbing}.arc-cards{position:absolute;inset:0}.arc-card{position:absolute;left:50%;top:42px;width:clamp(128px,20vw,220px);padding:9px 9px 14px;background:#d5d3c8;color:#242622;border-radius:1px;box-shadow:0 10px 20px #0005;transform-origin:50% 130%;will-change:transform;text-align:left;user-select:none;touch-action:pan-y}.arc-art{display:grid;place-items:center;height:clamp(165px,23vw,260px);background:rgb(var(--card-shade) var(--card-shade) var(--card-shade));position:relative;overflow:hidden}.arc-art:after{content:'';position:absolute;width:1px;height:170%;background:#d8d6c240;transform:rotate(30deg)}.arc-art>span{font-size:clamp(40px,7vw,75px);color:#c1c2b4}.arc-card-label{display:block;font:8px var(--sans);letter-spacing:.13em;margin-top:12px}.arc-controls{position:absolute;bottom:0;height:45px;display:flex;gap:30px;align-items:center;z-index:30}.arc-controls button{min-width:44px;min-height:44px;font-size:22px}.arc-controls span{font:9px var(--sans);letter-spacing:.1em}
@media(max-width:760px){.motion-study{padding:27px 5%}.study-kicker{font-size:6px;letter-spacing:.05em}.study-heading h1{font-size:47px;margin-top:18px}.study-heading p{font-size:10px;margin-bottom:24px}.study-tabs{gap:0;justify-content:space-between;margin-bottom:19px}.study-tabs a{font-size:10px;gap:6px}.study-tabs a span{font-size:8px}.study-stage{height:330px}.study-frame{width:91%;aspect-ratio:1.3}.art-caption{font-size:6px}.study-toolbar{display:block;margin-top:21px}.study-toolbar h2{font-size:23px}.study-toolbar p{font-size:10px}.study-actions{margin-top:11px;gap:25px}.study-actions button{font-size:10px}.study-status{font-size:9px;margin-top:14px}.study-footnote{font-size:7px;margin-top:20px}.arc-card{top:35px;width:142px}.arc-art{height:190px}.decode-output{font-size:22vw}.decode-sub{font-size:10px;letter-spacing:.22em}}
@media(prefers-reduced-motion:reduce){.arc-card,.water-lens{will-change:auto}}

.study-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.logo-divider{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.logo-word{font-size:32px;letter-spacing:.22em;color:var(--fg);padding-left:.22em}.logo-rule{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:center}