/* The app examples are intentionally contained within their two component roots. */
:is(.dx-portal,.dx-content){box-sizing:border-box;container-type:inline-size;width:100%;min-width:0;min-height:370px;color:#26394e;background:#fdfdf9;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.4;isolation:isolate}
:is(.dx-portal,.dx-content) *{box-sizing:border-box}
:is(.dx-portal,.dx-content) [hidden]{display:none!important}
:is(.dx-portal,.dx-content) :is(button,input,textarea){font:inherit}
:is(.dx-portal,.dx-content) button{cursor:pointer;border:0}
:is(.dx-portal,.dx-content) :is(button,input,textarea,summary,[tabindex]):focus-visible{outline:2px solid #0066ff;outline-offset:3px}
:is(.dx-portal,.dx-content) :is(h4,h5,p){margin:0}
.dx-portal .dx-portal-top,.dx-content .dx-content-top{min-height:57px;padding:12px 18px 11px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e7eae6;background:#fffffc}
.dx-portal .dx-portal-brand,.dx-content .dx-content-brand{display:flex;align-items:center;gap:9px;min-width:0}
.dx-portal .dx-portal-brand b,.dx-content .dx-content-brand b{display:block;font-size:11px;letter-spacing:1.5px;font-weight:700;color:#233b54}
.dx-portal .dx-portal-brand small,.dx-content .dx-content-brand small{display:block;font-size:10px;color:#84928f;letter-spacing:.4px;margin-top:1px}
.dx-portal .dx-portal-example,.dx-content .dx-content-example{font-size:9px;color:#7e8b8a;white-space:nowrap;letter-spacing:.15px}
.dx-portal .dx-portal-mark{display:grid;grid-template-columns:repeat(2,8px);gap:3px;transform:rotate(-4deg)}
.dx-portal .dx-portal-mark i{width:8px;height:8px;border-radius:2px;background:#0066ff}
.dx-portal .dx-portal-mark i:nth-child(2){background:#82c4b3}.dx-portal .dx-portal-mark i:nth-child(3){background:#b9d7f8}
.dx-portal .dx-portal-tabs{display:flex;gap:23px;padding:0 19px;background:#fffffc;border-bottom:1px solid #e5e9e8;min-height:36px}
.dx-portal .dx-portal-tabs button{position:relative;padding:10px 0 8px;font-size:11px;color:#859291;background:none}
.dx-portal .dx-portal-tabs button[aria-selected=true]{color:#234969;font-weight:600}
.dx-portal .dx-portal-tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#0066ff;border-radius:2px}
.dx-portal .dx-portal-tabs button span{margin-left:5px;border-radius:4px;background:#edf2f0;padding:2px 4px;font-size:9px;color:#81948c}
.dx-portal .dx-portal-main{padding:14px 18px 0;min-height:242px}
.dx-portal .dx-portal-project{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.dx-portal .dx-portal-kicker{display:block;font-size:8px;letter-spacing:1.5px;color:#8a9b94;margin-bottom:5px}
.dx-portal .dx-portal-project h4{font-size:21px;line-height:1.12;letter-spacing:-.7px;font-weight:600;color:#263e50}
.dx-portal .dx-portal-project p{font-size:10px;color:#8a9694;margin-top:5px}
.dx-portal .dx-portal-art{position:relative;width:68px;height:51px;flex:none;margin-right:5px}
.dx-portal .dx-portal-art i{position:absolute;inset:4px 12px;border-radius:7px;background:#b8d9d0;transform:rotate(-14deg);box-shadow:0 3px 7px #355b6010}
.dx-portal .dx-portal-art i:nth-child(2){background:#dcebf8;transform:rotate(8deg);inset:2px 5px 6px 19px}
.dx-portal .dx-portal-art i:nth-child(3){background:linear-gradient(150deg,#78acdf 0 45%,#c6e5d9 46% 75%,#f7f6e5 76%);transform:rotate(-4deg);inset:6px 8px 1px 14px;border:2px solid #fffdf3}
.dx-portal .dx-portal-progress{display:grid;grid-template-columns:1fr auto;gap:6px;margin-bottom:12px;font-size:9px}
.dx-portal .dx-portal-progress label{color:#587668}.dx-portal .dx-portal-progress output{color:#81958a;font-variant-numeric:tabular-nums}
.dx-portal .dx-portal-progress progress{display:block;width:100%;height:5px;grid-column:1/-1;appearance:none;border:0;border-radius:4px;overflow:hidden;background:#e3eee6;accent-color:#6fada0}
.dx-portal .dx-portal-progress progress::-webkit-progress-bar{background:#e3eee6}.dx-portal .dx-portal-progress progress::-webkit-progress-value{background:#71afa0;border-radius:4px}.dx-portal .dx-portal-progress progress::-moz-progress-bar{background:#71afa0;border-radius:4px}
.dx-portal .dx-portal-checklist{margin:0;padding:0;border:0;min-width:0}
.dx-portal .dx-portal-checklist legend{font-size:10px;font-weight:600;color:#3c5867;margin-bottom:5px}
.dx-portal .dx-portal-checklist label{display:flex;align-items:center;gap:9px;min-height:30px;border-bottom:1px solid #e9ede8;cursor:pointer;font-size:11px;color:#496371}
.dx-portal .dx-portal-checklist input{width:14px;height:14px;margin:0;accent-color:#3b907d;cursor:pointer;flex:none}
.dx-portal .dx-portal-checklist input:checked+span{color:#8a9a93;text-decoration:line-through;text-decoration-color:#bdcec5}
.dx-portal .dx-portal-step{margin-left:auto;font-size:9px;color:#acb7b0;font-variant-numeric:tabular-nums}
.dx-portal .dx-portal-details{padding:9px 0 0;font-size:10px;color:#687f78}
.dx-portal .dx-portal-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;min-height:19px}
.dx-portal .dx-portal-details summary::-webkit-details-marker{display:none}.dx-portal .dx-portal-details summary span{font-size:14px;color:#80a494;transition:transform .15s}.dx-portal .dx-portal-details[open] summary span{transform:rotate(45deg)}
.dx-portal .dx-portal-details p{font-size:10px;line-height:1.6;color:#7b8d85;padding:6px 0 1px;max-width:390px}
.dx-portal .dx-portal-footer{display:flex;align-items:center;gap:7px;padding:10px 18px 11px;font-size:9px;color:#8a9c91;min-height:33px}
.dx-portal .dx-portal-presence{width:5px;height:5px;background:#6cac94;border-radius:50%;flex:none}
.dx-portal .dx-portal-file-heading h4{font-size:18px;line-height:1.25;letter-spacing:-.4px;color:#2d4657}
.dx-portal .dx-portal-file-heading p{font-size:10px;margin-top:6px;color:#899992}
.dx-portal .dx-portal-file-list{margin-top:15px;border:1px solid #e3ebe4;border-radius:9px;background:#fffffc}
.dx-portal .dx-portal-file-list>div{display:flex;align-items:center;gap:10px;padding:12px;min-width:0}.dx-portal .dx-portal-file-list>div+div{border-top:1px solid #e9eee8}
.dx-portal .dx-portal-file-icon{display:grid;place-items:center;width:31px;height:36px;border-radius:5px;background:#e2edfc;color:#5482b5;font-size:8px;letter-spacing:.6px;flex:none}
.dx-portal .dx-portal-file-mint{background:#e0eee5;color:#5c917c}
.dx-portal .dx-portal-file-list b{display:block;font-size:11px;font-weight:600;color:#496574}.dx-portal .dx-portal-file-list small{display:block;font-size:9px;color:#97a49c;margin-top:3px}
.dx-portal .dx-portal-file-list button{width:29px;height:30px;flex:none;margin-left:auto;border-radius:6px;background:#edf5f1;color:#558b78;font-size:17px}
.dx-portal .dx-portal-file-list button:hover{background:#dfede7}
.dx-portal .dx-portal-file-note{display:flex;align-items:center;gap:8px;padding:13px 0 0;color:#66897b;font-size:10px}
.dx-portal .dx-portal-file-note>span{display:grid;place-items:center;background:#e5f0e9;width:23px;height:23px;border-radius:50%}
.dx-portal .dx-portal-file-note p>span{color:#93a497;font-size:9px}
.dx-content{background:#f9fbff}
.dx-content .dx-content-top{background:#fff;border-bottom-color:#e7ecf5}
.dx-content .dx-content-brand small{color:#8794a9}
.dx-content .dx-content-mark{width:20px;height:21px;display:flex;align-items:center;gap:3px}
.dx-content .dx-content-mark i{width:4px;height:19px;border-radius:2px;background:#0066ff;transform:rotate(16deg)}.dx-content .dx-content-mark i:nth-child(2){height:14px;background:#87aaf2}.dx-content .dx-content-mark i:nth-child(3){height:9px;background:#b8acd9}
.dx-content .dx-content-plan{padding:13px 17px 10px}
.dx-content .dx-content-plan-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.dx-content .dx-content-plan-label h4{font-size:12px;font-weight:600;color:#385570}.dx-content .dx-content-plan-label>span{font-size:9px;color:#93a1b7}
.dx-content .dx-content-drafts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.dx-content .dx-content-drafts button{min-width:0;text-align:left;border:1px solid #e3eaf5;border-radius:7px;background:#fff;padding:8px 9px;color:#8292ab}
.dx-content .dx-content-drafts button[aria-selected=true]{background:#eaf2ff;border-color:#b3cdf9;box-shadow:0 2px 4px #1e62c908}
.dx-content .dx-content-drafts button>span{display:block;font-size:8px;color:#8a9bb9;margin-bottom:4px;letter-spacing:.5px}
.dx-content .dx-content-drafts button>b{display:block;font-size:10px;line-height:1.3;font-weight:500;color:#547398;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-content .dx-content-drafts button[aria-selected=true]>b{color:#2364b5}
.dx-content .dx-content-workspace{padding:0 17px}
.dx-content .dx-content-editor{display:grid;grid-template-columns:1fr;min-width:0}
.dx-content .dx-content-editor label{font-size:9px;font-weight:500;color:#7186a4;margin:0 0 4px}
.dx-content .dx-content-editor input,.dx-content .dx-content-editor textarea{border:1px solid #dce5f3;border-radius:6px;background:#fff;color:#3d5570;width:100%;min-width:0;outline-offset:2px;padding:8px 10px;line-height:1.45;font-size:11px}
.dx-content .dx-content-editor input{height:33px;margin-bottom:8px}
.dx-content .dx-content-editor textarea{height:89px;min-height:89px;max-height:150px;resize:vertical}
.dx-content .dx-content-preview{height:166px;overflow:auto;background:#fff;border:1px solid #dce5f3;border-radius:6px;padding:13px 14px}
.dx-content .dx-content-preview-kicker{display:block;font-size:8px;letter-spacing:1.2px;color:#9aa8bd;margin-bottom:9px}
.dx-content .dx-content-preview h5{font-size:18px;font-weight:500;line-height:1.2;letter-spacing:-.45px;color:#294767;overflow-wrap:anywhere;margin-bottom:10px}
.dx-content .dx-content-preview p{font-size:11px;line-height:1.65;color:#718298;white-space:pre-wrap;overflow-wrap:anywhere}.dx-content .dx-content-preview p+p{margin-top:8px}
.dx-content .dx-content-bottom{padding:11px 17px 12px}
.dx-content .dx-content-actions{display:flex;align-items:center;gap:8px}
.dx-content .dx-content-actions button{min-height:31px;padding:7px 12px;border-radius:6px;background:#e7eef9;color:#587495;font-size:10px}
.dx-content .dx-content-actions button:hover{background:#dce8f9}
.dx-content .dx-content-actions .dx-content-download{background:#0066ff;color:#fff;margin-left:auto}.dx-content .dx-content-actions .dx-content-download:hover{background:#005be5}.dx-content .dx-content-download span{margin-right:5px;font-size:13px;line-height:0}
.dx-content .dx-content-status{display:flex;align-items:center;gap:6px;font-size:9px;color:#97a5b7;margin-top:8px}
.dx-content .dx-content-status>span:first-child{width:4px;height:4px;border-radius:50%;background:#90b69e}
.dx-content .dx-content-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@container(max-width:340px){.dx-portal .dx-portal-top,.dx-content .dx-content-top{padding-left:13px;padding-right:13px;gap:8px}.dx-portal .dx-portal-example,.dx-content .dx-content-example{font-size:8px}.dx-portal .dx-portal-tabs{padding-left:14px}.dx-portal .dx-portal-main{padding-left:13px;padding-right:13px}.dx-portal .dx-portal-footer{padding-left:13px;padding-right:13px;font-size:8px}.dx-portal .dx-portal-art{width:57px;margin-right:0}.dx-portal .dx-portal-checklist label{font-size:10px;gap:7px}.dx-portal .dx-portal-file-list>div{padding:11px 9px;gap:8px}.dx-portal .dx-portal-file-list small{font-size:8px}.dx-content .dx-content-plan{padding-left:13px;padding-right:13px}.dx-content .dx-content-workspace{padding:0 13px}.dx-content .dx-content-bottom{padding-left:13px;padding-right:13px}.dx-content .dx-content-drafts{gap:5px}.dx-content .dx-content-drafts button{padding:8px 6px}.dx-content .dx-content-drafts button>b{font-size:9px}.dx-content .dx-content-actions button{padding-left:10px;padding-right:10px}}
@media(prefers-reduced-motion:reduce){.dx-portal .dx-portal-details summary span{transition:none}}

/* Mobile examples keep their content readable and their actions touch-sized. */
@media(max-width:1020px){
  .dx-portal .dx-portal-tabs{min-height:44px;gap:16px}
  .dx-portal .dx-portal-tabs button{min-width:44px;min-height:44px;font-size:12px;padding:10px 3px}
  .dx-portal .dx-portal-checklist label{min-height:44px;padding-block:7px;font-size:12px;line-height:1.4}
  .dx-portal .dx-portal-checklist label>span:not(.dx-portal-step){min-width:0;overflow-wrap:anywhere}
  .dx-portal .dx-portal-checklist input{width:17px;height:17px}
  .dx-portal .dx-portal-details summary{min-height:44px;font-size:12px}
  .dx-portal .dx-portal-file-list>div>span:nth-child(2){min-width:0;flex:1;overflow-wrap:anywhere}
  .dx-portal .dx-portal-file-list button{width:44px;height:44px;min-width:44px;min-height:44px}
  .dx-portal .dx-portal-footer{line-height:1.5;min-height:38px}
  .dx-content .dx-content-drafts button{min-height:48px;padding-block:9px}
  .dx-content .dx-content-drafts button>b{font-size:11px}
  .dx-content .dx-content-editor input,.dx-content .dx-content-editor textarea{font-size:16px;line-height:1.45}
  .dx-content .dx-content-editor input{height:44px;min-height:44px}
  .dx-content .dx-content-editor textarea{height:120px;min-height:120px;max-height:240px}
  .dx-content .dx-content-actions{flex-wrap:wrap;gap:8px}
  .dx-content .dx-content-actions button{min-height:44px;font-size:12px;padding:9px 10px}
  .dx-content .dx-content-preview{height:auto;min-height:190px;max-height:320px;overflow:auto}
  .dx-content .dx-content-preview p{font-size:13px}
  .dx-content .dx-content-status{line-height:1.5}
}