:root{font-family:Arial,Helvetica,sans-serif;color:#281b38;background:#faf7fc;color-scheme:light}*{box-sizing:border-box}body{margin:0}.demo-shell{max-width:1180px;margin:auto;padding:20px 28px}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.demo-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-size:23px;font-weight:800}.demo-brand img{width:44px;height:44px;object-fit:contain}.demo-header nav{display:flex;align-items:center;gap:18px}.demo-header a{color:inherit}.demo-install,.demo-controls button{border:1px solid #d6c5e3;background:#fff;border-radius:30px;padding:11px 18px;color:#39234f;font:inherit;font-size:14px;cursor:pointer;text-decoration:none}.demo-install{background:#51368b;color:white!important;border-color:#51368b}.demo-main{display:grid;grid-template-columns:minmax(220px,1fr) minmax(340px,480px);gap:60px;align-items:center;min-height:calc(100dvh - 95px);padding:20px 0}.demo-copy{max-width:420px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#795b91;font-weight:700}h1{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.04em;margin:18px 0}.intro{font-size:18px;line-height:1.65;color:#685875}.demo-prompts{display:grid;gap:9px;margin:26px 0}.demo-prompts button{padding:13px 16px;text-align:left;border:1px solid #e2d7ea;border-radius:14px;background:#fff;color:#39234f;font:inherit;cursor:pointer}.demo-prompts button:hover{border-color:#9561bf;background:#f5edf9}.demo-note{font-size:13px;line-height:1.65;color:#706378}.demo-stage{min-width:0}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 16px 10px}.demo-controls button{padding:8px 12px;font-size:12px}.demo-controls span{font-size:12px;color:#795b91}.demo-frame{display:block;width:100%;height:min(760px,calc(100dvh - 150px));min-height:530px;border:0;background:transparent}.demo-stage.is-expanded{position:fixed;inset:0;z-index:100;background:var(--page-bg,#faf7fc);display:flex;flex-direction:column;padding:10px}.demo-stage.is-expanded .demo-frame{flex:1;min-height:0;height:auto}.demo-stage.is-expanded .demo-controls{margin:0 16px}.demo-footer{font-size:12px;color:#706378;text-align:center;padding:12px}.demo-footer a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #9561bf;outline-offset:4px}body.dark{--page-bg:#151218;background:#151218;color:#f9f3fc;color-scheme:dark}body.dark .intro,body.dark .demo-note,body.dark .demo-footer,body.dark .demo-controls span,body.dark .eyebrow{color:#cebadb}body.dark .demo-prompts button,body.dark .demo-controls button{background:#251e2c;color:#f4e9fc;border-color:#584164}@media(max-width:760px){.demo-shell{padding:12px 8px}.demo-header{padding:0 12px}.demo-brand{font-size:20px}.demo-header nav>a:not(.demo-install){display:none}.demo-install{padding:9px 12px;font-size:12px}.demo-main{display:flex;flex-direction:column;gap:10px;padding:12px 0;min-height:0}.demo-copy{max-width:100%;padding:0 16px}.demo-copy h1{font-size:26px;margin:8px 0}.intro{font-size:14px;margin:8px 0}.eyebrow{display:none}.demo-prompts{display:flex;overflow:auto;margin:10px 0;padding-bottom:3px;gap:7px}.demo-prompts button{font-size:12px;white-space:nowrap;padding:9px 12px}.demo-note{font-size:11px;margin:5px 0}.demo-stage{width:100%;max-width:480px}.demo-frame{height:calc(100dvh - 130px);min-height:560px}.demo-controls{margin-top:8px}.demo-stage.is-expanded{max-width:none}.demo-stage.is-expanded .demo-frame{min-height:0}}