.ascii-field { margin-top: 14px; }
.ascii-field label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.ascii-hint { margin: 6px 0 0; color: #aaa8b5; font-size: .8rem; }
.ascii-field :is(select, input) { width: 100%; }
.ascii-field output, .ascii-details output { font-variant-numeric: tabular-nums; color: #bdbbc8; }
.ascii-workspace .eyy-toggle { margin-top: 14px; }
.ascii-details { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--eyy-border, #101010); color: #bdbbc8; }
.ascii-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ascii-actions button { width: 100%; }
body > .tool-page--image-editor .ascii-stage img[data-workspace-image] { display: none !important; }
.tool-page .image-preview-stage.ascii-stage:not(.crop-stage):not(.color-picker-stage) { touch-action: auto; cursor: default; }
.tool-page .ascii-workspace[data-ready] .image-preview-stage.ascii-stage:not(.crop-stage):not(.color-picker-stage) { cursor: text; }
.ascii-stage .ascii-scroll { display: flex; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; padding: 16px; outline: none; overscroll-behavior: contain; }
.ascii-workspace[data-ready] .ascii-scroll { background: #000; }
.ascii-stage #ascii-output { flex: none; width: max-content; margin: auto; color: #f1f1f1; font: 12px/14px monospace; white-space: pre; user-select: text; }
.ascii-stage #ascii-output.is-color { background-repeat: no-repeat; background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; image-rendering: pixelated; }
.ascii-stage #ascii-output.is-color::selection { color: #000 !important; -webkit-text-fill-color: #000; }
#ascii-copy-fallback { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; }