html:has(> body[data-view]) {
  font-family: "Barlow", Arial, sans-serif;
  font-weight: 900;
  color: #fff2d1;
  background: transparent;
}
body[data-view] { margin: 0; }
body[data-view] :is(h1, h2, p) { margin: 0; }
:where(.studio, .obs), :where(.studio, .obs) * { box-sizing: border-box; }
:where(.studio, .obs) :is(button, input, select) { font: inherit; }
:where(.studio, .obs) :is(button, a, input, select) { -webkit-tap-highlight-color: transparent; }
:where(.studio, .obs) :is(button, select, input[type="range"], input[type="checkbox"], input[type="radio"]) { cursor: pointer; }
:where(.studio, .obs) button { color: inherit; }
:where(.studio, .obs) button:disabled { cursor: wait; opacity: .55; }
:where(.studio, .obs) a { color: inherit; text-decoration: none; }
:where(.studio, .obs) [hidden] { display: none !important; }
:where(.studio, .obs) :is(button, a, input, select):focus-visible { outline: 2px solid #91dfbf; outline-offset: 3px; }
:where(.studio, .obs) .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
:where(.studio, .obs) svg { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }
.overlay-board { --accent: #e0b767; --tile-size: 112px; --columns: 9; --gap: 8px; --tile-background: rgba(9, 8, 8, .82); display: grid; grid-template-columns: repeat(var(--columns), var(--tile-size)); gap: var(--gap); width: max-content; padding: var(--gap); color: #fff2d1; font-family: "Barlow", Arial, sans-serif; font-weight: 900; }
.overlay-board :is(.remembrance, .overlay-total) { width: var(--tile-size); height: var(--tile-size); padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 5px; background: var(--tile-background); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.overlay-board .remembrance img { display: block; width: 112%; height: 112%; max-width: none; object-fit: contain; filter: grayscale(1) contrast(.92) brightness(.62); pointer-events: none; }
.overlay-board .remembrance.is-done { border-color: var(--accent); }
.overlay-board .remembrance.is-done img { filter: saturate(1.12) contrast(1.04) brightness(1.06); }
.overlay-board :is(.remembrance, .overlay-total):hover { border-color: var(--accent); }
.overlay-board .overlay-total { flex-direction: column; gap: calc(var(--tile-size) * .03); border-color: var(--accent); color: #fff; font-family: "Fredoka", Arial, sans-serif; font-weight: 700; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.overlay-board .overlay-total strong { display: block; font-size: calc(var(--tile-size) * .5); font-weight: 700; }
.overlay-board .overlay-total span { display: block; font-size: calc(var(--tile-size) * .2); color: var(--accent); }
.overlay-board .overlay-total.is-complete { border-color: #59ff9e; background: rgba(16,94,52,.78); color: #c9ffdf; }
.overlay-board .overlay-total.is-complete span { color: #91ffbd; }
.obs .remembrance, .obs .overlay-total { cursor: default; }
.obs .remembrance:hover { border-color: rgba(255,255,255,.12); }
.obs .remembrance.is-done:hover { border-color: var(--accent); }
.obs .overlay-error { color: #fff; font-size: 18px; background: #352326; padding: 12px; max-width: 480px; }