:root {
  color-scheme: dark;
  --bg: #09090c;
  --surface: #141419;
  --surface-light: #1d1d25;
  --pink: #ff008c;
  --pink-light: #ff62b8;
  --white: #f7f7fa;
  --muted: #aaaab7;
  --line: rgba(255,255,255,.12);
  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--pink-light);
  outline-offset: 5px;
}

button:disabled { cursor: default; }

.wrap {
  width: min(1440px, 92%);
  margin-inline: auto;
}