* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #15171b; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
body.locked { overflow: hidden; }
header { padding: 28px 28px 8px; }
h1 { margin: 0; font-size: 18px; font-weight: 600; }
header p { margin: 4px 0 0; color: #6b7178; }

#gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: 20px 16px; padding: 20px 28px 60px; }
.card { display: block; align-self: start; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pair { display: grid; grid-template-columns: 1.5926fr 0.4621fr; gap: 6px; }
.card canvas { display: block; width: 100%; aspect-ratio: 860 / 540; background: #f6f6f5; }
.card canvas.phone { aspect-ratio: 390 / 844; }
.card:hover canvas { background: #eeeeec; }
.label { display: block; margin-top: 8px; font-weight: 500; }
.label b { color: #6b7178; font-weight: 500; margin-right: 4px; font-variant-numeric: tabular-nums; }
.note { display: block; color: #6b7178; }

#focus { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }
#focus[hidden] { display: none; }
.stages { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 0 16px; }
#stage { flex: 1; min-width: 0; height: 100%; display: block; background: #f6f6f5; }
#stagePhone { height: 100%; aspect-ratio: 390 / 844; display: block; background: #f6f6f5; }
@media (max-width: 700px) {
  #stage, #note, #back, #fwd, #clock { display: none; }
  .stages { padding: 0; }
  #stagePhone { width: 100%; aspect-ratio: auto; }
}
.bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.grow { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#title { font-weight: 500; }
#title b { color: #6b7178; font-weight: 500; }
#note { color: #6b7178; margin-left: 8px; }
button, select { height: 28px; padding: 0 10px; border: 1px solid #d9dbdd; border-radius: 4px; background: #fff; color: inherit; font: inherit; cursor: pointer; }
.card { height: auto; border: 0; border-radius: 0; }
button:hover { background: #f3f3f2; }
.card:hover { background: none; }
.track { position: relative; flex: 1; height: 28px; }
#marks { position: absolute; left: 0; right: 0; top: 11px; height: 6px; background: #eeeeec; }
#marks i { position: absolute; top: 0; bottom: 0; background: #c9cdd1; }
#scrub { position: absolute; inset: 0; width: 100%; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 22px; background: #15171b; }
#clock { width: 110px; text-align: right; color: #6b7178; font-variant-numeric: tabular-nums; }