.jianpu-workspace {
  position: fixed;
  inset: var(--desktop-titlebar-height, var(--titlebar-height, 0)) 0 0;
  width: 100vw;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  z-index: 865;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-text);
  container: jianpu-workspace / inline-size;
}

.jianpu-source-readiness {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.jianpu-source-readiness article {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--app-panel) 86%, var(--app-bg));
}

.jianpu-source-readiness article > b {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--status-info);
}

.jianpu-source-readiness article[data-source-status="pass"] > b { background: var(--status-success); }
.jianpu-source-readiness article[data-source-status="warning"] > b { background: var(--status-warning); }
.jianpu-source-readiness article[data-source-status="fail"] > b { background: var(--status-danger); }

.jianpu-source-readiness article span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.jianpu-source-readiness article strong,
.jianpu-source-readiness article small,
.jianpu-delivery-panel small {
  font-size: 12px;
  line-height: 1.45;
}

.jianpu-source-readiness article small,
.jianpu-delivery-panel small { color: var(--app-text-muted); }

.jianpu-source-actions,
.jianpu-delivery-actions,
.jianpu-handoff-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.jianpu-source-actions:has(> :only-child) { grid-template-columns: 1fr; }

.jianpu-delivery-panel > p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.jianpu-delivery-panel > header em[data-state="ready"] { color: var(--status-success); }
.jianpu-delivery-panel > header em[data-state="draft"] { color: var(--status-warning); }

.jianpu-handoff-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

.jianpu-delivery-actions .jianpu-button,
.jianpu-handoff-actions .jianpu-button,
.jianpu-source-actions .jianpu-button {
  min-height: 40px;
  white-space: normal;
}

@media (max-width: 900px) {
  .jianpu-handoff-actions { grid-template-columns: 1fr; }
}

.jianpu-workspace[hidden] {
  display: none;
}

body.jianpu-workspace-open {
  overflow: hidden;
}

body.jianpu-workspace-open .desktop-app-menu,
body.jianpu-workspace-open .app-shell,
body.jianpu-workspace-open .modal-backdrop:not(.jianpu-owned-modal) {
  visibility: hidden;
}

.jianpu-workspace button,
.jianpu-workspace input,
.jianpu-workspace select {
  font: inherit;
}

.jianpu-workspace button {
  color: inherit;
}

.jianpu-topbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 4.75rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--app-line);
  background: color-mix(in srgb, var(--app-panel) 94%, var(--app-bg));
}

.jianpu-kicker,
.jianpu-sidebar-label,
.jianpu-note-meta,
.jianpu-source-detail,
.jianpu-empty p,
.jianpu-key-hint,
.jianpu-health-detail,
.jianpu-help {
  color: var(--app-muted);
}

.jianpu-kicker {
  margin: 0 0 .25rem;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .07em;
}

.jianpu-title-group h1 {
  margin: 0;
  font-size: 1.18rem;
}

.jianpu-title-group h1 span {
  color: var(--app-muted);
  font-size: .82rem;
  font-weight: 600;
}

.jianpu-top-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.jianpu-metric,
.jianpu-key-box,
.jianpu-health,
.jianpu-source-card,
.jianpu-inspector,
.jianpu-score-panel,
.jianpu-side-panel {
  border: 1px solid var(--app-line);
  border-radius: .8rem;
  background: var(--app-panel);
}

.jianpu-metric {
  display: grid;
  gap: .05rem;
  min-width: 4.8rem;
  padding: .45rem .65rem;
  text-align: center;
}

.jianpu-metric span {
  color: var(--app-muted);
  font-size: .69rem;
  font-weight: 700;
}

.jianpu-metric strong {
  font-size: .92rem;
}

.jianpu-top-actions,
.jianpu-score-toolbar,
.jianpu-inline-actions,
.jianpu-key-actions,
.jianpu-play-controls,
.jianpu-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

.jianpu-button {
  min-height: 2.25rem;
  padding: .43rem .78rem;
  border: 1px solid var(--app-line);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--app-panel) 78%, var(--app-bg));
  color: var(--app-text);
  cursor: pointer;
  font-weight: 750;
}

.jianpu-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--app-accent) 64%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent) 15%, var(--app-panel));
}

.jianpu-button:focus-visible,
.jianpu-note:focus-visible,
.jianpu-score-note:focus-visible,
.jianpu-workspace input:focus-visible,
.jianpu-workspace select:focus-visible,
.jianpu-input:focus-visible,
.jianpu-select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--app-accent) 82%, var(--app-text));
  outline-offset: 2px;
}

.jianpu-button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.jianpu-button.primary {
  border-color: color-mix(in srgb, var(--app-accent) 72%, var(--app-line));
  background: var(--app-accent);
  color: var(--app-accent-ink);
}

.jianpu-button.danger {
  border-color: color-mix(in srgb, var(--app-coral) 60%, var(--app-line));
  color: var(--app-coral);
}

.workspace-hub-card-jianpu {
  border-color: color-mix(in srgb, var(--status-warning-text) 44%, var(--app-line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--status-warning-bg) 74%, var(--app-panel)), var(--app-panel));
}

.workspace-hub-card-jianpu .workspace-hub-card-index,
.workspace-hub-card-jianpu .workspace-hub-card-status,
.workspace-hub-card-jianpu > strong {
  color: var(--status-warning-text);
}

.workspace-hub-card-jianpu .workspace-hub-card-status {
  border-color: color-mix(in srgb, var(--status-warning-text) 42%, var(--app-line));
  background: var(--status-warning-bg);
}

.project-header-actions .jianpu-header-entry {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  border: 1px solid color-mix(in srgb, var(--status-warning-text) 48%, var(--app-line));
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.jianpu-header-entry > span {
  padding: .16rem .32rem;
  border: 1px solid currentColor;
  border-radius: .32rem;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.jianpu-layout {
  display: grid;
  grid-template-columns: minmax(15.5rem, 19rem) minmax(0, 1fr) minmax(18rem, 23rem);
  gap: .9rem;
  min-height: 0;
  padding: .9rem;
  overflow: hidden;
}

.jianpu-side-panel,
.jianpu-score-panel,
.jianpu-inspector {
  min-height: 0;
  overflow: auto;
}

.jianpu-side-panel {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .9rem;
}

.jianpu-sidebar-label {
  margin: 0;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.jianpu-source-list {
  display: grid;
  gap: .55rem;
}

.jianpu-source-card {
  padding: .7rem;
}

.jianpu-source-card strong,
.jianpu-health strong {
  display: block;
  font-size: .82rem;
}

.jianpu-source-detail {
  display: block;
  margin-top: .2rem;
  font-size: .75rem;
  line-height: 1.42;
}

.jianpu-health {
  display: grid;
  gap: .28rem;
  padding: .7rem;
}

.jianpu-health.passed {
  border-color: var(--status-success-border);
}

.jianpu-health.attention {
  border-color: var(--status-warning-border);
}

.jianpu-health-detail {
  font-size: .75rem;
  line-height: 1.42;
}

.jianpu-key-box {
  display: grid;
  gap: .52rem;
  padding: .75rem;
}

.jianpu-key-box label,
.jianpu-field label {
  display: grid;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 750;
}

.jianpu-key-hint {
  margin: 0;
  font-size: .74rem;
  line-height: 1.42;
}

.jianpu-score-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.jianpu-score-toolbar {
  justify-content: space-between;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--app-line);
}

.jianpu-score-toolbar h2,
.jianpu-inspector h2 {
  margin: 0;
  font-size: .95rem;
}

.jianpu-score-canvas {
  display: grid;
  align-content: start;
  gap: .7rem;
  padding: .9rem;
}

.jianpu-empty {
  display: grid;
  justify-items: start;
  gap: .55rem;
  padding: 2.5rem 1rem;
}

.jianpu-empty h2 {
  margin: 0;
}

.jianpu-empty p {
  max-width: 36rem;
  margin: 0;
  line-height: 1.55;
}

.jianpu-bar {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: .7rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, var(--app-line) 78%, var(--app-panel));
  border-radius: .65rem;
  background: color-mix(in srgb, var(--app-bg) 35%, var(--app-panel));
}

.jianpu-bar-label {
  display: grid;
  align-content: start;
  gap: .12rem;
  padding-top: .2rem;
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 800;
}

.jianpu-bar-label strong {
  color: var(--app-text);
  font-size: .78rem;
}

.jianpu-bar-notes {
  display: flex;
  align-items: stretch;
  min-height: 5.2rem;
  overflow-x: auto;
}

.jianpu-score-note {
  position: relative;
  display: grid;
  grid-template-rows: 1.15rem 1fr 1.05rem;
  flex: 1 0 3.55rem;
  min-width: 3.55rem;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--app-line) 82%, var(--app-panel));
  background: transparent;
  cursor: pointer;
  text-align: center;
}

.jianpu-score-note:hover,
.jianpu-score-note.selected {
  background: color-mix(in srgb, var(--app-accent) 13%, var(--app-panel));
}

.jianpu-score-note.pending .jianpu-degree {
  color: var(--status-warning-text);
}

.jianpu-score-note.locked .jianpu-degree::after {
  content: "锁";
  margin-left: .15rem;
  color: var(--app-muted);
  font-size: .58rem;
  vertical-align: middle;
}

.jianpu-octave {
  min-height: .8rem;
  color: var(--app-accent);
  font-size: .9rem;
  letter-spacing: -.08em;
}

.jianpu-degree {
  align-self: center;
  font-size: 1.7rem;
  font-weight: 850;
  line-height: 1;
}

.jianpu-lyric {
  overflow: hidden;
  color: var(--app-muted);
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jianpu-duration {
  position: absolute;
  right: .2rem;
  bottom: .1rem;
  color: var(--app-muted);
  font-size: .62rem;
}

.jianpu-inspector {
  display: grid;
  align-content: start;
  gap: .85rem;
  padding: .9rem;
}

.jianpu-inspector-header {
  display: grid;
  gap: .18rem;
}

.jianpu-inspector-header p {
  margin: 0;
  color: var(--app-muted);
  font-size: .76rem;
}

.jianpu-note-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .55rem;
  padding: .68rem;
  border: 1px solid var(--app-line);
  border-radius: .65rem;
}

.jianpu-note-preview strong {
  font-size: 1.55rem;
}

.jianpu-note-meta {
  display: grid;
  gap: .08rem;
  font-size: .73rem;
  line-height: 1.35;
}

.jianpu-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}

.jianpu-field-grid label {
  display: grid;
  gap: .28rem;
  color: var(--app-muted);
  font-size: .76rem;
  font-weight: 750;
}

.jianpu-field-grid .jianpu-input,
.jianpu-field-grid .jianpu-select {
  color: var(--app-text);
  font-weight: 650;
}

.jianpu-input,
.jianpu-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.2rem;
  padding: .42rem .52rem;
  border: 1px solid var(--app-line);
  border-radius: .48rem;
  background: var(--app-bg);
  color: var(--app-text);
}

.jianpu-insert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem;
}

.jianpu-volume {
  display: grid;
  grid-template-columns: auto minmax(6rem, 1fr);
  align-items: center;
  gap: .5rem;
  color: var(--app-muted);
  font-size: .78rem;
  font-weight: 750;
}

.jianpu-volume input {
  accent-color: var(--app-accent);
}

.jianpu-toggle-row {
  justify-content: space-between;
  padding-top: .1rem;
}

.jianpu-toggle-row label {
  display: flex;
  align-items: center;
  gap: .42rem;
  color: var(--app-text);
  font-size: .78rem;
}

.jianpu-toggle-row input {
  accent-color: var(--app-accent);
}

.jianpu-help {
  margin: 0;
  padding-top: .72rem;
  border-top: 1px solid var(--app-line);
  font-size: .72rem;
  line-height: 1.55;
}

.jianpu-toast {
  position: fixed;
  z-index: 880;
  right: 1.2rem;
  bottom: 1.2rem;
  max-width: min(28rem, calc(100vw - 2.4rem));
  padding: .68rem .82rem;
  border: 1px solid color-mix(in srgb, var(--app-accent) 50%, var(--app-line));
  border-radius: .62rem;
  background: color-mix(in srgb, var(--app-panel) 88%, var(--app-accent));
  color: var(--app-text);
  box-shadow: 0 .7rem 1.7rem color-mix(in srgb, var(--app-bg) 52%, transparent);
  font-size: .8rem;
  font-weight: 700;
}

.jianpu-toast.severity-success { border-left: 3px solid var(--status-success-border); }
.jianpu-toast.severity-warning { border-left: 3px solid var(--status-warning-border); }
.jianpu-toast.severity-error { border-left: 3px solid var(--status-danger-border); }

.jianpu-gen-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .55rem;
}

.jianpu-gen-progress .jianpu-gen-steps {
  display: flex;
  gap: .12rem;
  flex: 1;
  overflow: hidden;
  flex-wrap: wrap;
}

.jianpu-gen-progress .jianpu-gen-step {
  display: flex;
  align-items: center;
  padding: .12rem .38rem;
  border-radius: .28rem;
  background: var(--app-panel-2);
  color: var(--app-muted);
  font-size: .75rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.jianpu-gen-progress .jianpu-gen-step.active {
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font-weight: 700;
}

.jianpu-gen-progress .jianpu-gen-step.done {
  background: color-mix(in srgb, var(--status-success-bg) 60%, var(--app-panel-2));
  color: var(--status-success-text);
}

.jianpu-action-feedback {
  margin-top: .62rem;
  padding: .62rem .68rem;
  border: 1px solid var(--app-line);
  border-radius: .55rem;
  background: var(--app-panel-2);
}

.jianpu-action-feedback[data-phase="working"] {
  border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
  background: var(--app-accent-soft);
}

.jianpu-action-feedback[data-phase="success"] {
  border-color: color-mix(in srgb, var(--status-success-border) 55%, var(--app-line));
  background: color-mix(in srgb, var(--status-success-bg) 72%, var(--app-panel-2));
}

.jianpu-action-feedback[data-phase="warning"] {
  border-color: color-mix(in srgb, var(--status-warning-border) 55%, var(--app-line));
  background: color-mix(in srgb, var(--status-warning-bg) 72%, var(--app-panel-2));
}

.jianpu-action-feedback[data-phase="error"] {
  border-color: color-mix(in srgb, var(--status-danger-border) 55%, var(--app-line));
  background: color-mix(in srgb, var(--status-danger-bg) 72%, var(--app-panel-2));
}

.jianpu-action-feedback strong {
  display: block;
  margin-bottom: .28rem;
  color: var(--app-text);
  font-size: .82rem;
  font-weight: 800;
}

.jianpu-action-feedback p {
  margin: 0;
  color: var(--app-muted);
  font-size: .75rem;
  line-height: 1.55;
}

.jianpu-action-feedback-next {
  margin-top: .48rem;
  padding-top: .42rem;
  border-top: 1px solid color-mix(in srgb, var(--app-line) 80%, transparent);
}

.jianpu-action-feedback-next > span {
  display: block;
  margin-bottom: .22rem;
  color: var(--app-text);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.jianpu-action-feedback-next ol {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--app-text);
  font-size: .75rem;
  line-height: 1.55;
}

.jianpu-ai-completion-box {
  display: grid;
  gap: .55rem;
  margin-top: .65rem;
  padding: .72rem;
  border: 1px solid color-mix(in srgb, var(--app-secondary) 52%, var(--app-line));
  border-radius: .62rem;
  background: color-mix(in srgb, var(--status-info-bg) 68%, var(--app-panel-2));
}

.jianpu-ai-completion-box header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .5rem;
}

