html:has(.chart-prompts){background:#f5f5f4;scrollbar-gutter:stable}
html.cs-locked{overflow:hidden}

.chart-prompts{--ink:#1c1917;--muted:#57534e;--faint:#78716c;--line:#e7e5e4;--card:#fff;--page:#f5f5f4;--focus:#2563eb;background:var(--page);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55;min-height:100vh;width:100%}
.chart-prompts *{box-sizing:border-box}
.chart-prompts [hidden]{display:none!important}
.chart-prompts a,.chart-prompts button{-webkit-tap-highlight-color:transparent}
.chart-prompts :focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.cs-wrap{margin:0 auto;max-width:1240px;padding:28px 32px 48px}
.cs-topline{align-items:center;color:var(--faint);display:flex;font-size:13px;gap:8px}
.cs-topline a{color:var(--muted);text-decoration:none}
.cs-topline a:hover{color:var(--ink);text-decoration:underline}
.cs-intro{margin:36px 0 26px;max-width:720px}
.cs-intro h1{font-family:Charter,"Bitstream Charter",Cambria,Georgia,serif;font-size:52px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
.cs-intro p{color:var(--muted);font-size:18px;margin:14px 0 0}

.cs-toolbar{align-items:center;background:rgba(245,245,244,.92);backdrop-filter:blur(8px);display:flex;flex-wrap:wrap;gap:10px 14px;margin:0 -8px 14px;padding:10px 8px;position:sticky;top:0;z-index:5}
.cs-search{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--faint);display:flex;flex:1 1 260px;gap:8px;max-width:420px;padding:0 14px}
.cs-search:focus-within{border-color:#a8a29e}
.cs-search input{background:transparent;border:0;color:var(--ink);flex:1;font-family:inherit;font-size:14px;min-width:0;outline:none;padding:9px 0}
.cs-search input::placeholder{color:#a8a29e}
.chart-prompts .cs-search input:focus-visible{outline:none}
.cs-sr{clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
.cs-filters{display:flex;flex-wrap:wrap;gap:8px}
.cs-filters a{background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:14px;font-weight:500;line-height:1;padding:9px 14px;text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.cs-filters a span{color:var(--faint);font-variant-numeric:tabular-nums;margin-left:4px}
.cs-filters a:hover{border-color:#d6d3d1;color:var(--ink)}
.cs-filters a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fafaf9}
.cs-filters a[aria-current="true"] span{color:#a8a29e}

.cs-grid{scroll-margin-top:72px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));list-style:none;margin:0;padding:0}
.cs-grid[aria-busy="true"]{opacity:.45;transition:opacity .15s .1s}
.cs-empty{color:var(--muted);font-size:15px;grid-column:1/-1;padding:40px 0;text-align:center}
.cs-empty a{color:var(--ink)}
.cs-more{display:flex;justify-content:center;padding:28px 0 4px}
.cs-more a{background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:14px;font-weight:500;padding:10px 18px;text-decoration:none}
.cs-more a:hover{border-color:#d6d3d1}
.cs-more[aria-busy="true"] a{color:var(--faint);pointer-events:none}
/* Off-screen cards skip layout and paint, which keeps a long gallery cheap to render. */
.cs-grid>li{contain-intrinsic-block-size:auto 380px;content-visibility:auto}
.cs-card{background:var(--card);border:1px solid var(--line);border-radius:14px;color:inherit;display:flex;flex-direction:column;height:100%;overflow:hidden;text-decoration:none;transition:box-shadow .2s,transform .2s,border-color .2s}
.cs-card:hover{border-color:#d6d3d1;box-shadow:0 12px 28px -12px rgba(28,25,23,.28);transform:translateY(-2px)}
.cs-thumb{aspect-ratio:16/10;background:#e7e5e4;border-bottom:1px solid var(--line);display:block;overflow:hidden}
.cs-thumb img{display:block;height:100%;object-fit:cover;transition:transform .35s ease;width:100%}
.cs-card:hover .cs-thumb img{transform:scale(1.02)}
.cs-card-body{display:grid;gap:6px;grid-template-columns:1fr auto;padding:14px 16px 16px}
.cs-card-title{font-family:Charter,"Bitstream Charter",Cambria,Georgia,serif;font-size:19px;font-weight:700}
.cs-card-summary{color:var(--muted);font-size:14px;grid-column:1/-1}
/* Favorites: stars need JavaScript, so they only show once the controller runs. */
.cs-grid>li{position:relative}
.cs-star{display:none}
.cs-ready .cs-star{align-items:center;backdrop-filter:blur(4px);background:rgba(28,25,23,.5);border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;cursor:pointer;display:flex;height:36px;justify-content:center;padding:0;position:absolute;right:10px;top:10px;transition:background .15s,transform .15s;width:36px;z-index:1}
.cs-star::before{background:currentColor;content:"";height:18px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.25 4.1 1 5.8L12 16.9l-5.25 2.7 1-5.8L3.5 9.7l5.9-.9z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.25 4.1 1 5.8L12 16.9l-5.25 2.7 1-5.8L3.5 9.7l5.9-.9z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;width:18px}
.cs-star:hover{background:rgba(28,25,23,.72);transform:scale(1.06)}
.cs-star[aria-pressed="true"]{background:rgba(28,25,23,.72);color:#fbbf24}
.cs-star[aria-pressed="true"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.25 4.1 1 5.8L12 16.9l-5.25 2.7 1-5.8L3.5 9.7l5.9-.9z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.25 4.1 1 5.8L12 16.9l-5.25 2.7 1-5.8L3.5 9.7l5.9-.9z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.cs-favorites-toggle{align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;line-height:1;padding:9px 14px;transition:background .15s,border-color .15s,color .15s}
.cs-favorites-toggle[hidden]{display:none}
.cs-favorites-toggle svg{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:2}
.cs-favorites-toggle span{color:var(--faint);font-variant-numeric:tabular-nums}
.cs-favorites-toggle:hover{border-color:#d6d3d1;color:var(--ink)}
.cs-favorites-toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fafaf9}
.cs-favorites-toggle[aria-pressed="true"] svg{fill:#fbbf24;stroke:#fbbf24}
.cs-favorites-toggle[aria-pressed="true"] span{color:#a8a29e}

.cs-tags{align-items:center;display:inline-flex;gap:6px}
.cs-tag{background:#f5f5f4;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;line-height:1;padding:5px 7px;text-transform:uppercase}
.cs-tag-dark{background:#1c1917;border-color:#1c1917;color:#e7e5e4}

.cs-footer{border-top:1px solid var(--line);color:var(--faint);display:flex;flex-wrap:wrap;font-size:14px;gap:12px 32px;justify-content:space-between;margin-top:40px;padding-top:22px}
.cs-footer p{margin:0;max-width:680px}
.cs-footer a{color:var(--muted);font-weight:500;text-decoration:none}
.cs-footer a:hover{color:var(--ink);text-decoration:underline}

/* Detail dialog */
.cs-dialog{background:var(--card);border:0;border-radius:18px;inset:0;margin:auto;position:fixed;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);color:var(--ink);height:min(880px,calc(100dvh - 48px));max-height:none;max-width:none;overflow:hidden;padding:0;width:min(1320px,calc(100vw - 48px))}
.cs-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.cs-dialog::backdrop{backdrop-filter:blur(3px);background:rgba(28,25,23,.62)}
.cs-dialog-bar{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:10px 12px 10px 20px}
.cs-counter{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums;margin:0}
.cs-dialog-nav{display:flex;gap:4px}
.cs-icon-button{align-items:center;background:transparent;border:0;border-radius:10px;color:var(--muted);cursor:pointer;display:inline-flex;height:38px;justify-content:center;width:38px}
.cs-icon-button:hover{background:#f5f5f4;color:var(--ink)}
.cs-icon-button[hidden]{display:none}
.cs-dialog-star svg{fill:none;stroke:currentColor;stroke-width:2}
.cs-dialog-star[aria-pressed="true"]{color:#d97706}
.cs-dialog-star[aria-pressed="true"] svg{fill:#fbbf24;stroke:#d97706}

.cs-dialog-body{display:grid;min-height:0;position:relative}
.cs-dialog-body[aria-busy="true"]>*{opacity:.35;transition:opacity .15s .12s}
.cs-dialog-body[aria-busy="true"]::after{animation:cs-spin .7s linear infinite,cs-appear 0s .15s both;border:3px solid #d6d3d1;border-radius:50%;border-top-color:var(--ink);content:"";height:30px;left:calc(50% - 15px);position:absolute;top:calc(50% - 15px);width:30px}
@keyframes cs-spin{to{transform:rotate(360deg)}}
@keyframes cs-appear{from{visibility:hidden}to{visibility:visible}}
.cs-load-error{align-self:center;color:var(--muted);font-size:15px;justify-self:center;margin:0;padding:32px;text-align:center}
.cs-load-error a{color:var(--ink)}
.cs-detail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(360px,1fr);min-height:0}
.cs-figure{align-items:center;background:#f5f5f4;display:flex;justify-content:center;margin:0;min-height:0;padding:28px}
.cs-figure-dark{background:#1c1917}
.cs-figure img{aspect-ratio:16/10;border-radius:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.4);display:block;height:auto;max-height:100%;max-width:100%;object-fit:contain;width:auto}
.cs-detail-body{border-left:1px solid var(--line);min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 24px 28px}
.cs-detail-head{align-items:center;display:flex;flex-wrap:wrap;gap:10px 14px}
.cs-detail-head h2{font-family:Charter,"Bitstream Charter",Cambria,Georgia,serif;font-size:30px;font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:0}
.cs-detail-summary{color:var(--muted);font-size:15px;margin:10px 0 18px}

.cs-palette{display:grid;gap:6px 14px;grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0 0 22px;padding:0}
.cs-palette li{align-items:center;display:grid;font-size:13px;gap:8px;grid-template-columns:18px minmax(0,1fr) auto}
.cs-palette li span:nth-child(2){color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-palette code{color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.cs-swatch{border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);height:18px;width:18px}

.cs-prompt{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cs-prompt-top{align-items:flex-start;background:#fafaf9;border-bottom:1px solid var(--line);display:flex;gap:14px;justify-content:space-between;padding:14px 14px 14px 16px}
.cs-prompt-top h3{font-size:14px;font-weight:650;margin:0}
.cs-prompt-top p{color:var(--faint);font-size:13px;line-height:1.4;margin:3px 0 0}
.cs-copy{background:var(--ink);border:0;border-radius:9px;color:#fafaf9;cursor:pointer;flex:none;font-family:inherit;font-size:13px;font-weight:600;line-height:1;min-width:110px;padding:10px 14px;transition:background .15s}
.cs-copy:hover{background:#44403c}
.cs-copy.is-copied{background:#15803d}
.cs-prompt pre{background:#fff;color:#292524;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;margin:0;padding:16px;white-space:pre-wrap;word-break:break-word}
.cs-prompt pre:focus-visible{outline-offset:-3px}

.cs-toast{z-index:2;background:var(--ink);border-radius:10px;bottom:18px;box-shadow:0 10px 30px rgba(0,0,0,.25);color:#fafaf9;font-size:14px;left:50%;margin:0;max-width:calc(100% - 32px);padding:10px 16px;pointer-events:none;position:absolute;transform:translateX(-50%)}
.cs-toast:empty{display:none}

@media (max-width:1000px){
  .cs-detail{grid-template-columns:1fr;overflow-y:auto;overscroll-behavior:contain}
  .cs-figure{padding:16px}
  .cs-detail-body{border-left:0;border-top:1px solid var(--line);overflow:visible}
}
@media (max-width:640px){
  .cs-wrap{padding:20px 16px 36px}
  .cs-intro{margin:26px 0 20px}
  .cs-intro h1{font-size:38px}
  .cs-intro p{font-size:16px}
  .cs-search{flex-basis:100%;max-width:none}
  .cs-filters{gap:6px}
  .cs-filters a{font-size:13px;padding:8px 11px}
  .cs-grid{gap:14px;grid-template-columns:minmax(0,1fr)}
  .cs-dialog{border-radius:0;height:100dvh;width:100vw}
  .cs-figure{padding:10px}
  .cs-figure img{border-radius:6px}
  .cs-detail-body{padding:18px 16px 28px}
  .cs-palette{grid-template-columns:1fr}
  .cs-prompt-top{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .chart-prompts *{transition:none!important}
  .cs-dialog-body[aria-busy="true"]::after{animation-duration:2s,0s}
}