/* css/nexus.css

   Module Order
   1. Nexus View and Canvas
   2. Status and Tooltip
   3. Reader Token Popover
   4. Guide Panel
   5. Detail Modal
   6. Video Modal and Custom Player
   7. Global Theme, Responsive, and Reduced Motion
*/

/* ==========================================================================
   Nexus Main View
   ========================================================================== */

#nexus-main {
  display: none;
}

body[data-view-mode="nexus"] #reader-main,
body[data-view-mode="nexus"] #album-main,
body[data-view-mode="nexus"] #dictionary-main {
  display: none;
}

body[data-view-mode="nexus"] #nexus-main {
  display: flex;
}

body[data-view-mode="nexus"] .left-sidebar,
body[data-view-mode="nexus"] .right-sidebar {
  display: none;
}

body[data-view-mode="nexus"] .main-layout {
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

body[data-view-mode="nexus"] .reader-scene-bg {
  display: none;
}

/* ==========================================================================
   Nexus View Container
   ========================================================================== */

.nexus-main {
  position: relative;

  width: 100%;
  height:
    calc(
      100dvh -
      var(--top-bar-height) -
      var(--bottom-bar-height)
    );

  min-width: 0;
  min-height: 0;

  flex-direction: column;
  overflow: hidden;

  background: var(--color-bg);
}

.nexus-stage {
  --nexus-background-image:
    none;

  --nexus-background-overlay:
    linear-gradient(
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0.18)
    );

  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background-image:
    var(
      --nexus-background-overlay
    ),
    var(
      --nexus-background-image
    );

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;
}

.nexus-stage[data-nexus-layout-mode="portrait"] {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}


html[data-theme="dark"]
.nexus-stage {
  --nexus-background-overlay:
    linear-gradient(
      rgba(4, 7, 12, 0.28),
      rgba(4, 7, 12, 0.28)
    );
}


/* ==========================================================================
   Canvas Host
   ========================================================================== */

.nexus-board {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  isolation: isolate;
}

.nexus-board.is-active {
  visibility: visible;
}

.nexus-board[data-layout-mode="portrait"] {
  height:
    var(
      --nexus-portrait-content-height,
      2400px
    );

  min-height: 100%;
}

.nexus-board[data-layout-mode="portrait"]
.nexus-canvas {
  touch-action: pan-y;
}

.nexus-canvas {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  cursor: default;

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}


/* ==========================================================================
   Interaction States
   ========================================================================== */

.nexus-board[data-interaction-mode="clickable"] .nexus-canvas {
  cursor: pointer;
}

.nexus-board[data-interaction-mode="drag"] .nexus-canvas {
  cursor: grab;
}

.nexus-board.is-panning .nexus-canvas {
  cursor: grabbing;
}


/* ==========================================================================
   Nexus Tooltip
   ========================================================================== */

.nexus-tooltip {
  position: absolute;
  z-index: 4;

  width: max-content;
  max-width:
    min(
      20rem,
      calc(100% - 1.5rem)
    );

  padding:
    0.6rem
    0.75rem;

  border:
    1px solid
    var(--color-border);

  border-radius: 0.7rem;

  background:
    color-mix(
      in srgb,
      var(--color-surface) 94%,
      transparent
    );

  box-shadow:
    0 0.75rem 2rem
    rgba(0, 0, 0, 0.14);

  color:
    var(--color-text);

  font-size: 0.82rem;
  line-height: 1.5;

  opacity: 0;

  transition:
    opacity 140ms ease;

  pointer-events: none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/*
  默认区域：鼠标右上方
*/
.nexus-tooltip[data-placement="above-right"] {
  transform:
    translate3d(
      0.75rem,
      -100%,
      0
    )
    translateY(-0.4rem);
}

.nexus-tooltip[data-placement="above-right"].is-visible {
  transform:
    translate3d(
      0.75rem,
      -100%,
      0
    )
    translateY(-0.7rem);
}

/*
  顶部区域：鼠标右下方
*/
.nexus-tooltip[data-placement="below-right"] {
  transform:
    translate3d(
      0.75rem,
      0,
      0
    )
    translateY(0.4rem);
}

.nexus-tooltip[data-placement="below-right"].is-visible {
  transform:
    translate3d(
      0.75rem,
      0,
      0
    )
    translateY(0.7rem);
}

/*
  右侧区域：鼠标左上方
*/
.nexus-tooltip[data-placement="above-left"] {
  transform:
    translate3d(
      calc(-100% - 0.75rem),
      -100%,
      0
    )
    translateY(-0.4rem);
}

.nexus-tooltip[data-placement="above-left"].is-visible {
  transform:
    translate3d(
      calc(-100% - 0.75rem),
      -100%,
      0
    )
    translateY(-0.7rem);
}

/*
  右上角区域：鼠标左下方
*/
.nexus-tooltip[data-placement="below-left"] {
  transform:
    translate3d(
      calc(-100% - 0.75rem),
      0,
      0
    )
    translateY(0.4rem);
}

.nexus-tooltip[data-placement="below-left"].is-visible {
  transform:
    translate3d(
      calc(-100% - 0.75rem),
      0,
      0
    )
    translateY(0.7rem);
}

.nexus-tooltip.is-visible {
  opacity: 1;
}

.nexus-tooltip[hidden] {
  display: none;
}

.nexus-tooltip-title,
.nexus-tooltip-status {
  display: block;
}

.nexus-tooltip-title {
  color:
    var(--color-text);

  font-weight: 600;
}

.nexus-tooltip-status {
  margin-top: 0.2rem;

  color:
    var(--color-text-muted);

  font-size: 0.76rem;
}

/* ==========================================================================
   Nexus Reader Token Popover
   ========================================================================== */

.nexus-token-popover {
  position: fixed;
  z-index:
    var(--z-nexus-token-popover);

  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;

  width: min(320px, calc(100vw - 20px));
  min-height: 96px;

  padding: 8px;

  border: 1px solid var(--color-border);
  border-radius: 14px;

  background: var(--color-popover-bg);
  color: var(--color-text);

  box-shadow: var(--color-popover-shadow);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(4px)
    scale(0.98);

  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 140ms ease;
}

.nexus-token-popover[hidden] {
  display: none;
}

.nexus-token-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}

