.personal-code-page .article-hero { padding-bottom: 3rem; }
.personal-code-page .code-image-hero { padding: 0; background: none; }
.code-hero-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.code-hero-intro { padding-block: var(--space-section-tight); }
.code-hero-intro .article-back { margin-bottom: 1rem; }
.personal-code-page .code-hero-intro h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.personal-code-page .article-body { color: #e9e6df; font-size: 1.125rem; line-height: 1.8; }
.personal-code-page .code-meta { color: #c8c2b7; font-size: .95rem; }
.code-field { display: grid; gap: .55rem; margin: 2rem 0; }
.code-field > span { color: #dec18a; font-size: .85rem; letter-spacing: .09em; text-transform: uppercase; }
.code-field textarea { width: 100%; box-sizing: border-box; padding: 1rem; border: 1px solid #81715a; border-radius: 4px; background: #101411; color: #f5f2eb; font: inherit; line-height: 1.6; resize: vertical; }
.code-field textarea::placeholder { color: #b9b9ad; opacity: 1; }
.personal-code-page :focus-visible { outline: 3px solid #ebca8c; outline-offset: 4px; }
#code-output { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.personal-code-page .button { min-height: 48px; white-space: normal; text-align: center; }
.personal-code-page .actions { flex-wrap: wrap; }
#code-status { color: #e3c894; }
@media (max-width: 600px) { .personal-code-page h1 { font-size: clamp(2.5rem, 11vw, 4rem); } .personal-code-page .article-body { font-size: 1.0625rem; } .personal-code-page .actions > * { width: 100%; } }
@media print { body.personal-code-page { background: white !important; color: black !important; } .personal-code-page > *, .personal-code-page main > *, .personal-code-page .article-shell > *, .personal-code-page .article-body > * { display: none !important; } .personal-code-page main, .personal-code-page .article-shell, .personal-code-page .article-body, .personal-code-page #code-result:not([hidden]) { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: black !important; background: white !important; border: 0 !important; } #code-result .actions { display: none !important; } #code-result h3, #code-output { color: black !important; } }