.sample-section-page{padding:0;height:100vh;width:100vw;overflow:hidden;background:radial-gradient(ellipse at top,#1e293b 0,#0f172a 45%,#020617 100%);background-size:cover;box-sizing:border-box;display:flex;flex-direction:column}.fox-local-panel,.fox-panel{--sidebar-max-width:513px}.espn-local-panel,.espn-panel,.maestro-panel{--sidebar-max-width:676px}.sample-section-header{display:flex;align-items:center;gap:20px;padding:20px 30px;border-bottom:2px solid rgba(255,255,255,.1);background:transparent}.sample-section-header h2{color:#f3f7ff;font-size:28px;font-weight:600;margin:0}.sample-section-header button{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;background:transparent;border:2px solid transparent;color:#f3f7ff;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s;width:200px}.sample-section-header button:focus{outline:none;border-color:#f3f7ff;background:white;color:black}.sample-section-header button:hover{background:rgba(243,247,255,.1)}.sample-section-header button svg{flex-shrink:0;width:24px;height:24px}.sample-section-header button svg path,.sample-section-header button:focus svg path{stroke:#f3f7ff}.scenarios-container{display:flex;flex-direction:column;gap:5px;padding:30px 0 30px 50px;width:100%;box-sizing:border-box;flex:1 1;overflow-y:auto;overflow-x:visible;scroll-behavior:smooth}.scenarios-container::-webkit-scrollbar{display:none}.scenarios-container{scrollbar-width:none;-ms-overflow-style:none}.scenarios-placeholder{padding:60px 40px;text-align:center;color:#666;background:#141414;border-radius:12px;border:2px dashed #2a2a2a;margin-top:20px}.scenarios-placeholder p{margin:0;font-size:18px;font-weight:500}.scenarios-row{margin-bottom:-25px}.scenarios-row-body{position:relative}.scenarios-row-title{color:#f3f7ff;font-size:22px;font-weight:600;margin-bottom:-8px;padding-left:20px}.scenarios-cards{display:flex;gap:15px;overflow-x:auto;overflow-y:hidden;padding:10px 50px 25px 20px;scroll-behavior:smooth}.row-scroll-button{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);width:36px;height:36px;padding:0;border-radius:999px;border:1px solid rgba(243,247,255,.35);background:rgba(10,10,10,.65);color:#f3f7ff;cursor:pointer;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.scenarios-row-body:focus-within .row-scroll-button,.scenarios-row-body:hover .row-scroll-button{opacity:1;pointer-events:auto}.row-scroll-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;width:24px;height:24px}.row-scroll-button:hover:not(:disabled){transform:translateY(-50%) scale(1.05)}.row-scroll-button-left{left:8px}.row-scroll-button-right{right:8px}.scenarios-cards::-webkit-scrollbar{display:none}.scenarios-cards{scrollbar-width:none;-ms-overflow-style:none}.scenario-card{background:rgba(20,20,20,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px;padding:0;min-width:320px;max-width:320px;height:230px;border:3px solid transparent;transition:border-color .15s ease,transform .15s ease,background .15s ease;cursor:pointer;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden}.scenario-card:focus{outline:none;border-color:#f3f7ff;background:rgba(243,247,255,.1);transform:scale(1.05);z-index:10}.scenario-card:hover:not(:focus){background:rgba(243,247,255,.08);transform:scale(1.02);z-index:5}.scenario-card-poster{width:100%;height:180px;background:#1a1a1a;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.scenario-card-poster img{width:100%;height:100%;object-fit:cover}.scenario-card-title{color:#f3f7ff;font-size:15px;font-weight:600;padding:12px;line-height:1.3;flex:1 1;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis}.video-container{position:fixed;top:0;left:0;width:100%;height:100%;background:black;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;z-index:9999}.video-wrapper{position:relative;flex:1 1;min-width:0;height:100%;overflow:hidden}.video-chrome-bar{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:10;gap:10px}.video-stage{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.video-stage .iframe-element{width:calc(100% - 200px);height:calc(100% - 200px);margin:100px}.video-stage .video-element,.video-stage .video-grid{pointer-events:auto}.video-stage>.video-element,.video-wrapper>.video-element{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 64px);height:70%;object-fit:cover;border-radius:8px}.video-grid-item .video-element{width:100%;height:100%;object-fit:cover}.video-grid,.video-stage>.video-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% - 32px);height:40%;text-align:center;font-size:0}.video-grid-2 .video-grid-item{display:inline-block;vertical-align:top;width:calc(50% - 8px);height:100%;margin:0 4px}.video-grid-3{height:80%}.video-grid-3 .video-grid-item:first-child,.video-grid-3 .video-grid-item:nth-child(2){display:inline-block;vertical-align:top;width:calc(50% - 8px);height:calc(50% - 4px);margin:0 4px 8px}.video-grid-3 .video-grid-item:nth-child(3){display:block;width:60%;height:calc(50% - 4px);margin:0 auto}.video-grid-4{height:80%}.video-grid-4 .video-grid-item{display:inline-block;vertical-align:top;width:calc(50% - 8px);height:calc(50% - 4px);margin:0 4px 8px}.video-grid-item{position:relative;overflow:hidden;box-sizing:border-box;border-radius:8px}.video-grid-item video{width:100%;height:100%;object-fit:cover}.controls-overlay{position:absolute;top:20px;right:20px;display:flex;gap:10px;z-index:10}.controls-overlay-left{position:absolute;top:20px;left:20px;z-index:10}.show-panel-btn{padding:12px 24px;background:rgba(20,20,20,.6);color:white;border:3px solid transparent;border-radius:8px;font-size:16px;cursor:pointer;transition:border-color .15s ease,transform .15s ease,background .15s ease;outline:none}.show-panel-btn:focus{outline:none;border-color:transparent;background:rgba(255,255,255,.9);color:black}.show-panel-btn:focus-visible{outline:none;border-color:transparent;background:rgba(255,255,255,.9);color:black}.show-panel-btn[aria-disabled=true]{cursor:not-allowed;opacity:.55}.show-panel-btn[aria-disabled=true]:focus,.show-panel-btn[aria-disabled=true]:focus-visible{opacity:1}.show-panel-btn.focused{background:rgba(255,255,255,.9);color:black;outline:none}.panel-container{flex:0 0 auto;width:0;height:100%;background:transparent;overflow:hidden;transition:width .3s ease}.panel-container #test-panel-container,.panel-container .next-panel-sdk-mount{width:100%;height:100%;min-height:100%}#test-panel-container *,#test-panel-container :focus,#test-panel-container :focus-visible{outline:none!important;box-shadow:none!important}#test-panel-container{outline:none!important;#test-panel-container .panel-navigation{white-space:nowrap;overflow-x:auto;overflow-y:hidden}border:none!important;box-shadow:none!important}#test-panel-container .panel-nav-button-container{white-space:nowrap!important}#test-panel-container .panel-nav-button-container .FONT_BOLD{font-size:18px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-family:var(--sdk-font-headline)!important}#test-panel-container .panel-navigation{border:none!important;outline:none!important;box-shadow:none!important}#test-panel-container .panel-navigation :focus,#test-panel-container .panel-navigation :focus-visible{outline:none!important;box-shadow:none!important}.show-panel-btn-focused #test-panel-container .panel-nav-button-container[data-focused=true]{color:var(--sdk-text300)!important}.show-panel-btn-focused #test-panel-container .panel-nav-button-container[data-focused=true] path{fill:var(--sdk-highlightSecondary)!important}.show-panel-btn-focused #test-panel-container .panel-nav-button-container[data-focused=true] button{background-color:var(--sdk-surface3)!important}.content-source-tabs{display:flex;gap:24px;margin-left:auto}.content-source-tab{padding:8px 4px;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:#a0a0a0;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px}.content-source-tab:hover{color:#f3f7ff}.content-source-tab:focus{outline:none;color:#f3f7ff;border-bottom-color:rgba(243,247,255,.5)}.content-source-tab.active{color:#f3f7ff}.content-source-tab.active,.content-source-tab.active:focus{border-bottom-color:#f3f7ff}.route-selector{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#f3f7ff}.route-selector h1{font-size:48px;margin-bottom:16px}.route-selector p{font-size:20px;margin-bottom:32px;color:#888}.route-links{display:flex;gap:24px}.route-link{display:flex;align-items:center;justify-content:center;width:200px;height:80px;background-color:#363c4d;color:#f3f7ff;text-decoration:none;font-size:24px;border-radius:8px;transition:background-color .2s,transform .2s}.route-link:focus,.route-link:hover{background-color:#f3f7ff;color:#0c0d0d;transform:scale(1.05);outline:none}.route-sandbox-footer{margin-top:32px;font-size:16px;color:#94a3b8}.route-sandbox-footer a{color:#7dd3fc}.test-app-ui-sample-section--legacy-bg{background-image:url(/public/assets/background.png);background-size:cover}@font-face{font-family:FOXONEAero-400-Regular;src:url(/fonts/FOXONEAero-400-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:FOXONEAeroCnd-400-Regular;src:url(/fonts/FOXONEAeroCnd-400-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:FOXONEAero-700-Bold;src:url(/fonts/FOXONEAero-700-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--font-primary:"FOXONEAero-700-Bold";--font-secondary:"FOXONEAeroCnd-400-Regular";--font-tertiary:"FOXONEAero-400-Regular"}body,html{margin:0;padding:0;font-family:Arial,sans-serif;background:#0f172a;color:#e2e8f0}*{box-sizing:border-box}.page{max-width:960px;margin:0 auto;padding:24px}.controls{display:block}.controls label{display:block;margin-bottom:12px}.controls input{width:100%;margin-top:4px;padding:8px}.actions{margin:12px 0 18px}.actions button{margin-right:8px;padding:8px 14px}.status{min-height:24px}.panel{width:100%;min-height:420px;background:#111827;border:1px solid #334155;border-radius:8px;overflow:hidden}