/* Shared presentation layer loaded after each page's private tool.css. */
body[data-page]:not([data-page="/"]) {
    --tool-font-family: "Segoe UI", Arial, sans-serif;
    font-size: 17.333px;
    font-family: var(--tool-font-family);
    line-height: 1.55 !important;
    --tool-frame-max: 1380px;
    --tool-frame-gutter: clamp(24px, 3vw, 48px);
    --tool-heading-size: clamp(39.333px, calc(5vw + 1.333px), 56.333px);
    --tool-copy-size: 15.333px;
    --tool-seo-size: 14.333px;
    --tool-card-heading-size: clamp(19px, 1.8vw, 21.333px);
    --tool-label-size: 12.333px;
    --tool-control-size: 14.333px;
    --tool-button-size: 12.333px;
    --tool-helper-size: 12.333px;
    --tool-card-radius: 15px;
    --tool-card-padding: clamp(16px, 2vw, 22px);
    --tool-control-radius: 8px;
    --tool-control-height: 36px;
}

body[data-page]:not([data-page="/"]) :where(*):not(code, pre, kbd, samp) {
    font-family: var(--tool-font-family) !important;
}

body[data-page]:not([data-page="/"]) :where(button, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea) {
    font-family: var(--tool-font-family) !important;
}

body[data-page]:not([data-page="/"]) :where(h1) {
    font-size: var(--tool-heading-size) !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    letter-spacing: -2px !important;
}

body[data-page]:not([data-page="/"]) :where(button) {
    font-size: var(--tool-button-size) !important;
    line-height: 1.35 !important;
}

