.story-add .story-ring{position:relative;background:#e8edf5}.story-add .story-ring>span:last-child{position:absolute;bottom:0;right:0;background:#3668e4;color:white;border:2px solid white;border-radius:50%;width:21px;height:21px;display:grid;place-items:center;font-size:18px}.story-seen .story-ring{background:#d0d6df}.story-viewer{background:#080b10;border:0;color:white;width:min(450px,100vw);max-width:100vw;height:min(800px,100dvh);max-height:100dvh;overflow:hidden;border-radius:12px}.story-viewer>.modal-head{display:none}.story-viewer #modal-body{padding:0;height:100%}.story-stage{position:relative;width:100%;height:100%;background:#080b10;isolation:isolate}.story-picture{position:absolute;inset:0}.story-picture img,.story-picture video{width:100%;height:100%;object-fit:contain}.story-progress{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:4}.story-progress>span{height:3px;background:#ffffff55;flex:1;overflow:hidden;border-radius:4px}.story-progress i{display:block;height:100%;width:0;background:white}.story-progress .complete i{width:100%}@keyframes story-fill{from{width:0}to{width:100%}}.story-head{position:absolute;top:24px;left:12px;right:9px;display:flex;align-items:center;gap:9px;z-index:4;text-shadow:0 1px 4px #000}.story-head>button:first-child{display:flex;align-items:center;gap:8px;min-width:0;text-align:left;flex:1}.story-head b{display:flex;gap:3px;align-items:center;max-width:180px;font-size:12px}.story-head .avatar{width:31px;height:31px;font-size:11px}.story-head small{font-size:10px;color:#ddd}.story-head>button{color:white;min-height:36px;min-width:32px}.story-prev,.story-next{position:absolute;top:80px;bottom:150px;z-index:2;width:32%;background:transparent}.story-prev{left:0}.story-next{right:0;width:60%}.story-bottom{position:absolute;bottom:20px;left:16px;right:16px;z-index:4;text-shadow:0 1px 4px #000}.story-bottom p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;max-height:140px;overflow:auto}.story-owner-tools{display:flex;align-items:center;gap:15px;font-size:11px}.story-owner-tools button{color:white;border:1px solid #ffffff66;border-radius:7px;padding:7px}.story-sound{position:absolute;right:14px;bottom:130px;z-index:4;background:#0007;color:white;border-radius:50%;width:40px;height:40px}.story-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(#0008,transparent 25%,transparent 65%,#0009);pointer-events:none;z-index:1}#story-preview img,#story-preview video{display:block;max-width:100%;max-height:280px;margin:10px auto;border-radius:10px}.story-viewer:focus-visible{outline:none}
@media(max-width:650px){.story-viewer{position:fixed;inset:0;margin:0;width:100%;height:100dvh;border-radius:0}.story-progress{top:max(10px,env(safe-area-inset-top))}.story-head{top:calc(24px + env(safe-area-inset-top))}.story-bottom{bottom:calc(20px + env(safe-area-inset-bottom))}}

html.story-open,html.story-open body{overflow:hidden}.story-picture img,.story-picture video{display:block}.story-viewer #modal-body{overflow:hidden}.story-viewer .story-stage{overflow:hidden}

.story-suggestion .story-ring{background:#dce5f5}.story-suggestion:hover .story-ring{background:var(--brand-gradient)}