:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --rule: #b8b8b8;
  --scroll-thumb: #777777;
  --scroll-hover: #555555;
  --scroll-active: #333333;
  --control-muted: #626262;
  --caption-font: Arial, Helvetica, sans-serif;
  --dot-position: 75.905109%;
  background: var(--paper);
  color: var(--ink);
  scrollbar-color: var(--scroll-thumb) var(--paper);
  scrollbar-width: auto;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181818;
  --ink: #ffffff;
  --rule: #777777;
  --scroll-thumb: #888888;
  --scroll-hover: #aaaaaa;
  --scroll-active: #cccccc;
  --control-muted: #bdbdbd;
}
* { box-sizing: border-box; }
body { margin: 0; }
.theme-toggle {
  position: absolute;
  left: var(--dot-position);
  top: 69.504854%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle[hidden] { display: none; }
@media (hover: hover) {
  .theme-toggle:hover { box-shadow: 0 0 0 1px var(--control-muted); }
}
.theme-toggle:active { box-shadow: 0 0 0 2px var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 80px) 4vw;
}
.identity { width: min(48vw, 720px); }
.symbol {
  display: block;
  width: 18%;
  height: auto;
  margin: 0 auto 10.5%;
}
.wordmark { position: relative; }
.mark-art { position: relative; }
h1 { margin: 0; font-size: inherit; line-height: 0; }
h1 img { display: block; width: 100%; height: auto; }
.symbol img { display: block; width: 100%; height: auto; }
.dark-art, h1 .dark-art, .symbol .dark-art { display: none; }
[data-theme="dark"] .light-art { display: none; }
[data-theme="dark"] .dark-art { display: block; }
.locator {
  position: relative;
  left: var(--dot-position);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  margin: -0.4% 0 0;
  color: var(--ink);
  font: 600 clamp(10px, 0.65vw, 12px)/1.4 var(--caption-font);
  white-space: nowrap;
}
.rule {
  display: block;
  height: clamp(18px, 1.7vw, 26px);
  width: 1px;
  background: var(--rule);
  margin-bottom: clamp(6px, 0.5vw, 8px);
}
@media (max-width: 600px) {
  .identity { width: 82vw; }
  .symbol { width: 27%; margin-bottom: 19%; }
  .locator { margin-top: 8px; font-size: 12px; }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }
@media (forced-colors: active) {
  :root { scrollbar-color: auto; }
  .rule { background: CanvasText; }
}