:root{--primary-color:#007bff;--secondary-color:#2a9d8f;--background-color:#f8f9fa;--container-bg:#ffffff;--text-color:#343a40;--border-color:#dee2e6;--shadow-color:rgba(0, 0, 0, 0.1);--code-bg:#212529;--code-color:#e9ecef}.bsg-wrap,.bsg-wrap *{box-sizing:border-box}.bsg-wrap [hidden]{display:none!important}.bsg-wrap .page-header-preview{text-align:center;padding:50px 20px;margin-bottom:30px}.bsg-wrap .page-header-preview h1,.bsg-wrap .page-header-preview p{color:#fff;max-width:950px;margin-left:auto;margin-right:auto}.bsg-wrap .page-header-preview h1{margin-bottom:15px}.bsg-wrap .page-title{text-align:center;margin-bottom:2rem;color:var(--text-color)}.bsg-wrap .page-header-preview .page-title{margin-bottom:15px;color:#fff}.bsg-wrap .page-container{width:100%;max-width:1100px;margin:0 auto;padding:50px 15px 70px}.bsg-wrap .generator-container{display:flex;flex-wrap:wrap;background:#1b1f23;overflow:hidden;margin-bottom:3rem}.bsg-wrap .sidebar{flex:1;min-width:320px;padding:2rem;border-right:1px solid var(--border-color);color:#e9ecef}.bsg-wrap .sidebar-header{background-color:#1b1f23;color:#fff;padding:1rem 2rem;margin:-2rem -2rem 2rem -2rem;border-radius:12px 0 0 0}.bsg-wrap .sidebar-header h4{margin:0;color:#fff}.bsg-wrap .control-group{margin-bottom:1.5rem}.bsg-wrap .control-group label{display:block;font-weight:500;margin-bottom:.5rem;color:#e9ecef}.bsg-wrap .control-row{display:flex;align-items:center;justify-content:space-between}.bsg-wrap .control-row label{margin-bottom:0}.bsg-wrap .control-row .value-display{font-weight:500;color:#df7b16;background:#000;padding:5px 15px;border-radius:6px;font-size:12px}.bsg-wrap input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:#e9ecef;border-radius:5px;outline:none;opacity:.9;transition:opacity .2s;margin-top:.5rem;padding:0;border:0}.bsg-wrap input[type="range"]:focus-visible{outline:2px solid #df7b16;outline-offset:4px}.bsg-wrap input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--primary-color);cursor:pointer;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 5px rgb(0 0 0 / .2)}.bsg-wrap input[type="range"]::-moz-range-thumb{width:20px;height:20px;background:var(--primary-color);cursor:pointer;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 5px rgb(0 0 0 / .2)}.bsg-wrap .color-control{display:flex;align-items:center;gap:10px}.bsg-wrap .color-control input[type="color"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:44px;background-color:#fff0;border:none;padding:0;border-radius:8px;cursor:pointer}.bsg-wrap .color-control input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.bsg-wrap .color-control input[type="color"]::-webkit-color-swatch{border:1px solid var(--border-color);border-radius:8px}.bsg-wrap .color-control input[type="color"]::-moz-color-swatch{border:1px solid var(--border-color);border-radius:8px}.bsg-wrap .rgb-display{background:#000;color:#e9ecef;padding:3px 15px;border-radius:6px;border:0;font-size:12px}.bsg-wrap .toggle-switch{position:relative;display:inline-block;width:60px;height:34px;margin:0}.bsg-wrap .toggle-switch input{opacity:0;width:0;height:0}.bsg-wrap .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}.bsg-wrap .toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}.bsg-wrap .toggle-switch input:checked+.toggle-slider{background-color:var(--secondary-color)}.bsg-wrap .toggle-switch input:checked+.toggle-slider:before{transform:translateX(26px)}.bsg-wrap .toggle-switch input:focus-visible+.toggle-slider{outline:2px solid #df7b16;outline-offset:2px}.bsg-wrap .main-content{flex:2;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff}.bsg-wrap .preview-box{width:250px;height:250px;max-width:100%;background-color:var(--primary-color);border-radius:12px;margin-bottom:4rem;transition:box-shadow 0.2s ease-in-out}.bsg-wrap .code-output{width:100%;position:relative;margin-top:20px;background-color:#1b1f23;padding:10px;border:0}.bsg-wrap .code-output pre{margin:0;padding:28px 8px 8px;background:#fff0;color:var(--code-color);white-space:pre-wrap;word-break:break-word;border:0}.bsg-wrap .code-output code{background:#fff0;color:var(--code-color);font-size:13px}.bsg-wrap .copy-button{position:absolute;top:0;right:1rem;background-color:#000;color:#df7b16;border:none;padding:8px 15px;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color 0.3s ease;font-size:15px}.bsg-wrap .copy-button:hover{background-color:#0056b3}.bsg-wrap .copy-button:active{transform:scale(.98)}.bsg-wrap .bsx-toolbar{margin-bottom:26px}.bsg-wrap .bsx-search-label{display:block;font-weight:600;margin-bottom:7px}.bsg-wrap .bsx-search{display:block;width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--border-color);border-radius:8px;background:#fff;color:var(--text-color);font:inherit;box-shadow:none}.bsg-wrap .bsx-search:focus{outline:2px solid #df7b16;outline-offset:2px}.bsg-wrap .bsx-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}.bsg-wrap .bsx-filter{border:1px solid var(--border-color);border-radius:999px;background:#fff;color:var(--text-color);padding:7px 14px;font:inherit;font-size:.88rem;cursor:pointer;line-height:1.3}.bsg-wrap .bsx-filter:hover{border-color:#1b1f23}.bsg-wrap .bsx-filter.is-active{background:#1b1f23;border-color:#1b1f23;color:#df7b16}.bsg-wrap .bsx-filter:focus-visible,.bsg-wrap .bsx-copy:focus-visible,.bsg-wrap .bsx-open:focus-visible{outline:2px solid #df7b16;outline-offset:2px}.bsg-wrap .bsx-count{margin:0;color:#6c757d;font-size:.88rem}.bsg-wrap .bsx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.bsg-wrap .bsx-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border-color);border-radius:12px;overflow:hidden;background:#fff}.bsg-wrap .bsx-card[hidden]{display:none!important}.bsg-wrap .bsx-stage{display:flex;align-items:center;justify-content:center;height:190px;padding:24px}.bsg-wrap .bsx-box{width:110px;height:110px}.bsg-wrap .bsx-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px;background:#1b1f23;color:#e9ecef}.bsg-wrap .bsx-body h3{margin:0 0 10px;font-size:1rem;line-height:1.3;color:#fff}.bsg-wrap .bsx-body pre{flex:1;margin:0 0 12px;padding:10px 12px;overflow:visible;background:#000;border-radius:8px;color:var(--code-color);white-space:pre-wrap;word-break:break-word;border:0}.bsg-wrap .bsx-body code{background:#fff0;color:var(--code-color);font-size:12px;line-height:1.5;padding:0}.bsg-wrap .bsx-actions{display:flex;align-items:center;gap:12px}.bsg-wrap .bsx-copy{background:#000;color:#df7b16;border:0;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:500;font-size:14px}.bsg-wrap .bsx-copy:hover{background-color:#0056b3;color:#fff}.bsg-wrap .bsx-open{color:#8ab4ff;font-size:13px;text-decoration:underline}.bsg-wrap .bsx-empty{text-align:center;padding:40px 0;color:#6c757d}.bsg-wrap .bsx-cta{text-align:center;margin-top:40px;font-size:1.05rem}.bsg-wrap .bsx-body h3 a{color:#fff;text-decoration:none}.bsg-wrap .bsx-body h3 a:hover{text-decoration:underline}.bsg-wrap .bsp-container{padding-top:20px}.bsg-wrap .bsp-crumbs{font-size:.9rem;margin-bottom:18px;color:#6c757d}.bsg-wrap .bsp-stage{display:flex;align-items:center;justify-content:center;min-height:320px;padding:40px 20px;border-radius:12px;border:1px solid var(--border-color);margin-bottom:24px}.bsg-wrap .bsp-box{width:200px;height:200px;max-width:100%}.bsg-wrap .bsp-intro{font-size:1.05rem;line-height:1.7;margin:0 0 20px}.bsg-wrap .bsp-code{margin-top:0;margin-bottom:18px}.bsg-wrap .bsp-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 34px}.bsg-wrap .bsp-btn{display:inline-block;padding:11px 20px;border-radius:8px;background:#1b1f23;color:#df7b16;text-decoration:none;font-weight:500}.bsg-wrap .bsp-btn:hover{background:#0056b3;color:#fff}.bsg-wrap .bsp-btn--ghost{background:#fff;color:#1b1f23;border:1px solid var(--border-color)}.bsg-wrap .bsp-btn--ghost:hover{background:#f1f3f5;color:#1b1f23}.bsg-wrap .bsp-container h2{margin:34px 0 14px}.bsg-wrap .bsp-table-wrap{overflow-x:auto}.bsg-wrap .bsp-table{width:100%;border-collapse:collapse;font-size:.92rem}.bsg-wrap .bsp-table th,.bsg-wrap .bsp-table td{padding:9px 12px;border:1px solid var(--border-color);text-align:left;white-space:nowrap}.bsg-wrap .bsp-table th{background:#f1f3f5}.bsg-wrap .bsp-swatch{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:3px;border:1px solid var(--border-color)}.bsg-wrap .bsp-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.bsg-wrap .bsp-rel{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:12px;overflow:hidden;background:#fff;color:var(--text-color);text-decoration:none;min-width:0}.bsg-wrap .bsp-rel .bsx-stage{height:130px}.bsg-wrap .bsp-rel .bsx-box{width:70px;height:70px}.bsg-wrap .bsp-rel strong{padding:12px 14px;font-size:.95rem}.bsg-wrap .bsp-rel:hover{border-color:#1b1f23}.bsg-wrap .bsp-prevnext{display:flex;justify-content:space-between;gap:16px;margin-top:34px;flex-wrap:wrap}.bsg-wrap .bsp-prevnext a{color:#007bff;text-decoration:none}.bsg-wrap .bsp-prevnext a:hover{text-decoration:underline}@media (max-width:992px){.bsg-wrap .bsp-related{grid-template-columns:repeat(2,minmax(0,1fr))}.bsg-wrap .sidebar{border-right:none}.bsg-wrap .main-content{min-height:50vh}.bsg-wrap .bsx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.bsg-wrap .sidebar{min-width:0;width:100%;padding:1.25rem}.bsg-wrap .sidebar-header{margin:-1.25rem -1.25rem 1.5rem -1.25rem;padding:1rem 1.25rem}.bsg-wrap .main-content{padding:1.25rem}.bsg-wrap .bsx-grid{grid-template-columns:1fr}.bsg-wrap .bsp-related{grid-template-columns:1fr}.bsg-wrap .bsp-stage{min-height:240px}.bsg-wrap .page-container{padding:30px 12px 50px}}@media (prefers-reduced-motion:reduce){.bsg-wrap .preview-box,.bsg-wrap .toggle-slider,.bsg-wrap .toggle-slider:before{transition:none}}