:root {
    color-scheme: light;
    --site-content-max: 1320px;
    --site-page-gutter: 32px;
    --site-bg: #f7f9fc;
    --site-surface: #ffffff;
    --site-surface-muted: #f1f5f9;
    --site-text: #17223b;
    --site-muted: #617089;
    --site-border: #dde4ee;
    --site-accent: #2563eb;
    --site-accent-soft: #eaf1ff;
    --site-shadow: 0 8px 26px rgba(27, 43, 76, .05);
    --site-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23617089' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --site-bg: #111722;
    --site-surface: #1a2230;
    --site-surface-muted: #222d3e;
    --site-text: #e6ecf6;
    --site-muted: #a7b4c9;
    --site-border: #354258;
    --site-accent: #8ab4ff;
    --site-accent-soft: #243654;
    --site-shadow: 0 8px 26px rgba(0, 0, 0, .16);
    --site-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23a7b4c9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html, body {background-color: var(--site-bg); color: var(--site-text);}
.site-navbar {height: 44px; color: var(--site-text);}
.site-navbar .language-control, .site-navbar .language-switcher, .site-navbar .tool-search-input {height: 44px;}
.site-navbar .language-control-icon {top: 13px;}
.site-navbar .language-switcher {
    -webkit-appearance: none;
    appearance: none;
    padding: 10px 32px 10px 36px;
}
.site-navbar .language-control::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.site-brand {display: inline-flex; align-items: center; gap: 9px; color: var(--site-text); flex-shrink: 0; font-size: 22px; font-weight: 700; letter-spacing: -.45px; text-decoration: none;}
.site-brand:hover {color: var(--site-text); text-decoration: none;}
.site-brand-mark {display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; color: var(--site-accent); background: var(--site-accent-soft);}
.site-brand-mark svg {width: 20px; height: 20px;}
.language-control {color: var(--site-muted);}
.site-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 11px;
    border: 1px solid var(--site-border);
    border-radius: 9px;
    background: var(--site-surface);
    color: var(--site-text);
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    pointer-events: auto;
}
.site-theme-toggle:hover {background: var(--site-surface-muted);}
.site-theme-toggle:focus-visible {outline: 2px solid var(--site-accent); outline-offset: 3px;}
.site-theme-toggle svg {width: 18px; height: 18px; flex-shrink: 0;}
.site-theme-moon {display: none;}
html[data-theme="dark"] .site-theme-sun {display: none;}
html[data-theme="dark"] .site-theme-moon {display: block;}

/* Shared chrome and controls; artwork, canvases and media keep their colors. */
html[data-theme] :is(.tool-search-input, .language-switcher) {
    color: var(--site-text);
    background-color: var(--site-surface);
    border-color: var(--site-border);
}
html[data-theme] .tool-search-results {background: var(--site-surface); border-color: var(--site-border); box-shadow: var(--site-shadow);}
html[data-theme] :is(.tool-search-result:hover, .tool-search-result.is-active) {background: var(--site-accent-soft);}
html[data-theme] .tool-search-title {color: var(--site-text);}
html[data-theme] :is(.tool-search-category, .tool-search-empty, .footer, .footer a) {color: var(--site-muted);}
html[data-theme] .footer a:hover {color: var(--site-accent);}

