body{
  margin:0;
  padding:100px 20px; /* combined padding-top/bottom clearly */
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:-0.25px;
  word-spacing:-0.5px;
  line-height:1.4;
  color:#fff;
  background-color:#969696;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  box-sizing:border-box
}
#content{
  max-width:850px;
  margin:0 auto
}
.default-mode .arrow-button {
  position: static !important;
  width: 100px !important;
  height: 100px !important;
  margin-bottom: 50px !important;
  cursor: pointer !important;
  display: block !important;
  opacity: 0.7 !important;
  visibility: visible !important;
}
.default-mode .arrow-button:hover{
  opacity: 0.85 !important; /* explicitly reduced to exactly 85% opacity */
  visibility: visible !important;
}
.uploaded-image-mode .arrow-button{
  display:inline-block!important;
}

.default-mode .theme-picker,
.uploaded-image-mode .theme-picker {
  position: static;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  margin-bottom: 50px !important;
  z-index: 10;
}
.theme-picker span{
  margin-right:10px;
  opacity:0.4
}
.theme-picker span:hover,.theme-picker span.active{
  opacity:1
}
.category{
  background:none;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  font-size:36px!important; /* ensures category font-size clearly */
  opacity:0;
  transition:opacity 0.3s ease-in-out
}
.category-content {
  background: none;
  display: none;
  padding-left: 0;
}

.category-content.active {
  display: block;
}
.action-links{
  background:none;
  text-align:left
}
.action-links a{
  color:#fff;
  margin-right:10px
}
body>*,#content>*,.category,.category-content,.file-item,.editable-text,.action-links{
  margin-bottom:50px!important
}

#editable-title{
  width:850px;
  max-width:100%;
  display:inline-block;
  font-size:64px;
  font-weight:600;
  letter-spacing:-2px;
  word-spacing:-7px;
  line-height:1.2;
  color:#fff;
  text-align:left;
  outline:none;
  white-space:nowrap;
  overflow:visible;
  box-sizing:border-box;
  padding:0;
  border:none;
  margin-left:-5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  opacity:0;
  transition:opacity 0.3s ease-in-out
}
#editable-address{
  width:850px;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:28px!important;
  font-weight:600!important;
  letter-spacing:-0.25px!important;
  word-spacing:-0.5px!important;
  line-height:1.4!important;
  color:#fff!important;
  outline:none!important;
  box-sizing:border-box!important;
  padding:0!important;
  border:none!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
  opacity:0;
  transition:opacity 0.3s ease-in-out
}
a {
  color: #ffffff !important;
  opacity: 0.5;
  text-decoration: none;
}

a:hover {
  opacity: 1;
}

.row-of-upload-links {
  display: flex;
  gap: 10px;
  padding: 10px 0;
}

.dynamic-content .row-of-upload-links {
  margin-bottom: 50px;
}

.category-content > .dynamic-content > .row-of-upload-links:last-child {
  margin-bottom: 0 !important;
}

.upload-link, .embed-link, .add-etb-link {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.upload-link:hover, .embed-link:hover, .add-etb-link:hover {
  opacity: 1;
}

.delete-button {
  color: #ff5555;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.delete-button:hover {
  opacity: 1;
}
#title-image-ral {
  opacity: 0;
}

.dynamic-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.media-item img, .media-item video {
  width: 850px;
  max-width: 100%;
  height: auto;
  display: block;
  border: none;
}

.media-item iframe {
  width: 850px;
  max-width: 100%;
  height: 478px;
  aspect-ratio: 16/9;
  display: block;
  border: none;
}

.media-item {
  position: relative;
  margin-bottom: 50px;
}

.media-item {
  position: relative;
}

.media-item .delete-button {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.media-item:hover .delete-button {
  opacity: 1;
}

.delete-button {
  position: absolute;
  top: 10px; /* top-right corner offset exactly as original */
  right: 10px;
  width: 24px;
  height: 24px;
  background: url('https://waitforthesignal.com/assets/whitecross.svg') no-repeat center center; /* corrected to use actual file */
  background-size: contain;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease-in-out;
  z-index: 10; /* explicitly ensures visibility over media */
}

.delete-button:hover {
  opacity: 1;
}

.editable-text {
  font-size: 28px !important;
}

.editable-text {
  position: relative;
}
/* FIX: Remove focus outline from editable text blocks */
.editable-text:focus,
.editable-text[contenteditable]:focus,
.category span:focus,
.category span[contenteditable]:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

.editable-text .delete-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url('https://waitforthesignal.com/assets/whitecross.svg') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 10;
}

