:root {
  --ink: #000;
  --page: #fff;
  --quiet: #c4c4c4;
  --rule: 1px solid var(--ink);
  font-family: Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--page); }
body { display: flex; flex-direction: column; overflow-x: hidden; }

.exhibition {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(280px, 460px);
  justify-content: center;
  align-items: center;
  gap: 6vw;
  padding: 4vh 4vw 2vh;
}

.exhibition > * { min-width: 0; }
.stage { position: relative; height: min(76vh, 760px); }
.stage canvas { width: 100%; height: 100%; display: block; outline: none; }
.stage canvas.out { transition: transform .45s ease-in, opacity .45s ease-in; transform: translateX(-30%); opacity: 0; }
.stage canvas.in { transform: translateX(30%); opacity: 0; }
.stage canvas.settle { transition: transform .45s ease-out, opacity .45s ease-out; transform: none; opacity: 1; }
.hint {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: center;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--quiet);
}

.box { border: var(--rule); }
.grid { display: flex; flex-wrap: wrap; border-bottom: var(--rule); }
.cell {
  flex: 1 1 auto; min-height: 56px; padding: 0 14px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 12px/1.4 Helvetica, Arial, sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: var(--quiet); background: none; border: none; border-right: var(--rule); cursor: pointer;
}
.cell:last-child { border-right: none; }
.cell.head { color: var(--ink); cursor: default; flex-grow: 0; }
.cell[aria-current="true"] { color: var(--ink); }
.cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }

.panel { padding: 22px 22px 36px; text-transform: uppercase; }
.name { font-size: 12px; letter-spacing: 2px; color: var(--quiet); }
.line { margin-top: 20px; font-size: 19px; letter-spacing: 1px; text-transform: none; }
.action { display: inline-block; margin-top: 20px; font-size: 14px; letter-spacing: 1px; color: var(--ink); text-transform: none; }

.company {
  padding: 0 4vw 3vh; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--quiet);
}

@media (max-width: 820px) {
  .exhibition { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .stage { height: 36vh; }
  .cell { min-height: 44px; font-size: 11px; }
  .panel { padding: 16px 16px 20px; }
  .line { font-size: 16px; margin-top: 12px; }
  .action { font-size: 13px; margin-top: 12px; }
  .company { padding: 0 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage canvas.out, .stage canvas.settle { transition: none; }
}