/* PixelWW's shared HUD. Chrome fills the viewport; reading and conversation
   surfaces retain a useful measure. Worker-rendered pages load this file too. */
:root {
  --workspace-gutter: 28px;
  --bg: #111d26; --low: #0e1820; --panel: #192831; --panel2: #1f3039;
  --line: #34464c; --subtle: #34464c; --ink: #f0eadc; --muted: #b2c1c0;
  --soft: #889e9e; --cyan: #9fd7d1; --amber: #e9bf78; --gold-ink: #2b251c;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html { color-scheme: dark; scrollbar-gutter: stable; }
body { background: var(--bg); color: var(--ink); font: 400 15px/1.7 var(--font-body); }
body .site-shell { background: var(--bg); }
body .site-shell::before { display: none; }
body .section-wrap { width: min(1240px, calc(100% - 2 * var(--workspace-gutter))); margin-inline: auto; }
body :is(button, input, textarea, select) { font-family: var(--font-body); }
body :is(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
body .site-header-slot { position: sticky; top: 0; z-index: 50; height: 72px; }
body .site-header { position: relative; height: 72px; background: var(--bg); border: 0; border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: none; color: var(--ink); }
body .site-header::before, body .site-header::after { display: none; }
body .site-header .header-inner.section-wrap { width: 100%; max-width: none; height: 100%; margin: 0; padding-inline: var(--workspace-gutter); display: flex; align-items: center; gap: 36px; }
body .site-header .brand { gap: 12px; border: 0; background: none; padding: 0; min-height: 44px; text-decoration: none; flex-shrink: 0; }
body .site-header .brand-mark { width: 36px; height: 36px; border: 0; box-shadow: none; background: none; padding: 0; }
body .site-header .brand-mark img { width: 36px; height: 36px; }
body .site-header .brand-wordmark { display: block; font: 400 24px/1.1 var(--font-ui), sans-serif; letter-spacing: 0; text-shadow: none; color: var(--ink); }
body .site-header .brand-gold { color: var(--ink); }
body .site-header .brand-wordmark small { display: block; margin-top: 3px; font: 9px/1.8 var(--font-body); letter-spacing: .12em; color: var(--soft); }
body .site-header .main-nav { height: 100%; margin: 0; gap: 8px; border: 0; background: none; padding: 0; display: flex; align-items: center; flex-shrink: 0; border-radius: 0; box-shadow: none; }
body .site-header .main-nav a { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; font: 400 14px/1.5 var(--font-ui), sans-serif; border: 1px solid transparent; color: var(--muted); border-radius: 0; text-decoration: none; box-shadow: none; }
body .site-header .main-nav a small { font: 10px var(--font-body); color: var(--soft); }
body .site-header .main-nav a:hover { background: var(--panel); }
body .site-header .main-nav a.active { color: var(--cyan); background: var(--panel); border-color: var(--line); box-shadow: inset 0 -2px var(--cyan); }
body .site-header .main-nav a::after { display: none; }
body .site-header .header-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; min-width: 0; flex-shrink:0; }
body .site-header :is(.language-trigger, .studio-nav-toggle, .menu-button) { min-height: 44px; height: 44px; min-width: 44px; width: auto; padding: 8px; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--muted); font: 12px/1.4 var(--font-ui), sans-serif; display: flex; align-items: center; justify-content: center; gap: 2px; }
body .site-header .menu-button { display: none; }
body .site-header .language-control, body .header-account-wrap { position: relative; }
body .site-header .language-control { flex: none; padding-left: 12px; border-left: 1px solid var(--line); }
body .site-header .language-trigger { padding: 9px 12px; gap: 9px; border: 1px solid transparent; font: 13px/1.5 var(--font-body); color: var(--muted); }
body .site-header .language-trigger:hover, body .site-header .language-trigger[aria-expanded=true] { color: var(--ink); background: var(--panel); border-color: var(--line); }
body .site-header .language-trigger-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .site-header .language-trigger > svg { width: 18px; height: 18px; flex: none; color: var(--cyan); }
body :is(.language-chevron, .account-chevron) { display: flex; color: var(--soft); }
body :is(.language-chevron, .account-chevron) svg { width: 12px; height: 12px; }
body .site-header :is(.language-trigger, .header-account-button)[aria-expanded=true] :is(.language-chevron, .account-chevron) { transform: rotate(180deg); }
body .site-header :is(.header-account-menu, .language-panel) { position: absolute; top: calc(100% + 10px); right: 0; min-width: 224px; max-width: calc(100vw - 2 * var(--workspace-gutter)); background: var(--panel); border: 1px solid var(--line); border-radius: 0; padding: 8px; box-shadow: 6px 6px 0 #0a141a; z-index: 60; max-height: calc(100dvh - 94px); overflow: auto; color: var(--ink); }
body .site-header .language-panel { width: 260px; }
body .site-header .header-account-menu { width: 280px; }
body .header-account-menu :is(a, button), body .site-header .language-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; padding: 10px 12px; color: var(--ink); background: none; border: 0; font: 14px/1.5 var(--font-body); text-align: left; text-decoration: none; border-radius: 0; }
body .header-account-menu :is(a, button):hover, body .site-header .language-option:hover { background: var(--panel2); }
body .header-account-menu small { color: var(--soft); font-size: 11px; }
body .account-menu-caption, body .site-header .language-panel-title { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font: 12px/1.6 var(--font-body); color: var(--muted); overflow-wrap: anywhere; }
body .account-menu-caption { padding-block: 14px; }
body .account-menu-caption > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body .account-menu-caption strong { font: 500 14px/1.6 var(--font-body); color: var(--ink); }
body .account-menu-caption > small { display: block; margin-top: 5px; font-size: 11px; }
body .account-menu-state { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 10px; }
body .account-menu-state::before { content: ""; width: 4px; height: 4px; background: var(--soft); }
body .account-menu-state.is-member { color: #90d6ad; }
body .account-menu-state.is-member::before { background: currentColor; }
body .header-account-menu p { font-size: 12px; color: #f0a99a; padding: 0 12px; }
body .site-header .language-option.selected { color: var(--cyan); background: #253f45; }
body .site-header .language-option-label { display: grid; gap: 2px; }
body .site-header .language-option-label small { color: var(--soft); font-size: 11px; }
body .site-header .language-check { width: 16px; flex: none; color: var(--cyan); text-align: center; }
body .site-header .header-account-button { display: flex; align-items: center; gap: 9px; min-height: 44px; height: 44px; width:auto; flex-shrink:0; padding: 6px 12px 6px 7px; background: none; border: 1px solid var(--line); border-radius: 0; color: var(--ink); box-shadow: none; text-align: left; }
body .site-header .header-account-button:hover, body .site-header .header-account-button[aria-expanded=true] { background: var(--panel); border-color: #5f8180; }
body .site-header .header-account-button[data-session=out] { color: var(--amber); border-color: #6c6046; background: #e9bf7808; }
body .site-header .header-account-button[data-session=out]:hover { background: #e9bf7815; border-color: var(--amber); }
body .header-avatar { position: relative; width: 28px; height: 28px; flex-shrink: 0; background: none; display: grid; place-items: center; border: 0; border-radius: 0; font: 17px/1 var(--font-ui), sans-serif; color: inherit; }
body .header-avatar svg { width: 20px; height: 20px; }
body .header-avatar.is-member { background: #253f45; border: 1px solid #476565; color: var(--cyan); }
body .header-avatar.is-member::after { content: ""; position: absolute; width: 5px; height: 5px; bottom: -2px; right: -2px; background: #90d6ad; outline: 2px solid var(--panel); }
body .header-account-copy { display: block; min-width: 0; line-height: 1.5; font-size: 13px; }
body .header-account-copy strong { display: block; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .site-header .header-account-button[data-session=loading] .header-avatar { opacity: .5; }
body .site-header .header-account-button[data-session=error] .header-avatar { color: var(--amber); }
body .studio-header-slot { position: relative; height: 56px; flex: 0 0 56px; }
body .studio-nav-edge { position: fixed; top: 0; left: 0; right: 0; height: 9px; z-index: 51; }
body .site-header--studio { height: 56px; position: absolute; top: 0; left: 0; right: 0; z-index: 52; }
body .site-header--studio.site-header--expanded { height: 72px; box-shadow: 0 8px 24px #08131a55; }
body .site-header--studio:not(.site-header--expanded) :is(.main-nav, .menu-button) { display: none; }
body .studio-community-return { display: flex; align-items: center; gap: 10px; color: var(--muted); min-height: 44px; font: 12px var(--font-body); text-decoration: none; white-space: nowrap; }
body .studio-community-return img { image-rendering: pixelated; }
body .studio-community-return .studio-return-mobile { display:none; }
body .studio-header-document { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
body .studio-header-document strong { font-weight: 400; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .studio-header-document small { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; white-space: nowrap; color: var(--soft); }
body .studio-header-document i { width: 4px; height: 4px; background: var(--amber); }
body .studio-header-document i.saved { background: #90d6ad; }
/* Available service credits stay in the HUD, beside the account. */
body .site-header .header-credits { display:flex; align-items:center; gap:6px; min-height:44px; min-width:72px; max-width:170px; padding:6px 10px; border:1px solid #6c6046; background:#e9bf7808; color:var(--amber); font:12px/1.5 var(--font-body); text-decoration:none; white-space:nowrap; }
body .site-header .header-credits:hover { background:#e9bf7815; border-color:var(--amber); }
body .header-credit-symbol { font-size:12px; flex:none; }
body .header-credits strong { font:600 13px/1.5 var(--font-body); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; }
body .header-credits[data-wallet=error] { color:var(--soft); border-color:var(--line); }
@media(max-width:760px) {
 body .site-header .header-credits { max-width:110px; min-width:68px; padding-inline:8px; }
 body .site-header .header-credit-label { display:none; }
}
@media(max-width:540px) {
 body .site-header .header-inner.section-wrap { padding-inline:10px; gap:8px; }
 body .site-header .header-actions { gap:4px; }
 body .site-header .language-control { padding-left:4px; }
 body .site-header .header-account-copy, body .site-header .account-chevron { display:none; }
 body .site-header .header-account-button { width:44px; padding:7px; }
 body .studio-community-return { min-width:44px; justify-content:center; }
 body .studio-community-return span { display:none; }
}
body .site-header--expanded .studio-header-document { display: none; }

/* Pixel buttons, crisp frames, and readable text instead of body pixel fonts. */
body .button, body :is(.site-shell, .auth-page) .button { min-height: 44px; padding: 10px 18px; font: 400 14px/1.5 var(--font-ui), sans-serif; border-radius: 0; clip-path: none; box-shadow: 0 3px 0 var(--low); letter-spacing: 0; transition: transform .12s, box-shadow .12s; }
body .button:active, body :is(.site-shell, .auth-page) .button:active { transform: translateY(3px); box-shadow: none; }
body .button-primary, body :is(.site-shell, .auth-page) .button-primary { background: var(--amber); border: 1px solid var(--amber); color: var(--gold-ink); box-shadow: 0 4px 0 #725336; }
body .button-primary:hover, body :is(.site-shell, .auth-page) .button-primary:hover { background: #f0cd94; }
body .button-outline, body :is(.site-shell, .auth-page) .button-outline { background: var(--panel2); border: 1px solid var(--line); color: var(--ink); }
body .button-outline:hover, body :is(.site-shell, .auth-page) .button-outline:hover { background: #2b4147; border-color: #5f8180; }
body .page-main { padding-block: 34px 72px; background: none; min-height: calc(100dvh - 72px); }
body .page-head { margin-bottom: 28px; gap: 20px; }
body .page-head h1 { font: 400 30px/1.5 var(--font-ui), sans-serif; margin: 8px 0 12px; letter-spacing: 0; text-shadow: none; }
body .page-head p { color: var(--muted); font: 15px/1.85 var(--font-body); max-width: 65ch; }
body :is(.content-panel, .side-panel, .content-empty, .content-editor-aside, .content-metadata, .content-comment, .content-review, .community-panel, .community-art-draft-preview, .space-list-grid article, .content-shell input, .content-shell textarea, .content-shell select, .content-form fieldset, .content-topic-picker label, .content-tabs a, .content-tabs button, .content-tags a) { border-radius: 0; }
body :is(.content-panel, .side-panel) { background: var(--panel); border-color: var(--line); }
body .content-shell :is(input, textarea, select), body .text-input { background: var(--low); border-color: var(--line); color: var(--ink); font: 15px/1.75 var(--font-body); border-radius: 0; }
body .content-notice { border-radius: 0; }
body .footer { padding-block: 26px; border-color: var(--line); font: 12px/1.8 var(--font-body); color: var(--soft); }
body .footer-brand { color: var(--ink); }
body .footer a { min-height: 32px; display: inline-flex; align-items: center; }
body .content-body { font: 16px/1.95 var(--font-body); }

/* The three-column community remains a social feed on wide displays. */
body .community-app { --community-bg: var(--bg); --community-border: var(--line); }
body .community-layout { display: grid; width: min(1270px, 100%); max-width: 1270px; margin: auto; padding: 28px var(--workspace-gutter) 72px; grid-template-columns: 200px minmax(0, 1fr) 256px; gap: 24px; }
body .community-left, body .community-right { top: 100px; padding: 0; }
body .community-left { height: auto; min-height: 0; }
body .community-left nav :is(a, button) { font: 14px/1.5 var(--font-body); border-radius: 0; min-height: 44px; }
body .community-left nav .active { background: var(--panel); color: var(--cyan); box-shadow: inset 3px 0 var(--cyan); }
body .community-create { border-radius: 0; min-height: 44px; background: var(--amber); color: var(--gold-ink); font: 14px var(--font-ui), sans-serif; box-shadow: 0 4px 0 #725336; }
body .community-create:active { transform: translateY(3px); box-shadow: none; }
body .community-side-section { padding: 20px; background: var(--panel); border: 1px solid var(--line); }
body .community-side-section + .community-side-section { margin-top: 24px; }
body .community-side-heading h2 { font-size: 18px; }
body .community-space-mark, body .community-avatar { border-radius: 0; }
body .community-feed-heading { margin-top: 0; }
body .community-feed-heading h1 { font-size: 24px; }
body .community-feed > .community-search { border-radius: 0; min-height: 44px; }
body .community-feed-toolbar button { min-height: 44px; font-size: 14px; }
body .community-feed-filters button { border-radius: 0; font-size: 12px; min-height: 36px; }
body .community-post { border-radius: 0; box-shadow: 4px 4px 0 var(--low); border-color: var(--line); position: relative; }
body .community-post::before, body .community-post::after { content: ""; width: 5px; height: 5px; position: absolute; background: var(--amber); opacity: .7; pointer-events: none; }
body .community-post::before { top: -1px; left: -1px; }
body .community-post::after { bottom: -1px; right: -1px; }
body .community-post-header { padding: 22px 24px 0; }
body .community-post-copy { padding: 16px 24px; }
body .community-author strong { font-size: 13px; }
body .community-author > div > span { font-size: 11px; }
body .community-post-copy h2 { font: 500 18px/1.6 var(--font-body); }
body .community-post-copy p { font-size: 14px; line-height: 1.85; max-width: 70ch; }
body .community-post-image { border-radius: 0; margin-inline: 24px; padding: 0; height: auto; min-height: 160px; max-height: 360px; overflow: hidden; }
body .community-post-image img { width: 100%; max-height: 360px; object-fit: contain; }
body .community-post-footer { padding: 12px 24px; }
body .community-post-footer :is(a, button) { font-size: 13px; min-height: 40px; }
body .community-right-foot { margin-top: 24px; }
body .community-rail-caption { margin: 24px 12px; }
body .community-rail-bottom { margin-top: 32px; }
body .community-mobile-nav { display: none; }

/* Child pages carry only their own contextual controls. */
body .community-focused { width: min(850px, 100%); max-width: 850px; margin: auto; padding: 26px var(--workspace-gutter) 72px; min-height: calc(100dvh - 72px); }
body .community-focused--spaces { width: min(1180px, 100%); max-width: 1180px; }
body .community-focused .content-reader { max-width: none; }
body .community-focused .community-editor-panel .content-editor-layout { display: flex; flex-direction: column; gap: 28px; }
body .community-focused .content-editor-aside { width: 100%; }
body .community-focused .content-draft-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .community-focused :is(.content-save-bar, .space-chat-form) { bottom: 0; }
body .community-editor-heading { margin-bottom: 24px; }
body .community-editor-heading h1, body .community-reader h1 { font: 400 30px/1.5 var(--font-ui), sans-serif; }
body .community-editor-panel .content-form label { font-size: 14px; }
body .community-focused .content-form { gap: 22px; }
body .community-focused .content-form textarea[name=body] { min-height: 260px; }
body .community-focused .content-form textarea[name=summary] { min-height: 90px; }
body .community-spaces-panel .space-list-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body .community-focused--spaces .space-workspace { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 24px; }
body .community-focused--spaces .space-workspace > aside { position: sticky; top: 100px; margin: 0; padding: 18px; }
body .community-focused--spaces .space-channel-list { display: grid; gap: 5px; }
body .community-focused--spaces .space-channel-list a { font-size: 13px; border-radius: 0; padding: 11px 9px; }
body .space-conversation .space-toolbar h2 { margin: 0; font: 18px/1.5 var(--font-ui), sans-serif; }
body .space-chat-form { margin-top: 24px; }
body .space-chat-form textarea { min-height: 92px; max-height: 240px; }
body .space-conversation .content-comment { padding: 16px 20px; margin-bottom: 10px; }
body .space-conversation .content-comment p { font-size: 14px; line-height: 1.8; margin: 12px 0; }
body .space-conversation .content-card-meta { gap: 12px; }
body .space-conversation .community-avatar { height: 28px; width: 28px; font-size: 14px; }
body .space-conversation .content-card-meta time { font-size: 11px; color: var(--soft); }
body .community-focused--spaces .content-hero { gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
body .community-focused--spaces .content-hero h1 { font: 24px/1.5 var(--font-ui), sans-serif; }
body .community-focused--spaces .content-hero p { max-width: 65ch; }

/* Homepage keeps the original camp, with item-like gateways and official art. */
body .camp-hero { min-height: 480px; }
body .camp-hero-content { min-height: 480px; padding-block: 62px; }
body .camp-hero-shade { background: linear-gradient(90deg, #101c25f5 0%, #101c25df 26%, #101c2570 57%, #101c2522 100%), linear-gradient(0deg, #111d2666, transparent 45%); }
body .camp-hero h1 { font: 400 36px/1.6 var(--font-ui), sans-serif; letter-spacing: 0; margin: 16px 0 20px; max-width: 610px; text-shadow: 0 3px #0b151c66; }
body .camp-hero-copy > p { color: #d0dbd5; font: 15px/1.9 var(--font-body); max-width: 460px; }
body .camp-routes { background: var(--panel); border-color: var(--line); }
body .camp-routes .section-wrap { padding-block: 28px; gap: 38px; }
body .camp-route { min-height: 72px; }
body .camp-route-icon { border: 0; background: none; box-shadow: none; width: 52px; height: 52px; }
body .camp-route-icon img { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; }
body .camp-route strong { font: 18px/1.5 var(--font-ui), sans-serif; }
body .camp-route small { font: 12px/1.8 var(--font-body); color: var(--muted); }
body .camp-gallery { padding-block: 44px; }
body .camp-section-heading h2, body .camp-closing h2 { font: 24px/1.5 var(--font-ui), sans-serif; }
body .camp-section-heading p { font: 13px/1.8 var(--font-body); color: var(--muted); }
body .camp-art-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body .camp-artwork { box-shadow: none; background: none; border: 0; padding: 0; }
body .camp-art-image { aspect-ratio: 1; border: 1px solid var(--line); background: var(--panel); }
body .camp-art-caption { padding: 12px 0; }
body .camp-art-caption strong { font: 14px/1.7 var(--font-body); }
body .camp-format { background: var(--panel); border-color: var(--line); border-radius: 0; }
body .camp-format strong { font-family: var(--font-ui), sans-serif; font-size: 18px; }
body .camp-closing { background: var(--panel); border-color: var(--line); box-shadow: 4px 4px 0 var(--low); }
body .camp-closing p { font: 13px/1.8 var(--font-body); }

/* Personal content uses a bounded grid; settings use a single, usable form. */
body .camp-library .page-main { max-width: 1180px; }
body .library-grid, body .library-skeleton { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body .library-card, body .library-thumbnail { border-radius: 0; }
body .library-tabs button { min-height: 44px; border-radius: 0; font-size: 13px; }
body .library-card-title { font: 14px/1.7 var(--font-body); }
body .library-empty h2 { font: 24px/1.5 var(--font-ui), sans-serif; }
body .account-page .page-main { max-width: 850px; }
body .account-page .content-panel { padding: 28px; }
body .account-page .account-card { gap: 18px; }
body .account-page .account-card .auth-form { width: 100%; max-width: 540px; }
body .account-profile-form { display: grid; gap: 18px; max-width: 540px; padding-top: 24px; border-top: 1px solid var(--line); }
body .account-profile-form label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
body .account-profile-form textarea { min-height: 130px; resize: vertical; }
body .account-profile-form button { justify-self: start; }

@media (max-width: 1100px) {
  :root { --workspace-gutter: 22px; }
  body .site-header .header-inner.section-wrap { gap: 24px; }
  body .site-header .brand-wordmark small { display: none; }
  body .site-header .main-nav a { padding-inline: 12px; }
  body .community-layout { grid-template-columns: 180px minmax(0, 1fr); max-width: 1000px; }
  body .community-right { display: none; }
}
@media(max-width:1024px) {
  body .site-header .main-nav { display:none; position:absolute; top:100%; left:0; right:0; height:auto; padding:12px var(--workspace-gutter); background:var(--panel); border-bottom:1px solid var(--line); align-items:stretch; flex-direction:column; z-index:55; }
  body .site-header .main-nav.open { display:flex; }
  body .site-header .main-nav a { min-height:44px; justify-content:flex-start; }
  body .site-header .menu-button { display:flex; }
}
@media (max-width: 760px) {
  :root { --workspace-gutter: 18px; }
  body .site-header .header-inner.section-wrap { gap: 14px; }
  body .site-header .brand { gap: 8px; }
  body .site-header .brand-wordmark { font-size: 24px; }
  body .site-header .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: auto; padding: 12px var(--workspace-gutter); background: var(--panel); border-bottom: 1px solid var(--line); align-items: stretch; flex-direction: column; z-index: 55; }
  body .site-header .main-nav.open { display: flex; }
  body .site-header .main-nav a { min-height: 44px; justify-content: flex-start; }
  body .site-header .menu-button { display: flex; }
  body .site-header .header-actions { gap: 4px; }
  body .account-chevron, body .language-trigger-label, body .language-chevron { display: none; }
  body .site-header .language-control { padding-left: 6px; }
  body .site-header .language-trigger { width: 44px; padding: 8px; }
  body .site-header .header-account-button { padding: 6px 10px 6px 7px; }
  body .site-header .header-account-menu { right: -55px; }
  body .header-account-copy strong { max-width: 96px; }
  body .studio-header-document { margin-left: auto; max-width: 180px; }
  body .studio-header-document small { display: none; }
  body .studio-community-return { font-size: 11px; gap: 6px; }
  body .studio-community-return img { width: 24px; height: 24px; }
  body .site-header--studio:not(.site-header--expanded) .header-actions { margin-left: 0; }
  body .camp-routes .section-wrap { gap: 16px; grid-template-columns: 1fr; padding-block: 20px; }
  body .camp-route { border: 0; padding: 8px 0; }
  body .camp-hero, body .camp-hero-content { min-height: 460px; }
  body .camp-hero-content { padding-block: 42px; }
  body .camp-hero h1 { font-size: 30px; }
  body .camp-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  body .camp-art-caption small { font-size: 11px; }
  body .library-grid, body .library-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body .community-layout { display: block; padding-bottom: 96px; }
  body .community-left { display: none; }
  body .community-mobile-nav { display: flex; height: calc(64px + env(safe-area-inset-bottom)); background: var(--low); }
  body .community-mobile-nav :is(a, button) { min-height: 44px; min-width: 44px; padding: 3px 8px; font-size: 10px; color: var(--muted); }
  body .community-mobile-nav .mobile-create > svg { border-radius: 0; background: var(--amber); color: var(--gold-ink); }
  body .community-mobile-nav .mobile-create { color: var(--amber); }
  body .community-post-header { padding: 18px 18px 0; }
  body .community-post-copy { padding: 14px 18px; }
  body .community-author strong { font-size: 13px; }
  body .community-author > div > span { font-size: 10px; }
  body .community-post-copy p { font-size: 14px; }
  body .community-post-image { margin-inline: 18px; }
  body .community-post-footer { padding: 10px 18px; }
  body .community-post-footer :is(a, button) { font-size: 12px; }
  body .community-focused .content-draft-list { grid-template-columns: 1fr; }
  body .community-spaces-panel .space-list-grid { grid-template-columns: 1fr; }
  body .community-focused--spaces .space-workspace { display: flex; flex-direction: column; gap: 20px; }
  body .community-focused--spaces .space-workspace > aside { width: 100%; position: static; padding: 14px; }
  body .community-focused--spaces .space-channel-list { display: flex; overflow: auto; flex-wrap: nowrap; }
  body .community-focused--spaces .space-channel-list a { flex: none; }
  body .community-focused--spaces .space-conversation { width: 100%; }
  body .community-focused--spaces .content-hero { flex-direction: column; align-items: flex-start; }
  body .community-editor-heading h1, body .community-reader h1 { font-size: 24px; }
  body .content-fields { grid-template-columns: 1fr; }
  body .account-page .content-panel { padding: 20px; }
}
@media (max-width: 400px) {
  body .site-header .header-inner.section-wrap { gap: 8px; }
  body .site-header .header-account-copy strong { max-width: 72px; }
  body .site-header .brand-wordmark { font-size: 20px; }
  body .site-header .brand-mark, body .site-header .brand-mark img { width: 28px; height: 28px; }
  body .site-header .language-trigger { padding: 8px; min-width: 44px; }
  body .site-header--studio .studio-header-document { display: none; }
  body .site-header--studio:not(.site-header--expanded) .header-actions { margin-left: auto; }
  body .library-grid { grid-template-columns: 1fr; }
  body .camp-section-heading { align-items: flex-start; gap: 12px; }
  body .camp-section-heading .camp-text-link { font-size: 11px; }
  body .camp-art-caption strong { font-size: 12px; }
  body .community-post-footer > span { display: none; }
}
@media (max-width: 540px) {
  body .site-header .brand-wordmark { display: none; }
  body .header-account-copy strong { max-width: 84px; }
  body .site-header--studio .header-account-copy { display: none; }
  body .site-header--studio .header-account-button { width: 44px; padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  body .button { transition: none; }
}

/* The inbox is a real child workspace, without community-home sidebars. */
body .messages-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
body .messages-heading h1 { font:30px/1.5 var(--font-ui),sans-serif; margin:8px 0 10px; }
body .messages-heading p { font-size:13px; color:var(--muted); max-width:65ch; margin:0; }
body .messages-layout { display:grid; grid-template-columns:256px minmax(0,1fr); min-height:580px; border:1px solid var(--line); background:var(--panel); }
body .messages-list { border-right:1px solid var(--line); min-width:0; padding:16px; }
body .messages-tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:14px; }
body .messages-tabs button { flex:1; min-height:44px; background:none; border:0; color:var(--muted); font-size:12px; padding:5px; }
body .messages-tabs button[aria-pressed=true] { color:var(--cyan); box-shadow:inset 0 -2px var(--cyan); }
body .messages-tabs small { margin-left:5px; color:var(--amber); }
body .messages-thread { width:100%; display:flex; align-items:center; gap:10px; background:none; border:1px solid transparent; padding:12px 8px; color:var(--ink); text-align:left; min-height:66px; }
body .messages-thread:hover,body .messages-thread.active { background:#253f45; border-color:var(--line); }
body .messages-thread>span:not(.community-avatar) { min-width:0; flex:1; }
body .messages-thread strong { display:block; font:13px/1.6 var(--font-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body .messages-thread small { font:11px/1.6 var(--font-body); color:var(--soft); }
body .messages-thread i { background:var(--amber); color:var(--gold-ink); font:11px var(--font-body); padding:3px 5px; }
body .messages-list-empty { color:var(--soft); font-size:12px; padding:18px 6px; }
body .messages-privacy-link { display:inline-flex; align-items:center; min-height:44px; font-size:11px; color:var(--muted); margin-top:18px; }
body .messages-conversation { display:flex; flex-direction:column; min-width:0; }
body .messages-room-head { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 24px; border-bottom:1px solid var(--line); }
body .messages-room-head h2 { font:20px/1.5 var(--font-ui),sans-serif; margin:0 0 6px; overflow-wrap:anywhere; }
body .messages-room-head p { margin:0; color:var(--soft); font-size:12px; }
body .messages-room-menu { position:relative; flex:none; font-size:12px; }
body .messages-room-menu summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
body .messages-room-menu>div { position:absolute; top:100%; right:0; background:var(--panel2); border:1px solid var(--line); padding:8px; z-index:5; width:180px; box-shadow:4px 4px 0 var(--low); }
body .messages-room-menu button { display:block; padding:10px; min-height:44px; width:100%; background:none; border:0; color:var(--ink); text-align:left; font-size:12px; }
body .messages-room-menu button:hover { background:var(--low); }
body .messages-members { padding:10px 24px; background:var(--low); font-size:12px; color:var(--muted); }
body .messages-members>div { display:flex; flex-wrap:wrap; gap:12px; padding-block:12px; }
body .messages-members>div>span { padding:8px 12px; border:1px solid var(--line); }
body .messages-members small { display:block; color:var(--soft); }
body .messages-request { padding:20px 24px; border-bottom:1px solid var(--line); background:#253f45; }
body .messages-request h3 { margin:0; font:18px/1.6 var(--font-ui),sans-serif; }
body .messages-request p { color:var(--muted); font-size:13px; }
body .messages-stream { min-height:200px; height:400px; overflow:auto; padding:24px; display:flex; flex-direction:column; gap:20px; overscroll-behavior:contain; }
body .message-row { display:flex; align-items:flex-start; gap:12px; }
body .message-row>div { min-width:0; flex:1; }
body .message-row header { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
body .message-row header strong { font-size:13px; font-weight:500; }
body .message-row time { font-size:10px; color:var(--soft); }
body .message-row p { white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.85 var(--font-body); margin:7px 0 0; }
body .message-row.own>div { padding:12px 16px; background:#253f45; border:1px solid #3c5c61; }
body .message-report { min-height:32px; padding:0; font-size:10px; color:var(--soft); background:none; border:0; }
body .messages-end { height:1px; flex:none; }
body .messages-older { align-self:center; flex:none; }
body .messages-stream-empty,body .messages-waiting { color:var(--soft); font-size:13px; padding:16px 24px; }
body .messages-send { margin:0; padding:18px 24px; border-top:1px solid var(--line); background:var(--low); gap:12px; }
body .messages-send textarea { min-height:92px; resize:vertical; max-height:240px; }
body .messages-send>div { display:flex; align-items:center; justify-content:space-between; gap:16px; }
body .messages-send small { font-size:11px; color:var(--soft); }
body .messages-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; flex:1; text-align:center; padding:48px 28px; min-height:400px; }
body .messages-placeholder>span { font-size:36px; color:var(--amber); margin-bottom:20px; }
body .messages-placeholder h2 { font:24px/1.6 var(--font-ui),sans-serif; }
body .messages-placeholder p,body .messages-placeholder small { font-size:13px; line-height:1.8; max-width:45ch; color:var(--muted); }
body .messages-create { padding:28px; margin:0; gap:20px; }
body .messages-create h2 { font:24px/1.5 var(--font-ui),sans-serif; margin:0; }
body .messages-create input,body .messages-create textarea { width:100%; min-height:44px; padding:12px 14px; color:var(--ink); background:var(--low); border:1px solid var(--line); font:15px/1.8 var(--font-body); }
body .messages-create textarea { min-height:150px; resize:vertical; }
body .messages-create p,body .messages-create small { color:var(--muted); font-size:12px; }
body .messages-create>button { justify-self:start; }
body .messages-people { display:grid; gap:5px; }
body .messages-people button { display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--low); border:1px solid var(--line); color:var(--ink); min-height:44px; text-align:left; font-size:13px; }
body .messages-people button>span { margin-left:auto; color:var(--cyan); }
body .messages-selected { display:flex; flex-wrap:wrap; gap:8px; }
body .messages-selected button { padding:8px 12px; color:var(--cyan); border:1px solid var(--line); background:#253f45; min-height:44px; font-size:12px; }
body .messages-reconnect { background:none; border:0; color:var(--cyan); padding:8px; min-height:44px; }
body .messages-send .sr-only { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; }
@media(max-width:760px) {
 body .messages-layout { grid-template-columns:1fr; }
 body .messages-list { border-right:0; border-bottom:1px solid var(--line); max-height:220px; overflow:auto; padding:12px; }
 body .messages-privacy-link { margin:0; }
 body .messages-thread { min-height:56px; }
 body .messages-room-head,body .messages-request,body .messages-send,body .messages-stream,body .messages-create { padding:18px; }
 body .messages-room-head h2 { font-size:18px; }
 body .messages-stream { height:360px; }
 body .messages-heading { align-items:flex-start; }
 body .messages-heading h1 { font-size:24px; }
 body .messages-heading .button { padding-inline:12px; flex:none; }
 body .messages-heading p { font-size:12px; }
 body .messages-send>div { align-items:flex-end; }
 body .messages-send small { max-width:65%; }
}

/* Artwork and creator routes are rendered by the Worker, using the same HUD. */
body .page-main[data-post-id] { max-width:1180px; }
body .artwork-layout { grid-template-columns:minmax(0,1fr) 300px; gap:28px; }
body .artwork-stage { min-height:380px; height:56vh; max-height:620px; background:var(--low); border-color:var(--line); border-radius:0; overflow:hidden; padding-bottom:80px; }
body .artwork-stage .stage-toolbar { left:0; right:0; bottom:0; transform:none; justify-content:center; border-radius:0; border:0; border-top:1px solid var(--line); padding:8px 12px; background:var(--panel); }
body .stage-toolbar button { min-height:44px; }
body .avatar,body .work-tile figure,body .work-details,body .comment-form,body .profile-cover { border-radius:0; }
body .reaction-row { flex-wrap:wrap; }
body .artwork-sidebar h1 { font:24px/1.5 var(--font-ui),sans-serif; }
body .work-description { font:15px/1.85 var(--font-body); }
body .comments { max-width:794px; }
body .page-main[data-user-id] { max-width:1180px; }
body .profile-cover { height:180px; }
body .profile-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
body .profile-controls .follow-button { min-height:44px; border-radius:0; }
body .site-header [hidden] { display:none!important; }
@media(max-width:760px) {
 body .artwork-layout { grid-template-columns:1fr; }
 body .artwork-stage { height:50vh; min-height:280px; }
 body .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:420px) {
 body .site-header--studio.site-header--expanded .brand-wordmark { display:none; }
 body .artwork-stage { padding:20px 20px 100px; }
 body .artwork-stage .stage-toolbar { gap:0 8px; flex-wrap:wrap; }
 body .stage-toolbar span { flex:1 0 100%; text-align:center; }
 body .profile-controls { padding-left:0; }
}
body .content-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:12px; color:var(--muted); margin-bottom:12px; }
body .library-toolbar { align-items:flex-start; flex-wrap:wrap; gap:20px; }
body .library-tabs { flex-wrap:wrap; gap:6px; }
body .library-search button { background:none; border:0; color:var(--muted); min-height:44px; padding:8px; }
body .library-content-card { background:var(--panel); border:1px solid var(--line); padding:22px; min-width:0; display:flex; flex-direction:column; gap:12px; }
body .library-content-card h2 { font:500 18px/1.6 var(--font-body); margin:0; overflow-wrap:anywhere; }
body .library-content-card p { font:14px/1.8 var(--font-body); color:var(--muted); overflow-wrap:anywhere; margin:0; flex:1; }
body .library-content-card a { color:var(--cyan); }
body .library-withdraw { min-height:44px; background:none; color:var(--soft); border:0; font-size:12px; text-align:left; padding:8px 0; }

/* Authentication is part of the same site, with a bounded illustration/form. */
body .auth-page { width:min(1180px,calc(100% - 2 * var(--workspace-gutter))); margin:34px auto 72px; min-height:calc(100dvh - 178px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid var(--line); background:var(--panel); }
body .auth-world { position:relative; top:auto; height:100%; min-height:560px; padding:36px; border-right:1px solid var(--line); }
body .auth-world::before, body .auth-world::after { width:24px; height:24px; border-width:2px; }
body .auth-world-copy strong { font:26px/1.6 var(--font-ui),sans-serif; }
body .auth-entry { min-height:560px; padding:40px; background:var(--panel); }
body .auth-title h1 { font:30px/1.5 var(--font-ui),sans-serif; }
body .auth-title p { font:15px/1.8 var(--font-body); }
body .auth-entry-form .text-input { min-height:48px; border-radius:0; background:var(--low); border-color:var(--line); }
body .info-page { max-width:850px; }
body .info-page .info-grid { grid-template-columns:minmax(0,1fr); }
@media(max-width:760px) {
 body .auth-page { margin-block:26px 48px; display:block; border:0; }
 body .auth-entry { min-height:calc(100dvh - 146px); padding:24px 0; background:none; }
}

/* Profile photographs share one frame throughout the community and public pages. */
body .community-avatar, body .avatar { overflow: hidden; }
body .avatar-image { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }