@font-face {
  font-family: "Fusion Pixel";
  src: url("../fonts/fusion-pixel/fusion-pixel-12px-proportional-ja.ttf.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* A floating PC-98-inspired conversation window. Its contents outlive soft navigation. */
#live2d-widget.classic-companion {
  --vn-font: "Fusion Pixel", "W95FA", sans-serif;
  --vn-ink: #eee9df;
  --vn-muted: #bebbb8;
  --vn-panel: #111722;
  --vn-rule: #6a7688;
  --vn-scene: url("../images/classic/scenes/alice-atelier.png");
  --vn-light: #99bfff;
  position: fixed;
  z-index: var(--layer-companion);
  box-sizing: border-box;
  width: var(--vn-width, 352px);
  min-width: 0;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 24px);
  margin: 0;
  padding: 4px;
  border: 1px solid var(--classic-edge-light);
  border-radius: 0;
  outline: 1px solid #080c13;
  background: var(--vn-panel);
  box-shadow:
    inset 0 0 0 1px var(--classic-edge-dark),
    4px 4px 0 #0007;
  color: var(--vn-ink);
  font: 12px/1.75 var(--vn-font);
  overflow: hidden;
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  animation: none;
  pointer-events: auto;
}
#live2d-widget[data-vn-character="marisa"] {
  --vn-panel: #211b13;
  --vn-rule: #948062;
  --vn-muted: #c3b8a8;
  --vn-scene: url("../images/classic/scenes/marisa-workshop.png");
  --vn-light: #ffc57c;
}
#live2d-widget[data-vn-character="patchouli"] {
  --vn-panel: #1c1627;
  --vn-rule: #8c769f;
  --vn-muted: #c4b7cd;
  --vn-scene: url("../images/classic/scenes/patchouli-library.png");
  --vn-light: #c6a8f6;
}
#live2d-widget [hidden] {
  display: none;
}
#live2d-widget button,
#live2d-widget select {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--vn-rule);
  border-radius: 0;
  background: var(--vn-panel);
  color: var(--vn-ink);
  font: 12px/1.75 var(--vn-font);
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: none;
  text-shadow: none;
  opacity: 1;
}
#live2d-widget button:hover,
#live2d-widget button[aria-pressed="true"] {
  background: var(--classic-soft);
  color: var(--classic-accent);
}
#live2d-widget button:disabled {
  cursor: default;
  color: var(--vn-muted);
}
#live2d-widget :focus-visible {
  outline: 1px dashed var(--classic-accent);
  outline-offset: 2px;
}
#live2d-widget .companion-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 27px;
  padding: 2px 3px 2px 7px;
  border-bottom: 1px solid var(--vn-rule);
  color: var(--vn-ink);
  background: linear-gradient(90deg, var(--classic-title), var(--vn-panel));
  font: 12px/1.5 var(--vn-font);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
