@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  --wall: #0a0a09;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--wall);
  overflow: hidden;
  overscroll-behavior: none;
  /* 整页是一块画面：手指拖动是在搅烟，不是滚动页面 */
  touch-action: none;
}
/* 着色器起不来时才垫原图（main.js 的 fallback 里链接也按同样的 cover 对位） */
.nogl body { background: var(--wall) url("../assets/wall.webp") 50% 39.2% / cover no-repeat; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.gl #scene { opacity: 1; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 窗的位置由 main.js 按画面比例写入 left/top/width/height */
#windows a {
  position: fixed;
  overflow: hidden;
  color: transparent;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

#windows a:focus-visible {
  outline: 1px solid rgb(255 255 255 / 0.55);
  outline-offset: 5px;
}

/* 落地页上的字：到了里面才浮出来 */
#world {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  color: rgb(20 20 20 / 0.72);   /* 落地页是白底 */
  font: 200 13px/1 "Jost", "Avenir Next", "Futura", sans-serif;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}
.arrived #world { opacity: 1; transition-duration: 0.7s; }
/* 栏目的名字暂时不显示（还没定放哪），只留给读屏软件 */
#world-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
/* 领域的名字是画在烟里的（world.js）；这份列表只给读屏软件 */
#world-labels {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  list-style: none;
}
#back {
  position: absolute;
  top: 0;
  left: 0;
  padding: 26px 28px;
  color: inherit;
  letter-spacing: 0.3em;
  text-decoration: none;
  pointer-events: auto;
  outline: none;
}
#back:hover, #back:focus-visible { color: #000; }
#back:focus-visible { text-decoration: underline; text-underline-offset: 6px; }

/* 编辑模式的滑块面板（网址加 ?edit 才出现） */
#editor {
  position: fixed;
  top: 12px;
  right: 12px;
  width: min(300px, calc(100vw - 24px));
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  background: rgb(18 18 17 / 0.88);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 8px;
  color: #d8d6cf;
  font: 12px/1.4 -apple-system, "PingFang SC", sans-serif;
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
}
#editor strong { font-weight: 500; font-size: 13px; }
#editor label { display: grid; grid-template-columns: 6.5em 1fr 3em; align-items: center; gap: 8px; }
#editor input[type="range"] { width: 100%; accent-color: #5fd2cd; }
#editor output { text-align: right; font-variant-numeric: tabular-nums; color: #a09e97; }
#editor div { display: flex; gap: 8px; }
#editor button {
  flex: 1;
  padding: 6px 8px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 6px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#editor button:hover { background: rgb(255 255 255 / 0.14); }
#editor pre { margin: 0; white-space: pre-wrap; color: #8b8983; font: inherit; user-select: text; -webkit-user-select: text; }