/* Final interface layer. Loaded after the legacy stylesheet on purpose. */
:root {
  --of-blue: #2563eb;
  --of-blue-dark: #1d4ed8;
  --of-cyan: #0891b2;
  --of-ink: #172033;
  --of-muted: #64748b;
  --of-border: #d9e1ec;
  --of-canvas: #f7f9fc;
  --of-soft: #eef5ff;
  --paper: var(--of-canvas);
  --panel: #fff;
  --ink: var(--of-ink);
  --muted: var(--of-muted);
  --line: var(--of-border);
  --navy: #172033;
  --accent: #38bdf8;
  --accent-2: var(--of-blue);
  --focus-ring: var(--of-blue);
  --shadow: 0 10px 32px rgba(30, 64, 175, .08);
  --radius: 12px;
}

html { scroll-padding-top: 126px; }

:root[data-dark] {
  --of-ink: #e7edf7;
  --of-muted: #9aa9bf;
  --of-border: #2d3a4d;
  --of-canvas: #101722;
  --of-soft: #172b4d;
  --paper: var(--of-canvas);
  --panel: #17202d;
  --ink: var(--of-ink);
  --muted: var(--of-muted);
  --line: var(--of-border);
  --navy: #f2f6fc;
}

body {
  background:
    linear-gradient(180deg, var(--panel) 0, var(--panel) 112px, transparent 112px),
    radial-gradient(circle at 12% 18%, rgba(37, 99, 235, .06), transparent 28rem),
    var(--of-canvas);
  font-family: "Aptos", "Segoe UI", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

body .topbar {
  height: 64px;
  grid-template-columns: auto minmax(310px, 1fr) minmax(250px, 420px) auto;
  padding: 0 max(24px, calc((100vw - 1440px) / 2));
  gap: 26px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  border-bottom: 1px solid var(--of-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

body .brand { color: var(--of-ink); font-weight: 720; }
body .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--of-blue), var(--of-cyan));
  color: #fff;
  transform: none;
  box-shadow: 0 6px 16px rgba(37, 99, 235, .2);
}

body .product-nav { display: flex; justify-content: center; gap: 2px; }
body .product-nav button {
  padding: 9px 11px;
  color: var(--of-muted);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-weight: 650;
  cursor: pointer;
}
body .product-nav button:hover { color: var(--of-blue); background: var(--of-soft); }
body .product-nav button.is-active,
body .product-nav button[aria-pressed="true"] { color: var(--of-blue); background: var(--of-soft); }

