.cq-demo{border:1px solid rgb(255 182 54 / .1);border-radius:3px;padding:28px 24px;margin:20px 0 32px;position:relative;overflow:hidden}.cq-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:.3}.cqh-panels{display:flex;gap:20px;margin-top:26px;max-width:100%}.cqh-panel{flex:1;min-width:0;overflow:hidden}.cqh-label{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-xs);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;font-weight:600;text-align:center;min-height:39px}.cqh-panel:first-child .cqh-label{color:#d36256}.cqh-panel:last-child .cqh-label{color:#9ec56e}.cqh-wrap{border:1px dashed var(--demo-border);border-radius:var(--demo-radius);padding:12px;overflow:hidden}.cqh-card{display:flex;flex-direction:column;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);overflow:hidden;transition:all 0.25s ease}.cqh-img{width:100%;height:140px;background:linear-gradient(135deg,rgba(var(--demo-accent-rgb),.2),rgba(var(--demo-accent-rgb),.05));flex-shrink:0}.cqh-body{padding:16px}.cqh-tag{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-xs);color:var(--demo-accent);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px}.cqh-title{font-size:16px;font-weight:600;color:var(--heading-color);margin-bottom:6px}.cqh-text{font-size:var(--demo-font-size-sm);color:var(--secondary-text);line-height:1.5}.cqh-card.cqh-horizontal{flex-direction:row}.cqh-card.cqh-horizontal .cqh-img{width:160px;height:auto;min-height:120px}.cqh-card.cqh-horizontal .cqh-title{font-size:18px}@media (max-width:600px){.cqh-panels{flex-direction:column;width:100%!important}}.cq-card-container{container:card / inline-size;max-width:100%;margin:16px auto;border:1px dashed var(--demo-border);border-radius:var(--demo-radius);padding:16px;overflow:hidden;min-height:288px;display:flex;align-items:center;justify-content:center}.cq-card{display:flex;flex-direction:column;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);overflow:hidden;transition:all 0.25s ease}.cq-card-img{width:100%;height:140px;background:linear-gradient(135deg,rgba(var(--demo-accent-rgb),.2),rgba(var(--demo-accent-rgb),.05));flex-shrink:0}.cq-card-body{padding:16px}.cq-card-tag{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-xs);color:var(--demo-accent);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px}.cq-card-title{font-size:16px;font-weight:600;color:var(--heading-color);margin-bottom:6px}.cq-card-text{font-size:var(--demo-font-size-sm);color:var(--secondary-text);line-height:1.5}@container card (width>420px){.cq-card{flex-direction:row}.cq-card-img{width:180px;height:auto;min-height:140px}.cq-card-title{font-size:18px}}.cq-nav-container{container:sidebar / inline-size;max-width:100%;margin:16px auto;border:1px dashed var(--demo-border);border-radius:var(--demo-radius);overflow:hidden}.cq-nav{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--demo-surface)}.cq-nav-item{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border-radius:var(--demo-radius);color:var(--secondary-text);text-decoration:none;font-size:var(--demo-font-size-md);transition:background 0.2s ease,color 0.2s ease;overflow:hidden;white-space:nowrap}.cq-nav-item:hover{background:rgba(var(--demo-accent-rgb),.08);color:var(--heading-color)}.cq-nav-item.active{background:rgba(var(--demo-accent-rgb),.12);color:var(--demo-accent)}.cq-nav-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center}.cq-nav-label{display:none;overflow:hidden;text-overflow:ellipsis}@container sidebar (width>140px){.cq-nav-item{justify-content:flex-start}.cq-nav-label{display:inline}}.cq-widget-container{container:widget / inline-size;max-width:100%;margin:16px auto;border:1px dashed var(--demo-border);border-radius:var(--demo-radius);padding:16px;overflow:hidden}.cq-widget{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);padding:16px;transition:all 0.25s ease}.cq-widget-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.cq-widget-title{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-xs);color:var(--secondary-text);text-transform:uppercase;letter-spacing:1px}.cq-widget-badge{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-xs);color:#4ade80;background:rgb(74 222 128 / .1);padding:2px 8px;border-radius:10px}.cq-widget-value{font-size:28px;font-weight:700;color:var(--heading-color);line-height:1.2}.cq-widget-chart{display:none;align-items:flex-end;gap:6px;height:60px;margin-top:12px;padding-top:8px;border-top:1px solid var(--demo-border)}.cq-bar{flex:1;background:rgba(var(--demo-accent-rgb),.25);border-radius:2px 2px 0 0;min-width:0;transition:height 0.3s ease,background 0.3s ease}.cq-bar.highlight{background:var(--demo-accent)}@container widget (width>280px){.cq-widget{display:flex;align-items:center;gap:24px}.cq-widget-info{flex-shrink:0}.cq-widget-chart{display:flex;flex:1;min-width:0;height:70px;margin-top:0;padding-top:0;border-top:none;border-left:1px solid var(--demo-border);padding-left:20px;align-self:stretch;align-items:flex-end}.cq-widget-value{font-size:36px}}.cq-codepen-form{position:absolute;top:8px;inset-inline-end:10px;z-index:5}.cq-codepen-btn{display:inline-flex;align-items:center;gap:6px;background:rgb(14 18 25 / .7);border:1px solid var(--border-color);border-radius:3px;color:var(--secondary-text);font-family:var(--demo-font-mono);font-size:11px;letter-spacing:.5px;padding:5px 8px;cursor:pointer;line-height:1;transition:color 0.2s ease,border-color 0.2s ease}.cq-codepen-btn:hover{color:var(--demo-accent);border-color:rgba(var(--demo-accent-rgb),.4)}.cq-codepen-btn svg{width:14px;height:14px;fill:currentColor}@media (max-width:600px){.cq-card-container,.cq-nav-container,.cq-widget-container{width:100%!important}}