/* Daeva Cheat Sheets: guide art.
   Only what the kept guide art needs: each guide's colours (.gd-*), the header art, the diagrams,
   and the bullet symbols. Generated from the guide canvases; edit the canvas, then rebuild. */

.gd-hit45 {
  --band: #C9D5FF;
  --pink: #FFBDD6;
}
.gd-abyss {
  --band: #2E3170;
  --pink: #FFBDD6;
}
.gd-pretty {
  --band: #FFDDE8;
  --pink: #FFBDD6;
}
.gd-laghell {
  --band: #E6E3F2;
  --pink: #FFBDD6;
}
.gd-krao {
  --band: #FFE6A6;
  --pink: #FFBDD6;
}
.gd-draupnir {
  --band: #BCE6EA;
  --pink: #FFBDD6;
}
.gd-urugugu {
  --band: #CBEBD5;
  --pink: #FFBDD6;
}
.gd-vakron {
  --band: #DCD3FF;
  --pink: #FFBDD6;
}
.gd-fire {
  --band: #FFC2E2;
  --accent: #FFE07A;
}
.gd-ferocious {
  --band: #DDEFB6;
  --pink: #FFBDD6;
}
.gd-arkanis {
  --band: #FFD6C9;
  --pink: #FFBDD6;
}
.gd-deus {
  --band: #CFE3F2;
  --pink: #FFBDD6;
}
.gd-ludra {
  --band: #ECC8F4;
  --pink: #FFBDD6;
}

.fill-band { fill: var(--band); }
.fill-pink { fill: var(--pink); }
.fill-accent { fill: var(--accent); }
.stroke-band { stroke: var(--band); }
.stroke-pink { stroke: var(--pink); }
.stroke-accent { stroke: var(--accent); }

/* ---- art classes ---- */
.gs-abyss-24 {
  position: relative;
  height: 200px;
  box-sizing: border-box;
  padding-top: 42px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-abyss-26 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 92px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #FFFFFF;
}
.gs-abyss-27 {
  position: relative;
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: #FFFFFF;
}
.gs-arkanis-17 {
  position: absolute;
  left: 0;
  top: -39px;
  display: block;
  transform: scaleY(-1);
}
.gs-arkanis-18 {
  position: absolute;
  left: 126px;
  top: 128px;
  transform: rotate(-24deg);
}
.gs-arkanis-20 {
  position: absolute;
  left: 678px;
  top: 174px;
  transform: rotate(40deg);
}
.gs-arkanis-21 {
  position: absolute;
  left: 690px;
  top: 60px;
  transform: rotate(16deg);
}
.gs-arkanis-22 {
  position: absolute;
  left: 72px;
  top: 52px;
}
.gs-arkanis-23 {
  position: absolute;
  left: 744px;
  top: 136px;
  transform: rotate(-30deg);
}
.gs-arkanis-24 {
  position: absolute;
  left: 92px;
  top: 188px;
  transform: rotate(18deg);
}
.gs-arkanis-26 {
  position: relative;
  height: 256px;
  box-sizing: border-box;
  padding-top: 40px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-arkanis-29 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -1px;
  color: #23255C;
  text-align: center;
}
.gs-block {
  display: block;
}
.gs-deus-10 {
  font-size: 96px;
}
.gs-deus-20 {
  position: relative;
  height: 252px;
  box-sizing: border-box;
  padding-top: 44px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-deus-9 {
  font-size: 50px;
}
.gs-draupnir-8 {
  position: relative;
  height: 270px;
  box-sizing: border-box;
  padding-top: 56px;
  overflow: hidden;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-ferocious-10 {
  position: absolute;
  left: -40px;
  top: -40px;
  display: block;
}
.gs-ferocious-12 {
  position: absolute;
  left: 0;
  top: -1px;
  display: block;
  transform: scaleY(-1);
}
.gs-ferocious-13 {
  position: absolute;
  left: 0;
  top: 6px;
  display: block;
}
.gs-ferocious-14 {
  position: absolute;
  left: 0;
  top: 86px;
  width: 80px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.gs-ferocious-15 {
  position: absolute;
  left: 180px;
  top: 86px;
  width: 80px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.gs-ferocious-16 {
  position: absolute;
  left: 90px;
  top: 86px;
  width: 80px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.gs-ferocious-17 {
  position: absolute;
  right: -40px;
  top: -40px;
  display: block;
  transform: scaleX(-1);
}
.gs-ferocious-18 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-ferocious-19 {
  position: relative;
  height: 316px;
  box-sizing: border-box;
  padding-top: 64px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-ferocious-2 {
  flex: none;
  position: relative;
  width: 260px;
  height: 120px;
  margin: 0;
  border-radius: 18px;
  background: #EAF4D2;
}
.gs-ferocious-21 {
  position: relative;
  width: 260px;
  height: 120px;
  margin: 0;
  border-radius: 18px;
  background: #EAF4D2;
}
.gs-ferocious-7 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 76px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #23255C;
  text-align: center;
}
.gs-ferocious-9 {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}
.gs-fire-11 {
  position: absolute;
  left: 0;
  top: -44px;
  display: block;
}
.gs-fire-12 {
  position: absolute;
  left: 124px;
  top: 170px;
}
.gs-fire-13 {
  position: absolute;
  left: 670px;
  top: 178px;
}
.gs-fire-14 {
  position: absolute;
  left: 704px;
  top: 66px;
}
.gs-fire-15 {
  position: absolute;
  left: 84px;
  top: 60px;
}
.gs-fire-16 {
  position: relative;
  height: 270px;
  box-sizing: border-box;
  padding-top: 64px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-fire-17 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 78px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #23255C;
}
.gs-hit45-19 {
  font-size: 132px;
  line-height: 1;
  letter-spacing: -2px;
}
.gs-hit45-20 {
  font-size: 34px;
  line-height: 1.2;
}
.gs-hit45-27 {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  color: #23255C;
}
.gs-hit45-30 {
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}
.gs-hit45-35 {
  position: absolute;
  left: 676px;
  top: 196px;
}
.gs-hit45-36 {
  position: absolute;
  left: 706px;
  top: 52px;
}
.gs-hit45-37 {
  position: absolute;
  left: 92px;
  top: 62px;
}
.gs-hit45-38 {
  position: relative;
  height: 314px;
  box-sizing: border-box;
  padding-top: 44px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-hit45-4 {
  display: block;
  margin-bottom: 18px;
}
.gs-hit45-5 {
  display: block;
  transform: scaleX(-1);
  margin-bottom: 18px;
}
.gs-hit45-7 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.gs-krao-10 {
  position: absolute;
  left: 86px;
  top: 64px;
}
.gs-krao-11 {
  position: relative;
  height: 220px;
  box-sizing: border-box;
  padding-top: 50px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-krao-12 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 88px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #23255C;
}
.gs-krao-8 {
  position: absolute;
  left: 128px;
  top: 112px;
}
.gs-krao-9 {
  position: absolute;
  left: 698px;
  top: 78px;
}
.gs-laghell-10 {
  position: relative;
  height: 180px;
  box-sizing: border-box;
  padding-top: 36px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-laghell-11 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 80px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #23255C;
}
.gs-laghell-9 {
  position: absolute;
  left: 0;
  top: -23px;
  display: block;
}
.gs-ludra-29 {
  position: absolute;
  left: 0;
  top: -31px;
  display: block;
  transform: scaleY(-1);
}
.gs-ludra-30 {
  position: relative;
  height: 206px;
  box-sizing: border-box;
  padding-top: 44px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-pretty-10 {
  position: absolute;
  left: 0;
  top: -17px;
  display: block;
}
.gs-pretty-11 {
  position: absolute;
  left: 136px;
  top: 122px;
}
.gs-pretty-12 {
  position: absolute;
  left: 670px;
  top: 134px;
}
.gs-pretty-13 {
  position: absolute;
  left: 700px;
  top: 46px;
}
.gs-pretty-14 {
  position: absolute;
  left: 732px;
  top: 152px;
}
.gs-pretty-15 {
  position: absolute;
  left: 82px;
  top: 50px;
}
.gs-pretty-16 {
  position: absolute;
  left: 92px;
  top: 166px;
}
.gs-pretty-17 {
  position: relative;
  height: 230px;
  box-sizing: border-box;
  padding-top: 38px;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-pretty-4 {
  font-size: 54px;
}
.gs-pretty-5 {
  font-size: 92px;
}
.gs-s10 {
  position: relative;
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}
.gs-s18 {
  position: absolute;
  left: 0;
  top: -1px;
  display: block;
}
.gs-s2 {
  display: block;
  margin-top: -1px;
}
.gs-s26 {
  position: relative;
  margin: 14px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}
.gs-s3 {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.gs-s4 {
  position: relative;
}
.gs-s53 {
  position: absolute;
  left: 0;
  top: -35px;
  display: block;
  transform: scaleY(-1);
}
.gs-s54 {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  letter-spacing: -1px;
  color: #23255C;
}
.gs-s56 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #23255C;
}
.gs-s57 {
  position: relative;
  margin: 0;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -1px;
  color: #23255C;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-s58 {
  position: relative;
  margin: 10px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
}
.gs-s6 {
  position: absolute;
  left: 0;
  bottom: -1px;
  display: block;
}
.gs-urugugu-12 {
  position: relative;
  height: 270px;
  box-sizing: border-box;
  padding-top: 40px;
  overflow: hidden;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gs-vakron-15 {
  position: absolute;
  left: 139px;
  top: 108px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', sans-serif;
  font-size: 11px;
  line-height: 1;
}
.gs-vakron-16 {
  position: absolute;
  left: 186px;
  top: 64px;
}
.gs-vakron-17 {
  position: absolute;
  left: 20px;
  top: 108px;
  width: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
.gs-vakron-18 {
  position: absolute;
  left: 249px;
  top: 108px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', sans-serif;
  font-size: 11px;
  line-height: 1;
}
.gs-vakron-19 {
  position: absolute;
  left: 359px;
  top: 108px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Mochiy Pop One', 'Arial Rounded MT Bold', sans-serif;
  font-size: 11px;
  line-height: 1;
}
.gs-vakron-20 {
  position: absolute;
  left: 40px;
  top: 40px;
  display: block;
}
.gs-vakron-21 {
  position: absolute;
  left: 440px;
  top: 108px;
  width: 200px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 22px;
}
.gs-vakron-22 {
  position: absolute;
  left: 640px;
  top: 52px;
}
.gs-vakron-23 {
  position: absolute;
  left: 692px;
  top: 184px;
  display: block;
}
.gs-vakron-24 {
  position: absolute;
  left: 96px;
  top: 168px;
}
.gs-vakron-25 {
  position: relative;
  height: 280px;
  box-sizing: border-box;
  padding-top: 40px;
  overflow: hidden;
  background: var(--band);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gs-vakron-26 {
  position: relative;
  width: 704px;
  height: 134px;
}

/* ---- layout grids carried over from the guides ---- */
.wg-1 {
  display: grid;
  grid-template-columns: 176px 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.wg-2 {
  display: grid;
  grid-template-columns: 196px 88px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.wg-3 {
  display: grid;
  grid-template-columns: 32px 140px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.wg-4 {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 140px;
  gap: 8px 16px;
  align-items: start;
}
.wg-5 {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 16px;
  align-items: start;
}
.wg-6 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  align-items: start;
}
/* Settings lists: one ruled row per setting, and grouped settings read as one bracketed set. */
.w-list:has(> li.wg-1, > li.wg-2) { gap: 0; }
.w-list > li:is(.wg-1, .wg-2) { padding-block: 16px; border-top: 1px solid var(--line); }
.w-list > li:is(.wg-1, .wg-2):last-child { border-bottom: 1px solid var(--line); }
li:is(.wg-1, .wg-2) > .w-stack:first-child {
  gap: 4px;
  padding-left: 10px;
  border-left: 3px solid var(--pink);
  font-weight: 700;
  color: var(--ink);
}
li:is(.wg-1, .wg-2) > .w-bold { color: var(--ink); }
li:is(.wg-1, .wg-2) > .w-svg, li:is(.wg-1, .wg-2) > .w-icon { margin-top: 3px; }
@media (max-width: 600px) {
  .wg-1 { grid-template-columns: minmax(0, 1fr); }
  .wg-2 { grid-template-columns: minmax(0, 1fr); }
  .wg-3 { grid-template-columns: minmax(0, 1fr); }
  .wg-4 { grid-template-columns: minmax(0, 1fr); }
  .wg-5 { grid-template-columns: minmax(0, 1fr); }
  .wg-6 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- scaled art boxes ---- */
.fit-704x134 {
  aspect-ratio: 704 / 134;
  max-width: 704px;
}
.fit-260x120 {
  aspect-ratio: 260 / 120;
  max-width: 260px;
}
.hero-hit45 {
  aspect-ratio: 816 / 314;
}
.hero-abyss {
  aspect-ratio: 816 / 247;
}
.hero-pretty {
  aspect-ratio: 816 / 257;
}
.hero-laghell {
  aspect-ratio: 816 / 205;
}
.hero-krao {
  aspect-ratio: 816 / 255;
}
.hero-draupnir {
  aspect-ratio: 816 / 270;
}
.hero-urugugu {
  aspect-ratio: 816 / 270;
}
.hero-vakron {
  aspect-ratio: 816 / 280;
}
.hero-fire {
  aspect-ratio: 816 / 270;
}
.hero-ferocious {
  aspect-ratio: 816 / 316;
}
.hero-arkanis {
  aspect-ratio: 816 / 295;
}
.hero-deus {
  aspect-ratio: 816 / 281;
}
.hero-ludra {
  aspect-ratio: 816 / 237;
}