/* The original duet remains above an independent melody notebook. */
:root { --ink:#19262b; --paper:#f5f3ed; --line:#d9ded7; --accent:#245d55; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { height:100dvh; overflow:hidden; background:#080b0c; display:grid; grid-template-rows:minmax(0,1fr) auto auto; grid-template-columns:minmax(0,1fr); justify-content:stretch; font-family:'Montserrat',sans-serif; }
#container { position:relative; min-height:0; height:100%; width:100%; grid-row:1; overflow:hidden; }
#container video { object-fit:contain; }
.key img { object-fit:contain; max-height:100%; width:100%!important; }
.keyboard-mobile { grid-row:2; height:clamp(62px,14dvh,112px); min-height:0; }
.popup { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); max-height:94dvh; overflow:auto; max-width:520px; width:calc(100% - 32px); }
.popup .title div { font-size:1.35em; }
.popup .v2-subtitle { color:#245d55; font-size:10px; letter-spacing:2px; margin:18px 0 0; }
.transparency { position:fixed; }
.helpBtn { box-sizing:content-box; }
#melodyTray { grid-row:3; background:var(--paper); color:var(--ink); min-width:0; z-index:2; border-top:1px solid #fff8; }
.tray-bar { display:flex; align-items:center; min-height:60px; gap:16px; padding:9px 22px; background:#142d30; color:#f7f5ed; }
#melodyTray button,.import-label { font:inherit; font-size:12px; cursor:pointer; border:1px solid #bbc7bf; border-radius:7px; padding:8px 12px; background:transparent; color:inherit; min-height:36px; }
#melodyTray button:hover,.import-label:hover { background:#dfebe4; }
#melodyTray button:focus-visible,.import-label:focus-within,#melodyTray input:focus-visible { outline:3px solid #edb43f; outline-offset:3px; }
#melodyTray button:disabled { cursor:default; opacity:.45; }
#melodyTray #trayToggle { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; border:0; padding:6px 0; white-space:nowrap; }
#melodyTray #trayToggle:hover { background:transparent; color:#ffda8a; }
.tray-chevron { font-size:24px; line-height:1; width:22px; }
#trayToggle[aria-expanded=false] .tray-chevron { transform:rotate(180deg); }
.count { border:1px solid #7d9a91; border-radius:20px; padding:3px 8px; font-size:11px; font-weight:400; }
#captureStatus { font-size:11px; color:#bcd2cc; margin-left:auto; }
#captureStatus.recording { color:#ffdc91; }
#captureStatus.recording:before { content:'●'; color:#f9ba68; margin-right:7px; }
#liveMini { width:140px; height:32px; border-radius:3px; background:#e9efe9; }
#melodyTray #finishTake { border-color:#567771; color:#fff; }
#melodyTray #finishTake:hover:not(:disabled) { background:#2c504d; }
#melodyTray #returnToDuet { background:#f2d89f; border-color:#f2d89f; color:#142d30; white-space:nowrap; }
#melodyTray #returnToDuet:hover { background:#ffe7b7; }
#trayContents { padding:0 22px 10px; max-height:min(330px,44dvh); overflow:auto; }
#trayContents[hidden] { display:none; }
.notebook-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }
.notebook-tools p { margin:0; font-size:11px; line-height:1.5; color:#5d6a66; }
.notebook-tools>div { display:flex; gap:8px; flex:none; }
.import-label { position:relative; display:inline-flex; align-items:center; overflow:hidden; }
.import-label input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.take-strip { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px; overscroll-behavior-x:contain; scrollbar-color:#a6b7ac transparent; }
.take-card { width:282px; flex:0 0 282px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 2px 4px #0e292b05; }
.take-card.playing { border-color:#245d55; box-shadow:0 0 0 1px #245d55; }
.take-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.take-title { min-width:0; width:100%; border:0; border-bottom:1px solid transparent; background:transparent; color:var(--ink); font:600 12px 'Montserrat',sans-serif; padding:3px 0; }
.take-title:hover { border-color:var(--line); }
.take-meta { font-size:10px; color:#6b7770; margin:0 0 10px; }
.take-roll { display:block; width:100%; height:92px; border-radius:4px; background:#f5f7f2; }
.take-actions { display:flex; align-items:center; gap:6px; margin-top:10px; }
#melodyTray .take-play { background:var(--accent); border-color:var(--accent); color:white; }
#melodyTray .take-delete { margin-left:auto; border:0; color:#67716c; font-size:18px; padding:5px 8px; }
.empty-notebook { min-height:168px; width:100%; display:flex; justify-content:center; align-items:center; gap:24px; padding:20px; border:1px dashed #b5c5bc; border-radius:9px; }
.empty-symbol { font-size:48px; color:#688d7f; }
.empty-notebook strong { font-size:14px; font-weight:600; }
.empty-notebook p { font-size:12px; line-height:1.7; color:#68746e; max-width:500px; margin-bottom:0; }
.notebook-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font-size:10px; color:#66746e; padding-top:4px; }
.notebook-bottom a { color:inherit; }
#melodyTray #undoDelete { padding:0; border:0; min-height:20px; text-decoration:underline; }
@media(max-width:700px) {
  .tray-bar { gap:9px; padding:8px 12px; flex-wrap:wrap; min-height:52px; }
  #melodyTray #trayToggle { font-size:13px; }
  #liveMini { display:none; }
  #captureStatus { font-size:10px; }
  #melodyTray #finishTake { display:none; }
  #trayContents { padding:0 12px 9px; max-height:40dvh; }
  .notebook-tools { flex-wrap:wrap; gap:6px; }
  .notebook-tools p { font-size:10px; }
  .notebook-tools>div { margin-left:auto; }
  .take-card { width:258px; flex-basis:258px; padding:10px; }
  .take-roll { height:78px; }
  .empty-notebook { gap:12px; padding:14px; min-height:130px; }
  .empty-notebook p { font-size:11px; }
  .empty-symbol { font-size:34px; }
  .notebook-bottom { font-size:9px; }
  .helpBtn { transform:scale(.7); transform-origin:top right; }
  #inputMode { right:58px; top:12px; font-size:11px; padding:7px; }
}
@media (any-hover:none) and (pointer:coarse) {
  #container { width:100%; height:100%; }
  #container video,.key img { object-fit:contain; object-position:center; }
  #inputMode { display:none; }
  .keyboard-mobile { display:flex; touch-action:none; }
}
@media (hover:none) and (orientation:portrait) {
  .tilt { display:none; }
  .keyboard-mobile { display:flex; }
}
@media(max-height:520px) {
  #trayContents { max-height:47dvh; }
  .tray-bar { min-height:44px; padding-top:4px; padding-bottom:4px; }
  .notebook-tools { padding:6px 0; }
  .take-roll { height:54px; }
  .take-card { padding:8px; }
  .notebook-bottom { padding-bottom:3px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }