/* The reader's stylesheet, complete and unfiltered.
   Selecting a subset was a mistake: the interface renders whatever the
   reader's script renders, so any rule left out shows up as an unstyled
   control. The only additions are the handful of rules at the end, each
   replacing a runtime inline style that I8 forbids. The font URL is a
   build-time token because every asset is content-hashed. */
@font-face{font-family: '24v7 Round'; src: url('/assets/baloo2-800.3e36c57e37bd.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap;}
.site-brand{display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none;}
.site-brand:focus-visible{outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px;}
.header-logo{width: 22px; height: 22px; flex: 0 0 auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.16));}
.brand-wordmark{display: inline-flex; direction: ltr; align-items: baseline; color: #fff; font-family: '24v7 Round', sans-serif; font-size: 24px; font-weight: 800; line-height: 1; white-space: nowrap; transform: skewX(-7deg);}
.brand-wordmark > span{display: inline-block;}
.brand-wordmark .brand-v{position: relative; z-index: 0; margin: 0 0.04em; padding: 0 0.1em; color: #fff;}
.brand-wordmark .brand-v::before{position: absolute; z-index: -1; top: 50%; right: 0; left: 0; height: calc(1cap + 4px); transform: translateY(calc(-50% - 0.06em)); border-radius: 0.26em; background: #ff6a00; content: '';}
.brand-wordmark .brand-domain{margin-inline-start: 0.07em; color: rgba(255, 255, 255, 0.72); font-size: 0.58em;}
:root{--theme-color: #4f8ff7; --theme-accent: #79b7ff; --theme-soft: #eef5ff; --theme-tint: #d9e9ff;}
*{margin: 0; padding: 0; box-sizing: border-box;}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: linear-gradient(180deg, var(--theme-soft), #f5f5f5 340px); color: #333; line-height: 1.6; transition: background 0.2s;}
.header{background: linear-gradient(120deg, var(--theme-color), var(--theme-accent)); color: #fff; padding: 0 16px; text-align: center; font-size: 18px; font-weight: bold; position: sticky; top: 0; z-index: 100; transition: background 0.2s;}
.header-inner{position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 640px; min-height: 54px; margin: 0 auto; padding: 8px 104px;}
.header-title{display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.batch-site-link:focus-visible, .settings-home-link:focus-visible{outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px;}
.settings-brand{display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 5px 10px 5px 16px; background: linear-gradient(120deg, var(--theme-color), var(--theme-accent));}
.refresh-button{min-width: 64px; padding: 8px 16px; border: 1px solid var(--theme-color); border-radius: 6px; background: transparent; color: var(--theme-color); font-size: 14px; cursor: pointer;}
.refresh-button:hover:not(:disabled){background: rgba(0, 0, 0, 0.04);}
.refresh-button:disabled{cursor: default; opacity: 0.58;}
.settings-footer{display: flex; flex-wrap: wrap; align-items: center; padding: 14px 16px 16px; gap: 10px; border-top: 1px solid #eee; margin-top: 8px;}
.settings-source-actions{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 16px 14px;}
.settings-source-actions .refresh-button{flex: 0 0 auto; min-width: 0; padding: 8px 10px; border: 0; color: #999;}
.settings-home-link{flex: 0 0 100%; box-sizing: border-box; padding: 8px 16px; border: 1px solid var(--theme-color); border-radius: 6px; background: transparent; color: var(--theme-color); text-align: center; text-decoration: none; font-size: 14px;}
.settings-home-link:hover{background: rgba(0, 0, 0, 0.04);}
.language-switch{position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); padding: 5px 2px; border: 0; background: transparent; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none;}
.language-switch:hover{opacity: 0.8;}
.settings-button{display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background 0.15s, transform 0.15s, box-shadow 0.15s;}
.settings-button:hover{opacity: 1; background: rgba(255, 255, 255, 0.24); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);}
.settings-button:active{transform: translateY(-50%) scale(0.97);}
.settings-button-icon{width: 21px; height: 21px; flex-shrink: 0;}
.settings-overlay{display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.4); align-items: flex-start; justify-content: center; padding: 64px 16px 16px;}
.settings-card{background: #fff; color: #333; width: 100%; max-width: 360px; border-radius: 8px; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 80px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);}
.settings-card-header{padding: 12px 16px; font-size: 16px; font-weight: 600; border-bottom: 1px solid #eee;}
.settings-card-title-row{display: flex; align-items: center; justify-content: space-between; gap: 8px;}
#settingsTitle{flex: 0 0 auto;}
.settings-close{flex: 0 0 auto; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 20px; color: #fff; cursor: pointer; line-height: 1;}
.settings-close:hover{background: rgba(255, 255, 255, 0.16);}
.settings-close:focus-visible{outline: 2px solid #fff; outline-offset: 2px;}
.settings-hint{padding: 10px 16px 4px; font-size: 12px; color: #999; line-height: 1.5;}
.settings-global-hint{margin-top: 5px; color: #999; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: start;}
.settings-section-title{padding: 12px 16px 2px; color: #555; font-size: 13px; font-weight: 600;}
.settings-sources-title{display: flex; align-items: center; gap: 10px; padding: 18px 16px 4px; text-align: center;}
.settings-sources-title::before, .settings-sources-title::after{content: ""; flex: 1; border-top: 1px solid #e7e7e7;}
.theme-options{display: flex; gap: 10px; padding: 9px 16px 3px;}
.theme-option{width: 26px; height: 26px; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px #ddd; cursor: pointer; transition: transform 0.15s;}
.theme-option:hover{transform: translateY(-1px);}
.theme-option.is-selected{border-color: #fff; box-shadow: 0 0 0 2px #555;}
.settings-submit-link{flex: 1; padding: 9px 16px; border-radius: 6px; background: var(--theme-color); color: #fff; text-align: center; text-decoration: none; font-size: 14px; font-weight: 600;}
.settings-submit-link:hover{opacity: 0.85;}
.settings-edition{display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 8px; font-size: 14px;}
.settings-edition-label{display: inline-flex; align-items: center; gap: 7px;}
.settings-edition-icon{width: 18px; height: 18px; flex-shrink: 0; color: var(--theme-color);}
.settings-edition select{min-width: 170px; max-width: 220px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 5px; background: #fff; color: #333;}
.settings-body{padding: 8px 16px 16px;}
.source-group-kind + .source-group-kind{margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee;}
.source-group-kind-title{margin: 0 0 8px; color: #444; font-size: 14px; font-weight: 700;}
.source-subgroup + .source-subgroup{margin-top: 10px;}
.source-subgroup-title{margin: 0 0 2px; color: #888; font-size: 12px; font-weight: 600;}
.source-subgroup .settings-row{margin-inline-start: 12px; padding-block: 6px; padding-inline: 10px 2px; border-inline-start: 2px solid var(--theme-tint); font-size: 14px;}
.settings-row{display: flex; align-items: center; gap: 10px; padding: 8px 2px; font-size: 15px; cursor: pointer;}
.settings-row input{width: 18px; height: 18px; flex-shrink: 0;}
.settings-row select{min-width: 78px; margin-inline-start: auto; padding: 5px 7px; border: 1px solid #ddd; border-radius: 5px; background: #fff; color: #444;}
.settings-row.is-target{color: #aaa; cursor: default;}
.settings-empty{padding: 8px 2px 4px; font-size: 14px; color: #999;}
.source-health-panel{margin: 4px 16px 10px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fafafa;}
.source-health-panel summary{padding: 9px 11px; color: #666; font-size: 13px; font-weight: 600; cursor: pointer;}
.source-health-body{padding: 0 11px 9px;}
.source-health-row{padding: 8px 0; border-top: 1px solid #e9e9e9;}
.source-health-heading{display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px;}
.source-health-name{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #444; font-weight: 600;}
.source-health-status{flex-shrink: 0; color: #777;}
.source-health-row.is-success .source-health-status{color: #2e7d32;}
.source-health-row.is-warning .source-health-status{color: #a26700;}
.source-health-row.is-error .source-health-status{color: #b3261e;}
.source-health-meta, .source-health-error{margin-top: 2px; color: #999; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere;}
.source-health-error{color: #b3261e;}
.language-warning-overlay{display: none; position: fixed; inset: 0; z-index: 250; background: rgba(0, 0, 0, 0.45); align-items: center; justify-content: center; padding: 20px;}
.language-warning-card{width: 100%; max-width: 340px; padding: 18px; border-radius: 8px; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);}
.language-warning-card h2{margin: 0 0 8px; font-size: 17px;}
.language-warning-card p{margin: 0; color: #666; font-size: 14px;}
.language-warning-actions{display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px;}
.language-warning-actions button{min-width: 78px; padding: 7px 12px; border: 1px solid #ddd; border-radius: 5px; background: #fff; color: #555; cursor: pointer;}
.language-warning-actions .continue-button{border-color: var(--theme-color); background: var(--theme-color); color: #fff;}
.language-warning-card .language-warning-hint{margin: 24px 0 0; font-size: 11px; color: #aaa; text-align: center; line-height: 1.5;}
@media (max-width: 480px){.header{padding: 0 10px; text-align: center; font-size: 16px;}.header-inner{justify-content: center; min-height: 52px; padding: 7px 48px;}.settings-button{width: 40px; min-height: 40px; padding: 0;}.settings-button-label{display: none;}.settings-card{padding-bottom: calc( 72px + env(safe-area-inset-bottom, 0px) );}}
.news-list{max-width: 640px; margin: 0 auto;}
.new-items-notice-wrap{position: sticky; top: 62px; z-index: 90; height: 0; max-width: 640px; margin: 0 auto; text-align: center;}
.new-items-notice{display: inline-grid; grid-template-columns: auto 1fr; align-items: center; margin-top: 8px; padding: 5px 9px; border: 0; border-radius: 16px; background: var(--theme-color); color: #fff; font-size: 13px; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); text-align: start;}
.new-items-notice[hidden]{display: none;}
.new-items-notice-toggle, .new-items-notice-accept{border: 0; background: transparent; color: inherit; cursor: pointer;}
.new-items-notice-toggle{width: 26px; padding: 4px; font-size: 11px;}
.new-items-notice-accept{padding: 3px 6px 3px 2px; font-size: inherit;}
.new-items-notice-sources{grid-column: 1 / -1; padding: 4px 8px 5px 30px; border-top: 1px solid rgba(255, 255, 255, 0.28); line-height: 1.6;}
.new-items-notice-source{display: block;}
.news-item{display: flex; position: relative; background: #fff; border-bottom: 1px solid #eee; padding: 12px 16px; text-decoration: none; color: inherit; transition: background 0.15s;}
.news-item:active{background: #f0f0f0;}
.news-item-primary-link{position: absolute; inset: 0; z-index: 1;}
.news-item-primary-link:focus-visible{outline: 2px solid var(--theme-color); outline-offset: -2px;}
.news-item > .thumb, .news-item > .thumb-placeholder, .news-item > .content{position: relative; z-index: 2; pointer-events: none;}
.news-item .thumb{width: 100px; height: 70px; border-radius: 4px; object-fit: cover; flex-shrink: 0; margin-inline-end: 12px; background: linear-gradient(145deg, var(--theme-tint), var(--theme-soft));}
.news-item .thumb-placeholder{width: 100px; height: 70px; border-radius: 4px; background: linear-gradient(145deg, var(--theme-tint), var(--theme-soft)); flex-shrink: 0; margin-inline-end: 12px; display: flex; align-items: center; justify-content: center; color: #ccc; font-size: 24px;}
/* Issue #10. The image is measured in lines of the title beside it, so its
   top edge sits on the first line's em box and its bottom edge lands on a
   line's em box rather than somewhere inside one. Four lines in every mode:
   the default title clamps at four, and one rule for all three sizes is what
   keeps them ordered. Large mode used to render a 96px image where medium
   rendered 120px, because each size was written by hand. */
.news-item{--title-font: 15px; --title-line: calc(15px * 1.4); --thumb-lines: 4;}
.senior-mode .news-item{--title-font: 20px; --title-line: calc(20px * 1.55);}
.extra-large-mode .news-item{--title-font: 28px; --title-line: calc(28px * 1.55);}
.news-item .thumb, .news-item .thumb-placeholder{height: calc((var(--thumb-lines) - 1) * var(--title-line) + var(--title-font)); width: calc(((var(--thumb-lines) - 1) * var(--title-line) + var(--title-font)) * 4 / 3); margin-top: calc((var(--title-line) - var(--title-font)) / 2);}
.news-item .content{flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0;}
.news-item .title{font-size: 15px; line-height: 1.4; color: #222; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;}
/* Issue #30: the translation is the companion, not the headline. */
.news-item .bilingual-title{font-size: 13px; line-height: 1.4; color: #666; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.settings-row .bilingual-toggle{margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555;}
/* `hidden` is only a UA `display: none`, and the `display: inline-flex` above
   outranks it, so without this every language showed the control. */
.settings-row .bilingual-toggle[hidden], .news-item .bilingual-title[hidden]{display: none;}
.news-item.ranked-list-item .content{gap: 4px;}
.news-item.ranked-list-item .title{display: block; overflow: visible; font-weight: 600;}
.news-item .ranked-list{margin: 4px 0 2px; padding-inline-start: 26px; color: #333; font-size: 14px; line-height: 1.45;}
.news-item .ranked-list li{padding-inline-start: 2px; margin: 2px 0; overflow-wrap: anywhere;}
.news-item .ranked-list li::marker{color: var(--theme-color); font-weight: 600;}
.news-item .meta{display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #999; margin-top: 6px;}
.news-item .meta .source-info{flex: 1; min-width: 0;}
.news-item .meta .source{color: var(--theme-color);}
.news-item .meta .source-count{background: #f0f0f0; padding: 1px 6px; border-radius: 3px; margin-inline-end: 6px;}
.news-item .source-toggle{display: block; max-width: 100%; overflow: hidden; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; pointer-events: auto;}
.news-item .source-toggle::after{margin-inline-start: 5px; color: #aaa; content: "▸";}
.news-item .source-toggle[aria-expanded="true"]::after{content: "▾";}
.news-item .source-toggle:focus-visible, .news-item .source-link:focus-visible{outline: 2px solid var(--theme-color); outline-offset: 2px;}
.news-item .source-list{margin-top: 5px; padding-block: 3px 0; padding-inline: 7px 0; border-inline-start: 2px solid var(--theme-tint); white-space: normal; pointer-events: auto;}
.news-item .source-list[hidden]{display: none;}
.news-item .source-link{display: block; padding: 2px 0; overflow: hidden; color: var(--theme-color); line-height: 1.45; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; pointer-events: auto;}
.news-item .source-link:hover{text-decoration: underline;}
.news-item .source-link-unavailable{color: #999; cursor: default;}
.news-item .source-count-earlier{background: transparent; border: 1px solid var(--theme-tint);}
.news-item .source-earlier-label{margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--theme-tint); color: #999;}
.news-item .source-link-earlier{color: #888;}
.news-item .source-link-title{display: block; overflow: hidden; color: #666; text-overflow: ellipsis; white-space: nowrap;}
.news-item .source-paywall-lock{margin-inline-start: 4px; color: #888; line-height: 1;}
.news-item .meta .translation-indicator{flex-shrink: 0; margin-inline-start: auto; color: #aaa;}
.news-item .meta .translation-indicator.is-translating{animation: translating-breath 1.4s ease-in-out infinite;}
@keyframes translating-breath{0%, 100% {opacity: 1;} 50% {opacity: 0.35;}}
@supports ((background-clip: text) or (-webkit-background-clip: text)){
.news-item .meta .translation-indicator.is-translating{background: linear-gradient(90deg, #b3b3b3 0%, #b3b3b3 44%, var(--theme-color) 50%, #b3b3b3 56%, #b3b3b3 100%); background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: translating-sweep 1.5s linear infinite, translating-breath 1.4s ease-in-out infinite;}
@keyframes translating-sweep{from {background-position: 0% 0;} to {background-position: 100% 0;}}
}
@media (prefers-reduced-motion: reduce){
.news-item .meta .translation-indicator.is-translating{animation: none; background-position: 50% 0; opacity: 1;}
}
.news-item.is-translating .title{animation: translating-title 1.8s ease-in-out infinite;}
@keyframes translating-title{0%, 100% {opacity: 1;} 50% {opacity: 0.7;}}
.news-item.translation-landed .title{animation: translation-landed 0.5s ease-out;}
@keyframes translation-landed{from {opacity: 0.15;} to {opacity: 1;}}
@media (prefers-reduced-motion: reduce){
.news-item.is-translating .title, .news-item.translation-landed .title{animation: none;}
}
.news-item .meta .paywall-lock{flex-shrink: 0; color: #888; line-height: 1;}
.loading{text-align: center; padding: 20px; color: #999; font-size: 14px;}
.empty{text-align: center; padding: 60px 20px; color: #999;}
.empty .icon{font-size: 48px; margin-bottom: 12px;}
.error-msg{text-align: center; padding: 20px; color: var(--theme-color); font-size: 14px;}
.update-separator{text-align: center; padding: 6px 16px; font-size: 11px; color: #b0b0b0; background: var(--theme-soft); border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.batch-site-link{margin-inline-start: 0.45em; color: inherit; font-weight: 600; text-decoration: none;}
.batch-site-link:hover{color: var(--theme-color);}
.hour-more{background: var(--theme-soft); border-bottom: 1px solid #eee;}
.hour-more-head{display: flex; align-items: center; flex-wrap: wrap; gap: 3px 12px; padding: 7px 16px;}
.hour-more-toggle{padding: 2px 0; border: 0; background: transparent; color: #888; font-size: 12px; cursor: pointer;}
.hour-more-toggle.is-total{font-size: 13px; font-weight: 600;}
.hour-more-toggle[aria-expanded="true"]{color: #666;}
.test-preview-banner{max-width: 640px; margin: 0 auto; padding: 8px 16px; background: #eef4ef; color: #5c6e60; font-size: 13px; text-align: center;}
.test-preview-banner a{margin-inline-start: 8px; color: inherit; font-weight: 600;}
body.senior-mode{line-height: 1.75;}
.senior-mode .header{font-size: 22px;}
.senior-mode .header-inner{min-height: 66px;}
.senior-mode .header-logo{width: 27px; height: 27px;}
.senior-mode .brand-wordmark{font-size: 30px;}
.senior-mode .settings-button{min-height: 48px; padding: 9px 15px; font-size: 17px;}
.senior-mode .settings-button-icon{width: 25px; height: 25px;}
.senior-mode .new-items-notice-wrap{top: 76px;}
.senior-mode .new-items-notice{min-height: 46px; padding: 9px 18px; font-size: 17px;}
.senior-mode .test-preview-banner{padding: 11px 16px; font-size: 16px;}
.senior-mode .update-separator{padding: 10px 16px; font-size: 15px;}
.senior-mode .news-item{padding: 18px 20px;}
.senior-mode .news-item .thumb, .senior-mode .news-item .thumb-placeholder{margin-inline-end: 15px; border-radius: 7px;}
.senior-mode .news-item .title{font-size: 20px; line-height: 1.55;}
.senior-mode .news-item .bilingual-title{font-size: 16px;}
.senior-mode .news-item .ranked-list{font-size: 18px; line-height: 1.6;}
.senior-mode .news-item .meta{margin-top: 9px; font-size: 15px;}
.senior-mode .hour-more-head{gap: 7px 16px; padding: 12px 18px;}
.senior-mode .hour-more-toggle{min-height: 44px; padding: 7px 0; font-size: 16px; line-height: 1.6;}
.senior-mode .hour-more-toggle.is-total{font-size: 18px;}
.senior-mode .loading, .senior-mode .error-msg{padding: 26px 20px; font-size: 17px;}
.senior-mode .empty{font-size: 18px;}
.senior-mode .settings-overlay{padding: 24px 12px;}
.senior-mode .settings-card{max-width: 480px; max-height: calc(100vh - 48px); border-radius: 12px;}
.senior-mode .settings-card-header{min-height: 64px; padding: 10px 18px 10px 20px; font-size: 21px;}
.senior-mode .settings-close{width: 48px; height: 48px; border-radius: 50%; font-size: 24px;}
.senior-mode .settings-close:hover{background: rgba(255, 255, 255, 0.16);}
.senior-mode .settings-global-hint{font-size: 14px; line-height: 1.4;}
.senior-mode .settings-edition, .senior-mode .settings-text-size{gap: 16px; padding: 14px 20px; font-size: 18px;}
.senior-mode .settings-edition-icon{width: 23px; height: 23px;}
.senior-mode .settings-edition select, .senior-mode .settings-text-size select{min-width: 190px; min-height: 48px; padding: 8px 10px; font-size: 18px;}
.senior-mode .settings-hint{padding: 10px 20px 6px; font-size: 16px; line-height: 1.7;}
.senior-mode .settings-section-title{padding: 18px 20px 4px; font-size: 18px;}
.senior-mode .settings-source-hint{padding: 4px 20px 0; font-size: 16px; line-height: 1.6;}
.senior-mode .settings-body{padding: 10px 20px 18px;}
.senior-mode .source-group-kind-title{font-size: 18px;}
.senior-mode .source-subgroup-title{font-size: 16px;}
.senior-mode .source-subgroup .settings-row, .senior-mode .settings-row{min-height: 48px; padding: 9px 2px; font-size: 18px;}
.senior-mode .source-subgroup .settings-row{padding-inline-start: 12px;}
.senior-mode .settings-row input{width: 24px; height: 24px;}
.senior-mode .settings-row select{min-width: 104px; min-height: 46px; padding: 7px 9px; font-size: 17px;}
.senior-mode .settings-empty{font-size: 17px;}
.senior-mode .source-health-panel{margin: 8px 20px 12px; border-radius: 8px;}
.senior-mode .source-health-panel summary{min-height: 48px; padding: 11px 13px; font-size: 17px;}
.senior-mode .source-health-heading{font-size: 17px;}
.senior-mode .source-health-meta, .senior-mode .source-health-error{font-size: 15px; line-height: 1.6;}
.senior-mode .theme-options{gap: 15px; padding: 12px 20px 8px; flex-wrap: wrap;}
.senior-mode .theme-option{width: 38px; height: 38px;}
.senior-mode .settings-source-actions, .senior-mode .settings-footer{padding: 18px 20px 22px; gap: 14px;}
.senior-mode .settings-source-actions .refresh-button, .senior-mode .settings-submit-link, .senior-mode .settings-home-link{min-height: 50px; padding: 11px 16px; font-size: 18px; line-height: 1.5;}
.senior-mode .language-warning-card{max-width: 460px; padding: 24px; border-radius: 12px;}
.senior-mode .language-warning-card h2{font-size: 23px;}
.senior-mode .language-warning-card p{font-size: 18px; line-height: 1.7;}
.senior-mode .language-warning-actions{gap: 14px; margin-top: 22px;}
.senior-mode .language-warning-actions button{min-width: 108px; min-height: 50px; padding: 10px 16px; font-size: 18px;}
.senior-mode .language-warning-card .language-warning-hint{margin-top: 26px; font-size: 15px;}
@media (max-width: 520px){.senior-mode .header-inner{min-height: 64px; padding-inline-start: 64px; padding-inline-end: 64px;}.senior-mode .settings-button{width: 48px; min-height: 48px; padding: 0;}.senior-mode .news-item{padding: 16px;}.senior-mode .news-item{--title-font: 19px; --title-line: calc(19px * 1.55);}.senior-mode .news-item .thumb, .senior-mode .news-item .thumb-placeholder{margin-inline-end: 13px;}.senior-mode .news-item .title{font-size: 19px;}.senior-mode .news-item .meta{font-size: 14px;}.senior-mode .settings-overlay{padding: 0;}.senior-mode .settings-card{max-width: none; max-height: 100dvh; min-height: 100dvh; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 0;}.senior-mode .settings-edition, .senior-mode .settings-text-size{align-items: flex-start; flex-direction: column; gap: 8px;}.senior-mode .settings-edition select, .senior-mode .settings-text-size select{width: 100%; max-width: none;}.senior-mode .language-warning-overlay{padding: 12px;}.senior-mode .language-warning-actions button{flex: 1;}}
body.extra-large-mode{line-height: 1.8;}
.extra-large-mode .header{font-size: 28px;}
.extra-large-mode .header-inner{min-height: 76px;}
.extra-large-mode .header-logo{width: 32px; height: 32px;}
.extra-large-mode .brand-wordmark{font-size: 36px;}
.extra-large-mode .settings-button{min-height: 56px; padding: 11px 18px; font-size: 20px;}
.extra-large-mode .settings-button-icon{width: 29px; height: 29px;}
.extra-large-mode .new-items-notice-wrap{top: 86px;}
.extra-large-mode .new-items-notice{min-height: 54px; padding: 11px 20px; font-size: 20px;}
.extra-large-mode .test-preview-banner, .extra-large-mode .update-separator{padding: 12px 18px; font-size: 18px; line-height: 1.6;}
.extra-large-mode .news-item{align-items: flex-start; padding: 20px 22px;}
.extra-large-mode .news-item .thumb, .extra-large-mode .news-item .thumb-placeholder{margin-inline-end: 16px; border-radius: 7px;}
.extra-large-mode .news-item .title{display: block; overflow: visible; font-size: 28px; line-height: 1.55; overflow-wrap: anywhere; -webkit-line-clamp: unset;}
.extra-large-mode .news-item .bilingual-title{display: block; overflow: visible; font-size: 19px; -webkit-line-clamp: unset;}
.extra-large-mode .news-item .ranked-list{padding-inline-start: 34px; font-size: 24px; line-height: 1.65;}
.extra-large-mode .news-item .meta{flex-wrap: wrap; gap: 9px 12px; margin-top: 12px; font-size: 18px; line-height: 1.6;}
.extra-large-mode .hour-more-head{gap: 10px 18px; padding: 14px 20px;}
.extra-large-mode .hour-more-toggle{min-height: 52px; padding: 9px 0; font-size: 20px; line-height: 1.65;}
.extra-large-mode .hour-more-toggle.is-total{font-size: 22px;}
.extra-large-mode .loading, .extra-large-mode .error-msg{padding: 30px 22px; font-size: 20px; line-height: 1.65;}
.extra-large-mode .empty{font-size: 20px; line-height: 1.65;}
.extra-large-mode .settings-overlay{padding: 18px 10px;}
.extra-large-mode .settings-card{max-width: 560px; max-height: calc(100vh - 36px); border-radius: 14px;}
.extra-large-mode .settings-card-header{min-height: 72px; padding: 12px 20px 12px 22px; font-size: 26px;}
.extra-large-mode .settings-close{width: 56px; height: 56px; font-size: 28px;}
.extra-large-mode .settings-global-hint{font-size: 18px; line-height: 1.55;}
.extra-large-mode .settings-edition, .extra-large-mode .settings-text-size{gap: 18px; padding: 16px 22px; font-size: 20px;}
.extra-large-mode .settings-edition-icon{width: 27px; height: 27px;}
.extra-large-mode .settings-edition select, .extra-large-mode .settings-text-size select{min-width: 210px; min-height: 56px; padding: 10px 12px; font-size: 20px;}
.extra-large-mode .settings-hint{padding: 12px 22px 8px; font-size: 18px; line-height: 1.7;}
.extra-large-mode .settings-section-title{padding: 20px 22px 6px; font-size: 20px;}
.extra-large-mode .settings-source-hint{padding: 6px 22px 0; font-size: 18px; line-height: 1.7;}
.extra-large-mode .settings-body{padding: 12px 22px 20px;}
.extra-large-mode .source-group-kind-title{font-size: 21px;}
.extra-large-mode .source-subgroup-title{font-size: 18px;}
.extra-large-mode .source-subgroup .settings-row, .extra-large-mode .settings-row{min-height: 56px; padding: 11px 2px; font-size: 20px; line-height: 1.5;}
.extra-large-mode .settings-row input{width: 28px; height: 28px;}
.extra-large-mode .settings-row select{min-width: 118px; min-height: 54px; padding: 9px 10px; font-size: 19px;}
.extra-large-mode .settings-empty{font-size: 19px;}
.extra-large-mode .source-health-panel{margin: 10px 22px 14px;}
.extra-large-mode .source-health-panel summary{min-height: 56px; padding: 13px 15px; font-size: 20px;}
.extra-large-mode .source-health-heading{font-size: 20px;}
.extra-large-mode .source-health-meta, .extra-large-mode .source-health-error{font-size: 18px; line-height: 1.7;}
.extra-large-mode .theme-options{gap: 18px; padding: 14px 22px 10px;}
.extra-large-mode .theme-option{width: 44px; height: 44px;}
.extra-large-mode .settings-source-actions, .extra-large-mode .settings-footer{padding: 20px 22px 24px; gap: 16px;}
.extra-large-mode .settings-source-actions .refresh-button, .extra-large-mode .settings-submit-link, .extra-large-mode .settings-home-link{min-height: 58px; padding: 13px 18px; font-size: 20px; line-height: 1.5;}
.extra-large-mode .language-warning-card{max-width: 540px; padding: 28px; border-radius: 14px;}
.extra-large-mode .language-warning-card h2{font-size: 28px;}
.extra-large-mode .language-warning-card p{font-size: 20px; line-height: 1.75;}
.extra-large-mode .language-warning-actions button{min-width: 122px; min-height: 58px; padding: 12px 18px; font-size: 20px;}
.extra-large-mode .language-warning-card .language-warning-hint{font-size: 18px;}
@media (max-width: 520px){.extra-large-mode .header-inner{min-height: 74px; padding-inline-start: 66px; padding-inline-end: 66px;}.extra-large-mode .settings-button{width: 54px; min-height: 54px; padding: 0;}.extra-large-mode .news-item{flex-direction: column; padding: 18px;}.extra-large-mode .news-item .thumb, .extra-large-mode .news-item .thumb-placeholder{box-sizing: border-box; width: 100%; height: min(45vw, 180px); margin: 0 0 14px;}.extra-large-mode .news-item .content{box-sizing: border-box; flex: 0 1 auto; width: 100%; max-width: 100%;}.extra-large-mode .news-item .title{font-size: 28px;}.extra-large-mode .news-item .meta{font-size: 18px;}.extra-large-mode .settings-overlay{padding: 0;}.extra-large-mode .settings-card{max-width: none; max-height: 100dvh; min-height: 100dvh; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); border-radius: 0;}.extra-large-mode .settings-edition, .extra-large-mode .settings-text-size{align-items: flex-start; flex-direction: column; gap: 10px;}.extra-large-mode .settings-edition select, .extra-large-mode .settings-text-size select{width: 100%; max-width: none;}.extra-large-mode .language-warning-overlay{padding: 10px;}.extra-large-mode .language-warning-actions{flex-wrap: wrap;}.extra-large-mode .language-warning-actions button{flex: 1 1 140px;}}
@media (max-width: 260px){.extra-large-mode .header{padding: 0 6px; font-size: 22px;}.extra-large-mode .header-inner{justify-content: flex-start; padding-inline-start: 0; padding-inline-end: 60px;}.extra-large-mode .header-title{min-width: 0; gap: 4px;}.extra-large-mode .header-logo{width: 28px; height: 28px;}.extra-large-mode .brand-wordmark{font-size: 26px;}.extra-large-mode .settings-card-header{min-height: 0; padding: 10px; font-size: 20px;}.extra-large-mode .settings-card-title-row{align-items: flex-start; gap: 4px;}.extra-large-mode #settingsTitle{flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;}.extra-large-mode .settings-close{width: 48px; height: 48px; font-size: 24px;}.extra-large-mode .settings-global-hint{font-size: 16px; overflow-wrap: anywhere;}.extra-large-mode .settings-edition, .extra-large-mode .settings-text-size{gap: 8px; padding: 12px 10px; font-size: 18px;}.extra-large-mode .settings-edition-label{min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere;}.extra-large-mode .settings-edition select, .extra-large-mode .settings-text-size select{box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 8px; font-size: 18px;}.extra-large-mode .settings-hint{padding: 10px 10px 6px; font-size: 16px;}.extra-large-mode .settings-section-title{padding: 16px 10px 4px; font-size: 18px; overflow-wrap: anywhere;}.extra-large-mode .settings-source-hint{padding: 4px 10px 0; font-size: 16px;}.extra-large-mode .settings-body{padding: 10px 10px 16px;}.extra-large-mode .source-group-kind-title{font-size: 18px; overflow-wrap: anywhere;}.extra-large-mode .source-subgroup-title{font-size: 16px; overflow-wrap: anywhere;}.extra-large-mode .source-subgroup .settings-row{margin-inline-start: 0; padding-inline-start: 4px;}.extra-large-mode #sourceSettingsBody .settings-row{align-items: stretch; flex-direction: column; gap: 6px;}.extra-large-mode #sourceSettingsBody .settings-row > span{overflow-wrap: anywhere;}.extra-large-mode #sourceSettingsBody .settings-row select{box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 48px; margin-inline-start: 0; padding: 8px; font-size: 18px;}.extra-large-mode .source-health-panel{margin: 8px 10px 12px;}.extra-large-mode .source-health-heading{align-items: flex-start; flex-direction: column; gap: 2px; font-size: 18px;}.extra-large-mode .source-health-name{white-space: normal; overflow-wrap: anywhere;}.extra-large-mode .source-health-meta, .extra-large-mode .source-health-error{font-size: 16px;}.extra-large-mode .theme-options{display: grid; grid-template-columns: repeat(2, 44px); gap: 12px; padding: 12px 10px 8px;}.extra-large-mode .settings-source-actions, .extra-large-mode .settings-footer{align-items: stretch; flex-direction: column; gap: 10px; padding: 16px 10px 20px;}.extra-large-mode .settings-source-actions .refresh-button, .extra-large-mode .settings-submit-link, .extra-large-mode .settings-home-link{box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 8px; font-size: 18px; overflow-wrap: anywhere;}.extra-large-mode .settings-submit-link{flex: 0 0 auto;}.extra-large-mode .language-warning-overlay{padding: 4px;}.extra-large-mode .language-warning-card{padding: 14px;}.extra-large-mode .language-warning-actions button{flex-basis: 100%; min-width: 0;}}

/* Static-only. Each one replaces a runtime inline style the reader uses and
   our Content-Security-Policy refuses. Nothing here changes an appearance the
   reader defines. */
.news-item .thumb[hidden],.news-item .thumb-placeholder[hidden]{display:none}
.static-page{max-width:640px;margin:0 auto;padding:24px 16px 40px;background:#fff;min-height:60vh}
.static-page h1{font-size:20px;margin-bottom:12px}
.static-page p{margin:10px 0}
.static-page a{color:var(--theme-color)}

/* Static-only, and the whole of issue #109's curtain. A published page ships
   a first screen computed for a reader who has saved nothing, so anyone who
   has saved something is held here until the script has drawn theirs. The
   curtain is only ever raised by that head script: with no script, or with an
   inline script the browser refused, none of these rules apply and the
   pre-rendered screen is simply read. The header and the page's outline stay
   up throughout - a blank page looks like a site that is down. */
html.is-booting #newsList > *:not(#loading){display:none}
html.is-booting #loading{animation:boot-pulse 1.4s ease-in-out infinite}
@keyframes boot-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion: reduce){html.is-booting #loading{animation:none}}
.boot-notice{margin:0 auto;max-width:640px;padding:10px 16px;border-bottom:1px solid #f0e2bd;background:#fff8e6;color:#8a6d3b;font-size:13px;text-align:center}
.boot-notice[hidden]{display:none}
.senior-mode .boot-notice{padding:13px 16px;font-size:15px}
.extra-large-mode .boot-notice{padding:16px 22px;font-size:18px}
/* The size classes land on <html> before there is a <body> to put them on,
   and the reader's own two rules are written against the body. */
html.senior-mode body{line-height:1.75}
html.extra-large-mode body{line-height:1.8}
/* Issue #137: right-to-left editions. The wordmark above stays left to right. */
[dir="rtl"] .news-item .source-toggle::after{content: "◂";}
/* Urdu is set in Nastaliq where the reader's system has it (iOS does): its
   letters reach far above and below the line, and at the Latin line height a
   headline's last line lost its tails to the four-line clamp. */
:lang(ur) .news-item{--title-line: calc(var(--title-font) * 2);}
:lang(ur) .news-item .title{line-height: 2;}

/* Issue #6: the first-visit chooser. Sized absolutely so that previewing the
   small tier cannot shrink the chooser itself below the middle tier. */
.first-run-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(17,32,56,0.55);backdrop-filter:blur(2px)}
.first-run-overlay[hidden]{display:none}
.first-run-card{display:flex;flex-direction:column;gap:20px;width:100%;max-width:420px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px 22px calc(24px + env(safe-area-inset-bottom,0px));border-radius:16px;background:#fff;box-shadow:0 18px 48px rgba(0,0,0,0.28);font-size:18px;line-height:1.6}
.first-run-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:12px;background:linear-gradient(120deg,var(--theme-color),var(--theme-accent))}
.first-run-brand .brand-wordmark{font-size:32px}
.first-run-field-label{display:block;margin-bottom:8px;font-size:17px;font-weight:600;color:#556}
.first-run-language{display:flex;width:100%;align-items:center;gap:14px;padding:16px;border:2px solid var(--theme-color);border-radius:12px;background:var(--theme-soft);cursor:pointer;text-align:start;color:inherit;font:inherit}
.first-run-language:hover,.first-run-language:focus-visible{background:var(--theme-tint);outline:none}
.first-run-language-text{flex:1;min-width:0}
.first-run-language-name{display:block;font-size:24px;font-weight:700;color:#1b2a44}
.first-run-rotating{display:block;min-height:1.5em;font-size:17px;color:var(--theme-color);font-weight:600}
.first-run-chevron{flex:0 0 auto;width:40px;height:40px;fill:none;stroke:var(--theme-color);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;animation:first-run-nudge 1.4s ease-in-out infinite}
/* The word "language", sliding left in every language the newsroom
   publishes in. The track holds the list twice and travels exactly half
   its own width, so the second copy is where the first was when the
   animation restarts and the loop has no visible seam. It is laid out left
   to right on a right-to-left card too, which is what it slides against. */
.first-run-marquee{overflow:hidden;direction:ltr;margin-bottom:10px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.first-run-marquee-track{display:flex;width:max-content;gap:26px;animation:first-run-marquee 26s linear infinite}
.first-run-marquee-word{font-size:18px;font-weight:600;color:var(--theme-color);white-space:nowrap}
@keyframes first-run-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.first-run-marquee-track{animation:none}}
.first-run-globe{flex:0 0 auto;width:30px;height:30px;fill:none;stroke:var(--theme-color);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0.85}
@keyframes first-run-nudge{0%,100%{transform:translateX(0);opacity:0.65}50%{transform:translateX(6px);opacity:1}}
@media (prefers-reduced-motion: reduce){.first-run-chevron{animation:none;opacity:1}}
.first-run-card[dir="rtl"] .first-run-chevron,.first-run-card[dir="rtl"] .first-run-back{scale:-1 1}
.first-run-sizes{display:flex;gap:10px}
.first-run-size{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 6px;border:2px solid #d6dde8;border-radius:12px;background:#fff;cursor:pointer;color:#445;font:inherit}
.first-run-size[aria-pressed="true"]{border-color:var(--theme-color);background:var(--theme-soft);color:#1b2a44}
.first-run-size:focus-visible{outline:2px solid var(--theme-color);outline-offset:2px}
.first-run-sample{line-height:1;font-weight:700}
.first-run-size-small .first-run-sample{font-size:20px}
.first-run-size-large .first-run-sample{font-size:28px}
.first-run-size-extra-large .first-run-sample{font-size:36px}
.first-run-size-name{font-weight:600}
/* Issue #37. The three names are themselves a sample: a reader who cannot
   read the glyph above still reads 小 / 中 / 大, and a "large" printed at
   the same size as "small" tells them the wrong thing. They follow the
   sample's direction rather than its exact ratio, because issue #6's floor
   of 15px holds here too -- these are words, not preview glyphs. */
.first-run-size-small .first-run-size-name{font-size:15px}
.first-run-size-large .first-run-size-name{font-size:18px}
.first-run-size-extra-large .first-run-size-name{font-size:22px}
.first-run-start{width:100%;min-height:60px;border:0;border-radius:12px;background:var(--theme-color);color:#fff;font-size:22px;font-weight:700;cursor:pointer}
.first-run-start:hover{filter:brightness(1.05)}
.first-run-start:focus-visible{outline:3px solid var(--theme-accent);outline-offset:2px}
/* Quieter than start, and still no smaller than the middle tier: the reader
   who wants every source in its own language is not the reader we expect, but
   they must be able to read the way out. */
.first-run-dismiss{width:100%;min-height:48px;margin-top:12px;border:0;border-radius:12px;background:transparent;color:#5c6b7f;font-size:17px;cursor:pointer;text-decoration:underline}
.first-run-dismiss:hover{color:#1f2d3d}
.first-run-dismiss:focus-visible{outline:3px solid var(--theme-accent);outline-offset:2px}
.first-run-step{display:flex;flex-direction:column;gap:20px;min-height:0}
.first-run-results{display:flex;flex-direction:column;gap:10px;min-height:0}
/* `hidden` has to win over the flex display above it, or the step that is
   supposed to be put away simply stacks under the one on screen. */
.first-run-step[hidden],.first-run-results[hidden]{display:none}
.first-run-picker-head{display:flex;align-items:center;gap:12px}
.first-run-back{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border:2px solid #d6dde8;border-radius:12px;background:#fff;color:#445;font-size:22px;cursor:pointer}
.first-run-picker-title{flex:1;margin:0}
.first-run-picker-heading{display:block;font-size:20px;font-weight:700;color:#1b2a44}
.first-run-picker-english{display:block;font-size:16px;font-weight:600;color:#7a869a}
.first-run-count{padding:4px 10px;border-radius:999px;background:var(--theme-soft);color:var(--theme-color);font-size:16px;font-weight:700}
.first-run-search{width:100%;min-height:52px;padding:10px 14px;border:2px solid #d6dde8;border-radius:12px;font-size:18px;font:inherit;color:#223}
.first-run-search:focus-visible{border-color:var(--theme-color);outline:none}
.first-run-group{margin:0;font-size:16px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:#7a869a}
.first-run-options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
.first-run-option{display:flex;width:100%;min-width:0;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border:2px solid #e3e8f0;border-radius:12px;background:#fff;cursor:pointer;text-align:start;color:inherit;font:inherit}
.first-run-option[aria-selected="true"]{border-color:var(--theme-color);background:var(--theme-soft)}
.first-run-option:focus-visible{outline:2px solid var(--theme-color);outline-offset:2px}
.first-run-code{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;border-radius:10px;background:var(--theme-tint);color:#1b2a44;font-size:16px;font-weight:700}
.first-run-option-text{min-width:0}
.first-run-endonym{display:block;font-size:18px;font-weight:600;color:#1b2a44;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.first-run-english{display:block;font-size:15px;color:#7a869a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.first-run-empty{margin:0;font-size:17px;color:#7a869a}
@media (max-width: 520px){.first-run-overlay{padding:0}.first-run-card{max-width:none;min-height:100dvh;max-height:100dvh;border-radius:0}}