:root {
  --page-w: 6.125in;
  --page-h: 9.25in;
  --trim-w: 6in;
  --trim-h: 9in;
  --bleed: 0.125in;
  --outside-margin: 0.25in;
  --gutter-margin: 0.625in;
  --safe-top: calc(var(--bleed) + 0.25in);
  --safe-bottom: calc(var(--bleed) + 0.25in);
  --safe-outside: calc(var(--bleed) + var(--outside-margin));
  --safe-gutter: var(--gutter-margin);
  --frosted-mint: #d8f3dc;
  --celadon-light: #b7e4c7;
  --celadon: #95d5b2;
  --mint-leaf: #74c69d;
  --bg: #d8f3dc;
  --paper: #d8f3dc;
  --ink: #15120f;
  --muted: #2f6f51;
  --line: rgb(70, 70, 70);
  --soft-line: rgba(8, 7, 7, 0.18);
  --card: #f6fff8;
  --tip: #b7e4c7;
  --shadow: rgba(39, 35, 44, 0.26);
  --logo-red: #e61e24;
  --killer: #9d2118;
  --victim: #4a3b68;
  --suspect-aspect: 290 / 300;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #eefaf1;
  font-family: Georgia, "Times New Roman", serif;
}

button,
input {
  font: inherit;
}

.app-shell {
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.toolbar,
.format-note {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: rgba(246, 255, 248, 0.94);
  border: 1px solid rgba(50, 40, 30, 0.16);
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(48, 37, 24, 0.12);
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

.format-note {
  margin-bottom: 22px;
  padding: 12px 16px;
  color: #6b6258;
  line-height: 1.35;
}

.eyebrow {
  margin: 0 0 4px;
  color: #6b6258;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

h2 {
  margin-bottom: 0.05in;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.29in;
  line-height: 1.05;
}

h3 {
  margin-bottom: 0.05in;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.167in;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

button,
.file-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(41, 35, 29, 0.18);
  border-radius: 6px;
  padding: 0 14px;
  background: #f6fff8;
  color: var(--ink);
  cursor: pointer;
  font-weight: 750;
}

a.file-button {
  text-decoration: none;
}

button:hover,
.file-button:hover {
  border-color: rgba(41, 35, 29, 0.42);
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.book {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 24px;
  justify-content: center;
  align-items: flex-start;
}

.book.book-instance + .book.book-instance {
  margin-top: 0.2in;
}

.book-page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 48px rgba(48, 37, 24, 0.18);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.trim-guide,
.safe-guide {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

.trim-guide {
  inset: var(--bleed) 0;
  border: 1px dashed rgba(169, 48, 37, 0.62);
}

.safe-guide {
  inset: var(--safe-top) var(--safe-outside) var(--safe-bottom) var(--safe-gutter);
  border: 1px dotted rgba(21, 91, 108, 0.58);
}

.guides-hidden .trim-guide,
.guides-hidden .safe-guide {
  display: none;
}

.page-content {
  position: absolute;
  inset: var(--safe-top) var(--safe-outside) var(--safe-bottom) var(--safe-gutter);
  z-index: 2;
  min-height: 0;
}

.left-page .trim-guide {
  inset: var(--bleed) 0 var(--bleed) var(--bleed);
}

.right-page .trim-guide {
  inset: var(--bleed) var(--bleed) var(--bleed) 0;
}

.left-page .safe-guide,
.left-page .page-content {
  inset: var(--safe-top) var(--safe-gutter) var(--safe-bottom) var(--safe-outside);
}

.right-page .safe-guide,
.right-page .page-content {
  inset: var(--safe-top) var(--safe-outside) var(--safe-bottom) var(--safe-gutter);
}

.story-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.12in;
  align-items: start;
  margin: 0.03in 0 0.09in;
}

.puzzle-number {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.28in;
  font-weight: 900;
  line-height: 1.05;
}

.suspect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.08in;
  margin-top: 0.08in;
}

.suspect-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.suspect-photo-wrap {
  position: relative;
  width: min(100%, 1.05in);
  margin: 0 auto;
  aspect-ratio: var(--suspect-aspect);
  overflow: hidden;
  border: 0.012in solid rgba(24, 21, 18, 0.28);
  border-radius: 0.06in;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72) 46%, rgba(235, 238, 232, 0.58) 78%),
    #f7f8f4;
  box-shadow:
    0 0.02in 0.04in rgba(39, 35, 44, 0.16),
    0.024in 0.024in 0 rgba(39, 35, 44, 0.26);
}

.suspect-photo-wrap::before {
  display: none;
}

.suspect-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.css-suspect {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.css-suspect::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2.5%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.24), transparent 68%);
}

.css-suspect::after {
  display: none;
}

.height-line {
  display: none;
}

.height-line-1 {
  top: 18%;
}

.height-line-2 {
  top: 34%;
}

.height-line-3 {
  top: 50%;
}

.suspect-head {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 54%;
  aspect-ratio: 1;
  z-index: 4;
  border: 0.018in solid #080908;
  border-radius: 42% 42% 45% 45%;
  background:
    radial-gradient(circle at 37% 30%, rgba(255, 237, 204, 0.65) 0 13%, transparent 14%),
    hsl(calc(var(--suspect-hue) + 25deg) 58% 72%);
  box-shadow:
    -0.062in 0.06in 0 -0.027in hsl(calc(var(--suspect-hue) + 25deg) 58% 72%),
    0.062in 0.06in 0 -0.027in hsl(calc(var(--suspect-hue) + 25deg) 58% 72%),
    -0.071in 0.06in 0 -0.02in #080908,
    0.071in 0.06in 0 -0.02in #080908,
    inset 0 -0.025in 0 rgba(121, 67, 38, 0.12),
    0 0.014in 0.012in rgba(8, 7, 7, 0.24);
  transform: translateX(-50%);
}

