[{"data":1,"prerenderedAt":1015},["ShallowReactive",2],{"navigation":3,"/examples/custom-styling":238,"/examples/custom-styling-surround":1010},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":190,"body":240,"description":1004,"extension":1005,"links":1006,"meta":1007,"navigation":370,"path":191,"seo":1008,"stem":192,"__hash__":1009},"docs/08.examples/2.custom-styling.md",{"type":241,"value":242,"toc":999},"minimark",[243,260,265,268,275,278,833,837,844,985,995],[244,245,246,247,251,252,255,256,259],"p",{},"Each UI component accepts a ",[248,249,250],"code",{},"customStyles"," object with named keys for targeted inline overrides. Combine with ",[248,253,254],{},"shape"," and ",[248,257,258],{},"size"," config to match any design system without touching global CSS.",[261,262,264],"h2",{"id":263},"demo","Demo",[244,266,267],{},"Portrait shape with a branded CTA button and custom container shadow:",[269,270,271],"scena-container",{},[272,273],"scena-component",{":config":274},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"poster\":\"/examples/example-cat.jpg\",\"autoplay\":false,\"loop\":true,\"muted\":true},\"size\":\"md\",\"shape\":\"portrait\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\",\"customStyles\":{\"root\":{\"boxShadow\":\"0 8px 32px rgba(0,0,0,0.35)\"}}},\"ctaButton\":{\"text\":\"Shop now\",\"customStyles\":{\"button\":{\"color\":\"rgb(255, 255, 255)\",\"background\":\"#013EFB\"}}},\"videoProgress\":{\"customStyles\":{\"progress\":{\"background\":\"#8BED02\"}}},\"closeButton\":false}",[261,276,277],{"id":248},"Code",[279,280,286],"pre",{"className":281,"code":282,"filename":283,"language":284,"meta":285,"style":285},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  useScena,\n  ComponentSize,\n  ComponentShape,\n  ComponentPosition,\n  ComponentPlacement,\n} from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: {\n    src: '/video.mp4',\n    poster: '/poster.jpg',\n    autoplay: false,\n    loop: true,\n    muted: true,\n  },\n  size: ComponentSize.MD,\n  shape: ComponentShape.PORTRAIT,\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.MIDDLE_CENTER,\n    customStyles: {\n      root: {\n        boxShadow: '0 8px 32px rgba(0,0,0,0.35)',\n      },\n    },\n  },\n  ctaButton: {\n    text: 'Shop now',\n    customStyles: {\n      button: {\n        background: '#013EFB',\n      },\n    },\n  },\n  videoProgress: {\n    customStyles: {\n      progress: {\n        background: '#8BED02',\n      },\n    },\n  },\n  closeButton: false,\n});\n","main.ts","ts","",[248,287,288,301,311,319,327,335,343,365,372,386,391,413,418,446,458,475,492,506,519,531,537,555,573,583,601,619,629,639,656,662,668,673,683,700,709,719,736,741,746,751,761,770,780,796,801,806,811,823],{"__ignoreMap":285},[289,290,293,297],"span",{"class":291,"line":292},"line",1,[289,294,296],{"class":295},"s7zQu","import",[289,298,300],{"class":299},"sMK4o"," {\n",[289,302,304,308],{"class":291,"line":303},2,[289,305,307],{"class":306},"sTEyZ","  useScena",[289,309,310],{"class":299},",\n",[289,312,314,317],{"class":291,"line":313},3,[289,315,316],{"class":306},"  ComponentSize",[289,318,310],{"class":299},[289,320,322,325],{"class":291,"line":321},4,[289,323,324],{"class":306},"  ComponentShape",[289,326,310],{"class":299},[289,328,330,333],{"class":291,"line":329},5,[289,331,332],{"class":306},"  ComponentPosition",[289,334,310],{"class":299},[289,336,338,341],{"class":291,"line":337},6,[289,339,340],{"class":306},"  ComponentPlacement",[289,342,310],{"class":299},[289,344,346,349,352,355,359,362],{"class":291,"line":345},7,[289,347,348],{"class":299},"}",[289,350,351],{"class":295}," from",[289,353,354],{"class":299}," '",[289,356,358],{"class":357},"sfazB","@retoo/scena",[289,360,361],{"class":299},"'",[289,363,364],{"class":299},";\n",[289,366,368],{"class":291,"line":367},8,[289,369,371],{"emptyLinePlaceholder":370},true,"\n",[289,373,375,377,379,382,384],{"class":291,"line":374},9,[289,376,296],{"class":295},[289,378,354],{"class":299},[289,380,381],{"class":357},"@retoo/scena/styles",[289,383,361],{"class":299},[289,385,364],{"class":299},[289,387,389],{"class":291,"line":388},10,[289,390,371],{"emptyLinePlaceholder":370},[289,392,394,398,401,404,408,411],{"class":291,"line":393},11,[289,395,397],{"class":396},"spNyl","const",[289,399,400],{"class":306}," scena ",[289,402,403],{"class":299},"=",[289,405,407],{"class":406},"s2Zo4"," useScena",[289,409,410],{"class":306},"()",[289,412,364],{"class":299},[289,414,416],{"class":291,"line":415},12,[289,417,371],{"emptyLinePlaceholder":370},[289,419,421,423,426,428,431,434,437,440,443],{"class":291,"line":420},13,[289,422,397],{"class":396},[289,424,425],{"class":306}," instance ",[289,427,403],{"class":299},[289,429,430],{"class":295}," await",[289,432,433],{"class":306}," scena",[289,435,436],{"class":299},".",[289,438,439],{"class":406},"mount",[289,441,442],{"class":306},"(",[289,444,445],{"class":299},"{\n",[289,447,449,453,456],{"class":291,"line":448},14,[289,450,452],{"class":451},"swJcz","  video",[289,454,455],{"class":299},":",[289,457,300],{"class":299},[289,459,461,464,466,468,471,473],{"class":291,"line":460},15,[289,462,463],{"class":451},"    src",[289,465,455],{"class":299},[289,467,354],{"class":299},[289,469,470],{"class":357},"/video.mp4",[289,472,361],{"class":299},[289,474,310],{"class":299},[289,476,478,481,483,485,488,490],{"class":291,"line":477},16,[289,479,480],{"class":451},"    poster",[289,482,455],{"class":299},[289,484,354],{"class":299},[289,486,487],{"class":357},"/poster.jpg",[289,489,361],{"class":299},[289,491,310],{"class":299},[289,493,495,498,500,504],{"class":291,"line":494},17,[289,496,497],{"class":451},"    autoplay",[289,499,455],{"class":299},[289,501,503],{"class":502},"sfNiH"," false",[289,505,310],{"class":299},[289,507,509,512,514,517],{"class":291,"line":508},18,[289,510,511],{"class":451},"    loop",[289,513,455],{"class":299},[289,515,516],{"class":502}," true",[289,518,310],{"class":299},[289,520,522,525,527,529],{"class":291,"line":521},19,[289,523,524],{"class":451},"    muted",[289,526,455],{"class":299},[289,528,516],{"class":502},[289,530,310],{"class":299},[289,532,534],{"class":291,"line":533},20,[289,535,536],{"class":299},"  },\n",[289,538,540,543,545,548,550,553],{"class":291,"line":539},21,[289,541,542],{"class":451},"  size",[289,544,455],{"class":299},[289,546,547],{"class":306}," ComponentSize",[289,549,436],{"class":299},[289,551,552],{"class":306},"MD",[289,554,310],{"class":299},[289,556,558,561,563,566,568,571],{"class":291,"line":557},22,[289,559,560],{"class":451},"  shape",[289,562,455],{"class":299},[289,564,565],{"class":306}," ComponentShape",[289,567,436],{"class":299},[289,569,570],{"class":306},"PORTRAIT",[289,572,310],{"class":299},[289,574,576,579,581],{"class":291,"line":575},23,[289,577,578],{"class":451},"  container",[289,580,455],{"class":299},[289,582,300],{"class":299},[289,584,586,589,591,594,596,599],{"class":291,"line":585},24,[289,587,588],{"class":451},"    position",[289,590,455],{"class":299},[289,592,593],{"class":306}," ComponentPosition",[289,595,436],{"class":299},[289,597,598],{"class":306},"ABSOLUTE",[289,600,310],{"class":299},[289,602,604,607,609,612,614,617],{"class":291,"line":603},25,[289,605,606],{"class":451},"    placement",[289,608,455],{"class":299},[289,610,611],{"class":306}," ComponentPlacement",[289,613,436],{"class":299},[289,615,616],{"class":306},"MIDDLE_CENTER",[289,618,310],{"class":299},[289,620,622,625,627],{"class":291,"line":621},26,[289,623,624],{"class":451},"    customStyles",[289,626,455],{"class":299},[289,628,300],{"class":299},[289,630,632,635,637],{"class":291,"line":631},27,[289,633,634],{"class":451},"      root",[289,636,455],{"class":299},[289,638,300],{"class":299},[289,640,642,645,647,649,652,654],{"class":291,"line":641},28,[289,643,644],{"class":451},"        boxShadow",[289,646,455],{"class":299},[289,648,354],{"class":299},[289,650,651],{"class":357},"0 8px 32px rgba(0,0,0,0.35)",[289,653,361],{"class":299},[289,655,310],{"class":299},[289,657,659],{"class":291,"line":658},29,[289,660,661],{"class":299},"      },\n",[289,663,665],{"class":291,"line":664},30,[289,666,667],{"class":299},"    },\n",[289,669,671],{"class":291,"line":670},31,[289,672,536],{"class":299},[289,674,676,679,681],{"class":291,"line":675},32,[289,677,678],{"class":451},"  ctaButton",[289,680,455],{"class":299},[289,682,300],{"class":299},[289,684,686,689,691,693,696,698],{"class":291,"line":685},33,[289,687,688],{"class":451},"    text",[289,690,455],{"class":299},[289,692,354],{"class":299},[289,694,695],{"class":357},"Shop now",[289,697,361],{"class":299},[289,699,310],{"class":299},[289,701,703,705,707],{"class":291,"line":702},34,[289,704,624],{"class":451},[289,706,455],{"class":299},[289,708,300],{"class":299},[289,710,712,715,717],{"class":291,"line":711},35,[289,713,714],{"class":451},"      button",[289,716,455],{"class":299},[289,718,300],{"class":299},[289,720,722,725,727,729,732,734],{"class":291,"line":721},36,[289,723,724],{"class":451},"        background",[289,726,455],{"class":299},[289,728,354],{"class":299},[289,730,731],{"class":357},"#013EFB",[289,733,361],{"class":299},[289,735,310],{"class":299},[289,737,739],{"class":291,"line":738},37,[289,740,661],{"class":299},[289,742,744],{"class":291,"line":743},38,[289,745,667],{"class":299},[289,747,749],{"class":291,"line":748},39,[289,750,536],{"class":299},[289,752,754,757,759],{"class":291,"line":753},40,[289,755,756],{"class":451},"  videoProgress",[289,758,455],{"class":299},[289,760,300],{"class":299},[289,762,764,766,768],{"class":291,"line":763},41,[289,765,624],{"class":451},[289,767,455],{"class":299},[289,769,300],{"class":299},[289,771,773,776,778],{"class":291,"line":772},42,[289,774,775],{"class":451},"      progress",[289,777,455],{"class":299},[289,779,300],{"class":299},[289,781,783,785,787,789,792,794],{"class":291,"line":782},43,[289,784,724],{"class":451},[289,786,455],{"class":299},[289,788,354],{"class":299},[289,790,791],{"class":357},"#8BED02",[289,793,361],{"class":299},[289,795,310],{"class":299},[289,797,799],{"class":291,"line":798},44,[289,800,661],{"class":299},[289,802,804],{"class":291,"line":803},45,[289,805,667],{"class":299},[289,807,809],{"class":291,"line":808},46,[289,810,536],{"class":299},[289,812,814,817,819,821],{"class":291,"line":813},47,[289,815,816],{"class":451},"  closeButton",[289,818,455],{"class":299},[289,820,503],{"class":502},[289,822,310],{"class":299},[289,824,826,828,831],{"class":291,"line":825},48,[289,827,348],{"class":299},[289,829,830],{"class":306},")",[289,832,364],{"class":299},[261,834,836],{"id":835},"alternative-css-custom-properties","Alternative: CSS custom properties",[244,838,839,840,843],{},"The same result using CSS variables on the ",[248,841,842],{},".rs"," root element — useful for global theming or when you can't pass config directly:",[279,845,850],{"className":846,"code":847,"filename":848,"language":849,"meta":285,"style":285},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".rs {\n  --rs-video-container-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);\n  --rs-cta-button-background: rgb(79, 70, 229);\n  --rs-cta-button-background-hover: rgb(99, 90, 255);\n  --rs-video-progress-progress-color: rgb(79, 70, 229);\n}\n","styles.css","css",[248,851,852,862,904,931,957,980],{"__ignoreMap":285},[289,853,854,856,860],{"class":291,"line":292},[289,855,436],{"class":299},[289,857,859],{"class":858},"sBMFI","rs",[289,861,300],{"class":299},[289,863,864,867,869,873,876,879,882,884,887,890,892,894,896,898,901],{"class":291,"line":303},[289,865,866],{"class":306},"  --rs-video-container-shadow",[289,868,455],{"class":299},[289,870,872],{"class":871},"sbssI"," 0",[289,874,875],{"class":871}," 8px",[289,877,878],{"class":871}," 32px",[289,880,881],{"class":406}," rgba",[289,883,442],{"class":299},[289,885,886],{"class":871},"0",[289,888,889],{"class":299},",",[289,891,872],{"class":871},[289,893,889],{"class":299},[289,895,872],{"class":871},[289,897,889],{"class":299},[289,899,900],{"class":871}," 0.35",[289,902,903],{"class":299},");\n",[289,905,906,909,911,914,916,919,921,924,926,929],{"class":291,"line":313},[289,907,908],{"class":306},"  --rs-cta-button-background",[289,910,455],{"class":299},[289,912,913],{"class":406}," rgb",[289,915,442],{"class":299},[289,917,918],{"class":871},"79",[289,920,889],{"class":299},[289,922,923],{"class":871}," 70",[289,925,889],{"class":299},[289,927,928],{"class":871}," 229",[289,930,903],{"class":299},[289,932,933,936,938,940,942,945,947,950,952,955],{"class":291,"line":321},[289,934,935],{"class":306},"  --rs-cta-button-background-hover",[289,937,455],{"class":299},[289,939,913],{"class":406},[289,941,442],{"class":299},[289,943,944],{"class":871},"99",[289,946,889],{"class":299},[289,948,949],{"class":871}," 90",[289,951,889],{"class":299},[289,953,954],{"class":871}," 255",[289,956,903],{"class":299},[289,958,959,962,964,966,968,970,972,974,976,978],{"class":291,"line":329},[289,960,961],{"class":306},"  --rs-video-progress-progress-color",[289,963,455],{"class":299},[289,965,913],{"class":406},[289,967,442],{"class":299},[289,969,918],{"class":871},[289,971,889],{"class":299},[289,973,923],{"class":871},[289,975,889],{"class":299},[289,977,928],{"class":871},[289,979,903],{"class":299},[289,981,982],{"class":291,"line":337},[289,983,984],{"class":299},"}\n",[986,987,989],"callout",{"icon":988,"to":53},"i-lucide-arrow-right",[244,990,991,992,436],{},"Full list of all CSS custom properties — see ",[993,994,52],"strong",{},[996,997,998],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":285,"searchDepth":292,"depth":303,"links":1000},[1001,1002,1003],{"id":263,"depth":303,"text":264},{"id":248,"depth":303,"text":277},{"id":835,"depth":303,"text":836},"Override CSS custom properties and component constants to match your brand.","md",null,{},{"title":190,"description":1004},"050sIdVd3tf5h1rZ_hu7HjZPGfc0U4EjPmItBAqnO6k",[1011,1013],{"title":186,"path":187,"stem":188,"description":1012,"children":-1},"Minimal widget mounted with a single required field — video.src.",{"title":194,"path":195,"stem":196,"description":1014,"children":-1},"Adapt widget size and shape across breakpoints using the responsive constants.",1777984324060]