.nexus-token-popover[data-placement="above"] {
  transform-origin: center bottom;
}

.nexus-token-popover[data-placement="below"] {
  transform-origin: center top;
}


/* --------------------------------------------------------------------------
   Image
   -------------------------------------------------------------------------- */

.nexus-token-popover-image-frame {
  width: 96px;
  height: 96px;

  overflow: hidden;

  border: 1px solid var(--color-border);
  border-radius: 10px;

  background: var(--color-surface-soft);
}

.nexus-token-popover-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.nexus-token-popover-image-frame.has-image-error {
  display: none;
}


/*
  图片缺失时，卡片自动退化成纯文字布局。
*/
.nexus-token-popover:has(
  .nexus-token-popover-image-frame[hidden]
),
.nexus-token-popover:has(
  .nexus-token-popover-image-frame.has-image-error
) {
  grid-template-columns: minmax(0, 1fr);
}


/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.nexus-token-popover-content {
  min-width: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  padding:
    4px
    4px
    4px
    0;
}

.nexus-token-popover-heading {
  min-width: 0;
}

.nexus-token-popover-title {
  display: block;

  overflow: hidden;

  color: var(--color-text);

  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.nexus-token-popover-assist-label {
  display: block;

  overflow: hidden;

  margin-top: 4px;

  color: var(--color-text-soft);

  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.nexus-token-popover-assist-label[hidden] {
  display: none;
}


/* --------------------------------------------------------------------------
   Action
   -------------------------------------------------------------------------- */

.nexus-token-popover-action {
  appearance: none;

  align-self: flex-start;

  margin: 8px 0 0;
  padding:
    5px
    9px;

  border: 1px solid var(--reader-button-border);
  border-radius: 999px;

  background: var(--reader-button-bg);

  color: var(--color-text-muted);

  font: inherit;
  font-size: 12px;
  line-height: 1.2;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    transform 120ms ease;
}

.nexus-token-popover-action:hover {
  background: var(--reader-button-bg-hover);
  border-color: var(--reader-button-border-hover);
  color: var(--color-text);
}

.nexus-token-popover-action:active {
  transform: scale(0.97);
}

.nexus-token-popover-action:focus-visible {
  outline:
    1px solid
    color-mix(
      in srgb,
      currentColor 40%,
      transparent
    );

  outline-offset: 2px;
}

.nexus-token-popover-action:disabled {
  cursor: wait;
  opacity: 0.58;
}


/* --------------------------------------------------------------------------
   State
   -------------------------------------------------------------------------- */

.nexus-token-popover.is-collected
.nexus-token-popover-action {
  background: var(--color-control-bg-active);
  border-color: var(--color-border);
  color: var(--color-text);
}

.nexus-token-popover.is-uncollected
.nexus-token-popover-action {
  color: var(--color-text-muted);
}

/* ==========================================================================
   Nexus Guide Panel
   ========================================================================== */

.nexus-guide-panel {
	--nexus-guide-panel-width: 720px;
	--nexus-guide-rail-height: 44px;
	--nexus-guide-body-height: 0px;
	--nexus-guide-horizontal-duration: 220ms;
	--nexus-guide-vertical-duration: 260ms;

	position: absolute;
  z-index:
    var(--z-local-overlay);

	width: 0;
	height:
		calc(
			var(--nexus-guide-rail-height) +
			var(--nexus-guide-body-height)
		);

	overflow: hidden;

	border:
		1px solid
		rgba(116, 107, 95, 0.35);

	border-radius:
		0 10px 10px 0;

	background:
		rgba(247, 243, 236, 0.94);

	box-shadow:
		0 12px 30px
		rgba(40, 34, 28, 0.16);

	backdrop-filter:
		blur(14px);

	-webkit-backdrop-filter:
		blur(14px);

	transform-origin:
		left top;

	transition:
		width
		var(--nexus-guide-horizontal-duration)
		cubic-bezier(
			0.22,
			0.8,
			0.2,
			1
		);

	pointer-events: none;
}

.nexus-guide-panel[hidden] {
	display: none;
}

.nexus-guide-panel.is-extending {
	width:
		var(--nexus-guide-panel-width);

	pointer-events: auto;
}

.nexus-guide-panel-rail {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: space-between;

	height:
		var(--nexus-guide-rail-height);

	padding:
		0 12px 0 16px;

	box-sizing:
		border-box;

	border-bottom:
		1px solid transparent;

	white-space: nowrap;
}

.nexus-guide-panel.is-expanded
	.nexus-guide-panel-rail {
	border-bottom-color:
		rgba(116, 107, 95, 0.18);
}

.nexus-guide-panel-title {
	overflow: hidden;

	color:
		rgba(69, 63, 55, 0.92);

	font-size: 0.88rem;
	font-weight: 600;

	letter-spacing: 0.06em;

	opacity: 0;

	transform:
		translateX(-8px);

	transition:
		opacity 140ms ease
			80ms,
		transform 180ms ease
			80ms;
}

.nexus-guide-panel.is-extending
	.nexus-guide-panel-title {
	opacity: 1;

	transform:
		translateX(0);
}

.nexus-guide-panel-close {
	display: grid;
	place-items: center;

	flex: 0 0 auto;

	width: 28px;
	height: 28px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background:
		transparent;

	color:
		rgba(82, 73, 63, 0.72);

	font: inherit;
	font-size: 1.15rem;
	line-height: 1;

	cursor: pointer;

	opacity: 0;

	transition:
		background-color 140ms ease,
		color 140ms ease,
		opacity 140ms ease
			100ms;
}

.nexus-guide-panel.is-extending
	.nexus-guide-panel-close {
	opacity: 1;
}

.nexus-guide-panel-close:hover {
	background:
		rgba(100, 88, 75, 0.1);

	color:
		rgba(55, 49, 42, 0.95);
}

.nexus-guide-panel-close:focus-visible {
	outline:
		2px solid
		rgba(80, 110, 145, 0.62);

	outline-offset: 2px;
}

.nexus-guide-panel-close-tooltip {
	position: absolute;
	z-index: 2;
	top: calc(100% - 4px);
	right: 8px;

	width: max-content;
	padding: 0.46rem 0.62rem;

	border:
		1px solid
		rgba(116, 107, 95, 0.28);
	border-radius: 0.62rem;

	background:
		rgba(247, 243, 236, 0.97);

	box-shadow:
		0 0.6rem 1.5rem
		rgba(40, 34, 28, 0.15);

	color:
		rgba(69, 63, 55, 0.94);

	font-size: 0.74rem;
	font-weight: 500;
	line-height: 1.35;

	opacity: 0;
	transform: translateY(-4px);

	transition:
		opacity 140ms ease,
		transform 140ms ease;

	pointer-events: none;
	white-space: nowrap;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.nexus-guide-panel-close-tooltip.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nexus-guide-panel-close-tooltip[hidden] {
	display: none;
}

.nexus-guide-panel-body {
	height:
		var(--nexus-guide-body-height);

	overflow: hidden;

	transition:
		height
		var(--nexus-guide-vertical-duration)
		cubic-bezier(
			0.22,
			0.8,
			0.2,
			1
		);
}

.nexus-guide-panel-content {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	flex-wrap: wrap;

	padding:
		16px 18px 18px;

	box-sizing:
		border-box;

	color:
		rgba(75, 68, 59, 0.88);

	font-size: 0.86rem;
	line-height: 1.72;

	opacity: 0;

	transform:
		translateY(-6px);

	transition:
		opacity 180ms ease
			80ms,
		transform 220ms ease
			80ms;
}

.nexus-guide-panel-copy {
	flex: 1 1 300px;
	min-width: 0;
}

.nexus-guide-panel-media {
	flex: 0 1 256px;

	width: min(256px, 100%);
	aspect-ratio: 1;

	overflow: hidden;

	border-radius: 12px;

	background:
		rgba(116, 107, 95, 0.08);
}

.nexus-guide-panel-video {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	background: transparent;
}

.nexus-guide-panel.is-expanded
	.nexus-guide-panel-content {
	opacity: 1;

	transform:
		translateY(0);
}

.nexus-guide-panel-content p {
	margin:
		0 0 0.85em;
}

.nexus-guide-panel-content p:last-child {
	margin-bottom: 0;
}

.nexus-guide-panel-content ul {
	margin:
		0.25em 0 0.9em;

	padding-left:
		1.4em;
}

.nexus-guide-panel-content li {
	margin:
		0.28em 0;
}

/* Dark Theme */

:root[data-theme="dark"]
	.nexus-guide-panel {
	border-color:
		rgba(232, 226, 214, 0.16);

	background:
		rgba(18, 21, 25, 0.93);

	box-shadow:
		0 14px 34px
		rgba(0, 0, 0, 0.38);
}

:root[data-theme="dark"]
	.nexus-guide-panel.is-expanded
	.nexus-guide-panel-rail {
	border-bottom-color:
		rgba(232, 226, 214, 0.11);
}

:root[data-theme="dark"]
	.nexus-guide-panel-title {
	color:
		rgba(232, 227, 218, 0.92);
}

:root[data-theme="dark"]
	.nexus-guide-panel-close {
	color:
		rgba(206, 199, 188, 0.74);
}

:root[data-theme="dark"]
	.nexus-guide-panel-close:hover {
	background:
		rgba(255, 255, 255, 0.08);

	color:
		rgba(244, 239, 231, 0.96);
}

:root[data-theme="dark"]
	.nexus-guide-panel-close-tooltip {
	border-color:
		rgba(232, 226, 214, 0.16);

	background:
		rgba(18, 21, 25, 0.97);

	box-shadow:
		0 0.7rem 1.7rem
		rgba(0, 0, 0, 0.34);

	color:
		rgba(232, 227, 218, 0.94);
}

:root[data-theme="dark"]
	.nexus-guide-panel-content {
	color:
		rgba(209, 202, 191, 0.86);
}

/* Reduced Motion */

@media (
	prefers-reduced-motion:
	reduce
) {
	.nexus-guide-panel,
	.nexus-guide-panel-body,
	.nexus-guide-panel-title,
	.nexus-guide-panel-close,
	.nexus-guide-panel-close-tooltip,
	.nexus-guide-panel-content {
		transition-duration:
			1ms !important;

		transition-delay:
			0ms !important;
	}
}

/* ==========================================================================
   Nexus Detail Modal
   ========================================================================== */

body.is-nexus-modal-open {
  overflow: hidden;
}

.nexus-modal {
  position: fixed;

  top:
    var(--top-bar-height);

  right: 0;
  bottom: 0;
  left: 0;

  z-index:
    var(--z-nexus-modal);

  display: grid;
  place-items: center;

  padding:
    clamp(1rem, 3vw, 2.5rem);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.nexus-modal[hidden] {
  display: none;
}

.nexus-modal.is-open {
  opacity: 1;
  visibility: visible;
}


/* ==========================================================================
   Modal Backdrop
   ========================================================================== */

.nexus-modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(12, 13, 15, 0.58);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* ==========================================================================
   Modal Dialog
   ========================================================================== */

.nexus-modal-dialog {
  position: relative;
  z-index: 1;

  width:
    clamp(
      45rem,
      72vw,
      57.5rem
    );

  max-width: 100%;

  max-height:
    min(
      calc(
        100dvh -
        var(--top-bar-height) -
        5rem
      ),
      38.75rem
    );

  display: grid;

  grid-template-columns:
    minmax(17.5rem, 21.25rem)
    minmax(0, 1fr);

  overflow: hidden;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-border) 88%,
      transparent
    );

  border-radius:
    1.15rem;

  background:
    color-mix(
      in srgb,
      var(--color-surface) 97%,
      transparent
    );

  box-shadow:
    0 1.6rem 5rem
    rgba(0, 0, 0, 0.26);

  transform:
    translateY(0.75rem)
    scale(0.985);

  transition:
    transform 180ms ease;

  outline: none;
}

.nexus-modal.is-open
.nexus-modal-dialog {
  transform:
    translateY(0)
    scale(1);
}

.nexus-modal.is-phrase-entry
.nexus-modal-dialog {
  width:
    min(
      24rem,
      calc(100vw - 2rem)
    );

  min-height: 10rem;

  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.nexus-modal.is-phrase-entry
.nexus-modal-image-frame,
.nexus-modal.is-phrase-entry
.nexus-modal-content {
  display: none;
}


/* ==========================================================================
   Modal Close Button
   ========================================================================== */

.nexus-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;

  z-index: 3;

  width: 2.25rem;
  height: 2.25rem;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-border) 84%,
      transparent
    );

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--color-surface) 90%,
      transparent
    );

  color:
    var(--color-text-muted);

  font: inherit;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  backdrop-filter:
    blur(8px);

  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.nexus-modal-close:hover {
  color:
    var(--color-text);

  border-color:
    var(--color-text-muted);

  background:
    var(--color-surface);

  transform:
    scale(1.05);
}

