/* Generated by tools/split-subpage-css.php. Edit assets/css/source/subpage-modern.full.css instead. */
.asciiart-page > pre, .asciiart-output-scroll #ascii { font-family: "Courier New", monospace; font-size: 8px; line-height: 1; }
.asciiart-page-heading { margin-bottom: 0; }
.asciiart-page-heading h1 { margin-bottom: 14px; color: #172033; }
.asciiart-page-heading > p:last-child { max-width: 780px; margin: 0; color: #536277; line-height: 1.75; }
.asciiart-eyebrow, .asciiart-tool-label { margin: 0 0 8px; color: #2563eb; font-size: .84rem; font-weight: 800; }
.asciiart-generator { margin-top: 28px; }
.asciiart-upload-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 1px dashed #b9c6d6; border-radius: 8px; background: #f8fafc; }
.asciiart-upload-copy { min-width: 0; }
.asciiart-upload-copy h2 { margin-bottom: 8px; color: #172033; font-size: 1.3rem; }
.asciiart-upload-copy > p:last-child { margin: 0; color: #64748b; font-size: .86rem; line-height: 1.65; }
.asciiart-upload-control { display: flex; align-items: center; gap: 12px; min-width: 0; }
.asciiart-file-button { flex: 0 0 auto; display: inline-flex; min-height: 46px; align-items: center; justify-content: center; margin: 0; padding: 0 18px; border: 1px solid #2563eb; border-radius: 7px; background: #2563eb; color: #fff; font-size: .84rem; font-weight: 800; cursor: pointer; }
.asciiart-file-button:hover { background: #1d4ed8; }
#asciiart-file { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0; }
#asciiart-file:focus-visible + * { outline: 2px solid #2563eb; }
.asciiart-file-name { min-width: 0; max-width: 220px; overflow: hidden; color: #64748b; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.asciiart-preview-panel { margin-top: 22px; padding: 24px; border: 1px solid #d9e1eb; border-radius: 8px; background: #fff; }
.asciiart-preview-panel > header { margin-bottom: 16px; }
.asciiart-preview-panel h2 { margin-bottom: 8px; color: #172033; font-size: 1.35rem; }
.asciiart-preview-panel header > p:last-child { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.6; }
.asciiart-preview-stage { position: relative; display: grid; min-height: 190px; place-items: center; overflow: auto; padding: 18px; border: 1px solid #d9e1eb; border-radius: 7px; background: #f8fafc; }
.asciiart-preview-stage canvas { display: none; max-width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(31, 44, 64, .12); }
.asciiart-preview-stage canvas.is-ready { display: block; }
.asciiart-preview-empty { margin: 0; color: #7a8799; font-size: .86rem; text-align: center; }
.asciiart-preview-stage canvas.is-ready + .asciiart-preview-empty { display: none; }
.asciiart-output-panel { margin-top: 22px; padding: 24px; border: 1px solid #d9e1eb; border-radius: 8px; background: #fff; }
.asciiart-output-panel > header { margin-bottom: 16px; }
.asciiart-output-panel h2 { margin-bottom: 8px; color: #172033; font-size: 1.35rem; }
.asciiart-output-panel header > p:last-child { margin: 0; color: #64748b; font-size: .84rem; line-height: 1.6; }
.asciiart-output-scroll { position: relative; min-height: 320px; max-height: 620px; overflow: auto; padding: 18px; border: 1px solid #273548; border-radius: 7px; background: #111827; }
.asciiart-output-scroll #ascii { width: max-content; min-width: 100%; margin: 0; color: #d9f5e8; white-space: pre; letter-spacing: 0; }
.asciiart-empty-state { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 24px; color: #8fa0b8; font-size: .82rem; text-align: center; pointer-events: none; }
.asciiart-output-scroll #ascii:not(:empty) + .asciiart-empty-state { display: none; }
.asciiart-guide { margin-top: 44px; padding-top: 30px; border-top: 1px solid #dde4ed; }
.asciiart-guide-heading h2 { margin-bottom: 12px; color: #172033; }
.asciiart-guide-heading > p:last-child { max-width: 780px; margin: 0; color: #5a687b; line-height: 1.75; }
.asciiart-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; margin-top: 24px; }
.asciiart-guide-grid section { padding: 22px 0; border-bottom: 1px solid #e2e7ee; }
.asciiart-guide-grid h3 { margin-bottom: 8px; color: #1f2c40; font-size: 1rem; }
.asciiart-guide-grid p { margin: 0; color: #5f6d80; font-size: .88rem; line-height: 1.75; }
@media screen and (max-width: 620px) {
.asciiart-upload-panel { align-items: stretch; flex-direction: column; padding: 18px; }
.asciiart-upload-control { align-items: stretch; flex-direction: column; }
.asciiart-file-button { width: 100%; }
.asciiart-file-name { max-width: 100%; text-align: center; }
.asciiart-preview-panel { padding: 16px; }
.asciiart-preview-stage { min-height: 150px; padding: 12px; }
.asciiart-output-panel { padding: 16px; }
.asciiart-output-scroll { min-height: 260px; padding: 12px; }
.asciiart-output-scroll #ascii { font-size: 2px; }
.asciiart-guide-grid { grid-template-columns: 1fr; }
}
#fileInput { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }