:root{--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px);--color-primary: #F97316;--color-primary-dark: #ea580c;--color-bg: #fafaf9;--color-surface: #ffffff;--color-text: #1c1917;--color-text-secondary: #78716c;--color-border: #e7e5e4;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-serif: Georgia, "Times New Roman", serif;--font-size-body: 18px;--line-height: 1.7;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--touch-target-min: 44px}@media (prefers-color-scheme: dark){:root{--color-bg: #1c1917;--color-surface: #292524;--color-text: #fafaf9;--color-text-secondary: #a8a29e;--color-border: #44403c}}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}body{font-family:var(--font-sans);font-size:16px;background:var(--color-bg);color:var(--color-text);min-height:100vh;min-height:100dvh;overscroll-behavior:none}@media (display-mode: standalone){body{padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right)}}button,a,.touchable{min-height:var(--touch-target-min);min-width:var(--touch-target-min)}button{font-family:inherit;font-size:inherit;border:none;background:var(--color-primary);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-weight:500;transition:background .15s,transform .1s}button:active{background:var(--color-primary-dark);transform:scale(.98)}button:disabled{opacity:.5;cursor:not-allowed}button.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}button.secondary:active{background:var(--color-border)}.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.header{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}@media (display-mode: standalone){.header{padding-top:calc(var(--safe-area-top) + var(--spacing-md))}}.header h1{font-size:20px;font-weight:600;display:flex;align-items:center;gap:var(--spacing-sm)}.header-actions{display:flex;gap:var(--spacing-sm)}.icon-btn{min-height:var(--touch-target-min);min-width:var(--touch-target-min);background:transparent;color:var(--color-text);padding:var(--spacing-sm);border-radius:50%}.icon-btn:active{background:var(--color-border)}.article-list{flex:1;padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md)}.article-card{background:var(--color-surface);border-radius:16px;padding:var(--spacing-lg);border:1px solid var(--color-border);cursor:pointer;transition:transform .15s,box-shadow .15s}.article-card:active{transform:scale(.98)}.article-card h2{font-size:18px;font-weight:600;line-height:1.3;margin-bottom:var(--spacing-sm);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.article-card .excerpt{font-size:14px;color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--spacing-md);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.article-card .meta{display:flex;align-items:center;gap:var(--spacing-md);font-size:13px;color:var(--color-text-secondary)}.article-card .tag{background:var(--color-bg);padding:2px 8px;border-radius:4px;font-size:12px}.reader{flex:1;display:flex;flex-direction:column}.reader-header{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-md)}@media (display-mode: standalone){.reader-header{padding-top:calc(var(--safe-area-top) + var(--spacing-md))}}.back-btn{background:transparent;color:var(--color-primary);padding:var(--spacing-sm);min-width:auto}.reader-title{flex:1;font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--spacing-lg) var(--spacing-md);padding-bottom:calc(var(--spacing-xl) + 100px)}.reader-content h1{font-family:var(--font-serif);font-size:28px;font-weight:700;line-height:1.2;margin-bottom:var(--spacing-md)}.reader-content .article-meta{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.reader-content .article-body{font-family:var(--font-serif);font-size:var(--font-size-body);line-height:var(--line-height);max-width:680px;margin:0 auto}.reader-content .article-body p{margin-bottom:1.5em}.reader-content .article-body h2{font-size:22px;font-weight:600;margin-top:2em;margin-bottom:.75em}.reader-content .article-body h3{font-size:18px;font-weight:600;margin-top:1.5em;margin-bottom:.5em}.reader-content .article-body blockquote{border-left:3px solid var(--color-primary);padding-left:var(--spacing-md);margin:var(--spacing-lg) 0;font-style:italic;color:var(--color-text-secondary)}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--color-border);z-index:1000}@media (display-mode: standalone){.reading-progress{top:var(--safe-area-top)}}.reading-progress-fill{height:100%;background:var(--color-primary);transition:width .1s ease-out}.sentence.current{background:#f9731633;border-radius:4px;padding:2px 0}.audio-player{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--spacing-md);padding-bottom:calc(var(--spacing-md) + var(--safe-area-bottom));z-index:200;display:flex;flex-direction:column;gap:var(--spacing-md)}.audio-progress{height:4px;background:var(--color-border);border-radius:2px;overflow:hidden;cursor:pointer}.audio-progress-fill{height:100%;background:var(--color-primary);transition:width .1s}.audio-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg)}.audio-controls button{background:transparent;color:var(--color-text);padding:var(--spacing-sm)}.audio-controls .play-btn{background:var(--color-primary);color:#fff;width:56px;height:56px;border-radius:50%;padding:0}.audio-controls .play-btn:active{background:var(--color-primary-dark)}.audio-info{display:flex;justify-content:space-between;font-size:13px;color:var(--color-text-secondary)}.speed-selector{display:flex;align-items:center;gap:var(--spacing-sm)}.speed-selector select{font-family:inherit;font-size:14px;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text)}.install-prompt{position:fixed;bottom:var(--spacing-lg);left:var(--spacing-md);right:var(--spacing-md);background:var(--color-surface);border-radius:16px;padding:var(--spacing-lg);box-shadow:0 8px 32px #00000026;z-index:500;animation:slideUp .3s ease-out}@media (display-mode: standalone){.install-prompt{display:none}}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.install-prompt h3{font-size:18px;font-weight:600;margin-bottom:var(--spacing-sm)}.install-prompt p{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);line-height:1.5}.install-prompt .share-icon{display:inline-block;vertical-align:middle}.install-prompt .actions{display:flex;gap:var(--spacing-md)}.install-prompt .actions button{flex:1}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center}.empty-state .icon{font-size:64px;margin-bottom:var(--spacing-lg)}.empty-state h2{font-size:20px;font-weight:600;margin-bottom:var(--spacing-sm)}.empty-state p{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}.spinner{width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}