html[data-theme="dark"] :is(.tool-panel, .tool-file-card, .image-batch-file-card, .ip-actions-panel, .ip-result-box, .resolution-metric) {
    background-color: var(--site-surface);
    border-color: var(--site-border);
}
html[data-theme="dark"] :is(.tool-output-box, .tool-metric, .tool-table th, .keyboard-focus, .unix-current-grid, .ip-primary) {
    background-color: var(--site-surface-muted);
    border-color: var(--site-border);
}
html[data-theme="dark"] :is(.tool-label, .tool-metric-value, .tool-result-value, .image-batch-file-name, .image-batch-step-heading h2, .text-formatter-option-group legend, .ip-address-value, .ip-result-title, .unix-section-title, .unix-result-value, .resolution-metric strong) {color: var(--site-text);}
html[data-theme="dark"] :is(.tool-help, .tool-metric-label, .tool-formula, .tool-check, .tool-chip, .keyboard-prompt, .text-formatter-option-label, .unix-current-label, .unix-result-label, .ip-detail-list dt, .resolution-metric span) {color: var(--site-muted);}
html[data-theme="dark"] .tool-status:not(.error) {color: var(--site-muted);}
html[data-theme="dark"] :is(.tool-status.error, .image-batch-error) {color: #fda4af;}

html[data-theme="dark"] :where(input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="hidden"]), select, textarea) {
    color: var(--site-text);
    background-color: var(--site-surface);
    border-color: var(--site-border);
}
html[data-theme="dark"] :where(input, textarea)::placeholder {color: var(--site-muted); opacity: .85;}
html[data-theme="dark"] :is(.tool-input:focus, .tool-select:focus, .tool-textarea:focus, .tool-search-input:focus, .language-switcher:focus) {border-color: var(--site-accent);}
html[data-theme="dark"] :is(.tool-secondary-button, .tool-chip, .tool-segments, .tool-segment:not(.is-active), .rng-mode-button:not(.is-active), .keyboard-key:not(.is-active), .monitor-pattern-button) {
    color: var(--site-text);
    background-color: var(--site-surface);
    border-color: var(--site-border);
}
html[data-theme="dark"] :is(.tool-secondary-button:hover, .monitor-pattern-button:hover) {background-color: var(--site-surface-muted);}
html[data-theme="dark"] :is(.tool-drop-zone:hover, .tool-drop-zone.is-active) {background-color: var(--site-accent-soft); border-color: var(--site-accent);}
html[data-theme="dark"] :is(.tool-drop-zone, .tool-result, .tool-table td, .tool-table th, .tool-metric-grid, .text-formatter-options, .text-formatter-option-group, .code-editor, .code-preview, .md-editor, .rng-options-section, .rng-mode-switch, .image-batch-step) {border-color: var(--site-border);}
html[data-theme="dark"] :is(.md-preview-column, .output-result) {color: var(--site-text); background-color: var(--site-surface);}

/* Existing utility classes are also used by the shared privacy and tool copy. */
html[data-theme="dark"] :is(.bg-white, .bg-gray-50):not(canvas):not(img):not(video):not(svg):not(#dv-preview-wrap) {background-color: var(--site-surface);}
html[data-theme="dark"] :is(.bg-gray-100, .bg-gray-200) {background-color: var(--site-surface-muted);}
html[data-theme="dark"] :is(.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover) {background-color: var(--site-surface-muted);}
html[data-theme="dark"] :is(.text-black, .text-gray-900, .text-gray-800, .text-gray-700) {color: var(--site-text);}
html[data-theme="dark"] :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-gray-300) {color: var(--site-muted);}
html[data-theme="dark"] :is(.text-blue-600, .text-blue-700) {color: var(--site-accent);}
html[data-theme="dark"] :is(.border-gray-100, .border-gray-200, .border-gray-300) {border-color: var(--site-border);}

/* Tool workflows, explanations and the directory share the same outer edges.
   Preview surfaces and fullscreen canvases retain their own dimensions. */
