:root{
  --brand-yellow:#f8e828;
  --text:#222;
  --sub:#666;
  --bg:#fafafa;
  --card:#fff;
  --border:#eaeaea;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

.page{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:24px;
  padding: clamp(12px,2.5vw,28px);
}

.brand{display:flex;align-items:center;gap:12px}
.logo{
  width: clamp(36px,6vw,56px);
  height: clamp(36px,6vw,56px);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
  object-fit:contain;
}
.brand-text{font-size:clamp(16px,2.4vw,22px);font-weight:600;letter-spacing:.06em}

.stage{display:grid;place-items:center;gap:18px}

.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap: clamp(8px,2vw,14px);
  width:min(560px,92vw);
  background:var(--card);
  padding: clamp(16px,3vw,28px);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.cell{
  aspect-ratio:1/1;
  display:grid;place-items:center;
  font-size:clamp(28px,8vw,48px);
  font-weight:700;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  user-select:none;
}
.char.yellow{color:var(--brand-yellow);text-shadow:0 1px 0 rgba(0,0,0,.04)}

.hint{margin:4px 0 0;color:var(--sub);font-size:clamp(12px,2.2vw,14px);text-align:center}

.domain-list{
  width:min(760px,94vw);
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:12px;
  margin-top:6px;
}
@media (min-width:720px){
  .domain-list{grid-template-columns:repeat(2,1fr)}
}
.domain-item{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.domain-item a{
  color:#111;text-decoration:none;word-break:break-all
}
.domain-item a:hover{text-decoration:underline}
.btns{display:flex;gap:10px}
button.copy{
  border:1px solid var(--border);
  background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;
}
button.copy:active{transform:scale(.98)}

.fallback{color:var(--sub);font-size:12px;text-align:center}

.foot{text-align:center;color:var(--sub)}


@media (prefers-color-scheme: dark){
  :root{--bg:#0f1115;--card:#141820;--text:#eaeef6;--sub:#a1a8b3;--border:#202636}
  .logo{background:#0b0d11}
  .domain-item a{color:#eaeef6}
  button.copy{background:#0f1115;color:#eaeef6}
}