:root {
  --cms-color-text-muted: #56657b;
  --cms-color-success: #116b32;
  font-family: var(--cms-font-sans);
  color: var(--cms-color-text);
  background: var(--cms-color-canvas);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--cms-color-canvas); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.app-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-shell { min-height: 100vh; color: var(--cms-color-text); background: var(--cms-color-canvas); }
.app-header { display: grid; grid-template-columns: auto minmax(16rem, 40rem) auto; gap: var(--cms-space-4); align-items: center; min-height: 4.25rem; padding: var(--cms-space-2) var(--cms-space-6); border-bottom: 1px solid var(--cms-color-border); background: var(--cms-color-surface); }
.app-brand { color: var(--cms-color-brand-navy-deep); font-weight: 750; text-decoration: none; white-space: nowrap; }
.app-search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--cms-space-2); min-height: 44px; padding-inline: var(--cms-space-3); border: 1px solid var(--cms-color-border); border-radius: var(--cms-radius-control); background: var(--cms-color-canvas); }
.app-search input { min-width: 0; min-height: 42px; border: 0; outline: 0; color: inherit; background: transparent; }
.app-header-actions, .app-actions, .app-examples { display: flex; gap: var(--cms-space-2); align-items: center; flex-wrap: wrap; }
.app-menu-button { display: none; }
.app-privacy { display: flex; gap: var(--cms-space-2); align-items: center; min-height: 2.5rem; padding-inline: var(--cms-space-6); color: var(--cms-color-brand-navy); border-bottom: 1px solid var(--cms-color-border); background: var(--cms-color-surface-muted); font-size: 0.875rem; }
.app-layout { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr) 7.5rem; min-height: calc(100vh - 6.75rem); }
.app-shell.is-sidebar-collapsed .app-layout { grid-template-columns: 4.5rem minmax(0, 1fr) 7.5rem; }
.app-sidebar { padding: var(--cms-space-4) var(--cms-space-3); border-right: 1px solid var(--cms-color-border); background: var(--cms-color-surface); }
.app-sidebar-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: var(--cms-space-3); padding-left: var(--cms-space-2); }
.app-nav-group { margin-top: var(--cms-space-6); }
.app-nav-group h2 { margin: 0 var(--cms-space-2) var(--cms-space-2); color: var(--cms-color-text-muted); font-size: 0.8rem; }
.app-nav-link { display: flex; gap: var(--cms-space-2); align-items: center; min-height: 44px; padding: var(--cms-space-2); border-radius: var(--cms-radius-control); text-decoration: none; }
.app-nav-link.is-current { color: var(--cms-color-brand-navy-deep); background: var(--cms-color-surface-muted); font-weight: 700; }
.app-nav-icon { display: inline-grid; min-width: 1.5rem; place-items: center; }
.app-shell.is-sidebar-collapsed .app-sidebar { padding-inline: var(--cms-space-2); }
.app-shell.is-sidebar-collapsed .app-sidebar-top { justify-content: center; padding: 0; }
.app-shell.is-sidebar-collapsed .app-sidebar-top strong, .app-shell.is-sidebar-collapsed .app-nav-group h2, .app-shell.is-sidebar-collapsed .app-nav-label { display: none; }
.app-main { min-width: 0; padding: var(--cms-space-6); }
.app-heading { display: flex; justify-content: space-between; gap: var(--cms-space-4); align-items: flex-start; }
.app-heading .cms-badge { justify-self: start; }
.app-heading h1, .app-home-heading h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.25rem); letter-spacing: -0.035em; }
.app-heading p, .app-home-heading p { max-width: 70ch; margin: var(--cms-space-2) 0 0; color: var(--cms-color-text-muted); line-height: 1.6; }
.app-examples { margin: var(--cms-space-4) 0; }
.app-workbench { overflow: hidden; }
.app-stage { display: grid; grid-template-columns: 6rem minmax(0, 1fr); border-top: 1px solid var(--cms-color-border); }
.app-stage:first-child { border-top: 0; }
.app-stage-label { padding: var(--cms-space-4); color: var(--cms-color-brand-navy); background: color-mix(in srgb, var(--cms-color-surface-muted) 55%, var(--cms-color-surface)); font-weight: 700; }
.app-stage-label span { display: block; margin-bottom: var(--cms-space-1); color: var(--cms-color-text-muted); }
.app-stage-body { min-width: 0; padding: var(--cms-space-4); }
.app-drop { display: grid; min-height: 8rem; place-items: center; align-content: center; gap: var(--cms-space-2); border: 1px dashed var(--cms-color-brand-action); border-radius: var(--cms-radius-control); text-align: center; cursor: pointer; }
.app-drop span:last-of-type { color: var(--cms-color-text-muted); }
.app-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.app-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cms-space-3); align-items: end; }
.app-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cms-space-3); }
.app-options-grid > :only-child { grid-column: 1 / -1; }
.app-run-row { display: flex; justify-content: space-between; gap: var(--cms-space-4); align-items: center; margin-top: var(--cms-space-4); }
.app-run-row p { margin: 0; color: var(--cms-color-text-muted); }
.app-result-field { margin-top: var(--cms-space-3); }
.app-tool-output { resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.app-share-status:empty { display: none; }
.app-check { display: flex; min-height: 44px; gap: var(--cms-space-2); align-items: center; font-weight: 700; }
.app-color-input { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--cms-space-3); align-items: end; }
.app-color-input input[type="color"] { width: 5rem; height: 4.5rem; padding: 0.25rem; border: 1px solid var(--cms-color-border); border-radius: var(--cms-radius-control); background: var(--cms-color-surface); }
.app-color-preview { min-height: 6rem; margin-top: var(--cms-space-3); border: 1px solid var(--cms-color-border); border-radius: var(--cms-radius-control); background-image: linear-gradient(45deg, #d8dee9 25%, transparent 25%), linear-gradient(-45deg, #d8dee9 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d8dee9 75%), linear-gradient(-45deg, transparent 75%, #d8dee9 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; box-shadow: inset 0 0 0 999px var(--app-preview-color, transparent); }
.app-file-list, .app-output-meta { margin: var(--cms-space-3) 0 0; padding-left: 1.4rem; color: var(--cms-color-text-muted); line-height: 1.7; }
.app-file-list:empty, .app-output-meta:empty, .app-image-preview:empty { display: none; }
.app-input-previews { display: flex; gap: var(--cms-space-2); margin-top: var(--cms-space-3); overflow-x: auto; }
.app-input-previews:empty { display: none; }
.app-input-previews img { width: 5.5rem; height: 4rem; flex: 0 0 auto; object-fit: contain; border: 1px solid var(--cms-color-border); border-radius: var(--cms-radius-control); background: var(--cms-color-surface-muted); }
.app-format-switch { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--cms-space-3); align-items: end; }
.app-swap-button { margin-bottom: 1px; }
.app-quality { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--cms-space-3); align-items: end; margin-top: var(--cms-space-3); }
.app-quality input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--cms-color-brand-action); }
.app-quality [data-disabled="true"] { color: var(--cms-color-text-muted); }
.app-image-preview { display: grid; min-height: 12rem; margin-top: var(--cms-space-3); place-items: center; overflow: hidden; border: 1px dashed var(--cms-color-border); border-radius: var(--cms-radius-control); background-color: var(--cms-color-surface); background-image: linear-gradient(45deg, var(--cms-color-surface-muted) 25%, transparent 25%), linear-gradient(-45deg, var(--cms-color-surface-muted) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--cms-color-surface-muted) 75%), linear-gradient(-45deg, transparent 75%, var(--cms-color-surface-muted) 75%); background-position: 0 0, 0 10px, 10px -10px, -10px 0; background-size: 20px 20px; }
.app-image-preview img { display: block; max-width: 100%; max-height: 26rem; object-fit: contain; }
.app-image-preview strong { max-width: 34rem; padding: var(--cms-space-6); text-align: center; }
.app-image-workbench progress { width: 100%; margin-top: var(--cms-space-3); accent-color: var(--cms-color-brand-action); }
.app-stage details { margin-top: var(--cms-space-3); }
.app-stage summary { min-height: 44px; padding-block: var(--cms-space-3); cursor: pointer; font-weight: 700; }
.app-content-ad, .app-right-ad { display: grid; place-items: center; color: var(--cms-color-text-muted); }
.app-content-ad { min-height: 6rem; margin-block: var(--cms-space-6); border-block: 1px solid var(--cms-color-border); }
.app-right-ad { min-height: 17.5rem; align-self: start; margin: var(--cms-space-6) var(--cms-space-2); border-block: 1px solid var(--cms-color-border); }
.app-guide { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(14rem, 0.8fr); gap: var(--cms-space-6); }
.app-guide h2, .app-directory h2 { font-size: 1.05rem; }
.app-guide p, .app-guide details { line-height: 1.6; }
.app-home-heading { max-width: 48rem; }
.app-home-search { display: grid; gap: var(--cms-space-2); margin-block: var(--cms-space-6); }
.app-directory { display: grid; gap: var(--cms-space-6); }
.app-directory-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--cms-color-border); }
.app-directory-link { display: grid; gap: var(--cms-space-1); min-height: 5rem; padding: var(--cms-space-3); border-bottom: 1px solid var(--cms-color-border); text-decoration: none; }
.app-directory-link:nth-child(odd) { border-right: 1px solid var(--cms-color-border); }
.app-directory-link span { color: var(--cms-color-text-muted); line-height: 1.5; }
.app-home-ad { display: none; }
[data-cms-theme="dark"] .app-brand,
[data-cms-theme="dark"] .app-privacy,
[data-cms-theme="dark"] .app-nav-link.is-current,
[data-cms-theme="dark"] .app-stage-label,
[data-cms-theme="dark"] .cms-icon-button { color: #c7d2fe; }
[data-cms-theme="dark"] { --cms-color-text-muted: #bac7dc; }
[data-cms-theme="dark"] .cms-badge--success { color: #bbf7d0; background: #14532d; }
@media (max-width: 900px) {
  .app-layout, .app-shell.is-sidebar-collapsed .app-layout { grid-template-columns: 12.25rem minmax(0, 1fr); }
  .app-right-ad { display: none; }
  .app-home-ad { display: grid; }
  .app-collapse-button { display: none; }
  .app-main { padding: var(--cms-space-4); }
  .app-setting-row, .app-guide { grid-template-columns: 1fr; }
  .app-options-grid { grid-template-columns: 1fr; }
  .app-format-switch { grid-template-columns: 1fr; }
  .app-swap-button { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 680px) {
  .app-header { grid-template-columns: minmax(0, 1fr) auto; padding: var(--cms-space-2) var(--cms-space-3); }
  .app-search { grid-column: 1 / -1; grid-row: 2; }
  .app-menu-button { display: inline-flex; }
  .app-header-actions { justify-content: flex-end; }
  .app-privacy { padding-inline: var(--cms-space-3); }
  .app-layout, .app-shell.is-sidebar-collapsed .app-layout { grid-template-columns: 1fr; }
  .app-sidebar { display: none; border-right: 0; border-bottom: 1px solid var(--cms-color-border); }
  .app-sidebar.is-open { display: block; }
  .app-stage { grid-template-columns: 1fr; }
  .app-stage-label { padding: var(--cms-space-3); }
  .app-stage-label span { display: inline; margin: 0 var(--cms-space-2) 0 0; }
  .app-heading { display: grid; }
  .app-run-row { align-items: stretch; flex-direction: column; }
  .app-directory-links { grid-template-columns: 1fr; }
  .app-directory-link:nth-child(odd) { border-right: 0; }
  .app-quality { grid-template-columns: minmax(0, 1fr) 6rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.app-policy { max-width: 72ch; line-height: 1.8; overflow-wrap: anywhere; }
.app-policy section { margin-block: 2rem; }
.app-footer { margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid currentColor; }
.app-footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.app-footer a { color: inherit; text-underline-offset: .2em; }