.nexus-modal-close:focus-visible {
  outline:
    2px solid
    var(--color-text);

  outline-offset:
    2px;
}


/* ==========================================================================
   Modal Image
   ========================================================================== */

.nexus-modal-image-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;

  aspect-ratio: 1;

  align-self: center;

  overflow: hidden;

  background:
    color-mix(
      in srgb,
      var(--color-bg) 88%,
      var(--color-surface)
    );

  border-right:
    1px solid
    color-mix(
      in srgb,
      var(--color-border) 78%,
      transparent
    );
}

.nexus-modal-image-frame::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  box-shadow:
    inset 0 0 2.5rem
    rgba(0, 0, 0, 0.08);
}

.nexus-modal-image {
  display: block;

  width:
    calc(100% - 1rem);

  height:
    calc(100% - 1rem);

  margin: 0.5rem;

  object-fit: contain;
  object-position: center;

  user-select: none;
  -webkit-user-drag: none;
}

.nexus-modal-image[hidden] {
  display: none;
}


/* ==========================================================================
   Modal Text Content
   ========================================================================== */

.nexus-modal-content {
  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  padding:
    clamp(2rem, 3vw, 3rem)
    clamp(1.8rem, 3vw, 3rem)
    clamp(1.8rem, 3vw, 2.6rem);

  overflow-y: auto;
}

.nexus-modal-header {
  padding-right: 1.75rem;
}

.nexus-modal-title {
  margin: 0;

  color:
    var(--color-text);

  font-size:
    clamp(
      1.55rem,
      2.2vw,
      2rem
    );

  font-weight: 600;
  line-height: 1.25;

  letter-spacing: 0.02em;
}

.nexus-modal-subtitle {
  margin:
    0.8rem
    0
    0;

  color:
    var(--color-text-muted);

  font-size: 0.86rem;
  line-height: 1.65;

  letter-spacing: 0.025em;
}

.nexus-modal-subtitle:empty {
  display: none;
}

.nexus-modal-divider {
  width: 100%;
  height: 1px;

  margin:
    1.35rem
    0
    1.3rem;

  background:
    linear-gradient(
      90deg,
      var(--color-border),
      transparent
    );
}

.nexus-modal-description {
  margin: 0;

  color:
    var(--color-text);

  font-size: 1rem;
  line-height: 1.85;

  letter-spacing: 0.012em;

  white-space: pre-line;
}

.nexus-modal-collected-time {
	margin: 18px 0 0;
	text-align: right;
	font-size: 0.78rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	opacity: 0.58;
}

.nexus-modal-phrase-form {
  min-width: 0;

  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 0.85rem;

  padding:
    3.5rem
    2.25rem
    2.25rem;
}

.nexus-modal-phrase-form[hidden] {
  display: none;
}

.nexus-modal-phrase-title {
  margin: 0;

  color:
    var(--color-text);

  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;

  letter-spacing: 0.025em;
}

.nexus-modal-phrase-description {
  margin: 0;

  color:
    var(--color-text);

  font-size: 0.92rem;
  line-height: 1.75;

  letter-spacing: 0.015em;
}

.nexus-modal-phrase-description span {
  display: block;

  margin-top: 0.35rem;

  color:
    var(--color-text-muted);
}

.nexus-modal-phrase-input {
  width: 100%;
  min-width: 0;

  padding:
    0.72rem
    0.82rem;

  border:
    1px solid
    var(--color-border);

  border-radius: 0.5rem;

  background:
    var(--color-bg);

  color:
    var(--color-text);

  font: inherit;
  font-size: 1rem;
  line-height: 1.4;

  outline: none;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.nexus-modal-phrase-input:focus {
  border-color:
    var(--color-text-muted);

  box-shadow:
    0 0 0 2px
    color-mix(
      in srgb,
      var(--color-text-muted) 22%,
      transparent
    );
}

.nexus-modal-phrase-input::placeholder {
  color:
    var(--color-text-muted);

  opacity: 0.72;
}

/* ==========================================================================
   Modal Theme Adaptation
   ========================================================================== */

html[data-theme="dark"]
.nexus-modal-backdrop {
  background:
    rgba(4, 5, 7, 0.7);
}

html[data-theme="dark"]
.nexus-modal-dialog {
  border-color:
    color-mix(
      in srgb,
      var(--color-border) 72%,
      transparent
    );

  box-shadow:
    0 1.8rem 5.5rem
    rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"]
.nexus-modal-image-frame::after {
  box-shadow:
    inset 0 0 3rem
    rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Modal Responsive
   ========================================================================== */

@media (max-width: 760px) {
  .nexus-modal {
    padding: 1rem;
  }

  .nexus-modal-dialog {
    width: min(34rem, 100%);

    max-height:
      calc(
        100dvh -
        var(--top-bar-height) -
        2rem
      );

    grid-template-columns: 1fr;
    grid-template-rows:
      auto
      minmax(0, 1fr);
  }

  .nexus-modal.is-phrase-entry
  .nexus-modal-dialog {
    width: min(24rem, 100%);
    min-height: 9rem;
    grid-template-rows: 1fr;
  }

  .nexus-modal-phrase-form {
    padding:
      3.25rem
      1.5rem
      1.75rem;
  }

  .nexus-modal-image-frame {
    width: 100%;
    max-height: 42dvh;

    aspect-ratio: 16 / 10;

    border-right: 0;

    border-bottom:
      1px solid
      color-mix(
        in srgb,
        var(--color-border) 78%,
        transparent
      );
  }

  .nexus-modal-content {
    padding:
      1.5rem
      1.4rem
      1.6rem;
  }

  .nexus-modal-title {
    font-size: 1.45rem;
  }
}

@media (max-height: 650px)
and (min-width: 761px) {
  .nexus-modal-dialog {
    width:
      min(
        50rem,
        calc(100vw - 3rem)
      );

    max-height:
      calc(
        100dvh -
        var(--top-bar-height) -
        2rem
      );

    grid-template-columns:
      minmax(15rem, 18rem)
      minmax(0, 1fr);
  }

  .nexus-modal-content {
    padding:
      1.6rem
      1.8rem;
  }

  .nexus-modal-title {
    font-size: 1.45rem;
  }

  .nexus-modal-description {
    font-size: 0.94rem;
    line-height: 1.75;
  }
}

/* ==========================================================================\n   Nexus Video Modal and Player\n   ========================================================================== */

/* --------------------------------------------------------------------------\n   1. Document Lock\n   -------------------------------------------------------------------------- */

html.has-nexus-video-modal,
html.has-nexus-video-modal body {
  overflow: hidden;
}

/* --------------------------------------------------------------------------\n   2. Modal Shell\n   -------------------------------------------------------------------------- */

.nexus-video-modal {
  position: fixed;

  top:
    var(--top-bar-height);

  right: 0;
  bottom: 0;
  left: 0;

  z-index:
    var(--z-video-modal);

  display: grid;
  place-items: center;

  padding:
    clamp(1rem, 3vw, 2.5rem);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.nexus-video-modal[hidden] {
  display: none;
}

.nexus-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.nexus-video-modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(8, 10, 13, 0.78);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nexus-video-modal-panel {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  width: min(72rem, calc(100vw - 3rem));
  max-height:
    calc(
      100dvh -
      var(--top-bar-height) -
      3rem
    );

  overflow: hidden;

  border: 1px solid
    color-mix(in srgb, var(--color-border) 76%, transparent);
  border-radius: 1.1rem;

  background:
    color-mix(in srgb, var(--color-surface) 97%, transparent);

  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.42);

  transform: translateY(0.8rem) scale(0.985);
  transition: transform 180ms ease;

  outline: none;
}

.nexus-video-modal.is-open .nexus-video-modal-panel {
  transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------------------\n   3. Modal Header\n   -------------------------------------------------------------------------- */

.nexus-video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  flex: 0 0 auto;
  min-height: 4.5rem;

  padding: 0.9rem 1rem 0.9rem 1.35rem;

  border-bottom: 1px solid
    color-mix(in srgb, var(--color-border) 70%, transparent);
}

.nexus-video-modal-heading {
  min-width: 0;
}

.nexus-video-modal-eyebrow {
  display: block;

  color: var(--color-text-muted);

  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nexus-video-modal-title {
  margin: 0.3rem 0 0;

  color: var(--color-text);

  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.nexus-video-modal-close {
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  width: 2.35rem;
  height: 2.35rem;
  padding: 0;

  border: 1px solid
    color-mix(in srgb, var(--color-border) 82%, transparent);
  border-radius: 999px;

  background:
    color-mix(in srgb, var(--color-surface) 88%, transparent);

  color: var(--color-text-muted);

	font-family:
		var(--font-latin),
		sans-serif;

	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;

  cursor: pointer;

  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.nexus-video-modal-close:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
  background: var(--color-surface);
  transform: scale(1.05);
}

.nexus-video-modal-close:active {
  transform: scale(0.96);
}

.nexus-video-modal-close:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------\n   4. Player Stage\n   -------------------------------------------------------------------------- */

.nexus-video-modal-stage {
  display: grid;
  place-items: center;

  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;

  overflow: hidden;

  padding: clamp(0.75rem, 1.5vw, 1.25rem);

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255, 255, 255, 0.045),
      transparent 58%
    ),
    rgba(0, 0, 0, 0.92);
}

.nexus-video-player-shell {
  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 100%;
  max-height:
    calc(
      100dvh -
      var(--top-bar-height) -
      9rem
    );
  aspect-ratio: 16 / 9;

  overflow: hidden;

  border-radius: 0.7rem;
  background: #000;

  box-shadow: 0 1rem 3.5rem rgba(0, 0, 0, 0.45);
}

.nexus-video-player {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
  background: #000;

  object-fit: contain;

  cursor: pointer;
}

/* --------------------------------------------------------------------------\n   5. Center Playback State\n   -------------------------------------------------------------------------- */

.nexus-video-center-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;

	display: grid;
	place-items: center;

	width: clamp(3.5rem, 7vw, 5.25rem);
	height: clamp(3.5rem, 7vw, 5.25rem);
	padding: 0;

	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: 999px;

	background: rgba(8, 10, 13, 0.58);

	cursor: pointer;

	opacity: 1;
	transform: translate(-50%, -50%) scale(1);

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	transition:
		opacity 160ms ease,
		transform 160ms ease,
		background-color 140ms ease;
}

.nexus-video-center-play:hover {
  background: rgba(8, 10, 13, 0.76);
  transform: translate(-50%, -50%) scale(1.06);
}

.nexus-video-center-play:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.nexus-video-center-play:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 3px;
}

/*
	播放状态下，中央按钮仍然存在。

	鼠标移动唤醒 controls 时，
	它显示为暂停按钮；
	controls 自动隐藏后再一起消失。
*/
.nexus-video-player-shell[
	data-player-state="playing"
]
.nexus-video-center-play {
	opacity: 1;

	pointer-events: auto;

	transform:
		translate(-50%, -50%)
		scale(1);
}

.nexus-video-player-shell[data-player-state="ended"]
  .nexus-video-center-play {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------\n   6. Progress Display\n   -------------------------------------------------------------------------- */

.nexus-video-controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;

  padding: 0 0.9rem 0.8rem;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.52) 58%,
      transparent 100%
    );
}

