.shinrai-recorded-demo { border:1px solid #dce2ee; border-radius:18px; padding:clamp(18px,3vw,32px); background:#fff; color:#15213a; }
.shinrai-recorded-demo .sr-demo-badge { display:inline-block; font-size:.8rem; color:#344da2; background:#edf1fd; border-radius:20px; padding:5px 12px; margin:0 0 18px; }
.shinrai-recorded-demo label { display:block; font-weight:600; }
.shinrai-recorded-demo select { display:block; width:100%; max-width:420px; padding:10px; margin:8px 0 20px; font:inherit; border:1px solid #bcc6d7; border-radius:8px; background:white; color:#15213a; }
.shinrai-recorded-demo .sr-demo-panes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.shinrai-recorded-demo article { min-width:0; }
.shinrai-recorded-demo h3 { font-size:1rem; }
.shinrai-recorded-demo pre { margin:0; min-height:260px; max-height:480px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.9rem; line-height:1.65; padding:20px; border-radius:12px; background:#f4f6fa; color:#23314a; }
.shinrai-recorded-demo article:last-child pre { background:#edf7f3; color:#183e35; }
.shinrai-recorded-demo .sr-demo-controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.shinrai-recorded-demo button { appearance:none; border:1px solid #bcc6d7; border-radius:8px; background:white; color:#23314a; font:inherit; padding:9px 15px; cursor:pointer; min-height:44px; }
.shinrai-recorded-demo :is(button,select):focus-visible { outline:3px solid #2958db; outline-offset:3px; }
.shinrai-recorded-demo .sr-demo-status { min-height:1.7em; margin:10px 0; }
.shinrai-recorded-demo :is(.sr-demo-model,.sr-demo-note) { font-size:.8rem; color:#52617a; }
@media(max-width:650px) { .shinrai-recorded-demo .sr-demo-panes { grid-template-columns:1fr; } .shinrai-recorded-demo pre { min-height:120px; } }
@media(prefers-reduced-motion:reduce) { .shinrai-recorded-demo * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }