*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#f5f5f5;color:#333;line-height:1.6;overflow:hidden}#app{max-width:860px;margin:0 auto;padding:2rem 1rem;height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;flex-shrink:0;padding-bottom:1rem;border-bottom:1px solid #eee}.header-left{display:flex;flex-direction:column;gap:.15rem}header h1{font-size:1.4rem;font-weight:700;color:#111;letter-spacing:-.02em}.header-right{display:flex;align-items:center;gap:.6rem}.header-link{font-size:.85rem;color:#888;text-decoration:none;transition:color .2s ease}.header-link:hover{color:#333}.header-divider{color:#ddd;font-size:.85rem}.search-wrapper{position:relative;margin-bottom:1rem}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:.95rem;opacity:.5;pointer-events:none}.search-wrapper #search{width:100%;padding:.85rem 1rem .85rem 2.75rem;border:1px solid #e8e8e8;border-radius:10px;font-size:.95rem;background:#fff;transition:all .2s;outline:none}.search-wrapper #search:focus{border-color:#bbb;box-shadow:0 0 0 3px #0000000a}.search-wrapper #search::placeholder{color:#bbb}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:1rem}.tags{display:flex;gap:.5rem;flex-wrap:wrap;flex:1;min-width:0}.tag-btn{padding:.35rem .8rem;border:1px solid #e8e8e8;border-radius:20px;background:#fff;color:#777;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.tag-btn:hover{border-color:#ccc;color:#444;background:#fafafa}.tag-btn.active{background:#333;border-color:#333;color:#fff}.sort-wrap{display:flex;align-items:center;gap:.4rem;flex-shrink:0}.sort-label{font-size:.8rem;color:#999;white-space:nowrap}#sort{padding:.3rem .5rem;border:1px solid #ddd;border-radius:6px;background:#fff;font-size:.8rem;color:#555;outline:none;cursor:pointer}.recent-section{flex-shrink:0;margin-bottom:1rem}.recent-title{font-size:.8rem;color:#bbb;margin-bottom:.6rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase}.recent-list{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.recent-list::-webkit-scrollbar{display:none}.recent-item{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #eee;border-radius:8px;padding:.5rem .85rem;white-space:nowrap;flex-shrink:0;transition:all .2s}.recent-item:hover{border-color:#ddd;box-shadow:0 2px 8px #0000000d}.recent-item-title{font-size:.85rem;color:#555;font-weight:500}.btn-copy-sm{padding:.22rem .6rem;border:1px solid #e8e8e8;border-radius:5px;background:#fff;color:#888;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-copy-sm:hover{background:#f5f5f5;border-color:#ddd;color:#555}.empty{text-align:center;padding:4rem 0;color:#999}.empty code{background:#e8e8e8;padding:2px 6px;border-radius:4px;font-size:.9rem}.card{background:#fff;border:1px solid #eee;border-radius:12px;padding:1.35rem;transition:all .25s cubic-bezier(.4,0,.2,1)}.card:hover{border-color:#ddd;box-shadow:0 4px 20px #0000000f;transform:translateY(-2px)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.6rem;gap:.75rem}.card-title{font-size:1.05rem;font-weight:600;color:#111;letter-spacing:-.01em;line-height:1.4}.card-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.card-heat{font-size:.78rem;color:#ccc;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:color .2s;display:flex;align-items:center;gap:.2rem}.card-heat:before{content:"🔥";font-size:.7rem}.card-heat.active{color:#e8740c;font-weight:600}.card-tags{display:flex;gap:.4rem;margin-bottom:.6rem;flex-wrap:wrap}.tag{font-size:.72rem;padding:.2rem .55rem;border-radius:6px;background:#f5f5f5;color:#888;font-weight:500;letter-spacing:.01em}.card-source{font-size:.78rem;color:#bbb;margin-bottom:.8rem}.btn-copy{padding:.4rem .9rem;border:1px solid #e0e0e0;border-radius:8px;background:#fff;color:#555;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-copy:hover{background:#f8f8f8;border-color:#ccc;color:#333}.btn-copy:active{transform:scale(.97)}.btn-copy.copied{background:#f0f9f0;border-color:#c5e8c5;color:#2d7d2d}.card-body{font-size:.92rem;color:#555;white-space:pre-wrap;max-height:140px;overflow:hidden;position:relative;line-height:1.7}.card-body b{color:#222;font-weight:600}.card-body .md-num{color:#555}.card-body .md-bullet:before{content:"• ";color:#aaa}.card-body .md-quote{color:#999;font-style:italic}.card-body.expanded{max-height:none}.card-body:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,#fff);pointer-events:none}.card-body.expanded:after{display:none}.card-toggle{display:inline-block;margin-top:.75rem;font-size:.85rem;color:#888;cursor:pointer;border:none;background:none;padding:0}.card-toggle:hover{color:#333}#list{flex:1;overflow-y:auto;position:relative;margin-top:.5rem;scrollbar-width:none;-ms-overflow-style:none}#list::-webkit-scrollbar{display:none}.vs-spacer{width:100%}.vs-viewport{position:absolute;left:0;right:0;top:0}.footer{flex-shrink:0;text-align:center;padding:1rem 0 .5rem;font-size:.78rem;color:#bbb}.footer a{color:#999;text-decoration:none}.footer a:hover{color:#666}.loading{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#f5f5f5;z-index:100}.spinner{width:32px;height:32px;border:3px solid #e0e0e0;border-top-color:#888;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 600px){#app{padding:1rem .75rem}header{flex-direction:column;align-items:flex-start;gap:.75rem}header h1{font-size:1.3rem}.header-right{align-self:flex-start;margin-top:.25rem}.search-wrapper #search{padding:.75rem 1rem .75rem 2.5rem;font-size:.9rem}.toolbar{flex-direction:column;align-items:stretch;gap:.75rem}.tags{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}.tag-btn{padding:.3rem .7rem;font-size:.8rem}.sort-wrap{align-self:flex-end}.card{padding:1.1rem;border-radius:10px}.card:hover{transform:none}.card-header{flex-direction:column;align-items:flex-start;gap:.5rem}.card-actions{align-self:flex-start;width:100%;justify-content:space-between}.card-title{font-size:1rem}.recent-item-title{max-width:160px;overflow:hidden;text-overflow:ellipsis}.footer{font-size:.72rem}}