body .header-search {
  width: min(100%, 420px);
  max-width: 420px;
  justify-self: end;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 78%, var(--of-canvas));
  border: 1px solid var(--of-border);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, .02);
}
body .header-search:focus-within { border-color: var(--of-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
body .header-search { position: relative; }
body .of-search-palette {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  max-height: min(540px, calc(100vh - 110px));
  padding: 7px;
  overflow-y: auto;
  border: 1px solid var(--of-border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 20px 55px rgba(15, 23, 42, .18);
}
body .of-search-palette[hidden] { display: none; }
body .of-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  width: 100%;
  min-height: 58px;
  padding: 10px 11px;
  border: 0;
  border-radius: 7px;
  color: var(--of-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
body .of-search-result:hover,
body .of-search-result:focus,
body .of-search-result[aria-selected="true"] { outline: 0; background: var(--of-soft); }
body .of-search-result strong { grid-column: 1; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
body .of-search-result > span:not(.of-search-arrow) { grid-column: 1; overflow: hidden; color: var(--of-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
body .of-search-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--of-blue); font-size: 18px; }
body .of-search-empty { margin: 0; padding: 22px 14px; color: var(--of-muted); text-align: center; }
body .donate-button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
body .of-saved-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--of-border);
  border-radius: 8px;
  color: var(--of-ink);
  background: var(--panel);
  font-size: 12px;
  font-weight: 680;
}
body .of-saved-button:hover { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); }
body .of-saved-star { color: #d97706; }
body .of-saved-count {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: 999px;
  color: #fff;
  background: var(--of-blue);
  font-size: 10px;
}
body .icon-button,
body .language-picker select { border-radius: 8px; }

body .quickbar {
  position: sticky;
  top: 64px;
  z-index: 18;
  display: flex;
  min-height: 48px;
  padding: 6px max(24px, calc((100vw - 1440px) / 2));
  background: var(--panel);
  border-bottom: 1px solid var(--of-border);
  box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
}
body .quickbar button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  color: var(--of-muted);
  background: transparent;
  font-weight: 650;
}
body .quickbar button:hover { color: var(--of-blue); background: var(--of-soft); }
body .quickbar button.is-active,
body .quickbar button[aria-current="page"] { color: var(--of-blue); background: var(--of-soft); }
body .quickbar button span:first-child { color: var(--of-blue); }

body .view { width: min(1400px, calc(100% - 48px)); }
body .formatter-home { padding-top: 34px; }
body .page-kicker { color: #08775d; background: #ecfdf5; border-color: #bbf7d0; }
body .studio-heading h1,
body .tool-title-row h1,
body .library-heading h2 { color: var(--of-ink); letter-spacing: -.035em; font-weight: 760; }
body .eyebrow { color: var(--of-blue); letter-spacing: .12em; }
body .studio-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
body .studio-heading > div { min-width: 0; }
body .studio-heading h1 { max-width: none; margin: 5px 0 10px; font-size: clamp(32px, 3vw, 46px); line-height: 1.08; }
body .studio-heading > div > p:not(.eyebrow) { max-width: 680px; color: var(--of-muted); font-size: 16px; line-height: 1.65; }
body .of-quick-heading { padding: 18px 18px 15px; border-bottom: 1px solid var(--of-border); background: var(--panel); }
body .of-quick-heading h2 { margin: 0 0 5px; color: var(--of-ink); font-size: 18px; letter-spacing: -.015em; }
body .of-quick-heading p { margin: 0; color: var(--of-muted); font-size: 12px; }

body .quick-studio,
body .tool-commandbar,
body .editor-panel,
body .tool-card,
body .trust-grid article {
  border: 1px solid var(--of-border);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(30, 64, 175, .055);
}
body .studio-toolbar { background: color-mix(in srgb, var(--panel) 72%, var(--of-canvas)); border-bottom-color: var(--of-border); }
body .studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 9px 11px;
}
body .studio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
body .studio-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--of-border);
  border-radius: 7px;
  color: var(--of-ink);
  background: var(--panel);
  font-size: 12px;
  font-weight: 650;
}
body .studio-actions button:hover { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); }
body .studio-actions button:disabled { opacity: .5; }
body .primary-actions button { color: #fff; }
body #quick-copy:not(:disabled) { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); box-shadow: none; }
body .privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid #bdebd7;
  border-radius: 8px;
  color: #08775d;
  background: #effcf6;
  font-size: 12px;
  font-weight: 680;
}
:root[data-dark] body .privacy-link { border-color: #285a48; color: #8ce5c1; background: #142c25; }

body .primary-button,
body .primary-actions button,
body #run-button,
body #run-arrow-button {
  border-color: var(--of-blue);
  background: linear-gradient(180deg, #3478f6, var(--of-blue-dark));
  color: #fff;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .2);
}
body .primary-button:hover,
body .primary-actions button:hover,
body #run-button:hover,
body #run-arrow-button:hover { background: #1748bd; transform: translateY(-1px); }

body .tool-view { padding-top: 28px; }
body .of-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 16px;
  color: var(--of-muted);
  font-size: 12px;
}
body .of-breadcrumb button {
  padding: 3px 0;
  border: 0;
  color: var(--of-blue);
  background: transparent;
  font-weight: 680;
}
body .of-breadcrumb-category { color: var(--of-muted); }
body .of-breadcrumb-current {
  max-width: min(420px, 42vw);
  overflow: hidden;
  color: var(--of-ink);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .back-button {
  margin-bottom: 18px;
  color: var(--of-blue);
  border: 0;
  background: transparent;
  font-weight: 650;
}
body .tool-title-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}
body .tool-title-icon {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, var(--of-blue), var(--of-cyan));
  box-shadow: 0 7px 18px rgba(37, 99, 235, .18);
}
body .tool-title-row h1 { margin: 2px 0 7px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.12; }
body .tool-title-row p { max-width: 780px; margin: 0; color: var(--of-muted); }
body .tool-warning {
  margin: 0 0 14px;
  padding: 11px 13px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #854d0e;
  background: #fffbeb;
  font-size: 12px;
  line-height: 1.55;
}
body .tool-warning::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; color: #fff; background: #d97706; font-weight: 800; }
:root[data-dark] body .tool-warning { border-color: #713f12; color: #fde68a; background: #2c2415; }
body .local-processing-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: #08775d;
  font-size: 12px;
  font-weight: 650;
}
body .local-processing-note > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}
body .of-trust-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 12px; vertical-align: middle; }
body .of-trust-badges span {
  padding: 4px 7px;
  border: 1px solid var(--of-border);
  border-radius: 999px;
  color: var(--of-muted);
  background: color-mix(in srgb, var(--panel) 74%, var(--of-canvas));
  font-size: 10px;
  font-weight: 650;
}

body .tool-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--panel);
}