.suspect-head::before {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  top: -24%;
  height: 56%;
  border: 0.017in solid #080908;
  border-bottom: 0;
  border-radius: 58% 58% 38% 38%;
  background:
    radial-gradient(ellipse at 28% 48%, transparent 0 20%, #080908 21% 25%, transparent 26%),
    radial-gradient(ellipse at 52% 42%, transparent 0 22%, #080908 23% 27%, transparent 28%),
    radial-gradient(ellipse at 72% 50%, transparent 0 18%, #080908 19% 23%, transparent 24%),
    hsl(calc(var(--suspect-hue) + 185deg) 42% 22%);
}

.suspect-head::after {
  content: "";
  position: absolute;
  left: 27%;
  right: 27%;
  top: 43%;
  height: 0.08in;
  border-radius: 0 0 999px 999px;
  background:
    radial-gradient(circle at 31% 52%, #080908 0 13%, transparent 14%),
    radial-gradient(circle at 69% 52%, #080908 0 13%, transparent 14%),
    linear-gradient(#080908 0 18%, #fff 19% 100%);
  box-shadow:
    -0.052in -0.038in 0 -0.01in #080908,
    0.052in -0.038in 0 -0.01in #080908,
    0 0.086in 0 -0.034in #080908;
}

.suspect-neck {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 18%;
  height: 12%;
  z-index: 2;
  border-left: 0.016in solid #080908;
  border-right: 0.016in solid #080908;
  background: hsl(calc(var(--suspect-hue) + 25deg) 55% 68%);
  transform: translateX(-50%);
}

.suspect-body {
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 18%;
  height: 34%;
  z-index: 3;
  border: 0.02in solid #080908;
  border-radius: 32% 32% 12% 12%;
  background:
    linear-gradient(90deg, #232323 0 28%, transparent 29% 71%, #1c1c1c 72%),
    linear-gradient(90deg, transparent 0 38%, #f2eee2 39% 61%, transparent 62%),
    #262626;
  box-shadow:
    inset 0.028in 0 0 rgba(255, 255, 255, 0.08),
    0 0.012in 0.012in rgba(8, 7, 7, 0.22);
}

.suspect-body::before {
  content: "";
  position: absolute;
  top: 9%;
  left: 35%;
  width: 30%;
  height: 62%;
  clip-path: polygon(0 0, 50% 25%, 100% 0, 82% 100%, 18% 100%);
  background:
    linear-gradient(90deg, transparent 0 45%, rgba(0, 0, 0, 0.2) 45% 55%, transparent 55%),
    #f7f1e6;
}

.suspect-body::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 16%;
  right: 16%;
  height: 42%;
  background:
    linear-gradient(128deg, transparent 0 39%, #080908 40% 44%, transparent 45%),
    linear-gradient(232deg, transparent 0 39%, #080908 40% 44%, transparent 45%);
}

.suspect-arm {
  position: absolute;
  top: 51%;
  width: 14%;
  height: 27%;
  z-index: 2;
  border: 0.018in solid #080908;
  border-radius: 42% 42% 48% 48%;
  background: #252525;
}

.suspect-arm-left {
  left: 18%;
  transform: rotate(6deg);
}

.suspect-arm-right {
  right: 18%;
  transform: rotate(-6deg);
}

.suspect-arm::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -20%;
  height: 28%;
  border: 0.014in solid #080908;
  border-radius: 45%;
  background: hsl(calc(var(--suspect-hue) + 25deg) 55% 68%);
}

.suspect-leg {
  position: absolute;
  bottom: 4%;
  width: 16%;
  height: 21%;
  z-index: 2;
  border: 0.019in solid #080908;
  border-radius: 18% 18% 42% 42%;
  background: #232323;
}

.suspect-leg-left {
  left: 33%;
}

.suspect-leg-right {
  right: 33%;
}

.suspect-sign {
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 0.5%;
  z-index: 6;
  padding: 0.016in 0.014in;
  border: 0.011in solid #080908;
  border-radius: 0.018in;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 48%),
    #f7f1df;
  color: #181512;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.1in;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 0.006in rgba(122, 90, 55, 0.16),
    0 0.012in 0.014in rgba(8, 7, 7, 0.28);
}

.suspect-sign::before,
.suspect-sign::after {
  display: none;
}

.suspect-card[data-gender="female"] .suspect-head::before {
  left: -20%;
  right: -20%;
  top: -16%;
  height: 62%;
  border-radius: 60% 60% 44% 44%;
}

.suspect-card[data-gender="female"] .suspect-body {
  left: 30%;
  right: 30%;
  border-radius: 36% 36% 14% 14%;
}

.suspect-card[data-role="victim"] .suspect-photo-wrap {
  filter: saturate(0.85);
}

.suspect-card[data-role="victim"] .suspect-sign {
  text-decoration: line-through;
  text-decoration-thickness: 0.012in;
  text-decoration-color: #9d2118;
}

.clue-bubble {
  width: 100%;
  flex: 1;
  min-height: 0.54in;
  margin: 0.06in 0 0;
  padding: 0.08in 0.085in 0.09in;
  border-radius: 0.12in;
  background: var(--celadon-light);
  box-shadow: 0.035in 0.035in 0 rgba(49, 48, 48, 0.32);
  font-size: 0.167in;
  line-height: 1.12;
  text-align: left;
}

.suspect-card:nth-child(5):nth-last-child(2) {
  grid-column: 2;
}

.suspect-card:nth-child(6):last-child {
  grid-column: 3;
}

.suspect-grid.is-compact-set {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.07in 0.08in;
  margin-top: 0.07in;
}

.suspect-grid.is-compact-set .suspect-card {
  grid-column: auto;
  height: auto;
  align-self: start;
}

.suspect-grid.is-compact-set .suspect-photo-wrap {
  width: min(100%, 0.92in);
}

.suspect-grid.is-compact-set .clue-bubble {
  flex: 0 0 auto;
  min-height: 0.44in;
  margin-top: 0.045in;
  padding: 0.06in 0.07in 0.065in;
  border-radius: 0.1in;
  line-height: 1.08;
}

.suspect-grid.is-compact-set .suspect-card[data-role="artwork"] {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(1.2in, 2.55in) minmax(0, 1fr);
  gap: 0.1in;
  width: 100%;
  align-items: start;
  text-align: left;
}

.suspect-grid.is-compact-set .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  display: inline-flex;
  width: fit-content;
  max-width: 2.55in;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  justify-self: start;
  box-sizing: content-box;
  overflow: hidden;
  border: 0.045in solid #b9852d;
  border-radius: 0.012in;
  background: #b9852d;
  box-shadow:
    inset 0 0 0 0.01in #f1d27a,
    0.035in 0.035in 0 rgba(49, 48, 48, 0.28);
}

.suspect-grid.is-compact-set .suspect-card[data-role="artwork"] .suspect-photo {
  width: auto;
  height: auto;
  max-width: 2.46in;
  max-height: 2.4in;
  object-fit: contain;
  object-position: center;
}

.suspect-grid.is-compact-set .suspect-card[data-role="artwork"] .clue-bubble {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0.065in 0.08in;
  align-self: start;
}

.book.is-opening-6x6 .suspect-grid.is-compact-set .suspect-card[data-role="artwork"] {
  grid-template-columns: minmax(1.2in, 3.05in) minmax(0, 1fr);
}

.book.is-opening-6x6 .suspect-grid.is-compact-set .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: 3.05in;
}

.book.is-opening-6x6 .suspect-grid.is-compact-set .suspect-card[data-role="artwork"] .suspect-photo {
  max-width: 2.96in;
  max-height: 2.9in;
}

.suspect-grid.is-compact-set.is-tight {
  gap: 0.045in 0.07in;
  margin-top: 0.04in;
}

.suspect-grid.is-compact-set.is-tight .suspect-photo-wrap {
  width: min(100%, 0.92in);
}

.suspect-grid.is-compact-set.is-tight .clue-bubble {
  margin-top: 0.025in;
  padding: 0.04in 0.055in 0.045in;
}

.suspect-grid.is-compact-set.is-tight .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  width: fit-content;
  max-width: 1.95in;
}

.suspect-grid.is-compact-set.is-tight .suspect-card[data-role="artwork"] .suspect-photo {
  width: auto;
  max-width: 1.86in;
  max-height: 1.8in;
}

.suspect-grid.is-compact-set.is-tight .suspect-card[data-role="artwork"] .clue-bubble {
  margin: 0;
}

.book.is-opening-6x6 .suspect-grid.is-compact-set.is-tight .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: 2.55in;
}

.book.is-opening-6x6 .suspect-grid.is-compact-set.is-tight .suspect-card[data-role="artwork"] .suspect-photo {
  max-width: 2.46in;
  max-height: 2.4in;
}

.suspect-grid.is-large-set {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(1.12in, 1fr);
  gap: 0.055in;
  margin-top: 0.055in;
}

.suspect-grid.is-large-set .suspect-card {
  grid-column: auto;
  height: auto;
  align-self: start;
}

.suspect-grid.is-large-set .suspect-photo-wrap {
  width: min(100%, 0.92in);
  border-radius: 0.045in;
}

.suspect-grid.is-large-set .clue-bubble {
  flex: 0 0 auto;
  min-height: 0.34in;
  margin-top: 0.028in;
  padding: 0.038in 0.045in 0.042in;
  border-radius: 0.09in;
  font-size: 0.167in;
  line-height: 1.01;
}

.suspect-grid.is-large-set .suspect-card.has-long-clue {
  position: static;
  z-index: auto;
  width: auto;
  grid-column: auto;
  grid-row: auto;
}

.suspect-grid.is-large-set .suspect-card.has-long-clue .clue-bubble {
  line-height: 1.02;
}

.suspect-grid.is-large-set .suspect-card[data-name="ethan"] {
  grid-column: 3;
  grid-row: 2;
}

.suspect-grid.is-large-set .suspect-card[data-name="leo"] {
  grid-column: 4;
  grid-row: 1;
}

.suspect-grid.is-large-set .suspect-card[data-name="julia"] {
  grid-column: 1;
  grid-row: 2;
}

.suspect-grid.is-large-set .suspect-card[data-name="cole"] {
  grid-column: 2;
  grid-row: 2;
}

.suspect-grid.is-large-set.uses-sequential-suspect-order .suspect-card:not([data-role="artwork"]) {
  grid-column: auto;
  grid-row: auto;
}

.suspect-grid.is-large-set .suspect-card[data-role="artwork"] {
  grid-column: 1 / -1;
  grid-row: auto;
  width: 100%;
  justify-self: stretch;
  transform: translateY(calc(0.3in - var(--artwork-footer-shift, 0px)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.05in;
  gap: 0.08in;
  justify-content: space-between;
  height: auto;
  align-items: start;
  text-align: left;
}

.suspect-grid.is-large-set .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  display: inline-flex;
  width: fit-content;
  max-width: min(3.35in, 100%);
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  align-self: start;
  justify-self: start;
  box-sizing: content-box;
  padding: 0;
  overflow: hidden;
  border: 0.055in solid #b9852d;
  border-radius: 0.015in;
  background: #b9852d;
  box-shadow:
    inset 0 0 0 0.012in #f1d27a,
    0.035in 0.035in 0 rgba(49, 48, 48, 0.28);
}

.suspect-grid.is-large-set .suspect-card[data-role="artwork"] .suspect-photo {
  width: 3.2in;
  height: auto;
  max-width: 100%;
  max-height: 3.65in;
  object-fit: contain;
  object-position: center;
}

.suspect-grid.is-large-set .suspect-card[data-role="artwork"] .clue-bubble {
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0.075in 0.09in;
  overflow: hidden;
  line-height: 1.04;
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 2.05in;
  margin-left: auto;
}

.suspect-grid.is-large-set.has-extreme-clue-set {
  gap: 0.035in 0.045in;
  margin-top: 0.035in;
}

.suspect-grid.is-large-set.has-extreme-clue-set .clue-bubble {
  margin-top: 0.018in;
  padding: 0.025in 0.035in 0.03in;
}

.suspect-grid.is-large-set.has-extreme-clue-set .suspect-card[data-role="artwork"] {
  grid-template-columns: 1.15in minmax(0, 1fr);
  gap: 0.08in;
  transform: none;
}

.suspect-grid.is-large-set.has-extreme-clue-set .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  width: fit-content;
  max-width: 1.15in;
}

.suspect-grid.is-large-set.has-extreme-clue-set .suspect-card[data-role="artwork"] .suspect-photo {
  width: auto;
  max-width: 1.04in;
  max-height: 1.42in;
}

.suspect-grid.is-large-set.has-extreme-clue-set .suspect-card[data-role="artwork"] .clue-bubble {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0.04in 0.055in;
  line-height: 1.02;
}

.suspect-grid.is-large-set.has-extreme-clue-set[data-layout-key="nocturne-in-black-and-gold-the-falling-rocket"] .suspect-card[data-role="artwork"] {
  grid-template-columns: 1.36in minmax(0, 1fr);
}

.suspect-grid.is-large-set.has-extreme-clue-set[data-layout-key="nocturne-in-black-and-gold-the-falling-rocket"] .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: 1.36in;
}

.suspect-grid.is-large-set.has-extreme-clue-set[data-layout-key="nocturne-in-black-and-gold-the-falling-rocket"] .suspect-card[data-role="artwork"] .suspect-photo {
  max-width: 1.25in;
  max-height: 1.75in;
}

.suspect-grid.is-large-set.has-very-long-clue .suspect-card[data-role="artwork"] {
  z-index: 3;
  grid-column: 1 / -1;
  grid-row: auto;
  display: block;
  position: relative;
  transform: translateY(calc(0px - var(--artwork-footer-shift, 0px)));
}

.suspect-grid.is-large-set.has-very-long-clue .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  position: absolute;
  left: 0.04in;
  bottom: calc(100% + 0.075in);
  width: fit-content;
  max-width: min(3.35in, 100%);
}

.suspect-grid.is-large-set.has-very-long-clue .suspect-card[data-role="artwork"] .suspect-photo {
  width: 3.2in;
  max-width: 100%;
  max-height: 2.75in;
}

.suspect-grid.is-large-set.has-very-long-clue .suspect-card[data-role="artwork"] .clue-bubble {
  width: 2.05in;
  margin-left: auto;
  padding: 0.055in 0.075in;
}

.suspect-grid.is-large-set.is-tight {
  gap: 0.035in 0.045in;
  margin-top: 0.035in;
}

.suspect-grid.is-large-set.is-tight .clue-bubble {
  margin-top: 0.018in;
  padding: 0.025in 0.035in 0.03in;
}

.suspect-grid.is-large-set.is-tight .suspect-card[data-role="artwork"] {
  grid-template-columns: minmax(0, 1fr) 2.05in;
  gap: 0.08in;
  transform: translateY(calc(0px - var(--artwork-footer-shift, 0px)));
}

.suspect-grid.is-large-set.is-tight.has-very-long-clue .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: min(3.15in, 100%);
}

.suspect-grid.is-large-set.is-tight.has-very-long-clue .suspect-card[data-role="artwork"] .suspect-photo {
  width: 3in;
  max-width: 100%;
  max-height: 2.45in;
}

.suspect-grid.is-large-set.is-tight .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: min(3.2in, 100%);
}

.suspect-grid.is-large-set.is-tight .suspect-card[data-role="artwork"] .suspect-photo {
  width: 3.2in;
  max-width: 100%;
  max-height: 3.05in;
}

.suspect-grid.is-large-set.is-tight .suspect-card[data-role="artwork"] .clue-bubble {
  padding: 0.045in 0.06in;
}

.suspect-grid.is-large-set.is-extra-tight .suspect-card[data-role="artwork"] {
  grid-template-columns: 1.08in minmax(0, 1fr);
}

.suspect-grid.is-large-set.is-extra-tight .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: 1.08in;
}

.suspect-grid.is-large-set.is-extra-tight .suspect-card[data-role="artwork"] .suspect-photo {
  max-width: 0.97in;
  max-height: 1.35in;
}

.suspect-grid.is-large-set.is-extra-tight[data-layout-key="arrangement-in-gray-portrait-of-the-painter"] .suspect-card[data-role="artwork"] {
  grid-template-columns: 2in minmax(0, 1fr);
}

