:root {
    color-scheme: dark;
    --background: #080f0c;
    --surface: #111b14;
    --text: #e3eae4;
    --muted: #a6b7a9;
    --accent: #b5f53b;
    --rule: #40572d;
    --divider: #141b18;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 16px;
    background: var(--background);
    color: var(--text);
    font: 0.875rem/1.65 var(--body-font, ui-monospace, Consolas, monospace);
    overflow-wrap: anywhere;
}

.signal-shell {
    width: 100%;
    max-width: 550px;
    margin-inline: auto;
    margin-top: 24px;
}

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:is(input, textarea, select, button):focus {
    outline: none;
    border-color: var(--accent);
}

.signal-skip {
    position: absolute;
    top: 0;
    padding: 0.5rem;
    background: var(--surface);
    transform: translateY(-120%);
}
.signal-skip:focus { transform: none; }

.signal-header,
.signal-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding-block: 0.85rem;
    font-size: 0.8125rem;
}

.signal-header { border-bottom: 1px solid var(--divider); }
.signal-brand { font-size: inherit; font-weight: 700; text-decoration: none; }
.signal-header ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; }
.signal-header nav a { color: var(--text); text-decoration: none; }
.signal-header nav a:hover,
.signal-header .current > a { color: var(--accent); text-decoration: underline; }

.signal-main { padding-block: 1.4rem 2rem; }
.signal-main > :first-child { margin-top: 0; }
.signal-main > :last-child { margin-bottom: 0; }
.signal-main :is(h1, h2, h3, h4, h5, h6) { color: var(--accent); line-height: 1.3; }
.signal-main h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.signal-main h2 { font-size: 1.125rem; }
.signal-main h3 { font-size: 1rem; }
.signal-main :is(img, video, iframe, embed, object) { max-width: 100%; }
.signal-main :is(img:not([height]), video) { height: auto; }
.signal-main figure { margin-inline: 0; }
.signal-main blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 2px solid var(--rule); color: var(--muted); }
.signal-main pre { overflow: auto; padding: 0.75rem; background: var(--surface); }
.signal-main code { font-family: inherit; background: var(--surface); }
.signal-main table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
.signal-main :is(th, td) { border: 1px solid var(--rule); padding: 0.35rem 0.55rem; text-align: start; }

.signal-footer { border-top: 1px solid var(--divider); color: var(--muted); }

.contact-form { display: grid; gap: 0.5rem; }
.contact-form :is(input, textarea, select, button) {
    min-width: 0;
    width: 100%;
    font: inherit;
    padding: 0.5rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--rule);
}
.contact-form button { width: auto; justify-self: start; color: var(--accent); cursor: pointer; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signal-main { display: flow-root; }

.signal-main .image-float-left { float: left; margin: 0.25rem 1rem 0.5rem 0; max-width: 55%; }
.signal-main .image-float-right { float: right; margin: 0.25rem 0 0.5rem 1rem; max-width: 55%; }


.signal-main :is(h1, h2, h3, h4, h5, h6) { font-family: var(--heading-font, inherit); }
.signal-header [aria-current="page"] { color: var(--accent); text-decoration: underline; }
.signal-header ul { align-items: center; }
.mobile-navigation { display: none; }
.signal-main img[width][height] { object-fit: contain; }

@media (max-width: 480px) {
    .desktop-navigation { display: none; }
    .mobile-navigation { display: block; }
    .signal-header { position: relative; }
    .mobile-navigation summary {
        cursor: pointer;
        padding: 0.35rem 0.5rem;
        color: var(--text);
        border: 1px solid var(--rule);
        border-radius: 3px;
    }
    .mobile-navigation nav {
        position: absolute;
        z-index: 2;
        inset-inline: 0;
        top: 100%;
        padding: 0.5rem;
        border: 1px solid var(--rule);
        background: var(--surface);
        box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
    }
    .mobile-navigation ul { display: block; }
    .mobile-navigation a { display: block; padding: 0.5rem; }
    .signal-main img[height] { height: auto; }
}