.cb-demo{border:1px solid rgba(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%,rgba(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:#0e1219b3;color:var(--secondary-text);font-family:IBM Plex Mono,monospace;font-size:12px;letter-spacing:.3px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;line-height:1.3}.cb-btn:hover{border-color:#ffb63666;color:var(--text-color)}.cb-btn.active{border-color:var(--heading-color);color:var(--heading-color);background:#ffb63614}.cb-code-output{font-family:IBM Plex Mono,monospace;font-size:12px;color:var(--secondary-text);background:#0e121999;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:#0e1219b3;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 .2s ease,border-color .2s ease,background .2s ease}.cb-codepen-btn:hover{border-color:#ffb63666;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 .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 .15s}.cb-boxmodel-vis{position:relative;display:flex;justify-content:center;align-items:center}.cb-bm-margin{border:2px dashed rgba(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:#4ead8033;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:#0e121966;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 .3s}.cb-display-box:nth-child(1){background:#840d32}.cb-display-box:nth-child(2){background:#2a5d8f}.cb-display-box:nth-child(3){background:#4ead80b3}.cb-flex-container{min-height:200px;padding:12px;background:#0e121966;border:1px solid var(--border-color);border-radius:3px;display:flex;overflow-x:auto;transition:all .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:#4ead80cc}.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:#0e121966;border:1px solid var(--border-color);border-radius:3px;display:grid;transition:gap .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 .3s}.cb-grid-item:nth-child(1){background:#840d32}.cb-grid-item:nth-child(2){background:#2a5d8f}.cb-grid-item:nth-child(3){background:#4ead80cc}.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:#4ead8099}.cb-grid-item:nth-child(9){background:#8b5e3c}.cb-position-container{position:relative;min-height:220px;padding:12px;background:#0e121966;border:1px solid var(--border-color);border-radius:3px;overflow:hidden}.cb-position-parent{position:relative;width:100%;height:200px;border:2px dashed rgba(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 .3s,left .3s}.cb-position-ghost{position:absolute;width:80px;height:60px;border:2px dashed rgba(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:#0e121999;color:var(--text-color);font-family:IBM Plex Mono,monospace;font-size:14px;outline:none;transition:border-color .2s}.cb-spec-input:focus{border-color:#ffb63680}.cb-spec-input::placeholder{color:#aeafb466}.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:#0e121966;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 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:transparent;color:var(--secondary-text);font-family:IBM Plex Mono,monospace;font-size:11px;cursor:pointer;transition:border-color .2s,color .2s}.cb-spec-example-btn:hover{border-color:#ffb63666;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 .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%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-30px) rotate(5deg)}50%{transform:translateY(0) rotate(0)}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:#0e1219b3;color:var(--secondary-text);font-family:IBM Plex Mono,monospace;font-size:12px;cursor:pointer;transition:color .2s,border-color .2s;margin-top:8px}.cb-play-btn:hover{border-color:#ffb63666;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,#2a5d8f,#4ade80);display:flex;justify-content:center;align-items:center;color:#fff;font-family:IBM Plex Mono,monospace;font-size:14px;font-weight:600;transition:filter .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}}