* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #f7f1ed; color: #302331; font: 1rem/1.55 Inter, "Segoe UI", sans-serif; }
header { background: #fffaf7; border-bottom: 1px solid #e7d9df; display: flex; align-items: center; justify-content: space-between; padding: .9rem max(1.2rem, calc((100vw - 48rem) / 2)); }
header a { color: #311f34; font-size: 1.55rem; font-weight: 800; text-decoration: none; }
header a span { color: #864474; }
main { width: min(48rem, calc(100% - 2rem)); margin: 2rem auto 4rem; }
.hero { padding: clamp(1.5rem, 5vw, 3rem); border-radius: 1.4rem; background: linear-gradient(125deg, #261832, #57274f); color: #fff5ed; }
.hero h1 { font: 400 clamp(2.75rem, 9vw, 5rem)/1 Georgia, serif; margin: .45rem 0 .8rem; }
.hero p { margin: 0; max-width: 32rem; }
.hero p:first-child { color: #f1bdab; font-weight: 650; }
.card, #status { background: #fffaf7; border: 1px solid #e7d9df; border-radius: 1rem; padding: 1.25rem; margin: 1rem 0; }
h2 { font-size: 1.25rem; margin: 0 0 .65rem; }
button, input, textarea { font: inherit; }
button { background: #fffaf7; border: 1px solid #af8ba1; color: #5a2b52; border-radius: .55rem; padding: .45rem .85rem; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
.primary { background: #62305a; color: white; border-color: #62305a; font-weight: 650; }
label { display: block; margin-bottom: .4rem; font-weight: 650; }
input, textarea { border: 1px solid #af8ba1; background: #fff; color: inherit; border-radius: .55rem; padding: .55rem .7rem; width: 100%; min-width: 0; }
textarea { display: block; resize: vertical; margin-bottom: .75rem; }
.actions, .feed-header { display: flex; align-items: center; gap: .65rem; }
.actions button { flex-shrink: 0; }
.feed-header { justify-content: space-between; margin-top: 1.5rem; }
.feed-header h2 { margin: 0; }
.post-meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; align-items: baseline; }
.post-meta time { font-size: .88rem; color: #6c5668; }
article p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .65rem 0 0; }
.workspace-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin: 1.25rem 0; }
.workspace-nav a { color: #62305a; font-weight: 650; }
.group-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .55rem; }
.group-list button { text-align: left; }
.group-list button span { display: block; font-size: .85rem; }
.group-list button[aria-pressed="true"] { background: #62305a; color: #fff; border-color: #62305a; }
#profile > input, #profile fieldset { margin-bottom: 1rem; }
#profile fieldset { border: 1px solid #e7d9df; border-radius: .65rem; }
.role-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .35rem; }
.role-options label { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; }
.role-options input { width: auto; }
#open-panel input, #panel-list input { margin-bottom: .75rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
#panel-list form { margin-top: .75rem; }
.brand { display: flex; align-items: center; gap: .4rem; line-height: 1.1; }
.brand .brand-mark { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin-right: .3rem; border-radius: .65rem; background: linear-gradient(140deg,#231b46,#6f4b9e); color: #ffdfba; }
.profile-summary { overflow: hidden; }
.profile-banner { margin: -1.25rem -1.25rem 0; height: 5rem; background: radial-gradient(ellipse at right,#ae648b,transparent 58%), linear-gradient(115deg,#261527,#6d3558); }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; width: 2.8rem; height: 2.8rem; border: 2px solid #fff; background: linear-gradient(135deg,#5f315e,#ad705d); color: white; font-weight: 800; }
.profile-summary .avatar { margin: -1.2rem 0 .45rem; position: relative; }
.profile-summary p { color: #6c5668; overflow-wrap: anywhere; }
.profile-summary p:empty { display: none; }
.profile-summary a { color: #62305a; font-weight: 650; }
#members h3 { margin: .5rem 0 0; }
.live-players { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(14rem,100%),1fr)); gap: .75rem; }
.live-players figure { margin: 0 0 .75rem; overflow: hidden; border-radius: .75rem; background: #251828; color: #fff; }
.live-players video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; }
.live-players figcaption { padding: .45rem .7rem; }
#live-controls button { margin: .45rem .4rem .45rem 0; }
#live-status:empty { display: none; }
@media (min-width: 960px) {
  main { width: min(84rem,calc(100% - 3rem)); }
  header { padding-inline: max(1.5rem,calc((100vw - 84rem) / 2)); }
  #member { display: grid; grid-template-columns: 11rem minmax(0,1fr) minmax(14rem,20rem); gap: 1.5rem; align-items: start; }
  .workspace-nav { display: grid; gap: .2rem; position: sticky; top: 1rem; }
  .workspace-nav a { border-radius: .75rem; padding: .7rem; text-decoration: none; }
  .workspace-nav a:hover, .workspace-nav a:focus-visible { background: #eddfeb; }
}

:root { --paper: #fffdfb; --warm: #f8f4f2; --deep: #24152c; --plum: #743b70; --line: #ebe5e7; --shadow: 0 14px 45px #331c310e; }
body { background: var(--warm); color: #241b2a; }
.topbar { position: sticky; top: 0; z-index: 5; padding: 0; background: var(--paper); }
.topbar-inner { width: min(100% - 3rem, 88rem); min-height: 4.75rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { gap: .65rem; color: var(--deep); }
.brand .brand-mark { width: 2.4rem; height: 2.4rem; margin: 0; box-shadow: 0 5px 15px #87477333; }
.brand .brand-word { color: var(--deep); letter-spacing: -.055em; font-size: clamp(1rem, 2.5vw, 1.45rem); }
.brand em { color: #995277; font-style: normal; }
.brand small { display: block; color: #736670; font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .22rem; }
.header-actions { display: flex; align-items: center; gap: .65rem; }
.header-actions .header-create { padding: .45rem .85rem; border-radius: 2rem; color: white; font-size: .85rem; white-space: nowrap; }
.header-actions .avatar { color: white; font-size: .82rem; }
main { width: min(100% - 3rem, 88rem); margin: 1.65rem auto 4rem; }
[id] { scroll-margin-top: 5.5rem; }
.card, #status { background: var(--paper); border-color: var(--line); border-radius: 1.3rem; box-shadow: var(--shadow); }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 14rem; display: flex; align-items: center; border-radius: 1.45rem; padding: clamp(1.3rem, 4vw, 2rem); background: radial-gradient(ellipse at right,#9a567c 0,transparent 42%), linear-gradient(115deg,#261527,#4d284a 67%,#6d3558); box-shadow: 0 15px 38px #45244120; }
.hero-inner { width: min(66%, 25rem); z-index: 1; }
.hero .eyebrow { color: #f2c8b4; margin: 0; letter-spacing: .12em; font-size: .67rem; text-transform: uppercase; font-weight: 800; }
.hero h1 { color: #fff; font: 800 clamp(1.85rem, 4vw, 2.4rem)/1.1 Inter, "Segoe UI", sans-serif; margin: .65rem 0; letter-spacing: -.035em; }
.hero h1 em { color: #f4d8bc; font: italic 400 1em Georgia, serif; }
.hero p { color: #f0e1ed; font-size: .88rem; margin: 0 0 1rem; }
.hero a, .hero button { display: inline-flex; align-items: center; gap: .45rem; border-radius: 2rem; padding: .54rem .95rem; background: #fff4e8; color: #43203e; font-weight: 750; text-decoration: none; font-size: .8rem; }
.hero-art { position: absolute; right: -1.3rem; top: 50%; transform: translateY(-50%) rotate(-13deg); width: clamp(8rem, 31%, 15rem); aspect-ratio: 1; }
.hero-art::before, .hero-art::after { content: ""; position: absolute; inset: 2%; border: 1px solid #ffdbb361; border-radius: 50%; }
.hero-art::after { inset: 17%; }
.book-art { position: absolute; inset: 17% 29% 17% 29%; display: grid; place-content: center; z-index: 1; border-radius: .35rem .6rem .6rem .35rem; border-left: .35rem solid #e7a596; background: linear-gradient(145deg,#f9cba8,#bd6f79 67%,#6e3f6c); box-shadow: .7rem .9rem 1rem #140d1e60; transform: rotate(17deg); color: #492940; font: italic bold clamp(.78rem, 2.1vw, 1.5rem)/1.05 Georgia, serif; text-align: center; }
.star { position: absolute; color: #f6cc9d; top: 10%; left: 8%; }
.star:last-child { inset: auto 14% 8% auto; font-size: 1.7rem; }
.welcome { max-width: 57rem; margin: clamp(1.5rem, 9vw, 7rem) auto; min-height: 23rem; }
.welcome h1 { font-size: clamp(2rem, 6vw, 4rem); }
.welcome .hero-art { right: 0; }
.workspace-main, .right-rail, .left-rail { min-width: 0; }
.workspace-nav { margin: 0 0 1.3rem; gap: .3rem; }
.workspace-nav a { padding: .6rem .8rem; border-radius: .85rem; text-decoration: none; }
.workspace-nav a.current { background: #eddfeb; color: #66285d; }
#communities-title { color: #736670; text-transform: uppercase; font-size: .69rem; letter-spacing: .13em; margin: .8rem .55rem; }
.group-list { grid-template-columns: 1fr; gap: .18rem; }
.group-list button { display: flex; align-items: center; gap: .55rem; border: 0; background: transparent; border-radius: .75rem; padding: .5rem; min-width: 0; }
.group-list button[aria-pressed="true"] { background: #efe4ed; color: #66285d; }
.group-list button:hover { background: #efe4ed; }
.group-list button span { font-size: .75rem; }
.group-list button .group-icon { flex: 0 0 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: .6rem; background: #e9d9e5; color: #66285d; font-weight: 800; }
.community-strip { display: flex; gap: .75rem; overflow-x: auto; padding: .85rem 1rem; }
.community-strip a { flex: 0 0 4.3rem; min-width: 0; color: #51374e; display: grid; justify-items: center; gap: .25rem; text-decoration: none; font-size: .72rem; text-align: center; overflow-wrap: anywhere; }
.community-strip .avatar { box-shadow: 0 0 0 2px #c27d9f; }
.composer-heading, .post-heading, .member-heading { display: flex; gap: .65rem; align-items: center; }
.composer-heading { margin-bottom: .65rem; }
.composer-heading label { margin: 0; }
.post-meta { display: grid; gap: 0; }
.feed-header h2, .directory-card h2, .profile-summary h2 { font: 400 1.35rem/1.2 Georgia, serif; }
.directory-card .feed-header { margin: 0; align-items: start; }
.directory-card .feed-header button { padding: .3rem .55rem; font-size: .72rem; }
.member-entry { padding: .75rem 0; }
.member-entry + .member-entry { border-top: 1px solid var(--line); }
.member-entry .avatar { width: 2.2rem; height: 2.2rem; font-size: .75rem; flex: none; }
.member-entry h3 { font-size: .9rem; margin: 0 !important; }
.member-entry p { font-size: .8rem; color: #625462; }
@media (min-width: 960px) {
  #member { grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(14rem, 18rem); gap: clamp(1rem, 2.25vw, 1.65rem); }
  .left-rail { position: sticky; top: 5.75rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
  .workspace-nav { position: static; display: grid; }
  .right-rail > :first-child { margin-top: 0; }
}
@media (max-width: 959px) {
  .group-list { display: flex; overflow-x: auto; margin: 0 0 1rem; }
  .group-list button { flex: none; }
  .workspace-nav { margin-bottom: .4rem; }
}
@media (max-width: 540px) {
  main, .topbar-inner { width: calc(100% - 1.25rem); }
  .topbar-inner { min-height: 4rem; gap: .45rem; }
  .header-actions { gap: .3rem; }
  .header-actions .avatar { display: none; }
  #sign-out { font-size: .73rem; white-space: nowrap; padding: .35rem .5rem; }
  .hero-inner { width: 76%; }
  .hero-art { right: -2rem; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-search { display: flex; gap: .4rem; flex: 1; max-width: 30rem; }
.header-search input { border-radius: 2rem; background: #f7f4f5; border-color: #e8e0e6; padding-inline: 1rem; }
.header-search button { border-radius: 2rem; font-size: .8rem; }
.workspace-nav a { display: flex; align-items: center; gap: .8rem; }
.workspace-nav a > span { width: 1.15rem; text-align: center; font-size: 1.15rem; }
.rail-panel h2 { font: 400 1.3rem/1.2 Georgia, serif; margin: 0 0 .9rem; }
.rail-panel > a { display: inline-block; color: #743b70; font-weight: 700; font-size: .78rem; margin-top: .55rem; }
#rail-communities button, #rail-creators a { display: flex; align-items: center; text-align: left; gap: .65rem; width: 100%; background: transparent; color: #342339; border: 0; border-radius: .6rem; padding: .4rem .2rem; text-decoration: none; }
#rail-communities button:hover, #rail-creators a:hover { background: #f6edf3; }
#rail-communities .avatar, #rail-creators .avatar { flex: none; }
#rail-communities .rail-community-art { width: 2.2rem; height: 2.9rem; border-radius: .18rem .4rem .4rem .18rem; border-width: 0 0 0 .22rem; border-color: #b986a5; font-family: Georgia, serif; }
#rail-communities button:nth-child(2) .rail-community-art { background: linear-gradient(145deg,#4f386f,#9a6488); }
#rail-communities button:nth-child(3) .rail-community-art { background: linear-gradient(145deg,#9b514f,#5a354c); }
#rail-communities small, #rail-creators small { display: block; color: #72616d; font-size: .72rem; }
#rail-communities strong, #rail-creators strong { font-size: .82rem; }
.search-communities { display: flex; flex-wrap: wrap; gap: .5rem; margin: .65rem 0 1rem; }
.directory-card h1 { margin: 0 0 1rem; font: 400 2rem/1.12 Georgia, serif; }
#creator-role { max-width: 100%; margin-bottom: .6rem; background: #fff; color: #342339; border: 1px solid #d4b6c8; border-radius: .55rem; padding: .5rem; font: inherit; }
#profile-page .profile-summary { margin-top: 0; }
#profile-page .profile-banner { height: 10rem; background: radial-gradient(circle at 70% 40%,#b76b84,transparent 38%),linear-gradient(110deg,#321e3b,#75456c 70%,#bb7d7b); }
.profile-banner, .member-cover, .avatar { position: relative; overflow: hidden; }
.profile-banner img, .member-cover img, .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-cover { height: 7rem; margin-bottom: .65rem; border-radius: .75rem; background: #f7f0f5; }
.book-listing-editor { margin: .7rem 0; }
.book-listing-cover { width: 5rem; margin-block: .5rem; }
.book-listing-cover img, .book-listing > img { display: block; width: 100%; height: auto; border-radius: .35rem; }
.portfolio-book.book-listing { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.portfolio-book.book-listing:has(> img) { grid-template-columns: minmax(3rem, 5rem) minmax(0, 1fr); gap: .7rem; }
.book-listing small { display: block; }
.book-listing p { white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-top { display: flex; align-items: flex-end; justify-content: space-between; }
#profile-page .profile-top .avatar { width: 5.25rem; height: 5.25rem; margin: -2rem 0 .4rem; font-size: 1.5rem; border-width: 4px; }
#profile-page .profile-top a { border: 1px solid #ded1d8; border-radius: 2rem; padding: .42rem .75rem; text-decoration: none; margin-bottom: .55rem; }
#profile-name { font: 400 2rem/1.15 Georgia, serif; margin: .45rem 0; }
.studio-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
#creator-studio { margin-top: 0; }
#creator-studio h1 { font: 400 2rem/1.1 Georgia, serif; margin: 0 0 1rem; }
#creator-studio select { max-width: 100%; margin: .25rem 0 .5rem; padding: .4rem; border: 1px solid #d4b6c8; background: white; color: #342339; border-radius: .45rem; font: inherit; }
#studio-status:empty { display: none; }
.studio-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin: .65rem 0 1rem; }
.manuscript-paper { min-height: 14rem; max-width: 100%; padding: 2rem; margin: .65rem auto; background: white; border: 1px solid #ece2e9; color: #29252a; font: 1rem/1.6 Georgia, serif; overflow-wrap: anywhere; }
.manuscript-paper[data-trim="5x8"] { width: 25rem; }
.manuscript-paper[data-trim="5.5x8.5"] { width: 27.5rem; }
.manuscript-paper[data-trim="6x9"] { width: 30rem; }
.manuscript-paper h2 { text-align: center; }
.manuscript-paper p { white-space: pre-wrap; }
.manuscript-paper[data-theme="modern"] { font-family: Arial, sans-serif; }
.manuscript-paper[data-theme="elegant"] { font-family: Palatino, Georgia, serif; }
.manuscript-paper[data-theme="spacious"] { line-height: 1.95; }
.portfolio-toggle { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.portfolio-toggle input { width: auto; }
.portfolio-book, .portfolio-sample { display: grid; gap: .35rem; margin-top: .65rem; }
.portfolio-book a, #rail-books a { color: #743b70; }
.portfolio-sample audio { width: min(100%, 24rem); }
#rail-books a { display: block; padding: .35rem 0; }
#portfolio-save-status:empty { display: none; }
.feed-book { display: flex; align-items: center; gap: 1rem; margin: 1rem -1.25rem -1.25rem; padding: 1rem 1.25rem; border-top: 1px solid #f0e5ec; background: #f8f2f3; }
.feed-book-cover { flex: 0 0 6rem; min-height: 8rem; display: grid; place-items: center; text-align: center; overflow-wrap: anywhere; padding: .55rem; border-radius: .2rem .6rem .6rem .2rem; border-left: .3rem solid #c37e97; background: linear-gradient(145deg,#4e284d,#956078); color: #fff7ec; font: 700 1rem/1.15 Georgia, serif; box-shadow: .35rem .5rem .75rem #32133229; }
.feed-book h3 { margin: 0; font: 700 1.15rem/1.2 Georgia, serif; }
.feed-book a { display: inline-block; color: #743b70; font-weight: 700; margin-top: .45rem; }
.post-actions { display: flex; justify-content: flex-end; border-top: 1px solid #eee4eb; padding-top: .7rem; margin-top: .85rem; }
.feed-book:has(+ .post-actions) { margin-bottom: 0; }
.post-actions button { font-size: .83rem; }

.feed-composer { padding: 15px 18px; }
.composer-heading { gap: .65rem; }
.composer-heading button { flex: 1; text-align: left; border-radius: 999px; background: #f6eff4; }
.compose-options { display: flex; flex-wrap: wrap; gap: .25rem .45rem; border-top: 1px solid #f2edef; padding-top: .45rem; }
.compose-options button, .compose-options a { background: transparent; border: 0; border-radius: 8px; color: #694564; font-size: .79rem; font-weight: 750; padding: .4rem .5rem; text-decoration: none; }
.compose-options button:hover, .compose-options a:hover { background: #f6eff4; }
.post-dialog { width: min(540px, calc(100% - 25px)); max-height: min(86dvh, 900px); color: #241c2a; background: #fffdfc; border: 0; border-radius: 24px; padding: 24px; box-shadow: 0 24px 90px #0005; }
.post-dialog::backdrop { background: #21162775; }
.post-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: .5rem; margin-bottom: 1.25rem; }
.post-dialog h2 { font-family: Georgia, serif; font-weight: 500; font-size: clamp(1.45rem, 5vw, 1.85rem); line-height: 1.1; margin: 0 0 .35rem; }
.post-dialog-heading p { color: #7c6c79; font-size: .82rem; margin: 0; }
.post-dialog .close-dialog { border: 0; border-radius: 50%; padding: 0; width: 2rem; height: 2rem; font-size: 1.3rem; flex-shrink: 0; background: #f2ebf1; }
.create-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 5px; gap: 5px; border-radius: 13px; margin-bottom: 1rem; background: #f1eaf0; }
.create-tabs button { font-weight: 750; color: #756376; border: 0; border-radius: 10px; background: transparent; }
.create-tabs button[aria-pressed="true"] { background: #fff; color: #5c315e; box-shadow: 0 2px 8px #39213515; }
.post-dialog form { display: grid; gap: .38rem; }
.post-dialog label { display: block; font-size: .82rem; font-weight: 750; color: #534455; margin-top: .35rem; }
.post-dialog textarea, .post-dialog select, #post-link { width: 100%; border: 1px solid #e6dbe4; border-radius: 11px; padding: .72rem; color: #352936; background: #fffdfd; font: inherit; font-size: .9rem; }
.post-dialog textarea { min-height: 106px; resize: vertical; }
.post-dialog textarea:focus-visible { outline: 2px solid #b389ae; outline-offset: 1px; }
.post-dialog select { margin-top: .3rem; }
.post-dialog .post-attachment { position: relative; width: max-content; max-width: 100%; border: 2px dashed #dfc4d5; border-radius: 15px; background: #fdf7fb; padding: .65rem .8rem; color: #694564; cursor: pointer; }
.post-attachment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.post-attachment:focus-within { outline: 2px solid #b389ae; outline-offset: 1px; }
.post-attachment small { display: block; font-weight: 400; overflow-wrap: anywhere; }
.post-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; }
.post-dialog-actions button { border-radius: 999px; font-weight: 750; }
.post-dialog-actions .primary { background: #241a30; color: white; }
#publish-error { color: #8a244e; font-size: .85rem; margin: .4rem 0 0; }
#share-status { font-size: .85rem; color: #5c315e; margin: .4rem 0 0; }
.feed-post { padding: 0; overflow: hidden; scroll-margin-top: 85px; background: #fffdfc; margin-bottom: 17px; }
.feed-post .post-heading { margin: 0; padding: 19px 20px 0; gap: 11px; }
.feed-post .post-heading .avatar { border-radius: 50%; }
.feed-post .post-more { margin-left: auto; align-self: start; padding: .2rem .45rem; background: transparent; border: 0; font-size: 1.15rem; color: #807380; }
.feed-post > p { margin: 15px 20px 13px; color: #443846; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-hashtag { color: #593953; }
button.post-hashtag { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 700; text-decoration: underline; }
.post-tag-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.post-tag-controls select { width: auto; max-width: 100%; }
.post-tag-controls small { width: 100%; }
#post-alerts-list { display: grid; gap: .7rem; }
#post-alert-count { border-radius: 1rem; background: #743b70; color: white; padding: .08rem .35rem; }
#post-alerts-button { white-space: nowrap; }
.feed-post .post-meta time { color: #766a77; font-size: .78rem; }
.feed-book, .feed-attachment { margin: .6rem .8rem; }
.feed-attachment { display: block; width: calc(100% - 1.6rem); height: auto; max-height: min(75dvh, 36rem); object-fit: contain; border-radius: 12px; background: #f7f0f5; }
video.feed-attachment { background: #211727; }
.post-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem; color: #756775; padding: 13px 20px 10px; font-size: 11px; }
.feed-post .post-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 7px 15px; margin: 0; border-top: 1px solid #f2edef; }
.post-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 0; color: #766978; border-radius: 10px; padding: 10px 5px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.post-actions button:hover { background: #f9f0f5; }
.post-actions button[aria-pressed="true"] { color: #86396b; background: #f8edf5; }
.post-action-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.post-comments { padding: .35rem .8rem .8rem; border-top: 1px solid #eee5eb; }
.post-comment, .comment-form { display: flex; align-items: center; gap: .45rem; margin: .4rem 0; }
.post-comment .avatar, .comment-form .avatar { width: 1.7rem; height: 1.7rem; font-size: .68rem; flex: 0 0 1.7rem; }
.post-comment > div { background: #f6eef4; border-radius: 12px; padding: .35rem .65rem; min-width: 0; }
.post-comment p { margin: .1rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form input { flex: 1; min-width: 0; }
@media (max-width: 540px) {
  .post-dialog { inset: auto 0 0; width: 100%; max-width: none; max-height: 91dvh; margin: 0; border-radius: 22px 22px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); }
  .feed-post .post-heading { padding: 15px 15px 0; }
  .feed-post > p { margin: 13px 15px; }
  .feed-post .post-actions { padding: 6px 9px; }
  .post-actions button { font-size: 11px; gap: 4px; }
}
.site-footer { max-width: 88rem; margin: 0 auto; padding: 1.25rem 1.5rem 2rem; border-top: 1px solid #eee4eb; font-size: .85rem; }
.site-footer a { color: #743b70; }
.feed-footer { padding: 1.25rem .3rem; text-align: center; color: #72636e; font-size: .75rem; }
.unread-badge { display: inline-grid; min-width: 1.2rem; min-height: 1.2rem; place-items: center; padding: .1rem .25rem; border-radius: 1rem; color: white; background: #743b70; font-size: .7rem; font-weight: 700; }
#stories .feed-header, #messages .feed-header, #member-groups .feed-header { margin-top: 0; }
.story-rail, #story-list { display: flex; gap: .6rem; }
.story-rail { overflow-x: auto; padding: .2rem .2rem .55rem; scroll-snap-type: x proximity; }
.story-rail .story-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start;
  flex: 0 0 clamp(7rem, 23vw, 9rem); width: clamp(7rem, 23vw, 9rem); aspect-ratio: 2 / 3; min-width: 0;
  padding: .65rem; overflow: hidden; scroll-snap-align: start; text-align: left; border-radius: .85rem;
  border: 1px solid #775574; color: white; background: linear-gradient(155deg, #865978, #38263e);
}
.story-card:focus-visible { outline: 2px solid #743b70; outline-offset: 2px; }
.story-card img, .story-card video, .story-card-photo::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-card img, .story-card video { z-index: -2; object-fit: cover; }
.story-card video { opacity: 0; }
.story-card-photo video { opacity: 1; }
.story-card-photo::after { content: ''; z-index: -1; background: linear-gradient(#20142470, transparent 40%, #201424de); }
.story-card-initials { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto;
  border: 2px solid #a28b9e; border-radius: 50%; background: #553450; color: white; font-size: .72rem; font-weight: 700; }
.story-unseen .story-card-initials { border-color: #fff; box-shadow: 0 0 0 2px #ab58a0; }
.story-card-caption, .story-card-name { overflow: hidden; overflow-wrap: anywhere; }
.story-card-caption { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  margin: auto 0; font-size: .9rem; line-height: 1.25; font-weight: 700; }
.story-card-photo .story-card-caption { display: none; }
.story-card-photo .story-card-name { margin-top: auto; }
.story-card-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .8rem; font-weight: 700; }
.story-rail .story-create-card { justify-content: center; align-items: center; gap: .65rem; text-align: center;
  color: #56364f; border-color: #e4d4df; background: #f7eff4; font-weight: 700; }
.story-create-card > span { display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 50%; background: #743b70; color: white; font-size: 1.35rem; }
.story-navigation { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-block: .5rem; }
#story-progress { display: block; width: 100%; accent-color: #743b70; }
#story-content img, #story-content video { width: 100%; max-height: 53dvh; object-fit: contain; border-radius: .65rem; }
#story-reactions { justify-content: flex-start; }
#story-reactions [aria-pressed="true"] { background: #743b70; color: white; }
#story-viewers { margin-block: .5rem; }
#story-viewers summary { cursor: pointer; }
#thread-messages small { display: block; margin-bottom: .2rem; font-weight: 650; }
.sound-intro { display: block; background: linear-gradient(125deg, #f8edf4, #fffaf5); }
.sound-intro h1 { margin: 0 0 .4rem; }
.sound-intro p { margin-block: .4rem .8rem; }
.sound-tabs, .sound-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .7rem; align-items: center; }
.sound-tabs [aria-pressed="true"] { color: white; background: #743b70; }
.sound-results { display: grid; gap: .75rem; margin-top: .75rem; }
.sound-results article { background: #fffcfd; padding: 1rem; border: 1px solid #e8dce5; border-radius: .75rem; overflow-wrap: anywhere; }
.sound-results article h3, .sound-results article h4 { margin: 0; }
.sound-results article p { margin-block: .45rem; white-space: pre-wrap; }
.sound-results audio, .sound-results video { display: block; max-width: 100%; }
.sound-results video { max-height: 24rem; border-radius: .5rem; }
.sound-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .65rem; }
.sound-fields label, #sound-dialog label { display: block; }
#sound-collective select, #sound-dialog select, #story-music select {
  display: block; width: 100%; border: 1px solid #cebfc9; border-radius: .55rem;
  padding: .65rem; background: white; color: inherit; font: inherit;
}
#sound-profile, #sound-verification, #sound-dialog form { display: grid; gap: .65rem; }
#sound-profile label:has(input[type="checkbox"]), .sound-fields label:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: .4rem;
}
#sound-collective input[type="checkbox"] { width: auto; margin: 0; }
#sound-verification { margin-top: 1.3rem; border-top: 1px solid #e8dce5; padding-top: .75rem; }
#sound-feed-link, #studio-music-link { display: inline-block; margin-block: .5rem; }
#story-track-settings { display: grid; gap: .4rem; }
#story-music-credit { margin: .45rem 0; font-size: .85rem; }
.sound-check { display: flex !important; align-items: center; gap: .45rem; margin-block: .4rem; }
.sound-check input[type="checkbox"] { width: auto; margin: 0; }
.career-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .6rem; }
.career-metrics > div { display: grid; gap: .2rem; padding: .7rem; border: 1px solid #e8dce5; border-radius: .65rem; background: #fffafd; }
.career-metrics strong { font-size: 1.2rem; color: #633b60; }
.career-metrics span { font-size: .84rem; }
#career-seller { margin-top: 1rem; }
#ticket-listings img { display: block; width: auto; max-width: 100%; max-height: 25rem; object-fit: contain; border-radius: .55rem; }
#sound-dialog ul { max-height: 12rem; overflow: auto; padding-left: 1.25rem; }
#story-content p, #thread-messages p { white-space: pre-wrap; overflow-wrap: anywhere; }
.messages-layout { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr); gap: .75rem; }
#inbox-list { display: grid; align-content: start; gap: .35rem; }
#inbox-list button { text-align: left; }
#inbox-list button[aria-current="true"] { background: #eddfeb; }
#thread-messages { display: grid; gap: .35rem; max-height: 50dvh; min-height: 6rem; overflow: auto; padding-block: .5rem; }
#thread-messages p { width: fit-content; max-width: 85%; margin: 0; padding: .5rem .7rem; border-radius: .8rem; background: #f2eaef; }
#thread-messages .message-mine { justify-self: end; background: #e8d6e6; }
#member-group-list article { padding-block: .75rem; border-top: 1px solid #e9e0e7; }
#member-group-list button, #member-group-list select { margin: .2rem .4rem .2rem 0; }
@media (max-width: 540px) { .messages-layout { grid-template-columns: 1fr; } }
.mobile-bottom-nav, .mobile-menu { display: none; }
#reels { max-width: 38rem; margin-inline: auto; }
#reels video.feed-attachment { width: min(calc(100% - 1.6rem), 21.375rem, 39.375dvh); max-height: none; aspect-ratio: 9 / 16; margin-inline: auto; }
.reel-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; }
@media (max-width: 700px) {
  .member-signed-in { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom)); }
  #member .left-rail { display: none; }
  #member[data-view="communities"] .left-rail { display: block; }
  #member .workspace-nav, #member .right-rail, .header-actions .header-create { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { list-style: none; cursor: pointer; padding: .55rem; color: #63315e; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { position: absolute; top: 100%; right: 0; min-width: 10rem; z-index: 32; display: grid; padding: .4rem; background: #fffdfb; border: 1px solid #e9e0e7; border-radius: .65rem; }
  .mobile-menu nav a { padding: .5rem; font-size: .84rem; color: #63315e; }
  .mobile-bottom-nav { position: fixed; z-index: 31; inset: auto 0 0; display: flex; align-items: center; justify-content: space-around; padding: .5rem .25rem calc(.55rem + env(safe-area-inset-bottom)); background: #fffdfbf7; backdrop-filter: blur(15px); border-top: 1px solid #e9e0e7; }
  .mobile-bottom-nav a { min-width: 3.2rem; min-height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .18rem; color: #736471; font-size: .66rem; font-weight: 750; text-decoration: none; }
  .mobile-bottom-nav a span { font-size: 1.35rem; line-height: 1; }
  .mobile-bottom-nav a.current { color: #73376a; }
  .mobile-bottom-nav #mobile-create { width: 2.65rem; height: 2.65rem; padding: 0; display: grid; place-items: center; margin-top: -.45rem; border-radius: .95rem; border-color: #63315e; background: #63315e; color: #fff; font-size: 1.6rem; line-height: 1; }
}
@media (max-width: 540px) { .studio-fields { grid-template-columns: 1fr; } }
@media (min-width: 960px) {
  #member { grid-template-columns: minmax(10rem, 15rem) minmax(0, 44.5rem) minmax(14rem, 18.5rem); justify-content: center; }
}
@media (max-width: 959px) {
  .topbar-inner { flex-wrap: wrap; padding-block: .55rem; }
  .header-search { order: 3; flex: 1 0 100%; max-width: none; }
  [id] { scroll-margin-top: 7rem; }
}