.experience-inline { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.experience-inline p { font-size: var(--t-sm); color: var(--muted); margin-bottom: 14px; max-width: 42ch; }
.experience-inline .btn { white-space: normal; padding-block: 12px; text-align: center; }
.experience-feature { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.experience-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; }
.experience-visual { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16/10; background: #1d1d1d; }
.experience-visual > img { width: 100%; height: 100%; object-fit: cover; }
.experience-visual .experience-before { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.experience-divider { position: absolute; left: 50%; inset-block: 0; border-left: 1px solid #eeebe4; }
.experience-divider::after { content: '↔'; position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%); border: 1px solid #eeebe4; background: #1d1d1d; color: #eeebe4; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.experience-copy h2 { font-size: var(--t-2xl); margin-block: 16px 22px; }
.experience-copy p:not(.label) { color: var(--muted); margin-bottom: 22px; }
.experience-copy .experience-note { font-size: var(--t-xs); margin-top: 18px; margin-bottom: 0; }
.experience-copy .btn { white-space: normal; padding-block: 12px; text-align: center; }
.experience-open { overflow: hidden; }
.experience-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; padding: 0; background: #f5f5f3; color: #eeebe4; }
.experience-dialog[open] { display: flex; flex-direction: column; }
.experience-dialog::backdrop { background: #15130f; }
.experience-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid #37322b; background: #15130f; }
.experience-bar .mono { font-size: var(--t-xs); letter-spacing: .06em; }
.experience-full { color: inherit; font-size: var(--t-sm); padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.experience-dialog iframe { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: #f5f5f3; }
@media(max-width:760px) { .experience-layout { grid-template-columns: 1fr; } .experience-bar .mono { display: none; } }