/* Local aliases: this file (and json-diff/yaml-xml-formatter's) was written
   against token names --grad/--bg-2/--card-hover that were never actually
   added to /assets/base.css (only --accent-grad/--bg-soft/--card-2 exist
   there) — every var(--grad)/var(--bg-2)/var(--card-hover) below was
   silently falling back to nothing (active tab, buttons and hover states
   lost their background). Defining the aliases here, scoped to this page's
   own stylesheet, restores them without touching the shared base.css. */
:root{--grad:var(--accent-grad);--bg-2:var(--bg-soft);--card-hover:var(--card-2)}
.he-container{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.he-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.he-tabs{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.he-tab{padding:8px 20px;font-size:.9rem;font-weight:600;background:none;border:none;color:var(--muted-2);cursor:pointer;transition:background .15s,color .15s}
.he-tab.active{background:var(--grad);color:#0b0e1c}
.he-opt{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--muted-2);cursor:pointer;user-select:none}
.he-opt input{accent-color:var(--accent);width:15px;height:15px}

.he-io{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.he-panel{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.he-panel-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--bg);font-size:.82rem;font-weight:600;color:var(--muted-2)}
.he-panel-head span{flex:1}
.he-btn-sm{font-size:.78rem;padding:4px 10px;border-radius:5px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);cursor:pointer;font-family:inherit;transition:background .12s}
.he-btn-sm:hover{background:var(--card-hover)}
.he-btn-sm.he-copy{background:var(--accent);color:#0b0e1c;border-color:transparent}
.he-btn-sm.he-copy:hover{opacity:.88}
.he-btn-sm.copied{background:#22c55e;color:#fff;border-color:transparent}
.he-area{width:100%;min-height:200px;padding:12px;font-family:"Fira Mono","JetBrains Mono",monospace;font-size:.83rem;background:var(--card);color:var(--text);border:none;resize:vertical;outline:none;line-height:1.6}
.he-area::placeholder{color:var(--muted-2)}

.he-arrow{font-size:1.4rem;color:var(--muted-2);text-align:center;flex-shrink:0}
.he-stats{display:flex;align-items:center;gap:12px;font-size:.83rem;color:var(--muted-2)}
.he-swap{margin-left:auto;padding:6px 14px;border-radius:7px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:600;transition:background .12s}
.he-swap:hover{background:var(--card-hover)}

.he-ref{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.he-ref summary{padding:10px 16px;font-size:.85rem;font-weight:700;color:var(--muted-2);cursor:pointer;user-select:none;list-style:none;display:flex;align-items:center;gap:8px}
.he-ref summary::before{content:"▶";font-size:.6rem;transition:transform .2s}
.he-ref[open] summary::before{transform:rotate(90deg)}
.he-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--line)}
.he-ref-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card);font-size:.82rem;cursor:pointer;transition:background .12s}
.he-ref-row:hover{background:var(--card-hover)}
.he-ref-char{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0}
.he-ref-code{font-family:monospace;color:var(--accent);flex:1;font-size:.78rem}
.he-ref-desc{color:var(--muted-2);font-size:.75rem}

@media(max-width:640px){
  .he-io{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}
  .he-arrow{transform:rotate(90deg)}
}