genshin-interface 4.2.0 → 4.3.1

package/dist/style.css

@@ -0,0 +1,4067 @@
+
+/* The parent places the button and may pad it, so these yield to any rule of its own */
+:where(.game-button[data-v-cab29bfa]) {
+  position: relative;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: inherit;
+  font: inherit;
+}
+
+/* Each state is reached over its own crossfade: the duration is the state's being entered, so a hover fades in over
+   The hover's and out over the rest's, and a press shows at once */
+.game-button[data-v-cab29bfa] {
+  --state-duration: var(--v8de8a9a0);
+  transition: color var(--state-duration);
+}
+.game-button[data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--v4f7d0248);
+}
+.game-button[data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  --state-duration: 0s;
+}
+
+/* The side bar's icon, gold at rest. Hovered, a translucent navy disc 65 units across lights behind it, centred on its
+   Ink, and the icon turns cream and grows by 1.12, its ink's area fitted at rest and hovered: the current English PC
+   Client's settings gear at 1080 high (`yt-5EmJX_RyuY8-menu-settings` at 9.8 and 10.5 seconds). Pressed, the disc
+   Turns cream and the icon ink, falling back to its resting size, the press's smaller click: the same gear held at 10.65
+   Seconds, its ink's area 1.01 of its rest's. The disc's colour is fitted over two side bars' greens, the same
+   Recording's and a 2024 one's (`yt-kIDee7nyD0w-menu-quit-prompt`) */
+.game-button[data-kind="Disc"][data-v-cab29bfa] {
+  isolation: isolate;
+}
+
+/* At zero specificity, so a parent sets the icon's colour at rest where it places the button, as the rest of the
+   Button yields */
+:where(.game-button[data-kind="Disc"][data-v-cab29bfa]) {
+  color: var(--v5ff883e5);
+}
+
+/* Behind everything the button holds, which its own layer keeps above it however it is placed */
+.game-button[data-kind="Disc"][data-v-cab29bfa]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--unit) * 65);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  translate: -50% -50%;
+  transition: background-color var(--state-duration);
+}
+.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
+  transition: scale var(--state-duration);
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  outline: none;
+  color: var(--c23e4506);
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before {
+  background-color: rgb(30 49 63 / 0.5);
+}
+.game-button[data-kind="Disc"]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) > [data-v-cab29bfa-s] {
+  scale: 1.12;
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  color: var(--v7defe8be);
+}
+.game-button[data-kind="Disc"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
+  background-color: var(--c23e4506);
+}
+.game-button[data-kind="Disc"]:enabled:is(:active, [data-interaction-state="Pressed"] *) > [data-v-cab29bfa-s] {
+  scale: 1;
+}
+
+/* An unbuilt screen's button, which the game never has, is drawn faded and answers nothing */
+.game-button[data-kind="Disc"][data-v-cab29bfa]:disabled {
+  opacity: 0.4;
+}
+
+/* The lit icon's name, in a dark slate box 31 units high, centred on the icon and starting 49.5 units right of its
+   Centre, 5 past the side bar's edge, its words 17 units to their caps: the same recording's "Settings", read once it
+   Has settled at 10.5 seconds, where the box reads the same over the panel's cream and over a tile */
+.tip[data-v-cab29bfa] {
+  position: absolute;
+  top: 50%;
+  left: calc(50% + var(--unit) * 49.5);
+  padding: 0 calc(var(--unit) * 9);
+  border-radius: calc(var(--unit) * 3);
+  background: #4d5063;
+  color: #e6eaf0;
+  font-size: calc(var(--unit) * 24);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 31);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+  translate: 0 -50%;
+}
+.game-button:enabled:is(:hover, :focus-visible, :active, [data-interaction-state] *) > .tip[data-v-cab29bfa] {
+  opacity: 1;
+}
+
+/* A row, the game's rectangle, lit by a tint laid over its own box and behind its words, as a disc is: hovered or focused,
+   pressed at once, or held selected by its parent's aria-selected at the hover's strength. Provisional, see the colours */
+.game-button[data-kind="Row"][data-v-cab29bfa] {
+  isolation: isolate;
+}
+.game-button[data-kind="Row"][data-v-cab29bfa]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--v78a9c41c);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+}
+.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *)::before,
+.game-button[data-kind="Row"][aria-selected="true"][data-v-cab29bfa]::before {
+  opacity: 1;
+}
+.game-button[data-kind="Row"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
+  background-color: var(--v77c60e0e);
+  opacity: 1;
+}
+
+/* The cream pill, read off the game's own (block 07356235: the quit prompt's choices are its option pill, and a dialog's
+   Confirm its brighter twin), its look measured on a dialog's Confirm at 1080 high (`yt-5EmJX_RyuY8-menu-settings` from
+   140.5 seconds). At rest its words are the game's ink, inside a 3 unit pale rim and a 3 unit darker band within it,
+   The pill's own bevel read off the wiki's crop of the quit prompt, and a faint dark shadow 7 units round it. Hovered,
+   A white ring lights over its edge, 1 unit outside it and 2 within, its shadow turning a faint white glow; it holds
+   Its size, the ring alone reaching past it */
+.game-button[data-kind="Pill"][data-v-cab29bfa] {
+  --state-duration: var(--v7a0541ee);
+  border-radius: calc(infinity * 1px);
+  background-color: var(--c23e4506);
+  box-shadow:
+    0 0 0 0 rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
+    inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
+    0 0 calc(var(--unit) * 7) rgb(17 17 17 / 0.1);
+  color: var(--v7defe8be);
+  transition-duration: var(--state-duration);
+  transition-property: background-color, box-shadow, color;
+}
+.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  outline: none;
+  box-shadow:
+    0 0 0 calc(var(--unit) * 1) #fff,
+    inset 0 0 0 calc(var(--unit) * 2) #fff,
+    inset 0 0 0 calc(var(--unit) * 3) #f1ede5,
+    inset 0 0 0 calc(var(--unit) * 6) #e6e1d5,
+    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.125);
+}
+
+/* Pressed, the pill's cream is tinted to slate at half alpha, its bevel lost in it, and from 2 units inside its edge a
+   Gold light adds over it, as the game adds it, fading from full to half as the words turn from black to cream over the
+   Press's clip. The game's light adds onto the world, which a screen's own layer cannot reach, so the gold is drawn
+   Over the world at half alpha in the colour the sum settles to, the slate and its light together, which matches the
+   Game's over any world but for red, 12 short where the sum passes white; the clip's first frame is the sum alone,
+   Opaque. The words show over the light only when the pill's content is positioned, as a laid out label is not */
+.game-button[data-kind="Pill"][data-v-cab29bfa]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: calc(var(--unit) * 2) solid rgb(73 83 103 / 0.5);
+  border-radius: inherit;
+  background: rgb(255 243 183 / 0.5) padding-box;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+}
+.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  background-color: transparent;
+  box-shadow:
+    0 0 0 0 rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 2) rgb(255 255 255 / 0),
+    inset 0 0 0 calc(var(--unit) * 3) rgb(241 237 229 / 0),
+    inset 0 0 0 calc(var(--unit) * 6) rgb(230 225 213 / 0),
+    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.1);
+  color: var(--c23e4506);
+  animation: pill-press-words-cab29bfa var(--v307a3362) var(--v0673242b);
+}
+.game-button[data-kind="Pill"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *)::before {
+  opacity: 1;
+  animation: pill-press-light-cab29bfa var(--v307a3362) var(--v0673242b);
+}
+@keyframes pill-press-words-cab29bfa {
+from {
+    color: #000;
+}
+}
+@keyframes pill-press-light-cab29bfa {
+from {
+    background-color: rgb(241 211 142);
+}
+}
+
+/* The dialogue reply's pill: a fifth black over the scene at rest, its words white, and lit as a cream-white pill with slate
+   Words when hovered, focused or selected by its screen. Its press holds that lit look at once. Provisional past the rest, see
+   The constants */
+.game-button[data-kind="Reply"][data-v-cab29bfa] {
+  --state-duration: var(--v8de8a9a0);
+  border-radius: calc(var(--unit) * 23);
+  background-color: var(--v40afb3ee);
+  color: #fff;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  letter-spacing: calc(var(--unit) * 0.5);
+  transition-duration: var(--state-duration);
+  transition-property: background-color, color;
+}
+.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:hover, :focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--v4f7d0248);
+  outline: none;
+  background-color: var(--v5683177c);
+  color: var(--a79a636e);
+}
+.game-button[data-kind="Reply"][data-v-cab29bfa]:enabled:is(:active, [data-interaction-state="Pressed"] *) {
+  --state-duration: 0s;
+  background-color: var(--v5683177c);
+  color: var(--a79a636e);
+}
+
+/* The game draws no state for a plain button, so a keyboard's focus is ringed in the white its pills light in */
+.game-button[data-kind="Plain"][data-v-cab29bfa]:focus-visible {
+  outline: calc(var(--unit) * 3) solid #fff;
+  outline-offset: calc(var(--unit) * -2);
+}
+@media (prefers-reduced-motion: reduce) {
+.game-button[data-kind="Disc"] > [data-v-cab29bfa-s] {
+    transition: none;
+}
+}
+
+.picker-shell[data-v-6f193621] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 120);
+  width: calc(var(--unit) * 640);
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--unit) * 24);
+  border-radius: calc(var(--unit) * 12);
+  background: rgb(20 24 36 / 0.92);
+  color: #ece3d8;
+}
+.title[data-v-6f193621] {
+  margin: 0;
+  font-size: calc(var(--unit) * 28);
+  font-weight: 600;
+}
+.picker-shell[data-v-6f193621] .caption {
+  opacity: 0.8;
+}
+
+.enhance-picker[data-v-7c672712] {
+  max-height: calc(var(--unit) * 900);
+  gap: calc(var(--unit) * 12);
+}
+.summary[data-v-7c672712],
+.notice[data-v-7c672712] {
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+}
+.fodders[data-v-7c672712],
+.materials[data-v-7c672712] {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 6);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.option[data-v-7c672712] {
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 14);
+}
+.option[aria-pressed="true"][data-v-7c672712] {
+  background: rgb(255 255 255 / 0.28);
+}
+.material[data-v-7c672712] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 8);
+}
+.material .name[data-v-7c672712] {
+  flex: 1;
+}
+.actions[data-v-7c672712] {
+  display: flex;
+  justify-content: flex-end;
+  gap: calc(var(--unit) * 8);
+}
+/* The option row the artifact pickers share, each picker sets its own padding */
+.option[data-v-7c672712] {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.1);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.artifact-picker[data-v-bf242b3e] {
+  max-height: calc(var(--unit) * 800);
+  gap: calc(var(--unit) * 16);
+}
+.options[data-v-bf242b3e] {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 8);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.option[data-v-bf242b3e] {
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 16);
+}
+.option[data-v-bf242b3e]:hover,
+.option[data-v-bf242b3e]:focus-visible {
+  background: rgb(255 255 255 / 0.2);
+}
+.close[data-v-bf242b3e] {
+  align-self: flex-end;
+}
+/* The option row the artifact pickers share, each picker sets its own padding */
+.option[data-v-bf242b3e] {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.1);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.members button[data-v-4c1e529d] {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  min-width: 16rem;
+  padding: 0.5rem 1rem;
+  background: rgb(255 255 255 / 8%);
+}
+/* The screen's colours and placement are provisional until the recording shows them */
+.blessing-screen[data-v-4c1e529d],
+.worship-screen[data-v-4c1e529d] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(20 18 16 / 55%);
+  color: rgb(245 240 230);
+}
+.title[data-v-4c1e529d] {
+  position: absolute;
+  top: 6%;
+  left: 6%;
+  font-size: 2rem;
+}
+.close[data-v-4c1e529d] {
+  position: absolute;
+  top: 6%;
+  right: 6%;
+  font-size: 2rem;
+}
+.blessing[data-v-4c1e529d],
+.worship[data-v-4c1e529d] {
+  position: absolute;
+  top: 6%;
+  right: 16%;
+  font-size: 1.25rem;
+}
+.held[data-v-4c1e529d],
+.pool[data-v-4c1e529d] {
+  position: absolute;
+  top: 16%;
+  left: 6%;
+  font-size: 1.25rem;
+}
+.levels[data-v-4c1e529d],
+.members[data-v-4c1e529d] {
+  position: absolute;
+  top: 26%;
+  left: 6%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Measured off the English PC client's character screen at 21:9 (captures/session-2.mp4, a frame per tab from 155 to
+   159 seconds), in units: a pixel of that frame at 1440 high is 0.75 units. The game's exports hold the screen's root
+   alone, its contents a prefab loaded at run time, so every place here is read off the frames. The portraits sit 96
+   units apart from their centre at 643, the panel's left edge at 2057 and its right margin at 195. The frame draws no
+   scene: the world's screen lays one behind it */
+.character-menu[data-v-86092611] {
+  position: absolute;
+  inset: 0;
+  color: #fff;
+}
+
+/* The band across the top, the name and the portraits on it, a veil 96 units deep that keeps 78 hundredths of the scene
+   under it all the way down, as the frame's scene measures above and below its edge */
+.head[data-v-86092611] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 96);
+  background: rgb(0 0 0 / 0.22);
+}
+.characters[data-v-86092611],
+.tabs[data-v-86092611] {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.characters[data-v-86092611] {
+  top: calc(var(--unit) * 12.5);
+  left: calc(var(--unit) * 608);
+  display: flex;
+  gap: calc(var(--unit) * 27);
+  overflow-x: auto;
+}
+
+/* Provisional: the portraits, which the frame draws as the game's own art once an asset is settled, until then a circle
+   with the name. The chosen one's cyan underline sits 79 units below the top of its portrait */
+.character[data-v-86092611] {
+  position: relative;
+  display: grid;
+  width: calc(var(--unit) * 69);
+  height: calc(var(--unit) * 69);
+  flex: none;
+  padding: 0;
+  border: calc(var(--unit) * 3) solid #9bbf4b;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.15);
+  color: inherit;
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 11);
+  place-items: center;
+}
+.character[aria-pressed="true"][data-v-86092611] {
+  border-color: #7fd6e0;
+}
+.character[aria-pressed="true"][data-v-86092611]::after {
+  position: absolute;
+  top: calc(var(--unit) * 79);
+  left: calc(var(--unit) * -13.5);
+  width: calc(var(--unit) * 96);
+  height: calc(var(--unit) * 4);
+  background: #6fc9dc;
+  content: "";
+}
+.breadcrumb[data-v-86092611] {
+  position: absolute;
+  top: calc(var(--unit) * 29);
+  left: calc(var(--unit) * 216);
+  margin: 0;
+  color: #e6d6a8;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 36);
+}
+
+/* The element's mark just left of the name, its size and place provisional until the parity pass measures them off the
+   frame, its colour the name's */
+.element[data-v-86092611] {
+  position: absolute;
+  top: calc(var(--unit) * 29);
+  left: calc(var(--unit) * 168);
+  width: calc(var(--unit) * 36);
+  height: calc(var(--unit) * 36);
+  fill: #e6d6a8;
+}
+
+/* The tabs down the left, measured off each tab's own frame of the recording (155 to 159 seconds): the rows on a
+   69.6-unit pitch, the first's words centred 155.8 units down. Each row spans the column from the frame's left, so its
+   word and its diamond are placed from the frame's own edge */
+.tabs[data-v-86092611] {
+  top: calc(var(--unit) * 121);
+  left: 0;
+  width: calc(var(--unit) * 560);
+}
+.tabs li[data-v-86092611] {
+  height: calc(var(--unit) * 69.6);
+}
+
+/* A closed tab's word starts 216 units in, its ascenders 25.5 units tall in a cream a little short of white, letter-spaced
+   out to the game's width, with a faint shadow round it */
+.tab[data-v-86092611] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0 0 0 calc(var(--unit) * 216);
+  border: none;
+  background: transparent;
+  color: rgb(206 197 176);
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 34.5);
+  font-weight: 600;
+  letter-spacing: calc(var(--unit) * 1.95);
+  line-height: calc(var(--unit) * 69.6);
+  text-align: start;
+  text-shadow: 0 0 calc(var(--unit) * 3) rgb(0 0 0 / 0.2);
+}
+
+/* A closed tab's diamond, 15 units corner to corner and centred 196.9 units in, the word's cream at half strength */
+.tab[data-v-86092611]::before {
+  position: absolute;
+  top: calc(50% - var(--unit) * 1.3);
+  left: calc(var(--unit) * 191.6);
+  width: calc(var(--unit) * 10.6);
+  height: calc(var(--unit) * 10.6);
+  background: rgb(236 229 216 / 0.5);
+  content: "";
+  transform: translateY(-50%) rotate(45deg);
+}
+
+/* The open tab's word is a fifth larger and near white, 9.75 units further in, blooming into the light behind it */
+.tab[aria-pressed="true"][data-v-86092611] {
+  z-index: 0;
+  padding-left: calc(var(--unit) * 225.75);
+  color: rgb(244 243 235);
+  font-size: calc(var(--unit) * 41.4);
+  letter-spacing: calc(var(--unit) * 2.34);
+  text-shadow:
+    0 0 calc(var(--unit) * 4) rgb(255 248 230 / 0.8),
+    0 0 calc(var(--unit) * 12) rgb(255 240 200 / 0.5);
+}
+
+/* Its diamond is a faint outline 28.5 units corner to corner on the same centre, the part of it right of a line 4.5 units
+   past its centre filled near white, a head pointing right, with a light rising towards it from the left corner */
+.tab[aria-pressed="true"][data-v-86092611]::before {
+  top: 50%;
+  left: calc(var(--unit) * 186.4);
+  box-sizing: border-box;
+  width: calc(var(--unit) * 20.2);
+  height: calc(var(--unit) * 20.2);
+  border: calc(var(--unit) * 1.6) solid rgb(236 229 216 / 0.45);
+  background: linear-gradient(45deg, transparent 30%, rgb(255 250 240 / 0.45) 68.75%, rgb(236 231 219) 68.75%)
+    padding-box;
+}
+
+/* Behind its word, a warm light from the word's start out to 517.5 units, a thin bright streak along the row's middle in
+   a fainter haze, as the frame less its clean plate measures it */
+.tab[aria-pressed="true"][data-v-86092611]::after {
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: calc(var(--unit) * 217.5);
+  width: calc(var(--unit) * 300);
+  height: calc(var(--unit) * 90);
+  background:
+    radial-gradient(
+        closest-side,
+        rgb(255 240 200 / 0.4),
+        rgb(255 240 200 / 0.3) 35%,
+        rgb(255 240 200 / 0.17) 55%,
+        rgb(255 240 200 / 0.09) 75%,
+        transparent 95%
+      )
+      center / 100% calc(var(--unit) * 18) no-repeat,
+    radial-gradient(closest-side, rgb(255 240 200 / 0.14), rgb(255 240 200 / 0.08) 50%, transparent);
+  content: "";
+  transform: translateY(-50%);
+}
+
+/* The keys stepping through the tabs: white caps 30.75 by 25 units with dark letters, an arrow over the W and under the
+   S, centred 148.9 units in from the frame's left */
+.tab-keys[data-v-86092611] {
+  position: absolute;
+  top: calc(var(--unit) * 126.75);
+  left: calc(var(--unit) * 133.5);
+  display: flex;
+  width: calc(var(--unit) * 30.75);
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--unit) * 3.5);
+}
+.tab-keys[data-v-86092611]::before,
+.tab-keys[data-v-86092611]::after {
+  width: calc(var(--unit) * 11.25);
+  height: calc(var(--unit) * 6);
+  background: #fdfdfd;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+  content: "";
+}
+.tab-keys[data-v-86092611]::after {
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.key[data-v-86092611] {
+  display: grid;
+  width: 100%;
+  height: calc(var(--unit) * 25);
+  border-radius: calc(var(--unit) * 3);
+  background: #fdfdfd;
+  color: #2b2b2b;
+  font: inherit;
+  font-size: calc(var(--unit) * 20.5);
+  font-weight: 600;
+  line-height: 1;
+  place-items: center;
+}
+
+/* The arrows stepping to the characters either side, centred down the frame's left and right edges, their heads 129.75
+   units from the edge and their backs 153.75 */
+.step[data-v-86092611] {
+  position: absolute;
+  top: calc(50% - var(--unit) * 21);
+  width: calc(var(--unit) * 32.25);
+  height: calc(var(--unit) * 41.25);
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: inherit;
+}
+.step svg[data-v-86092611] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.previous[data-v-86092611] {
+  left: calc(var(--unit) * 129.75);
+}
+.next[data-v-86092611] {
+  right: calc(var(--unit) * 129.75);
+  transform: scaleX(-1);
+}
+.arrow[data-v-86092611] {
+  fill: rgb(236 229 216);
+}
+.mark[data-v-86092611] {
+  fill: rgb(236 229 216 / 0.5);
+}
+
+/* The panel's left edge sits at 2057 units of the 2580-unit frame and its right margin at 195 units */
+.panel[data-v-86092611] {
+  position: absolute;
+  top: calc(var(--unit) * 124);
+  right: calc(var(--unit) * 195);
+  bottom: calc(var(--unit) * 40);
+  width: calc(var(--unit) * 330);
+  overflow-y: auto;
+}
+
+/* The Profile tab's stories and their text take the width the characters' row across the top leaves, from where it starts */
+.character-menu[data-tab="Profile"] .panel[data-v-86092611] {
+  left: calc(var(--unit) * 608);
+  width: auto;
+}
+
+.buttons[data-v-359aa329] {
+  position: absolute;
+  top: calc(var(--unit) * 859);
+  right: 0;
+  left: 0;
+  display: flex;
+  gap: calc(var(--unit) * 23);
+}
+.button[data-v-359aa329] {
+  flex: 1;
+  height: calc(var(--unit) * 52);
+  border-radius: calc(var(--unit) * 26);
+  background: rgb(236 229 216 / 0.85);
+}
+
+.toast-notice[data-v-a09dfb40] {
+  position: relative;
+  display: flex;
+  min-width: calc(var(--unit) * 537);
+  height: calc(var(--unit) * 107);
+  box-sizing: border-box;
+  align-items: center;
+  padding: 0 calc(var(--unit) * 82) 0 calc(var(--unit) * 148);
+  border-radius: calc(var(--unit) * 12);
+  background: #fff;
+}
+.mark[data-v-a09dfb40] {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * 61);
+  display: grid;
+  width: calc(var(--unit) * 59);
+  height: calc(var(--unit) * 59);
+  overflow: hidden;
+  border-radius: 50%;
+  background: #000;
+  place-items: center;
+  translate: 0 -50%;
+}
+.text[data-v-a09dfb40] {
+  margin: 0;
+  color: #1d1d1d;
+  font-size: calc(var(--unit) * 36);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.notice[data-v-525c0131] {
+  margin-bottom: calc(var(--unit) * 16);
+}
+
+/* Measured off the English PC client's Artifacts tab at 21:9, its settled frame at 157.5 seconds of session-2.mp4 (the
+   registered reference for it), in units from the panel's top: the details pill at 163, the set bonus block's bottom at
+   829 and the buttons at 859. The slots are drawn in the panel's top, which the game draws in the scene. The stats rows
+   sit under the details pill from 227, a row of 36 units each, and the set bonus block starts at 420 below them: both are
+   provisional, since the registered frame shows no picked piece's stats, so their place is not measured. Colours are
+   provisional */
+.artifacts[data-v-525c0131] {
+  position: absolute;
+  inset: 0;
+  color: #fff;
+}
+.slots[data-v-525c0131] {
+  position: absolute;
+  top: calc(var(--unit) * 15);
+  right: 0;
+  left: 0;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: calc(var(--unit) * 10);
+  list-style: none;
+}
+.slots > li[data-v-525c0131] {
+  flex: 1;
+}
+.slot[data-v-525c0131] {
+  display: block;
+  width: 100%;
+  height: calc(var(--unit) * 40);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.2);
+  cursor: pointer;
+}
+.slot.worn[data-v-525c0131] {
+  background: rgb(255 240 180 / 0.55);
+  box-shadow: 0 0 calc(var(--unit) * 8) rgb(255 240 180 / 0.6);
+}
+.slot[aria-pressed="true"][data-v-525c0131] {
+  outline: calc(var(--unit) * 2) solid rgb(255 255 255 / 0.8);
+  outline-offset: calc(var(--unit) * 2);
+}
+.details[data-v-525c0131] {
+  position: absolute;
+  top: calc(var(--unit) * 163);
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--unit) * 42);
+  border-radius: calc(var(--unit) * 21);
+  background: rgb(0 0 0 / 0.2);
+}
+.stats[data-v-525c0131] {
+  position: absolute;
+  top: calc(var(--unit) * 227);
+  right: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.stat[data-v-525c0131] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(var(--unit) * 36);
+}
+.set-bonus[data-v-525c0131] {
+  position: absolute;
+  top: calc(var(--unit) * 420);
+  right: 0;
+  bottom: calc(var(--unit) * 80);
+  left: 0;
+  background: rgb(0 0 0 / 0.1);
+}
+.set-bonus-heading[data-v-525c0131],
+.set-bonus-lines[data-v-525c0131] {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  list-style: none;
+}
+.button[data-v-525c0131] {
+  flex: 1;
+  height: calc(var(--unit) * 52);
+}
+
+/* Measured off the English PC client's Constellation tab at 21:9, its settled frame at 158.3 seconds of session-2.mp4
+   (the star map's right-hand list), in units from the panel's top left: each ring is 72 units across, its gold border 4
+   units wide with a 2-unit white band inside it, and the six are placed by CONSTELLATION_NODE_PLACES. Colours are provisional */
+.constellations[data-v-4311eae1] {
+  position: absolute;
+  inset: 0;
+}
+.nodes[data-v-4311eae1] {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.node[data-v-4311eae1] {
+  position: absolute;
+  box-sizing: border-box;
+  width: calc(var(--unit) * 72);
+  height: calc(var(--unit) * 72);
+  border: calc(var(--unit) * 3) solid rgb(255 255 255 / 0.3);
+  border-radius: 50%;
+}
+.node.lit[data-v-4311eae1] {
+  background: rgb(72 53 17);
+  border: calc(var(--unit) * 4) solid #ffea00;
+  box-shadow:
+    inset 0 0 0 calc(var(--unit) * 2) #fff8dc,
+    0 0 calc(var(--unit) * 6) rgb(255 180 40 / 0.6);
+}
+
+/* Placed under the lowest ring, which ends near 744 units, its place and colours provisional until the Constellation
+   tab's frame is measured against the button */
+.activate[data-v-4311eae1] {
+  position: absolute;
+  top: calc(var(--unit) * 800);
+  left: calc(var(--unit) * 0);
+  height: calc(var(--unit) * 56);
+  padding: 0 calc(var(--unit) * 32);
+  border: none;
+  border-radius: calc(var(--unit) * 28);
+  background: #ece5d8;
+  color: #3b4255;
+  cursor: pointer;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}
+.activate[data-v-4311eae1]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+/* Provisional: the list and the text share the panel as two columns, the list a third of its width. The frame's sizes and
+   colours are not measured yet, so they wait on the Profile tab's comparison */
+.profile[data-v-d064a750] {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+}
+.entries-column[data-v-d064a750] {
+  display: flex;
+  flex: 0 0 calc(var(--unit) * 260);
+  flex-direction: column;
+}
+.entries[data-v-d064a750] {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.entry[data-v-d064a750] {
+  display: block;
+  width: 100%;
+  margin-bottom: calc(var(--unit) * 8);
+  color: rgb(236 229 216 / 0.7);
+  cursor: inherit;
+  font: inherit;
+  text-align: start;
+}
+.entry[data-v-d064a750],
+.namecard[data-v-d064a750] {
+  border: calc(var(--unit) * 1) solid rgb(236 229 216 / 0.4);
+  border-radius: calc(var(--unit) * 4);
+  background: rgb(20 40 70 / 0.5);
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 16);
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+.entry[aria-pressed="true"][data-v-d064a750] {
+  border-color: #7fd6e0;
+  color: #fff;
+}
+.entry[data-locked="true"][data-v-d064a750] {
+  opacity: 0.6;
+}
+.namecard[data-v-d064a750] {
+  margin: calc(var(--unit) * 16) 0 0;
+}
+.story[data-v-d064a750] {
+  flex: 1;
+  margin-left: calc(var(--unit) * 24);
+  overflow-y: auto;
+}
+.title[data-v-d064a750] {
+  margin: 0 0 calc(var(--unit) * 16);
+  font-size: calc(var(--unit) * 30);
+  font-weight: 700;
+}
+.text[data-v-d064a750] {
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+  line-height: 1.6;
+  white-space: pre-line;
+}
+
+/* Measured off the English PC client's Talents tab at 21:9 (references/character-talents.png, 159 seconds), in units
+   from the panel's top: the three combat talents' rows sit 90 units apart from 29, each with its icon at the panel's
+   right edge. A pixel of that frame at 1440 high is 0.75 units. Colours are provisional */
+.talents[data-v-65541162] {
+  position: absolute;
+  inset: 0;
+  color: #fff;
+}
+.talent-list[data-v-65541162] {
+  position: absolute;
+  top: calc(var(--unit) * 29);
+  right: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.talent[data-v-65541162] {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-height: calc(var(--unit) * 60);
+  margin-bottom: calc(var(--unit) * 30);
+  gap: calc(var(--unit) * 16);
+}
+.level[data-v-65541162] {
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
+}
+
+/* The next level's phase, cost and the reason it cannot rise, beside the Upgrade. Their place and size are provisional,
+   queued for the user's eyes against the recording */
+.detail[data-v-65541162] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: calc(var(--unit) * 18);
+  text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
+}
+.costs[data-v-65541162] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.reason[data-v-65541162] {
+  color: #ffb4a8;
+}
+.upgrade[data-v-65541162] {
+  font-size: calc(var(--unit) * 18);
+  font-weight: 600;
+}
+.icon[data-v-65541162] {
+  width: calc(var(--unit) * 40);
+  height: calc(var(--unit) * 40);
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.25);
+}
+
+/* Measured off the English PC client's Weapons tab at 21:9 (references/character-weapons.png, 156 seconds), in units
+   from the panel's top: a pixel of that frame at 1440 high is 0.75 units. The name's line sits 15 units down, the two
+   stat rows at 101 and 135, the stars at 206, the level at 244, the refinement at 289 and the buttons at 859. Their
+   colours are provisional, sampled off the frame's darker panel glass */
+.weapons[data-v-77cff4ef] {
+  position: absolute;
+  inset: 0;
+  color: #fff;
+}
+.name[data-v-77cff4ef] {
+  position: absolute;
+  top: calc(var(--unit) * 15);
+  right: 0;
+  left: 0;
+  margin: 0;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 36);
+  text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
+}
+.stars[data-v-77cff4ef] {
+  position: absolute;
+  top: calc(var(--unit) * 206);
+  left: 0;
+  display: flex;
+  margin: 0;
+  gap: calc(var(--unit) * 4);
+}
+.star[data-v-77cff4ef] {
+  width: calc(var(--unit) * 20);
+  height: calc(var(--unit) * 20);
+}
+.stats[data-v-77cff4ef] {
+  position: absolute;
+  top: calc(var(--unit) * 101);
+  right: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Each row is a translucent band its value sits at the right of, on the game's 34-unit pitch */
+.stat[data-v-77cff4ef] {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: calc(var(--unit) * 27);
+  margin-bottom: calc(var(--unit) * 7);
+  padding: 0 calc(var(--unit) * 16);
+  border-radius: calc(var(--unit) * 4);
+  background: rgb(0 0 0 / 0.2);
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}
+.level[data-v-77cff4ef] {
+  position: absolute;
+  top: calc(var(--unit) * 244);
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  gap: calc(var(--unit) * 6);
+  font-size: calc(var(--unit) * 24);
+  font-weight: 600;
+}
+.level-text[data-v-77cff4ef] {
+  padding: 0 calc(var(--unit) * 8);
+  border-radius: calc(var(--unit) * 4);
+  background: rgb(0 0 0 / 0.45);
+}
+.refinement[data-v-77cff4ef] {
+  position: absolute;
+  top: calc(var(--unit) * 289);
+  right: 0;
+  left: 0;
+  margin: 0;
+  color: #f0d27a;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 19);
+}
+/* The six ascension phases, each a small star the phases reached light */
+.spark[data-v-77cff4ef] {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  background: rgb(255 255 255 / 0.3);
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
+}
+.spark.lit[data-v-77cff4ef] {
+  background: #fff;
+}
+.star[data-v-77cff4ef] {
+  background: #f5c542;
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
+}
+
+/* The screen's colours are provisional until the glyph pass reads them from the recording */
+.cooking-screen[data-v-4aee3a78] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(20 18 16 / 55%);
+}
+.stage[data-v-4aee3a78] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.pot[data-v-4aee3a78] {
+  fill: #3a3a44;
+}
+.pot-rim[data-v-4aee3a78] {
+  fill: #4a4a56;
+}
+.track[data-v-4aee3a78] {
+  fill: none;
+  stroke: #5b5145;
+  stroke-width: 6;
+}
+.regular[data-v-4aee3a78] {
+  fill: none;
+  stroke: #e9dcb0;
+  stroke-width: 22;
+}
+.delicious[data-v-4aee3a78] {
+  fill: none;
+  stroke: #f0a040;
+  stroke-width: 22;
+}
+.pointer[data-v-4aee3a78] {
+  fill: #fff8e8;
+  stroke: #3a2f22;
+  stroke-width: 4;
+}
+.title[data-v-4aee3a78] {
+  position: absolute;
+  top: calc(var(--unit) * 32);
+  left: calc(var(--unit) * 96);
+  margin: 0;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 28);
+  font-weight: 600;
+}
+.close[data-v-4aee3a78] {
+  position: absolute;
+  top: calc(var(--unit) * 32);
+  right: calc(var(--unit) * 96);
+  width: calc(var(--unit) * 48);
+  height: calc(var(--unit) * 48);
+  border: 0;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 20%);
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 28);
+}
+.dishes[data-v-4aee3a78] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 96);
+  display: grid;
+  gap: calc(var(--unit) * 12);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.dishes button[data-v-4aee3a78] {
+  width: calc(var(--unit) * 260);
+  padding: calc(var(--unit) * 10);
+  border: 0;
+  background: rgb(255 255 255 / 12%);
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 20);
+  text-align: left;
+}
+.dishes .selected[data-v-4aee3a78] {
+  background: #a154de;
+}
+.auto-cook[data-v-4aee3a78] {
+  position: absolute;
+  bottom: calc(var(--unit) * 40);
+  left: calc(50% + var(--unit) * 100);
+  width: calc(var(--unit) * 180);
+  height: calc(var(--unit) * 52);
+  transform: translateX(-50%);
+  border: 0;
+  background: #3a3a44;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+.auto-cook[data-v-4aee3a78]:disabled {
+  opacity: 0.4;
+}
+.stop[data-v-4aee3a78] {
+  position: absolute;
+  bottom: calc(var(--unit) * 40);
+  left: 50%;
+  width: calc(var(--unit) * 140);
+  height: calc(var(--unit) * 52);
+  transform: translateX(-50%);
+  border: 0;
+  background: #a154de;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+
+.disc-button[data-v-f5c878ff] {
+  display: grid;
+  width: calc(var(--unit) * var(--size));
+  height: calc(var(--unit) * var(--size));
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #fdfdfd;
+  box-shadow: 0 0 calc(var(--unit) * 3) calc(var(--unit) * 1) rgb(0 0 0 / 0.3);
+  cursor: inherit;
+  place-items: center;
+}
+
+.title[data-v-5c68ef69] {
+  position: absolute;
+  top: calc(var(--unit) * 30);
+  left: calc(var(--unit) * 145);
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+}
+
+.crafting-screen[data-v-bd114327] {
+  position: absolute;
+  inset: 0;
+  color: #fff7ea;
+}
+.head[data-v-bd114327] {
+  position: absolute;
+  inset: 0 0 auto;
+  height: calc(var(--unit) * 95);
+  background: #161c31;
+}
+.heading[data-v-bd114327] {
+  line-height: calc(var(--unit) * 32);
+}
+.coins[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 34);
+  left: calc(var(--unit) * 1650);
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+}
+.coin[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 4);
+  left: calc(var(--unit) * -30);
+  width: calc(var(--unit) * 20);
+  height: calc(var(--unit) * 20);
+  border-radius: 50%;
+  background: #e6b84a;
+}
+.close[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 18);
+  left: calc(var(--unit) * 1828);
+}
+.close svg[data-v-bd114327] {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
+  fill: none;
+  stroke: #212121;
+  stroke-linecap: round;
+  stroke-width: 3;
+}
+.tabs[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 24);
+  left: calc(var(--unit) * 822);
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tab[data-v-bd114327] {
+  width: calc(var(--unit) * 96);
+  height: calc(var(--unit) * 68);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: inherit;
+}
+.tab[aria-pressed="true"][data-v-bd114327] {
+  border-bottom: calc(var(--unit) * 4) solid #e8d9b0;
+}
+.list[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 66);
+  width: calc(var(--unit) * 580);
+}
+.recipes[data-v-bd114327] {
+  display: grid;
+  grid-template-columns: repeat(4, calc(var(--unit) * 127));
+  gap: calc(var(--unit) * 21) calc(var(--unit) * 19);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.recipe[data-v-bd114327] {
+  position: relative;
+  width: 100%;
+  height: calc(var(--unit) * 152);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 3);
+  background: #54658c;
+  color: inherit;
+  cursor: inherit;
+}
+.recipe[aria-pressed="true"][data-v-bd114327] {
+  outline: calc(var(--unit) * 2) solid #fdfdfd;
+}
+.recipe-count[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 4);
+  right: calc(var(--unit) * 4);
+  font-size: calc(var(--unit) * 14);
+}
+.recipe-name[data-v-bd114327] {
+  position: absolute;
+  right: calc(var(--unit) * 4);
+  bottom: calc(var(--unit) * 4);
+  left: calc(var(--unit) * 4);
+  overflow: hidden;
+  font-size: calc(var(--unit) * 17);
+  line-height: calc(var(--unit) * 20);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.detail[data-v-bd114327] {
+  position: absolute;
+  inset: 0;
+}
+.recipe-title[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 113);
+  left: calc(var(--unit) * 1020);
+  width: calc(var(--unit) * 570);
+  margin: 0;
+  font-size: calc(var(--unit) * 28);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 36);
+  text-align: center;
+}
+.materials-band[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 745);
+  left: calc(var(--unit) * 735);
+  width: calc(var(--unit) * 1143);
+  height: calc(var(--unit) * 213);
+  background: #3e4860;
+}
+.materials-label[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 756);
+  left: calc(var(--unit) * 788);
+  margin: 0;
+  font-size: calc(var(--unit) * 20);
+  line-height: calc(var(--unit) * 24);
+}
+.materials[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 810);
+  left: calc(var(--unit) * 983);
+  display: flex;
+  gap: calc(var(--unit) * 24);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.material[data-v-bd114327] {
+  display: grid;
+  width: calc(var(--unit) * 112);
+  height: calc(var(--unit) * 132);
+  background: #4d6786;
+  font-size: calc(var(--unit) * 18);
+  place-items: end center;
+}
+.amount[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 666);
+  left: calc(var(--unit) * 1120);
+  width: calc(var(--unit) * 365);
+}
+.amount[data-v-bd114327]::-webkit-slider-runnable-track {
+  background: #2d4159;
+}
+.amount[data-v-bd114327]::-webkit-slider-thumb {
+  background: #fff7ea;
+}
+.crafted[data-v-bd114327],
+.required[data-v-bd114327] {
+  position: absolute;
+  left: calc(var(--unit) * 1020);
+  width: calc(var(--unit) * 570);
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  text-align: center;
+}
+.crafted[data-v-bd114327] {
+  top: calc(var(--unit) * 622);
+}
+.required[data-v-bd114327] {
+  top: calc(var(--unit) * 700);
+}
+.craft[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 990);
+  left: calc(var(--unit) * 1636);
+  width: calc(var(--unit) * 224);
+  height: calc(var(--unit) * 50);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 4);
+  background: #fff7ea;
+  color: #212121;
+  font-size: calc(var(--unit) * 22);
+  cursor: inherit;
+}
+.crafters[data-v-bd114327] {
+  position: absolute;
+  top: calc(var(--unit) * 808);
+  left: calc(var(--unit) * 1517);
+  width: calc(var(--unit) * 111);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.crafter[data-v-bd114327] {
+  position: relative;
+  width: 100%;
+  height: calc(var(--unit) * 134);
+  padding: 0;
+  border: none;
+  background: #3b4558;
+  color: inherit;
+  cursor: inherit;
+}
+.crafter[aria-pressed="true"][data-v-bd114327] {
+  outline: calc(var(--unit) * 2) solid #fdfdfd;
+}
+.crafter-name[data-v-bd114327] {
+  position: absolute;
+  right: 0;
+  bottom: calc(var(--unit) * 4);
+  left: 0;
+  font-size: calc(var(--unit) * 18);
+  line-height: calc(var(--unit) * 22);
+  text-align: center;
+}
+.tab-name[data-v-bd114327] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+/* The quantity slider the crafting and shop screens share, each screen sets its own position and track colour */
+.amount[data-v-bd114327] {
+  height: calc(var(--unit) * 14);
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: inherit;
+}
+.amount[data-v-bd114327]::-webkit-slider-runnable-track {
+  height: calc(var(--unit) * 4);
+}
+.amount[data-v-bd114327]::-webkit-slider-thumb {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  margin-top: calc(var(--unit) * -5);
+  border-radius: calc(var(--unit) * 2);
+  transform: rotate(45deg);
+  appearance: none;
+}
+
+.dialogue-screen[data-v-da022ee0] {
+  position: absolute;
+  inset: 0;
+}
+.band[data-v-da022ee0] {
+  position: absolute;
+  inset: auto 0 0;
+  display: flex;
+  height: calc(var(--unit) * 300);
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  padding-top: calc(var(--unit) * 42);
+}
+
+/* Provisional: a narration, which names no speaker and no role, is drawn centred on a black screen, the middle of the
+   screen being a best estimate of where the game's black screen sets its line, until a recording of one is read for
+   its place and darkness */
+.band.narration[data-v-da022ee0] {
+  inset: 0;
+  height: auto;
+  justify-content: center;
+  padding-top: 0;
+  background: #000;
+}
+
+/* The name's gold is the brightest saturated pixel of its letters in the English client's recording */
+.speaker[data-v-da022ee0] {
+  margin: 0;
+  color: #ffc700;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* The role under the name in the recording's smaller gold; its slot is the line's offset between a speaker with one and
+   one without, so the line keeps its place either way */
+.role[data-v-da022ee0] {
+  margin: 0;
+  color: #ffc700;
+  font-size: calc(var(--unit) * 13);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 16.5);
+}
+.line[data-v-da022ee0] {
+  max-width: calc(var(--unit) * 1200);
+  margin: calc(var(--unit) * 13.5) 0 0;
+  color: #fff;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+  letter-spacing: calc(var(--unit) * 2.3);
+  line-height: calc(var(--unit) * 32);
+  text-align: center;
+}
+.unrevealed[data-v-da022ee0] {
+  visibility: hidden;
+}
+
+/* The whole line once, for a screen reader, which the written-out halves are hidden from */
+.spoken[data-v-da022ee0] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* The replies' place is read off the English client's recording: the first pill's left edge at 1275 of 1920 and its top
+   at 698 of 1080, each pill 45 high and 15 apart */
+.choices[data-v-da022ee0] {
+  position: absolute;
+  top: calc(var(--unit) * 698);
+  right: calc(var(--unit) * 273);
+  display: flex;
+  width: calc(var(--unit) * 372);
+  flex-direction: column;
+  gap: calc(var(--unit) * 15);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* The reply's look and its states are its GameButton kind's, so the screen places each and sets only its layout */
+.choice[data-v-da022ee0] {
+  display: flex;
+  width: 100%;
+  min-height: calc(var(--unit) * 45);
+  align-items: center;
+  gap: calc(var(--unit) * 7.5);
+  padding: 0 calc(var(--unit) * 10.5);
+  text-align: start;
+}
+
+/* The mark's place, its traced glyph from the game's own file, drawn in the pill's colour */
+.icon[data-v-da022ee0] {
+  width: calc(var(--unit) * 30);
+  height: calc(var(--unit) * 30);
+  flex: none;
+}
+
+.item-tile[data-v-8cf70011] {
+  display: inline-block;
+  container-type: size;
+}
+.face[data-v-8cf70011] {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: end;
+  overflow: hidden;
+  border-radius: 7cqw;
+}
+.item-tile[data-rarity="3"] .face[data-v-8cf70011] {
+  background: linear-gradient(#79809d, #7485a6 30%, #748faf 60%, #7298b9 77%);
+}
+.item-tile[data-rarity="4"] .face[data-v-8cf70011] {
+  background: linear-gradient(#7e77a2, #877aac 30%, #917db4 60%, #9c80bc 77%);
+}
+.item-tile[data-rarity="5"] .face[data-v-8cf70011] {
+  background: linear-gradient(#b0804c, #ba8446 30%, #c38946 60%, #cc8d43 77%);
+}
+.count[data-v-8cf70011] {
+  width: 100%;
+  height: 24cqh;
+  color: #fff;
+  font-size: var(--count-size, 30cqh);
+  font-weight: 600;
+  line-height: 24cqh;
+  text-align: center;
+}
+.item-tile[data-rarity="3"] .count[data-v-8cf70011] {
+  background: #4d6680;
+}
+.item-tile[data-rarity="4"] .count[data-v-8cf70011] {
+  background: #665d82;
+}
+.item-tile[data-rarity="5"] .count[data-v-8cf70011] {
+  background: #6b625c;
+}
+
+.expedition-screen[data-v-ee73652f] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  color: #ece5d8;
+  font-weight: 600;
+}
+.map[data-v-ee73652f] {
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at 50% 45%, #e4d9c0, #b8a683 70%, #8e7f63);
+}
+.limit[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 33);
+  right: calc(var(--unit) * 162);
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
+}
+.close[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 20);
+  right: calc(var(--unit) * 50);
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 10);
+  background: #f2efe6;
+  color: #3b4255;
+  font: inherit;
+  font-size: calc(var(--unit) * 36);
+  line-height: calc(var(--unit) * 56);
+}
+.nations[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 135);
+  left: calc(var(--unit) * 70);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 20);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.nation[data-v-ee73652f] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 12);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 30);
+  text-shadow: 0 calc(var(--unit) * 2) calc(var(--unit) * 4) rgb(0 0 0 / 0.5);
+}
+.nation[aria-pressed="true"][data-v-ee73652f] {
+  font-size: calc(var(--unit) * 38);
+}
+.marker[data-v-ee73652f] {
+  width: calc(var(--unit) * 12);
+  height: calc(var(--unit) * 12);
+  flex: none;
+  background: currentcolor;
+  transform: rotate(45deg);
+}
+.alert[data-v-ee73652f] {
+  display: inline-flex;
+  width: calc(var(--unit) * 20);
+  height: calc(var(--unit) * 20);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #d8473a;
+  color: #fff;
+  font-size: calc(var(--unit) * 16);
+}
+
+/* Each pin is a circle 80 across standing on its place, its point under it, the picked one outlined as the game brackets it */
+.pins[data-v-ee73652f] {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pins li[data-v-ee73652f] {
+  position: absolute;
+  left: calc(var(--unit) * var(--x));
+  top: calc(var(--unit) * var(--y));
+}
+.pin[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * -40);
+  left: calc(var(--unit) * -40);
+  width: calc(var(--unit) * 80);
+  height: calc(var(--unit) * 80);
+  padding: 0;
+  border: calc(var(--unit) * 4) solid #dcd5c4;
+  border-radius: 50%;
+  background: #f7f4ec;
+  color: #6f6a58;
+  font: inherit;
+  font-size: calc(var(--unit) * 48);
+  line-height: calc(var(--unit) * 72);
+  box-shadow: 0 calc(var(--unit) * 4) calc(var(--unit) * 8) rgb(0 0 0 / 0.3);
+}
+
+/* The time left on the expedition away from a place, a dark tag above its pin */
+.away[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * -110);
+  left: 0;
+  padding: calc(var(--unit) * 4) calc(var(--unit) * 14);
+  border-radius: calc(var(--unit) * 14);
+  background: rgb(24 26 34 / 0.9);
+  color: #fff;
+  font-size: calc(var(--unit) * 20);
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+.pin[data-v-ee73652f]::after {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  border: calc(var(--unit) * 10) solid transparent;
+  border-top-color: #dcd5c4;
+  content: "";
+  transform: translateX(-50%);
+}
+.pin[aria-pressed="true"][data-v-ee73652f] {
+  outline: calc(var(--unit) * 3) solid #fff;
+  outline-offset: calc(var(--unit) * 22);
+}
+
+/* The panel at 1445 from the left and 120 from the top, 432 wide and 598 high, its children placed from its corner */
+.detail[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 120);
+  left: calc(var(--unit) * 1445);
+  width: calc(var(--unit) * 432);
+  height: calc(var(--unit) * 598);
+  margin: 0;
+  background: #e8e3d6;
+  color: #3b4255;
+  box-shadow: 0 0 calc(var(--unit) * 12) rgb(0 0 0 / 0.35);
+}
+.detail-name[data-v-ee73652f] {
+  position: absolute;
+  top: 0;
+  left: calc(var(--unit) * 25);
+  height: calc(var(--unit) * 52);
+  margin: 0;
+  color: #d8c8a0;
+  font-size: calc(var(--unit) * 24);
+  line-height: calc(var(--unit) * 52);
+}
+.detail[data-v-ee73652f]::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 52);
+  background: #4b5165;
+  content: "";
+}
+.picture[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 52);
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 158);
+  background: linear-gradient(#9fc3d3, #7ea9a0 40%, #6f8f5c 70%, #5b7650);
+}
+.description[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 210);
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 160);
+  margin: 0;
+  padding: calc(var(--unit) * 14) calc(var(--unit) * 25) 0;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-size: calc(var(--unit) * 21);
+  font-weight: 400;
+  line-height: calc(var(--unit) * 26);
+}
+.rewards-label[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 389);
+  left: calc(var(--unit) * 29);
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 28);
+}
+.rewards[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 428);
+  left: calc(var(--unit) * 29);
+  display: flex;
+  gap: calc(var(--unit) * 15);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.item[data-v-ee73652f] {
+  display: block;
+  width: calc(var(--unit) * 76);
+  height: calc(var(--unit) * 76);
+}
+.status[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 527);
+  right: 0;
+  left: 0;
+  height: calc(var(--unit) * 69);
+  margin: 0;
+  background: #d9a441;
+  color: #fff;
+  font-size: calc(var(--unit) * 26);
+  line-height: calc(var(--unit) * 69);
+  text-align: center;
+}
+
+/* The picker over the map's left, a row a character with its bonus words and its status when it is away */
+.characters[data-v-ee73652f] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(var(--unit) * 960);
+  padding: calc(var(--unit) * 40) calc(var(--unit) * 50);
+  box-sizing: border-box;
+  background: rgb(31 37 54 / 0.96);
+  color: #f3eee3;
+}
+.characters-title[data-v-ee73652f] {
+  margin: 0 0 calc(var(--unit) * 30);
+  color: #d8c8a0;
+  font-size: calc(var(--unit) * 30);
+}
+.characters ul[data-v-ee73652f] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.character[data-v-ee73652f] {
+  display: flex;
+  width: 100%;
+  height: calc(var(--unit) * 120);
+  margin-bottom: calc(var(--unit) * 10);
+  padding: 0 calc(var(--unit) * 30);
+  flex-direction: column;
+  justify-content: center;
+  border: none;
+  border-radius: calc(var(--unit) * 6);
+  background: #3b4560;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+.character[data-v-ee73652f]:disabled {
+  opacity: 0.5;
+}
+.character-name[data-v-ee73652f] {
+  font-size: calc(var(--unit) * 34);
+}
+.character-bonus[data-v-ee73652f] {
+  color: #b9c2d6;
+  font-size: calc(var(--unit) * 22);
+}
+.character-status[data-v-ee73652f] {
+  color: #e3c77a;
+  font-size: calc(var(--unit) * 22);
+}
+.durations[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 527);
+  right: 0;
+  left: 0;
+  display: flex;
+  height: calc(var(--unit) * 69);
+  margin: 0;
+  padding: 0;
+  background: #4b5165;
+  list-style: none;
+}
+.durations li[data-v-ee73652f] {
+  display: flex;
+  flex: 1;
+}
+.durations button[data-v-ee73652f] {
+  flex: 1;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #f3eee3;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+}
+.durations button[aria-pressed="true"][data-v-ee73652f] {
+  background: #6b7289;
+}
+.action[data-v-ee73652f] {
+  position: absolute;
+  top: calc(var(--unit) * 990);
+  left: calc(var(--unit) * 1570);
+  display: flex;
+  width: calc(var(--unit) * 306);
+  height: calc(var(--unit) * 60);
+  align-items: center;
+  gap: calc(var(--unit) * 12);
+  padding: 0 calc(var(--unit) * 22);
+  border: none;
+  border-radius: calc(var(--unit) * 30);
+  background: rgb(24 26 34 / 0.9);
+  color: #fff;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+}
+.ring[data-v-ee73652f] {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
+  flex: none;
+  border: calc(var(--unit) * 4) solid #e3c77a;
+  border-radius: 50%;
+}
+
+.two-column-screen[data-v-d9df7bbc] {
+  position: relative;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto 1fr;
+  color: #ece5d8;
+}
+
+/* Measured off the wiki-clip reference at 886 high, each as a unit of the game's 1080 high screen */
+.forge-screen[data-v-4426e963] {
+  color: #ece5d8;
+  font-family: "Signika", sans-serif;
+  font-weight: 600;
+}
+.title[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 34);
+  left: calc(var(--unit) * 268);
+  margin: 0;
+  font-size: calc(var(--unit) * 29);
+  line-height: 1;
+}
+.coins[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 41);
+  left: calc(var(--unit) * 1902);
+  margin: 0;
+  font-size: calc(var(--unit) * 27);
+  line-height: 1;
+}
+.close[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 26);
+  left: calc(var(--unit) * 2122);
+  width: calc(var(--unit) * 66);
+  height: calc(var(--unit) * 66);
+  border: none;
+  border-radius: 50%;
+  background: #ece5d8;
+  color: #3b3b3b;
+  font-size: calc(var(--unit) * 36);
+  line-height: 1;
+}
+.tabs[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 155);
+  left: calc(var(--unit) * 137);
+  display: flex;
+  gap: calc(var(--unit) * 2);
+  width: calc(var(--unit) * 741);
+  height: calc(var(--unit) * 61);
+}
+.tab[data-v-4426e963] {
+  flex: 1;
+  border: none;
+  background: rgb(20 28 38 / 0.55);
+  color: #ece5d8;
+  font-size: calc(var(--unit) * 27);
+}
+.tab[aria-pressed="true"][data-v-4426e963] {
+  background: #ece5d8;
+  color: #3b3b3b;
+}
+.recipes[data-v-4426e963],
+.queues[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 252);
+  left: calc(var(--unit) * 134);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.recipes[data-v-4426e963] {
+  width: calc(var(--unit) * 750);
+}
+.recipes li + li[data-v-4426e963] {
+  margin-top: calc(var(--unit) * 9.7);
+}
+.recipe[data-v-4426e963] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: calc(var(--unit) * 114.6);
+  border: none;
+  background: rgb(20 28 38 / 0.55);
+  color: #ece5d8;
+  text-align: left;
+}
+.recipes li:first-child .recipe[data-v-4426e963] {
+  height: calc(var(--unit) * 123);
+}
+.recipe[aria-pressed="true"][data-v-4426e963] {
+  outline: calc(var(--unit) * 2) solid #ffffff;
+  outline-offset: calc(var(--unit) * -2);
+  background: rgb(236 229 216 / 0.25);
+}
+.recipe[data-v-4426e963]:disabled {
+  opacity: 0.4;
+}
+.recipe-name[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 14);
+  left: calc(var(--unit) * 152);
+  font-size: calc(var(--unit) * 35);
+  line-height: 1;
+}
+.recipe-time[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 64);
+  left: calc(var(--unit) * 151);
+  font-size: calc(var(--unit) * 29);
+  line-height: 1;
+}
+.detail[data-v-4426e963] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.detail[data-v-4426e963] > * {
+  pointer-events: auto;
+  position: absolute;
+  margin: 0;
+}
+.total-time[data-v-4426e963] {
+  top: calc(var(--unit) * 146);
+  left: 50%;
+  translate: -50% 0;
+  font-size: calc(var(--unit) * 27);
+  line-height: 1;
+  white-space: nowrap;
+}
+.amount[data-v-4426e963] {
+  top: calc(var(--unit) * 590);
+  left: calc(var(--unit) * 1368);
+  width: calc(var(--unit) * 446);
+  height: calc(var(--unit) * 20);
+  accent-color: #ece5d8;
+}
+.required[data-v-4426e963] {
+  top: calc(var(--unit) * 987);
+  left: calc(var(--unit) * 1011);
+  font-size: calc(var(--unit) * 24);
+  line-height: 1;
+}
+.refusal[data-v-4426e963] {
+  top: calc(var(--unit) * 963);
+  left: calc(var(--unit) * 1560);
+  width: calc(var(--unit) * 600);
+  font-size: calc(var(--unit) * 24);
+  line-height: 1;
+  text-align: right;
+}
+.start[data-v-4426e963] {
+  top: calc(var(--unit) * 963);
+  left: calc(var(--unit) * 1883);
+  width: calc(var(--unit) * 277);
+  height: calc(var(--unit) * 73);
+  border: none;
+  border-radius: calc(var(--unit) * 36);
+  background: #ece5d8;
+  color: #3b3b3b;
+  font-size: calc(var(--unit) * 29);
+}
+.queues[data-v-4426e963] {
+  width: calc(var(--unit) * 1600);
+}
+.item-icon[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 265.7);
+  left: calc(var(--unit) * 1505.4);
+  width: calc(var(--unit) * 170.7);
+  height: calc(var(--unit) * 209.7);
+  background: #5b5a5f;
+}
+.item-count[data-v-4426e963] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: calc(var(--unit) * 34.1);
+  background: #e9e3dc;
+  color: #3b3b3b;
+  font-size: calc(var(--unit) * 26.8);
+  line-height: calc(var(--unit) * 34.1);
+  text-align: center;
+}
+.amount-label[data-v-4426e963] {
+  top: calc(var(--unit) * 551);
+  left: calc(var(--unit) * 1589.5);
+  translate: -50% 0;
+  color: #ece5d8;
+  font-size: calc(var(--unit) * 26.8);
+  line-height: 1;
+  white-space: nowrap;
+}
+.materials-box[data-v-4426e963] {
+  top: calc(var(--unit) * 658.2);
+  left: calc(var(--unit) * 1025.1);
+  width: calc(var(--unit) * 1130);
+  height: calc(var(--unit) * 268.2);
+  background: #545d6a;
+}
+.materials-head[data-v-4426e963] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(var(--unit) * 48.8);
+  background: #464c5f;
+}
+.materials-head p[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 15.8);
+  margin: 0;
+  font-size: calc(var(--unit) * 26.8);
+  line-height: 1;
+  white-space: nowrap;
+}
+.materials-title[data-v-4426e963] {
+  left: calc(var(--unit) * 42.7);
+}
+.support-title[data-v-4426e963] {
+  right: calc(var(--unit) * 41.4);
+}
+.slot[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 79.2);
+  height: calc(var(--unit) * 170.7);
+  border: calc(var(--unit) * 2.4) solid rgb(255 255 255 / 0.12);
+  background: rgb(20 28 38 / 0.25);
+}
+.slot-first[data-v-4426e963] {
+  left: calc(var(--unit) * 163.3);
+  width: calc(var(--unit) * 141.4);
+}
+.slot-second[data-v-4426e963] {
+  left: calc(var(--unit) * 340.1);
+  width: calc(var(--unit) * 134.1);
+}
+.slot-third[data-v-4426e963] {
+  left: calc(var(--unit) * 508.3);
+  width: calc(var(--unit) * 134.1);
+}
+.support-portrait[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 79.2);
+  left: calc(var(--unit) * 825.2);
+  width: calc(var(--unit) * 141.4);
+  height: calc(var(--unit) * 170.7);
+  background: #8d7a5c;
+}
+.recipe-tile[data-v-4426e963] {
+  position: absolute;
+  top: calc(var(--unit) * 9.8);
+  left: calc(var(--unit) * 14.6);
+  width: calc(var(--unit) * 107.3);
+  height: calc(var(--unit) * 107.3);
+  background: #3a4556;
+}
+.amount-end[data-v-4426e963] {
+  top: calc(var(--unit) * 614.4);
+  translate: -50% -50%;
+  font-size: calc(var(--unit) * 26.8);
+  line-height: 1;
+}
+.amount-min[data-v-4426e963] {
+  left: calc(var(--unit) * 1318.9);
+}
+.amount-max[data-v-4426e963] {
+  left: calc(var(--unit) * 1861.4);
+}
+.amount-step[data-v-4426e963] {
+  top: calc(var(--unit) * 614.4);
+  width: calc(var(--unit) * 48.8);
+  height: calc(var(--unit) * 48.8);
+  border-radius: 50%;
+  background: rgb(236 229 216 / 0.9);
+  color: #3b3b3b;
+  font-size: calc(var(--unit) * 31.7);
+  line-height: calc(var(--unit) * 48.8);
+  text-align: center;
+  translate: -50% -50%;
+}
+.amount-minus[data-v-4426e963] {
+  left: calc(var(--unit) * 1249.4);
+}
+.amount-plus[data-v-4426e963] {
+  left: calc(var(--unit) * 1928.4);
+}
+
+.game-screen[data-v-b0f87b0b] {
+  --interface-scale: 1;
+  --canvas-inset: var(--b3ebfd60);
+  --canvas-unit: var(--v687962d1);
+  --unit: var(--v440f997e);
+  --white: var(--v3dfd0b4f);
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  container-type: size;
+  cursor: var(--v603eb8d0);
+  font-family: var(--v62ea67cc);
+  user-select: none;
+}
+@media (pointer: coarse) {
+.game-screen[data-v-b0f87b0b] {
+    --interface-scale: var(--v7e9afa3a);
+}
+}
+
+/* Provisional: the icon, which stands in for the item's own art until its kind's icon is drawn */
+.interaction-prompts[data-v-49059f1b] {
+  --pill-fill: #2a333f;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  gap: calc(var(--unit) * 9);
+  color: #fff;
+  font-size: calc(var(--unit) * 31);
+  font-weight: 600;
+  list-style: none;
+}
+.prompt[data-v-49059f1b] {
+  display: grid;
+  grid-template-columns: calc(var(--unit) * 59) calc(var(--unit) * 318);
+  align-items: center;
+  height: calc(var(--unit) * 63);
+}
+.key[data-v-49059f1b] {
+  position: relative;
+  width: calc(var(--unit) * 40);
+  height: calc(var(--unit) * 33);
+  border-radius: calc(var(--unit) * 6);
+  color: #000;
+  font: inherit;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 700;
+  line-height: calc(var(--unit) * 33);
+  text-align: center;
+}
+.prompt[aria-current="true"] .key[data-v-49059f1b] {
+  background: #fff;
+}
+
+/* The pointer from the cap into the pill: a white triangle 10.5 by 19 at 44.5 units from the cap's left edge, on every
+   Row and shown on the selected one. A move of the selection is read off the English client's scrolled pickup at 60
+   Frames a second: the cap jumps rows within a frame, while the pointer and the selected rim cross-fade from the old
+   Row to the new over three, the 0.05 seconds the game's controllers fade into a state over */
+.key[data-v-49059f1b]::after {
+  position: absolute;
+  top: calc(var(--unit) * 7);
+  left: calc(var(--unit) * 44.5);
+  border-width: calc(var(--unit) * 9.5) 0 calc(var(--unit) * 9.5) calc(var(--unit) * 10.5);
+  border-style: solid;
+  border-color: transparent transparent transparent #ececec;
+  content: "";
+  opacity: 0;
+  transition: opacity var(--v0b0e8f3c) linear;
+}
+.prompt[aria-current="true"] .key[data-v-49059f1b]::after {
+  opacity: 1;
+}
+.pill[data-v-49059f1b] {
+  display: flex;
+  position: relative;
+  isolation: isolate;
+  height: 100%;
+  padding: 0 0 0 calc(var(--unit) * 12);
+  align-items: center;
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: inherit;
+  font: inherit;
+  gap: calc(var(--unit) * 19);
+  pointer-events: auto;
+  white-space: nowrap;
+}
+
+/* The touch layout, measured off the English mobile client's pickup at 934 high: no cap and no selected row, the pill
+   In the cap's place, each 52 high on a 74 pitch */
+.touch[data-v-49059f1b] {
+  gap: calc(var(--unit) * 22);
+}
+.touch .prompt[data-v-49059f1b] {
+  grid-template-columns: calc(var(--unit) * 318);
+  height: calc(var(--unit) * 52);
+}
+
+/* The pill's ground, measured off the English client's pickup over plain grass at 1080 high: slate rounded at the left,
+   With a light rim 2 units thick 2.5 inside its edge, opaque for 78 units and fading out evenly to nothing at its end,
+   So it has no right end of its own. The selected row's rim is brighter */
+.pill[data-v-49059f1b]::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: calc(var(--unit) * 31.5) 0 0 calc(var(--unit) * 31.5);
+  background: var(--pill-fill);
+  box-shadow:
+    inset 0 0 0 calc(var(--unit) * 2.5) var(--pill-fill),
+    inset 0 0 0 calc(var(--unit) * 4.5) rgb(255 255 255 / 0.24);
+  content: "";
+  mask-image: linear-gradient(to right, #000 calc(var(--unit) * 78), transparent);
+  transition: box-shadow var(--v0b0e8f3c) linear;
+}
+.prompt[aria-current="true"] .pill[data-v-49059f1b]::before {
+  box-shadow:
+    inset 0 0 0 calc(var(--unit) * 2.5) var(--pill-fill),
+    inset 0 0 0 calc(var(--unit) * 4.5) rgb(255 255 255 / 0.41);
+}
+.name[data-v-49059f1b] {
+  margin-bottom: calc(var(--unit) * 2);
+  letter-spacing: calc(var(--unit) * 0.9);
+}
+.icon[data-v-49059f1b] {
+  width: calc(var(--unit) * 34);
+  height: calc(var(--unit) * 34);
+  flex: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.18);
+}
+
+/* Every place and size is in the game's 1080-high units, read off the recording of the English PC client's bag: the
+   Grid's top left at 648 by 114, its cells 124 by 152 with 23 and 24 between, and the detail panel 493 wide at 1298 */
+.inventory-screen[data-v-cf391b68] {
+  position: absolute;
+  inset: 0;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 17);
+}
+.title[data-v-cf391b68] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  margin: 0;
+}
+
+/* The bag's own pieces, placed against the screen as if the wrapper that makes them inert under the dialog were not there */
+.bag[data-v-cf391b68] {
+  display: contents;
+}
+.tabs[data-v-cf391b68],
+.currencies[data-v-cf391b68],
+.grid[data-v-cf391b68] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tabs[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 22);
+  left: calc(var(--unit) * 557);
+  display: flex;
+  gap: calc(var(--unit) * 56);
+}
+.tab[data-v-cf391b68] {
+  width: calc(var(--unit) * 40);
+  height: calc(var(--unit) * 40);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.14);
+}
+.tab[aria-pressed="true"][data-v-cf391b68] {
+  background: #ece3d8;
+}
+.capacity[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 30);
+  right: calc(var(--unit) * 115);
+  margin: 0;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 20);
+  font-weight: 600;
+}
+.back[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 14);
+  left: calc(var(--unit) * 1824);
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.14);
+}
+.grid[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 114);
+  left: calc(var(--unit) * 648);
+  width: calc(var(--unit) * 565);
+  height: calc(var(--unit) * 856);
+  display: grid;
+  grid-template-columns: repeat(4, calc(var(--unit) * 124));
+  grid-auto-rows: calc(var(--unit) * 152);
+  gap: calc(var(--unit) * 24) calc(var(--unit) * 23);
+  overflow-y: auto;
+}
+.cell[data-v-cf391b68] {
+  display: flex;
+  align-items: end;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: #6b6396;
+  font: inherit;
+}
+.cell[data-rarity="5"][data-v-cf391b68] {
+  background: #9d672b;
+}
+.cell[aria-pressed="true"][data-v-cf391b68] {
+  box-shadow: 0 0 0 calc(var(--unit) * 3) #ece3d8;
+}
+.cell[data-selected][data-v-cf391b68] {
+  background: #a154de;
+}
+.caption[data-v-cf391b68] {
+  width: 100%;
+  padding: calc(var(--unit) * 4) 0;
+  border-radius: 0 0 calc(var(--unit) * 8) calc(var(--unit) * 8);
+  background: rgb(0 0 0 / 0.35);
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 17);
+  text-align: center;
+}
+.detail[data-v-cf391b68] {
+  --detail-head-color: #655c83;
+
+  position: absolute;
+  top: calc(var(--unit) * 114);
+  left: calc(var(--unit) * 1298);
+  width: calc(var(--unit) * 493);
+  height: calc(var(--unit) * 844);
+  box-sizing: border-box;
+  padding-top: calc(var(--unit) * 4);
+  background: linear-gradient(
+    to bottom,
+    var(--detail-head-color) calc(var(--unit) * 286),
+    #ece3d8 calc(var(--unit) * 286),
+    #ece3d8 calc(var(--unit) * 786),
+    #ffebbf calc(var(--unit) * 786)
+  );
+  color: #3b4255;
+}
+.detail[data-rarity="5"][data-v-cf391b68] {
+  --detail-head-color: #7a4e22;
+}
+.detail-name[data-v-cf391b68] {
+  height: calc(var(--unit) * 52);
+  margin: 0;
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 28);
+  box-sizing: border-box;
+  background: #a154de;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}
+.detail-caption[data-v-cf391b68] {
+  margin: calc(var(--unit) * 230) 0 0;
+  padding: 0 calc(var(--unit) * 28);
+  font-size: calc(var(--unit) * 20);
+  font-weight: 600;
+}
+
+/* The Use button under the detail panel's caption, provisional until the bag's Use is recorded */
+.use[data-v-cf391b68] {
+  position: absolute;
+  bottom: calc(var(--unit) * 28);
+  left: calc(var(--unit) * 28);
+  width: calc(var(--unit) * 437);
+  height: calc(var(--unit) * 52);
+  background: #a154de;
+  color: #ece3d8;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+
+/* The foot bar's pieces, measured off the bag's recording at 1080 high: the trash, the filter and the sort's dropdown and
+   order on an equipment tab, the Primogems and Mora on the rest. The dropdown is the game's own pill, its list drawn by the
+   browser until its open motion is measured */
+.trash[data-v-cf391b68],
+.filter[data-v-cf391b68],
+.order[data-v-cf391b68] {
+  position: absolute;
+  width: calc(var(--unit) * 50);
+  height: calc(var(--unit) * 50);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.14);
+}
+.trash[data-v-cf391b68] {
+  top: calc(var(--unit) * 988);
+  left: calc(var(--unit) * 47);
+  width: calc(var(--unit) * 58);
+  height: calc(var(--unit) * 58);
+}
+.trash[aria-pressed="true"][data-v-cf391b68] {
+  background: #a154de;
+}
+
+/* The destroy mode's foot and dialog are placed in the game's 1080-high units by the recording, not yet measured, so
+   they sit in the foot's band and the screen's centre until then: the count and the Destroy button share the quick
+   selects' row, so the foot's three rows end above the screen's 1080 */
+.destroy[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 960);
+  left: calc(var(--unit) * 230);
+  right: calc(var(--unit) * 47);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--unit) * 12);
+}
+.destroy-tip[data-v-cf391b68],
+.destroy-cannot[data-v-cf391b68] {
+  margin: 0;
+  width: 100%;
+}
+.destroy-count[data-v-cf391b68] {
+  margin: 0;
+}
+.destroy-cannot[data-v-cf391b68] {
+  color: #ff9a7a;
+}
+.quick-selects[data-v-cf391b68] {
+  display: flex;
+  gap: calc(var(--unit) * 10);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.lock[data-v-cf391b68],
+.quick-select[data-v-cf391b68],
+.quick-use[data-v-cf391b68],
+.destroy-button[data-v-cf391b68],
+.confirm-button[data-v-cf391b68] {
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 20);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.14);
+  color: inherit;
+  font: inherit;
+}
+.destroy-button[data-v-cf391b68]:disabled {
+  opacity: 0.4;
+}
+.quick-use[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 960);
+  left: calc(var(--unit) * 1298);
+}
+.lock[data-v-cf391b68] {
+  position: absolute;
+  bottom: calc(var(--unit) * 88);
+  left: calc(var(--unit) * 28);
+  width: calc(var(--unit) * 437);
+  height: calc(var(--unit) * 52);
+}
+.confirm-title[data-v-cf391b68],
+.confirm-list-label[data-v-cf391b68],
+.confirm-warning[data-v-cf391b68] {
+  margin: 0 0 calc(var(--unit) * 12);
+}
+.confirm-title[data-v-cf391b68] {
+  font-size: calc(var(--unit) * 22);
+}
+.confirm-names[data-v-cf391b68] {
+  margin: 0 0 calc(var(--unit) * 12);
+  padding: 0;
+  list-style: none;
+}
+.confirm-warning[data-v-cf391b68] {
+  color: #ff9a7a;
+}
+.confirm-buttons[data-v-cf391b68] {
+  display: flex;
+  justify-content: flex-end;
+  gap: calc(var(--unit) * 12);
+}
+.filter[data-v-cf391b68] {
+  top: calc(var(--unit) * 992);
+  left: calc(var(--unit) * 140);
+}
+.order[data-v-cf391b68] {
+  top: calc(var(--unit) * 992);
+  left: calc(var(--unit) * 532);
+  width: calc(var(--unit) * 48);
+  height: calc(var(--unit) * 48);
+  background: #ece3d8;
+}
+.sort[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 992);
+  left: calc(var(--unit) * 208);
+  width: calc(var(--unit) * 304);
+  height: calc(var(--unit) * 50);
+}
+.sort-select[data-v-cf391b68] {
+  width: 100%;
+  height: 100%;
+  padding: 0 calc(var(--unit) * 18);
+  border: none;
+  border-radius: calc(var(--unit) * 25);
+  background: #ece3d8;
+  color: #3b4255;
+  appearance: none;
+  font: inherit;
+  font-size: calc(var(--unit) * 22);
+  font-weight: 600;
+}
+.sort[data-v-cf391b68]::after {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--unit) * 26);
+  width: 0;
+  height: 0;
+  border-top: calc(var(--unit) * 6) solid #3b4255;
+  border-right: calc(var(--unit) * 6) solid transparent;
+  border-left: calc(var(--unit) * 6) solid transparent;
+  content: "";
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+/* The figures are the game's cap height, 30 units, and the top-up plus overhangs the pill's end */
+.currencies[data-v-cf391b68] {
+  position: absolute;
+  top: calc(var(--unit) * 1002);
+  left: calc(var(--unit) * 140);
+  display: flex;
+  gap: calc(var(--unit) * 43);
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+}
+.currency[data-v-cf391b68] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 12);
+  height: calc(var(--unit) * 35);
+  padding: 0 calc(var(--unit) * 14);
+  border-radius: calc(var(--unit) * 18);
+  background: rgb(38 42 56 / 0.5);
+}
+
+/* Provisional: the Primogem and Mora marks and the top-up plus, until the glyph pass traces them from the game's own icons */
+.currency-icon[data-v-cf391b68] {
+  width: calc(var(--unit) * 26);
+  height: calc(var(--unit) * 26);
+  border-radius: 50%;
+  background: #d8e4f0;
+}
+.top-up[data-v-cf391b68] {
+  width: calc(var(--unit) * 31);
+  height: calc(var(--unit) * 31);
+  margin-left: calc(var(--unit) * 1);
+  margin-right: calc(var(--unit) * -14);
+  border-radius: 50%;
+  background: #ece3d8;
+}
+.currency-name[data-v-cf391b68] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+/* The confirm dialog the inventory and the mail screens share, each screen sets its own title and text */
+.confirm[data-v-cf391b68] {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--unit) * 560);
+  padding: calc(var(--unit) * 32);
+  transform: translate(-50%, -50%);
+  border-radius: calc(var(--unit) * 12);
+  background: #2b2a3d;
+}
+
+.loading-spinner[data-v-69cb5a34] {
+  display: grid;
+  width: calc(var(--unit) * 120);
+  height: calc(var(--unit) * 120);
+  border-radius: calc(var(--unit) * 15);
+  background: rgb(8 14 36 / 0.72);
+  place-items: center;
+}
+
+/* The ring is a conic gradient cut to an annulus, its head a dot at the gradient's bright end */
+.ring[data-v-69cb5a34] {
+  position: relative;
+  width: calc(var(--unit) * 48);
+  height: calc(var(--unit) * 48);
+  border-radius: 50%;
+  animation: turn-69cb5a34 1s linear infinite;
+  background: conic-gradient(from 200deg, transparent, rgb(255 255 255 / 0.45) 55%, #fff 88%, transparent 88%);
+  mask: radial-gradient(circle, transparent calc(var(--unit) * 16.5), #000 calc(var(--unit) * 17));
+}
+.ring[data-v-69cb5a34]::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(var(--unit) * 7);
+  height: calc(var(--unit) * 7);
+  border-radius: 50%;
+  background: #fff;
+  content: "";
+  /* The head sits where the gradient's bright end does, 88% of the turn on from 200 degrees */
+  transform: rotate(516.8deg) translateY(calc(var(--unit) * -20.5)) translate(-50%, -50%);
+  transform-origin: 0 0;
+}
+@keyframes turn-69cb5a34 {
+to {
+    rotate: 1turn;
+}
+}
+
+.ornament-divider[data-v-335021af] {
+  position: relative;
+  height: calc(var(--unit) * 30);
+  fill: #d7d7d7;
+}
+.ornament-divider[data-v-335021af]::before {
+  position: absolute;
+  top: 50%;
+  right: calc(var(--unit) * 4);
+  left: calc(var(--unit) * 4);
+  height: calc(var(--unit) * 3);
+  background: #d7d7d7;
+  content: "";
+  translate: 0 -50%;
+}
+.end[data-v-335021af] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: calc(var(--unit) * 30);
+  height: calc(var(--unit) * 21);
+  translate: 0 -50%;
+}
+.right[data-v-335021af] {
+  right: 0;
+  left: auto;
+  scale: -1 1;
+}
+.middle[data-v-335021af] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: calc(var(--unit) * 45);
+  height: calc(var(--unit) * 30);
+  translate: -50% 0;
+}
+
+.party-setup-screen[data-v-876761d0] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  color: #ece5d8;
+  font-weight: 600;
+}
+.team[data-v-876761d0] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 calc(var(--unit) * 60);
+}
+.slots[data-v-876761d0] {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  gap: calc(var(--unit) * 40);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.slot[data-v-876761d0] {
+  display: flex;
+  width: calc(var(--unit) * 300);
+  height: calc(var(--unit) * 600);
+  flex-direction: column;
+  align-items: center;
+  padding-top: calc(var(--unit) * 200);
+  box-sizing: border-box;
+}
+.slot[data-empty][data-v-876761d0] {
+  justify-content: center;
+  padding-top: 0;
+}
+.plate[data-v-876761d0] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--unit) * 6);
+  text-shadow: 0 calc(var(--unit) * 2) calc(var(--unit) * 6) rgb(0 0 0 / 0.6);
+}
+.element[data-v-876761d0] {
+  width: calc(var(--unit) * 26);
+  height: calc(var(--unit) * 26);
+  margin-right: calc(var(--unit) * 8);
+  vertical-align: middle;
+  fill: #ece5d8;
+}
+.name[data-v-876761d0] {
+  font-size: calc(var(--unit) * 24);
+}
+.level[data-v-876761d0] {
+  font-size: calc(var(--unit) * 18);
+  opacity: 0.85;
+}
+.plus[data-v-876761d0] {
+  display: flex;
+  width: calc(var(--unit) * 96);
+  height: calc(var(--unit) * 96);
+  align-items: center;
+  justify-content: center;
+  border: calc(var(--unit) * 2) dashed rgb(255 255 255 / 0.5);
+  border-radius: 50%;
+  font-size: calc(var(--unit) * 56);
+  opacity: 0.6;
+}
+.team-name[data-v-876761d0] {
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
+}
+.foot[data-v-876761d0] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--unit) * 24) calc(var(--unit) * 60);
+}
+.team-bar[data-v-876761d0],
+.deploy-bar[data-v-876761d0] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 24);
+}
+.action[data-v-876761d0] {
+  min-width: calc(var(--unit) * 200);
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 24);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.15);
+  color: #ece5d8;
+  font: inherit;
+  font-size: calc(var(--unit) * 22);
+}
+/* The head, title and back control the party setup and reputation screens share */
+.head[data-v-876761d0] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--unit) * 20) calc(var(--unit) * 40);
+}
+.title[data-v-876761d0] {
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
+}
+.back[data-v-876761d0],
+.step[data-v-876761d0] {
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.15);
+  color: #ece5d8;
+  font: inherit;
+  font-size: calc(var(--unit) * 28);
+}
+
+.progress-bar[data-v-bea8e745] {
+  --open-ms: 250ms;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(var(--unit) * 394);
+  animation: open-bea8e745 var(--open-ms) ease-out;
+  transition: width var(--open-ms) ease-in;
+}
+.folded[data-v-bea8e745] {
+  width: calc(var(--unit) * 6.5);
+}
+@keyframes open-bea8e745 {
+from {
+    width: calc(var(--unit) * 6.5);
+}
+}
+.diamond[data-v-bea8e745] {
+  flex: none;
+  width: calc(var(--unit) * 6.5);
+  height: calc(var(--unit) * 6.5);
+  background: #fff;
+  rotate: 45deg;
+}
+
+/* The track is what lies between the diamonds, less a 3 unit gap either side, so a folded bar has none */
+.track[data-v-bea8e745] {
+  flex: 1;
+  min-width: 0;
+  height: calc(var(--unit) * 10);
+  margin: 0 calc(var(--unit) * 3);
+  background: rgb(38 38 38 / 0.85);
+  clip-path: polygon(
+    calc(var(--unit) * 6) 0,
+    calc(100% - var(--unit) * 6) 0,
+    100% 50%,
+    calc(100% - var(--unit) * 6) 100%,
+    calc(var(--unit) * 6) 100%,
+    0 50%
+  );
+}
+.folded .track[data-v-bea8e745] {
+  margin: 0;
+}
+.folded .diamond + .track + .diamond[data-v-bea8e745] {
+  display: none;
+}
+.fill[data-v-bea8e745] {
+  display: block;
+  height: 100%;
+  background: #fff;
+}
+
+.prompt-band[data-v-8c88bb3d] {
+  display: grid;
+  height: calc(var(--unit) * 44);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(0 8 38 / 0.37) calc(var(--unit) * 380),
+    rgb(0 8 38 / 0.37) calc(100% - var(--unit) * 380),
+    transparent
+  );
+  place-items: center;
+}
+.text[data-v-8c88bb3d] {
+  margin: 0;
+  color: #dcdcdc;
+  font-size: calc(var(--unit) * 29.5);
+  font-weight: 600;
+  line-height: 1;
+}
+
+.stars[data-v-a4c4ddf9] {
+  color: #ffcc32;
+  white-space: nowrap;
+}
+
+.reputation-screen[data-v-9468271c] {
+  position: absolute;
+  inset: 0;
+  color: #3b4255;
+  font-weight: 600;
+}
+.head[data-v-9468271c] {
+  color: #ece5d8;
+}
+.detail[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 165);
+  left: calc(var(--unit) * 85);
+  width: calc(var(--unit) * 520);
+  color: #ece5d8;
+}
+.headline[data-v-9468271c] {
+  margin: 0;
+  font-size: calc(var(--unit) * 46);
+}
+.requirement[data-v-9468271c] {
+  margin: calc(var(--unit) * 16) 0 0;
+  font-size: calc(var(--unit) * 26);
+}
+
+/* The offer sits under the requirement, provisionally, until the reference frames it */
+.offer[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 380);
+  left: calc(var(--unit) * 85);
+  width: calc(var(--unit) * 520);
+  color: #ece5d8;
+}
+.offer-title[data-v-9468271c] {
+  margin: 0 0 calc(var(--unit) * 16);
+  font-size: calc(var(--unit) * 26);
+}
+.accept[data-v-9468271c] {
+  padding: calc(var(--unit) * 12) calc(var(--unit) * 32);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: #ece5d8;
+  color: #3b4255;
+  font: inherit;
+  font-size: calc(var(--unit) * 26);
+}
+
+/* The list's panel, its rows 126 apart from 27 down and 32 in, a row 1145 wide */
+.levels[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 145);
+  left: calc(var(--unit) * 652);
+  display: flex;
+  width: calc(var(--unit) * 1220);
+  height: calc(var(--unit) * 870);
+  flex-direction: column;
+  gap: calc(var(--unit) * 5);
+  margin: 0;
+  padding: calc(var(--unit) * 27) calc(var(--unit) * 43) calc(var(--unit) * 27) calc(var(--unit) * 32);
+  box-sizing: border-box;
+  overflow-y: auto;
+  background: #f0ebe5;
+  list-style: none;
+  scrollbar-width: none;
+}
+.level[data-v-9468271c] {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: calc(var(--unit) * 121);
+  padding: 0;
+  box-sizing: border-box;
+  border: calc(var(--unit) * 2) solid #dad4cd;
+  border-width: calc(var(--unit) * 3) calc(var(--unit) * 2);
+  border-left-color: #c8c2b6;
+  background: #f6f1e8;
+  color: #5a5758;
+  font: inherit;
+  text-align: left;
+}
+.level[data-achieved][data-v-9468271c] {
+  background: #e9e3d9;
+}
+.level[aria-pressed="true"][data-v-9468271c] {
+  background: rgb(255 255 255 / 0.6);
+}
+
+/* The level's pentagon, the row's height, its point 166 in; its drop shadow falls on the row to its right */
+.badge[data-v-9468271c] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(var(--unit) * 166);
+  filter: drop-shadow(calc(var(--unit) * 6) 0 calc(var(--unit) * 5) rgb(120 100 80 / 0.22));
+}
+.badge-face[data-v-9468271c] {
+  position: absolute;
+  inset: 0;
+  background: #f8f4ee;
+  clip-path: polygon(0 0, 83% 0, 100% 50%, 83% 100%, 0 100%);
+}
+.level[data-achieved] .badge-face[data-v-9468271c] {
+  background: #f4eee4;
+}
+.badge-word[data-v-9468271c],
+.badge-number[data-v-9468271c] {
+  position: absolute;
+  left: 0;
+  width: calc(var(--unit) * 146);
+  color: #6a645b;
+  line-height: 1;
+  text-align: center;
+}
+.badge-word[data-v-9468271c] {
+  top: calc(var(--unit) * 22);
+  font-size: calc(var(--unit) * 22);
+  letter-spacing: calc(var(--unit) * 2);
+}
+.badge-number[data-v-9468271c] {
+  top: calc(var(--unit) * 49.5);
+  font-size: calc(var(--unit) * 45);
+}
+.hidden-label[data-v-9468271c] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.items[data-v-9468271c] {
+  position: absolute;
+  top: calc(var(--unit) * 20);
+  left: calc(var(--unit) * 238);
+  display: flex;
+  gap: calc(var(--unit) * 12);
+}
+
+/* The clip's slots, 76 square, their counts at 16 */
+.item[data-v-9468271c] {
+  --count-size: 21cqh;
+
+  width: calc(var(--unit) * 76);
+  height: calc(var(--unit) * 76);
+}
+
+/* The unlock line, wrapped at 320 and set centred on the row, behind its info mark 12 to the left */
+.unlock[data-v-9468271c] {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * 528);
+  width: calc(var(--unit) * 320);
+  font-size: calc(var(--unit) * 27);
+  letter-spacing: calc(var(--unit) * 2);
+  line-height: calc(var(--unit) * 32);
+  translate: 0 -50%;
+}
+.unlock[data-v-9468271c]::before {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * -45);
+  width: calc(var(--unit) * 31);
+  height: calc(var(--unit) * 31);
+  border: calc(var(--unit) * 1) solid #d4cfc8;
+  border-radius: 50%;
+  background: #fbfaf4;
+  color: #36362f;
+  content: "i";
+  font-size: calc(var(--unit) * 20);
+  letter-spacing: 0;
+  line-height: calc(var(--unit) * 31);
+  text-align: center;
+  translate: 0 -50%;
+}
+
+/* The row's end, 189 wide: the tick where the level is achieved, else the not achieved block */
+.achieved[data-v-9468271c],
+.status[data-v-9468271c] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  width: calc(var(--unit) * 189);
+  align-items: center;
+  justify-content: center;
+}
+.check[data-v-9468271c] {
+  width: calc(var(--unit) * 52);
+  height: calc(var(--unit) * 47);
+  margin-bottom: calc(var(--unit) * 4);
+  fill: #8cbc2c;
+}
+.status[data-v-9468271c] {
+  background: #ebe3d9;
+  color: #92867a;
+  font-size: calc(var(--unit) * 31);
+}
+/* The head, title and back control the party setup and reputation screens share */
+.head[data-v-9468271c] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--unit) * 20) calc(var(--unit) * 40);
+}
+.title[data-v-9468271c] {
+  margin: 0;
+  font-size: calc(var(--unit) * 24);
+}
+.back[data-v-9468271c],
+.step[data-v-9468271c] {
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  border: none;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.15);
+  color: #ece5d8;
+  font: inherit;
+  font-size: calc(var(--unit) * 28);
+}
+
+.glyph[data-v-4f52a820] {
+  width: calc(var(--unit) * 48);
+  height: calc(var(--unit) * 48);
+  fill: #212121;
+}
+.ring[data-v-4f52a820] {
+  fill: none;
+  stroke: #858585;
+}
+
+.server-bar[data-v-6b68b3eb] {
+  position: relative;
+  display: grid;
+  width: calc(var(--unit) * 456);
+  height: calc(var(--unit) * 75);
+  box-sizing: border-box;
+  border: calc(var(--unit) * 1.5) solid rgb(120 124 130 / 0.6);
+  background: rgb(42 45 52 / 0.74);
+  place-items: center;
+}
+.mark[data-v-6b68b3eb] {
+  position: absolute;
+  top: 50%;
+  left: calc(var(--unit) * 20);
+  width: calc(var(--unit) * 46);
+  height: calc(var(--unit) * 46);
+  translate: 0 -50%;
+}
+.diamond[data-v-6b68b3eb] {
+  fill: #e4e0d4;
+}
+.tick[data-v-6b68b3eb] {
+  fill: #1c1c1c;
+}
+.name[data-v-6b68b3eb] {
+  margin: 0;
+  color: #d4d4d4;
+  font-size: calc(var(--unit) * 33);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1;
+}
+
+.shop-screen[data-v-af7ce84f] {
+  position: absolute;
+  inset: 0;
+  color: #fff7ea;
+}
+.heading[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 14);
+  left: calc(var(--unit) * 34);
+  line-height: calc(var(--unit) * 40);
+}
+.balances[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 34);
+  left: calc(var(--unit) * 1296);
+  display: flex;
+  gap: calc(var(--unit) * 36);
+  margin: 0;
+  padding: 0;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  list-style: none;
+}
+.balance[data-v-af7ce84f] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 8);
+}
+.balance-icon[data-v-af7ce84f] {
+  width: calc(var(--unit) * 20);
+  height: calc(var(--unit) * 20);
+  background: #7aa9e8;
+  transform: rotate(45deg);
+}
+.top-up[data-v-af7ce84f] {
+  margin-left: calc(var(--unit) * 4);
+  color: #e8d9b0;
+}
+.close[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 19);
+  left: calc(var(--unit) * 1815);
+}
+.close svg[data-v-af7ce84f],
+.cancel svg[data-v-af7ce84f] {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
+  fill: none;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-width: 3;
+}
+.tabs[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 97);
+  left: calc(var(--unit) * 440);
+  display: flex;
+  gap: calc(var(--unit) * 40);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tab[data-v-af7ce84f] {
+  height: calc(var(--unit) * 60);
+  padding: 0 calc(var(--unit) * 22);
+  border: none;
+  background: none;
+  color: inherit;
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  cursor: inherit;
+}
+.tab[aria-pressed="true"][data-v-af7ce84f] {
+  background: #ede5d7;
+  color: #2b2a26;
+}
+.goods[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 200);
+  left: calc(var(--unit) * 450);
+  display: grid;
+  grid-template-columns: repeat(4, calc(var(--unit) * 310));
+  gap: calc(var(--unit) * 32);
+  width: calc(var(--unit) * 1350);
+  height: calc(var(--unit) * 860);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+.good[data-v-af7ce84f] {
+  position: relative;
+  width: 100%;
+  height: calc(var(--unit) * 296);
+  padding: 0;
+  border: none;
+  background: #6f78ab;
+  color: inherit;
+  cursor: inherit;
+}
+.good[aria-pressed="true"][data-v-af7ce84f] {
+  outline: calc(var(--unit) * 2) solid #fdfdfd;
+}
+.good-name[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 166);
+  right: calc(var(--unit) * 8);
+  left: calc(var(--unit) * 8);
+  font-size: calc(var(--unit) * 22);
+  line-height: calc(var(--unit) * 26);
+  text-align: center;
+}
+.good-limit[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 214);
+  right: calc(var(--unit) * 8);
+  left: calc(var(--unit) * 8);
+  font-size: calc(var(--unit) * 18);
+  line-height: calc(var(--unit) * 22);
+  text-align: center;
+}
+.good-price[data-v-af7ce84f] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--unit) * 10);
+  height: calc(var(--unit) * 48);
+  background: #5b6882;
+  font-size: calc(var(--unit) * 24);
+}
+.price-icon[data-v-af7ce84f] {
+  width: calc(var(--unit) * 18);
+  height: calc(var(--unit) * 18);
+  background: #7aa9e8;
+  transform: rotate(45deg);
+}
+.detail[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 250);
+  left: calc(var(--unit) * 505);
+  width: calc(var(--unit) * 910);
+  height: calc(var(--unit) * 580);
+  background: #e8e1cd;
+  color: #2b2a26;
+}
+.detail-good[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 95);
+  left: calc(var(--unit) * 65);
+  display: flex;
+  width: calc(var(--unit) * 780);
+  height: calc(var(--unit) * 170);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--unit) * 8);
+  background: #6f78ab;
+  color: #fff7ea;
+}
+.detail-good p[data-v-af7ce84f] {
+  margin: 0;
+}
+.detail-name[data-v-af7ce84f] {
+  font-size: calc(var(--unit) * 28);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 34);
+}
+.detail-price[data-v-af7ce84f] {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 10);
+  font-size: calc(var(--unit) * 24);
+  line-height: calc(var(--unit) * 28);
+}
+.detail-line[data-v-af7ce84f] {
+  font-size: calc(var(--unit) * 18);
+  line-height: calc(var(--unit) * 22);
+}
+.amount[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 380);
+  left: calc(var(--unit) * 183);
+  width: calc(var(--unit) * 540);
+}
+.amount[data-v-af7ce84f]::-webkit-slider-runnable-track {
+  background: #9aa3b8;
+}
+.amount[data-v-af7ce84f]::-webkit-slider-thumb {
+  background: #2b2a26;
+}
+.amount-value[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 366);
+  left: calc(var(--unit) * 728);
+  margin: 0;
+  font-size: calc(var(--unit) * 26);
+  line-height: calc(var(--unit) * 30);
+}
+.cancel[data-v-af7ce84f],
+.buy[data-v-af7ce84f] {
+  position: absolute;
+  top: calc(var(--unit) * 478);
+  height: calc(var(--unit) * 62);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--unit) * 4);
+  cursor: inherit;
+}
+.cancel[data-v-af7ce84f] {
+  left: calc(var(--unit) * 70);
+  width: calc(var(--unit) * 145);
+  background: #6f78ab;
+  color: #fff7ea;
+}
+.buy[data-v-af7ce84f] {
+  left: calc(var(--unit) * 630);
+  width: calc(var(--unit) * 210);
+  background: #3d4a68;
+  color: #fff7ea;
+  font-size: calc(var(--unit) * 24);
+}
+.buy[data-v-af7ce84f]:disabled {
+  opacity: 0.4;
+}
+/* The quantity slider the crafting and shop screens share, each screen sets its own position and track colour */
+.amount[data-v-af7ce84f] {
+  height: calc(var(--unit) * 14);
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: inherit;
+}
+.amount[data-v-af7ce84f]::-webkit-slider-runnable-track {
+  height: calc(var(--unit) * 4);
+}
+.amount[data-v-af7ce84f]::-webkit-slider-thumb {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  margin-top: calc(var(--unit) * -5);
+  border-radius: calc(var(--unit) * 2);
+  transform: rotate(45deg);
+  appearance: none;
+}
+
+/* Measured off the English PC client's weapon screen in the 7.1 Silver Light clip (captures/weapon-enhance-jXrYcFHiVnI.mp4,
+   frame at 2 seconds, Enhance tab at level 1, and frame at 92 seconds, Refine tab), at 1920 by 864 pixels, in units of the
+   1080-high frame: a pixel there is 1.25 units. The name's line sits 60 units down, the tabs' lit row at 280, the level at
+   164, the EXP bar at 235, the materials' panel from 600, the action at 965 and the way back at 25. Their colours are
+   provisional, sampled by eye off the frame's violet glass */
+.weapon-menu[data-v-f3f59f0e] {
+  position: absolute;
+  inset: 0;
+  color: #fff;
+}
+.breadcrumb[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 40);
+  left: calc(var(--unit) * 269);
+  margin: 0;
+  color: #e8d9a6;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 40);
+}
+.tabs[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 245);
+  left: calc(var(--unit) * 170);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Each tab is a row of the game's menu, its label in cream and the open one in white, on the game's 87.5-unit pitch */
+.tab[data-v-f3f59f0e] {
+  display: block;
+  width: calc(var(--unit) * 300);
+  height: calc(var(--unit) * 70);
+  padding: 0;
+  border: none;
+  background: none;
+  color: rgb(236 229 216 / 0.7);
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 42);
+  font-weight: 600;
+  text-align: left;
+}
+.tab[aria-pressed="true"][data-v-f3f59f0e] {
+  color: #fff;
+}
+.stars[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 100);
+  left: calc(var(--unit) * 1380);
+  display: flex;
+  margin: 0;
+  gap: calc(var(--unit) * 4);
+}
+.star[data-v-f3f59f0e] {
+  width: calc(var(--unit) * 22);
+  height: calc(var(--unit) * 22);
+}
+
+/* The refinement rank sits at the panel's right, as a gold figure in its own pill */
+.refinement[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 100);
+  right: calc(var(--unit) * 30);
+  margin: 0;
+  padding: 0 calc(var(--unit) * 14);
+  border-radius: calc(var(--unit) * 4);
+  background: rgb(0 0 0 / 0.35);
+  color: #f0d27a;
+  font-size: calc(var(--unit) * 30);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 36);
+}
+.level[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 140);
+  left: calc(var(--unit) * 1380);
+  display: flex;
+  align-items: center;
+  margin: 0;
+  gap: calc(var(--unit) * 14);
+}
+.level-text[data-v-f3f59f0e] {
+  font-size: calc(var(--unit) * 50);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 60);
+  text-shadow: 0 calc(var(--unit) * 1) calc(var(--unit) * 3) rgb(0 0 0 / 0.4);
+}
+.sparks[data-v-f3f59f0e] {
+  display: flex;
+  gap: calc(var(--unit) * 6);
+}
+.experience-text[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 150);
+  right: calc(var(--unit) * 30);
+  margin: 0;
+  color: #d9c8ff;
+  font-size: calc(var(--unit) * 34);
+  font-weight: 600;
+  line-height: calc(var(--unit) * 44);
+}
+
+/* The EXP bar, a thin track across the panel with its fill to the share of the next level held */
+.experience[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 233);
+  left: calc(var(--unit) * 1365);
+  width: calc(var(--unit) * 910);
+  height: calc(var(--unit) * 4);
+  background: rgb(255 255 255 / 0.2);
+}
+.fill[data-v-f3f59f0e] {
+  display: block;
+  width: calc(var(--experience-ratio) * 100%);
+  height: 100%;
+  background: #f5c542;
+}
+.panel[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 600);
+  left: calc(var(--unit) * 1380);
+  width: calc(var(--unit) * 870);
+  height: calc(var(--unit) * 330);
+}
+
+/* The action is the game's wide button at the panel's foot, its label in gold on a cream rectangle */
+.action[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 965);
+  left: calc(var(--unit) * 1890);
+  width: calc(var(--unit) * 360);
+  height: calc(var(--unit) * 79);
+  border: none;
+  border-radius: calc(var(--unit) * 6);
+  background: #ece5d8;
+  color: #3b4255;
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 36);
+  font-weight: 600;
+}
+.action[data-v-f3f59f0e]:disabled {
+  background: rgb(236 229 216 / 0.35);
+  color: rgb(59 66 85 / 0.6);
+}
+
+/* The way back at the top right, the game's round return control */
+.close[data-v-f3f59f0e] {
+  position: absolute;
+  top: calc(var(--unit) * 25);
+  left: calc(var(--unit) * 2177);
+  width: calc(var(--unit) * 72);
+  height: calc(var(--unit) * 69);
+  border: none;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 0.3);
+  color: #fff;
+  cursor: inherit;
+  font: inherit;
+  font-size: calc(var(--unit) * 40);
+  line-height: 1;
+}
+/* The six ascension phases, each a small star the phases reached light */
+.spark[data-v-f3f59f0e] {
+  width: calc(var(--unit) * 14);
+  height: calc(var(--unit) * 14);
+  background: rgb(255 255 255 / 0.3);
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
+}
+.spark.lit[data-v-f3f59f0e] {
+  background: #fff;
+}
+.star[data-v-f3f59f0e] {
+  background: #f5c542;
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
+}
+
+p[data-v-2456390c] {
+  margin: 0;
+  font-size: calc(var(--unit) * 22);
+}
+.fate-points[data-v-2456390c] {
+  margin-left: calc(var(--unit) * 12);
+  opacity: 0.7;
+}
+
+.pool[data-v-abdcc945],
+.pool-items[data-v-abdcc945] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pool[data-v-abdcc945] {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--unit) * 12);
+  font-size: calc(var(--unit) * 18);
+}
+.pool-rarity[data-v-abdcc945] {
+  display: flex;
+  gap: calc(var(--unit) * 16);
+}
+.pool-items[data-v-abdcc945] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--unit) * 4) calc(var(--unit) * 16);
+}
+.pool-item[data-featured="true"][data-v-abdcc945] {
+  color: #ffd780;
+}
+/* The overlay, panel, title and close the wish screens share, WishDetails and WishHistory alike */
+.wish-details[data-v-abdcc945],
+.wish-history[data-v-abdcc945] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  background: rgb(0 0 0 / 0.5);
+  place-items: center;
+}
+.panel[data-v-abdcc945] {
+  position: relative;
+  display: flex;
+  width: calc(var(--unit) * 1200);
+  flex-direction: column;
+  gap: calc(var(--unit) * 12);
+  padding: calc(var(--unit) * 32) calc(var(--unit) * 40);
+  box-sizing: border-box;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(28 32 42 / 0.96);
+  color: #ece5d8;
+}
+.title[data-v-abdcc945] {
+  margin: 0;
+  font-size: calc(var(--unit) * 28);
+}
+.close[data-v-abdcc945] {
+  position: absolute;
+  top: calc(var(--unit) * 24);
+  right: calc(var(--unit) * 24);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.panel[data-v-86f92bab] {
+  max-height: 100%;
+}
+.draws[data-v-86f92bab] {
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+  font-size: calc(var(--unit) * 18);
+}
+.draw[data-v-86f92bab] {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr auto;
+  gap: calc(var(--unit) * 16);
+  padding: calc(var(--unit) * 6) 0;
+}
+/* The overlay, panel, title and close the wish screens share, WishDetails and WishHistory alike */
+.wish-details[data-v-86f92bab],
+.wish-history[data-v-86f92bab] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  background: rgb(0 0 0 / 0.5);
+  place-items: center;
+}
+.panel[data-v-86f92bab] {
+  position: relative;
+  display: flex;
+  width: calc(var(--unit) * 1200);
+  flex-direction: column;
+  gap: calc(var(--unit) * 12);
+  padding: calc(var(--unit) * 32) calc(var(--unit) * 40);
+  box-sizing: border-box;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(28 32 42 / 0.96);
+  color: #ece5d8;
+}
+.title[data-v-86f92bab] {
+  margin: 0;
+  font-size: calc(var(--unit) * 28);
+}
+.close[data-v-86f92bab] {
+  position: absolute;
+  top: calc(var(--unit) * 24);
+  right: calc(var(--unit) * 24);
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+}
+
+.wish-screen[data-v-669dc4ab] {
+  position: absolute;
+  inset: 0;
+  background: rgb(28 32 42 / 0.92);
+  color: #fff;
+}
+.banners[data-v-669dc4ab],
+.currencies[data-v-669dc4ab],
+.links[data-v-669dc4ab],
+.result-list[data-v-669dc4ab] {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.banners[data-v-669dc4ab] {
+  position: absolute;
+  top: 0;
+  left: calc(var(--unit) * 678);
+  display: flex;
+  gap: calc(var(--unit) * 27);
+}
+.banner[data-v-669dc4ab] {
+  width: calc(var(--unit) * 172);
+  height: calc(var(--unit) * 92);
+  border: calc(var(--unit) * 2) solid rgb(255 255 255 / 0.6);
+}
+.banner[aria-pressed="true"][data-v-669dc4ab] {
+  background: rgb(253 247 242 / 0.85);
+}
+.currencies[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 30);
+  left: calc(var(--unit) * 1440);
+  display: flex;
+  gap: calc(var(--unit) * 24);
+  font-size: calc(var(--unit) * 20);
+}
+.currency-name[data-v-669dc4ab] {
+  opacity: 0.7;
+}
+.back[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 17);
+  left: calc(var(--unit) * 1812);
+  width: calc(var(--unit) * 56);
+  height: calc(var(--unit) * 56);
+  font-size: calc(var(--unit) * 36);
+}
+
+/* The card is the plate's art, so only its words are drawn over it, each at the game's place on the banner */
+.card[data-v-669dc4ab] {
+  position: absolute;
+  inset: 0;
+}
+.tag[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 213);
+  left: calc(var(--unit) * 322);
+  margin: 0;
+  padding: calc(var(--unit) * 4) calc(var(--unit) * 16);
+  border-radius: calc(var(--unit) * 18);
+  background: rgb(62 195 238);
+  font-size: calc(var(--unit) * 22);
+}
+.card-title[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 250);
+  left: calc(var(--unit) * 377);
+  margin: 0;
+  color: #3e3c3d;
+  font-size: calc(var(--unit) * 58);
+  line-height: calc(var(--unit) * 72);
+}
+.probability[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 455);
+  left: calc(var(--unit) * 377);
+  margin: 0;
+  color: #3e3c3d;
+  font-size: calc(var(--unit) * 26);
+}
+.rate-up[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 500);
+  left: calc(var(--unit) * 377);
+  width: calc(var(--unit) * 462);
+  box-sizing: border-box;
+  margin: 0;
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 36);
+  background: rgb(62 195 238);
+  font-size: calc(var(--unit) * 20);
+}
+.featured[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 672);
+  left: calc(var(--unit) * 1068);
+}
+.featured-name[data-v-669dc4ab] {
+  margin: 0;
+  font-size: calc(var(--unit) * 40);
+}
+.featured-title[data-v-669dc4ab] {
+  width: calc(var(--unit) * 348);
+  box-sizing: border-box;
+  margin: calc(var(--unit) * 4) 0 0;
+  padding: 0 calc(var(--unit) * 12);
+  background: rgb(20 30 50 / 0.7);
+  font-size: calc(var(--unit) * 22);
+}
+.links[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 1010);
+  left: calc(var(--unit) * 68);
+  display: flex;
+  gap: calc(var(--unit) * 20);
+}
+.link[data-v-669dc4ab] {
+  width: calc(var(--unit) * 172);
+  height: calc(var(--unit) * 32);
+  font-size: calc(var(--unit) * 22);
+}
+.path[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 940);
+  left: calc(var(--unit) * 68);
+}
+.sets[data-v-669dc4ab] {
+  position: absolute;
+  top: calc(var(--unit) * 975);
+  left: calc(var(--unit) * 1147);
+  display: flex;
+  gap: calc(var(--unit) * 33);
+}
+.set[data-v-669dc4ab] {
+  display: flex;
+  width: calc(var(--unit) * 340);
+  height: calc(var(--unit) * 72);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #3b4255;
+  font-size: calc(var(--unit) * 22);
+}
+.set-label[data-v-669dc4ab] {
+  font-weight: 600;
+}
+.cost[data-v-669dc4ab] {
+  font-size: calc(var(--unit) * 18);
+  opacity: 0.7;
+}
+.results[data-v-669dc4ab] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  background: rgb(255 255 255 / 0.92);
+  place-items: center;
+}
+.result-list[data-v-669dc4ab] {
+  display: flex;
+  gap: calc(var(--unit) * 12);
+}
+.result[data-v-669dc4ab] {
+  display: flex;
+  width: calc(var(--unit) * 120);
+  height: calc(var(--unit) * 420);
+  flex-direction: column;
+  justify-content: end;
+  border-radius: calc(var(--unit) * 8);
+  background: #5180b6;
+  color: #ece5d8;
+  font-size: calc(var(--unit) * 18);
+  text-align: center;
+}
+.result[data-rarity="4"][data-v-669dc4ab] {
+  background: #8d6fb5;
+}
+.result[data-rarity="5"][data-v-669dc4ab] {
+  background: #c18b4c;
+}
+.result-stella-fortuna[data-v-669dc4ab] {
+  font-size: calc(var(--unit) * 14);
+}
+.result-return[data-v-669dc4ab] {
+  padding-bottom: calc(var(--unit) * 8);
+  font-size: calc(var(--unit) * 14);
+}
+
+.levels button[data-v-529b74f5] {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  min-width: 20rem;
+  padding: 0.5rem 1rem;
+  background: rgb(255 255 255 / 8%);
+}
+.levels button[data-v-529b74f5]:disabled {
+  opacity: 0.5;
+}
+/* The screen's colours and placement are provisional until the recording shows them */
+.blessing-screen[data-v-529b74f5],
+.worship-screen[data-v-529b74f5] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(20 18 16 / 55%);
+  color: rgb(245 240 230);
+}
+.title[data-v-529b74f5] {
+  position: absolute;
+  top: 6%;
+  left: 6%;
+  font-size: 2rem;
+}
+.close[data-v-529b74f5] {
+  position: absolute;
+  top: 6%;
+  right: 6%;
+  font-size: 2rem;
+}
+.blessing[data-v-529b74f5],
+.worship[data-v-529b74f5] {
+  position: absolute;
+  top: 6%;
+  right: 16%;
+  font-size: 1.25rem;
+}
+.held[data-v-529b74f5],
+.pool[data-v-529b74f5] {
+  position: absolute;
+  top: 16%;
+  left: 6%;
+  font-size: 1.25rem;
+}
+.levels[data-v-529b74f5],
+.members[data-v-529b74f5] {
+  position: absolute;
+  top: 26%;
+  left: 6%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}