:root {
  --spc-black: 10 5 16; 
  --charcoal: rgb(var(--spc-black));
  --charcoal-10: rgb(var(--spc-black) / 0.1);
  --charcoal-20: rgb(var(--spc-black) / 0.2);
  --charcoal-50: rgb(var(--spc-black) / 0.5);
  --charcoal-70: rgb(var(--spc-black) / 0.7);
  --charcoal-80: rgb(var(--spc-black) / 0.8);
  --charcoal-90: rgb(var(--spc-black) / 0.9);
  --color-bg: var(--charcoal);
  --color-surface: rgba(237, 237, 237, 0.05);
  --color-surface-overlay: rgba(237, 237, 237, 0.1);
  --color-border: rgba(237, 237, 237, 0.2);
  --color-border-light: rgba(237, 237, 237, 0.1);
}


#ao-search-sheet,
.aoshare-box { background: var(--color-bg); }

.aos-header { background: rgba(237, 237, 237, 0.05); }

.spc-site {
  
  --spc-bg: rgb(var(--spc-black));
  --spc-text: #ededed;             
  --spc-text-2: rgba(237, 237, 237, 0.8);  
  --spc-text-3: rgba(237, 237, 237, 0.55); 
  --spc-surface-5: rgba(237, 237, 237, 0.05);
  --spc-surface-10: rgba(237, 237, 237, 0.1);
  --spc-surface-15: rgba(237, 237, 237, 0.15);
  --spc-border: rgba(237, 237, 237, 0.2);
  --spc-border-light: rgba(237, 237, 237, 0.1);
  --spc-accent: #ddff00;           
  --spc-on-accent: #180d22;        
  --spc-r-md: 8px;
  --spc-r-lg: 12px;
  --spc-r-max: 100px;

  --spc-display: 'Special Gothic Expanded One', var(--font-montra), sans-serif;
  --spc-body: 'Bricolage Grotesque', var(--font-body, system-ui, sans-serif);

  position: relative;
  
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--spc-bg);
  color: var(--spc-text);
  font-family: var(--spc-body);
}

.spc-site *,
.spc-site *::before,
.spc-site *::after { box-sizing: border-box; }


:where(.spc-site button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }


.spc-site :where(p) { color: var(--spc-text); }


.spc-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  padding: 0 11.5px 0 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.spc-topbar-left { display: flex; flex: none; align-items: center; gap: 12px; }
.spc-topbar-right { display: flex; flex: none; align-items: center; gap: 24px; margin-left: auto; }
.spc-logo-mark { display: block; width: 23.24px; height: 24px; }
.spc-icon-btn { display: grid; place-items: center; width: 24px; height: 24px; }
.spc-search {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 500px;
  min-width: 0;
  height: 30px;
  margin: 0 auto;
  padding: 0 15px;
  border-radius: var(--spc-r-max);
  background: var(--spc-surface-10);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}
.spc-search-icon { flex: none; opacity: 0.55; }
.spc-search-input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: none;
  color: var(--spc-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .spc-search-input { font-size: 14px; }
}
.spc-search-input { text-overflow: ellipsis; }
.spc-search-input::placeholder { color: var(--spc-text-3); }
.spc-search-input:focus-visible { outline: none; }


.spc-topbar .aoh-bell-wrapper { display: flex; align-items: center; }


.spc-topbar .aoh-iconbtn { width: 24px; height: 24px; color: var(--spc-text); }
.spc-topbar .aoh-iconbtn:hover { background: none; }
.spc-topbar .aoh-iconbtn svg { width: 24px; height: 24px; }
.spc-topbar .aoh-bell-badge { min-width: 15px; height: 15px; top: -3px; right: -1.5px; }
.spc-topbar .aoh-profile { height: 24px; padding: 0; border: none; }
.spc-topbar .aoh-profile:hover { background: none; }
.spc-topbar .aoh-profile img { margin-right: 0; }
.spc-topbar .aoh-profile span { display: none; }


.spc-mock {
  margin-left: 2px;
  font-size: 0.6em;
  line-height: 0;
  color: var(--spc-accent);
  vertical-align: super;
}
.spc-mock-legend {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--spc-text-3);
}


.spc-readmore { display: flex; }
.spc-readmore-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--spc-text);
}
.spc-readmore-clamped .spc-readmore-text::before {
  content: '';
  float: right;
  height: calc(100% - 1.5em);
}
.spc-readmore-btn {
  float: right;
  clear: both;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--spc-accent);
}
.spc-readmore-btn[hidden] { display: none; }
.spc-readmore-btn:hover { text-decoration: underline; }
.spc-readmore-open .spc-readmore-text { display: block; overflow: visible; }

.spc-about-credit { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.25; color: var(--spc-text-3); }


.spc-action-btn { font-weight: 500; }
.spc-action-btn:hover { opacity: 0.8; }

.spc-action-btn:disabled { cursor: default; }
.spc-action-btn:disabled:hover { opacity: 1; }

.spc-heart {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("heart-filled.svg") center / contain no-repeat;
  mask: url("heart-filled.svg") center / contain no-repeat;
}
.spc-like-on { display: none; color: #f04141; }
.spc-action-btn[aria-pressed="true"] .spc-like-on { display: block; }
.spc-action-btn[aria-pressed="true"] .spc-like-off { display: none; }