body[data-page]:not([data-page="/"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea) {
    font-size: var(--tool-control-size) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    border-radius: var(--tool-control-radius) !important;
}

body[data-page]:not([data-page="/"]) :where(select) {
    min-height: 42px !important;
    padding: 9px 11px !important;
}

body[data-page]:not([data-page="/"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"])) {
    min-height: 42px !important;
    padding: 9px 11px !important;
}

body[data-page]:not([data-page="/"]) :where(textarea) {
    padding: 14px !important;
}

body[data-page]:not([data-page="/"]) :where(textarea:not(.mono, .is-monospace, .aurebesh-preview)) {
    font-family: var(--tool-font-family) !important;
}

body[data-page]:not([data-page="/"]) :is(pre, code, kbd, samp, .mono, .is-monospace, .is-monospace *, .editor-pane textarea, .code-workspace textarea, .math-field textarea, textarea.is-monospace) {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace !important;
}

body[data-page]:not([data-page="/"]) :where(label, legend, .field, .field-label, .control-label, .field-group label, .check-option, .check-control, .range-control, .color-control) {
    font-size: var(--tool-label-size) !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

body[data-page]:not([data-page="/"]) :where(.brand) {
    font-size: 16.333px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -.6px !important;
}

body[data-page]:not([data-page="/"]) :where(.tool-brand-tagline, .eyebrow, .card-eyebrow, .section-label, .card-index) {
    font-size: 11.333px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    letter-spacing: 1.3px !important;
}

body[data-page]:not([data-page="/"]) :where(.local-badge, .mode-note, .field-meta, .count-meta, .field-hint, .field-help, .input-hint, .hint, .panel-note, .card-meta, .live-label, .action-status, .privacy-note, .stat-note, .muted, .limit-note) {
    font-size: var(--tool-helper-size) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

body[data-page]:not([data-page="/"]) :where(.local-badge) {
    font-weight: 600 !important;
}

body[data-page]:not([data-page="/"]) :where(.hero-seo-copy) {
    margin-block-start: 9px !important;
}

body[data-page]:not([data-page="/"]) :where(.tool-card, .features-card, .faq-card) {
    font-size: var(--tool-seo-size) !important;
    line-height: 1.55 !important;
}

body[data-page]:not([data-page="/"]) :where(.tool-card, .features-card, .faq-card, .seo-details, .page-faq) h2 {
    font-size: var(--tool-card-heading-size) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -.4px !important;
}

body[data-page]:not([data-page="/"]) :where(.page-faq, .faq-card) h2 {
    font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
}

body[data-page]:not([data-page="/"]) .page-faq > h2 {
    margin: 0 0 18px !important;
}

body[data-page]:not([data-page="/"]) :where(.tool-card, .features-card, .faq-card) h3 {
    font-size: 17.333px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
}

body[data-page]:not([data-page="/"]) :where(.seo-details, .page-faq) :is(p:not(.section-label), li, summary) {
    font-size: var(--tool-seo-size) !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
}

body[data-page]:not([data-page="/"]) :where(.seo-details, .page-faq) summary {
    font-weight: 600 !important;
}

body[data-page]:not([data-page="/"]) :where(.tool-card) .text-button {
    min-height: 32px !important;
    padding: 7px 10px !important;
    border-radius: var(--tool-control-radius) !important;
    font-size: 11.333px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) {
    font-size: 14.133px !important;
    line-height: 1.5 !important;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol,
body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol li {
    font-size: inherit !important;
    line-height: inherit !important;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol {
    column-gap: 10px !important;
    row-gap: 6px !important;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol > li {
    display: inline-flex !important;
    align-items: center !important;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol > li + li::before {
    margin-inline: 0 8px !important;
    content: "/" !important;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol a {
    min-height: 31px;
    padding: 4px 12px;
    border: 1px solid var(--green-border, #a9c6ad);
    border-radius: 999px;
    background: var(--green-pale, #eaf2e9);
    color: var(--green-dark, #254c37);
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-decoration: none;
}

body[data-page]:not([data-page="/"]) :is(.tool-breadcrumbs, .checker-breadcrumbs) ol [aria-current="page"] {
    min-width: 0;
    color: var(--muted, #4d5c50);
    font-size: inherit !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
}

body[data-page]:not([data-page="/"]) .hero-seo-copy {
    font-size: var(--tool-seo-size) !important;
    line-height: 1.65 !important;
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) > p:not(.eyebrow, .hero-seo-copy, .intro-seo-copy) {
    font-size: var(--tool-copy-size) !important;
    line-height: 1.65 !important;
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) :is(.hero-seo-copy, .intro-seo-copy) {
    font-size: var(--tool-seo-size) !important;
    line-height: 1.65 !important;
}

body[data-page]:not([data-page="/"]) :where(.dialog-close, .checker-dialog-close) {
    font-size: 23.333px !important;
    line-height: 1 !important;
}

body[data-page]:not([data-page="/"]) .aurebesh-preview {
    font-family: "SpecialFontsAurebesh", ui-monospace, Consolas, monospace !important;
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) h1 {
    font-size: var(--tool-heading-size);
    line-height: 1.08;
    letter-spacing: -2px;
    overflow-wrap: anywhere;
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) :is(.hero-copy, .intro-copy) {
    max-width: 700px;
    font-size: var(--tool-copy-size);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) .hero-seo-copy {
    max-width: 700px;
    font-size: var(--tool-seo-size);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

body[data-page]:not([data-page="/"]) .tool-control-layout {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(44px, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 190px;
    margin: 20px 0 16px;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    margin: 0;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol li {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    list-style: none;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol li + li::before {
    content: "/";
    color: var(--muted, #737b72);
    font-weight: 500;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol a {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid var(--green-border, #a9c6ad);
    border-radius: 999px;
    background: var(--green-pale, #eaf2e9);
    color: var(--green-dark, #254c37);
    font-size: 14.133px;
    line-height: 1.35;
    text-decoration: none;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol a:hover {
    border-color: var(--green, #367251);
    background: var(--green-soft, #f1f6ef);
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol a:focus-visible {
    outline: 3px solid rgb(var(--green-rgb, 54 114 81) / 30%);
    outline-offset: 2px;
}

body[data-page]:not([data-page="/"]) .tool-control-layout .tool-breadcrumbs ol [aria-current="page"] {
    min-width: 0;
    color: var(--muted, #4d5c50);
    font-size: 14.133px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

body[data-page]:not([data-page="/"]) .tool-control-layout__actions > :is(.hero-actions, .intro-actions, .graph-actions, .math-actions) > :is(button, a) {
    display: inline-flex;
    min-height: var(--tool-control-height);
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border: 1px solid var(--green-border, #cfddd0);
    border-radius: var(--tool-control-radius);
    background: var(--surface, #fff);
    color: var(--green-dark, #254c37);
    font-size: 12.333px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

body[data-page]:not([data-page="/"]) .tool-control-layout__actions > :is(.hero-actions, .intro-actions, .graph-actions, .math-actions) > :is(button, a):hover {
    border-color: var(--green, #367251);
    background: var(--green-pale, #eaf2e9);
}

body[data-page]:not([data-page="/"]) .tool-control-layout__actions > :is(.hero-actions, .intro-actions, .graph-actions, .math-actions) > :is(button, a):focus-visible {
    outline: 3px solid rgb(var(--green-rgb, 54 114 81) / 30%);
    outline-offset: 2px;
}

body[data-page]:not([data-page="/"]) .tool-control-layout__actions > :is(.hero-actions, .intro-actions, .graph-actions, .math-actions) > :is(button, a).utility-button--primary {
    border-color: var(--green-dark, #254c37);
    background: var(--green-dark, #254c37);
    color: #fff;
}

body[data-page]:not([data-page="/"]) .tool-control-layout__actions > :is(.hero-actions, .intro-actions, .graph-actions, .math-actions) > :is(button, a).utility-button--primary:hover {
    border-color: var(--green, #367251);
    background: var(--green, #367251);
}

body[data-page]:not([data-page="/"]) :is(.hero, .intro, .math-hero, .graph-intro-section) .hero-utility-row:not(:has(> *)) {
    display: none;
}

body[data-page]:not([data-page="/"]) :is(.tool-card, .upload-panel) {
    box-sizing: border-box;
    min-width: 0;
    border-radius: var(--tool-card-radius);
}

body[data-page]:not([data-page="/"]) .tool-card {
    padding: var(--tool-card-padding);
}

body[data-page]:not([data-page="/"]) .tool-card + .tool-card {
    margin-block-start: 16px;
}

body[data-page]:not([data-page="/"]) .tool-card h2 {
    overflow-wrap: anywhere;
}

body[data-page]:not([data-page="/"]) :is(.tool-workspace, .workspace, .editor-card, .editor-layout, .tool-grid, .settings-grid) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

body[data-page]:not([data-page="/"]) :is(.tool-card, .upload-panel, .tool-workspace, .workspace, .editor-card, .editor-layout, .tool-grid, .settings-grid) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select, textarea) {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 14.333px;
}

body[data-page]:not([data-page="/"]) :is(.tool-card, .upload-panel, .tool-workspace, .workspace, .editor-card, .editor-layout, .tool-grid, .settings-grid) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="hidden"]), select) {
    min-height: 42px;
}

body[data-page]:not([data-page="/"]) :is(.seo-details, .page-faq) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

body[data-page]:not([data-page="/"]) .page-faq {
    margin-block: clamp(32px, 5vw, 72px);
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid #e1e7e1;
    border-radius: 18px;
    background: #fff;
    color: #1d2922;
    box-shadow: none;
}

body[data-page]:not([data-page="/"]) .page-faq__list {
    display: grid;
    gap: 10px;
}

body[data-page]:not([data-page="/"]) .page-faq__item {
    margin: 0;
    padding: 0;
    border: 1px solid #e1e7e1;
    border-radius: 12px;
    background: #f8faf8;
}

body[data-page]:not([data-page="/"]) .page-faq__item summary {
    padding: 14px 16px;
    color: #1d2922 !important;
    font-weight: 600 !important;
    line-height: 1.5;
    cursor: pointer;
}

body[data-page]:not([data-page="/"]) .page-faq__item summary:focus-visible {
    outline: 3px solid #367251;
    outline-offset: 3px;
}

body[data-page]:not([data-page="/"]) .page-faq__item p {
    margin: 0;
    padding: 0 16px 16px;
    color: #737b72;
    line-height: 1.65;
}

body[data-page]:not([data-page="/"]) .seo-details {
    margin-block-start: 24px;
}



@media (min-width: 701px) and (max-width: 820px) {
    body[data-page="/entertainment/nes/"] .upload-panel,
    body[data-page="/entertainment/sega/"] .upload-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="/entertainment/nes/"] .builtin-field,
    body[data-page="/entertainment/sega/"] .builtin-field {
        grid-column: 1;
        width: 100%;
        margin-inline: 0;
    }

    body[data-page="/programmer-tools/js-css-optimize/"] .optimizer-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }
}