.interaction-system{margin:clamp(100px,13vw,190px) 8vw 0;color:#f1eee5}
.interaction-system__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,340px);align-items:end;gap:28px;margin-bottom:34px;border-top:1px solid rgba(242,240,233,.22);padding-top:18px}
.interaction-system__intro p{grid-column:1/-1;color:rgba(242,240,233,.42);font-size:8px;letter-spacing:.18em}
.interaction-system__intro h3{font-family:var(--serif);font-size:clamp(42px,5.1vw,76px);font-weight:400;line-height:.9;letter-spacing:-.05em}
.interaction-system__intro>span{align-self:end;padding-bottom:5px;color:rgba(242,240,233,.48);font-size:8px;letter-spacing:.14em;line-height:1.7}
.interaction-system__intro--compact{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;margin-bottom:18px}
.interaction-system__intro--compact p{grid-column:1;margin:0}
.interaction-system__intro--compact>span{grid-column:2;grid-row:1;padding:0;text-align:right}
.touch-instruction{display:none}
.mode-lab{--lab-ink:#0b0b0a;overflow:hidden;background:#ececeb;color:var(--lab-ink)}
.mode-lab__bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px 12px}
.mode-lab__bar>b{font-size:11px;letter-spacing:.04em}
.mode-lab__bar>div{display:flex;gap:12px}
.mode-lab__bar button{min-width:76px;padding:8px 15px;border:1px solid #111;border-radius:999px;color:#111;font:500 12px/1 var(--sans);transition:background .2s,color .2s,transform .2s}
.mode-lab__bar button[aria-pressed="true"]{background:#090909;color:#fff}
.mode-lab__bar button:hover,.mode-lab__bar button:focus-visible{outline:0;transform:translateY(-1px)}
.mode-lab__workspace{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(0,0,0,.16)}
.mode-lab__controls{min-width:0;background:#e1e1df}
/* The parameter panel used to be open at every width, which is what made this
   section read as a tool rather than a piece of work. It is a closed disclosure
   everywhere now — the controls are one click away, not the first thing seen. */
.mode-lab__controls>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 18px;border-top:1px solid rgba(0,0,0,.16);background:#e1e1df;color:#111;cursor:pointer;font:600 9px/1 var(--sans);letter-spacing:.1em;list-style:none}
.mode-lab__controls>summary small{font-size:8px;font-weight:500;opacity:.55}
.mode-lab__controls>summary::after{content:"+";margin-left:10px;font-size:15px}
.mode-lab__controls[open]>summary::after{content:"−"}
.mode-lab__controls>summary::-webkit-details-marker{display:none}
.mode-lab__stage{position:relative;height:clamp(620px,68vw,920px);overflow:hidden;perspective:2600px;cursor:grab;touch-action:none}
.mode-lab__stage:active{cursor:grabbing}
.mode-lab__stage:focus-visible{outline:2px solid #0b0b0a;outline-offset:-8px}
.mode-lab__cards{position:absolute;inset:0;transform-style:preserve-3d}
.mode-lab__card{position:absolute;left:0;top:0;width:clamp(66px,8.2vw,126px);aspect-ratio:.72;overflow:hidden;border:0;background:#ddd;box-shadow:0 6px 16px rgba(0,0,0,.10);transform:translate3d(var(--x),var(--y),var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(var(--scale));transform-origin:center;transition:box-shadow .28s,filter .28s;will-change:transform;cursor:pointer}
.mode-lab__card img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mode-lab__card::after{content:attr(data-number);position:absolute;left:7px;bottom:6px;padding:3px 5px;background:rgba(0,0,0,.68);color:#fff;font-size:6px;letter-spacing:.12em}
.mode-lab__card.is-active{box-shadow:0 12px 28px rgba(0,0,0,.17);filter:saturate(1.04)}
.mode-lab__panel{position:relative;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px;padding:20px 18px;border-top:1px solid rgba(0,0,0,.16);background:#e1e1df;font:500 10px/1.2 var(--sans)}
.mode-lab__panel header{grid-column:1/-1}
.mode-lab__reset{align-self:end}
.mode-lab__panel header{display:flex;justify-content:space-between;margin-bottom:25px;padding-bottom:13px;border-bottom:1px solid rgba(0,0,0,.2);letter-spacing:.08em}.mode-lab__panel header span{color:#3d6f42;font-size:8px}.mode-lab__readout,.mode-lab__panel label>span{display:flex;justify-content:space-between;gap:12px}.mode-lab__readout{margin-bottom:23px}.mode-lab__panel output{font-variant-numeric:tabular-nums}.mode-lab__panel label{display:block;margin:0 0 22px;color:#282827}.mode-lab__panel input[type="range"]{width:100%;height:18px;margin-top:8px;accent-color:#111;cursor:ew-resize}.mode-lab__toggle{display:flex!important;align-items:center;justify-content:space-between;padding-top:2px;border-top:1px solid rgba(0,0,0,.14)}.mode-lab__toggle span{padding-top:13px}.mode-lab__toggle input{margin-top:13px;accent-color:#111}.mode-lab__reset{width:100%;padding:11px;border:1px solid #111;background:transparent;color:#111;font:600 8px/1 var(--sans);letter-spacing:.1em}.mode-lab__reset:hover,.mode-lab__reset:focus-visible{background:#111;color:#fff;outline:0}
.mode-lab footer{position:relative;z-index:4;display:flex;justify-content:space-between;padding:12px 30px 28px;font-size:10px;letter-spacing:.04em}
.mode-lab footer b{font-weight:500}

.interaction-system__intro--light{margin-bottom:0;padding-bottom:34px}
.case-ribbon{position:relative;height:clamp(250px,25vw,340px);overflow:hidden;background:transparent;color:#f1eee5;perspective:3200px;cursor:grab;touch-action:none}
.case-ribbon:active{cursor:grabbing}.case-ribbon:focus-visible{outline:2px solid rgba(242,240,233,.7);outline-offset:-8px}
.case-ribbon__meta{position:absolute;z-index:90;left:22px;right:22px;top:0;display:flex;justify-content:flex-end;color:rgba(242,240,233,.45);font-size:8px;letter-spacing:.14em}
.case-ribbon__cases{position:absolute;inset:0;transform-style:preserve-3d}
.case-ribbon__case{position:absolute;left:0;top:0;width:clamp(86px,10vw,148px);aspect-ratio:1/1;overflow:visible;border:0;background:transparent;transform:translate3d(var(--x),var(--y),var(--z)) scale(var(--scale));transform-origin:center;will-change:transform;cursor:pointer}
.case-ribbon__case::before,.case-ribbon__case::after{content:none}
.case-ribbon__visual{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:#1a1b19;box-shadow:0 0 0 1px rgba(0,0,0,.55);transform:translate3d(var(--focus-x),var(--focus-y),var(--focus-z)) scale(var(--focus-scale));transform-origin:center;will-change:transform}
.case-ribbon__case img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.case-ribbon__case.is-hovered .case-ribbon__visual{box-shadow:0 0 0 1px rgba(242,240,233,.28),0 16px 30px rgba(0,0,0,.5)}
.case-ribbon__expand{position:absolute;z-index:95;right:0;bottom:0;padding:11px 14px;border:1px solid rgba(242,240,233,.3);border-radius:999px;background:rgba(9,10,9,.62);color:#f1eee5;font:600 9px/1 var(--sans);letter-spacing:.12em;backdrop-filter:blur(8px)}
.case-ribbon>p{position:absolute;z-index:90;left:22px;bottom:28px;font-size:8px;letter-spacing:.14em}
.case-ribbon.is-expanded{position:fixed;z-index:300;inset:0;width:100vw;height:100dvh;background:#080807}

@media(max-width:1000px){.interaction-system{margin-inline:4vw}.interaction-system__intro{grid-template-columns:1fr}.interaction-system__intro>span{max-width:520px}.mode-lab__workspace{grid-template-columns:1fr}.mode-lab__panel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px;border-left:0;border-top:1px solid rgba(0,0,0,.2)}.mode-lab__panel header{grid-column:1/-1;margin-bottom:5px}.mode-lab__readout,.mode-lab__panel label{margin-bottom:6px}.mode-lab__reset{align-self:end}.mode-lab__stage{height:720px}.case-ribbon{height:300px}}
@media(max-width:700px){.pointer-instruction{display:none}.touch-instruction{display:inline}.interaction-system{margin:100px 0 0}.interaction-system__intro{margin-inline:0}.interaction-system__intro p,.interaction-system__intro>span{font-size:10px;line-height:1.6}.interaction-system__intro h3{font-size:46px}.interaction-system__intro--compact{grid-template-columns:1fr;gap:8px}.interaction-system__intro--compact p,.interaction-system__intro--compact>span{grid-column:1;grid-row:auto;text-align:left}.mode-lab__bar{align-items:flex-start;flex-direction:column;padding:20px 16px 8px}.mode-lab__bar>div{display:grid;width:100%;grid-template-columns:repeat(4,1fr);gap:6px}.mode-lab__bar button{min-width:0;min-height:42px;padding-inline:5px}.mode-lab__stage{height:560px}.mode-lab__card{width:64px}.mode-lab__controls>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border-top:1px solid rgba(0,0,0,.2);background:#e1e1df;color:#111;cursor:pointer;font:600 10px/1 var(--sans);letter-spacing:.09em}.mode-lab__controls>summary small{font-size:8px;font-weight:500;opacity:.58}.mode-lab__controls>summary::after{content:"+";margin-left:10px;font-size:16px}.mode-lab__controls[open]>summary::after{content:"−"}.mode-lab__panel{grid-template-columns:1fr 1fr;padding:16px}.mode-lab footer{padding:8px 16px 20px}.case-ribbon{height:230px}.case-ribbon__case{width:74px}.case-ribbon__meta{left:14px;right:14px;font-size:9px}.case-ribbon>p{left:14px;right:118px;bottom:20px;max-width:none;font-size:9px;line-height:1.5}.case-ribbon__expand{right:0;bottom:0;min-height:44px}}
@media(hover:none),(pointer:coarse){.pointer-instruction{display:none}.touch-instruction{display:inline}}
@media(prefers-reduced-motion:reduce){.mode-lab__card,.case-ribbon__case{transition:none!important}}

/* Keep the four-view experiment on the portfolio's dark ground. The former
   paper container cut a white rectangle through the fixed botanical layer. */
.mode-lab{--lab-ink:#f1eee5;background:transparent;color:var(--lab-ink)}
.mode-lab__workspace{border-top-color:rgba(242,240,233,.16)}
.mode-lab__bar button{border-color:rgba(242,240,233,.55);color:#f1eee5}
.mode-lab__bar button[aria-pressed="true"]{background:#f1eee5;color:#090909}
.mode-lab__stage:focus-visible{outline-color:rgba(242,240,233,.78)}
.mode-lab__controls{background:transparent}
.mode-lab__controls>summary{border-top-color:rgba(242,240,233,.16);background:transparent;color:#f1eee5}
.mode-lab__panel{border-top-color:rgba(242,240,233,.16);background:rgba(8,8,7,.72);color:#f1eee5}
.mode-lab__panel header{border-bottom-color:rgba(242,240,233,.18)}
.mode-lab__panel header span{color:#d8ff52}
.mode-lab__panel label{color:rgba(242,240,233,.72)}
.mode-lab__panel input[type="range"],.mode-lab__toggle input{accent-color:#d8ff52}
.mode-lab__toggle{border-top-color:rgba(242,240,233,.16)}
.mode-lab__reset{border-color:rgba(242,240,233,.55);color:#f1eee5}
.mode-lab__reset:hover,.mode-lab__reset:focus-visible{background:#f1eee5;color:#090909}
@media(max-width:700px){.mode-lab__controls>summary{border-top-color:rgba(242,240,233,.16);background:transparent;color:#f1eee5}}

/* Name plate in the About copy column. The portrait is left exactly as it was.
   The component is used unmodified; these are integration overrides only:
   its size is vh-based and capped at 30px, and its outer padding assumes a
   standalone page. */
.about-cube{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(16px,1.8vw,26px);margin:clamp(26px,3vw,38px) 0 0}
.about-cube .cube-type{--ct-s:26px;gap:0;padding:0;align-items:flex-start}
/* Perspective makes the cube spill below its 7x7 box, so the label needs real
   clearance or it lands on the bottom-left corner. */
.about-cube .cube-type__block{gap:calc(var(--ct-s) * 1.3)}
/* The word and its move count are the live readout, so a step brighter than the
   static lines beside it. */
.about-cube .cube-type__label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:rgba(242,240,233,.6)}
.about-cube .cube-type__label b{color:#f1eee5;font-weight:400}
.about-cube .cube-type__label i{letter-spacing:.14em;color:rgba(242,240,233,.4)}
.about-cube figcaption{display:flex;flex-direction:column;gap:5px;color:rgba(235,231,220,.4);
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;line-height:1.7}
@media(max-width:700px){
  .about-cube{grid-template-columns:1fr;gap:14px}
  .about-cube .cube-type{--ct-s:clamp(22px,6.6vw,28px)}
  .about-cube figcaption{font-size:9px}
}