@charset "UTF-8";
:root {
    --bg:#f6f7f4;
    --card:#fff;
    --ink:#202d3c;
    --muted:#7e8790;
    --line:#e7eae5;
    --teal:#148578;
    --teal-dark:#0d6f65;
    --teal-tint:#e9f3ef;
    --danger:#bb4545;
    --radius:17px;
    --shadow:0 3px 14px #263c3410;
    font-family:"Aptos","Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-size:14px;
    font-synthesis:none;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased
}
* {
    box-sizing:border-box
}
body {
    margin:0
}
button,input,textarea {
    font:inherit
}
button,a,input,textarea {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
button {
    color:inherit
}
a {
    color:inherit
}
button,input,textarea {
    outline-offset:4px
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid #64beb3
}
button:disabled {
    cursor:wait;
    opacity:.55
}
button svg,.icon-button svg {
    width:19px;
    height:19px;
    flex-shrink:0
}
svg {
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round
}
button svg use {
    pointer-events:none
}
button {
    border:0;
    background:none
}
input,textarea {
    color:var(--ink)
}
textarea {
    resize:vertical
}
input::placeholder,textarea::placeholder {
    color:#91989e
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    font-weight:650
}
h2 {
    letter-spacing:-.7px
}
strong {
    font-weight:650
}
[hidden] {
    display:none!important
}
.icon-library {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link {
    position:fixed;
    left:12px;
    top:-60px;
    z-index:100;
    background:var(--ink);
    color:#fff;
    padding:12px 18px;
    border-radius:8px
}
.skip-link:focus {
    top:12px
}
.app-shell {
    max-width:1360px;
    min-height:100vh;
    margin:auto;
    display:grid;
    grid-template-columns:246px minmax(0,1fr)
}
.sidebar {
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    padding:43px 24px 25px 28px;
    border-right:1px solid var(--line);
    background:#f9faf7
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-size:29px;
    font-weight:800;
    letter-spacing:-1.7px;
    white-space:nowrap
}
.brand-light {
    font-weight:450;
    margin-left:4px;
    letter-spacing:-1.6px
}
.brand-dot {
    color:var(--teal)
}
.brand-mark {
    width:31px;
    height:31px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:4px;
    transform:rotate(-4deg)
}
.brand-mark i {
    background:var(--teal);
    border-radius:4px
}
.brand-mark i:nth-child(2) {
    opacity:.55
}
.brand-mark i:nth-child(3) {
    opacity:.77
}
.sidebar-caption {
    font-size:9px;
    font-weight:700;
    letter-spacing:1.7px;
    color:#a0a7a7;
    margin:52px 12px 18px
}
.main-nav {
    display:grid;
    gap:7px
}
.nav-item {
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    gap:13px;
    text-align:left;
    padding:14px 15px;
    border-radius:10px;
    color:#78818a;
    font-size:13px;
    font-weight:550;
    transition:background .15s,color .15s
}
.nav-item svg {
    width:19px;
    height:19px
}
.nav-item:hover {
    background:#edf1eb;
    color:var(--ink)
}
.nav-item.active {
    color:var(--teal);
    background:var(--teal-tint);
    font-weight:700
}
.nav-active-dot {
    margin-left:auto;
    background:var(--teal);
    width:5px;
    height:5px;
    border-radius:50%;
    display:none
}
.nav-item.active .nav-active-dot {
    display:block
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:43px;
    padding:11px 19px;
    border-radius:8px;
    font-size:12px;
    font-weight:650;
    text-decoration:none;
    transition:background .15s,transform .15s,box-shadow .15s;
    white-space:nowrap
}
.button:active {
    transform:translateY(1px)
}
.button-primary {
    color:#fff;
    background:var(--teal);
    box-shadow:0 3px 7px #0d6f6510
}
.button-primary:hover {
    background:var(--teal-dark)
}
.button-outline {
    border:1px solid var(--line);
    background:#fff
}
.button-outline:hover {
    border-color:#becdc6;
    background:#f9fbf9
}
.button-small {
    min-height:37px;
    padding:8px 14px;
    font-size:11px
}
.button-small svg {
    width:15px;
    height:15px
}
.button-full {
    width:100%
}
.button-danger {
    background:var(--danger);
    color:#fff
}
.button-danger:hover {
    background:#a33737
}
.new-post-button {
    margin-top:30px;
    min-height:45px
}
.sidebar-note {
    margin-top:auto;
    padding:45px 11px 30px;
    position:relative;
    color:#97a199;
    font-size:12px;
    line-height:1.8
}
.small-orbit {
    display:block;
    width:30px;
    height:30px;
    border:1px solid #bdcfc4;
    border-radius:50%;
    position:relative;
    margin-bottom:10px
}
.small-orbit:before {
    content:"";
    position:absolute;
    inset:4px -7px;
    border:1px solid #bdcfc4;
    border-radius:50%;
    transform:rotate(-40deg)
}
.small-orbit:after {
    content:"";
    position:absolute;
    width:6px;
    height:6px;
    right:-3px;
    top:4px;
    background:var(--teal);
    border:2px solid #f9faf7;
    border-radius:50%
}
.sidebar-account {
    min-height:57px;
    border-top:1px solid var(--line);
    padding:20px 2px 0;
    display:flex;
    align-items:center;
    gap:10px
}
.sidebar-account .account-copy {
    flex:1;
    min-width:0
}
.account-name {
    font-weight:650;
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.account-role {
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}
.sidebar-sign-in {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    text-align:left;
    padding:0
}
.sidebar-sign-in>span:last-child {
    font-size:12px;
    font-weight:600
}
.workspace {
    min-width:0;
    padding:0 42px
}
.topbar {
    height:94px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    gap:20px
}
.topbar-label {
    font-size:11px;
    color:#909791;
    display:flex;
    align-items:center;
    gap:9px;
    white-space:nowrap
}
.status-dot {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#7fa994;
    box-shadow:0 0 0 4px #7fa99411
}
.topbar-actions {
    display:flex;
    align-items:center;
    gap:19px
}
.search-field {
    display:flex;
    align-items:center;
    gap:8px;
    color:#969d9c
}
.search-field svg {
    width:16px;
    height:16px
}
.search-field input {
    width:150px;
    border:0;
    background:transparent;
    font-size:11px;
    padding:9px 0;
    outline-offset:2px
}
.content-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) 268px;
    gap:32px;
    padding:40px 0 0
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:29px
}
.eyebrow {
    color:#8b958e;
    font-size:8px;
    font-weight:700;
    letter-spacing:1.9px;
    line-height:1.5
}
.page-heading h1 {
    font-size:42px;
    letter-spacing:-1.8px;
    line-height:1.25;
    margin-top:7px;
    font-weight:700
}
.page-heading h1 span {
    color:var(--teal)
}
.page-description {
    font-size:12px;
    color:var(--muted);
    margin-top:8px
}
.icon-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:33px;
    height:33px;
    flex-shrink:0;
    border-radius:7px;
    color:#8c9598;
    transition:background .15s,color .15s
}
.icon-button:hover {
    background:var(--teal-tint);
    color:var(--teal)
}
.refresh-button {
    border:1px solid var(--line);
    background:#fff;
    margin-top:17px;
    width:34px;
    height:34px
}
.refresh-button svg {
    width:15px;
    height:15px
}
.compose-card {
    display:flex;
    align-items:center;
    gap:11px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:19px 20px;
    box-shadow:var(--shadow)
}
.avatar {
    width:39px;
    height:39px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#668573;
    background:#e8f0e8;
    font-weight:700;
    font-size:12px;
    user-select:none
}
.avatar svg {
    width:21px;
    height:21px
}
.avatar-small {
    width:31px;
    height:31px;
    font-size:10px
}
.compose-avatar {
    width:38px;
    height:38px;
    background:#e5f1ec;
    color:var(--teal)
}
.compose-prompt {
    flex:1;
    min-width:0;
    text-align:left;
    font-size:12px;
    color:#9a9f9e;
    padding:12px 0
}
.compose-media {
    width:25px;
    height:30px;
    color:#8d9b91
}
.compose-media svg {
    width:19px;
    height:19px
}
.compose-separator {
    height:20px;
    width:1px;
    background:var(--line);
    margin:0 2px
}
.compose-card .button-small {
    padding:8px 12px;
    min-height:33px
}
.feed-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:26px 0 18px
}
.feed-tabs {
    display:flex;
    gap:20px
}
.feed-tab {
    font-size:11px;
    font-weight:550;
    color:#98a099;
    position:relative;
    padding:6px 0 10px;
    white-space:nowrap
}
.feed-tab.active {
    color:var(--ink);
    font-weight:700
}
.feed-tab.active:after {
    content:"";
    height:2px;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:var(--teal);
    border-radius:2px
}
.sort-label {
    display:flex;
    gap:5px;
    align-items:center;
    color:#959d97;
    font-size:9px;
    white-space:nowrap
}
.sort-label svg {
    width:12px;
    height:12px
}
.post-list {
    display:grid;
    gap:19px
}
.post-card {
    min-width:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:23px 24px 0;
    box-shadow:0 2px 7px #263c3405;
    animation:card-in .2s ease-out
}
.post-header {
    display:flex;
    align-items:center;
    gap:10px
}
.post-author {
    flex:1;
    min-width:0
}
.post-author-name {
    font-size:12px;
    font-weight:700;
    overflow-wrap:anywhere
}
.post-meta {
    display:flex;
    gap:6px;
    align-items:center;
    color:#9ba29e;
    font-size:9px;
    margin-top:5px;
    flex-wrap:wrap
}
.post-meta svg {
    width:11px;
    height:11px
}
.post-menu {
    position:relative;
    margin-left:auto
}
.post-menu summary {
    list-style:none;
    cursor:pointer
}
.post-menu summary::-webkit-details-marker {
    display:none
}
.post-menu[open]>summary {
    background:var(--teal-tint)
}
.post-menu-options {
    position:absolute;
    right:0;
    top:38px;
    width:155px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:9px;
    padding:5px;
    z-index:3;
    box-shadow:0 9px 22px #20352815
}
.post-menu-options button {
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:6px;
    text-align:left;
    font-size:11px
}
.post-menu-options button:hover {
    background:#f1f4ee
}
.post-menu-options svg {
    width:14px;
    height:14px
}
.post-menu-options .delete-action {
    color:var(--danger)
}
.post-body {
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    line-height:1.85;
    font-size:12px;
    color:#59616a;
    margin:17px 0 20px
}
.post-body:empty {
    display:none
}
.post-media-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    border-radius:11px;
    overflow:hidden;
    margin:18px 0 20px;
    background:#eef1eb
}
.post-media-grid.single {
    grid-template-columns:1fr
}
.post-media-grid.three .media-item:first-child {
    grid-row:span 2
}
.media-item {
    position:relative;
    min-width:0;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef1eb;
    overflow:hidden;
    aspect-ratio:1.35;
    min-height:0
}
.post-media-grid.single .media-item {
    aspect-ratio:auto;
    min-height:140px;
    max-height:540px
}
.post-media-grid.three .media-item:first-child {
    aspect-ratio:auto
}
.media-item img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:zoom-in
}
.post-media-grid.single img {
    height:auto;
    max-height:540px;
    object-fit:contain
}
.media-item video {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#17231f;
    max-height:540px
}
.post-media-grid.single video {
    height:auto;
    min-height:190px
}
.media-item img.is-broken {
    height:100px;
    object-fit:contain;
    font-size:11px
}
.post-footer {
    border-top:1px solid #eef0eb;
    display:flex;
    align-items:center;
    min-height:55px;
    gap:23px
}
.reaction-button {
    display:flex;
    align-items:center;
    gap:7px;
    color:#8d9792;
    font-size:10px;
    padding:12px 0;
    transition:color .15s
}
.reaction-button svg {
    width:16px;
    height:16px;
    stroke-width:1.7
}
.reaction-button:hover {
    color:var(--teal)
}
.reaction-button.liked {
    color:var(--teal)
}
.reaction-button.liked svg {
    fill:#14857818
}
.post-footer .post-visibility {
    margin-left:auto;
    font-size:8px;
    color:#adb4ae;
    display:flex;
    align-items:center;
    gap:4px
}
.post-visibility svg {
    width:11px;
    height:11px
}
.feed-bottom {
    text-align:center;
    padding:24px 0 40px
}
#feed-sentinel {
    height:2px
}
#feed-end {
    font-size:10px;
    color:#a2aaa3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    padding-top:8px
}
#feed-end span {
    width:36px;
    height:1px;
    background:var(--line)
}
.right-sidebar {
    padding-top:3px
}
.welcome-card {
    position:relative;
    overflow:hidden;
    background:#e6eee7;
    padding:23px 23px 17px;
    border-radius:var(--radius);
    min-height:335px;
    color:#355a4c
}
.welcome-top {
    display:flex;
    justify-content:space-between;
    align-items:center
}
.welcome-kicker {
    font-size:8px;
    letter-spacing:1.8px;
    font-weight:700;
    color:#799484
}
.mini-spark {
    font-size:22px;
    color:#7ea58b;
    line-height:1
}
.welcome-card h2 {
    font-size:27px;
    line-height:1.18;
    letter-spacing:-1.05px;
    margin-top:19px;
    font-weight:650
}
.welcome-card>p {
    font-size:11px;
    line-height:1.8;
    color:#7a9081;
    margin-top:13px
}
.connection-art {
    height:115px;
    position:relative;
    margin-top:3px;
    user-select:none
}
.art-orbit {
    width:140px;
    height:140px;
    border:1px solid #b4c8b5;
    border-radius:50%;
    position:absolute;
    left:26px;
    top:-3px
}
.art-orbit:after {
    content:"";
    position:absolute;
    inset:15px -18px;
    border:1px dashed #bccfbe;
    border-radius:50%;
    transform:rotate(-33deg)
}
.art-card {
    position:absolute;
    background:#f8fbf6;
    border:1px solid #b9cec0;
    box-shadow:0 5px 9px #456b5210;
    border-radius:7px
}
.art-card-one {
    left:10px;
    right:6px;
    top:23px;
    height:44px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    transform:rotate(-7deg)
}
.art-avatar {
    width:22px;
    height:22px;
    background:#a5bca0;
    border-radius:50%;
    position:relative;
    overflow:hidden;
    flex-shrink:0
}
.art-avatar:before {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#eaf0df;
    left:8px;
    top:4px
}
.art-avatar:after {
    content:"";
    position:absolute;
    width:15px;
    height:14px;
    border-radius:50%;
    background:#eaf0df;
    left:4px;
    top:13px
}
.art-lines {
    flex:1;
    display:grid;
    gap:6px
}
.art-lines i {
    height:3px;
    background:#bbcebd;
    border-radius:3px;
    width:78%
}
.art-lines i:last-child {
    width:54%;
    background:#d3dfd2
}
.art-heart {
    font-size:22px;
    color:#97b89e
}
.art-card-two {
    top:70px;
    left:36px;
    right:0;
    height:34px;
    padding:10px 10px;
    transform:rotate(5deg);
    display:flex;
    align-items:center;
    gap:10px
}
.art-message {
    font-size:8px;
    color:#829e86;
    white-space:nowrap
}
.art-bubble {
    height:20px;
    width:20px;
    border-radius:5px;
    background:#e0ecdc;
    color:#7ba477;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:auto
}
.art-star {
    position:absolute;
    left:1px;
    bottom:-1px;
    color:#8aaa90;
    font-size:20px
}
.welcome-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:6.5px;
    font-weight:700;
    letter-spacing:1.2px;
    color:#809783;
    margin-top:7px
}
.welcome-bottom svg {
    height:13px;
    width:13px
}
.about-card {
    padding:30px 2px 25px;
    border-bottom:1px solid var(--line)
}
.section-kicker {
    font-size:7px;
    letter-spacing:1.5px;
    font-weight:700;
    color:#9aa59c
}
.about-card h2 {
    font-size:17px;
    letter-spacing:-.45px;
    margin-top:11px
}
.about-list {
    list-style:none;
    margin:22px 0 0;
    padding:0;
    display:grid;
    gap:21px
}
.about-list li {
    display:flex;
    gap:11px
}
.about-icon {
    width:30px;
    height:30px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#91a795;
    background:#eaf0e6;
    border-radius:8px
}
.about-icon svg {
    width:15px;
    height:15px
}
.about-list strong {
    font-size:10px;
    color:#647268;
    font-weight:650
}
.about-list p {
    font-size:10px;
    color:#a0a79f;
    line-height:1.8;
    margin-top:4px
}
.sidebar-footer {
    display:flex;
    flex-wrap:wrap;
    gap:10px 17px;
    padding:24px 2px;
    color:#a4aba2;
    font-size:8px
}
.sidebar-footer span:last-child {
    flex-basis:100%;
    margin-top:5px;
    font-size:7px
}
.footer-brand {
    font-weight:750;
    letter-spacing:-.2px;
    color:#8a998d
}
.empty-state {
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:50px 27px;
    text-align:center;
    min-height:277px
}
.empty-icon {
    width:65px;
    height:65px;
    border-radius:19px;
    background:var(--teal-tint);
    color:var(--teal);
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:rotate(-5deg)
}
.empty-icon svg {
    width:29px;
    height:29px;
    transform:rotate(5deg);
    stroke-width:1.3
}
.empty-state h2 {
    font-size:21px;
    letter-spacing:-.6px;
    line-height:1.35
}
.empty-state p {
    font-size:12px;
    color:var(--muted);
    line-height:1.9;
    margin:12px auto 21px;
    max-width:300px
}
.skeleton-card {
    border:1px solid var(--line);
    background:#fff;
    border-radius:var(--radius);
    padding:24px
}
.skeleton {
    background:linear-gradient(90deg,#f0f2ee 20%,#f7f8f5 45%,#f0f2ee 70%);
    background-size:220% 100%;
    animation:shimmer 1.7s infinite;
    border-radius:5px
}
.skeleton-top {
    display:flex;
    gap:10px;
    align-items:center
}
.skeleton-avatar {
    height:38px;
    width:38px;
    border-radius:50%
}
.skeleton-name {
    width:100px;
    height:10px
}
.skeleton-date {
    width:60px;
    height:7px;
    margin-top:9px
}
.skeleton-line {
    height:9px;
    margin-top:13px;
    width:100%
}
.skeleton-line.short {
    width:65%
}
.skeleton-image {
    height:190px;
    margin-top:23px;
    border-radius:10px
}
.skeleton-footer {
    width:120px;
    height:10px;
    margin-top:24px
}
dialog {
    border:1px solid var(--line);
    padding:0;
    box-shadow:0 30px 100px #122a2040;
    color:var(--ink)
}
dialog::backdrop {
    background:#152b2580;
    backdrop-filter:blur(4px)
}
.modal {
    border-radius:19px;
    width:min(460px,calc(100% - 30px));
    max-height:calc(100dvh - 42px);
    background:#fff
}
.modal[open] {
    animation:modal-in .16s ease-out
}
.modal-inner {
    padding:30px
}
.modal-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:20px
}
.modal-heading h2 {
    font-size:26px;
    line-height:1.3;
    margin-top:5px
}
.modal-heading .icon-button {
    align-self:flex-start;
    margin:-5px -7px 0 0
}
.modal-description {
    font-size:12px;
    line-height:1.9;
    color:var(--muted);
    margin-bottom:24px
}
.field-label {
    display:block;
    font-size:11px;
    font-weight:650;
    color:#617066;
    margin:18px 0 8px
}
.field-label span {
    font-size:10px;
    font-weight:400;
    color:var(--muted)
}
.text-input {
    display:block;
    width:100%;
    border:1px solid #dfe5dd;
    background:#fcfdfa;
    padding:12px 13px;
    border-radius:8px;
    font-size:12px;
    line-height:1.6;
    transition:border-color .15s
}
.text-input:focus {
    border-color:#6cac96;
    outline-width:2px
}
.password-wrap {
    position:relative
}
.password-wrap input {
    padding-right:65px
}
.password-toggle {
    font-size:10px;
    color:#788a7b;
    position:absolute;
    right:12px;
    top:0;
    height:100%
}
#login-submit {
    margin-top:24px
}
.form-footnote {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:9px;
    line-height:1.7;
    color:#a0aaa1;
    margin-top:19px
}
.form-footnote svg {
    width:12px;
    height:12px;
    flex-shrink:0
}
.form-error {
    background:#fcf0ed;
    color:#a74639;
    border:1px solid #f0d7d0;
    border-radius:8px;
    font-size:11px;
    line-height:1.7;
    padding:12px;
    margin:12px 0;
    white-space:pre-line;
    overflow-wrap:anywhere
}
.composer-modal {
    width:min(580px,calc(100% - 30px))
}
.composer-author {
    display:flex;
    gap:11px;
    align-items:center;
    margin:23px 0
}
.composer-author strong {
    display:block;
    font-size:12px;
    overflow-wrap:anywhere
}
.composer-author div>span {
    display:flex;
    gap:5px;
    align-items:center;
    font-size:9px;
    color:#98a499;
    margin-top:6px
}
.composer-author svg {
    width:11px;
    height:11px
}
.post-textarea {
    border:0;
    width:100%;
    padding:0;
    font-size:14px;
    line-height:1.85;
    background:#fff;
    min-height:125px;
    max-height:350px
}
.post-textarea:focus {
    outline:0
}
.character-count {
    text-align:right;
    font-size:9px;
    color:#a9b0a8;
    margin:8px 0 15px
}
.upload-area {
    border:1px dashed #c9d9cc;
    background:#f6faf4;
    min-height:110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:15px;
    text-align:center;
    border-radius:10px;
    cursor:pointer;
    color:#8aab92;
    gap:8px;
    transition:background .15s
}
.upload-area:hover,.upload-area.dragging {
    background:#eaf5e8;
    border-color:var(--teal)
}
.upload-area:focus-within {
    outline:2px solid var(--teal);
    outline-offset:2px
}
.upload-area>svg {
    width:23px;
    height:23px
}
.upload-area strong {
    font-size:11px;
    color:#718a76
}
.upload-area>span {
    font-size:9px;
    line-height:1.6;
    color:#a0ada0
}
.modal-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:25px;
    padding-top:20px;
    border-top:1px solid var(--line)
}
.subtle-text {
    font-size:10px;
    color:#9aa59b;
    line-height:1.6
}
.media-previews {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:13px
}
.media-preview {
    position:relative;
    aspect-ratio:1.2;
    border:1px solid var(--line);
    background:#eff3ec;
    border-radius:8px;
    overflow:hidden
}
.media-preview img,.media-preview video {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.remove-preview {
    position:absolute;
    right:4px;
    top:4px;
    width:23px;
    height:23px;
    border-radius:50%;
    color:#fff;
    background:#152b25b3;
    display:flex;
    align-items:center;
    justify-content:center
}
.remove-preview svg {
    width:13px;
    height:13px
}
.preview-video-label {
    position:absolute;
    bottom:6px;
    left:6px;
    color:#fff;
    background:#152b2580;
    font-size:8px;
    border-radius:4px;
    padding:3px 5px
}
.comments-modal {
    width:min(510px,calc(100% - 24px));
    max-height:calc(100dvh - 32px)
}
.comments-inner {
    display:flex;
    flex-direction:column;
    max-height:calc(100dvh - 34px);
    padding-bottom:24px
}
.comments-total {
    font-size:14px;
    color:#a1aca1;
    margin-left:8px;
    font-weight:450;
    letter-spacing:0
}
.comment-context {
    padding:15px 17px;
    background:#f5f8f2;
    border-radius:9px;
    flex-shrink:0;
    margin-bottom:10px
}
.comment-context strong {
    font-size:11px;
    color:#6a806d;
    display:block
}
.comment-context p {
    font-size:11px;
    line-height:1.7;
    color:#9ba89c;
    margin-top:5px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.comments-scroll {
    min-height:130px;
    overflow-y:auto;
    overscroll-behavior:contain;
    flex:1;
    padding:7px 0;
    scrollbar-width:thin;
    scrollbar-color:#cedacc transparent
}
.comment-item {
    display:flex;
    gap:10px;
    padding:17px 0;
    border-bottom:1px solid #edf1e9
}
.comment-item .avatar {
    width:31px;
    height:31px;
    font-size:9px
}
.comment-content {
    flex:1;
    min-width:0
}
.comment-topline {
    display:flex;
    align-items:center;
    gap:10px
}
.comment-topline strong {
    font-size:11px;
    overflow-wrap:anywhere
}
.comment-topline time {
    font-size:8px;
    color:#a5ada2;
    margin-left:auto;
    white-space:nowrap
}
.comment-content>p {
    font-size:12px;
    line-height:1.8;
    color:#727e72;
    margin-top:6px;
    white-space:pre-wrap;
    overflow-wrap:anywhere
}
.comment-delete {
    width:22px;
    height:22px
}
.comment-delete svg {
    width:12px;
    height:12px
}
.comment-empty {
    text-align:center;
    color:#9faa9d;
    font-size:12px;
    line-height:1.8;
    padding:40px 20px
}
.comment-form {
    padding-top:20px;
    border-top:1px solid var(--line);
    margin-top:13px;
    flex-shrink:0
}
.comment-form textarea {
    resize:none;
    font-size:12px;
    max-height:130px
}
.comment-form-bottom {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:11px
}
.comments-login {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    font-size:11px;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:20px;
    margin-top:15px;
    flex-shrink:0
}
#load-more-comments {
    margin:14px 0
}
.admin-modal {
    width:min(650px,calc(100% - 30px))
}
.admin-tabs {
    display:flex;
    gap:25px;
    border-bottom:1px solid var(--line);
    margin-bottom:18px
}
.admin-tab {
    font-size:12px;
    color:var(--muted);
    padding:11px 0;
    position:relative
}
.admin-tab.active {
    color:var(--teal);
    font-weight:650
}
.admin-tab.active:after {
    content:"";
    height:2px;
    background:var(--teal);
    position:absolute;
    bottom:-1px;
    left:0;
    right:0
}
.admin-list {
    display:grid;
    gap:8px;
    max-height:260px;
    overflow-y:auto;
    scrollbar-width:thin
}
.admin-row {
    display:flex;
    gap:10px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:9px;
    padding:12px
}
.admin-row .avatar {
    width:32px;
    height:32px;
    font-size:9px
}
.admin-row-copy {
    flex:1;
    min-width:0
}
.admin-row-copy strong {
    font-size:11px;
    display:block;
    overflow-wrap:anywhere
}
.admin-row-copy small {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:5px;
    overflow-wrap:anywhere
}
.role-badge {
    font-size:8px;
    font-weight:600;
    background:#eaf4e9;
    color:#78a376;
    border-radius:4px;
    padding:4px 6px
}
.role-badge.inactive {
    color:#a6a198;
    background:#f1efeb
}
.admin-row-actions {
    display:flex;
    gap:3px
}
.admin-row-actions .icon-button {
    width:26px;
    height:26px
}
.admin-row-actions svg {
    width:13px;
    height:13px
}
.admin-create-form {
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line)
}
.admin-create-form h3 {
    font-size:16px;
    letter-spacing:-.3px
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:15px
}
.checkbox-label {
    display:flex;
    gap:7px;
    align-items:center;
    font-size:11px;
    color:#7a897b;
    margin-top:15px
}
.checkbox-label input {
    accent-color:var(--teal)
}
.form-buttons {
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:19px
}
.field-help {
    font-size:10px;
    color:var(--muted);
    line-height:1.7;
    margin-top:7px
}
.secret-box {
    border:1px solid #bdd9be;
    background:#f0f8ed;
    padding:15px;
    border-radius:9px;
    margin-bottom:18px
}
.secret-box>strong {
    font-size:12px;
    color:#60895d
}
.secret-box>p {
    font-size:10px;
    color:#83a080;
    line-height:1.7;
    margin-top:6px
}
.secret-value {
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff;
    border:1px solid #dbe9d7;
    padding:8px 8px 8px 11px;
    border-radius:6px;
    margin-top:12px
}
.secret-value code {
    overflow-wrap:anywhere;
    flex:1;
    font-size:10px;
    color:#5b8157;
    user-select:all
}
.confirm-modal .modal-heading h2 {
    font-size:23px
}
.confirm-modal .modal-actions {
    justify-content:flex-end
}
.image-modal {
    background:transparent;
    border:0;
    box-shadow:none;
    max-width:95vw;
    max-height:95dvh;
    overflow:visible
}
.image-modal::backdrop {
    background:#0d1c18ed
}
.image-modal img {
    display:block;
    max-width:90vw;
    max-height:87dvh;
    object-fit:contain;
    border-radius:8px
}
.lightbox-close {
    position:absolute;
    right:-8px;
    top:-39px;
    background:#ffffff1a;
    color:#fff
}
.lightbox-close:hover {
    background:#ffffff33;
    color:#fff
}
.toast-region {
    position:fixed;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    z-index:100;
    display:grid;
    gap:8px;
    pointer-events:none;
    width:max-content;
    max-width:calc(100% - 30px)
}
.toast {
    display:flex;
    align-items:center;
    gap:10px;
    background:#263f33;
    color:#fff;
    padding:13px 20px;
    border-radius:10px;
    font-size:12px;
    line-height:1.6;
    box-shadow:0 5px 25px #182a2925;
    animation:modal-in .2s
}
.toast svg {
    width:16px;
    height:16px;
    color:#b4d4ae;
    flex-shrink:0
}
.toast.error {
    background:#a24438
}
.toast.error svg {
    color:#f3c5bb
}
.noscript-notice {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#233f31;
    color:#fff;
    padding:20px;
    text-align:center;
    z-index:50
}
@keyframes shimmer {
    from {
        background-position:200% 0
    }
    to {
        background-position:-20% 0
    }
}
@keyframes modal-in {
    from {
        opacity:0;
        transform:translateY(6px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@keyframes card-in {
    from {
        opacity:0;
        transform:translateY(3px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
@media(min-width:1450px) {
    .workspace {
        padding:0 55px
    }
    .content-grid {
        gap:40px;
        grid-template-columns:minmax(0,1fr) 290px
    }
    .welcome-card {
        min-height:355px;
        padding:27px
    }
    .welcome-card h2 {
        font-size:29px
    }
    .connection-art {
        margin-top:13px
    }
    .welcome-bottom {
        margin-top:10px
    }
}
@media(max-width:1199px) {
    .app-shell {
        grid-template-columns:208px minmax(0,1fr)
    }
    .sidebar {
        padding:37px 18px 23px
    }
    .brand {
        font-size:26px
    }
    .brand-mark {
        width:27px;
        height:27px
    }
    .workspace {
        padding:0 28px
    }
    .content-grid {
        gap:23px;
        grid-template-columns:minmax(0,1fr) 235px
    }
    .welcome-card {
        padding:22px 18px 18px
    }
    .welcome-card h2 {
        font-size:24px
    }
    .welcome-bottom {
        font-size:5.9px
    }
    .post-card {
        padding:21px 21px 0
    }
    .compose-card {
        padding:17px 16px;
        gap:9px
    }
    .compose-prompt {
        font-size:11px
    }
    .topbar-label {
        font-size:9px
    }
    .topbar-actions {
        gap:13px
    }
    .search-field input {
        width:130px
    }
    .feed-tabs {
        gap:16px
    }
    .art-card-one {
        left:2px;
        right:0
    }
    .art-card-two {
        left:20px;
        right:-2px
    }
    .art-message {
        font-size:7px
    }
    .art-orbit {
        left:18px
    }
    .about-card h2 {
        font-size:15px
    }
}
@media(max-width:1023px) {
    .app-shell {
        grid-template-columns:195px minmax(0,1fr)
    }
    .right-sidebar {
        display:none
    }
    .content-grid {
        grid-template-columns:minmax(0,1fr);
        padding-top:32px
    }
    .workspace {
        padding:0 35px
    }
    .topbar-label {
        display:none
    }
    .topbar {
        justify-content:flex-end;
        height:85px
    }
    .topbar-actions {
        width:100%;
        justify-content:space-between
    }
    .search-field input {
        width:180px
    }
    .page-heading h1 {
        font-size:40px
    }
    .sidebar {
        padding:33px 17px 23px
    }
    .brand {
        font-size:24px
    }
    .brand-mark {
        width:25px;
        height:25px;
        gap:3px
    }
    .sidebar-caption {
        font-size:8px;
        letter-spacing:1.5px;
        margin-left:9px
    }
    .nav-item {
        font-size:11px;
        gap:10px;
        padding:13px 11px
    }
    .new-post-button {
        font-size:11px;
        padding:11px 10px
    }
    .sidebar-note {
        font-size:11px
    }
}
@media(max-width:700px) {
    .app-shell {
        display:block
    }
    .sidebar {
        position:relative;
        height:auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        gap:15px;
        padding:19px 22px;
        border-right:0;
        border-bottom:1px solid var(--line);
        background:#f9faf7
    }
    .brand {
        font-size:25px
    }
    .brand-mark {
        width:26px;
        height:26px
    }
    .sidebar-caption,.sidebar-note,.sidebar-account,.new-post-button {
        display:none
    }
    .main-nav {
        margin-left:auto;
        display:flex;
        gap:3px
    }
    .nav-item {
        font-size:0;
        width:35px;
        height:35px;
        padding:8px;
        border-radius:8px;
        gap:0
    }
    .nav-item span {
        display:none
    }
    .nav-item svg {
        width:19px;
        height:19px
    }
    .nav-active-dot {
        display:none!important
    }
    .workspace {
        padding:0 22px
    }
    .topbar {
        height:65px
    }
    .topbar-actions {
        gap:10px
    }
    .search-field input {
        font-size:11px;
        width:min(180px,45vw)
    }
    .topbar .button-small {
        font-size:10px;
        min-height:32px;
        padding:7px 12px
    }
    .topbar .button-small svg {
        height:13px;
        width:13px
    }
    .content-grid {
        padding-top:27px
    }
    .page-heading {
        margin-bottom:23px
    }
    .eyebrow {
        font-size:7px;
        letter-spacing:1.6px
    }
    .page-heading h1 {
        font-size:37px;
        margin-top:6px
    }
    .page-description {
        font-size:11px
    }
    .refresh-button {
        width:31px;
        height:31px;
        margin-top:12px
    }
    .compose-card {
        padding:14px;
        gap:10px;
        border-radius:13px
    }
    .compose-avatar {
        height:33px;
        width:33px;
        font-size:10px
    }
    .compose-prompt {
        font-size:11px;
        line-height:1.7
    }
    .compose-card .compose-media,.compose-card .compose-separator {
        display:none
    }
    .compose-card .button-small {
        font-size:10px;
        padding:7px 10px;
        min-height:30px;
        gap:5px
    }
    .compose-card .button-small svg {
        width:12px;
        height:12px
    }
    .feed-toolbar {
        margin:20px 0 14px
    }
    .feed-tabs {
        gap:20px
    }
    .feed-tab {
        font-size:10px
    }
    .sort-label {
        font-size:8px
    }
    .post-card {
        padding:19px 18px 0;
        border-radius:14px
    }
    .post-list {
        gap:15px
    }
    .post-body {
        font-size:12px;
        margin:16px 0 18px
    }
    .post-author-name {
        font-size:11px
    }
    .post-meta {
        font-size:8px
    }
    .post-header .avatar {
        width:35px;
        height:35px;
        font-size:10px
    }
    .post-media-grid {
        margin:15px -3px 17px;
        border-radius:8px
    }
    .post-footer {
        min-height:51px;
        gap:20px
    }
    .post-visibility {
        font-size:7px!important
    }
    .reaction-button {
        font-size:9px
    }
    .reaction-button svg {
        width:15px;
        height:15px
    }
    .empty-state {
        padding:38px 22px;
        min-height:280px
    }
    .empty-state h2 {
        font-size:20px
    }
    .empty-state p {
        font-size:11px
    }
    .modal-inner {
        padding:25px
    }
    .modal-heading h2 {
        font-size:24px
    }
    .composer-modal .modal-actions {
        align-items:flex-end
    }
    .composer-modal .subtle-text {
        max-width:120px;
        font-size:9px
    }
    .composer-modal .modal-actions .button {
        font-size:11px;
        padding:10px 14px
    }
    .comments-inner {
        padding:25px 23px 20px
    }
    .comment-form .subtle-text {
        max-width:150px
    }
    .form-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .role-badge {
        font-size:7px;
        padding:4px
    }
    .admin-row {
        padding:10px
    }
    .admin-row .avatar {
        display:none
    }
    .toast-region {
        bottom:18px
    }
    .toast {
        font-size:11px;
        padding:11px 15px
    }
    .skeleton-card {
        padding:20px
    }
    .skeleton-image {
        height:180px
    }
}
@media(max-width:360px) {
    .workspace {
        padding:0 15px
    }
    .sidebar {
        padding:17px 15px
    }
    .feed-tabs {
        gap:15px
    }
    .sort-label {
        display:none
    }
    .compose-card {
        gap:8px;
        padding:12px
    }
    .compose-prompt {
        font-size:10px
    }
    .post-footer .post-visibility {
        display:none
    }
    .modal-inner {
        padding:22px
    }
    .modal-heading h2 {
        font-size:22px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}
.modal-open body {
    overflow:hidden
}
.skeleton-line-first {
    margin-top:25px
}
.avatar-tone-0 {
    background:#e8eee0;
    color:#7a8b58
}
.avatar-tone-1 {
    background:#eee6dd;
    color:#a17e5f
}
.avatar-tone-2 {
    background:#e3ecec;
    color:#5c8b8b
}
.avatar-tone-3 {
    background:#e8e5ee;
    color:#8b779c
}
.avatar-tone-4 {
    background:#f1e5e5;
    color:#ab7b7b
}
.avatar-tone-5 {
    background:#e5eee8;
    color:#729782
}
.media-error {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px 15px;
    gap:14px;
    min-height:180px
}
.media-error>svg {
    width:28px;
    height:28px;
    color:#8b9e92
}
.media-error p {
    font-size:11px;
    color:#8b9e92;
    line-height:1.8
}