/* Scope small layout additions to the existing developer tool components. */
.generator-page #inner-headline .breadcrumb a,
.generator-page #inner-headline .breadcrumb .active,
.generator-page #inner-headline .breadcrumb > li + li:before { color: #001a4d; }
.generator-page #inner-headline .breadcrumb a:hover { text-decoration: underline; }
.generator-page .tool-panel-header { flex-wrap: wrap; }
.generator-page .tool-options > * { min-width: 0; max-width: 100%; }
.generator-page .generator-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px; }
.generator-page .generator-options .is-wide,
.generator-page .generator-options-note,
.generator-page .tool-options > .tool-note,
.generator-page .tool-options > .dev-tool-note { grid-column: 1 / -1; flex-basis: 100%; margin: 0; }
.generator-page .tool-note, .generator-page .dev-tool-note { color: #526176; font-size: 13px; line-height: 1.65; }
.generator-page input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid #c8d4e3; border-radius: 8px; background: #fff; }
.generator-page .generator-code-scroll { min-width: 0; max-width: 100%; min-height: 310px; max-height: 620px; overflow: auto; padding: 12px; border: 1px solid #c8d4e3; border-radius: 8px; background: #f8fafc; }
.generator-page .generator-code-scroll canvas,
.generator-page .generator-code-scroll svg { display: block; max-width: none; flex-shrink: 0; }
.generator-page .tool-stats,
.generator-page .tool-note,
.generator-page .generator-options-note { overflow-wrap: anywhere; }
.generator-page[data-tool="117"] #tool-output { font-size: 18px; }
.generator-page[data-tool="121"] textarea,
.generator-page[data-tool="122"] textarea,
.generator-page[data-tool="123"] textarea,
.generator-page[data-tool="124"] textarea { min-height: 390px; }
@media (max-width:600px) {
 .generator-page .generator-options { grid-template-columns: minmax(0,1fr); }
 .generator-page .generator-code-scroll { max-height: 450px; }
}