.demo-modal { position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:clamp(12px,2.5vw,32px); background:rgba(0,0,0,.8); }
.demo-modal.is-open { display:grid; }
.demo-modal-panel { display:flex; flex-direction:column; width:min(1280px,100%); max-height:100%; min-height:0; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-panel); background:var(--bg); box-shadow:0 32px 100px #000b; }
.demo-modal-head { display:flex; align-items:center; justify-content:space-between; gap:24px; flex:none; min-height:76px; padding:16px 24px; border-bottom:1px solid var(--line); background:var(--bg); }
.demo-modal-head h2 { margin:0; font-size:20px; line-height:1.3; font-weight:500; letter-spacing:-.025em; }
.demo-modal-close { display:grid; flex:none; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--panel); color:var(--ink); cursor:pointer; }
.demo-modal-close:hover { background:var(--panel-strong); }
.demo-modal-close svg { width:20px; height:20px; }
.demo-modal-close:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.demo-modal-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 24px 24px; }
.demo-modal-note { margin:0 0 16px; color:var(--dim); font-size:12px; line-height:1.8; }
#ts-demo { display:block; width:100%; height:0; border:0; border-radius:var(--radius-panel); background:#edf1f6; box-shadow:var(--soft-shadow); }
.demo-mobile-message { display:none; }
body.demo-modal-open { overflow:hidden; }
@media(max-width:600px) {
  .demo-modal-head { min-height:68px; padding:12px 16px; }
  .demo-modal-head h2 { font-size:18px; }
  .demo-modal-content { padding:16px; }
  #ts-demo { display:none; }
  .demo-mobile-message { display:block; margin:0; padding:28px 20px; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--panel); color:var(--ink-soft); font-size:14px; line-height:1.7; }
}