Is it even possible to stylize details so the first block is opened by default and when you click on another one, it replaces the shown one?

I’ve played around a bit to confirm this. But, apparently the attribute 'open', 'name', and even 'class' gets stripped on <details> elements, and also on its <summary> elements :/ So, sadly, I don’t think its possible.

Also, since classes are stripped off <details> and <summary>, you’d want to have them inside a container with custom class, and then target that container in the CSS:

<div class="custom-details">

  <details>
    <summary>...</summary>
    ...
  </details>

  <details>
    <summary>...</summary>
    ...
  </details>

  ...

</div>

.custom-details details { ... }

.custom-details summary { ... }

<div class="custom-details">
  <details>
    <summary>Question 1</summary>
    <div class="custom-details__content">
      <p>Pretty long text in language 1 lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
      <p>Pretty long text in language 2 lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
    </div>
  </details>

  <details>
    <summary>Question 2</summary>
    <div class="custom-details__content">
      <p>Pretty long text in language 3 lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
    </div>
  </details>

  <details>
    <summary>Question 3</summary>
    <div class="custom-details__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum omnis beatae itaque! Maxime consequuntur architecto, voluptatibus iste aliquid quaerat dolores, culpa repellendus optio omnis rem saepe quisquam incidunt, numquam molestias?</p>
    </div>
  </details>
</div>

.custom-details > details {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto 10px;
  background: rgba(255,255,255,0.5);
  border-radius: 5px;
  transition: 0.3s;
  overflow: hidden;
}

.custom-details > details::after {
  position: absolute;
  right: 24px;
  top: 15px;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border-right: 3px solid #425995;
  border-bottom: 3px solid #425995;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: .3s;
}

.custom-details > details[open]::after {
  transform: rotate(45deg);
}

.custom-details > details[open] {
  padding-bottom: 100px;
}

.custom-details > details[open] > summary {
  margin-bottom: 32px;
}

.custom-details > details > summary {
  background: #fff;
  border-radius: 5px;
  padding: 12px 24px;
  font-size: 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  transition: .3s;
}

.custom-details > details > summary::-webkit-details-marker {
  display: none;
}

.custom-details__content {
  padding: 0 32px;
  font-size: 18px;
  margin-bottom: -60px;
}

.custom-details__content p:last-child {
  margin-bottom: 0;
}
.custom-details__content p:first-child {
  margin-top: 0;
}

For your purpose (three languages on one page), as an alternative approach, may I suggest this:

Languages  
<div class="custom-toggles">
  <a name="toggle-a" class="custom-toggle" href="#toggle-a">🇬🇧 English</a>
  <a name="toggle-b" class="custom-toggle" href="#toggle-b">🇮🇩 Indonesia</a>
  <a name="toggle-c" class="custom-toggle" href="#toggle-c">🇯🇵 Japanese</a>
</div>

<br> <hr>

<div class="custom-content-a"> 
  Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/ LOR-əm IP-səm) is a dummy or placeholder text commonly used in graphic design, publishing, and web development to fill empty spaces in a layout that does not yet have content.
</div>

<div class="custom-content-b">
  Lorem ipsum, atau ringkasnya lipsum, adalah teks standar yang ditempatkan untuk mendemostrasikan elemen grafis atau presentasi visual seperti font, tipografi, dan tata letak. Maksud penggunaan lipsum adalah agar pengamat tidak terlalu berkonsentrasi kepada arti harfiah per kalimat, melainkan lebih kepada elemen desain dari teks yang dipresentasi.
</div>

<div class="custom-content-c">
  Lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト（英語版）。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。
</div>

/* Initial state (hidden) for the content containers */
.custom-content-b,
.custom-content-c,
#wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-a,
#wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-a {
  display: none;
}

/* State when the content containers' button are clicked */
#wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b,
#wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c {
  display: block;
}

/* Buttons container styling */
.custom-toggles {
  display: inline-flex;
  background: var(--itchio_bg_color);
  border-radius: 24px;
}

/* Buttons styling */
.custom-toggle {
  padding: .1em .8em;
  margin: 2px;
  color: var(--itchio_bg2_color);
  border-radius: inherit;
  text-decoration: none;
  transition: .3s;
}

/* Buttons styling when active/clicked */
.custom-toggles:has(a.custom-toggle:target[name="toggle-a"]) a.custom-toggle[name="toggle-a"],
.custom-toggles:has(a.custom-toggle:target[name="toggle-b"]) a.custom-toggle[name="toggle-b"],
.custom-toggles:has(a.custom-toggle:target[name="toggle-c"]) a.custom-toggle[name="toggle-c"]
, .custom-toggles:not(.custom-toggles:has(a.custom-toggle:target[name="toggle-b"], a.custom-toggle:target[name="toggle-c"])) a.custom-toggle[name="toggle-a"]
{
  color: var(--itchio_button_fg_color);
  background: var(--itchio_button_color);
}

A little wacky, but it should work.

You have to change the 'href' attribute of each .custom-toggle elements, by appending your itch.io project page URL before the '#' mark for it to work.

Here’s the demonstration page

Edit: simplified the CSS, and made it less of a headache to work with and easier to tweak :)

/* Styling for the toggles container */
.custom-toggles {
  display: inline-flex;
  background: var(--itchio_bg_color);
  border-radius: 24px;
}


/* Styling for the individual toggle */
.custom-toggle {
  padding: .1em .8em;
  margin: 2px;
  color: var(--itchio_bg2_color);
  border-radius: inherit;
  text-decoration: none;
  transition: .3s;
}


/* Initial state of the content (hidden) */
[class^="custom-content-"] {
  display: none;
}


#wrapper:not(:has(a.custom-toggle:target))

/* Default visible content ( .custom-content-a ) */
.custom-content-a,
/* Make sure to match the rule below */

  #wrapper:has(a.custom-toggle:target[name="toggle-a"]) .custom-content-a
, #wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b
, #wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c
  /* Add as much as you want. Just change the toggle-* and the .custom-content-* accordingly */
{
  display: block;
}


.custom-toggles:not(:has(a.custom-toggle:target))

/* Default clicked button ( toggle-a ) */
a.custom-toggle[name="toggle-a"],
/* Make sure to match the rule above */

/* Styling for the individual toggle when clicked/activated */
.custom-toggles > a.custom-toggle:target
{
  color: var(--itchio_button_fg_color);
  background: var(--itchio_button_color);
}

You can now add as many items as you want easily:

  #wrapper:has(a.custom-toggle:target[name="toggle-a"]) .custom-content-a
, #wrapper:has(a.custom-toggle:target[name="toggle-b"]) .custom-content-b
, #wrapper:has(a.custom-toggle:target[name="toggle-c"]) .custom-content-c
, #wrapper:has(a.custom-toggle:target[name="toggle-d"]) .custom-content-d
, #wrapper:has(a.custom-toggle:target[name="toggle-e"]) .custom-content-e
{
  ...
}

You can also change which toggle are active by default.