.obelus-demo{--ob-ink:#17171b;--ob-violet:#6050df;--ob-muted:#73737a;display:grid;grid-template-columns:13% minmax(0,1fr);width:100%;max-width:38rem;height:min(100%,31rem);overflow:hidden;background:#fff;color:var(--ob-ink);border:1px solid #e2e0e8;box-shadow:1rem 1rem 0 #18131c0b;font-family:Space,'PingFang SC',Arial,sans-serif}
.obelus-demo *{box-sizing:border-box}
.ob-rail{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.15rem .3rem;border-right:1px solid #ebeaf0}
.ob-rail span{font-size:clamp(1.2rem,2vw,2rem);line-height:1}
.ob-rail b{font-size:clamp(1.2rem,2vw,2rem);font-weight:400;color:var(--ob-violet);line-height:1}
.ob-feed{position:relative;min-width:0;overflow:hidden}
.ob-tabs{height:3rem;display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center;font-size:clamp(.6rem,.9vw,.9rem);border-bottom:1px solid #e8e8ec}
.ob-tabs strong{height:100%;display:grid;place-items:center;border-bottom:3px solid #6050df}
.ob-tabs span{color:#777}
.ob-post{display:flex;gap:.6rem;min-width:0;padding:1rem .85rem .7rem;border-bottom:1px solid #e8e8ec;font-size:clamp(.68rem,1.05vw,.95rem);line-height:1.3}
.ob-post>div{min-width:0;flex:1}
.ob-post strong{display:block;font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-post small{font-size:.83em;color:var(--ob-muted);font-weight:400}
.ob-post p{margin:.35rem 0 .5rem;max-width:28rem}
.ob-avatar{display:block;width:clamp(1.4rem,2.8vw,2.5rem);height:clamp(1.4rem,2.8vw,2.5rem);flex:none;border-radius:50%}
.ob-avatar-green{background:#84c869}.ob-avatar-orange{background:#d68f6c}.ob-avatar-violet{background:#af6b80}
.ob-actions{display:block;color:#8b8b92;letter-spacing:.55em;font-size:.85em}
.ob-post-shill{max-height:10rem;overflow:hidden;opacity:1}
.ob-fold{display:flex;align-items:center;gap:.45rem;max-height:0;padding:0 .85rem;overflow:hidden;opacity:0;border:0;border-bottom:1px solid #e8e8ec;background:#fff;width:100%;font:700 clamp(.48rem,.74vw,.7rem)/1.3 Space,Arial,sans-serif;letter-spacing:.12em;text-align:left;color:#73737a;white-space:nowrap}
.ob-fold b{font:400 1rem/1 Space,Arial,sans-serif;color:var(--ob-violet)}
.ob-fold em{margin-left:auto;color:var(--ob-violet);font-weight:700;font-style:normal}
.ob-post-mark{border-left:2px solid transparent}
.ob-mark-label{display:block;color:var(--ob-violet);font-size:.75em;letter-spacing:.14em;margin-bottom:.25rem;opacity:0}
.ob-pill{position:absolute;right:.7rem;bottom:.7rem;display:flex;align-items:center;gap:.45rem;border:1px solid #17171b;background:#fff;padding:.4rem .5rem;white-space:nowrap;box-shadow:.3rem .3rem 0 #6050df16;font:700 clamp(.4rem,.7vw,.65rem) Space,Arial,sans-serif;letter-spacing:.09em}
.ob-pill b{font-size:1rem;font-weight:400;color:var(--ob-violet)}
.ob-pill small{font:inherit;color:#6d6d75}
.project-obelus.is-ready .obelus-demo--work .ob-post-shill{animation:ob-collapse 8s ease-in-out infinite}
.project-obelus.is-ready .obelus-demo--work .ob-fold{animation:ob-reveal 8s ease-in-out infinite}
.project-obelus.is-ready .obelus-demo--work .ob-post-mark{animation:ob-mark 8s ease-in-out infinite}
.project-obelus.is-ready .obelus-demo--work .ob-mark-label{animation:ob-label 8s ease-in-out infinite}
.project-obelus.is-ready .obelus-demo--work .ob-pill{animation:ob-pill 8s ease-in-out infinite}
@keyframes ob-collapse{0%,20%{max-height:10rem;opacity:1;padding-top:1rem;padding-bottom:.7rem}34%,80%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}94%,100%{max-height:10rem;opacity:1;padding-top:1rem;padding-bottom:.7rem}}
@keyframes ob-reveal{0%,26%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}38%,80%{max-height:3rem;opacity:1;padding-top:.7rem;padding-bottom:.7rem}94%,100%{max-height:0;opacity:0;padding-top:0;padding-bottom:0}}
@keyframes ob-mark{0%,35%,100%{border-left-color:transparent}45%,82%{border-left-color:#6050df}}
@keyframes ob-label{0%,35%,100%{opacity:0}45%,82%{opacity:1}}
@keyframes ob-pill{0%,25%{opacity:.35}40%,82%{opacity:1}100%{opacity:.35}}
.obelus-demo--detail{max-width:72rem;height:34rem;grid-template-columns:10% minmax(0,1fr);box-shadow:1.5rem 1.5rem 0 #6050df1c}
.obelus-demo--detail .ob-rail{gap:2rem;padding:1.4rem}
.obelus-demo--detail .ob-post{padding:1rem 1.3rem .8rem;font-size:1rem;gap:1rem}
.obelus-demo--detail .ob-avatar{width:2.5rem;height:2.5rem}
.obelus-demo--detail .ob-tabs{font-size:.85rem;height:3.4rem}
.obelus-demo--detail .ob-post-shill{max-height:0;opacity:0;padding-top:0;padding-bottom:0;transition:max-height .5s ease,opacity .3s,padding .5s}
.obelus-demo--detail .ob-fold{max-height:3rem;opacity:1;padding:.7rem 1.3rem;cursor:pointer;transition:background .2s}
.obelus-demo--detail .ob-fold:hover,.obelus-demo--detail .ob-fold:focus-visible{background:#f4f2ff}
.obelus-demo--detail .ob-post-mark{border-left-color:#6050df}
.obelus-demo--detail .ob-mark-label{opacity:1}
.obelus-demo--detail .ob-pill{font-size:.63rem;right:1rem;bottom:1rem}
.obelus-demo--detail.is-expanded .ob-post-shill{max-height:11rem;opacity:1;padding-top:1rem;padding-bottom:.8rem}
.obelus-demo--detail.is-expanded .ob-fold{background:#f7f6ff}
@media(max-width:650px){.obelus-demo{grid-template-columns:12% minmax(0,1fr)}.ob-rail{padding:.75rem .2rem}.ob-tabs{height:2.2rem}.ob-post{padding:.5rem .4rem .3rem;gap:.35rem}.ob-post p{margin:.25rem 0}.ob-pill{right:.3rem;bottom:.3rem;padding:.28rem;gap:.25rem}.ob-pill small{display:none}.obelus-demo--detail{height:27rem;grid-template-columns:10% minmax(0,1fr)}.obelus-demo--detail .ob-rail{padding:.7rem .2rem}.obelus-demo--detail .ob-post{font-size:.72rem;padding:.65rem .55rem .5rem;gap:.45rem}.obelus-demo--detail .ob-avatar{width:1.7rem;height:1.7rem}.obelus-demo--detail .ob-fold{padding:.65rem .55rem}.obelus-demo--detail .ob-pill{font-size:.48rem}}
@media(prefers-reduced-motion:reduce){.project-obelus.is-ready .obelus-demo--work .ob-post-shill,.project-obelus.is-ready .obelus-demo--work .ob-fold,.project-obelus.is-ready .obelus-demo--work .ob-post-mark,.project-obelus.is-ready .obelus-demo--work .ob-mark-label,.project-obelus.is-ready .obelus-demo--work .ob-pill{animation:none}.obelus-demo--work .ob-post-shill{max-height:0;opacity:0;padding:0}.obelus-demo--work .ob-fold{max-height:3rem;opacity:1;padding:.7rem .85rem}.obelus-demo--work .ob-post-mark{border-left-color:#6050df}.obelus-demo--work .ob-mark-label{opacity:1}}