*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem;color:#333}.container{max-width:1200px;margin:0 auto}header{text-align:center;color:#fff;margin-bottom:3rem}header h1{font-size:2.5rem;margin-bottom:.5rem}header .subtitle{font-size:1.2rem;opacity:.9}main{display:grid;gap:2rem}.card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 10px 30px #0000001a}.card h2{color:#667eea;margin-bottom:.5rem;font-size:1.5rem}.card>p{color:#666;margin-bottom:1.5rem}.demo{background:#f8f9fa;padding:1.5rem;border-radius:8px}.demo-box{background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:1.5rem;margin-bottom:1rem}.demo-box h3,.demo-box h4{color:#667eea;margin-bottom:.5rem}button{padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s;margin:.25rem}button:hover{background:#5568d3;transform:translateY(-1px)}button:active{transform:translateY(0)}button.secondary{background:#6c757d}button.secondary:hover{background:#5a6268}button.danger{background:#dc3545}button.danger:hover{background:#c82333}.button-group{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.stream-item{background:#fff;border-left:4px solid #667eea;padding:1rem;margin-bottom:.5rem;border-radius:4px;animation:slideIn .3s ease-out}.stream-item.inserted{border-left-color:#28a745}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}#stream-container{min-height:100px;border:2px dashed #dee2e6;border-radius:8px;padding:1rem;margin-bottom:1rem}#stream-container:empty:before{content:'No items yet. Click "Append" or "Prepend" to add items.';color:#999;font-style:italic}.counter-badge{display:inline-block;background:#667eea;color:#fff;padding:.25rem .75rem;border-radius:12px;font-weight:700;margin-left:.5rem}#status-box,#content-box{background:#e9ecef;padding:1rem;border-radius:6px;margin-bottom:1rem}#insert-marker{background:#fff3cd;border:2px dashed #ffc107;padding:1rem;text-align:center;border-radius:6px;margin:1rem 0;font-weight:700;color:#856404}turbo-frame{display:block;min-height:100px}turbo-frame[busy]{opacity:.6;pointer-events:none}footer{text-align:center;color:#fff;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.2)}footer a{color:#fff;text-decoration:underline}footer a:hover{opacity:.8}