.demo-intro-shell{align-items:center;display:grid}.demo-introduction{width:min(1100px,100%);color:var(--cream);grid-template-columns:1.1fr 1fr;grid-template-areas:"copy chat""controls chat";align-items:center;column-gap:clamp(28px,5vw,72px);margin:0 auto;display:grid}.demo-intro-copy{grid-area:copy;align-self:end}.demo-intro-controls{grid-area:controls;align-self:start}.demo-introduction>.demo-chat-window{grid-area:chat}.demo-intro-copy h1{text-transform:uppercase;text-wrap:balance;margin:0 0 24px;font:clamp(44px,5.5vw,76px)/1 Impact,Arial Narrow,sans-serif}.demo-intro-copy>p{max-width:46ch;margin:0 0 22px;font-size:20px;line-height:1.5}.demo-intro-copy .demo-intro-note{color:#ded2f5;font-size:16px}.demo-team-list{gap:12px;margin:26px 0 16px;display:flex}.demo-team-list p{min-width:0;color:var(--ink);border-radius:12px;flex:1;margin:0;padding:12px 16px}.demo-team-list b,.demo-team-list span{overflow-wrap:anywhere;display:block}.demo-team-list span{margin-top:4px;font-size:15px}.demo-intro-controls .demo-turn-note{color:#ded2f5;margin:0 0 24px;font-size:16px;line-height:1.5}.demo-intro-controls .primary-action{width:100%}.demo-intro-controls .demo-back{margin:14px auto 0;display:block;min-height:44px!important;color:var(--cream)!important;font-size:14px!important}.demo-chat-window{min-width:0;color:var(--ink);background:#e8f3eb;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px #0e062850}.demo-chat-window>header{color:#fff;background:#216c58;padding:20px 24px}.demo-chat-window>header b,.demo-chat-window>header span{display:block}.demo-chat-window>header b{font-size:22px}.demo-chat-window>header span{color:#d6f1e7;margin-top:6px;font-size:14px}.demo-chat-thread{flex-direction:column;gap:8px;margin:0;padding:20px;list-style:none;display:flex}.demo-chat-thread li{color:#211a33;overflow-wrap:anywhere;background:#fff;border-radius:12px;max-width:92%;padding:9px 13px;font-size:16px;line-height:1.4}.demo-chat-thread b{color:#21644f;margin-bottom:2px;font-size:13px;display:block}.demo-chat-thread .incoming{align-self:flex-start}.demo-chat-thread .outgoing{background:#d8f7c8;align-self:flex-end}.demo-chat-caption{color:#375e4f;text-align:center;margin:0;padding:4px 20px 20px;font-size:14px}.demo-finish .demo-finish-invitation{color:var(--cream);text-wrap:balance;margin:28px 0 8px;font-size:clamp(22px,3vw,30px)}.demo-finish .demo-create{width:min(380px,100%)}.demo-finish .demo-replay{margin:12px 0 0}.demo-introduction :focus-visible{outline:3px solid var(--yellow);outline-offset:5px}.demo-finish button:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}.demo-introduction h1:focus,.round-card h1:focus,.demo-finish h1:focus,.demo-play h1:focus{outline:none}@media (max-width:700px){.demo-introduction{grid-template-columns:1fr;grid-template-areas:"copy""chat""controls";gap:20px}.demo-intro-copy h1{margin-bottom:16px;font-size:44px}.demo-intro-copy>p{margin-bottom:16px;font-size:18px}.demo-team-list{margin-top:20px}.demo-chat-window>header{padding:16px}.demo-chat-thread li{max-width:96%;padding:8px 11px;font-size:15px}.demo-play .play-card>footer{flex-direction:column;align-items:stretch;gap:16px;padding:16px 12px}.demo-play .play-card>footer button{width:100%;min-height:50px}.demo-finish .finish-panel>button:not(.text-button){min-width:0}}
