*{box-sizing:border-box}html,body{margin:0;padding:0;background-color:#000;height:100%}#layout-sections{position:fixed;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column}.main-area{display:flex;flex:1;min-height:0}.main-area-left{display:flex;flex-direction:column;gap:10px}.section h2,.section h3{margin-top:0}.section{position:relative;padding:0 10px}#title-section{width:100%;background-color:#0057ac;flex-shrink:0;display:flex;align-items:center;gap:10px;justify-content:space-between}#analysis-tabs{display:flex;flex-direction:row;min-height:0;gap:10px;padding-bottom:10px}#title-section h1,#title-section h3{margin:0}#timelines-section{width:100%;background-color:#0b113a;flex-shrink:0;margin-bottom:10px}#timelines-section h2{margin:0}#score-viewer-section{height:100%;width:auto;padding:0}#image-holder{height:100%;width:auto}.score-page-image{max-height:100%;object-fit:contain;flex-shrink:0}#current-bar-overlay{position:absolute;width:30px;height:30px;background:pink;opacity:30%;top:0;left:0}#architecture-list{min-width:400px}#annotations-section{height:100%;display:flex;flex-direction:column;--dynamiques-color: #ffc000;--duree-color: #00b0f0;--formes-color: #7030a0;--intonation-color: #ff0000;--motifs-color: #00b050;--timbre-color: #b84507;--graph-color: lightgray}#video-player-section{grid-area:video-player;display:none}#transport-section{grid-area:transport}#position-text p{color:#fff;display:inline}.timeline-button{height:100%;background-color:#fff;border:1px solid black;display:inline-block;cursor:pointer;padding-left:2px}.timeline-button span{display:inline-block;vertical-align:middle}.timeline-button:hover{background-color:#ff0}.annotation{background:#d3d3d3;border-left:4px solid;border-radius:5px;margin-bottom:10px;padding:5px;cursor:pointer}.scroller-area{border:1px solid gray;padding:10px;overflow:scroll}.current-annotation{background:tan}.timeline-container{display:flex;gap:10px;height:30px}.timeline-container h3{width:80px;color:#fff;margin:0;text-align:right}.timeline{flex-grow:1}#timeline-cursor{border:1px solid red;height:100%;top:-30px;position:relative;width:0;pointer-events:none}#timeline-current-bar-cursor{border:1px solid pink;height:100%;position:relative;width:0;pointer-events:none}#timeline-cursor-label{width:100px;padding-left:5px;white-space:nowrap;position:relative}#timeline-cursor.left #timeline-cursor-label{left:-210px;text-align:right;width:200px}.current-act,.current-scene{background:#d3d3d3}#annotation-type-selectors{display:flex;gap:5px;padding-bottom:5px;flex-wrap:wrap}.annotation-type{cursor:pointer;border-style:none;border-radius:5px}.annotation-type-hidden{opacity:50%}.dy-annotation-type{background-color:var(--dynamiques-color)}.du-annotation-type{background-color:var(--duree-color)}.for-annotation-type{background-color:var(--formes-color)}.int-annotation-type{background-color:var(--intonation-color)}.mo-annotation-type{background-color:var(--motifs-color)}.tim-annotation-type{background-color:var(--timbre-color)}.graph-annotation-type{background-color:var(--graph-color)}.dy-annotation{border-left-color:var(--dynamiques-color)}.du-annotation{border-left-color:var(--duree-color)}.for-annotation{border-left-color:var(--formes-color)}.int-annotation{border-left-color:var(--intonation-color)}.mo-annotation{border-left-color:var(--motifs-color)}.tim-annotation{border-left-color:var(--timbre-color)}.annotation-hidden{display:none}.change-page-button{width:100px;height:90%;background-color:pink;position:absolute;display:none}#previous-page-button{left:0}h1,h2,h3{font-family:Jost,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;color:#fff}div{font-family:Jost,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal}button{font-family:Jost,sans-serif;font-optical-sizing:auto;font-weight:600;font-style:normal;text-transform:uppercase}.architecture-list-item{color:#fff;font-size:small;cursor:pointer}.architecture-list-item--active{color:orange}.architecture-list-item:hover{color:#ff0}.title-links-and-buttons h3{cursor:pointer;text-decoration:underline;color:#d3d3d3}.title-links-and-buttons h3:hover{color:#fff}.title-links-and-buttons a{color:inherit}.title-links-and-buttons{display:flex;gap:10px}#darken{position:fixed;left:0;right:0;top:0;bottom:0;background-color:#00000080;z-index:1000000}#credits-anchor{position:fixed;left:50%;top:125px;z-index:10000000;width:0;height:0}#credits-box{position:relative;width:300px;padding:10px;margin-left:-18px;left:-150px;background-color:#d3d3d3;border:3px black solid}@media screen and (max-width: 800px){.main-area{flex-direction:column}#layout-sections{position:relative}#analysis-tabs{flex-direction:column}#annotations-scroller{max-height:500px}#score-viewer-image{width:100%}#architecture-list{min-width:0}}