@media (min-width: 761px) {
  body .tool-view > .back-button { display: none; }
  body .tool-commandbar {
    position: sticky;
    top: 122px;
    z-index: 14;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .09);
  }
}
body .tool-commandbar > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
body .tool-commandbar button,
body .editor-panel footer button {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--of-border);
  border-radius: 7px;
  background: var(--panel);
  color: var(--of-ink);
  font-weight: 650;
}
body .tool-commandbar button:hover,
body .editor-panel footer button:hover { border-color: #91b3f6; color: var(--of-blue); background: var(--of-soft); }
body #run-button { order: 10; min-width: 138px; color: #fff; }
body #copy-input-button { order: 11; }
body #copy-result-button { order: 12; }
body .command-copy-button::before { content: "⧉"; margin-right: 6px; color: var(--of-blue); }
body .command-copy-button:not(:disabled) { border-color: #91b3f6; color: var(--of-blue); background: var(--of-soft); }
body #sample-button { order: 1; }
body #clear-button { order: 2; }
body #copy-tool-link-button { order: 4; margin-left: 6px; }
body #favorite-button { order: 5; }
body #sample-button::before { content: "◇"; margin-right: 6px; color: var(--of-blue); }
body #clear-button::before { content: "×"; margin-right: 6px; color: #dc2626; font-weight: 800; }
body #copy-tool-link-button::before { content: "↗"; margin-right: 6px; color: var(--of-blue); }
body #favorite-button::before { content: "☆"; margin-right: 6px; color: #d97706; }
body #favorite-button[aria-pressed="true"]::before { content: "★"; }
body #of-layout-toggle { order: 3; }
body #of-auto-run-toggle { order: 3; gap: 7px; }
body #of-wrap-toggle { order: 3; gap: 6px; }
body #of-wrap-toggle[aria-pressed="true"] { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); }
body .of-wrap-icon { color: var(--of-blue); font-size: 16px; font-weight: 760; }
body .of-workspace-settings { position: relative; order: 3; }
body .of-workspace-settings > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--of-border);
  border-radius: 7px;
  color: var(--of-ink);
  background: var(--panel);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
body .of-workspace-settings > summary::-webkit-details-marker { display: none; }
body .of-workspace-settings[open] > summary,
body .of-workspace-settings > summary:hover { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); }
body .of-workspace-settings-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  width: max-content;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--of-border);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
}
body .of-workspace-settings-menu > button {
  order: initial;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
}
body .of-toggle-indicator {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background .16s ease;
}
body .of-toggle-indicator::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  transition: transform .16s ease;
}
body #of-auto-run-toggle[aria-pressed="true"] .of-toggle-indicator { background: var(--of-blue); }
body #of-auto-run-toggle[aria-pressed="true"] .of-toggle-indicator::after { transform: translateX(12px); }
body .tool-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body .tool-options:not(:empty)::before {
  content: attr(data-label);
  margin-right: 2px;
  color: var(--of-muted);
  font-size: 11px;
  font-weight: 740;
  letter-spacing: .07em;
  text-transform: uppercase;
}
body .tool-options :is(select, input) { border-radius: 7px; border-color: var(--of-border); background: var(--panel); }
body .tool-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--of-muted);
  font-size: 12px;
  font-weight: 620;
}
body .tool-options :is(select, input[type="number"], input[type="text"]) {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--of-border);
  color: var(--of-ink);
  background: var(--panel);
}
body .tool-options select { min-width: 86px; padding-right: 28px; }
body .tool-options input[type="number"] { width: 92px; }
body .tool-options :is(input[type="checkbox"], input[type="radio"]) {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--of-blue);
}
body .tool-options :is(select, input):focus-visible { outline: 2px solid var(--of-blue); outline-offset: 2px; }
body .tool-options :is(select, input):disabled { opacity: .55; }

