.experience-grid.experience-viewer {
  --experience-zoom:1;
  display:grid;
  grid-template-columns:minmax(275px,.74fr) minmax(0,1.5fr);
  align-items:start;
  gap:clamp(34px,5vw,76px);
  scroll-margin-top:calc(var(--header,108px) + 25px);
}
.experience-viewer-controls { min-width:0; padding-block:7px 0; }
.experience-viewer-tabs { display:flex; flex-direction:column; gap:8px; }
.experience-viewer-tab {
  width:100%;
  min-height:59px;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 19px;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--muted,#a1a1a6);
  text-align:left;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.experience-viewer-tab:hover { background:#ffffff06; color:var(--paper,#f5f5f7); }
.experience-viewer-tab:active { background:#ffffff10; transition:none; }
.experience-viewer-tab[aria-selected=true] {
  background:var(--surface-raised,#1b1b1d);
  border-color:var(--gold-line,rgba(191,149,63,.3));
  color:var(--gold-light,#fcf6ba);
}
.experience-viewer-tab:focus-visible { outline:2px solid var(--gold-light,#fcf6ba); outline-offset:4px; }
.experience-viewer-tab-number { font-size:10px; line-height:1; color:var(--gold,#bf953f); flex-shrink:0; }
.experience-viewer-tab-title { flex:1; font-size:16px; font-weight:500; letter-spacing:-.025em; line-height:1.25; }
.experience-viewer-tab-indicator { width:14px; height:14px; position:relative; flex-shrink:0; margin-left:3px; }
.experience-viewer-tab-indicator::before,.experience-viewer-tab-indicator::after {
  content:'';
  position:absolute;
  inset:6px 1px;
  background:currentColor;
  border-radius:1px;
  transition:transform .35s var(--ease,cubic-bezier(.2,.8,.2,1));
}
.experience-viewer-tab-indicator::after { transform:rotate(90deg); }
.experience-viewer-tab[aria-selected=true] .experience-viewer-tab-indicator::after { transform:rotate(0deg); }
.experience-viewer-panels { position:relative; min-width:0; margin-top:28px; overflow:visible; }
.experience-viewer .experience-viewer-panel { position:absolute; inset:0 0 auto; width:100%; margin:0; opacity:0; transform:none; transition:none; scroll-margin-top:calc(var(--header,108px) + 26px); }
.experience-viewer .experience-viewer-panel[hidden] { display:none!important; }
.experience-viewer .experience-viewer-panel[inert] { pointer-events:none; }
.experience-viewer.viewer-in-motion .experience-viewer-panel,
.experience-viewer.viewer-in-motion .experience-viewer-layer { will-change:transform,opacity; }
.experience-viewer .experience-body { padding:0 8px; }
.experience-viewer .experience-body>.overline { font-size:11px; line-height:1.6; margin-bottom:12px; }
.experience-viewer .experience-body>h3 { font-size:28px; line-height:1.12; margin-bottom:18px; }
.experience-viewer .experience-body>p:not(.overline) { font-size:14px; line-height:1.7; }
.experience-viewer .experience-body>p.experience-note { font-size:11px; line-height:1.65; margin-top:15px; }
.experience-viewer .experience-actions { gap:4px 18px; margin-top:16px; }
.experience-viewer .choice-link { font-size:13px; }
.experience-viewer .detail-link { font-size:12px; }
.experience-viewer-visual { min-width:0; position:sticky; top:calc(var(--header,108px) + 22px); }
.experience-viewer-stage {
  position:relative;
  isolation:isolate;
  min-width:0;
  width:100%;
  aspect-ratio:1.06;
  background:var(--surface,#111112);
  border-radius:var(--radius,28px);
  overflow:hidden;
}
.experience-viewer .experience-viewer-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  border-radius:0;
  opacity:0;
  pointer-events:none;
  transform:scale(1.045);
  transition:none;
}
.experience-viewer .experience-viewer-layer.is-active { opacity:1; transform:scale(1); z-index:1; }
.experience-viewer .experience-viewer-layer img,
.experience-viewer .experience:hover .experience-viewer-layer img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(var(--experience-zoom,1));
  transition:none;
}
.experience-viewer .experience-viewer-layer .image-tag { left:24px; top:24px; font-size:11px; padding:8px 13px; }
.experience-viewer .experience-viewer-layer .image-number { right:24px; bottom:24px; }
.experience-viewer-zoom {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 24px;
  align-items:center;
  padding:23px 8px 0;
}
.experience-viewer-zoom label { font-size:12px; color:var(--muted,#a1a1a6); }
.experience-viewer-zoom-value { font-size:11px; font-variant-numeric:tabular-nums; color:var(--gold-light,#fcf6ba); }
.experience-viewer-zoom input[type=range] {
  grid-column:1/-1;
  width:100%;
  min-height:28px;
  margin:0;
  padding:0;
  accent-color:var(--gold,#bf953f);
  cursor:ew-resize;
  touch-action:pan-y;
}
@media(min-width:1300px) {
  .experience-grid.experience-viewer { grid-template-columns:minmax(300px,.7fr) minmax(0,1.5fr); }
  .experience-viewer-stage { aspect-ratio:1.1; }
}
@media(max-width:950px) {
  .experience-grid.experience-viewer { grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:30px; }
  .experience-viewer-tab { padding:14px 15px; min-height:56px; gap:10px; }
  .experience-viewer-tab-title { font-size:14px; }
  .experience-viewer-stage { aspect-ratio:.78; }
  .experience-viewer .experience-body>h3 { font-size:25px; }
  .experience-viewer .experience-body>p:not(.overline) { font-size:13px; }
}
@media(max-width:700px) {
  .experience-grid.experience-viewer { grid-template-columns:minmax(0,1fr); gap:25px; }
  .experience-viewer-visual { position:static; grid-row:1; }
  .experience-viewer-controls { grid-row:2; padding-top:0; }
  .experience-viewer-stage { aspect-ratio:1.2; }
  .experience-viewer-zoom { padding:17px 5px 0; gap:5px 20px; }
  .experience-viewer-zoom label { font-size:11px; }
  .experience-viewer-tabs { gap:7px; }
  .experience-viewer-tab { min-height:54px; padding:14px 18px; }
  .experience-viewer-tab-title { font-size:16px; }
  .experience-viewer-panels { margin-top:26px; }
  .experience-viewer .experience-body { padding:0 7px; }
  .experience-viewer .experience-body>h3 { font-size:29px; }
  .experience-viewer .experience-body>p:not(.overline) { font-size:14px; }
  .experience-viewer .experience-body>p.experience-note { font-size:11px; }
  .experience-viewer .experience-actions { margin-top:18px; }
  .experience-viewer .choice-link { font-size:14px; }
  .experience-viewer .detail-link { font-size:13px; }
  .experience-viewer .experience-viewer-layer .image-tag { top:18px; left:18px; padding:7px 11px; font-size:10px; }
  .experience-viewer .experience-viewer-layer .image-number { bottom:18px; right:18px; }
}
@media(max-width:420px) {
  .experience-viewer-stage { aspect-ratio:1.05; }
  .experience-viewer-tab-title { font-size:15px; }
  .experience-viewer .experience-body>h3 { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) {
  .experience-viewer *,
  .experience-viewer *::before,
  .experience-viewer *::after { transition:none!important; animation:none!important; }
  .experience-viewer .experience-viewer-layer { transform:none; }
}