:root{--color-main:#131f28;--nav-height:150px}main{background-color:var(--color-main);width:100vw;height:100vh;position:fixed;top:0;left:0}#main-view{width:100%;height:100%;display:flex}#main-view section{flex-direction:column;justify-content:flex-end;min-width:0;height:100%;display:flex}#main-view section:first-child{border-right:2px solid #fff;flex-basis:40%}#main-view section:last-child{flex:1}.nav-period{height:var(--nav-height);background-color:gray;width:100%;display:flex}.nav-period button{flex:1}.nav-period button.selected{background-color:#d3d3d3}#nav-timeline{-webkit-user-select:none;user-select:none;height:var(--nav-height);width:100%;position:relative}#nav-timeline-background{width:100%;height:100%;display:flex;position:relative;overflow-x:hidden}.nav-subperiod{color:#fff;flex-shrink:0;width:100%;height:100%;position:relative}.nav-ticks{border-bottom:1px solid #fff;width:100%;height:25%;position:absolute;top:0;left:0}.nav-tick{border-left:1px solid #fff;height:8px;position:absolute;bottom:0}.nav-tick-label{font-size:16px;position:absolute;bottom:14px;left:0;transform:translate(-50%)}.nav-subperiod-line{border-left:1px solid #fff;height:75%;position:absolute;bottom:0}.nav-subperiod-label{font-size:48px;position:absolute;bottom:4px;left:4px}#nav-timeline-cursor{cursor:grab;touch-action:none;z-index:2;width:24px;height:100%;position:absolute;top:0;transform:translate(-50%)}#nav-timeline-cursor:before{content:"";border-left:2px dashed #e8604c;height:100%;position:absolute;top:0;left:50%}.cursor-dot{box-sizing:border-box;background-color:#e8604c;border:2px solid #fff;border-radius:50%;width:32px;height:32px;position:absolute;top:25%;left:50%;transform:translate(-50%,-50%)}.nav-projection{z-index:1;pointer-events:none;border-left:1px dashed #7fd0ff;height:75%;position:absolute;bottom:0}.content-panel{color:#fff;flex:1;min-width:0;min-height:0;overflow:hidden}.content-panel-inner{box-sizing:border-box;flex-direction:column;align-items:center;gap:16px;height:100%;padding:24px 48px;display:flex}.content-panel{--title-lines:2;--description-lines:8}.content-title{text-align:center;overflow-wrap:anywhere;height:calc(var(--title-lines) * 1.1em);flex-shrink:0;margin:0;line-height:1.1;overflow:hidden}.content-description{height:calc(var(--description-lines) * 1.5em);flex-shrink:0;margin:0;font-size:24px;line-height:1.5;overflow:hidden}.content-media{object-fit:contain;flex:1;max-width:100%;min-height:0}.content-left .content-title{text-transform:uppercase;font-family:serif;font-size:64px;font-weight:400}.content-left .content-description{text-align:justify}.content-right{border-bottom:1px solid #fff}.content-right .content-title{text-transform:uppercase;font-size:32px}#step-buttons{z-index:10;gap:8px;display:flex;position:fixed;top:16px;right:16px}#step-buttons button{width:64px;height:64px;font-size:32px}