.nexus-video-progress {
  width: 100%;
  padding: 0.45rem 0;

  cursor: pointer;
  pointer-events: auto;

  touch-action: none;
}

.nexus-video-progress-track {
  position: relative;

  width: 100%;
  height: 3px;

  overflow: hidden;

  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.nexus-video-progress-buffered,
.nexus-video-progress-played {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 0;

  border-radius: inherit;
}

.nexus-video-progress-buffered {
  z-index: 1;
  background: rgba(255, 255, 255, 0.28);
}

.nexus-video-progress-played {
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
}

/* --------------------------------------------------------------------------\n   7. Control Row\n   -------------------------------------------------------------------------- */

.nexus-video-controls-row,
.nexus-video-controls-left,
.nexus-video-controls-right {
  display: flex;
  align-items: center;
}

.nexus-video-controls-row {
  justify-content: space-between;
  gap: 0.75rem;
}

.nexus-video-controls-left,
.nexus-video-controls-right {
  gap: 0.35rem;
}

.nexus-video-control-button {
  display: grid;
  place-items: center;

  width: 2.25rem;
  height: 2.25rem;
  padding: 0;

  border: 0;
  border-radius: 999px;

  background: transparent;

  cursor: pointer;

  transition:
    background-color 120ms ease,
    transform 120ms ease;
}

.nexus-video-control-button:hover {
	background: rgba(255, 255, 255, 0.12);
}

.nexus-video-control-button:active {
  transform: scale(0.92);
}

.nexus-video-control-button:focus-visible,
.nexus-video-volume-slider:focus-visible,
.nexus-video-replay-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
}

.nexus-video-time {
  display: flex;
  align-items: center;
  gap: 0.32rem;

  min-width: 6.6rem;
  margin: 0 0.25rem;

  color: rgba(255, 255, 255, 0.78);

  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.nexus-video-time-separator {
  opacity: 0.48;
}

/* --------------------------------------------------------------------------\n   8. Volume\n   -------------------------------------------------------------------------- */

.nexus-video-volume-control {
  display: flex;
  align-items: center;

  width: 5.5rem;
}

.nexus-video-volume-slider {
  --nexus-volume-level: 100%;

  width: 100%;
  height: 1rem;
  margin: 0;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;
  cursor: pointer;
}

.nexus-video-volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;

  border-radius: 999px;
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.92) 0,
      rgba(255, 255, 255, 0.92) var(--nexus-volume-level),
      rgba(255, 255, 255, 0.24) var(--nexus-volume-level),
      rgba(255, 255, 255, 0.24) 100%
    );
}

.nexus-video-volume-slider::-webkit-slider-thumb {
  width: 0.72rem;
  height: 0.72rem;
  margin-top: calc((3px - 0.72rem) / 2);

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-radius: 999px;
  background: #fff;
}

.nexus-video-volume-slider::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.nexus-video-volume-slider::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.nexus-video-volume-slider::-moz-range-thumb {
  width: 0.72rem;
  height: 0.72rem;

  border: 0;
  border-radius: 999px;
  background: #fff;
}

/* --------------------------------------------------------------------------\n   9. Ended, Loading, and Error States\n   -------------------------------------------------------------------------- */

.nexus-video-ended-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: grid;
  place-items: center;

  background: rgba(0, 0, 0, 0.48);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.nexus-video-ended-overlay[hidden] {
  display: none;
}

.nexus-video-replay-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  padding: 0.7rem 1rem;

  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;

  background: rgba(8, 10, 13, 0.68);
  color: rgba(255, 255, 255, 0.94);

  font: inherit;
  font-size: 0.9rem;

  cursor: pointer;

  transition:
    background-color 140ms ease,
    transform 140ms ease;
}

.nexus-video-replay-button:hover {
  background: rgba(8, 10, 13, 0.84);
  transform: scale(1.03);
}

.nexus-video-player-shell[data-loading="true"]::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;

  width: 2rem;
  height: 2rem;

  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.92);
  border-radius: 999px;

  transform: translate(-50%, -50%);
  animation: nexus-video-spinner 800ms linear infinite;

  pointer-events: none;
}

.nexus-video-player-shell[data-player-state="error"]::before {
  content: "视频无法播放";

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;

  padding: 0.7rem 0.9rem;

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.65rem;

  background: rgba(8, 10, 13, 0.76);
  color: rgba(255, 255, 255, 0.9);

  font-size: 0.86rem;

  transform: translate(-50%, -50%);

  pointer-events: none;
}

@keyframes nexus-video-spinner {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* --------------------------------------------------------------------------\n   10. Fullscreen\n   -------------------------------------------------------------------------- */

.nexus-video-player-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;

  border-radius: 0;
  background: #000;
}

.nexus-video-player-shell:fullscreen .nexus-video-controls {
  padding-right: clamp(1rem, 2vw, 2rem);
  padding-bottom: clamp(0.9rem, 2vh, 1.5rem);
  padding-left: clamp(1rem, 2vw, 2rem);
}

/* --------------------------------------------------------------------------
   Player Controls Visibility
   -------------------------------------------------------------------------- */