.suspect-grid.is-large-set.is-extra-tight[data-layout-key="arrangement-in-gray-portrait-of-the-painter"] .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: 2in;
}

.suspect-grid.is-large-set.is-extra-tight[data-layout-key="arrangement-in-gray-portrait-of-the-painter"] .suspect-card[data-role="artwork"] .suspect-photo {
  width: auto;
  max-width: 1.85in;
  max-height: 2.45in;
}

.suspect-grid.is-large-set.is-extra-tight[data-layout-key="summer-evening-on-skagen-s-southern-beach"] .suspect-card[data-role="artwork"] {
  grid-template-columns: minmax(0, 1fr) 2.05in;
  gap: 0.08in;
}

.suspect-grid.is-large-set.is-extra-tight[data-layout-key="summer-evening-on-skagen-s-southern-beach"] .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  max-width: min(2.95in, 100%);
}

.suspect-grid.is-large-set.is-extra-tight[data-layout-key="summer-evening-on-skagen-s-southern-beach"] .suspect-card[data-role="artwork"] .suspect-photo {
  width: 2.82in;
  max-width: 100%;
  max-height: 1.92in;
}

.suspect-grid.is-large-set.is-free-artwork-layout {
  position: static;
  min-height: 0;
}

.suspect-grid.is-large-set.is-free-artwork-layout .suspect-card[data-role="artwork"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  transform: none;
  pointer-events: none;
}

.suspect-grid.is-large-set.is-free-artwork-layout .suspect-card[data-role="artwork"] .suspect-photo-wrap {
  position: absolute;
  width: fit-content;
  max-width: none;
  height: fit-content;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0.06in solid #b9852d;
  border-radius: 0.012in;
  background: #b9852d;
  box-shadow: 0.035in 0.035in 0 rgba(49, 48, 48, 0.28);
  box-sizing: content-box;
}

.suspect-grid.is-large-set.is-free-artwork-layout .suspect-card[data-role="artwork"] .suspect-photo {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.suspect-grid.is-large-set.is-free-artwork-layout .suspect-card[data-role="artwork"] .clue-bubble {
  position: absolute;
  width: 2.05in;
  max-width: 2.05in;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0.055in 0.075in;
  overflow: hidden;
  line-height: 1.04;
  box-sizing: border-box;
}

.artwork-facts span {
  display: block;
}

.artwork-facts-title {
  margin: 0.025in 0 0.035in;
  font-weight: 800;
}

.clue-bubble strong {
  font-weight: 800;
}

.tip-card {
  width: 100%;
  min-height: 0.36in;
  margin: 0.06in 0 0.08in;
  padding: 0.06in 0.1in;
  border: 0.035in solid var(--logo-red);
  border-radius: 0.14in;
  background: var(--celadon);
  box-shadow: 0.045in 0.045in 0 rgba(65, 65, 65, 0.38);
  text-align: left;
}

.tip-card[hidden] {
  display: none;
}

.tip-card h3 {
  margin-bottom: 0.02in;
  font-size: 0.167in;
}

.tip-card p {
  margin: 0;
  font-size: 0.167in;
  line-height: 1.12;
}

.page-number {
  position: absolute;
  bottom: 0.02in;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.2in;
  font-weight: 900;
}

.left-page .page-number {
  left: 0;
}

.right-page .page-number {
  right: 0;
}

.solution-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.solution-header {
  padding: 0.08in 0 0.16in;
  border-bottom: 0.025in solid rgba(21, 18, 15, 0.72);
}

.solution-kicker {
  margin: 0 0 0.045in;
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.167in;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.solution-header h2 {
  margin: 0;
  font-size: 0.34in;
  line-height: 1;
}

.solution-subtitle {
  margin: 0.07in 0 0;
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.167in;
  font-weight: 750;
}

.solution-steps {
  display: grid;
  gap: 0.075in;
  margin: 0.18in 0 0;
  padding: 0;
  list-style: none;
  counter-reset: solution-step;
}

.solution-steps li {
  position: relative;
  min-height: 0.4in;
  padding: 0.075in 0.09in 0.075in 0.49in;
  border-bottom: 0.012in solid rgba(47, 111, 81, 0.28);
  font-size: 0.167in;
  line-height: 1.18;
  counter-increment: solution-step;
}

.solution-steps li::before {
  content: counter(solution-step);
  position: absolute;
  top: 0.055in;
  left: 0;
  display: grid;
  width: 0.34in;
  height: 0.34in;
  place-items: center;
  border: 0.018in solid rgba(21, 18, 15, 0.78);
  border-radius: 50%;
  background: var(--celadon);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.167in;
  font-weight: 900;
  line-height: 1;
}

.solution-steps .solution-empty::before {
  content: "-";
}

.solution-result {
  margin-top: 0.18in;
  padding: 0.14in 0.16in 0.16in;
  border: 0.022in solid #a37e44;
  border-left-width: 0.075in;
  border-radius: 0.055in;
  background: #f5e8c8;
  box-shadow: 0.045in 0.045in 0 rgba(65, 65, 65, 0.28);
  font-size: 0.167in;
  line-height: 1.2;
}

.solution-result p {
  margin: 0 0 0.045in;
  color: #9d2118;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.167in;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.solution-result strong {
  font-weight: 700;
}

.solution-summary-content {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.solution-summary-content > .page-number {
  position: static;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: auto;
  line-height: 1;
}

.solution-summary-page.right-page .solution-summary-content > .page-number {
  align-self: flex-end;
}

.solution-summary-header {
  padding: 0.02in 0 0.065in;
  border-bottom: 0.018in solid rgba(21, 18, 15, 0.72);
}

.solution-summary-header h2 {
  margin: 0;
  font-size: 0.24in;
  line-height: 1;
}

.solution-summary-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  align-content: start;
  column-gap: 0.07in;
  margin-top: 0.07in;
  min-height: 0;
}

.solution-summary-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.07in;
}

.solution-summary-card {
  min-width: 0;
  min-height: 0;
  height: fit-content;
  padding: 0.055in 0.06in;
  border: 0.012in solid rgba(47, 111, 81, 0.45);
  border-radius: 0.04in;
  background: rgba(246, 255, 248, 0.74);
  overflow: hidden;
}

.solution-summary-card h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.06in;
  margin: 0 0 0.035in;
  padding-bottom: 0.03in;
  border-bottom: 0.011in solid rgba(47, 111, 81, 0.3);
  font-size: 0.135in;
  line-height: 1.02;
}

.solution-page-reference {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.1in;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.solution-summary-card ol {
  display: grid;
  gap: 0.012in;
  margin: 0;
  padding-left: 0.17in;
  font-size: 0.105in;
  line-height: 1.03;
}

.solution-summary-card.uses-json-summary ol {
  gap: 0.018in;
  font-size: 7.05pt;
  line-height: 1;
}

.solution-summary-card.uses-json-summary li {
  overflow-wrap: anywhere;
}

.solution-steps li strong,
.solution-summary-card li strong {
  font-weight: 800;
}

.solution-summary-result {
  margin: 0.035in 0 0;
  padding-top: 0.03in;
  border-top: 0.011in solid rgba(157, 33, 24, 0.35);
  font-size: 0.105in;
  font-weight: 700;
  line-height: 1.03;
}

.board-wrap {
  width: 100%;
  margin: 0 auto;
}

.room-plan {
  width: 4.66in;
  margin-top: 0.22in;
}

.puzzle-size-large .room-plan {
  width: 4.86in;
  margin-top: 0.12in;
}

.room-plan.has-room-label-outside-top,
.puzzle-size-large .room-plan.has-room-label-outside-top {
  margin-top: 0.24in;
}

.board-matrix {
  display: grid;
  grid-template-columns: 0 repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: 0 minmax(0, 1fr);
  gap: 0;
}

.board-matrix.with-labels {
  grid-template-columns: 0.26in repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: 0.24in minmax(0, 1fr);
}

.corner-label,
.col-label,
.row-label {
  display: grid;
  min-height: 0.22in;
  place-items: center;
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.167in;
  font-weight: 850;
}

.board-grid {
  position: relative;
  display: block;
  grid-column: 2 / span var(--size);
  grid-row: 2;
  border: 0;
  background: transparent;
  aspect-ratio: 1 / 1;
}

.board-cells {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
}

.board-floors {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  overflow: hidden;
}

.board-voids {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  pointer-events: none;
}

.board-void-mask {
  background: var(--paper);
}

.room-floor {
  min-width: 0;
  min-height: 0;
  background: var(--floor-pattern), var(--floor-base, var(--room-color));
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.board-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.board-room-lines {
  z-index: 7;
}

.board-thin-lines {
  z-index: 3;
}

.board-line-thin {
  fill: none;
  stroke: rgb(38, 38, 38);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  shape-rendering: geometricPrecision;
}

.board-line-room {
  fill: var(--line);
  shape-rendering: geometricPrecision;
}

.board-objects {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  overflow: visible;
  pointer-events: none;
}

.board-edge-objects {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  overflow: visible;
  pointer-events: none;
}

.board-room-labels {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: visible;
  pointer-events: none;
}

.board,
.board-grid,
.cell {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.cell-void {
  visibility: hidden;
}

.board-windows {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  overflow: visible;
  pointer-events: none;
}

.window-anchor {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.room-label {
  position: absolute;
  left: calc(var(--label-x) * 100% / var(--size));
  top: calc(var(--label-y) * 100% / var(--size));
  z-index: 9;
  min-width: max-content;
  max-width: min(calc(var(--label-span) * 0.52in), 1.16in);
  padding: 0.018in 0.022in 0.021in;
  border: 0.011in solid #111;
  border-radius: 999px;
  background: rgba(246, 255, 248, 0.94);
  box-shadow: none;
  font-family: "Monu Upper", Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 0.139in;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.room-label-top,
.room-label-bottom {
  transform: translate(-50%, -50%);
}

.room-label-top {
  transform: translate(-50%, 0.032in);
}

.room-label-top.room-label-outside {
  transform: translate(-50%, calc(-100% + 0.025in));
}

.room-label-bottom {
  transform: translate(-50%, calc(-100% - 0.032in));
}

.room-label-left,
.room-label-right {
  transform: translate(-50%, -50%) rotate(-90deg);
  max-width: none;
  font-size: var(--vertical-label-size, 0.139in);
  transform-origin: center;
}

.room-label-stacked {
  min-width: 0;
  max-width: none;
  padding: 0.018in 0.01in;
  line-height: 0.58;
  letter-spacing: -0.026in;
  text-orientation: upright;
  transform: translate(-50%, -50%);
  white-space: normal;
  writing-mode: vertical-rl;
}

.room-label-top.room-label-vertical-fit {
  max-width: min(calc(var(--label-span) * 0.52in), 1.16in);
  transform: translate(-50%, 0.032in) rotate(-90deg);
  transform-origin: center;
}

.room-label-bottom.room-label-vertical-fit {
  max-width: min(calc(var(--label-span) * 0.52in), 1.16in);
  transform: translate(-50%, calc(-100% - 0.032in)) rotate(-90deg);
  transform-origin: center;
}

.row-labels {
  display: grid;
  grid-column: 1;
  grid-row: 2;
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
}

.cell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: 0;
  align-content: space-between;
  gap: 0.02in;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 0.04in;
  background: transparent;
  overflow: visible;
}

.floor-0 {
  --floor-base: #eadcc4;
  --floor-pattern:
    repeating-linear-gradient(90deg, rgba(116, 78, 42, 0.16) 0 0.012in, transparent 0.012in 0.34in),
    repeating-linear-gradient(0deg, transparent 0 0.68in, rgba(116, 78, 42, 0.13) 0.68in 0.695in),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24), rgba(116, 78, 42, 0.07));
}

.floor-1 {
  --floor-base: #efe2c8;
  --floor-pattern:
    repeating-linear-gradient(90deg, rgba(123, 86, 49, 0.13) 0 0.01in, transparent 0.01in 0.26in),
    repeating-linear-gradient(0deg, transparent 0 0.42in, rgba(123, 86, 49, 0.12) 0.42in 0.435in),
    radial-gradient(ellipse at 30% 45%, rgba(255, 255, 255, 0.22), transparent 45%);
}

.floor-2 {
  --floor-base: #e7d2af;
  --floor-pattern:
    repeating-linear-gradient(45deg, rgba(112, 76, 39, 0.18) 0 0.018in, transparent 0.018in 0.2in),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 0.018in, transparent 0.018in 0.2in),
    linear-gradient(90deg, rgba(135, 93, 48, 0.08), transparent);
}

.floor-3 {
  --floor-base: #f1e6ce;
  --floor-pattern:
    repeating-linear-gradient(90deg, rgba(121, 86, 48, 0.14) 0 0.012in, transparent 0.012in 0.18in),
    repeating-linear-gradient(0deg, transparent 0 0.32in, rgba(121, 86, 48, 0.1) 0.32in 0.335in),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent);
}

.floor-4 {
  --floor-base: #e9d7b9;
  --floor-pattern:
    repeating-linear-gradient(30deg, rgba(115, 78, 42, 0.14) 0 0.014in, transparent 0.014in 0.2in),
    repeating-linear-gradient(-30deg, rgba(255, 255, 255, 0.18) 0 0.014in, transparent 0.014in 0.2in);
}

.floor-5 {
  --floor-base: #eadfca;
  --floor-pattern:
    repeating-linear-gradient(90deg, rgba(103, 74, 43, 0.11) 0 0.012in, transparent 0.012in 0.3in),
    repeating-linear-gradient(0deg, transparent 0 0.24in, rgba(103, 74, 43, 0.08) 0.24in 0.255in),
    radial-gradient(ellipse at 70% 50%, rgba(255, 255, 255, 0.2), transparent 42%);
}