body .workspace {
  display: grid;
  grid-template-columns: minmax(220px, calc(var(--of-input-percent, 50%) - 27px)) 54px minmax(220px, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 540px;
}
body .editor-panel { position: relative; min-width: 0; overflow: hidden; background: var(--panel); }
body .editor-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--panel) 72%, var(--of-canvas));
  border-bottom: 1px solid var(--of-border);
}
body .editor-panel > header :first-child { color: var(--of-ink); font-weight: 720; }
body .editor-panel > header :last-child { color: var(--of-muted); font-size: 12px; }
body .editor-panel > header { gap: 12px; }
body .of-editor-metrics {
  margin-left: auto;
  color: var(--of-muted);
  font: 600 11px/1.2 "Cascadia Code", Consolas, monospace;
  white-space: nowrap;
}
body .output-panel > header #status-text { margin-left: 0; }
body .editor-panel textarea {
  display: block;
  width: 100%;
  min-height: 445px;
  padding: 16px 18px 16px 52px;
  border: 0;
  border-radius: 0;
  color: var(--of-ink);
  background-color: var(--panel);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--panel) 72%, var(--of-canvas)) 0, color-mix(in srgb, var(--panel) 72%, var(--of-canvas)) 39px, var(--of-border) 39px, var(--of-border) 40px, transparent 40px);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  line-height: 1.72;
  resize: vertical;
  tab-size: 2;
}
body .editor-panel textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .35); }
body .editor-panel textarea::selection,
body .quick-studio textarea::selection { color: var(--of-ink); background: rgba(56, 189, 248, .28); }
body .editor-panel textarea::placeholder { color: #94a3b8; opacity: .9; }
body :is(textarea, .category-tabs, .of-search-palette) { scrollbar-color: #aebbd0 transparent; scrollbar-width: thin; }
body .editor-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  min-height: 52px;
  padding: 8px 12px;
  border-top: 1px solid var(--of-border);
  background: color-mix(in srgb, var(--panel) 72%, var(--of-canvas));
}
body .smart-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 48px;
  padding: 8px 12px;
  border-top: 1px solid var(--of-border);
  color: var(--of-muted);
  background: color-mix(in srgb, var(--panel) 72%, var(--of-canvas));
  font-size: 11px;
}
body .smart-suggestions[hidden] { display: none; }
body .smart-suggestions button {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid var(--of-border);
  border-radius: 7px;
  color: var(--of-blue);
  background: var(--panel);
  font-size: 11px;
  font-weight: 660;
}
body .smart-suggestions button:hover { border-color: #91b3f6; background: var(--of-soft); }
body .output-image-panel {
  min-height: 445px;
  padding: 24px;
  place-items: center;
  overflow: auto;
  background-color: var(--panel);
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, .14) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, .14) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, .14) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, .14) 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
body .output-image-panel:not([hidden]) { display: grid; }
body .output-image-panel img {
  display: block;
  max-width: 100%;
  max-height: 560px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
}
body #copy-button::before { content: "⧉"; margin-right: 6px; color: var(--of-blue); }
body #download-button::before { content: "↓"; margin-right: 6px; color: var(--of-blue); font-weight: 800; }
body #use-output-button { margin-right: auto; }
body .output-panel > footer { justify-content: flex-start; }
body #download-button:not(:disabled) { border-color: #91b3f6; color: var(--of-blue); background: var(--of-soft); }
body #download-button.is-confirmed::before { content: "✓"; color: #059669; }
body .run-column { position: relative; display: grid; place-items: center; }
body #run-arrow-button { width: 38px; height: 38px; border-radius: 9px; }
body .of-workspace-resize {
  position: absolute;
  inset: 0 18px;
  z-index: 1;
  cursor: col-resize;
  touch-action: none;
}
body .of-workspace-resize::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--of-border);
  transition: width .15s ease, margin .15s ease, background .15s ease;
}
body .of-workspace-resize:hover::before,
body .of-workspace-resize:focus-visible::before,
body .of-workspace-resize.is-resizing::before { width: 4px; margin-left: -2px; background: var(--of-blue); }
body #run-arrow-button { position: relative; z-index: 2; }
body.of-resizing-workspace { cursor: col-resize; user-select: none; }
body .workspace.is-stacked { grid-template-columns: 1fr; gap: 12px; }
body .workspace.is-stacked .run-column { min-height: 42px; }
body .workspace.is-stacked #run-arrow-button { transform: rotate(90deg); }
body .workspace.is-stacked .of-workspace-resize { display: none; }

/* This interface intentionally has no upload, file picker, or drop zone. */
body .file-panel,
body .generic-file-panel,
body .text-file-panel,
body .file-drop,
body .file-load { display: none !important; }

body .ad-slot { display: none; }
body #donation-status,
body #footer-donate-button[aria-disabled="true"] { display: none; }
body .category-tabs button[aria-selected="true"],
body .category-tabs button.active { color: #fff; background: var(--of-blue); }
body .tool-card:hover,
body .tool-card:focus-within { border-color: #91b3f6; box-shadow: 0 12px 28px rgba(37, 99, 235, .1); }
body .toast { background: #172033; color: #fff; border-radius: 8px; }

@keyframes of-rise-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .of-breadcrumb,
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .tool-title-row,
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .tool-commandbar,
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .workspace {
  animation: of-rise-in .3s ease both;
}
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .tool-title-row { animation-delay: .035s; }
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .tool-commandbar { animation-delay: .07s; }
html[data-open-formatter-ui="ready"] body .tool-view:not([hidden]) .workspace { animation-delay: .105s; }

body footer {
  margin-top: 56px;
  padding: 34px max(24px, calc((100vw - 1400px) / 2));
  border-top: 1px solid var(--of-border);
  color: var(--of-muted);
  background: var(--panel);
}
body footer strong { color: var(--of-ink); }
body footer :is(a, button) { color: var(--of-muted); }
body footer :is(a, button):hover { color: var(--of-blue); }
body footer button { width: max-content; padding: 0; border: 0; background: transparent; }
body .footer-brand { color: var(--of-ink); }

body dialog {
  width: min(620px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 40px));
  padding: clamp(24px, 4vw, 38px);
  overflow-y: auto;
  border: 1px solid var(--of-border);
  border-radius: 12px;
  color: var(--of-ink);
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .28);
}
body dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(4px); }
body dialog h2 { margin: 4px 44px 12px 0; color: var(--of-ink); font-size: clamp(24px, 4vw, 34px); letter-spacing: -.03em; }
body dialog p,
body dialog li { color: var(--of-muted); line-height: 1.68; }
body dialog ul { padding-left: 21px; }
body .dialog-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--of-border);
  border-radius: 8px;
  color: var(--of-muted);
  background: var(--panel);
  font-size: 22px;
}
body .dialog-close:hover { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); }
body #dialog-clear-data {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  color: #b91c1c;
  background: #fff7f7;
  font-weight: 680;
}
:root[data-dark] body #dialog-clear-data { border-color: #7f1d1d; color: #fecaca; background: #35171b; }

