/* IRL browser-source preview, layered over the camera image. */
.demo-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; }
.demo-tabs button { justify-content: center; }
.demo-top > .demo-label { margin-left: 20px; }
.demo-jump { padding: 8px 0; border: 0; background: none; color: var(--ink); font-size: 10px; white-space: nowrap; text-decoration: underline; text-underline-offset: 5px; }
.irl-panel:not([hidden]) { display: block; padding: 28px 30px 22px; }
.irl-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.irl-heading .small-label { font-size: 8px; }
.irl-heading h2 { font-size: 25px; letter-spacing: -.045em; margin-top: 5px; }
.irl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 212px; gap: 25px; align-items: stretch; }
.irl-broadcast { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16 / 10; background: #28293f; border-radius: 3px; container-type: inline-size; color: #ebeaf1; }
.irl-footage { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.irl-broadcast::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0003, transparent 25%, transparent 55%, #0005); pointer-events: none; }
.irl-broadcast-top { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; font-size: 7px; letter-spacing: .1em; z-index: 1; text-shadow: 0 1px 3px #0008; }
.irl-on-air { padding: 7px 9px; background: #131528ec; border: 1px solid #ffffff22; border-radius: 2px; }
.irl-on-air i, .irl-location-top i { display: inline-block; height: 5px; width: 5px; border-radius: 50%; background: #bca4f6; margin-right: 6px; }
.irl-location-overlay { position: absolute; z-index: 2; left: 18px; bottom: 38px; width: 30%; max-width: 215px; min-width: 150px; overflow: hidden; background: #121428f0; border: 1px solid #d0c7e244; border-radius: 4px; box-shadow: 0 3px 14px #0003; }
.irl-location-top { display: flex; justify-content: space-between; padding: 8px 10px; font-size: 6px; letter-spacing: .12em; border-bottom: 1px solid #d0c7e222; }
.irl-location-top b { color: #bbaed5; font-size: 7px; font-weight: 400; }
.irl-minimap { width: 100%; display: block; aspect-ratio: 300 / 190; }
.irl-location-bottom { border-top: 1px solid #d0c7e222; padding: 9px 10px; }
.irl-location-bottom strong { display: block; font-size: 10px; font-weight: 500; letter-spacing: -.01em; }
.irl-location-bottom span { display: block; font-family: var(--display); font-size: 8px; letter-spacing: .015em; margin-top: 3px; color: #b8b0c9; font-variant-numeric: tabular-nums; }
.irl-motion-overlay { position: absolute; z-index: 2; top: 61px; left: 18px; display: flex; align-items: center; gap: 14px; background: #121428ed; padding: 10px 13px; border: 1px solid #d0c7e233; border-radius: 3px; }
.irl-motion-overlay > span { display: flex; align-items: center; gap: 5px; }
.irl-motion-overlay b { font: 500 16px var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.irl-motion-overlay small { font-size: 6px; color: #b9b0cb; }
.irl-motion-overlay .irl-hud-heading { padding-right: 13px; border-right: 1px solid #d0c7e233; }
.irl-hud-heading svg { width: 15px; height: 15px; color: #bca4f6; transform-origin: center; }
.irl-hud-heading b { font-size: 10px; min-width: 43px; }
.irl-sensor-overlay { position: absolute; z-index: 2; right: 18px; bottom: 38px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid #d0c7e233; border-radius: 3px; background: #121428ed; }
.irl-sensor-overlay svg { width: 17px; height: 17px; color: #bca4f6; }
.irl-sensor-overlay strong { font: 500 27px/1 var(--display); letter-spacing: -.05em; }
.irl-sensor-overlay small { font-size: 7px; color: #b9b0cb; align-self: end; padding-bottom: 3px; }
.irl-frame-label { position: absolute; z-index: 1; bottom: 15px; left: 18px; font-size: 6px; letter-spacing: .1em; }
.irl-broadcast[data-corner="right"] .irl-location-overlay { left: auto; right: 18px; }
.irl-broadcast[data-corner="right"] .irl-sensor-overlay { right: auto; left: 18px; }
.irl-overlay-controls { display: flex; flex-direction: column; padding-top: 3px; }
.irl-overlay-controls > .small-label { font-size: 7px; }
.irl-overlay-controls h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.04em; margin-top: 9px; }
.irl-overlay-controls > p { font-size: 10px; color: #a69cbb; margin-top: 13px; line-height: 1.8; }
.irl-layer-controls { margin-top: 18px; }
.irl-layer-controls button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid #ffffff17; background: none; color: #d2cbe0; font-size: 10px; text-align: left; }
.irl-placement { margin-top: 20px; }
.irl-placement .small-label { font-size: 7px; }
.irl-placement > div { display: flex; gap: 7px; margin-top: 8px; }
.irl-placement button { border: 1px solid #43456a; background: none; color: #b4abc6; border-radius: 3px; padding: 7px 12px; font-size: 9px; }
.irl-placement button[aria-pressed="true"] { background: #bca4f6; color: #141835; border-color: #bca4f6; }
.irl-pause { margin-top: auto; padding: 18px 0 0; width: fit-content; border: 0; background: none; color: #b8afcb; font-size: 9px; text-underline-offset: 4px; }
.irl-pause:hover { text-decoration: underline; }
.irl-demo-note { color: #968fb7; font-size: 9px; line-height: 1.7; margin-top: 17px; }
.irl-story .section-label { border-top: 0; padding-top: 0; }
.irl-story-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 110px; margin-top: 35px; }
.irl-story-grid > div > .muted { max-width: 430px; font-size: 14px; margin: 23px 0; }
.irl-capabilities { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.irl-capabilities > div { border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.irl-capabilities > div:last-child { border-bottom: 0; padding-bottom: 0; }
.irl-capabilities dt { font: 500 20px var(--display); letter-spacing: -.035em; display: flex; gap: 16px; }
.irl-capabilities dt > span { color: var(--muted); width: 20px; flex-shrink: 0; }
.irl-capabilities dd { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 10px 0 0 36px; }
.capability-state { display: inline-block; font-size: 7px; letter-spacing: .08em; color: var(--muted); margin-top: 10px; border: 1px solid var(--line); padding: 3px 6px; }
.module-search-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.module-search { display: flex; align-items: center; gap: 13px; width: 380px; max-width: 100%; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
.module-search > span { font-size: 20px; color: var(--muted); }
.module-search input { width: 100%; min-width: 0; border: 0; outline: none; background: none; color: var(--ink); font-size: 12px; border-radius: 0; }
.module-search input::placeholder { color: var(--muted); }
.module-search:focus-within { border-color: var(--ink); }
.module-result-count { font-size: 10px; color: var(--muted); }
.module-empty { padding: 30px 0 10px; font-size: 13px; color: var(--muted); }
.module-empty button { padding: 0; border: 0; border-bottom: 1px solid var(--muted); margin-left: 8px; background: none; font-size: inherit; }
@media (max-width: 1100px) {
  .irl-panel:not([hidden]) { padding: 24px; }
  .irl-layout { grid-template-columns: minmax(0, 1fr) 185px; gap: 20px; }
  .irl-heading h2 { font-size: 23px; }
  .irl-broadcast { aspect-ratio: 4 / 3; }
  .irl-overlay-controls h3 { font-size: 20px; }
  .irl-story-grid { gap: 65px; }
}
@media (max-width: 850px) {
  .demo-top { padding-right: 10px; }
  .demo-top > .demo-label { margin-left: 8px; font-size: 6px; }
  .demo-tabs button { padding-inline: 10px; gap: 6px; }
  .irl-layout { display: block; }
  .irl-broadcast { aspect-ratio: 16 / 10; }
  .irl-overlay-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; padding-top: 20px; }
  .irl-overlay-controls > .small-label, .irl-overlay-controls h3, .irl-overlay-controls > p { display: none; }
  .irl-layer-controls { grid-row: 1 / 3; margin-top: 0; }
  .irl-layer-controls button { padding: 10px 0; }
  .irl-placement { margin-top: 7px; }
  .irl-pause { padding-top: 15px; margin-top: 0; }
  .irl-story-grid { gap: 40px; }
}
@media (max-width: 650px) {
  .demo-top { padding: 0; display: block; }
  .demo-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .demo-tabs button { min-height: 45px; padding: 12px 10px; gap: 10px; }
  .demo-tabs button span { font-size: 11px; }
  .demo-top > .demo-label { display: none; }
  .demo-foot { display: block; }
  .demo-jump { display: inline-block; font-size: 10px; margin-top: 7px; }
  .irl-panel:not([hidden]) { padding: 22px 15px 18px; }
  .irl-heading { display: block; margin-bottom: 17px; }
  .irl-heading h2 { font-size: 23px; max-width: 290px; line-height: 1.15; }
  .irl-heading .small-label { font-size: 7px; }
  .irl-heading .sample-tag { display: inline-block; margin-top: 12px; font-size: 6px; }
  .irl-broadcast { aspect-ratio: 1.1; }
  .irl-broadcast-top { top: 11px; left: 10px; right: 10px; font-size: 5px; }
  .irl-on-air { padding: 6px 7px; }
  .irl-location-overlay { left: 10px; bottom: 31px; min-width: 0; width: 44%; max-width: 165px; }
  .irl-location-top { padding: 6px 7px; font-size: 5px; }
  .irl-location-top b { font-size: 6px; }
  .irl-location-bottom { padding: 7px; }
  .irl-location-bottom strong { font-size: 8px; }
  .irl-location-bottom span { font-size: 6px; margin-top: 3px; }
  .irl-motion-overlay { top: 47px; left: 10px; padding: 8px 9px; gap: 9px; }
  .irl-motion-overlay b { font-size: 14px; }
  .irl-motion-overlay small { font-size: 5px; }
  .irl-motion-overlay .irl-hud-heading { padding-right: 8px; }
  .irl-hud-heading b { font-size: 8px; min-width: 34px; }
  .irl-hud-heading svg { width: 12px; height: 12px; }
  .irl-sensor-overlay { right: 10px; bottom: 31px; gap: 6px; padding: 9px; }
  .irl-sensor-overlay strong { font-size: 23px; }
  .irl-sensor-overlay svg { width: 14px; height: 14px; }
  .irl-sensor-overlay small { font-size: 6px; }
  .irl-frame-label { bottom: 13px; left: 10px; font-size: 5px; }
  .irl-broadcast[data-corner="right"] .irl-location-overlay { right: 10px; }
  .irl-broadcast[data-corner="right"] .irl-sensor-overlay { left: 10px; }
  .irl-overlay-controls { gap: 0 20px; padding-top: 16px; grid-template-columns: 1.2fr 1fr; }
  .irl-layer-controls button { font-size: 9px; gap: 10px; padding: 11px 0; }
  .irl-placement { margin-top: 9px; }
  .irl-placement button { padding: 7px 9px; font-size: 8px; }
  .irl-placement > div { gap: 5px; }
  .irl-placement .small-label { font-size: 6px; }
  .irl-pause { font-size: 8px; padding-top: 15px; align-self: center; }
  .irl-demo-note { font-size: 8px; }
  .irl-story-grid { display: block; margin-top: 26px; }
  .irl-story-grid > div > .muted { font-size: 13px; margin-top: 20px; }
  .irl-capabilities { margin-top: 34px; gap: 22px; }
  .irl-capabilities dt { font-size: 19px; }
  .irl-capabilities dd { font-size: 12px; }
  .module-search-row { margin-top: 20px; gap: 15px; align-items: end; }
  .module-search { width: 240px; gap: 9px; }
  .module-search input { font-size: 11px; }
  .module-result-count { font-size: 8px; text-align: right; width: 85px; flex-shrink: 0; }
}
@media (max-width: 380px) {
  .irl-panel:not([hidden]) { padding-inline: 12px; }
  .irl-overlay-controls { display: block; }
  .irl-placement { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
  .irl-placement > div { margin-top: 0; }
  .irl-pause { padding-top: 18px; font-size: 9px; }
  .irl-sensor-overlay { gap: 4px; padding: 7px; }
  .irl-sensor-overlay strong { font-size: 20px; }
  .irl-sensor-overlay svg { width: 12px; height: 12px; }
  .irl-location-bottom strong { font-size: 7px; }
  .irl-location-bottom span { font-size: 5.5px; }
}