.floor-6 {
  --floor-base: #f0dfbd;
  --floor-pattern:
    repeating-linear-gradient(45deg, rgba(114, 78, 42, 0.13) 0 0.012in, transparent 0.012in 0.16in),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0 0.012in, transparent 0.012in 0.16in);
}

.floor-7 {
  --floor-base: #e5cfae;
  --floor-pattern:
    conic-gradient(from 45deg, rgba(255, 255, 255, 0.2) 0 25%, transparent 0 50%, rgba(111, 76, 39, 0.12) 0 75%, transparent 0) 0 0 / 0.28in 0.28in,
    repeating-linear-gradient(90deg, rgba(111, 76, 39, 0.08) 0 0.01in, transparent 0.01in 0.28in);
}

.cell.room-top {
  border-top: 0;
}

.cell.room-left {
  border-left: 0;
}

.cell.room-right {
  border-right: 0;
}

.cell.room-bottom {
  border-bottom: 0;
}

.cell-room {
  justify-self: center;
  align-self: end;
  max-width: 100%;
  border: 0.01in solid #111;
  border-radius: 999px;
  padding: 0.015in 0.055in;
  background: #faf8f2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.1in;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-item {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 0.26in;
  align-items: center;
  justify-content: center;
  gap: 0.02in;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0;
  font-weight: 760;
}

.item-symbol {
  font-size: 0.25in;
  line-height: 1;
  filter: grayscale(0.15);
}

.item-image {
  display: block;
  width: 177%;
  height: 177%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.01in 0.012in rgba(8, 7, 7, 0.16));
}

.item-image-flowers {
  width: 128%;
  height: 128%;
}

.single-cell-flowers {
  padding: 0.075in;
}

.item-image-chair {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-view-box: inset(23.5% 17% 24% 14%);
}

.single-cell-chair {
  padding: 0.01in;
}

.single-cell-chair .cell-item {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.item-image-bench {
  width: 112%;
  height: 82%;
}

.single-cell-object.single-cell-bench {
  display: flex;
  padding: 0.055in;
  align-items: center;
  justify-content: center;
}

.single-cell-bench .cell-item {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.item-image-desk {
  width: 210%;
  height: 126%;
}

.single-cell-desk {
  padding: 0;
}

.item-image-display {
  width: 120%;
  height: 120%;
}

.single-cell-display {
  padding: 0.032in;
}

.single-cell-carpet {
  grid-template-rows: minmax(0, 1fr);
  padding: 0.045in;
  align-content: stretch;
  place-items: stretch;
}

.single-cell-carpet .cell-item {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.single-cell-carpet .css-carpet {
  width: 86%;
  height: 86%;
}

.item-image-plant {
  width: 78%;
  height: 78%;
}

.single-cell-plant {
  padding: 0.115in;
}

.plant-style-alt .item-image-plant {
  width: 105%;
  height: 105%;
}

.plant-style-alt .single-cell-plant {
  padding: 0.03in;
}

.item-image-statue {
  width: 78%;
  height: 78%;
}

.single-cell-statue {
  padding: 0.105in;
}

.item-image-the-kiss,
.item-image-the-starry-night,
.item-image-girl-with-a-pearl-earring,
.item-image-mona-lisa,
.item-image-a-sunday-on-la-grande-jatte,
.item-image-haystacks,
.item-image-irises,
.item-image-la-grenouillere,
.item-image-the-great-wave-off-kanagawa,
.item-image-the-luncheon-of-the-boating-party {
  width: 128%;
  height: 128%;
}

.item-image-painting {
  width: 116%;
  height: 116%;
}

.item-image-water-lilies {
  width: 120%;
  height: 120%;
}

.board-matrix[data-layout-key="the-nativity-with-st-francis-and-st-lawrence"] .room-label-bottom {
  transform: translate(-50%, -50%);
}

.single-cell-the-kiss,
.single-cell-the-starry-night,
.single-cell-girl-with-a-pearl-earring,
.single-cell-mona-lisa,
.single-cell-a-sunday-on-la-grande-jatte,
.single-cell-haystacks,
.single-cell-irises,
.single-cell-la-grenouillere,
.single-cell-the-great-wave-off-kanagawa,
.single-cell-the-luncheon-of-the-boating-party {
  z-index: 8;
  padding: 0.075in;
}

.single-cell-object.single-cell-painting {
  z-index: 8;
  padding: 0.008in;
}

.single-cell-painting .cell-item {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.single-cell-painting .item-image-painting {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-view-box: inset(3%);
}

.single-cell-object {
  position: absolute;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 0.04in;
  align-content: space-between;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.multi-cell-object {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0.035in;
  pointer-events: none;
}

.multi-cell-tv {
  margin: 0.02in;
  overflow: hidden;
}

.multi-cell-object-image {
  display: block;
  width: 108%;
  height: 108%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.012in 0.014in rgba(8, 7, 7, 0.18));
}

.multi-cell-object-symbol {
  font-size: 0.58in;
  line-height: 1;
}

.multi-cell-bed.multi-cell-wide .multi-cell-object-image {
  width: 92%;
  height: 150%;
  transform: rotate(90deg);
}

.multi-cell-bed.multi-cell-tall .multi-cell-object-image {
  width: 130%;
  height: 102%;
}

.multi-cell-tv.multi-cell-tall .multi-cell-object-image {
  width: 190%;
  height: 150%;
  transform: translateY(-11.5%);
}

.multi-cell-tv.multi-cell-wide .multi-cell-object-image {
  width: 112%;
  height: 142%;
  transform: rotate(90deg);
}

.multi-cell-bench.multi-cell-wide .multi-cell-object-image {
  width: 96%;
  height: 72%;
}

.multi-cell-bench.multi-cell-tall .multi-cell-object-image {
  width: 72%;
  height: 96%;
}

.multi-cell-desk {
  margin: 0;
}

.multi-cell-desk.multi-cell-wide .multi-cell-object-image,
.multi-cell-infodesk.multi-cell-wide .multi-cell-object-image,
.multi-cell-information-desk.multi-cell-wide .multi-cell-object-image {
  width: 130%;
  height: 124%;
  transform: translateY(-15%);
}

.css-carpet {
  --carpet-pattern:
    linear-gradient(45deg, transparent 42%, rgba(255, 218, 176, 0.28) 43% 47%, transparent 48%) 0 0 / 0.18in 0.18in,
    linear-gradient(-45deg, transparent 42%, rgba(107, 18, 24, 0.3) 43% 47%, transparent 48%) 0 0 / 0.18in 0.18in,
    repeating-linear-gradient(90deg, rgba(255, 230, 198, 0.22) 0 0.018in, transparent 0.018in 0.055in),
    repeating-linear-gradient(0deg, rgba(86, 14, 18, 0.22) 0 0.01in, transparent 0.01in 0.06in),
    #b73535;
  width: 94%;
  height: 62%;
  border: 0.018in solid #7e1f1f;
  border-radius: 0.02in;
  background: var(--carpet-pattern);
  box-shadow:
    inset 0 0 0 0.035in rgba(244, 176, 132, 0.64),
    inset 0 0 0 0.052in rgba(93, 16, 21, 0.55),
    0 0.01in 0.012in rgba(8, 7, 7, 0.16);
}

.multi-cell-carpet {
  margin: 0.02in;
}

.multi-cell-carpet .css-carpet {
  width: 96%;
  height: 76%;
}

.multi-cell-carpet-shape {
  display: grid;
  grid-template-columns: repeat(var(--object-cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--object-rows), minmax(0, 1fr));
  gap: 0;
  margin: 0.012in;
  place-items: stretch;
}

.multi-cell-carpet-shape .css-carpet-tile {
  width: auto;
  height: auto;
  margin: 0.008in;
}

.multi-cell-carpet-shape .css-carpet-l-shape {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: auto;
  height: auto;
  margin: 0.008in;
  border: 0;
  border-radius: 0;
  background: var(--carpet-pattern);
  box-shadow: 0 0.01in 0.012in rgba(8, 7, 7, 0.16);
}

.carpet-shape-outline {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.carpet-shape-outline polygon {
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.carpet-outline-outer {
  stroke: #7e1f1f;
  stroke-width: 0.105;
}

.carpet-outline-highlight {
  stroke: rgba(231, 170, 86, 0.9);
  stroke-width: 0.032;
}


.multi-cell-the-kiss,
.multi-cell-the-starry-night,
.multi-cell-girl-with-a-pearl-earring,
.multi-cell-mona-lisa,
.multi-cell-a-sunday-on-la-grande-jatte,
.multi-cell-haystacks,
.multi-cell-irises,
.multi-cell-la-grenouillere,
.multi-cell-the-great-wave-off-kanagawa,
.multi-cell-the-luncheon-of-the-boating-party {
  margin: 0;
}

.multi-cell-painting {
  margin: 0;
}

.multi-cell-the-kiss.multi-cell-tall .multi-cell-object-image,
.multi-cell-the-starry-night.multi-cell-tall .multi-cell-object-image,
.multi-cell-girl-with-a-pearl-earring.multi-cell-tall .multi-cell-object-image,
.multi-cell-mona-lisa.multi-cell-tall .multi-cell-object-image,
.multi-cell-a-sunday-on-la-grande-jatte.multi-cell-tall .multi-cell-object-image,
.multi-cell-haystacks.multi-cell-tall .multi-cell-object-image,
.multi-cell-irises.multi-cell-tall .multi-cell-object-image,
.multi-cell-la-grenouillere.multi-cell-tall .multi-cell-object-image,
.multi-cell-the-great-wave-off-kanagawa.multi-cell-tall .multi-cell-object-image,
.multi-cell-the-luncheon-of-the-boating-party.multi-cell-tall .multi-cell-object-image {
  width: 94%;
  height: 94%;
  transform: none;
}

.multi-cell-painting.multi-cell-tall .multi-cell-object-image {
  width: 94%;
  height: 94%;
  transform: none;
}

.multi-cell-the-kiss.multi-cell-wide .multi-cell-object-image,
.multi-cell-the-starry-night.multi-cell-wide .multi-cell-object-image,
.multi-cell-girl-with-a-pearl-earring.multi-cell-wide .multi-cell-object-image,
.multi-cell-mona-lisa.multi-cell-wide .multi-cell-object-image,
.multi-cell-a-sunday-on-la-grande-jatte.multi-cell-wide .multi-cell-object-image,
.multi-cell-haystacks.multi-cell-wide .multi-cell-object-image,
.multi-cell-irises.multi-cell-wide .multi-cell-object-image,
.multi-cell-la-grenouillere.multi-cell-wide .multi-cell-object-image,
.multi-cell-the-great-wave-off-kanagawa.multi-cell-wide .multi-cell-object-image,
.multi-cell-the-luncheon-of-the-boating-party.multi-cell-wide .multi-cell-object-image {
  width: 94%;
  height: 130%;
  transform: none;
}

.multi-cell-painting.multi-cell-wide .multi-cell-object-image {
  width: 94%;
  height: 130%;
  transform: none;
}

/* Two-cell paintings should sit close to both cell edges without changing other objects. */
.multi-cell-painting.multi-cell-tall .multi-cell-object-image {
  width: 98%;
  height: 98%;
}

.multi-cell-painting.multi-cell-wide .multi-cell-object-image {
  width: 98%;
  height: 135%;
}

/* This edge placement needs a little more visible artwork, but must remain in I6-I7. */
.board-matrix[data-layout-key="the-windmill-at-wijk-bij-duurstede"]
  .multi-cell-the-kiss.multi-cell-tall {
  overflow: hidden;
}

.board-matrix[data-layout-key="the-windmill-at-wijk-bij-duurstede"]
  .multi-cell-the-kiss.multi-cell-tall .multi-cell-object-image {
  transform: scale(1.12);
  transform-origin: center;
}

.person {
  display: none;
}

.window-marker {
  position: absolute;
  border: 0.014in solid #155b6c;
  border-radius: 0.018in;
  background: transparent;
  box-shadow:
    0 0 0 0.012in #f6fff8,
    0 0.012in 0.035in rgba(8, 7, 7, 0.28);
  pointer-events: none;
}

.window-marker::before {
  content: "";
  position: absolute;
  z-index: 1;
  border: 0.01in solid rgba(74, 69, 61, 0.72);
  border-radius: 0.025in;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(108, 104, 96, 0.2)),
    #d6d2c8;
  box-shadow: 0 0.018in 0.035in rgba(8, 7, 7, 0.24);
}

.window-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(255, 255, 255, 0.26) 24% 28%, transparent 28% 54%, rgba(255, 255, 255, 0.22) 54% 58%, transparent 58%),
    #bdefff;
}

.window-l::before,
.window-r::before {
  top: -0.03in;
  bottom: -0.03in;
}

.window-t::before,
.window-b::before {
  left: -0.03in;
  right: -0.03in;
}

.window-l::before {
  left: -0.09in;
  right: 0.11in;
}

.window-r::before {
  left: 0.11in;
  right: -0.09in;
}

.window-t::before {
  top: -0.09in;
  bottom: 0.11in;
}

.window-b::before {
  top: 0.11in;
  bottom: -0.09in;
}

.window-l {
  top: 0;
  bottom: 0;
  left: -0.105in;
  width: 0.16in;
}

.window-r {
  top: 0;
  right: -0.105in;
  bottom: 0;
  width: 0.16in;
}

.window-t {
  top: -0.105in;
  left: 0;
  right: 0;
  height: 0.16in;
}

.window-b {
  right: 0;
  bottom: -0.105in;
  left: 0;
  height: 0.16in;
}

.answer-area {
  position: absolute;
  left: 0.22in;
  right: -0.22in;
  bottom: 0.55in;
  display: grid;
  grid-template-columns: 3.05in 1.55in;
  gap: 0.3in;
  align-items: end;
}

.book:not(.puzzle-size-large) .answer-area {
  right: 0;
  bottom: 0.29in;
}

.answer-grid {
  --answer-padding: 0.12in;
  position: relative;
  width: 3.05in;
  height: 3.05in;
  padding: var(--answer-padding);
  overflow: hidden;
  background: #f7f7f7;
  border: 0.035in solid #d7d7d7;
  box-shadow: 0.07in 0.07in 0 #8f8f8f;
}

.puzzle-size-large .answer-area {
  bottom: 0.12in;
  grid-template-columns: 3.12in 1.38in;
  gap: 0.1in;
}

.puzzle-size-large .answer-grid {
  --answer-padding: 0.12in;
  width: 3.12in;
  height: 3.12in;
  padding: var(--answer-padding);
}

.answer-column-labels,
.answer-row-labels {
  position: absolute;
  z-index: 2;
  display: grid;
  color: #666;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.1in;
  font-weight: 750;
  line-height: 1;
  pointer-events: none;
}

.answer-column-labels {
  top: 0.018in;
  left: var(--answer-padding);
  right: var(--answer-padding);
  height: calc(var(--answer-padding) - 0.025in);
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
}

.answer-row-labels {
  top: var(--answer-padding);
  bottom: var(--answer-padding);
  left: 0.012in;
  width: calc(var(--answer-padding) - 0.02in);
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
}

.answer-column-labels span,
.answer-row-labels span {
  display: grid;
  place-items: center;
}

.answer-grid-inner {
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  border-left: 0.012in solid #d0d0d0;
  border-top: 0.012in solid #d0d0d0;
}

.answer-cell {
  border-right: 0.012in solid #d0d0d0;
  border-bottom: 0.012in solid #d0d0d0;
  background: #f9f9f9;
}

.answer-cell-void {
  visibility: hidden;
}

.answer-cell.answer-room-top {
  border-top: 0.032in solid #d7d7d7;
}

.answer-cell.answer-room-left {
  border-left: 0.032in solid #d7d7d7;
}

.answer-cell.answer-room-right {
  border-right: 0.032in solid #d7d7d7;
}

.answer-cell.answer-room-bottom {
  border-bottom: 0.032in solid #d7d7d7;
}

.puzzle-size-large .answer-cell {
  border-right-width: 0.011in;
  border-bottom-width: 0.011in;
}

.puzzle-size-large .answer-cell.answer-room-top {
  border-top-width: 0.024in;
}

.puzzle-size-large .answer-cell.answer-room-left {
  border-left-width: 0.024in;
}

.puzzle-size-large .answer-cell.answer-room-right {
  border-right-width: 0.024in;
}

.puzzle-size-large .answer-cell.answer-room-bottom {
  border-bottom-width: 0.024in;
}

.murderer-card {
  position: relative;
  width: 1.55in;
  min-height: 0.9in;
  margin-top: 0.075in;
  padding: 0.105in 0.1in 0.11in;
  background: #f1dfb6;
  border: 0.022in solid #a37e44;
  border-radius: 0.025in 0.035in 0.035in 0.035in;
  box-shadow: 0.045in 0.045in 0 #8d8d8d;
  font-size: 0.167in;
}

.murderer-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -0.105in;
  left: 0.06in;
  width: 0.66in;
  height: 0.125in;
  background: #f1dfb6;
  border: 0.022in solid #a37e44;
  border-bottom: 0;
  border-radius: 0.055in 0.075in 0 0;
}

.puzzle-size-large .murderer-card {
  width: 1.38in;
  padding: 0.1in 0.075in 0.105in;
  font-size: 0.167in;
  transform: translateY(-0.22in);
}

.casefile-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 0.055in;
  padding: 0.012in 0.035in 0.009in;
  color: #9f3126;
  border: 0.01in solid #9f3126;
  font-family: Arial, sans-serif;
  font-size: 0.1in;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.009in;
  transform: rotate(-2deg);
}

.casefile-prompt {
  position: relative;
  z-index: 1;
  margin: 0 0 0.045in;
  color: #20231f;
  font-family: Georgia, serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.murderer-card span {
  position: relative;
  z-index: 1;
  display: block;
  height: 0.22in;
  border-bottom: 0.018in solid #252825;
}

.answer-solution-reference {
  position: absolute;
  right: 0.025in;
  bottom: 0.014in;
  z-index: 2;
  margin: 0;
  color: #666;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.1in;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .book {
    overflow-x: auto;
    justify-content: start;
    padding-bottom: 10px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100% - 18px, 1400px);
    padding-top: 9px;
  }

  .toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .actions {
    justify-content: flex-start;
  }
}

@page {
  size: 6.125in 9.25in;
  margin: 0;
}

.print-palette-0,
.print-palette-1,
.print-palette-2,
.print-palette-3,
.print-palette-4 {
  --frosted-mint: var(--paper);
  --celadon-light: color-mix(in srgb, var(--paper) 91%, black);
  --celadon: color-mix(in srgb, var(--paper) 84%, black);
  --mint-leaf: color-mix(in srgb, var(--paper) 70%, black);
  --muted: color-mix(in srgb, var(--paper) 38%, #173d31);
  --tip: color-mix(in srgb, var(--paper) 91%, black);
  background: var(--paper);
}

.print-palette-0 { --bg: #f2fff8; --paper: #f2fff8; }
.print-palette-1 { --bg: #cff4e2; --paper: #cff4e2; }
.print-palette-2 { --bg: #b8e6d2; --paper: #b8e6d2; }
.print-palette-3 { --bg: #e6f4ff; --paper: #e6f4ff; }
.print-palette-4 { --bg: #fbeaf3; --paper: #fbeaf3; }

@page palette0 {
  size: 6.125in 9.25in;
  margin: 0;
  background: #f2fff8;
}

@page palette1 {
  size: 6.125in 9.25in;
  margin: 0;
  background: #cff4e2;
}

@page palette2 {
  size: 6.125in 9.25in;
  margin: 0;
  background: #b8e6d2;
}

@page palette3 {
  size: 6.125in 9.25in;
  margin: 0;
  background: #e6f4ff;
}

@page palette4 {
  size: 6.125in 9.25in;
  margin: 0;
  background: #fbeaf3;
}

@media print {
  html,
  body {
    width: var(--page-w);
    min-height: 0;
    margin: 0;
    background: var(--paper);
  }

  .app-shell {
    width: var(--page-w);
    margin: 0;
    padding: 0;
  }

  .toolbar,
  .format-note,
  .trim-guide,
  .safe-guide {
    display: none;
  }

  .book {
    display: block;
    background: var(--paper);
  }

  .book-page {
    width: var(--page-w);
    height: calc(var(--page-h) - 0.055in);
    margin-bottom: 0;
    box-shadow: none;
    break-after: auto;
    page-break-after: auto;
  }

  .book.book-instance + .book.book-instance {
    margin-top: 0;
  }

  .book.print-palette-0 .book-page { page: palette0; }
  .book.print-palette-1 .book-page { page: palette1; }
  .book.print-palette-2 .book-page { page: palette2; }
  .book.print-palette-3 .book-page { page: palette3; }
  .book.print-palette-4 .book-page { page: palette4; }
  .book-page.print-palette-0 { page: palette0; }
  .book-page.print-palette-1 { page: palette1; }
  .book-page.print-palette-2 { page: palette2; }
  .book-page.print-palette-3 { page: palette3; }
  .book-page.print-palette-4 { page: palette4; }

  .book.solution-summary-book .book-page {
    page: auto !important;
  }

  .left-page .page-number {
    bottom: 0.075in;
  }

  .item-image,
  .multi-cell-object-image {
    filter: none;
  }

  .board-line-thin {
    stroke-width: var(--print-line-width) !important;
  }
}