:root {
    --navy: #002f67;
    --blue: #07518e;
    --orange: #f5a20b;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    display: grid;
    grid-template-rows:
        auto
        auto
        minmax(0, 1fr)
        auto;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #26333e;
}

.rdc-viewer-header {
    display: flex;

    gap: 1rem;

    align-items: center;
    justify-content: space-between;

    padding:
        .75rem
        1rem;

    border-top:
        4px solid
        var(--orange);

    background:
        linear-gradient(
            120deg,
            #002359,
            #07518e
        );

    color: #fff;
}

.rdc-viewer-eyebrow {
    color: var(--orange);

    font-size: .67rem;
    font-weight: 900;

    letter-spacing: .08em;
}

.rdc-viewer-header h1 {
    margin:
        .15rem
        0
        0;

    font-size:
        clamp(
            .95rem,
            2vw,
            1.25rem
        );
}

.rdc-viewer-header p {
    margin:
        .2rem
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: .72rem;
}

.rdc-viewer-header button {
    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    color: #fff;

    font-size: 1.25rem;
}

.rdc-viewer-toolbar {
    display: flex;

    gap: .75rem;

    align-items: center;
    justify-content: space-between;

    min-height: 52px;

    padding:
        .4rem
        .65rem;

    background: #fff;

    border-bottom:
        1px solid
        #ccd8e2;
}

.rdc-viewer-toolbar > div {
    display: flex;

    gap: .3rem;

    align-items: center;
}

.rdc-viewer-toolbar button,
.rdc-viewer-toolbar input {
    min-height: 36px;

    border:
        1px solid
        #ccd8e2;

    border-radius: 8px;

    background: #f7f9fb;

    color: var(--navy);

    font-weight: 800;
}

.rdc-viewer-toolbar button {
    min-width: 36px;

    padding:
        .3rem
        .55rem;
}

.rdc-viewer-toolbar input {
    width: 48px;

    padding:
        .25rem;

    text-align: center;
}

.rdc-viewer-toolbar span {
    color: #607285;

    font-size: .75rem;
}

[data-stage] {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: auto;

    padding: 1rem;

    text-align: center;

    background:
        radial-gradient(
            circle at center top,
            #4a5864,
            #26333e
        );
}

[data-canvas] {
    display: block;

    margin:
        0
        auto;

    background: #fff;

    box-shadow:
        0 12px 32px
        rgba(
            0,
            0,
            0,
            .30
        );
}

.rdc-viewer-loading,
.rdc-viewer-error {
    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    padding: 1rem;

    border-radius: 12px;

    background: #fff;

    color: var(--navy);

    box-shadow:
        0 12px 30px
        rgba(
            0,
            0,
            0,
            .18
        );
}

footer {
    padding:
        .4rem
        .7rem;

    background: #001f47;

    color:
        rgba(
            255,
            255,
            255,
            .65
        );

    text-align: center;

    font-size: .68rem;
}

@media (max-width: 600px) {

    .rdc-viewer-header {
        padding:
            .6rem
            .65rem;

        border-top-width:
            3px;
    }

    .rdc-viewer-toolbar {
        gap: .25rem;

        padding:
            .35rem
            .4rem;
    }

    .rdc-viewer-toolbar button {
        min-width: 34px;

        padding:
            .25rem
            .4rem;
    }

    .rdc-viewer-toolbar span {
        font-size: .68rem;
    }

    [data-stage] {
        padding:
            .55rem
            .3rem
            .8rem;
    }
}