.host-demo{max-width:1400px;margin:auto}.host-controls{flex-wrap:wrap;align-items:center;gap:10px;margin-block:20px;display:flex}.host-controls button,.host-controls select{color:#292721;font:inherit;background:#fff;border:1px solid #ccc7be;border-radius:8px;padding:9px 12px}.host-controls{--demo-select-border:#ccc7be}.host-controls label{align-items:center;gap:8px;display:flex}.host-controls button{cursor:pointer}.host-controls button:hover{background:#eeeae2}.host-controls button:focus-visible,.host-card button:focus-visible{outline-offset:3px;outline:2px solid #6444ac}.host-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.host-pane{border:1px solid var(--host-border,#d6d1c7);background:var(--host-surface,#fbf9f4);width:100%;min-width:0;color:var(--host-text,#292721);border-radius:16px;overflow:hidden}.host-pane h2{color:inherit;border-bottom:1px solid var(--host-border,#d6d1c7);margin:0;padding:16px 20px;font-size:18px}.host-mount{height:540px;min-height:0;display:flex}.host-context{color:#453861;overflow-wrap:anywhere;background:#ebe6f6;border-radius:8px;margin:0 0 12px;padding:10px 12px;font-size:13px}.host-card{color:#342b45;background:#f0ecf7;border:1px solid #d2ccdf;border-radius:12px;padding:16px}.host-card[data-owner=support]{color:#234b3b;background:#e7f1ed;border-color:#c7dbd2}.host-card p{color:inherit;margin-block:8px}.host-card button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:1px solid;border-radius:6px;padding:6px 10px}.host-events{margin-top:20px}.host-events summary{cursor:pointer}.host-events pre{color:#eae5f2;white-space:pre-wrap;overflow-wrap:anywhere;background:#25232b;border-radius:10px;height:180px;padding:16px;font-size:12px;overflow:auto}.host-composer-slot{flex-wrap:wrap;align-items:center;gap:4px;min-width:0;max-width:100%;display:flex}.host-composer-slot input{box-sizing:border-box;width:110px;min-width:0;max-width:100%;font:inherit;border:1px solid #c7bfd6;border-radius:8px;padding:6px}.host-composer-slot button{color:#453861;max-width:100%;font:inherit;cursor:pointer;white-space:normal;background:#eee8f7;border:1px solid #c7bfd6;border-radius:8px;padding:6px 10px}.host-composer-slot :focus-visible{outline-offset:2px;outline:2px solid #6444ac}.host-test-controls{color:#56524b;margin-block:12px}.host-test-controls summary{cursor:pointer}.host-test-controls .host-controls{margin-block:12px}#host-status{color:#615c54;max-width:90ch;min-height:1.5em;margin:0 0 12px;font-size:14px;line-height:1.5}.host-pane[data-scheme=dark]{--host-surface:#17171a;--host-text:#f4f4f5;--host-border:#35353b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.host-pane[data-scheme=dark] .host-context{color:#e0d4f3;background:#2e283d}.host-pane[data-scheme=dark] .host-card{color:#e8dff7;background:#292535;border-color:#4c425e}.host-pane[data-scheme=dark] .host-card[data-owner=support]{color:#d2e9df;background:#20322c;border-color:#3b574b}.host-pane[data-scheme=dark] .host-composer-slot input{color:#f4f4f5;background:#242429;border-color:#45434d}.host-pane[data-scheme=dark] .host-composer-slot button{color:#e8ddfa;background:#332a46;border-color:#51465f}.host-modal{width:min(900px,100vw - 48px);max-height:calc(100dvh - 48px);padding:0}.host-modal::backdrop{background:#17171a88}.host-modal>.host-controls{justify-content:space-between;margin:0;padding:8px 16px}.host-modal h2{border:0;padding:8px 0}.host-modal .host-mount{height:min(600px,100dvh - 150px)}.host-conversations{background:#f5f1e9;border:1px solid #d6d1c7;border-radius:12px;margin-block:16px;padding:12px 16px}.host-conversations .host-controls{margin-block:0 10px}.host-conversations p{color:#615c54;max-width:100ch;margin:0;font-size:14px;line-height:1.5}.host-controls select:focus-visible{outline-offset:3px;outline:2px solid #6444ac}.host-controls select:disabled{opacity:.6}.host-walkthrough{color:#615c54;margin-block:10px;font-size:14px;line-height:1.5}.host-walkthrough summary{cursor:pointer}.host-walkthrough ul{max-width:90ch;padding-left:20px}.host-walkthrough li+li{margin-top:8px}.host-playground{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:28px;display:grid}.host-settings{flex-direction:column;gap:16px;display:flex}.host-preview{min-width:0;top:calc(var(--shell-header) + 24px);position:sticky}.host-sidebar .host-controls{flex-flow:column;align-items:stretch;gap:14px;margin:0;font-size:13px}.host-sidebar .host-controls label{flex-direction:column;align-items:stretch;gap:6px;font-weight:500}.host-sidebar .host-controls .host-check{flex-direction:row;align-items:center;gap:8px;font-weight:400}.host-sidebar .host-controls select,.host-sidebar .host-controls button{text-align:left;width:100%}.host-sidebar .host-conversations{margin:0;padding:14px}.host-sidebar .host-conversations .host-controls{margin-bottom:14px}.host-sidebar .host-conversations p{font-size:13px}.host-sidebar .host-test-controls{margin:0;font-size:14px}.host-sidebar .controls-toggle{color:#292721;border-color:#ccc7be}@media (width<=1100px){.host-grid{grid-template-columns:minmax(0,1fr)}}@media (width<=960px){.host-playground{grid-template-columns:minmax(0,1fr);gap:16px}.host-preview{position:static}.host-sidebar .controls-toggle{display:flex}.controls-toggle[aria-expanded=false]+.host-settings{display:none}.host-sidebar{flex-direction:column;gap:12px;display:flex}.host-sidebar .host-controls{grid-template-columns:1fr 1fr;gap:12px;display:grid}.host-sidebar .host-controls .host-check{grid-column:1/-1}.host-sidebar .host-controls button{text-align:center}}@media (width>=761px) and (width<=960px){.host-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=480px){.host-sidebar .host-controls{grid-template-columns:minmax(0,1fr)}}