@import url('fonts.css');
html{scrollbar-width:thin;scrollbar-color:#b53030 #151010;overscroll-behavior:contain}
body{overscroll-behavior:contain}
#demoDialog{margin:auto;width:min(92%,520px);max-height:88dvh;overflow:auto;border:1px solid #9f3131;border-radius:20px;padding:30px;background:#191717;color:#fff;box-shadow:0 30px 100px #0009;font-family:'Rajdhani',sans-serif}
#demoDialog::backdrop{background:#000b;backdrop-filter:blur(6px)}
.demo-close{position:absolute;right:12px;top:9px;width:36px;height:36px;border:1px solid #ffffff25;border-radius:50%;color:white;background:#292121;font-size:24px;cursor:pointer}
.demo-label{font-size:11px;letter-spacing:.1em;color:#e49b9b;margin:4px 25px 14px 0}
#demoTitle{font-size:30px;line-height:1.1;margin-bottom:20px}
#demoContent p{font-size:18px;color:#d8c9c9;line-height:1.5;margin-bottom:18px}
#demoContent .demo-fine{font-size:15px;color:#c7b2b2;margin:18px 0}
.demo-summary{padding:15px;background:#251e1e;border:1px solid #69403d;border-radius:12px;margin:18px 0}
.demo-summary>div{display:flex;gap:20px;justify-content:space-between;padding:8px 0}
.demo-summary dt{color:#cfb6b6}.demo-summary dd{font-weight:700;text-align:right}
.demo-select{display:grid;gap:8px;margin:20px 0}
.demo-select select{padding:12px;background:#2a2525;color:white;border:1px solid #74514c;border-radius:8px;font:inherit}
#demoContent h3{font-size:24px;margin:20px 0}
.demo-check{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#17381e;color:#35dc79;font-size:36px}
#demoDialog button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:450px){#demoDialog{padding:25px 20px}#demoTitle{font-size:27px}.demo-summary>div{gap:12px}#demoDialog .btn{font-size:12px;padding:14px 10px}}