/* The surrounding help layout is website-only. Panel controls retain native styles. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Tajawal:wght@400;500;700&display=swap');
html,body.web-preview{height:100%;width:100%;margin:0;overflow:hidden;background:#1e1e1e;color:#eee;color-scheme:dark}.web-preview [hidden]{display:none!important}body.web-preview{display:flex;flex-direction:column;font-size:12px}.preview-workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;flex:1;min-height:0;overflow:hidden}.panel-shell{position:relative;min-height:0;min-width:0;display:flex;flex-direction:column}.panel-tab{height:30px;min-height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#252525;border-bottom:1px solid #414141;font:11px Arial,sans-serif;color:#ddd}.panel-tab span:last-child{font-size:10px;color:#aaa}.panel-layout{position:relative;min-height:0;flex:1;overflow:hidden}.web-preview #preview-panel.app{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:none;scroll-behavior:auto}.web-preview #preview-panel>.accordion{min-height:calc(100% - 43px);margin-top:8px}.web-preview .section-sidebar{position:absolute;top:42px;bottom:8px;left:6px;max-height:calc(100% - 50px)}.web-preview .app.sidebar-right .section-sidebar{left:auto;right:6px}.web-preview .app>.accordion:not(.side-active){display:none!important}.web-preview .app>.accordion.side-active{display:block}.web-preview .top-menu{position:relative}.web-preview .app .accordion-head{cursor:pointer}.preview-help{background:#17171c;border-left:1px solid #3b3b41;min-width:0;min-height:0;display:flex;flex-direction:column;font:12px/1.7 Inter,Tajawal,Arial,sans-serif;overflow:hidden}.preview-eyebrow{font-size:9px;letter-spacing:1.4px;color:#999ad1;display:block;margin-bottom:10px}#preview-section-about{padding:20px 19px 18px;flex-shrink:0;max-height:245px;overflow:auto;border-bottom:1px solid #37373e}#preview-section-about strong{font-size:17px;color:#eee;line-height:1.4;display:block}#preview-section-about p{font-size:11px;color:#bcbcc9;margin:10px 0 0}#preview-control-help{flex:1;min-height:100px;overflow:auto;padding:17px 19px;overflow-anchor:none}.preview-help h2,.native-explanation h2{font-size:13px;line-height:1.6;color:#b8baff;margin:0 0 8px;overflow-wrap:anywhere}.preview-help p,.native-explanation p{font-size:11px;line-height:1.8;white-space:pre-line;color:#c7c7d3;margin:0 0 10px;overflow-wrap:anywhere}.preview-help dl,.native-explanation dl{margin:12px 0 0}.preview-help dl>div,.native-explanation dl>div{border-top:1px solid #383840;padding:10px 0}.preview-help dt,.native-explanation dt{font-size:11px;font-weight:600;color:#e2e2ef}.preview-help dd,.native-explanation dd{font-size:11px;color:#b8b8c8;line-height:1.8;margin:4px 0 0}.preview-demo-note{padding:12px 19px;border-top:1px solid #37373e;margin:0!important;font-size:10px!important;color:#9494a6!important}.preview-sample{padding:10px 19px 12px;border-top:1px solid #37373e;max-height:150px;overflow:auto}.preview-sample>span{font-size:9px;letter-spacing:1px;color:#858593}.ae-timeline{display:grid;gap:5px;margin-top:9px}.ae-layer{display:flex;align-items:center;gap:8px;font-size:10px;color:#b3b3c2}.ae-layer i{font-size:9px;font-style:normal;color:#aaa2ff;background:#383442;width:16px;height:16px;text-align:center}.ae-playhead{display:none}.preview-info{height:56px;min-height:56px;max-height:56px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 14px;overflow:auto;border-top:1px solid #41414d;background:#14141b;font:11px/1.6 Inter,Tajawal,sans-serif;color:#bdbdd2;overflow-anchor:none}.preview-info>span{flex:1;min-width:0}.preview-info a{color:#b6b8ff;white-space:nowrap;font-size:10px;text-decoration:none}#preview-tip{display:none!important}.web-preview .assistant-frame{display:none}.web-preview .assistant-chat{height:calc(100vh - 183px);min-height:440px}.web-preview .assistant-chat #prompt{width:100%}.web-preview .assistant-chat #messages{min-height:120px}.web-preview .assistant-accordion>.accordion-body{padding:0}.web-preview .assistant-chat .model-menu{bottom:calc(100% + 8px)}.web-preview .demo-window-body{overflow:auto}.web-preview .demo-dialog-host{z-index:11000}.web-preview .demo-window{font-family:Arial,sans-serif}.web-preview .demo-window .modal{width:100%;max-width:none;max-height:none;overflow:visible;padding:0;background:transparent;border:0;box-shadow:none}.web-preview .demo-window .counter-preview-stage{min-height:140px}.web-preview input,.web-preview select{min-width:0;max-width:100%}.web-preview .top-menu .panel-menu{z-index:90}.web-preview .top-menu .panel-submenu{position:static!important}.web-preview .native-explanation{font:12px/1.7 Inter,Tajawal,Arial,sans-serif;background:#18181f;border-left:1px solid #41414c;min-width:0;overflow:auto;padding:18px}.web-preview [data-preview-native-overlay]{display:grid;grid-template-columns:minmax(0,650px) 270px;align-content:center;justify-content:center;gap:0;padding:18px;overflow:auto;z-index:10050;overscroll-behavior:contain}.web-preview [data-preview-native-overlay]>.modal{width:100%;max-width:100%;max-height:calc(100dvh - 40px);border-radius:12px 0 0 12px;overflow:auto}.web-preview [data-preview-native-overlay]>.native-explanation{max-height:calc(100dvh - 40px);height:100%;border:1px solid #41414c;border-radius:0 12px 12px 0}.native-explanation-label{font-size:9px;color:#9090a8;letter-spacing:1px;margin:0 0 12px}.native-explanation-content h2{font-size:14px}.native-explanation-content p{font-size:11px}.web-preview .ut-anim-preview{min-height:125px}.web-preview .te-words{overflow-wrap:anywhere}
@media(max-width:760px){.preview-workspace{grid-template-columns:minmax(0,1fr)}.preview-help{display:none}.preview-info{height:72px;min-height:72px;max-height:72px;font-size:10px;padding:9px 10px}.preview-info a{font-size:9px}.web-preview [data-preview-native-overlay]{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:10px}.web-preview [data-preview-native-overlay]>.modal{flex-shrink:0;max-height:calc(100dvh - 154px);width:100%;border-radius:10px}.web-preview [data-preview-native-overlay]>.native-explanation{height:auto;min-height:100px;max-height:120px;border-radius:8px;margin-top:8px;padding:10px;flex-shrink:0}.native-explanation-label{display:none}.native-explanation-content h2{font-size:11px;margin-bottom:4px}.native-explanation-content p{font-size:10px;margin-bottom:0}.web-preview .assistant-chat{height:calc(100vh - 190px)}.web-preview .preview-sample{display:none}}
@media(max-width:410px){.web-preview .app.sidebar-expanded{padding-left:135px!important}.web-preview .section-sidebar:not(.collapsed){width:122px}.web-preview .section-side-label{font-size:10px}.web-preview .app{padding-right:5px}.web-preview .sequence-compact{grid-column:1/-1}.web-preview .ut-anim-row{flex-wrap:wrap}}
/* Keep native fixed header buttons inside the embedded panel's viewport. */
.web-preview .panel-shell{transform:translateZ(0)}.web-preview #preview-panel #utRingOpenBtn{right:54px!important}.web-preview #preview-panel .section-sidebar.collapsed .section-sidebar-toggle{font-size:0!important}.web-preview .native-explanation .adv-tool-overview h3{font-size:14px}
.web-preview [data-preview-native-overlay]>.counter-modal{width:100%;max-width:100%;max-height:calc(100dvh - 40px);border-radius:12px 0 0 12px}.web-preview [data-preview-native-overlay].counter-modal-overlay{display:grid}.web-preview [data-preview-native-overlay]>.counter-modal .counter-modal-content{max-height:calc(100dvh - 95px)}
@media(max-width:760px){.web-preview [data-preview-native-overlay].counter-modal-overlay{display:flex}.web-preview [data-preview-native-overlay]>.counter-modal{max-height:calc(100dvh - 154px);border-radius:10px}.web-preview [data-preview-native-overlay]>.counter-modal .counter-modal-content{max-height:calc(100dvh - 210px)}}