#live2d-widget.is-dragging .companion-titlebar {
  cursor: grabbing;
}
#live2d-widget .companion-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#live2d-widget .companion-title::before {
  content: "◇";
  margin-right: 6px;
  color: var(--classic-accent);
}
#live2d-widget .companion-controls {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
#live2d-widget .companion-controls button {
  width: 24px;
  height: 23px;
  padding: 0;
  font:
    17px/1 "W95FA",
    sans-serif;
}
#live2d-widget .companion-controls svg {
  display: block;
  margin: auto;
}
#live2d-widget [data-companion-content] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  max-height: calc(var(--vn-available-height, 100dvh - 24px) - 38px);
  overflow: clip;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--vn-rule) var(--vn-panel);
}
#live2d-widget.is-docked {
  position: relative;
  z-index: auto;
  width: 100%;
  max-width: 100%;
}
#live2d-widget.is-minimized:not(.is-docked) {
  width: 244px;
}
#live2d-widget .vn-cast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  padding: 7px 3px;
}
#live2d-widget .vn-cast button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 2px;
  font-size: 12px;
  border-color: transparent;
}
#live2d-widget .vn-cast button[aria-pressed="true"] {
  border-color: var(--vn-rule);
}
#live2d-widget .vn-cast img {
  display: block;
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
#live2d-widget .companion-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  background: var(--vn-panel);
  border: 1px solid var(--vn-rule);
  isolation: isolate;
}
/* Defocus only the environment; the rig stays crisp in front of it. */
#live2d-widget .companion-stage::before,
#live2d-widget .companion-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -5px;
  pointer-events: none;
}
#live2d-widget .companion-stage::before {
  background: var(--vn-scene) center 45% / cover;
  filter: blur(1.25px);
}
#live2d-widget .companion-stage::after {
  background:
    radial-gradient(circle at 12% 28%, var(--vn-light) 0 5px, transparent 15px),
    radial-gradient(circle at 84% 20%, #ffe3a5 0 4px, transparent 13px),
    radial-gradient(circle at 90% 75%, var(--vn-light) 0 7px, transparent 19px);
  opacity: 0.3;
  filter: blur(3px);
}
#live2d-widget #live2dcanvas {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  margin: 0;
  opacity: 1;
  transform: none;
  animation: none;
  filter: none;
  pointer-events: none;
}
#live2d-widget .vn-scene-light {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, var(--vn-light), transparent 65%);
  mix-blend-mode: soft-light;
  opacity: calc(var(--vn-light-strength, 0.75) * 0.2);
}
#live2d-widget[data-scene-time="night"] .vn-scene-light {
  opacity: calc(var(--vn-light-strength, 0.75) * 0.32);
}
#live2d-widget[data-scene-weather="rain"] .vn-scene-light,
#live2d-widget[data-scene-weather="storm"] .vn-scene-light {
  background: linear-gradient(110deg, #829fc3, transparent);
  mix-blend-mode: multiply;
  opacity: calc(var(--vn-light-strength, 0.75) * 0.18);
}
#live2d-widget[data-scene-lighting="false"] .vn-scene-light {
  display: none;
}
#live2d-widget .vn-scene-caption {
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 7px;
  background: #0c101bc9;
  color: #e4dfd9;
  border-left: 2px solid var(--classic-accent);
  font: 12px/1.5 var(--vn-font);
  pointer-events: none;
}
#live2d-widget .companion-load-status {
  display: none;
  position: absolute;
  z-index: 4;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--vn-ink);
  background: #0e1220e6;
  text-align: center;
}
#live2d-widget.is-loading .companion-load-status,
#live2d-widget.has-live2d-error .companion-load-status {
  display: flex;
}
#live2d-widget .companion-conversation {
  position: relative;
  min-height: 0;
  margin-top: 8px;
  padding: 11px 10px 6px;
  border: 3px double var(--vn-rule);
  background: var(--vn-panel);
}
#live2d-widget .vn-nameplate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin: -20px 0 8px;
}
#live2d-widget .vn-nameplate strong {
  padding: 0 6px;
  background: var(--vn-panel);
  color: var(--classic-accent);
  font: 12px/1.5 var(--vn-font);
}
#live2d-widget .vn-affinity {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  color: var(--vn-muted);
  background: var(--vn-panel);
  font-size: 12px;
}
#live2d-widget meter {
  width: 35px;
  height: 5px;
  appearance: none;
  border: 0;
  background: var(--classic-edge-mid);
}
#live2d-widget meter::-webkit-meter-bar {
  border: 0;
  border-radius: 0;
  height: 5px;
  background: var(--classic-edge-mid);
}
#live2d-widget meter::-webkit-meter-optimum-value {
  background: var(--classic-accent);
}
#live2d-widget meter::-moz-meter-bar {
  background: var(--classic-accent);
}
#live2d-widget #live2d-dialogue {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  opacity: 1;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  backdrop-filter: none;
  transform: none;
  transition: none;
  pointer-events: auto;
}
#live2d-widget .vn-reading {
  position: relative;
  min-height: 112px;
  padding: 2px 0 14px;
  cursor: pointer;
}
#live2d-widget .live2d-dialogue__text {
  margin: 0;
  padding: 0;
  color: var(--vn-ink);
  font: 12px/2 var(--vn-font);
  letter-spacing: 0.5px;
  line-break: strict;
  overflow-wrap: anywhere;
}
#live2d-widget .vn-next-mark {
  position: absolute;
  bottom: -1px;
  right: 0;
  font:
    15px "W95FA",
    sans-serif;
  color: var(--classic-accent);
}
#live2d-widget[data-dialogue-state="typing"] .vn-next-mark {
  visibility: hidden;
}
#live2d-widget .vn-choices {
  display: grid;
  gap: 5px;
  margin-top: 7px;
}
#live2d-widget .vn-choices:empty {
  display: none;
}
#live2d-widget .vn-choices button {
  text-align: left;
  min-height: 31px;
  border-color: color-mix(in srgb, var(--vn-rule) 60%, transparent);
}
#live2d-widget .companion-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0 6px;
}
#live2d-widget .companion-footer button {
  min-height: 29px;
  padding: 3px 7px;
  border-color: transparent;
  font-size: 12px;
  white-space: nowrap;
}
#live2d-widget .companion-footer #live2d-interact {
  position: static;
  display: block;
  width: auto;
  height: auto;
  min-width: 58px;
  margin-left: auto;
  border-color: var(--vn-rule);
  background: var(--classic-soft);
  font-size: 12px;
}
#live2d-widget .vn-weather-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px;
  border: 0;
  border-top: 1px solid var(--vn-rule);
  color: var(--vn-muted);
  text-align: left;
  font: 12px/1.3 var(--vn-font);
}
#live2d-widget .vn-weather-strip span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#live2d-widget .vn-panel {
  position: relative;
  grid-area: 1 / 1;
  z-index: 8;
  min-height: 0;
  max-height: calc(var(--vn-available-height, 100dvh - 24px) - 38px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--vn-rule);
  background: var(--vn-panel);
  box-shadow:
    inset 0 0 0 3px var(--vn-panel),
    inset 0 0 0 4px color-mix(in srgb, var(--vn-rule) 45%, transparent);
}
#live2d-widget .vn-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--vn-rule);
  color: var(--classic-accent);
  font-size: 12px;
}
#live2d-widget .vn-panel > header button {
  width: 26px;
  height: 26px;
  padding: 0;
  font:
    18px "W95FA",
    sans-serif;
}
#live2d-widget .vn-panel label {
  display: block;
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--vn-ink);
}
#live2d-widget .vn-panel output {
  display: block;
  float: right;
  color: var(--classic-accent);
  font: inherit;
}
#live2d-widget .vn-panel input[type="range"] {
  width: 100%;
  height: 24px;
  padding: 0;
  margin: 4px 0;
  accent-color: var(--classic-accent);
}
#live2d-widget .vn-panel input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--classic-accent);
}
#live2d-widget .vn-panel select {
  width: 100%;
}
#live2d-widget .vn-panel p {
  margin: 8px 0;
  font: 12px/1.7 var(--vn-font);
  color: var(--vn-muted);
}
#live2d-widget .vn-topic-list {
  display: grid;
  gap: 10px;
}
#live2d-widget .vn-topic-list button {
  min-height: 39px;
  text-align: left;
}
#live2d-widget .vn-friends-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#live2d-widget .vn-friends-list button {
  min-height: 36px;
  padding: 6px 4px;
  text-align: left;
  overflow-wrap: anywhere;
}
#live2d-widget .vn-history {
  max-height: 365px;
  overflow: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}
