:root{
  --radius: 14px;
  --header-h: 64px;
  --footer-h: 44px;
  --shadow: 0 8px 24px rgba(0,0,0,.30);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* light defaults (will be overridden in theme blocks) */
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-2: #f9fbff;
  --panel-3: #f1f4f9;
  --text: #0f141b;
  --muted: #5a6675;
  --accent: #2a72e5;
  --danger: #d7263d;
  --ok: #128a53;
  --border: #d9e1ea;

  /* code colors (default/light) */
  --json-key: #0550ae;
  --json-string: #116329;
  --json-number: #9a6700;
  --json-bool: #0a3069;
  --json-null: #57606a;
}
html[data-theme="dark"]{
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1c2129;
  --panel-3: #202632;
  --text: #e8eef5;
  --muted: #9aa7b5;
  --accent: #4da3ff;
  --danger: #ff5d6c;
  --ok: #35d07f;
  --border: #2b3440;
  color-scheme: dark;
  --json-key: #79c0ff;
  --json-string: #7ee787;
  --json-number: #ffa657;
  --json-bool: #a5d6ff;
  --json-null: #c9d1d9;
}
html[data-theme="light"]{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --panel-2: #f9fbff;
  --panel-3: #eef3f8;
  --text: #0f141b;
  --muted: #627084;
  --accent: #2a72e5;
  --danger: #c01f34;
  --ok: #0f7a49;
  --border: #d7e0ea;
  color-scheme: light;
}

*{box-sizing:border-box}
html, body{height:100%;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.45; }

header.app{
  position:fixed; inset-block-start:0; inset-inline:0; height:var(--header-h);
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel), black 6%), var(--panel));
  border-block-end:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:0 16px; z-index:10;
}
.logo{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), white 35%) 70%); box-shadow:0 4px 12px color-mix(in oklab, var(--accent), black 75%);} 
header.app h1{ font-size:18px; margin:0; letter-spacing:.2px; }
.sub{ color:var(--muted); font-size:12px; margin-inline-start:auto }

.theme-select{ display:flex; align-items:center; gap:8px; font-size:12px;}
.theme-select select{ background:var(--panel-3); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:10px; min-width: 175px!important;}

footer.app{
  position:fixed; inset-inline:0; inset-block-end:0; height:var(--footer-h);
  background:var(--panel); border-block-start:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; color:var(--muted); font-size:12px; z-index:9;
}
footer.app a{ color:var(--accent); text-decoration:none }

main{ position:relative; height:calc(100vh - var(--header-h) - var(--footer-h)); padding:12px; padding-block-start:calc(12px + 0px); overflow:hidden; padding-top:70px; }

.grid{ display:grid; gap:12px; height:100%; grid-template-columns: 2fr 6px 1.2fr 6px 1fr; align-items:stretch; }
.gutter{ background:var(--panel-3); border:1px solid var(--border); border-radius:10px; cursor:col-resize; box-shadow:var(--shadow); }
.gutter:hover{ filter:brightness(1.03) }

.col{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); height:100%; display:flex; flex-direction:column; overflow:hidden }
.col header{ position:sticky; inset-block-start:0; height:auto; background:transparent; border:0; padding:14px 16px; gap:8px; z-index:0; }
.col h2{ font-size:14px; margin:0; color:color-mix(in oklab, var(--accent), white 65%); letter-spacing:.3px; font-weight:600 }

.col.left{ background:var(--panel-2) }
.col.middle{ background:var(--panel) }
.col.right{ background:var(--panel-3) }

.col-body{ flex:1; display:flex; flex-direction:column; overflow:auto; }

.section{ padding:0 16px 16px 16px; display:flex; flex-direction:column; gap:12px; }

textarea, pre, code, input, select, button{ font-family:var(--mono) }

textarea{ width:100%; flex:1; resize:none; padding:14px; border-radius:10px; background:color-mix(in oklab, var(--panel-3), black 6%); color:var(--text); border:1px solid var(--border); outline:none; transition: box-shadow .15s ease, border-color .15s ease; }
textarea:focus{ border-color:color-mix(in oklab, var(--accent), black 10%); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%); }

