body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
    background-color: #000;
    color: #fff;
}

/* HEJI Fonts for Notation Display */
@font-face {
    font-family: "HEJI2";
    src: url("fonts/HEJI2.otf") format("opentype");
}
@font-face {
    font-family: "HEJIExtensions2022";
    src: url("fonts/HEJIExtensions2025-Text.ttf") format("opentype");
}

#container {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    z-index: 100;
}

#notation-display {
    position: fixed;
    bottom: 10px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 1.2em;
    display: none; /* Initially hidden */
    text-align: left;
    /* Default styling for HEJI Ext */
    line-height: 1.2;
}

#notation-display.notation-heji {
    /* Specific styles for HEJI notation */
    font-size: 1.5em; /* Adjust size to make HEJI symbols more prominent */
    padding: 15px 20px; /* Adjust padding */
}

#notation-display .notation-dev-notename {
    font-family: monospace;
    font-size: 2em; /* Larger for the main note name */
    /* Removed display: block; to allow inline flow */
    line-height: 1; /* Adjust line height for stacking */
}

#notation-display .notation-dev-notename-inline {
    font-family: monospace;
    font-size: 1em; /* Adjusted for uniform sizing */
    display: inline-block; /* Allow inline flow */
    vertical-align: middle;
    line-height: 1; /* Adjust line height for stacking */
    margin-right: 0.2em; /* Small spacing between notes */
}

#notation-display .heji-extensions {
    font-family: "HEJIExtensions2022", sans-serif;
    font-size: 1.5em; /* Adjust size as needed */
    letter-spacing: 0.05em;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

#notation-display .heji2 {
    font-family: "HEJI2", sans-serif;
    font-size: 1.5em; /* Adjust size as needed */
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

#notation-display .notation-ratio-base,
#notation-display .notation-ratio-chord {
    font-family: monospace;
    font-size: 1.2em;
}

#settings-menu {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(30, 30, 30, 0.8);
    border-radius: 8px;
    z-index: 10;
    color: white;
    font-family: monospace;
    transform: scale(0.85);
    transform-origin: top left;
}

#settings-header {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 15px;
}

#settings-header .toggle-icon {
    transition: transform 0.2s;
    display: inline-block;
}

.settings-title-group {
    display: flex;
    align-items: center;
}

#info-link {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 35px;
}

#info-link:hover {
    color: #0056b3;
}

#settings-header.collapsed #info-link {
    display: none;
}

#settings-header.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

#settings-content {
    padding: 0 15px 15px 15px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}



#settings-menu label {
    white-space: nowrap;
    font-size: 13px;
    min-width: 70px; /* Added min-width for alignment */
}

#midiOutputSelect {
    width: 100%;
}
#settings-menu input, #settings-menu select, #settings-menu button {
    width: auto; /* Changed from 100% to auto */
    box-sizing: border-box;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #4a4a4a;
    color: #fff;
    font-size: 13px;
    font-family: monospace;
}

#timbre-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 35px;
    margin-top: 0;
}

#timbreSlider {
    width: 100%;
}

/* Range slider styling to match Timbre aesthetic */
#settings-menu input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #3d3d3d;
    border-radius: 6px;
    outline: none;
}
#settings-menu input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #007bff;
    border: none;
    box-shadow: none;
    margin-top: -4px;
}
#settings-menu input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #007bff;
    border: none;
    box-shadow: none;
}
#settings-menu input[type="range"]:focus { outline: none; }
#settings-menu input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: #3d3d3d; border-radius: 6px; }
#settings-menu input[type="range"]::-moz-range-track { height: 6px; background: #3d3d3d; border-radius: 6px; }

#waveformCanvas {
    border: 1px solid #555;
    background-color: #2a2a2a;
    border-radius: 4px;
}
#settings-menu button {
    grid-column: 1 / -1;
    cursor: pointer;
    background-color: #5a5a5a;
}

#settings-menu button:hover {
    background-color: #6a6a6a;
}

#settings-menu button.play-button-active {
    background-color: #007bff;
    border-color: #007bff;
}

