/*////////////////////////////////////////////////////////////////////////////////////
/// Copyright 2026-2027, Skylar State (skylar@skylars.world), all rights reserved. ///
////////////////////////////////////////////////////////////////////////////////////*/

 
 :root {
  --whiteKeyWidth: 24px;
  --whiteKeyHeight: calc((var(--whiteKeyWidth)/72)*524);
  --blackKeyWidth: 15px;
  --windowHeight: 100%;
  --noteBorderWidth: 2px;
  --noteTemplateWidth: 20px;
  --pageScale: 1;
  --keyp: calc(100%/52);
  
  --selectedKey: 'C';
  --flowBoxWidth: 1248px;
  --flowboxHeight: 100%;
  
  --measureHeight:      250px;
  --divisionSize_1:     calc(var(--measureHeight));         /* whole */
  --divisionSize_2:     calc(var(--measureHeight) / 2);   /* half */
  --divisionSize_4:     calc(var(--measureHeight) / 4);   /* quarter */
  --divisionSize_8:     calc(var(--measureHeight) / 8);   /* eight */
  --divisionSize_16:    calc(var(--measureHeight) / 16);  /* sixteenth */
  --divisionSize_32:    calc(var(--measureHeight) / 32);  /* thirty-second */
 }
 * { box-sizing: border-box; margin: 0; white-space: nowrap; user-select: none; }
 
 html,body { width: 100%; height: 100vh; height: 100dvh; left: 0; top: 0; min-width: 100%; max-width: 100%; }
 body {
  font-family: Arial;
  transform: scale(1);
  transform-origin: top left;
  margin-top: 1px; padding: 1px; padding-bottom: 3px; padding-right: 2px;
  background: #2A7B9B; overflow: hidden; display: flex; justify-content: center;
  background: linear-gradient(180deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
 }
 
 #bodyBox {
  position: relative; left: 0px; top: 0px; overflow: hidden;
  margin: 0px; background-color: rgba(0, 0, 0, 1); width: 100%; height: 100%; /*-webkit-fill-available  overscroll-behavior: none;*/;
  padding: 0px; /*justify-content: center;*/ margin: auto;
  /*padding: 0px; overflow: scroll; display: flex; justify-content: center;*/
  /*touch-action: none;*/
 }
 
 #flowBox {
  position: relative; top: 0; width: var(--flowboxWidth); height: var(--flowboxHeight); overflow: scroll; scrollbar-width: none; scrollbar-height: none;
  border-left: 5px solid #29303A; border-right: 5px solid #29303A; background-color: #0b0d12;
  background-color: black; left: 50%; transform: translateX(-50%);
 }
 
 #noteBox {
  position: relative; box-sizing: content-box; left: 0; top: 0;
  width: auto; height: 500px; /*border: 3px solid #000;*/
  background-color: #0b0d12;
  background-repeat: repeat-y;
  background-size: auto;
  background-color: black;
  border-top: #222 6px solid; /* #0a2447 */
  border-bottom: #0a2447 6px solid;
 }
 
 
  
  
 #toolBoxNoteWhite, #toolBoxNoteBlack {
  height: 30px; top: 40px; position: initial; display: flex;
  background-color: #111111;; border-radius: 5px; width: 20px;
  background: linear-gradient(180deg, #999 0%, #555 90%); border: #000 2px solid;
 }
 #toolBoxNoteBlack {
  width: calc(var(--blackKeyWidth)); margin-top: 10px; margin-bottom: 15px;
 }
 #toolBoxNoteWhite:hover, #toolBoxNoteBlack:hover {
  background: linear-gradient(180deg, #2697ff 0%, #00f2ee 90%);
  border: #FFF 2px solid;
 }
 
 #toolBoxEdit {
  background-image: url("<?php rq("assets/edit.svg") ?>");
  display: flex; width: 30px; height: 30px; opacity: 100%;
  background-size: 100% 100%; margin-left: 3px;
 }
 #toolBoxEdit:hover {
  background-image: url("<?php rq("assets/edit2.svg") ?>");
 }
 
 .noteStyleRegular {
  border: #00fffb 2px solid; border-radius: 5px;
  background: linear-gradient(180deg, #2697ff 0%, #2ffffd 90%);
  box-shadow: inset 0 0 5px 2px #46a7ff; /*, 0 0 4px 3px rgba(72, 171, 224, 0.6);*/
 }
 .noteStyleEdit {
  background-color: #3399ff; border-radius: 0px;
 }
 .noteStyleEdit:hover { border: #fff 2px solid; }

 
 .fnNote {
  position: absolute; height: 246px; bottom: 0; touch-action: none;
 }
 
 .fnWhite {
  width: calc(var(--whiteKeyWidth) - 4px);
  background: linear-gradient(180deg, #2697ff 0%, #00f2ee 90%); border: #00fffb 2px solid;
 }
 .fnBlack {
  width: calc(var(--blackKeyWidth));
  background: linear-gradient(180deg, #1bb341 0%, #18f290 90%); border: #00ff7c 2px solid;
  background: linear-gradient(180deg, #2697ff 0%, #00f2ee 90%); border: #00fffb 2px solid;
  filter: hue-rotate(-60deg); z-index: 99999999 !important;
}
 /*.fnWhite:hover { border: #fff 2px solid; */ /*background-color: #4da6ff;*/ /*animation: animOver 1s ease-in 0s 1 normal forwards;*/
 /*background: linear-gradient(180deg, var(--clr1), var(--clr2)); transition: background 1s ease-in;*/
 /* animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]; */

 .fnTH {
  position: absolute; width: 100%; height: 6px;
  background-color: #80ffe5;
  /*background: linear-gradient(0deg, #2697ff 0%, #2ffffd 90%);*/
  border-radius: 0px 0px 0 0;
 }
 .fnTH:hover { background-color: #a1d5ff; cursor: ns-resize; }

 .fnBH {
  position: absolute; width: 100%; height: 6px; bottom: 0px;
  background-color: #80ffe5;
  /*background: linear-gradient(180deg, #2697ff 0%, #2ffffd 90%);*/
  border-radius: 0 0 0px 0px;
 }
 .fnBH:hover { background-color: #a1d5ff; cursor: ns-resize; }
 
 @property --clr1 { syntax: '<color>'; initial-value: #2697ff; inherits: false; }
 @property --clr2 { syntax: '<color>'; initial-value: #00f2ee; inherits: false; }
 @keyframes animOver { 0% { --clr1: #2697ff; --clr2: #00f2ee; } 100% { --clr1: red; --clr2: #2697ff; } }

 .fnSelected::before {
  content: ''; left: -2px; top: -2px;
  border: #fff 2px solid;
  position: absolute; width: 100%; height: 100%;
  box-shadow: 0px 0px 8px 2px rgba(255,255,255,1);
 }
 .fnSelected:hover::before {
  box-shadow: 0px 0px 8px 3px rgba(255,255,255,1);
 }
 .fnFaded { opacity: 25%; }

 .fnSelected::after {
  background: none; color: white; position: absolute; bottom: -20px; font-size: 30px;
  content: var(--selectedKey); width: 100%; height: 100%; left: 50%; transform: translate(-50%, 0);
 }
 /*.fnSelected::after {
  content: 'X';
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  position: absolute; border-radius: 50%; font-family: Arial; font-size: 14px; z-index: 999999;
  top: 0px; right: -20px; background-color: white; font-weight: bold; cursor: pointer;
  display: none;
 }*/
 .fnSelected::after:hover { background-color: red; }
 

 .notepos1 { margin-top: 0; }
 /*.notepos1_2 { margin-top: calc(var(--))*/

 .keyWhite {
  position: absolute; width: var(--whiteKeyWidth); height: var(--whiteKeyHeight); top: 0; left: 0;
  background-image: url("assets/keyboard.png");
  background-size: 5200% 100%;
  background-repeat: no-repeat;
 }
 .keyDown {
  /*background-image: url("assets/keyboard_down.png");*/
 }
 .keyDownLeft {
  /*background-image: url("assets/keyboard_down_left.png");*/
 }
 
 #navBox {
  /*position: absolute; left: 50%; transform: translateX(-50%); display: flex; top: 3px;*/
  position: absolute; left: 0px; display: flex; top: 3px; padding-left: 5px; z-index: 9900000;
 }
 #playpause {
  width: 21px; height: 21px;
 }
 
 .resetnotes {
  margin-right: 10px; background-color: black; padding: 2px 5px; color: white;
  font-family: Arial; font-size: 12px; display: flex;
  justify-content: center; align-items: center;
 }
 .resetnotes:hover { cursor: pointer; background-color: #3399ff; }



  
  
  
  
  
  
  
  
  
  
  
 .draggingNote { touch-action: none; overscroll-behavior: none; opacity: 1; }
 .draggingBar { opacity: 1; border-color: red; cursor: "ns-resize" !important; }
 .draggingLine { background-color: rgba(90, 90, 90, 1); cursor: "ns-resize"; }

 #startLine {
  position: absolute; width: 100%; height: 8px; background-color: rgba(45, 45, 45, 1);
  left: 0; bottom: 0px; border-bottom: #555 2px solid; z-index: 9900001;
 }
 #startLine:hover {
  border-bottom: #666 2px solid; cursor: ns-resize; background-color: rgba(80, 80, 80, 1);
 }
 #startLine::after {
  position: absolute; right: 2px; top: -18px;
  content: '𝄆 Start'; font-family: Tahoma; font-size: 12px; color: #555; background-color: rgba(0, 0, 0, 0.5);
 }
 
 
 #stopLine {
  position: absolute; width: 100%; height: 8px; background-color: rgba(45, 45, 45, 1);
  left: 0; bottom: 0px; border-bottom: #555 2px solid; z-index: 9900001;
 }
 #stopLine:hover {
  border-bottom: #666 2px solid; cursor: ns-resize; background-color: #666;
 }
 #stopLine::after {
  position: absolute; right: 2px; bottom: -18px;
  content: '𝄇 Stop'; font-family: Tahoma; font-size: 12px; color: #555; background-color: rgba(0, 0, 0, 0.5);
 }
 
 
 
 #noteBoxLeadIn, #noteBoxLeadOut {
  display: none; position: relative; width: 100%; height: 30px; justify-content: center; align-items: center;
  font-size: 12px; font-family: Arial Black; background: none; box-sizing: border-box; color: #e0e0e0; line-height: 100%;
 }

 #noteBoxLeadIn { border-top: #072953 1px solid; } /* bottom */
 #noteBoxLeadOut {  } /* top */
 
 #noteBoxLeadIn:hover { background: linear-gradient(67deg, #2697ff 0%, #00f2ee 90%); }
 #noteBoxLeadOut:hover, #noteBoxLeadIn:hover { cursor: pointer; color: #fff; }
 #noteBoxLeadOut:hover { background: linear-gradient(67deg, #00f2ee 0%, #2697ff 90%); }

 
 /*border: 3px solid #000;*/  /*border-bottom: #29303A 5px solid;*/
 

 #pianoContainer { z-index: 9; left: 0;
  display: flex; position: sticky; width: calc(var(--whiteKeyWidth)*52); height: calc(var(--whiteKeyHeight) - 6px); bottom: 0px; justify-content: center;
  background-color: black; overflow: hidden; z-index: 9900002;
  }
 
 #pianoBox { /* 2048x241 -> (1248/2048*241+ ~= 147) */
  display: flex; position: absolute; width: 100%; height: 100%; bottom: 0px;
  background-color: transparent; /*background-image: url("assets/keyboard.png?1"); background-size: cover;*/
  /*border-left: 5px solid red; border-right: 5px solid #293040;*/
  left: 0;
 }
 
 #debugbox { display: block; z-index: 999999; }
 
 #toolBoxContainer {
  position: absolute; left: 0; top: 40px; width: 35px; height: 250px; z-index: 9900002;
 }

 #toolBox {
  position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; border-right: #111111 2px solid;
  background-color: rgba(0, 0, 0, 0.75); display: flex; align-items: center; padding-top: 8px;
  flex-direction: column;
 }
 




 #measureIndicator {
  position: absolute; display: block; width: auto; height: auto; background-color: rgba(0, 0, 0, 1); text-align: center;
  font-family: Arial Black; font-size: 36px; font-weight: bold; bottom: 100px; left: 40px; color: rgba(255, 255, 255, 0.2);
  padding: 3px 7px 4px 6px; z-index: 1; line-height: 35px; white-space: pre;
 }
 #measureIndicator.time2_2::after  { content: "2"  "\A"  "2"; }
 #measureIndicator.time2_4::after  { content: "2"  "\A"  "4"; }
 #measureIndicator.time3_4::after  { content: "3"  "\A"  "4"; }
 #measureIndicator.time4_4::after  { content: "4"  "\A"  "4"; }
 #measureIndicator.time3_2::after  { content: "3"  "\A"  "2"; }
 #measureIndicator.time2_8::after  { content: "2"  "\A"  "8"; }
 #measureIndicator.time3_8::after  { content: "3"  "\A"  "8"; }
 #measureIndicator.time4_8::after  { content: "4"  "\A"  "8"; }
 #measureIndicator.time6_8::after  { content: "6"  "\A"  "8"; }
 #measureIndicator.time9_8::after  { content: "9"  "\A"  "8"; }
 #measureIndicator.time12_8::after { content: "12" "\A"  "8"; }
 #measureIndicator.time6_4::after  { content: "6"  "\A"  "4"; }
 #measureIndicator.time9_4::after  { content: "9"  "\A"  "4"; }
 #measureIndicator.time12_4::after { content: "12" "\A"  "4"; }
 #measureIndicator.time5_4::after  { content: "5"  "\A"  "4"; }
 #measureIndicator.time7_4::after  { content: "7"  "\A"  "4"; }
 #measureIndicator.time5_8::after  { content: "5"  "\A"  "8"; }
 #measureIndicator.time7_8::after  { content: "7"  "\A"  "8"; }
 #measureIndicator.time11_8::after { content: "11" "\A"  "8"; }