@font-face { font-family: RPE; src: url('./assets/rpe/fonts/cmdysj.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: RPEGame; src: url('./assets/rpe/fonts/cmdysj.ttf') format('truetype'); font-display: swap; }
.editor.notes-only .canvases, .editor.notes-only .timeline-head { grid-template-columns: minmax(0, 1fr); }
.editor.notes-only #events, .editor.notes-only .timeline-head > span:nth-child(2) { display: none; }
.editor.multi-notes .canvases, .editor.multi-events .canvases { grid-template-columns: 24px minmax(0, 1fr) 24px; }
.editor.multi-notes .canvases, .editor.multi-events .canvases { inset: 24px 0 0; }
.editor.multi-notes .timeline-head, .editor.multi-events .timeline-head { grid-template-columns: minmax(0, 1fr); }
.editor.multi-notes #events, .editor.multi-notes #history-strip, .editor.multi-notes .timeline-head > span:nth-child(2) { display: none; }
.editor.multi-notes .timeline-head > span:first-child, .editor.multi-events .timeline-head > span:nth-child(2) { grid-column: 1; }
.editor.multi-notes #notes { grid-column: 2; }
.editor.multi-events #notes, .editor.multi-events #note-density, .editor.multi-events #history-strip, .editor.multi-events .timeline-head > span:first-child { display: none; }
.editor.multi-events #events { grid-column: 2; }
.editor.multi-notes.multi-scroll-visible .canvases, .editor.multi-events.multi-scroll-visible .canvases { bottom: 20px; }
.curve-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.curve-preview { width: 100%; height: 220px; margin-top: 15px; background: #202020; border: 1px solid #555; }
.curve-syntax { margin: 12px 20px; color: var(--muted); }
.curve-syntax summary { cursor: pointer; color: var(--accent); }
.curve-presets { margin: 12px 20px; }
.curve-presets h3 { margin: 8px 0; font-size: 14px; }
.curve-presets details { margin: 4px 0; border: 1px solid #3b414c; background: #1b1f26; }
.curve-presets summary { padding: 6px 9px; cursor: pointer; color: #dce7f4; }
.curve-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px; }
.curve-preset { min-height: 82px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px; font-size: 12px; }
.curve-preset-thumbnail { display: block; width: 100%; height: 58px; background: #171b22; border: 1px solid #4a5360; }
.curve-preset span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curve-preset-actions { display: flex; gap: 6px; margin-top: 8px; }
.trajectory-fields .field, .trajectory-preset-editor .field { align-items: center; margin: 8px 12px; }
.trajectory-fields input, .trajectory-fields select, .trajectory-preset-editor input { min-width: 0; }
.trajectory-fields label[hidden] { display: none; }
.trajectory-fields input[type=checkbox], .trajectory-preset-editor input[type=checkbox] { width: auto; }
.trajectory-preview { display: block; width: calc(100% - 24px); height: 180px; margin: 12px; border: 1px solid #626262; }
.trajectory-preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.trajectory-preset-grid > button { min-width: 0; padding: 5px; white-space: normal; }
.trajectory-preset-grid > button[aria-expanded=true] { border-color: #8fe6c1; color: #9ff0ca; }
.trajectory-preset-grid > button canvas { height: 65px; width: 100%; margin-bottom: 4px; }
.trajectory-preset-editor { grid-column: 1 / -1; min-width: 0; padding: 12px 0; background: #282828; border: 1px solid #618273; }
.trajectory-preset-editor > strong, .trajectory-preset-editor > button { margin: 8px 12px; }
.trajectory-preset-source { width: calc(100% - 24px); min-height: 230px; margin: 12px; font: 12px/1.5 Consolas, monospace; box-sizing: border-box; }
.trajectory-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#trajectory-editor .error { color: #ff9a8a; }
.inspector:has([data-panel="trajectory"]:not([hidden])) { display: flex; flex-direction: column; overflow: hidden; }
[data-panel="trajectory"]:not([hidden]) { display: flex; flex: 1; flex-direction: column; min-height: 0; }
#trajectory-editor { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.trajectory-scroll { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 12px; }
.trajectory-footer { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid #666; background: #292929; }
.trajectory-footer > button { flex: 1; }
.trajectory-footer > .primary { flex-basis: 100%; }
.trajectory-seed { display: flex; gap: 4px; min-width: 0; }
.trajectory-seed input { flex: 1; width: 0; }
.trajectory-seed button { flex: 0 0 30px; padding: 2px; font-size: 20px; }
:root { color-scheme: dark; font-family: RPE, 'Microsoft YaHei', sans-serif; font-size: 13px; color: #f0f0f0; background: #303030; --accent: #ffdc70; --muted: #aaa; --line: #515151; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 1000px; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; border: 1px solid #666; border-radius: 1px; background: #383838; }
button { padding: 6px 10px; cursor: pointer; white-space: nowrap; }
button:hover { background: #505050; border-color: #ccc; }
button.active, button.primary { color: #ffe49b; border-color: #aa9251; background: #4d4632; }
button:disabled { opacity: .35; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
canvas:focus, canvas:focus-visible { outline: none; }
input, select { padding: 5px; min-width: 0; }
input[type=range] { accent-color: #eee; padding: 0; }
input[type=checkbox] { accent-color: var(--accent); width: 17px !important; height: 17px; }
header { min-height: 48px; display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: #202020; flex: none; border-bottom: 1px solid #444; }
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 19px; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.brand small { font-size: 10px; color: var(--accent); }
#document-name { flex: 1; min-width: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bbb; }
nav { display: flex; gap: 5px; }
kbd { font: 10px sans-serif; opacity: .6; }
button[data-icon]::before { content: ''; display: inline-block; width: 18px; height: 18px; vertical-align: middle; background-image: var(--icon); background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 6px; }
.transport { min-height: 60px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; flex: none; background: #202020; border-bottom: 1px solid #555; }
.transport label { white-space: nowrap; flex-shrink: 0; }
.transport-group { display: flex; gap: 6px; }
.line-select-group { display: flex; align-items: center; gap: 3px; flex: none; }
.line-step { display: flex; flex-direction: column; width: 18px; height: 30px; }
.line-step button { min-height: 0; height: 15px; padding: 0; line-height: 11px; font-size: 10px; color: var(--accent); }
.line-switcher { position: absolute; z-index: 8; left: 50%; top: 0; transform: translateX(-50%); width: 88%; max-width: 1060px; padding: 6px; background: #303030; border: 1px solid #666; border-radius: 7px; box-shadow: 0 8px 30px #0008; }
.batch-script { width: 100%; min-height: 120px; resize: vertical; font-family: Consolas, monospace; font-size: 13px; }
.batch-parameters { margin: 8px 0; padding: 8px; border: 1px solid #555; border-radius: 4px; }
.batch-parameters summary { cursor: pointer; color: var(--accent); }
.batch-parameters .action-grid { margin: 8px 0; }
.batch-preview-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.batch-error { color: #ff9595; }
.batch-panel-actions { position: sticky; bottom: 0; background: #383838; padding: 8px 0; z-index: 1; }
.line-switcher-filters { display: flex; justify-content: flex-end; align-items: center; gap: 14px; min-height: 22px; margin-bottom: 5px; color: #ddd; font-size: 12px; }
.line-switcher-filters label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.line-switcher-filters input { margin: 0; }
.line-switcher-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.line-switcher-body { display: flex; gap: 6px; align-items: stretch; }
.line-switcher-viewport { position: relative; flex: 1; min-width: 0; overflow: hidden; overflow-anchor: none; }
.line-switcher-content { position: relative; }
.line-switcher-grid { position: absolute; left: 0; right: 0; display: grid; grid-auto-rows: calc(var(--thumbnail-height) + 22px); gap: 4px; }
.line-switcher-scroll { flex: none; width: 18px; height: auto; min-height: 0; margin: 0; padding: 0; writing-mode: vertical-lr; direction: ltr; accent-color: var(--accent); }
.line-switcher-card { position: relative; display: block; width: 100%; height: calc(var(--thumbnail-height) + 22px); min-width: 0; padding: 2px; border: 1px solid #666; border-radius: 3px; background: #383838; text-align: left; overflow: hidden; }
.line-switcher-card:hover { border-color: #ccc; background: #505050; }
.line-switcher-card.selected { border-color: var(--accent); background: #4d4632; box-shadow: inset 0 0 0 1px var(--accent); }
.line-switcher-card strong, .line-switcher-card small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.line-switcher-card strong { color: #f0f0f0; font-size: 11px; line-height: 14px; margin: 0 2px 2px; }
.line-switcher-card strong { padding-right: 42%; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111; }
.line-switcher-line-group { color: #8dd6ee; font-weight: 400; }
.line-switcher-group { position: absolute; z-index: 1; top: 2px; right: 3px; max-width: 42%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e0c277; font-size: 9px; font-style: normal; font-weight: 400; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111; }
.line-switcher-card.selected strong { color: #ffe39a; }
.line-switcher-card small { position: absolute; right: 3px; bottom: 3px; padding: 0 2px; font-size: 9px; line-height: 12px; color: #ccc; background: #303030d9; }
.line-switcher-card canvas { display: block; width: 100%; height: var(--thumbnail-height, 64px); }
.asset-library-actions { display: flex; gap: 6px; margin: 10px 20px; }
.asset-library-actions button { flex: 1; min-width: 0; }
.asset-tree { margin: 10px; border: 1px solid #505050; border-radius: 4px; overflow: auto; max-height: 52vh; }
.asset-folder { margin: 0; border-top: 1px solid #505050; }
.asset-folder .asset-folder { margin-left: 14px; border-top: 0; border-left: 2px solid #4c4c4c; border-radius: 0; }
.asset-folder .asset-folder > summary { padding-left: 16px; }
.asset-folder:first-child { border-top: 0; }
.asset-folder > summary { padding: 8px 10px; background: #292929; color: #8dd6ee; font-weight: 600; }
.asset-folder-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 7px; }
.asset-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 6px; min-width: 0; padding: 5px; text-align: left; background: #303030; }
.asset-row.selected { border-color: var(--accent); background: #4d4632; }
.asset-row img { grid-row: 1 / 3; width: 42px; height: 42px; object-fit: contain; background: #202020; }
.asset-row span, .asset-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-row small { color: #fff; font-size: 10px; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111; }
.asset-details { margin: 12px 20px 18px; padding: 10px; border: 1px solid #666; background: #292929; }
.asset-details strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8dd6ee; }
.asset-details > img { display: block; width: 100%; height: 180px; margin: 8px 0; object-fit: contain; background: #202020; }
.asset-details p { margin: 6px 0; color: #bbb; font-size: 11px; }
.asset-detail-actions, .asset-editor-controls { display: flex; gap: 6px; align-items: center; }
.asset-detail-actions button { flex: 1; }
.asset-editor-canvas { display: block; width: 100%; max-height: 58vh; object-fit: contain; background: #202020; margin: 6px 0 10px; }
.asset-editor-controls select { flex: 1; min-width: 0; }
.asset-editor-controls input[type=range] { flex: 1; }
#offset { width: 70px; }
.batch-execute { display: inline-flex; align-items: center; gap: 4px; flex: none; }
#batch-action { width: 110px; }
#batch-run { width: 30px; height: 29px; padding: 0; color: var(--accent); }
.batch-controls { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 16px; pointer-events: none; }
.batch-ball { width: 18px; height: 18px; min-height: 18px; border: 1px solid #ffffff80; border-radius: 50%; padding: 0; background: var(--ball-color); box-shadow: 0 1px 4px #0008; opacity: .85; cursor: grab; touch-action: none; pointer-events: auto; }
.batch-ball:hover, .batch-ball:active { background: var(--ball-color); opacity: 1; border-color: #fff; }
.batch-ball:active { cursor: grabbing; }
.batch-hint { position: absolute; top: -24px; right: 0; white-space: nowrap; color: #fff; text-shadow: 0 1px 3px #000; }
.clipboard-panel-actions, .clipboard-actions { display: flex; gap: 6px; padding: 8px; }
#clipboard-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
.clipboard-card { min-width: 0; border: 1px solid #555; background: #25282e; }
.clipboard-name { width: calc(100% - 16px); margin: 0 8px; }
.clipboard-card.active { border-color: var(--accent); }
.clipboard-select { width: 100%; text-align: left; border: 0; background: transparent; padding: 8px; white-space: normal; }
.clipboard-select canvas { display: block; width: 100%; height: 68px; object-fit: fill; margin-bottom: 8px; }
.clipboard-select strong, .clipboard-select span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clipboard-select span { color: #aaa; font-size: 11px; margin-top: 5px; }
.clipboard-actions button { flex: 1; padding: 5px; }
.selection-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
@media (max-width: 1400px) {
  .transport-group button[data-icon], #seek { font-size: 0; width: 34px; height: 32px; padding: 6px; }
  .transport-group button[data-icon]::before, #seek::before { margin-right: 0; }
  #play[data-playing="true"]::before { content: 'Ⅱ'; background-image: none; font-size: 18px; line-height: 18px; }
}
label { display: inline-flex; align-items: center; gap: 6px; color: #ddd; }
#line-select { width: 115px; } #seek-beat { width: 58px; } .beat-seek { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .beat-nudge { display: inline-flex; gap: 2px; } .beat-nudge button { width: 22px; height: 24px; padding: 0; line-height: 20px; font-size: 15px; color: var(--accent); border-color: #806d3c; } #clock { min-width: 72px; color: #eee; font-variant-numeric: tabular-nums; } #bpm-display { color: var(--accent); white-space: nowrap; font-size: 11px; } #scrubber { flex: 1; min-width: 65px; }
.scrubber-wrap { position: relative; display: flex; align-items: flex-end; flex: 1 1 120px; min-width: 65px; height: 36px; padding-top: 16px; }
.scrubber-wrap #scrubber { width: 100%; min-width: 0; }
.workspace { display: grid; grid-template-columns: minmax(640px, 70.3%) minmax(285px, 1fr); flex: 1; min-height: 0; }
.panel { min-height: 0; }
.editor { display: flex; flex-direction: column; min-width: 0; background: #303030; border-right: 2px solid #808080; position: relative; }
.editor-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; padding: 6px 10px; flex: none; width: 100%; max-width: 100%; min-width: 0; background: #282828; min-height: 45px; overflow-x: auto; }
.tools { display: flex; gap: 3px; }
.tools button { padding: 5px 8px; min-width: 48px; }
.tools img { width: 37px; height: 10px; object-fit: fill; display: block; margin: 0 auto 3px; }
.view-buttons { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.view-buttons button { width: 30px; height: 29px; padding: 4px; }
.view-buttons button::before { margin: 0; width: 19px; height: 19px; }
.view-controls-inline { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.view-controls-inline label { gap: 3px; white-space: nowrap; }
.view-controls-inline label span { color: #aaa; font-size: 11px; }
.view-controls-inline input[type=number] { width: 52px; padding: 4px; }
.view-controls-inline select { width: 64px; padding: 4px; }
.view-controls-inline button[data-icon] { width: 30px; height: 29px; padding: 4px; }
.view-controls-inline button[data-icon]::before { margin: 0; width: 19px; height: 19px; }
.preserve-pitch { white-space: nowrap; }
.editor-toolbar.mode-icons .tools button { min-width: 38px; width: 38px; padding: 4px; font-size: 0; }
.editor-toolbar.mode-icons .tools img { width: 31px; height: 9px; margin: 0 auto; }
.editor-toolbar.mode-icons .tools button[data-tool="0"]::before { content: '↖'; display: block; color: var(--accent); font-size: 20px; line-height: 20px; }
.editor-toolbar.mode-wide { overflow-x: visible; }
.editor-toolbar.mode-wide .tools button { min-width: 58px; }
#toolbar-mode { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; color: var(--accent); font-size: 18px; line-height: 1; }
#mute-current-line { flex: none; width: 30px; height: 29px; padding: 4px; display: grid; place-items: center; }
#mute-current-line img { width: 20px; height: 20px; object-fit: contain; opacity: .78; }
#mute-current-line.active { color: var(--accent); border-color: var(--accent); background: #5a4b26; }
#mute-current-line.active img { opacity: 1; }
#division, #grid-count { width: 45px; } #y-scale { width: 60px; }
.y-scale-control { margin-left: auto; }
.y-scale-control + .y-scale-control { margin-left: 0; }
.timeline-head { display: grid; grid-template-columns: 50% 50%; position: relative; background: #353535; height: 40px; flex: none; width: 100%; max-width: 100%; min-width: 0; }
.timeline-head > span { display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-right: 1px solid #777; }
.editor.multi-notes .timeline-head > span:first-child { display: flex; }
.editor.multi-notes .timeline-head > span:nth-child(2), .editor.multi-events .timeline-head > span:first-child { display: none; }
.editor.multi-events .timeline-head > span:nth-child(2) { display: flex; }
.multi-line-head-controls { position: absolute; z-index: 2; top: 7px; right: 8px; display: inline-flex; align-items: center; gap: 2px; }
.multi-line-head-controls button { min-width: 25px; height: 24px; padding: 1px 4px; font-size: 11px; color: #d6c58a; }
.multi-line-head-controls button.active { color: #161616; background: var(--accent); border-color: var(--accent); }
.multi-line-head-controls button:disabled { opacity: .35; }
.multi-line-head-controls #multi-line-open { min-width: 34px; }
.multi-line-head-controls #multi-line-count { color: inherit; font-size: 10px; }
small { font-size: 11px; color: #aaa; font-weight: 400; }
#cursor-position { margin-left: auto; font-size: 11px; color: #aaa; }
.stage { flex: 1; width: 100%; max-width: 100%; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
#timeline-markers { position: absolute; z-index: 7; top: 0; left: 0; right: 0; height: 16px; pointer-events: none; }
.timeline-marker { position: absolute; top: 0; width: max-content; max-width: 160px; transform: translateX(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 4px; border: 1px solid #a98e4c; background: #27231bd9; color: #ffe29a; font-size: 10px; line-height: 13px; pointer-events: auto; }
.timeline-marker:hover { background: #55472a; color: #fff0bd; }
.timeline-context-menu { position: fixed; z-index: 30; display: grid; min-width: 150px; padding: 4px; border: 1px solid #777; border-radius: 3px; background: #292929; box-shadow: 0 4px 16px #000b; }
.timeline-context-menu button { width: 100%; padding: 6px 9px; border: 0; background: transparent; text-align: left; }
.timeline-context-menu button:hover { background: #4b4636; }
#realtime-preview { position: absolute; inset: 0; pointer-events: none; opacity: .1; }
#audio-analysis-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1; }
.canvases { position: absolute; inset: 0; display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) 24px; grid-template-rows: minmax(0, 1fr); column-gap: 12px; }
#multi-line-labels { position: absolute; z-index: 4; top: 0; left: 36px; right: 36px; height: 24px; overflow: hidden; pointer-events: none; background: #292929; }
#multi-line-labels > span { position: absolute; top: 0; height: 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; color: #f3d77b; background: #343434ee; border: 1px solid #746540; font-size: 12px; font-variant-numeric: tabular-nums; }
#multi-line-scroll { position: absolute; z-index: 6; left: 36px; right: 36px; bottom: 0; width: calc(100% - 72px); height: 20px; margin: 0; pointer-events: auto; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; touch-action: none; }
#notes { grid-column: 2; border-right: 1px solid #888; }
#events { grid-column: 3; border-left: 1px solid #888; }
.timeline-strip { grid-row: 1; width: 24px; opacity: .9; background: #292929; border: 1px solid #4b4b4b; }
#note-density { grid-column: 1; }
#history-strip { grid-column: 4; }
#notifications { position: absolute; z-index: 5; top: 8px; left: 34px; width: min(540px, 60%); display: flex; flex-direction: column; gap: 5px; pointer-events: none; }
#note-source-toast { position: absolute; z-index: 8; top: 34px; left: 40px; padding: 6px 12px; border: 1px solid #63d17b; border-radius: 3px; background: #17351dcc; color: #b9ffca; box-shadow: 0 2px 8px #0009; cursor: pointer; }
.editor-notification { padding: 6px 12px; border: 1px solid; background: #202020ee; color: #fff; font-size: 12px; box-shadow: 0 2px 7px #0008; opacity: 0; transform: translateY(-5px); transition: opacity 220ms ease, transform 220ms ease; }
.editor-notification.visible { opacity: 1; transform: translateY(0); }
.editor-notification.leaving { opacity: 0; transform: translateY(-5px); }
.editor-notification.success { border-color: #65c878; }
.editor-notification.warning { border-color: #e6c65c; }
.editor-notification.error { border-color: #e46e6e; }
.preview-wrap { position: absolute; inset: 0; background: #111; }
.preview-overlay { position: absolute; z-index: 3; top: 12px; right: 12px; left: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; text-shadow: 1px 1px 3px #000; }
.preview-overlay button { pointer-events: auto; background: #202020bb; }
.editor-footer { display: flex; gap: 6px; padding: 7px 9px; align-items: center; border-top: 1px solid #666; background: #282828; flex: none; width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
#selection-info { flex: 1; font-size: 11px; color: #bbb; }
.chart-info { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; color: #bbb; }
.chart-info dt { color: #888; }
.chart-info dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-material-hint { color: #f1c867; font-size: 11px; font-weight: 400; }
.metadata-media-actions { display: flex; gap: 8px; margin: 12px 20px; }
.metadata-media-actions button { flex: 1; min-width: 0; }
.analysis-mode-buttons { display: flex; gap: 8px; margin: 12px 20px; }
.analysis-mode-buttons button { flex: 1; }
.analysis-mode-buttons button.active { color: #171717; background: var(--accent); border-color: var(--accent); }
.inspector { background: #303030; overflow: auto; }
.inspector-tabs { display: flex; position: sticky; top: 0; z-index: 2; background: #252525; padding: 8px; gap: 4px; }
.inspector-tabs button { flex: 1; padding: 8px 0; }
.panel-title { display: flex; justify-content: space-between; padding: 14px; font-size: 17px; color: #eee; background: #3b3b3b; margin: 8px 10px 18px; border-bottom: 2px solid #888; }
.field { display: flex; justify-content: space-between; gap: 10px; margin: 13px 20px; min-height: 29px; }
.field input, .field select { width: 59%; }
.field select { font-family: 'Microsoft YaHei', sans-serif; font-size: 12px; }
.duration-input { display: flex; width: 59%; gap: 4px; }
.field .duration-input input { flex: 1; width: 0; }
.field .duration-input select { width: 48px; flex: none; }
.layer-buttons { display: flex; gap: 3px; }
.layer-buttons button { padding: 3px 8px; border-radius: 3px; font-weight: bold; }
.layer-buttons button[data-state=empty] { color: #aaa; border-color: #666; }
.layer-buttons button[data-state=outside] { color: #ff9999; border-color: #b64040; }
.layer-buttons button[data-state=visible] { color: #ffff70; border-color: #b5b530; }
.layer-buttons button.active { color: #aaffaa; background: #235823; border-color: #48cf48; }
.hint { font-size: 12px; color: #aaa; line-height: 1.9; margin: 16px 20px; }
.shader-segment { margin: 12px 20px; padding: 10px; min-width: 0; border: 1px solid #655478; border-radius: 4px; }
.shader-segment .field { margin: 10px 0; align-items: center; }
.shader-segment input, .shader-segment select { min-width: 0; }
.shader-segment > strong { display: block; overflow-wrap: anywhere; color: #d6b9ff; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 14px 20px; }
.action-grid button { min-height: 36px; }
.curve-pick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 10px 20px; }
.curve-pick-actions button.active { color: #151515; background: var(--accent); }
.wide-button, .wide-field { display: block; margin: 12px 20px; width: calc(100% - 40px); }
.easing-preview { height: 100px; width: calc(100% - 40px); margin: 10px 20px; background: #222; border: 1px solid #555; }
#line-list { margin: 10px; max-height: 48vh; overflow: auto; }
#line-list button { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; margin-bottom: 4px; padding: 9px; overflow: hidden; }
#line-list .line-list-index { flex: none; color: #9d9d9d; font-variant-numeric: tabular-nums; }
#line-list .line-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#line-list .line-list-features { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9a866; font-size: 10px; font-weight: 400; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111; }
.line-list-group { margin: 5px 0; border: 1px solid #505050; border-radius: 4px; overflow: hidden; }
.line-list-group summary { display: flex; justify-content: space-between; align-items: center; padding: 7px 9px; background: #292929; }
.line-list-group-name, .multi-line-group-name { color: #8dd6ee; font-weight: 600; }
.line-list-group summary small, .multi-line-group summary small { color: #999; font-size: 10px; }
.line-list-group-rows > button { border-radius: 0; margin: 0; border-width: 1px 0 0; }
.line-panel-actions, .line-reorder-actions { display: flex; gap: 6px; margin: 10px 20px; }
.line-panel-actions button, .line-reorder-actions button { flex: 1; min-width: 0; }
.line-properties-form { border-top: 1px solid #505050; padding-top: 4px; }
.line-properties-form .field { margin: 8px 20px; justify-content: space-between; }
.line-properties-form .field > input, .line-properties-form .field > select { min-width: 0; width: 58%; }
.line-properties-form .checkbox-field { justify-content: flex-start; gap: 8px; }
.line-properties-form .checkbox-field input { width: auto; }
.line-texture-library { margin: 8px 20px; border: 1px solid #505050; }
.line-texture-library > summary { padding: 6px 8px; font-size: 11px; }
.line-texture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; padding: 6px; max-height: 190px; overflow: auto; }
.line-texture-grid button { min-width: 0; padding: 3px; overflow: hidden; color: #ddd; font-size: 10px; }
.line-texture-grid button.selected { border-color: var(--accent); background: #4d4632; }
.line-texture-grid img { display: block; width: 100%; height: 46px; object-fit: contain; background: #202020; margin-bottom: 3px; }
.line-groups { margin: 14px 10px; }
.line-group-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 8px 20px; }
.line-group-row input, .line-group-row select { width: 100%; min-width: 0; }
.line-group-label { margin-left: auto; max-width: 34%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8dd6ee; font-size: 12px; pointer-events: none; }
details { border-top: 1px solid #505050; margin: 12px 10px; }
summary { cursor: pointer; padding: 12px; color: #bbb; }
footer { display: flex; gap: 12px; padding: 5px 12px; align-items: center; font-size: 11px; background: #202020; color: #aaa; flex: none; }
footer .chart-info { font-size: 12px; max-width: min(900px, 70vw); }
footer .chart-info dd { color: #ddd; }
footer #chart-info-toggle { padding: 3px 8px; color: var(--accent); }
#tips { max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c6b477; }
#status { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
dialog { color: #eee; background: #303030; border: 1px solid #aaa; width: min(850px, 88vw); max-height: 90vh; padding: 22px; }
dialog::backdrop { background: #000a; }
.modal-heading { display: flex; justify-content: space-between; align-items: center; }
h2 { margin: 0; font-size: 21px; font-weight: 400; }
#modal-description { color: #bbb; white-space: pre-wrap; line-height: 1.8; }
#modal-content { max-height: 58vh; overflow: auto; }
#modal-content textarea { width: 100%; min-height: 300px; font: 13px/1.5 Consolas, monospace; padding: 10px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
#modal-error { color: #ffaaaa; white-space: pre-wrap; }
.choice { display: block; width: 100%; white-space: normal; text-align: left; padding: 12px; margin: 5px 0; }
.bpm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin: 10px 0; width: 100%; min-width: 0; }
.bpm-row input { width: 100%; min-width: 0; }
.bpm-row button { min-width: 0; padding-inline: 7px; }
.easing-gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px; }
.easing-gallery button { padding: 4px; font-size: 10px; }
.easing-gallery img { width: 100%; aspect-ratio: 1; display: block; object-fit: contain; }
.bezier-editor { display: block; width: 100%; height: 100px; margin: 6px 0; background: #202020; border: 1px solid #555; cursor: crosshair; touch-action: none; user-select: none; }
#line-info-overlay { position: absolute; z-index: 4; top: 8px; left: 40px; padding: 8px 12px; max-width: min(680px, 78%); background: #171717dd; border: 1px solid #8e7a3d; color: #f4e3a2; font-size: 13px; line-height: 1.7; font-variant-numeric: tabular-nums; pointer-events: none; white-space: pre-line; box-shadow: 0 2px 8px #0008; }
#home { flex: 1; min-height: 0; overflow: auto; padding: 30px 5%; background: #252525; }
.home-heading { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 24px; }
.home-heading > div { display: grid; grid-template-columns: 54px auto; column-gap: 14px; align-items: center; }
.home-heading img { width: 54px; grid-row: 1 / 3; }
.home-heading h1, .home-heading p { grid-column: 2; }
.home-heading h1 { font-size: 26px; margin: 0; font-weight: 400; }
.home-heading p { color: #aaa; margin: 8px 0; }
.home-actions, .home-filters { display: flex; gap: 12px; align-items: center; margin: 20px 0; }
.home-actions button { padding: 12px 20px; }
#project-search { flex: 1; padding: 10px; }
#project-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 16px; }
.project-card { border: 1px solid #555; background: #303030; overflow: hidden; border-radius: 6px; }
.project-information { padding: 16px; }
.project-cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #504629, #202832); display: grid; place-items: center; overflow: hidden; }
.project-cover span { color: #cfbb7e; font-size: 56px; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-credits { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-detail { min-height: 34px; line-height: 1.6; }
.home-back { border: 1px solid #d6b552; color: #ffe496; background: #514524; font-weight: bold; }
#y-scale-slider { width: 90px; min-width: 60px; }
.diagnose-group { margin: 10px 20px; border: 1px solid #555; }
.diagnose-group > summary { padding: 8px 10px; background: #383838; }
.diagnose-subgroup { margin: 6px 8px; border: 1px solid #484848; }
.diagnose-subgroup > summary { padding: 5px 8px; background: #303030; color: #ccc; }
.diagnose-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; padding: 7px 9px; border-top: 1px solid #4a4a4a; }
.diagnose-item button { padding: 3px 7px; }
.diagnose-item.error { border-left: 3px solid #e46e6e; }
.diagnose-item.warning { border-left: 3px solid #e6c65c; }
.diagnose-item.info { border-left: 3px solid #65c878; }
.diagnose-filter { justify-content: flex-start; }
.history-results { display: flex; flex-direction: column; gap: 4px; margin: 10px 20px 16px; }
.history-results button { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.multi-line-controls, .multi-line-actions { display: flex; gap: 6px; margin: 10px 20px; }
.multi-line-controls button, .multi-line-actions button { flex: 1; min-width: 0; padding: 7px 5px; }
.multi-line-controls button.active { color: #161616; background: var(--accent); border-color: var(--accent); }
.multi-line-list { margin: 12px 14px; border: 1px solid #505050; border-radius: 4px; overflow: auto; max-height: 58vh; }
.multi-line-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) max-content; gap: 6px; align-items: center; margin: 0; padding: 7px 8px; border-bottom: 1px solid #414141; background: #292929; }
.multi-line-row:last-child { border-bottom: 0; }
.multi-line-row.current { background: #4d4632; color: #ffe39a; }
.multi-line-row.selected { box-shadow: inset 3px 0 var(--accent); }
.multi-line-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.multi-line-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.multi-line-line-name { min-width: 0; }
.multi-line-features { color: #d9a866; font-size: 10px; font-weight: 400; text-shadow: 1px 0 #111, -1px 0 #111, 0 1px #111, 0 -1px #111; }
.multi-line-group { margin: 5px; border: 1px solid #505050; border-radius: 4px; overflow: hidden; }
.multi-line-group summary { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; background: #292929; }
.multi-line-group-rows .multi-line-row { border-radius: 0; }
.multi-line-row small { font-variant-numeric: tabular-nums; }
.multi-line-width-field { margin: 8px 20px; }
.multi-line-width-controls { display: flex; align-items: center; gap: 8px; width: 100%; }
.multi-line-width-controls input[type=range] { flex: 1; min-width: 0; }
.multi-line-width-controls output { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; color: #ddd; }
.multi-line-width-controls button { padding: 4px 8px; }
.multi-line-expression-field { margin: 8px 20px; }
.multi-line-expression-field input { width: 100%; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.editor.notes-only .canvases { grid-template-columns: 24px minmax(0, 1fr) 24px; }
.editor.notes-only #notes { grid-column: 2; }
.editor.notes-only #events { display: none; }
.editor.notes-only #note-density { grid-column: 1; }
.editor.notes-only #history-strip { grid-column: 3; }
.beat-input-wrap { position: relative; display: block; width: 59%; }
.field .beat-input-wrap > input { width: 100%; padding-right: 18px; box-sizing: border-box; }
.beat-nudge { position: absolute; top: 2px; right: 2px; bottom: 2px; width: 15px; display: flex; flex-direction: column; opacity: 0; transition: opacity 120ms ease; }
.beat-input-wrap:hover .beat-nudge, .beat-input-wrap:focus-within .beat-nudge { opacity: 1; }
.beat-nudge button { flex: 1; min-width: 15px; min-height: 0; height: 50%; padding: 0; border: 0; border-radius: 0; font-size: 9px; line-height: 9px; font-weight: 700; }
.settings-body { max-height: 65vh; overflow: auto; padding-right: 12px; }
.settings-body h3 { color: #e5c878; border-bottom: 1px solid #555; padding-bottom: 10px; }
.settings-body .field { grid-template-columns: 1fr 200px; }
.project-card h2 { margin: 8px 0; font-size: 18px; overflow-wrap: anywhere; }
.project-card p { color: #aaa; font-size: 12px; }
.project-card .project-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.project-card .project-open { width: 100%; padding: 10px; }
.project-card .project-edit { background: none; border: 0; padding: 0; white-space: normal; text-align: left; }
@media (max-width: 1250px) {
  :root { font-size: 12px; }
  header { gap: 8px; }
  .brand { font-size: 16px; }
  nav { gap: 3px; }
  nav button { padding: 6px; }
  nav button[data-icon]::before { display: none; }
  kbd, #bpm-display { display: none; }
  .transport { gap: 7px; }
  .editor-toolbar { gap: 5px; }
  .editor-toolbar:not(.mode-wide) .tools button { min-width: 37px; width: 37px; padding: 4px; font-size: 0; }
  .editor-toolbar:not(.mode-wide) .tools img { width: 30px; height: 9px; margin: 0 auto; }
  .editor-toolbar:not(.mode-wide) > label { gap: 2px; }
  .editor-toolbar:not(.mode-wide) > label:not([title*="吸附"]) { font-size: 0; }
  .editor-toolbar:not(.mode-wide) > label > input { width: 42px; }
  .editor-toolbar:not(.mode-wide) #y-scale { width: 46px; }
  .editor-toolbar:not(.mode-wide) #y-scale-slider { width: 60px; }
  .view-controls-inline { gap: 3px; }
  .view-controls-inline label span { display: none; }
  .view-controls-inline input[type=number] { width: 42px; }
  .view-controls-inline select { width: 52px; }
  .field { margin: 11px 14px; }
}