/* style.timeline.css
   =========================================
   DEBUG LOG TRACE:
   - Base wrapper constraints verified.
   - Core node interactions safeguarded (--prog-reveal transition mechanics).
   - REFINED: Eliminating native backdrop filters and visual halos.
   - OPTIMIZED: Injected `contain: strict` to fully isolate the wrapper from desktop reflows.
   - OPTIMIZED: Added `content-visibility: auto` to aggressively cull off-screen timeline blocks.
   - FIXED: Re-anchored project tether lines to reach upwards (`bottom: 100%`) connecting the gap dot back to the chronological project above it.
   ✨ FIXED (1/4): Added local background mask to Month Headers to prevent line strike-throughs.
   ✨ FIXED (2/4): Added upward-fading gradient tethers to active projects to catch descending gap lines.
   ✨ FIXED (3/4): Implemented descending `spineFlow` animation to match chronological downward timeline.
   ✨ FIXED (4/4): Masked `.is-horizon-tail` to fade gracefully into the void before the Stasis Trench.
   ========================================= */

.timeline-wrapper {
  position: fixed; top: 100vh; left: 0;
  width: 100vw; height: 85vh;
  z-index: 10000;
  overflow-y: auto; overflow-x: hidden;
  background: color-mix(in srgb, var(--bgBot, #000) 90%, #050508);
  border-radius: 40px 40px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--capsuleAccent, #fff) 30%, rgba(255,255,255,0.2));
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  contain: strict;
}
.timeline-wrapper::-webkit-scrollbar { width: 6px; }
.timeline-wrapper::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--capsuleAccent, #fff) 40%, rgba(255,255,255,0.2)); border-radius: 6px; }

.timeline-inner { max-width: var(--maxW); margin: 0 auto; padding: 30px var(--padX) 150px var(--padX); box-sizing: border-box; }

.drawer-dismiss {
  display: block; margin: 0 auto 50px auto;
  background: transparent; color: color-mix(in srgb, var(--capsuleAccent, #fff) 60%, rgba(255,255,255,0.4));
  border: none;
  font-family: 'Noto Sans JP';
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  cursor: pointer;
  text-shadow: none;
  transition: color 0.2s;
}
.drawer-dismiss:hover { color: #fff; }

.laneTitle {
  font-family: 'Caveat', cursive;
  font-size: 48px;
  font-weight: 900;
  color: var(--capsuleAccent, #fff);
  text-shadow: none;
  margin: 0;
  line-height: 1;
}

.timeline { position: relative; padding: 10px 0 80px 0; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }

.timeline-spine {
  position: absolute; top: 0; bottom: 0; left: 24px;
  width: 2px; background: color-mix(in srgb, var(--capsuleAccent, #fff) 25%, rgba(255,255,255,0.15));
  overflow: hidden; border-radius: 2px;
  transform: translateZ(0);
}

@keyframes spineFlow {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.spine-pulse {
  position: absolute; top: 0; left: 0; width: 100%; height: 100px;
  background: linear-gradient(to bottom, transparent, var(--efAccent, var(--capsuleAccent, #fff)));
  opacity: 0.35;
  box-shadow: none;
  will-change: transform;
  animation: spineFlow 4s linear infinite;
}

.date-marker {
  position: relative;
  padding-left: 70px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 900;
  color: color-mix(in srgb, var(--capsuleAccent, #fff) 40%, rgba(255,255,255,0.85));
  text-transform: uppercase;
  letter-spacing: 4px;
  margin: 40px 0 20px 0;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}
.date-marker::after {
  content: "";
  height: 1px;
  flex-grow: 1;
  background: linear-gradient(to right, color-mix(in srgb, var(--capsuleAccent, #fff) 40%, rgba(255,255,255,0.2)), transparent);
}

.node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 20px;
  opacity: 0.85;
  width: 100%;
  box-sizing: border-box;
  --prog-reveal: 0.2;
  transition: border-left-color 0.2s ease, background 0.2s ease, opacity 0.2s;
}

.node::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 24px;
  width: 2px;
  height: 40px;
  background: linear-gradient(to top, color-mix(in srgb, var(--capsuleAccent) 60%, transparent), transparent);
  z-index: -1;
  opacity: 0.7;
  pointer-events: none;
}

.node:hover { 
  border-left-color: var(--capsuleAccent) !important; 
  opacity: 1; 
  --prog-reveal: 1 !important; 
}
.node:hover .node-ring { border-color: var(--capsuleAccent) !important; opacity: 1 !important; }

.node-orb-wrap {
  position: relative;
  width: 50px; height: 50px;
  display: flex; justify-content: center; align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s;
}
.node-orb-wrap:hover { transform: scale(1.1); }

.node-orb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--capsuleAccent);
  border: 2px solid #000;
  box-shadow: none;
  position: relative;
  z-index: 2;
}

.node-content {
  background: linear-gradient(var(--bgAngle, 180deg), 
      color-mix(in srgb, var(--capsuleAccent) 20%, color-mix(in srgb, rgb(var(--circadian-accent, 255,255,255)) 12%, var(--bgMid, #111))), 
      color-mix(in srgb, var(--capsuleAccent) 8%, color-mix(in srgb, rgb(var(--circadian-dark, 5,5,8)) 85%, #050508))
  );
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, rgba(255,255,255,0.15));
  border-left: 4px solid var(--capsuleAccent);
  border-radius: 16px;
  padding: 20px 28px;
  flex-grow: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
  box-shadow: none;
  border-bottom: none !important;
}

.node-content-bg-glow {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--capsuleAccent) 8%, transparent);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.2s;
}
.node:hover .node-content-bg-glow { opacity: 0.8; }

.node-prog-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  height: auto;
  background: color-mix(in srgb, var(--capsuleAccent) calc(15% + (20% * var(--prog-reveal))), transparent);
  border-right: 2px solid color-mix(in srgb, var(--capsuleAccent) calc(0% + (100% * var(--prog-reveal))), transparent);
  box-shadow: none;
  border-radius: 16px 0 0 16px;
  opacity: calc(-0.25 + (1.25 * var(--prog-reveal)));
  transition: width 0.8s cubic-bezier(0.175,0.885,0.32,1.275);
  z-index: 0;
  pointer-events: none;
  will-change: width, opacity, background-color, border-color;
  overflow: hidden;
}

.node-prog-pattern {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 200%;
  opacity: calc(0.3 + (0.7 * var(--prog-reveal)));
  mix-blend-mode: normal;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes progTexturePan {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}

.node[data-momentum="surge"] .node-prog-pattern { animation: progTexturePan 20s linear infinite; }
.node[data-momentum="peak"] .node-prog-pattern { animation: progTexturePan 40s linear infinite; }
.node[data-momentum="active"] .node-prog-pattern { animation: progTexturePan 80s linear infinite; }
.node[data-momentum="steady"] .node-prog-pattern { animation: progTexturePan 120s linear infinite; }
.node[data-momentum="slow"] .node-prog-pattern { animation: progTexturePan 160s linear infinite; }
.node[data-momentum="stagnant"] .node-prog-pattern { animation: none; opacity: 0.15; }

.node-prog-bar[style*="width: 100%"], .node-prog-bar[style*="width:100%"] {
  border-radius: 16px;
  border-right: none;
  box-shadow: none;
}

.node-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: color-mix(in srgb, var(--capsuleAccent, #88ffaa) 80%, #fff);
  box-shadow: none;
  z-index: 1; 
}

.node-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; position: relative; z-index: 2; width: 100%; box-sizing: border-box; }
.node-title-group { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.node-title { margin: 0; font-size: 20px; font-weight: 900; color: #fff; cursor: text; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; text-shadow: none; }

.pill-group { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.node-pin-btn, .node-vault-btn {
  background: color-mix(in srgb, var(--capsuleAccent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255,255,255,0.2));
  border-radius: 999px;
  color: #fff;
  padding: 4px 12px;
  font-size: 10px;
  font-family: 'Noto Sans JP';
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.node-pin-btn:hover { background: var(--capsuleAccent); color: #000; }

.node-vault-btn {
  background: var(--capsuleAccent);
  border: 1px solid var(--capsuleAccent);
  color: #000;
  box-shadow: none;
}
.node-vault-btn:hover { background: #fff; border-color: #fff; }

.date-scrubber {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--capsuleAccent) 15%, rgba(255,255,255,0.1));
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255,255,255,0.2));
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  cursor: ew-resize;
  box-shadow: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.date-scrubber.is-scrubbing, .date-scrubber:hover {
  background: var(--capsuleAccent);
  color: #000;
  border-color: var(--capsuleAccent);
}

.node-expanded-data {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows 0.2s ease, opacity 0.2s ease, margin-top 0.2s;
  width: 100%;
}
.node.isExpanded .node-expanded-data { grid-template-rows: 1fr; opacity: 1; margin-top: 16px; }
.node-expanded-inner { min-height: 0; overflow: hidden; position: relative; z-index: 10; width: 100%; }

.node-pin-hero {
  position: absolute; right: -25px; top: 20px;
  transform: scale(0.9);
  background: var(--capsuleAccent);
  color: #000;
  padding: 10px 20px 10px 16px;
  border-radius: 999px;
  font-family: 'Noto Sans JP';
  font-weight: 900;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 100;
  border: 1px solid #000;
  outline: none;
}
.node-pin-hero::before { content: "⇪ PIN"; }
.node:hover .node-pin-hero { opacity: 1; pointer-events: auto; right: -12px; transform: scale(1); }
.node-pin-hero:hover { background: #fff; padding-right: 30px; right: -18px; }

.zen-vault { margin-top: 60px; padding-top: 40px; border-top: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, rgba(255,255,255,0.1)); width: 100%; box-sizing: border-box; }
.vault-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; width: 100%; box-sizing: border-box; }
.vault-item {
  padding: 8px 16px;
  background: color-mix(in srgb, var(--capsuleAccent) 10%, #050508);
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, rgba(255,255,255,0.15));
  border-radius: 999px;
  font-family: 'Noto Sans JP';
  font-size: 12px;
  font-weight: 900;
  color: color-mix(in srgb, var(--capsuleAccent) 60%, rgba(255,255,255,0.7));
  display: flex; align-items: center; gap: 10px;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
  cursor: default;
  box-shadow: none;
}
.vault-item:hover { color: #fff; border-color: var(--capsuleAccent); background: color-mix(in srgb, var(--capsuleAccent) 20%, #050508); }
.vault-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--capsuleAccent);
  opacity: 1.0;
  box-shadow: none;
}

.node.is-urgent-pulse .node-orb-wrap::after,
.node.is-urgent-pulse .node-orb-wrap::before { 
  content: ""; 
  position: absolute; 
  border-radius: 50%; 
  pointer-events: none; 
  will-change: transform; 
  box-shadow: none;
  animation: none;
  filter: none;
}
.node.is-urgent-pulse .node-orb-wrap::after {
  inset: -5px;
  border: 2px dashed var(--capsuleAccent, #fff);
  opacity: 0.8;
}
.node.is-urgent-pulse .node-orb-wrap::before {
  inset: -2px;
  border: 1.5px solid color-mix(in srgb, var(--capsuleAccent, #fff) 60%, #fff);
  opacity: 0.5;
}

.vault-section-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: color-mix(in srgb, var(--capsuleAccent) 60%, rgba(255, 255, 255, 0.6));
  margin: 0 0 20px 0;
  width: 100%;
  text-align: center;
  text-shadow: none;
}

.vault-sky-canvas {
  position: relative; width: 100%; height: 450px;
  background: color-mix(in srgb, var(--capsuleAccent) 5%, #050508);
  border-radius: 24px; border: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, rgba(255,255,255,0.15));
  overflow: hidden; margin-bottom: 40px; box-sizing: border-box;
  box-shadow: none;
  content-visibility: auto;
  contain-intrinsic-size: auto 450px;
}

.desk-vault-star {
  position: absolute; background: var(--star-color); border-radius: 50%;
  animation: none; 
  cursor: pointer; z-index: 10; transform: translate(-50%, -50%);
  will-change: transform, opacity;
  box-shadow: none;
  opacity: 0.9;
}

.desk-vault-star::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%; background: transparent; z-index: 1;
}

.desk-vault-star.thought-star { width: 4px; height: 4px; }
.desk-vault-star.project-star { width: 7px; height: 7px; }

.star-hover-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
  opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--star-color) 15%, #050508);
  border: 1px solid var(--star-color);
  border-radius: 999px; padding: 8px 20px; display: flex; align-items: center; gap: 10px;
  white-space: nowrap; color: #fff; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 900;
  box-shadow: none;
  transition: opacity 0.2s ease, transform 0.2s ease; 
  z-index: 20; backdrop-filter: none;
  will-change: transform, opacity;
}

.desk-vault-star:hover { z-index: 50; opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
.desk-vault-star:hover .star-hover-card { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }

.vault-legacy-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--capsuleAccent, #88ffaa);
  box-shadow: none;
  margin: 0 4px;
}

.vault-thought-node {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--capsuleAccent, #88ffaa) 15%, #050508);
  border: 1px solid var(--capsuleAccent, #88ffaa);
  border-radius: 999px;
  height: 24px;
  max-width: 24px; 
  min-width: 24px;
  padding: 0 8px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: max-width 0.4s ease, padding 0.2s, background 0.2s, border-color 0.2s;
}

.vault-thought-node:hover,
.vault-thought-node.is-bloomed {
  max-width: 600px;
  padding: 0 16px 0 8px;
  background: color-mix(in srgb, var(--capsuleAccent, #88ffaa) 25%, #050508);
  border-color: #fff;
  box-shadow: none;
  z-index: 10;
}

.vault-thought-node:hover .vault-thought-text,
.vault-thought-node.is-bloomed .vault-thought-text {
  opacity: 1;
  transition-delay: 0.1s; 
}

.vault-thought-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--capsuleAccent, #88ffaa);
  box-shadow: none;
  flex-shrink: 0;
}

.vault-thought-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--capsuleAccent, #88ffaa);
  white-space: nowrap;
  margin-left: 8px;
  opacity: 0;
  text-shadow: none;
  transition: opacity 0.2s;
}

.vault-thought-node:hover .vault-thought-text {
  opacity: 1;
  color: #fff;
  transition-delay: 0.1s;
}

/* =========================================
   TIMELINE GAPS & MACRO HEADERS
   ========================================= */

.gap-month-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  opacity: 0;
  width: 100%;
  animation: fade-in-marker 0.2s ease forwards;
}

.gap-month-divider.macro-group-header {
  margin: 60px 0 30px 0; 
}
.timeline-nodes-container > .gap-month-divider.macro-group-header:first-child {
  margin-top: 10px; 
}

.gap-month-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin: 6px 0;
  font-weight: 900;
  color: var(--capsuleAccent, #fff);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.5);
  background: transparent;
  padding: 0;
  position: relative;
  z-index: 5;
}

.macro-group-header .gap-month-text {
    letter-spacing: 6px !important;
    font-size: 14px !important;
}

.month-line {
  width: 2px;
  height: 15px;
  background: color-mix(in srgb, var(--capsuleAccent, #fff) 30%, rgba(255, 255, 255, 0.2));
}

@keyframes fade-in-marker {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

.time-gap-wrapper {
    width: 100%;
    box-sizing: border-box;
    --gap-glow: 0; 
    content-visibility: auto;
    contain-intrinsic-size: auto 60px;
}

.time-gap-wrapper.is-horizon-tail {
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.time-gap-container {
    display: grid;
    grid-template-columns: repeat(7, 4px);
    gap: 8px 10px;
    justify-content: center;
    margin: 10px auto 30px auto; 
    position: relative;
    z-index: 1;
    width: 100%;
}

.time-gap-spacer {
    width: 4px;
    height: 4px;
    pointer-events: none;
}

.time-gap-day {
    width: 4px;
    height: 4px;
    border-radius: 1px;
    opacity: 1;
    transform: scale(1);
    background: color-mix(in srgb, var(--capsuleAccent, #fff) calc(20% + (80% * var(--gap-glow))), rgba(255, 255, 255, 0.2));
    box-shadow: none;
    position: relative;
}

.time-gap-day.is-weekend {
    background: color-mix(in srgb, rgb(var(--circadian-accent, 85,221,255)) calc(40% + (60% * var(--gap-glow))), rgba(85, 221, 255, 0.4));
    box-shadow: none;
    transform: translateZ(0);
}

.time-gap-wrapper.is-revealed .time-gap-day {
    animation: none;
}

body.is-scrubbing .time-gap-day {
    animation: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.time-gap-day.project-start-day {
  position: relative;
  background-color: var(--proj-accent, var(--capsuleAccent, #88ffaa)) !important;
  box-shadow: none;
  z-index: 5;
  transform: scale(1.3); 
}

.time-gap-day.project-start-day::before {
  content: '';
  position: absolute;
  bottom: 100%; 
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 45px; 
  background: var(--proj-accent, var(--capsuleAccent, #88ffaa));
  box-shadow: none;
  z-index: -1;
  opacity: 1.0;
  transform-origin: bottom; 
  animation: none;
}

.project-target-day {
    position: relative;
    background: var(--proj-accent, var(--capsuleAccent)) !important;
    box-shadow: none !important;
    z-index: 10;
    transform: scale(1.6);
}

.time-gap-wrapper.is-revealed .project-target-day {
    animation: none;
}

.timeline-block {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  width: 100%;
}

.project-label {
  font-weight: 900;
  margin-bottom: 20px;
  position: relative;
  color: var(--capsuleAccent);
}

.project-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10px;
  width: 40px;
  height: 20px;
  border-left: 2px solid var(--capsuleAccent);
  border-bottom: 2px solid var(--capsuleAccent);
  border-bottom-left-radius: 4px;
}

.days-row {
  display: flex;
  gap: 8px;
  margin-left: 50px;
}

.day-item {
  padding: 4px 8px;
  background: color-mix(in srgb, var(--capsuleAccent) 15%, #111);
  border: 1px solid color-mix(in srgb, var(--capsuleAccent) 30%, transparent);
  border-radius: 4px;
}

.time-gap-day::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  z-index: 1;
}

.time-gap-day:hover {
  transform: scale(1.8);
  box-shadow: none;
  background-color: var(--capsuleAccent, #fff);
  z-index: 10;
  cursor: crosshair;
}

.time-gap-day.project-start-day:hover {
  transform: scale(1.8);
  background-color: #fff !important;
}

.is-horizon-tail .time-gap-day:hover {
  background-color: color-mix(in srgb, var(--capsuleAccent) 40%, rgba(255, 255, 255, 0.4));
}

.horizon-tail-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  width: 100%;
}

.timeline-controls {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

.timeline-toggle-btn {
  background: color-mix(in srgb, var(--capsuleAccent, #88ffcc) 10%, #050508); 
  border: 1px solid color-mix(in srgb, var(--capsuleAccent, #88ffcc) 30%, rgba(255,255,255,0.2));
  color: color-mix(in srgb, var(--capsuleAccent, #88ffcc) 70%, #fff); 
  padding: 6px 16px;
  border-radius: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer; box-shadow: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.timeline-toggle-btn:hover {
  color: #fff;
  background: color-mix(in srgb, var(--capsuleAccent, #88ffcc) 25%, #050508);
  border-color: var(--capsuleAccent, #88ffcc);
}

.timeline-toggle-btn.active {
  background: var(--capsuleAccent, #88ffcc);
  color: #000; 
  border-color: #fff;
  box-shadow: none;
  text-shadow: none;
}





/* =========================================
   STASIS TRENCH (ADAPTIVE THEME FIXES)
   ========================================= */

.stasis-header {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--capsuleAccent, #fff) 40%, transparent);
  margin-bottom: 20px;
}

.stasis-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 800px;
  width: 100%;
}

.stasis-node {
  border: 1px dashed color-mix(in srgb, var(--stasis-accent) 50%, var(--capsuleAccent, #fff));
  color: color-mix(in srgb, var(--capsuleAccent, #fff) 70%, transparent);
  background: color-mix(in srgb, var(--capsuleAccent, #fff) 5%, transparent);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  filter: grayscale(1);
  opacity: 0.5;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stasis-node:hover {
  opacity: 1;
  filter: grayscale(0);
  color: var(--capsuleAccent, #fff);
  border-color: var(--stasis-accent);
  background: color-mix(in srgb, var(--stasis-accent) 15%, transparent);
}


/* =========================================
   MOBILE / SMALL SCREEN OVERRIDES
   ========================================= */
@media (max-width: 768px) {
  .timeline-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}