:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff; --panel: #fff; --line: #d3d3d3; --line-strong: #8b8b8b;
  --text: #111; --muted: #5f5f5f; --accent: #426b00; --accent-soft: #f1f7e5;
  --source: #fffaf0; --source-line: #d99a34; --display-line: #b9a000; --result: #f7fbf5; --result-line: #6b9d48; --correction-line: #3478c7;
  --danger: #a9281c; --focus: #1167a8;
  --syntax-chord: #120EFD; --syntax-key: #d7193f; --syntax-directive: #287300;
  --mono: "Cascadia Code", "Yu Gothic UI", "Noto Sans Mono CJK JP", Consolas, monospace;
  --sans: Inter, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", sans-serif;
  --editor-font: Meiryo, "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --editor-font-size: 14px;
}
:root[data-theme="dark-gray"] {
  color-scheme: dark;
  --bg: #202124; --panel: #2b2d31; --line: #45474d; --line-strong: #73767f;
  --text: #f2f2f2; --muted: #b8bac0; --accent: #d7ff64; --accent-soft: #363d27;
  --source: #332d25; --source-line: #d6923d; --display-line: #d2b400; --result: #293228; --result-line: #85ad68; --correction-line: #69a9ef;
  --danger: #ff8d82; --focus: #b5d9ff;
  --syntax-chord: #82b4ff; --syntax-key: #ff7f91; --syntax-directive: #b7e86a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111310; --panel: #191c18; --line: #343a31; --line-strong: #62695c;
  --text: #f2f0e8; --muted: #a9afa2; --accent: #d7ff64; --accent-soft: #263014;
  --source: #241d13; --source-line: #d6923d; --display-line: #d2b400; --result: #172116; --result-line: #85ad68; --correction-line: #69a9ef;
  --danger: #ff8d82; --focus: #b5d9ff;
  --syntax-chord: #70a7ff; --syntax-key: #ff7f91; --syntax-directive: #b7e86a;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--text); background: var(--bg); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { color: inherit; }
.app-header, main { width: calc(100% - 28px); max-width: none; margin-inline: auto; }
.app-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px 0 14px; border-bottom: 1px solid var(--line); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 3px; font-size: clamp(1.45rem, 2.8vw, 2.35rem); line-height: 1; letter-spacing: -.04em; }
.app-logo { width: min(496px, 57.6vw); margin: 0; line-height: 0; }
.app-logo a { display: inline-block; max-width: 100%; }
.app-logo img { display: block; width: 100%; height: auto; }
h2 { margin-bottom: 0; font-size: .96rem; }
.eyebrow, .section-kicker { margin-bottom: 5px; color: var(--accent); font: 700 .63rem/1 var(--mono); letter-spacing: .13em; }
.app-header .eyebrow { margin-bottom: 2px; padding-left: 0.5em; color: var(--muted); font: 400 clamp(.92rem, 1.4vw, 1.08rem)/1.4 var(--sans); letter-spacing: .015em; }
.subtitle { margin-bottom: 0; color: var(--muted); font-size: .8rem; }
.privacy-badge { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .7rem; }
.privacy-badge span { color: var(--accent); margin-right: 5px; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.help-open-button, .help-close-button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); cursor: pointer; font-weight: 800; }
.help-open-button:hover, .help-close-button:hover { border-color: var(--accent); background: var(--accent-soft); }
main { padding: 12px 0 28px; }
.settings-panel { position: absolute; z-index: 30; min-width: 0; margin: 0; }
.settings-panel.settings-compact { min-height: 0; background: transparent; filter: drop-shadow(8px 8px 18px rgb(0 0 0 / .2)); }
.settings-panel.settings-compact .settings-shell { overflow: auto; max-height: none; }
.settings-panel.settings-compact .settings-grid { grid-template-columns: 1fr; }
.settings-panel.settings-compact .setting-example { display: block; width: 100%; margin-top: 5px; padding: 4px 6px; border-left-width: 3px; font-size: 11px; line-height: 1.42; }
.settings-panel.settings-compact .setting-example span { margin-top: 0; }
.settings-panel.settings-compact .setting-example .example-subhead { margin-top: 3px; }
.settings-panel.settings-examples-closed .setting-example { display: none; }
.settings-shell { position: relative; overflow: visible; width: 100%; min-width: 0; height: auto; padding: 7px 8px 8px 10px; border: 1px dashed color-mix(in srgb, var(--display-line) 70%, var(--line)); border-left: 4px solid var(--display-line); border-radius: 2px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--display-line)), var(--panel) 42%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--display-line) 25%, transparent); resize: none; }
.settings-shell::before { content: "CONTROL PANEL"; position: absolute; top: -7px; right: 9px; padding: 0 5px; color: var(--muted); background: var(--bg); font: 700 .55rem/1 var(--mono); letter-spacing: .1em; }
#settings-body:not([hidden]) { margin-top: 4px; }
.settings-profile-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 2px 0 4px; }
.settings-profile-picker button { min-width: 0; min-height: 31px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); font-size: .72rem; font-weight: 800; line-height: 1.2; cursor: pointer; }
.settings-profile-picker button:hover, .settings-profile-picker button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.settings-profile-picker button[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.custom-profile-name-field { display: grid; grid-template-columns: minmax(96px, 124px); gap: 2px; margin: 0 auto 0 0; color: var(--muted); font-size: .7rem; font-weight: 800; }
.custom-profile-name-field[hidden] { display: none; }
.custom-profile-name-field input { width: 100%; height: 32px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); font: 14px var(--editor-font); }
.custom-profile-name-field input:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
.custom-profile-name-field small { color: var(--muted); font-size: .62rem; font-weight: 400; line-height: 1.2; }
.settings-recommendation { margin: 2px 0 6px; padding: 5px 7px; border-left: 3px solid var(--accent); color: var(--muted); background: var(--accent-soft); font-size: .72rem; line-height: 1.3; }
.settings-recommendation strong { color: var(--text); }
.section-heading, .editor-heading, .settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-primary-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; gap: 5px; width: 100%; min-height: 34px; padding: 2px; }
.settings-primary-actions .text-button { min-width: 0; padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: .75rem; font-weight: 800; }
.settings-primary-actions .text-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.settings-primary-actions #settings-toggle { width: 100%; }
.settings-reset-button { width: auto; min-width: 112px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: .72rem; font-weight: 800; }
.settings-panel.settings-closed .settings-reset-button, .settings-panel.settings-closed .settings-footer-actions, .settings-panel.settings-closed .settings-example-toggle { display: none; }
.settings-example-toggle { position: static; width: 100%; min-width: 0 !important; height: auto; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.settings-footer-actions { position: sticky; right: 0; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 7px; padding-top: 6px; background: linear-gradient(transparent, var(--panel) 35%); }
.settings-heading-copy { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.settings-heading-copy > span { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.heading-with-help, .removal-label-with-help { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.context-help { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--text); font: 700 11px/1 var(--sans); letter-spacing: 0; white-space: normal; }
.context-help-button { display: inline-grid; width: 18px; height: 18px; padding: 0; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: var(--panel); font: 800 11px/1 var(--sans); cursor: help; }
.context-help-button:hover, .context-help-button:focus-visible, .context-help-button[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); outline: none; }
.context-help-popover { position: absolute; z-index: 40; top: calc(100% + 7px); left: 0; width: min(300px, calc(100vw - 32px)); padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--text); background: var(--panel); box-shadow: 0 7px 20px rgba(0, 0, 0, .16); font: 500 .74rem/1.65 var(--sans); letter-spacing: 0; text-align: left; white-space: normal; }
.context-help-title { display: block; margin: 0 0 4px; color: var(--text); font-size: .78rem; font-weight: 800; line-height: 1.4; }
.context-help-popover[hidden] { display: none; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 5px; align-items: stretch; }
.setting-field { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--panel) 92%, var(--line)); }
.setting-core { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto auto auto; align-content: start; align-items: start; gap: 3px 9px; min-width: 0; }
.setting-field label { grid-column: 1 / -1; grid-row: 1; display: block; overflow: visible; margin: 0; font-size: .78rem; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.setting-core > input, .setting-core > select, .setting-core > .setting-value-stepper { grid-column: 1; grid-row: 2; }
.setting-number { display: inline-block; min-width: 1.5em; color: var(--accent); font-family: var(--mono); }
.setting-field input, .setting-field select { width: 88px; height: 32px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font: 14px var(--mono); }
.setting-field input:focus, .setting-field select:focus { border-color: var(--focus); outline: 1px solid var(--focus); }
.setting-value-stepper { display: grid; grid-template-columns: 52px 28px 28px; overflow: hidden; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.setting-value-stepper input, .setting-value-stepper select { width: 100%; height: 28px; padding: 3px 6px; border: 0; border-radius: 0; font-size: .75rem; }
.setting-value-stepper button { height: 28px; padding: 0; border: 0; border-left: 1px solid var(--line); color: var(--text); background: var(--panel); cursor: pointer; font-size: .72rem; }
.setting-value-stepper button:hover { background: var(--accent-soft); }
.setting-value-stepper:focus-within { border-color: var(--focus); outline: 1px solid var(--focus); }
.setting-value-stepper input:focus, .setting-value-stepper select:focus { outline: none; }
.setting-field small { display: block; }
.setting-bounds { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.setting-error { grid-column: 1; grid-row: 4; }
.setting-quick-help { grid-column: 2; grid-row: 2 / 5; align-self: start; margin: 0; color: var(--text); font-family: var(--editor-font); font-size: clamp(10px, calc(var(--editor-font-size) * .78), 13px); line-height: 1.4; overflow-wrap: anywhere; }
.setting-quick-help > span { display: block; }
.setting-field .setting-error:not(:empty) { display: block; margin-top: 3px; color: var(--danger); font-size: .63rem; }
.settings-footer { margin-top: 7px; color: var(--muted); font-size: .78rem; }
.setting-example { grid-column: 1 / -1; justify-self: start; width: max-content; max-width: 100%; margin-top: 3px; padding: 9px 10px; border-left: 4px solid var(--accent); color: var(--text); background: var(--accent-soft); font-family: var(--editor-font); font-size: 13px; line-height: 1.65; overflow-x: auto; overflow-y: hidden; }
.setting-example span { display: block; width: max-content; margin-top: 2px; white-space: nowrap; }
.setting-example .example-subhead { margin-top: 6px; color: var(--accent); font-family: var(--sans); font-weight: 800; }
.text-button { padding: 1px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--muted); background: transparent; cursor: pointer; font-size: .68rem; }
.workspace { --top-editor-height: clamp(210px, 24vh, 230px); --result-editor-height: clamp(300px, 48vh, 680px); --final-editor-height: clamp(220px, 36vh, 520px); --committed-editor-height: clamp(220px, 36vh, 520px); --left-column-width: clamp(220px, 28%, 360px); position: relative; display: grid; grid-template-columns: var(--left-column-width) minmax(0, 1fr); gap: 0 10px; align-items: start; }
.community-panel { width: 100%; min-width: 0; overflow: hidden; margin: 0; padding: 9px 10px 9px; border: 1px solid var(--correction-line); border-radius: 5px; background: var(--panel); }
.community-panel .community-panel-heading { margin: -9px -10px 8px; }
.community-section-label, .community-tools > small { display: block; margin-bottom: 4px; color: var(--muted); font: 800 .62rem/1 var(--mono); letter-spacing: .08em; }
.community-self-links { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; }
.community-self-links a { display: block; flex: 0 1 auto; min-width: 0; line-height: 0; text-decoration: none; }
.community-self-links img { display: block; width: 100%; height: auto; }
.community-self-links .community-site-logo { flex: 1 1 400px; }
.community-self-links .community-site-logo img,
.community-self-links .community-github-logo img { width: auto;  max-width: 100%;  height: auto;  max-height: 60px;}
.community-self-links .community-github-logo { flex: 0 1 144px; align-self: center; padding: 0; background: #24292f; }
.community-self-links a:hover, .community-self-links a:focus-visible { opacity: .82; outline: 2px solid var(--accent); outline-offset: 2px; }
.community-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px; margin-top: 7px; }
.community-action, .support-menu summary { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; height: 34px; min-height: 34px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: color-mix(in srgb, var(--panel) 96%, var(--accent)); font-size: .75rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.community-action:hover, .community-action:focus-visible, .support-menu summary:hover, .support-menu summary:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.community-feedback { border-color: color-mix(in srgb, var(--correction-line) 38%, var(--line)); }
.community-feedback-label { display: grid; gap: 1px; min-width: 0; }
.community-feedback-label strong { font-size: .76rem; line-height: 1.18; }
.community-feedback-label small { color: var(--muted); font-size: .6rem; font-weight: 500; line-height: 1.18; white-space: nowrap; }
.community-github { border-color: color-mix(in srgb, var(--text) 24%, var(--line)); }
.community-live-site { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.community-github-label { display: grid; gap: 1px; min-width: 0; }
.community-github-label strong { font-size: .76rem; line-height: 1.18; }
.community-github-label small { color: var(--muted); font-size: .6rem; font-weight: 500; line-height: 1.18; }
.community-github-icon { flex: 0 0 auto; color: var(--muted); font-size: 1rem; line-height: 1; }
.support-menu { min-width: 0; }
.support-menu summary { border-color: color-mix(in srgb, var(--source-line) 38%, var(--line)); list-style: none; }
.support-menu summary::-webkit-details-marker { display: none; }
.support-menu-caret { color: var(--muted); font-size: .64rem; transition: transform .16s ease; }
.support-menu[open] .support-menu-caret { transform: rotate(180deg); }
.support-menu-links { display: grid; gap: 4px; padding-top: 5px; }
.support-choice { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--panel); text-decoration: none; }
.support-choice:hover, .support-choice:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.support-choice strong { font-size: .72rem; line-height: 1.3; }
.support-choice small { color: var(--muted); font-size: .6rem; line-height: 1.3; }
.support-choice-booth { border-left: 3px solid var(--source-line); }
.support-choice-fanbox { border-left: 3px solid var(--accent); }
.site-credit { display: grid; gap: 3px; margin: 5px 0 0; padding: 5px 1px 0; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.site-credit-main { display: grid; gap: 1px; }
.site-credit-main strong { color: var(--text); font-size: .7rem; }
.site-credit p { margin: 0; text-align: left; }
.community-tools { display: grid; gap: 1px; margin: 8px -10px -9px; padding: 7px 10px 8px; border-top: 1px solid var(--line); }
.community-tools > small { margin-bottom: 2px; }
.community-tools a { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "author"; align-items: baseline; min-width: 0; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: color-mix(in srgb, var(--panel) 96%, var(--accent)); font-size: .7rem; line-height: 1.25; text-decoration: none; }
.community-tools a:hover, .community-tools a:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); outline: none; }
.community-tools strong { grid-area: title; min-width: 0; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.community-tools span { grid-area: author; color: var(--muted); font-size: .68rem; white-space: nowrap; }
.site-credit a { color: var(--text); text-underline-offset: 2px; }
.site-credit a:hover, .site-credit a:focus-visible { color: var(--accent); }
.font-panel { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; margin-bottom: 122px; }
.display-settings-shell { position: relative; display: grid; gap: 7px; min-width: 0; min-height: 0; padding: 7px 8px 8px 10px; overflow: visible; border: 1px dashed color-mix(in srgb, var(--display-line) 70%, var(--line)); border-left: 4px solid var(--display-line); border-radius: 2px; background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 94%, var(--display-line)), var(--panel) 42%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--display-line) 25%, transparent); font-family: var(--editor-font); font-size: var(--editor-font-size); line-height: 1.5; }
.display-settings-shell::before { content: "CONTROL PANEL"; position: absolute; top: -7px; right: 9px; padding: 0 5px; color: var(--muted); background: var(--bg); font: 700 .55rem/1 var(--mono); letter-spacing: .1em; }
.display-settings-body { display: grid; gap: 9px; min-height: 96px; padding: 2px 14px 14px 0; overflow: auto; }
.display-primary-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; min-height: 34px; padding: 2px; }
.display-primary-actions .text-button { min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); font-size: .7rem; font-weight: 800; line-height: 1.25; white-space: normal; }
.display-primary-actions .text-button:hover { border-color: var(--display-line); color: var(--text); background: color-mix(in srgb, var(--panel) 88%, var(--display-line)); }
.display-settings-shell.display-collapsed { height: auto !important; min-height: 0; overflow: visible; }
.display-settings-shell.display-collapsed .display-settings-body { display: none; }
.display-settings-shell.display-collapsed .frame-resize-corner { display: none; }
.display-setting-row { display: grid; gap: 4px; min-width: 0; }
.display-setting-row > label, .display-setting-row > span, .sync-setting > span { font-size: inherit; font-weight: 800; }
.font-panel select { width: 100%; min-width: 0; height: 30px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font-family: inherit; font-size: inherit; }
.selection-stepper { display: grid; grid-template-columns: minmax(0, 1fr) 28px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.selection-stepper select { height: 28px; border: 0; border-radius: 0; }
.selection-stepper button, .stepper button { height: 28px; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: .72rem; }
.selection-stepper button:hover, .stepper button:hover { background: var(--accent-soft); }
.selection-stepper button:disabled { color: var(--muted); background: color-mix(in srgb, var(--panel) 88%, var(--line)); cursor: default; opacity: .55; }
.font-size-row { grid-template-columns: minmax(0, 1fr); }
.stepper { display: grid; grid-template-columns: minmax(42px, 1fr) 30px 30px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.stepper select { width: 100%; height: 28px; padding: 0 6px; border: 0; color: var(--text); background: var(--panel); font: 12px/1 var(--mono); text-align: left; }
.sync-setting { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.sync-setting input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.display-memory-note { margin: 1px 0 0; color: var(--muted); font-size: .85em; line-height: 1.35; }
.display-settings-shell button { font-family: inherit; font-size: inherit; }
.display-settings-shell .stepper select { font-family: inherit; font-size: inherit; }
.font-panel .editor-heading { gap: 6px; }
.display-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.layout-reset-button { flex: 0 1 auto; padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--panel); cursor: pointer; font-size: .6rem; line-height: 1.2; text-align: center; }
.layout-reset-button:hover { border-color: var(--display-line); color: var(--text); }
.display-toggle-button { min-width: 65px; }
.sample-insert-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 2px 7px 2px 2px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); cursor: pointer; font-size: .72rem; font-weight: 800; }
.sample-insert-button:hover { border-color: var(--display-line); background: color-mix(in srgb, var(--panel) 88%, var(--display-line)); }
.sample-header-button { display: flex; align-items: center; gap: 3px; height: 31px; padding: 0 7px 0 1px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); cursor: pointer; font-size: .68rem; font-weight: 800; }
.sample-header-button:hover { border-color: var(--source-line); background: color-mix(in srgb, var(--panel) 88%, var(--source-line)); }
.bracket-header-button { justify-content: center; padding-inline: 7px; white-space: nowrap; }
.inline-tool-icon { position: relative; display: inline-block; flex: 0 0 28px; width: 28px; height: 28px; vertical-align: middle; }
.correction-card { grid-column: 1; grid-row: 2; }
.correction-context-bar { position: relative; display: grid; gap: 5px; margin-bottom: 6px; padding: 6px 7px; border: 2px solid color-mix(in srgb, var(--correction-line) 78%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--panel) 90%, var(--correction-line)); }
.correction-position-with-help { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; min-width: 0; padding-right: 22px; }
.correction-position-with-help > .context-help { position: absolute; top: 4px; right: 4px; }
.correction-position-with-help .context-help-popover { right: 0; left: auto; }
.correction-position { display: block; min-width: 0; color: var(--text); font: 700 .66rem/1.45 var(--editor-font); overflow-wrap: anywhere; }
.correction-rebuild-button { min-height: 23px; padding: 3px 6px; border: 1px solid var(--correction-line); border-radius: 3px; color: var(--text); background: var(--panel); cursor: pointer; font: 800 .64rem/1.1 var(--sans); white-space: nowrap; }
.correction-rebuild-button:hover, .correction-rebuild-button:focus-visible { background: color-mix(in srgb, var(--panel) 80%, var(--correction-line)); }
.correction-history-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 4px; align-items: end; }
.correction-history-actions button { min-width: 0; min-height: 27px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); cursor: pointer; font: 800 .65rem/1 var(--sans); }
.correction-history-actions button:hover:not(:disabled) { border-color: var(--correction-line); background: color-mix(in srgb, var(--panel) 84%, var(--correction-line)); }
.correction-history-actions button:disabled { color: var(--muted); cursor: default; opacity: .5; }
.left-lower-stack { grid-column: 1; grid-row: 3; align-self: start; display: grid; gap: 12px; min-width: 0; margin-top: 12px; }
.correction-input-guide { position: relative; min-width: 0; min-height: 72px; height: auto; margin: 0; padding: 9px 12px 10px 10px; overflow: visible; border: 1px solid var(--correction-line); border-radius: 5px; background: var(--panel); font-family: var(--editor-font); font-size: var(--editor-font-size); line-height: 1.55; }
.auxiliary-panel-heading { margin: -9px -12px 9px -10px; padding: 9px 10px 8px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, var(--correction-line)); }
.auxiliary-panel-heading h3 { margin: 0; color: var(--text); font-size: .92em; line-height: 1.15; }
.auxiliary-panel-heading h3 span { color: var(--correction-line); font: 700 .62em/1 var(--mono); letter-spacing: .1em; }
.guide-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.correction-input-guide-body { font-size: .88em; line-height: 1.48; }
.correction-input-guide p { margin: 3px 0; overflow-wrap: anywhere; }
.guide-quick { margin: 0; }
.guide-quick-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; }
.guide-quick-label { color: var(--text); font: 800 .72rem/1 var(--sans); }
.guide-toggle-all { min-height: 25px; padding: 3px 7px; border: 1px solid var(--correction-line); border-radius: 3px; color: var(--text); background: color-mix(in srgb, var(--panel) 86%, var(--correction-line)); cursor: pointer; font: 800 .68rem/1 var(--sans); }
.guide-toggle-all:hover { background: color-mix(in srgb, var(--panel) 72%, var(--correction-line)); }
.guide-quick-list { display: grid; gap: 1px; }
.guide-item { margin: 0; border-left: 3px solid color-mix(in srgb, var(--correction-line) 65%, var(--line)); background: transparent; }
.guide-item summary { display: grid; grid-template-columns: 35px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 23px; padding: 2px 6px; background: color-mix(in srgb, var(--panel) 80%, var(--correction-line)); cursor: pointer; list-style: none; }
.guide-item summary::-webkit-details-marker { display: none; }
.guide-item summary:hover { background: color-mix(in srgb, var(--panel) 82%, var(--correction-line)); }
.guide-item summary:focus-visible, .guide-toggle-all:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.guide-item summary code { white-space: nowrap; }
.guide-item summary > span:not(.guide-item-arrow) { color: var(--text); }
.guide-item-arrow { color: var(--text); transition: transform .15s ease; }
.guide-item[open] .guide-item-arrow { transform: rotate(180deg); }
.guide-item-detail { display: grid; gap: 4px; padding: 5px 8px 7px 1em; border-top: 1px solid color-mix(in srgb, var(--line) 68%, transparent); color: var(--muted); background: color-mix(in srgb, var(--panel) 95%, var(--correction-line)); }
.guide-item-detail p { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: .35em; margin: 0; }
.guide-detail-heading { display: none !important; }
.guide-detail-label { display: flex; justify-content: space-between; color: var(--text); white-space: nowrap; }
.guide-detail-label::after { content: "："; }
.guide-detail-value { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.correction-input-guide .guide-indent { padding-left: 1em; color: var(--muted); }
.correction-input-guide strong { color: var(--text); }
.correction-input-guide code { font-family: inherit; font-size: inherit; font-weight: 800; }
.correction-input-guide .guide-input { color: var(--syntax-chord); }
.correction-input-guide .guide-output { color: var(--syntax-directive); font-weight: 800; }
.correction-input-guide .guide-arrow { padding: 0 .22em; color: var(--muted); }
.correction-input-guide span { color: var(--muted); }
.correction-input-guide .guide-output { color: var(--syntax-directive); }
.status-support-panel { min-width: 0; margin: 0; padding: 9px 12px 12px; border: 1px solid var(--correction-line); border-radius: 5px; background: var(--panel); font-family: var(--editor-font); font-size: var(--editor-font-size); line-height: 1.55; }
.status-support-panel .auxiliary-panel-heading { margin: -9px -12px 10px; }
.status-support-panel .status-detail { margin: 0; color: var(--text); font-size: 1em; line-height: 1.55; white-space: pre-line; }
.support-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.support-message > span { flex: 1 1 260px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.support-message:last-child { border-bottom: 0; }
.support-jump-button { flex: 0 0 auto; min-height: 25px; padding: 3px 7px; border: 1px solid var(--correction-line); border-radius: 3px; color: var(--text); background: color-mix(in srgb, var(--panel) 86%, var(--correction-line)); cursor: pointer; font: 800 .68rem/1 var(--sans); }
.support-jump-button:hover { background: color-mix(in srgb, var(--panel) 72%, var(--correction-line)); }
.input-card { grid-column: 2; grid-row: 1; align-self: end; }
.output-card { grid-column: 2; grid-row: 2; margin-top: var(--result-controls-offset, 0px); }
.right-lower-stack { grid-column: 2; grid-row: 3; align-self: start; display: grid; gap: 12px; min-width: 0; margin-top: 12px; }
.final-card, .committed-card { min-width: 0; margin-top: 0; }
.input-card::after, .output-card::after, .correction-card::after { position: absolute; z-index: 2; pointer-events: none; font: 700 12px/1 var(--sans); }
.input-card::after { content: "▼"; left: 50%; bottom: -13px; color: color-mix(in srgb, var(--source-line) 38%, transparent); transform: translateX(-50%); }
.output-card::after { content: "▼"; left: 50%; bottom: -13px; color: color-mix(in srgb, var(--result-line) 42%, transparent); transform: translateX(-50%); }
.correction-card::after { content: "▶"; top: 50%; right: -10px; color: color-mix(in srgb, var(--correction-line) 38%, transparent); transform: translateY(-50%); }
.editor-card { position: relative; }
.column-resize-edge { position: absolute; z-index: 3; top: 34px; right: -5px; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; }
.column-resize-edge::after { content: ""; position: absolute; top: 0; right: 4px; bottom: 0; width: 1px; background: transparent; transition: background .15s; }
.column-resize-edge:hover::after, .column-resize-edge:focus-visible::after, .column-resize-edge.dragging::after { background: var(--focus); }
.column-resize-edge:focus-visible { outline: none; }
.guide-column-resize-edge { top: 0; bottom: 0; }
.editor-column-resize-edge { top: 0; right: auto; bottom: 0; left: -5px; }
.editor-column-resize-edge::after { right: auto; left: 4px; }
.settings-column-resize-edge { top: 0; bottom: 0; }
.settings-left-resize-edge, .correction-left-resize-edge { top: 0; bottom: 0; }
.input-right-resize-edge, .output-right-resize-edge, .final-right-resize-edge { top: 0; bottom: 0; }
.editor-card { min-width: 0; }
.editor-heading { min-height: 34px; padding: 0 5px; }
.editor-tools { display: flex; align-items: center; gap: 8px; }
.counter { color: var(--muted); font: .66rem/1 var(--mono); }
.editor-shell { display: grid; grid-template-columns: max-content minmax(0, 1fr); overflow: hidden; width: 100%; min-width: 0; min-height: 3.3em; height: var(--top-editor-height); border: 1px solid; border-radius: 5px; background: var(--panel); resize: none; }
.correction-card .editor-shell { --correction-mode-width: 3.2em; --correction-scrollbar-width: 16px; grid-template-columns: max-content minmax(0, 1fr) var(--correction-mode-width) var(--correction-scrollbar-width); grid-template-rows: 1.45em minmax(0, 1fr); width: 100%; min-width: 0; height: var(--result-editor-height); border-color: var(--correction-line); resize: none; }
.correction-card .editor-shell > .line-numbers, .correction-card .editor-shell > .editor-text-layer, .correction-card .editor-shell > .correction-modes { grid-row: 2; }
.correction-column-headings { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; min-width: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--panel) 84%, var(--correction-line)); font: 800 calc(var(--editor-font-size) * .64)/1.45em var(--sans); text-align: center; user-select: none; }
.correction-column-headings span { display: grid; min-width: 0; padding-inline: 3px; place-items: center; white-space: nowrap; }
.correction-column-headings span + span { border-left: 1px solid var(--line); }
.correction-column-headings span:last-child { grid-column: 3 / -1; padding-right: var(--correction-scrollbar-width); }
.correction-card .line-numbers { text-align: center; }
.correction-card .editor-text-layer { z-index: 0; grid-column: 2 / -1; }
.correction-card .editor-text-layer textarea, .correction-card .editor-highlight { padding-right: calc(var(--correction-mode-width) + var(--correction-scrollbar-width)); text-align: left; }
.correction-card .editor-text-layer textarea { scrollbar-gutter: stable; }
.input-card .editor-shell { border-color: var(--source-line); }
.output-card .editor-shell { grid-template-rows: 1.45em minmax(0, 1fr); height: var(--result-editor-height); border-color: var(--result-line); }
.output-card .editor-shell > .line-numbers, .output-card .editor-shell > .editor-text-layer { grid-row: 2; }
.output-column-headings { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; min-width: 0; border-bottom: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--panel) 84%, var(--result-line)); font: 800 calc(var(--editor-font-size) * .64)/1.45em var(--sans); user-select: none; }
.output-column-headings span { display: grid; min-width: 0; align-items: center; padding-inline: 3px; white-space: nowrap; }
.output-column-headings span:first-child { justify-items: center; }
.output-column-headings span:last-child { justify-items: start; padding-left: 1em; border-left: 1px solid var(--line); }
.final-card .editor-shell { height: var(--final-editor-height); border-color: var(--accent); }
.committed-card .editor-shell { height: var(--committed-editor-height); border-color: var(--accent); }
.committed-card .editor-shell.committed-collapsed { height: 43px; min-height: 43px; overflow: hidden; }
.committed-card .editor-shell.committed-collapsed textarea, .committed-card .editor-shell.committed-collapsed .editor-highlight { overflow: hidden; white-space: pre; }
.committed-card .editor-shell.committed-collapsed + .frame-resize-corner { display: none; }
.removal-controls { display: grid; grid-template-columns: max-content minmax(190px, 230px) minmax(72px, 100px) max-content; align-items: center; gap: 6px 8px; margin-bottom: 6px; color: var(--muted); font-size: .7rem; }
.measure-capacity-warning { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding: 6px 8px; border: 1px solid #d5912c; border-left-width: 4px; border-radius: 3px; color: var(--text); background: color-mix(in srgb, var(--panel) 82%, #d5912c); font-size: .72rem; line-height: 1.45; }
.measure-capacity-warning[hidden] { display: none; }
.measure-capacity-warning-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.measure-capacity-warning button { flex: 0 0 auto; min-height: 27px; padding: 3px 7px; border: 1px solid #d5912c; border-radius: 3px; color: var(--text); background: var(--panel); cursor: pointer; font: 800 .68rem/1.2 var(--sans); }
.measure-capacity-warning button:hover { background: color-mix(in srgb, var(--panel) 70%, #d5912c); }
.removal-controls label { color: var(--text); font-weight: 800; }
.removal-controls > select, .removal-controls > input[type="text"] { width: 100%; height: 27px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); }
.removal-controls > select { font: 700 .7rem var(--sans); }
.removal-controls > input[type="text"] { font: 13px var(--mono); }
.removal-controls > select:disabled, .removal-controls > input:disabled { cursor: not-allowed; opacity: .58; }
.removal-linked-setting { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; }
.removal-linked-setting input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
#removal-summary { z-index: 1; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; overflow: hidden; max-width: calc(100% - 9em); margin-right: 7px; padding-left: 8px; color: var(--accent); background: color-mix(in srgb, var(--panel) 84%, var(--result-line)); font: 800 calc(var(--editor-font-size) * .6)/1.2 var(--sans); text-align: right; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.output-card .editor-heading, .final-card .editor-heading { flex-wrap: wrap; }
.output-card .editor-tools { flex-wrap: wrap; justify-content: flex-end; }
.preview-heading-tools { flex: 0 0 auto; justify-content: flex-end; }
.preview-controls { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 5px 8px; min-height: 29px; margin-bottom: 6px; padding: 0 5px; overflow-x: auto; scrollbar-width: thin; }
.output-diff-setting, .output-bar-setting, .final-bar-setting { display: flex; align-items: center; gap: 5px; color: var(--text); font-size: .78rem; font-weight: 800; white-space: nowrap; cursor: pointer; }
.diff-legend { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .66rem; font-weight: 800; white-space: nowrap; }
.diff-legend i { display: block; width: 12px; height: 12px; border-radius: 3px; background: color-mix(in srgb, #48b86b 30%, transparent); box-shadow: inset 0 -2px 0 #26964a; }
.output-diff-setting input, .output-bar-setting input, .final-bar-setting input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.preview-control { display: flex; align-items: center; gap: 4px; color: var(--text); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.preview-control select { height: 28px; min-width: 76px; padding: 2px 24px 2px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font: inherit; }
.preview-transpose-stepper { display: grid; grid-template-columns: minmax(76px, 1fr) 28px 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); }
.preview-transpose-stepper select { width: 100%; height: 28px; padding: 2px 24px 2px 6px; border: 0; border-radius: 0; }
.preview-transpose-stepper button { width: 28px; height: 28px; padding: 0; border: 0; border-left: 1px solid var(--line); color: var(--text); background: var(--panel); cursor: pointer; font-size: .68rem; }
.preview-transpose-stepper button:hover { background: var(--accent-soft); }
.preview-transpose-stepper button:disabled { color: var(--muted); cursor: default; opacity: .5; }
.preview-transpose-stepper:focus-within { border-color: var(--focus); outline: 1px solid var(--focus); }
.score-window-button { display: inline-flex; align-items: center; min-height: 29px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); cursor: pointer; font-size: .72rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.score-window-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.key-settings-dialog { width: min(1320px, calc(100% - 28px)); height: min(90vh, 900px); }
.key-settings-content { overflow-x: hidden; padding: 16px 20px 22px; }
.key-settings-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.key-settings-layout > * { min-width: 0; }
.key-settings-editor { min-width: 0; }
.key-global-settings { margin: 0 0 10px; padding: 11px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 5px; background: var(--panel); }
.key-global-settings h3 { margin: 0 0 9px; font-size: .88rem; }
.key-global-controls { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(120px, .8fr) minmax(100px, .7fr); gap: 8px 10px; align-items: center; }
.key-global-controls .preview-control { justify-content: space-between; min-width: 0; }
.key-global-controls .final-bar-setting { grid-column: 1 / -1; white-space: normal; }
.key-settings-preview-panel { position: sticky; top: 82px; min-width: 0; height: calc(min(90vh, 900px) - 120px); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.key-settings-preview-panel h3 { margin: 0; padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: .85rem; }
.key-settings-score-preview { height: calc(100% - 38px); overflow: auto; padding: 14px; }
.key-settings-note { margin: 0 0 12px; padding: 9px 11px; border-left: 3px solid var(--accent); color: var(--muted); background: var(--accent-soft); font-size: .82rem; }
.key-settings-list { display: grid; gap: 10px; }
.key-section-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; min-width: 0; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
.key-section-summary strong, .key-section-summary span { display: block; }
.key-section-summary span { margin-top: 3px; color: var(--muted); font-size: .74rem; }
.key-section-card select, .key-section-card input { width: 100%; min-height: 34px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--bg); }
.key-section-key-tools { display: grid; grid-template-columns: minmax(90px, 1fr) auto; gap: 6px; }
.key-estimate-candidates { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; min-height: 1.6em; color: var(--muted); font-size: .72rem; }
.key-estimate-candidates button { padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--accent-soft); cursor: pointer; }
.key-settings-actions { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 0 0; background: linear-gradient(transparent, var(--bg) 25%); }
.final-card .editor-shell.preview-mode { display: block; }
.final-card .editor-shell.preview-mode .line-numbers, .final-card .editor-shell.preview-mode .editor-text-layer { display: none; }
.chordwiki-preview { position: relative; display: block; overflow: auto; width: 100%; height: 100%; padding: 14px; color: var(--text); background: var(--panel); font-family: var(--editor-font); font-size: var(--editor-font-size); line-height: 1.65; font-variant-ligatures: none; }
.chordwiki-preview[hidden] { display: none; }
.cw-title { min-width: max-content; margin: .25em 0 1em; font-size: 1.28em; font-weight: 700; text-align: center; }
.cw-subtitle { min-width: max-content; margin: 0 0 1.25em; font-size: .9em; font-weight: 700; text-align: center; }
.cw-comment, .cw-key, .cw-link, .cw-text-line { width: max-content; min-width: 100%; margin: .55em 0; white-space: pre; }
.cw-comment { font-weight: 700; }
.cw-comment-italic { font-style: italic; font-weight: 700; }
.cw-key { color: #ff294f; }
.cw-link a { color: #1683ff; text-decoration: underline; text-underline-offset: 2px; }
.cw-blank { height: 1em; }
.cw-score-line { display: block; width: max-content; min-width: 100%; margin: 1em 0; line-height: 1.5; white-space: pre; }
.cw-segment { position: static; display: inline; }
.cw-chord { position: relative; top: -1.1em; color: var(--syntax-chord); font-family: sans-serif; font-size: 100%; line-height: inherit; white-space: nowrap; }
.cw-code-token, .cw-rhythm-token { position: static; display: inline; }
.cw-rhythm-token { font-weight: 400; letter-spacing: 0; }
.cw-segment-has-trailing-upper-bar .cw-chord > .cw-rhythm-token:last-child { margin-right: .3em; }
.cw-bar-token { position: relative; left: .4em; display: inline-block; }
.bars-through .cw-bar-token { color: transparent; }
.bars-through .cw-bar-token::after { content: ""; position: absolute; top: 0; bottom: -1.1em; left: 50%; width: 0; border-left: 1.5px solid var(--syntax-chord); transform: translateX(-.75px); pointer-events: none; }
.cw-boundary { position: relative; left: .4em; display: inline; color: var(--syntax-chord); }
.cw-boundary > span { position: relative; display: inline; }
.cw-boundary-upper { top: -1.1em; font-family: sans-serif; font-size: 100%; }
.cw-boundary-leading { margin-right: .28em; }
.cw-boundary-leading.cw-boundary-before-chord { margin-right: .08em; }
.cw-boundary-trailing { left: .6em; margin-right: .28em; margin-left: .18em; }
.cw-score-line-has-lyrics .cw-boundary-leading.cw-boundary-line-start { margin-right: .78em; }
.cw-score-line-has-lyrics .cw-boundary-leading.cw-boundary-line-start.cw-boundary-before-chord { margin-right: .58em; }
.cw-score-line-has-lyrics .cw-boundary-trailing { left: -.2em; }
.bars-through .cw-boundary { color: transparent; }
.bars-through .cw-boundary-upper { top: 0; }
.bars-through .cw-boundary > span::after { content: ""; position: absolute; top: -1.1em; bottom: 0; left: 50%; width: 0; border-left: 1.5px solid var(--syntax-chord); transform: translateX(-.75px); pointer-events: none; }
.bold-chords .cw-code-token { font-weight: 700; -webkit-text-stroke: 0; }
.cw-body { position: relative; left: -.8em; display: inline; line-height: inherit; white-space: pre; }
.cw-body-bar-token { position: relative; left: .4em; display: inline; color: var(--syntax-chord); }
.cw-boundary-line-start, .cw-bar-token-line-start { left: .4em; }
.cw-score-line-has-lyrics .cw-boundary-line-start,
.cw-score-line-has-lyrics .cw-bar-token-line-start { left: .4em; }
.cw-score-line-has-lyrics .cw-body-bar-token { top: 0; }
.cw-score-line-has-lyrics .cw-body-bar-token-before-text { margin-right: .4em; }
.bars-through .cw-body-bar-token { color: transparent; }
.cw-bar-between-hyphens { margin-right: .4em; }
.bars-through .cw-body-bar-token::before { content: ""; position: absolute; top: -1.1em; bottom: 0; left: 50%; width: 0; border-left: 1.5px solid var(--syntax-chord); transform: translateX(-.75px); pointer-events: none; }
.cw-suit-spade { color: var(--syntax-chord); }
.cw-symbol-red-circle { color: #e5485d; }
.cw-suit-club { color: #159947; }
.cw-suit-heart { color: #ff1682; }
.cw-suit-diamond { color: #e57900; }
.frame-resize-corner { --handle-color: var(--line-strong); position: absolute; z-index: 5; right: 1px; bottom: 1px; overflow: hidden; width: 18px; height: 18px; border-bottom-right-radius: 4px; background-image: linear-gradient(135deg, transparent 50%, var(--handle-color) 52%, var(--handle-color) 56%, transparent 58%), linear-gradient(135deg, transparent 50%, var(--handle-color) 53%, var(--handle-color) 58%, transparent 60%); background-repeat: no-repeat; background-position: right bottom; background-size: 16px 16px, 10px 10px; touch-action: none; }
.frame-resize-corner.two-axis { cursor: nwse-resize; }
.frame-resize-corner.vertical-axis { cursor: ns-resize; }
.frame-resize-corner:hover, .frame-resize-corner.dragging { --handle-color: var(--focus); }
.frame-resize-corner:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.frame-resize-edge { position: absolute; z-index: 4; right: 0; bottom: -4px; left: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.frame-resize-edge-top { top: -4px; bottom: auto; }
.frame-resize-edge::after { content: ""; position: absolute; top: 4px; right: 18px; left: 18px; height: 1px; background: transparent; transition: background .15s; }
.frame-resize-edge:hover::after, .frame-resize-edge.dragging::after { background: var(--focus); }
.frame-resize-edge:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.editor-shell:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 24%, transparent); }
textarea { display: block; width: 100%; height: 100%; min-height: 0; resize: none; padding: 14px; border: 0; border-radius: 0; outline: none; color: var(--text); background: var(--panel); font-family: var(--editor-font); font-size: var(--editor-font-size); line-height: 1.65; font-variant-ligatures: none; tab-size: 4; }
.editor-text-layer { position: relative; overflow: hidden; width: 100%; min-width: 0; height: 100%; background: var(--panel); }
.editor-text-layer textarea { position: absolute; inset: 0; z-index: 1; }
.correction-card .editor-text-layer textarea { caret-color: transparent !important; }
.editor-highlight { position: absolute; top: 0; left: 0; z-index: 0; width: max-content; min-width: 100%; min-height: 100%; margin: 0; padding: 14px; color: var(--text); background: transparent; font-family: var(--editor-font); font-size: var(--editor-font-size); font-weight: 400; line-height: 1.65; font-variant-ligatures: none; tab-size: 4; white-space: pre; pointer-events: none; }
.editor-highlight.active-line-visible { background-image: linear-gradient(color-mix(in srgb, var(--focus) 14%, transparent), color-mix(in srgb, var(--focus) 14%, transparent)); background-repeat: no-repeat; background-position: 0 var(--active-line-top, 0); background-size: 100% var(--active-line-height, 1.65em); }
.colorized-editors .editor-text-layer textarea { color: transparent; caret-color: var(--text); background: transparent; }
.editor-text-layer textarea::selection { color: var(--text); background: color-mix(in srgb, var(--focus) 32%, transparent); }
.editor-highlight .syntax-bracket { color: var(--syntax-chord); }
.editor-highlight .syntax-chord { color: var(--syntax-chord); }
.bold-chords .editor-highlight .syntax-chord { font-weight: 400; -webkit-text-stroke: .35px currentColor; }
.editor-highlight .syntax-key { color: var(--syntax-key); }
.editor-highlight .syntax-directive { color: var(--syntax-directive); }
.editor-highlight .active-character { color: var(--text); background: color-mix(in srgb, var(--focus) 34%, transparent); box-shadow: inset 0 -2px 0 var(--focus); }
.editor-highlight .linked-code-target { border-radius: 3px; color: var(--text); background: color-mix(in srgb, var(--focus) 30%, transparent); box-shadow: inset 0 -2px 0 var(--focus); }
.editor-highlight .linked-code-target .generated-token { color: var(--text); background: color-mix(in srgb, var(--focus) 30%, transparent); box-shadow: inset 0 -2px 0 var(--focus); }
.editor-highlight .generated-token { border-radius: 3px; color: var(--text); background: color-mix(in srgb, #48b86b 30%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, #26964a 82%, var(--text)); }
.editor-text-layer.diff-visible textarea { color: transparent; caret-color: var(--text); background: transparent; }
.editor-text-layer.linked-position-visible textarea { color: transparent; caret-color: var(--text); background: transparent; }
html:not(.colorized-editors) .diff-visible .editor-highlight .syntax-bracket,
html:not(.colorized-editors) .diff-visible .editor-highlight .syntax-chord,
html:not(.colorized-editors) .diff-visible .editor-highlight .syntax-key,
html:not(.colorized-editors) .diff-visible .editor-highlight .syntax-directive { color: var(--text); }
.line-numbers { overflow: hidden; min-width: 3.1em; padding: 14px 7px; border-right: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--panel) 86%, var(--line)); font-family: var(--mono); font-size: calc(var(--editor-font-size) * .857); line-height: calc(var(--editor-font-size) * 1.65); text-align: right; user-select: none; }
.line-numbers span { display: block; height: calc(var(--editor-font-size) * 1.65); }
.line-numbers span.active-line { margin-inline: -7px; padding-right: 7px; color: var(--text); background: color-mix(in srgb, var(--focus) 30%, transparent); box-shadow: inset 3px 0 0 var(--focus); font-weight: 800; }
.correction-modes { z-index: 2; grid-column: 3; overflow: hidden; min-width: 0; padding: 14px 2px; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, var(--correction-line)); font-family: var(--sans); font-size: calc(var(--editor-font-size) * .66); line-height: calc(var(--editor-font-size) * 1.65); user-select: none; }
.correction-mode-row { display: block; width: 100%; height: calc(var(--editor-font-size) * 1.65); }
button.correction-mode-row { overflow: hidden; padding: 0 2px; border: 0; border-radius: 3px; color: var(--muted); background: transparent; cursor: pointer; font-family: var(--sans); font-size: inherit; font-weight: 800; line-height: calc(var(--editor-font-size) * 1.65); white-space: nowrap; }
button.correction-mode-row:hover { color: var(--text); background: color-mix(in srgb, var(--focus) 16%, transparent); }
button.correction-mode-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
button.correction-mode-row[data-mode="edit"] { color: color-mix(in srgb, var(--text) 76%, var(--correction-line)); background: color-mix(in srgb, var(--panel) 72%, var(--correction-line)); }
button.correction-mode-row[data-mode="source"] { color: color-mix(in srgb, var(--text) 76%, var(--source-line)); background: color-mix(in srgb, var(--panel) 72%, var(--source-line)); }
button.correction-mode-row[data-mode="fixed"] { color: color-mix(in srgb, var(--text) 82%, #d5912c); background: color-mix(in srgb, var(--panel) 70%, #d5912c); }
.column-note { margin: 5px 4px 0; color: var(--muted); font-size: .62rem; }
.compact-editor-title { line-height: 1; }
.compact-editor-title span { color: var(--accent); font: 700 .63rem/1 var(--mono); letter-spacing: .1em; }
textarea::placeholder { color: var(--muted); opacity: .7; }
.icon-button { position: relative; width: 31px; height: 31px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); cursor: pointer; }
.icon-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.copy-icon::before, .copy-icon::after { content: ""; position: absolute; width: 10px; height: 12px; border: 1.5px solid currentColor; border-radius: 1px; }
.copy-icon::before { top: 7px; left: 8px; opacity: .55; }
.copy-icon::after { top: 10px; left: 11px; background: var(--panel); }
.paste-icon::before { content: ""; position: absolute; top: 8px; left: 8px; width: 13px; height: 15px; border: 1.5px solid currentColor; border-radius: 2px; }
.paste-icon::after { content: ""; position: absolute; top: 6px; left: 11px; width: 7px; height: 4px; border: 1.5px solid currentColor; border-radius: 2px; background: var(--panel); }
.icon-button:focus-visible, .text-button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.score-window-page { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100vh; min-height: 360px; overflow: hidden; }
.score-window-toolbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px clamp(14px, 2.2vw, 32px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
.score-window-heading { flex: 0 1 auto; min-width: 190px; }
.score-window-heading .eyebrow { margin-bottom: 3px; }
.score-window-heading h1 { margin: 0; font-size: clamp(1.05rem, 2vw, 1.5rem); letter-spacing: -.02em; }
.score-window-status { margin: 4px 0 0; color: var(--muted); font-size: .67rem; }
.score-window-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px 10px; }
.score-window-main { width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.score-window-main .chordwiki-preview { width: 100%; height: 100%; padding: clamp(18px, 3vw, 48px); border: 0; border-radius: 0; font-size: clamp(var(--editor-font-size), 1.3vw, calc(var(--editor-font-size) * 1.45)); }
.score-window-empty { margin: 15vh auto 0; color: var(--muted); text-align: center; }
.status-detail { margin: 7px 4px 0; color: var(--muted); font-size: .68rem; }
.help-dialog { width: min(1500px, calc(100% - 12px)); max-width: none; height: min(88vh, 940px); max-height: none; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: var(--bg); }
.help-dialog::backdrop { background: rgb(0 0 0 / .68); backdrop-filter: blur(2px); }
.help-dialog-frame { height: 100%; overflow-y: auto; scroll-behavior: smooth; scroll-padding-top: 104px; }
.help-dialog-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); }
.help-dialog-header h2 { margin-bottom: 0; }
.help-content { display: grid; justify-items: start; gap: 9px; padding: 10px 12px 14px; font-size: .84rem; line-height: 1.55; }
.help-content > section { width: min(100%, 1400px); }
.help-intro, .help-flow, .help-trouble, .help-shortcuts { max-width: 900px; }
.help-intro, .help-io, .help-flow, .help-trouble, .help-tasks, .help-shortcuts { margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.help-intro { display: grid; gap: 8px; padding: 12px; border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); background: var(--panel); }
.help-intro > .help-section-heading { margin-bottom: 0; }
.help-intro > .help-section-heading h3 { font-size: 1.08rem; }
.help-intro a { color: var(--accent); text-underline-offset: 2px; }
.help-intro-list { display: grid; gap: 8px; }
.help-intro-card { min-width: 0; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-left: 3px solid var(--accent); border-radius: 5px; background: var(--panel); }
.help-intro-card h4 { margin: 0 0 6px; color: var(--text); font-size: .88rem; line-height: 1.45; }
.help-intro-card p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.help-intro-card ul { display: grid; gap: 4px; margin: 0; padding-left: 1.35rem; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.help-intro-card strong { color: var(--text); }
.help-intro-card code { color: var(--text); font-family: var(--mono); font-weight: 800; }
.help-intro-primary { padding-block: 13px; }
.help-capabilities-list-label { margin-top: 9px !important; color: var(--text) !important; font-weight: 800; }
.help-limitations { border-left: 3px solid #d5912c; }
.help-limitations code { font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.help-io { --help-example-font: "Courier New", "BIZ UDPGothic", monospace; border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); background: linear-gradient(135deg, var(--accent-soft), var(--panel)); }
.help-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 0 0 7px; }
.help-section-heading h3 { margin: 1px 0 0; font-size: .94rem; line-height: 1.25; }
.help-section-heading small { display: block; color: var(--accent); font: 800 .58rem/1.2 var(--mono); letter-spacing: .08em; }
.help-section-heading > span { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--panel) 72%, var(--line)); font-size: .59rem; font-weight: 800; }
.help-io-flow { display: grid; grid-template-columns: 32% 20px 8% 20px minmax(0, 1fr); grid-template-areas: "input forward output output output" ". . . . turn" "preview preview preview back correction"; align-items: stretch; gap: 4px; }
.help-io-input { grid-area: input; }
.help-io-panel { min-width: 0; overflow: hidden; padding: 9px 10px; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--panel) 94%, var(--bg)); }
.help-io-output { grid-area: output; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.help-io-correction { grid-area: correction; border-color: color-mix(in srgb, #d5912c 55%, var(--line)); }
.help-io-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.help-io-panel-heading small { flex: 0 0 auto; color: var(--accent); font: 800 .68rem/1.2 var(--mono); letter-spacing: .03em; text-align: right; white-space: nowrap; }
.help-io-panel-heading strong { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: .82rem; line-height: 1.35; text-align: left; }
.help-io-panel pre { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--text); font: 700 .78rem/1.55 var(--help-example-font); letter-spacing: .015em; white-space: pre-wrap; }
.help-chord { color: #4c9cff; }
.help-preview-bar { color: var(--accent); }
.help-panel-note { width: max-content; max-width: 100%; margin-top: 5px; padding: 3px 6px; border-left: 3px solid var(--accent); color: var(--text); background: color-mix(in srgb, var(--panel) 84%, var(--accent)); font-size: .72rem; font-weight: 800; }
.help-omit-note { border-left-color: #d5912c; background: color-mix(in srgb, var(--panel) 82%, #d5912c); }
.help-conversion-table-wrap { margin-top: 5px; overflow: visible; border-radius: 3px; }
.help-conversion-table { display: grid; grid-template-columns: 9em minmax(0, 1fr); width: 100%; border: 0; background: transparent; }
.help-conversion-table > strong, .help-conversion-table > code, .help-conversion-table > pre { min-width: 0; margin: 0; padding: 5px 7px; border: 0; }
.help-conversion-table > :nth-child(even) { border-left: 1px solid var(--line); }
.help-conversion-table > strong { display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--line); color: var(--text); background: color-mix(in srgb, var(--panel) 84%, var(--line)); font-size: .72rem; line-height: 1.4; text-align: left; }
.help-conversion-table > strong:first-child { white-space: nowrap; }
.help-conversion-table > strong span { color: var(--muted); font-weight: 700; }
.help-conversion-table > code { display: flex; align-items: center; justify-content: flex-start; color: var(--accent); font: 800 .76rem/1.35 var(--help-example-font); letter-spacing: .04em; text-align: left; }
.help-manual-table > strong:first-child, .help-manual-table > code { color: var(--text); background: color-mix(in srgb, var(--panel) 80%, #d5912c); box-shadow: inset 3px 0 #d5912c; }
.help-manual-table > code { font-weight: 600; }
.help-auto-added { padding: 1px 2px; border-radius: 2px; color: inherit; background: color-mix(in srgb, #48b86b 28%, transparent); }
.help-example-change { padding: 1px 2px; border-radius: 2px; color: inherit; background: color-mix(in srgb, #d5912c 30%, transparent); }
.help-manual-changed-digit { color: inherit; font: inherit; font-weight: 950; }
.help-io-panel .help-conversion-table > pre { overflow: visible; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.help-io-output .help-conversion-table > pre { overflow: hidden; white-space: pre; word-break: normal; }
.help-correction-settings { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; padding: 5px 6px; border-radius: 3px; color: var(--muted); background: color-mix(in srgb, var(--panel) 86%, #d5912c); font-size: .63rem; }
.help-correction-settings code { color: var(--text); font: 800 .68rem/1.2 "Courier New", monospace; letter-spacing: .04em; }
.help-io-preview { grid-area: preview; border-color: color-mix(in srgb, #48b86b 55%, var(--line)); }
.help-example-preview.chordwiki-preview { overflow: hidden; height: auto; min-height: 7.5em; margin-top: 5px; padding: 8px 6px 2px; background: transparent; font-family: var(--help-example-font); font-size: .78rem; line-height: 1.5; }
.help-example-preview .cw-chord, .help-example-preview .cw-boundary-upper { font-family: inherit; }
.help-example-preview .cw-score-line { width: max-content; min-width: 100%; margin: 1.1em 0; overflow-wrap: normal; white-space: pre; }
.help-output-text { padding-bottom: 5px; border-bottom: 1px solid var(--line); }
.help-score-sample { display: grid; gap: 1px; margin-top: 5px; overflow-x: auto; color: var(--text); font: 700 .72rem/1.35 var(--mono); white-space: pre; }
.help-score-chords { color: #4c9cff; }
.help-fat-arrow { align-self: center; justify-self: center; color: var(--accent); font-size: 1.7rem; font-weight: 900; line-height: 1; }
.help-flow-forward { grid-area: forward; }
.help-flow-turn { grid-area: turn; transform: rotate(90deg); }
.help-flow-back { grid-area: back; transform: rotate(180deg); }
.help-io > p { margin: 7px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.help-flow-answer { margin: -1px 0 8px; color: var(--text); font-size: .72rem; line-height: 1.5; }
.help-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.help-flow-grid li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 5px; background: color-mix(in srgb, var(--panel) 94%, var(--accent)); }
.help-flow-grid li:not(:last-child)::after { content: "➜"; position: absolute; top: 50%; right: -17px; color: var(--accent); font-size: 1rem; font-weight: 900; transform: translateY(-50%); }
.help-flow-grid li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--panel); background: var(--accent); font: 900 .8rem/1 var(--mono); }
.help-flow-grid li > div { display: grid; min-width: 0; }
.help-flow-grid li small { color: var(--accent); font: 800 .57rem/1.25 var(--mono); }
.help-flow-grid li strong { margin-top: 1px; font-size: .76rem; line-height: 1.3; }
.help-flow-grid li p { margin: 2px 0 0; color: var(--muted); font-size: .63rem; line-height: 1.35; }
.help-trouble-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.help-trouble-grid article { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 7px 8px; border-left: 3px solid var(--accent); border-radius: 4px; color: var(--text); background: color-mix(in srgb, var(--panel) 91%, var(--accent)); }
.help-trouble-grid strong { font-size: .71rem; line-height: 1.35; }
.help-trouble-grid p { margin: 0; color: var(--muted); font-size: .63rem; line-height: 1.45; }
.help-trouble-grid b { color: var(--text); }
.help-task-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.help-task-card { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 5px; background: color-mix(in srgb, var(--panel) 95%, var(--accent)); }
.help-task-card > header { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; padding: 0; border: 0; }
.help-task-card > header > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--panel); background: var(--accent); font-size: .72rem; font-weight: 900; }
.help-task-card > header > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 9px; min-width: 0; }
.help-task-card > header strong { margin-left: auto; color: var(--accent); font: 800 .67rem/1.2 var(--mono); text-align: right; }
.help-task-card h4 { margin: 0; font-size: .86rem; line-height: 1.4; }
.help-task-card p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.help-task-card p code { color: var(--text); font-family: var(--mono); font-weight: 800; }
.help-state-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.help-state-list li { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: start; gap: 6px; min-width: 0; padding: 6px 7px; border-radius: 3px; background: color-mix(in srgb, var(--panel) 92%, var(--line)); }
.help-state-list strong { color: var(--accent); font-size: .72rem; line-height: 1.5; }
.help-state-list span { color: var(--text); font-size: .72rem; line-height: 1.5; }
.help-setting-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
.help-setting-values > div { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--panel) 92%, var(--line)); }
.help-setting-values dt, .help-setting-values dd { margin: 0; }
.help-setting-values dt { color: var(--muted); font-size: .74rem; line-height: 1.4; }
.help-setting-values code { color: var(--accent); font: 800 .76rem/1 var(--mono); }
.help-task-example-stack { display: grid; gap: 4px; }
.help-task-example-stack > div { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; }
.help-task-example-stack b { color: var(--accent); font-size: 1rem; line-height: 1; }
.help-task-example-stack code { min-width: 0; padding: 4px 6px; border: 0; border-radius: 3px; color: var(--text); background: color-mix(in srgb, var(--panel) 92%, var(--line)); font: .78rem/1.5 var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; }
.help-details { display: grid; gap: 5px; margin: 0; }
.help-details > .help-section-heading { margin-bottom: 1px; }
.help-detail-group-title { margin: 3px 2px 0; color: var(--muted); font-size: .67rem; line-height: 1.3; }
.help-detail-list { display: grid; gap: 4px; }
.help-detail-card { overflow: hidden; scroll-margin-top: 108px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 5px; background: var(--panel); }
.help-detail-card:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.help-detail-optional { border-left-color: var(--line-strong); }
.help-detail-card > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; padding: 7px 8px; background: color-mix(in srgb, var(--panel) 94%, var(--accent)); cursor: pointer; list-style: none; }
.help-detail-card > summary::-webkit-details-marker, .help-more > summary::-webkit-details-marker { display: none; }
.help-detail-card > summary::after { content: "▼"; grid-column: -1; color: var(--muted); font-size: .55rem; transition: transform .15s ease; }
.help-detail-card[open] > summary::after { transform: rotate(180deg); }
.help-detail-card[open] > summary { border-bottom: 1px solid var(--line); }
.help-detail-card > summary > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--panel); background: var(--accent); font: 900 .6rem/1 var(--mono); }
.help-detail-optional > summary > span { color: var(--text); background: var(--line-strong); }
.help-detail-card > summary > strong { min-width: 0; font-size: .77rem; line-height: 1.25; }
.help-detail-card > summary > small { color: var(--muted); font-size: .6rem; white-space: nowrap; }
.help-detail-body { display: grid; gap: 6px; padding: 7px 8px 8px; }
.help-detail-body p { margin: 0; }
.help-detail-brief { color: var(--muted); font-size: .71rem; line-height: 1.5; }
.help-example-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; }
.help-example-flow > div { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--panel) 96%, var(--accent)); }
.help-example-flow small { color: var(--accent); font-size: .59rem; font-weight: 800; line-height: 1.2; }
.help-example-flow code, .help-example-flow span { color: var(--text); font-family: var(--mono); font-size: .69rem; line-height: 1.4; overflow-wrap: anywhere; }
.help-example-flow > b { align-self: center; color: var(--accent); font-size: 1.35rem; font-weight: 900; line-height: 1; }
.help-score-mini { display: grid !important; gap: 0 !important; padding: 0 !important; border: 0 !important; }
.help-score-mini i { color: #4c9cff; font-family: var(--mono); font-size: .69rem; font-style: normal; }
.help-more { border: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--panel) 96%, var(--line)); }
.help-more > summary { padding: 5px 7px; color: var(--muted); cursor: pointer; font-size: .66rem; font-weight: 800; list-style: none; }
.help-more > summary::before { content: "＋"; margin-right: 4px; color: var(--accent); }
.help-more[open] > summary::before { content: "－"; }
.help-more > div { display: grid; gap: 4px; padding: 6px 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; line-height: 1.5; }
.help-more code, .help-more kbd { justify-self: start; padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font-family: var(--mono); }
.help-detail-warning { padding: 5px 7px; border-left: 3px solid #d5912c; border-radius: 3px; background: color-mix(in srgb, var(--panel) 84%, #d5912c); }
.help-overview { display: grid; gap: 12px; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: 7px; background: linear-gradient(135deg, var(--accent-soft), var(--panel)); }
.help-overview h3 { margin: 2px 0 7px; color: var(--text); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.45; }
.help-overview p { margin: 0; }
.help-kicker { color: var(--accent); font: 800 .65rem/1 var(--mono); letter-spacing: .13em; }
.help-overview-note { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); color: var(--muted); }
.help-steps { margin: 14px 0; }
.help-steps > h3 { margin: 0 0 9px; font-size: 1rem; }
.help-step-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.help-step-card { overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 7px; background: var(--panel); }
.help-step-card > header { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 88%, var(--accent)); }
.help-step-card > p { margin: 0; padding: 11px 13px; color: var(--muted); line-height: 1.65; }
.help-step-card > p strong { color: var(--text); }
.help-step-optional { border-left-color: var(--line-strong); }
.help-step-optional > header { background: color-mix(in srgb, var(--panel) 94%, var(--line)); }
.help-step-more { border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.help-step-more summary { padding: 7px 13px; color: var(--text); background: color-mix(in srgb, var(--panel) 96%, var(--accent)); cursor: pointer; font-size: .75rem; font-weight: 800; }
.help-step-more[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); }
.help-step-more .help-table-example { margin: 9px 12px 11px; }
.help-usage-table-wrap { margin: 14px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.help-usage-table { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.help-usage-table .help-step-col { width: 17%; }
.help-usage-table .help-detail-col { width: 27%; }
.help-usage-table th, .help-usage-table td { padding: 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.help-usage-table tr > :last-child { border-right: 0; }
.help-usage-table tbody tr:last-child > * { border-bottom: 0; }
.help-usage-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; color: var(--text); background: color-mix(in srgb, var(--panel) 82%, var(--accent)); font-size: .76rem; line-height: 1.3; }
.help-usage-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 96%, var(--accent)); }
.help-usage-table tbody th { background: color-mix(in srgb, var(--panel) 97%, var(--accent)); }
.help-usage-table tbody td { color: var(--muted); font-size: .78rem; line-height: 1.65; }
.help-usage-table tbody tr:hover { background: var(--accent-soft); }
.help-usage-table tbody th { display: flex; align-items: flex-start; gap: 8px; }
.help-table-number { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--panel); background: var(--accent); font: 900 13px/1 var(--mono); }
.help-table-step { display: grid; min-width: 0; gap: 2px; }
.help-table-step small { color: var(--accent); font: 800 .54rem/1 var(--mono); letter-spacing: .08em; }
.help-table-step strong { color: var(--text); font-size: .8rem; line-height: 1.3; }
.help-table-step em { justify-self: start; margin-top: 3px; padding: 2px 5px; border-radius: 999px; color: var(--muted); background: color-mix(in srgb, var(--panel) 76%, var(--line)); font-size: .57rem; font-style: normal; line-height: 1.2; }
.help-control-chip { display: inline-flex; align-items: center; min-height: 25px; margin: 1px 2px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); font-size: .75rem; font-weight: 800; line-height: 1.25; vertical-align: middle; }
.help-primary-chip { border-color: var(--accent); background: var(--accent-soft); }
.help-icon-sample { position: relative; display: inline-block; width: 30px; height: 30px; margin: 0 3px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); vertical-align: middle; }
.help-table-example { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border-left: 3px solid var(--accent); border-radius: 3px; color: var(--text); background: var(--accent-soft); }
.help-table-example code, .help-shortcuts kbd, .help-usage-table kbd, .help-step-card kbd { padding: 2px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font-family: var(--mono); }
.help-table-example small { flex: 0 0 100%; color: var(--muted); line-height: 1.5; }
.help-table-warning { border-left-color: #d5912c; background: color-mix(in srgb, var(--panel) 82%, #d5912c); }
.help-table-warning strong { color: #a76500; }
.help-shortcuts { margin: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.help-shortcuts .help-section-heading h3 { margin: 1px 0 0; font-size: .94rem; }
.help-shortcut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.help-shortcut-grid p { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 5px; border: 1px solid color-mix(in srgb, var(--line) 68%, transparent); border-radius: 4px; }
.help-shortcut-grid p > span:last-child { display: grid; }
.help-shortcut-grid small { color: var(--muted); }
.help-resize-symbol { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; color: var(--accent); font-size: 1.25rem; }
.help-section { margin: 12px 0; padding: 14px 16px; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.help-section h3 { margin: 0 0 9px; color: var(--text); font-size: 1rem; }
.help-section p { margin: 7px 0; line-height: 1.7; }
.help-section code, .help-section kbd { padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--text); background: var(--panel); font-family: var(--mono); }
.help-bullets { display: grid; gap: 7px; margin: 0; padding-left: 1.25rem; }
.help-bullets li { padding-left: 2px; line-height: 1.7; }
.icon-help-list { padding-left: 0; list-style: none; }
.icon-help-list li { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 7px; padding: 5px 7px; border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); }
.icon-help-list kbd { justify-self: start; white-space: nowrap; }
.help-note { color: var(--muted); }
.help-content p, .help-content li, .help-content dt, .help-content dd { color: var(--text); font-weight: 400; }
.help-content .help-task-example-stack strong, .help-content .help-conversion-table > strong span, .help-content .help-shortcut-grid small { color: var(--text); }
.help-content { padding: 10px 12px 14px; font-size: .84rem; line-height: 1.55; }
.history-dialog { width: min(1220px, calc(100% - 28px)); height: min(88vh, 920px); }
.history-dialog .help-dialog-frame { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.history-content { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 14px 18px 12px; }
.history-layout { display: grid; grid-template-columns: minmax(290px, 350px) minmax(0, 1fr); gap: 14px; min-height: 0; }
.history-list-panel { min-height: 0; overflow-y: auto; padding-right: 3px; }
.history-note { margin-bottom: 12px; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.history-list { display: grid; gap: 8px; }
.history-empty { padding: 28px 14px; border: 1px dashed var(--line); border-radius: 5px; color: var(--muted); text-align: center; }
.history-item { display: grid; gap: 4px; width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--panel); text-align: left; cursor: pointer; }
.history-item:hover, .history-item:focus-visible, .history-item.selected { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.history-date { color: var(--muted); font: .72rem/1.5 var(--mono); }
.history-title { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.history-excerpt { display: -webkit-box; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.history-preview-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.history-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.history-preview-heading > div:first-child { min-width: 0; }
.history-preview-heading h3 { margin: 0 0 3px; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.history-preview-heading p { margin: 0; color: var(--muted); font-size: .7rem; }
.history-preview-actions, .history-file-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.history-restore-button { flex: 0 0 auto; min-height: 31px; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 4px; color: var(--text); background: var(--accent-soft); cursor: pointer; font-size: .75rem; font-weight: 800; }
.history-restore-button:disabled { border-color: var(--line); color: var(--muted); background: var(--panel); cursor: default; opacity: .65; }
.history-secondary-button { min-height: 31px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); background: var(--panel); cursor: pointer; font-size: .72rem; font-weight: 800; }
.history-secondary-button:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.history-secondary-button:disabled { color: var(--muted); cursor: default; opacity: .55; }
.history-preview-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 92%, var(--line)); }
.history-preview-tabs button { min-width: 0; padding: 7px 9px; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 800; }
.history-preview-tabs button:last-child { border-right: 0; }
.history-preview-tabs button:hover, .history-preview-tabs button[aria-selected="true"] { color: var(--text); background: var(--accent-soft); }
.history-preview-tabs button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.history-text-preview { min-width: 0; min-height: 0; margin: 0; padding: 18px; overflow: auto; color: var(--text); background: var(--panel); font: var(--editor-font-size)/1.65 var(--editor-font); white-space: pre; tab-size: 4; }
.history-text-preview .syntax-bracket, .history-text-preview .syntax-chord { color: var(--syntax-chord); }
.history-text-preview .syntax-key { color: var(--syntax-key); }
.history-text-preview .syntax-directive { color: var(--syntax-directive); }
.history-score-preview { min-height: 0; padding: 18px; }
.history-preview-empty { margin: 18vh auto 0; color: var(--muted); text-align: center; }
.history-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 12px; padding-top: 9px; }
.history-delete-button { padding: 3px 6px; border: 0; border-bottom: 1px solid currentColor; color: var(--muted); background: transparent; cursor: pointer; font-size: .68rem; }
.history-delete-button:hover { color: var(--danger); }
.history-delete-button:disabled { color: var(--muted); cursor: default; opacity: .45; }
.toast { position: fixed; right: 14px; bottom: 14px; z-index: 10; max-width: min(390px, calc(100% - 28px)); padding: 10px 13px; border: 1px solid var(--accent); border-radius: 4px; color: var(--text); background: var(--accent-soft); font-size: .78rem; font-weight: 800; transform: translateY(10px); opacity: 0; pointer-events: none; transition: .16s ease; }
.toast.visible { transform: translateY(0); opacity: 1; }
.toast.error { border-color: var(--danger); }
@media (max-width: 1040px) {
  .help-io-flow { grid-template-columns: 1fr; grid-template-areas: "input" "forward" "output" "turn" "correction" "back" "preview"; }
  .help-flow-forward, .help-flow-back { transform: rotate(90deg); }
  .help-trouble-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-global-controls { grid-template-columns: 1fr; }
  .key-global-controls .final-bar-setting { grid-column: 1; }
  .key-settings-layout { grid-template-columns: 1fr; }
  .key-settings-preview-panel { position: static; height: 52vh; }
  .key-section-card { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .history-dialog .help-dialog-frame { overflow-y: auto; }
  .history-content { display: block; }
  .history-layout { grid-template-columns: 1fr; }
  .history-list-panel { max-height: 32vh; }
  .history-preview-panel { min-height: 430px; }
  .history-score-preview { min-height: 360px; }
  .history-preview-heading { align-items: flex-start; }
  .history-preview-actions { flex-direction: column-reverse; align-items: stretch; }
}
@media (max-width: 700px) {
  .site-credit p { max-width: none; }
  .preview-controls { flex-wrap: wrap; overflow-x: visible; }
  .removal-controls { grid-template-columns: minmax(0, 1fr) minmax(160px, 190px); }
  .removal-controls > .removal-label-with-help { grid-column: 1; grid-row: 1; }
  .removal-controls > select { grid-column: 2; grid-row: 1; }
  .removal-linked-setting { grid-column: 1; grid-row: 2; }
  .removal-controls > input[type="text"] { grid-column: 2; grid-row: 2; }
  .help-io-flow { grid-template-columns: 1fr; grid-template-areas: "input" "forward" "output" "turn" "correction" "back" "preview"; }
  .help-flow-forward, .help-flow-back { transform: rotate(90deg); }
  .help-flow-grid { grid-template-columns: 1fr; gap: 5px; }
  .help-flow-grid li::after { display: none; }
  .help-task-grid { grid-template-columns: 1fr; }
  .help-state-list { grid-template-columns: 1fr; }
  .help-setting-values { grid-template-columns: 1fr; }
  .help-example-flow { grid-template-columns: 1fr; }
  .help-example-flow > b { justify-self: center; transform: rotate(90deg); }
  .help-usage-table-wrap { overflow: visible; border: 0; background: transparent; }
  .help-usage-table { display: block; min-width: 0; }
  .help-usage-table colgroup, .help-usage-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .help-usage-table tbody { display: grid; gap: 10px; }
  .help-usage-table tr { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
  .help-usage-table tbody th { border-right: 0; background: color-mix(in srgb, var(--panel) 88%, var(--accent)); }
  .help-usage-table tbody td { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; border-right: 0; }
  .help-usage-table tbody td::before { content: attr(data-label); color: var(--text); font-size: .7rem; font-weight: 800; }
  .help-usage-table tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
  .help-usage-table tbody tr > :last-child { border-bottom: 0; }
}
@media (max-width: 520px) {
  .app-header, main { width: calc(100% - 18px); }
  .site-credit { padding: 8px 10px; }
  .app-header { padding-top: 16px; }
  .privacy-badge { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-profile-picker { grid-template-columns: 1fr; }
  .settings-heading-copy { align-items: flex-start; flex-direction: column; gap: 3px; }
  .setting-field { padding: 7px; }
  .settings-footer span { display: none; }
  textarea, .editor-highlight { padding: 10px; }
  .help-content { padding: 8px 7px 12px; }
  .help-flow-grid { grid-template-columns: 1fr; gap: 5px; }
  .help-flow-grid li::after { display: none !important; }
  .help-section-heading > span { display: none; }
  .help-trouble-grid { grid-template-columns: 1fr; }
  .help-detail-card > summary { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .help-detail-card > summary > small { display: none; }
  .help-overview { padding: 13px; }
  .help-usage-table tbody td { grid-template-columns: 1fr; gap: 5px; padding: 10px; }
  .help-shortcut-grid { grid-template-columns: 1fr; }
  .sample-header-button:not(.bracket-header-button) > span:last-child { display: none; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .history-item { grid-template-columns: 1fr; }
  .output-diff-setting, .output-bar-setting, .final-bar-setting { font-size: .68rem; }
  .preview-control { font-size: .68rem; }
  .preview-controls { justify-content: flex-start; }
  .score-window-page { overflow: auto; }
  .score-window-toolbar { position: sticky; top: 0; align-items: flex-start; padding: 10px 12px; }
  .score-window-heading { min-width: 132px; }
  .score-window-controls { justify-content: flex-start; }
  .score-window-main { min-height: calc(100vh - 118px); }
  .correction-position-with-help { grid-template-columns: 1fr; }
  .correction-rebuild-button { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .help-dialog-frame { scroll-behavior: auto; }
  .help-detail-card > summary::after { transition: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }