:root {
    --paper: #f2eed8;
    --pin-feed: #d8d4c0;
    --pin-hole: #e8e4d0;
    --pin-border: #c8c4b0;
    --text-primary: #3a3a2e;
    --text-header: #2a2a20;
    --text-timestamp: #4a4a3a;
    --text-sep: #8a8a7a;
    --green-bar: rgba(180, 200, 170, 0.08);
    --strike-shadow: rgba(58, 58, 46, 0.15);
}

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

body {
    background-color: var(--paper);
    color: var(--text-primary);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* Pin-feed margins */
.pin-feed {
    position: fixed;
    top: 0;
    width: 16px;
    height: 100vh;
    z-index: 10;
    background-color: var(--paper);
    background-image:
        radial-gradient(circle 4px at 8px 12px, var(--pin-hole) 3px, transparent 3px),
        radial-gradient(circle 4px at 8px 12px, var(--pin-border) 3.5px, transparent 3.5px);
    background-size: 16px 24px;
    background-position: 0 0;
}

.pin-feed-left {
    left: 0;
}

.pin-feed-right {
    right: 0;
}

/* Print zone */
.print-zone {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 32px 0;
}

/* Transmission blocks */
.tx {
    margin-bottom: 16px;
    padding: 4px 0;
}

.tx--green {
    background: var(--green-bar);
    padding: 4px 8px;
    margin-left: -8px;
    margin-right: -8px;
}

/* Header */
.tx-header {
    text-align: center;
    margin-bottom: 24px;
}

.header-text {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text-header);
    text-shadow: 0.5px 0.5px 0 var(--strike-shadow);
    line-height: 1.8;
}

/* Timestamp */
.ts {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    color: var(--text-timestamp);
    text-shadow: 0.5px 0.5px 0 var(--strike-shadow);
    margin-bottom: 4px;
}

/* Body text */
.body {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    text-shadow: 0.5px 0.5px 0 var(--strike-shadow);
}

/* Separator */
.sep {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 14px;
    color: var(--text-sep);
    text-shadow: 0.5px 0.5px 0 var(--strike-shadow);
    margin: 24px 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Empty paper */
.empty-paper {
    height: 80vh;
    background: var(--paper);
}

/* Mobile */
@media (max-width: 768px) {
    .print-zone {
        padding: 24px 24px 0;
    }

    .pin-feed {
        width: 12px;
    }

    .body,
    .header-text,
    .sep {
        font-size: 12px;
    }

    .ts {
        font-size: 11px;
    }
}