* { 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-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; }
.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; }
@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; }
}