/* Caption library + templates UI (uses site.css/theme.css tokens) */
.cx-bar{display:grid;gap:10px;margin:18px 0 8px}
.cx-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cx-in,.cx-sel{font:inherit;font-size:16px;border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:#fff;color:var(--ink);min-height:44px}
.cx-in{flex:1 1 220px;min-width:0}
.cx-sel{max-width:100%}
.cx-chip{font:600 14px var(--font-display);border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer}
.cx-chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cx-chip:focus-visible,.cx-in:focus-visible,.cx-sel:focus-visible,.cx-btn:focus-visible,.cx-card button:focus-visible{outline:3px solid #A6F632;outline-offset:2px}
.cx-btn{font:600 14px var(--font-display);border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 18px;min-height:40px;cursor:pointer}
.cx-btn:hover{border-color:var(--ink)}
.cx-btn.pri{background:#A6F632;border-color:#A6F632;color:#121212}
.cx-count{font-size:14px;color:var(--ink-soft)}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:16px 0}
.cx-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:90px}
.cx-card[hidden]{display:none}
.cx-card.flash{border-color:#121212;box-shadow:0 0 0 3px #A6F632}
.cx-head{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cx-cat{font:600 13px var(--font-display);color:var(--ink-soft)}
.cx-badge{font:700 11.5px var(--font-display);border-radius:999px;padding:3px 10px;background:#121212;color:#A6F632}
.cx-badge.pop{background:#F5F5F4;color:#121212;border:1px solid var(--line)}
.cx-text{font-size:18px;line-height:1.55;margin:0;color:var(--ink);flex:1}
.cx-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cx-rel{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.cx-rel a{white-space:nowrap}
.cx-more{font-size:13.5px}
.cx-rand{background:#121212;color:#fff;border-radius:18px;padding:18px;margin:14px 0}
.cx-rand p{margin:6px 0 12px;font-size:18px;line-height:1.55;color:#fff}
.cx-rand small{color:#A6F632;font:700 12px var(--font-display)}
.cx-empty{padding:22px;text-align:center;color:var(--ink-soft);border:1px dashed var(--line);border-radius:16px}
/* templates */
.ct-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:start;margin:18px 0}
.ct-editor{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;position:sticky;top:84px;display:grid;gap:12px}
.ct-editor h2{margin:0;font-size:21px}
.ct-editor label{display:block;font:600 14px var(--font-display);margin:0 0 5px}
.ct-editor input[type=text],.ct-editor select{width:100%;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);min-height:44px}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ct-prev{background:#F5F5F4;border:1px solid var(--line);border-radius:16px;padding:16px;font-size:18px;line-height:1.6;white-space:pre-wrap;word-break:break-word;min-height:110px}
.ct-prev mark{background:#A6F63255;color:inherit;border-radius:4px;padding:0 3px}
.ct-meta{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--ink-soft);flex-wrap:wrap}
.ct-tog{display:flex;gap:16px;flex-wrap:wrap;font-size:15px}
.ct-tog label{display:flex;gap:6px;align-items:center;font:500 15px var(--font-body);margin:0}
.ct-tog input{width:18px;height:18px}
.ct-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:14px 0}
.ct-tc{all:unset;box-sizing:border-box;width:100%;height:100%;cursor:pointer;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:6px;position:relative;min-height:112px}
.ct-tc[hidden]{display:none}
.ct-tc:hover{border-color:var(--ink)}
.ct-tc[aria-current=true]{border-color:#121212;box-shadow:0 0 0 3px #A6F632}
.ct-tc:focus-visible{outline:3px solid #A6F632;outline-offset:2px}
.ct-tc b{font:700 15px var(--font-display);padding-right:30px}
.ct-tc span{font-size:14px;color:var(--ink-soft);line-height:1.45}
.ct-fav{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:0;background:transparent;font-size:20px;cursor:pointer;color:#a8a29e;display:flex;align-items:center;justify-content:center}
.ct-fav[aria-pressed=true]{color:#e0a800}
.ct-fav:focus-visible{outline:3px solid #A6F632}
.ct-vars{display:grid;gap:10px}
.ct-vars .v{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;font-size:16px;line-height:1.55}
.ct-vars .v button{margin-top:8px}
@media(max-width:860px){.ct-wrap{grid-template-columns:1fr}.ct-editor{position:static;order:-1}}
@media(max-width:480px){.ct-two{grid-template-columns:1fr}.cx-grid{grid-template-columns:1fr}}
.prose.wide{max-width:1080px}
.ct-seo{max-width:760px}
.prose .ct-editor{padding:20px;margin:0}.prose .ct-editor h2{margin:0;padding:0}.prose .ct-editor p{margin:0}.prose .ct-editor label{margin:0 0 5px}
.prose section#top20{padding:0;margin:0}
.ct-video{margin:18px 0}.ct-video video{width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;background:#121212;display:block}.ct-video figcaption{font-size:14px;color:var(--ink-soft);margin-top:8px}
.cx-demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:16px 0}
.cx-demo{margin:0;background:#121212;border-radius:18px;overflow:hidden;color:#fff;display:flex;flex-direction:column}
.cx-demo video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#1b2a49}
.cx-demo figcaption{padding:10px 12px 12px;display:grid;gap:2px;font-size:13.5px;line-height:1.4}
.cx-demo figcaption b{font:700 14.5px var(--font-display)}
.cx-demo figcaption span{color:#d6d3d1}
.prose .cx-demos{padding:0;margin:26px 0}
@media(max-width:480px){.cx-demo-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(min-width:900px){.cx-demo-grid{grid-template-columns:repeat(4,1fr)}}