.code-story {
    max-width:1160px;
    margin:0 auto;
    padding:28px 0 56px}
.code-hero {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:56px;
    align-items:center;
    padding:40px 0 68px}
.code-hero h1 {
    font-size:clamp(2.5rem,5vw,4.3rem);
    line-height:1.04;
    letter-spacing:-.04em;
    margin:18px 0 24px}
.code-small {
    font-size:.9rem;
    line-height:1.6;
    color:#5c6571}
.code-workflow {
    background:#17222d;
    color:#f7f3eb;
    padding:32px;
    border-radius:20px;
    box-shadow:0 20px 50px #17222d18}
.code-workflow-label,.code-number {
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:700}
.code-workflow-label {
    color:#efb77f}
.code-prompt {
    font-size:1.4rem;
    line-height:1.5}
.code-workflow ol {
    padding-left:22px}
.code-workflow li {
    padding:10px 0 10px 6px}
.code-workflow li span {
    display:block;
    color:#ced4d8;
    margin-top:4px}
.code-workflow small {
    color:#bac4ca}
.code-differences {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 64px;
    border-top:1px solid #d9dedf;
    padding:48px 0}
.code-number {
    color:#8b4b25}
.code-differences h2 {
    font-size:1.65rem;
    line-height:1.2;
    margin:12px 0}
.code-differences p,.code-download p,.code-builder p {
    line-height:1.75}
.code-example {
    border-block:1px solid #d9dedf;
    padding:34px 0}
.code-example pre {
    background:#17222d;
    color:#f7f3eb;
    padding:24px;
    border-radius:12px;
    overflow-x:auto;
    font-size:.9rem;
    line-height:1.7}
.code-download {
    scroll-margin-top:100px;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:56px;
    padding:56px 0}
.code-download h2,.code-builder h2 {
    font-size:2rem;
    line-height:1.2}
.code-download li {
    padding:5px 0}
.code-download-card {
    background:#f7f1e7;
    border:1px solid #e4d7c5;
    padding:28px;
    border-radius:16px;
    align-self:start}
.code-download-card .button {
    display:flex;
    justify-content:center;
    text-align:center}
.code-download-card details {
    margin-top:22px}
.code-download-card summary {
    cursor:pointer}
.code-hash {
    overflow-wrap:anywhere;
    font-size:.78rem}
.code-builder {
    padding-top:32px;
    border-top:1px solid #d9dedf}
.code-builder .hero-actions {
    margin-top:24px}
@media(max-width:760px) {
    .code-hero,.code-download {
    grid-template-columns:1fr;
    gap:28px;
    padding:28px 0 40px}
.code-differences {
    grid-template-columns:1fr;
    gap:22px}
.code-workflow {
    padding:24px}
.code-story {
    padding-top:4px}
.code-hero h1 {
    font-size:2.8rem}
}


.code-story {
    width:100%;
    min-width:0}
.code-hero>*,.code-download>*,.code-differences>* {
    min-width:0}
.code-example pre {
    max-width:100%;
    box-sizing:border-box}

.code-workflow .code-prompt {
    color:#f7f3eb}

.code-intro,.code-family {padding:36px 0;border-top:1px solid #d9dedf}
.code-intro>p {max-width:850px;line-height:1.75}
.code-jump {display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:24px}
.code-feature-links {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px;padding-left:22px;margin:28px 0;line-height:1.65;list-style:disc}
.code-feature-links li {padding-left:3px}
.code-feature-links a {text-decoration:underline;text-underline-offset:3px}
.code-story [id] {scroll-margin-top:110px}
@media(max-width:760px) {.code-feature-links {grid-template-columns:1fr;gap:12px}}
.code-feature {display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:48px 0;border-top:1px solid #d9dedf;scroll-margin-top:110px}
.code-feature>* {min-width:0}
.code-feature h2,.code-intro h2,.code-callout h2,.code-family h2 {font-size:clamp(1.65rem,3vw,2.3rem);line-height:1.18}
.code-feature h3 {font-size:1.1rem;margin-top:24px}
.code-feature p,.code-feature li,.code-callout p,.code-extras p {line-height:1.75}
.code-feature li {margin:12px 0}
.code-shot {margin:0}
.code-shot img {display:block;width:100%;height:auto;border:1px solid #d9dedf;border-radius:12px;box-shadow:0 12px 32px #17222d12}
.code-shot a:focus-visible {outline:3px solid #8b4b25;outline-offset:5px;display:block}
.code-shot figcaption {font-size:.85rem;line-height:1.6;color:#5c6571;margin-top:14px}
.code-callout {background:#f7f1e7;padding:28px 32px;border-left:4px solid #8b4b25;border-radius:8px;margin-bottom:24px}
.code-extras {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
#open-source {scroll-margin-top:110px}
@media(max-width:760px) {.code-feature,.code-extras {grid-template-columns:1fr;gap:24px}.code-feature {padding:32px 0}.code-callout {padding:20px}.code-jump {gap:14px}}