.jianpu-ai-completion-box header > div {
  display: grid;
  gap: .16rem;
}

.jianpu-ai-completion-box header span {
  color: var(--status-info-text);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.jianpu-ai-completion-box header strong {
  color: var(--app-text);
  font-size: .86rem;
}

.jianpu-ai-completion-box header em {
  flex: 0 0 auto;
  padding: .18rem .35rem;
  border: 1px solid var(--status-info-border);
  border-radius: 999px;
  color: var(--status-info-text);
  font-size: .75rem;
  font-style: normal;
  white-space: nowrap;
}

.jianpu-ai-completion-box p,
.jianpu-ai-completion-status {
  margin: 0;
  color: var(--app-muted);
  font-size: .75rem;
  line-height: 1.55;
}

.jianpu-ai-completion-status {
  color: var(--app-text);
}

.jianpu-ai-completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.jianpu-ai-completion-actions .jianpu-button {
  flex: 1 1 8.5rem;
  min-width: 0;
}

.jianpu-top-status[data-state="ai-candidate"] {
  border-color: var(--status-info-border);
  background: color-mix(in srgb, var(--status-info-bg) 78%, var(--app-panel));
  color: var(--status-info-text);
}

.jianpu-top-status[data-state="working"] {
  border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-line));
  background: color-mix(in srgb, var(--app-accent-soft) 78%, var(--app-panel));
  color: var(--app-text);
}

.jianpu-section-divider.is-ai-focus {
  position: relative;
  z-index: 2;
  outline: 3px solid color-mix(in srgb, var(--app-accent) 68%, transparent);
  outline-offset: .2rem;
  box-shadow: 0 0 .9rem color-mix(in srgb, var(--app-accent) 35%, transparent);
  animation: jianpu-ai-focus-pulse 1.1s ease-in-out 2;
}

@keyframes jianpu-ai-focus-pulse {
  0%, 100% { background: var(--app-score-paper-line); }
  50% { background: color-mix(in srgb, var(--app-accent) 22%, var(--app-score-paper-line)); }
}

.jianpu-workspace.jianpu-is-busy {
  cursor: progress;
}

.jianpu-workspace.jianpu-is-busy [data-jianpu-action="generate"],
.jianpu-workspace.jianpu-is-busy [data-jianpu-action="analyze-accompaniment"] {
  opacity: .82;
}

.jianpu-workspace.jianpu-is-busy [data-jianpu-action="ai-complete-sections"] {
  opacity: .82;
}

.jianpu-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.jianpu-progress-overlay {
  position: fixed;
  z-index: 920;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 4rem 1rem 2rem;
  background: color-mix(in srgb, var(--app-bg) 58%, transparent);
  backdrop-filter: blur(2px);
}

.jianpu-progress-overlay[hidden] {
  display: none;
}

.jianpu-progress-card {
  position: relative;
  z-index: 1;
  width: min(42rem, calc(100% - 2rem));
  max-height: min(76vh, 46rem);
  overflow: auto;
  padding: .9rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-line));
  border-radius: .72rem;
  background: color-mix(in srgb, var(--app-panel) 92%, var(--app-accent));
  box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--app-bg) 58%, transparent);
  animation: jianpu-progress-card-in .24s ease;
}

@keyframes jianpu-progress-card-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.jianpu-playback-panel p {
  margin: .45rem 0 0;
  font-size: .75rem;
  line-height: 1.55;
}

.jianpu-playback-panel label {
  display: grid;
  gap: .28rem;
  font-size: .75rem;
  font-weight: 700;
}

.jianpu-progress-card strong {
  display: block;
  margin-bottom: .32rem;
  color: var(--app-text);
  font-size: .92rem;
  font-weight: 800;
}

.jianpu-progress-card p {
  margin: 0 0 .62rem;
  color: var(--app-muted);
  font-size: .78rem;
  line-height: 1.55;
}

.jianpu-progress-bar-track {
  height: .52rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--app-panel-2);
}

.jianpu-progress-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 70%, var(--status-success-text)));
  transition: width .22s ease;
}

.jianpu-progress-overlay[data-indeterminate="true"] .jianpu-progress-bar-fill {
  width: 36% !important;
  animation: jianpu-progress-indeterminate 1.1s ease-in-out infinite;
}

@keyframes jianpu-progress-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

.jianpu-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .55rem;
}

.jianpu-progress-meta output {
  color: var(--app-text);
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.jianpu-progress-meta .jianpu-button {
  min-height: 2rem;
  padding: 0 .72rem;
  font-size: .78rem;
}

.jianpu-progress-steps {
  margin: .62rem 0 0;
  padding-left: 1.15rem;
  color: var(--app-text);
  font-size: .75rem;
  line-height: 1.55;
}

.jianpu-progress-steps li.active {
  color: var(--app-accent);
  font-weight: 800;
}

.jianpu-progress-steps li.done {
  color: var(--status-success-text);
}

.jianpu-progress-stream {
  display: grid;
  gap: .35rem;
  margin-top: .7rem;
  padding-top: .65rem;
  border-top: 1px solid color-mix(in srgb, var(--app-line) 78%, transparent);
}

.jianpu-progress-stream[hidden] {
  display: none;
}

.jianpu-progress-stream header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.jianpu-progress-stream header strong {
  margin: 0;
  color: var(--app-text);
  font-size: .75rem;
}

.jianpu-progress-stream header output {
  color: var(--app-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.jianpu-progress-stream pre {
  max-height: 12rem;
  margin: 0;
  padding: .6rem .7rem;
  overflow: auto;
  border: 1px solid var(--app-line);
  border-radius: .48rem;
  background: color-mix(in srgb, var(--app-bg) 74%, var(--app-panel));
  color: var(--app-text);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .75rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1160px) {
  .jianpu-layout {
    grid-template-columns: minmax(13.5rem, 16rem) minmax(0, 1fr);
    overflow: auto;
  }

  .jianpu-inspector {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jianpu-inspector-header,
  .jianpu-help {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .jianpu-topbar {
    grid-template-columns: 1fr;
  }

  .jianpu-top-metrics,
  .jianpu-top-actions {
    justify-content: flex-start;
  }

  .jianpu-layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .jianpu-side-panel,
  .jianpu-score-panel,
  .jianpu-inspector {
    overflow: visible;
  }

  .jianpu-inspector {
    grid-template-columns: 1fr;
  }

  .jianpu-bar {
    grid-template-columns: 1fr;
  }
}

/* The workspace markup deliberately stays self-contained, so these component
   rules only style elements created by jianpu-workspace.js. */
.jianpu-title {
  display: grid;
  gap: .15rem;
}

.jianpu-title small,
.jianpu-title span,
.jianpu-top-status,
.jianpu-panel p,
.jianpu-panel header span,
.jianpu-panel header em,
.jianpu-editor-head small,
.jianpu-editor-head span,
.jianpu-toolbar small,
.jianpu-note span,
.jianpu-inspector > span,
.jianpu-inspector > div > span {
  color: var(--app-muted);
}

.jianpu-title strong {
  font-size: 1.12rem;
}

.jianpu-title small {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.jianpu-title span {
  font-size: .75rem;
}

.jianpu-current-cue {
  color: var(--status-success-text);
  font-weight: 750;
}

.jianpu-top-status {
  padding: .45rem .65rem;
  border: 1px solid var(--app-line);
  border-radius: .55rem;
  background: var(--app-panel);
  font-size: .78rem;
  font-weight: 750;
}

.jianpu-save-state {
  padding: .36rem .5rem;
  border: 1px solid var(--app-line);
  border-radius: .48rem;
  background: var(--app-panel);
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

.jianpu-save-state[data-state="saved"] {
  border-color: color-mix(in srgb, var(--status-success-text) 42%, var(--app-line));
  background: var(--status-success-bg);
  color: var(--status-success-text);
}

.jianpu-save-state[data-state="dirty"],
.jianpu-save-state[data-state="saving"] {
  border-color: color-mix(in srgb, var(--status-warning-text) 42%, var(--app-line));
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.jianpu-save-state[data-state="error"] {
  border-color: color-mix(in srgb, var(--status-danger-text) 42%, var(--app-line));
  background: var(--status-danger-bg);
  color: var(--status-danger-text);
}

.jianpu-layout {
  grid-template-columns: minmax(15.5rem, 20rem) minmax(0, 1fr);
}

.jianpu-sidebar,
.jianpu-main {
  min-height: 0;
  overflow: auto;
}

.jianpu-sidebar {
  display: grid;
  align-content: start;
  gap: .8rem;
}

.jianpu-panel {
  display: grid;
  gap: .7rem;
  padding: .82rem;
  border: 1px solid var(--app-line);
  border-radius: .8rem;
  background: var(--app-panel);
}

.jianpu-panel header,
.jianpu-editor-head,
.jianpu-bar header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
}

.jianpu-panel header > div,
.jianpu-editor-head > div:first-child {
  display: grid;
  gap: .15rem;
}

.jianpu-panel header strong,
.jianpu-editor-head strong {
  font-size: .9rem;
}

.jianpu-panel header em {
  font-size: .69rem;
  font-style: normal;
  font-weight: 700;
}

.jianpu-panel p {
  margin: 0;
  font-size: .76rem;
  line-height: 1.5;
}

.jianpu-source-list,
.jianpu-review {
  display: grid;
  gap: .45rem;
}

.jianpu-source-list > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .55rem;
  min-width: 0;
  padding: .48rem .55rem;
  border: 1px solid color-mix(in srgb, var(--app-line) 82%, var(--app-panel));
  border-radius: .48rem;
  font-size: .74rem;
}

.jianpu-source-list b {
  font-weight: 750;
}

.jianpu-source-list em {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--app-muted);
  font-style: normal;
  text-align: end;
}

.jianpu-key-panel label {
  display: grid;
  gap: .28rem;
  color: var(--app-text);
  font-size: .76rem;
  font-weight: 750;
}

.jianpu-key-panel select {
  min-height: 2.15rem;
  padding: .35rem .48rem;
  border: 1px solid var(--app-line);
  border-radius: .48rem;
  background: var(--app-bg);
  color: var(--app-text);
}

.jianpu-review {
  min-height: 2.4rem;
  padding: .55rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--app-bg) 55%, var(--app-panel));
  font-size: .74rem;
  line-height: 1.4;
}

.jianpu-review strong {
  color: var(--app-text);
}

.jianpu-review span {
  color: var(--app-muted);
}

.jianpu-main {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: .8rem;
  min-width: 0;
}

.jianpu-editor-head,
.jianpu-toolbar,
.jianpu-score,
.jianpu-inspector {
  padding: .8rem;
  border: 1px solid var(--app-line);
  border-radius: .8rem;
  background: var(--app-panel);
}

.jianpu-editor-head {
  align-items: center;
}

.jianpu-transport {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .5rem;
}

.jianpu-voice-picker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.2rem;
  padding: .2rem .45rem .2rem .55rem;
  border: 1px solid color-mix(in srgb, var(--app-accent) 45%, var(--app-line));
  border-radius: .48rem;
  background: var(--app-accent-soft);
  color: var(--app-text);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-voice-picker select {
  min-height: 1.8rem;
  min-width: 5.5rem;
  border: 0;
  background: transparent;
  color: var(--app-text);
  font-size: .82rem;
  font-weight: 800;
}

.jianpu-toolbar {
  display: grid;
  gap: .55rem;
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 750;
}

.jianpu-palette-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-bottom: .2rem;
}

.jianpu-palette-tab {
  min-height: 2rem;
  padding: 0 .62rem;
  border: 1px solid var(--app-line);
  border-radius: .42rem;
  background: var(--app-bg);
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-palette-tab.is-active,
.jianpu-palette-tab[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

.jianpu-dynamics-mark {
  position: absolute;
  top: .1rem;
  left: .15rem;
  color: var(--app-accent);
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  line-height: 1;
}

.jianpu-palette-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.jianpu-palette-label {
  min-width: 2.4rem;
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 800;
}

.jianpu-glyph {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  min-width: 3.1rem;
  min-height: 3.35rem;
  padding: .28rem .3rem .2rem;
  border: 1px solid var(--app-line);
  border-radius: .42rem;
  background: var(--app-bg);
  color: var(--app-text);
  font-size: .92rem;
  font-weight: 800;
  cursor: grab;
}

.jianpu-symbol-icon {
  display: block;
  flex: 0 0 auto;
  color: inherit;
}

.jianpu-glyph-caption {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.jianpu-glyph-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.jianpu-glyph:hover {
  border-color: color-mix(in srgb, var(--app-accent) 50%, var(--app-line));
  background: var(--app-accent-soft);
}

.jianpu-glyph.is-active {
  border-color: color-mix(in srgb, var(--app-accent) 60%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 35%, transparent);
}

.jianpu-glyph.is-dragging {
  opacity: .55;
}

.jianpu-note.is-drop-target {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  background: var(--app-accent-soft);
}

.jianpu-palette-mode .jianpu-button.is-active {
  border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

.jianpu-toolbar small,
.jianpu-palette-mode small {
  flex: 1 1 12rem;
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.45;
}

.jianpu-timeline-readout {
  padding: .38rem .5rem;
  border: 1px solid var(--app-line);
  border-radius: .45rem;
  background: var(--app-bg);
  color: var(--app-muted);
  font-family: var(--app-mono, ui-monospace, monospace);
  font-size: .72rem;
  font-weight: 750;
  white-space: nowrap;
}

.jianpu-toolbar input {
  min-height: 2.2rem;
  padding: .4rem .55rem;
  border: 1px solid var(--app-line);
  border-radius: .48rem;
  background: var(--app-bg);
  color: var(--app-text);
}

.jianpu-toolbar .jianpu-select {
  min-height: 2.2rem;
  min-width: 7.5rem;
}

.jianpu-button:disabled,
.jianpu-select:disabled,
.jianpu-input:disabled,
.jianpu-toolbar input:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.jianpu-score {
  display: grid;
  align-content: start;
  gap: .65rem;
  min-height: 12rem;
  overflow: auto;
}

.jianpu-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .38rem;
  min-height: 9rem;
  color: var(--app-muted);
  text-align: center;
  font-size: .8rem;
}

.jianpu-empty strong {
  color: var(--app-text);
  font-size: .95rem;
}

.jianpu-bar {
  display: grid;
  gap: .55rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, var(--app-line) 82%, var(--app-panel));
  border-radius: .62rem;
  background: color-mix(in srgb, var(--app-bg) 35%, var(--app-panel));
}

.jianpu-bar header span {
  font-size: .78rem;
  font-weight: 800;
}

.jianpu-bar header small {
  color: var(--app-muted);
  font-size: .7rem;
}

.jianpu-bar-notes {
  display: flex;
  min-height: 5rem;
  overflow-x: auto;
}

.jianpu-note {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  flex: 0 0 max(3.5rem, var(--jianpu-length, 25%));
  min-width: 3.5rem;
  padding: .35rem .2rem;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--app-line) 82%, var(--app-panel));
  background: var(--app-panel);
  color: var(--app-text);
  cursor: pointer;
}

.jianpu-note b {
  font-size: 1.65rem;
  line-height: 1;
}

.jianpu-note span {
  overflow: hidden;
  font-size: .76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jianpu-note i {
  position: absolute;
  inset: 0 0 auto;
  height: .22rem;
  background: var(--app-line);
}

.jianpu-note.is-selected,
.jianpu-note:hover {
  background: color-mix(in srgb, var(--app-accent) 13%, var(--app-panel));
}

.jianpu-note.is-selected i {
  background: var(--app-accent);
}

.jianpu-note.is-pending b {
  color: var(--status-warning-text);
}

.jianpu-note.is-confirmed b {
  color: var(--app-text);
}

.jianpu-note.is-instrumental span {
  color: var(--app-secondary);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-note-marks {
  overflow: hidden;
  color: var(--app-muted);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jianpu-note.is-rest span,
.jianpu-paper .jianpu-note.is-rest b {
  color: var(--status-warning-text);
  font-weight: 800;
}

.jianpu-note.is-locked::after {
  content: "锁定";
  position: absolute;
  right: .2rem;
  bottom: .2rem;
  color: var(--app-muted);
  font-size: .7rem;
}

.jianpu-note.is-playing {
  background: var(--status-success-bg);
}

.jianpu-inspector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.7rem;
  overflow: visible;
}

.jianpu-inspector > div:first-child {
  display: grid;
  gap: .16rem;
}

.jianpu-inspector > div > strong {
  font-size: .86rem;
}

.jianpu-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}

@media (max-width: 980px) {
  .jianpu-layout { display: block; overflow: auto; }
  .jianpu-sidebar, .jianpu-main { overflow: visible; }
  .jianpu-main { margin-top: .8rem; }
}

@media (max-width: 700px) {
  .jianpu-editor-head, .jianpu-inspector { align-items: flex-start; flex-direction: column; }
  .jianpu-field-grid { grid-template-columns: 1fr; }
  .jianpu-transport, .jianpu-inspector-actions { justify-content: flex-start; }
  .jianpu-toolbar { grid-template-columns: 1fr; }
}

@container jianpu-workspace (max-width: 1200px) {
  .jianpu-layout {
    display: block;
    overflow: auto;
  }

  .jianpu-sidebar,
  .jianpu-main {
    overflow: visible;
  }

  .jianpu-main {
    margin-top: .8rem;
  }

  .jianpu-score {
    overflow: visible;
  }

  .jianpu-paper {
    width: min(100%, 58rem);
    margin-inline: auto;
  }
}

/* Printed-score notation and playback follow mode. The editor keeps the
   familiar A4 reading order while leaving each note and section title inline
   editable. Playback uses the same paper surface so the user can follow the
   melody without switching views. */
.jianpu-paper-title-block {
  display: grid;
  justify-items: center;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.jianpu-paper-title-block small {
  color: color-mix(in srgb, var(--app-score-paper-ink) 70%, var(--app-score-paper-line));
  font-size: .75rem;
  line-height: 1.45;
}

.jianpu-paper .jianpu-paper-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 7rem;
}

.jianpu-paper .jianpu-paper-title {
  display: block;
  width: min(100%, 38rem);
  color: var(--app-score-paper-ink);
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  line-height: 1.15;
  text-align: center;
}

.jianpu-paper .jianpu-paper-title:focus,
.jianpu-paper [contenteditable="true"]:focus {
  outline: .14rem solid color-mix(in srgb, var(--app-accent) 72%, transparent);
  outline-offset: .15rem;
}

.jianpu-paper .jianpu-paper-meta {
  display: grid;
  gap: .25rem;
  min-width: 8rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--app-score-paper-line);
  text-align: right;
}

.jianpu-paper .jianpu-paper-meta strong {
  font-size: 1rem;
}

.jianpu-paper .jianpu-paper-meta span {
  font-size: .75rem;
}

.jianpu-section-divider {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .65rem;
  padding: .9rem 0 .5rem;
  border-top: 1px dashed var(--app-score-paper-line);
  color: var(--app-score-paper-ink);
}

.jianpu-section-divider strong {
  color: var(--app-accent);
  font-size: 1rem;
}

.jianpu-section-divider span,
.jianpu-section-divider small {
  color: color-mix(in srgb, var(--app-score-paper-ink) 66%, var(--app-score-paper-line));
  font-size: .75rem;
}

.jianpu-section-divider small {
  justify-self: end;
  text-align: right;
}

.jianpu-section-divider.is-instrumental strong {
  color: var(--app-warm);
}

.jianpu-section-divider.is-ai-candidate {
  padding-left: .55rem;
  border-top-color: color-mix(in srgb, var(--status-info-border) 72%, var(--app-score-paper-line));
  background: color-mix(in srgb, var(--status-info-bg) 34%, transparent);
}

.jianpu-section-divider.is-ai-candidate > span:not(.jianpu-section-ai-actions) {
  color: var(--status-info-text);
  font-weight: 750;
}

.jianpu-section-ai-actions {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  justify-self: end;
}

.jianpu-section-ai-actions .jianpu-button {
  min-height: 1.75rem;
  padding: .24rem .48rem;
  border-color: var(--status-info-border);
  color: var(--status-info-text);
  font-size: .75rem;
}

.jianpu-section-ai-actions .jianpu-button:hover {
  border-color: var(--status-info-text);
  background: var(--status-info-bg);
}

.jianpu-section-divider.is-current {
  border-top-color: var(--app-accent);
  background: color-mix(in srgb, var(--app-accent) 10%, transparent);
}

.jianpu-paper .jianpu-measure {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem;
  align-items: stretch;
  min-height: 7rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--app-score-paper-line);
}

.jianpu-paper .jianpu-measure-head {
  display: grid;
  align-content: start;
  gap: .25rem;
  padding-top: .45rem;
  border-right: 1px solid var(--app-score-paper-line);
}

.jianpu-paper .jianpu-measure-head span {
  color: var(--app-score-paper-ink);
  font-size: .875rem;
  font-weight: 800;
}

.jianpu-paper .jianpu-measure-head small {
  color: color-mix(in srgb, var(--app-score-paper-ink) 62%, var(--app-score-paper-line));
  font-size: .75rem;
}

.jianpu-paper .jianpu-bar-notes {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 6rem;
  padding: .1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--app-score-paper-line) 68%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--app-score-paper-line) 68%, transparent);
}

