:root {
  color-scheme: dark;
  --ink: #f5f4ed;
  --muted: #a6a8b8;
  --line: rgba(244, 244, 236, 0.2);
  --accent: #c9a8ff;
  --cyan: #9ee9ee;
}

* { box-sizing: border-box; }
a, button, input, textarea, select, summary, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
a, button, summary, [role="button"] { touch-action: manipulation; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: #050509;
  color: var(--ink);
  font-family: "Noto Sans JP", sans-serif;
}
.warp[hidden] { display: none; }
.warp {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(3, 4, 10, .92);
  opacity: 0;
}

/* 最初のページは「折りたたむ」のではなく、薄い霧に包まれて消えていく */
.warp::before {
  position: absolute;
  inset: -12%;
  content: "";
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.14), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(201,168,255,.10), transparent 55%);
  opacity: 0;
  filter: blur(24px);
}
.warp::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(4, 4, 10, .72);
  opacity: 0;
}
.warp-core {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 24px 8px rgba(201,168,255,.55);
  opacity: 0;
}
.warp p {
  position: relative;
  z-index: 2;
  align-self: end;
  margin: 0 0 14vh;
  color: rgba(214,197,255,.7);
  font: 10px "DM Mono", monospace;
  letter-spacing: .2em;
  opacity: 0;
}
.warp.is-active {
  animation: entry-fade 2.1s ease-in-out forwards;
}
.warp.is-active::before {
  animation: entry-mist 2.1s ease-in-out forwards;
}
.warp.is-active::after {
  animation: entry-overlay 2.1s ease-in-out forwards;
}
.warp.is-active .warp-core {
  animation: entry-core 2.1s ease-in-out forwards;
}
.warp.is-active p {
  animation: warp-text 1s ease-out .25s both;
}
body.is-warping .hero,
body.is-warping .topbar,
body.is-warping footer {
  animation: entry-soften 2.1s ease-in-out forwards;
}

@keyframes entry-fade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes entry-mist {
  0% { opacity: 0; transform: scale(.85); filter: blur(28px); }
  30% { opacity: .5; transform: scale(1); filter: blur(24px); }
  62% { opacity: .88; transform: scale(1.15); filter: blur(30px); }
  100% { opacity: 1; transform: scale(1.35); filter: blur(42px); }
}
@keyframes entry-overlay {
  0%, 30% { opacity: 0; }
  65% { opacity: .45; }
  100% { opacity: 1; }
}
@keyframes entry-core {
  0%, 15% { opacity: 0; transform: scale(.45); }
  32% { opacity: 1; transform: scale(1); }
  58% { opacity: .8; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(7); }
}
@keyframes entry-soften {
  0% { opacity: 1; filter: none; }
  48% { opacity: 1; filter: blur(.25px); }
  82%, 100% { opacity: .35; filter: blur(2px); }
}
@keyframes warp-text { from { opacity: 0; letter-spacing: .5em; } }

.stars, .stars::before, .stars::after {
  position: fixed;
  inset: 0;
  z-index: -3;
  content: "";
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1.5px);
  background-size: 93px 89px;
  opacity: .56;
}
.stars::before { transform: rotate(23deg) scale(1.4); background-size: 151px 151px; opacity: .45; }
.stars::after { transform: rotate(-17deg) scale(.72); background-size: 71px 71px; opacity: .35; }

/* 移動先ページも、等間隔のドットではなく不規則な星空にする */
.stars, .stars::before, .stars::after { background-size: auto; background-repeat: no-repeat; }
.stars {
  opacity: .78;
  background-image:
    radial-gradient(circle at 6% 14%, rgba(255,255,255,.96) 0 1.6px, rgba(203,223,255,.32) 2.2px, transparent 4px),
    radial-gradient(circle at 13% 74%, rgba(193,227,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 21% 37%, rgba(255,255,255,.78) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 31% 90%, rgba(226,211,255,.7) 0 1.45px, transparent 2.5px),
    radial-gradient(circle at 39% 8%, rgba(255,255,255,.88) 0 1.1px, transparent 2px),
    radial-gradient(circle at 48% 54%, rgba(185,234,246,.74) 0 1.3px, transparent 2.25px),
    radial-gradient(circle at 57% 28%, rgba(255,255,255,.64) 0 .85px, transparent 1.7px),
    radial-gradient(circle at 66% 83%, rgba(224,210,255,.72) 0 1.25px, transparent 2.15px),
    radial-gradient(circle at 74% 16%, rgba(255,255,255,.86) 0 1.55px, transparent 2.65px),
    radial-gradient(circle at 83% 61%, rgba(192,228,246,.7) 0 1.1px, transparent 2px),
    radial-gradient(circle at 91% 34%, rgba(255,255,255,.82) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 96% 88%, rgba(223,211,255,.62) 0 .95px, transparent 1.8px);
}
.stars::before {
  opacity: .58;
  transform: none;
  background-image:
    radial-gradient(circle at 4% 52%, rgba(255,255,255,.64) 0 .75px, transparent 1.5px),
    radial-gradient(circle at 17% 24%, rgba(205,222,255,.74) 0 1px, transparent 1.8px),
    radial-gradient(circle at 27% 66%, rgba(255,255,255,.56) 0 .8px, transparent 1.55px),
    radial-gradient(circle at 35% 42%, rgba(220,202,255,.74) 0 1.05px, transparent 1.95px),
    radial-gradient(circle at 46% 77%, rgba(255,255,255,.58) 0 .75px, transparent 1.5px),
    radial-gradient(circle at 54% 17%, rgba(192,234,244,.66) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 63% 45%, rgba(255,255,255,.65) 0 .85px, transparent 1.65px),
    radial-gradient(circle at 72% 94%, rgba(215,201,255,.62) 0 1px, transparent 1.8px),
    radial-gradient(circle at 81% 9%, rgba(255,255,255,.56) 0 .8px, transparent 1.55px),
    radial-gradient(circle at 89% 70%, rgba(196,230,247,.7) 0 1.1px, transparent 2px);
}
.stars::after {
  opacity: .42;
  transform: none;
  background-image:
    radial-gradient(circle at 9% 91%, rgba(255,255,255,.7) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 19% 5%, rgba(220,207,255,.68) 0 .85px, transparent 1.6px),
    radial-gradient(circle at 25% 58%, rgba(255,255,255,.58) 0 .65px, transparent 1.3px),
    radial-gradient(circle at 42% 31%, rgba(188,231,243,.68) 0 .9px, transparent 1.65px),
    radial-gradient(circle at 51% 96%, rgba(255,255,255,.66) 0 .75px, transparent 1.45px),
    radial-gradient(circle at 60% 69%, rgba(224,209,255,.58) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 69% 5%, rgba(255,255,255,.75) 0 .9px, transparent 1.7px),
    radial-gradient(circle at 78% 48%, rgba(196,230,247,.58) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 87% 22%, rgba(255,255,255,.62) 0 .75px, transparent 1.45px),
    radial-gradient(circle at 94% 56%, rgba(220,207,255,.64) 0 .8px, transparent 1.5px);
}
.nebula { position: fixed; z-index: -2; border-radius: 50%; filter: blur(70px); opacity: .17; pointer-events: none; }
.nebula-one { width: 42rem; height: 32rem; top: -12rem; left: -14rem; background: #7746ca; }
.nebula-two { width: 38rem; height: 28rem; right: -15rem; bottom: -13rem; background: #167f9c; }

main { position: relative; min-height: calc(100vh - 52px); padding: 26px clamp(24px, 5vw, 80px); }
.topbar { display: flex; align-items: center; justify-content: space-between; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .12em; }
.brand { color: var(--ink); text-decoration: none; font: 600 27px/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.brand span { color: var(--accent); }
.status { color: var(--muted); display: flex; align-items: center; gap: 7px; }
.status i { width: 6px; height: 6px; background: #9dffcf; border-radius: 50%; box-shadow: 0 0 11px #9dffcf; }
.top-actions { display: flex; align-items: center; gap: 14px; }.login-link, .signup-link { padding: 8px 10px; color: var(--muted); border: 1px solid transparent; text-decoration: none; font: 11px "Noto Sans JP", sans-serif; letter-spacing: 0; }.login-link:hover { color: var(--ink); }.signup-link { color: var(--ink); border-color: rgba(201,168,255,.65); background: rgba(201,168,255,.12); }.signup-link:hover { background: rgba(201,168,255,.26); }

.auth-page { width: min(100%, 460px); min-height: calc(100vh - 136px); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }.auth-card { padding: clamp(28px, 5vw, 42px); border: 1px solid var(--line); background: rgba(14,14,23,.68); box-shadow: 0 28px 80px rgba(0,0,0,.25); backdrop-filter: blur(14px); }.auth-card h1 { font-size: clamp(38px, 6vw, 54px); }.auth-copy { margin: 16px 0 28px; color: #c4c3c9; font-size: 14px; line-height: 1.8; }.auth-form { display: grid; gap: 15px; }.auth-form label { display: grid; gap: 7px; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .1em; }.auth-form input { width: 100%; padding: 13px; border: 1px solid var(--line); color: var(--ink); background: rgba(0,0,0,.2); font: 15px "Noto Sans JP", sans-serif; }.auth-submit { margin-top: 8px; padding: 14px; border: 1px solid var(--accent); color: #120f18; background: var(--accent); cursor: pointer; font: 700 14px "Noto Sans JP", sans-serif; }.auth-note { margin: 20px 0 0; color: var(--muted); font-size: 12px; text-align: center; }.auth-note a { color: var(--cyan); }
.room-page { display: grid; grid-template-columns: 205px minmax(0, 880px); width: min(calc(100% - 54px), 1240px); min-height: calc(100vh - 136px); margin: 0 auto 0 clamp(27px, 7vw, 140px); padding: 10vh 0 60px; gap: clamp(34px, 6vw, 92px); }.room-main h1 { font-size: clamp(48px, 7vw, 72px); }.room-categories { align-self: start; position: sticky; top: 30px; display: grid; gap: 5px; padding: 16px 0; border-right: 1px solid var(--line); }.room-categories p { margin: 0 0 9px; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .12em; }.room-categories button { padding: 9px 12px; border: 0; border-left: 2px solid transparent; color: var(--muted); background: transparent; cursor: pointer; font: 13px "Noto Sans JP", sans-serif; text-align: left; }.room-categories button:hover { color: var(--ink); background: rgba(255,255,255,.04); }.room-categories button.is-selected { border-left-color: var(--cyan); color: var(--cyan); background: rgba(158,233,238,.07); }.room-copy { margin: 18px 0 30px; color: #c4c3c9; font-size: 14px; }.room-composer { padding: 20px; border: 1px solid var(--line); background: rgba(14,14,23,.68); backdrop-filter: blur(14px); }.room-composer textarea { width: 100%; min-height: 100px; resize: vertical; padding: 12px; border: 1px solid rgba(245,244,237,.16); color: var(--ink); background: rgba(0,0,0,.2); font: 14px "Noto Sans JP", sans-serif; }.room-composer button { float: right; margin-top: 12px; padding: 10px 19px; border: 1px solid var(--accent); color: #120f18; background: var(--accent); cursor: pointer; font: 700 13px "Noto Sans JP", sans-serif; }.room-composer::after { display: block; clear: both; content: ""; }.room-empty { margin: 26px 0; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; text-align: center; }@media (max-width: 700px) { .room-page { display: block; width: auto; margin: 0 22px; padding-top: 12vh; }.room-categories { position: static; display: flex; overflow-x: auto; gap: 7px; margin: 0 0 26px; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); }.room-categories p { display: none; }.room-categories button { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; }.room-categories button.is-selected { border-color: var(--cyan); } }
.contents-page { width: min(100%, 900px); min-height: calc(100vh - 136px); margin: 0 auto; padding: 12vh 0 60px; }.contents-page h1 { font-size: clamp(48px, 7vw, 72px); }.sort-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 34px; }.sort-tabs button { padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(14,14,23,.55); cursor: pointer; font: 13px "Noto Sans JP", sans-serif; }.sort-tabs button:hover { color: var(--ink); }.sort-tabs button.is-selected { border-color: var(--accent); color: var(--ink); background: rgba(201,168,255,.18); }.sort-tabs .shuffle-contents { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(158,233,238,.55); color: var(--cyan); background: rgba(158,233,238,.08); }.sort-tabs .shuffle-contents:hover { background: rgba(158,233,238,.18); }.shuffle-contents svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.contents-empty { padding: 42px 24px; border: 1px solid var(--line); color: var(--muted); background: rgba(14,14,23,.52); text-align: center; font-size: 14px; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 20px; }.profile-tab { padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(14,14,23,.55); cursor: pointer; font: 13px "Noto Sans JP", sans-serif; transition: border-color .2s, background .2s, color .2s; }.profile-tab:hover { color: var(--ink); }.profile-tab.is-selected { border-color: var(--accent); color: var(--ink); background: rgba(201,168,255,.18); }.profile-view { min-height: 160px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,10,20,.58); }.profile-view h2 { margin: 0 0 12px; font: 600 25px/1.2 "Noto Sans JP", sans-serif; }.profile-view p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }.favorite-list { display: grid; gap: 9px; }.favorite-list a { display: grid; gap: 3px; padding: 13px 14px; border: 1px solid rgba(158,233,238,.2); border-radius: 11px; color: var(--cyan); background: rgba(158,233,238,.04); text-decoration: none; }.favorite-list a:hover { border-color: rgba(158,233,238,.65); background: rgba(158,233,238,.1); }.favorite-list strong { overflow: hidden; color: var(--ink); font: 600 15px/1.4 "Noto Sans JP", sans-serif; text-overflow: ellipsis; white-space: nowrap; }.favorite-list small { overflow: hidden; color: var(--muted); font: 10px/1.4 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.room-search { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 0 14px; border: 1px solid rgba(245,244,237,.18); border-radius: 12px; color: var(--muted); background: rgba(8,9,18,.55); backdrop-filter: blur(10px); }.room-search span { color: var(--cyan); font: 22px/1 "DM Mono", monospace; }.room-search input { width: 100%; padding: 13px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: 14px "Noto Sans JP", sans-serif; }.room-search input::placeholder { color: rgba(245,244,237,.42); }.room-search:focus-within { border-color: rgba(158,233,238,.65); }
.contents-search { display: flex; width: min(100%, 480px); align-items: center; gap: 9px; margin: 27px 0 0; padding: 0 14px; border: 1px solid rgba(158,233,238,.28); border-radius: 999px; color: var(--muted); background: linear-gradient(120deg, rgba(29,39,64,.9), rgba(20,27,49,.88)); backdrop-filter: blur(10px); }.contents-search span { color: var(--cyan); font: 22px/1 "DM Mono", monospace; }.contents-search input { width: 100%; padding: 13px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: 14px "Noto Sans JP", sans-serif; }.contents-search input::placeholder { color: rgba(245,244,237,.55); }.contents-search:focus-within { border-color: rgba(158,233,238,.7); }

.contents-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 27px;
}

.contents-tools .contents-search {
  flex: 1 1 280px;
  margin: 0;
}

.source-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.source-filter button {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(14,14,23,.55);
  cursor: pointer;
  font: 12px "Noto Sans JP", sans-serif;
}

.source-filter button:hover {
  color: var(--ink);
}

.source-filter button.is-selected {
  border-color: rgba(158,233,238,.7);
  color: var(--cyan);
  background: rgba(158,233,238,.11);
}

.sort-tabs .shuffle-contents.is-selected {
  border-color: #d8ffff;
  color: #eaffff;
  background: rgba(158,233,238,.25);
  box-shadow: 0 0 0 1px rgba(158,233,238,.12), 0 0 20px rgba(158,233,238,.12);
}

.gallery-sort-tabs {
  gap: 12px;
  margin: 28px 0 14px;
  padding: 0;
}
.gallery-sort-tabs button {
  display: inline-flex;
  min-width: 132px;
  min-height: 42px;
  padding: 10px 22px;
  align-items: center;
  justify-content: center;
}
.gallery-sort-tabs + .contents-tools { margin-top: 0; margin-bottom: 18px; }
.gallery-sort-tabs + .contents-tools .contents-search { width: min(100%, 720px); }

@media (min-width: 721px) {
  .mobile-filter-accordion > summary { display: none; }
  .source-filter-accordion { flex: 0 0 auto; }
}

.category-accordion { margin: 0 0 22px; border: 1px solid rgba(158,233,238,.25); border-radius: 16px; background: linear-gradient(120deg, rgba(27,36,60,.9), rgba(19,25,47,.88)); overflow: hidden; }
.category-accordion summary { display: flex; align-items: center; gap: 11px; padding: 16px 18px; color: var(--ink); cursor: pointer; list-style: none; font: 600 15px/1.2 "Space Grotesk", sans-serif; }
.category-accordion summary::-webkit-details-marker { display: none; }
.category-accordion summary small { margin-left: auto; color: var(--muted); font: 10px/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.category-accordion summary i { color: var(--cyan); font: 21px/1 "DM Mono", monospace; font-style: normal; transition: transform .22s ease; }
.category-accordion[open] summary { border-bottom: 1px solid var(--line); }
.category-accordion[open] summary i { transform: rotate(180deg); }
.category-grid { display: flex; flex-wrap: wrap; gap: 9px; padding: 16px 18px 18px; }
.category-grid button { padding: 10px 14px; border: 1px solid rgba(245,244,237,.15); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; font: 600 12px/1 "Space Grotesk", sans-serif; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.category-grid button:hover { border-color: rgba(158,233,238,.58); color: var(--ink); background: rgba(158,233,238,.08); }
.category-grid button.is-selected { border-color: rgba(158,233,238,.72); color: #dfffff; background: rgba(158,233,238,.14); box-shadow: inset 0 0 0 1px rgba(158,233,238,.08); }
.category-grid button.is-limit-reached { animation: category-limit-nudge .28s ease; }
@keyframes category-limit-nudge { 35% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }

@media (max-width: 760px) {
  .contents-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .category-accordion { margin-top: 0; }
  .category-grid { gap: 7px; padding: 14px; }
  .category-grid button { padding: 9px 11px; }
}

/* コンテンツ一覧の先頭に置く、運営による一件の紹介枠 */
.todays-discovery { margin-top: 34px; padding: 22px; border: 1px solid rgba(158,233,238,.3); border-radius: 18px; background: linear-gradient(135deg, rgba(158,233,238,.1), rgba(201,168,255,.07) 55%, rgba(14,14,23,.68)); box-shadow: 0 18px 55px rgba(0,0,0,.18); }
.todays-discovery-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.todays-discovery-kicker { margin: 0 0 5px; color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .13em; }
.todays-discovery h2 { margin: 0; font: 600 25px/1.2 "Noto Sans JP", sans-serif; }
.todays-discovery-source { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(158,233,238,.3); border-radius: 999px; color: var(--cyan); background: rgba(158,233,238,.07); font: 10px/1 "Noto Sans JP", sans-serif; }
.todays-discovery-card { margin-top: 19px; padding: 20px; border: 1px solid rgba(245,244,237,.16); border-radius: 13px; background: rgba(5,6,14,.42); }
.todays-discovery-genre { margin: 0 0 9px; color: #c9a8ff; font: 10px "DM Mono", monospace; letter-spacing: .12em; }
.todays-discovery-card h3 { margin: 0; font: 600 26px/1.1 "Space Grotesk", "Noto Sans JP", sans-serif; }
.todays-discovery-card > p:not(.todays-discovery-genre) { margin: 13px 0 17px; color: #cfced6; font-size: 14px; line-height: 1.75; }
.todays-discovery-card a { display: inline-block; padding: 10px 13px; border: 1px solid rgba(158,233,238,.62); border-radius: 10px; color: #061317; background: var(--cyan); text-decoration: none; font: 700 13px "Noto Sans JP", sans-serif; }
.todays-discovery-card a:hover { background: #c7ffff; }
@media (max-width: 560px) { .todays-discovery { padding: 17px; }.todays-discovery-heading { align-items: flex-start; flex-direction: column; gap: 11px; }.todays-discovery-card { padding: 17px; }.todays-discovery-card h3 { font-size: 22px; } }

/* 入口の二つの行動を、宇宙感を残したまま少しはっきり見せる */
.explore-button { background: rgba(23,105,128,.82); box-shadow: 0 10px 30px rgba(61,190,220,.2); }
.explore-button:hover { background: rgba(31,132,156,.92); box-shadow: 0 14px 42px rgba(78,207,238,.34); }
.submit-entry-button { background: rgba(146,55,36,.84); box-shadow: 0 10px 32px rgba(255,107,75,.26); }
.submit-entry-button:hover { background: rgba(178,63,39,.94); box-shadow: 0 15px 40px rgba(255,107,75,.38); }

.hero, .discovery { width: min(100%, 760px); min-height: calc(100vh - 136px); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow { margin: 0 0 18px; color: var(--cyan); font: 500 10px/1.3 "DM Mono", monospace; letter-spacing: .17em; }
h1 { margin: 0; font: 600 clamp(58px, 10vw, 102px)/.92 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.08em; }
h1 em { color: var(--accent); font-style: normal; }
.entrance-page #hero-title { color: #f5f4ed; }
.entrance-page #hero-title em { display: inline-block; color: #8abbd4; white-space: nowrap; }
.hero-copy { margin: 28px 0 38px; color: #c4c3c9; font-size: clamp(14px, 1.8vw, 16px); line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }.explore-button { position: relative; display: flex; min-height: 58px; align-items: center; gap: 9px; isolation: isolate; overflow: hidden; border: 1px solid rgba(158,233,238,.82); border-radius: 100px; padding: 0 20px; color: #9ee9ee; background: rgba(21,78,91,.48); cursor: pointer; font: 700 15px/1.2 "Noto Sans JP", sans-serif; transition: transform .25s, box-shadow .25s; }
.explore-button small { display: block; margin-top: 5px; font: 500 8px/1 "DM Mono", monospace; letter-spacing: .12em; opacity: .65; }
.explore-button:hover { transform: translateY(-3px); box-shadow: 0 12px 45px rgba(158,233,238,.3); background: rgba(21,94,110,.62); }
.submit-entry-button { display: flex; gap: 9px; align-items: center; min-height: 58px; padding: 0 20px; border: 1px solid rgba(255,132,93,.9); border-radius: 100px; color: #ff9b7b; background: rgba(104,37,27,.52); box-shadow: 0 10px 32px rgba(255,107,75,.18); text-decoration: none; transition: transform .25s, box-shadow .25s; }.submit-entry-button:hover { transform: translateY(-3px); box-shadow: 0 15px 38px rgba(255,107,75,.31); background: rgba(128,43,29,.66); }.submit-entry-button span { font: 700 15px/1.2 "Noto Sans JP", sans-serif; }.action-icon { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; }.action-icon svg { width: 100%; height: 100%; }.action-icon-explore { color: #73c9ff; }.action-icon-submit { color: #ff9b7b; }
.button-orbit { position: absolute; z-index: -1; width: 130%; height: 190%; top: -46%; left: -15%; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; transform: rotate(-25deg); }

/* 入口の主役である探索だけを、最初に押すべき入口として強く見せる */
.explore-button { min-height: 94px; padding: 12px 32px; border-color: rgba(176,244,255,.84); color: #d7fbff; background: radial-gradient(circle at 50% 50%, rgba(74,205,234,.68), rgba(21,111,143,.82) 58%, rgba(11,65,91,.88)); box-shadow: 0 0 0 1px rgba(189,247,255,.10), 0 0 20px rgba(103,222,255,.24), 0 14px 34px rgba(29,169,211,.20); font-size: 18px; }
.explore-button .action-icon { width: 31px; height: 31px; flex-basis: 31px; color: #e4fdff; }
.explore-button-copy { display: grid; gap: 5px; text-align: left; }.explore-button-copy > span { font: 700 18px/1 "Noto Sans JP", sans-serif; }.explore-button-copy small { display: block; margin: 0; color: rgba(229,251,255,.76); font: 500 10px/1.35 "Noto Sans JP", sans-serif; letter-spacing: .02em; opacity: 1; }
.explore-button:hover { box-shadow: 0 0 0 1px rgba(221,255,255,.25), 0 0 28px rgba(111,229,255,.38), 0 18px 42px rgba(26,174,217,.28); }
@media (max-width: 560px) { .explore-button { min-height: 82px; padding: 10px 25px; font-size: 17px; } }
.hint { margin: 16px 0; color: var(--muted); font-size: 11px; }

.discovery { padding-top: 35px; padding-bottom: 35px; }
.place-card { position: relative; width: 100%; overflow: hidden; padding: clamp(28px, 5vw, 46px); border: 1px solid var(--line); background: rgba(14, 14, 23, .63); box-shadow: 0 28px 80px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.place-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 2px; content: ""; background: linear-gradient(90deg, var(--accent), transparent 70%); }
.card-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.genre, .coordinates { font: 500 10px/1 "DM Mono", monospace; letter-spacing: .11em; }
.genre { color: var(--cyan); }.coordinates { color: var(--muted); }
.signal { display: flex; gap: 4px; height: 20px; align-items: flex-end; margin: 29px 0 10px; }
.signal span { width: 3px; background: var(--accent); animation: signal 1.2s ease-in-out infinite alternate; }.signal span:nth-child(1) { height: 7px; }.signal span:nth-child(2) { height: 18px; animation-delay: .25s; }.signal span:nth-child(3) { height: 11px; animation-delay: .5s; }
@keyframes signal { to { transform: scaleY(.35); opacity: .42; } }
h2 { margin: 0; font: 600 clamp(32px, 5vw, 56px)/1 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.06em; }
.site-description { max-width: 600px; margin: 20px 0 14px; color: #d2d1d7; font-size: 15px; line-height: 1.9; }
.tags { margin: 0 0 32px; color: var(--muted); font: 10px/1.8 "DM Mono", monospace; letter-spacing: .06em; }
.card-actions { display: flex; gap: 12px; flex-wrap: wrap; }.visit-button, .next-button { padding: 13px 17px; border: 1px solid var(--line); color: var(--ink); background: transparent; text-decoration: none; cursor: pointer; font: 500 13px/1 "Noto Sans JP", sans-serif; transition: background .2s, border-color .2s; }.visit-button { border-color: var(--accent); background: rgba(201,168,255,.13); }.visit-button:hover, .next-button:hover { background: rgba(255,255,255,.1); border-color: var(--ink); }
.back-button { margin-top: 22px; padding: 0; color: var(--muted); border: 0; background: transparent; cursor: pointer; font: 12px "Noto Sans JP", sans-serif; }.back-button:hover { color: var(--ink); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 16px clamp(24px, 5vw, 80px); border-top: 1px solid rgba(255,255,255,.09); color: #747482; font: 9px "DM Mono", monospace; letter-spacing: .08em; }

@media (max-width: 560px) { .status { display: none; } .hero, .discovery { min-height: calc(100vh - 120px); } .hero-copy br { display: none; } footer { font-size: 8px; } .coordinates { display: none; } .hero-actions { align-items: stretch; } .submit-entry-button { flex: 1; } }
@media (max-width: 560px) { .entrance-page #hero-title { font-size: clamp(42px, 14.5vw, 58px); } }

/* --- Entrance transition v12: 短い「出発準備」表示 --- */
.warp[hidden] { display: none; }
.warp {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  overflow: hidden;
  background: rgba(3, 3, 8, .72);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.warp::before {
  position: absolute;
  inset: -16%;
  content: "";
  background:
    radial-gradient(circle at 50% 47%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 39% 55%, rgba(158,233,238,.09), transparent 36%),
    radial-gradient(circle at 62% 43%, rgba(201,168,255,.10), transparent 38%);
  opacity: 0;
  transform: scale(.94);
}
.warp.is-active {
  pointer-events: auto;
  animation: launch-overlay 1.5s ease-out forwards;
}
.warp.is-active::before {
  animation: launch-mist 1.5s ease-out forwards;
}
.launch-mark {
  position: relative;
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  opacity: 0;
  animation: launch-mark-in .7s ease-out .08s forwards;
}
.launch-mark::before,
.launch-mark::after,
.launch-mark span::before,
.launch-mark span::after {
  position: absolute;
  content: "";
  background: rgba(245,244,237,.82);
  border-radius: 999px;
}
.launch-mark::before { left: 18px; top: 3px; width: 2px; height: 32px; }
.launch-mark::after { left: 3px; top: 18px; width: 32px; height: 2px; }
.launch-mark span::before { left: 7px; top: 18px; width: 24px; height: 1px; transform: rotate(45deg); }
.launch-mark span::after { left: 7px; top: 18px; width: 24px; height: 1px; transform: rotate(-45deg); }
.launch-kicker,
.launch-status {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
}
.launch-kicker {
  color: rgba(245,244,237,.78);
  font: 500 10px/1.4 "DM Mono", monospace;
  letter-spacing: .19em;
  opacity: 0;
  animation: launch-copy .55s ease-out .14s forwards;
}
.launch-status {
  color: rgba(210,209,220,.82);
  font: 12px/1.7 "Noto Sans JP", sans-serif;
  opacity: 0;
  animation: launch-copy .55s ease-out .24s forwards;
}
.launch-dots {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.launch-dots i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .2;
  animation: launch-dot .8s ease-in-out infinite;
}
.launch-dots i:nth-child(2) { animation-delay: .13s; }
.launch-dots i:nth-child(3) { animation-delay: .26s; }
body.is-warping .hero,
body.is-warping .topbar,
body.is-warping footer {
  animation: launch-page-fade 1.2s ease-in forwards;
}
@keyframes launch-overlay {
  0% { opacity: 0; }
  16%, 78% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes launch-mist {
  0% { opacity: 0; transform: scale(.94); }
  45% { opacity: .7; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1.08); }
}
@keyframes launch-mark-in {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: .9; transform: scale(1); }
}
@keyframes launch-copy {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes launch-dot {
  0%, 100% { opacity: .18; transform: scale(.8); }
  50% { opacity: .9; transform: scale(1.15); }
}
@keyframes launch-page-fade {
  0%, 22% { opacity: 1; }
  100% { opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .warp.is-active,
  .warp.is-active::before,
  .launch-mark,
  .launch-kicker,
  .launch-status,
  .launch-dots i,
  body.is-warping .hero,
  body.is-warping .topbar,
  body.is-warping footer {
    animation-duration: .25s !important;
    animation-delay: 0s !important;
  }
}

/* --- Entrance transition v13: 未知の星域へ接続 --- */
.warp {
  gap: 11px;
  background: rgba(2, 2, 7, .78);
  backdrop-filter: blur(3px);
}
.warp::before {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.09), transparent 27%),
    radial-gradient(circle at 35% 58%, rgba(158,233,238,.07), transparent 34%),
    radial-gradient(circle at 66% 42%, rgba(201,168,255,.08), transparent 37%);
}
.launch-starfield {
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
  transform: scale(.96);
  background:
    radial-gradient(circle at 8% 18%, rgba(240,244,255,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 18% 72%, rgba(200,220,255,.65) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 29% 34%, rgba(255,255,255,.72) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 39% 83%, rgba(210,200,255,.70) 0 1.45px, transparent 2.25px),
    radial-gradient(circle at 48% 15%, rgba(255,255,255,.78) 0 1.45px, transparent 2.25px),
    radial-gradient(circle at 57% 66%, rgba(190,235,240,.72) 0 1.25px, transparent 1.9px),
    radial-gradient(circle at 67% 27%, rgba(255,255,255,.68) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 77% 78%, rgba(220,205,255,.72) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 89% 42%, rgba(255,255,255,.82) 0 1.35px, transparent 2.15px),
    radial-gradient(circle at 95% 15%, rgba(185,230,245,.60) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 12% 46%, rgba(255,255,255,.58) 0 1px, transparent 1.75px),
    radial-gradient(circle at 34% 55%, rgba(200,220,255,.60) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 61% 91%, rgba(255,255,255,.64) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 73% 53%, rgba(255,255,255,.62) 0 .75px, transparent 1.35px),
    radial-gradient(circle at 84% 9%, rgba(210,205,255,.60) 0 .85px, transparent 1.45px);
}
.warp.is-active {
  animation: launch-overlay-v13 2.6s ease-out forwards;
}
.warp.is-active::before {
  animation: launch-mist-v13 2.6s ease-out forwards;
}
.warp.is-active .launch-starfield {
  animation: launch-stars-v13 2.6s cubic-bezier(.2,.7,.2,1) forwards;
}
.launch-mark,
.launch-kicker,
.launch-status,
.launch-dots {
  z-index: 2;
}
.warp.is-active .launch-mark {
  animation: launch-mark-v13 2.6s ease-out forwards;
}
.warp.is-active .launch-kicker {
  animation: launch-copy-v13 2.6s ease-out .12s forwards;
}
.warp.is-active .launch-status {
  animation: launch-copy-v13 2.6s ease-out .22s forwards;
}
.launch-kicker {
  color: rgba(255,255,255,.94);
  font-size: 11px;
  letter-spacing: .17em;
  text-shadow: 0 0 16px rgba(255,255,255,.18);
}
.launch-status {
  color: rgba(242,242,248,.96);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 0 14px rgba(201,168,255,.14);
}
.warp.is-active .launch-dots i {
  animation: launch-dot .8s ease-in-out infinite;
}
body.is-warping .hero,
body.is-warping .topbar,
body.is-warping footer {
  animation: launch-page-fade-v13 2.6s ease-in forwards;
}
@keyframes launch-overlay-v13 {
  0% { opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes launch-mist-v13 {
  0% { opacity: 0; transform: scale(.96); }
  42% { opacity: .42; transform: scale(1.01); }
  78% { opacity: .72; transform: scale(1.05); }
  100% { opacity: .90; transform: scale(1.08); }
}
@keyframes launch-stars-v13 {
  0% { opacity: 0; transform: scale(.96) translate3d(0, 0, 0); }
  18% { opacity: .48; }
  72% { opacity: .9; transform: scale(1.14) translate3d(-.7%, .5%, 0); }
  100% { opacity: .22; transform: scale(1.28) translate3d(-1.2%, .8%, 0); }
}
@keyframes launch-mark-v13 {
  0%, 8% { opacity: 0; transform: scale(.82); }
  24%, 78% { opacity: .82; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
@keyframes launch-copy-v13 {
  0%, 5% { opacity: 0; transform: translateY(5px); }
  18%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes launch-page-fade-v13 {
  0%, 48% { opacity: 1; }
  100% { opacity: .08; }
}

/* --- Entrance transition v14: 固定の等間隔星を廃止 / 小さな星は大きさを変えず流す --- */
.warp.is-active .launch-starfield {
  animation: launch-stars-v14 2.6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes launch-stars-v14 {
  0% {
    opacity: 0;
    transform: translate3d(1.8%, -1.0%, 0);
  }
  16% {
    opacity: .50;
  }
  72% {
    opacity: .88;
    transform: translate3d(-2.8%, 1.5%, 0);
  }
  100% {
    opacity: .18;
    transform: translate3d(-5.2%, 2.8%, 0);
  }
}

/* --- Entrance transition v16: 最初の画面にも流れる星 / 接続時間を少し短縮 --- */
/* 背景星をbodyの黒背景より前、本文より後ろに置く */
.background-starfield {
  position: fixed;
  z-index: 0;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 16%, rgba(255,255,255,.98) 0 2.6px, rgba(205,222,255,.42) 3.2px, transparent 5.2px),
    radial-gradient(circle at 13% 61%, rgba(205,222,255,.54) 0 1.35px, transparent 2.15px),
    radial-gradient(circle at 22% 31%, rgba(255,255,255,.66) 0 1.05px, transparent 1.85px),
    radial-gradient(circle at 31% 78%, rgba(222,210,255,.60) 0 1.45px, transparent 2.25px),
    radial-gradient(circle at 41% 10%, rgba(255,255,255,.68) 0 1.2px, transparent 2.05px),
    radial-gradient(circle at 49% 52%, rgba(194,231,239,.58) 0 1.35px, transparent 2.15px),
    radial-gradient(circle at 58% 86%, rgba(255,255,255,.56) 0 1.05px, transparent 1.85px),
    radial-gradient(circle at 66% 24%, rgba(228,216,255,.66) 0 1.35px, transparent 2.15px),
    radial-gradient(circle at 74% 68%, rgba(255,255,255,.72) 0 1.15px, transparent 2.0px),
    radial-gradient(circle at 83% 38%, rgba(190,227,242,.56) 0 1.35px, transparent 2.15px),
    radial-gradient(circle at 91% 83%, rgba(255,255,255,.62) 0 1.15px, transparent 2.0px),
    radial-gradient(circle at 96% 13%, rgba(218,207,255,.54) 0 1.05px, transparent 1.85px),
    radial-gradient(circle at 17% 89%, rgba(255,255,255,.52) 0 .95px, transparent 1.7px),
    radial-gradient(circle at 36% 43%, rgba(255,255,255,.50) 0 1px, transparent 1.75px),
    radial-gradient(circle at 54% 19%, rgba(210,226,255,.52) 0 1px, transparent 1.8px),
    radial-gradient(circle at 71% 92%, rgba(255,255,255,.53) 0 .95px, transparent 1.7px),
    radial-gradient(circle at 87% 57%, rgba(235,225,255,.50) 0 1px, transparent 1.8px),
    radial-gradient(circle at 27% 8%, rgba(255,255,255,.40) 0 .85px, transparent 1.55px),
    radial-gradient(circle at 63% 44%, rgba(212,230,255,.42) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 79% 17%, rgba(255,255,255,.46) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 8% 74%, rgba(225,215,255,.42) 0 .85px, transparent 1.55px);
  opacity: 1;
  filter: brightness(1.12);
  will-change: transform;
  animation: entrance-stars-drift 18s linear infinite alternate;
}
.stars.background-starfield::before,
.stars.background-starfield::after { display: none; }

/* 星は本文の後ろに固定 */
main,
footer {
  position: relative;
  z-index: 1;
}
.simple-topbar,
.submit-page,
.submission-page { position: relative; z-index: 1; }

@keyframes entrance-stars-drift {
  from { transform: translate3d(2.2%, -1.2%, 0); }
  to   { transform: translate3d(-3.8%, 2.1%, 0); }
}

/* 接続演出はv15より少し短く、ただし一呼吸は残す */
.warp.is-active {
  animation-duration: 1.35s;
}
.warp.is-active::before {
  animation-duration: 1.35s;
}
.warp.is-active .launch-starfield {
  animation: launch-stars-v16 1.35s cubic-bezier(.22,.61,.36,1) forwards;
}
.warp.is-active .launch-mark {
  animation: launch-mark-v16 1.35s ease-out forwards;
}
.warp.is-active .launch-kicker {
  animation: launch-copy-v16 1.35s ease-out .05s forwards;
}
.warp.is-active .launch-status {
  animation: launch-copy-v16 1.35s ease-out .1s forwards;
}
body.is-warping .hero,
body.is-warping .topbar,
body.is-warping footer {
  animation: launch-page-fade-v16 1.35s ease-in forwards;
}

@keyframes launch-stars-v16 {
  0% { opacity: 0; transform: translate3d(1.8%, -1%, 0); }
  13% { opacity: .50; }
  78% { opacity: .90; transform: translate3d(-3.0%, 1.6%, 0); }
  100% { opacity: .20; transform: translate3d(-5.4%, 2.9%, 0); }
}
@keyframes launch-mark-v16 {
  0%, 7% { opacity: 0; transform: scale(.82); }
  20%, 82% { opacity: .82; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
@keyframes launch-copy-v16 {
  0%, 5% { opacity: 0; transform: translateY(5px); }
  17%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes launch-page-fade-v16 {
  0%, 56% { opacity: 1; }
  100% { opacity: .08; }
}

@media (prefers-reduced-motion: reduce) {
  .background-starfield { animation: none; }
}


/* --- v17: 入口の常時流れる星を少し大きく --- */
/* 配置と速度はv16のまま。粒だけ一段見つけやすくした。 */

/* サイト投稿ページ */
.submit-body {
  min-height: 100vh;
  overflow-x: hidden;
  color: #f7f6ff;
  background: radial-gradient(circle at 50% 12%, #1b153d 0, #080717 43%, #03030a 100%);
}
.submit-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .8;
  background-image:
    radial-gradient(circle at 8% 16%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 23% 72%, #d8ccff 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 48% 23%, #fff 0 1.5px, transparent 2.6px),
    radial-gradient(circle at 72% 43%, #a98cff 0 1px, transparent 2.2px),
    radial-gradient(circle at 91% 14%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 86% 82%, #9bdcff 0 1px, transparent 2px),
    radial-gradient(circle at 38% 91%, #fff 0 1.2px, transparent 2.2px);
}
.simple-topbar {
  width: min(1120px, calc(100% - 40px));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.simple-brand, .simple-return { color: #f7f6ff; text-decoration: none; }
.simple-brand { font: 700 24px/1 "Space Grotesk", sans-serif; letter-spacing: .02em; }
.simple-brand span { color: #9f81ff; }
.simple-return { font: 500 13px/1 "Noto Sans JP", sans-serif; color: rgba(255,255,255,.7); }
.simple-return:hover { color: #fff; }
.submit-body .submit-explore-return {
  position: fixed;
  z-index: 80;
  top: 70px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(158,233,238,.42);
  border-radius: 999px;
  color: #dffcff;
  background: rgba(5,9,19,.82);
  box-shadow: 0 8px 25px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
}
.submit-body .submit-explore-return span { color: var(--cyan); font: 16px/1 "Space Grotesk", sans-serif; }
.submit-body .submit-explore-return:hover,
.submit-body .submit-explore-return:focus-visible { border-color: var(--cyan); color: #fff; background: rgba(13,34,48,.92); outline: none; }
@media (max-width: 560px) { .submit-body .submit-explore-return { top: 58px; right: 10px; padding: 9px 12px; font-size: 11px; } }
.submit-page {
  width: min(900px, calc(100% - 40px));
  min-height: calc(100vh - 76px);
  margin: 0 auto;
  padding: 10vh 0 64px;
}
.submit-page .section-label { margin: 0 0 15px; color: #a78bff; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .18em; }
.submit-page h1 { margin: 0; font: 700 clamp(38px, 6vw, 70px)/1.1 "Noto Sans JP", sans-serif; letter-spacing: -.05em; }
.submit-copy { max-width: 560px; margin: 20px 0 42px; color: rgba(255,255,255,.7); font: 400 15px/1.9 "Noto Sans JP", sans-serif; }
.submit-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.submit-choice {
  position: relative;
  min-height: 265px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(201,188,255,.3);
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, rgba(151,111,255,.19), rgba(255,255,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 20px 60px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .24s ease, border-color .24s ease, background .24s ease;
}
.submit-choice:hover { transform: translateY(-6px); border-color: rgba(208,192,255,.8); background: linear-gradient(140deg, rgba(160,119,255,.34), rgba(255,255,255,.08)); }
.submit-choice p { margin: 0; color: #c8baff; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .14em; }
.submit-choice h2 { position: relative; z-index: 1; margin: 55px 0 18px; font: 700 clamp(24px, 3vw, 33px)/1.3 "Noto Sans JP", sans-serif; letter-spacing: -.05em; }
.submit-choice > span:last-child { position: relative; z-index: 1; display: block; color: rgba(255,255,255,.67); font: 400 13px/1.7 "Noto Sans JP", sans-serif; }
.choice-orbit { position: absolute; right: 24px; top: 19px; color: #fff0b8; font-size: 58px; line-height: 1; text-shadow: 0 0 24px #a881ff; opacity: .82; }
.found-star { background: linear-gradient(140deg, rgba(50,145,255,.16), rgba(255,255,255,.04)); }
.found-star:hover { background: linear-gradient(140deg, rgba(50,145,255,.32), rgba(255,255,255,.08)); }
.found-star .choice-orbit { color: #bce4ff; text-shadow: 0 0 24px #69baff; }
.submit-choices.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.submit-note { margin: 25px 0 0; color: rgba(255,255,255,.38); font: 400 12px/1.7 "Noto Sans JP", sans-serif; }
@media (max-width: 680px) {
  .submit-page { padding-top: 7vh; }
  .submit-choices { grid-template-columns: 1fr; }
  .submit-choice { min-height: 220px; }
}

.submission-page { width: min(680px, calc(100% - 40px)); margin: 0 auto; padding: 9vh 0 70px; }
.submission-page h1 { margin: 0; font: 700 clamp(34px, 5vw, 55px)/1.15 "Noto Sans JP", sans-serif; letter-spacing: -.05em; }
.submission-page > p:not(.section-label) { margin: 18px 0 34px; color: rgba(255,255,255,.68); font: 400 14px/1.8 "Noto Sans JP", sans-serif; }
.submission-form { display: grid; gap: 18px; padding: 26px; border: 1px solid rgba(202,190,255,.28); border-radius: 22px; background: rgba(255,255,255,.045); }
.submission-form label { display: grid; gap: 9px; color: rgba(255,255,255,.76); font: 500 13px/1.3 "Noto Sans JP", sans-serif; }
.submission-form input, .submission-form textarea { box-sizing: border-box; width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 13px 14px; outline: none; color: #fff; background: rgba(5,4,18,.64); font: 400 14px/1.5 "Noto Sans JP", sans-serif; }
.submission-form textarea { min-height: 105px; resize: vertical; }
.submission-form .submission-creator-confirm { display: flex; align-items: flex-start; gap: 11px; padding: 14px 15px; border: 1px solid rgba(158,233,238,.25); border-radius: 12px; background: rgba(158,233,238,.055); color: rgba(238,253,255,.84); line-height: 1.65; cursor: pointer; }
.submission-form .submission-creator-confirm input { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; flex: 0 0 18px; border-radius: 4px; accent-color: #9ee9ee; cursor: pointer; }
.submission-form .submission-creator-note { margin: -8px 2px 0; color: rgba(255,255,255,.48); font: 400 11px/1.7 "Noto Sans JP", sans-serif; }
.submission-form input:focus, .submission-form textarea:focus { border-color: #a88aff; box-shadow: 0 0 0 3px rgba(168,138,255,.14); }
.submission-form button { justify-self: start; border: 0; border-radius: 999px; padding: 13px 20px; color: #fff; background: #7254db; font: 700 14px/1 "Noto Sans JP", sans-serif; cursor: pointer; }
  .submission-form button:hover { background: #8568e9; }
  .submission-form button:disabled { cursor: wait; opacity: .62; }
  .submission-status { margin: -4px 0 0; color: #bdeaff; font: 500 12px/1.5 "Noto Sans JP", sans-serif; }
  .submission-status.is-error { color: #ffba9d; }
.category-field { display: grid; gap: 9px; }
.category-label { color: rgba(255,255,255,.76); font: 500 13px/1.3 "Noto Sans JP", sans-serif; }
.category-label small { margin-left: 6px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 400; }
.category-picker { position: relative; }
.category-picker summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; box-sizing: border-box; padding: 0 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; outline: none; color: rgba(255,255,255,.58); background: rgba(5,4,18,.64); cursor: pointer; font: 400 14px/1.5 "Noto Sans JP", sans-serif; list-style: none; }
.category-picker summary::-webkit-details-marker { display: none; }
.category-picker[open] summary { border-color: #a88aff; box-shadow: 0 0 0 3px rgba(168,138,255,.14); }
.category-chevron { color: #bba8ff; font: 22px/1 Arial, sans-serif; transition: transform .18s ease; }
.category-picker[open] .category-chevron { transform: rotate(180deg); }
.category-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding: 13px; border: 1px solid rgba(202,190,255,.24); border-radius: 14px; background: rgba(10,8,29,.96); box-shadow: 0 15px 40px rgba(0,0,0,.3); }
.category-options button { justify-self: stretch; min-height: 39px; padding: 8px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.04); font: 500 12px/1.25 "Noto Sans JP", sans-serif; }
.category-options button:hover, .category-options button.is-selected { border-color: rgba(168,138,255,.9); color: #fff; background: rgba(125,91,220,.26); }
.category-help { margin: -2px 0 0; min-height: 1.4em; color: rgba(255,255,255,.42); font: 400 11px/1.4 "Noto Sans JP", sans-serif; }
.category-help.is-limit { color: #ffbd99; }
@media (max-width: 480px) { .category-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 入口以外で共通して使う固定メニュー */
.global-menu { position: fixed; z-index: 30; top: 20px; left: clamp(20px, 4vw, 58px); }
.global-menu summary { display: flex; width: 50px; height: 50px; padding: 0; border: 1px solid rgba(245,244,237,.23); border-radius: 50%; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: rgba(5,5,12,.56); box-shadow: 0 8px 28px rgba(0,0,0,.28); cursor: pointer; list-style: none; }
.global-menu summary::-webkit-details-marker { display: none; }
.global-menu summary span { display: block; width: 23px; height: 2.5px; border-radius: 99px; background: var(--ink); }
.global-menu summary:hover { border-color: var(--cyan); }
.global-menu nav { position: absolute; top: 61px; left: 0; display: grid; width: 245px; overflow: hidden; border: 1px solid rgba(245,244,237,.2); border-radius: 17px; background: rgba(12,12,22,.97); box-shadow: 0 20px 55px rgba(0,0,0,.45); }
.global-menu:not([open]) nav { display: none; }
.global-menu nav a { padding: 16px 19px; border-bottom: 1px solid rgba(245,244,237,.11); color: var(--ink); text-decoration: none; font: 14px "Noto Sans JP", sans-serif; }
.global-menu nav a:last-child { border-bottom: 0; }
.global-menu nav a:hover { color: var(--cyan); background: rgba(158,233,238,.08); }
.profile-link { display: flex; align-items: center; gap: 10px; }
.profile-mark { position: relative; width: 16px; height: 16px; flex: 0 0 16px; border: 1.5px solid currentColor; border-radius: 50% 50% 42% 42%; opacity: .9; }
.profile-mark::before { position: absolute; top: 2px; left: 50%; width: 4px; height: 4px; border: 1.2px solid currentColor; border-radius: 50%; content: ""; transform: translateX(-50%); }
.profile-mark::after { position: absolute; top: -6px; right: -6px; color: #ffd88c; content: "✦"; font: 11px/1 "Space Grotesk", sans-serif; }
.global-menu nav a.menu-entry { display: flex; align-items: center; gap: 12px; padding: 14px 17px; }
.menu-icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid currentColor; border-radius: 9px; color: inherit; }
.menu-icon svg { width: 18px; height: 18px; }
.menu-entry-explore .menu-icon { color: #73c9ff; background: rgba(115,201,255,.08); }
.menu-entry-submit .menu-icon { color: #ff9b7b; background: rgba(255,155,123,.08); }
.menu-entry-room .menu-icon { color: #fff; background: rgba(255,255,255,.055); }
.menu-entry-contents .menu-icon { color: #8fe59b; background: rgba(143,229,155,.08); }
.menu-entry-profile .menu-icon { color: #e3b4ff; background: rgba(227,180,255,.08); }
.global-menu nav a:hover .menu-icon { background: rgba(158,233,238,.16); }
.global-menu ~ main .topbar, .global-menu ~ .simple-topbar { box-sizing: border-box; padding-left: 82px; }
@media (max-width: 560px) { .global-menu { top: 20px; left: 20px; }.global-menu ~ main .topbar, .global-menu ~ .simple-topbar { padding-left: 76px; }.global-menu nav { width: min(245px, calc(100vw - 40px)); } }

/* 三本線から移動した先のアイコンを、入口にも同じ形で使う */
.global-menu .menu-icon { width: 30px; height: 30px; flex-basis: 30px; }
.global-menu .menu-icon svg { width: 19px; height: 19px; }
.action-icon { width: 30px; height: 30px; flex-basis: 30px; border: 1px solid currentColor; border-radius: 9px; }
.action-icon svg { width: 19px; height: 19px; }
.action-icon-explore { color: #73c9ff; background: rgba(115,201,255,.08); }
.action-icon-submit { color: #ff9b7b; background: rgba(255,155,123,.08); }

.contents-results { display: grid; gap: 14px; }
.contents-star { padding: 22px; border: 1px solid rgba(201,168,255,.25); border-radius: 18px; background: rgba(12,12,23,.7); box-shadow: 0 14px 38px rgba(0,0,0,.14); }
.contents-star-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font: 10px/1.4 "DM Mono", monospace; letter-spacing: .05em; }
.contents-source { padding: 5px 8px; border: 1px solid rgba(158,233,238,.35); border-radius: 999px; color: var(--cyan); background: rgba(158,233,238,.06); font-size: 9px; letter-spacing: .07em; }
.contents-source.is-author { border-color: rgba(201,168,255,.52); color: #e1d5ff; background: rgba(201,168,255,.09); }
.contents-star h2 { margin: 16px 0 7px; color: var(--ink); font: 600 clamp(20px, 3vw, 27px)/1.2 "Noto Sans JP", sans-serif; }
.contents-star p { margin: 0; color: #c4c3c9; font: 14px/1.7 "Noto Sans JP", sans-serif; }
.contents-star a { display: inline-block; margin-top: 17px; color: var(--cyan); font: 600 13px "Noto Sans JP", sans-serif; text-decoration: none; }
.contents-star a:hover { color: #e3ffff; }
.contents-star-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.contents-star-actions a, .contents-star-actions button { margin: 0; padding: 8px 11px; border: 1px solid rgba(245,244,237,.2); border-radius: 999px; color: rgba(245,244,237,.8); background: rgba(255,255,255,.035); font: 600 11px "Noto Sans JP", sans-serif; text-decoration: none; cursor: pointer; }
.contents-star-actions a:hover { border-color: rgba(158,233,238,.7); color: var(--cyan); background: rgba(158,233,238,.08); }
.contents-star-actions button:hover { border-color: rgba(255,155,123,.76); color: #ffb09c; background: rgba(255,155,123,.08); }

/* ギャラリーとして一件ずつ読みやすい余白を確保する */
.contents-page { width: min(calc(100% - 56px), 1280px); }
.contents-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.contents-star { display: flex; min-width: 0; min-height: 238px; padding: 18px; flex-direction: column; }
.contents-star-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
.contents-star h2 { margin: 12px 0 7px; font-size: clamp(18px, 1.7vw, 22px); overflow-wrap: anywhere; }
.contents-star p { display: -webkit-box; overflow: hidden; font-size: 13px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.contents-star > a { margin-top: auto; padding-top: 10px; }
.contents-star-actions { margin-top: 10px; }
@media (max-width: 1080px) { .contents-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 680px) { .contents-page { width: min(calc(100% - 32px), 620px); }.contents-results { grid-template-columns: 1fr; gap: 19px; }.contents-star { min-height: 0; } }

@media (max-width: 820px) {
  .contents-page { padding-top: 10vh; }
  .contents-page h1 { font-size: clamp(38px, 12vw, 52px); }
  .contents-tools { gap: 10px; margin-top: 18px; }
  .contents-search, .contents-tools .contents-search { flex: 0 0 32px; width: 100%; height: 32px; min-height: 0; padding: 0 10px; border-radius: 9px; }
  .contents-search span { font-size: 15px; }
  .contents-search input { height: 100%; padding: 0; font-size: 13px; }
  .mobile-filter-accordion { overflow: hidden; border: 1px solid rgba(158,233,238,.25); border-radius: 12px; background: linear-gradient(120deg, rgba(27,36,60,.9), rgba(19,25,47,.88)); }
  .mobile-filter-accordion summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 13px; color: var(--ink); cursor: pointer; list-style: none; font: 600 12px "Noto Sans JP", sans-serif; }
  .mobile-filter-accordion summary::-webkit-details-marker { display: none; }
  .mobile-filter-accordion summary i { color: var(--cyan); font: 18px/1 "DM Mono", monospace; font-style: normal; transition: transform .2s ease; }
  .mobile-filter-accordion[open] summary { border-bottom: 1px solid var(--line); }
  .mobile-filter-accordion[open] summary i { transform: rotate(180deg); }
  .source-filter { gap: 6px; padding: 10px 12px 12px; }
  .source-filter button { padding: 8px 10px; font-size: 11px; }
  .sort-filter-accordion { margin-top: 10px; }
  .sort-tabs { gap: 6px; margin: 0; padding: 10px 12px 12px; }
  .sort-tabs button { padding: 8px 11px; font-size: 11px; }
  .gallery-sort-tabs { gap: 9px; margin: 20px 0 11px; padding: 0; }
  .gallery-sort-tabs button { min-width: 116px; min-height: 38px; padding: 8px 16px; border-radius: 999px; font-size: 11px; }
  .gallery-sort-tabs + .contents-tools { margin-top: 0; }
  .category-accordion { margin: 12px 0 22px; }
}

/* The catalog stays light at scale: eighteen more cards are fetched on demand. */
.contents-list-status {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: flex-end;
  margin: 0 2px 10px;
}
.contents-list-status p {
  margin: 0;
  color: rgba(245,244,237,.5);
  font: 10px/1.4 "DM Mono", monospace;
  letter-spacing: .06em;
}
.contents-star {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--star-accent, #aeb5c7) 38%, rgba(245,244,237,.14));
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--star-accent, #aeb5c7) 25%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(95,113,181,.18) 0%, transparent 48%),
    linear-gradient(150deg, rgba(34,43,72,.97) 0%, rgba(19,25,48,.97) 54%, rgba(11,15,31,.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 34px rgba(0,0,0,.2);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.contents-star::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--star-accent, #aeb5c7), transparent);
  opacity: .85;
  content: "";
}
.contents-star:hover {
  border-color: color-mix(in srgb, var(--star-accent, #aeb5c7) 55%, rgba(245,244,237,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 20px 50px rgba(0,0,0,.3), 0 0 24px color-mix(in srgb, var(--star-accent, #aeb5c7) 12%, transparent);
  transform: translateY(-2px);
}
.contents-star-top-space {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.contents-star-header {
  display: grid;
  min-height: 100px;
  grid-template-columns: minmax(86px, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 12px;
}
.contents-site-icon {
  position: relative;
  display: grid;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 1px solid rgba(245,244,237,.16);
  border-radius: 15px;
  place-items: center;
  color: rgba(245,244,237,.74);
  background: rgba(255,255,255,.055);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.contents-site-icon-fallback {
  font: 600 24px/1 "Space Grotesk", "Noto Sans JP", sans-serif;
}
.contents-site-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  opacity: 0;
  background: rgba(247,248,252,.94);
  transition: opacity .18s ease;
}
.contents-site-icon.has-image img { opacity: 1; }
.contents-star-meta {
  min-height: 50px;
  align-items: flex-end;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
}
.contents-source {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--star-accent, #aeb5c7) 45%, transparent);
  color: color-mix(in srgb, var(--star-accent, #aeb5c7) 82%, white);
  background: color-mix(in srgb, var(--star-accent, #aeb5c7) 10%, transparent);
}
.contents-source.is-operator {
  align-self: flex-end;
  padding: 7px 10px;
  border-color: rgba(158,233,238,.78);
  color: #d9fcff;
  background: rgba(65,164,187,.2);
  box-shadow: 0 0 12px rgba(112,220,236,.12);
  font-size: 10px;
}
.contents-category-tags {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  gap: 5px;
}
.contents-category-tags span {
  padding: 4px 7px;
  overflow: hidden;
  border: 1px solid rgba(245,244,237,.11);
  border-radius: 999px;
  color: rgba(245,244,237,.58);
  background: rgba(255,255,255,.025);
  font: 9px/1 "Noto Sans JP", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contents-star h2 {
  width: calc(100% + 8px);
  margin: 22px -4px 0;
  font-size: clamp(25px, 2.25vw, 32px);
  line-height: 1.25;
  letter-spacing: -.025em;
}
.contents-star .contents-visit-link {
  width: fit-content;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(245,244,237,.58);
  background: transparent;
  font-size: 11px;
}
.contents-star .contents-visit-link:hover {
  border: 0;
  color: var(--cyan);
  background: transparent;
}
.contents-star-actions {
  align-items: flex-start;
  flex-direction: column;
  margin-top: auto;
  padding-top: 24px;
}
.contents-star-actions > a:first-child {
  padding: 9px 13px;
  border-color: rgba(158,233,238,.42);
  color: var(--cyan);
  background: rgba(158,233,238,.07);
}
.contents-load-more {
  display: block;
  min-width: 170px;
  margin: 30px auto 0;
  padding: 12px 22px;
  border: 1px solid rgba(158,233,238,.42);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(158,233,238,.065);
  cursor: pointer;
  font: 600 12px "Noto Sans JP", sans-serif;
}
.contents-load-more:hover { background: rgba(158,233,238,.13); }
.contents-load-more:disabled { cursor: wait; opacity: .55; }
.contents-load-more[hidden] { display: none; }

@media (max-width: 780px) {
  .contents-star-meta { align-items: flex-end; }
  .contents-category-tags { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .contents-star { transition: none; }
  .contents-star:hover { transform: none; }
}

/* Actions for stars stored in the shared database. */
.profile-star-item { display: grid; gap: 7px; }
.profile-star-actions { display: flex; gap: 8px; justify-content: flex-end; }
.profile-star-actions a,
.profile-star-actions button {
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(14,14,23,.55);
  font: 11px "DM Mono", monospace;
  text-decoration: none;
  cursor: pointer;
}
.profile-star-actions a:hover { color: var(--cyan); border-color: rgba(158,233,238,.6); }
.profile-star-actions button:hover { color: #ffb09d; border-color: rgba(255,176,157,.65); }
.profile-star-status { width: fit-content; margin-left: 14px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.045); font: 500 11px/1 "DM Mono", monospace; letter-spacing: .03em; }
.profile-star-status.is-pending { border-color: rgba(255,211,143,.55); color: #ffd38f; background: rgba(255,211,143,.08); }
.profile-star-status.is-published { border-color: rgba(158,233,238,.58); color: var(--cyan); background: rgba(158,233,238,.09); }
.profile-star-status.is-hidden, .profile-star-status.is-removed { border-color: rgba(255,176,157,.5); color: #ffb09d; background: rgba(255,176,157,.08); }

/* Basic account controls used before the public MVP. */
.profile-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.profile-heading h1 { margin-bottom: 0; }
.account-logout { min-height: 40px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--muted); background: rgba(14,14,23,.58); cursor: pointer; font: 12px "Noto Sans JP", sans-serif; }
.account-logout:hover { border-color: rgba(158,233,238,.6); color: var(--cyan); }
.account-logout:disabled { cursor: wait; opacity: .55; }
@media (max-width: 520px) { .profile-heading { align-items: center; }.account-logout { flex: 0 0 auto; } }

/* Administrator review queue */
.review-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.review-heading h1 { margin: 0; }
.review-heading p { max-width: 550px; margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.review-refresh, .review-actions button { border: 1px solid rgba(158,233,238,.52); border-radius: 10px; color: var(--cyan); background: rgba(158,233,238,.08); cursor: pointer; font: 500 13px "Noto Sans JP", sans-serif; }
.review-refresh { min-height: 40px; padding: 9px 14px; }
.review-refresh:hover, .review-actions .review-published:hover { background: rgba(158,233,238,.18); }
.review-refresh:disabled, .review-actions button:disabled { cursor: wait; opacity: .55; }
.review-message { min-height: 20px; margin: 0 0 13px; color: var(--cyan); font-size: 13px; }
.review-message.is-error { color: #ffb09d; }
.review-list { display: grid; gap: 13px; }
.review-card { display: grid; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(10,10,20,.62); }
.review-card h2 { margin: 0; color: var(--ink); font: 600 21px/1.25 "Noto Sans JP", sans-serif; }
.review-card > p:not(.review-category):not(.review-source) { margin: 0; color: #cfced5; font-size: 14px; line-height: 1.7; }
.review-category, .review-source { margin: 0; color: var(--muted); font: 11px/1.4 "DM Mono", monospace; letter-spacing: .05em; }
.review-card > a { overflow: hidden; color: var(--cyan); font: 12px/1.5 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.review-sensitive-url { display: block; overflow: hidden; color: #ffd38f; font: 12px/1.5 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.review-actions button { min-height: 34px; padding: 7px 12px; }
.review-actions .review-hidden { border-color: rgba(255,211,143,.52); color: #ffd38f; background: rgba(255,211,143,.07); }
.review-actions .review-hidden:hover { background: rgba(255,211,143,.16); }
.review-actions .review-removed { border-color: rgba(255,176,157,.52); color: #ffb09d; background: rgba(255,176,157,.07); }
.review-actions .review-removed:hover { background: rgba(255,176,157,.16); }
.review-empty { margin: 0; padding: 36px 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); background: rgba(10,10,20,.58); text-align: center; font-size: 14px; }
.report-review-section { margin-top: 42px; }
.report-review-section h2 { margin: 0; font: 600 25px/1.2 "Noto Sans JP", sans-serif; }
.report-review-section > p { margin: 10px 0 18px; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .review-heading { align-items: start; flex-direction: column; } }

/* Entrance experiment: the real universe is visible before exploration begins. */
.entrance-page { overflow-x: hidden; overflow-y: auto; background: #020207; }
#entrance-sky { position: fixed; z-index: 0; inset: -24px auto auto -24px; width: calc(100% + 48px); height: calc(100% + 48px); pointer-events: none; background: radial-gradient(ellipse at 52% 48%, #121329 0%, #070816 46%, #020207 100%); animation: entrance-sky-shift 12s ease-in-out infinite alternate; will-change: transform; }
@keyframes entrance-sky-shift { from { transform: translate(-12px, -6px); } to { transform: translate(12px, 6px); } }
@media (prefers-reduced-motion: reduce) { #entrance-sky { animation: none; transform: none; will-change: auto; } }
.entrance-universe { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; background: #020207; filter: brightness(.79) saturate(.96); transition: filter .45s ease; }
.entrance-page::after { position: fixed; z-index: 1; inset: 0; content: ""; pointer-events: none; background: transparent; opacity: 1; transition: opacity .45s ease; }
.entrance-page > .background-starfield { display: block; inset: 0; animation: none; transform: none; will-change: auto; }
.entrance-page > .nebula { display: block; z-index: 0; animation: none; }
.entrance-page > main,
.entrance-page > footer { position: relative; z-index: 2; pointer-events: none; transition: opacity .32s ease, transform .32s ease; }
.entrance-page .topbar,
.entrance-page .topbar * { pointer-events: auto; }
.entrance-page .top-actions { margin-right: 58px; }
@media (max-width: 560px) { .entrance-page .top-actions { margin-right: 46px; } }
@media (max-width: 430px) {
  .entrance-page .brand { font-size: 18px; }
  .entrance-page .top-actions { gap: 4px; margin-right: 40px; }
  .entrance-page .login-link,
  .entrance-page .signup-link { padding: 7px 6px; font-size: 10px; }
}
.entrance-page .hero { pointer-events: none; }
.entrance-page .hero > * { pointer-events: none; }
.entrance-page .hero #explore-button { pointer-events: auto; }
.entrance-page .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 480px); gap: 36px; align-items: stretch; }
.entrance-page .hero-actions > .explore-button { min-width: 0; padding-inline: 20px; text-decoration: none; }
.entrance-page .hero-actions > .explore-button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.entrance-page .hero .entrance-submit-button { pointer-events: auto; border-color: rgba(255,190,149,.84); color: #fff0e7; background: radial-gradient(circle at 50% 50%, rgba(241,146,83,.68), rgba(166,79,43,.82) 58%, rgba(100,43,29,.88)); box-shadow: 0 0 0 1px rgba(255,210,174,.1), 0 0 20px rgba(255,164,110,.24), 0 14px 34px rgba(196,87,42,.2); }
.entrance-page .hero .entrance-submit-button:hover { background: radial-gradient(circle at 50% 50%, rgba(255,168,104,.76), rgba(185,91,49,.88) 58%, rgba(120,51,33,.94)); box-shadow: 0 0 0 1px rgba(255,223,195,.25), 0 0 28px rgba(255,175,119,.38), 0 18px 42px rgba(211,99,50,.28); }
.entrance-page .entrance-submit-button .action-icon { color: #fff0e7; }
.entrance-page .entrance-submit-button small { color: rgba(255,240,231,.76); }
.entrance-announcement {
  position: absolute;
  z-index: 3;
  top: clamp(190px, 27vh, 300px);
  right: clamp(28px, 5vw, 82px);
  width: min(360px, 27vw);
  padding: 27px 29px;
  border: 1px solid rgba(158,233,238,.28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(17,25,43,.84), rgba(8,11,24,.78));
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
}
.entrance-announcement-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.entrance-announcement-meta p { margin: 0; color: #75b9cb; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.entrance-announcement-meta time { color: #777b8b; font: 10px/1 "DM Mono", monospace; }
.entrance-announcement h2 { margin: 0; font: 600 clamp(20px, 1.8vw, 27px)/1.3 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.025em; }
.entrance-announcement > p { margin: 15px 0 20px; color: #aaaebb; font-size: 13px; line-height: 1.8; }
.entrance-announcement a { color: #82c6d7; text-decoration: none; font: 600 13px/1.4 "Noto Sans JP", sans-serif; }
.entrance-announcement a::after { content: "  →"; }
.entrance-announcement a:hover { color: #b0edf2; }
@media (max-width: 1180px) {
  .entrance-announcement { position: relative; top: auto; right: auto; width: min(100%, 760px); margin: -54px auto 0; }
}
@media (max-width: 560px) { .entrance-page .hero-actions { grid-template-columns: minmax(0, 1fr); width: min(100%, 260px); gap: 26px; } }
@media (max-width: 560px) { .entrance-announcement { width: 100%; margin-top: 0; padding: 19px 20px; } }
.entrance-page .entrance-info,
.entrance-page .entrance-info * { pointer-events: auto; }
.entrance-info { width: min(100%, 1080px); margin: 0 auto; padding: clamp(72px, 10vw, 128px) 0 clamp(88px, 12vw, 150px); }
.entrance-info-heading { max-width: 720px; }
.entrance-info-heading h2 { max-width: 680px; margin: 15px 0 20px; font: 600 clamp(34px, 5vw, 62px)/1.08 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.045em; }
.entrance-info-heading > p:last-child { max-width: 670px; margin: 0; color: #bebdca; font-size: clamp(14px, 1.7vw, 17px); line-height: 1.9; }
.entrance-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 5vw, 70px); margin-top: clamp(42px, 6vw, 70px); }
.entrance-info-grid article { min-height: 0; padding: 0; }
.entrance-info-grid article > span { color: rgba(158,233,238,.68); font: 10px/1 "DM Mono", monospace; letter-spacing: .12em; }
.entrance-info-grid h3 { margin: 36px 0 12px; font: 600 clamp(19px, 2.4vw, 26px)/1.25 "Space Grotesk", "Noto Sans JP", sans-serif; }
.entrance-info-grid p { margin: 0; color: #aaa9b7; font-size: 13px; line-height: 1.85; }
@media (max-width: 680px) {
  .entrance-info { padding-top: 68px; }
  .entrance-info-grid { grid-template-columns: minmax(0, 1fr); }
  .entrance-info-grid h3 { margin-top: 25px; }
}
.entrance-page > .site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: 28px; pointer-events: auto; }
.footer-brand { color: var(--ink); text-decoration: none; font: 600 15px/1 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.footer-brand span { color: var(--accent); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.footer-links a, .footer-links span { color: #858593; text-decoration: none; font: 10px/1.4 "Noto Sans JP", sans-serif; letter-spacing: 0; }
.footer-links a:hover { color: var(--cyan); }
.footer-links span[aria-disabled="true"] { opacity: .65; }
.site-footer small { color: #666674; font: 9px/1 "DM Mono", monospace; white-space: nowrap; }
@media (max-width: 720px) {
  .entrance-page > .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links { gap: 12px 16px; }
}
.entrance-page.is-warping > main,
.entrance-page.is-warping > footer { visibility: hidden; }
.entrance-page.is-exploring .entrance-universe { filter: brightness(1) saturate(1); }
.entrance-page.is-exploring::after { opacity: 0; }
.entrance-page.is-exploring > main,
.entrance-page.is-exploring > footer { pointer-events: none; opacity: 0; transform: translateY(-10px); }
.entrance-page.is-exploring:not(.is-warping) .warp { display: none; }
@media (prefers-reduced-motion: reduce) { .entrance-universe, .entrance-page::after, .entrance-page > main, .entrance-page > footer { transition: none; } }

/* Database progress belongs to the entrance effect, below its connection message. */
.warp .launch-loading { margin-top: -9px; color: rgba(210, 224, 236, .7); font-size: 11px; font-weight: 400; }

/* Guest submission notice, kept separate from the page introduction. */
.submission-page > .submission-auth-note { margin: 0 0 20px; padding: 12px 16px; border-left: 2px solid var(--cyan, #9ee9ee); border-radius: 0 8px 8px 0; background: rgba(158,233,238,.06); color: #c4dfe2; font-size: 13px; line-height: 1.8; }

/* Public contact and creator/rightsholder removal requests. */
.contact-page { position: relative; z-index: 1; width: min(calc(100% - 40px), 760px); min-height: calc(100vh - 136px); margin: 0 auto; padding: 10vh 0 80px; }
.contact-page h1 { margin: 0; font: 700 clamp(40px, 6vw, 64px)/1.1 "Noto Sans JP", sans-serif; letter-spacing: -.04em; }
.contact-intro { max-width: 650px; margin: 18px 0 30px; color: #c7c7d2; font: 16px/1.8 "Noto Sans JP", sans-serif; }
.contact-form { display: grid; gap: 19px; padding: clamp(20px, 4vw, 30px); border: 1px solid rgba(202,190,255,.28); border-radius: 22px; background: rgba(10,10,22,.76); box-shadow: 0 24px 70px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
.contact-form > label:not(.contact-confirm) { display: grid; gap: 9px; color: rgba(255,255,255,.82); font: 500 14px/1.4 "Noto Sans JP", sans-serif; }
.contact-form input[type="email"], .contact-form input[type="text"], .contact-form input[type="url"], .contact-form textarea { box-sizing: border-box; width: 100%; padding: 13px 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 12px; outline: none; color: #fff; background: rgba(3,4,14,.72); font: 16px/1.5 "Noto Sans JP", sans-serif; }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(158,233,238,.12); }
.contact-type-field { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.contact-type-field legend { margin-bottom: 10px; color: rgba(255,255,255,.82); font: 600 15px/1.4 "Noto Sans JP", sans-serif; }
.contact-type-option { display: flex; min-height: 66px; align-items: center; gap: 13px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: rgba(255,255,255,.025); cursor: pointer; }
.contact-type-option:has(input:checked) { border-color: rgba(158,233,238,.72); background: rgba(158,233,238,.09); }
.contact-type-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); }
.contact-type-option span { display: grid; gap: 4px; }
.contact-type-option strong { color: var(--ink); font: 600 15px/1.35 "Noto Sans JP", sans-serif; }
.contact-type-option small { color: var(--muted); font: 13px/1.4 "Noto Sans JP", sans-serif; }
.contact-confirm { display: flex; align-items: flex-start; gap: 11px; color: #c7c7d2; font: 14px/1.7 "Noto Sans JP", sans-serif; }
.contact-confirm input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 18px; accent-color: var(--cyan); }
.contact-privacy { margin: -3px 0 0; padding: 12px 14px; border-left: 2px solid rgba(158,233,238,.7); color: #aeb6c6; background: rgba(158,233,238,.05); font: 13px/1.7 "Noto Sans JP", sans-serif; }
.contact-form > button { justify-self: start; min-height: 46px; padding: 12px 22px; border: 1px solid rgba(158,233,238,.8); border-radius: 999px; color: #061116; background: var(--cyan); cursor: pointer; font: 700 14px/1 "Noto Sans JP", sans-serif; }
.contact-form > button:hover { background: #d8ffff; }
.contact-form > button:disabled { cursor: wait; opacity: .58; }
.report-removal-link { display: block; margin: 14px 0 17px; padding: 12px 14px; border: 1px solid rgba(255,211,143,.38); border-radius: 11px; color: #ffe0ad; background: rgba(255,211,143,.07); font: 600 13px/1.6 "Noto Sans JP", sans-serif; text-decoration: none; }
.report-removal-link:hover { border-color: rgba(255,211,143,.72); background: rgba(255,211,143,.12); }
.footer-contact { color: inherit; text-decoration: none; }
.footer-contact:hover { color: var(--cyan); }
@media (max-width: 720px) { .contact-page { padding-top: 13vh; }.contact-form { border-radius: 18px; }.contact-type-option { min-height: 72px; } }

/* Manually maintained MVP announcements. */
.announcements-page { position: relative; z-index: 1; width: min(calc(100% - 40px), 920px); min-height: calc(100vh - 136px); margin: 0 auto; padding: 10vh 0 90px; }
.announcements-page h1 { margin: 0; font: 700 clamp(44px, 7vw, 76px)/1.05 "Space Grotesk", "Noto Sans JP", sans-serif; letter-spacing: -.05em; }
.announcements-intro { max-width: 650px; margin: 18px 0 48px; color: #9a9baa; font-size: 14px; line-height: 1.8; }
.announcement-list { display: grid; gap: 16px; }
.announcement-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; padding: 27px; border: 1px solid rgba(158,233,238,.32); border-radius: 18px; background: linear-gradient(135deg, rgba(29,39,64,.94), rgba(18,24,46,.92)); box-shadow: 0 18px 48px rgba(0,0,0,.2); }
.announcement-meta { display: grid; align-content: start; gap: 12px; }
.announcement-meta span { width: fit-content; padding: 5px 8px; border: 1px solid rgba(158,233,238,.28); border-radius: 999px; color: var(--cyan); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .12em; }
.announcement-meta time { color: #777b8b; font: 11px/1 "DM Mono", monospace; }
.announcement-copy h2 { margin: 0 0 11px; font: 600 clamp(20px, 3vw, 27px)/1.3 "Space Grotesk", "Noto Sans JP", sans-serif; }
.announcement-copy p { margin: 0; color: #aaaab7; font-size: 13px; line-height: 1.85; }
@media (max-width: 620px) { .announcements-page { padding-top: 14vh; }.announcement-card { grid-template-columns: 1fr; padding: 21px; }.announcement-meta { display: flex; align-items: center; justify-content: space-between; } }

@media (min-width: 1100px) {
  .entrance-page .hero {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 84px;
    padding-right: min(42vw, 520px);
    padding-left: clamp(42px, 6vw, 86px);
  }
}

/* The entrance uses the exact same full-height slide menu as the inner pages. */
.global-menu-scrim[hidden] { display: none; }
.global-menu-scrim {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .34s ease;
}
.global-menu-scrim.is-open { opacity: 1; }
.global-menu.global-side-menu { z-index: 101; }
.global-menu.global-side-menu > summary {
  position: fixed;
  z-index: 102;
  top: 20px;
  left: clamp(20px, 4vw, 58px);
  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.global-menu.global-side-menu.is-open > summary,
.global-menu.global-side-menu.is-closing > summary {
  pointer-events: none;
  opacity: 0;
  transform: scale(.9);
}
.global-menu.global-side-menu > nav,
.global-menu.global-side-menu:not([open]) > nav {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid !important;
  width: min(340px, 84vw);
  padding: 32px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid rgba(245,244,237,.18);
  border-radius: 0;
  align-content: start;
  background: rgba(10,10,18,.96);
  box-shadow: 22px 0 70px rgba(0,0,0,.4);
  pointer-events: none;
  opacity: 1;
  transform: translateX(-104%);
  transition: transform .34s cubic-bezier(.2,.75,.2,1);
  will-change: transform;
}
.global-menu.global-side-menu.is-open > nav {
  pointer-events: auto;
  transform: translateX(0);
  animation: global-menu-slide-in .34s cubic-bezier(.2,.75,.2,1) both;
}
.global-menu.global-side-menu.is-closing > nav {
  animation: global-menu-slide-out .34s cubic-bezier(.2,.75,.2,1) both;
}
@keyframes global-menu-slide-in {
  from { transform: translateX(-104%); }
  to { transform: translateX(0); }
}
@keyframes global-menu-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(-104%); }
}
.global-menu.global-side-menu > nav > a,
.global-menu.global-side-menu > nav > .menu-secondary > a {
  padding: 15px 0;
  border-bottom: 1px solid rgba(245,244,237,.12);
  border-radius: 0;
  background: transparent;
}
.global-menu-title { margin: 4px 0 42px; color: #f5f4ed; font: 600 27px/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.global-menu-title span { color: #c9a8ff; }
.global-menu-close { position: absolute; z-index: 1; top: 20px; right: 20px; padding: 0; border: 0; color: #9897a3; background: transparent; cursor: pointer; font: 25px/1 Arial, sans-serif; }
@media (max-width: 560px) { .brand { font-size: 20px; } .simple-brand { font-size: 20px; } }