.demo-section{max-width:1320px;width:calc(100% - 64px)}.demo-topline h2{font-size:17px;font-weight:400;letter-spacing:-.3px}.demo-workspace{border:1px solid #c9d3bf;border-radius:12px;background:#fffefa;box-shadow:0 24px 64px -35px #29492b55,0 0 0 6px #eeefe6;overflow:hidden;display:flex;flex-direction:column}.workspace-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 22px;background:#294b3c;color:#f5f7ee}.workspace-heading>div{display:flex;align-items:center;gap:18px}.live-pill{font-size:9px;letter-spacing:1.1px;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:7px}.live-pill .status-dot{background:#beda91;box-shadow:0 0 0 3px #ffffff0b}.workspace-subtitle{font-size:11px;color:#c7d6bd}.workspace-heading>button{background:#ffffff0c;border:1px solid #ffffff30;color:#f4f7ed;padding:8px 12px;font-size:11px;border-radius:5px;white-space:nowrap}.workspace-heading>button:hover{background:#ffffff20}.workspace-options{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 18px;border-bottom:1px solid #e0e4d8}.workspace-options .sample-picker{gap:5px}.workspace-options .sample-picker button{font-size:12px;padding:10px 14px}.workspace-options #blank-demo{border-left:1px solid #e1e5d9;border-radius:0;margin-left:7px}.workspace-utilities{display:flex;gap:13px}.workspace-utilities button{background:none;padding:7px 0;font-size:11px;color:#65715b;white-space:nowrap}.workspace-utilities button:hover{text-decoration:underline;text-underline-offset:4px}.workspace-hint{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 22px;background:#f2f5eb}.workspace-hint p{font-size:11px;color:#758368}.workspace-hint strong{font-weight:600;color:#4f6444;margin-right:5px}.workspace-hint button{border:1px solid #b9cba8;border-radius:5px;background:#fffefb;white-space:nowrap;padding:9px 13px;font-size:11px}.workspace-hint button:hover{background:#e8efdc}#editor-frame{display:block;width:100%;height:650px;border:0;background:#fafbf7;flex-shrink:0}.workspace-bottom{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 22px;border-top:1px solid #e2e7d9;font-size:10px;color:#72816a}.workspace-bottom i{font-style:normal;margin:0 9px;color:#a1ae96}.session-note{display:flex;align-items:center;gap:6px}.session-note:before{content:'';width:5px;height:5px;border-radius:50%;background:#829a6e}.demo-expanded{overflow:hidden}.demo-workspace.is-expanded{position:fixed;inset:12px;z-index:100;width:auto;max-width:none;border-radius:10px;box-shadow:0 0 0 25px #faf9f5;isolation:isolate}.is-expanded #editor-frame{flex:1;min-height:0;height:0}.is-expanded .workspace-hint{padding-block:9px}.demo-workspace button:focus-visible{outline:3px solid #b08753;outline-offset:2px}.demo-section .demo-caption{font-size:11px}.demo-section .demo-caption p{max-width:680px}.workspace-heading button:focus-visible{outline-color:#f2d6a4}
@media(max-width:1000px){.workspace-options .sample-picker button{font-size:11px;padding:9px 10px}.workspace-subtitle{display:none}.workspace-hint p{max-width:510px}.workspace-bottom>span:nth-child(2){display:none}}
@media(max-width:760px){.demo-section{width:calc(100% - 28px)}.workspace-heading{padding:12px 14px}.workspace-heading>button{padding:8px 10px;font-size:10px}.workspace-options{align-items:flex-start;flex-direction:column;gap:10px;padding:12px 10px}.workspace-options .sample-picker{width:100%;flex-wrap:wrap;gap:4px}.workspace-options .sample-picker button{font-size:10px;padding:9px}.workspace-options #blank-demo{margin-left:0;border-left:0}.workspace-utilities{width:100%;justify-content:space-between;padding:0 4px}.workspace-utilities button{padding:2px;font-size:10px}.workspace-hint{padding:12px;gap:10px;align-items:flex-start}.workspace-hint p{font-size:10px;line-height:1.6}.workspace-hint strong{display:block}.workspace-hint button{font-size:10px;padding:9px}#editor-frame{height:590px}.workspace-bottom{padding:10px 12px;font-size:9px;gap:10px}.demo-workspace.is-expanded{inset:0;border-radius:0;border:0}.is-expanded .workspace-options{padding-block:7px;gap:5px}.is-expanded .workspace-hint p{display:none}.is-expanded .workspace-hint{justify-content:flex-end;padding:6px 12px}.is-expanded .workspace-hint button{padding:6px 9px}.is-expanded .workspace-bottom{padding-block:7px}.demo-topline h2{font-size:15px}}