@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#20232a;--muted:#72757d;--bg:#f8f9fb;--line:#e5e7eb;--lime:#d1f894}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--ink);font:16px 'DM Sans',sans-serif}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select{outline-offset:5px}button{cursor:pointer}header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line)}.logo{font-family:Manrope,sans-serif;font-size:23px;font-weight:800;letter-spacing:-1px;display:flex;align-items:center}.org{color:#90949c}.mark{font-size:24px;background:var(--ink);color:white;border-radius:11px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;margin-right:10px;letter-spacing:-5px;padding-right:6px}.mark span{color:var(--lime)}nav{display:flex;gap:32px;align-items:center}nav a,nav button{font-size:14px;color:var(--muted)}nav button{border:0;background:none;padding:0}.active{color:var(--ink);font-weight:600}.free{border:1px solid var(--line);background:white;border-radius:30px;padding:12px 18px;font-size:14px}.free span{margin-left:10px;color:#526923}.hero{position:relative;text-align:center;padding:62px 24px 52px}.eyebrow{font-size:12px;color:var(--muted);display:flex;justify-content:center;gap:12px;align-items:center}.eyebrow span{border:1px solid #d9dfd0;border-radius:5px;padding:6px 9px;color:#455138;font-size:10px;letter-spacing:1px;font-weight:700}h1{font:800 clamp(42px,5.2vw,76px)/1.08 Manrope,sans-serif;letter-spacing:-4px;margin:23px 0}.accent{position:relative;color:#6b7e54}.hero p{font-size:17px;line-height:1.6;color:var(--muted);margin:22px 0}.primary{display:inline-block;border-radius:30px;background:var(--ink);color:white;padding:15px 27px;font-size:14px;font-weight:600;transition:background .2s}.primary:hover{background:#475339}.hero-meta{margin-top:18px;color:#868a92;font-size:12px}.edition{position:absolute;right:4%;bottom:30px;color:#969ba4;font-size:10px;letter-spacing:1.4px}.library{padding:34px 4% 65px}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.tiny{font-size:10px;letter-spacing:1.8px;font-weight:700;color:#80858c}h2{font:700 28px/1.2 Manrope,sans-serif;letter-spacing:-1px;margin:9px 0}h2>span{color:#78964e}.search{display:flex;gap:10px;align-items:center;width:320px;background:white;border:1px solid var(--line);border-radius:10px;padding:12px 15px}.search>span{font-size:24px;line-height:1;color:#717680}.search input{width:100%;border:0;outline:none;background:none;font-size:13px;min-width:0}.search kbd{border:1px solid var(--line);border-radius:4px;padding:0 6px;color:#92959c}.toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:20px;gap:15px}#categories{display:flex;gap:6px;flex-wrap:wrap}#categories button{border:0;color:#757b83;background:none;border-radius:7px;padding:9px 14px;font-size:13px}#categories button.selected{color:var(--ink);background:var(--lime);font-weight:600}#categories button:hover{background:#edf0e7}.sort{font-size:12px;color:var(--muted);white-space:nowrap}.sort select{margin-left:8px;border:0;background:none;color:var(--ink);font-size:13px}.result-line{display:flex;justify-content:space-between;font-size:12px;color:#868b92;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:27px 20px}.card{min-width:0}.preview-button{width:100%;border:1px solid #e0e3e6;border-radius:12px;padding:0;overflow:hidden;text-align:left;transition:transform .25s,box-shadow .25s}.preview-button:hover{transform:translateY(-4px);box-shadow:0 12px 25px #252b3810}.mock{height:233px;position:relative;padding:24px;overflow:hidden;color:#1f2624;background:#eceee8}.mock-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:7px}.mock-brand{font-size:12px;font-weight:800;letter-spacing:-.5px}.mock h3{font:700 36px/1.04 Manrope,sans-serif;white-space:pre-line;letter-spacing:-1.6px;margin:33px 0 13px}.mock-small{font-size:8px;opacity:.65}.mock-cta{font-size:7px;padding:6px 10px;border-radius:20px;display:inline-block;background:currentColor;margin-top:15px}.mock-cta span{color:white}.mock-line{position:absolute;bottom:19px;left:24px;right:24px;border-top:1px solid currentColor;opacity:.2}.mock-footer{position:absolute;bottom:7px;right:24px;font-size:7px;letter-spacing:1px}.purple{background:#241c38;color:#ded2fb}.purple h3{text-align:center;font-size:30px}.purple .mock-small{text-align:center}.purple .mock-cta{background:#bcabf1}.purple .mock-cta span{color:#241c38}.green{background:#d8e797;color:#344832}.green h3{font-family:Georgia;font-weight:400;font-size:40px}.gray{background:#e7e8eb;color:#32363a}.gray h3{font-weight:400}.orange{background:#f35d3f;color:#ffefde}.orange h3{font-size:37px;letter-spacing:-2px}.blue{background:#e9eefb;color:#2d50ba}.blue h3{font-weight:600}.sand{background:#eee9e1;color:#4c4a42}.sand h3{font:400 35px/1.05 Georgia;letter-spacing:-1px}.dark{background:#172d2b;color:#a3ddc7}.pink{background:#ecd7e1;color:#712843}.pink h3{font-family:Georgia;font-weight:400}.white{background:#fff;color:#283955}.white h3{text-align:center;font-size:31px}.indigo{background:#1d223b;color:#e2e5ff}.indigo h3{font-size:32px}.sage{background:#e5eeea;color:#316051}.sage h3{font:400 43px/1 Georgia}.card-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:13px;gap:10px}.card-bottom h3{font-size:14px;font-weight:600;margin:0 0 5px}.meta{color:var(--muted);font-size:12px}.copy{background:white;border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:12px;color:#666c73;white-space:nowrap}.copy:hover{background:var(--lime);color:var(--ink)}.how{margin:0 4%;padding:50px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 2fr;gap:40px}.how h2{font-size:37px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.steps article>span{font-size:12px;color:#9399a1}.steps h3{font-size:15px;margin:20px 0 10px}.steps p{font-size:14px;color:var(--muted);line-height:1.6}footer{padding:32px 4%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}footer .logo{font-size:18px}footer p,footer>span{font-size:12px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:18px;width:min(780px,calc(100% - 32px));max-height:85vh;padding:28px;color:var(--ink)}dialog::backdrop{background:#171d295c;backdrop-filter:blur(5px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top button{border:0;background:#f0f2f4;border-radius:50%;width:32px;height:32px}.detail-title{font-size:30px;margin:18px 0 8px}.detail-desc{font-size:15px;color:var(--muted)}pre{white-space:pre-wrap;font:14px/1.7 'DM Sans',sans-serif;background:#f5f6f8;border:1px solid var(--line);padding:22px;border-radius:10px}dialog .mock{border-radius:10px;margin-top:22px}dialog a.source{font-size:13px;text-decoration:underline}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:10px;padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}#toast.show{opacity:1}#empty{text-align:center;padding:60px;color:var(--muted)}@media(min-width:1600px){.mock{height:290px}.mock h3{font-size:45px}.purple h3,.white h3,.indigo h3{font-size:40px}}@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}nav{gap:20px}.mock h3{font-size:32px}.search{width:280px}}@media(max-width:800px){header{height:75px}nav{display:none}.logo{font-size:19px}.free{font-size:12px;padding:10px}.hero{padding-top:42px}h1{letter-spacing:-2px}.edition{display:none}.library-heading{gap:20px;align-items:start;flex-direction:column}.search{width:100%}.grid{grid-template-columns:repeat(2,1fr)}.how{grid-template-columns:1fr}.steps{gap:20px}footer{flex-wrap:wrap}.mock{padding:18px}.mock-nav>span:last-child{display:none}.toolbar{align-items:start;flex-direction:column}}@media(max-width:480px){.eyebrow{flex-direction:column;gap:10px}.hero p{font-size:15px}.hero-meta{font-size:11px}h2{font-size:24px}.grid{gap:23px 12px}.mock{height:190px;padding:15px}.mock h3,.orange h3,.green h3,.sand h3,.sage h3{font-size:26px;letter-spacing:-1px;margin-top:30px}.purple h3,.white h3,.indigo h3{font-size:24px}.mock-small{font-size:7px}.mock-brand{font-size:10px}.card-bottom{align-items:start}.copy{font-size:0;padding:7px}.copy:before{content:'⧉';font-size:16px}.card-bottom h3{font-size:13px}.meta{font-size:11px}.steps{grid-template-columns:1fr}.steps h3{margin-top:12px}.result-line>span:last-child{display:none}footer p{display:none}.mark{width:32px;height:32px;font-size:20px}dialog{padding:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Visual collection */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px}.live-thumb{aspect-ratio:1.6;position:relative;background:#151723;overflow:hidden}.live-thumb iframe{border:0;position:absolute;left:0;top:0;width:400%;height:400%;transform:scale(.25);transform-origin:top left;pointer-events:none}.preview-shade{position:absolute;inset:0;background:linear-gradient(transparent 70%,#0006)}.live-label{position:absolute;bottom:14px;left:15px;color:white;font-size:10px;letter-spacing:1.4px;background:#0004;backdrop-filter:blur(10px);padding:5px 8px;border:1px solid #ffffff33;border-radius:4px}.view-label{position:absolute;inset:0;display:grid;place-items:center;background:#0003;color:white;font-size:14px;opacity:0;transition:opacity .2s}.preview-button:hover .view-label{opacity:1}.card-description{font-size:14px;line-height:1.6;color:var(--muted);margin:12px 0}.card-tags{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#9297a0;border-top:1px solid var(--line);padding-top:12px}.detail-heading{display:flex;justify-content:space-between;align-items:center;gap:24px}.detail-heading .primary{white-space:nowrap}.detail-info{display:flex;gap:24px;font-size:12px;color:var(--muted);margin:18px 0}.detail-preview{height:430px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#151723}.detail-preview iframe{border:0;width:100%;height:100%}.preview-tools{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted);margin:14px 0 28px}.preview-tools a{color:var(--ink);text-decoration:underline}.spec-heading{font-size:18px;margin-bottom:10px}dialog{width:min(1120px,calc(100% - 32px));max-height:90vh}dialog pre{max-height:450px;overflow:auto;font-family:ui-monospace,monospace;font-size:13px;line-height:1.7}.library-heading h2{font-size:28px}@media(max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card-tags{flex-wrap:wrap}}@media(max-width:640px){.grid{grid-template-columns:1fr}.live-thumb{aspect-ratio:1.5}.copy{font-size:12px;padding:8px 12px}.copy:before{content:none}.card-bottom h3{font-size:16px}.meta{font-size:12px}.detail-heading{display:block}.detail-heading .primary{margin-top:12px}.detail-preview{height:530px}.detail-info{flex-wrap:wrap;gap:8px}.preview-tools{flex-wrap:wrap}.library-heading h2{font-size:24px}}