body:not(.home-page):is(:has(> .left-container), .formatter-page) {height: auto; min-height: 100vh; display: flex; flex-direction: column;}
body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 68px;
    height: auto;
    padding: 12px max(24px, calc((100% - var(--site-content-max)) / 2));
    gap: 12px;
    background: var(--site-surface);
    border-bottom: 1px solid var(--site-border);
}
body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar + .text-center {
    position: static;
    inset: auto;
    max-width: calc(var(--site-content-max) + 32px);
    width: 100%;
    margin: 0 auto;
    padding: 30px 16px 22px;
}
body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar + .text-center h1 {
    margin: 0 !important;
    font-size: 30px !important;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--site-text);
}
body:not(.home-page):is(:has(> .left-container), .formatter-page) > :is(.left-container, .m-container) {
    position: relative;
    top: auto;
    bottom: auto;
    flex: 1 0 auto;
    width: 100%;
    max-width: calc(var(--site-content-max) + 2 * var(--site-page-gutter));
    margin: 0 auto;
    padding: 0 var(--site-page-gutter) 40px;
    overflow: visible;
}
body:not(.home-page):is(:has(> .left-container), .formatter-page) > :is(.left-container, .m-container)::after {content: ""; display: block; clear: both;}
body:not(.home-page):is(:has(> .left-container), .formatter-page) .tool-page-wrap {width: 100%; max-width: var(--site-content-max); margin-bottom: 28px;}
body:not(.home-page) > .left-container > :is(.tool-page-wrap, .time-legacy-page) {width: 100%; max-width: var(--site-content-max);}
.stopwatch-tool-shell {max-width: none;}
body > .m-container {width: 100%; max-width: calc(var(--site-content-max) + 2 * var(--site-page-gutter)); margin-inline: auto; padding-inline: var(--site-page-gutter);}
body > .m-container > .toolbar {width: 100%; margin-inline: 0;}
body.formatter-page > .m-container {position: relative; top: auto; bottom: auto; overflow: visible;}
body:not(.home-page):is(:has(> .left-container), .formatter-page) > .footer {
    position: relative;
    bottom: auto;
    height: auto;
    min-height: 54px;
    padding: 16px 20px !important;
    line-height: 1.8;
}
.footer {font-size: 12px; background: var(--site-surface); border-top: 1px solid var(--site-border);}
.footer a {font-size: inherit;}
.tool-panel, .site-conversion-panel {background: var(--site-surface); border-color: var(--site-border); border-radius: 10px; box-shadow: var(--site-shadow);}
.site-conversion-panel {padding: 20px;}
.site-conversion-actions {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;}
.site-conversion-actions > label {min-width: 0; margin: 0;}
.site-conversion-actions > :is(select, button) {min-width: 0; height: 46px; min-height: 46px; border-radius: 8px;}
.site-conversion-panel #options-panel .grid {row-gap: 6px;}
.site-conversion-panel #options-panel .grid > div:not(.hidden):has(> select, > input) {display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px; min-width: 0;}
.site-conversion-panel #options-panel .grid > div:has(> select, > input) > label {grid-row: 1; align-self: start; margin: 0; overflow-wrap: anywhere;}
.site-conversion-panel #options-panel .grid > div:has(> select, > input) > :is(select, input) {grid-row: 2; align-self: stretch; box-sizing: border-box; width: 100%; min-width: 0; height: 46px; min-height: 46px; margin: 0; padding: 10px 12px; border-radius: 8px;}
.site-conversion-panel #options-panel .grid > div:has(> select, > input) > p {grid-row: 3; margin: 0;}
.site-conversion-panel select {-webkit-appearance: none; appearance: none; background-image: var(--site-select-arrow); background-position: right 12px center; background-size: 14px 14px; background-repeat: no-repeat;}
.site-conversion-panel .site-conversion-actions > select, .site-conversion-panel #options-panel select {padding-right: 34px;}
#pti-settings select.tool-field-control {height: 46px; -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: var(--site-select-arrow); background-position: right 12px center; background-size: 14px 14px; background-repeat: no-repeat;}
.tool-drop-zone {background: var(--site-surface); border-color: var(--site-border); border-radius: 9px;}
.tool-input, .tool-select, .tool-textarea, .tool-primary-button, .tool-secondary-button, .tool-download-button {border-radius: 8px;}
.tool-secondary-button {border-color: var(--site-border); background: var(--site-surface); color: var(--site-text);}
.tool-output-box {border-color: var(--site-border); border-radius: 9px;}
.tool-copy-block, .formatter-copy-block {
    padding: 24px;
    color: var(--site-muted);
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.85;
}
body:not(.home-page):is(:has(> .left-container), .formatter-page) .tool-copy-block {float: none; width: 100%; max-width: none; margin: 28px 0 36px;}
:is(.tool-copy-block, .formatter-copy-block) :is(h2, h3, strong) {color: var(--site-text);}
:is(.tool-copy-block, .formatter-copy-block) h2 {font-size: 19px; line-height: 1.45; font-weight: 650;}
:is(.tool-copy-block, .formatter-copy-block) h3 {font-size: 14px; line-height: 1.65; font-weight: 650;}
:is(.tool-copy-block, .formatter-copy-block) > :is(p, ul, ol) {max-width: 84ch;}
:is(.tool-copy-block, .formatter-copy-block) a {color: var(--site-accent); text-underline-offset: 3px;}
:is(.tool-copy-block, .formatter-copy-block) > p:has(> strong):has(> a) {max-width: none; padding: 14px 16px; border: 1px solid var(--site-border); border-radius: 8px; background: var(--site-surface-muted);}
.site-faq {margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--site-border);}
.site-faq > h2 {margin: 0 0 10px; color: var(--site-text); font-size: 19px; line-height: 1.45; font-weight: 650;}
.site-faq-list {display: grid; gap: 0;}
.site-faq article {margin-top: 0 !important; padding: 0; border-bottom: 1px solid var(--site-border);}
.site-faq article:last-child {border-bottom: 0;}
.site-faq-item > summary {display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 48px; padding: 14px 0; color: var(--site-text); list-style: none; cursor: pointer;}
.site-faq-item > summary::-webkit-details-marker {display: none;}
.site-faq-item > summary::after {content: "+"; flex: 0 0 16px; color: var(--site-muted); font-size: 18px; line-height: 23px; text-align: center;}
.site-faq-item[open] > summary::after {content: "−";}
.site-faq-item > summary:hover {color: var(--site-accent);}
.site-faq-item > summary:focus-visible {outline: 2px solid var(--site-accent); outline-offset: 3px; border-radius: 4px;}
.site-faq-item > summary > h3 {margin: 0; color: inherit; font-size: 14px; line-height: 1.65; font-weight: 600;}
html[data-theme] .site-faq [itemprop="acceptedAnswer"] {padding: 0 30px 16px 0; color: var(--site-muted); line-height: 1.85;}
.site-faq [itemprop="text"] {margin: 0;}
:is(.site-related-tools, .site-related-conversions) {margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--site-border);}
:is(.site-related-tools, .site-related-conversions) > h2 {margin: 0 0 12px;}
:is(.site-related-tools, .site-related-conversions) > ul {display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;}
:is(.site-related-tools, .site-related-conversions) > ul > li {display: flex; align-items: center; flex-wrap: wrap; gap: 6px;}
:is(.site-related-tools, .site-related-conversions) a {display: inline-flex; align-items: center; min-height: 40px; padding: 7px 12px; border: 1px solid var(--site-border); border-radius: 7px; background: var(--site-surface-muted); font-size: 13px; line-height: 1.6; text-decoration: none;}
:is(.site-related-tools, .site-related-conversions) a:hover {border-color: var(--site-accent); background: var(--site-accent-soft);}
/* Explanations and navigation share a centered shell below the editor. */
.m-container > .formatter-copy-block {clear: both; float: none; width: 100%; max-width: var(--site-content-max); margin: 28px auto 36px;}
.m-container > .formatter-copy-block:has(> .formatter-introduction) {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; gap: 20px; padding: 28px 0 0; background: transparent; border: 0; border-radius: 0;}
.formatter-introduction, .formatter-copy-block > .site-faq {min-width: 0; padding: 24px; background: var(--site-surface); border: 1px solid var(--site-border); border-radius: 10px;}
.formatter-copy-block > .site-faq {margin: 0;}
.formatter-introduction > p {margin: 0;}
.formatter-feature-list {margin: 12px 0 0; padding-left: 20px; list-style: disc;}
.formatter-feature-list > li {margin-top: 8px;}
.m-container > div:has(> .tool-directory) {width: 100%; padding-left: 0 !important; padding-right: 0 !important;}
.m-container .tool-directory {max-width: var(--site-content-max); margin: 0 auto;}
body.site-info-page:has(> .left-container) > .left-container {padding-top: 24px;}
.site-info-page .left-container > div > :is(.bg-white, .bg-gray-50) {border: 1px solid var(--site-border); border-radius: 10px; box-shadow: var(--site-shadow); background: var(--site-surface);}
.site-info-page .left-container > .tool-page-wrap > :is(.bg-white, .bg-gray-50) {margin-inline: 0;}
@media screen and (min-width: 901px) {
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar .tool-search {display: block;}
}