.nexus-video-controls,
.nexus-video-center-play {
	opacity: 1;
	visibility: visible;

	transition:
		opacity 220ms ease,
		visibility 220ms ease,
		transform 220ms ease;
}

.nexus-video-player-shell.is-controls-hidden
.nexus-video-controls {
	opacity: 0;
	visibility: hidden;

	transform:
		translateY(0.45rem);

	pointer-events: none;
}

.nexus-video-player-shell.is-controls-hidden
.nexus-video-center-play {
	opacity: 0;
	visibility: hidden;

	pointer-events: none;

	transform:
		translate(-50%, -50%)
		scale(0.88);
}

.nexus-video-player-shell.is-controls-hidden {
	cursor: none;
}

/*
	暂停、播放结束、错误或加载中时，
	强制恢复鼠标与控制栏。
*/
.nexus-video-player-shell[
	data-player-state="paused"
],
.nexus-video-player-shell[
	data-player-state="ended"
],
.nexus-video-player-shell[
	data-player-state="error"
],
.nexus-video-player-shell[
	data-loading="true"
] {
	cursor: default;
}

.nexus-video-player-shell[
	data-player-state="paused"
]
.nexus-video-controls,
.nexus-video-player-shell[
	data-player-state="ended"
]
.nexus-video-controls,
.nexus-video-player-shell[
	data-player-state="error"
]
.nexus-video-controls,
.nexus-video-player-shell[
	data-loading="true"
]
.nexus-video-controls {
	opacity: 1;
	visibility: visible;

	transform:
		translateY(0);

	pointer-events: auto;
}

/* --------------------------------------------------------------------------\n   11. Theme Adaptation\n   -------------------------------------------------------------------------- */

html[data-theme="dark"] .nexus-video-modal-backdrop {
  background: rgba(2, 4, 7, 0.84);
}

html[data-theme="dark"] .nexus-video-modal-panel {
  border-color: rgba(232, 226, 214, 0.14);
  background: rgba(16, 19, 23, 0.97);
  box-shadow: 0 2.2rem 6.5rem rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] .nexus-video-modal-header {
  border-bottom-color: rgba(232, 226, 214, 0.11);
}

.nexus-video-icon {
	display: block;

	width: 1.35rem;
	height: 1.35rem;

	object-fit: contain;

	pointer-events: none;
	user-select: none;
}

.nexus-video-center-play-icon {
	width: 2.25rem;
	height: 2.25rem;
}

.nexus-video-replay-button
.nexus-video-icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* --------------------------------------------------------------------------\n   12. Responsive\n   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .nexus-video-modal {
    padding: 0.75rem;
  }

  .nexus-video-modal-panel {
    width: 100%;
    max-height:
      calc(
        100dvh -
        var(--top-bar-height) -
        1.5rem
      );
    border-radius: 0.9rem;
  }

  .nexus-video-modal-header {
    min-height: 4rem;
    padding: 0.75rem 0.8rem 0.75rem 1rem;
  }

  .nexus-video-modal-stage {
    padding: 0.5rem;
  }

  .nexus-video-player-shell {
    max-height:
      calc(
        100dvh -
        var(--top-bar-height) -
        7rem
      );
    border-radius: 0.55rem;
  }

  .nexus-video-controls {
    padding: 0 0.55rem 0.5rem;
  }

  .nexus-video-volume-control {
    width: 4rem;
  }

  .nexus-video-time {
    min-width: 5.7rem;
    margin-right: 0;
    font-size: 0.7rem;
  }
}

@media (max-width: 520px) {
  .nexus-video-volume-control {
    display: none;
  }

  .nexus-video-controls-row {
    gap: 0.35rem;
  }
}

@media (max-height: 650px) {
  .nexus-video-modal {
    padding: 0.75rem;
  }

  .nexus-video-modal-panel {
    width: min(62rem, calc(100vw - 1.5rem));
    max-height:
      calc(
        100dvh -
        var(--top-bar-height) -
        1.5rem
      );
  }

  .nexus-video-modal-header {
    min-height: 3.65rem;
    padding: 0.65rem 0.8rem 0.65rem 1rem;
  }

  .nexus-video-player-shell {
    max-height:
      calc(
        100dvh -
        var(--top-bar-height) -
        6rem
      );
  }
}

/* ==========================================================================
   Theme Adaptation
   ========================================================================== */

html[data-theme="dark"] .nexus-main {
  background:
    radial-gradient(
      circle at 50% 46%,
      color-mix(
        in srgb,
        var(--accent-color) 7%,
        transparent
      ),
      transparent 60%
    ),
    var(--color-surface);
}

html[data-theme="dark"] .nexus-tooltip {
  box-shadow:
    0 0.9rem 2.6rem
    rgba(0, 0, 0, 0.32);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.nexus-main {
		height:
			calc(
			100dvh -
			var(--top-bar-height) -
			var(--bottom-bar-height)
			);
	}

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.nexus-tooltip,
	.nexus-modal,
	.nexus-modal-dialog,
	.nexus-modal-close,
	.nexus-video-modal,
	.nexus-video-modal-panel,
	.nexus-video-modal-close {
		transition: none;
	}
}