/* Product illustrations shared by the collection and its project overviews. */
.collection-index { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.collection-index > a { padding-inline: 16px; gap: 11px; }
.collection-index > a > span:nth-child(2) { font-size: 13px; }
.collection-index small { font-size: 8px; }
.collection-pair .stage-flluet { min-height: 0; border-left: 0; }
.collection-pair .flluet-image-wrap { margin-inline: -6px; }
.collection-featured .collection-stage { min-height: 460px; }
.collection-pair .collection-stage { height: 365px; }
.collection-tags li { font-size: 9px; }
.collection-project-copy .project-name { font: 11px var(--mono); color: #bac5b1; margin-bottom: 17px; }
.collection-project-copy h3 > a:hover { color: #e1efca; }
.collection-project-copy h3 > a > span { color: #939e8e; }
.collection-project-copy .project-name + h3 { margin-top: 0; }
.collection-project-copy .platform-note { font-size: 10px; color: #a3ad9c; line-height: 1.7; margin: -9px 0 21px; }
.stage-website { background: radial-gradient(ellipse at 52% 45%, #303b2a, #141c13 65%, #0e140e); color: #e0edcf; }
.ecosystem-art { display: grid; grid-template-columns: 1fr 90px 1fr; grid-template-rows: repeat(3, 66px); gap: 8px 20px; width: min(100%, 460px); margin: auto; position: relative; align-items: center; }
.ecosystem-art::before, .ecosystem-art::after { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; border: 1px solid #b9cc9c20; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.ecosystem-art::after { width: 330px; height: 330px; border-style: dashed; border-color: #b9cc9c12; }
.ecosystem-hub { grid-column: 2; grid-row: 1 / 4; width: 90px; height: 90px; border: 1px solid #8b9f73; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(145deg, #445435, #1b2517); position: relative; font-size: 55px; font-weight: 700; letter-spacing: -.08em; box-shadow: 0 15px 35px #0004; z-index: 1; }
.ecosystem-hub > span { font-size: 23px; position: absolute; right: 10px; top: 5px; }
.ecosystem-node { border: 1px solid #566346; border-radius: 7px; padding: 12px; background: #182013; font: 10px var(--mono); color: #c6d5b4; text-align: center; position: relative; z-index: 1; }
.ecosystem-node:nth-child(2) { grid-area: 1 / 1; transform: translateY(13px); }
.ecosystem-node:nth-child(3) { grid-area: 3 / 1; transform: translateY(-13px); }
.ecosystem-node:nth-child(4) { grid-area: 1 / 3; transform: translateY(13px); }
.ecosystem-node:nth-child(5) { grid-area: 2 / 3; }
.ecosystem-node:nth-child(6) { grid-area: 3 / 3; transform: translateY(-13px); }
.ecosystem-node small { display: block; font-size: 7px; color: #95a584; margin-top: 3px; }
.stage-steam { background: radial-gradient(ellipse at 50% 70%, #4e3629, #211c19 65%, #151413); }
.stage-steam .stage-topline { color: #d3b19a; }
.steam-art { width: 94%; max-width: 440px; margin: auto; border: 1px solid #66503e; border-radius: 11px; box-shadow: 0 16px 45px #0004; background: #1d1e21; padding: 18px; transform: rotate(-2deg); transition: transform .4s; }
.collection-project:hover .steam-art { transform: rotate(0); }
.steam-art-head { display: flex; align-items: center; gap: 9px; color: #ebebec; font-size: 13px; font-weight: 600; }
.steam-art-head img { width: 30px; height: 30px; }
.steam-art-head small { display: block; font-weight: 400; color: #a7a2a0; font-size: 8px; margin-top: 1px; }
.steam-art-search { font-size: 9px; padding: 9px; border: 1px solid #424047; border-radius: 5px; color: #9d9ca2; margin-block: 17px 12px; }
.steam-art-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.steam-art-card { border: 1px solid #464347; border-radius: 6px; padding: 12px; min-width: 0; }
.steam-art-card.is-selected { border-color: #cf8b59; background: #ed99570a; }
.steam-art-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 5px; color: #f2ad76; background: #4a3427; font-size: 13px; margin-bottom: 9px; }
.steam-art-card strong { display: block; color: #e0dcdb; font-size: 11px; font-weight: 500; }
.steam-art-card small { display: block; color: #b6a394; font-size: 7px; margin-top: 5px; }
.steam-art-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; gap: 8px; font-size: 8px; color: #a9a2a0; }
.steam-art-bottom > span:last-child { background: #ed9957; color: #251c16; padding: 7px 10px; border-radius: 5px; }
.stage-phone { background: radial-gradient(ellipse at 45% 65%, #174d49, #11272c 60%, #0d191f); }
.stage-phone .stage-topline { color: #b4e2da; }
.phone-art { display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; margin: auto; width: 100%; max-width: 470px; }
.phone-art-handset { width: 80px; height: 159px; border-radius: 14px; background: #0b171c; border: 3px solid #7bada8; padding: 7px; flex-shrink: 0; box-shadow: 0 16px 30px #0003; }
.phone-art-screen { background: linear-gradient(145deg, #16494b, #42a69b 45%, #b7dfaf); height: 100%; border-radius: 7px; overflow: hidden; position: relative; }
.phone-art-screen::before { content: ''; width: 80%; aspect-ratio: 1; border: 12px solid #d4f5dd45; border-radius: 50%; position: absolute; top: 20%; left: 22%; }
.phone-art-screen::after { content: ''; width: 55%; aspect-ratio: 1; border: 1px solid #efffe287; border-radius: 50%; position: absolute; bottom: 12%; left: -12%; }
.phone-art-arrow { color: #75d3c4; font-size: 24px; flex-shrink: 0; }
.phone-art-pc { width: 230px; height: 149px; border: 3px solid #7bada8; border-radius: 9px; background: #0b171c; padding: 8px; position: relative; box-shadow: 0 16px 30px #0003; }
.phone-art-pc::before { content: ''; position: absolute; width: 27px; height: 23px; left: 50%; bottom: -25px; transform: translateX(-50%); background: #729d98; }
.phone-art-pc::after { content: ''; position: absolute; width: 80px; height: 5px; border-radius: 3px; left: 50%; bottom: -29px; transform: translateX(-50%); background: #91b8b0; }
.phone-art-pc .phone-art-screen { width: 55px; margin: auto; border-radius: 4px; }
.phone-art-pc .phone-art-screen::before { border-width: 8px; }
.stage-phone figcaption, .stage-steam figcaption { color: #b0bcb7; }
.stage-ora .ora-preview { transform: rotate(-2deg); }
.collection-ecosystem-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.collection-ecosystem-links > a { font-size: 10px; border-bottom: 1px solid #4b5840; color: #b4c1a7; padding-block: 5px; min-height: 32px; }
.collection-ecosystem-links > a + a { margin-left: 7px; }
@media (max-width: 1000px) {
  .collection-index > a { padding-inline: 10px; gap: 8px; }
  .collection-index > a > span:nth-child(2) { font-size: 11px; }
  .collection-index small { font-size: 7px; }
  .collection-index .index-arrow { font-size: 17px; }
  .ecosystem-art { gap: 8px 12px; grid-template-columns: 1fr 70px 1fr; }
  .ecosystem-hub { width: 70px; height: 70px; font-size: 43px; border-radius: 19px; }
  .ecosystem-hub > span { font-size: 18px; right: 6px; }
  .ecosystem-node { padding: 10px 5px; font-size: 8px; }
  .phone-art { gap: 10px; }
  .phone-art-handset { width: 66px; height: 143px; }
  .phone-art-pc { width: 172px; height: 123px; }
}
@media (max-width: 760px) {
  .collection-index { grid-template-columns: 1fr; }
  .collection-index > a, .collection-index > a:first-child, .collection-index > a:last-child { padding: 15px 0; gap: 20px; }
  .collection-index > a > span:nth-child(2) { font-size: 14px; }
  .collection-index small { font-size: 10px; }
  .collection-featured .collection-stage { min-height: 330px; }
  .collection-pair .collection-stage { height: 350px; }
  .ecosystem-art { max-width: 400px; }
  .steam-art { max-width: 390px; }
  .phone-art-handset { width: 80px; height: 159px; }
  .phone-art-pc { width: 210px; height: 140px; }
  .phone-art { gap: 18px; }
}
@media (max-width: 480px) {
  .collection-index small { font-size: 10px; }
  .collection-featured .collection-stage { min-height: 315px; }
  .collection-pair .collection-stage { height: 310px; }
  .ecosystem-art { grid-template-columns: 1fr 66px 1fr; gap: 8px; }
  .ecosystem-hub { width: 66px; height: 66px; font-size: 42px; }
  .ecosystem-art::after { width: 270px; height: 270px; }
  .ecosystem-node small { font-size: 6px; }
  .steam-art { padding: 14px; width: 100%; }
  .steam-art-card { padding: 10px; }
  .phone-art { gap: 10px; }
  .phone-art-handset { width: 65px; height: 143px; }
  .phone-art-pc { width: 160px; height: 116px; }
  .phone-art-arrow { font-size: 20px; }
  .collection-tags li { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .steam-art { transform: none !important; transition: none !important; } }