.prompt-list{gap:24px}
.prompt-card{padding:clamp(24px,3vw,38px);border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:0 2px 2px rgba(24,26,24,.025),0 16px 38px rgba(24,26,24,.055)}
.prompt-card-head{margin-bottom:28px}
.prompt-card h3{max-width:800px}
.prompt-card-body{margin-left:0}
.prompt-context{padding-top:20px;border-top:1px solid var(--line)}
.prompt-composer{margin:24px 0 0;padding:14px;border:1px solid #3B352B;border-radius:20px;background:#1F1C17;color:var(--paper);box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 30px rgba(24,26,24,.12)}
.composer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 1px 12px;border-bottom:1px solid rgba(247,246,242,.13)}
.composer-label{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font:11px 'DM Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}
.composer-message{position:relative;margin-top:12px;padding:15px 17px;border:1px solid rgba(247,246,242,.16);border-radius:15px 15px 15px 5px;background:#29241C}
.message-label{display:block;margin-bottom:10px;color:#B8AE99;font:9px 'DM Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.07em}
.composer-message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#f4f3ec;font:13px/1.55 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace}
.input-placeholder{display:block;margin-top:2px;padding:8px 10px;border:1px dashed rgba(240,184,74,.52);border-radius:7px;color:var(--accent);background:rgba(240,184,74,.08);font:12px/1.45 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;overflow-wrap:anywhere}
.prompt-composer .copy-button{flex:0 0 auto;padding:11px 16px;font-size:10px;font-weight:500}
.composer-hint{margin:10px 1px 0;color:#B8AE9E;font-size:11px;line-height:1.45}
.prompt-check{margin-top:24px;padding-top:17px;border-top:1px solid var(--line)}
.article-layout{padding-top:52px}
.how-to{margin-bottom:56px;padding:22px 24px;border-radius:18px}
.how-to h2{max-width:650px;margin:8px 0 11px;font-size:clamp(25px,2.9vw,36px);line-height:1.1}
.how-to p{margin-top:7px;font-size:14px;line-height:1.5}
.how-to p:last-child{font-size:13px}
.prompt-group{margin-bottom:68px}
.prompt-group .section-heading{display:block;margin-bottom:20px}
.prompt-group .section-heading h2{font-size:clamp(31px,3.3vw,45px)}
.prompt-group .section-heading p{margin-top:8px;font-size:14px;line-height:1.45}
.prompt-card{padding:20px;border-radius:18px;box-shadow:0 6px 22px rgba(24,26,24,.04)}
.prompt-card-head{display:block;margin-bottom:15px}
.prompt-card h3{font-size:clamp(21px,2.2vw,29px)}
.prompt-context{gap:16px;padding-top:15px}
.prompt-context p{font-size:13px;line-height:1.45}
.prompt-composer{margin-top:16px;padding:12px;border-radius:15px}
.composer-message{padding:12px 13px}
.composer-scroll{max-height:180px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;padding-right:8px}
.composer-scroll::-webkit-scrollbar{width:6px}
.composer-scroll::-webkit-scrollbar-thumb{border-radius:6px;background:var(--accent)}
.composer-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.input-placeholder{margin-top:10px}
.prompt-check{margin-top:16px;padding-top:12px}
.code-content{max-width:1160px;margin:auto;padding:48px 5.5vw 90px}
.code-copy-sample{display:inline-flex;align-items:center;padding:3px 10px;margin:0 4px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);font:500 11px 'DM Mono',ui-monospace,monospace;text-transform:uppercase;vertical-align:middle;pointer-events:none;user-select:none}
.code-note{max-width:790px;margin:0 0 52px;padding-left:17px;border-left:3px solid var(--accent);color:#50534b;font-size:15px;line-height:1.6}
.code-note code{font-family:'DM Mono',ui-monospace,monospace;color:var(--ink)}
.code-section{margin:0 0 58px;scroll-margin-top:30px}
.code-section-head{margin-bottom:18px}
.code-section-head h2{margin:0 0 6px;font-size:clamp(28px,3.4vw,42px);font-weight:500;line-height:1.1;letter-spacing:-.05em}
.code-section-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.code-list{border-top:1px solid var(--line)}
.code-row{display:grid;grid-template-columns:minmax(145px,190px) minmax(0,1fr) auto;align-items:center;gap:18px;min-height:77px;padding:14px 0;border-bottom:1px solid var(--line)}
.code-row code{width:max-content;max-width:100%;overflow-wrap:anywhere;color:var(--ink);font:600 16px 'DM Mono',ui-monospace,monospace}
.code-row>span{font-size:15px;line-height:1.45}
.code-copy{padding:8px 11px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--ink);font:10px 'DM Mono',ui-monospace,monospace;text-transform:uppercase;cursor:pointer}
.code-copy:hover,.code-copy:focus-visible{border-color:var(--ink);background:var(--accent)}
.code-back{display:inline-block;margin-top:24px;font-size:13px;text-underline-offset:4px}
@media(max-width:600px){.prompt-list{gap:20px}.prompt-card{padding:22px;border-radius:24px}.prompt-card-head{margin-bottom:20px}.prompt-composer{padding:12px;border-radius:18px}.composer-toolbar{align-items:flex-start}.composer-label{padding-top:10px;font-size:9px}.prompt-composer .copy-button{padding:10px 12px;font-size:9px}.composer-message{padding:12px;border-radius:13px 13px 13px 4px}.composer-message p{font-size:12.5px;line-height:1.5}.input-placeholder{font-size:11.5px;line-height:1.4}}
@media(max-width:600px){.code-content{padding:38px 20px 70px}.code-note{margin-bottom:42px;font-size:14px}.code-section{margin-bottom:45px}.code-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:17px 0}.code-row>span{grid-column:1/-1;grid-row:2;font-size:14px}.code-copy{grid-column:2;grid-row:1}}
@media(max-width:600px){.article-layout{padding-top:30px;padding-bottom:65px}.how-to{margin-bottom:42px;padding:18px}.how-to h2{font-size:26px}.how-to p{font-size:13px}.how-to p:last-child{font-size:12px}.prompt-group{margin-bottom:48px}.prompt-group .section-heading h2{font-size:31px}.prompt-group .section-heading p{font-size:13px}.prompt-card{padding:17px;border-radius:18px}.prompt-card-head{margin-bottom:13px}.prompt-context{gap:11px;padding-top:12px}.prompt-composer{margin-top:14px}.composer-scroll{max-height:150px}.prompt-check{margin-top:13px}}

/* Prompt page: flexible section links and one clear card per prompt. */
.article-aside>p{margin-bottom:12px}
.article-aside nav{display:flex;flex-wrap:wrap;gap:8px;border:0}
.article-aside a{flex:1 1 128px;min-height:33px;min-width:0;align-items:center;justify-content:center;padding:6px 12px;border:1px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);font:600 12px/1.3 Manrope,Arial,sans-serif;text-align:center}
.article-aside a:hover,.article-aside a:focus-visible{background:var(--ink);color:var(--paper)}
.article-aside a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.prompt-card{position:relative}
.prompt-card-head h3{padding-right:70px}
.prompt-card-number{position:absolute;top:20px;right:20px;color:var(--muted);white-space:nowrap}
.prompt-context{padding-top:0;border-top:0}
.prompt-composer{border:0;box-shadow:none}
.composer-toolbar{padding-bottom:10px}
.composer-message{margin-top:12px;padding:0;border:0;border-radius:0;background:transparent}
.input-placeholder{margin-top:12px;padding:10px 0 0;border:0;border-top:1px solid rgba(240,184,74,.35);border-radius:0;background:transparent}
.prompt-check{padding-top:0;border-top:0;font-size:12px}
@media(max-width:600px){.article-aside nav{gap:7px}.article-aside a{flex-basis:128px;min-height:33px;padding:6px 9px;font-size:12px}.prompt-card-head h3{padding-right:62px}.prompt-card-number{top:17px;right:17px;font-size:10px}.prompt-composer{padding:12px}.composer-message{padding:0}.input-placeholder{padding-top:9px}}

/* The same section filter works for prompt and code collections. */
.article-section-filters{display:flex;flex-wrap:wrap;gap:8px}
.article-section-filters .catalog-filter{flex:1 1 145px;min-width:0;cursor:pointer}
.code-filters{margin:0 0 34px}
.code-filters>p{margin:0 0 12px;color:var(--muted)}
@media(max-width:850px){.article-section-filters .catalog-filter{flex-basis:calc(50% - 4px)}}
@media(max-width:600px){.article-section-filters{gap:7px}.article-section-filters .catalog-filter{padding:6px 9px}.code-filters{margin-bottom:28px}}

/* One return area follows the save action on every collection page. */
.catalog-article-page .save-panel{margin-bottom:28px}
.article-end-nav{display:flex;gap:9px;margin:0 5.5vw;padding:18px 0;border-top:1px solid var(--line)}
.article-end-nav a{display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:44px;padding:10px 15px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:600 13px/1.3 Manrope,Arial,sans-serif;text-align:center;text-decoration:none}
.article-end-nav a:hover,.article-end-nav a:focus-visible{border-color:var(--ink);background:var(--accent)}
.article-end-nav a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:700px){.catalog-article-page .save-panel{margin-bottom:22px}.article-end-nav{gap:8px;margin:0 20px;padding:14px 0}.article-end-nav a{min-height:44px;padding:9px 11px;font-size:12px}}


.code-section-head h3{margin:0 0 6px;font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.12;letter-spacing:-.045em}


.code-instruction{max-width:960px;margin:0 0 32px;padding:22px 26px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:18px;background:var(--surface);box-shadow:0 2px 12px rgba(24,26,24,.03)}
.code-instruction-title{margin:0 0 10px;font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.code-instruction-text{margin:0;color:#2b2f29;font-size:15px;line-height:1.6}
.instruction-btn{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--ink);border-radius:14px;background:#FFF3D0;color:var(--ink);font:600 11px 'DM Mono',ui-monospace,monospace;letter-spacing:.02em;vertical-align:baseline;white-space:nowrap}
@media(max-width:700px){
  .code-instruction{padding:16px 18px;margin-bottom:26px}
  .code-instruction-title{font-size:20px;margin-bottom:8px}
  .code-instruction-text{font-size:14px}
}