#live2d-widget .vn-history li {
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--vn-rule);
}
#live2d-widget .vn-history p:first-child {
  color: var(--vn-ink);
  font-size: 12px;
}
html body.live2d-is-hidden #live2d-widget {
  display: none;
}
@media (max-width: 599px) {
  #live2d-widget.is-docked {
    position: relative;
    z-index: auto;
    width: 100%;
    max-width: 100%;
  }
  #live2d-widget.is-minimized:not(.is-docked) {
    width: 222px;
  }
  #live2d-widget .companion-footer button {
    padding-inline: 5px;
  }
}
@media print {
  #live2d-widget {
    display: none;
  }
}

#live2d-widget .vn-panel .vn-check {
  display: flex;
  align-items: center;
  gap: 7px;
}
#live2d-widget .vn-panel input[type="checkbox"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0;
}

/* Floating windows stay within the viewport; docked windows grow with their content. */
#live2d-widget .vn-main-view {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#live2d-widget.has-vn-panel .vn-main-view {
  visibility: hidden;
  overflow: clip;
}
#live2d-widget.is-docked [data-companion-content],
#live2d-widget.is-docked .vn-panel {
  max-height: none;
}
#live2d-widget.is-docked .vn-main-view,
#live2d-widget.is-docked .vn-panel {
  overflow: visible;
}
#live2d-widget .vn-panel > header {
  position: sticky;
  top: -14px;
  z-index: 1;
  margin: -14px -14px 18px;
  padding: 14px;
  background: var(--vn-panel);
}