@media screen and (max-width: 900px) {
    .site-navbar .language-switcher {padding-left: 10px; padding-right: 28px;}
    :root {--site-page-gutter: 18px;}
    .site-navbar {height: 48px; padding-top: 2px; padding-bottom: 2px; background: var(--site-bg);}
    .site-brand {font-size: 18px; gap: 6px;}
    .site-brand-mark {flex-basis: 22px; width: 22px; height: 22px; border-radius: 6px;}
    .site-brand-mark svg {width: 17px; height: 17px;}
    .site-theme-toggle {padding: 8px;}
    .site-theme-label {display: none;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar {min-height: 64px; padding: 10px 18px; gap: 8px;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar + .text-center {padding: 25px 18px 20px;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar + .text-center h1 {font-size: 26px !important;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > :is(.left-container, .m-container) {padding: 0 var(--site-page-gutter) 30px;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) .tool-search.is-below-title {max-width: 640px; margin: 14px auto 0;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) .tool-search.is-below-title .tool-search-input {height: 44px;}
    .tool-copy-block, .formatter-copy-block {padding: 20px; font-size: 13px;}
    body:not(.formatter-page) > .m-container > :is(.code-editor-column, .code-preview-column, .mid-toolbar, .md-editor-column, .md-preview-column) {width: 100%; margin-inline: 0;}
    .m-container > .formatter-copy-block:has(> .formatter-introduction) {grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0;}
    .formatter-introduction, .formatter-copy-block > .site-faq {padding: 20px;}
    .site-info-page .left-container > div {margin-left: 0 !important; margin-right: 0 !important;}
    .site-info-page .left-container > div > :is(.bg-white, .bg-gray-50) {margin-left: 0; margin-right: 0; padding: 20px;}
}
@media screen and (max-width: 520px) {
    :root {--site-page-gutter: 14px;}
    .site-brand {font-size: 17px;}
    .site-navbar .language-control {width: 120px;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar {min-height: 60px; padding: 8px 14px;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar + .text-center {padding: 23px 14px 18px;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > .site-navbar + .text-center h1 {font-size: 24px !important;}
    body:not(.home-page):is(:has(> .left-container), .formatter-page) > :is(.left-container, .m-container) {padding: 0 var(--site-page-gutter) 26px;}
    .tool-copy-block, .formatter-copy-block {padding: 18px;}
    .formatter-introduction, .formatter-copy-block > .site-faq {padding: 18px;}
    :is(.site-related-tools, .site-related-conversions) a {min-height: 44px;}
}
@media screen and (max-width: 640px) {
    .site-conversion-actions {grid-template-columns: minmax(0, 1fr) auto;}
    .site-conversion-actions > label {grid-column: 1 / -1;}
    .site-conversion-actions > select {font-size: 14px; padding-left: 10px; padding-right: 10px;}
    .site-conversion-actions > button {font-size: 14px; padding-left: 14px; padding-right: 14px;}
}
@media screen and (max-width: 350px) {
    .site-navbar .language-control {width: 88px;}
}