body{font-family:sans-serif;padding:2rem}.btn{border:none;border-radius:.25rem;cursor:pointer;display:inline-block;margin:.5rem;padding:.5rem 1rem}.btn-primary{background-color:#007bff;color:#fff}.btn-secondary{background-color:#6c757d;color:#fff}.demo-block{padding:10px}.demo-block h3{font-size:1.1rem;margin-top:0}.demo-block small{color:#777}@media (max-width:600px){.demo-block{margin:10px 0;padding:8px}.demo-block h3{font-size:1rem}.demo-block textarea{font-size:.9rem;padding:5px}.demo-block button{padding:8px}.btn,.demo-block button{font-size:1rem;margin:5px 0;width:100%}.btn{padding:10px}}.demo-block{background-color:#fafafa;border:1px solid #ddd;border-radius:4px;font-size:.9rem;margin:15px 0;padding:15px}.demo-header{align-items:center;display:flex;justify-content:space-between}.demo-header h3{font-size:1.1rem;margin:0}.close-btn{background:none;border:none;color:#888;cursor:pointer;font-size:1.2rem}.close-btn:hover{color:#000}.demo-block textarea{border:1px solid #ccc;border-radius:3px;box-sizing:border-box;font-family:inherit;max-width:100%;padding:6px;resize:vertical;width:100%}.position-controls{margin:10px 0}.position-controls label{cursor:pointer;margin-right:15px}.demo-block button{font-size:.9rem;margin-right:5px;padding:4px 10px}.demo-icon{left:20px;position:fixed;top:20px;z-index:1000}.demo-icon button{background:#28a745;border:none;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);color:#fff;cursor:pointer;font-size:1.5rem;height:50px;width:50px}.demo-icon button:hover{background:#218838}.text-container{background-color:#f0f0f0;border-radius:4px;margin:10px 0;padding:10px;white-space:pre-wrap;word-wrap:break-word}@media (max-width:600px){.demo-block{padding:8px}.position-controls label{display:block;margin:5px 0}.demo-block button{margin:5px 0;width:100%}}.popover{background-color:#fff;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.175);font-family:sans-serif;font-size:.875rem;max-width:276px;position:absolute;z-index:1000}.popover:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.2);bottom:-8px}.popover:after,.popover:before{content:"";left:50%;position:absolute;transform:translateX(-50%)}.popover:after{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #fff;bottom:-7px}.popover.bottom:before{border-bottom:8px solid rgba(0,0,0,.2);border-top:none;bottom:auto;top:-8px}.popover.bottom:after{border-bottom:7px solid #fff;border-top:none;bottom:auto;top:-7px}.popover-title{background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px);font-size:1rem;font-weight:600;margin-bottom:0;padding:.5rem 1rem}.popover-content{padding:.5rem 1rem;white-space:normal;word-wrap:break-word}