.thread-page {
    --reader-header: 44px;
    --reader-offset: 134px;
    --reader-surface: #ededed;
    --reader-rule: #cfd1d3;
    --reader-text: #1c2228;
    --reader-muted: #777d83;
    background: var(--reader-surface);
    color: var(--reader-text);
}
.thread-page > header {
    position: sticky; top: 0; z-index: 30; height: var(--reader-header);
    padding: 0 16px; gap: 20px; white-space: nowrap; overflow-x: auto;
    background: #e1e2e3; color: #30383e; font-size: 13px;
    border-bottom: 1px solid #c9cccf;
}
.thread-page > header a { color: #394853; flex-shrink: 0; }
.thread-page main { max-width: none; margin: 0; padding: 0; }
.reader-toolbar {
    position: sticky; top: var(--reader-header); z-index: 20;
    background: #e4e5e6; border-bottom: 1px solid #bec3c7;
    padding: 10px 70px 8px 16px; box-shadow: 0 2px 3px #0000000a;
}
.reader-heading { display: flex; gap: 12px; align-items: baseline; min-width: 0; }
.reader-heading h1 { font-size: 15px; margin: 0; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-board { font-size: 12px; color: #596570; white-space: nowrap; }
.reader-total { margin-left: auto; font-size: 12px; color: #66717a; white-space: nowrap; }
.reader-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 7px; font-size: 12px; }
.reader-controls a { color: #526676; text-decoration: none; }
.reader-controls a:hover { text-decoration: underline; }
.reader-status { color: #315e73; background: #d5e3e9; padding: 1px 7px; border-radius: 3px; }
#reader-position { color: #6d7880; font-variant-numeric: tabular-nums; }
#reader-jump-form { display: flex; align-items: center; gap: 5px; margin: 0; }
#reader-jump { width: 72px; min-width: 0; padding: 2px 5px; font-size: 12px; border-color: #bec7cd; }
#reader-jump-form button { padding: 2px 9px; font-size: 12px; background: #f6f7f8; color: #475965; }
.reader-dat { margin-left: auto; }
.reader-posts { padding-right: 66px; }
.reader-post {
    background: transparent; margin: 0; border: 0; border-bottom: 1px solid var(--reader-rule);
    border-radius: 0; padding: 5px 16px 11px; scroll-margin-top: calc(var(--reader-offset) + 8px);
    content-visibility: auto; contain-intrinsic-size: auto 90px;
}
.reader-post:target { background: #e1edf6; box-shadow: inset 3px 0 #428ecb; }
.reader-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; font-size: 11px; line-height: 1.7; }
.reader-number { color: #2678b8; text-decoration: none; font-variant-numeric: tabular-nums; }
.reader-name { color: #168139; font-weight: 600; }
.reader-mail, .reader-date { color: var(--reader-muted); }
.reader-id { color: #156bd5; }
.reader-id-frequent { color: #c4493d; }
.reader-id-count { font-weight: 600; margin-left: 3px; font-variant-numeric: tabular-nums; }
.reader-body {
    margin: 4px 0 0 1px; white-space: pre-wrap; overflow-wrap: anywhere;
    font: 14px/1.4 "MS PGothic", "Mona", "Noto Sans Mono CJK JP", monospace;
    tab-size: 4;
}
.reader-body a { color: #8551b9; text-decoration: none; }
.reader-body a:hover { text-decoration: underline; }
.reader-body .reader-reply { color: #2777ae; }
.reader-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 10px; }
.reader-embed { width: min(100%, 520px); min-width: 0; border: 1px solid #ccd2d6; border-radius: 5px; overflow: hidden; background: #f7f8f9; }
.reader-embed-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 7px 10px; color: #5c6d78; font-size: 11px; }
.reader-embed-heading a { color: #466a85; }
.reader-embed-mount { aspect-ratio: 16/9; min-height: 200px; display: grid; place-items: center; background: #e1e5e8; }
.reader-embed-x { max-width: 550px; }
.reader-embed-x .reader-embed-mount { aspect-ratio: auto; height: 450px; background: #fff; }
.reader-embed-placeholder { color: #74808a; font: 12px system-ui, sans-serif; }
.reader-embed-mount iframe { display: block; width: 100%; height: 100%; min-width: 0; border: 0; }
.reader-empty { padding: 24px; }
.reader-minimap { position: fixed; top: calc(var(--reader-offset) + 8px); bottom: 20px; right: 8px; width: 46px; z-index: 25; border: 1px solid #d0d6da; border-radius: 4px; background: #f4f6f8; }
#reader-map { display: block; width: 100%; height: calc(100% - 16px); cursor: pointer; touch-action: none; outline-offset: 2px; }
.reader-map-legend { height: 16px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.reader-map-legend i { display: block; width: 5px; height: 5px; border-radius: 50%; }
.map-video { background: #d46d4c; }.map-x { background: #a572c3; }.map-link { background: #488ed0; }
.thread-page footer { margin-right: 64px; font-size: 12px; border-top: 1px solid var(--reader-rule); }
@media (max-width: 650px) {
    .reader-toolbar { padding: 8px 35px 8px 10px; }
    .reader-heading { flex-wrap: wrap; gap: 2px 10px; }
    .reader-heading h1 { order: 3; flex-basis: 100%; }
    .reader-controls { gap: 7px 10px; }
    .reader-controls .reader-dat { display: none; }
    .reader-posts { padding-right: 32px; }
    .reader-post { padding: 5px 8px 10px; }
    .reader-meta { gap: 2px 7px; }
    .reader-body { font-size: 13px; }
    .reader-minimap { right: 3px; width: 23px; }
    .thread-page footer { margin-right: 30px; }
}
@media (prefers-color-scheme: dark) {
    .thread-page { --reader-surface: #202428; --reader-text: #dae0e5; --reader-rule: #373d42; --reader-muted: #9ba4ad; }
    .thread-page > header, .reader-toolbar { background: #2a3035; color: #d6dde3; border-color: #3f484f; }
    .thread-page > header a, .reader-controls a, .reader-board, .reader-total { color: #acbac5; }
    .reader-name { color: #73c58d; }.reader-id { color: #79b4ff; }.reader-id-frequent { color: #ff9687; }
    .reader-body a { color: #c09ce5; }.reader-body .reader-reply { color: #8ab7dd; }
    .reader-post:target { background: #293c4d; }
    .reader-embed { background: #2b3237; border-color: #434e57; }.reader-embed-heading { color: #acb9c3; }.reader-embed-heading a { color: #9fc1dc; }
    .reader-embed-mount { background: #303940; }.reader-minimap { background: #29323a; border-color: #45515c; }
}