* {
  margin: unset;
  padding: unset;
}
:root {
  font-family: system-ui, sans-serif;
  --button: buttonface;
  @media (prefers-color-scheme: dark) {
    --button: field;
  }
}

input, select { font: unset }
html { overflow: clip }
svg { display: block }

button {
  background: unset;
  border: unset;
  font: unset;
}

body {
  margin: unset;
  display: flex;
  height: 100vh;
  height: 100svh;
  gap: .5rem;
  overflow: auto clip;
}

search {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: .625rem;
  overflow: auto;
  padding: 1rem;
}

main {
  flex: 1 0 25rem;
  padding-block: 1rem;
  overflow: clip scroll;
}

#titles {
  position: sticky;
  display: grid;
  grid-template-columns: repeat(auto-fill, 25rem);
  max-width: 75rem;
}

#poster_modal {
  position: absolute;
  inset: 0;
  background-color: #000c;
  align-items: center;
  justify-items: center;
}
#poster_modal img {
  width: min(780px, 100svw, calc(2/3*100svh));
  object-fit: contain;
}

.title {
  box-sizing: border-box;
  display: flex;
  padding: .5rem 1rem .5rem .5rem;
  gap: .5rem;
  @media (hover: hover) {
    &:hover { background-color: color-mix(in srgb, canvastext, transparent 92%) }
  }
}
.title_poster {
  width: 92px;
  height: 138px;
  background-color: color-mix(in srgb, canvastext, transparent 92%);
}
.title_type {
  color: color-mix(in srgb, canvastext, transparent 32%);
}

.btn_group {
  background-color: var(--button);
  border-radius: .125rem;
  border: 1px solid gray;
  display: grid;
  grid-auto-flow: column;
  button {
    border-radius: .125rem;
  }
  .btn_selected {
    background-color: selecteditem;
    color: selecteditemtext;
    box-shadow: 0 0 0 2px color-mix(in srgb, selecteditem, black 40%);
  }
}

.clude {
  display: flex;
  align-items: center;
  svg {
    width: 8px;
    height: 8px;
    padding: 2px;
    border: 1px outset gray;
    border-radius: 3px;
    background-color: var(--button);
    fill: color-mix(in srgb, canvastext, transparent 60%);
  }
  button:active svg {
    border-style: inset;
  }
  button:hover svg { @media (hover: hover) {
    fill: color-mix(in srgb, canvastext, transparent 20%);
    border-color: color-mix(in srgb, canvastext, transparent 20%);
  } }
  button.on svg {
    border-color: selecteditem;
    background-color: selecteditem;
    fill: selecteditemtext;
  }
  span {
    padding-left: .125rem;
  }
}

.fs12 { font-size: .750rem }
.fs14 { font-size: .875rem }
.fw300 { font-weight: 300 }
.fw500 { font-weight: 500 }

.p4 { padding: .25rem }

.col, .col_mid { display: flex; flex-direction: column }
.row, .row_mid { display: flex }
.col_mid, .row_mid { align-items: center }
.fill { flex-grow: 1 }
.gap2 { gap: .125rem }
.gap4 { gap: .250rem }
.gap8 { gap: .500rem }

.stack { display: grid }
.stack > * { grid-area: 1 / -1 }