.controls{ display:flex; flex-direction:column; gap:12px }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
label{ font-size:13px; color:color-mix(in oklab, var(--text), var(--muted) 45%) }
.spacer{ flex:1 }

input[type="number"], select{ background:color-mix(in oklab, var(--panel-3), black 6%); border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:10px; width:110px; }
.btn{ padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:color-mix(in oklab, var(--panel-3), black 6%); color:var(--text); cursor:pointer; font-weight:600; }
.btn:hover{ filter:brightness(1.05) }
.btn.accent{ background:linear-gradient(180deg,color-mix(in oklab, var(--panel-3), var(--accent) 10%), var(--panel-3)); border-color:color-mix(in oklab, var(--accent), black 35%) }
.btn.ok{ border-color:color-mix(in oklab, var(--ok), black 35%); background:color-mix(in oklab, var(--ok), var(--panel) 85%) }
.btn.danger{ border-color:color-mix(in oklab, var(--danger), black 35%); background:color-mix(in oklab, var(--danger), var(--panel) 85%) }

.result-wrap{ position:relative; display:flex; flex-direction:column; gap:0; height:100% }
.result-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px 0 16px; min-height:0 }
.status{ font-size:12px; color:var(--muted) }
.status.ok{ color:var(--ok) }
.status.err{ color:var(--danger) }
.result{ flex:1; overflow:auto; border-top:1px solid var(--border); background:color-mix(in oklab, var(--panel-3), black 6%); padding:0 16px 14px 16px; line-height:1.35; }
pre{ margin:0; white-space:pre; font-family:var(--mono); font-size:13px }

.tree{ font-family:var(--mono); font-size:13px; line-height:1.4; padding-top:0; margin-top:0 }
.tree details{ padding-left:12px; }
.tree summary{ cursor:pointer; user-select:none }
.tree .k{ color:var(--json-key); }
.tree .v-string{ color:var(--json-string); }
.tree .v-number{ color:var(--json-number); }
.tree .v-bool{ color:var(--json-bool); }
.tree .v-null{ color:var(--json-null); font-style:italic }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

@media (max-width: 900px){ .grid{ grid-template-columns: 1fr 6px 1fr 6px 1fr; } }
@media (max-width: 768px){
  .grid{ grid-template-columns: 1fr; }
  .gutter{ display:none }
  .col{ height:auto }
  main{ height:auto; padding-bottom:calc(var(--footer-h) + 12px); overflow:visible; }
}


