:root { color-scheme: dark; --ink:#fff; --muted:#a7a3a1; --accent:#845050; --accent-light:#be9494; --artboard-w:472.984; --artboard-h:510.236; }
* { box-sizing:border-box; }
html, body { min-width:320px; min-height:100%; margin:0; overflow-x:hidden; background:#000; }
body { color:var(--ink); font-family:Helvetica, Arial, sans-serif; }
button { color:inherit; font:inherit; }
.experience { position:relative; min-height:100svh; background:#000; }
.toggle { position:fixed; z-index:100; top:24px; right:clamp(18px,3vw,50px); min-width:110px; min-height:44px; padding:0 0 5px; border:0; border-bottom:1px solid rgba(255,255,255,.32); background:#000; cursor:pointer; font-size:10px; letter-spacing:.14em; text-align:left; text-transform:uppercase; }
.toggle::after { content:"+"; float:right; color:var(--accent-light); font-size:18px; }.experience[data-state="exploded"] .toggle::after { content:"−"; }
.toggle:hover,.toggle:focus-visible { color:var(--accent-light); border-color:var(--accent-light); outline:0; }
.initial-view,.artboard-shell { position:absolute; inset:0; min-height:100svh; }
.initial-view { z-index:10; }
.initial-model { position:absolute; left:50%; top:44%; width:min(90vw,1480px); aspect-ratio:4167/2343; transform:translate(-50%,-50%); }
.initial-model img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; }
.initial-caption { position:absolute; left:50%; bottom:clamp(34px,5.5vh,86px); width:min(84vw,1320px); display:grid; grid-template-columns:18px 1fr 18px; align-items:center; gap:22px; text-align:center; }
.initial-caption h1 { margin:0 0 18px; font-size:clamp(21px,2vw,34px); line-height:1; font-weight:400; }
.initial-caption p { margin:0; font-size:clamp(12px,1.1vw,18px); line-height:1.35; }
.caption-bracket { position:relative; height:clamp(76px,9vw,130px); border-left:2px solid #d8d8d8; }.caption-bracket::before,.caption-bracket::after { content:""; position:absolute; left:0; width:14px; border-top:2px solid #d8d8d8; }.caption-bracket::before { top:0; }.caption-bracket::after { bottom:0; }.caption-bracket--right { transform:scaleX(-1); }

.artboard-shell { z-index:20; display:grid; place-items:start center; padding:18px 12px 30px; pointer-events:none; }
.artboard { container-type:inline-size; position:relative; width:min(calc((100svh - 36px) * .927),96vw,1100px); aspect-ratio:472.984/510.236; overflow:visible; }
.layer { position:absolute; z-index:3; left:22.9115%; width:48.5631%; height:25.3085%; padding:0; border:0; background:transparent; opacity:0; cursor:crosshair; transform-origin:50% 50%; will-change:transform,opacity,filter; }
.layer--01 { top:5.4204%; }.layer--02 { top:26.3924%; }.layer--03 { top:47.2424%; }.layer--04 { top:68.0925%; }
.layer img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; mix-blend-mode:screen; }
.linework,.ai-copy { position:absolute; inset:0; z-index:5; width:100%; height:100%; overflow:visible; }
.linework { pointer-events:none; }.linework * { vector-effect:non-scaling-stroke; }
.force-axis { stroke:#808080; stroke-width:.425; }.force-node { fill:#808080; stroke:var(--accent-light); stroke-width:.142; }.load-arrows line,.load-arrows path { fill:none; stroke:var(--accent); stroke-width:.425; }.detail-line { stroke:var(--accent-light); stroke-width:.142; stroke-dasharray:1.417 .567; }.detail-bracket path { fill:none; stroke:#fff; stroke-width:.5; }
.ai-copy { font-family:Helvetica,Arial,sans-serif; pointer-events:none; }
.ai-copy p,.ai-copy h2 { margin:0; font-weight:400; }
.force-title,.load-copy,.axis-copy,.ground-copy { position:absolute; color:var(--accent); font-size:1.651cqw; line-height:1.2; text-align:center; }
.force-title { left:15.067%; top:12.655%; }.load-copy { left:14.884%; top:18.538%; width:8.45%; }.axis-copy--02 { left:14.956%; top:37.224%; }.axis-copy--03 { left:14.927%; top:53.757%; }.axis-copy--04 { left:15.529%; top:70.108%; }.ground-copy { left:16.343%; top:88.211%; }
.callout { position:absolute; z-index:7; min-height:20px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; pointer-events:auto; font-size:1.259cqw; line-height:1; text-align:left; white-space:nowrap; }
.callout--01 { left:61.535%; top:14.573%; }.callout--02 { left:46.537%; top:46.427%; }.callout--03a { left:61.141%; top:59.082%; }.callout--03b { left:48.309%; top:64.851%; }.callout--04a { left:57.347%; top:79.924%; }.callout--04b { left:47.851%; top:87.002%; }
.annotation { position:absolute; z-index:7; left:67.741%; width:28.5%; pointer-events:auto; outline:0; }
.annotation--03 { top:45.675%; }.annotation--02 { top:66.222%; }.annotation--01 { top:86.111%; }
.annotation h2 { font-size:1.651cqw; line-height:1; white-space:nowrap; }.annotation p { margin-top:1.35cqw; color:#b6b2b0; font-size:1.057cqw; line-height:1.365; white-space:nowrap; }
.reveal { opacity:0; visibility:hidden; }
.experience[data-state="exploded"] .artboard-shell { pointer-events:auto; }
.experience[data-phase="animating"] .toggle,.experience[data-phase="animating"] .artboard { pointer-events:none; }
.experience[data-focus]:not([data-focus=""]) .layer,.experience[data-focus]:not([data-focus=""]) .callout,.experience[data-focus]:not([data-focus=""]) .detail-bracket,.experience[data-focus]:not([data-focus=""]) .force-node,.experience[data-focus]:not([data-focus=""]) .annotation { transition:opacity .2s ease,filter .2s ease,color .2s ease; }
.is-dim { opacity:.12!important; }.is-active { color:#efaaaa!important; }.layer.is-active { filter:brightness(1.45) contrast(1.12); }

@media (max-aspect-ratio: 4/5) {
  .artboard-shell { align-items:start; padding-top:64px; overflow:auto; }
  .artboard { width:96vw; min-width:620px; transform-origin:top left; }
  .initial-model { top:39%; width:112vw; }
  .initial-caption { bottom:38px; width:92vw; grid-template-columns:12px 1fr 12px; gap:10px; }.initial-caption p br { display:none; }
}
@media (max-width:600px) { .toggle { top:12px; right:14px; }.initial-caption h1 { margin-bottom:12px; }.initial-caption p { font-size:11px; }.caption-bracket { height:92px; }.artboard-shell { justify-content:start; overflow-x:auto; }.artboard { margin-left:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }