:root {
  --color-ink: #262626;
  --color-ink-hover: #3a3a3a;
  --color-paper: #f5f5f5;
  --color-canvas: #f5f5f5;
  --color-marker: #a3a3a3;
  --color-marker-soft: #d9d9d9;
  --color-on-ink: #a8a8a8;
  --color-playhead: rgba(38, 38, 38, 0.35);
  --color-overlay: rgba(38, 38, 38, 0.55);

  --font-body: system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-title: 1.75rem;
  --leading-body: 1.5;
  --leading-title: 1.2;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --touch: 2.75rem;
  --chip-height: 2rem;
  --stroke-thin: 0.1875rem;
  --stroke-thick: 0.4375rem;
  --radius-pill: 62.5rem;
  --radius-frame: 1.75rem 2.1rem 1.9rem 2.25rem / 2rem 1.75rem 2.25rem 1.9rem;
  --radius-panel: 1.25rem 1.5rem 1.35rem 1.6rem / 1.5rem 1.25rem 1.6rem 1.35rem;
  --disabled-opacity: 0.3;

  /* 层级：页面内容（被拖起的小图 lifted）< 弹窗遮罩 < 下拉列表 < 提示条 */
  --layer-modal: 10;
  --layer-dropdown: 15;
  --layer-toast: 20;
  --layer-lifted: 1;

  /* 竖版画面的宽度上限：鼠标设备收窄居中，触屏设备放宽但两侧仍留边。 */
  --column-cap: 38rem;
}

@media (pointer: coarse) {
  :root {
    --column-cap: 56rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-tap-highlight-color: transparent;
}

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

/* 不选中文字、不弹长按菜单、不双击放大；只有输入框里可以输入和选字。 */
html,
body {
  touch-action: manipulation;
}

* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-marker) transparent;
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background: var(--color-marker);
  border-radius: var(--radius-pill);
}

::selection {
  background: var(--color-marker-soft);
  color: var(--color-ink);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--stroke-thin) solid var(--color-marker);
  outline-offset: 0.1875rem;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* ---------- 按钮 ---------- */

.button {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  touch-action: manipulation;
}

.button:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.button--icon {
  width: var(--touch);
  height: var(--touch);
  border-radius: 50%;
  flex: none;
}

.button--ghost {
  color: var(--color-marker);
}

.button--ghost:not(:disabled):hover {
  color: var(--color-ink);
}

.button--solid {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.button--solid:not(:disabled):hover {
  background: var(--color-ink-hover);
}

.button--solid[aria-pressed='true'] {
  color: var(--color-paper);
}

.button--text {
  padding: 0 var(--space-5);
  border-radius: var(--radius-panel);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.button--outline {
  border: var(--stroke-thin) solid var(--color-ink);
  color: var(--color-ink);
}

.button--outline:not(:disabled):hover {
  background: var(--color-marker-soft);
}

.button--on-ink {
  color: var(--color-on-ink);
}

.button--on-ink:not(:disabled):hover {
  color: var(--color-paper);
}

/* 顶栏上的风格入口：深色底上的描边胶囊。 */
.button--chip {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: var(--chip-height);
  max-width: 100%;
  gap: var(--space-1);
  padding: 0 var(--space-1) 0 var(--space-3);
  border: var(--stroke-thin) solid var(--color-on-ink);
  border-radius: var(--radius-pill);
  color: var(--color-on-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

/* 看得见的按钮比触控区小，点击范围用透明的一圈补到不小于 44 像素。 */
.button--chip::after,
.button--badge::after {
  content: '';
  position: absolute;
  top: calc((var(--chip-height) - var(--touch)) / 2);
  bottom: calc((var(--chip-height) - var(--touch)) / 2);
  left: 0;
  right: 0;
}

.button--badge {
  position: relative;
  width: var(--chip-height);
  height: var(--chip-height);
  min-width: 0;
  min-height: 0;
  border: var(--stroke-thin) solid var(--color-on-ink);
}

.button--badge::after {
  top: calc((var(--chip-height) - var(--touch)) / 2);
  bottom: calc((var(--chip-height) - var(--touch)) / 2);
  left: calc((var(--chip-height) - var(--touch)) / 2);
  right: calc((var(--chip-height) - var(--touch)) / 2);
}

.button--badge:hover {
  border-color: var(--color-paper);
}

.button--badge .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.button--chip:hover {
  color: var(--color-paper);
  border-color: var(--color-paper);
}

.button--chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button--chip__arrow {
  flex: none;
}

.button--chip__arrow .icon {
  width: 1rem;
  height: 1rem;
}

/* ---------- 整体布局 ---------- */

/* 竖屏：顶栏 → 小节这一行 → 画布（占满剩余高度）→ 底部操作区。整页只有画布会伸缩。 */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 旧内核不认 dvh 单位时的兜底：写成同一属性两行让构建时的 CSS 压缩把前一行当重复声明
   合并掉了，实测线上发布的还是只有 dvh 那一行——改用 @supports 隔到另一条规则里，
   压缩器不会跨 @supports 边界合并声明。 */
@supports (height: 100dvh) {
  .app {
    min-height: 100dvh;
  }
}

.app__band {
  background: var(--color-ink);
  color: var(--color-on-ink);
}

.app__band--top {
  padding-top: env(safe-area-inset-top);
  flex: none;
}

.app__column {
  width: min(100% - env(safe-area-inset-left) - env(safe-area-inset-right), var(--column-cap));
  margin-inline: auto;
}

/* 顶栏：左边风格、正中曲子名、右边设置。左右两列一样宽，曲子名永远在正中，
   也就在小节数字的正上方，不会被风格名的长短挤动。
   竖屏时两端和画布的左右边缘对齐（顶栏和画布两侧留的边一样宽）。 */
.header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
}

.header__main {
  display: contents;
}

.header__start {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
}

.header__middle {
  min-width: 0;
  max-width: 10rem;
}

.header__end {
  justify-self: end;
}

/* 最窄的屏幕：胶囊里的字和留白再收一点，风格名和曲子名才放得下。 */
@media (max-width: 22.5rem) {
  .button--chip {
    padding-left: var(--space-2);
    gap: 0;
    font-size: 0.75rem;
  }

  .button--chip__arrow .icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}

.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-1);
}

/* 底部操作区：实心底色，和画布并排（不叠在画布上）。 */
.dock {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-paper);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* 横向屏幕：画布在左，控件在右。 */
@media (min-aspect-ratio: 1/1) and (min-width: 48rem) {
  :root {
    --chrome-height: 6.75rem;
    --side-width: 20rem;
  }

  .app__column {
    width: min(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 2 * var(--space-4), 80rem);
  }

  /* 顶栏和下面的布局用同一套两栏：左边风格和曲子名对齐画布的左右边缘，
     设置对齐右侧控件区的最右边。 */
  .header {
    grid-template-columns: minmax(0, 1fr) var(--side-width);
    column-gap: var(--space-5);
    padding-inline: 0;
  }

  .header__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-1);
    justify-self: center;
    width: min(100%, calc((100vh - var(--chrome-height)) * 4 / 3));
    padding-inline: var(--space-2);
  }

  .workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-width);
    column-gap: var(--space-5);
    padding-bottom: var(--space-4);
  }

  /* 画布高度尽量放大，宽度按四比三收窄，居中。 */
  .stage-block {
    justify-self: center;
    width: min(100%, calc((100vh - var(--chrome-height)) * 4 / 3));
  }

  .dock {
    align-self: center;
    padding: 0;
    gap: var(--space-4);
  }

  /* dvh 兜底同 .app：拆进 @supports，别再写回同一条规则里的第二行（会被构建时的
     压缩器当重复声明合并掉，等于没写）。 */
  @supports (height: 100dvh) {
    .header__main {
      width: min(100%, calc((100dvh - var(--chrome-height)) * 4 / 3));
    }

    .stage-block {
      width: min(100%, calc((100dvh - var(--chrome-height)) * 4 / 3));
    }
  }
}

/* ---------- 小节号与画布 ---------- */

.stage-block {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bar-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--space-1);
}

.bar-row__edit,
.bar-row__nav,
.bar-row__end {
  display: flex;
  align-items: center;
}

.bar-row__end {
  justify-content: flex-end;
}

.bar-row__number {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  font-weight: 800;
  min-width: var(--touch);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-inline: var(--space-2);
}

.stage__frame {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 12rem;
  border: var(--stroke-thick) solid var(--color-marker);
  border-radius: var(--radius-frame);
  overflow: hidden;
  background: var(--color-canvas);
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

/* 旧内核不认 inset 简写时的兜底，拆进 @supports（原因见 .app 上面那条注释）。 */
@supports not (inset: 0) {
  .stage__canvas {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* ---------- 颜色 ---------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.swatch {
  width: var(--touch);
  height: var(--touch);
  justify-self: center;
  border-radius: 50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.swatch::before {
  content: '';
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--swatch-color);
}

.swatch[aria-checked='true'] {
  box-shadow: inset 0 0 0 var(--stroke-thin) var(--color-marker);
}

/* 鼠标设备不需要 44 像素的点击范围：颜色收小、排紧，聚在一起。 */
@media (pointer: fine) {
  .swatches {
    grid-template-columns: repeat(6, 1.75rem);
    gap: var(--space-2);
    justify-content: center;
  }

  .swatch {
    width: 1.75rem;
    height: 1.75rem;
  }

  .swatch::before {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* ---------- 笔刷 ---------- */

.brushes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: var(--radius-panel);
  padding: var(--space-1);
}

.brush {
  height: 3rem;
  padding: 0;
  border: var(--stroke-thin) solid transparent;
  border-radius: 0.5rem;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 3.75rem);
}

.brush--eraser {
  width: min(100%, 3.75rem);
}

.brush--eraser {
  margin-left: var(--space-1);
  border-radius: 0.5rem;
  border-left: var(--stroke-thin) solid var(--color-marker-soft);
  color: var(--color-ink);
}

.brush--eraser::before {
  content: none;
}

.brush--eraser .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.brush::before {
  content: '';
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: var(--color-ink);
}

.brush[aria-checked='true'] {
  border-color: var(--color-marker);
}

/* ---------- 速度与播放 ---------- */

.tempo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.tempo__icon {
  flex: none;
  color: var(--color-ink);
}

.tempo__icon .icon {
  width: 2rem;
  height: 2rem;
}

.slider {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  min-width: 0;
  height: var(--touch);
  margin: 0;
  background: none;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 1.125rem;
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-marker-soft);
}

.slider::-moz-range-track {
  height: 0.75rem;
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-marker-soft);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  background: var(--color-ink);
  border: 0;
}

.slider::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-ink);
  border: 0;
}

.transport {
  display: flex;
  gap: var(--space-2);
  flex: none;
}

/* ---------- 导出 ---------- */

.export {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.export .button--text {
  min-height: 3.5rem;
  min-width: 0;
}

/* ---------- 弹窗 ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  background: var(--color-overlay);
  display: grid;
  place-items: center;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4)
    calc(var(--space-4) + env(safe-area-inset-bottom));
}

@supports not (inset: 0) {
  .modal-overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.modal {
  width: min(100%, 28rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
}

.modal__title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-title);
}

.modal__body {
  padding: 0 var(--space-5) var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
}

.modal__footer .button--text {
  font-size: var(--text-md);
}

/* ---------- 弹窗里的分组 ---------- */

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.group__title {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}

.group__panel {
  border: var(--stroke-thin) solid var(--color-marker);
  border-radius: var(--radius-panel);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.credit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.credit__avatar {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 0.6rem;
  object-fit: cover;
}

.credit__text {
  margin: 0;
  min-width: 0;
}

.credit__link {
  padding: var(--space-3) 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-2);
}

.choice {
  appearance: none;
  min-height: var(--touch);
  padding: var(--space-1) var(--space-3);
  border: var(--stroke-thin) solid transparent;
  border-radius: 0.75rem;
  background: none;
  font: inherit;
  color: var(--color-ink);
  cursor: pointer;
  text-align: center;
}

.choice:hover {
  background: var(--color-marker-soft);
}

.choice[aria-pressed='true'] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.song-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-1);
}

.song-row .choice {
  text-align: left;
  overflow-wrap: anywhere;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 700;
}