.live-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.live-thumb iframe{opacity:0;transition:opacity .2s}.preview-button:hover .live-thumb.ready iframe{opacity:1}.preview-button:hover .view-label{opacity:0}.preview-button:hover .live-label{background:#0009}.preview-button:focus-visible .view-label{opacity:1}

/* Ads only mount when a prompt is opened. */
.prompt-ad-layout{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:28px}.prompt-main{min-width:0}.advertisement{display:flex;align-items:center;flex-direction:column;gap:10px}.ad-desktop{padding-top:22px}.ad-label{font-size:10px;letter-spacing:1.5px;color:#9196a0}.banner-ad{border:0;display:block;flex:none;background:#f1f3f6;border-radius:6px}.ad-mobile{margin:26px auto;width:300px;max-width:100%}dialog{width:min(1320px,calc(100% - 32px))}@media(max-width:999px){.prompt-ad-layout{display:block}.detail-heading{flex-wrap:wrap}}@media(max-width:370px){dialog{width:calc(100% - 16px);padding:10px}.banner-ad{max-width:100%}}

.home-ad{margin:0 4%;padding:36px 0;border-top:1px solid var(--line)}#home-banner{width:300px;max-width:100%;height:250px}#home-banner .banner-ad{max-width:100%}

/* Ads occupy transparent rails outside the independently scrolling white prompt panel. */
#detail{background:transparent;border:0;border-radius:0;padding:0;overflow:visible;width:min(1320px,calc(100% - 32px));max-height:90dvh}
.prompt-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;max-height:90dvh;overflow:auto;min-width:0;overscroll-behavior:contain}
.prompt-ad-layout{display:block}
#detail.with-rails[open]{display:grid;grid-template-columns:160px minmax(0,1fr) 160px;gap:28px;align-items:start;width:min(1776px,calc(100% - 48px))}
.prompt-rail{width:160px;max-height:90dvh;overflow:auto;padding-top:12px;overscroll-behavior:contain}
.prompt-rail .ad-label{color:#3f4652;background:#f8f9fbdb;padding:5px 8px;border-radius:4px}
@media(max-width:640px){.prompt-panel{padding:20px}#detail{width:calc(100% - 24px)}}
@media(max-width:370px){.prompt-panel{padding:10px}#detail{width:calc(100% - 16px)}}