/* PROWID — CSS-инструменты раздела «Necə işləyir?»: вкладка хаба (.ct-hub) и страница инструмента (.ct-page) */
.lang-badge.lang-css{background:#264DE4; color:#fff}

/* ---------- Карточки (хаб и «Другие инструменты») ---------- */
.ct-hub h2{font-size:1.4rem; margin-bottom:.4rem}
.ct-hub-lead{color:var(--slate); margin:0 0 1.2rem; max-width:62ch}
.ct-filter-bar{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem}
.ct-filter-btn{padding:.45rem .85rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--slate); font-weight:700; font-size:.86rem; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; transition:all .15s ease}
.ct-filter-btn:hover{background:var(--soft); color:var(--ink); border-color:rgba(37,99,235,.3)}
.ct-filter-btn.is-active{background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(37,99,235,.25)}
.ct-filter-count{font-size:.75rem; padding:.1rem .4rem; border-radius:6px; background:rgba(0,0,0,.08); color:inherit}
.ct-filter-btn.is-active .ct-filter-count{background:rgba(255,255,255,.25); color:#fff}
.ct-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem}
.ct-card{display:flex; flex-direction:column; gap:.45rem; padding:1.1rem 1.15rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.ct-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.35)}
.ct-card:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:2px}
.ct-card-ico{display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--grad-soft); color:var(--primary-dark); font-size:1.3rem; line-height:1}
.ct-card strong{font-size:1.02rem; line-height:1.3}
.ct-card-text{color:var(--slate); font-size:.9rem; line-height:1.5}
.ct-card-go{margin-top:auto; color:var(--primary); font-weight:700; font-size:.9rem}