.field__input {
  appearance: none;
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: 0.75rem;
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  caret-color: var(--color-ink);
}

.modal__text {
  margin: 0;
}

/* ---------- 提示条 ---------- */

.toast {
  position: fixed;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  z-index: var(--layer-toast);
  max-width: calc(100% - 2 * var(--space-4));
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-panel);
  background: var(--color-ink);
  color: var(--color-paper);
  border: var(--stroke-thin) solid var(--color-marker);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.toast__action {
  appearance: none;
  border: 0;
  padding: var(--space-2) var(--space-2);
  min-height: var(--touch);
  background: none;
  color: var(--color-paper);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- 下拉 ---------- */

.dropdown {
  min-width: 0;
}

.dropdown__button {
  appearance: none;
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: 0.75rem;
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.dropdown__button[aria-expanded='true'] {
  border-color: var(--color-marker);
}

.dropdown__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown__arrow {
  flex: none;
  display: grid;
  place-items: center;
}

.dropdown__list {
  position: fixed;
  z-index: var(--layer-dropdown);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-1);
  border: var(--stroke-thin) solid var(--color-ink);
  border-radius: 0.75rem;
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dropdown__option {
  appearance: none;
  min-height: var(--touch);
  padding: var(--space-1) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: var(--stroke-thin) solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.dropdown__option:hover {
  background: var(--color-marker-soft);
}

.dropdown__option[aria-selected='true'] {
  background: var(--color-ink);
  color: var(--color-paper);
}

.dropdown__option-mark .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- 曲子搜索 ---------- */

.field__input[type='search']::-webkit-search-cancel-button {
  appearance: none;
}

/* 搜索框：左边一个放大镜，输入框留出位置。 */
.search {
  position: relative;
}

.search__icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-marker);
  pointer-events: none;
}

.search .field__input {
  padding-left: calc(var(--space-3) + 1.5rem + var(--space-2));
}

/* ---------- 全部小节 ---------- */

.bar-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--space-3);
}

.bar-tile {
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  border: var(--stroke-thin) solid var(--color-marker-soft);
  border-radius: 0.75rem;
  background: var(--color-paper);
  color: var(--color-ink);
}

.bar-tile[aria-current='true'] {
  border-color: var(--color-ink);
}

/* 每个小图上面一行：左边删除，中间小节号，右边复制；底部一条是拖动把手。 */
.bar-tile__head {
  display: grid;
  grid-template-columns: var(--touch) 1fr var(--touch);
  align-items: center;
}

.bar-tile__grip {
  width: 100%;
  height: var(--touch);
  display: grid;
  place-items: center;
  color: var(--color-marker);
  cursor: grab;
  touch-action: none;
}

.bar-tile__open {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.bar-tile__canvas {
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  display: block;
  border-radius: 0.5rem;
  background: var(--color-canvas);
  -webkit-user-drag: none;
}

.bar-tile__number {
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
}

.bar-tile--new {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-style: dashed;
  justify-content: center;
}

.bar-tile__plus {
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  display: grid;
  place-items: center;
  color: var(--color-marker);
}

/* 旧内核不认 aspect-ratio 时的兜底：用内边距撑出同样高度的格子，图标叠在同一格居中。
   `.bar-tile__canvas` 不需要这个兜底——canvas 是替换元素，只给宽度时高度会按它自身
   width/height 属性的比例（已经按 --tile-ratio 算好）自动撑开，浏览器不认 aspect-ratio 也一样。 */
.bar-tile__plus::before {
  content: '';
  grid-area: 1 / 1;
  padding-top: calc(100% / var(--tile-ratio));
}

.bar-tile__plus .icon {
  grid-area: 1 / 1;
  width: 2rem;
  height: 2rem;
}

/* 拖动中：被拖的小图跟着指针、盖在别的小图上面，其余的小图滑到各自的新位置。 */
.bar-grid.is-sorting {
  cursor: grabbing;
}

.bar-grid.is-sorting .bar-tile:not(.is-dragging) {
  transition: transform 0.15s ease;
}

.bar-tile.is-dragging {
  position: relative;
  z-index: var(--layer-lifted);
  border-color: var(--color-ink);
}