/* Keep the existing editor layout while allowing crawlable help below it. */
[hidden] { display: none !important; }
main { height:auto; overflow:visible; padding:calc(var(--header-h) + 12px) 12px 24px; }
.grid { height:calc(100vh - var(--header-h) - 36px); min-height:520px; }
footer.app { position:static; height:auto; min-height:var(--footer-h); gap:12px; flex-wrap:wrap; padding:12px; }
header.app h1 { font-size:clamp(14px, 1.6vw, 18px); }
#format-select { width:100%; }
.format-note { font-size:12px; color:var(--muted); margin:0; }
.result pre { white-space:inherit; overflow-wrap:anywhere; }
.seo-content { max-width:1000px; margin:40px auto 16px; padding:0 16px; }
.seo-content h2 { font-size:24px; }
.seo-content p { color:var(--muted); }
.seo-content a { color:var(--accent); }
.format-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
.seo-content pre { padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:10px; white-space:pre-wrap; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media (max-width:768px) {
  :root { --header-h:120px; }
  header.app { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  header.app h1 { flex:1; }
  header.app .sub { display:none; }
  .theme-select select { min-width:100px !important; width:110px; }
  .grid { height:auto; min-height:0; }
  .col.left, .col.right { min-height:300px; }
  .col.middle { min-height:0; }
  .col h2 { color:var(--accent); }
}

.col h2 { color:var(--accent); }

.row input[type="checkbox"] + label { flex:1; min-width:0; }

/* Workspace: the guide has its own panel, separate from the editor. */
:root {
  --editor-bg:#ffffff; --editor-active:#f3f6fb; --editor-selection:#cce0ff;
  --syntax-keyword:#8250df; --syntax-string:#116329; --syntax-number:#953800;
  --syntax-property:#0550ae; --syntax-function:#6639ba; --syntax-comment:#64748b;
  --syntax-type:#953800; --syntax-punctuation:#475569;
}
html[data-theme="dark"] {
  --editor-bg:#141920; --editor-active:#1c2532; --editor-selection:#26466b;
  --syntax-keyword:#c4a7ff; --syntax-string:#a3d9a5; --syntax-number:#ffb86b;
  --syntax-property:#8ac6ff; --syntax-function:#e1b3ff; --syntax-comment:#929fae;
  --syntax-type:#ffd080; --syntax-punctuation:#bac7d5;
}
body { height:100dvh; overflow:hidden; }
main { height:calc(100dvh - var(--footer-h)); padding:calc(var(--header-h) + 10px) 12px 12px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.workspace-tabs { display:flex; gap:6px; flex-shrink:0; align-items:center; min-height:34px; }
.workspace-tabs a { display:inline-flex; align-items:center; padding:7px 16px; font-size:13px; font-weight:600; color:var(--muted); border:1px solid transparent; border-radius:8px; text-decoration:none; }
.workspace-tabs a[aria-selected="true"] { color:var(--accent); background:var(--panel); border-color:var(--border); box-shadow:0 2px 5px #00000008; }
.workspace-tabs a:hover { background:var(--panel-3); }
#editor-panel { flex:1; min-height:0; }
.grid { height:100%; min-height:0; grid-template-columns:minmax(0,1fr) 6px minmax(220px,.65fr) 6px minmax(0,1.25fr); }
.col { min-width:0; min-height:0; }
footer.app { position:fixed; bottom:0; height:var(--footer-h); min-height:0; padding:0 12px; }
.seo-content { flex:1; min-height:0; overflow:auto; width:100%; margin:0 auto; padding:22px 28px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
.col.right .col-body { overflow:hidden; }
.result-wrap { min-height:0; }
.result-toolbar { padding:9px 12px; gap:10px 14px; flex-wrap:wrap; border-top:1px solid var(--border); background:var(--panel); }
.viewer-toggle { display:inline-flex; gap:6px; align-items:center; font-size:12px; white-space:nowrap; }
.viewer-toggle input { margin:0; accent-color:var(--accent); }
.viewer-actions { display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.btn.compact { padding:5px 8px; font:500 11px var(--sans); border-radius:6px; box-shadow:none; }
.btn:disabled { opacity:.45; cursor:default; }
.result { min-height:0; padding:0; overflow:hidden; background:var(--editor-bg); }
#out { height:100%; min-height:0; }
.result-statusbar { display:flex; align-items:center; gap:8px; padding:7px 12px; min-height:32px; background:var(--panel); border-top:1px solid var(--border); flex-wrap:wrap; }
.language-badge { color:var(--accent); font:600 10px var(--mono); letter-spacing:.04em; }
.result-statusbar .status { flex:1; font-size:11px; min-width:80px; }
#result-lines { color:var(--muted); font-size:11px; white-space:nowrap; }
#out .cm-content:focus-visible { outline:none; }
#out .cm-editor:focus-within { box-shadow:inset 0 0 0 1px var(--accent); }
@media (max-width:768px) {
  body { height:auto; overflow:auto; }
  main { height:auto; min-height:calc(100dvh - var(--footer-h)); overflow:visible; }
  .grid { height:auto; grid-template-columns:minmax(0,1fr); }
  .col.left { height:320px; }
  .col.right { height:460px; }
  footer.app { position:static; height:auto; padding:12px; }
  .seo-content { overflow:visible; padding:20px; }
  .viewer-actions { margin-left:0; }
}