/* Creative library refresh. Native CSS; variance 5, motion 5, density 6.
   Neutral canvas, lime reserved for selected controls. 8px controls / 12px media.
   Catalogs use three generous previews per row, with a fourth on wide displays. */
.header{height:72px;gap:36px;background:var(--surface);padding-inline:32px}
.brand{font-size:20px;letter-spacing:-.8px}.brand-mark{border-radius:10px}
.header-search{border-radius:8px;background:var(--bg);padding:7px 12px;font-size:12px;gap:24px}
.header-search kbd{font-size:10px;color:var(--muted)}
.theme-toggle{border:0;background:var(--soft);width:32px;height:32px;font-size:22px;border-radius:8px}
.nav-dropdown>summary{font-size:13px;padding:9px 12px;gap:8px}
.nav-dropdown>summary.nav-active{background:transparent;color:var(--ink);font-weight:600}
.nav-dropdown[open]>summary,.nav-dropdown>summary:hover{background:var(--soft)}
.mega-panel{top:calc(100% + 8px);border-radius:14px;padding:28px;box-shadow:0 12px 32px var(--shadow)}
.button{border-radius:8px}.motion-toggle{border-radius:8px}
.catalog-layout{max-width:1760px;grid-template-columns:192px minmax(0,1fr);gap:36px;padding:0 32px 64px}
.catalog-sidebar{top:72px;max-height:calc(100dvh - 72px);padding:28px 20px 28px 0;border-color:var(--line)}
.sidebar-panel>summary{font-size:12px;margin:0 10px 24px;color:var(--muted);font-weight:400}
.sidebar-panel>summary>span{font-size:14px}
.sidebar-panel .nav-group{margin-bottom:25px}
.nav-group .nav-group-heading{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.sidebar-panel .nav-group a{font-size:12px;padding:9px 10px;margin:2px 0;border-radius:6px}
.nav-group small{opacity:.8}
.nav-group a[aria-current=page]{background:var(--soft);color:var(--ink);font-weight:600;box-shadow:inset 2px 0 0 #8da93f}
[dir=rtl] .nav-group a[aria-current=page]{box-shadow:inset -2px 0 0 #8da93f}
.nav-group a[aria-current=page] small{color:var(--muted)}
.catalog-content{padding-top:36px}
.catalog-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px);gap:32px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line)}
.catalog-content .catalog-heading h1{font-size:40px;letter-spacing:-.045em;line-height:1.1}
.catalog-content .catalog-heading p{font-size:13px;line-height:1.65;margin-top:12px;max-width:480px;text-wrap:pretty}
.catalog-content .search-form{margin:0;max-width:none;gap:0;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.catalog-content .search-form:focus-within{outline:2px solid #7e9630;outline-offset:2px}
.catalog-content .search-form input[type=search]{border:0;background:transparent;border-radius:5px;padding:9px 11px;font-size:12px;outline:none}
.catalog-content .search-form .button{min-height:36px;padding:8px 12px;font-size:11px;border-radius:6px;flex-shrink:0}
.catalog-toolbar{margin:18px 0 22px;min-height:34px}
.catalog-toolbar .results-count{font-size:12px;color:var(--muted)}
.sort-form{font-size:11px;gap:10px;color:var(--muted)}
.sort-form select{border-radius:7px;padding:7px 10px;font-size:11px;background:var(--surface)}
.catalog-content .skill-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.card-preview{border-radius:12px;border:0;box-shadow:0 0 0 1px var(--line);isolation:isolate}
.skill-card .card-preview{aspect-ratio:1.5}
.card-info{margin-top:13px;gap:12px;align-items:center;padding-inline:1px}
.card-info h3{font-size:14px;font-weight:600;letter-spacing:-.025em;line-height:1.45}
.card-info p{display:flex;align-items:center;gap:10px;font-size:11px;margin-top:5px}
.card-info p .card-free{display:inline-block;margin:0;opacity:1;font-size:10px;padding-inline-start:10px;border-inline-start:1px solid var(--line);color:var(--muted)}
.save{width:32px;height:32px;min-width:32px;border-radius:8px;border:1px solid var(--line);font-size:20px;background:var(--surface);transition:background .18s,border-color .18s}
.save:hover,.save[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.card-preview:focus-visible{outline-offset:5px}.skill-card h3 a:hover,.library-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.library-card-info{padding-top:14px}.library-meta{font-size:10px;margin-bottom:7px}
.library-card h3{font-size:14px;line-height:1.5}.prompt-excerpt{line-height:1.7}
.catalog-content .library-filters{margin:18px 0 22px;gap:10px;font-size:11px}
.library-filters select{border-radius:7px;min-height:34px;padding:6px 28px 6px 10px;font-size:11px}
.library-filters .button{min-height:34px;font-size:11px;padding:7px 12px}
.pagination .button{font-size:12px}.pagination{margin-top:44px}
@media(min-width:1800px){.catalog-content .skill-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px) and (max-width:1200px){
 .header{gap:18px;padding-inline:24px}.catalog-layout{padding-inline:24px;grid-template-columns:172px minmax(0,1fr);gap:26px}
 .catalog-sidebar{padding-inline-end:14px}.catalog-intro{grid-template-columns:1fr;gap:20px;padding-bottom:22px}
 .catalog-content .search-form{max-width:520px}.catalog-content .skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .catalog-content .catalog-heading h1{font-size:36px}
}
@media(max-width:767px){
 .header{height:64px;min-height:64px;padding-inline:18px;gap:10px}.brand{font-size:18px}.brand-mark{width:30px;height:30px;font-size:27px}
 .header-tools{gap:5px}.theme-toggle{width:28px;height:28px;font-size:20px}.languages summary{padding-inline:4px}
 .nav-toggle{font-size:11px;padding:6px 8px;min-height:32px}.primary-navigation{max-height:calc(100dvh - 64px)}
 .mega-panel,.nav-dropdown[data-section=resources] .mega-panel{padding:14px 3px 18px;box-shadow:none;border-radius:0}
 .catalog-layout{padding:0 18px 48px}.catalog-sidebar,[dir=rtl] .catalog-sidebar{padding:16px 0 0;border:0;max-height:none}
 .sidebar-panel{border-radius:8px;background:var(--surface)}.sidebar-panel>summary{margin:0;padding:10px 12px;font-size:12px;color:var(--ink)}
 .catalog-content{padding-top:26px}.catalog-intro{grid-template-columns:1fr;gap:20px;padding-bottom:20px}
 .catalog-content .catalog-heading h1{font-size:34px}.catalog-content .catalog-heading p{font-size:12px;line-height:1.65;margin-top:10px;max-width:100%}
 .catalog-content .search-form{width:100%;max-width:none}.catalog-content .search-form input[type=search]{font-size:12px;padding-inline:9px}
 .catalog-content .search-form .button{font-size:10px;padding-inline:10px}
 .catalog-toolbar{margin:14px 0 19px;align-items:center}.catalog-toolbar .results-count{padding:0;font-size:11px}
 .sort-form select{font-size:10px;max-width:155px}
 .catalog-content .skill-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
 .card-preview{border-radius:9px}.skill-card .card-preview{aspect-ratio:1.25}.card-info{margin-top:10px;align-items:flex-start;gap:5px}
 .card-info h3{font-size:12px;line-height:1.45}.card-info p{font-size:10px;gap:6px}.card-info p .card-free{font-size:9px;padding-inline-start:6px}
 .save{width:27px;height:27px;min-width:27px;font-size:17px;border-radius:7px}
 .library-card h3{font-size:12px}.library-meta{font-size:9px}.library-card-info{padding-top:10px}
 .catalog-content .library-filters{margin:14px 0 19px}.library-filters>span{margin:0}
 .motion-floating{font-size:10px;min-height:36px;padding:7px 10px;bottom:12px;inset-inline-end:12px}
}
@media(max-width:359px){.header{padding-inline:12px;gap:6px}.brand{font-size:16px}.brand-mark{width:26px;height:26px}.header-tools{gap:2px}.nav-toggle{padding-inline:6px}.catalog-layout{padding-inline:14px}.card-free{display:none!important}}

/* Prompt artwork defines its own frame. Known image dimensions reserve its true height. */
.prompt-card .card-preview{aspect-ratio:auto;background:transparent}
.prompt-card .card-preview img{width:100%;height:auto;display:block}
.prompt-card .card-preview video{height:100%}
.prompt-card .card-preview img,.prompt-card .card-preview video{object-fit:contain}
.prompt-card .card-preview:hover img{transform:none}
.prompt-library .prompt-excerpt{-webkit-line-clamp:2;min-height:0;font-size:11px;margin-top:8px}
.prompt-library .library-card-info{padding-top:12px}
.prompt-library .library-card h3{font-size:13px;line-height:1.45}
.prompt-library .prompt-card-bottom{padding-top:8px;margin-top:10px;border-top:1px solid var(--line)}
.nav-ready .library-filters .filter-submit{display:none}
@media(min-width:1280px){.catalog-content .library-grid:has(.prompt-card){grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}}
@media(min-width:1024px) and (max-width:1279px){.catalog-content .library-grid:has(.prompt-card){grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}}
@media(max-width:767px){.prompt-library .library-card h3{font-size:12px}.prompt-library .prompt-excerpt{display:none}.prompt-library .prompt-card-bottom{margin-top:8px;padding-top:6px}}

/* Progressive masonry: source order and focus order stay intact. */
.prompt-library .library-grid{align-items:start}
.prompt-library .library-grid.masonry-ready{grid-auto-rows:1px;row-gap:0;grid-auto-flow:row}
.prompt-library .library-grid.masonry-ready>.prompt-card{align-self:start;min-height:0}