#page-development { --dev-bg: #15171b; --dev-panel: #1d2025; --dev-text: #e6e8eb; --dev-muted: #9ca3ae; --dev-rule: #30353d; --dev-accent: #d8be86; color: var(--parchment); font-family: var(--serif-body); }
#page-development * { box-sizing: border-box; }
#page-development :is(h1,h2,h3) { color: var(--parchment); font-weight: 400; line-height: 1.2; text-wrap: balance; }
#page-development p { line-height: 1.7; }
#page-development a { color: var(--parchment); text-underline-offset: .25em; }
#page-development a:hover { color: var(--gold); }
#page-development :is(a,summary,pre):focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
#page-development pre { overflow: auto; }
#page-development code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; overflow-wrap: anywhere; }
.dev-hero, .dev-section, .dev-facts { max-width: var(--shell,1240px); margin-inline: auto; padding-inline: var(--sp-6); }
.dev-hero { display: grid; gap: var(--sp-6); padding-block: var(--sp-8) var(--sp-8); }
.dev-hero-copy { max-width: 54rem; }
#page-development .dev-kicker { color: var(--gold); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--sp-5); }
#page-development h1 { font-size: clamp(2.4rem,4vw,3.75rem); letter-spacing: -.04em; margin: 0 0 var(--sp-5); }
#page-development h1 span { display: block; font-size: .61em; line-height: 1.3; letter-spacing: -.02em; color: var(--ink-soft); margin-top: var(--sp-4); }
.dev-lead { font-size: 1.15rem; max-width: 42ch; color: var(--ink-soft); margin-bottom: var(--sp-6); }
.dev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
#page-development .dev-actions .primary, #page-development .dev-file-actions .primary { background: var(--gold); color: #17120b; border-color: var(--gold); }
#page-development .primary:hover { background: var(--parchment); border-color: var(--parchment); color: #17120b; }
.dev-text-link { font-size: 1rem; padding-block: var(--sp-3); }
#page-development .dev-platforms { font-size: .85rem; color: var(--ink-soft); margin-top: var(--sp-5); }
.dev-preview { min-width: 0; margin: 0; }
.dev-shot { display: block; width: 100%; height: auto; border: 1px solid #4b535f; border-radius: 10px; background: var(--dev-bg); box-shadow: 0 30px 70px #000000a8; }
.dev-dim { color: var(--dev-muted); }
#page-development figcaption { font-size: .75rem; color: var(--ink-soft); padding-top: var(--sp-3); text-align: center; }
.dev-facts { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); border-block: 1px solid var(--hairline); font-size: .9rem; color: var(--ink-soft); }
.dev-facts strong { color: var(--parchment); font-weight: 400; margin-right: var(--sp-2); }
.dev-section { padding-block: var(--sp-8); scroll-margin-top: 90px; }
#page-development h2 { font-size: clamp(1.6rem,2.5vw,2.3rem); letter-spacing: -.02em; margin: 0 0 var(--sp-4); }
#page-development h3 { font-size: 1.2rem; margin: 0 0 var(--sp-3); }
.dev-section-heading { margin-bottom: var(--sp-7); }
.dev-section-heading p { color: var(--ink-soft); max-width: 60ch; }
.dev-features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-7); }
.dev-features article { border-top: 1px solid var(--hairline); padding-top: var(--sp-5); }
.dev-number { display: block; color: var(--gold); font: .8rem/1.4 ui-monospace,monospace; margin-bottom: var(--sp-5); }
.dev-features p, .dev-control p { font-size: 1rem; color: var(--ink-soft); }
.dev-control { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; margin-top: var(--sp-8); padding: var(--sp-6); border: 1px solid var(--hairline); background: var(--surface-2); }
.dev-control > div { min-width: 0; }
.dev-control pre { color: var(--dev-text); background: var(--dev-bg); padding: var(--sp-5); margin: 0; font-size: .95rem; line-height: 1.8; border-left: 2px solid var(--dev-accent); }
.dev-downloads { border-top: 1px solid var(--hairline); }
.dev-file { display: grid; grid-template-columns: .75fr 1.6fr 1fr; gap: var(--sp-6); padding-block: var(--sp-6); border-top: 1px solid var(--hairline); }
.dev-os > span { display: block; color: var(--gold); font: .75rem/1.4 ui-monospace,monospace; margin-bottom: var(--sp-3); }
#page-development .dev-os h3 { font-size: 1.5rem; margin: 0; }
.dev-os p { font-size: .85rem; color: var(--ink-soft); }
.dev-file-info p { margin: 0 0 var(--sp-3); font-size: 1rem; }
#page-development .dev-note { font-size: .85rem; color: var(--ink-soft); }
.dev-file-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4); padding-top: var(--sp-5); text-align: center; }
.dev-file-actions > a:last-child { font-size: .85rem; padding-block: var(--sp-2); }
.dev-download-footer { border-top: 1px solid var(--hairline); padding-top: var(--sp-4); }
.dev-download-footer p { font-size: .9rem; color: var(--ink-soft); max-width: 76ch; }
.dev-download-footer span { margin-inline: var(--sp-3); }
.dev-details { margin-top: var(--sp-5); border: 1px solid var(--hairline); padding: var(--sp-4) var(--sp-5); }
.dev-details summary { cursor: pointer; min-height: 24px; padding-block: var(--sp-1); }
.dev-details p { font-size: .95rem; max-width: 75ch; }
.dev-details pre { padding: var(--sp-4); background: var(--surface-2); }
.dev-start { border-top: 1px solid var(--hairline); }
.dev-start-steps { list-style: none; counter-reset: setup; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-7); }
.dev-start-steps li { counter-increment: setup; min-width: 0; }
.dev-start-steps li::before { content: "0" counter(setup); display: block; color: var(--gold); font: .8rem/1.4 ui-monospace,monospace; margin-bottom: var(--sp-4); }
.dev-start-steps code { display: block; padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border: 1px solid var(--hairline); color: var(--parchment); }
.dev-start-steps p { font-size: .95rem; color: var(--ink-soft); }
#page-development kbd { font-family: inherit; }
.dev-start > .dev-note { margin-top: var(--sp-6); max-width: 90ch; }
.dev-license { border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-7); padding-block: var(--sp-7) var(--sp-8); }
#page-development .dev-license h2 { font-size: 1.3rem; }
.dev-license p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 1050px) { .dev-hero { padding-top: var(--sp-7); } .dev-hero-copy { max-width: 640px; } .dev-file { grid-template-columns: .75fr 1.6fr; } .dev-file-actions { grid-column: 2; padding: 0; align-items: flex-start; } }
@media (max-width: 768px) { .dev-hero,.dev-section,.dev-facts { padding-inline: var(--sp-5); } .dev-section { padding-block: var(--sp-7); } .dev-features,.dev-start-steps,.dev-control,.dev-license { grid-template-columns: 1fr; gap: var(--sp-5); } .dev-facts { display: grid; grid-template-columns: 1fr 1fr; font-size: .8rem; } .dev-control { padding: var(--sp-4); margin-top: var(--sp-6); } .dev-file { grid-template-columns: 1fr; gap: var(--sp-3); } .dev-file-actions { grid-column: auto; align-items: stretch; } .dev-file-actions .button { max-width: none; } .dev-file-actions > a:last-child { text-align: left; } .dev-section-heading { margin-bottom: var(--sp-5); } }
@media (max-width: 480px) { .dev-hero { padding-inline: var(--sp-4); } .dev-control pre { font-size: .8rem; padding: var(--sp-3); } }