header {
    padding: var(--padding-large);
    box-sizing: border-box;
    text-align: center;
}

header>.logo {
    height: var(--length-huge);
}
header>.title {
    display: block;
}

main {
    padding: 0 var(--padding-large);
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

main>.selector-group {
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    width: 100%;
}
main>.selector-group>.selector {
    width: 100%;
    height: calc(4 * var(--padding-normal) + var(--length-normal));
    padding: var(--padding-normal);
    box-sizing: border-box;
    background-color: var(--color-back);
    cursor: pointer;
    display: flex;
    align-items: center;
}
main>.selector-group>.selector + .selector {
    margin-top: var(--margin-normal);
}
main>.selector-group>.selector>.label {
    flex: 1;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
}
main>.selector-group>.selector>.current-option {
    width: var(--proportion-normal);
    height: 100%;
    margin-left: var(--margin-normal);
    padding: var(--padding-normal);
    box-sizing: border-box;
    outline: var(--width-normal) solid var(--color-active);
    display: flex;
    align-items: center;
    transition-property: outline-color;
    transition-duration: var(--duration-normal);
    transition-timing-function: ease-in-out;
}
main>.selector-group>.selector:hover>.current-option {
    outline-color: var(--color-focus);
}
main>.selector-group>.selector>.current-option>.current-icon {
    height: 100%;
}
main>.selector-group>.selector>.current-option>.current-name {
    flex: 1;
    margin-left: var(--margin-normal);
}
main>.selector-group>.selector>.current-option>.dropdown {
    flex-shrink: 0;
    flex-grow: 0;
    margin-left: var(--margin-normal);
    color: var(--color-active);
    transition-property: color;
    transition-duration: var(--duration-normal);
    transition-timing-function: ease-in-out;
}
main>.selector-group>.selector:hover>.current-option>.dropdown {
    color: var(--color-focus);
}

main>.info-group {
    flex: 1;
    width: 100%;
    margin-top: var(--margin-large);
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}
main>.info-group>.info {
    flex: 1;
    position: relative;
    width: 100%;
    padding: var(--padding-normal);
    box-sizing: border-box;
    background-color: var(--color-back);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}
main>.info-group>.info + .info{
    margin-top: var(--margin-normal);
}
main>.info-group>.info.hidden {
    display: none;
}
main>.info-group>.info>.head {
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: calc(2 * var(--padding-normal) + var(--length-normal));
}
main>.info-group>.info>.head>.label {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
}
main>.info-group>.info>.head>.note {
    position: absolute;
    top: 50%;
    left: 0;
    height: 50%;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-small);
    color: var(--color-hint);
}
main>.info-group>.info>.head>.btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    line-height: var(--length-normal);
}
main>.info-group>.info>.text {
    flex: 1;
    width: 100%;
    margin-top: var(--margin-normal);
}

main>.button-group {
    flex-shrink: 0;
    flex-grow: 0;
    align-self: flex-end;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(2 * var(--padding-normal) + var(--length-large));
    margin-top: var(--margin-large);
    display: flex;
    justify-content: center;
}
main>.button-group>.btn {
    flex: 1;
    height: 100%;
}
main>.button-group>.btn + .btn {
    margin-left: var(--margin-large);
}

main>.menu {
    position: absolute;
    top: 0;
    left: var(--margin-large);
    width: calc(100% - 2 * var(--margin-large));
    height: 100%;
    padding: var(--padding-large);
    box-sizing: border-box;
    background-color: var(--color-back);
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    transition-property: opacity;
    transition-duration: var(--duration-normal);
    transition-timing-function: ease-in-out;
}
main>.menu.hidden {
    opacity: 0;
    pointer-events: none;
}
main>.menu>.head {
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: calc(2 * var(--padding-normal) + var(--length-normal));
}
main>.menu>.head>.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: calc(2 * var(--padding-normal) + var(--length-normal));
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
}
main>.menu>.head>.btn {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(2 * var(--padding-normal) + var(--length-normal));
    height: 100%;
    line-height: var(--length-normal);
}
main>.menu>.content {
    flex: 1;
    width: 100%;
    height: 100%;
}
main>.menu>.content>.option {
    width: 100%;
    height: calc(2 * var(--padding-normal) + var(--length-large));
    margin-top: var(--margin-large);
    outline: var(--width-normal) solid transparent;
    padding: var(--padding-normal);
    box-sizing: border-box;
    background-color: var(--color-active);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition-property: background-color;
    transition-duration: var(--duration-normal);
    transition-timing-function: ease-in-out;
}
main>.menu>.content>.option:hover {
    background-color: var(--color-focus);
}
main>.menu>.content>.option.selected {
    outline-color: var(--color-selection);
    pointer-events: none;
}
main>.menu>.content>.option.hidden {
    display: none;
}
main>.menu>.content>.option>.icon {
    height: 100%;
}
main>.menu>.content>.option>.name {
    flex: 1;
    margin-left: var(--margin-normal);
}

main>.popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 var(--padding-large);
    box-sizing: border-box;
    backdrop-filter: blur(var(--radius-normal));
    background-color: var(--color-backdrop);
    transition-property: opacity;
    transition-duration: var(--duration-normal);
    transition-timing-function: ease-in-out;
}
main>.popup.hidden {
    opacity: 0;
    pointer-events: none;
}
main>.popup>.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--proportion-normal);
    padding: var(--padding-large);
    box-sizing: border-box;
    background-color: var(--color-back);
}
main>.popup>.container>.head {
    position: relative;
    width: 100%;
    height: calc(2 * var(--padding-normal) + var(--length-normal));
}
main>.popup>.container>.head>.title {
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-large);
}
main>.popup>.container>.head>.note {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-small);
    color: var(--color-hint);
}
main>.popup>.container>.head>.btn {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(2 * var(--padding-normal) + var(--length-normal));
    height: 100%;
    line-height: var(--length-normal);
}
main>.popup>.container>.tool-group {
    position: relative;
    width: 100%;
}
main>.popup>.container>.tool-group>.btn {
    position: relative;
    width: 100%;
    height: calc(2 * var(--padding-normal) + var(--length-large));
    margin-top: var(--margin-large);
}
main>.popup>.container>.tool-group>.btn.hidden {
    display: none;
}

footer {
    padding: var(--padding-large);
    box-sizing: border-box;
    text-align: center;
}