body .switch-tools {
  margin-block: 22px 34px;
  padding: 16px;
  border: 1px solid var(--of-border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 4px 18px rgba(30, 64, 175, .045);
}
body .switch-title { margin-bottom: 12px; color: var(--of-ink); font-weight: 720; }
body .switch-title button { color: var(--of-blue); font-weight: 650; }
body .switch-tool-list { display: flex; flex-wrap: wrap; gap: 8px; }
body .switch-tool-list button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--of-border);
  border-radius: 7px;
  color: var(--of-muted);
  background: color-mix(in srgb, var(--panel) 76%, var(--of-canvas));
  font-weight: 620;
}
body .switch-tool-list button:hover { color: var(--of-blue); border-color: #91b3f6; background: var(--of-soft); }

body .tools-section {
  margin-block: 38px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--of-border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 28px rgba(30, 64, 175, .055);
}
body .library-heading { gap: 24px; margin-bottom: 22px; }
body .library-actions { align-items: center; gap: 9px; }
body .library-actions button,
body .library-filter {
  min-height: 39px;
  border: 1px solid var(--of-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 76%, var(--of-canvas));
}
body #favorites-filter[aria-pressed="true"] { color: #fff; border-color: var(--of-blue); background: var(--of-blue); }
body #favorites-filter[aria-pressed="true"]::before { content: "★"; margin-right: 6px; color: #fde68a; }
body .library-filter:focus-within { border-color: var(--of-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); }
body .library-filter input { background: transparent; }

body .category-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 9px;
  overflow-x: auto;
  scrollbar-width: thin;
}
body .category-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--of-border);
  border-radius: 999px;
  color: var(--of-muted);
  background: var(--panel);
  font-size: 12px;
  font-weight: 680;
}
body .category-tabs button:hover { color: var(--of-blue); border-color: #91b3f6; }
body .category-tabs button[aria-selected="true"],
body .category-tabs button.active { color: #fff; border-color: var(--of-blue); background: var(--of-blue); }
body .tool-count { margin: 8px 0 14px; color: var(--of-muted); font-size: 12px; }

body .tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}
body .tool-card {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 136px;
  min-height: 136px;
  padding: 17px 48px 17px 17px;
  border: 1px solid var(--of-border);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body .tool-card button[aria-pressed] {
  position: absolute;
  top: 11px;
  right: 11px;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #94a3b8;
  background: transparent;
}
body .tool-card button[aria-pressed]:hover { color: #d97706; border-color: #fde68a; background: #fffbeb; }
body .tool-card button[aria-pressed="true"] { color: #d97706; border-color: #fde68a; background: #fffbeb; }
:root[data-dark] body .tool-card button[aria-pressed="true"] { border-color: #713f12; background: #2c2415; }
body .tool-card:hover { transform: translateY(-2px); }
body .tool-card h3 { margin: 0 0 7px; color: var(--of-ink); font-size: 15px; font-weight: 720; }
body .tool-card p { margin: 0; color: var(--of-muted); font-size: 12px; line-height: 1.55; }
body .tool-card :is(button, a) { color: var(--of-blue); }
body .empty-state {
  padding: 42px 20px;
  border: 1px dashed var(--of-border);
  border-radius: 9px;
  color: var(--of-muted);
  background: color-mix(in srgb, var(--panel) 74%, var(--of-canvas));
  text-align: center;
}

body .trust-grid { gap: 12px; }
body .trust-grid article { background: var(--panel); }

body .of-tool-guide {
  margin: 30px 0 42px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--of-border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 28px rgba(30, 64, 175, .05);
}
body .of-guide-heading { max-width: 720px; margin-bottom: 22px; }
body .of-guide-heading h2 { margin: 3px 0 7px; color: var(--of-ink); font-size: clamp(22px, 2.5vw, 30px); letter-spacing: -.025em; }
body .of-guide-heading p { margin: 0; color: var(--of-muted); line-height: 1.6; }
body .of-guide-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body .of-guide-steps article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 17px;
  border: 1px solid var(--of-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 80%, var(--of-canvas));
}
body .of-guide-steps article > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  background: var(--of-blue);
  font-weight: 760;
}
body .of-guide-steps h3,
body .of-guide-meta h3 { margin: 2px 0 6px; color: var(--of-ink); font-size: 14px; }
body .of-guide-steps p,
body .of-guide-meta p { margin: 0; color: var(--of-muted); font-size: 12px; line-height: 1.55; }
body .of-guide-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 12px; margin-top: 12px; }
body .of-guide-meta article { padding: 17px; border-radius: 9px; }
body .of-privacy-card { border: 1px solid #bdebd7; background: #effcf6; }
:root[data-dark] body .of-privacy-card { border-color: #285a48; background: #142c25; }
body .of-keyboard-card { border: 1px solid var(--of-border); background: color-mix(in srgb, var(--panel) 80%, var(--of-canvas)); }
body .of-keyboard-card p { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 9px; margin-top: 7px; }
body .of-keyboard-card kbd { width: max-content; padding: 4px 7px; border: 1px solid var(--of-border); border-bottom-width: 2px; border-radius: 5px; color: var(--of-ink); background: var(--panel); font: 600 11px/1 "Cascadia Code", Consolas, monospace; }

@media (max-width: 980px) {
  body .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .library-heading { align-items: stretch; flex-direction: column; }
  body .of-guide-steps { grid-template-columns: 1fr; }
}

@media (max-width: 1220px) {
  body .topbar { grid-template-columns: auto 1fr auto; }
  body .product-nav { display: none; }
  body .header-search { justify-self: stretch; max-width: none; }
  body .tool-commandbar { align-items: flex-start; flex-direction: column; }
  body .tool-commandbar > div:last-child { justify-content: flex-start; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 58px; }
  body .topbar { position: relative; height: auto; min-height: 62px; grid-template-columns: 1fr auto; padding: 10px 16px; gap: 10px; }
  body .header-search { grid-column: 1 / -1; grid-row: 2; }
  body .top-actions .language-picker,
  body .top-actions .icon-button { display: none; }
  body .top-actions .language-picker { display: inline-flex; }
  body .top-actions .icon-button { display: inline-grid; place-items: center; }
  body .of-saved-label { display: none; }
  body .quickbar { top: 0; overflow-x: auto; justify-content: flex-start; padding-inline: 12px; scroll-snap-type: x proximity; scrollbar-width: none; }
  body .quickbar::-webkit-scrollbar { display: none; }
  body .quickbar button { flex: 0 0 auto; min-height: 42px; scroll-snap-align: start; }
  body .view { width: min(100% - 24px, 1400px); }
  body .studio-heading { flex-direction: column; gap: 14px; }
  body .studio-heading h1 { font-size: clamp(34px, 11vw, 48px); }
  body .studio-toolbar { align-items: stretch; flex-direction: column; }
  body .studio-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .primary-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .studio-actions button { width: 100%; }
  body .workspace { grid-template-columns: 1fr; gap: 12px; }
  body .run-column { min-height: 42px; }
  body #run-arrow-button { width: 42px; height: 42px; }
  body .of-workspace-resize { display: none; }
  body #run-arrow-button { transform: rotate(90deg); }
  body .editor-panel { grid-template-rows: 48px minmax(0, 1fr) auto; }
  body .editor-panel textarea { min-height: 330px; }
  body .tool-title-row { grid-template-columns: 42px 1fr; }
  body .tool-title-icon { width: 42px; height: 42px; }
  body .tool-commandbar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  body .tool-commandbar button,
  body .editor-panel footer button,
  body .of-workspace-settings > summary { min-height: 42px; }
  body .editor-panel footer { display: grid; grid-template-columns: 1fr 1fr; }
  body .editor-panel footer button { width: 100%; }
  body #use-output-button { grid-column: 1 / -1; margin-right: 0; }
  body .of-breadcrumb { flex-wrap: wrap; }
  body .of-breadcrumb-current {
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  body #run-button { grid-column: 1 / -1; }
  body #of-layout-toggle { display: none; }
  body .of-workspace-settings { grid-column: span 2; }
  body .of-workspace-settings > summary { width: 100%; justify-content: center; }
  body .of-workspace-settings-menu { left: 0; right: 0; width: 100%; }
  body .tools-section { padding: 16px; }
  body .tool-grid { grid-template-columns: 1fr; }
  body .library-actions { align-items: stretch; flex-direction: column; }
  body .library-filter { width: 100%; }
  body .of-guide-meta { grid-template-columns: 1fr; }
}
@media (min-width: 761px) {
  body .studio-heading h1,
  body .tool-title-row h1 { white-space: nowrap; }
}

/* Top navigation mega menus */
body .product-nav { position: relative; }
body .product-nav > button { position: relative; }
body .product-nav > button[aria-expanded="true"]::after {
  position: absolute;
  right: 10px;
  bottom: -13px;
  left: 10px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--of-blue);
  content: "";
}
body .nav-mega-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 13px);
  left: 0;
  display: none;
  width: min(940px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 155px));
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--of-border);
  border-radius: 0 0 12px 12px;
  background: var(--panel);
  box-shadow: 0 24px 55px rgba(2, 10, 24, .28);
}
body .nav-mega-menu.is-open { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 28px; }
body .nav-mega-section { min-width: 0; }
body .nav-mega-heading {
  margin: 0 0 10px;
  color: var(--of-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body .nav-mega-links { display: grid; gap: 2px; }
body .nav-mega-link {
  width: 100%;
  padding: 7px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--of-ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
body .nav-mega-link:hover,
body .nav-mega-link:focus-visible { color: var(--of-blue); background: var(--soft-blue); outline: none; }
body .nav-mega-empty { color: var(--of-muted); font-size: 12px; }

@media (max-width: 1160px) {
  body .nav-mega-menu { display: none !important; }
}

/* Native category comboboxes */
body .product-nav { display: flex; align-items: stretch; justify-content: flex-start; gap: 2px; }
body .nav-combobox { position: relative; display: block; }
body .nav-category-select {
  height: 38px;
  width: 98px;
  max-width: 98px;
  padding: 0 24px 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--of-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
body .nav-category-select:hover,
body .nav-category-select:focus {
  border-color: var(--of-border);
  background: var(--soft-blue);
  color: var(--of-ink);
  outline: none;
}
body .nav-category-select option {
  background: var(--panel);
  color: var(--of-ink);
}

@media (min-width: 1501px) {
  body .formatter-topbar {
    grid-template-columns: 180px minmax(320px, 1fr) auto;
    column-gap: 20px;
  }
  body .formatter-topbar .brand {
    position: relative;
    z-index: 2;
    width: 180px;
    min-width: 180px;
    overflow: hidden;
  }
  body .formatter-topbar .product-nav {
    min-width: 0;
    overflow: hidden;
  }
}

body .quickbar .product-nav {
  display: flex;
  width: min(100%, 1100px);
  min-width: 0;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}
body .quickbar .nav-combobox { flex: 0 0 98px; }
body .quickbar .nav-combobox[data-category="text-plus"] { flex-basis: 118px; }
body .quickbar .nav-combobox[data-category="text-plus"] .nav-category-select { width: 118px; max-width: 118px; }
body .quickbar .nav-primary-link { display: inline-flex; flex: 0 0 76px; align-items: center; justify-content: center; height: 38px; border: 1px solid transparent; border-radius: 7px; color: var(--of-muted); font-size: 13px; font-weight: 800; text-decoration: none; }
body .quickbar .nav-datasets-link { flex-basis: 88px; }
body .quickbar .nav-primary-link:hover, body .quickbar .nav-primary-link:focus-visible { border-color: var(--of-border); background: var(--soft-blue); color: var(--of-blue); outline: none; }
body .of-search-page-result { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--of-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
body .of-search-page-result:hover, body .of-search-page-result:focus-visible { background: var(--soft-blue); color: var(--of-blue); outline: none; }

@media (min-width: 1161px) and (max-width: 1500px) {
  body .formatter-topbar { grid-template-columns: 190px minmax(280px, 1fr) auto; }
  body .formatter-topbar .product-nav { display: none; }
}

@media (max-width: 1160px) {
  body .product-nav { display: none; }
  body .quickbar .product-nav { display: flex; }
}

@media (max-width: 480px) {
  body .brand > span:not(.brand-mark) { display: none; }
  body .language-picker select { max-width: 74px; padding-left: 7px; }
  body .top-actions { gap: 6px; }
}

/* Editor behavior enhancements supplied by openformatter-ui.js. */
body .of-editor-frame {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  min-height: 445px;
  background: var(--panel);
}
body .of-editor-frame > textarea {
  grid-column: 2;
  min-height: 445px;
  padding-left: 14px;
  background-image: none;
}
body .of-editor-frame > textarea.of-no-wrap { overflow-x: auto; white-space: pre; }
body .of-editor-frame.of-wrap-active { grid-template-columns: minmax(0, 1fr); }
body .of-editor-frame.of-wrap-active > .of-line-numbers { display: none; }
body .of-editor-frame.of-wrap-active > textarea { grid-column: 1; }
body .of-editor-frame.of-large-document { grid-template-columns: minmax(0, 1fr); }
body .of-editor-frame.of-large-document > .of-line-numbers { display: none; }
body .of-editor-frame.of-large-document > textarea { grid-column: 1; }
body .of-line-numbers {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 16px 9px 16px 4px;
  overflow: hidden;
  border-right: 1px solid var(--of-border);
  color: #94a3b8;
  background: color-mix(in srgb, var(--panel) 72%, var(--of-canvas));
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  line-height: 1.862;
  text-align: right;
  user-select: none;
  pointer-events: none;
}
body .of-editor-frame:focus-within { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .35); }
body .of-editor-frame:focus-within .of-line-numbers { color: var(--of-blue); }
body .of-editor-frame > textarea:focus { box-shadow: none; }
body .output-panel[aria-busy="true"] .of-editor-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 28px;
  height: 28px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(37, 99, 235, .18);
  border-top-color: var(--of-blue);
  border-radius: 50%;
  animation: of-spin .75s linear infinite;
}
body .output-panel[aria-busy="true"] .of-editor-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  pointer-events: none;
}

body .of-shortcut-hint {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  margin-left: 2px;
  padding: 0 8px;
  border: 1px solid var(--of-border);
  border-radius: 6px;
  color: var(--of-muted);
  background: color-mix(in srgb, var(--panel) 76%, var(--of-canvas));
  font: 600 11px/1 "Cascadia Code", Consolas, monospace;
}
body .of-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #94a3b8;
}
body .output-panel[data-output-state="ready"] .of-status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
body .output-panel[data-output-state="busy"] .of-status-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
body .output-panel[data-output-state="stale"] .of-status-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .12); }
body .output-panel[data-output-state="stale"] .of-editor-frame { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .45); }
body .output-panel[data-output-state="stale"] textarea { color: color-mix(in srgb, var(--of-ink) 62%, var(--of-muted)); }
body .output-panel[data-output-state="error"] .of-status-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
body .output-panel[data-output-state="error"] .of-editor-frame { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .48); }
body .quick-studio[data-output-state="ready"] .of-status-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .12); }
body .quick-studio[data-output-state="error"] .of-status-dot { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
body .of-error-summary {
  padding: 10px 13px;
  border-bottom: 1px solid #fecaca;
  color: #991b1b;
  background: #fef2f2;
  font: 600 12px/1.55 "Cascadia Code", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body .of-error-summary[hidden] { display: none; }
:root[data-dark] body .of-error-summary { border-color: #7f1d1d; color: #fecaca; background: #35171b; }

body #run-button.is-running { position: relative; padding-left: 36px; cursor: progress; }
body #run-button.is-running::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: of-spin .7s linear infinite;
}
@keyframes of-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  body #run-button.is-running::before,
  body .output-panel[aria-busy="true"] .of-editor-frame::after { animation-duration: 1.6s; }
  body .primary-button:hover,
  body .primary-actions button:hover,
  body #run-button:hover,
  body #run-arrow-button:hover { transform: none; }
  html[data-open-formatter-ui="ready"] body :is(.of-breadcrumb, .tool-title-row, .tool-commandbar, .workspace, .tool-card) { animation: none; }
}

@media (forced-colors: active) {
  body :is(.topbar, .quickbar, .tool-commandbar, .editor-panel, .quick-studio, .tools-section, .tool-card, .of-tool-guide, dialog) {
    border: 1px solid CanvasText;
  }
  body :is(button, select, input, textarea, summary, .of-search-palette) { forced-color-adjust: auto; }
  body :is(.primary-button, #run-button, #run-arrow-button, .category-tabs button[aria-selected="true"]) {
    border: 2px solid ButtonText;
  }
  body :is(.of-status-dot, .local-processing-note > span:first-child) { background: Highlight; box-shadow: none; }
  body .of-workspace-resize::before { background: CanvasText; }
  body .of-error-summary,
  body .tool-warning { border: 2px solid CanvasText; }
}

body.of-file-dragging::after {
  content: attr(data-of-drop-message);
  position: fixed;
  inset: 18px;
  z-index: 1000;
  display: grid;
  place-items: center;
  border: 2px dashed var(--of-blue);
  border-radius: 14px;
  color: var(--of-blue);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  font-weight: 750;
  pointer-events: none;
}

@media (max-width: 760px) {
  body .of-editor-frame,
  body .of-editor-frame > textarea { min-height: 330px; }
  body .of-shortcut-hint { display: none; }
  body .of-editor-metrics { display: none; }
}

body .quick-studio .of-editor-frame {
  min-height: 310px;
  border-top: 1px solid var(--of-border);
  border-bottom: 1px solid var(--of-border);
}
body .quick-studio .of-editor-frame > textarea {
  min-height: 310px;
  padding: 16px 14px;
  border: 0;
  border-radius: 0;
  color: var(--of-ink);
  background: var(--panel);
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  font-size: 13px;
  line-height: 1.72;
  resize: vertical;
  tab-size: 2;
}
body .quick-studio .of-line-numbers { min-height: 310px; }
body .quick-studio .studio-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 14px;
  color: var(--of-muted);
  background: color-mix(in srgb, var(--panel) 72%, var(--of-canvas));
}
/* Keep compact navigation and policy actions usable at reflow widths. */
#global-search,
#library-search,
#back-button,
.of-breadcrumb-root,
.switch-title button,
#footer-privacy-button,
#footer-terms-button {
  min-height: 24px;
}
body .workspace :is(button, textarea, select, input, [tabindex]):focus-visible {
  scroll-margin-block-start: 220px;
}

@media (max-width: 900px) {
  body .editor-panel { grid-template-rows: 48px minmax(0, 1fr) auto; }
  body .of-breadcrumb { flex-wrap: wrap; }
  body .of-breadcrumb-current {
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }
  body .output-panel > footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  body .output-panel > footer button { width: 100%; }
  body #use-output-button { grid-column: 1 / -1; margin-right: 0; }
}

body #run-button {
  background: linear-gradient(#2563eb, #1d4ed8);
}

html[data-dark] body #download-button {
  color: #a8c7ff;
}