.cb-demo{border:1px solid rgb(255 182 54 / .1);border-radius:3px;padding:28px 24px;margin:20px 0 32px;position:relative;overflow:visible;direction:ltr}.cb-demo::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgb(255 182 54 / .03) 0%,transparent 60%);pointer-events:none;opacity:.44}.cb-demo-label{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--heading-color);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:18px;opacity:.7;font-weight:600}.cb-controls{display:flex;flex-wrap:wrap;gap:12px 20px;margin-bottom:20px;align-items:center}.cb-slider-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--secondary-text);margin-bottom:6px}.cb-slider-label{min-width:90px;font-family:'IBM Plex Mono',monospace;font-size:12px;white-space:nowrap}.cb-slider-val{min-width:48px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--heading-color);text-align:end}input[type="range"].cb-range{-webkit-appearance:none;appearance:none;width:180px;height:4px;background:var(--border-color);border-radius:2px;outline:none;cursor:pointer}input[type="range"].cb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--heading-color);cursor:pointer}input[type="range"].cb-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--heading-color);border:none;cursor:pointer}.cb-btn-group{display:flex;flex-wrap:wrap;gap:6px}.cb-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border:1px solid var(--border-color);border-radius:3px;background:rgb(14 18 25 / .7);color:var(--secondary-text);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3px;cursor:pointer;transition:color 0.2s,border-color 0.2s,background 0.2s;line-height:1.3}.cb-btn:hover{border-color:rgb(255 182 54 / .4);color:var(--text-color)}.cb-btn.active{border-color:var(--heading-color);color:var(--heading-color);background:rgb(255 182 54 / .08)}.cb-code-output{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--secondary-text);background:rgb(14 18 25 / .6);border:1px solid var(--border-color);border-radius:3px;padding:12px 16px;margin-top:16px;white-space:pre;line-height:1.6;overflow-x:auto}.cb-preview-area{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;border:1px dashed var(--border-color);border-radius:3px;position:relative}.cb-codepen-form{text-align:start;margin-top:24px}.cb-codepen-btn{display:flex;align-items:center;gap:13px;background:rgb(14 18 25 / .7);border:1px solid var(--border-color);border-radius:3px;color:var(--secondary-text);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.5px;padding:8px 10px;cursor:pointer;line-height:1;transition:color 0.2s ease,border-color 0.2s ease,background 0.2s ease}.cb-codepen-btn:hover{border-color:rgb(255 182 54 / .4);color:var(--heading-color)}.cb-codepen-btn svg{width:24px;height:24px;fill:currentColor;flex-shrink:0}#cb-color-preview{width:120px;height:80px;border-radius:6px;border:2px solid var(--border-color);transition:background-color 0.15s;flex-shrink:0}.cb-color-layout{display:flex;gap:24px;align-items:flex-start}.cb-color-sliders{flex:1}.cb-color-text-preview{font-size:18px;font-weight:600;margin-top:8px;padding:6px 10px;border-radius:3px;transition:color 0.15s}.cb-boxmodel-vis{position:relative;display:flex;justify-content:center;align-items:center}.cb-bm-margin{border:2px dashed rgb(255 182 54 / .3);display:flex;justify-content:center;align-items:center;position:relative}.cb-bm-border{border-style:solid;border-color:#75bbe8;display:flex;justify-content:center;align-items:center}.cb-bm-padding{background:rgb(78 173 128 / .2);display:flex;justify-content:center;align-items:center}.cb-bm-content{background:linear-gradient(135deg,#840d32,#9b1341);display:flex;justify-content:center;align-items:center;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;text-align:center;border-radius:2px;direction:ltr}.cb-bm-labels{display:flex;gap:16px;margin-top:12px;font-size:11px;font-family:'IBM Plex Mono',monospace;flex-wrap:wrap;justify-content:center}.cb-bm-label-item{display:flex;align-items:center;gap:5px;color:var(--secondary-text)}.cb-bm-label-swatch{width:12px;height:12px;border-radius:2px;flex-shrink:0}.cb-bm-total{margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--heading-color);text-align:center}.cb-display-items{min-height:140px;padding:16px;background:rgb(14 18 25 / .4);border:1px solid var(--border-color);border-radius:3px}.cb-display-box{padding:12px 20px;border-radius:3px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#fff;text-align:center;margin:4px;transition:all 0.3s}.cb-display-box:nth-child(1){background:#840d32}.cb-display-box:nth-child(2){background:#2a5d8f}.cb-display-box:nth-child(3){background:rgb(78 173 128 / .7)}.cb-flex-container{min-height:200px;padding:12px;background:rgb(14 18 25 / .4);border:1px solid var(--border-color);border-radius:3px;display:flex;transition:all 0.3s}.cb-flex-item{padding:16px 20px;border-radius:3px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#fff;text-align:center;min-width:50px}.cb-flex-item:nth-child(1){background:#840d32}.cb-flex-item:nth-child(2){background:#2a5d8f}.cb-flex-item:nth-child(3){background:rgb(78 173 128 / .8)}.cb-flex-item:nth-child(4){background:#8b5e3c}.cb-flex-item:nth-child(5){background:#6a4c93}.cb-controls-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}.cb-control-group{display:flex;flex-direction:column;gap:6px}.cb-control-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--secondary-text);text-transform:uppercase;letter-spacing:.5px}.cb-grid-container{min-height:180px;padding:12px;background:rgb(14 18 25 / .4);border:1px solid var(--border-color);border-radius:3px;display:grid;transition:gap 0.3s}.cb-grid-item{padding:20px 12px;border-radius:3px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#fff;text-align:center;transition:all 0.3s}.cb-grid-item:nth-child(1){background:#840d32}.cb-grid-item:nth-child(2){background:#2a5d8f}.cb-grid-item:nth-child(3){background:rgb(78 173 128 / .8)}.cb-grid-item:nth-child(4){background:#8b5e3c}.cb-grid-item:nth-child(5){background:#6a4c93}.cb-grid-item:nth-child(6){background:#b8113e}.cb-grid-item:nth-child(7){background:#2a5d8f}.cb-grid-item:nth-child(8){background:rgb(78 173 128 / .6)}.cb-grid-item:nth-child(9){background:#8b5e3c}.cb-position-container{position:relative;min-height:220px;padding:12px;background:rgb(14 18 25 / .4);border:1px solid var(--border-color);border-radius:3px;overflow:hidden}.cb-position-parent{position:relative;width:100%;height:200px;border:2px dashed rgb(255 182 54 / .2);border-radius:3px}.cb-position-child{width:80px;height:60px;background:linear-gradient(135deg,#840d32,#9b1341);border-radius:3px;display:flex;justify-content:center;align-items:center;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;transition:top 0.3s,left 0.3s}.cb-position-ghost{position:absolute;width:80px;height:60px;border:2px dashed rgb(255 182 54 / .15);border-radius:3px;top:0;left:0;display:none}.cb-spec-input{width:100%;max-width:400px;padding:10px 14px;border:1px solid var(--border-color);border-radius:3px;background:rgb(14 18 25 / .6);color:var(--text-color);font-family:'IBM Plex Mono',monospace;font-size:14px;outline:none;transition:border-color 0.2s}.cb-spec-input:focus{border-color:rgb(255 182 54 / .5)}.cb-spec-input::placeholder{color:rgb(174 175 180 / .4)}.cb-spec-result{display:flex;gap:4px;margin-top:16px;align-items:stretch}.cb-spec-digit{display:flex;flex-direction:column;align-items:center;min-width:60px;border:1px solid var(--border-color);border-radius:3px;overflow:hidden}.cb-spec-digit-val{font-family:'IBM Plex Mono',monospace;font-size:28px;font-weight:700;padding:12px 8px 6px;line-height:1;color:var(--heading-color)}.cb-spec-digit-label{font-family:'IBM Plex Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--secondary-text);padding:6px 4px 8px;background:rgb(14 18 25 / .4);width:100%;text-align:center}.cb-spec-sep{display:flex;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--border-color);padding:0 2px;padding-bottom:22px}.cb-spec-examples{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.cb-spec-example-btn{padding:4px 10px;border:1px solid var(--border-color);border-radius:3px;background:#fff0;color:var(--secondary-text);font-family:'IBM Plex Mono',monospace;font-size:11px;cursor:pointer;transition:border-color 0.2s,color 0.2s}.cb-spec-example-btn:hover{border-color:rgb(255 182 54 / .4);color:var(--text-color)}.cb-anim-sections{display:flex;gap:24px;flex-wrap:wrap}.cb-anim-section{flex:1;min-width:200px}.cb-anim-section-title{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--secondary-text);margin-bottom:12px}.cb-transition-box{width:100px;height:100px;background:linear-gradient(135deg,#840d32,#9b1341);border-radius:6px;display:flex;justify-content:center;align-items:center;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;transition:all 0.3s ease;margin:0 auto}.cb-transition-box:hover{background:linear-gradient(135deg,#2a5d8f,#75bbe8);transform:scale(1.15);border-radius:50%}.cb-keyframe-box{width:60px;height:60px;background:var(--heading-color);border-radius:4px;margin:20px auto}.cb-keyframe-box.playing{animation:cbBounce var(--cb-anim-dur,1s) ease infinite}@keyframes cbBounce{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-30px) rotate(5deg)}50%{transform:translateY(0) rotate(0deg)}75%{transform:translateY(-15px) rotate(-3deg)}}.cb-play-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--border-color);border-radius:3px;background:rgb(14 18 25 / .7);color:var(--secondary-text);font-family:'IBM Plex Mono',monospace;font-size:12px;cursor:pointer;transition:color 0.2s,border-color 0.2s;margin-top:8px}.cb-play-btn:hover{border-color:rgb(255 182 54 / .4);color:var(--text-color)}.cb-play-btn.playing{border-color:var(--heading-color);color:var(--heading-color)}.cb-filter-preview{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}.cb-filter-box{width:200px;height:140px;border-radius:6px;overflow:hidden;flex-shrink:0;border:2px solid var(--border-color);display:flex;justify-content:center;align-items:center}.cb-filter-box-inner{width:100%;height:100%;background:linear-gradient(135deg,#b8113e 0%,#2a5d8f 50%,#4ade80 100%);display:flex;justify-content:center;align-items:center;color:#fff;font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;transition:filter 0.2s}.cb-filter-sliders{flex:1;min-width:200px}@media screen and (max-width:768px){.cb-demo{padding:20px 16px}.cb-color-layout{flex-direction:column;align-items:center}.cb-anim-sections{flex-direction:column}.cb-filter-preview{flex-direction:column;align-items:center}.cb-spec-digit{min-width:48px}.cb-spec-digit-val{font-size:22px}.cb-color-sliders,.cb-filter-sliders{width:100%}.cb-slider-row{margin-bottom:10px;width:100%}.cb-slider-label{min-width:56px}.cb-slider-val{min-width:36px}input[type="range"].cb-range{flex:1;min-width:0;width:auto}.cb-controls-row{flex-direction:column}}