html{
    font-size: 62.5%;
}

.flex-center-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body{
    min-height: 100vh;
    background-color: var(--color-bg-main);
    font-family: var(--font-primary);
    padding: 4rem 2rem;
    gap: 3.2rem;
}

.container{
    gap: 4rem;

    border-radius: 3.2rem;
    background-color: var(--color-bg-ssection);

    padding: 4rem;
    width: min(112rem, calc(100vw - 4rem));
}

.imgContainer{
    object-fit: cover;
    border-radius: 3.2rem;
    position: relative;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.04),
        0 8px 16px rgba(0,0,0,0.06),
        0 16px 32px rgba(0,0,0,0.04);
}

#still-img{
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 3.2rem;
}

.btn {
    min-width: 24rem;
    height: 6rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border: none;
    border-radius: 2.4rem;

    font-size: var(--fs-xl);
    font-weight: 600;

    background-color: var(--color-btn-primary);
    color: var(--color-btn-text);

    cursor: pointer;

    transition: all 0.2s ease;

    box-shadow:
        0 2px 4px rgba(0,0,0,0.04),
        0 6px 12px rgba(0,0,0,0.06),
        0 12px 24px rgba(0,0,0,0.04);
}

.secondary-btn{
    background-color: #d7dbe8;
    color: #24314d;
}

.btn[data-state="primary"]{
    background-color: var(--color-btn-primary);
    color: var(--color-btn-text);
}

.btn[data-state="active"]{
    background-color: #24314d;
    color: #ffffff;
    cursor: progress;
}

.btn[data-state="disabled"]{
    background-color: #d9d4cb;
    color: #8b8376;
    cursor: not-allowed;
    box-shadow: none;
}

.btn[data-state="completed"]{
    background-color: #b7b0a3;
    color: #f8f5ef;
    cursor: not-allowed;
    box-shadow: none;
}

.btn:hover {
    background-color: var(--color-btn-primary-hover);
    transform: translateY(-2px);
}

.secondary-btn:hover {
    background-color: #c8cede;
}

.btn[data-state="active"]:hover,
.btn[data-state="disabled"]:hover,
.btn[data-state="completed"]:hover,
.btn:disabled:hover{
    transform: none;
}

.btn[data-state="active"]:hover{
    background-color: #1b263b;
}

.btn[data-state="disabled"]:hover{
    background-color: #d9d4cb;
}

.btn[data-state="completed"]:hover{
    background-color: #b7b0a3;
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled{
    cursor: not-allowed;
}

.canvas{
    position: absolute;
    left: 0;
    top:0;
    pointer-events: none;
}

.video-section{
    align-items: stretch;
}

.section-title{
    font-size: 2.8rem;
    font-weight: 700;
    color: #24314d;
}

.video-toolbar{
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    align-items: end;
}

.field{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #4b587c;
}

.field span{
    font-weight: 600;
}

.field select,
.field input{
    min-width: 18rem;
    height: 4.8rem;
    border: 1px solid #ccd3e5;
    border-radius: 1.6rem;
    padding: 0 1.6rem;
    font-size: 1.6rem;
    background-color: #fff;
}

.status-text{
    min-height: 2.4rem;
    font-size: 1.5rem;
    color: #4b587c;
}

.videoPlayerContainer{
    position: relative;
    width: 100%;
    max-width: 96rem;
    border-radius: 3.2rem;
    overflow: hidden;
    background: #0f1728;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.04),
        0 8px 16px rgba(0,0,0,0.06),
        0 16px 32px rgba(0,0,0,0.04);
}

.source-video{
    display: block;
    width: 100%;
    height: auto;
}

.video-overlay{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@media (max-width: 768px){
    .container{
        padding: 2.4rem;
    }

    .video-toolbar{
        flex-direction: column;
        align-items: stretch;
    }

    .btn,
    .field select,
    .field input{
        width: 100%;
    }
}