:root{--bg: #ffffff;--surface: #f4f4f5;--surface-hover: #e4e4e7;--text: #18181b;--text-muted: #71717a;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-text: #ffffff;--border: #e4e4e7;--shadow: rgba(0, 0, 0, .08);--highlight: rgba(250, 204, 21, .45);--highlight-border: rgba(234, 179, 8, .7);--radius: 3px;--toolbar-height: auto}@media(prefers-color-scheme:dark){:root{--bg: #09090b;--surface: #18181b;--surface-hover: #27272a;--text: #fafafa;--text-muted: #a1a1aa;--accent: #3b82f6;--accent-hover: #2563eb;--accent-text: #ffffff;--border: #27272a;--shadow: rgba(0, 0, 0, .4);--highlight: rgba(250, 204, 21, .3);--highlight-border: rgba(234, 179, 8, .5)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;background:var(--bg);color:var(--text);display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;height:100dvh;overflow:hidden}#toolbar{grid-row:1;background:var(--surface);border-bottom:1px solid var(--border);padding:.6rem 1rem;display:flex;flex-direction:column;gap:.5rem}#player-bar{grid-row:3;background:var(--surface);border-top:1px solid var(--border);display:flex;flex-direction:column}#tts-progress-bar{height:3px;background:var(--border);overflow:hidden;flex-shrink:0}#tts-progress-fill{height:100%;width:0%;background:var(--accent);transition:width .3s ease}#player-controls{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.35rem 1rem;gap:.4rem}#playback-controls{display:flex;align-items:center;gap:.5rem;position:absolute;left:50%;transform:translate(-50%)}.player-btn{padding:.25rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:.75rem;border:none;background:transparent;color:var(--text-muted)}.player-btn:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}.player-btn .icon{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}.player-btn-label{font-size:.6rem;font-weight:500}.player-btn-play svg{display:block}.player-btn.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.btn.player-btn-play{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;padding:0;border:1px solid #dedede;background:var(--bg);color:var(--text);box-shadow:none;transition:background .1s,transform .1s}.btn.player-btn-play:hover:not(:disabled){background:var(--surface-hover);transform:scale(1.05)}.btn.player-btn-play:disabled{opacity:.4;cursor:not-allowed;transform:none}.player-spacer{width:36px}#url-row{display:flex;gap:.5rem}#url-input-wrap{flex:1 1 0;min-width:0;position:relative}#url-input{width:100%;padding:.45rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:.9rem;outline:none;transition:border-color .15s}#url-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}#url-input:not(:placeholder-shown){padding-right:2rem}.url-clear-btn{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted, #888);cursor:pointer;font-size:.75rem;line-height:1;padding:.2rem .3rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.url-clear-btn:hover{color:var(--text);background:var(--border)}.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .7rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);font-size:.85rem;font-weight:400;cursor:pointer;white-space:nowrap;transition:background .1s;-webkit-user-select:none;user-select:none}.btn:hover:not(:disabled){background:var(--surface-hover)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--surface);border-color:var(--border);color:var(--text);font-weight:500}.btn-primary:hover:not(:disabled){background:var(--surface-hover)}.btn-accent{background:var(--surface);border-color:var(--border);color:var(--text);font-size:.9rem;font-weight:500;padding:.35rem 1rem}.btn-accent:hover:not(:disabled){background:var(--surface-hover)}.btn-danger{color:#dc2626;border-color:var(--border)}.btn-danger:hover:not(:disabled){background:color-mix(in srgb,#dc2626 10%,transparent);color:#dc2626}.btn-icon{padding:.3rem .5rem;border:none;background:transparent}.btn-icon:hover:not(:disabled){background:var(--surface-hover)}.btn.active{background:var(--surface-hover);border-color:var(--text-muted);color:var(--text)}#content-area{grid-row:2;position:relative;overflow:hidden}#web-frame{width:100%;height:100%;border:none;display:block}#web-frame[hidden]{display:none}#reader-view{width:100%;height:100%;overflow-y:auto;padding:2rem 1rem 4rem;background:var(--bg)}#reader-view[hidden]{display:none}#reader-header{max-width:680px;margin:0 auto 2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}#reader-title{font-size:1.75rem;font-weight:700;line-height:1.3;margin-bottom:.5rem;color:var(--text)}#reader-byline{font-size:.875rem;color:var(--text-muted)}#reader-content{max-width:680px;margin:0 auto;font-family:Georgia,Times New Roman,serif;font-size:1.1rem;line-height:1.8;color:var(--text)}#reader-content p{margin-bottom:1.2em}#reader-content h1,#reader-content h2,#reader-content h3,#reader-content h4{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:1.5em 0 .6em;line-height:1.3}#reader-content h2{font-size:1.35rem}#reader-content h3{font-size:1.15rem}#reader-content a{color:var(--accent)}#reader-content img{max-width:100%;width:auto;max-height:480px;height:auto;object-fit:contain;border-radius:var(--radius);margin:1em auto;display:block}#reader-content blockquote{border-left:3px solid var(--accent);padding-left:1rem;margin:1em 0;color:var(--text-muted);font-style:italic}#reader-content pre,#reader-content code{font-family:Fira Code,Cascadia Code,monospace;font-size:.9em;background:var(--surface);border-radius:4px}#reader-content pre{padding:1em;overflow-x:auto}#reader-content code{padding:.1em .3em}#reader-content ul,#reader-content ol{padding-left:1.5em;margin-bottom:1em}#reader-content li{margin-bottom:.4em}[data-chunk].speaking{background-color:var(--highlight);outline:2px solid var(--highlight-border);border-radius:3px;transition:background-color .2s ease,outline .2s ease}#empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--text-muted);pointer-events:none;text-align:center;padding:2rem}#empty-icon{font-size:4rem;line-height:1;opacity:.4}#empty-state p{font-size:1rem}#empty-state .hint{font-size:.875rem;opacity:.75}#empty-state.hidden{display:none}#settings-panel{position:fixed;top:0;right:0;width:min(380px,100vw);height:100dvh;background:var(--bg);border-left:1px solid var(--border);box-shadow:-4px 0 24px var(--shadow);z-index:200;overflow-y:auto;display:flex;flex-direction:column;transform:translate(100%);transition:transform .25s ease}#settings-panel.open{transform:translate(0)}#settings-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:1}#settings-header h2{font-size:1.1rem;font-weight:600}.settings-section{padding:1.25rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:.85rem}.settings-section h3{font-size:.8rem;font-weight:600;color:var(--text-muted)}.settings-note{font-size:.8rem;color:var(--text-muted);line-height:1.5}.field-label{display:flex;flex-direction:column;gap:.35rem;font-size:.875rem;font-weight:500}.field-label input,.field-label select{padding:.45rem .65rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.875rem;outline:none;transition:border-color .15s}.field-label input:focus,.field-label select:focus{border-color:var(--text-muted)}#settings-actions{position:sticky;bottom:0;padding:1.25rem;margin-top:auto;background:var(--bg);border-top:1px solid var(--border)}#settings-actions .btn{width:100%;justify-content:center}#toast-container{position:fixed;bottom:5.5rem;left:50%;transform:translate(-50%);z-index:999;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}.toast{pointer-events:auto;padding:.4rem 1rem;border:none;border-radius:9999px;font-size:.75rem;font-weight:400;background:#7878788c;color:#fffc;box-shadow:none;animation:toast-in .15s ease forwards;text-align:center;white-space:nowrap}.toast.error{background:#b43c3c8c;color:#fffc}.toast.success{background:#32823c8c;color:#fffc}.toast.info{background:#7878788c;color:#fffc}.toast.fade-out{animation:toast-out .15s ease forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.btn.loading{position:relative;color:transparent!important;pointer-events:none}.btn.loading:after{content:"";position:absolute;top:50%;left:50%;margin-top:-7px;margin-left:-7px;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;color:var(--text)}@keyframes spin{to{transform:rotate(360deg)}}#url-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px var(--shadow);z-index:100;max-height:320px;overflow-y:auto}#url-suggestions[hidden]{display:none}.suggestion-item{display:flex;flex-direction:column;gap:.15rem;padding:.5rem .75rem;cursor:pointer;border-bottom:1px solid var(--border)}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover,.suggestion-item.ac-active{background:var(--surface-hover)}.suggestion-title{font-size:.85rem;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-url{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}