.experience-stage{position:relative;width:100%;height:100%;overflow:hidden;background:transparent;isolation:isolate}
.experience-stage iframe{position:absolute;left:50%;top:50%;max-width:none;border:0;transform-origin:50% 50%;background:transparent}
.experience-status{position:absolute;z-index:1;inset:0;display:grid;place-content:center;margin:0;font:13px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#fff;background:#161616;text-align:center}
.experience-status img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4)}
.experience-status span,.experience-status button{position:relative;z-index:1}
.experience-status[hidden]{display:none}
.experience-stage[data-runtime-error="true"] .experience-status{inset:auto 0 0;display:block;max-height:30%;overflow:auto;padding:12px 16px;background:#181818eb;color:#f0d9ba;overflow-wrap:anywhere;pointer-events:none}
.experience-status button{padding:8px 16px;color:#356bee;text-decoration:underline}
.experience{margin:20px 0 36px}
.experience-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;margin-bottom:14px;font-size:14px;color:#657184}
.experience-instruction{width:100%;margin:12px 0 0!important;text-align:center;font-size:12px!important;line-height:1.5!important;color:#657184}
.experience-touch-controls{display:none}
@media(pointer:coarse){.experience-touch-controls{display:flex;flex:none;justify-content:center;gap:8px;width:100%;margin:12px 0 0}.experience-touch-controls button{min-width:44px;min-height:44px;padding:0 8px;border:1px solid #5a6678;border-radius:12px;background:#20242b;color:#f4f4f4;font:17px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;touch-action:none}}
.experience>.experience-stage{margin-inline:auto;background:transparent}
.experience-missing,.experience-error{display:block;padding:18px;color:#657184;font-size:14px}
dialog.demo-detail{width:min(1280px,96vw);height:94dvh;max-height:94dvh;border:0;border-radius:16px;background:#111;color:#f4f4f4;color-scheme:dark;overflow:hidden}
dialog.demo-detail[open]{display:flex;flex-direction:column}
.demo-detail .dialog-head{background:#111;border-color:#333;position:static;flex:none;padding:10px 22px}
.demo-detail .dialog-head button{background:#292929;color:#fff}
.demo-detail .dialog-body p,.demo-detail .notice,.demo-detail .experience-toolbar,.demo-detail .experience-instruction{color:#bcbcbc}
.demo-detail .detail-nav{border-color:#333}
.demo-detail .detail-nav button{color:#eee;border-color:#444}
.demo-detail .dialog-body{padding:20px 28px 14px;flex:1;min-height:0;display:grid;grid-template-columns:minmax(280px,.42fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"heading heading" "copy media" "nav nav";gap:20px 32px}
.demo-detail .experience-heading{grid-area:heading;min-width:0;padding-bottom:16px;border-bottom:1px solid #303030}
.demo-detail .detail-copy{grid-area:copy;min-width:0;min-height:0;align-self:start;padding:0 24px 0 0;border-right:1px solid #303030}
.demo-detail .dialog-body h2{font-size:clamp(23px,2.2vw,32px);line-height:1.2;margin:6px 0 0;letter-spacing:-.035em}
.demo-detail .dialog-body p{font-size:clamp(12px,1.7dvh,15px);line-height:1.65;margin:0 0 12px}
.demo-detail .detail-why{margin:0 0 18px}
.demo-detail .detail-why h3{font-size:15px;margin:0 0 10px;color:#f4f4f4}
.demo-detail .notice{font-size:11px;line-height:1.5}
.demo-detail .primary-media{grid-area:media;min-width:0;min-height:0;margin:0;display:flex;align-items:flex-start;justify-content:center}
.demo-detail .experience{width:100%;height:100%;min-height:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.demo-detail .experience-toolbar{flex:none;align-self:stretch;justify-content:center;text-align:center;font-size:11px;line-height:1.5;margin:10px 0 0}
.demo-detail .experience-stage{flex:none;order:1}
.demo-detail .experience-touch-controls{order:2}
.demo-detail .experience-instruction{flex:none;order:3}
.demo-detail .primary-media>.detail-media{width:100%;height:auto;max-height:100%;margin:0}
.demo-detail .primary-media .media-frame{min-height:0;height:auto;background:transparent}
.demo-detail .primary-media img,.demo-detail .primary-media video{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin-inline:auto;object-fit:contain}
.demo-detail .detail-nav{grid-area:nav;margin:0;padding-top:10px;gap:10px}
.demo-detail .detail-nav button{font-size:12px;padding:7px 12px}
@media(min-width:701px){
dialog.demo-detail.portrait-experience{width:min(1040px,96vw)}
.demo-detail.portrait-experience .dialog-body{grid-template-columns:minmax(320px,1fr) minmax(0,1fr)}
}
@media(max-width:700px){.demo-detail .dialog-body{padding:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"heading" "copy" "media" "nav";gap:10px}.demo-detail .experience-heading{padding-bottom:10px}.demo-detail .detail-copy{max-height:24dvh;overflow:auto;border:0;padding:0}.demo-detail .dialog-body h2{font-size:22px;margin:4px 0 0}.demo-detail .dialog-body p{font-size:12px;line-height:1.6;margin-bottom:8px}.demo-detail .detail-why{margin-bottom:10px}.demo-detail .dialog-head{padding:8px 14px}}