:root {
  --ink:#192f38; --muted:#6a777a; --navy:#102b35; --navy-deep:#0b2029;
  --gold:#e8bd72; --gold-hover:#f2cd8e; --teal:#205b67; --teal-hover:#174651;
  --paper:#fcfbf7; --line:#e6e7df; --soft:#f2f3ed; --danger:#9e3539;
  --sidebar:244px; --topbar:76px; --banner:0px; --radius:13px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none; color:var(--ink); font-size:14px; line-height:1.55;
  background:#163847;
}
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:linear-gradient(110deg,rgba(11,34,44,.8),rgba(12,45,59,.53)),url('../assets/sea-ship.webp') center center/cover fixed; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(220,233,232,.035); pointer-events:none; }
body.is-demo { --banner:32px; }
body:has(dialog[open]) { overflow:hidden; }
a { color:inherit; text-decoration:none; }
a,button,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
button { border:0; background:none; color:inherit; }
button:disabled { cursor:wait; opacity:.6; }
img { max-width:100%; display:block; }
svg { flex-shrink:0; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.22; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
h1 { font-size:2.55rem; letter-spacing:-.6px; }
h2 { font-size:1.7rem; letter-spacing:-.3px; }
h3 { font-size:1.25rem; }
p { margin-bottom:1em; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #ce9650; outline-offset:4px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.icon { width:19px; height:19px; vertical-align:middle; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:43px; padding:10px 18px; border:1px solid transparent; border-radius:7px; font-size:.9rem; line-height:1.3; font-weight:650; transition:background .15s,transform .15s; }
.button:hover { transform:translateY(-1px); }
.button.primary { background:var(--teal); color:#fff; }
.button.primary:hover { background:var(--teal-hover); }
.button.gold { background:var(--gold); color:#2c3027; box-shadow:0 1px 3px #0001; }
.button.gold:hover { background:var(--gold-hover); }
.button.parchment { background:#f8f3e5; color:var(--ink); border-color:#f7edda60; }
.button.parchment:hover { background:#fff; }
.button.subtle { background:#f1f3ed; border-color:#dde2d9; color:var(--teal); }
.button.subtle:hover { background:#e6eae1; }
.button.ghost { color:var(--teal); }
.button.ghost:hover { background:#205b670b; }
.button.ghost.light { color:#f7f3e7; }
.button.danger { background:#f7e7e5; color:#9b3038; border-color:#eacbca; }
.button.danger:hover { background:#f0d6d4; }
.button.small { min-height:35px; padding:7px 12px; font-size:.83rem; gap:6px; }
.button.full { width:100%; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:8px; border-radius:6px; color:var(--muted); }
.icon-button:hover { background:#183d4810; color:var(--ink); }
.skip-link { position:fixed; top:-80px; left:16px; z-index:200; padding:10px 18px; background:white; color:var(--ink); border-radius:6px; }
.skip-link:focus { top:40px; }
.preview-banner { height:var(--banner); position:fixed; inset:0 0 auto; z-index:40; background:#e7d9b9; color:#413c30; font-size:.76rem; padding:0 24px; display:flex; align-items:center; justify-content:center; gap:30px; border-bottom:1px solid #152c3720; }
.preview-banner>span { display:flex; align-items:center; gap:9px; }
.preview-banner .icon { width:14px; height:14px; }
.preview-banner strong { letter-spacing:1.4px; font-size:.67rem; }
.preview-banner button { display:flex; align-items:center; gap:4px; padding:3px 0; font-weight:650; border-bottom:1px solid #64533150; }
.sidebar { position:fixed; left:0; top:var(--banner); bottom:0; width:var(--sidebar); background:linear-gradient(150deg,rgba(16,42,51,.98),rgba(10,29,38,.98)); color:#c0cfd1; z-index:30; display:flex; flex-direction:column; padding:28px 18px 12px; overflow-y:auto; border-right:1px solid #ddebe316; scrollbar-width:thin; scrollbar-color:#527078 transparent; }
.brand { padding:0 20px 28px; display:block; }
.brand img { width:174px; height:auto; margin:0 auto 9px; }
.brand>span { font-size:.6rem; letter-spacing:3.6px; color:#beccca; display:block; text-align:center; }
.nav-section { padding:17px 0 12px; border-top:1px solid #bccfc719; }
.nav-label { display:block; font-size:.64rem; letter-spacing:1.45px; font-weight:700; color:#8fa6ab; margin:0 12px 9px; }
.nav-label-row { display:flex; align-items:center; justify-content:space-between; }
.nav-label a { opacity:.8; }
.nav-label a .icon { width:15px; height:15px; }
.nav-link { min-height:40px; padding:10px 12px; display:flex; align-items:center; gap:13px; color:#b8cbcd; border-radius:7px; margin:3px 0; font-size:.88rem; position:relative; transition:background .15s; }
.nav-link .icon { width:18px; height:18px; opacity:.8; }
.nav-link:hover { background:#bddeca0c; color:#fff; }
.nav-link.active { background:linear-gradient(90deg,#deb77224,#deb77211); color:#f1d295; }
.nav-link.active::before { content:""; position:absolute; height:20px; width:3px; left:0; border-radius:2px; background:var(--gold); }
.nav-link.active .icon { opacity:1; }
.nav-link.crew-nav { font-size:.8rem; gap:12px; min-height:36px; padding-top:8px; padding-bottom:8px; }
.nav-empty { font-size:.8rem; color:#90a7aa; margin:4px 12px 10px; }
.nav-bottom { margin-top:auto; padding-top:20px; }
.nav-bottom>.nav-link { font-size:.79rem; }
.captain-card { margin-top:12px; padding:14px 3px 4px; display:flex; align-items:center; gap:10px; border-top:1px solid #bccfc725; }
.captain-card>span:nth-child(2) { flex:1; min-width:0; }
.captain-card strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.8rem; color:#e8ece6; font-weight:600; }
.captain-card small { display:block; font-size:.68rem; color:#8fa8af; overflow:hidden; text-overflow:ellipsis; }
.captain-card>.icon { width:16px; }
.nav-copyright { color:#8ba1a6; font-size:.59rem; text-align:center; margin:14px 0 0; }
.topbar { height:var(--topbar); top:var(--banner); position:fixed; left:var(--sidebar); right:0; z-index:25; background:rgba(17,45,57,.88); backdrop-filter:blur(18px); border-bottom:1px solid #a8c7c72b; display:flex; align-items:center; justify-content:space-between; padding:0 35px; gap:20px; }
.search-box { display:flex; align-items:center; gap:12px; width:min(460px,50%); border:1px solid #b2cfcd26; color:#b7c6c8; background:#051a2238; border-radius:8px; padding:10px 14px; }
.search-box input { width:100%; min-width:0; background:none; color:#f4f4e9; border:0; outline:none; font-size:.84rem; }
.search-box input::placeholder { color:#b3c3c7; opacity:.85; }
.search-box input:focus-visible { outline:none; }
.search-box:focus-within { border-color:var(--gold); }
.search-box .icon { width:17px; height:17px; }
.search-box kbd { border:1px solid #b2cfcd40; width:21px; text-align:center; border-radius:4px; font-size:.7rem; color:#94afb6; }
.topbar-actions { display:flex; align-items:center; gap:20px; }
.header-avatar { padding:3px; border:1px solid #d8e3d23b; border-radius:50%; }
.mobile-menu,.mobile-brand { display:none; }
.avatar { width:34px; height:34px; border-radius:50%; background:#ece7d6; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; border:1px solid #153f3712; padding:7px; }
.avatar img { max-width:100%; max-height:100%; object-fit:contain; }
.avatar-parrot { background:#d4e8e5; padding:5px; }
.avatar-skull { background:#e7ddc4; padding:7px; }
.avatar-monkey { background:#ebded0; padding:5px; }
.avatar-treasure { background:#e5e7cf; padding:6px; }
.avatar.avatar-lg { width:108px; height:108px; padding:21px; border:6px solid white; box-shadow:0 2px 15px #172c3110; }
.workspace { margin-left:var(--sidebar); padding:calc(var(--banner) + var(--topbar) + 30px) 34px 50px; outline:none; }
#page { max-width:1380px; margin:0 auto; }
.hero { min-height:315px; position:relative; display:flex; align-items:center; border-radius:var(--radius); overflow:hidden; color:#fff9e9; background:url('../assets/sea-ship.webp') 60% 48%/cover; box-shadow:0 8px 26px #051c3933; border:1px solid #d6e6d62b; margin-bottom:28px; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,35,44,.9),rgba(12,44,57,.68) 37%,rgba(10,43,55,.08) 78%),linear-gradient(0deg,#0523324d,transparent 45%); }
.hero-copy { position:relative; z-index:1; padding:30px 40px 34px; max-width:620px; }
.hero-eyebrow { display:block; font-size:.66rem; letter-spacing:2px; font-weight:650; color:#e0c99e; margin:0 0 14px; }
.hero-copy h1 { font-size:3.55rem; margin:0 0 14px; line-height:1.07; color:#fff8e8; letter-spacing:-.9px; }
.hero-copy p { color:#d5e4e2; font-size:.9rem; line-height:1.75; margin-bottom:20px; }
.hero-copy .button { min-height:40px; padding:10px 17px; font-size:.82rem; }
.hero-coordinate { position:absolute; right:23px; bottom:19px; font-size:.53rem; color:#f5eee0; letter-spacing:1.8px; display:flex; align-items:center; gap:9px; text-shadow:0 1px 4px #012635; }
.hero-coordinate .icon { width:16px; height:16px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 276px; gap:24px; align-items:start; }
.main-column { min-width:0; }
.paper { background:rgba(253,252,248,.975); border:1px solid #f6f6ef55; border-radius:var(--radius); box-shadow:0 8px 24px #041e3220; overflow:hidden; }
.feed-heading { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:27px 27px 20px; }
.section-eyebrow { color:#8b744a; font-weight:650; font-size:.65rem; letter-spacing:1.6px; margin-bottom:7px; }
.feed-heading h1,.feed-heading h2 { margin:0 0 6px; font-size:1.85rem; }
.feed-heading p { margin:0; color:var(--muted); font-size:.83rem; }
.feed-heading>span { font-size:.8rem; color:var(--muted); }
.live-marker { flex-shrink:0; display:flex; align-items:center; gap:5px; color:var(--muted); font-size:.67rem!important; padding:5px 8px; border:1px solid #e0e7df; border-radius:5px; }
.live-marker .icon { width:13px; height:13px; color:var(--teal); }
.feed-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); border-top:1px solid var(--line); background:#f6f7f1; padding:0 26px; min-height:48px; }
.feed-tabs { display:flex; align-self:stretch; align-items:stretch; gap:23px; }
.feed-tab { display:flex; align-items:center; position:relative; color:var(--muted); font-size:.79rem; font-weight:500; padding:14px 0; white-space:nowrap; }
.feed-tab.selected { color:var(--teal); font-weight:700; }
.feed-tab.selected::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--teal); }
.sort-control { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:.76rem; min-width:0; }
.sort-control>.icon { width:14px; height:14px; }
.sort-control select { max-width:154px; background:none; color:var(--ink); padding:7px 1px; border:0; font-size:.76rem; cursor:pointer; }
.simple-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 26px; border-block:1px solid var(--line); color:var(--muted); font-size:.8rem; background:#f6f7f1; }
.post-list { background:rgba(255,255,255,.2); }
.post-card { padding:24px 26px 19px; border-bottom:1px solid var(--line); transition:background .15s; }
.post-card:last-child { border-bottom:0; }
.post-card:hover { background:#fffefb; }
.post-meta { display:flex; align-items:center; gap:8px; font-size:.69rem; color:var(--muted); margin-bottom:11px; min-width:0; flex-wrap:wrap; }
.author-link { display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.author-link>span:not(.avatar) { font-weight:650; }
.author-link:hover { color:var(--teal); text-decoration:underline; }
.post-meta .avatar { width:26px; height:26px; padding:5px; }
.meta-dot { color:#a7b0ab; display:inline-block; margin:0 2px; }
.crew-tag { display:inline-flex; align-items:center; gap:5px; color:#426b68; background:#e9eee6; border:1px solid #d7e1d64d; border-radius:5px; font-size:.63rem; padding:3px 7px; font-weight:550; }
.crew-tag:hover { background:#dee7d9; }
.crew-tag .icon { width:12px; height:12px; }
.post-meta .crew-tag { margin-left:auto; }
.post-title { display:inline-block; color:var(--ink); }
.post-title h3 { font-size:1.27rem; line-height:1.4; margin:0 0 7px; font-weight:500; letter-spacing:-.2px; }
.post-title:hover { color:var(--teal); }
.post-excerpt { color:#69787b; font-size:.81rem; line-height:1.75; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.post-preview.with-thumbnail { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:20px; }
.post-thumbnail { width:100px; height:85px; border-radius:6px; object-fit:cover; margin:3px 0 14px; }
.post-actions { display:flex; align-items:center; gap:17px; min-height:29px; color:var(--muted); }
.reaction { display:inline-flex; align-items:center; gap:6px; min-height:29px; border-radius:5px; font-size:.71rem; padding:3px 5px; white-space:nowrap; }
.reaction .icon { width:16px; height:16px; }
.reaction strong { font-weight:650; }
.reaction:hover { background:#e4eadd80; color:var(--teal); }
.reaction.is-on { background:#e8ebda; color:#6a5426; }
.post-menu { position:relative; margin-left:auto; }
.post-menu summary { display:flex; cursor:pointer; padding:3px 6px; color:#9aa3a0; border-radius:5px; list-style:none; }
.post-menu summary::-webkit-details-marker { display:none; }
.post-menu summary:hover,.post-menu[open] summary { background:#e7ebe1; color:var(--ink); }
.post-menu-items { position:absolute; right:0; bottom:31px; min-width:190px; z-index:5; padding:6px; background:white; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 20px #17343725; }
.post-menu-items button { width:100%; display:flex; align-items:center; gap:8px; text-align:left; padding:9px 8px; border-radius:4px; font-size:.8rem; color:var(--ink); }
.post-menu-items button:hover { background:var(--soft); }
.post-menu-items .icon { width:15px; height:15px; }
.right-rail { display:flex; flex-direction:column; gap:20px; }
.rail-card { background:rgba(249,250,243,.95); border:1px solid #fff7; border-radius:var(--radius); padding:25px 23px; overflow:hidden; }
.rail-card h3 { font-size:1.5rem; line-height:1.25; margin:10px 0 11px; }
.rail-card>p { font-size:.81rem; color:var(--muted); line-height:1.75; }
.suggested-crews { border-block:1px solid #dbe2d6; margin:20px 0 18px; }
.suggested-crew { display:flex; align-items:center; gap:9px; padding:13px 0; }
.suggested-crew+ .suggested-crew { border-top:1px solid #e0e6db; }
.suggested-crew>span:nth-child(2) { flex:1; min-width:0; }
.suggested-crew strong { display:block; font-size:.76rem; font-weight:650; line-height:1.5; }
.suggested-crew small { font-size:.64rem; color:var(--muted); }
.suggested-crew>.icon { margin-left:auto; color:#8b9e98; width:13px; height:13px; }
.suggested-crew:hover strong { color:var(--teal); }
.crew-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:#e8eadd; color:#61705a; border:1px solid #d3ddcb; border-radius:8px; flex-shrink:0; }
.crew-icon .icon { width:19px; height:19px; }
.text-link { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:650; color:var(--teal); }
.text-link .icon { width:15px; height:15px; }
.text-link:hover { text-decoration:underline; }
.code-card { position:relative; background:linear-gradient(120deg,#f4ead6ef,#eee6d3ed),url('../assets/parchment.webp') center/cover; padding-top:27px; }
.code-card h3 { margin:10px 0 15px; font-size:1.65rem; color:#4b513f; }
.code-card p { color:#727160; max-width:190px; }
.code-card .section-eyebrow { position:relative; z-index:1; color:#8c754e; }
.rail-compass { position:absolute; right:-41px; top:-21px; width:135px; height:135px; opacity:.09; transform:rotate(10deg); }
.rail-footer { padding:0 4px; color:#d2dfdf; font-size:.69rem; }
.rail-footer>a:hover { text-decoration:underline; }
.rail-footer>span { margin:0 9px; opacity:.6; }
.rail-footer p { margin:9px 0 5px; color:#b9cecf; font-size:.64rem; }
.rail-footer small { font-size:.58rem; color:#b9cecf; line-height:1.6; display:block; }
.page-heading { color:#f7f3e5; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:10px 0 28px; }
.page-heading .section-eyebrow { color:#dfc498; }
.page-heading h1 { margin:7px 0 10px; font-size:2.7rem; }
.page-heading p { color:#cbdcda; margin:0; }
.directory { padding:28px; }
.directory-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 25px; }
.directory-head h2 { margin:0; }
.search-inline { display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:8px 12px; border-radius:6px; background:#fff; }
.search-inline .icon { width:16px; color:var(--muted); }
.search-inline input { width:175px; padding:3px; border:0; outline:none; background:none; font-size:.8rem; }
.crew-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.crew-card { background:#fffefb; border:1px solid #e1e5db; border-radius:9px; padding:24px; display:flex; flex-direction:column; }
.crew-icon.large { width:48px; height:48px; margin-bottom:18px; border-radius:10px; }
.crew-icon.large .icon { width:25px; height:25px; }
.crew-card:nth-child(3n+2) .crew-icon { background:#e4ece8; color:#42746d; border-color:#d7e3df; }
.crew-card:nth-child(3n) .crew-icon { background:#f1e8d5; color:#926f42; border-color:#e8dbc2; }
.crew-card h3 { font-size:1.6rem; margin-bottom:10px; }
.crew-card h3:hover { color:var(--teal); }
.crew-card p { font-size:.87rem; color:var(--muted); }
.crew-card-footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:17px; }
.crew-card-footer>span { font-size:.71rem; color:var(--muted); }
.crew-banner { border:1px solid #dae2ca3a; background:linear-gradient(125deg,#173d46e8,#133a46b0),url('../assets/sea-ship.webp') center/cover; border-radius:var(--radius); padding:33px; margin-bottom:26px; display:flex; align-items:center; gap:23px; color:#edece0; }
.crew-banner>div { flex:1; }
.crew-banner .hero-eyebrow { margin:0 0 9px; }
.crew-banner h1 { margin:0 0 10px; }
.crew-banner p { color:#c3d7d6; font-size:.91rem; margin:0 0 12px; max-width:600px; }
.crew-banner>div>span { font-size:.76rem; color:#c9d8d3; }
.crew-icon.banner-icon { width:78px; height:78px; border-radius:15px; background:#ecdcb9; color:#61705a; border:1px solid #dcc9a1; }
.crew-icon.banner-icon .icon { width:39px; height:39px; }
.back-row { margin:0 0 20px; }
.back-link { display:inline-flex; align-items:center; gap:8px; color:#dce6df; font-size:.83rem; }
.back-link:hover { color:#fff; }
.back-link .icon { width:16px; }
.post-detail { padding:33px; margin-bottom:22px; }
.post-detail h1 { font-size:2.1rem; line-height:1.3; margin:18px 0; overflow-wrap:anywhere; }
.detail-author { display:flex; justify-content:space-between; gap:15px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:23px; margin-bottom:25px; }
.detail-author .author-link { font-size:.87rem; }
.detail-author .author-link>span>strong { display:block; font-weight:600; }
.detail-author small { display:block; font-size:.72rem; color:var(--muted); }
.detail-author>span { font-size:.72rem; color:var(--muted); text-align:right; }
.post-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:1rem; line-height:1.9; color:#344d54; margin-bottom:26px; }
.detail-image { width:100%; max-height:680px; object-fit:contain; border-radius:8px; background:#e8eeeb; margin:20px 0; }
.post-detail>.post-actions { border-top:1px solid var(--line); padding-top:20px; }
.replies-panel { padding:28px 31px 8px; }
.replies-panel h2 { font-size:1.55rem; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.count-bubble { display:inline-flex; align-items:center; justify-content:center; background:#e9ede3; color:#5b7262; font:600 .7rem ui-sans-serif,system-ui,sans-serif; border-radius:50%; min-width:24px; height:24px; }
.reply-form>label { display:block; font-size:.79rem; font-weight:600; margin-bottom:8px; }
.reply-form textarea { width:100%; border:1px solid #d8dfd6; padding:12px; border-radius:7px; resize:vertical; background:white; font-size:.88rem; color:var(--ink); }
.reply-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:10px 0 20px; }
.reply-footer>span { font-size:.68rem; color:var(--muted); }
.reply { display:flex; align-items:flex-start; gap:12px; border-top:1px solid var(--line); padding:23px 0 18px; }
.reply>.avatar { width:31px; height:31px; }
.reply-content { flex:1; min-width:0; }
.reply-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.74rem; min-height:28px; margin-bottom:5px; }
.reply-meta strong { font-weight:600; }
.reply-meta time { color:var(--muted); font-size:.68rem; }
.reply-meta .icon-button { width:25px; height:25px; min-width:25px; padding:5px; margin-left:auto; }
.reply-meta .icon-button+.icon-button { margin-left:-6px; }
.reply-meta .icon { width:14px; height:14px; }
.reply-content p { white-space:pre-wrap; color:#49616a; font-size:.87rem; line-height:1.8; overflow-wrap:anywhere; }
.quiet-replies { padding:23px 0 28px; text-align:center; color:var(--muted); font-size:.84rem; }
.profile-header { display:flex; align-items:flex-start; gap:24px; padding:32px; margin-bottom:25px; }
.profile-copy { flex:1; min-width:0; }
.profile-copy h1 { margin:0 0 6px; font-size:2.4rem; }
.profile-copy p { font-size:.88rem; color:var(--muted); margin:10px 0 14px; }
.profile-copy p.handle { font-size:.78rem; color:#8c998e; margin:0; }
.profile-stats { display:flex; flex-wrap:wrap; gap:18px; font-size:.74rem; color:var(--muted); }
.profile-stats strong { color:var(--ink); }
.profile-buttons { display:flex; flex-direction:column; gap:8px; }
.history-reply { padding:26px 30px; border-bottom:1px solid var(--line); }
.history-reply h3 { margin:5px 0 12px; font-size:1.3rem; }
.history-reply p { white-space:pre-wrap; color:#53686e; overflow-wrap:anywhere; }
.history-meta { display:flex; justify-content:space-between; gap:15px; font-size:.76rem; color:var(--muted); }
.history-meta a { display:flex; align-items:center; gap:6px; color:var(--teal); }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.settings-card { padding:29px; }
.settings-card>h2 { display:flex; align-items:center; gap:9px; }
.settings-card>p { color:var(--muted); font-size:.85rem; line-height:1.8; }
.settings-card h3 { margin:24px 0 13px; }
.avatar-choices { margin:18px 0 23px; padding:0; border:0; display:flex; flex-wrap:wrap; gap:10px; }
.avatar-choices legend { font-size:.79rem; font-weight:600; padding:0; margin-bottom:12px; }
.avatar-option { position:relative; display:flex; flex-direction:column; gap:6px; align-items:center; cursor:pointer; border:1px solid var(--line); border-radius:8px; padding:11px 9px 8px; min-width:61px; }
.avatar-option>span:last-child { font-size:.62rem; color:var(--muted); text-transform:capitalize; }
.avatar-option input { appearance:none; width:0; height:0; position:absolute; }
.avatar-option:has(input:checked) { border-color:#9c9a63; background:#efeee2; box-shadow:0 0 0 1px #9c9a6333; }
.avatar-option:has(input:focus-visible) { outline:3px solid #ce9650; outline-offset:2px; }
.account-fact { background:#f0f3ea; border:1px solid #e0e5d9; padding:16px; border-radius:7px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:24px 0; }
.account-fact>span:first-child { font-size:.75rem; color:var(--muted); width:100%; }
.account-fact strong { font-size:.85rem; word-break:break-all; }
.status-pill { display:inline-flex; background:#e3e9d8; color:#536c52; border-radius:4px; padding:3px 7px; font-size:.67rem; }
.demo-security { background:#f6f3e9; border:1px dashed #d8d3b8; border-radius:9px; padding:22px; margin-top:20px; }
.demo-security h3 { font-size:1.35rem; margin:16px 0 12px; }
.demo-security p { font-size:.83rem; color:var(--muted); }
.blocked-list>div { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); padding:10px 0; font-size:.82rem; }
.blocked-list>span { color:var(--muted); font-size:.8rem; }
.danger-zone { border-top:3px solid #caa19b; }
.report-card { padding:26px 30px; border-bottom:1px solid var(--line); }
.report-card p { overflow-wrap:anywhere; color:#4e676d; }
.report-actions { display:flex; gap:12px; align-items:center; }
.report-actions time { font-size:.72rem; margin-left:auto; color:var(--muted); }
.prose { max-width:800px; margin:16px auto 0; padding:45px 55px; }
.prose h1 { font-size:3rem; margin:15px 0; }
.prose h2 { font-size:1.6rem; margin:32px 0 13px; }
.prose p { color:#5e7379; font-size:.92rem; line-height:1.95; }
.prose .lede { font-size:1.18rem; font-family:Georgia,serif; color:#607573; }
.prose .button { margin-top:15px; }
.prose-mark { background:#e9e5d5; color:#7a7e5f; display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; margin-bottom:9px; }
.prose-mark .icon { width:27px; height:27px; }
.about-wordmark { width:210px; margin:10px 0 30px; }
.about-actions { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 25px; }
.recovery-card { max-width:530px; margin:35px auto; padding:40px; }
.recovery-card h1 { font-size:2.25rem; }
.recovery-card>p { color:var(--muted); }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:21px 25px; border-top:1px solid var(--line); font-size:.79rem; color:var(--muted); }
.empty-state { text-align:center; padding:55px 28px; }
.empty-state>.icon { width:41px; height:41px; color:#8c997d; margin-bottom:18px; }
.empty-state h3 { font-size:1.7rem; margin-bottom:12px; }
.empty-state p { color:var(--muted); max-width:380px; margin:0 auto 21px; font-size:.9rem; }
.auth-needed { max-width:680px; margin:45px auto; }
.notice { display:flex; align-items:center; gap:10px; color:#546967; background:#eef2e8; border:1px solid #dfe7d9; padding:13px 15px; font-size:.82rem; border-radius:7px; margin:16px 0; }
.notice.warning { background:#f8edde; color:#7b582e; border-color:#edddc7; }
.loading-state { padding:70px 20px; text-align:center; display:flex; align-items:center; justify-content:center; gap:15px; color:#f4f3e8; font-size:.95rem; }
.spinner { width:20px; height:20px; border:2px solid #c0d8d240; border-top-color:#e4ce98; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.error-page { padding:42px; max-width:650px; margin:30px auto; }
.error-page>.icon { color:#967c48; width:34px; height:34px; margin-bottom:18px; }
.error-page p { color:var(--muted); }
.filter-empty { padding:25px 0; color:var(--muted); text-align:center; }
/* Dialogs are native, so keyboard focus is trapped and Escape works without a custom trap. */
dialog { border:1px solid #f8f5e0aa; padding:0; border-radius:13px; background:var(--paper); color:var(--ink); width:min(510px,calc(100% - 32px)); max-height:calc(100dvh - 50px); overflow:auto; box-shadow:0 25px 100px #001c3870; }
dialog::backdrop { background:#071f2cd1; backdrop-filter:blur(5px); }
dialog.wide { width:min(730px,calc(100% - 32px)); }
#modal-content { padding:28px 31px 30px; }
.modal-heading { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; padding-bottom:17px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.modal-heading h2 { margin:4px 0 0; font-size:1.85rem; }
.modal-heading .section-eyebrow { font-size:.57rem; }
.modal-heading .icon-button { flex-shrink:0; margin-top:-5px; }
#modal-content>p { color:var(--muted); font-size:.9rem; }
.field { display:flex; flex-direction:column; gap:8px; font-size:.82rem; font-weight:600; margin:0 0 17px; }
.field input,.field textarea,.field select { width:100%; border:1px solid #d8dfd6; background:#fffefa; border-radius:6px; padding:11px 12px; font-weight:400; color:var(--ink); font-size:.9rem; min-width:0; }
.field input::placeholder,.field textarea::placeholder { color:#94a29c; }
.field textarea { resize:vertical; line-height:1.7; }
.field input:focus,.field textarea:focus,.field select:focus { outline:2px solid #8caa9577; outline-offset:1px; border-color:#8caa95; }
.field-help { color:var(--muted); font-size:.72rem; margin:-6px 0 18px; }
.checkbox-label { display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:.77rem; color:var(--muted); margin:14px 0 20px; }
.checkbox-label input { accent-color:var(--teal); margin-right:5px; }
.checkbox-label a { color:var(--teal); text-decoration:underline; }
.form-error { color:#90383c; background:#f8eae5; border:1px solid #eed5ce; border-radius:5px; padding:10px 13px; font-size:.83rem; margin:15px 0; }
.auth-links { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:18px 0; }
.auth-links button,.modal-foot button { font-size:.78rem; color:var(--teal); font-weight:600; padding:0; }
.auth-links button:hover,.modal-foot button:hover { text-decoration:underline; }
.modal-foot { text-align:center; border-top:1px solid var(--line); padding-top:19px; margin-top:23px; font-size:.8rem; color:var(--muted); }
.demo-welcome { text-align:center; }
.demo-welcome>.crew-icon { margin:0 auto 20px; }
.demo-welcome>p { color:var(--muted); font-size:.92rem; line-height:1.8; }
.demo-welcome .notice { text-align:left; font-size:.81rem; }
.confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px; }
.upload-picker { display:flex; position:relative; flex-wrap:wrap; align-items:center; gap:12px; padding:14px; border:1px dashed #cfd8c9; border-radius:7px; background:#f0f3ea; margin:4px 0 19px; cursor:pointer; }
.upload-picker>.icon { color:#6c7d63; }
.upload-picker strong { display:block; font-size:.8rem; font-weight:600; }
.upload-picker small { display:block; font-size:.66rem; color:var(--muted); }
.upload-picker input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.upload-picker:has(input:focus-visible) { outline:3px solid #ce9650; outline-offset:2px; }
.attachment-name { font-size:.73rem; color:var(--teal); margin-left:auto; word-break:break-all; }
.composer-footer { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:24px; }
.composer-footer>span { font-size:.67rem; color:var(--muted); }
.composer-footer>span .icon { width:14px; height:14px; margin-right:4px; }
.composer-footer .button { flex-shrink:0; }
#mobile-nav { background:var(--navy); color:#c0cfd1; padding:25px 20px; margin:0; max-height:100dvh; height:100dvh; width:280px; border-radius:0; border:0; }
.mobile-close { position:absolute; right:8px; top:8px; color:#b7c9c9; }
#mobile-nav .brand { padding-top:25px; }
#toasts { position:fixed; bottom:24px; left:calc(var(--sidebar) + 28px); right:28px; z-index:150; display:flex; justify-content:center; pointer-events:none; }
.toast { max-width:640px; padding:14px 21px; border:1px solid #d9ddca; border-radius:9px; color:#eff6ec; background:#173f44f5; font-size:.86rem; box-shadow:0 10px 40px #08283950; }
.toast.toast-error { background:#7a3137f5; border-color:#e8bab4; }
.noscript { margin:100px auto; padding:40px; max-width:650px; background:var(--paper); }
@media(min-width:1700px) { :root { font-size:15px; --sidebar:260px; } .workspace { padding-inline:50px; } .hero { min-height:350px; } .content-grid { grid-template-columns:minmax(0,1fr) 300px; gap:28px; } }
@media(max-width:1280px) { :root { --sidebar:222px; font-size:13.5px; } .sidebar { padding-inline:14px; } .workspace { padding-inline:24px; } .topbar { padding-inline:24px; } .content-grid { grid-template-columns:minmax(0,1fr) 236px; gap:20px; } .rail-card { padding:23px 18px; } .hero { min-height:300px; } .hero-copy { padding-inline:30px; } .hero-copy h1 { font-size:3.3rem; } .feed-heading { padding-inline:22px; } .post-card { padding:22px 21px 17px; } .feed-toolbar { padding-inline:20px; } .feed-tabs { gap:16px; } .sort-control select { max-width:119px; } .live-marker { display:none; } .crew-card-footer { flex-wrap:wrap; } }
@media(max-width:1100px) { :root { --sidebar:210px; } .content-grid { grid-template-columns:minmax(0,1fr); } .right-rail { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .rail-footer { grid-column:1/-1; } .hero-coordinate { display:none; } .hero { min-height:290px; } .hero-copy h1 { font-size:3.15rem; } .post-title h3 { font-size:1.36rem; } .settings-grid { grid-template-columns:1fr; } .topbar-actions { gap:14px; } .page-heading h1 { font-size:2.35rem; } .crew-grid { gap:14px; } .crew-card { padding:21px; } }
@media(max-width:800px) { :root { --sidebar:0px; --topbar:67px; font-size:14px; } .sidebar { display:none; } .workspace { padding-top:calc(var(--banner) + var(--topbar) + 21px); padding-inline:22px; } .topbar { padding:0 20px; gap:12px; } .mobile-menu { display:inline-flex; color:#e1ece7; margin-left:-6px; } .mobile-brand { display:block; width:105px; flex-shrink:0; } .search-box { width:auto; flex:1; padding:8px 10px; margin-left:8px; } .search-box input { font-size:.8rem; } .search-box kbd { display:none; } .topbar-actions { gap:12px; } .topbar-actions>.button { padding:9px 12px; min-height:38px; } .topbar-actions>.button>span { display:none; } .topbar-actions>.button .icon { width:18px; height:18px; } .header-avatar .avatar { width:28px; height:28px; padding:5px; } .preview-banner { justify-content:space-between; padding-inline:18px; gap:10px; } .banner-detail { font-size:.69rem; } .preview-banner strong { font-size:.58rem; letter-spacing:1px; } .hero { min-height:295px; margin-bottom:23px; } .hero-copy { padding:28px 30px; } .hero-copy h1 { font-size:3.3rem; } .hero-shade { background:linear-gradient(90deg,#09232ce8,#0c2c398a 58%,#0a2b3726); } .hero-copy p { font-size:.9rem; } .page-heading { margin-top:4px; } #toasts { left:20px; right:20px; } }
@media(max-width:580px) { body.is-demo { --banner:36px; } .preview-banner { padding-inline:12px; gap:5px; font-size:.64rem; } .preview-banner .banner-detail { display:none; } .preview-banner strong { font-size:.62rem; } .preview-banner button { font-size:.67rem; } .preview-banner>span:after { content:"Local-only demo"; color:#625b49; font-size:.61rem; } .topbar { padding-inline:12px; gap:7px; } .mobile-brand { width:78px; } .search-box { margin-left:4px; padding:7px 9px; gap:6px; } .search-box input { font-size:.72rem; } .search-box input::placeholder { color:transparent; } .search-box:has(input:placeholder-shown) { max-width:38px; margin-left:auto; overflow:hidden; } .search-box:focus-within { max-width:unset!important; position:absolute; left:48px; right:115px; background:#173842; } .search-box:focus-within input::placeholder { color:#acbec0; } .search-box .icon { min-width:16px; } .topbar-actions { gap:9px; } .topbar-actions>.button { padding:7px 9px; min-height:34px; } .topbar-actions .button.ghost { font-size:.72rem; padding:7px; } .header-avatar { border:0; padding:0; } .workspace { padding-inline:12px; padding-top:calc(var(--banner) + var(--topbar) + 14px); padding-bottom:28px; } .hero { border-radius:10px; min-height:288px; background-position:59% center; margin-bottom:17px; } .hero-copy { padding:27px 24px; } .hero-eyebrow { font-size:.56rem; letter-spacing:1.4px; max-width:220px; line-height:1.8; margin-bottom:12px; } .hero-copy h1 { font-size:2.8rem; line-height:1.08; } .hero-copy p { font-size:.81rem; line-height:1.65; } .hero-copy .button { min-height:36px; font-size:.76rem; } .paper { border-radius:10px; } .feed-heading { padding:22px 18px 17px; } .feed-heading h1,.feed-heading h2 { font-size:1.75rem; } .feed-heading p { font-size:.76rem; } .section-eyebrow { font-size:.59rem; } .feed-toolbar { padding:0 16px; gap:5px; } .feed-tabs { gap:15px; } .feed-tab { font-size:.7rem; } .sort-control { font-size:.65rem; gap:0; } .sort-control>.icon { display:none; } .sort-control select { font-size:.67rem; max-width:91px; } .post-card { padding:20px 17px 15px; } .post-meta { gap:6px; font-size:.65rem; margin-bottom:11px; } .post-meta .avatar { width:23px; height:23px; padding:4px; } .post-meta .crew-tag { font-size:.55rem; max-width:126px; padding:3px 5px; } .crew-tag .icon { width:10px; height:10px; } .post-title h3 { font-size:1.22rem; line-height:1.45; margin-bottom:8px; } .post-excerpt { font-size:.77rem; -webkit-line-clamp:2; line-height:1.7; } .post-actions { gap:9px; } .reaction { font-size:.65rem; padding:2px 3px; gap:4px; } .reaction .icon { width:15px; height:15px; } .action-word { display:none; } .post-preview.with-thumbnail { grid-template-columns:minmax(0,1fr) 76px; gap:12px; } .post-thumbnail { width:76px; height:80px; } .right-rail { display:flex; gap:17px; } .rail-card { padding:24px; } .rail-card>p { max-width:290px; } .rail-footer { padding:0 9px; } .rail-card.code-card { display:none; } .page-heading { flex-direction:column; align-items:flex-start; gap:13px; padding:4px 6px; margin-bottom:19px; } .page-heading h1 { font-size:2.1rem; margin:9px 0 10px; } .page-heading p { font-size:.82rem; } .directory { padding:20px 16px; } .directory-head { display:block; margin-bottom:19px; } .directory-head h2 { font-size:1.6rem; margin-bottom:15px; } .search-inline { width:100%; } .search-inline input { width:100%; } .crew-grid { grid-template-columns:1fr; gap:15px; } .crew-card { padding:22px; } .crew-card h3 { font-size:1.5rem; } .crew-card-footer { flex-wrap:nowrap; gap:8px; } .crew-card-footer>span { font-size:.65rem; } .crew-card-footer .button { font-size:.76rem; } .crew-banner { padding:23px; flex-wrap:wrap; gap:16px; margin-bottom:18px; } .crew-banner>.banner-icon { width:53px; height:53px; border-radius:11px; } .crew-banner .banner-icon .icon { width:27px; height:27px; } .crew-banner>div { flex:1; min-width:190px; } .crew-banner h1 { font-size:1.9rem; } .crew-banner p { font-size:.82rem; } .crew-banner .hero-eyebrow { font-size:.52rem; } .crew-banner>.button { min-height:36px; font-size:.77rem; } .feed-heading>.button { font-size:.72rem; } .back-row { margin:2px 5px 15px; } .back-link { font-size:.75rem; } .post-detail { padding:23px 20px; } .post-detail h1 { font-size:1.75rem; } .detail-author { padding-bottom:20px; margin-bottom:19px; } .detail-author .author-link { font-size:.76rem; } .detail-author small { font-size:.65rem; } .detail-author>span { font-size:.65rem; } .post-body { font-size:.92rem; line-height:1.85; } .replies-panel { padding:24px 20px 4px; } .reply-footer { gap:8px; } .reply-footer>span { font-size:.6rem; max-width:140px; } .reply-footer .button { font-size:.75rem; min-height:37px; padding:9px 12px; } .reply-content p { font-size:.82rem; } .reply { gap:8px; } .reply-meta { gap:7px; font-size:.69rem; } .reply-meta time { font-size:.62rem; } .profile-header { padding:25px 20px; gap:16px; flex-wrap:wrap; } .avatar.avatar-lg { width:73px; height:73px; padding:13px; border-width:4px; } .profile-copy { min-width:150px; } .profile-copy h1 { font-size:1.9rem; } .profile-stats { gap:8px 13px; font-size:.69rem; } .profile-buttons { flex-direction:row; gap:8px; width:100%; } .profile-buttons .button { font-size:.78rem; } .settings-card { padding:25px 22px; } .avatar-choices { gap:6px; } .avatar-option { min-width:49px; padding:10px 6px 8px; } .avatar-option>span:last-child { font-size:.55rem; } .avatar-option .avatar { width:31px; height:31px; } .settings-card h2 { font-size:1.6rem; } .history-reply { padding:23px 20px; } .history-meta { font-size:.68rem; } .history-meta a .icon { width:13px; } .report-card { padding:24px 20px; } .report-actions { flex-wrap:wrap; } .report-actions time { width:100%; margin-left:0; } .prose { padding:32px 24px; margin:0; } .prose h1 { font-size:2.35rem; } .prose h2 { font-size:1.4rem; } .prose p { font-size:.87rem; } .recovery-card { padding:30px 24px; margin:10px 0; } .notice { font-size:.76rem; flex-wrap:wrap; } .pagination { padding:16px; font-size:.71rem; } .pagination .button { font-size:.71rem; padding:8px 12px; min-height:35px; } .error-page { padding:30px 24px; } .empty-state { padding:44px 22px; } .empty-state h3 { font-size:1.5rem; } .empty-state p { font-size:.83rem; } #modal-content { padding:23px 21px; } .modal-heading h2 { font-size:1.65rem; } .modal-heading .section-eyebrow { font-size:.52rem; } .modal-heading .icon-button { margin-right:-5px; } .field { font-size:.78rem; } .field input,.field textarea,.field select { font-size:16px; padding:10px 12px; } .composer-footer { flex-direction:column; align-items:stretch; gap:13px; } .composer-footer>.button { width:100%; } .upload-picker { gap:8px; } .upload-picker small { font-size:.59rem; } .attachment-name { width:100%; margin-left:27px; font-size:.66rem; } dialog { width:calc(100% - 22px); max-height:calc(100dvh - 24px); } .toast { font-size:.79rem; padding:12px 17px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition:none!important; scroll-behavior:auto!important; } }

/* Profiles and crew governance */
.avatar.avatar-photo {padding:0;overflow:hidden;background:#e5ded0;}
.avatar.avatar-photo img {width:100%;height:100%;object-fit:cover;}
.profile-photo-editor {display:flex;align-items:flex-start;gap:20px;padding:20px 0 28px;margin-bottom:24px;border-bottom:1px solid #dedbd0;}
.profile-photo-editor>div {flex:1;min-width:0;}
.profile-photo-editor .avatar-lg {flex-shrink:0;}
.profile-photo-editor input[type=file] {max-width:100%;}
.profile-photo-editor button {margin:4px 6px 4px 0;}
.crew-tools {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 24px;}
.moderation-stack {display:grid;gap:24px;}
.team-member {display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #dedbd0;}
.team-member>a {flex:1;min-width:0;overflow-wrap:anywhere;}
.team-member small {display:block;color:#607476;}
.team-member button {flex-shrink:0;}
.privacy-updated {font-size:.85rem;color:#63777b;}
.server-page {max-width:1000px;margin:30px auto;padding:20px;}
.server-nav {display:flex;flex-wrap:wrap;gap:16px;color:#fff;padding:15px 0;}
.server-dispatch {border-top:1px solid #d8d3c6;padding:20px 0;}
.public-avatar {width:128px;height:128px;object-fit:cover;border-radius:50%;}
@media(max-width:600px){.profile-photo-editor{flex-direction:column;}.team-member{flex-wrap:wrap;}.team-member button{margin-left:0;}.profile-photo-editor .field{width:100%;}.crew-tools .button{width:100%;justify-content:center;}}