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

html, body {
    height: 100%;
    background: #000;
    color: #fff;
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 16px;
    line-height: 1.6;
}

body {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

/* --- Header (Teletext page chrome) --- */

header {
    border-bottom: 2px solid #333;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    position: relative;
}

header .page-num {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    background: #00f;
    padding: 0 0.5rem;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

header .page-num:hover {
    background: #33f;
}

header .page-num.editing {
    background: #00f;
    min-width: 4ch;
}

header .page-num.editing::after {
    content: '\2588';
    animation: blink 0.6s step-end infinite;
}

.page-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}

@keyframes blink {
    50% { opacity: 0; }
}

header h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #0ff;
    letter-spacing: 0.1em;
}

header .meta {
    color: #0f0;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.audio-toggle {
    color: #0f0;
    cursor: pointer;
    margin-left: 0.3rem;
}

.audio-toggle:hover,
.audio-toggle.playing {
    color: #fff;
}

.inline-audio {
    display: none;
    height: 1.4rem;
    vertical-align: middle;
    margin-left: 0.4rem;
    filter: grayscale(1) contrast(1.2);
}

.inline-audio.visible {
    display: inline-block;
}

/* --- Digest content --- */

.digest h2 {
    color: #ff0;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 1.5rem 0 0.5rem;
    text-transform: uppercase;
    border-left: 3px solid #ff0;
    padding-left: 0.5rem;
}

.digest p {
    margin-bottom: 0.75rem;
    color: #fff;
}

.digest a {
    color: #0ff;
    text-decoration: none;
}

.digest a:hover {
    text-decoration: underline;
    color: #fff;
}

/* --- Sources footer --- */

.sources {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid #333;
}

.sources h3 {
    color: #ff0;
    font-size: 0.9rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.sources ul {
    list-style: none;
    padding: 0;
}

.sources li {
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    color: #999;
}

.sources a {
    color: #0ff;
    text-decoration: none;
}

.sources a:hover {
    text-decoration: underline;
    color: #fff;
}

/* --- Empty state --- */

.no-digest {
    color: #ff0;
    text-align: center;
    margin-top: 4rem;
    font-size: 1.1rem;
}

/* --- Audio player (screen-reader only) --- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus-within {
    position: static;
    width: auto;
    height: auto;
    padding: 0.75rem;
    margin: 0 0 1.5rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 1px solid #333;
    background: #111;
}

/* --- Index table (page 300) --- */

.index-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 1.5rem;
}

.index-table tr:hover {
    background: #111;
}

.index-table td {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.idx-num {
    width: 4rem;
    color: #0ff;
    font-weight: bold;
}

.idx-num a,
.idx-title a {
    color: inherit;
    text-decoration: none;
}

.idx-num a:hover,
.idx-title a:hover {
    text-decoration: underline;
    color: #fff;
}

.idx-title {
    color: #ccc;
}

/* --- Navigation hint --- */

.nav-hint {
    margin-top: 1.5rem;
    font-size: 0.85rem;
}

.nav-hint a {
    color: #0ff;
    text-decoration: none;
    margin-right: 1.5rem;
}

.nav-hint a:hover {
    text-decoration: underline;
    color: #fff;
}

/* --- Pi link (easter egg → /os/) --- */

.pi-link {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    color: #0ff;
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.pi-link:hover {
    opacity: 1;
    color: #fff;
}

/* --- Mobile adjustments --- */

@media (max-width: 600px) {
    body {
        padding: 0.75rem 1rem;
        font-size: 14px;
    }

    header h1 {
        font-size: 1.5rem;
    }

    .digest h2 {
        font-size: 1rem;
    }
}