*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;color:#fff;overflow-x:hidden}#root{min-height:100vh}@media(min-width:768px){body:before{content:"This app is designed for mobile devices only. Please view on a mobile device or resize your browser window.";display:flex;align-items:center;justify-content:center;height:100vh;padding:20px;text-align:center;background:#000;color:#fff;font-size:18px}#root{display:none}}.story-list-container{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;background:#000;padding:12px 0}.story-list-container::-webkit-scrollbar{display:none}.story-list{display:flex;flex-wrap:nowrap;gap:12px;padding:0 12px}.story-item{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative;transition:transform .2s ease}.story-item:active{transform:scale(.95)}.story-thumbnail-wrapper{position:relative;width:100px;height:100px;border-radius:50%;overflow:hidden;border:2.5px solid transparent;background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) border-box;transition:all .3s ease}.story-item.unviewed .story-thumbnail-wrapper{animation:pulse-ring 2s ease-in-out infinite}.story-item.viewed .story-thumbnail-wrapper{background:linear-gradient(#000,#000) padding-box,linear-gradient(135deg,#666,#666) border-box;opacity:.7}@keyframes pulse-ring{0%,to{box-shadow:0 0 #833ab466}50%{box-shadow:0 0 0 4px #833ab400}}.story-thumbnail{width:100%;height:100%;object-fit:cover;border-radius:50%}.story-user-avatar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);width:30px;height:30px;border-radius:50%;border:2px solid #e6dede;overflow:hidden;background:#000;z-index:10}.story-user-avatar img{width:100%;height:100%;object-fit:cover}.story-username{font-size:12px;color:#fff;text-align:center;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;opacity:.9}.story-viewer{position:fixed;top:0;left:0;width:100%;height:100vh;background:#000;z-index:1000;cursor:pointer;user-select:none;-webkit-user-select:none;overflow:hidden}.story-header{position:absolute;top:0;left:0;right:0;padding:12px;z-index:20;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 50%,transparent 100%);pointer-events:none}.user-info{display:flex;align-items:center;gap:8px;margin-bottom:8px;pointer-events:none}.user-avatar{width:32px;height:32px;border-radius:50%;border:2px solid #fff;object-fit:cover}.user-name{color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}.close-btn{position:absolute;top:12px;right:12px;background:#0009;color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:30;padding:0;line-height:1;pointer-events:auto;touch-action:manipulation;transition:background .2s ease,transform .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.close-btn:hover{background:#000c}.progress-bars{display:flex;gap:4px;margin-top:8px;pointer-events:none}.progress-bar-container{flex:1;height:2px;background:#ffffff4d;border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:#fff;border-radius:2px;transform-origin:left}.progress-bar.completed{background:#fff}.story-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1;overflow:hidden;background:#000}.story-image{width:100%;height:100%;object-fit:cover}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.home-container{min-height:100vh;background:#000;color:#fff}.app-header{padding:16px;text-align:center;background:#000;border-bottom:1px solid #333}.app-header h1{margin:0;font-size:24px;font-weight:600}
