:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;min-height:100vh}.theme-default{background:#faf8f5}.theme-default .header{background:#faf8f5;border-bottom:1px solid #8a7f72}.theme-default .header h1{color:#5c5347}.theme-default .status{color:#6b5f52}.theme-default .count{color:#8a7f72;border-left-color:#8a7f72}.theme-default .box{background:#faf8f5;border:1px solid #8a7f72}.theme-default .box:hover{box-shadow:0 4px 16px #5c534726}.theme-default .box-accent{display:none}.theme-default .box-text{color:#4a4239}.theme-default .box-meta{color:#8a7f72;border-top-color:#d4cdc3}.theme-default .box-image-only{border:1px solid #8a7f72}.theme-default .search-input{background:#faf8f5;border:1px solid #8a7f72;color:#4a4239}.theme-default .search-input::placeholder{color:#a99f93}.theme-default .search-btn{background:#faf8f5;border:1px solid #8a7f72;color:#5c5347}.theme-default .search-btn:hover{background:#f0ebe4}.theme-default .mode-switcher button{background:#faf8f5;border:1px solid #8a7f72;color:#5c5347}.theme-default .mode-switcher button:hover{background:#f0ebe4}.theme-default .mode-switcher button.active{background:#5c5347;border-color:#5c5347;color:#faf8f5}.theme-default .theme-switcher button{background:#faf8f5;border:1px solid #8a7f72;color:#5c5347}.theme-default .theme-switcher button:hover{background:#f0ebe4}.theme-default .theme-switcher button.active{background:#5c5347;border-color:#5c5347;color:#faf8f5}.theme-default .login-btn,.theme-default .logout-btn{border:1px solid #8a7f72;color:#5c5347}.theme-default .login-btn:hover,.theme-default .logout-btn:hover{background:#f0ebe4}.theme-default .user-handle{color:#6b5f52}.theme-default .load-more{background:#5c5347;color:#faf8f5}.theme-default .load-more:hover{background:#4a4239}.theme-default .box-images{background:#e8e4dc}.theme-default .box-pair-wide .box-in-pair:last-child{border-left:2px dashed #a99f93}.theme-default .box-pair-tall .box-in-pair:last-child{border-top:2px dashed #a99f93}.theme-default .box-quoted-label{color:#8a7f72}.theme-default .expanded-overlay{background:#4a423999}.theme-default .expanded-post{background:#faf8f5;border:1px solid #8a7f72}.theme-default .expanded-accent,.theme-default .expanded-quote-accent{display:none}.theme-default .expanded-text,.theme-default .expanded-author-name{color:#4a4239}.theme-default .expanded-author-handle{color:#6b5f52}.theme-default .expanded-quote{background:#f0ebe4;border-color:#8a7f72}.theme-default .expanded-quote-name{color:#4a4239}.theme-default .expanded-quote-handle{color:#6b5f52}.theme-default .expanded-quote-text{color:#5c5347}.theme-default .expanded-link{background:#5c5347}.theme-default .expanded-link:hover{background:#4a4239}.theme-default .expanded-meta{border-top-color:#d4cdc3;color:#6b5f52}.theme-default .expanded-stat{color:#6b5f52}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:100}.header h1{font-size:20px;font-weight:700;color:#333;letter-spacing:-.5px}.search-section{display:flex;align-items:center;gap:8px}.search-input{flex:1;max-width:200px;padding:8px 14px;border:1px solid #e0e0e0;border-radius:20px;font-size:14px;outline:none;transition:border-color .15s}.search-input:focus{border-color:#999}.search-input::placeholder{color:#aaa}.search-btn{padding:8px 14px;border:1px solid #e0e0e0;background:#fff;border-radius:20px;font-size:14px;cursor:pointer;transition:all .15s}.search-btn:hover{background:#f0f0f0}.search-btn:disabled{color:#999;cursor:not-allowed}.mode-switcher{display:flex;gap:4px}.mode-switcher button{padding:6px 12px;border:1px solid #e0e0e0;background:#fff;border-radius:4px;font-size:12px;cursor:pointer;transition:all .15s}.mode-switcher button:hover{background:#f0f0f0}.mode-switcher button.active{background:#333;color:#fff;border-color:#333}.status{display:flex;align-items:center;gap:10px;font-size:13px;color:#666}.dot{width:8px;height:8px;border-radius:50%}.dot.connected{background:#22c55e}.dot.disconnected{background:#ef4444}.count{color:#999;padding-left:10px;border-left:1px solid #e0e0e0}.box-container{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:150px;grid-auto-flow:dense;gap:4px;padding:16px;align-content:start}.box{background:#fff;border-radius:8px;border:1px solid #e0e0e0;overflow:hidden;cursor:pointer;transition:box-shadow .15s ease,transform .15s ease;animation:fadeIn .3s ease;display:flex;flex-direction:column}.box-tall-2{grid-row:span 2}.box-tall-3{grid-row:span 3}.box-wide-2{grid-column:span 2}.box-wide-3{grid-column:span 3}.box-large{grid-column:span 2;grid-row:span 2}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.box:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.box-accent{height:4px;flex-shrink:0}.box-content{padding:12px;flex:1;display:flex;flex-direction:column;gap:8px}.box-text{font-size:13px;line-height:1.5;color:#333;overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;word-break:break-word}.box-meta{font-size:11px;color:#999;margin-top:auto;padding-top:8px;border-top:1px solid #f0f0f0}.box-image-only{padding:0;border:none}.box-images{width:100%;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;background:#f0f0f0;border-radius:8px;overflow:hidden}.box-images img{width:100%;height:100%;object-fit:cover;display:block}.box-images img:only-child{grid-column:1 / -1;grid-row:1 / -1}.box-tall-2 .box-images{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}.box-tall-3 .box-images{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}.box-wide-2 .box-images{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.box-wide-3 .box-images{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.image-count{position:absolute;bottom:8px;right:8px;background:#0009;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px}.box-image-only{position:relative}.box-quote-badge{position:absolute;top:8px;left:8px;background:#0009;color:#fff;font-size:10px;font-weight:700;padding:3px 6px;border-radius:4px;letter-spacing:.5px}.box-pair{display:grid;gap:0;position:relative}.box-pair-wide{grid-column:span 2;grid-template-columns:1.3fr .7fr;align-items:stretch}.box-pair-tall{grid-row:span 2;grid-template-rows:1.3fr .7fr;align-items:stretch}.box-in-pair{min-height:0;min-width:0;height:100%;width:100%}.box-pair-wide .box-in-pair:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}.box-pair-wide .box-in-pair:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:2px dashed rgba(0,0,0,.15)}.box-pair-tall .box-in-pair:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.box-pair-tall .box-in-pair:last-child{border-top-left-radius:0;border-top-right-radius:0;border-top:2px dashed rgba(0,0,0,.15)}.box-pair-wide .box-in-pair:first-child .box-images{border-top-right-radius:0;border-bottom-right-radius:0}.box-pair-wide .box-in-pair:last-child .box-images{border-top-left-radius:0;border-bottom-left-radius:0}.box-pair-tall .box-in-pair:first-child .box-images{border-bottom-left-radius:0;border-bottom-right-radius:0}.box-pair-tall .box-in-pair:last-child .box-images{border-top-left-radius:0;border-top-right-radius:0}.box-quoted{opacity:.85}.box-quoted:hover{opacity:1}.box-quoted .box-text{font-size:11px;line-height:1.4;-webkit-line-clamp:5}.box-quoted .box-content{padding:10px;gap:6px}.box-quoted-label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-top:auto}.load-more{position:fixed;bottom:24px;right:24px;background:#333;color:#fff;border:none;padding:12px 20px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #0003;transition:transform .15s ease,background .15s ease;z-index:100}.load-more:hover{background:#555;transform:scale(1.05)}.user-section{display:flex;align-items:center;gap:8px}.login-btn,.logout-btn{padding:6px 12px;border:1px solid #e0e0e0;background:#fff;border-radius:4px;font-size:12px;cursor:pointer;transition:all .15s}.login-btn:hover,.logout-btn:hover{background:#f0f0f0}.user-handle{font-size:12px;color:#666}.following-toggle{padding:6px 12px;border:1px solid #22c55e;background:#fff;color:#22c55e;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}.following-toggle:hover{background:#f0fdf4}.following-toggle.active{background:#22c55e;color:#fff}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;padding:24px;border-radius:12px;width:90%;max-width:400px;box-shadow:0 8px 32px #0003}.modal h2{margin:0 0 8px;font-size:20px;color:#333}.modal-hint{font-size:12px;color:#666;margin:0 0 16px;line-height:1.4}.modal-input{width:100%;padding:10px 12px;border:1px solid #e0e0e0;border-radius:6px;font-size:14px;margin-bottom:12px;outline:none}.modal-input:focus{border-color:#666}.modal-error{color:#ef4444;font-size:13px;margin:0 0 12px}.modal-buttons{display:flex;gap:8px;justify-content:flex-end}.modal-cancel,.modal-submit{padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .15s}.modal-cancel{background:#fff;border:1px solid #e0e0e0;color:#666}.modal-cancel:hover{background:#f5f5f5}.modal-submit{background:#333;border:1px solid #333;color:#fff}.modal-submit:hover{background:#555}.modal-submit:disabled{background:#999;border-color:#999;cursor:not-allowed}.theme-switcher{display:flex;gap:4px}.theme-switcher button{padding:6px 12px;border:1px solid #e0e0e0;background:#fff;border-radius:4px;font-size:12px;cursor:pointer;transition:all .15s}.theme-switcher button:hover{background:#f0f0f0}.theme-switcher button.active{background:#333;color:#fff;border-color:#333}.theme-bordered{background:#f5f5f5}.theme-bordered .header{background:#fff;border-bottom:1px solid #000}.theme-bordered .header h1{color:#000}.theme-bordered .box{background:#fff;border:1px solid #000}.theme-bordered .box-image-only{border:1px solid #000}.theme-bordered .box-accent{display:none}.theme-bordered .box-text{color:#000}.theme-bordered .search-input,.theme-bordered .search-btn,.theme-bordered .mode-switcher button{border:1px solid #000}.theme-bordered .mode-switcher button.active{background:#000}.theme-bordered .theme-switcher button{border:1px solid #000}.theme-bordered .theme-switcher button.active{background:#000}.theme-bordered .box-quoted-label{color:#666}.theme-bordered .box-pair-wide .box-in-pair:last-child{border-left:2px dashed rgba(0,0,0,.4)}.theme-bordered .box-pair-tall .box-in-pair:last-child{border-top:2px dashed rgba(0,0,0,.4)}.theme-bordered-inverse{background:#000}.theme-bordered-inverse .header{background:#000;border-bottom:1px solid #fff}.theme-bordered-inverse .header h1{color:#fff}.theme-bordered-inverse .status{color:#ccc}.theme-bordered-inverse .count{color:#888;border-left-color:#444}.theme-bordered-inverse .box{background:#000;border:1px solid #fff}.theme-bordered-inverse .box-image-only{border:1px solid #fff}.theme-bordered-inverse .box-accent{display:none}.theme-bordered-inverse .box-text{color:#fff}.theme-bordered-inverse .box-meta{color:#888;border-top-color:#333}.theme-bordered-inverse .search-input{background:#000;color:#fff;border:1px solid #fff}.theme-bordered-inverse .search-input::placeholder{color:#666}.theme-bordered-inverse .search-btn{background:#000;color:#fff;border:1px solid #fff}.theme-bordered-inverse .search-btn:hover{background:#222}.theme-bordered-inverse .mode-switcher button{background:#000;color:#fff;border:1px solid #fff}.theme-bordered-inverse .mode-switcher button:hover{background:#222}.theme-bordered-inverse .mode-switcher button.active{background:#fff;color:#000}.theme-bordered-inverse .theme-switcher button{background:#000;color:#fff;border:1px solid #fff}.theme-bordered-inverse .theme-switcher button:hover{background:#222}.theme-bordered-inverse .theme-switcher button.active,.theme-bordered-inverse .load-more{background:#fff;color:#000}.theme-bordered-inverse .box-quoted-label{color:#666}.theme-bordered-inverse .box-pair-wide .box-in-pair:last-child{border-left:2px dashed rgba(255,255,255,.4)}.theme-bordered-inverse .box-pair-tall .box-in-pair:last-child{border-top:2px dashed rgba(255,255,255,.4)}.theme-dark{background:#010030}.theme-dark .header{background:#010030;border-bottom:1px solid #d5d5d540}.theme-dark .header h1{color:#d5d5d5;font-weight:300}.theme-dark .status{color:#d5d5d5}.theme-dark .count{color:#eee7;border-left-color:#eee4}.theme-dark .box{background:#010030;border:1px solid #d5d5d540}.theme-dark .box:hover{box-shadow:0 4px 20px #0006;border-color:#d5d5d580}.theme-dark .box-accent{display:none}.theme-dark .box-image-only{border:1px solid #d5d5d540}.theme-dark .box-images{background:#010020}.theme-dark .box-text{color:#d5d5d5;font-weight:300}.theme-dark .box-meta{color:#eee7;border-top-color:#eee2}.theme-dark .search-input{background:#010030;color:#d5d5d5;border:1px solid #d5d5d540;font-weight:300}.theme-dark .search-input::placeholder{color:#eee4}.theme-dark .search-btn{background:#010030;color:#d5d5d5;border:1px solid #d5d5d540;font-weight:300}.theme-dark .search-btn:hover{background:#020050;border-color:#d5d5d580}.theme-dark .mode-switcher button{background:#010030;color:#d5d5d5;border:1px solid #d5d5d540;font-weight:300}.theme-dark .mode-switcher button:hover{background:#020050;border-color:#d5d5d580}.theme-dark .mode-switcher button.active{background:#d5d5d5;border-color:#d5d5d5;color:#010030;font-weight:400}.theme-dark .theme-switcher button{background:#010030;color:#d5d5d5;border:1px solid #d5d5d540;font-weight:300}.theme-dark .theme-switcher button:hover{background:#020050;border-color:#d5d5d580}.theme-dark .theme-switcher button.active{background:#d5d5d5;border-color:#d5d5d5;color:#010030;font-weight:400}.theme-dark .login-btn,.theme-dark .logout-btn{border:1px solid #d5d5d540;color:#d5d5d5;font-weight:300}.theme-dark .login-btn:hover,.theme-dark .logout-btn:hover{background:#020050;border-color:#d5d5d580}.theme-dark .user-handle{color:#eee7}.theme-dark .load-more{background:#d5d5d5;color:#010030;font-weight:400}.theme-dark .load-more:hover{background:#fff}.theme-dark .box-quoted-label{color:#eee7}.theme-dark .box-pair-wide .box-in-pair:last-child{border-left:1px dashed #d5d5d540}.theme-dark .box-pair-tall .box-in-pair:last-child{border-top:1px dashed #d5d5d540}.expanded-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:24px}.expanded-post{background:#fff;border-radius:16px;max-width:600px;max-height:90vh;width:100%;overflow:hidden;box-shadow:0 20px 60px #0006;position:relative;display:flex;flex-direction:column}.expanded-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:none;background:#00000080;color:#fff;font-size:24px;line-height:1;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}.expanded-close:hover{background:#000000b3;transform:scale(1.1)}.expanded-images{display:flex;flex-wrap:wrap;gap:4px;background:#000}.expanded-images img{flex:1 1 calc(50% - 2px);min-width:calc(50% - 2px);max-height:400px;object-fit:contain;background:#000}.expanded-images img:only-child{flex:1 1 100%;min-width:100%}.expanded-content{padding:20px;overflow-y:auto}.expanded-accent{height:4px;border-radius:2px;margin-bottom:16px}.expanded-text{font-size:16px;line-height:1.6;color:#333;white-space:pre-wrap;word-break:break-word}.expanded-author{display:flex;align-items:center;gap:12px;margin-bottom:16px}.expanded-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}.expanded-author-info{display:flex;flex-direction:column;gap:2px}.expanded-author-name{font-weight:600;font-size:15px;color:#333}.expanded-author-handle{font-size:13px;color:#666}.expanded-quote{margin-top:16px;padding:12px;border:1px solid #e0e0e0;border-radius:12px;background:#f9f9f9}.expanded-quote-accent{height:3px;border-radius:2px;margin-bottom:10px}.expanded-quote-author{display:flex;align-items:center;gap:6px;margin-bottom:8px}.expanded-quote-name{font-weight:600;font-size:13px;color:#333}.expanded-quote-handle{font-size:12px;color:#666}.expanded-quote-text{font-size:14px;line-height:1.5;color:#444}.expanded-quote-images{display:flex;gap:4px;margin-top:10px}.expanded-quote-images img{flex:1;max-height:120px;object-fit:cover;border-radius:8px}.expanded-stats{display:flex;gap:16px;margin-bottom:12px}.expanded-stat{display:flex;align-items:center;gap:4px;font-size:14px;color:#666}.stat-icon{font-size:14px}.expanded-link{display:inline-block;padding:8px 14px;background:#0085ff;color:#fff;border-radius:20px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s;margin-left:auto}.expanded-link:hover{background:#06c}.expanded-meta{margin-top:16px;padding-top:16px;border-top:1px solid #eee;font-size:13px;color:#888;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.theme-bordered .expanded-post{border:2px solid #000}.theme-bordered .expanded-accent,.theme-bordered .expanded-quote-accent{display:none}.theme-bordered-inverse .expanded-overlay{background:#fff3}.theme-bordered-inverse .expanded-post{background:#000;border:2px solid #fff}.theme-bordered-inverse .expanded-accent,.theme-bordered-inverse .expanded-quote-accent{display:none}.theme-bordered-inverse .expanded-text,.theme-bordered-inverse .expanded-author-name{color:#fff}.theme-bordered-inverse .expanded-author-handle{color:#888}.theme-bordered-inverse .expanded-quote{background:#111;border-color:#444}.theme-bordered-inverse .expanded-quote-name{color:#fff}.theme-bordered-inverse .expanded-quote-text{color:#ccc}.theme-bordered-inverse .expanded-meta{border-top-color:#333;color:#888}.theme-dark .expanded-overlay{background:#010030e6}.theme-dark .expanded-post{background:#010030;border:1px solid #d5d5d540}.theme-dark .expanded-accent,.theme-dark .expanded-quote-accent{display:none}.theme-dark .expanded-text{color:#d5d5d5;font-weight:300}.theme-dark .expanded-author-name{color:#d5d5d5;font-weight:400}.theme-dark .expanded-author-handle{color:#eee7}.theme-dark .expanded-quote{background:#020050;border-color:#d5d5d540}.theme-dark .expanded-quote-name{color:#d5d5d5}.theme-dark .expanded-quote-text{color:#eee9;font-weight:300}.theme-dark .expanded-link{background:#d5d5d5;color:#010030}.theme-dark .expanded-link:hover{background:#fff}.theme-dark .expanded-meta{border-top-color:#d5d5d522;color:#eee7}.theme-dark .expanded-stat{color:#eee7}@media(max-width:600px){.box-container{grid-template-columns:1fr;padding:16px;gap:12px}.header{flex-direction:column;gap:8px;text-align:center}.theme-switcher{flex-wrap:wrap;justify-content:center}}