body {
  margin: 0;
  background: #c0c0c0;
  line-height: 1.45;
}
main {
  max-width: 820px;
  margin: 28px auto;
  padding: 18px 22px 20px;
  background: #fff;
  border: 1px solid #000;
}





.small-machine {
  margin: .9em auto 1.3em;
  padding: .65em .7em .7em;
  border: 1px solid #999;
  font-size: .82em;
  width: 620px;
  max-width: 100%;
  box-sizing: border-box;
}

.small-machine-title {
  margin-bottom: .45em;
}

.machine-input {
  margin-bottom: .35em;
}

.machine-input input,
.machine-input button,
.machine-controls input,
.machine-controls button {
  font: inherit;
}

.machine-input input {
  width: 24em;
  max-width: 55%;
}

.machine-status {
  margin-left: .35em;
  color: #555;
}

.machine-output {
  margin: .7em 0 .4em;
  min-height: 1.4em;
  font-family: serif;
  font-size: 1.35em;
  line-height: 1.4;
  white-space: pre-wrap;
}

.machine-mood {
  margin: 0 0 .6em;
  font-size: .9em;
  color: #666;
}

.drum-row {
  display: flex;
  align-items: center;
  gap: .25em;
  margin: .2em 0;
  flex-wrap: nowrap;
}

.drum-label {
  width: 5.2em;
  flex: 0 0 5.2em;
}

.step {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid #777;
  background: #fff;
}

.step[aria-pressed="true"] {
  background: #000;
}

.step.current {
  outline: 2px solid #000;
  outline-offset: 1px;
}

#scope {
  display: block;
  width: 100%;
  height: 70px;
  margin: .65em 0 .55em;
  border: 1px solid #999;
  background: #fff;
  box-sizing: border-box;
}

.machine-controls {
  margin-top: .45em;
}

.machine-controls input {
  width: 4.2em;
}

@media (max-width: 560px) {
  .machine-input input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: .35em;
  }

  .small-machine {
    width: auto;
    overflow-x: visible;
  }

  .machine-inner {
    min-width: 0;
    width: 100%;
  }

  .machine-output {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 1.2em;
  }

  .drum-machine {
    overflow-x: auto;
  }
}

.filters {
  margin: .5em 0 1.1em;
  line-height: 1.8;
}
.filter-option {
  display: inline-block;
  margin-right: .8em;
  white-space: nowrap;
}
.filter-option input {
  vertical-align: middle;
}
.project {
  margin-bottom: .55em;
}
.project-meta {
  display: block;
  font-size: .82em;
  color: #555;
}
.about {
  font-size: .9em;
  line-height: 1.55;
}
.about p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
hr {
  margin: 1.5em 0;
}
@media (max-width: 900px) {
  main {
    margin: 16px;
    padding: 14px 16px;
  }
}


/* project space: separate from the small machine */
.mode-switch {
  margin: .9em 0 .45em;
  font-size: .82em;
}
.mode-switch button {
  font: inherit;
  margin-right: .25em;
}
.mode-switch button[aria-pressed="true"] {
  font-weight: bold;
}
.mode-panel[hidden] {
  display: none;
}

.project-space {
  margin: .9em auto 1.3em;
  padding: .65em .7em .7em;
  border: 1px solid #999;
  font-size: .82em;
  width: 620px;
  max-width: 100%;
  box-sizing: border-box;
}

.project-space-intro {
  margin: 0 0 .55em;
  color: #555;
}

.matrix-wrap {
  position: relative;
  height: 330px;
  margin: 2em 3.2em 1.7em;
}

.matrix {
  position: absolute;
  inset: 0;
  border: 1px solid #777;
  background:
    linear-gradient(to right,
      transparent calc(50% - .5px),
      #ddd 50%,
      transparent calc(50% + .5px)),
    linear-gradient(to bottom,
      transparent calc(50% - .5px),
      #ddd 50%,
      transparent calc(50% + .5px));
  cursor: crosshair;
}

.axis-label {
  position: absolute;
  color: #555;
  font-size: .9em;
  pointer-events: none;
}
.axis-left {
  left: -3em;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}
.axis-right {
  right: -3.5em;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}
.axis-top {
  top: -1.55em;
  left: 50%;
  transform: translateX(-50%);
}
.axis-bottom {
  bottom: -1.65em;
  left: 50%;
  transform: translateX(-50%);
}

.work-point,
.possible-point {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  text-align: left;
}

.work-point .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .3em;
  border-radius: 50%;
  background: #000;
  vertical-align: middle;
}

.work-point .point-label {
  display: inline-block;
  max-width: 125px;
  padding: 1px 2px;
  background: rgba(255,255,255,.86);
  line-height: 1.1;
  vertical-align: middle;
}

.work-point:hover .point-label,
.work-point:focus .point-label {
  text-decoration: underline;
}

.possible-point {
  font-family: serif;
  font-size: 1.5em;
  line-height: 1;
}

.project-space-output {
  min-height: 5em;
  padding-top: .5em;
  border-top: 1px solid #ccc;
}

.possible-label,
.nearby {
  color: #666;
  font-size: .88em;
}

.possible-text {
  margin: .25em 0 .35em;
  font-family: serif;
  font-size: 1.25em;
  line-height: 1.35;
}

.possible-title {
  font-weight: bold;
}

.project-links {
  margin-top: .25em;
}

@media (max-width: 560px) {
  .project-space {
    width: auto;
  }

  .matrix-wrap {
    height: 285px;
    margin-left: 2.25em;
    margin-right: 2.25em;
  }

  .work-point .point-label {
    max-width: 82px;
    font-size: .83em;
  }
}


.project-space-output .possible-text {
  letter-spacing: .01em;
}


.possible-project-point {
  /* Keep the generated point anchored exactly at the clicked coordinate. */
  display: block;
  width: 0;
  height: 0;
  white-space: nowrap;
  pointer-events: none;
  font-size: 1em;
}

.possible-mark {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: serif;
  font-size: 1.45em;
  line-height: 1;
}

.possible-point-label {
  position: absolute;
  left: .8em;
  top: 0;
  transform: translateY(-50%);
  width: max-content;
  max-width: 130px;
  padding: 1px 2px;
  background: rgba(255,255,255,.88);
  font-family: serif;
  font-size: .92em;
  line-height: 1.1;
  white-space: normal;
}


.project-debug {
  margin-top: .8em;
  border-top: 1px dotted #aaa;
  padding-top: .5em;
  color: #555;
}

.project-debug summary {
  cursor: pointer;
  font-size: .88em;
}

#project-space-debug {
  margin: .45em 0 0;
  padding: .5em;
  border: 1px solid #ccc;
  background: #f7f7f7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: monospace;
  font-size: .82em;
  line-height: 1.35;
}


.possible-project-point.label-left .possible-point-label {
  left: auto;
  right: .8em;
  text-align: right;
}


/* generated project state */
.possible-text.is-generated {
  color: #0000EE;
}

.possible-point.has-title .possible-mark,
.possible-point.has-title .possible-point-label {
  color: #0000EE;
}

/* failed generation state */
.possible-text.is-failed {
  color: #888888;
  font-style: italic;
}

/* one-post view */
.post-page {
  max-width: 620px;
}

.post-nav {
  margin-top: 0;
  font-size: .82em;
}

.current-post {
  margin-top: 1.1em;
}

.post-media {
  margin: 0 0 .8em;
}

.post-media img,
.post-media video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 72vh;
}

.post-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 1.05em;
}

.post-date {
  margin-top: .75em;
  color: #666;
  font-size: .82em;
}

.post-empty {
  color: #777;
  font-style: italic;
}