/* ---------- Инструмент ---------- */
.ct-tool{margin:1.5rem 0 2rem; padding:1.2rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--soft)}
.ct-stage{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:1.2rem; align-items:start}
.ct-controls{display:flex; flex-direction:column; gap:.85rem; min-width:0}
.ct-preview-wrap{position:sticky; top:84px; display:flex; flex-direction:column; gap:.4rem; min-width:0}
.ct-label{font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.ct-preview{position:relative; min-height:300px; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden;
  background-color:#fff; background-image:linear-gradient(45deg,#eef2f7 25%,transparent 25%,transparent 75%,#eef2f7 75%),linear-gradient(45deg,#eef2f7 25%,transparent 25%,transparent 75%,#eef2f7 75%);
  background-size:20px 20px; background-position:0 0,10px 10px}
.ct-noscript{margin:0; color:var(--slate)}

/* поля, которые строят скрипты инструментов (javascript/css-tools/core.js) */
.ct-tool [hidden]{display:none !important}
.ct-field{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.ct-field > span,.ct-legend{display:flex; justify-content:space-between; gap:.5rem; font-size:.86rem; font-weight:700; color:var(--ink)}
.ct-field output{font-weight:600; color:var(--primary-dark); font-variant-numeric:tabular-nums}
.ct-field input[type=range]{width:100%; accent-color:var(--primary)}
.ct-field select,.ct-field input[type=text],.ct-field input[type=number],.ct-field textarea{width:100%; padding:.5rem .65rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; font-size:.92rem}
.ct-field textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; resize:vertical}
.ct-field input[type=color]{width:44px; height:34px; padding:2px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer}
.ct-check{display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:600; cursor:pointer}
.ct-check input{accent-color:var(--primary); width:18px; height:18px}
.ct-seg{display:flex; flex-wrap:wrap; gap:.3rem; padding:.25rem; border-radius:12px; background:#fff; border:1px solid var(--line)}
.ct-seg button{flex:1 0 auto; padding:.4rem .7rem; border:0; border-radius:9px; background:none; color:var(--slate); font:inherit; font-size:.86rem; font-weight:700; cursor:pointer}
.ct-seg button[aria-pressed=true]{background:var(--primary); color:#fff}
.ct-seg button:focus-visible,.ct-mini:focus-visible{outline:3px solid rgba(37,99,235,.35); outline-offset:1px}
.ct-group{display:flex; flex-direction:column; gap:.6rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:#fff}
.ct-row{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.ct-row > .ct-field{flex:1 1 120px}
.ct-mini{display:inline-flex; align-items:center; justify-content:center; gap:.3rem; padding:.35rem .65rem; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--slate); font:inherit; font-size:.82rem; font-weight:700; cursor:pointer}
.ct-mini:hover{color:var(--primary-dark); border-color:rgba(37,99,235,.4)}
.ct-mini[disabled]{opacity:.45; cursor:not-allowed}
.ct-chips{display:flex; flex-wrap:wrap; gap:.4rem}
.ct-hint{margin:0; font-size:.82rem; color:var(--muted)}

/* вывод кода */
.ct-output{margin-top:1.2rem; border-radius:var(--radius); overflow:hidden; background:var(--navy); color:#E2E8F0}
.ct-output-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; padding:.6rem .8rem; background:var(--navy-2)}
.ct-output-head strong{color:#fff; font-size:.92rem}
.ct-output-btns{display:flex; gap:.4rem}
.ct-code{margin:0; padding:1rem; overflow-x:auto; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.88rem; line-height:1.6; white-space:pre}
.ct-copied{margin:0; padding:0 1rem; min-height:0; font-size:.82rem; color:#86EFAC}
.ct-copied:not(:empty){padding-bottom:.7rem}

/* ---------- Текст под инструментом ---------- */
.ct-article{max-width:820px}
.ct-sec{margin:0 0 2rem}
.ct-sec h2{font-size:1.35rem}
.ct-sec h3{font-size:1.05rem; margin-top:1.2rem}
.ct-sec p,.ct-steps li{color:var(--slate); line-height:1.7}
.ct-sec code,.ct-hero code{padding:.1em .35em; border-radius:5px; background:var(--soft); color:var(--ink); font-size:.9em}
.ct-steps{padding-left:1.3rem}
.ct-steps li{margin-bottom:.4rem}
.ct-snippet{margin:.6rem 0 0; padding:.8rem 1rem; border-radius:10px; background:var(--navy); color:#E2E8F0; overflow-x:auto; font-size:.86rem; line-height:1.6}
.ct-faq{border:1px solid var(--line); border-radius:12px; padding:.75rem 1rem; margin-bottom:.6rem; background:#fff}
.ct-faq summary{font-weight:700; cursor:pointer; color:var(--ink)}
.ct-faq p{margin:.6rem 0 0}
.ct-lessons ul{display:flex; flex-direction:column; gap:.4rem; padding-left:1.2rem}
.ct-cta{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin:0 0 2rem; padding:1.4rem 1.5rem; border-radius:var(--radius-lg); background:var(--grad-soft); border:1px solid rgba(37,99,235,.18)}
.ct-cta h2{font-size:1.2rem; margin-bottom:.3rem}
.ct-cta p{margin:0; color:var(--slate); max-width:60ch}

/* ---------- clip-path-generator ---------- */
.ct-clip-canvas{position:relative; width:100%; height:340px; border-radius:inherit; overflow:hidden; touch-action:none; display:flex; align-items:center; justify-content:center}
.ct-clip-canvas[data-bg="grad"]{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#334155 100%)}
.ct-clip-canvas[data-bg="photo"]{background:radial-gradient(circle at 50% 50%,#3b82f6,#1d4ed8,#0f172a); background-size:cover}
.ct-clip-canvas[data-bg="dark"]{background:#090d16}
.ct-clip-canvas[data-bg="light"]{background:#f8fafc}
.ct-clip-target{position:absolute; inset:24px; background:linear-gradient(135deg,#f43f5e 0%,#fb923c 50%,#facc15 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 25px rgba(0,0,0,.25); transition:clip-path .05s ease}
.ct-clip-content{display:flex; flex-direction:column; align-items:center; gap:.4rem; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35)}
.ct-clip-ico{font-size:2rem; line-height:1}
.ct-clip-content strong{font-size:1.1rem; font-weight:800; letter-spacing:.05em}
.ct-clip-svg{position:absolute; inset:24px; width:calc(100% - 48px); height:calc(100% - 48px); pointer-events:none; z-index:2}
.ct-clip-svg-poly{fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.5; stroke-dasharray:4 4}
.ct-clip-handles{position:absolute; inset:24px; pointer-events:none; z-index:3}
.ct-clip-handle{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:#2563eb; color:#fff; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4); display:grid; place-items:center; font-size:.65rem; font-weight:800; cursor:grab; pointer-events:auto; user-select:none; touch-action:none; transition:transform .15s ease}
.ct-clip-handle:hover,.ct-clip-handle:focus-visible{transform:scale(1.25); background:#1d4ed8; outline:none}
.ct-clip-handle:active{cursor:grabbing; transform:scale(1.1); background:#1e40af}
.ct-clip-pts-list{display:flex; flex-direction:column; gap:.45rem; max-height:220px; overflow-y:auto; padding-right:.2rem}
.ct-clip-pt-row{align-items:center; gap:.4rem; background:var(--soft); padding:.3rem .5rem; border-radius:8px; border:1px solid var(--line)}
.ct-clip-badge{font-size:.75rem; font-weight:800; color:var(--primary); min-width:24px}
.ct-clip-num-lbl{display:flex; align-items:center; gap:.25rem; font-size:.82rem; font-weight:700}
.ct-clip-num-lbl input{width:56px; padding:.25rem .35rem; font-size:.85rem; border-radius:6px; border:1px solid var(--line)}

/* ---------- glassmorphism-generator ---------- */
.ct-glass-scene{position:relative; width:100%; height:340px; border-radius:inherit; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.ct-glass-scene[data-scene="shapes"]{background:#0b0f19}
.ct-glass-scene[data-scene="neon"]{background:radial-gradient(ellipse at 30% 20%,#4c0519 0%,#090d16 70%)}
.ct-glass-scene[data-scene="photo"]{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#065f46 100%)}
.ct-glass-orbs{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.ct-glass-orb{position:absolute; border-radius:50%; filter:blur(40px); opacity:.85}
.ct-glass-orb.orb-1{width:160px; height:160px; top:15%; left:12%; background:#ec4899; animation:ctOrb1 8s ease-in-out infinite alternate}
.ct-glass-orb.orb-2{width:180px; height:180px; bottom:12%; right:14%; background:#3b82f6; animation:ctOrb2 10s ease-in-out infinite alternate}
.ct-glass-orb.orb-3{width:130px; height:130px; top:35%; right:30%; background:#10b981; animation:ctOrb3 9s ease-in-out infinite alternate}
@keyframes ctOrb1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(35px,25px) scale(1.15)}}
@keyframes ctOrb2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-30px,-20px) scale(1.1)}}
@keyframes ctOrb3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,-30px) scale(.9)}}
.ct-glass-card{position:relative; z-index:2; width:min(100%, 310px); padding:1.4rem; color:#fff; display:flex; flex-direction:column; gap:.8rem; transition:backdrop-filter .15s ease, background .15s ease, border .15s ease, border-radius .15s ease, box-shadow .15s ease}
.ct-glass-card.is-dark-tint{color:#f8fafc}
.ct-glass-head{display:flex; align-items:center; justify-content:space-between}
.ct-glass-badge{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.25rem .55rem; border-radius:6px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25)}
.ct-glass-dot{width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e}
.ct-glass-title{margin:0; font-size:1.15rem; font-weight:800; line-height:1.2}
.ct-glass-desc{margin:0; font-size:.85rem; line-height:1.5; opacity:.9}
.ct-glass-foot{margin-top:.4rem; display:flex}
.ct-glass-btn{padding:.5rem 1.1rem; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.2); color:#fff; font-weight:700; font-size:.85rem; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s ease, transform .15s ease}
.ct-glass-btn:hover{background:rgba(255,255,255,.32); transform:translateY(-1px)}

/* ---------- border-radius-generator ---------- */
.ct-blob-stage{position:relative; width:100%; min-height:340px; display:flex; align-items:center; justify-content:center; padding:1.5rem}
.ct-blob-element{display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 20px 35px -10px rgba(99,102,241,.35); transition:border-radius .2s ease, width .2s ease, height .2s ease}
.ct-blob-label{font-size:.9rem; font-weight:800; letter-spacing:.05em; text-shadow:0 2px 4px rgba(0,0,0,.35)}

/* ---------- stacking-context-visualizer ---------- */
.ct-sc-stage{position:relative; width:100%; min-height:350px; display:flex; align-items:center; justify-content:center; perspective:1100px; padding:2rem 1rem; overflow:hidden; background:radial-gradient(circle at 50% 50%, rgba(30,41,59,.35) 0%, rgba(15,23,42,.85) 100%); border-radius:inherit}
.ct-sc-viewport{position:relative; width:340px; height:240px; transform-style:preserve-3d; transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ct-sc-ground{position:absolute; inset:-35px; border-radius:16px; border:1px dashed rgba(148,163,184,.3); background-image:radial-gradient(rgba(148,163,184,.25) 1px, transparent 0); background-size:20px 20px; pointer-events:none; transform:translateZ(0)}
.ct-sc-card{position:absolute; width:180px; height:170px; border-radius:14px; padding:1rem; display:flex; flex-direction:column; justify-content:space-between; transform-style:preserve-3d; transition:transform .25s ease, opacity .25s ease, filter .25s ease; box-shadow:0 12px 28px -5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1)}
.ct-sc-card-a{top:25px; left:10px; background:linear-gradient(145deg, #1e293b, #0f172a); border:2px solid #38bdf8}
.ct-sc-card-b{top:45px; left:150px; background:linear-gradient(145deg, #312e81, #1e1b4b); border:2px solid #a855f7}
.ct-sc-card-title{font-size:.85rem; font-weight:800; color:#f8fafc; letter-spacing:.02em}
.ct-sc-badge{align-self:flex-start; font-size:.68rem; font-weight:800; padding:.2rem .5rem; border-radius:6px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15); color:#38bdf8}
.ct-sc-card-b .ct-sc-badge{color:#c084fc}
.ct-sc-card-info{display:flex; flex-direction:column; gap:.25rem}
.ct-sc-tag{font-size:.68rem; font-weight:700; padding:.15rem .45rem; border-radius:4px; display:inline-block; width:fit-content}
.ct-sc-tag.tag-warn{background:rgba(245,158,11,.2); color:#fbbf24; border:1px solid rgba(245,158,11,.45)}
.ct-sc-tag.tag-neutral{background:rgba(148,163,184,.15); color:#94a3b8; border:1px solid rgba(148,163,184,.25)}
.ct-sc-sub{font-size:.65rem; color:#94a3b8; font-family:monospace}
.ct-sc-child{position:absolute; top:40px; left:95px; width:140px; height:100px; border-radius:10px; background:linear-gradient(135deg, #f43f5e, #e11d48); border:2px solid #fff; box-shadow:0 15px 30px rgba(244,63,94,.4); color:#fff; padding:.65rem; display:flex; flex-direction:column; justify-content:space-between; transform-style:preserve-3d; transition:transform .25s ease}
.ct-sc-child-badge{align-self:flex-start; font-size:.65rem; font-weight:900; background:#fff; color:#e11d48; padding:.15rem .45rem; border-radius:4px}
.ct-sc-child-title{font-size:.75rem; font-weight:800}
.ct-sc-diag{margin-top:.75rem; padding:.75rem 1rem; border-radius:10px; display:flex; align-items:flex-start; gap:.65rem; font-size:.82rem; line-height:1.45}
.ct-sc-diag.is-trapped{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fca5a5}
.ct-sc-diag.is-escaped{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#86efac}
.ct-sc-diag-icon{font-size:1.05rem; flex-shrink:0; line-height:1; margin-top:1px}

/* ---------- aspect-ratio-object-fit ---------- */
.ct-ar-stage{position:relative; width:100%; min-height:350px; display:flex; align-items:center; justify-content:center; padding:1.5rem; overflow:hidden; background:#0b0f19; border-radius:inherit}
.ct-ar-box{position:relative; max-width:100%; border-radius:12px; overflow:hidden; box-shadow:0 15px 35px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1); cursor:crosshair; transition:width .2s ease, aspect-ratio .2s ease; background:#1e293b}
.ct-ar-img{display:block; width:100%; height:100%; pointer-events:none; user-select:none}
.ct-ar-pin{position:absolute; width:22px; height:22px; transform:translate(-50%, -50%); border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px rgba(239,68,68,.9), 0 4px 10px rgba(0,0,0,.5); pointer-events:none; transition:left .1s ease, top .1s ease; background:radial-gradient(circle at center, #ef4444 3px, transparent 4px)}
.ct-ar-dim{position:absolute; bottom:8px; right:8px; font-size:.7rem; font-weight:800; font-family:monospace; background:rgba(0,0,0,.75); color:#f8fafc; padding:.25rem .55rem; border-radius:6px; border:1px solid rgba(255,255,255,.15); pointer-events:none; backdrop-filter:blur(4px)}
.ct-ar-diag{margin-top:.75rem; padding:.75rem 1rem; border-radius:10px; display:flex; align-items:flex-start; gap:.65rem; font-size:.82rem; line-height:1.45}
.ct-ar-diag.is-safe{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#86efac}
.ct-ar-diag.is-warn{background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.4); color:#fcd34d}
.ct-ar-diag-icon{font-size:1.05rem; flex-shrink:0; line-height:1; margin-top:1px}

/* ---------- css-filters-studio ---------- */
.ct-fs-stage{position:relative; width:100%; min-height:350px; display:flex; align-items:center; justify-content:center; padding:1.5rem; overflow:hidden; background:#090d16; border-radius:inherit}
.ct-fs-viewer{position:relative; width:min(100%, 460px); aspect-ratio:16/10; border-radius:14px; overflow:hidden; box-shadow:0 15px 35px -10px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); user-select:none; touch-action:none; cursor:ew-resize; background:#000}
.ct-fs-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.ct-fs-orig{z-index:1}
.ct-fs-clip{position:absolute; inset:0; z-index:2; pointer-events:none}
.ct-fs-filtered{width:100%; height:100%; transition:filter .15s ease}
.ct-fs-badge{position:absolute; top:12px; font-size:.65rem; font-weight:900; letter-spacing:.08em; padding:.25rem .5rem; border-radius:6px; background:rgba(0,0,0,.65); color:#fff; border:1px solid rgba(255,255,255,.2); pointer-events:none; backdrop-filter:blur(4px); z-index:3}
.ct-fs-badge.is-before{left:12px}
.ct-fs-badge.is-after{right:12px}
.ct-fs-divider{position:absolute; top:0; bottom:0; width:3px; background:#fff; transform:translateX(-50%); z-index:4; box-shadow:0 0 10px rgba(0,0,0,.6); pointer-events:none}
.ct-fs-handle{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:34px; height:34px; border-radius:50%; background:#fff; color:#090d16; font-size:.68rem; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.4); border:2px solid var(--primary)}

/* ---------- oklch-color-picker ---------- */
.ct-ok-stage{position:relative; width:100%; min-height:350px; display:flex; flex-direction:column; gap:1.1rem; align-items:center; justify-content:center; padding:1.5rem; overflow:hidden; background:#0b0f19; border-radius:inherit}
.ct-ok-card{position:relative; width:min(100%, 420px); height:160px; border-radius:14px; padding:1.2rem; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 15px 35px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); transition:background-color .15s ease, color .15s ease}
.ct-ok-gamut{align-self:flex-start; font-size:.68rem; font-weight:800; padding:.25rem .6rem; border-radius:6px; backdrop-filter:blur(4px)}
.ct-ok-gamut.is-p3{background:rgba(234,179,8,.25); color:#fef08a; border:1px solid rgba(234,179,8,.5); box-shadow:0 0 12px rgba(234,179,8,.3)}
.ct-ok-gamut.is-srgb{background:rgba(255,255,255,.2); color:inherit; border:1px solid rgba(255,255,255,.3)}
.ct-ok-card-center{display:flex; flex-direction:column; gap:.25rem}
.ct-ok-code-title{font-size:1.25rem; font-weight:900; font-family:monospace; letter-spacing:-.02em}
.ct-ok-code-sub{font-size:.78rem; font-weight:700; opacity:.85}
.ct-ok-section{width:min(100%, 420px); display:flex; flex-direction:column; gap:.4rem}
.ct-ok-section-title{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8}
.ct-ok-palette-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:.5rem; width:100%}
.ct-ok-chip{height:48px; border-radius:8px; border:1px solid rgba(255,255,255,.2); cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding:4px; box-shadow:0 4px 10px rgba(0,0,0,.3); transition:transform .15s ease, box-shadow .15s ease; position:relative}
.ct-ok-chip:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.5)}
.ct-ok-chip-tag{font-size:.62rem; font-weight:800; font-family:monospace; background:rgba(0,0,0,.65); color:#fff; padding:.1rem .3rem; border-radius:4px}

/* ---------- scroll-driven-animations ---------- */
.ct-sda-stage{position:relative; width:100%; min-height:400px; display:flex; align-items:center; justify-content:center; padding:1.5rem 1rem; overflow:hidden; background:#0b0f19; border-radius:inherit}
.ct-sda-window{position:relative; width:min(100%, 380px); height:380px; border-radius:16px; overflow:hidden; background:#0f172a; border:1px solid rgba(255,255,255,.15); box-shadow:0 20px 40px -10px rgba(0,0,0,.7); display:flex; flex-direction:column}
.ct-sda-header{position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:.65rem 1rem; background:rgba(15,23,42,.95); border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px)}
.ct-sda-bar-wrap{position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,.1)}
.ct-sda-bar{height:100%; width:0%; background:linear-gradient(90deg, #6366f1, #ec4899); transition:width .05s linear}
.ct-sda-title{font-size:.85rem; font-weight:800; color:#f8fafc}
.ct-sda-pct{font-size:.75rem; font-weight:800; font-family:monospace; color:#a5b4fc; background:rgba(99,102,241,.15); padding:.15rem .45rem; border-radius:6px}
.ct-sda-scrollbox{flex:1; overflow-y:auto; overflow-x:hidden; padding:1rem; display:flex; flex-direction:column; gap:1rem; scroll-behavior:smooth}
.ct-sda-hero{padding:1.5rem 1rem; text-align:center; border-radius:12px; background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.15)}
.ct-sda-eyebrow{display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; color:#38bdf8; letter-spacing:.08em; margin-bottom:.25rem}
.ct-sda-hero h3{margin:0 0 .3rem; font-size:1.1rem; color:#fff}
.ct-sda-hero p{margin:0; font-size:.78rem; color:#94a3b8}
.ct-sda-card{padding:1.1rem; border-radius:12px; background:var(--card-grad, #1e293b); color:#fff; box-shadow:0 10px 20px rgba(0,0,0,.3); transition:transform .15s ease, opacity .15s ease, filter .15s ease}
.ct-sda-card-ico{font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.85; margin-bottom:.3rem}
.ct-sda-card strong{display:block; font-size:.95rem; margin-bottom:.25rem}
.ct-sda-card p{margin:0; font-size:.75rem; font-family:monospace; opacity:.9; white-space:pre-line; line-height:1.4}
.ct-sda-spacer{text-align:center; font-size:.72rem; color:#64748b; padding:1.5rem 0}

/* ---------- container-queries-visualizer ---------- */
.ct-cq-stage{position:relative; width:100%; min-height:400px; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:center; padding:1.5rem 1rem; overflow:hidden; background:#0b0f19; border-radius:inherit}
.ct-cq-infobar{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:center; width:100%}
.ct-cq-badge{font-size:.72rem; font-weight:800; font-family:monospace; padding:.25rem .6rem; border-radius:6px; backdrop-filter:blur(4px)}
.ct-cq-badge.is-container{background:rgba(56,189,248,.15); color:#38bdf8; border:1px solid rgba(56,189,248,.3)}
.ct-cq-badge.mode-narrow{background:rgba(245,158,11,.15); color:#fbbf24; border:1px solid rgba(245,158,11,.3)}
.ct-cq-badge.mode-medium{background:rgba(99,102,241,.15); color:#a5b4fc; border:1px solid rgba(99,102,241,.3)}
.ct-cq-badge.mode-wide{background:rgba(34,197,94,.15); color:#86efac; border:1px solid rgba(34,197,94,.3)}
.ct-cq-host-wrap{position:relative; max-width:100%; padding:.5rem 1.5rem .5rem .5rem; display:flex; justify-content:center}
.ct-cq-host{position:relative; container-type:inline-size; container-name:card; border-radius:16px; border:2px dashed rgba(56,189,248,.4); background:#0f172a; box-shadow:0 15px 35px -10px rgba(0,0,0,.6); transition:width .1s ease; user-select:none}
.ct-cq-resizer{position:absolute; top:0; bottom:0; right:-12px; width:24px; cursor:ew-resize; touch-action:none; display:flex; align-items:center; justify-content:center; z-index:10}
.ct-cq-resizer-line{position:absolute; top:8px; bottom:8px; width:3px; border-radius:2px; background:#38bdf8; box-shadow:0 0 8px rgba(56,189,248,.6)}
.ct-cq-resizer-handle{position:relative; width:22px; height:32px; border-radius:6px; background:#38bdf8; color:#090d16; font-size:.8rem; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.4)}
.ct-cq-card{padding:1.25rem; display:flex; flex-direction:column; gap:1rem; color:#f8fafc; transition:all .2s ease}
.ct-cq-thumb{background:linear-gradient(135deg, #6366f1, #ec4899); border-radius:10px; display:grid; place-items:center; color:#fff; font-size:1.5rem; transition:all .2s ease; aspect-ratio:16/9; width:100%; height:110px}
.ct-cq-body{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.ct-cq-tags{display:flex; gap:.35rem}
.ct-cq-tag{font-size:.65rem; font-weight:800; padding:.15rem .45rem; border-radius:4px; background:rgba(99,102,241,.2); color:#c7d2fe}
.ct-cq-tag.is-alt{background:rgba(236,72,153,.2); color:#fbcfe8}
.ct-cq-title{margin:0; font-size:1.05rem; font-weight:800; color:#fff; line-height:1.3}
.ct-cq-desc{margin:0; font-size:.82rem; color:#94a3b8; line-height:1.45}
.ct-cq-foot{display:flex; gap:.5rem; margin-top:.4rem}
.ct-cq-btn{padding:.45rem .85rem; border-radius:8px; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .15s ease}
.ct-cq-btn.is-primary{background:var(--primary); color:#fff; border:0}
.ct-cq-btn.is-ghost{background:rgba(255,255,255,.08); color:#e2e8f0; border:1px solid rgba(255,255,255,.15)}

/* Container Query Breakpoints (Native) */
@container card (min-width: 380px){
  .ct-cq-card{flex-direction:row; align-items:center; gap:1.25rem}
  .ct-cq-thumb{width:110px; height:110px; flex-shrink:0}
}
@container card (min-width: 500px){
  .ct-cq-card{padding:1.5rem; gap:1.6rem}
  .ct-cq-thumb{width:140px; height:120px; flex-shrink:0}
  .ct-cq-title{font-size:1.25rem}
}

/* Fallback state attributes */
.ct-cq-card[data-cq-mode="medium"]{flex-direction:row; align-items:center; gap:1.25rem}
.ct-cq-card[data-cq-mode="medium"] .ct-cq-thumb{width:110px; height:110px; flex-shrink:0}
.ct-cq-card[data-cq-mode="wide"]{flex-direction:row; align-items:center; padding:1.5rem; gap:1.6rem}
.ct-cq-card[data-cq-mode="wide"] .ct-cq-thumb{width:140px; height:120px; flex-shrink:0}
.ct-cq-card[data-cq-mode="wide"] .ct-cq-title{font-size:1.25rem}

@media (max-width:860px){
  .ct-stage{grid-template-columns:minmax(0,1fr)}
  .ct-preview-wrap{position:static; order:-1}
  .ct-preview{min-height:220px}
  .ct-tool{padding:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .ct-card{transition:none}
  .ct-card:hover{transform:none}
}