/* packing explorer */
:root {color-scheme:light}
body {background:white;color:black;font:16px/1.4 Georgia,serif;margin:24px 32px;padding:0}
h1 {font-size:24px} h2 {font-size:16px;text-align:center}
form {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
input {width:140px} button,select,input {font:inherit}
.plots {display:grid;grid-template-columns:1fr 1fr;gap:24px}
section {min-width:0} svg {width:100%;display:block} svg text {font:12px sans-serif;fill:black;text-anchor:middle;dominant-baseline:middle}
#family {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:16px 0}
.tree {background:white;color:black;border:0;padding:4px;min-width:0;cursor:pointer}
.tree[aria-pressed=true] {outline:1px solid black}
[hidden] {display:none!important}
@media(max-width:650px) {body {margin:16px} .plots {grid-template-columns:1fr} #family {grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:420px) {body {margin:12px} #family {grid-template-columns:repeat(3,minmax(0,1fr))}}