/* The New JSON formatter: a single code canvas with preserved source and result views. */
#jfmtTool {
  --jfmt-paper:#faf6ee; --jfmt-wash:#f5efdf; --jfmt-ink:#1a1208; --jfmt-muted:#5a4a30;
  --jfmt-line:#b8a888; --jfmt-soft:#ddd4be; --jfmt-button:#ede6d4; --jfmt-hover:#dfd4bb;
  --jfmt-accent:#c44a00; --jfmt-primary:#1a1208; --jfmt-on-primary:#faf6ee;
  box-sizing:border-box; width:100%; min-width:0; padding:20px 20px 0; color:var(--jfmt-ink);
  background:var(--jfmt-paper);
  border-top:3px double var(--jfmt-ink); border-bottom:1px solid var(--jfmt-line);
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
#jfmtTool *,#jfmtTool *::before,#jfmtTool *::after { box-sizing:border-box; }
#jfmtTool [hidden] { display:none!important; }
#jfmtTool :is(button,select,textarea) { -webkit-text-fill-color:currentColor; }
#jfmtTool :is(button,select) { min-height:40px; border:1px solid var(--jfmt-line); border-radius:2px; padding:9px 13px; background:var(--jfmt-button); color:var(--jfmt-ink); box-shadow:none; font:700 12px/1.25 system-ui,sans-serif; cursor:pointer; transition:background-color 170ms ease,border-color 170ms ease,transform 170ms ease; }
#jfmtTool button:not(:disabled):hover,#jfmtTool select:hover { background:var(--jfmt-hover); border-color:var(--jfmt-ink); }
#jfmtTool button:not(:disabled):active { transform:scale(.96); }
#jfmtTool button:disabled { opacity:.46; cursor:not-allowed; }
#jfmtTool :is(button,select,textarea):focus-visible { outline:2px solid var(--jfmt-accent); outline-offset:3px; }
#jfmtTool .jfmt-topline { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 20px; margin-bottom:15px; }
#jfmtTool .jfmt-topline p { margin:0; font-size:12px; line-height:1.5; color:var(--jfmt-muted); }
#jfmtTool .jfmt-local { display:flex; align-items:center; gap:8px; font-weight:700; }
#jfmtTool .jfmt-local span { width:6px; height:6px; border-radius:50%; background:var(--jfmt-accent); }
#jfmtTool[data-state="error"] .jfmt-code-frame { border-color:var(--jfmt-accent); }
#jfmtTool .jfmt-small-actions,#jfmtTool .jfmt-actions { display:flex; gap:6px; }
#jfmtTool .jfmt-small-actions button { padding-inline:10px; background:transparent; }
#jfmtTool .jfmt-mode { color:var(--jfmt-muted); font:700 11px/1.4 system-ui,sans-serif; }
#jfmtTool .jfmt-editor { padding:16px; min-width:0; flex:1; }
#jfmtTool textarea { display:block; width:100%; min-width:0; height:360px; min-height:200px; padding:12px; margin:0; border:1px solid var(--jfmt-soft); border-radius:2px; background:var(--jfmt-paper); color:var(--jfmt-ink); resize:vertical; box-shadow:inset 0 1px 2px rgb(26 18 8 / 3%); font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; white-space:pre-wrap; overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere; word-break:break-word; scrollbar-color:var(--jfmt-line) transparent; }
#jfmtTool textarea::placeholder { color:var(--jfmt-muted); opacity:.7; white-space:pre-wrap; }
#jfmtTool .jfmt-indent { display:flex; align-items:center; gap:8px; }
#jfmtTool .jfmt-indent label { color:var(--jfmt-muted); font-size:11px; line-height:1.4; }
#jfmtTool .jfmt-indent select { padding:8px 24px 8px 9px; }
#jfmtTool #jfmtFormat,#jfmtTool #jfmtCopy { background:var(--jfmt-primary); border-color:var(--jfmt-primary); color:var(--jfmt-on-primary); }
#jfmtTool :is(#jfmtFormat,#jfmtCopy):not(:disabled):hover { background:var(--jfmt-accent); border-color:var(--jfmt-accent); color:#fffaf2; }
#jfmtTool .jfmt-feedback { padding:15px 0; border-bottom:1px solid var(--jfmt-soft); }
#jfmtTool .jfmt-status-line { display:flex; align-items:center; gap:9px; }
#jfmtTool .jfmt-status-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--jfmt-line); transition:background-color 180ms ease; }
#jfmtTool[data-state="ready"] .jfmt-status-dot,#jfmtTool[data-state="valid"] .jfmt-status-dot,#jfmtTool[data-state="error"] .jfmt-status-dot { background:var(--jfmt-accent); }
#jfmtTool #jfmtStatus { flex:1; margin:0; font-size:13px; line-height:1.5; font-weight:700; overflow-wrap:anywhere; }
#jfmtTool #jfmtDetail,#jfmtTool #jfmtCopyStatus { margin:5px 0 0 16px; color:var(--jfmt-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
#jfmtTool #jfmtCopyStatus:empty { display:none; }
#jfmtTool #jfmtCopyStatus { color:var(--jfmt-accent); font-weight:700; }
#jfmtTool #jfmtErrorJump { flex:none; padding-inline:10px; }
#jfmtTool .jfmt-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#jfmtTool .jfmt-metrics > div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:14px 16px; border-right:1px solid var(--jfmt-soft); }
#jfmtTool .jfmt-metrics > div:first-child { padding-left:0; }
#jfmtTool .jfmt-metrics > div:last-child { border:0; padding-right:0; }
#jfmtTool .jfmt-metrics span { font-size:11px; color:var(--jfmt-muted); }
#jfmtTool .jfmt-metrics b { font:800 13px/1.4 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
#jfmtTool .jfmt-limit { margin:0; padding:0 0 14px; color:var(--jfmt-muted); font-size:11px; line-height:1.5; }
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) #jfmtTool,
html[data-scheme="dark"] body:not([data-scheme="light"]) #jfmtTool { --jfmt-paper:#241d12; --jfmt-wash:#2c2519; --jfmt-ink:#efe6d2; --jfmt-muted:#c3b492; --jfmt-line:#6f6047; --jfmt-soft:#574a37; --jfmt-button:#2f2115; --jfmt-hover:#3a2a1b; --jfmt-accent:#e8823f; --jfmt-primary:#6a3b1f; --jfmt-on-primary:#f7ead1; color-scheme:dark; }
@media(prefers-color-scheme:dark) { body[data-scheme="auto"] #jfmtTool { --jfmt-paper:#241d12; --jfmt-wash:#2c2519; --jfmt-ink:#efe6d2; --jfmt-muted:#c3b492; --jfmt-line:#6f6047; --jfmt-soft:#574a37; --jfmt-button:#2f2115; --jfmt-hover:#3a2a1b; --jfmt-accent:#e8823f; --jfmt-primary:#6a3b1f; --jfmt-on-primary:#f7ead1; color-scheme:dark; } }
@media(max-width:720px) {
  #jfmtTool { padding:14px 12px 0; }
  #jfmtTool .jfmt-editor { padding:12px; }
  #jfmtTool textarea { padding:10px; font-size:16px; line-height:1.55; }
  #jfmtTool .jfmt-metrics > div { padding:12px 9px; flex-direction:column; gap:3px; }
  #jfmtTool .jfmt-status-line { flex-wrap:wrap; }
  #jfmtTool #jfmtErrorJump { margin-left:16px; }
  #jfmtTool .jfmt-shortcut { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { #jfmtTool :is(button,select,.jfmt-status-dot) { transition:none; } #jfmtTool button:not(:disabled):active { transform:none; } }
.tn-jfmt-page .jfmt-ad { width:100%; max-width:728px; min-height:90px; margin-inline:auto; background:transparent; }
.tn-jfmt-page .jfmt-ad--top { margin-top:54px; margin-bottom:20px; }
.tn-jfmt-page .jfmt-ad--bottom { margin-top:22px; margin-bottom:28px; }
@media(max-width:720px) { .tn-jfmt-page .jfmt-ad--top { margin-top:48px; } }

#jfmtTool .jfmt-canvas { min-width:0; border:1px solid var(--jfmt-line); }
#jfmtTool .jfmt-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--jfmt-soft); background:var(--jfmt-wash); }
#jfmtTool .jfmt-command { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#jfmtTool .jfmt-view-tabs { display:flex; gap:0; }
#jfmtTool .jfmt-view-tabs button { background:transparent; min-width:58px; }
#jfmtTool .jfmt-view-tabs button+button { margin-left:-1px; }
#jfmtTool .jfmt-view-tabs button[aria-pressed="true"] { position:relative; border-color:var(--jfmt-ink); background:var(--jfmt-paper); color:var(--jfmt-ink); }
#jfmtTool .jfmt-editor-label { display:block; margin-bottom:9px; font-size:12px; font-weight:700; color:var(--jfmt-muted); }
#jfmtTool .jfmt-canvas-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--jfmt-soft); }
@media(max-width:720px) {
  #jfmtTool .jfmt-toolbar { padding:12px; gap:12px; }
  #jfmtTool .jfmt-command { width:100%; justify-content:space-between; gap:10px; }
  #jfmtTool .jfmt-canvas-foot { padding:10px 12px; }
  #jfmtTool .jfmt-actions { flex-wrap:wrap; }
  #jfmtTool .jfmt-actions button { padding-inline:10px; }
  #jfmtTool textarea { height:300px; }
}
@media(max-width:420px) { #jfmtTool .jfmt-actions { width:100%; } #jfmtTool .jfmt-actions button { flex:1; } }

#jfmtTool .jfmt-code-frame { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:start; min-width:0; border:1px solid var(--jfmt-soft); border-radius:2px; background:var(--jfmt-paper); }
#jfmtTool .jfmt-code-frame textarea { border:0; border-radius:0; box-shadow:none; }
#jfmtTool .jfmt-gutter { min-width:0; height:360px; padding:12px 8px 12px 0; border-right:1px solid var(--jfmt-soft); overflow:hidden; color:var(--jfmt-muted); text-align:right; user-select:none; font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
#jfmtTool .jfmt-gutter span { display:block; }
@media(max-width:720px) { #jfmtTool .jfmt-code-frame { grid-template-columns:43px minmax(0,1fr); } #jfmtTool .jfmt-gutter { height:300px; padding-top:10px; padding-bottom:10px; font-size:16px; line-height:1.55; } }