.community-page { --card: #fcfdf9; --accent: #e8efde; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #688b4c; outline-offset: 3px; }
.community-page .button { border: 1px solid transparent; gap: 12px; font-family: inherit; }
.button-outline { background: transparent; border-color: #b9c6ae !important; }
.button-outline:hover { background: #e9efdf; }
.button-danger { background: #883f35; color: white; }
.button-danger:hover { background: #6b3028; }
.nav-community { padding-block: 12px; color: var(--ink); font-size: 13px; font-weight: 600; }
.nav-community.active { box-shadow: 0 2px 0 #7f9e5b; }
.community-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 55px; align-items: center; padding: 52px 0 47px; }
.community-intro h1 { font-size: clamp(40px, 4.5vw, 59px); font-weight: 450; line-height: 1.08; letter-spacing: -2.1px; margin: 22px 0 18px; }
.community-intro h1 em { font-size: .98em; letter-spacing: -1.9px; }
.community-intro .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
.community-intro p { max-width: 540px; color: var(--muted); font-size: 14px; line-height: 1.85; margin: 0; }
.intro-actions { display: flex; align-items: center; gap: 19px; margin-top: 25px; }
.intro-actions .button { min-height: 46px; padding: 12px 18px; }
.intro-actions .button > span { font-size: 20px; font-weight: 400; line-height: 1; }
.intro-invitation { font: italic 14px Georgia, serif; color: #627354; }
.conversation-art { position: relative; overflow: hidden; height: 255px; border-radius: 120px 120px 12px 12px; background: #eaf0e1; border: 1px solid #dce5d2; }
.orbit-circle { position: absolute; border: 1px solid #b5c6a1; border-radius: 50%; width: 210px; height: 210px; top: 12px; }
.orbit-one { left: 28px; }.orbit-two { right: 28px; top: 27px; border-style: dashed; opacity: .7; }
.art-word { position: absolute; padding: 18px 24px; border-radius: 18px 18px 18px 3px; font: italic 25px Georgia, serif; box-shadow: 0 7px 20px #314a2410; }
.art-word-one { top: 59px; left: 35px; background: var(--ink); color: #f3f7ed; transform: rotate(-7deg); }
.art-word-two { top: 128px; right: 28px; background: #d4e4bb; border: 1px solid #b3c999; color: #3d5732; transform: rotate(5deg); }
.orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #789453; }.dot-one { top: 37px; right: 85px; }.dot-two { bottom: 57px; left: 57px; width: 5px; height: 5px; }
.orbit-spark { position: absolute; font-size: 29px; right: 48px; top: 65px; color: #7b9853; }
.art-bottom { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 7px; letter-spacing: 1.6px; color: #60754b; }
.community-layout { display: grid; grid-template-columns: 183px minmax(0, 1fr) 224px; gap: 28px; border-top: 1px solid var(--line); padding: 33px 0 60px; align-items: start; }
.community-sidebar { padding-top: 7px; }.community-sidebar > .section-index { font-size: 8px; letter-spacing: 1.15px; }
.category-list { display: flex; flex-direction: column; gap: 5px; margin: 19px 0 17px; }
.category-button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 7px; padding: 11px 10px; background: transparent; border: 1px solid transparent; border-radius: 6px; text-align: left; font-size: 12px; color: #56674c; }
.category-button:hover { background: #edf1e6; }.category-button.selected { background: #e5edda; color: #2b432c; border-color: #dae5ca; font-weight: 600; }
.category-count { font-size: 10px; min-width: 17px; text-align: center; font-weight: 400; color: #5a6b4e; }
.my-topics-button { display: flex; justify-content: space-between; align-items: center; background: none; border: 0; border-top: 1px solid var(--line); padding: 17px 10px; width: 100%; font-size: 12px; text-align: left; }.my-topics-button[aria-pressed=true] { font-weight: 700; color: #4f702f; }
.identity-card { display: flex; align-items: center; gap: 10px; padding: 20px 5px 0; border-top: 1px solid var(--line); }
.identity-avatar, .comment-avatar { display: flex; align-items: center; justify-content: center; background: #e7eedc; color: #526a40; border: 1px solid #d6e0c9; border-radius: 50%; width: 33px; height: 33px; font-size: 12px; flex-shrink: 0; }
.identity-card > div { min-width: 0; }.identity-card #identity-name { display: block; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }.text-button { padding: 5px 0; border: 0; background: none; color: #637c4b; font-size: 11px; text-align: left; }.text-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.identity-note { font-size: 10px; color: var(--muted); line-height: 1.7; margin: 12px 5px; }
.topic-search { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #d8e0cf; border-radius: 7px; background: var(--card); }
.topic-search svg { color: #728368; flex-shrink: 0; }.topic-search input { flex: 1; min-width: 0; border: 0; background: none; font-size: 12px; color: var(--ink); padding: 4px 0; }.topic-search input::placeholder { color: #78856f; }.topic-search input:focus-visible { outline-offset: 5px; }.topic-search button { border: 0; background: #ecf1e4; font-size: 10px; padding: 7px 10px; border-radius: 4px; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 16px 0 15px; }.sort-options { display: flex; gap: 5px; }.sort-button { border: 0; background: none; padding: 8px 11px; border-radius: 5px; font-size: 11px; color: #69775d; white-space: nowrap; }.sort-button.selected { background: #e8edde; color: #354e2b; font-weight: 600; }.sort-button:hover { background: #edf0e6; }.result-count { font-size: 10px; color: #748168; white-space: nowrap; }
.filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; padding: 0 0 15px; color: #526a40; }.filter-summary .text-button { font-size: 11px; flex-shrink: 0; }
.topic-list { display: flex; flex-direction: column; gap: 12px; }.loading-state { padding: 65px 20px; text-align: center; color: #6c7f5d; font: italic 17px Georgia, serif; }
.topic-card { background: var(--card); border: 1px solid #dfe5d8; border-radius: 8px; padding: 20px 21px 15px; transition: border-color .2s; }.topic-card:hover { border-color: #afc39a; }
.topic-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10px; color: #69785e; line-height: 1.5; }.category-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; background: #eaf0e1; color: #536b3e; font-size: 9px; font-weight: 600; }.category-badge[data-category="Ideas & feedback"] { background: #f0ecde; color: #796843; }.category-badge[data-category="AI tools"] { background: #e5eeec; color: #496d66; }.category-badge[data-category="Clinical research"] { background: #e9ecf2; color: #5a6784; }.meta-separator { opacity: .5; }
.topic-title { margin: 14px 0 10px; font-size: 18px; letter-spacing: -.35px; line-height: 1.4; font-weight: 550; overflow-wrap: anywhere; }.topic-title a:hover { color: #638541; }.topic-excerpt { color: #69765f; font-size: 12px; line-height: 1.85; margin: 0 0 15px; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.topic-actions { display: flex; align-items: center; gap: 16px; padding-top: 13px; border-top: 1px solid #e8ecdf; }.vote-control { display: inline-flex; gap: 5px; align-items: center; background: #edf1e6; border-radius: 20px; padding: 2px 3px; }.vote-button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6e7e60; font-size: 18px; }.vote-button:hover { background: #dce7cc; }.vote-button[aria-pressed=true] { background: #cbdcae; color: #314e22; font-weight: 700; }.vote-score { min-width: 18px; text-align: center; font-size: 11px; font-weight: 600; }.action-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 0; border: 0; background: none; font-size: 10px; color: #66755b; }.action-link:hover { color: #354f29; text-decoration: underline; text-underline-offset: 3px; }.remove-link { margin-left: auto; color: #8a6559; }
.empty-state { border: 1px solid #dce5d0; background: linear-gradient(150deg,#f0f4e9,#fafbf6); padding: 32px 23px 24px; border-radius: 8px; text-align: center; }.empty-state > .small-flower { display: block; font-size: 31px; margin-bottom: 17px; }.empty-state h2 { font-size: 25px; font-weight: 450; line-height: 1.3; letter-spacing: -.6px; margin: 0 auto 12px; max-width: 340px; }.empty-state p { font-size: 12px; color: #6c7a60; line-height: 1.8; max-width: 340px; margin: 0 auto 21px; }.empty-state .button { min-height: 43px; font-size: 12px; padding: 11px 17px; }.starter-prompts { margin-top: 29px; text-align: left; border-top: 1px solid #dce5d0; padding-top: 20px; }.starter-prompts > .section-index { font-size: 8px; letter-spacing: 1.2px; margin-bottom: 8px; }.starter-prompt { display: flex; gap: 15px; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: none; text-align: left; border: 0; border-bottom: 1px solid #e0e7d7; font-size: 12px; color: #4f6540; line-height: 1.6; }.starter-prompt:last-child { border-bottom: 0; padding-bottom: 0; }.starter-prompt:hover { color: #253e32; }.starter-prompt > span { font-size: 18px; }
.load-more { margin: 20px auto 0; display: flex; font-size: 12px; min-height: 42px; }.error-state { padding: 32px 20px; border: 1px solid #dfc6b6; background: #faf4e9; border-radius: 8px; text-align: center; }.error-state p { font-size: 13px; line-height: 1.7; }.error-state h2 { font-size: 21px; font-weight: 500; }
.clear-empty { display: block; margin: 12px auto 0; text-align: center; }
.about-community { padding: 23px 20px 19px; border-radius: 8px; background: #eaf0e1; border: 1px solid #dfe7d3; }.about-community h2 { font-size: 25px; font-weight: 450; letter-spacing: -.7px; line-height: 1.15; margin: 14px 0; }.about-community p { margin: 0; font-size: 11px; line-height: 1.9; color: #68795b; }.community-stats { display: flex; gap: 30px; margin-top: 23px; padding-top: 18px; border-top: 1px solid #d5dfc8; }.community-stats strong { display: block; font-size: 23px; font-weight: 450; }.community-stats span { display: block; margin-top: 5px; font-size: 9px; color: #70815f; }.community-guidelines { margin: 26px 5px 0; }.community-guidelines > .section-index { font-size: 8px; letter-spacing: 1px; }.community-guidelines ol { padding-left: 17px; margin: 18px 0; }.community-guidelines li { padding-left: 4px; font-size: 11px; line-height: 1.8; color: #647459; margin-bottom: 12px; }.community-guidelines p { font-size: 10px; line-height: 1.8; color: #748168; }.community-guidelines a { font-size: 10px; color: #526d3d; line-height: 1.8; text-decoration: underline; text-underline-offset: 3px; }
.back-to-topics { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #647a50; padding: 7px 0 19px; }.back-to-topics:hover { text-decoration: underline; }.thread-card { padding: 25px; }.thread-card .topic-title { font-size: 26px; line-height: 1.3; letter-spacing: -.7px; margin: 20px 0; }.thread-body { font-size: 14px; line-height: 1.95; color: #596a50; white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 26px; }.feedback-section { padding-top: 27px; }.feedback-heading { font-size: 20px; font-weight: 500; letter-spacing: -.4px; margin: 0 0 20px; }.feedback-count { font-size: 13px; color: #7c8b6f; font-weight: 400; margin-left: 6px; }.feedback-form { background: #f0f4e9; padding: 19px; border: 1px solid #dce5d1; border-radius: 8px; }.feedback-form label { display: block; font-size: 11px; margin: 0 0 8px; font-weight: 600; }.feedback-form input { margin-bottom: 15px; }.feedback-form textarea { min-height: 100px; }.feedback-form .feedback-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; }.feedback-form .button { min-height: 40px; padding: 10px 15px; font-size: 11px; flex-shrink: 0; }.feedback-form-note { font-size: 10px; color: #6f7e61; line-height: 1.6; }.posting-as { font-size: 11px; font-weight: 600; margin-bottom: 12px; overflow-wrap: anywhere; }
.feedback-form input, .feedback-form textarea, .community-dialog input, .community-dialog textarea, .community-dialog select { width: 100%; border: 1px solid #cdd9c0; background: #fefffc; color: var(--ink); border-radius: 5px; padding: 11px 12px; font-size: 13px; line-height: 1.55; }.feedback-form textarea, .community-dialog textarea { resize: vertical; }.feedback-form textarea::placeholder, .community-dialog input::placeholder, .community-dialog textarea::placeholder { color: #819076; }
.comments-list { margin-top: 23px; }.comment { margin-top: 18px; }.comment-content { border-top: 1px solid #e2e8d9; padding-top: 18px; }.comment-header { display: flex; gap: 9px; align-items: center; }.comment-avatar { width: 27px; height: 27px; font-size: 10px; }.comment-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 10px; color: #7a8870; }.comment-author { color: #485d3b; font-weight: 600; overflow-wrap: anywhere; }.comment-body { font-size: 12px; line-height: 1.9; color: #5d6f53; white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 4px 36px; }.comment-actions { display: flex; gap: 16px; margin-left: 36px; }.comment-actions .remove-link { margin-left: 0; }.comment-children { border-left: 1px solid #d7e1cb; padding-left: 16px; margin: 7px 0 0 12px; }.comment.deleted .comment-body { font-style: italic; color: #819076; }.reply-host { margin: 12px 0 0 36px; }.reply-host .feedback-form { padding: 14px; }.reply-context { font-size: 12px; margin: 0 0 12px; font-weight: 600; }.no-feedback { font: italic 15px Georgia, serif; text-align: center; color: #7c8b6e; padding: 26px 10px; line-height: 1.7; }
.community-dialog { border: 1px solid #d5dfca; border-radius: 13px; background: #f9fbf5; padding: 27px 30px 28px; color: var(--ink); width: min(580px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; box-shadow: 0 25px 100px #1c352c35; }.community-dialog::backdrop { background: #1f392e72; backdrop-filter: blur(4px); }.dialog-top { display: flex; justify-content: space-between; align-items: center; }.dialog-top .section-index { font-size: 8px; }.icon-button { width: 30px; height: 30px; border: 1px solid #d6dfcc; background: none; border-radius: 50%; font-size: 21px; line-height: 1; color: #6e7e60; padding: 0; }.icon-button:hover { background: #e6eddc; }.community-dialog h2 { font-size: 31px; font-weight: 450; letter-spacing: -1px; margin: 16px 0 12px; }.dialog-description { font-size: 13px; line-height: 1.8; color: #6b7d5e; margin: 0 0 23px; }.community-dialog form > label { display: block; margin: 17px 0 8px; font-size: 11px; font-weight: 600; }.field-help { font-size: 10px; color: #6f805f; line-height: 1.8; margin: 7px 0 0; }.posting-note { font-size: 10px; line-height: 1.8; color: #718263; margin: 10px 0 0; }.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 23px; }.dialog-actions .button { font-size: 12px; min-height: 43px; padding: 10px 16px; }.small-dialog { max-width: 460px; }.small-dialog h2 { font-size: 28px; }.form-error { color: #8b4336; font-size: 12px; line-height: 1.7; margin: 12px 0 0; }.toast { position: fixed; z-index: 20; left: 50%; bottom: 28px; transform: translateX(-50%); background: #253e32; color: #fbfdf7; border-radius: 8px; padding: 14px 20px; max-width: min(470px, calc(100% - 32px)); width: max-content; font-size: 12px; line-height: 1.7; box-shadow: 0 8px 30px #253e3228; }.noscript-notice { padding: 20px; background: #eef2e6; text-align: center; }
@media (min-width: 1600px) { .community-intro { padding-block: 62px; }.community-layout { grid-template-columns: 190px minmax(0,1fr) 235px; gap: 32px; } }
@media (max-width: 1150px) { .community-layout { grid-template-columns: 170px minmax(0,1fr); gap: 25px; }.community-notes { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 25px; margin-left: 195px; }.community-guidelines { margin-top: 7px; }.community-intro { gap: 30px; grid-template-columns: 1.4fr 1fr; }.art-word { padding: 17px; font-size: 22px; }.art-word-one { left: 24px; }.art-word-two { right: 15px; }.intro-invitation { font-size: 12px; }.conversation-art { height: 245px; }.orbit-one { left: 5px; }.orbit-two { right: -10px; } }
@media (max-width: 800px) { .community-intro { grid-template-columns: 1fr; padding-block: 35px; gap: 0; }.community-intro h1 { font-size: clamp(39px,6.5vw,56px); }.conversation-art { display: none; }.community-intro p { max-width: 550px; }.community-layout { grid-template-columns: minmax(0,1fr); gap: 24px; padding-top: 20px; }.community-sidebar { padding: 0; }.category-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; margin: 13px 0 0; gap: 7px; }.category-button { flex-shrink: 0; width: auto; white-space: nowrap; gap: 9px; padding: 9px 12px; border-color: #dce4d2; }.my-topics-button { width: auto; display: inline-flex; gap: 18px; border: 0; padding: 8px 4px; font-size: 11px; }.identity-card { display: inline-flex; border: 0; padding: 6px 0; margin-left: 20px; vertical-align: middle; }.identity-card .identity-avatar { width: 26px; height: 26px; font-size: 10px; }.identity-card #identity-name { display: inline; font-size: 10px; }.identity-card .text-button { padding: 0; margin-left: 8px; font-size: 10px; }.identity-note { display: none; }.community-notes { margin: 0; grid-column: auto; padding-top: 5px; grid-template-columns: 1fr 1.25fr; }.community-guidelines { margin: 5px 0 0; }.feed-toolbar { padding-block: 15px; }.community-page .site-header nav { gap: 18px; }.community-page .brand { font-size: 19px; }.community-page .nav-launch { font-size: 11px; gap: 10px; padding: 10px 13px; }.community-page .nav-community { font-size: 12px; } }
@media (max-width: 480px) { .community-intro .eyebrow { font-size: 8px; letter-spacing: 1.2px; }.community-intro h1 { font-size: 39px; letter-spacing: -1.6px; }.community-intro h1 em { letter-spacing: -1.7px; }.community-intro p { font-size: 13px; }.intro-actions { gap: 12px; flex-wrap: wrap; margin-top: 22px; }.intro-invitation { font-size: 12px; }.community-page .site-header nav { gap: 12px; }.community-page .brand { font-size: 17px; gap: 7px; }.community-page .brand-mark { width: 29px; height: 29px; }.community-page .nav-launch { font-size: 10px; padding: 9px; gap: 6px; }.community-page .nav-community { font-size: 11px; }.community-notes { grid-template-columns: 1fr; gap: 20px; }.about-community { padding: 22px; }.about-community h2 br { display: none; }.about-community h2 { font-size: 26px; }.about-community p { max-width: 300px; font-size: 12px; }.community-stats { gap: 36px; }.community-guidelines { padding-inline: 5px; }.community-guidelines li { font-size: 12px; }.community-guidelines p, .community-guidelines a { font-size: 11px; }.identity-card { margin-left: 12px; }.identity-card .identity-avatar { display: none; }.topic-search { gap: 8px; padding-inline: 11px; }.topic-search input { font-size: 11px; }.topic-search button { font-size: 9px; padding-inline: 7px; }.sort-button { padding-inline: 9px; font-size: 10px; }.result-count { font-size: 9px; }.topic-card { padding: 18px 17px 14px; }.topic-title { font-size: 17px; }.topic-actions { gap: 13px; }.action-link { font-size: 10px; }.empty-state { padding: 28px 18px 22px; }.empty-state h2 { font-size: 24px; }.thread-card { padding: 20px 17px; }.thread-card .topic-title { font-size: 24px; }.thread-body { font-size: 13px; }.feedback-form { padding: 16px; }.feedback-form-actions { align-items: flex-start !important; }.feedback-form-note { max-width: 150px; }.comment-children { padding-left: 10px; margin-left: 5px; }.comment-body { margin-left: 0; font-size: 12px; }.comment-actions { margin-left: 0; }.reply-host { margin-left: 0; }.community-dialog { padding: 21px; }.community-dialog h2 { font-size: 28px; }.community-dialog input, .community-dialog textarea, .community-dialog select, .feedback-form input, .feedback-form textarea { font-size: 16px; }.community-dialog textarea { font-size: 14px; }.dialog-description { font-size: 12px; }.community-page .site-footer { margin-top: 0; }.thread-card .topic-actions { gap: 10px; }.thread-card .action-link { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .topic-card { transition: none; } }
@media (max-width: 380px) { .community-page .site-header nav { gap: 10px; }.community-page .site-header .brand { font-size: 15px; gap: 6px; }.community-page .site-header .brand-mark { width: 25px; height: 25px; }.community-page .site-header .nav-launch { font-size: 9px; padding: 8px; gap: 5px; }.community-page .site-header .nav-community { font-size: 10px; }.identity-card #identity-name { max-width: 100px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }.community-intro h1 { font-size: 36px; } }