:root {
  --W: min(72vw, 1100px, 149vh);
  --paper: #fff;
  --ink: #000;
  --word: #000;
}
/* A page opened straight in a world: by the address (#ai) without scripts, by the attribute with them. */
html:has(#votawallet:target), html[data-world="votawallet"] { --paper: #D9D3C6; --ink: #1C1A17; }
html:has(#dnd:target), html[data-world="dnd"] { --paper: #BBBAB5; --ink: #161616; }
html:has(#ai:target), html[data-world="ai"] { --paper: #0A0E14; --ink: #FFB547; --word: #fff; }

/* The main page is one screen and never scrolls. A page that carries the grid as a block scrolls as usual. */
html:not(:has(.stage)), html:not(:has(.stage)) body { height: 100%; margin: 0; overflow: clip; }
body {
  background: var(--paper);
  font-family: 'Manrope', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#grid {
  position: fixed;
  left: 50%;
  top: 50%;
  width: calc(1.12 * var(--W));
  height: calc(0.522 * var(--W));
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
}
#grid .axis { fill: var(--ink); }
#bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

#words { position: fixed; left: 50%; top: 50%; width: 0; height: 0; }
.word {
  position: absolute;
  transform: translateX(-50%);
  font-size: max(16px, calc(0.033 * var(--W)));
  line-height: 1;
  white-space: nowrap;
  color: var(--word);
  text-decoration: none;
}
.word[data-row="0"] { bottom: calc(0.045 * var(--W)); }
.word[data-row="1"] { top: calc(0.045 * var(--W)); }
.word[data-col="0"] { left: calc(-0.375 * var(--W)); }
.word[data-col="1"] { left: calc(-0.125 * var(--W)); }
.word[data-col="2"] { left: calc(0.125 * var(--W)); }
.word[data-col="3"] { left: calc(0.375 * var(--W)); }

/* A browser that knows the height of the window as it is now (a phone with its toolbar out) uses that. */
@supports (height: 1dvh) { :root { --W: min(72vw, 1100px, 149dvh); } }

/* A phone held upright: the grid is turned by a quarter, on the main page and in the block at the bottom of a
   page alike. The main line stands, three bars cross it, the words sit in two columns of four, the first row of the
   wide grid on the left. A drawing stands above its word. */
@media (max-width: 699px) and (orientation: portrait) {
  :root { --W: min(72vh, 1100px, 149vw); }
  @supports (height: 1dvh) { :root { --W: min(72dvh, 1100px, 149vw); } }
  #grid { transform: translate(-50%, -50%) matrix(0, 1, 1, 0, 0, 0); }
  .word { transform: translate(-50%, -50%); font-size: max(15px, calc(0.033 * var(--W))); }
  .word[data-row="0"] { left: calc(-0.13 * var(--W)); bottom: auto; }
  .word[data-row="1"] { left: calc(0.13 * var(--W)); }
  .word[data-col="0"] { top: calc(-0.353 * var(--W)); }
  .word[data-col="1"] { top: calc(-0.103 * var(--W)); }
  .word[data-col="2"] { top: calc(0.147 * var(--W)); }
  .word[data-col="3"] { top: calc(0.397 * var(--W)); }
}

/* The name stands in the top left corner, the languages in the bottom right. */
#cap-name, #cap-lang {
  position: fixed;
  font-size: max(12px, calc(0.012 * var(--W)));
  line-height: 1;
}
#cap-name { left: max(16px, 3vw); top: max(12px, 2.5vh); color: var(--ink); }
#cap-lang { right: max(16px, 3vw); bottom: max(12px, 2.5vh); color: var(--ink2, var(--ink)); }
#cap-lang a { color: inherit; text-decoration: none; }

/* With scripts. */
.js { touch-action: none; }
.js.in-cell { cursor: pointer; }
.js .word:focus { outline: none; }
.word.cut { -webkit-background-clip: text; background-clip: text; }
.no-captions #captions { display: none; }
#focusline {
  position: fixed;
  height: calc(0.009 * var(--W));
  transform-origin: 50% 50%;
  pointer-events: none;
}
.no-drop #grid .drop { display: none; }

/* Show pages only. */
#show-ui { position: fixed; left: max(16px, 3vw); top: max(12px, 2.5vh); font: 500 12px/1.6 system-ui, 'Segoe UI', Arial, sans-serif; color: var(--ink); }
#show-ui a { color: inherit; margin-right: 1em; }
#show-ui a[aria-current] { text-decoration: none; font-weight: 700; }
.no-ui #show-ui { display: none; }

/* The grid as a block of a page: as tall as the window, in the world of the page. */
.stage { position: relative; height: 100vh; overflow: clip; background: var(--paper); }
@supports (height: 1dvh) { .stage { height: 100dvh; } }
.stage #bg, .stage #grid, .stage #words, .stage #focusline { position: absolute; }
.stage.js { touch-action: pan-y; }