#settings-menu button.play-button-active:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* New styles for pivot buttons */
.settings-row {
    grid-column: 1 / -1; /* Span across both columns */
    display: grid; /* Change from flex to grid */
    grid-template-columns: auto 1fr; /* Align with settings-content grid */
    gap: 35px; /* Maintain consistent gap */
    align-items: center;
    margin-top: 0;
}

.settings-row label {
    flex-shrink: 0; /* Prevent label from shrinking */
    font-size: 13px;
    white-space: nowrap;
}

.pivot-buttons {
    display: flex;
    gap: 5px;
    flex-grow: 1; /* Allow buttons to take available space */
}

.pivot-button {
    flex-grow: 1; /* Make buttons grow to fill space */
    padding: 5px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    background-color: #5a5a5a;
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
}

.pivot-button:hover {
    background-color: #6a6a6a;
}

#midiOutputSelect {
    width: 100%;
}

#midi-device-selector {
    grid-template-columns: auto 3fr; /* Give more space to the select element */
}

#settings-menu .pivot-button.selected {
    background-color: #007bff; /* Blue for selected */
    border-color: #007bff;
}

#settings-menu .pivot-button.selected:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.symbol {
    font-family: Arial, sans-serif;
}

.controls-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.controls-container select, .controls-container input[type="number"] {
    width: auto;
    flex-grow: 1;
}

.inline-label {
    margin-left: 8px;
}

/* Custom checkbox styles */
#settings-menu input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #fff;
    border-radius: 2px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

#settings-menu input[type="checkbox"]:checked {
    background-color: #007bff;
    border-color: #007bff;
}

#notation-display.notation-deviation {
    /* Specific styles for Deviation notation */
    font-size: 1.0em; /* Adjusted for uniform sizing */
    padding: 15px 20px; /* Adjust padding */
    line-height: 1.2; /* Ensure lines are well-spaced */
}

.midiAccidental-heji-font {
    font-family: "HEJI2", sans-serif;
    font-size: 1em; /* Adjusted for uniform sizing */
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

.deviation-cents-monospace {
    font-family: monospace;
    font-size: 1em; /* Adjusted for uniform sizing */
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    margin-left: 0.2em; /* Small space between accidental and cents */
}

/* New styles for 'All' notation type */
#notation-display.notation-all {
    padding: 10px 15px;
    font-size: 1.0em; /* Overall smaller font size for combined display */
}

.notation-all-grid {
    display: grid;
    grid-template-rows: repeat(3, auto); /* Three rows for Ratio, HEJI, Deviation */
    gap: 10px; /* Gap between rows */
}

.notation-all-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default for HEJI and Deviation rows */
    gap: 5px; /* Gap between columns/voices */
    text-align: center;
}

.notation-all-row.ratio-row {
    grid-template-columns: 1fr max-content 1fr max-content 1fr max-content 1fr; /* 4 for numbers, 3 for colons */
    gap: 0px; /* Remove gap for ratio row to make colons closer */
}

.notation-all-cell {
    white-space: nowrap; /* Prevent wrapping within a cell */
    overflow: hidden;
    text-overflow: ellipsis; /* Add ellipsis if content overflows */
    display: flex; /* Use flex to center content vertically and horizontally */
    justify-content: center;
    align-items: center;
}

.colon-cell {
    font-size: 1.2em; /* Same size as ratio numbers */
    font-family: monospace;
    color: #bbb; /* Slightly dim the colons */
    padding: 0 2px; /* Small padding around colons */
}

.ratio-cell {
    font-size: 1.2em; /* Larger for Ratio */
    font-family: monospace;
    /* Removed font-weight: bold; */
}

#notation-display.notation-all .heji-cell .notation-dev-notename-inline {
    font-size: 2.0em; /* Doubled for priority */
}
#notation-display.notation-all .heji-cell .heji-extensions,
#notation-display.notation-all .heji-cell .heji2 {
    font-size: 2.376em; /* Doubled for priority */
}

.deviation-cell .notation-dev-notename-inline,
.deviation-cell .midiAccidental-heji-font,
.deviation-cell .deviation-cents-monospace {
    font-size: 0.8em; /* Smaller for Deviation */
}

#hand-tracking-section {
    display: none;
}