:root {
  color-scheme: dark;
  --gold: #ffd479;
  --text: #f4f1ed;
  --soft: rgba(244,241,237,.68);
  --line: rgba(255,255,255,.2);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #0b0b0e; color: var(--text); font-family: "Noto Serif SC", "Songti SC", "STSong", serif; }
.domain { position: relative; width: 100%; height: 100%; min-height: 320px; isolation: isolate; overflow: hidden; }
.domain__scene { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.domain__shade { position: absolute; inset: 0; z-index: -2; background: rgba(6,7,10,.42); box-shadow: inset 60vw 0 24vw rgba(5,6,9,.7), inset 0 -30vh 20vh rgba(5,6,9,.48); }
.domain__topbar { position: absolute; top: max(12px,env(safe-area-inset-top)); left: max(16px,env(safe-area-inset-left)); right: max(16px,env(safe-area-inset-right)); height: 52px; display: flex; align-items: center; gap: 13px; }
.domain-back { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,8,12,.72); color: var(--text); text-decoration: none; font-family: ui-sans-serif,sans-serif; font-size: 22px; line-height: 1; backdrop-filter: blur(12px); }
.domain-back:hover,.domain-back:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.domain__title { display: grid; }
.domain__title small { color: var(--gold); font: 9px/1.2 ui-monospace,monospace; letter-spacing: 3px; }
.domain__title strong { margin-top: 4px; font-size: 18px; }
.domain__welcome { position: absolute; left: max(6vw,env(safe-area-inset-left)); top: 27%; width: min(500px,46vw); }
.domain__welcome > p:first-child { margin: 0 0 10px; color: var(--gold); font: 10px/1.2 ui-monospace,monospace; letter-spacing: 3px; }
.domain__welcome h1 { margin: 0; font-size: clamp(30px,4vw,56px); font-weight: 600; }
.domain__line { width: 68px; height: 1px; margin: 16px 0 12px; background: var(--gold); }
.domain__copy { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.7; }
.domain__status { position: absolute; left: max(6vw,env(safe-area-inset-left)); bottom: max(18px,env(safe-area-inset-bottom)); width: min(560px,55vw); min-height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,8,12,.82); backdrop-filter: blur(14px); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #5eead4; box-shadow: 0 0 14px rgba(94,234,212,.65); }
.domain__status div { display: grid; }
.domain__status small { color: var(--soft); font: 9px/1.2 ui-monospace,monospace; letter-spacing: 1.5px; }
.domain__status strong { margin-top: 4px; font-size: 15px; }
.domain__status a { min-height: 44px; display: grid; place-items: center; padding: 0 17px; border-radius: 7px; background: var(--gold); color: #17130d; text-decoration: none; font-weight: 700; }
.zero { position: absolute; right: 0; top: -5%; width: clamp(336px,40vw,600px); height: auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); }
.zero-line { position: absolute; right: max(4vw,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-left: 2px solid #8cc8ff; background: rgba(8,8,12,.72); backdrop-filter: blur(12px); }
.zero-line strong { color: #8cc8ff; }
.zero-line span { color: var(--soft); font-size: 13px; }
@media (max-width:900px),(max-height:500px) {
  .domain__welcome { top: 24%; }
  .domain__copy { font-size: 12px; }
  .zero { right: -1%; top: -8%; width: clamp(284px,38vw,410px); }
  .zero-line { bottom: calc(max(14px,env(safe-area-inset-bottom)) + 66px); right: max(3vw,env(safe-area-inset-right)); }
  .domain__status { width: min(480px,58vw); min-height: 56px; }
}
@media (max-width:760px),(max-height:370px) {
  .domain__title small { display:none; }
  .domain__welcome h1 { font-size: 29px; }
  .domain__welcome { width: 47vw; }
  .domain__status { width: 57vw; }
  .domain__status small { display:none; }
  .zero-line { max-width: 38vw; }
  .zero-line span { font-size: 11px; }
}

/* Unified pure-black canvas; character artwork remains intact. */
html,
body,
.domain {
  background-color: #000;
}
