* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 "Source Sans 3", "Segoe UI", sans-serif; color: #1a1a1a; background: #f4f4f2; }
a { color: #1f4a34; }
h1 { font-size: 24px; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 0 0 8px; }
h3 { font-size: 17px; margin: 0 0 6px; }
input, select, textarea, button { font: inherit; }
input, select, textarea { border: 1px solid #bbb; border-radius: 4px; padding: 6px 8px; background: #fff; }
button, .btn { border: 1px solid #aaa; background: #fff; border-radius: 4px; padding: 6px 12px; cursor: pointer; display: inline-block; }
button:hover, .btn:hover { background: #e6e6e6; }
button.primary { background: #1f4a34; color: #fff; border-color: #1f4a34; }
button.danger { color: #a00; border-color: #c88; }
button.tiny { font-size: 12px; padding: 2px 7px; }
button.link, label.link { border: 0; background: none; color: #fff; text-decoration: underline; cursor: pointer; }
label.file { font-size: 16px; }
button.seg { border-radius: 0; margin-right: -1px; }
button.seg.on { background: #1f4a34; color: #fff; }
.muted { color: #777; }
.small { font-size: 14px; }
.bad { color: #b00; }
.big { font-size: 18px; font-weight: 600; }
.grow { flex: 1; }
.gap { width: 14px; }
.row { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }

.bar { display: flex; align-items: center; gap: 10px; padding: 4px 14px; background: #1f4a34; color: #fff; flex-wrap: wrap; position: relative; z-index: 3; }
.bar a { color: #fff; text-decoration: none; }
.bar .muted { color: #c7c7c7; }
.logo { font-weight: 700; font-size: 18px; letter-spacing: 1px; }
.piano-name { font-weight: 600; }
.bar nav { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.bar nav a { padding: 8px 14px; border-radius: 6px; }
.bar nav a.main { font-size: 16px; font-weight: 600; color: #e7f2eb; }
.bar nav a.main:hover { background: #2f6b4c; color: #fff; }
.bar nav a.main.on { background: #f4f4f2; color: #1f4a34; }
.user { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
button.out { font-size: 12px; padding: 0 4px; text-decoration: none; color: #d7e6dc; }
.bar nav a.minor { font-size: 14px; font-weight: 400; padding: 8px 10px; color: #d7e6dc; }
.bar nav a.minor:hover, .bar nav a.minor.on, .bar nav button.minor.on { background: #2f6b4c; color: #fff; }
.bar nav .more { position: relative; }
.bar nav button.minor { font-size: 14px; font-weight: 400; padding: 8px 10px; color: #d7e6dc; border: 0; background: none; border-radius: 6px; }
.bar nav button.minor:hover { background: #2f6b4c; color: #fff; }
.bar nav .more-pop { position: absolute; z-index: 6; top: 100%; left: 0; margin-top: 4px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 6px; display: flex; flex-direction: column; min-width: 210px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.bar nav .more-pop[hidden] { display: none; }
.bar nav .more-pop a { color: #1a1a1a; padding: 7px 12px; border-radius: 4px; white-space: nowrap; }
.bar nav .more-pop a:hover { background: #e6e6e6; }
.bar nav .more-pop a.on { background: #1f4a34; color: #fff; }
.user a.name { color: #fff; font-weight: 600; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.user a.name:hover { background: #2f6b4c; }
.chat { border-top: 1px solid #e4e4e4; margin-top: 12px; padding-top: 6px; }
.msg, .chat p { margin: 4px 0; }
.msg small, .chat small { display: block; color: #999; font-size: 12px; }
.msg.mine, .chat p.mine { color: #1f4a34; }
.bar button.link, .bar label.link { text-decoration: none; border: 1px solid rgba(255, 255, 255, .45); border-radius: 6px; font-size: 14px; font-weight: 400; padding: 6px 10px; }
.bar button.link:hover, .bar label.link:hover { background: #2f6b4c; }
.bar button.link:disabled { color: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .2); }
button.out { border: 0; }
.save { font-size: 12px; color: #c7c7c7; }
.save.bad { color: #ffb4b4; }
.lamp { width: 14px; height: 14px; border-radius: 50%; background: #7d8a82; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); flex: 0 0 auto; }
.lamp.on { background: #3ddc67; box-shadow: 0 0 8px #3ddc67; }
.lamp.off { background: #e23b3b; box-shadow: 0 0 8px #e23b3b; }

main { padding: 14px 16px 40px; max-width: 1500px; margin: 0 auto; }
.box { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 14px; margin-bottom: 12px; }
.box.warn { background: #fff8e5; border-color: #e6c66a; }
.narrow { max-width: 640px; }
.account { max-width: none; }
.account form#pw, .account form#nm, .account form#msg { max-width: 460px; }
.account form#pw label, .account form#nm label, .account form#msg label { display: block; margin: 8px 0; }
.account form#pw input, .account form#nm input, .account form#msg textarea { display: block; width: 100%; margin-top: 4px; }
.account h2 { margin-top: 34px; }
.narrow label, .login label { display: block; margin: 8px 0; }
.narrow label input, .narrow label select, .login input { width: 100%; }
.login { max-width: 360px; margin: 60px auto; }

.head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.head h1 { margin: 0 20px 0 0; }
.head input { width: 280px; }
table { border-collapse: collapse; }
table.list { width: 100%; background: #fff; }
table.list th, table.list td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #e4e4e4; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover { background: #e6e6e6; }


.toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid #5c5c5c; margin: 8px 0 10px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; text-decoration: none; background: #e4e9e9; border-radius: 4px 4px 0 0; color: #1f4a34; }
.tabs a.on { background: #3a3a3a; color: #fff; }
.split { display: grid; grid-template-columns: 1fr 330px; gap: 12px; align-items: start; }
.charts { display: flex; flex-wrap: wrap; gap: 10px; }
.chart-box { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 4px; width: 100%; }
.chart-box.half { width: calc(50% - 5px); }
.split.grid4 { grid-template-columns: 1fr; }
.split.grid4 .side { display: block; }
.split.grid4 .pair { display: flex; gap: 12px; align-items: flex-start; }
.split.grid4 .pair > * { flex: 1 1 0; width: auto; min-width: 0; }
.split.grid4 .pair > :first-child { flex: 0 0 auto; }
.split.grid4 .pair table.avg { white-space: nowrap; }
.split.grid4 .chart-box, .split.grid4 .chart-box.half { width: calc(50% - 5px); }
#ccmp { position: relative; }
.cmp-pop { position: absolute; z-index: 5; margin-top: 30px; background: #fff; border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.cmp-pop[hidden] { display: none; }
.cmp-pick { display: flex; align-items: center; gap: 6px; }
.cmp-pick i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.chart-box.zoomable { cursor: pointer; }
.chart-box.zoomable:hover { outline: 2px solid #1f4a34; }

.side .box, .side table { width: 100%; }

svg.chart { width: 100%; height: auto; display: block; user-select: none; }
.kb-sharp { fill: #000; opacity: 0.045; }
.key-white { fill: #fff; stroke: #b9b9b9; stroke-width: 0.5; }
.key-black { fill: #2b2b2b; stroke: #1a1a1a; stroke-width: 0.4; }
.key-white.key-mark { fill: #b7d4c4; }
.key-black.key-mark { fill: #1f4a34; }
.key-white.key-sel { fill: #1f4a34; stroke: #8fbfa4; stroke-width: 1; }
.key-black.key-sel { fill: #8fbfa4; stroke: #1f4a34; stroke-width: 1; }
.key-name { font-size: 8px; fill: #444; }
.kb-mark { fill: #1f4a34; opacity: 0.16; }
.kb-sel { fill: #1f4a34; opacity: 0.42; }
.grid line, line.grid { stroke: #ccc; stroke-width: 0.6; stroke-dasharray: 3 3; }
.axis { font-size: 16px; font-weight: 600; fill: #222; }
.chart-title { font-size: 18px; font-weight: 600; fill: #222; }
.zone { stroke: #b07a00; stroke-width: 1; stroke-dasharray: 6 3; }
.zone-label, .line-label { font-size: 14px; font-weight: 600; fill: #b07a00; }
.handle circle { cursor: grab; }
.handle-label { font-size: 14px; font-weight: 600; fill: #c34400; pointer-events: none; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; color: #333; padding: 4px 8px 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: -2px; }

table.avg { background: #fff; border: 1px solid #ddd; margin-bottom: 10px; font-size: 17px; }
table.avg th, table.avg td { padding: 7px 12px; border-bottom: 1px solid #eee; text-align: right; font-variant-numeric: tabular-nums; }
table.avg th:first-child { text-align: left; font-weight: 500; }
table.avg th[colspan] { font-size: 26px; font-weight: 700; color: #1f4a34; padding: 10px 12px; }
table.avg thead th { background: #ececec; }
.split.grid4 .side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.gridrow { display: grid; grid-template-columns: 1fr 560px; gap: 12px; align-items: start; }
.scroll { overflow: auto; max-height: 70vh; border: 1px solid #ddd; background: #fff; }
.gloss { display: flex; flex-direction: column; align-items: flex-end; }
.gloss > button { margin-bottom: 8px; }
.gloss > div { width: 100%; max-height: 70vh; overflow: auto; }
table.grid { font-size: 18px; background: #fff; }
table.grid th, table.grid td { border: 1px solid #e2e2e2; padding: 6px 10px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.grid thead th { background: #ececec; position: sticky; top: 0; z-index: 1; }
table.grid tbody th { text-align: left; font-weight: 500; background: #fafafa; }
table.grid tr.sharp th { background: #e3e3e3; }
table.grid tr.sel td, table.grid tr.sel th { background: #d9d9d9; }
table.grid input { width: 84px; border: 1px solid transparent; text-align: right; padding: 4px 6px; font-size: 18px; font-weight: 600; }
table.grid input:focus { border-color: #1f4a34; outline: none; background: #fffde8; }
table.grid input.invalid { background: #ffe0e0; }
table.grid th.calc, table.grid td.calc { color: #1f4a34; background: #f0f0f0; }
.capstan { display: grid; grid-template-columns: 1fr 240px; gap: 16px; align-items: start; width: 100vw; margin-left: calc(50% - 50vw); padding: 0 16px; box-sizing: border-box; }
.cap-kbd { grid-column: 1 / span 2; height: 130px; }
.cap-kbd i.chain.w { background: #c3d4c9; }
.cap-kbd i.chain.b { background: #1f4a34; }
.cap-kbd i.cur.w { background: #1f4a34; box-shadow: inset 0 0 0 3px #fff; z-index: 2; }
.cap-kbd i.cur.b { background: #8fbfa4; box-shadow: inset 0 0 0 2px #163828; z-index: 3; }
.cap-card { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; display: grid; grid-template-columns: 150px 1fr; }
.cap-f { grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-right: 1px solid #f2f2f2; padding: 12px; }
.cap-f span { color: #555; font-size: 18px; }
.cap-f b { font-size: 48px; font-weight: 600; }
.cap-f small { color: #777; font-size: 16px; min-height: 20px; }
.cap-f button { width: 72px; font-size: 26px; padding: 2px 0; margin-top: 4px; }
.cap-cell { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 28px; border-bottom: 1px solid #f2f2f2; }
.cap-cell span { color: #555; font-size: 20px; }
.cap-cell b { font-size: 60px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1f4a34; }
.cap-key { grid-column: 1 / span 2; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px; }
.cap-key b { font-size: 32px; }
.cap-key b.sharp { color: #1f4a34; }
.cap-key small { display: block; text-align: center; color: #777; }
.cap-key button { font-size: 30px; padding: 2px 16px; }
.cap-side { display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.cap-side label { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 14px; }
.stage { display: grid; grid-template-columns: 96px 1fr 64px; grid-template-rows: auto 130px; gap: 8px 10px; align-items: stretch; width: 100vw; margin-left: calc(50% - 50vw); }
.stamp { grid-row: 1; grid-column: 1; border: 2px dashed #b9b9b9; border-radius: 8px; background: #fff; color: #888; font-size: 15px; }
.stamp.on { border-style: solid; border-color: #1f4a34; background: #e3ece7; color: #1f4a34; font-size: 34px; }
.stage-card { grid-row: 1; grid-column: 2; background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; display: flex; flex-direction: column; }
.stage-line { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 24px; border-bottom: 1px solid #f2f2f2; }
.stage-line span { color: #555; font-size: 18px; }
.stage-line b { font-size: 56px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stage-line.goal b { color: #1f4a34; }
.stage-line.ok b { color: #1f4a34; }
.stage-line.dev b { color: #b00000; }
.stage-key { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px; margin-top: auto; }
.stage-key button { font-size: 32px; width: 58px; height: 58px; line-height: 1; }
.stage-key div { font-size: 16px; color: #555; text-align: center; }
.stage-key b { display: inline-block; font-size: 42px; min-width: 64px; padding: 0 8px; border-radius: 6px; color: #222; }
.stage-key b.sharp { background: #2b2b2b; color: #fff; }
.stage-key small { display: block; color: #888; }
.stage-side { grid-row: 1; grid-column: 3; display: flex; flex-direction: column; gap: 4px; }
.stage-side a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e2e2; border-radius: 6px; background: #fff; text-decoration: none; color: #333; font-weight: 650; }
.stage-side a small { font-weight: 400; color: #888; font-size: 11px; }
.stage-side a.on { background: #3a3a3a; color: #fff; border-color: #3a3a3a; }
.stage-side a.on small { color: #d9d9d9; }
.pkbd { grid-row: 2; grid-column: 1 / span 3; position: relative; height: 130px; user-select: none; }
.pkbd i { position: absolute; top: 0; box-sizing: border-box; cursor: pointer; }
.pkbd i.w { height: 100%; background: #fff; border: 1px solid #bbb; border-radius: 0 0 4px 4px; }
.pkbd i.b { height: 60%; background: #333; border: 1px solid #1a1a1a; border-radius: 0 0 3px 3px; z-index: 1; }
.pkbd i.done.w { background: #c3d4c9; }
.pkbd i.done.b { background: #1f4a34; }
.pkbd i.cur { outline: 2px solid #3a3a3a; z-index: 2; }

table.specs td.ok { color: #1f4a34; }
table.specs td.dev { color: #b00; font-weight: 600; }

.editor table.pts input { width: 80px; }
dialog { border: 1px solid #aaa; border-radius: 6px; max-width: 720px; width: 90%; }
#pinfo-dlg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.dlg label { display: block; margin: 8px 0; }
.dlg label input, .dlg label select { width: 100%; }
.dlg textarea { width: 100%; font-family: Menlo, monospace; font-size: 12px; }
.bar .piano-name { font-weight: 600; color: #fff; padding: 0 4px; }

.keybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #3a3a3a; color: #fff; border-radius: 6px; padding: 8px 14px; margin: 10px 0; font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; letter-spacing: .2px; }
.keybar .muted, .keybar span { color: #d9d9d9; }
.keybar button.seg { background: #555; color: #fff; border-color: #666; }
.keybar button.seg.on { background: #1f4a34; border-color: #1f4a34; }
.keynow { display: flex; align-items: baseline; gap: 8px; background: #fff; color: #222; border-radius: 6px; padding: 2px 14px; min-width: 96px; justify-content: center; }
.keynow b, .keynow small { font-size: 36px; font-weight: 700; font-style: normal; color: inherit; font-family: "Source Sans 3", "Segoe UI", sans-serif; }
.keynow.sharp { background: #1f4a34; color: #fff; }
.keybar > button { font-size: 26px; padding: 0 14px; line-height: 1.2; font-family: "Source Sans 3", "Segoe UI", sans-serif; }
.keybar select { font-size: 16px; padding: 4px 8px; font-family: "Iowan Old Style", Palatino, Georgia, serif; }
.keybar label { font-size: 17px; }
.pick-board { margin: 8px 0 4px; }
.pick-kbd { position: relative; height: 110px; }
.pick-kbd i.chain.w { background: #7faf93; border-color: #1f4a34; }
.pick-kbd i.chain.b { background: #163828; border-color: #0d2419; box-shadow: inset 0 0 0 2px #8fbfa4; }
.pick-kbd i.cur.w { background: #1f4a34; box-shadow: inset 0 0 0 3px #fff; z-index: 2; }
.pick-kbd i.cur.b { background: #8fbfa4; box-shadow: inset 0 0 0 2px #163828; z-index: 3; }
.entry { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px; margin-bottom: 10px; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 8px; }
.entry-grid label { display: flex; flex-direction: column; font-size: 13px; color: #555; gap: 2px; }
.entry-grid input { font-size: 18px; font-weight: 600; padding: 4px 6px; width: 100%; }
.entry-grid label.ro input { background: #f6f6f6; color: #333; font-weight: 500; }
.entry .keycard-no { border-radius: 6px; margin: 8px 0; }
table.grid td.ro { color: #222; }
table.glossary { font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif; }
table.glossary th { white-space: nowrap; vertical-align: top; font-family: "Source Sans 3", "Segoe UI", sans-serif; font-weight: 700; font-size: 19px; color: #1f4a34; letter-spacing: .3px; }
table.glossary td { font-weight: 400; color: #3a3a3a; font-size: 18px; line-height: 1.4; text-align: left; }
table.glossary td.en { font-style: italic; color: #777; white-space: nowrap; font-size: 16px; }
.keycard-no { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; background: #f4f4f4; }
.keycard-no.sharp { background: #1f4a34; color: #fff; }
.keycard-no b, .keycard-no span { font-size: 42px; font-weight: 700; color: inherit; }
.keycard-no small { margin-left: auto; color: #777; }
.keycard-no.sharp small { color: #d7e6dc; }
.keys-pick .seg { font-size: 16px; padding: 8px 18px; }
table.list tr { cursor: pointer; }
.sort-wrap { position: relative; }
.sort-wrap .cmp-pop { right: auto; left: 0; min-width: 180px; }
.sort-wrap .cmp-pop button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px; font-size: 15px; }
.sort-wrap .cmp-pop button.on { background: #1f4a34; color: #fff; }
.toast { position: fixed; right: 20px; bottom: 20px; background: #1f4a34; color: #fff; padding: 10px 16px; border-radius: 6px; z-index: 10; }
.toast.bad { background: #a00; }
.cards { display: flex; gap: 12px; flex-wrap: wrap; }
.cards .card { border: 1px solid #ddd; border-radius: 6px; padding: 12px; min-width: 160px; }
.cards .want .big { color: #00005e; }
.print-head { display: none; }

@media (max-width: 1000px) {
  .split, .gridrow, .split.grid4 .side, .pair { grid-template-columns: 1fr; }
  .chart-box.half { width: 100%; }
}
@media print {
  #top, .noprint, .toolbar { display: none !important; }
  .print-head { display: block; }
  body { background: #fff; }
  main { padding: 0; }
  .scroll { max-height: none; overflow: visible; border: 0; }
  table.grid thead th { position: static; }
  table.grid input[type=checkbox] { width: auto; }
}