/* Real UI affordances inside explicitly labelled educational samples. */
.sd-demo{width:100%;max-width:820px!important;margin:28px auto;overflow:hidden;border:1px solid #d9dde6;border-radius:14px;background:#f4f6f9;color:#283247;box-shadow:0 16px 40px #1921370d;text-align:left;isolation:isolate;font:14px/1.5 Arial,sans-serif;--demo-accent:#3c557b}
.sd-demo *{box-sizing:border-box;min-width:0}
.sd-demo [hidden]{display:none!important}
.sd-demo h3{font:600 21px/1.3 Arial,sans-serif!important;color:#253047!important;letter-spacing:-.02em!important;margin:0 0 14px!important;max-width:none!important}
.sd-demo h4{font:600 15px/1.4 Arial,sans-serif!important;margin:8px 0!important;color:#253047!important}
.sd-demo p{font:14px/1.5 Arial,sans-serif!important;color:#657086!important;margin:10px 0 16px!important;max-width:none!important}
.sd-demo strong{font-weight:600}.sd-demo small{font:11px/1.4 Arial,sans-serif;display:block;color:#7d8799}.sd-demo span{letter-spacing:normal}
.sd-toolbar{display:flex;align-items:center;gap:12px;padding:14px 20px;background:#e9edf3;border-bottom:1px solid #d9dde6;font:12px/1.4 Arial,sans-serif;color:#657086}
.sd-dots{display:flex;gap:5px;flex:none}.sd-dots i{width:6px;height:6px;border-radius:50%;background:#b2bbca}
.sd-sample{margin-left:auto;font-size:10px;line-height:1.4;color:#536279;border:1px solid #c7cfdb;border-radius:4px;padding:3px 6px;white-space:nowrap}
.sd-body{padding:24px;min-height:340px}
.sd-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.sd-pane{border:1px solid #dce1ea;border-radius:10px;padding:18px;background:#fff}
.sd-pane-title{font:600 11px/1.4 Arial,sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#7c879b;margin-bottom:20px}
.sd-demo label{display:block;font:12px/1.4 Arial,sans-serif;color:#68758a;margin-bottom:14px}
.sd-demo input:not([type=checkbox]),.sd-demo textarea,.sd-demo select{display:block;width:100%;max-width:100%;border:1px solid #d9dfeb;border-radius:6px;background:#fff;padding:10px 12px;color:#303b4f;font:13px/1.5 Arial,sans-serif;min-height:42px;box-shadow:none;outline-offset:3px;margin:6px 0 0;appearance:auto}
.sd-demo textarea{resize:vertical;min-height:90px}.sd-demo input:focus-visible,.sd-demo textarea:focus-visible,.sd-demo select:focus-visible{outline:2px solid #6c86b4}
.sd-demo button{cursor:pointer;font:500 13px/1.4 Arial,sans-serif;transform:none!important;letter-spacing:normal}
.sd-demo .sd-button,.sd-demo .sd-reset{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 14px;border:0;border-radius:6px;background:#354c70;color:#fff;transition:background .18s ease;text-align:center}
.sd-demo .sd-button:hover{background:#45618e}.sd-demo button:focus-visible{outline:2px solid #6c86b4;outline-offset:3px}
.sd-demo button:disabled{opacity:.55;cursor:default}
.sd-demo .ui-arrow,.sd-demo .ui-action-icon{display:inline-flex;width:17px;height:17px;flex:none;align-items:center;justify-content:center}.sd-demo svg{width:100%;height:100%;color:inherit}
.sd-footer{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 20px;border-top:1px solid #dce1ea;font:11px/1.5 Arial,sans-serif;color:#7b8595;background:#f8f9fb}.sd-footer>span{max-width:540px}.sd-demo .sd-reset{background:transparent;color:#617086;padding:4px 8px;flex:none;font-size:11px}
.sd-sitebar{font:11px/1.4 Arial,sans-serif;color:#8390a4;border-bottom:1px solid #e3e7ee;padding:0 0 12px;margin-bottom:18px}
.sd-ad{padding:16px;background:#f6f8fb;border-radius:8px;border:1px solid #e1e6ee}.sd-ad .sd-button{margin-top:16px}
.sd-muted,.sd-url{display:block;font:11px/1.4 Arial,sans-serif;color:#8994a6}.sd-url{color:#6380ae;margin:10px 0}
.sd-crm{background:#eef1f6}.sd-kanban-head{display:flex;justify-content:space-between;align-items:center;color:#66758d;font:600 12px/1.4 Arial,sans-serif;margin-bottom:18px}.sd-kanban-head b{background:#e0e6f0;border-radius:4px;font-weight:500;padding:2px 6px}
.sd-empty{display:flex;align-items:center;justify-content:center;min-height:180px;border:1px dashed #ccd5e3;border-radius:8px;padding:18px;text-align:center;color:#9ba6b7;font:12px/1.5 Arial,sans-serif}
.sd-lead-card,.sd-task{border:1px solid #d6deeb;border-radius:8px;padding:16px;background:#fff;box-shadow:0 4px 12px #2d40570a}.sd-ticket{display:block;font:10px/1.4 Arial,sans-serif;color:#8996aa}.sd-lead-card>span:not(.sd-ticket){font-size:12px;color:#718099}.sd-source{display:flex;flex-direction:column;gap:5px;border-top:1px solid #e4e8ef;padding-top:12px;font:12px/1.4 Arial,sans-serif}.sd-source>span{color:#8a96aa}
.sd-appnav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.sd-appnav>span{font-size:11px;color:#8b96a8}.sd-appnav select{width:auto;max-width:170px;margin:0}
.sd-board{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sd-column{border-radius:10px;background:#e9edf4;padding:16px;min-height:280px}.sd-task .sd-button{width:100%;margin-top:16px}.sd-assignee,.sd-person,.sd-handoff,.sd-chat-head{display:flex;align-items:center;gap:10px}.sd-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#dfe6f2;color:#536a91;border-radius:50%;font:600 12px/1 Arial,sans-serif;flex:none}.sd-person{margin-bottom:18px}.sd-person strong{font-size:13px}
.sd-chat-head{border-bottom:1px solid #e0e5ef;padding-bottom:16px}.sd-messages{display:flex;flex-direction:column;gap:12px;padding:22px 0}.sd-bubble{max-width:80%;background:#fff;border:1px solid #dce3ee;border-radius:12px 12px 12px 3px;padding:12px 16px;font:14px/1.5 Arial,sans-serif}.sd-user{align-self:flex-end;background:#e1e8f4;border-color:#d5dfef;border-radius:12px 12px 3px 12px}.sd-chat-added{display:flex;flex-direction:column;gap:12px}.sd-handoff{margin-top:4px;border-top:1px solid #dce3ee;padding-top:14px}.sd-handoff strong{font-size:12px}.sd-compose{display:flex;gap:10px;border-top:1px solid #e0e5ef;padding-top:16px}.sd-compose input{flex:1;margin:0!important}.sd-compose .sd-button{flex:none}
.sd-document{position:relative;background:#fdfdfd;border:1px solid #e1e4e9;padding:22px;min-height:270px;box-shadow:0 6px 16px #18263e08}.sd-filetype{display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid #d6dfed;border-radius:4px;padding:4px 6px;font:10px/1.4 Arial,sans-serif;color:#7488a7}.sd-document h3{font-size:19px!important;margin-top:22px!important}.sd-doc-line{height:5px;background:#e8ebf1;margin:16px 0;border-radius:2px}.sd-short{width:70%}.sd-stamp{display:flex;align-items:center;gap:8px;margin-top:24px;border:2px solid #5b7199;color:#5b7199;padding:8px;justify-content:center;font:600 13px/1.4 Arial,sans-serif;transform:rotate(-4deg)}
.sd-history{margin-top:22px;padding-top:18px;border-top:1px solid #e2e7ef}.sd-history>strong{font-size:12px}.sd-history p{font-size:12px!important}.sd-history .sd-person{margin:0}
.sd-file-list,.sd-output{border:1px solid #dde3ed;border-radius:8px;background:#fff;overflow:hidden}.sd-file-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #e8ecf2;font-size:13px}.sd-file-row:last-child{border-bottom:0}.sd-file-row input{width:17px;height:17px;accent-color:#526b93;margin:0}.sd-toolrow{display:flex;align-items:flex-end;gap:16px;margin:20px 0}.sd-toolrow label{margin:0;flex:1}.sd-output .sd-pane-title{padding:16px;margin:0;border-bottom:1px solid #e8ecf2}
.sd-post{border:1px solid #e2e6ee;border-radius:10px;overflow:hidden}.sd-post>.sd-person{padding:12px;margin:0}.sd-post>p{padding:0 14px;font-size:13px!important}.sd-media{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:1.4;padding:18px;background:#4d6489;color:#fff;overflow:hidden}.sd-media>span{font:600 10px/1 Arial,sans-serif;letter-spacing:.1em}.sd-media>strong{position:relative;font:500 22px/1.2 Arial,sans-serif;max-width:160px}.sd-orbit{position:absolute;width:130px;height:130px;border:26px solid #ffffff26;border-radius:50%;right:-26px;top:-18px}.sd-video-progress{position:absolute;left:18px;right:18px;bottom:12px;height:3px;background:#ffffff35}.sd-video-progress i{display:block;width:0;height:100%;background:#fff}.sd-video>strong{margin-bottom:18px}.sd-demo[data-playing=true] .sd-video-progress i{animation:sd-play 5s linear infinite}.sd-demo[data-playing=true] .sd-video .sd-orbit{animation:sd-drift 5s ease-in-out infinite alternate}@keyframes sd-play{to{width:100%}}@keyframes sd-drift{to{transform:translate(-65px,55px)}}
.sd-calendar{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid #d6dfec;border-radius:8px;background:#edf2fa;margin-top:16px;font:12px/1.5 Arial,sans-serif}.sd-calendar span{color:#6e7d96}
.sd-web-preview{padding:18px;border:1px solid #e0e5ed;background:#f5f7fb;border-radius:8px;min-height:200px}.sd-web-preview>span{display:block;color:#73849e;font-size:10px;margin-bottom:24px}.sd-mock-button{display:inline-block;background:#506a92;color:#fff;padding:9px 12px;border-radius:5px;font-size:12px}
.sd-brand-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.sd-swatches{display:flex;gap:8px}.sd-demo .sd-swatches button{width:44px;height:44px;background:var(--swatch);border:4px solid #f4f6f9;border-radius:50%;box-shadow:0 0 0 1px #dbe0e9}.sd-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px #62728b}.sd-brand-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;--demo-accent:#3c557b}.sd-brand-site{background:#fff;padding:22px;border-radius:10px;border:1px solid #dbe2ed}.sd-brand-site>div:first-child{font-size:11px;color:var(--demo-accent);font-weight:600;display:flex;justify-content:space-between;margin-bottom:35px}.sd-brand-site h3{font-size:25px!important;color:var(--demo-accent)!important}.sd-brand-pill{display:inline-block;background:var(--demo-accent);padding:8px 14px;border-radius:5px;color:#fff;font-size:12px;margin-top:14px}.sd-brand-post{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:22px;background:var(--demo-accent);border-radius:10px;color:#fff}.sd-brand-post>span{font-size:10px;position:relative}.sd-brand-post>strong{font:500 24px/1.2 Arial,sans-serif;position:relative}.sd-brand-caption{font-size:12px;color:#7a8699;margin-top:18px}
.sd-table{background:#fff;border:1px solid #dbe2ec;border-radius:8px;overflow:hidden}.sd-table-head,.sd-demo .sd-data-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;align-items:center;padding:14px 16px;width:100%;text-align:left;font:12px/1.4 Arial,sans-serif}.sd-table-head{color:#8692a5;background:#eef2f7}.sd-demo .sd-data-row{background:#fff;color:#34425a;border:0;border-top:1px solid #e3e8f0;min-height:54px;border-radius:0}.sd-data-row:hover,.sd-data-row[aria-pressed=true]{background:#edf2fa!important}.sd-tag{font-size:10px;display:inline-block;border-radius:4px;background:#edf1f7;padding:4px 6px;justify-self:start;white-space:nowrap}.sd-detail{border:1px solid #d6dfed;border-radius:8px;padding:18px;margin-top:18px;background:#fff}.sd-path{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:12px;flex-wrap:wrap}.sd-hint{margin-top:14px}
.sd-searchbar{display:flex;gap:10px}.sd-searchbar input{margin:0!important;flex:1}.sd-searchbar button{flex:none}.sd-search-results{padding-top:22px}.sd-demo .sd-search-hit{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%;padding:18px;text-align:left;border:1px solid #dbe3ef;border-radius:8px;background:#fff;color:#77849a;min-height:120px}.sd-search-hit strong{font:600 18px/1.4 Arial,sans-serif;color:#4c6d9f}.sd-search-hit .sd-url{margin:0}.sd-article{padding:22px;border:1px solid #dce3ef;border-radius:8px;background:#fff;margin-top:18px}.sd-article ol{padding-left:20px;margin:18px 0 24px;font:14px/1.6 Arial,sans-serif;color:#65748c}.sd-article li{margin:8px 0}.sd-ai-answer{padding:18px;border-left:3px solid #8198bc;background:#edf2fa;border-radius:0 8px 8px 0;margin-bottom:16px}.sd-ai-answer>strong{font-size:12px}.sd-ai-answer p{margin-bottom:0!important}
.sd-ab-tabs{display:flex;gap:8px;margin-bottom:20px}.sd-demo .sd-ab-tabs button{background:#e8edf5;color:#6e7e96;border:0;padding:10px 16px;min-height:44px;border-radius:6px}.sd-ab-tabs button[aria-pressed=true]{background:#354c70!important;color:#fff!important}.sd-ab-page{padding:24px;background:#fff;border:1px solid #dce3ef;border-radius:10px}.sd-ab-page input{max-width:310px!important;margin-bottom:16px!important}.sd-local-stats{display:flex;align-items:center;gap:20px;margin-top:18px;font-size:12px;color:#7c8aa0}.sd-local-stats>span{margin-right:auto}.sd-local-stats b{font-size:16px;color:#344b70}
@media(max-width:760px){.sd-demo{margin:24px 0;max-width:100%!important}.sd-toolbar{padding:12px 14px;gap:8px;font-size:11px}.sd-sample{font-size:9px;max-width:100px;white-space:normal;text-align:center}.sd-body{padding:16px;min-height:0}.sd-split{gap:14px}.sd-pane{padding:14px}.sd-pane-title{margin-bottom:16px}.sd-demo h3{font-size:19px!important}.sd-demo .sd-button{gap:8px;padding:10px 12px;font-size:12px;max-width:100%}.sd-footer{padding:12px 14px;gap:8px}.sd-footer>span{font-size:10px}.sd-empty{min-height:140px}}
@media(max-width:540px){.sd-split{grid-template-columns:1fr}.sd-board{gap:10px}.sd-column{padding:10px;min-height:230px}.sd-task{padding:12px}.sd-task .sd-button{font-size:11px;padding:10px 8px}.sd-assignee{gap:6px;font-size:11px}.sd-demo h4{font-size:13px!important}.sd-task p{font-size:11px!important}.sd-board .sd-empty{font-size:11px;padding:10px}.sd-bubble{max-width:92%;font-size:13px;padding:10px 12px}.sd-compose{flex-wrap:wrap}.sd-compose input{min-width:140px}.sd-searchbar{flex-direction:column}.sd-searchbar .sd-button{align-self:flex-start}.sd-toolrow{align-items:stretch;flex-direction:column}.sd-toolrow button{align-self:flex-start}.sd-brand-grid{grid-template-columns:1fr}.sd-brand-site{padding:20px}.sd-brand-site>div:first-child{margin-bottom:24px}.sd-brand-post{min-height:190px}.sd-brand-tools>strong{font-size:12px}.sd-table-head,.sd-demo .sd-data-row{gap:6px;padding:12px 9px;font-size:11px;grid-template-columns:1.2fr .9fr 1fr}.sd-tag{font-size:9px;padding:3px 4px}.sd-local-stats{gap:12px;font-size:11px}.sd-footer{align-items:flex-start}.sd-reset{font-size:10px!important}.sd-document{min-height:230px}.sd-pane.sd-crm .sd-empty{min-height:100px}}
@media(prefers-reduced-motion:reduce){.sd-demo button{transition:none}.sd-demo[data-playing=true] .sd-video-progress i,.sd-demo[data-playing=true] .sd-video .sd-orbit{animation:none}}
.sd-query{border:1px solid #dbe2ed;border-radius:22px;padding:10px 14px;margin-bottom:16px;background:#fff;color:#637490;font-size:12px}.sd-search-ad{background:#fff;border:0;padding:4px}.sd-search-ad h3{color:#4c6d9f!important;font-size:18px!important;margin-top:12px!important}.sd-feed-ad{padding:0;background:#fff;overflow:hidden}.sd-feed-ad>.sd-person{padding:12px;margin:0}.sd-feed-ad>.sd-muted,.sd-feed-ad>h3,.sd-feed-ad>p,.sd-feed-ad>.sd-url{margin-left:14px!important;margin-right:14px!important}.sd-feed-ad>.sd-button{margin:12px 14px 14px}.sd-feed-ad>.sd-inline-form{padding:14px 14px 0}.sd-feed-ad>.sd-muted{margin-top:12px}.sd-feed-ad .sd-media{aspect-ratio:1.8}.sd-feed-ad .sd-media>strong{font-size:20px}.sd-banner-ad{background:#354c70;color:#fff}.sd-banner-ad h3{color:#fff!important;font-size:24px!important;margin-top:20px!important}.sd-banner-ad p,.sd-banner-ad .sd-muted,.sd-banner-ad .sd-url{color:#c0cede!important}.sd-banner-ad .sd-button{background:#fff;color:#354c70}.sd-banner-ad label{color:#c0cede}.sd-author-ad h3{font-size:18px!important}
.sd-demo{scroll-margin-top:150px}
/* The retained illustration frame follows the embedded application's width. */
.ca-art .visual-stage:has(>.visual-window>.sd-demo){box-sizing:border-box;max-width:884px;margin-inline:auto}
.ca-art .visual-window:has(>.sd-demo){background:transparent;border:0;box-shadow:none}
.ca-art .visual-window>.sd-demo{margin:0 auto!important}
/* Content determines the screen height; pending results do not reserve a blank page. */
.sd-demo .sd-body{min-height:0}
.sd-demo .sd-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.sd-demo .sd-footer>span{line-height:1.5;text-align:left}
.sd-demo .sd-reset{min-height:36px}
.sd-board .sd-column{min-height:0}
.sd-board .sd-empty{min-height:100px}
@media(max-width:640px){
 .sd-demo .sd-split,.sd-demo .sd-board,.sd-demo .sd-brand-grid{grid-template-columns:minmax(0,1fr)}
 .sd-demo .sd-board{gap:12px}
 .sd-demo .sd-column{padding:14px}
 .sd-demo .sd-task{padding:16px}
 .sd-demo .sd-task .sd-button{font-size:12px;padding:10px 14px;width:auto}
 .sd-demo .sd-task p{font-size:12px!important}
 .sd-demo .sd-board .sd-empty{min-height:80px}
}