.editable-text:hover .delete-button {
  opacity: 1;
}

.editable-text {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.add-cat-above, .add-cat-below {
  color: #ffffff !important;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.add-cat-above:hover, .add-cat-below:hover {
  opacity: 1;
}

.category a.add-cat-above,
.category a.add-cat-below {
  color: #ffffff !important;
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s ease-in-out;
  margin-left: 10px;
  font-size: 16px;
  cursor: pointer;
}

.category a.add-cat-above:hover,
.category a.add-cat-below:hover {
  opacity: 1;
}

.delete-category {
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}
.delete-category:hover {
  opacity: 1;
}

.theme-picker {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 0px; 
  z-index: 1000;
}

.theme-picker span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-block;
  opacity: 1 !important; /* explicitly ensures 100% alpha always */
  transition: none !important; /* explicitly removes fading effects */
}

/* Exact colors as confirmed explicitly by your screenshot */
.theme-picker span[data-theme="dark"] {
  background-color: #000000;
}

.theme-picker span[data-theme="gray"] {
  background-color: rgb(150,150,150);
}

.theme-picker span[data-theme="light"] {
  background-color: #e8d4ae;
}
body {
  transform: scaleY(1.03);
  transform-origin: top left;
}

.default-mode #title-image-wrapper {
  display: none;
}
body.title-image-mode .arrow-button {
  display: inline-block !important;
}
#uploaded-title-image-container iframe {
    border: none;
    outline: none;
}
#uploaded-title-image-container {
  max-width: 850px !important;
  width: 100% !important;
  position: relative;
}
#youtube-player {
  max-width: 850px !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}
#uploaded-title-image-container, 
#uploaded-title-image-container .media-item {
  display: block !important;
  width: 100% !important;
  max-width: 850px !important;
  margin-bottom: 25px !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
}

#uploaded-title-image-container img,
#uploaded-title-image-container iframe,
#uploaded-title-image-container video {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
}
/* explicitly ensures text-color inheritance clearly throughout the entire page */
#editable-title,
#editable-address,
.category,
.category span,
.editable-text,
.upload-link,
.embed-link,
.add-etb-link,
.row-of-upload-links a,
a,
.category a,
.category a.add-cat-above,
.category a.add-cat-below,
.category a.delete-link {
  color: inherit !important;
}

body.dark-mode,
body.gray-mode,
body.default-mode {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.light-mode {
  color: rgba(0, 0, 0, 0.5) !important;
}

a {
  opacity: 0.5 !important;
}

a:hover {
  opacity: 1 !important;
}

#editable-title,
#editable-address,
.category,
.category span,
.editable-text,
.upload-link,
.embed-link,
.add-etb-link,
.row-of-upload-links a,
.category a,
.category a.add-cat-above,
.category a.add-cat-below,
.category a.delete-link {
  color: inherit !important;
}
body .arrow-button.arrow-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}
body.title-image-mode .arrow-button {
  position: static !important;
  display: block !important;
  margin-bottom: 25px !important; /* adjusts spacing above image */
}

body.title-image-mode #uploaded-title-image-container {
  display: block !important;
  clear: both !important;
}

body.title-image-mode #content {
  position: relative !important;
  padding-top: 150px !important; /* Arrow height (80px) + new desired margin (100px) */
}

body.title-image-mode .arrow-button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
}

body.title-image-mode #uploaded-title-image-container {
  position: relative !important;
  margin-top: 0 !important;
}

body.default-mode .arrow-button {
  position: static !important;
  width: 100px !important;
  height: 100px !important;
  margin-bottom: 50px !important;
  cursor: pointer !important;
  display: block !important;
  opacity: 0.7 !important;
  visibility: visible !important;
}
#uploaded-title-image-container {
  transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}
.category + .category-content {
  padding-top: 25px !important; /* exactly matches spacing between closed categories */
}
.js-embed,
.js-embed > div:first-child {
  width: 100% !important;
  max-width: 850px !important;
}
@media screen and (min-width: 601px) and (max-width: 1499px) {
  body {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
  #content {
    width: 90% !important;
    max-width: 850px !important;
    margin: 0 auto !important;
  }
  #editable-title {
    max-width: 100% !important;
  }
  #editable-address {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .media-item img,
  .media-item video,
  .media-item iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  .media-item iframe {
    aspect-ratio: 16/9;
  }
}