.jianpu-paper .jianpu-note {
  position: relative;
  display: grid;
  flex: var(--jianpu-length) 1 0;
  grid-template-rows: minmax(2.5rem, auto) minmax(1.4rem, auto) minmax(1rem, auto) .2rem;
  min-width: 2.65rem;
  max-width: none;
  min-height: 5.8rem;
  padding: .55rem .35rem .45rem;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--app-score-paper-line) 68%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--app-score-paper-ink);
  cursor: pointer;
  transition: background-color .14s ease, opacity .14s ease, transform .14s ease;
}

.jianpu-paper .jianpu-note b {
  display: block;
  color: var(--app-score-paper-ink);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.1;
  text-align: center;
}

.jianpu-paper .jianpu-note span {
  display: block;
  min-height: 1.4rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 84%, var(--app-score-paper-line));
  font-size: .875rem;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.jianpu-paper .jianpu-note .jianpu-note-marks {
  align-self: start;
  color: color-mix(in srgb, var(--app-score-paper-ink) 60%, var(--app-score-paper-line));
  font-size: .75rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.jianpu-paper .jianpu-note i {
  display: block;
  align-self: end;
  width: 100%;
  height: .18rem;
  border-radius: .2rem;
  background: var(--app-score-paper-line);
}

.jianpu-paper .jianpu-note:hover,
.jianpu-paper .jianpu-note.is-selected {
  z-index: 1;
  background: color-mix(in srgb, var(--app-accent) 13%, var(--app-score-paper));
  box-shadow: inset 0 -.22rem 0 var(--app-accent);
}

.jianpu-paper .jianpu-note.is-playing {
  z-index: 2;
  background: color-mix(in srgb, var(--app-accent) 30%, var(--app-score-paper));
  box-shadow: inset 0 -.32rem 0 var(--app-accent), 0 0 .75rem color-mix(in srgb, var(--app-accent) 28%, transparent);
  transform: translateY(-.12rem);
}

.jianpu-paper .jianpu-note.is-playing b,
.jianpu-paper .jianpu-note.is-playing span {
  color: var(--app-accent);
}

.jianpu-paper .jianpu-note.is-played {
  opacity: .45;
}

.jianpu-paper .jianpu-note.is-upcoming {
  opacity: .86;
}

.jianpu-paper .jianpu-note.is-pending b {
  color: var(--app-warm);
}

.jianpu-paper .jianpu-note.is-instrumental span {
  color: var(--app-warm);
}

@media (max-width: 700px) {
  .jianpu-paper .jianpu-paper-head {
    grid-template-columns: 1fr;
    gap: .85rem;
  }

  .jianpu-paper .jianpu-paper-meta {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    min-width: 0;
    padding: .55rem 0 0;
    border-top: 1px solid var(--app-score-paper-line);
    border-left: 0;
    text-align: center;
  }

  .jianpu-section-divider {
    grid-template-columns: 1fr auto;
  }

  .jianpu-section-divider span {
    grid-column: 1 / -1;
  }

  .jianpu-section-divider small {
    grid-column: 2;
    grid-row: 1;
  }

  .jianpu-paper .jianpu-measure {
    grid-template-columns: 3.8rem minmax(0, 1fr);
    gap: .45rem;
  }

  .jianpu-paper .jianpu-note {
    min-width: 2.25rem;
    padding-inline: .2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jianpu-workspace *,
  .jianpu-workspace *::before,
  .jianpu-workspace *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* A4 reading surface: controls remain in the application shell while the
   score itself behaves like a printed page. Geometry stays responsive; the
   paper never becomes a second floating window. */
.jianpu-topbar {
  grid-template-columns: minmax(14rem, 1fr) auto minmax(22rem, auto);
  min-height: 4.25rem;
}

.jianpu-top-actions {
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.jianpu-top-actions .jianpu-button {
  min-height: 2.25rem;
  white-space: nowrap;
}

.jianpu-score {
  padding: 1.25rem;
  background: color-mix(in srgb, var(--app-bg) 88%, var(--app-panel));
}

.jianpu-score.jianpu-perf-contain,
.jianpu-workspace .jianpu-score {
  /* enable containment for long scores */
}

.jianpu-paper {
  width: min(100%, 58rem);
  min-height: 47rem;
  margin: 0 auto;
  padding: 2.35rem 2.75rem 2rem;
  border: 1px solid var(--app-score-paper-line);
  border-radius: .18rem;
  background: var(--app-score-paper);
  color: var(--app-score-paper-ink);
  box-shadow: 0 .8rem 2.2rem color-mix(in srgb, var(--app-shadow) 44%, transparent);
}

.jianpu-paper-empty {
  display: grid;
  align-content: start;
}

.jianpu-paper-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.3rem;
  border-bottom: 2px solid var(--app-score-paper-ink);
}

.jianpu-paper-head > div:first-child {
  display: grid;
  gap: .35rem;
}

.jianpu-paper-head span {
  color: color-mix(in srgb, var(--app-score-paper-ink) 68%, var(--app-score-paper-line));
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.jianpu-paper-head strong {
  color: var(--app-score-paper-ink);
  font-size: 1.35rem;
  line-height: 1.25;
}

.jianpu-paper-meta {
  color: var(--app-score-paper-ink);
  font-size: .875rem;
  font-weight: 800;
  white-space: nowrap;
}

.jianpu-paper-content {
  display: grid;
  gap: 0;
}

.jianpu-paper .jianpu-bar {
  gap: .65rem;
  padding: 1.1rem 0 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--app-score-paper-line);
  border-radius: 0;
  background: transparent;
}

.jianpu-paper .jianpu-bar header {
  align-items: baseline;
}

.jianpu-paper .jianpu-bar header span,
.jianpu-paper .jianpu-bar header small {
  color: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-bar header span {
  font-size: .875rem;
}

.jianpu-paper .jianpu-bar header small {
  font-size: .75rem;
  opacity: .72;
}

.jianpu-paper .jianpu-bar-notes {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  min-height: 6.25rem;
  padding: .35rem 0;
  overflow: visible;
  border-top: 1px solid color-mix(in srgb, var(--app-score-paper-line) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--app-score-paper-line) 72%, transparent);
}

.jianpu-paper .jianpu-note {
  flex: 1 1 3.85rem;
  min-width: 3.85rem;
  max-width: 7rem;
  min-height: 6.25rem;
  padding: .5rem .35rem .65rem;
  border-right: 1px solid color-mix(in srgb, var(--app-score-paper-line) 68%, transparent);
  background: transparent;
  color: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-note b {
  color: var(--app-score-paper-ink);
  font-size: 2rem;
}

.jianpu-paper .jianpu-note span {
  color: color-mix(in srgb, var(--app-score-paper-ink) 84%, var(--app-score-paper-line));
  font-size: .875rem;
}

.jianpu-paper .jianpu-note i {
  height: .18rem;
  background: var(--app-score-paper-line);
}

.jianpu-paper .jianpu-note.is-selected,
.jianpu-paper .jianpu-note:hover {
  background: color-mix(in srgb, var(--app-accent) 18%, var(--app-score-paper));
}

.jianpu-paper .jianpu-note.is-selected i {
  background: var(--app-accent);
}

.jianpu-paper .jianpu-note.is-pending b {
  color: var(--app-warm);
}

.jianpu-paper .jianpu-note.is-instrumental span,
.jianpu-paper .jianpu-note.is-locked::after {
  color: color-mix(in srgb, var(--app-score-paper-ink) 64%, var(--app-score-paper-line));
  font-size: .75rem;
}

.jianpu-paper-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 62%, var(--app-score-paper-line));
  font-size: .75rem;
}

.jianpu-paper .jianpu-empty {
  min-height: 15rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 68%, var(--app-score-paper-line));
}

.jianpu-paper .jianpu-empty strong {
  color: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-empty span {
  color: color-mix(in srgb, var(--app-score-paper-ink) 68%, var(--app-score-paper-line));
}

@media (max-width: 1080px) {
  .jianpu-topbar {
    grid-template-columns: minmax(12rem, 1fr) auto;
  }

  .jianpu-top-status {
    display: none;
  }

  .jianpu-top-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .jianpu-topbar {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: .65rem;
    padding: .75rem;
  }

  .jianpu-top-actions {
    width: 100%;
  }

  .jianpu-score {
    padding: .65rem;
  }

  .jianpu-paper {
    min-height: auto;
    padding: 1.15rem .85rem 1rem;
  }

  .jianpu-paper-head,
  .jianpu-paper-foot {
    flex-direction: column;
    gap: .5rem;
  }

  .jianpu-paper .jianpu-note {
    flex-basis: 3.4rem;
    min-width: 3.4rem;
    max-width: 5.8rem;
  }
}

/* The score is the primary workspace. The precision inspector is a compact
   tray below it and never covers the paper; paper editing remains available
   even when the tray is collapsed. */
.jianpu-layout {
  grid-template-columns: minmax(17rem, 20rem) minmax(0, 1fr);
  overflow: hidden;
}

.jianpu-main {
  display: grid;
  grid-template-rows: auto auto minmax(30rem, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.jianpu-score {
  min-height: min(58vh, 44rem);
  overflow: auto;
  overscroll-behavior: contain;
}

.jianpu-paper {
  width: min(100%, 78rem);
  min-height: auto;
}

.jianpu-inspector {
  display: block;
  min-height: 3.25rem;
  max-height: 14rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.jianpu-inspector-shell {
  display: grid;
  gap: .55rem;
}

.jianpu-inspector-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2rem;
}

.jianpu-inspector-shell > header strong {
  color: var(--app-text);
  font-size: .875rem;
}

.jianpu-inspector-shell > p {
  margin: 0;
  color: var(--app-muted);
  font-size: .75rem;
}

.jianpu-inspector-body {
  display: grid;
  gap: .65rem;
  max-height: 10rem;
  overflow: auto;
  padding-top: .55rem;
  border-top: 1px solid var(--app-line);
}

.jianpu-inspector-body .jianpu-inspector-header,
.jianpu-inspector-body .jianpu-note-preview {
  display: none;
}

.jianpu-inspector-body .jianpu-field-grid {
  gap: .55rem;
}

@media (max-width: 980px) {
  .jianpu-layout {
    display: block;
    overflow: auto;
  }

  .jianpu-sidebar,
  .jianpu-main {
    overflow: visible;
  }

  .jianpu-main {
    min-height: 0;
    margin-top: .8rem;
    overflow: visible;
  }

  .jianpu-score {
    min-height: 32rem;
  }
}

@media (max-width: 700px) {
  .jianpu-main {
    display: block;
  }

  .jianpu-score {
    min-height: 28rem;
  }

  .jianpu-inspector {
    margin-top: .8rem;
    max-height: 18rem;
  }
}

/* Traditional numbered-notation layer: the paper keeps the melody above the
   lyric row and draws notation marks from note semantics rather than labels. */
.jianpu-paper .jianpu-section-divider {
  position: relative;
  grid-template-columns: auto auto 1fr auto;
  align-items: baseline;
  column-gap: .75rem;
  min-height: 2.3rem;
  margin-top: 1.1rem;
  padding: .7rem 0 .45rem;
  border-top: 1px solid var(--app-score-paper-line);
  border-bottom: 0;
}

.jianpu-paper .jianpu-section-divider strong {
  font-size: 1rem;
  letter-spacing: .02em;
}

.jianpu-paper .jianpu-section-divider span,
.jianpu-paper .jianpu-section-divider small,
.jianpu-paper .jianpu-section-divider em {
  color: color-mix(in srgb, var(--app-score-paper-ink) 68%, var(--app-score-paper-line));
  font-size: .75rem;
  font-style: normal;
}

.jianpu-paper .jianpu-section-divider small {
  justify-self: end;
}

.jianpu-paper .jianpu-section-markers {
  color: var(--app-score-paper-ink);
  font-weight: 800;
  letter-spacing: .08em;
}

.jianpu-paper .jianpu-measure {
  position: relative;
}

.jianpu-paper .jianpu-measure.has-section-barline .jianpu-bar-notes {
  border-bottom: .22rem double var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-bar-notes {
  align-items: stretch;
  gap: 0;
  border-top: 0;
}

.jianpu-paper .jianpu-note {
  display: grid;
  grid-template-rows: 1.1rem 2.25rem auto auto;
  align-content: start;
  justify-items: center;
  overflow: visible;
  min-height: 6.75rem;
  padding: .5rem .35rem .7rem;
  border-right: 0;
  border-left: 1px solid color-mix(in srgb, var(--app-score-paper-line) 48%, transparent);
  background: transparent;
}

.jianpu-paper .jianpu-note > i {
  display: none;
}

.jianpu-paper .jianpu-note:first-child {
  border-left: 0;
}

.jianpu-paper .jianpu-note-octave {
  display: block;
  min-height: 1rem;
  color: var(--app-score-paper-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
}

.jianpu-paper .jianpu-note-octave:not(.has-octave) {
  visibility: hidden;
}

.jianpu-paper .jianpu-note-octave.has-octave {
  position: absolute;
  left: 50%;
  z-index: 2;
  min-height: 0;
  transform: translateX(-50%);
}

.jianpu-paper .jianpu-note-octave-up {
  top: .08rem;
}

.jianpu-paper .jianpu-note-octave-down {
  top: 2.72rem;
  font-size: .9rem;
}

.jianpu-paper .jianpu-note b {
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 1.6rem;
  color: var(--app-score-paper-ink);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.jianpu-paper .jianpu-note > span[contenteditable="true"] {
  align-self: start;
  max-width: 100%;
  min-height: 1.35rem;
  color: var(--app-score-paper-ink);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

.jianpu-paper .jianpu-note > span[contenteditable="true"]:empty::after {
  content: " ";
}

.jianpu-paper .jianpu-note .jianpu-extra-lyric {
  display: block;
  min-height: 1.2rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 72%, var(--app-score-paper-line));
  font-size: .85rem;
  line-height: 1.25;
  white-space: nowrap;
}

.jianpu-paper .jianpu-note .jianpu-note-marks {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: transparent;
  font-size: .75rem;
  white-space: nowrap;
  clip-path: inset(50%);
}

.jianpu-paper .jianpu-note .jianpu-rhythm-strokes {
  position: absolute;
  top: 3.15rem;
  left: 24%;
  right: 24%;
  z-index: 1;
  display: grid;
  gap: .12rem;
  pointer-events: none;
}

.jianpu-paper .jianpu-rhythm-strokes i {
  display: block;
  width: 100%;
  height: .12rem;
  border: 0;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-dotted-mark,
.jianpu-paper .jianpu-triplet-mark,
.jianpu-paper .jianpu-expression-mark {
  position: absolute;
  z-index: 2;
  color: var(--app-score-paper-ink);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.jianpu-paper .jianpu-dotted-mark {
  top: 2.45rem;
  right: 22%;
}

.jianpu-paper .jianpu-triplet-mark {
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
}

.jianpu-paper .jianpu-expression-mark {
  top: 3.95rem;
  right: 20%;
}

.jianpu-paper .jianpu-note.is-slur-start::before,
.jianpu-paper .jianpu-note.is-tie-start::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  width: var(--jianpu-slur-width, 150%);
  height: .7rem;
  border-top: .12rem solid var(--app-score-paper-ink);
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.jianpu-paper .jianpu-note.is-slur-start::before {
  top: .45rem;
}

.jianpu-paper .jianpu-note.is-tie-start::after {
  top: 2.82rem;
  width: 160%;
  border-top-color: color-mix(in srgb, var(--app-score-paper-ink) 76%, var(--app-score-paper-line));
}

.jianpu-paper .jianpu-note.is-slur-end::before {
  content: "";
  position: absolute;
  top: .45rem;
  left: 0;
  width: .55rem;
  height: .12rem;
  background: var(--app-score-paper-ink);
  pointer-events: none;
}

.jianpu-paper .jianpu-note.is-rest b {
  font-family: inherit;
}

.jianpu-paper .jianpu-note.is-playing b,
.jianpu-paper .jianpu-note.is-playing > span[contenteditable="true"],
.jianpu-paper .jianpu-note.is-playing .jianpu-note-octave,
.jianpu-paper .jianpu-note.is-playing .jianpu-rhythm-strokes i {
  color: var(--app-accent);
  background-color: transparent;
}

.jianpu-paper .jianpu-note.is-played b,
.jianpu-paper .jianpu-note.is-played > span[contenteditable="true"],
.jianpu-paper .jianpu-note.is-played .jianpu-note-octave {
  opacity: .46;
}

.jianpu-paper .jianpu-note.is-upcoming b,
.jianpu-paper .jianpu-note.is-upcoming > span[contenteditable="true"] {
  opacity: .9;
}

@media (max-width: 700px) {
  .jianpu-paper .jianpu-section-divider {
    grid-template-columns: 1fr auto;
  }

  .jianpu-paper .jianpu-section-divider span {
    display: none;
  }

  .jianpu-paper .jianpu-section-divider small {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .jianpu-paper .jianpu-note {
    min-width: 3.7rem;
  }
}

/* Four-measure rows mirror a printed jianpu page and keep barlines readable. */
.jianpu-paper .jianpu-measure-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--app-score-paper-line);
}

.jianpu-paper .jianpu-measure-row .jianpu-measure {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  padding: .65rem .7rem .85rem;
  border-right: .12rem solid var(--app-score-paper-ink);
  border-bottom: 0;
  border-radius: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure:last-child {
  border-right: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  border-right: .24rem double var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-measure-row .jianpu-measure-head {
  min-height: 1.35rem;
  padding-bottom: .25rem;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure-head span {
  font-size: .75rem;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure-head small {
  font-size: .75rem;
}

.jianpu-paper .jianpu-measure-row .jianpu-bar-notes {
  min-height: 6.35rem;
  padding: .2rem 0 .35rem;
  border-bottom: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-note {
  flex: 1 1 2.25rem;
  min-width: 2.25rem;
  max-width: 5.75rem;
  min-height: 6.15rem;
  padding-inline: .12rem;
}

.jianpu-paper .jianpu-measure-row .jianpu-note b {
  font-size: 1.7rem;
}

@media (max-width: 980px) {
  .jianpu-paper .jianpu-measure-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n) {
    border-right: 0;
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1) {
    border-right: .12rem solid var(--app-score-paper-ink);
  }
}

@media (max-width: 700px) {
  .jianpu-paper .jianpu-measure-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure,
  .jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
  .jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
    border-right: 0;
    border-bottom: 1px solid var(--app-score-paper-line);
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure:last-child {
    border-bottom: 0;
  }
}

/* Lock state is an editing safeguard, not printed Jianpu notation. */
.jianpu-paper .jianpu-note.jianpu-note--print.is-locked::after {
  content: none;
  display: none;
}

/* Print-style multi-line note columns: ornament / octave / pitch / rhythm / dual lyrics */
.jianpu-paper .jianpu-note.jianpu-note--print {
  display: grid;
  grid-template-rows: 1.05rem 0.85rem auto auto 0.85rem 1.35rem 1.35rem;
  align-content: start;
  justify-items: center;
  row-gap: .08rem;
  min-height: 8.2rem;
  padding: .35rem .2rem .45rem;
  overflow: visible;
}

.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  color: var(--app-score-paper-ink);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}

.jianpu-paper .jianpu-layer-ornament {
  gap: .2rem;
  min-height: 1.05rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 78%, var(--app-score-paper-line));
  font-style: italic;
  font-weight: 800;
}

.jianpu-paper .jianpu-layer-octave-up,
.jianpu-paper .jianpu-layer-octave-down {
  gap: .12rem;
  min-height: .75rem;
}

.jianpu-paper .jianpu-layer-octave-up i,
.jianpu-paper .jianpu-layer-octave-down i {
  display: inline-block;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-pitch {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .08rem;
  min-height: 2.1rem;
}

.jianpu-paper .jianpu-layer-pitch b {
  display: inline-block;
  min-width: 1.1rem;
  font-size: clamp(1.55rem, 2.4vw, 1.95rem);
  font-weight: 800;
  line-height: 1;
}

.jianpu-paper .jianpu-accidental {
  margin-right: .05rem;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.jianpu-paper .jianpu-dotted-mark {
  display: inline-block;
  width: .28rem;
  height: .28rem;
  margin-left: .12rem;
  border-radius: 50%;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-dashes {
  display: inline-flex;
  gap: .12rem;
  margin-left: .15rem;
  color: var(--app-score-paper-ink);
  font-size: 1rem;
  font-weight: 700;
}

.jianpu-paper .jianpu-layer-rhythm {
  min-height: .7rem;
}

.jianpu-paper .jianpu-layer-underlines {
  display: grid;
  gap: .12rem;
  width: 70%;
}

.jianpu-paper .jianpu-layer-underlines i {
  display: block;
  width: 100%;
  height: .12rem;
  border-radius: 0;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-lyric {
  min-height: 1.3rem;
  padding: .05rem .1rem;
  border-radius: .2rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 88%, var(--app-score-paper-line));
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.jianpu-paper .jianpu-layer-lyric-2 {
  color: color-mix(in srgb, var(--app-score-paper-ink) 72%, var(--app-score-paper-line));
  border-top: 1px dashed color-mix(in srgb, var(--app-score-paper-line) 70%, transparent);
}

.jianpu-paper .jianpu-layer-lyric:empty::before {
  color: color-mix(in srgb, var(--app-score-paper-ink) 35%, var(--app-score-paper-line));
  content: '·';
}

.jianpu-paper .jianpu-measure-rail {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.2rem;
  margin-bottom: .2rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 62%, var(--app-score-paper-line));
  font-size: 12px;
  font-weight: 800;
}

.jianpu-paper .jianpu-rail-mark {
  color: var(--app-score-paper-ink);
  font-size: 14px;
}

.jianpu-paper .jianpu-measure.is-repeat-start .jianpu-bar-notes {
  border-left: .28rem double var(--app-score-paper-ink);
  box-shadow: inset .45rem 0 0 -.28rem var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-measure.is-repeat-end .jianpu-bar-notes {
  border-right: .28rem double var(--app-score-paper-ink);
  box-shadow: inset -.45rem 0 0 -.28rem var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-tie-curve {
  position: absolute;
  right: -.35rem;
  bottom: 3.1rem;
  width: .9rem;
  height: .55rem;
  border: .12rem solid var(--app-score-paper-ink);
  border-color: transparent transparent var(--app-score-paper-ink);
  border-radius: 0 0 70% 70%;
  pointer-events: none;
}

.jianpu-paper .jianpu-note.is-slur-start::before {
  position: absolute;
  top: .15rem;
  left: 35%;
  z-index: 2;
  width: var(--jianpu-slur-width, 160%);
  height: .7rem;
  border: .12rem solid var(--app-score-paper-ink);
  border-color: var(--app-score-paper-ink) transparent transparent;
  border-radius: 70% 70% 0 0;
  content: '';
  pointer-events: none;
}

.jianpu-workspace.jianpu-input-locked .jianpu-note,
.jianpu-workspace.jianpu-input-locked [data-jianpu-tool] {
  pointer-events: none;
  opacity: .72;
}


/* Performance containment for large printable scores */
.jianpu-perf-contain .jianpu-paper .jianpu-measure-row {
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

.jianpu-paper .jianpu-note {
  contain: layout paint;
}

.jianpu-workspace.jianpu-is-playing .jianpu-note {
  transition: none;
}

.jianpu-workspace.jianpu-is-playing .jianpu-note.is-playing {
  transform: none;
}

/* Standard numbered-notation paper: signature and title hierarchy, measure
   bars, note-value strokes, tuplets, octave dots and printable lyric rows. */
.jianpu-paper .jianpu-paper-head {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(14rem, 2fr) minmax(8rem, 1fr);
  align-items: start;
  min-height: 5.1rem;
  padding: .25rem 0 1.15rem;
  border-bottom: .14rem solid var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-paper-title-block {
  grid-column: 2;
  grid-row: 1;
  justify-items: center;
  align-content: start;
  text-align: center;
}

.jianpu-paper .jianpu-paper-title-block > span {
  font-size: .75rem;
  letter-spacing: .12em;
}

.jianpu-paper .jianpu-paper-title-block > strong {
  font-size: 1.45rem;
  line-height: 1.2;
}

.jianpu-paper .jianpu-paper-title-block > small {
  max-width: 25rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 68%, var(--app-score-paper-line));
  font-size: .75rem;
  text-align: center;
}

.jianpu-paper .jianpu-paper-meta {
  display: contents;
  color: var(--app-score-paper-ink);
  white-space: normal;
}

.jianpu-paper .jianpu-paper-signature {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .7rem;
  justify-self: start;
  min-height: 4rem;
}

.jianpu-paper .jianpu-paper-signature > strong {
  font-size: 1rem;
  font-weight: 850;
  white-space: nowrap;
}

.jianpu-paper .jianpu-meter-signature {
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-width: 1.8rem;
  color: var(--app-score-paper-ink);
  font-size: 1.35rem;
  font-weight: 850;
  line-height: .82;
  text-align: center;
}

.jianpu-paper .jianpu-meter-signature i {
  display: block;
  min-width: 1.8rem;
  font-style: normal;
}

.jianpu-paper .jianpu-paper-tempo {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: .28rem;
  min-height: 4rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 74%, var(--app-score-paper-line));
  font-size: .75rem;
  font-weight: 750;
  text-align: end;
}

.jianpu-paper .jianpu-measure {
  padding: 1rem 0 1.15rem;
  border-bottom: 0;
}

.jianpu-paper .jianpu-bar-notes {
  position: relative;
  min-height: 8.7rem;
  padding: .45rem 0 .55rem;
  border-top: .08rem solid color-mix(in srgb, var(--app-score-paper-line) 75%, var(--app-score-paper-ink));
  border-bottom: .08rem solid color-mix(in srgb, var(--app-score-paper-line) 75%, var(--app-score-paper-ink));
  border-right: .14rem solid var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-measure.has-section-barline .jianpu-bar-notes {
  border-bottom: .24rem double var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-note {
  flex: calc(var(--jianpu-length, 1) * 1.2) 1 0;
  min-width: 3.5rem;
  max-width: none;
  border-left: 0;
  border-right: 0;
}

.jianpu-paper .jianpu-note:hover,
.jianpu-paper .jianpu-note.is-selected {
  background: color-mix(in srgb, var(--app-accent) 14%, var(--app-score-paper));
}

.jianpu-paper .jianpu-layer-ornament {
  position: relative;
  min-height: 1.2rem;
  color: var(--app-score-paper-ink);
  font-size: .75rem;
  letter-spacing: .04em;
}

.jianpu-paper .jianpu-notation-marks {
  display: inline-block;
  color: var(--app-score-paper-ink);
  font-size: .75rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.jianpu-paper .jianpu-notation-a11y {
  position: absolute;
  left: -10000px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.jianpu-paper .jianpu-tuplet-mark {
  position: absolute;
  top: -.18rem;
  right: 0;
  left: 0;
  min-height: .78rem;
  border-top: .1rem solid var(--app-score-paper-ink);
  color: var(--app-score-paper-ink);
  font-size: .75rem;
  font-style: normal;
  font-weight: 850;
  line-height: .72rem;
  text-align: center;
}

.jianpu-paper .jianpu-tuplet-mark.is-start {
  border-left: .1rem solid var(--app-score-paper-ink);
  border-top-left-radius: .25rem;
}

.jianpu-paper .jianpu-tuplet-mark.is-end {
  border-right: .1rem solid var(--app-score-paper-ink);
  border-top-right-radius: .25rem;
}

.jianpu-paper .jianpu-layer-pitch {
  min-height: 2.35rem;
}

.jianpu-paper .jianpu-layer-pitch b {
  font-size: clamp(1.7rem, 2.5vw, 2.15rem);
}

.jianpu-paper .jianpu-accidental {
  font-size: .9rem;
}

.jianpu-paper .jianpu-layer-underlines {
  width: 78%;
  gap: .16rem;
}

.jianpu-paper .jianpu-layer-underlines i {
  height: .13rem;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-lyric {
  min-height: 1.4rem;
  color: var(--app-score-paper-ink);
  font-size: .9rem;
  line-height: 1.25;
}

.jianpu-paper .jianpu-layer-lyric-2 {
  color: color-mix(in srgb, var(--app-score-paper-ink) 72%, var(--app-score-paper-line));
}

.jianpu-paper .jianpu-tie-curve {
  right: -.45rem;
  bottom: 3.2rem;
  width: 1rem;
  height: .58rem;
  border-width: .12rem;
}

.jianpu-paper .jianpu-note.is-auto-generated {
  outline: 1px dotted color-mix(in srgb, var(--app-accent) 65%, var(--app-score-paper-line));
  outline-offset: -.2rem;
}

.jianpu-palette-control {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 2.25rem;
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-palette-control .jianpu-input,
.jianpu-palette-control .jianpu-select {
  min-height: 2.25rem;
  border: 1px solid var(--app-line);
  border-radius: .45rem;
  background: var(--app-bg);
  color: var(--app-text);
  font-size: .75rem;
}

.jianpu-palette-control .jianpu-input {
  width: min(18rem, 32vw);
  min-width: 10rem;
  padding: .35rem .5rem;
}

.jianpu-palette-control .jianpu-select {
  min-width: 6.1rem;
  padding: .35rem .42rem;
}

@media (max-width: 700px) {
  .jianpu-paper .jianpu-paper-head {
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
  }

  .jianpu-paper .jianpu-paper-title-block {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .jianpu-paper .jianpu-paper-signature {
    grid-column: 1;
    grid-row: 2;
    min-height: 3rem;
  }

  .jianpu-paper .jianpu-paper-tempo {
    grid-column: 2;
    grid-row: 2;
    min-height: 3rem;
  }

  .jianpu-paper .jianpu-bar-notes {
    min-height: 8rem;
  }
}

/* Reference-style engraved layout: notes sit on a continuous music line,
   while measure bars carry the structure. The editor affordance stays on the
   selected note instead of turning every note into a card. */
.jianpu-paper {
  width: min(100%, 86rem);
  padding: 2.5rem 3.15rem 2.2rem;
  border-radius: .08rem;
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

.jianpu-paper .jianpu-paper-head {
  grid-template-columns: minmax(9rem, 1.15fr) minmax(18rem, 2fr) minmax(9rem, 1.15fr);
  min-height: 7.4rem;
  padding: 0 0 1.35rem;
  border-bottom: .14rem solid var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-paper-title-block > span {
  color: color-mix(in srgb, var(--app-score-paper-ink) 55%, var(--app-score-paper-line));
  font-size: .7rem;
  letter-spacing: .08em;
}

.jianpu-paper .jianpu-paper-title-block > strong {
  margin-top: .35rem;
  font-size: clamp(1.7rem, 2.8vw, 2.45rem);
  font-weight: 850;
  letter-spacing: .08em;
}

.jianpu-paper .jianpu-paper-title-block > small {
  margin-top: .3rem;
  font-size: .88rem;
}

.jianpu-paper .jianpu-paper-signature {
  align-items: flex-start;
  min-height: 5.7rem;
  padding-top: .5rem;
}

.jianpu-paper .jianpu-paper-signature > strong {
  font-size: 1.15rem;
}

.jianpu-paper .jianpu-meter-signature {
  min-width: 2rem;
  font-size: 1.5rem;
  line-height: .88;
}

.jianpu-paper .jianpu-meter-signature i {
  min-width: 2rem;
}

.jianpu-paper .jianpu-paper-tempo {
  min-height: 5.7rem;
  padding-top: .5rem;
  font-size: .82rem;
}

.jianpu-paper .jianpu-paper-content {
  display: block;
}

.jianpu-paper .jianpu-section-divider {
  min-height: 2.35rem;
  margin-top: 1.35rem;
  padding: .45rem 0 .35rem;
  border-top: 0;
  border-bottom: .06rem solid var(--app-score-paper-line);
}

.jianpu-paper .jianpu-section-divider strong {
  color: var(--app-score-paper-ink);
  font-size: 1rem;
}

.jianpu-paper .jianpu-section-divider span,
.jianpu-paper .jianpu-section-divider small,
.jianpu-paper .jianpu-section-divider em {
  color: color-mix(in srgb, var(--app-score-paper-ink) 62%, var(--app-score-paper-line));
}

.jianpu-paper .jianpu-measure-row {
  display: flex;
  align-items: stretch;
  min-height: 11.8rem;
  border-bottom: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure,
.jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border-right: .1rem solid var(--app-score-paper-ink);
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure:last-child {
  border-right: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  border-right: .22rem double var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-measure-rail {
  position: absolute;
  top: .25rem;
  left: .35rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 1rem;
  margin: 0;
  color: color-mix(in srgb, var(--app-score-paper-ink) 55%, var(--app-score-paper-line));
  font-size: .72rem;
}

.jianpu-paper .jianpu-bar-notes {
  display: flex;
  align-items: flex-start;
  min-height: 11.8rem;
  padding: 1.65rem .22rem .85rem;
  overflow: visible;
  border: 0;
}

.jianpu-paper .jianpu-measure.has-section-barline .jianpu-bar-notes {
  border-bottom: 0;
}

.jianpu-paper .jianpu-note.jianpu-note--print {
  flex: 1 1 0;
  flex-grow: var(--jianpu-length, 1);
  min-width: 2.55rem;
  min-height: 9.1rem;
  padding: .05rem .1rem .25rem;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
}

.jianpu-paper .jianpu-note.jianpu-note--print:hover {
  background: color-mix(in srgb, var(--app-accent) 8%, transparent);
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-selected {
  background: color-mix(in srgb, var(--app-accent) 10%, transparent);
  box-shadow: inset 0 -.18rem 0 var(--app-accent);
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-auto-generated {
  outline: 0;
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-pending {
  box-shadow: inset 0 -.14rem 0 var(--app-warm);
}

.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

.jianpu-paper .jianpu-layer-pitch {
  min-height: 2.45rem;
}

.jianpu-paper .jianpu-layer-pitch b {
  font-size: clamp(1.75rem, 2.5vw, 2.2rem);
  font-weight: 850;
}

.jianpu-paper .jianpu-layer-underlines {
  width: 92%;
  gap: .1rem;
}

.jianpu-paper .jianpu-layer-underlines i {
  height: .11rem;
}

.jianpu-paper .jianpu-layer-lyric {
  min-height: 1.35rem;
  padding: 0 .05rem;
  border-radius: 0;
  font-size: .92rem;
  font-weight: 700;
}

.jianpu-paper .jianpu-layer-lyric-2 {
  border-top: 0;
}

.jianpu-paper .jianpu-layer-lyric:empty::before {
  content: '';
}

.jianpu-paper .jianpu-tuplet-mark {
  top: -.1rem;
  min-height: .72rem;
  border-top-width: .08rem;
  font-size: .78rem;
}

.jianpu-paper .jianpu-tie-curve {
  right: -.25rem;
  bottom: 3.15rem;
  width: .85rem;
  height: .5rem;
  border-width: .1rem;
}

.jianpu-paper .jianpu-paper-foot {
  margin-top: 1.1rem;
  padding-top: .7rem;
  border-top: .06rem solid var(--app-score-paper-line);
  font-size: .72rem;
}

@media (max-width: 980px) {
  .jianpu-paper {
    padding-inline: 1.8rem;
  }

  .jianpu-paper .jianpu-measure-row {
    min-height: 10.8rem;
  }

  .jianpu-paper .jianpu-bar-notes {
    min-height: 10.8rem;
  }
}

@media (max-width: 700px) {
  .jianpu-paper {
    padding: 1.35rem .85rem 1.1rem;
  }

  .jianpu-paper .jianpu-paper-head {
    min-height: 6.4rem;
  }

  .jianpu-paper .jianpu-paper-title-block > strong {
    font-size: 1.55rem;
  }

  .jianpu-paper .jianpu-measure-row {
    display: block;
    min-height: 0;
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure,
  .jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
  .jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
    min-height: 10.6rem;
    border-right: 0;
    border-bottom: .1rem solid var(--app-score-paper-ink);
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure:last-child {
    border-bottom: 0;
  }

  .jianpu-paper .jianpu-bar-notes {
    min-height: 10.6rem;
  }
}

/* Semantic standard symbols: paper marks are vector shapes, not font-specific
   punctuation.  The score remains recolorable through the global theme. */
.jianpu-standard-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.15rem;
  color: currentColor;
  line-height: 1;
  vertical-align: middle;
}

.jianpu-standard-symbol-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.jianpu-symbol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: inherit;
}

.jianpu-symbol-icon .jianpu-standard-symbol-svg {
  width: 100%;
  height: 100%;
}

.jianpu-paper .jianpu-layer-ornament {
  gap: .16rem;
}

.jianpu-paper .jianpu-expression-mark {
  width: 2.15rem;
  height: 1rem;
  color: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-notation-marks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  color: var(--app-score-paper-ink);
  font-size: 12px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.jianpu-paper .jianpu-notation-marks .jianpu-standard-symbol {
  width: 1.95rem;
  height: 1rem;
}

.jianpu-paper .jianpu-layer-pitch .jianpu-accidental {
  display: inline-flex;
  width: .8rem;
  height: 1.35rem;
  margin-right: .06rem;
  color: var(--app-score-paper-ink);
  vertical-align: middle;
}

.jianpu-paper .jianpu-layer-dashes {
  display: inline-flex;
  align-items: center;
  gap: .14rem;
  margin-left: .16rem;
}

.jianpu-paper .jianpu-layer-dashes i {
  display: block;
  width: .65rem;
  height: .1rem;
  border-radius: 0;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-section-markers {
  display: inline-flex;
  align-items: center;
  gap: .14rem;
  color: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-section-symbol {
  width: 2.25rem;
  height: 1.1rem;
}

.jianpu-paper .jianpu-rail-mark {
  display: inline-flex;
  width: 1.35rem;
  height: 1.2rem;
  color: var(--app-score-paper-ink);
  vertical-align: middle;
}

.jianpu-paper .jianpu-layer-octave-up,
.jianpu-paper .jianpu-layer-octave-down {
  position: relative;
  z-index: 4;
}

.jianpu-paper .jianpu-layer-octave-up i,
.jianpu-paper .jianpu-layer-octave-down i {
  width: .34rem;
  height: .34rem;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-multi-selected {
  box-shadow: inset 0 .14rem 0 color-mix(in srgb, var(--app-accent) 72%, var(--app-score-paper-line)), inset 0 -.18rem 0 var(--app-accent);
}

.jianpu-editor-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.jianpu-editor-quick-actions > span {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.jianpu-floating-palette,
.jianpu-context-menu {
  position: fixed;
  z-index: 1200;
  left: var(--jianpu-floating-left, 1rem);
  top: var(--jianpu-floating-top, 5.75rem);
  border: 1px solid var(--app-line);
  border-radius: .75rem;
  background: var(--app-panel);
  color: var(--app-text);
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--app-text) 22%, transparent);
}

.jianpu-floating-palette {
  width: min(42rem, calc(100vw - 1rem));
  max-height: min(82vh, 48rem);
  overflow: hidden;
}

.jianpu-context-menu {
  width: min(20rem, calc(100vw - 1rem));
  padding: .7rem;
}

.jianpu-floating-palette-head,
.jianpu-context-menu-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--app-line);
  cursor: grab;
  user-select: none;
}

.jianpu-context-menu-head {
  min-height: 2.6rem;
  padding: 0 0 .55rem;
}

.jianpu-floating-palette-head:active,
.jianpu-context-menu-head:active,
.jianpu-floating-palette.is-dragging .jianpu-floating-palette-head,
.jianpu-context-menu.is-dragging .jianpu-context-menu-head {
  cursor: grabbing;
}

.jianpu-floating-grip {
  color: var(--app-muted);
  font-size: 1.2rem;
  line-height: 1;
}

.jianpu-floating-palette-head strong,
.jianpu-context-menu-head strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.jianpu-floating-palette-head small {
  display: block;
  margin-top: .15rem;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}

.jianpu-floating-close {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--app-line);
  border-radius: .4rem;
  background: var(--app-bg);
  color: var(--app-text);
  font-size: 1.2rem;
  line-height: 1;
}

.jianpu-floating-close:hover {
  border-color: var(--app-accent);
  color: var(--app-accent);
}

.jianpu-floating-palette-body {
  display: grid;
  gap: .7rem;
  max-height: calc(min(82vh, 48rem) - 4rem);
  padding: .7rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.jianpu-floating-input-row,
.jianpu-floating-selection {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
}

.jianpu-floating-input-row label {
  display: inline-flex;
  align-items: center;
  flex: 1 1 17rem;
  gap: .35rem;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 750;
}

.jianpu-floating-input-row input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 2.2rem;
}

.jianpu-floating-selection {
  padding: .5rem;
  border: 1px solid var(--app-line);
  border-radius: .5rem;
  background: color-mix(in srgb, var(--app-accent-soft) 48%, var(--app-panel));
}

.jianpu-floating-selection strong {
  margin-right: auto;
  color: var(--app-text);
  font-size: 12px;
}

.jianpu-floating-categories {
  display: grid;
  gap: .75rem;
}

.jianpu-floating-category {
  display: grid;
  gap: .4rem;
}

.jianpu-floating-category h3 {
  margin: 0;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 850;
}

.jianpu-floating-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: .35rem;
}

.jianpu-floating-tools .jianpu-glyph {
  min-width: 0;
  min-height: 3.2rem;
  padding: .25rem .2rem;
  font-size: 12px;
}

.jianpu-floating-tools .jianpu-glyph-caption {
  font-size: 12px;
}

.jianpu-context-menu > p {
  margin: .55rem 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.4;
}

.jianpu-context-menu > .jianpu-context-menu-hint {
  display: block;
  margin: -.2rem 0 .55rem;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.35;
}

.jianpu-context-actions {
  display: grid;
  gap: .4rem;
}

.jianpu-context-actions .jianpu-button,
.jianpu-floating-selection .jianpu-button {
  min-height: 2.2rem;
  font-size: 12px;
}

.jianpu-floating-palette [data-jianpu-tool]:disabled,
.jianpu-context-menu [data-jianpu-action]:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.jianpu-multi-inspector .jianpu-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}

@media (max-width: 980px) {
  .jianpu-editor-quick-actions {
    grid-column: 1 / -1;
  }

  .jianpu-floating-palette {
    width: min(34rem, calc(100vw - 1rem));
  }
}

@media (max-width: 700px) {
  .jianpu-floating-palette {
    width: calc(100vw - 1rem);
    max-height: 86vh;
  }

  .jianpu-floating-palette-body {
    max-height: calc(86vh - 4rem);
  }

  .jianpu-floating-selection strong {
    flex-basis: 100%;
  }
}

/* Three-pane notation studio: navigation stays on the left, the paper owns
   the center, and all high-frequency notation tools live in a resizable dock. */
.jianpu-layout {
  grid-template-columns: var(--jianpu-sidebar-size, 20rem) .62rem minmax(0, 1fr) .62rem var(--jianpu-tool-size, 22.5rem);
  column-gap: 0;
  align-items: stretch;
  overflow: hidden;
}

.jianpu-sidebar,
.jianpu-main,
.jianpu-tool-dock {
  min-width: 0;
  min-height: 0;
}

.jianpu-sidebar,
.jianpu-main {
  overflow: hidden;
}

.jianpu-sidebar {
  overflow: auto;
  padding-right: .15rem;
  overscroll-behavior: contain;
}

.jianpu-layout-splitter {
  display: grid;
  place-items: center;
  min-width: .62rem;
  border-inline: 1px solid color-mix(in srgb, var(--app-line) 78%, transparent);
  background: color-mix(in srgb, var(--app-bg) 78%, var(--app-panel));
  color: var(--app-muted);
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.jianpu-layout-splitter::before {
  content: "⋮";
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1;
}

.jianpu-layout-splitter:hover,
.jianpu-layout-splitter:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-line));
  background: var(--app-accent-soft);
  color: var(--app-accent);
  outline: none;
}

.jianpu-layout[data-tool-dock-collapsed="true"] {
  grid-template-columns: var(--jianpu-sidebar-size, 20rem) .62rem minmax(0, 1fr) 0 0;
}

.jianpu-layout[data-tool-dock-collapsed="true"] [data-jianpu-splitter="dock"],
.jianpu-layout[data-tool-dock-collapsed="true"] [data-jianpu-tool-dock] {
  visibility: hidden;
  pointer-events: none;
}

.jianpu-tool-dock {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--app-line);
  border-radius: .8rem;
  background: var(--app-panel);
}

.jianpu-tool-dock-empty {
  display: none;
  align-content: center;
  justify-items: start;
  gap: .5rem;
  min-height: 0;
  padding: 1rem;
  color: var(--app-muted);
}

.jianpu-tool-dock-empty strong {
  color: var(--app-text);
  font-size: .95rem;
}

.jianpu-tool-dock-empty p,
.jianpu-tool-dock-empty small {
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
}

[data-jianpu-score-ready="false"] .jianpu-tool-dock {
  grid-template-rows: auto minmax(0, 1fr);
}

[data-jianpu-score-ready="false"] .jianpu-tool-dock-empty {
  display: grid;
}

[data-jianpu-score-ready="false"] .jianpu-tool-dock .jianpu-dock-controls,
[data-jianpu-score-ready="false"] .jianpu-tool-dock .jianpu-toolbar {
  display: none;
}

.jianpu-empty-steps {
  display: grid;
  gap: .35rem;
  max-width: 34rem;
  margin: .25rem 0 .45rem;
  padding-left: 1.4rem;
  color: var(--app-text);
  font-size: .78rem;
  line-height: 1.5;
  text-align: left;
}

.jianpu-empty > .jianpu-button {
  min-height: 2.5rem;
  padding-inline: 1rem;
}

.jianpu-empty > small {
  font-size: .75rem;
}

.jianpu-tool-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  min-width: 0;
  padding: .65rem .7rem;
  border-bottom: 1px solid var(--app-line);
  background: color-mix(in srgb, var(--app-panel) 88%, var(--app-bg));
}

.jianpu-tool-dock-head > div:first-child {
  display: grid;
  min-width: 0;
  gap: .1rem;
}

.jianpu-tool-dock-head span {
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-tool-dock-head strong {
  overflow: hidden;
  color: var(--app-text);
  font-size: .9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jianpu-tool-dock-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem;
}

.jianpu-tool-dock-actions .jianpu-button {
  min-height: 2rem;
  padding: .3rem .48rem;
  font-size: .75rem;
  white-space: nowrap;
}

.jianpu-tool-dock .jianpu-toolbar {
  min-height: 0;
  padding: .65rem;
  border: 0;
  border-radius: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.jianpu-tool-dock .jianpu-palette-tabs {
  position: sticky;
  top: -.65rem;
  z-index: 2;
  margin: -.65rem -.65rem .35rem;
  padding: .65rem;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-panel);
}

.jianpu-tool-dock .jianpu-palette-row {
  gap: .3rem;
}

.jianpu-tool-dock .jianpu-glyph {
  min-width: 3rem;
  min-height: 3.1rem;
}

.jianpu-tool-dock .jianpu-palette-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: .45rem;
  padding-top: .55rem;
  border-top: 1px solid var(--app-line);
}

.jianpu-tool-dock .jianpu-palette-mode > .jianpu-palette-label,
.jianpu-tool-dock .jianpu-palette-mode > .jianpu-auto-toggle,
.jianpu-tool-dock .jianpu-palette-mode > [data-jianpu-palette-hint] {
  grid-column: 1 / -1;
}

.jianpu-tool-dock .jianpu-palette-control {
  display: grid;
  min-width: 0;
  gap: .22rem;
}

.jianpu-tool-dock .jianpu-palette-control > span {
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-tool-dock .jianpu-palette-control .jianpu-select,
.jianpu-tool-dock .jianpu-palette-control .jianpu-input {
  min-width: 0;
  width: 100%;
}

.jianpu-tool-dock .jianpu-palette-control--input {
  grid-column: 1 / -1;
}

.jianpu-tool-dock .jianpu-palette-mode > [data-jianpu-action="insert"] {
  grid-column: 1 / -1;
}

.jianpu-main {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .45rem;
}

.jianpu-dock-controls {
  display: grid;
  min-width: 0;
  gap: .55rem;
  padding: .6rem .65rem;
  border-bottom: 1px solid var(--app-line);
  background: color-mix(in srgb, var(--app-panel) 88%, var(--app-bg));
}

.jianpu-dock-score-status {
  display: grid;
  min-width: 0;
  gap: .25rem;
}

.jianpu-dock-score-title {
  display: grid;
  min-width: 0;
  gap: .12rem;
}

.jianpu-dock-score-title > span,
.jianpu-dock-score-status > small {
  min-width: 0;
  color: var(--app-muted);
  font-size: .75rem;
  line-height: 1.35;
}

.jianpu-dock-score-title > strong {
  overflow: hidden;
  color: var(--app-text);
  font-size: .94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jianpu-dock-score-status > small.jianpu-current-cue {
  color: var(--status-success-text);
  font-weight: 750;
}

.jianpu-editor-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  color: var(--app-muted);
  font-size: .72rem;
  font-weight: 750;
}

.jianpu-editor-metrics span {
  padding: .2rem .3rem;
  border: 1px solid var(--app-line);
  border-radius: .35rem;
  background: var(--app-bg);
  white-space: nowrap;
}

.jianpu-editor-metrics b {
  color: var(--app-text);
}

.jianpu-editor-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.jianpu-editor-quick-actions span {
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 750;
  white-space: nowrap;
}

.jianpu-transport {
  display: grid;
  min-width: 0;
  gap: .4rem;
}

.jianpu-dock-controls .jianpu-voice-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  box-sizing: border-box;
}

.jianpu-dock-controls .jianpu-voice-picker select {
  min-width: 0;
  width: 100%;
}

.jianpu-transport-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.jianpu-dock-controls .jianpu-transport-actions .jianpu-button {
  flex: 1 1 auto;
  min-height: 2.1rem;
  padding-inline: .45rem;
  font-size: .75rem;
}

.jianpu-dock-controls .jianpu-timeline-readout {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jianpu-dock-controls .jianpu-volume {
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  min-width: 0;
}

.jianpu-dock-controls .jianpu-volume input {
  min-width: 0;

}

.jianpu-dock-controls .jianpu-editor-quick-actions {
  justify-content: space-between;
  padding-top: .45rem;
  border-top: 1px solid var(--app-line);
}

.jianpu-selection-quick-actions {
  display: grid;
  gap: .45rem;
  padding: .55rem;
  border: 1px solid var(--app-line);
  border-radius: .55rem;
  background: color-mix(in srgb, var(--app-accent-soft) 42%, var(--app-panel));
}

.jianpu-selection-quick-actions > header {
  display: grid;
  gap: .15rem;
}

.jianpu-selection-quick-actions > header strong {
  color: var(--app-text);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-selection-quick-actions > header small,
.jianpu-selection-quick-actions > p {
  margin: 0;
  color: var(--app-muted);
  font-size: .75rem;
  line-height: 1.35;
}

.jianpu-selection-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
}

.jianpu-selection-quick-grid .jianpu-button {
  min-width: 0;
  min-height: 2.05rem;
  padding-inline: .35rem;
  font-size: .75rem;
}

.jianpu-score {
  min-height: 0;
  height: auto;
  padding: .55rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.jianpu-paper {
  width: min(100%, 92rem);
}

.jianpu-inspector {
  min-height: 2.85rem;
}

.jianpu-workspace.jianpu-is-resizing,
.jianpu-workspace.jianpu-is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

@container jianpu-workspace (max-width: 1200px) {
  .jianpu-layout,
  .jianpu-layout[data-tool-dock-collapsed="true"] {
    display: block;
    overflow: auto;
    padding: .65rem;
  }

  .jianpu-layout-splitter {
    display: none;
  }

  .jianpu-sidebar,
  .jianpu-main,
  .jianpu-tool-dock {
    overflow: visible;
  }

  .jianpu-main,
  .jianpu-tool-dock {
    margin-top: .65rem;
  }

  .jianpu-layout[data-tool-dock-collapsed="true"] [data-jianpu-tool-dock] {
    display: none;
  }

  .jianpu-tool-dock .jianpu-toolbar {
    overflow: visible;
  }
}

@media (max-width: 980px) {
  .jianpu-layout,
  .jianpu-layout[data-tool-dock-collapsed="true"] {
    display: block;
    overflow: auto;
    padding: .65rem;
  }

  .jianpu-layout-splitter,
  .jianpu-layout[data-tool-dock-collapsed="true"] [data-jianpu-splitter="dock"] {
    display: none;
  }

  .jianpu-sidebar,
  .jianpu-main,
  .jianpu-tool-dock {
    overflow: visible;
  }

  .jianpu-main,
  .jianpu-tool-dock {
    margin-top: .65rem;
  }

  .jianpu-tool-dock {
    display: grid;
    max-height: none;
  }

  .jianpu-tool-dock .jianpu-toolbar {
    overflow: visible;
  }
}

@media (max-width: 700px) {
  .jianpu-editor-head {
    align-items: flex-start;
  }

  .jianpu-editor-metrics,
  .jianpu-editor-quick-actions,
  .jianpu-transport {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .jianpu-tool-dock-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .jianpu-tool-dock-actions {
    justify-content: flex-start;
  }
}

/* Single-flow paper: a measure may share a line with other measures, but its
   notes never wrap into a second vertical stack. The zoom controls adjust
   the note geometry so dense MIDI bars remain readable on one music line. */
.jianpu-dock-zoom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding-top: .45rem;
  border-top: 1px solid var(--app-line);
}

.jianpu-dock-zoom > span {
  min-width: 0;
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 800;
}

.jianpu-dock-zoom .jianpu-button {
  min-width: 2.15rem;
  min-height: 2rem;
  padding: .25rem .42rem;
  font-size: .8rem;
}

.jianpu-dock-zoom output {
  min-width: 3.2rem;
  color: var(--app-text);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.jianpu-dock-zoom small {
  grid-column: 1 / -1;
  color: var(--app-muted);
  font-size: .75rem;
}

.jianpu-beat-guides-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  min-height: 2rem;
  color: var(--app-text);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 750;
}

.jianpu-beat-guides-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.jianpu-beat-guides-toggle > small {
  grid-column: auto;
  color: var(--app-muted);
  font-size: .75rem;
  font-weight: 600;
}

.jianpu-paper .jianpu-measure-row {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  align-content: flex-start;
  column-gap: 0;
  row-gap: 0;
  min-height: var(--jianpu-paper-row-height, 9.2rem);
  border-bottom: 1px solid var(--app-score-paper-line);
}

.jianpu-paper .jianpu-measure-row .jianpu-measure,
.jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  display: block;
  flex: 0 0 var(--jianpu-bar-width, 12rem);
  width: var(--jianpu-bar-width, 12rem);
  min-width: 0;
  min-height: 0;
  padding: .2rem .32rem .4rem;
  border-right: .1rem solid var(--app-score-paper-ink);
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure:last-child {
  border-right: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  border-right: .2rem double var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-measure-row .jianpu-bar-notes {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: var(--jianpu-paper-row-height, 9.2rem);
  padding: 1.15rem .05rem .35rem;
  overflow: visible;
  border: 0;
}

.jianpu-paper .jianpu-measure-row .jianpu-note.jianpu-note--print {
  flex: var(--jianpu-length, 1) 1 0;
  min-width: var(--jianpu-note-min-width, 1.8rem);
  max-width: none;
  min-height: 7rem;
  padding: .05rem .04rem .2rem;
}

.jianpu-paper .jianpu-measure-row .jianpu-note.jianpu-note--print b {
  font-size: var(--jianpu-note-font-size, 1.7rem);
}

.jianpu-paper .jianpu-measure-row .jianpu-note.jianpu-note--print > span[contenteditable="true"] {
  font-size: var(--jianpu-note-lyric-size, .86rem);
}

@media (max-width: 980px) {
  .jianpu-paper .jianpu-measure-row {
    row-gap: 0;
  }
}

@media (max-width: 700px) {
  .jianpu-paper .jianpu-measure-row {
    display: block;
    min-height: 0;
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure,
  .jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
  .jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
    min-height: var(--jianpu-paper-row-height, 9.2rem);
    border-right: 0;
    border-bottom: .1rem solid var(--app-score-paper-ink);
  }

  .jianpu-paper .jianpu-measure-row .jianpu-measure:last-child {
    border-bottom: 0;
  }
}

/* Engraved numbered-notation system.  Measures are laid out on one
   continuous music line; note position follows beat + subdivision and note
   width follows duration instead of the number of notes in the bar. */
.jianpu-paper .jianpu-measure-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  align-content: flex-start;
  row-gap: 1rem;
  min-height: 8.9rem;
  margin: 0 0 .75rem;
  padding: .35rem 0 .55rem;
  overflow: visible;
  border-bottom: .06rem solid var(--app-score-paper-line);
}

.jianpu-paper .jianpu-measure-row .jianpu-measure,
.jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  position: relative;
  display: block;
  flex: 0 0 var(--jianpu-bar-width, 10rem);
  width: var(--jianpu-bar-width, 10rem);
  min-width: 0;
  min-height: 8rem;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure:not(:last-child)::after {
  position: absolute;
  top: 1.55rem;
  right: -.05rem;
  bottom: .65rem;
  width: .08rem;
  background: var(--app-score-paper-ink);
  content: '';
  pointer-events: none;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline:not(:last-child)::after {
  width: .22rem;
  background: transparent;
  border-right: .08rem solid var(--app-score-paper-ink);
  border-left: .08rem solid var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-measure-row .jianpu-measure.is-repeat-start::before {
  position: absolute;
  top: 1.55rem;
  left: .04rem;
  bottom: .65rem;
  width: .22rem;
  border-right: .08rem solid var(--app-score-paper-ink);
  border-left: .08rem solid var(--app-score-paper-ink);
  content: '';
  pointer-events: none;
}

.jianpu-paper .jianpu-measure-rail {
  position: absolute;
  top: .02rem;
  left: .18rem;
  right: .18rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.1rem;
  margin: 0;
  color: color-mix(in srgb, var(--app-score-paper-ink) 62%, var(--app-score-paper-line));
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}

.jianpu-paper .jianpu-bar-meter {
  color: color-mix(in srgb, var(--app-score-paper-ink) 48%, var(--app-score-paper-line));
  font-size: .62rem;
  font-weight: 650;
}

.jianpu-paper .jianpu-bar-notes {
  position: relative;
  display: block;
  width: 100%;
  min-height: 8rem;
  padding: 1.45rem .05rem .3rem;
  overflow: visible;
  border: 0;
}

.jianpu-paper .jianpu-beat-grid {
  position: absolute;
  inset: 1.45rem .05rem .3rem;
  z-index: 0;
  pointer-events: none;
}

.jianpu-paper .jianpu-beat-slot {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--jianpu-beat-position, 0%);
  width: 0;
  border-left: .04rem dotted color-mix(in srgb, var(--app-score-paper-line) 76%, transparent);
}

.jianpu-paper .jianpu-beat-slot b {
  position: absolute;
  top: -.98rem;
  left: .16rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 48%, var(--app-score-paper-line));
  font-size: .58rem;
  font-weight: 650;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-beat-grid {
  visibility: hidden;
  opacity: 0;
}

.jianpu-workspace[data-jianpu-beat-guides="visible"] .jianpu-paper .jianpu-beat-grid {
  opacity: .62;
}

.jianpu-paper .jianpu-note.jianpu-note--print {
  position: absolute;
  top: 1.45rem;
  left: var(--jianpu-note-left, 0%);
  z-index: 2;
  display: grid;
  grid-template-rows: 1rem .72rem 2.05rem .72rem .62rem 1.18rem 1.05rem;
  align-content: start;
  justify-items: center;
  width: var(--jianpu-note-width, 25%);
  min-width: 0;
  min-height: 7.25rem;
  margin: 0;
  padding: .02rem .04rem .12rem;
  overflow: visible;
  border: 0;
  border-radius: .12rem;
  outline: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
}

.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  color: var(--app-score-paper-ink);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
  line-height: 1;
  text-align: center;
}

.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-ornament { grid-row: 1; }
.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-octave-up { grid-row: 2; }
.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-pitch { grid-row: 3; }
.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-rhythm { grid-row: 4; }
.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-octave-down { grid-row: 5; }
.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-lyric-1 { grid-row: 6; }
.jianpu-paper .jianpu-note.jianpu-note--print > .jianpu-layer-lyric-2 { grid-row: 7; }

.jianpu-paper .jianpu-layer-ornament {
  gap: .12rem;
  min-height: 1rem;
  color: var(--app-score-paper-ink);
  font-style: normal;
  font-weight: 750;
}

.jianpu-paper .jianpu-layer-octave-up,
.jianpu-paper .jianpu-layer-octave-down {
  gap: .1rem;
  min-height: .72rem;
}

.jianpu-paper .jianpu-layer-octave-up i,
.jianpu-paper .jianpu-layer-octave-down i {
  display: inline-block;
  width: .27rem;
  height: .27rem;
  border-radius: 50%;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-pitch {
  gap: .04rem;
  min-height: 2.05rem;
  white-space: nowrap;
}

.jianpu-paper .jianpu-layer-pitch b {
  position: relative;
  z-index: 1;
  min-width: .85rem;
  color: var(--app-score-paper-ink);
  font-size: var(--jianpu-note-font-size, 1.7rem);
  font-weight: 850;
  line-height: 1;
}

.jianpu-paper .jianpu-layer-pitch .jianpu-accidental {
  width: .58rem;
  height: 1.1rem;
  margin-right: .02rem;
}

.jianpu-paper .jianpu-layer-dashes {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  margin-left: .08rem;
}

.jianpu-paper .jianpu-layer-dashes i {
  display: block;
  width: .5rem;
  height: .08rem;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-dotted-mark {
  display: block;
  width: .23rem;
  height: .23rem;
  margin-left: .06rem;
  border-radius: 50%;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-underlines {
  display: grid;
  gap: .08rem;
  width: 78%;
}

.jianpu-paper .jianpu-layer-underlines i {
  display: block;
  width: 100%;
  height: .1rem;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-lyric {
  min-height: 1.18rem;
  padding: 0 .03rem;
  color: color-mix(in srgb, var(--app-score-paper-ink) 92%, var(--app-score-paper-line));
  font-size: var(--jianpu-note-lyric-size, .86rem);
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
}

.jianpu-paper .jianpu-layer-lyric-2:empty,
.jianpu-paper .jianpu-layer-lyric:empty::before {
  visibility: hidden;
  content: none;
}

.jianpu-paper .jianpu-note.jianpu-note--print:hover,
.jianpu-paper .jianpu-note.jianpu-note--print.is-selected {
  background: color-mix(in srgb, var(--app-accent) 10%, transparent);
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-selected {
  box-shadow: inset 0 -.14rem 0 var(--app-accent);
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-playing {
  background: color-mix(in srgb, var(--status-success-bg) 75%, transparent);
}

.jianpu-paper .jianpu-note.jianpu-note--print.is-played > .jianpu-layer-pitch,
.jianpu-paper .jianpu-note.jianpu-note--print.is-played > .jianpu-layer-lyric {
  opacity: .48;
}

.jianpu-paper .jianpu-tuplet-mark {
  position: absolute;
  top: -.58rem;
  left: 50%;
  z-index: 6;
  display: block;
  width: var(--jianpu-tuplet-width, 80%);
  min-height: .6rem;
  transform: translateX(-.35rem);
  border-top: .08rem solid var(--app-score-paper-ink);
  pointer-events: none;
}

.jianpu-paper .jianpu-tuplet-mark::before,
.jianpu-paper .jianpu-tuplet-mark::after {
  position: absolute;
  top: -.08rem;
  width: .08rem;
  height: .34rem;
  background: var(--app-score-paper-ink);
  content: '';
}

.jianpu-paper .jianpu-tuplet-mark::before { left: 0; }
.jianpu-paper .jianpu-tuplet-mark::after { right: 0; }

.jianpu-paper .jianpu-tuplet-mark > span {
  position: absolute;
  top: -.72rem;
  left: 50%;
  padding: 0 .18rem;
  transform: translateX(-50%);
  background: var(--app-score-paper);
  color: var(--app-score-paper-ink);
  font-size: .68rem;
  font-weight: 750;
}

.jianpu-paper .jianpu-note.is-slur-start::before {
  top: -.34rem;
  left: 50%;
  z-index: 5;
  width: var(--jianpu-slur-width, 120%);
  height: .68rem;
  border-top: .1rem solid var(--app-score-paper-ink);
  border-radius: 70% 70% 0 0;
}

.jianpu-paper .jianpu-note.is-slur-end::before {
  display: none;
}

.jianpu-paper .jianpu-tie-curve {
  position: absolute;
  top: 3.55rem;
  left: 50%;
  z-index: 5;
  width: var(--jianpu-tie-width, 110%);
  height: .56rem;
  border: 0;
  border-bottom: .1rem solid var(--app-score-paper-ink);
  border-radius: 0 0 70% 70%;
  pointer-events: none;
}

/* The timeline geometry must win over the older readable minimum-width rule. */
.jianpu-paper .jianpu-measure-row .jianpu-note.jianpu-note--print {
  flex: none;
  width: var(--jianpu-note-width, 25%);
  min-width: 0;
  max-width: none;
}

/* The clean paper view follows printed numbered notation: a compact header,
   one flowing line of measures, formal barlines, and rhythm strokes. Beat
   positions remain available through the optional editor guide toggle. */
.jianpu-paper {
  padding: 1.15rem 1.55rem 1.4rem;
}

.jianpu-paper .jianpu-paper-head {
  min-height: 4.25rem;
  padding: .1rem 0 .55rem;
  border-bottom-width: .1rem;
}

.jianpu-paper .jianpu-paper-title-block {
  gap: .12rem;
}

.jianpu-paper .jianpu-paper-title-block > span {
  font-size: .7rem;
  letter-spacing: .08em;
}

.jianpu-paper .jianpu-paper-title-block > strong {
  margin-top: .1rem;
  font-size: clamp(1.35rem, 2.15vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: .05em;
}

.jianpu-paper .jianpu-paper-title-block > small {
  margin-top: .08rem;
  font-size: .72rem;
  line-height: 1.25;
}

.jianpu-paper .jianpu-paper-signature,
.jianpu-paper .jianpu-paper-tempo {
  min-height: 3.35rem;
  padding-top: .05rem;
}

.jianpu-paper .jianpu-paper-signature {
  gap: .45rem;
}

.jianpu-paper .jianpu-paper-signature > strong {
  font-size: 1rem;
}

.jianpu-paper .jianpu-meter-signature {
  min-width: 1.5rem;
  font-size: 1.12rem;
}

.jianpu-paper .jianpu-meter-signature i {
  min-width: 1.5rem;
}

.jianpu-paper .jianpu-paper-tempo {
  gap: .12rem;
  font-size: .72rem;
}

.jianpu-paper .jianpu-section-divider {
  min-height: 1.95rem;
  margin-top: .72rem;
  padding: .35rem 0 .25rem;
}

.jianpu-paper .jianpu-measure-row {
  row-gap: .6rem;
  margin-bottom: .48rem;
  padding: .18rem 0 .35rem;
}

.jianpu-paper .jianpu-measure-row .jianpu-measure,
.jianpu-paper .jianpu-measure-row .jianpu-measure:nth-child(2n + 1),
.jianpu-paper .jianpu-measure-row .jianpu-measure.has-section-barline {
  min-height: 7.55rem;
}

.jianpu-paper .jianpu-measure-rail {
  min-height: .85rem;
  font-size: .7rem;
}

.jianpu-paper .jianpu-bar-meter {
  font-size: .7rem;
}

.jianpu-paper .jianpu-bar-notes {
  min-height: 7.55rem;
  padding-top: 1.2rem;
}

.jianpu-paper .jianpu-beat-grid {
  inset: 1.2rem .05rem .25rem;
}

.jianpu-paper .jianpu-note.jianpu-note--print {
  top: 1.2rem;
  grid-template-rows: .82rem .58rem 1.82rem .62rem .5rem 1rem .82rem;
  min-height: 6.55rem;
}

.jianpu-paper .jianpu-layer-pitch b {
  min-width: .72rem;
}

/* In the standard/clean view, do not print editor-only beat numbers or guide
   lines. The barline still spans the complete measure and rhythm strokes
   remain visible beneath the numbered notes. */
.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-measure-rail {
  visibility: hidden;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-measure-row .jianpu-measure {
  min-height: 6.85rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-measure-row .jianpu-measure:not(:last-child)::after {
  top: .18rem;
  bottom: .42rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-bar-notes {
  min-height: 6.85rem;
  padding-top: .35rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print {
  top: .35rem;
  grid-template-rows: .5rem .42rem 1.72rem .55rem .42rem .92rem .72rem;
  min-height: 5.85rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print.is-pending {
  box-shadow: none;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print.is-pending b {
  color: var(--app-score-paper-ink);
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print.is-rest b {
  color: var(--app-score-paper-ink);
}

@media (max-width: 700px) {
  .jianpu-paper {
    padding: .85rem .75rem 1rem;
  }

  .jianpu-paper .jianpu-paper-head {
    min-height: 4.6rem;
  }
}

/* Final engraving pass: the number is the anchor, while rhythm strokes sit
   on their own baseline with a clear breathing gap.  Curve widths are
   relative to the source note cell, so a tie/slur reaches the target note
   instead of being limited to (or leaking past) the whole measure. */
.jianpu-paper .jianpu-measure-row .jianpu-bar-notes {
  padding-inline: .3rem;
}

.jianpu-paper .jianpu-note.jianpu-note--print {
  grid-template-rows: .72rem .55rem 1.65rem .88rem .45rem 1.05rem .78rem;
  min-height: 6.45rem;
  padding-inline: .08rem;
}

.jianpu-paper .jianpu-layer-pitch {
  gap: .08rem;
  padding-inline: .04rem;
}

.jianpu-paper .jianpu-layer-pitch b {
  letter-spacing: .02em;
}

.jianpu-paper .jianpu-layer-rhythm {
  align-items: flex-start !important;
  justify-content: center;
  padding-top: .25rem;
}

.jianpu-paper .jianpu-layer-underlines {
  flex: 0 0 auto;
  width: 44%;
  margin-top: .12rem;
  gap: .1rem;
}

.jianpu-paper .jianpu-layer-underlines i {
  width: 100%;
  height: .08rem;
}

.jianpu-paper .jianpu-layer-dashes {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: .22rem 0 0;
  gap: .16rem;
}

.jianpu-paper .jianpu-layer-dashes i {
  flex: 0 0 .48rem;
  width: .48rem !important;
  height: .08rem !important;
}

.jianpu-paper .jianpu-tuplet-mark {
  width: var(--jianpu-tuplet-width, 100%);
  transform: none;
}

.jianpu-paper .jianpu-note.is-slur-start::before {
  position: absolute;
  top: 1.62rem;
  left: 50%;
  z-index: 5;
  width: var(--jianpu-slur-width, 100%);
  height: .6rem;
  border-top-width: .08rem;
  content: '';
}

.jianpu-paper .jianpu-tie-curve {
  top: 2.58rem;
  left: 50%;
  width: var(--jianpu-tie-width, 100%);
  height: .48rem;
  border-bottom-width: .08rem;
}

.jianpu-paper .jianpu-tie-curve--incoming {
  right: 50%;
  left: auto;
  width: 100%;
  border-radius: 0 0 70% 70%;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print {
  top: .35rem;
  grid-template-rows: .58rem .45rem 1.65rem .88rem .42rem 1.05rem .78rem;
  min-height: 6rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.is-slur-start::before {
  top: 1.06rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-tie-curve {
  top: 2.52rem;
}

/* Final notation polish: sustained values belong on the pitch baseline; the
   short-value strokes stay below the number and remain deliberately compact. */
.jianpu-paper .jianpu-layer-pitch .jianpu-layer-dashes {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .08rem;
  width: auto;
  margin: 0 0 0 .12rem;
  white-space: nowrap;
  transform: translateY(.02rem);
}

.jianpu-paper .jianpu-layer-pitch .jianpu-layer-dashes i {
  flex: 0 0 .46rem;
  width: .46rem !important;
  height: .08rem !important;
}

.jianpu-paper .jianpu-layer-underlines {
  width: 36%;
  max-width: 1.25rem;
  margin-top: .14rem;
  gap: .1rem;
}

.jianpu-paper .jianpu-layer-underlines i {
  height: .08rem;
}

.jianpu-paper .jianpu-note.is-slur-start::before {
  top: .94rem;
  height: .62rem;
  border-top-width: .1rem;
}

.jianpu-paper .jianpu-tie-curve {
  top: 2.48rem;
  height: .56rem;
  border-bottom-width: .11rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.is-slur-start::before {
  top: .92rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-tie-curve {
  top: 2.48rem;
}

/* The rhythm stroke is a separate printed baseline, not an underline glued
   to the numeral.  Reserve a taller rhythm row so the gap remains readable
   at both the default zoom and the compact hidden-guide view. */
.jianpu-paper .jianpu-note.jianpu-note--print {
  grid-template-rows: .72rem .55rem 1.65rem 1.14rem .45rem 1.05rem .78rem;
  min-height: 6.7rem;
}

.jianpu-paper .jianpu-layer-rhythm {
  padding-top: .48rem;
}

.jianpu-paper .jianpu-layer-underlines {
  width: 32%;
  max-width: 1.1rem;
  margin-top: .12rem;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print {
  grid-template-rows: .58rem .45rem 1.65rem 1.14rem .42rem 1.05rem .78rem;
  min-height: 6.25rem;
}

.jianpu-paper .jianpu-section-divider.is-ai-candidate {
  border-bottom-color: color-mix(in srgb, var(--status-info-border) 72%, var(--app-score-paper-line));
  background: color-mix(in srgb, var(--status-info-bg) 34%, transparent);
}

.jianpu-paper .jianpu-section-divider.is-ai-candidate > span:not(.jianpu-section-ai-actions) {
  color: var(--status-info-text);
  font-weight: 750;
}

.jianpu-paper .jianpu-section-ai-actions {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: .28rem;
}

.jianpu-paper .jianpu-section-ai-actions .jianpu-button {
  min-height: 1.75rem;
  padding: .24rem .48rem;
  border-color: var(--status-info-border);
  color: var(--status-info-text);
  font-size: .75rem;
}

.jianpu-paper .jianpu-note.is-ai-composed {
  background: color-mix(in srgb, var(--status-info-bg) 24%, transparent);
}

@media (max-width: 700px) {
  .jianpu-paper .jianpu-section-divider.is-ai-candidate .jianpu-section-ai-actions {
    display: inline-flex;
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Numbered-notation engraving: reduction strokes occupy their own baseline.
   Adjacent short notes join only inside one beat group; lower-octave dots stay
   below every reduction stroke instead of colliding with it. */
.jianpu-paper .jianpu-note.jianpu-note--print {
  grid-template-rows: .72rem .55rem 1.65rem 1.32rem .58rem 1.05rem .78rem;
  min-height: 7.02rem;
}

.jianpu-paper .jianpu-layer-rhythm {
  position: relative;
  align-items: flex-start !important;
  justify-content: stretch;
  min-height: 1.32rem;
  padding-top: .58rem;
}

.jianpu-paper .jianpu-layer-underlines {
  display: grid;
  align-content: start;
  width: 100%;
  max-width: none;
  margin-top: 0;
  gap: .18rem;
}

.jianpu-paper .jianpu-layer-underlines i {
  justify-self: center;
  width: 1.12rem;
  height: .075rem;
  border-radius: 0;
  background: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-underlines i.joins-next:not(.joins-previous) {
  justify-self: end;
  width: calc(50% + .18rem);
  margin-right: -.18rem;
}

.jianpu-paper .jianpu-layer-underlines i.joins-previous:not(.joins-next) {
  justify-self: start;
  width: calc(50% + .18rem);
  margin-left: -.18rem;
}

.jianpu-paper .jianpu-layer-underlines i.joins-previous.joins-next {
  width: calc(100% + .36rem);
  margin-inline: -.18rem;
}

.jianpu-paper .jianpu-layer-octave-down {
  align-items: flex-start;
  padding-top: .13rem;
}

.jianpu-paper .jianpu-layer-rest-zeros {
  display: inline-flex;
  align-items: baseline;
  gap: .48rem;
  margin-left: .48rem;
  color: var(--app-score-paper-ink);
}

.jianpu-paper .jianpu-layer-rest-zeros i {
  font-size: var(--jianpu-note-font-size, 1.7rem);
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.jianpu-workspace[data-jianpu-beat-guides="hidden"] .jianpu-paper .jianpu-note.jianpu-note--print {
  grid-template-rows: .58rem .45rem 1.65rem 1.28rem .54rem 1.05rem .78rem;
  min-height: 6.62rem;
}