.chromatic-picker { width:min(290px,calc(100vw - 64px)); display:grid; gap:10px; color:var(--ink); }
.chromatic-picker label { display:grid; grid-template-columns:1fr 110px; align-items:center; gap:8px; font-size:.85rem; }
.chromatic-picker input { width:100%; min-width:0; }
.chromatic-picker input[type=color] { height:40px; padding:3px; cursor:pointer; }
.chromatic-picker p { font-size:.78rem; line-height:1.5; color:var(--ink-soft); }
.chromatic-preview { display:flex; height:40px; border-radius:10px; overflow:hidden; }
.chromatic-preview span { flex:1; }
html[data-theme=chromatic] body { background:var(--beige-light)!important; }
html[data-theme=chromatic] .navbar.unified-navbar { background:var(--green-dark)!important; }
html[data-theme=chromatic] .pj-source { color:var(--green); border-color:var(--border); }
html[data-theme=chromatic] .feed-post-actions-bar { background:var(--beige-light); }
html[data-theme=chromatic] .pj-demo .navbar .logo-dot,
html[data-theme=chromatic] .pj-demo .navbar .avatar-circle { background:var(--orange-bg)!important; color:var(--ink)!important; }
html[data-theme=chromatic] .pj-demo .pj-post-title { color:var(--ink); }
html[data-theme=chromatic] .pj-demo .pj-share,
html[data-theme=chromatic] .pj-demo .feed-post-image { background:var(--beige); }
html[data-theme=chromatic] .pj-demo .feed-post { border-color:var(--border-soft); }
html[data-theme=chromatic] .pj-demo .conversation-ticker { background:var(--green-dark); border-color:var(--green); }
html[data-theme=chromatic] .pj-demo .conversation-ticker .ticker-label,
html[data-theme=chromatic] .pj-demo .conversation-ticker b { color:white; }
html[data-theme=chromatic] .pj-demo .pj-source:hover { background:var(--green-bg); }
html[data-theme=chromatic] .pj-demo .pj-source:focus-visible { outline-color:var(--green); }