html, body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #222;
}

*, *::before, *::after {
    box-sizing: border-box;
}

button,
select,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

    button:disabled {
        cursor: default;
        opacity: .45;
    }

a {
    color: inherit;
}

.main-layout {
    min-height: 100vh;
}

.empty-state {
    opacity: .6;
}

.not-found {
    padding: 32px;
}

.viewer-layout,
.viewer-page,
.viewer-host {
    width: 100%;
    height: 100vh;
}

.viewer-page {
    position: relative;
    overflow: hidden;
    background: #111;
}

.viewer-host canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
}

.viewer-exit {
    position: absolute;
    z-index: 10;
    top: 16px;
    left: 16px;
    padding: 10px 16px;
}

.viewer-warning {
    position: absolute;
    z-index: 10;
    top: 16px;
    left: 120px;
    padding: 10px 14px;
}

.viewer-warning {
    background: #fff3cd;
}



.service-page {
    --service-ink: #34383b;
    --service-muted: #77736d;
    --service-line: #e7e1d8;
    --service-accent: #94754e;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #fbf9f5;
    color: var(--service-ink);
}

.service-header,
.service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(24px, 5vw, 88px);
}

.service-header {
    min-height: 76px;
    border-bottom: 1px solid var(--service-line);
    background: #fffdfa;
}

.service-brand {
    color: var(--service-ink);
    font: 400 34px/1 Georgia, 'Times New Roman', serif;
    letter-spacing: -.055em;
    text-decoration: none;
}

.service-header-caption {
    color: var(--service-muted);
    font: 10px Arial, sans-serif;
    letter-spacing: .18em;
}

.service-content {
    width: 100%;
    max-width: 850px;
    align-self: center;
    justify-self: center;
    padding: 60px clamp(24px, 5vw, 88px);
}

.service-eyebrow {
    margin: 0 0 22px;
    color: var(--service-accent);
    font: 11px Arial, sans-serif;
    letter-spacing: .2em;
}

.service-content h1 {
    margin: 0;
    font: 400 clamp(44px, 7vw, 82px)/1.05 Georgia, 'Times New Roman', serif;
    letter-spacing: -.055em;
}

.service-description {
    max-width: 490px;
    margin: 25px 0 0;
    color: var(--service-muted);
    font: 15px/1.7 Arial, sans-serif;
}

.service-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 36px;
}

.service-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 22px;
    border: 1px solid var(--service-ink);
    border-radius: 2px;
    background: var(--service-ink);
    color: #fffdfa;
    font: 12px Arial, sans-serif;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

    .service-button:hover {
        border-color: #675440;
        background: #675440;
    }

    .service-button:focus-visible,
    .service-brand:focus-visible {
        outline: 2px solid var(--service-accent);
        outline-offset: 3px;
    }

.service-request-id {
    margin: 24px 0 0;
    color: var(--service-muted);
    font: 11px/1.5 Arial, sans-serif;
    overflow-wrap: anywhere;
}

    .service-request-id code {
        color: var(--service-ink);
    }

.service-footer {
    min-height: 40px;
    border-top: 1px solid var(--service-line);
    color: #92887c;
    font: 9px Arial, sans-serif;
    letter-spacing: .12em;
}

@media (max-width: 600px) {
    .service-header,
    .service-footer {
        padding-inline: 20px;
    }

    .service-header {
        min-height: 64px;
    }

    .service-brand {
        font-size: 29px;
    }

    .service-header-caption {
        font-size: 9px;
    }

    .service-content {
        padding: 50px 24px;
    }

    .service-description {
        font-size: 13px;
    }

    .service-actions {
        margin-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-button {
        transition: none;
    }
}