* { box-sizing: border-box; }
body { margin: 20px auto; padding: 0 16px; max-width: 1400px; color: #111; background: white; font-size: 16px; }
h1 { font-size: 1.7em; } h2 { font-size: 1.2em; }
a { color: #0044aa; } a:visited { color: #663399; }
button, input, select { font-size: 14px; } button { cursor: pointer; } button:disabled { cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible { outline: 2px solid #0044aa; outline-offset: 2px; }
code, dd, .hash { overflow-wrap: anywhere; } .nowrap { white-space: nowrap; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; } dd { margin: 0; }
table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 12px 8px 0; border-bottom: 1px solid #ccc; text-align: left; vertical-align: top; }
.gallery { display: grid; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; margin: 24px 0; }
.inspector { position: sticky; top: 10px; min-width: 0; }
.viewer-title { display: flex; align-items: center; gap: 16px; }.viewer-title h2 { margin: 0 0 8px; }
.stage { height: 430px; position: relative; border: 1px solid #bbb; background: #f0f0f0; }
canvas, #fallback { display: block; width: 100%; height: 100%; object-fit: contain; } canvas { touch-action: none; }
#stage-status { position: absolute; bottom: 0; padding: 8px; margin: 0; background: #fff; font-size: 14px; } #stage-status:empty { display: none; }
.controls, .filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
input[type=color] { width: 28px; height: 24px; padding: 0; vertical-align: middle; }
.stats { display: flex; gap: 18px; flex-wrap: wrap; } .stat strong { display: block; } .stat span { font-size: 13px; }
#bones { font: 12px/1.6 monospace; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }
.filterbar > label { display: flex; align-items: center; gap: 8px; } input[type=search] { flex: 1; min-width: 0; padding: 4px; } .filters { margin-top: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.card { padding: 0; border: 1px solid #bbb; border-radius: 0; text-align: left; background: white; color: #111; position: relative; }
.card:hover { border-color: #222; } .card.active { outline: 2px solid #0044aa; outline-offset: 1px; }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 256 / 272; }
.card-meta { padding: 6px; }.card-key { font-family: monospace; overflow-wrap: anywhere; }.card-line { font-size: 12px; margin-top: 3px; }
.card-rig { position: absolute; top: 4px; left: 4px; background: white; padding: 1px 4px; font-size: 11px; }.card-saved { position: absolute; top: 3px; right: 5px; color: white; }
.table-wrap { overflow-x: auto; } [hidden] { display: none !important; }
summary { cursor: pointer; }
#candidate-parts { max-height: 9rem; overflow-y: auto; }
#candidate-parts select { max-width: 100%; }
@media (max-width: 750px) {
  body { margin: 12px auto; padding: 0 12px; }
  .gallery { display: block; }
  .inspector { position: sticky; top: 0; z-index: 2; background: white; padding: 6px 0; margin-bottom: 16px; max-height: 65svh; overflow-y: auto; border-bottom: 1px solid #ccc; }
  .stage { height: clamp(120px, 26svh, 220px); }
  .viewer-title { margin-bottom: 4px; } .viewer-title h2 { margin: 0; }
  .inspector summary { padding: 4px 0; }
  #models { scroll-margin-top: calc(var(--viewer-height, 360px) + 12px); }
  dl { grid-template-columns: 90px minmax(0, 1fr); gap: 6px 10px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 600px) {
  header h1 { font-size: 24px; margin: 12px 0; }
  header dl { font-size: 13px; grid-template-columns: 66px minmax(0, 1fr); gap: 4px 8px; }
  nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  nav a { padding: 5px 0; }
  .gallery { margin-top: 16px; }
  .controls { margin: 10px 0; }
  .controls button, .filters button, select { min-height: 36px; padding: 5px 9px; }
  input[type=search], select { font-size: 16px; }
  input[type=search] { min-height: 36px; }
  #star { min-width: 36px; min-height: 36px; }
  .filterbar > label { flex-wrap: wrap; }
  .filterbar input[type=search] { flex-basis: 100%; }
  input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; }
}