/* ==========================================================================
   AnYiの世界 —— base.css
   基础层：变量 / reset / 页面容器 / 按钮 / 表单 / 背景兜底 / toast / 工具类
   风格：纯黑白灰阶，冷峻做旧的日式黑白 AVG · 纸质档案感
   颜色规则：本文件只允许出现 #000 / #fff / 灰阶（#RRGGBB 中 R=G=B）
   ★ 唯一的例外：小地图的"当前位置 = 橙框 / 可前往区域 = 绿框"两个色（--c-map-cur / --c-map-go），
     只在 hud.css 的小地图里使用，其余界面仍然全灰阶。
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. 变量
 * ------------------------------------------------------------------ */
:root {
  /* 灰阶色板（黑 → 白） */
  --c-ink: #000;
  --c-ink-soft: #0d0d0d;
  --c-panel: #141414;
  --c-panel-2: #1c1c1c;
  --c-line: #4d4d4d;
  --c-line-strong: #808080;
  --c-dim: #8c8c8c;
  --c-dim-2: #a6a6a6;
  --c-dim-3: #c8c8c8;
  --c-paper: #fff;
  --c-paper-dim: #ededed;
  --c-paper-warm: #f5f5f5;

  /* 语义化别名 */
  --c-bg: #000;
  --c-fg: #fff;
  --c-border: #000;
  --c-border-inv: #fff;

  /* 半透明层 */
  --c-shade-72: rgba(0, 0, 0, .72);
  --c-shade-60: rgba(0, 0, 0, .6);
  --c-shade-45: rgba(0, 0, 0, .45);
  --c-shade-30: rgba(0, 0, 0, .3);
  --c-veil-82: rgba(255, 255, 255, .82);
  --c-veil-92: rgba(255, 255, 255, .92);
  --c-veil-62: rgba(255, 255, 255, .62);
  --c-grid: rgba(255, 255, 255, .10);

  /* ★ 小地图专用色（全项目唯一允许出现的彩色，见文件头说明） */
  --c-map-cur: #ff8c00;   /* 橙：当前位置的边框 */
  --c-map-go: #22c55e;    /* 绿：可以走过去的区域 */

  /* ★ 主菜单（#page-main）专用色：配合那张夕阳 + 城堡 + 金发的插画。
     只用在主菜单这一页 —— 进了游戏世界仍然是黑白的。 */
  --c-fan-gold: #e8c98a;                      /* 夕阳的金 */
  --c-fan-gold-dim: #a8905c;
  --c-fan-cream: #f7ecd8;                     /* 选项文字的暖白 */
  --c-fan-panel: rgba(24, 16, 36, .62);       /* 夜幕的紫黑 */
  --c-fan-panel-hi: rgba(62, 42, 90, .74);
  --c-fan-line: rgba(232, 201, 138, .55);     /* 描边细金线 */
  --c-fan-glow: rgba(232, 201, 138, .35);
  /* 三套标题字体（选项用第一套，通用） */
  --font-fantasy: "STKaiti", "KaiTi", "Kaiti SC", "Songti SC", "SimSun", serif;
  --font-fantasy-2: "STXingkai", "华文行楷", "KaiTi", "STKaiti", "Songti SC", serif;
  --font-fantasy-3: "STZhongsong", "华文中宋", "SimSun", "Songti SC", "STSong", serif;

  /* 边框宽度 */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* 字号阶梯（随视口高度缩放，适配 720p / 1080p） */
  --fs-xs: clamp(10px, 1.06vh, 13px);
  --fs-sm: clamp(11px, 1.3vh, 15px);
  --fs-md: clamp(13px, 1.62vh, 19px);
  --fs-lg: clamp(16px, 2.3vh, 27px);
  --fs-xl: clamp(20px, 3.1vh, 36px);
  --fs-title: clamp(26px, 4.6vh, 54px);

  /* 字体 */
  --font-ui: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-mono: "Consolas", "Courier New", "Microsoft YaHei", monospace;

  /* 间距阶梯 */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* 尺寸 */
  --hud-left-w: clamp(240px, 21vw, 300px);
  --hud-top-h: clamp(34px, 4.6vh, 52px);
  --map-gutter: clamp(20px, 2.6vh, 28px);   /* 小地图最左侧【收起/展开】按钮占的宽度 */
  --map-toggle-h: clamp(64px, 8.4vh, 92px); /* 该按钮的高度，也是小地图收起后的高度 */
  --radius-0: 0px;
  --radius-1: 2px;

  /* 动效 */
  --t-fast: .12s ease;
  --t-mid: .2s ease;
  --t-slow: .34s ease;

  /* 层级 */
  --z-bg: 0;
  --z-stage: 10;
  --z-hud: 20;
  --z-map: 30;
  --z-toast: 90;
  --z-reveal: 40;
  --z-rotate: 999;          /* ★ 竖屏提示：盖在所有东西上面 */
}

/* ------------------------------------------------------------------ *
 * ★ 触摸设备上的手感想好一点：
 *   - 不放大字号（手机上文字会被自动放大）
 *   - 去掉点按的蓝色高亮块
 *   - 双击不再缩放（改由 touch-action 控制）
 *   - 长按不选中文字 / 不出放大镜（游戏界面里选中文字没意义）
 * ------------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button,
.opt,
.hud-top,
.hud-left,
.map-mini,
.dialogue-box,
.panel {
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------------ *
 * 2. reset
 * ------------------------------------------------------------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  overflow: hidden;
  background: #000;
  color: #fff;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-0);
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--c-paper);
  text-decoration: none;
}

a:hover {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* 统一焦点可见性：白底黑字的方块描边 */
:focus-visible {
  outline: var(--bw-2) solid var(--c-line-strong);
  outline-offset: 2px;
}

/* 纸质档案感的极淡网格，可叠加在任何面板上（不影响交互） */
.paper-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ------------------------------------------------------------------ *
 * 3. 页面容器
 * ------------------------------------------------------------------ */
#page-main,
#page-create,
#page-game,
#page-end {
  position: relative;
  display: none;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--c-bg);
}

#page-main.active,
#page-create.active,
#page-end.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#page-game.active {
  display: grid;
}

/* ------------------------------------------------------------------ *
 * 4. 按钮
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: .5em 1.2em;
  min-height: 2.2em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  letter-spacing: .14em;
  text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}

.btn:hover {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}

.btn:active {
  background: var(--c-dim-3);
  color: var(--c-ink);
}

.btn:disabled,
.btn.disabled {
  cursor: not-allowed;
  opacity: .38;
  background: var(--c-panel-2);
  color: var(--c-dim);
  border-color: var(--c-line);
}

.btn:disabled:hover,
.btn.disabled:hover {
  background: var(--c-panel-2);
  color: var(--c-dim);
  border-color: var(--c-line);
}

.btn.ghost {
  background: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-dim-3);
}

.btn.ghost:hover {
  background: var(--c-paper);
  border-color: var(--c-paper);
  color: var(--c-ink);
}

.btn-inline {
  padding: .28em .7em;
  min-height: 1.9em;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}

/* 主菜单选项：★ 透明（不画框），靠文字投影在任何背景上都读得清
   —— 三套背景共用这一套样式，只有标题跟着换 */
.main-option {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .5em 1.4em;
  background: transparent;
  color: #fff;
  border: 0;
  border-bottom: var(--bw-1) solid transparent;
  border-radius: var(--radius-0);
  font-family: var(--font-fantasy);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: .3em;
  line-height: 1.75;
  text-align: left;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .95), 0 0 20px rgba(0, 0, 0, .85);
  transition: color var(--t-mid), letter-spacing var(--t-mid), text-shadow var(--t-mid),
    transform var(--t-mid), border-color var(--t-mid);
}

/* ★ 选项最左边的 ✦（三套背景通用） */
.main-option::before {
  content: '✦';
  margin-right: .4em;
  color: var(--c-fan-gold);
  text-shadow: 0 0 10px rgba(0, 0, 0, .9);
  transition: color var(--t-fast), text-shadow var(--t-fast);
}

.main-option:hover,
.main-option:focus-visible {
  color: #fff;
  letter-spacing: .38em;
  border-bottom-color: var(--c-fan-gold);
  text-shadow: 0 2px 6px #000, 0 0 24px var(--c-fan-glow), 0 0 60px rgba(0, 0, 0, .9);
  transform: translateX(6px);
}

.main-option:hover::before,
.main-option:focus-visible::before {
  color: #fff6e0;
  text-shadow: 0 0 16px var(--c-fan-gold);
}

.main-option.selected {
  color: #fff;
  border-bottom-color: var(--c-fan-gold);
  font-weight: 700;
  letter-spacing: .38em;
  outline: none;
  text-shadow: 0 2px 6px #000, 0 0 24px var(--c-fan-glow), 0 0 60px rgba(0, 0, 0, .9);
  transform: translateX(6px);
}

.main-option.selected::before {
  color: #fff6e0;
  text-shadow: 0 0 16px var(--c-fan-gold);
}

.main-option:disabled,
.main-option.disabled {
  cursor: not-allowed;
  opacity: .42;
  color: var(--c-dim-2);
  border-bottom-color: transparent;
  letter-spacing: .3em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
  transform: none;
}

.main-option:disabled::before,
.main-option.disabled::before {
  color: var(--c-dim);
  text-shadow: none;
}

/* 主菜单容器：★ 同样透明，选项直接浮在插画上 */
#main-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: min(460px, 52vw);
  padding: var(--sp-5) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 设置里"当前选中的那一项"按钮 */
.btn.selected {
  background: var(--c-paper);
  color: var(--c-ink);
  box-shadow: inset 0 0 0 var(--bw-1) var(--c-paper), 0 0 0 2px var(--c-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 5. 表单控件（黑白）
 * ------------------------------------------------------------------ */
input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
  display: block;
  width: 100%;
  padding: .42em .7em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
}

input[type="text"]::placeholder,
textarea::placeholder {
  color: var(--c-dim);
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  background: var(--c-paper);
  color: var(--c-ink);
  outline: none;
}

input[type="text"]:focus::placeholder,
textarea:focus::placeholder {
  color: var(--c-dim);
}

select option {
  background: var(--c-ink);
  color: var(--c-paper);
}

/* 自制单选：方框 + 内部实心块（选中反相） */
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  margin: .18em 0 0;
  padding: 0;
  background: var(--c-ink);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background: var(--c-paper);
  box-shadow: inset 0 0 0 3px var(--c-ink);
}

input[type="radio"]:checked {
  box-shadow: inset 0 0 0 3px var(--c-ink);
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: .38;
  border-color: var(--c-line);
}

/* label 承载 radio 的整行点击区 */
label {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--c-fg);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}

label:hover {
  color: var(--c-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

label:has(input:disabled) {
  cursor: not-allowed;
  opacity: .4;
  text-decoration: none;
}

fieldset {
  border: 0;
}

legend,
.field-label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  letter-spacing: .22em;
}

/* 开局选择页表单 */
.create-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: min(880px, 90vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--c-shade-72);
  border: var(--bw-2) solid var(--c-paper);
  color: var(--c-fg);
}

.create-form fieldset {
  padding: var(--sp-3) 0;
  border-top: var(--bw-1) solid var(--c-line);
}

.create-form .field-row,
.create-form .row {
  flex-wrap: wrap;
  gap: var(--sp-4);
}

#create-name {
  max-width: 22em;
}

#cheat-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-panel-2);
  border-left: var(--bw-3) solid var(--c-paper);
  color: var(--c-dim-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
}

#cheat-status.active {
  background: var(--c-paper);
  border-left-color: var(--c-ink);
  color: var(--c-ink);
  font-weight: 700;
}

#talent-desc {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border: var(--bw-1) dashed var(--c-line-strong);
  color: var(--c-dim);
  font-size: var(--fs-xs);
  line-height: 1.7;
  min-height: 3em;
}

.create-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--bw-2) solid var(--c-line);
}

/* ------------------------------------------------------------------ *
 * 6. 背景兜底层
 * ------------------------------------------------------------------ */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background-color: var(--c-ink);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: grayscale(1) contrast(1.05);
  pointer-events: none;
}

.bg-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* 压暗层，保证白字可读 */
.bg-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-shade-30);
  pointer-events: none;
}

/* 背景图缺失：深灰底 + 居中文件名 */
.bg-layer.bg-missing {
  background-color: var(--c-panel-2);
  background-image: none;
  filter: grayscale(1) contrast(1.05);
}

.bg-layer.bg-missing::before {
  background: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .03) 0 8px,
      transparent 8px 16px);
}

.bg-layer.bg-missing::after {
  content: attr(data-file);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  color: var(--c-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .18em;
  text-align: center;
  word-break: break-all;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * 7. 缺图占位块
 * ------------------------------------------------------------------ */
.placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4em;
  min-height: 3em;
  background: var(--c-panel-2);
  border: var(--bw-1) dashed var(--c-line-strong);
  color: var(--c-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-align: center;
  overflow: hidden;
}

.placeholder::after {
  content: attr(data-file);
  display: block;
  padding: var(--sp-3);
  word-break: break-all;
  z-index: 1;
}

.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg,
      rgba(255, 255, 255, .04) 0 6px,
      transparent 6px 12px);
  pointer-events: none;
}

.placeholder.empty {
  color: var(--c-line);
  font-style: italic;
}

/* ------------------------------------------------------------------ *
 * 8. toast
 * ------------------------------------------------------------------ */
#toast-root {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  max-width: min(420px, 34vw);
  pointer-events: none;
}

.toast {
  padding: .42em 1em;
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  border-radius: var(--radius-0);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  line-height: 1.55;
  word-break: break-word;
  animation: toast-in .22s ease-out both;
  pointer-events: none;
}

/* 反相区分类型，不使用任何颜色 */
.toast.good {
  background: var(--c-paper);
  color: var(--c-ink);
  border: var(--bw-2) solid var(--c-ink);
  box-shadow: 0 0 0 2px var(--c-paper);
  font-weight: 700;
}

.toast.bad {
  background: var(--c-ink);
  color: var(--c-paper);
  border: var(--bw-2) solid var(--c-paper);
  box-shadow: 0 0 0 2px var(--c-ink);
  font-weight: 700;
}

.toast.fade-out {
  animation: toast-out .3s ease-in both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(14px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(14px);
  }
}

/* ------------------------------------------------------------------ *
 * 9. 天赋1 概率揭示滚动条
 * ------------------------------------------------------------------ */
#reveal-log {
  position: fixed;
  left: var(--sp-4);
  bottom: calc(var(--sp-4) + 2vh);
  z-index: var(--z-reveal);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(320px, 26vw);
  max-height: 26vh;
  overflow: hidden;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-shade-60);
  border-left: var(--bw-2) solid var(--c-line-strong);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  line-height: 1.5;
  pointer-events: none;
  text-shadow: 0 0 4px var(--c-ink);
}

#reveal-log:empty {
  display: none;
}

#reveal-log .reveal-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .78;
}

#reveal-log .reveal-line:last-child {
  opacity: 1;
  font-weight: 700;
}

#reveal-log .reveal-line.yes::before {
  content: "是 / ";
  color: var(--c-paper);
}

#reveal-log .reveal-line.no::before {
  content: "否 / ";
  color: var(--c-dim);
}

/* ------------------------------------------------------------------ *
 * 10. 工具类
 * ------------------------------------------------------------------ */
.hidden,
.hidden.hidden {
  display: none;
}

.hidden-soft {
  visibility: hidden;
  pointer-events: none;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.row.wrap {
  flex-wrap: wrap;
}

.row.between {
  justify-content: space-between;
}

.col {
  display: flex;
  flex-direction: column;
}

.grow {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.center-x {
  margin-left: auto;
  margin-right: auto;
}

.center-y {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text-sm {
  font-size: var(--fs-xs);
}

.text-dim {
  color: var(--c-dim);
}

.text-paper {
  color: var(--c-paper);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.bold {
  font-weight: 700;
}

.nowrap {
  white-space: nowrap;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-y {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bordered {
  border: var(--bw-2) solid var(--c-paper);
}

.bordered-ink {
  border: var(--bw-2) solid var(--c-ink);
}

.hr {
  height: var(--bw-1);
  background: var(--c-line);
  border: 0;
}

.vhr {
  width: var(--bw-1);
  align-self: stretch;
  background: var(--c-line);
}

.dim-mask {
  background: var(--c-shade-72);
}

/* ------------------------------------------------------------------ *
 * 11. 滚动条（黑白细条）
 * ------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--c-ink);
  border-left: var(--bw-1) solid var(--c-panel-2);
}

::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border: var(--bw-1) solid var(--c-ink);
  border-radius: var(--radius-0);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-paper);
}

::-webkit-scrollbar-corner {
  background: var(--c-ink);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) var(--c-ink);
}