@charset "UTF-8";
/* #region CSS Variables */
:root {
  /* 主色调 */
  --hue: 220;
  --bilibili-color: #00A1D6;
  --text-danger: #FF4D4F;
  /* 背景色 */
  --hue-bg: 290;
  --light: oklch(70% 0.05 var(--hue));
  --bg-primary: oklch(.30 .10 var(--hue-bg));
  --bg-secondary: oklch(.17 .01 var(--hue-bg));
  --bg-card: oklch(.15 .12 var(--hue-bg));
  /* 文字色 */
  --text-primary: oklch(0.9 0.01 var(--hue));
  --text-secondary: oklch(0.9 0.01 var(--hue));
  --text-muted: #556075;
  --text-link: oklch(0.75 0.08 290);
  /* 边框色 */
  --border-primary: #1e2533;
  --border-secondary: #283244;
  --border-hover: #404d66;
  /* 内阴影 */
  --inset-light: inset 0 2px 6px oklch(80% 0.05 var(--hue) / 0.25);
  --inset-dark: inset 0 -3px 8px oklch(15% 0.05 var(--hue) / 0.35);
  /* 字体 */
  --font-sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;
  --font-serif: Georgia, 'Times New Roman', serif;
  /* 动画 */
  --spin-slow: 60s;
  --spin-medium: 45s;
  --spin-fast: 30s;
  --danmaku-stay-duration: 8s;
}

/* #endregion */
/* #region Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

a img {
  width: 1rem;
  height: 1rem;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

img {
  max-width: 100%;
  height: auto;
}

input {
  font-family: inherit;
  background-color: transparent;
  border: none;
  outline: none;
}

input[type=radio] {
  display: none;
}

fieldset {
  border: none;
  padding: 0;
}

details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

/* #endregion */
/* #region 小物件和可复用 */
/* 次级导航按钮 */
.part-link {
  padding: 8px 16px;
  font-size: 14px;
  opacity: 0.8;
  color: var(--text-secondary);
}
.part-link:hover {
  opacity: 1;
  color: var(--text-primary);
}

/* 通用次级卡片样式 */
.secondary-card {
  position: relative;
  border: 1px solid var(--border-secondary);
  border-radius: 2px;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 8px 20px;
  font-size: 13px;
  background: var(--bg-card);
  border-radius: 2px;
}

/* 通用次级卡片 hover 效果 */
.secondary-card-hover:hover {
  border-color: var(--border-hover);
}

.vhidden {
  visibility: hidden;
}

.hidden {
  display: none;
}

.typewriter-cursor {
  margin-left: 2px;
  animation: blink 2s step-end infinite;
  color: currentColor;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* #endregion */
/* #region 弹幕留言板 */
.danmaku-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: rgba(255, 255, 255, 0.0666666667);
  overflow: hidden;
}
.danmaku-container > h2 {
  height: max(10%, 40px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 1.5rem;
  padding: 0.25rem 1rem 1.5rem 2rem;
  color: var(--text-primary);
  background: linear-gradient(0deg, transparent 16.87%, rgba(0, 0, 0, 0.5) 94%);
  z-index: 2;
  pointer-events: none;
  visibility: hidden;
}
.danmaku-container > .danmaku-stage {
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.danmaku-container > .danmaku-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: 2.5rem;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
}
.danmaku-container > .danmaku-dialog > * {
  transform: translateX(-50%);
}
.danmaku-container > .danmaku-dialog.display {
  opacity: 1;
  pointer-events: auto;
}
.danmaku-container > .danmaku-dialog.self-danmaku .danmaku-dialog-panel-wrapper .danmaku-dialog-panel .withdraw {
  display: block;
}
.danmaku-container > .danmaku-dialog.self-danmaku .danmaku-dialog-panel-wrapper .danmaku-dialog-panel .report {
  display: none;
}
.danmaku-container > .danmaku-dialog .bg {
  position: absolute;
  height: 2.5rem;
  aspect-ratio: 7/2;
  width: auto;
  inset: 0;
  aspect-ratio: 7/2;
  z-index: 1;
}
.danmaku-container > .danmaku-dialog .bg svg {
  height: 100%;
}
.danmaku-container > .danmaku-dialog .danmaku-dialog-panel-wrapper {
  position: absolute;
  height: 2.5rem;
  aspect-ratio: 7/2;
  z-index: 2;
}
.danmaku-container > .danmaku-dialog .danmaku-dialog-panel-wrapper .danmaku-dialog-panel {
  width: 100%;
  height: 100%;
  display: grid;
  padding: 8% 5% 4% 5%;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  z-index: 2;
}
.danmaku-container > .danmaku-dialog .danmaku-dialog-panel-wrapper .danmaku-dialog-panel svg {
  width: 100%;
  height: 100%;
  color: var(--text-primary);
}
.danmaku-container > .danmaku-dialog .danmaku-dialog-panel-wrapper .danmaku-dialog-panel .withdraw {
  display: none;
}
.danmaku-container > .danmaku-dialog .danmaku-dialog-panel-wrapper .danmaku-dialog-panel .btn {
  height: 100%;
  aspect-ratio: 1/1;
}
.danmaku-container > .danmaku-controls {
  height: max(10%, 40px);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 1rem;
}
.danmaku-container > .danmaku-controls .control-left-panel {
  flex: 1 1 auto;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 0 auto;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch {
  display: flex;
  align-items: center;
  padding: 0.25rem;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-input {
  display: none;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-input + .danmaku-switch-label .danmaku-switch-on {
  display: none;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-input + .danmaku-switch-label .danmaku-switch-off {
  display: block;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-input:checked + .danmaku-switch-label .danmaku-switch-on {
  display: block;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-input:checked + .danmaku-switch-label .danmaku-switch-off {
  display: none;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-label .danmaku-switch-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  display: block;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-label .danmaku-switch-icon svg {
  width: 100%;
  height: 100%;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-label .danmaku-switch-icon svg .switch-on-target {
  color: var(--bilibili-color);
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-switch .danmaku-switch-input:checked + .danmaku-switch-label .danmaku-switch-icon svg {
  color: var(--text-primary);
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  background-color: rgba(39, 40, 47, 0.6901960784);
  height: 2.5rem;
  border-radius: 14px;
  overflow: hidden;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area {
  display: flex;
  align-items: center;
  gap: 0rem;
  flex: 1 1 auto;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-send-setting-btn,
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .nickname-input-details {
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-send-setting-btn summary,
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .nickname-input-details summary {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-primary);
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-send-setting-btn summary svg,
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .nickname-input-details summary svg {
  width: 2rem;
  height: 2rem;
  fill: var(--text-primary);
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-send-setting-btn[open] summary svg,
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .nickname-input-details[open] summary svg {
  fill: var(--bilibili-color);
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-send-setting-btn[open] .setting-panel,
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .nickname-input-details[open] .setting-panel {
  display: block;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .nickname-input-details {
  padding-left: 0;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-send-setting-btn {
  padding-right: 0;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-input {
  flex: 1 1 auto;
  padding: 0.25rem 0;
  font-size: 18px;
  background-color: transparent;
  color: var(--text-primary);
  line-height: calc(max(10%, 2rem) + 0.25rem);
  border-radius: 2px;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-input::placeholder {
  color: var(--text-muted);
  line-height: inherit;
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .send-btn-area {
  height: 100%;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0;
  background: var(--bilibili-color);
}
.danmaku-container > .danmaku-controls .control-danmaku-panel .danmaku-input .send-btn-area .send-btn {
  flex: 1 1 auto;
  padding: 0 1.5rem;
  font-size: 18px;
  background-color: transparent;
  color: var(--text-primary);
  line-height: calc(max(10%, 2rem) + 0.25rem);
  border-radius: 2px;
  font-size: 16px;
  color: var(--text-primary);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}
.danmaku-container > .danmaku-controls .control-right-panel {
  flex: 1 1 auto;
}

@media (max-width: 768px) {
  h2 {
    font-size: 1.25rem;
    padding: 0.25rem 0.75rem 1rem 1rem;
  }
  .fake-bvideo .danmaku-controls {
    padding: 0 0.5rem;
  }
  .fake-bvideo .danmaku-controls .control-left-panel,
  .fake-bvideo .danmaku-controls .control-right-panel {
    display: none;
  }
  .fake-bvideo .danmaku-controls .control-danmaku-panel {
    flex: 1 1 auto;
  }
  .fake-bvideo .danmaku-controls .control-danmaku-panel .danmaku-input .send-btn-area .send-btn {
    padding: 0 0.75rem;
    font-size: 14px;
  }
  .fake-bvideo .danmaku-controls .control-danmaku-panel .danmaku-input .text-area .danmaku-input {
    font-size: 14px;
  }
}
.danmaku-item {
  min-width: auto;
  position: absolute;
  left: 100%;
  transform: translate(0, 0);
  white-space: nowrap;
  font-size: 1.75rem;
  line-height: 1.75rem;
  max-height: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  will-change: transform;
  pointer-events: none;
  cursor: default;
  z-index: 173;
  animation: danmaku-left var(--danmaku-stay-duration) linear forwards;
}
@keyframes danmaku-left {
  0% {
    left: 100%;
    transform: translate(0, 0);
  }
  100% {
    left: 0%;
    transform: translate(-100%, 0);
  }
}
@media (max-width: 768px) {
  .danmaku-item {
    font-size: 1.5rem;
    line-height: 1.75rem;
  }
}
.danmaku-item.is-self .danmaku-item-vtransl .content {
  box-shadow: 0 0 0 2px var(--bilibili-color);
  border-radius: 2px;
}
.danmaku-item.dialog-hover {
  animation-play-state: paused;
  z-index: 1000;
}
.danmaku-item.dialog-hover .danmaku-item-vtransl .avatar {
  opacity: 1;
}
.danmaku-item.dialog-hover .danmaku-item-vtransl .desc {
  opacity: 1;
}
.danmaku-item .danmaku-item-vtransl {
  width: 100%;
  height: 100%;
  transform: translateY(-9999px);
  pointer-events: auto;
  border-radius: 1px;
  display: grid;
  grid-template-columns: auto auto 1fr;
}
.danmaku-item .danmaku-item-vtransl * {
  min-width: auto;
}
.danmaku-item .danmaku-item-vtransl .avatar {
  min-width: 2rem;
  height: 2rem;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none;
  user-select: none;
}
.danmaku-item .danmaku-item-vtransl .desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0rem 0.25rem;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.danmaku-item .danmaku-item-vtransl .desc div.nickname {
  color: var(--text-primary);
  pointer-events: none;
  user-select: none;
}
.danmaku-item .danmaku-item-vtransl .desc a.nickname {
  color: var(--text-primary);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .danmaku-item .danmaku-item-vtransl .desc a.nickname {
    text-decoration: none;
    pointer-events: none;
  }
}

.setting-panel {
  position: absolute;
  bottom: 100%;
  background: rgba(43, 42, 40, 0.6901960784);
  border-radius: 2px;
  padding: 1rem;
  width: 280px;
  display: none;
  margin-bottom: -0.5rem;
  cursor: auto;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .setting-panel {
    width: min(280px, 80vw);
    right: -10vw;
  }
}

#danmaku-send-setting-btn .setting-panel section {
  margin-bottom: 0.75rem;
}
#danmaku-send-setting-btn .setting-panel section .setting-section-label {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-weight: 600;
}
#danmaku-send-setting-btn .setting-panel section .setting-items {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.5rem;
}
#danmaku-send-setting-btn .setting-panel section:last-child {
  margin-bottom: 0;
}
#danmaku-send-setting-btn .setting-panel .setting-font-size label {
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  border-radius: 2px;
  background: rgba(85, 84, 82, 0.6901960784);
}
#danmaku-send-setting-btn .setting-panel .setting-font-size label:hover {
  filter: brightness(1.2);
}
#danmaku-send-setting-btn .setting-panel .setting-font-size input[type=radio]:checked + label {
  background-color: var(--bilibili-color);
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items {
  gap: 1rem;
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items .danmaku-mode-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items .danmaku-mode-label:hover {
  filter: brightness(1.2);
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items .danmaku-mode-label .selection-icon {
  width: 2rem;
  height: 2rem;
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items .danmaku-mode-label .selection-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--text-primary);
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items .danmaku-mode-label .selection-name {
  font-size: 13px;
  color: var(--text-primary);
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items input.danmaku-mode-input:checked + .danmaku-mode-label .selection-icon svg {
  fill: var(--bilibili-color);
}
#danmaku-send-setting-btn .setting-panel .setting-danmaku-mode .setting-items input.danmaku-mode-input:checked + .danmaku-mode-label .selection-name {
  color: var(--bilibili-color);
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .customize {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-right: 1px;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .customize input.font-color-custom-input {
  min-width: 0;
  padding: 0rem 0.5rem;
  font-size: 1rem;
  font-family: sans-serif;
  color: var(--text-primary);
  border: 1px solid var(--text-muted);
  border-radius: 4px;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .customize .font-color-custom-label {
  width: 4rem;
  cursor: pointer;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .customize .font-color-custom-label #font-color-custom-block.font-color-block {
  --setting-font-color: black !important;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item label {
  cursor: pointer;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item input[type=radio] {
  display: none;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item:hover {
  border-color: var(--border-hover);
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item input[type=radio]:checked + label {
  color: var(--text-primary);
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-0 .font-color-block {
  --setting-font-color: #FE0302;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-1 .font-color-block {
  --setting-font-color: #FF7204;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-2 .font-color-block {
  --setting-font-color: #FFAA02;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-3 .font-color-block {
  --setting-font-color: #FFD302;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-4 .font-color-block {
  --setting-font-color: #FFFF00;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-5 .font-color-block {
  --setting-font-color: #A0EE00;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-6 .font-color-block {
  --setting-font-color: #00CD00;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-7 .font-color-block {
  --setting-font-color: #DE8BC6;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-8 .font-color-block {
  --setting-font-color: #019899;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-9 .font-color-block {
  --setting-font-color: #4266BE;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-a .font-color-block {
  --setting-font-color: #89D5FF;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-b .font-color-block {
  --setting-font-color: #CC0273;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-c .font-color-block {
  --setting-font-color: #222222;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-d .font-color-block {
  --setting-font-color: #9B9B9B;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-e .font-color-block {
  --setting-font-color: #FFFFFF;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .preset .preset-group .preset-item.preset-f .font-color-block {
  --setting-font-color: #7DD0D4;
}
#danmaku-send-setting-btn .setting-panel .setting-font-color input[name=font-color]:checked + label > .font-color-block {
  border: 1px solid #000;
  filter: drop-shadow(0 0 2px #fff);
}
#danmaku-send-setting-btn .setting-panel .setting-font-color .font-color-block {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  --setting-font-color: var(--bilibili-color);
  background-color: var(--setting-font-color);
}

#nickname-input-details .setting-panel section {
  margin-bottom: 1rem;
}
#nickname-input-details .setting-panel section:last-child {
  margin-bottom: 0;
}
#nickname-input-details .setting-panel section legend {
  font-size: 16px;
  color: var(--text-primary);
}
#nickname-input-details .setting-panel section legend span.sup {
  font-size: 14px;
  color: var(--text-muted);
  margin-left: 0.25rem;
}
#nickname-input-details .setting-panel section input {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 16px;
  font-family: sans-serif;
  color: var(--text-primary);
  border: 1px solid var(--text-muted);
  border-radius: 4px;
}
#nickname-input-details .setting-panel .warn-msg {
  font-size: 12px;
  color: var(--text-danger);
  margin-top: 0.25rem;
}

/* #endregion */
/* #region 背景 */
.bg-container {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}
.bg-container .light {
  position: absolute;
  width: 80vmax;
  aspect-ratio: 1/1;
  border-radius: 50%;
  filter: blur(40px);
  border: 1px solid var(--text-link);
  animation-duration: 25s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.bg-container .light-0 {
  top: 0vmax;
  right: 0vmax;
  background: radial-gradient(circle, oklch(0.4 0.1 calc(var(--hue-bg) + 60)/1) 0%, oklch(0.3 0.08 var(--hue-bg)/1) 70%, transparent 100%);
  transform: translate(50%, -50%);
  animation-name: light-drift-0;
}
.bg-container .light-1 {
  bottom: 0vmax;
  left: 0vmax;
  background: radial-gradient(circle, oklch(0.4 0.1 calc(var(--hue-bg) - 90)/1) 0%, oklch(0.3 0.08 var(--hue-bg)/1) 70%, transparent 100%);
  transform: translate(-50%, 50%);
  animation-name: light-drift-1;
}
@keyframes light-drift-0 {
  0% {
    transform: translate(50%, -50%) rotate(90deg) translateX(20vmax);
  }
  100% {
    transform: translate(50%, -50%) rotate(180deg) translateX(20vmax);
  }
}
@keyframes light-drift-1 {
  0% {
    transform: translate(-50%, 50%) rotate(135deg) translateY(20vmax);
  }
  100% {
    transform: translate(-50%, 50%) rotate(315deg) translateY(20vmax);
  }
}

/* #endregion */
/* #region 吸附滚动 */
.snap-container {
  position: absolute;
  height: 100svh;
  width: 100svw;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.snap-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.snap-container::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}
.snap-container::-webkit-scrollbar-thumb {
  background: oklch(80% 0.08 var(--hue-bg)/0.6);
  border-radius: 4px;
  width: 4px;
}
.snap-container {
  /* 鼠标 hover 时滑块 */
}
.snap-container::-webkit-scrollbar-thumb:hover {
  background: oklch(90% 0.08 var(--hue)/0.6);
}
.snap-container .snap-section {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  padding: 5% 15% 10% 10%;
}
@media (max-width: 768px) {
  .snap-container .snap-section {
    padding: 5% 5% 15%;
  }
}

/* #endregion */
/* #region Section Navigation */
.section-nav {
  display: flex;
}
.section-nav .snap-content-container {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 30%;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}
.section-nav .snap-content-container .aphorism-container {
  grid-column: 1/span 2;
  grid-row: 1/span 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.section-nav .snap-content-container .aphorism-container .aphorism {
  font-size: 3.5em;
  font-family: var(--font-serif);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 0.5em;
  min-height: 2lh;
}
.section-nav .snap-content-container .hero-content {
  grid-column: 1/span 1;
  grid-row: 2/span 1;
  display: flow-root;
  text-align: left;
  min-height: 0;
}
.section-nav .snap-content-container .hero-content .about-text {
  margin-bottom: 2rem;
}
.section-nav .snap-content-container .hero-content .about-text p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 1.5rem 0;
  font-family: var(--font-sans);
}
.section-nav .snap-content-container .hero-content .new-blog {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.section-nav .snap-content-container .hero-content .new-blog p {
  margin-bottom: 0.5rem;
}
.section-nav .snap-content-container .hero-content .new-blog .blog-card {
  width: auto;
  max-width: 380px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1.5rem;
  border-radius: 1rem;
}
.section-nav .snap-content-container .hero-content .new-blog .blog-card .title {
  font-size: 1.2rem;
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-style: dashed;
}
.section-nav .snap-content-container .hero-content .new-blog .blog-card .title:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.section-nav .snap-content-container .hero-content .new-blog .blog-card .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.5rem;
}
.section-nav .snap-content-container .hero-content .new-blog .blog-card .desc {
  font-size: 1rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.25rem;
}
.section-nav .snap-content-container .hero-content .new-blog .blog-card .time {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0;
}
.section-nav .snap-content-container .hero-content .new-blog p.more {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-style: dashed;
}
.section-nav .snap-content-container .hero-content .new-blog p.more:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.section-nav .snap-content-container .hero-content .new-blog p.more {
  font-size: 1rem;
  margin-top: 0.5rem;
}
.section-nav .snap-content-container .avatar {
  grid-column: 2/span 1;
  grid-row: 2/span 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.section-nav .snap-content-container .avatar .avatar-image {
  width: auto;
  height: 30%;
  border-radius: 50%;
  object-fit: cover;
}
.section-nav .snap-content-container .avatar .roll-tag-display {
  padding: 12px 24px;
  margin: 1.5rem 0;
  width: 100%;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--border-secondary);
  background: var(--bg-card);
}
.section-nav .snap-content-container .avatar .roll-tag-display:hover {
  border-color: var(--border-hover);
}
.section-nav .snap-content-container .avatar .roll-tag-display .tag-text {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-primary);
  margin-left: 0.5rem;
}
.section-nav .snap-content-container .nav-bottom-grid {
  grid-column: 1/span 2;
  grid-row: 3/span 1;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}
.section-nav .snap-content-container .nav-bottom-grid .nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem 1rem;
}
@media (max-width: 768px) {
  .section-nav .snap-content-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .section-nav .snap-content-container .aphorism-container {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .section-nav .snap-content-container .hero-content {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  .section-nav .snap-content-container .hero-content .aphorism {
    font-size: 2em;
  }
  .section-nav .snap-content-container .hero-content .about-text h1 {
    font-size: 1.75rem;
  }
  .section-nav .snap-content-container .hero-content .about-text p {
    font-size: 1rem;
  }
  .section-nav .snap-content-container .avatar {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
    gap: 1rem;
    max-width: 50%;
    max-height: 50%;
    position: relative;
    bottom: -100%;
    right: -100%;
    transform: translate(-100%, -100%);
  }
  .section-nav .snap-content-container .avatar .avatar-image {
    height: 96px;
    width: 96px;
  }
  .section-nav .snap-content-container .avatar .roll-tag-display {
    margin: 0;
    min-width: 160px;
  }
  .section-nav .snap-content-container .nav-bottom-grid {
    grid-column: 1/span 1;
    grid-row: 4/span 1;
    display: flex;
    flex-direction: column;
  }
  .section-nav .snap-content-container .nav-bottom-grid .nav-row-hash {
    display: none;
  }
}

/* #endregion */
/* #region Section About */
.section-about {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgba(255, 255, 255, 0.0666666667);
}
.section-about .aphorism {
  max-width: 640px;
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
  line-height: 1.8;
  letter-spacing: 0.05em;
}
.section-about .aphorism p {
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.1rem;
}
.section-about .aphorism p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .section-about .aphorism {
    padding: 1.5rem 1rem;
  }
  .section-about .aphorism p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
}

/* #endregion */
/* #region Section Skills */
.section-skills {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 10% 1fr;
  background-color: rgba(255, 255, 255, 0.1333333333);
}
.section-skills h2 {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  font-size: 1.5rem;
  padding: 1rem 1rem 1.5rem 2rem;
  color: var(--text-primary);
  background: linear-gradient(0deg, transparent 16.87%, rgba(0, 0, 0, 0.5) 94%);
  z-index: 0;
  pointer-events: none;
}
.section-skills .tech-graph-container {
  grid-column: 1/span 1;
  grid-row: 1/span 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.section-skills .tech-graph-container .tech-graph {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  border: 1px solid var(--border-secondary);
  background: oklch(10% 0.02 var(--hue)/0.2);
}
@media (max-width: 768px) {
  .section-skills h2 {
    font-size: 1.25rem;
  }
  .section-skills .tech-graph-container {
    width: 100%;
    height: 80%;
  }
}

/* #endregion */
/* #region Section Friends */
.section-friends {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}
.section-friends h2 {
  text-align: center;
  font-size: 1.5rem;
  margin: 2rem 0;
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .section-friends h2 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}
.section-friends .friends-fr-wrapper {
  overflow-y: auto;
}
.section-friends .friends-fr-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.section-friends .friends-fr-wrapper::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 0;
}
.section-friends .friends-fr-wrapper::-webkit-scrollbar-thumb {
  background: oklch(80% 0.08 var(--hue-bg)/0.6);
  border-radius: 4px;
  width: 4px;
}
.section-friends .friends-fr-wrapper {
  /* 鼠标 hover 时滑块 */
}
.section-friends .friends-fr-wrapper::-webkit-scrollbar-thumb:hover {
  background: oklch(90% 0.08 var(--hue)/0.6);
}
.section-friends .friends-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1024px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
}
@media (max-width: 1024px) {
  .section-friends .friends-grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .section-friends .friends-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
.section-friends footer {
  display: grid;
  grid-template-columns: 1fr auto;
}
.section-friends footer .footer-content {
  color: var(--text-link);
}
.section-friends footer .footer-content a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-style: dashed;
}
.section-friends footer .footer-content a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}
.section-friends footer .footer-content p {
  margin-bottom: 0.5rem;
}
.section-friends footer .back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.885rem 1rem 1rem 1rem;
  text-align: center;
  color: var(--text-link);
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1rem;
}

.friend-card {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.friend-card .friend-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-secondary);
  overflow: hidden;
  flex-shrink: 0;
}
.friend-card .friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.friend-card .friend-info {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.friend-card .friend-info .friend-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-card .friend-info .friend-desc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* #endregion */