#tool h3 { font-size: 1.5em; margin: 0 0 2px; }
#tool .label { color: var(--text-light); font-size: 0.9em; margin: 0 0 6px; }
#tool .games::before, #tool .right::before { content: ""; display: block; width: 48px; height: 6px; background: var(--code); margin-bottom: 10px; }
#tool .intro > :first-child { margin-top: 0; }

#filters { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; align-items: center; margin-top: 1em; padding: 0.5em 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#filters label { display: flex; align-items: center; gap: 0.5em; color: var(--text-light); font-size: 0.9em; }
#filters select { margin: 0; border-radius: 0; max-width: 14em; }

#tool .panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2.5em; align-items: start; margin-top: 1em; }
#tool .scroll { max-height: 38em; overflow-y: auto; position: relative; display: flex; flex-direction: column; gap: 4px; }
#list button { flex: none; display: block; width: 100%; margin: 0; text-align: left; background: none; color: var(--text); border-color: var(--border); border-radius: 0; padding: 0.2em 0.6em; font-size: 0.9em; }
#list button:enabled:hover { background: none; border-color: var(--accent); color: var(--accent); }
#list button[aria-current], #list button[aria-current]:enabled:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
#list .date { display: block; font-size: 0.85em; opacity: 0.8; }

#tool .view { position: relative; }
#tip { position: absolute; pointer-events: none; padding: 0.2em 0.5em; background: var(--bg); border: 1px solid var(--accent); font-size: 0.85em; white-space: nowrap; }
#view { display: block; width: 100%; height: clamp(14em, calc(100vh - 27em), 28em); touch-action: none; cursor: grab; border: 1px solid var(--border); }
#view:active { cursor: grabbing; }
#axes { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em; margin: 0.8em 0 0.5em; }
#axes label { display: flex; align-items: center; gap: 0.5em; color: var(--text-light); font-size: 0.9em; }
#axes select { margin: 0; border-radius: 0; }
#detail table { width: 100%; margin: 0; font-size: 0.9em; }
#detail td, #detail th { padding: 0.3em 0.5em; }
#detail td:not(:first-child), #detail th:not(:first-child) { text-align: right; white-space: nowrap; }
#detail .cell { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
#detail .bar { position: relative; flex: none; width: 4em; height: 0.5em; }
#detail .bar::before { content: ""; position: absolute; inset: 0; background: var(--border); opacity: 0.35; }
#detail .bar i { position: relative; display: block; height: 100%; background: var(--accent); }
#detail .info { position: relative; display: inline-block; width: 1.3em; height: 1.3em; margin-left: 0.5em; line-height: 1.3em; text-align: center; border: 1px solid var(--text-light); border-radius: 50%; font-size: 0.75em; color: var(--text-light); cursor: help; }
#detail .info:hover, #detail .info:focus { color: var(--accent); border-color: var(--accent); outline: none; }
#detail .info:hover::after, #detail .info:focus::after { content: attr(data-tip); position: absolute; z-index: 2; left: 0; top: 150%; width: 18em; padding: 0.4em 0.6em; background: var(--bg); border: 1px solid var(--accent); color: var(--text); font-size: 1.15em; line-height: 1.3; text-align: left; white-space: normal; }
#detail .ext { margin-left: 0.5em; color: var(--text-light); }
#detail .ext:hover { color: var(--accent); }

#tool + .notes { max-width: 45em; margin-top: 3em; font-size: 0.85em; color: var(--text-light); }
#tool + .notes::before { content: ""; display: block; width: 4em; border-top: 1px solid var(--text-light); margin-bottom: 1em; }

@media only screen and (max-width: 720px) {
  #tool .panes { grid-template-columns: minmax(0, 1fr); gap: 1.5em; }
  #tool .right { order: -1; }
  #tool .scroll { max-height: 20em; }
  #detail .bar { width: 2em; }
  #detail .info:hover::after, #detail .info:focus::after { width: 14em; }
  #detail td, #detail th { padding: 0.3em 0.3em; }
}

#title .beta { font-size: 0.5em; font-weight: normal; color: var(--text-light); }