/* ═══════════════════════════════════════════════════════════════════════
   babel-web — あなたはここにいる (you are in here)
   Existential horror meets combinatorial eternity.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --void:     #06040a;
  --deep:     #0c0814;
  --hollow:   #120b1f;
  --bruise:   #1e0f30;
  --violet:   #5b1a8c;
  --orchid:   #9333ea;
  --specter:  #c084fc;
  --wisp:     #e9d5ff;
  --cursed:   #f0abfc;
  --blood:    #881337;
  --rust:     #9f1239;
  --dim:      #6b5e7a;
  --ash:      #3d3548;
  --gold:     #a0701a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── The void ───────────────────────────────────────────────────────── */
body {
  background: var(--void);
  color: var(--wisp);
  font-family: 'MS Gothic', 'Courier New', 'Osaka', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 50% 0%, var(--bruise) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(91,26,140,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(136,19,55,0.04) 0%, transparent 50%);
}

/* ── VHS scanlines ─────────────────────────────────────────────────── */
.scanlines {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
}

/* ── Bleeding kanji on the walls ────────────────────────────────────── */
.walls {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; opacity: 0.025;
}
.walls::before,
.walls::after {
  position: absolute; font-size: 100px;
  color: var(--violet);
  white-space: pre; line-height: 1.1;
  letter-spacing: 25px;
}
.walls::before {
  content: '死体写真秘密暴露露出裏切真実虚偽画像動画過去未来';
  top: -5%; left: 3%;
  writing-mode: vertical-rl; text-orientation: upright;
  animation: bleedDown 80s linear infinite;
}
.walls::after {
  content: '永遠無限終焉始原無意味存在忘却記録';
  bottom: -5%; right: 3%;
  writing-mode: vertical-rl; text-orientation: upright;
  animation: bleedUp 90s linear infinite;
}
@keyframes bleedDown {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 0; }
}
@keyframes bleedUp {
  0%   { transform: translateY(110vh); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}

/* ── Core layout ────────────────────────────────────────────────────── */
.core {
  position: relative; z-index: 1;
  width: 90vw; margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 3rem;
}

/* Offer page stays narrow and centered */
.page-offer {
  max-width: 720px;
  width: 100%;
}

/* ── Tab bar ────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--bruise);
  width: 100%; max-width: 400px;
}
.tab-btn {
  flex: 1; background: transparent; border: none;
  color: var(--dim); padding: 0.8rem 0;
  font-family: inherit; font-size: 0.8rem;
  letter-spacing: 0.2em; cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-btn:hover { color: var(--specter); }
.tab-btn.active {
  color: var(--cursed);
  border-bottom-color: var(--orchid);
  text-shadow: 0 0 15px rgba(192,132,252,0.4);
}

/* Page container toggle */
.page {
  display: none; flex-direction: column; align-items: center;
  width: 100%; gap: inherit;
}
.page.active { display: flex; }

/* ── Invocation: the whispered question ─────────────────────────────── */
.invocation { text-align: center; }
.whisper {
  font-size: 1.5rem; color: var(--dim);
  letter-spacing: 0.2em; opacity: 0;
  animation: fadeWhisper 0.8s ease-out forwards;
  font-style: italic;
}
.whisper-delay  { animation-delay: 0.8s; }
.whisper-delay2 {
  animation-delay: 1.6s;
  font-size: 1.1rem; color: var(--blood);
  text-shadow: 0 0 20px rgba(136,19,55,0.5);
  font-style: normal;
}
@keyframes fadeWhisper {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Aperture: the dark offering hole ───────────────────────────────── */
.aperture-wrap { text-align: center; }
.aperture-label { margin-bottom: 1rem; }
.ja-label {
  display: block; font-size: 1.3rem; color: var(--specter);
  letter-spacing: 0.4em;
  text-shadow: 0 0 25px rgba(147,51,234,0.5);
}
.en-label {
  font-size: 0.6rem; color: var(--dim);
  letter-spacing: 0.35em;
}

.aperture {
  display: block; position: relative;
  width: 220px; height: 220px; margin: 0 auto;
  cursor: pointer;
}
.aperture-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--violet);
  box-shadow: 0 0 30px rgba(91,26,140,0.3), inset 0 0 30px rgba(91,26,140,0.1);
  transition: all 0.4s ease;
}
.aperture:hover .aperture-ring,
.aperture.drag-over .aperture-ring {
  border-color: var(--orchid);
  box-shadow: 0 0 50px rgba(147,51,234,0.4), inset 0 0 40px rgba(147,51,234,0.15);
  transform: scale(1.04);
}
.aperture.drag-over .aperture-ring {
  animation: aperturePulse 1s ease-in-out infinite;
}
@keyframes aperturePulse {
  0%, 100% { box-shadow: 0 0 50px rgba(147,51,234,0.4), inset 0 0 40px rgba(147,51,234,0.15); }
  50%      { box-shadow: 0 0 80px rgba(192,132,252,0.6), inset 0 0 60px rgba(192,132,252,0.25); }
}
.aperture-inner {
  position: absolute; inset: 15px; border-radius: 50%;
  background: radial-gradient(circle, var(--hollow) 0%, var(--deep) 70%, transparent 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
}
.kanji-core {
  font-size: 2.8rem; color: var(--orchid);
  text-shadow: 0 0 25px var(--violet);
  transition: all 0.3s ease;
}
.aperture:hover .kanji-core,
.aperture.drag-over .kanji-core {
  color: var(--cursed);
  text-shadow: 0 0 40px var(--orchid);
}
.drop-prompt {
  font-size: 0.6rem; color: var(--dim);
  letter-spacing: 0.15em; margin-top: 0.4rem;
  text-align: center; line-height: 1.5;
}
.ghost-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  border-radius: 50%;
}
.implication {
  margin-top: 1rem; font-size: 0.65rem;
  color: var(--rust); font-style: italic;
  letter-spacing: 0.15em; opacity: 0.7;
  text-shadow: 0 0 10px rgba(136,19,55,0.3);
}

/* ── File preview (greedy rendering) ─────────────────────────────────── */
.file-preview {
  width: 100%; max-width: 500px; margin-top: 1.5rem;
  background: var(--deep); border: 1px solid var(--bruise);
  box-shadow: 0 0 25px rgba(15,5,25,0.4), inset 0 0 15px rgba(0,0,0,0.3);
  animation: revealGlow 0.6s ease-out;
}
.preview-label {
  font-size: 0.55rem; color: var(--ash);
  letter-spacing: 0.3em; padding: 0.6rem 1rem 0;
}
.preview-body {
  padding: 1rem; overflow: auto;
}
.preview-body img {
  display: block; max-width: 100%; max-height: 360px;
  margin: 0 auto; border: 1px solid var(--bruise);
  image-rendering: pixelated;
}
.preview-body pre {
  font-family: 'Courier New', monospace;
  font-size: 0.65rem; line-height: 1.6;
  color: var(--wisp); white-space: pre-wrap;
  word-break: break-all; max-height: 320px;
  overflow-y: auto; margin: 0;
  background: rgba(0,0,0,0.2); padding: 0.8rem;
}
.preview-body .preview-unknown {
  text-align: center; color: var(--dim);
  font-size: 0.7rem; font-style: italic;
  padding: 1rem;
}
.preview-body .preview-hex {
  font-family: 'Courier New', monospace;
  font-size: 0.58rem; color: var(--ash);
  white-space: pre-wrap; word-break: break-all;
  max-height: 200px; overflow-y: auto;
}

.preview-body .preview-pdf {
  width: 100%; height: 400px; border: none;
  background: rgba(0,0,0,0.2); border-radius: 2px;
}
.preview-body .preview-media {
  max-width: 100%; max-height: 320px;
  display: block; margin: 0 auto;
  border-radius: 2px;
}

/* ── Wander: explore the shelves ────────────────────────────────────── */
.wander-wrap { text-align: center; width: 100%; }
.wander-divider {
  margin-bottom: 1.5rem; position: relative;
}
.wander-divider::before,
.wander-divider::after {
  content: ''; position: absolute; top: 50%;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
}
.wander-divider::before { right: calc(50% + 30px); }
.wander-divider::after  { left: calc(50% + 30px); }
.divider-glyph {
  font-size: 1.2rem; color: var(--violet);
  text-shadow: 0 0 15px rgba(91,26,140,0.6);
}
.wander-label { margin-bottom: 0.3rem; }
.wander-subtitle {
  font-size: 0.6rem; color: var(--rust); font-style: italic;
  margin-bottom: 1.2rem; letter-spacing: 0.1em;
  opacity: 0.7;
}
.wander-controls {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.7rem; margin-bottom: 1.5rem;
}
.wander-btn {
  background: var(--deep); color: var(--specter);
  border: 1px solid var(--bruise); padding: 0.6rem 1.5rem;
  font-family: inherit; font-size: 0.8rem; letter-spacing: 0.2em;
  cursor: pointer; transition: all 0.3s ease;
  text-transform: uppercase;
}
.wander-btn:hover {
  background: var(--hollow); border-color: var(--violet);
  color: var(--cursed);
  box-shadow: 0 0 20px rgba(91,26,140,0.3);
}
.wander-btn .ja { color: var(--orchid); margin-right: 0.3em; font-size: 1em; }
.wander-or { font-size: 0.6rem; color: var(--dim); letter-spacing: 0.15em; }
.wander-path-input-group {
  display: flex; align-items: center;
  background: var(--deep); border: 1px solid var(--bruise);
  padding: 0.15rem 0.5rem; gap: 0.3rem;
  max-width: min(540px, 95vw); width: 100%;
  overflow: hidden;
}
.wander-path-input-group:focus-within {
  border-color: var(--violet);
  box-shadow: 0 0 15px rgba(91,26,140,0.2);
}
.path-prefix {
  color: var(--orchid); font-size: 1.1rem;
  font-family: inherit;
}
.wander-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--wisp); font-family: inherit; font-size: 0.8rem;
  letter-spacing: 0.1em; padding: 0.5rem 0;
  overflow: hidden; text-overflow: ellipsis;
}
.wander-input::placeholder { color: var(--ash); }
.wander-btn-go { padding: 0.5rem 1rem; font-size: 0.75rem; }
.wander-btn-copy {
  padding: 0.5rem 0.6rem; font-size: 0.75rem;
  border-color: var(--orchid);
}
.wander-btn-copy.copied {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 10px rgba(160,112,26,0.3);
}
.wander-btn-bookmark {
  padding: 0.5rem 0.6rem; font-size: 0.75rem;
  border-color: var(--violet);
}
.wander-btn-bookmark.bookmarked {
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 10px rgba(160,112,26,0.3);
}

/* Virtual shelf display */
.wander-shelf {
  background: var(--deep); border: 1px solid var(--bruise);
  padding: 1.2rem; margin-top: 1.5rem;
  box-shadow: 0 0 30px rgba(15,5,25,0.5), inset 0 0 20px rgba(0,0,0,0.3);
  text-align: left; width: 100%;
  animation: revealGlow 0.6s ease-out;
}
.shelf-lore {
  font-size: 0.65rem; color: var(--rust); font-style: italic;
  text-align: center; margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(136,19,55,0.3);
}

/* FS layout: tree left 1/3, preview right 2/3 */
.shelf-fs {
  display: flex; gap: 0; min-height: 320px;
  border: 1px solid var(--bruise);
}
@media (max-width: 640px) {
  .shelf-fs { flex-direction: column; }
}

/* ── File tree (left 1/3) ──────────────────────────────────────────── */
.fs-tree {
  width: 33.333%; flex-shrink: 0;
  background: var(--hollow);
  border-right: 1px solid var(--bruise);
  padding: 0.6rem 0; overflow-y: auto;
  font-family: 'MS Gothic', 'Courier New', monospace;
  font-size: 0.7rem;
}
@media (max-width: 640px) {
  .fs-tree { width: 100%; border-right: none; border-bottom: 1px solid var(--bruise); max-height: 180px; }
}
.fs-tree-empty {
  padding: 1rem; color: var(--ash); text-align: center;
  font-style: italic; font-size: 0.6rem;
}
.fs-tree-entry {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; cursor: pointer;
  color: var(--dim); transition: all 0.15s ease;
  white-space: nowrap; overflow: hidden;
}
.fs-tree-entry:hover {
  background: rgba(91,26,140,0.12); color: var(--wisp);
}
.fs-tree-entry.selected {
  background: rgba(91,26,140,0.22); color: var(--specter);
  border-left: 2px solid var(--orchid);
}
.fs-tree-dot {
  color: var(--violet); font-weight: bold;
  flex-shrink: 0;
}
.fs-tree-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.05em;
}
.fs-tree-type {
  font-size: 0.55rem; color: var(--ash);
  flex-shrink: 0;
}
.fs-tree-nav {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; cursor: pointer;
  color: var(--violet); transition: all 0.15s ease;
  font-weight: bold;
}
.fs-tree-nav:hover {
  background: rgba(91,26,140,0.12); color: var(--orchid);
}
.fs-tree-nav .ja {
  color: var(--orchid); font-size: 1em;
}
.fs-tree-sep {
  height: 1px; background: var(--bruise);
  margin: 0.3rem 0.5rem;
}

/* ── Preview pane (right 2/3) ──────────────────────────────────────── */
.fs-preview {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem; overflow: auto;
  background: var(--void);
}
.fs-preview-placeholder {
  color: var(--ash); font-size: 0.6rem;
  font-style: italic; letter-spacing: 0.1em;
  text-align: center;
}
.fs-preview-file {
  width: 100%;
}
.fs-preview-file .fs-preview-meta {
  font-size: 0.55rem; color: var(--ash);
  letter-spacing: 0.1em; margin-bottom: 0.8rem;
  text-align: center; word-break: break-all;
}
.fs-preview-file img {
  display: block; max-width: 100%; max-height: 380px;
  margin: 0 auto; border: 1px solid var(--bruise);
  image-rendering: pixelated;
}
.fs-preview-file pre {
  font-family: 'Courier New', monospace;
  font-size: 0.65rem; line-height: 1.6;
  color: var(--wisp); white-space: pre-wrap;
  word-break: break-all; max-height: 360px;
  overflow-y: auto; margin: 0;
  background: rgba(0,0,0,0.2); padding: 0.8rem;
}
.fs-preview-file .preview-hex {
  font-size: 0.58rem; color: var(--ash);
  max-height: 280px; overflow-y: auto;
}
.fs-preview-file .preview-media {
  max-width: 100%; max-height: 320px;
  display: block; margin: 0 auto;
  border-radius: 2px;
}
.fs-preview-file .preview-pdf {
  width: 100%; height: 400px; border: none;
  background: rgba(0,0,0,0.2); border-radius: 2px;
}

/* ── Bookmark panel ────────────────────────────────────────────────── */
.bookmark-panel {
  width: 100%; max-width: 440px; margin-top: 1.5rem;
  background: var(--deep); border: 1px solid var(--bruise);
  box-shadow: 0 0 25px rgba(15,5,25,0.4);
  animation: revealGlow 0.5s ease-out;
}
.bookmark-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--bruise);
}
.bookmark-title {
  font-size: 0.65rem; color: var(--dim);
  letter-spacing: 0.2em;
}
.bookmark-toggle {
  background: none; border: none; color: var(--ash);
  font-size: 0.8rem; cursor: pointer; padding: 0 0.3rem;
  font-family: inherit;
}
.bookmark-toggle:hover { color: var(--specter); }
.bookmark-list {
  max-height: 200px; overflow-y: auto;
}
.bookmark-item {
  display: flex; align-items: center;
  padding: 0.5rem 1rem; gap: 0.5rem;
  cursor: pointer; transition: all 0.15s ease;
  border-bottom: 1px solid rgba(30,15,48,0.3);
}
.bookmark-item:hover {
  background: var(--hollow);
}
.bookmark-path {
  flex: 1; font-family: 'MS Gothic', 'Courier New', monospace;
  font-size: 0.65rem; color: var(--specter);
  word-break: break-all; letter-spacing: 0.05em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookmark-del {
  background: none; border: none; color: var(--ash);
  font-size: 0.7rem; cursor: pointer; padding: 0.2rem;
  font-family: inherit; flex-shrink: 0;
}
.bookmark-del:hover { color: var(--blood); }

/* ── Oracle: computing state ────────────────────────────────────────── */
.oracle { text-align: center; padding: 2rem 0; }
.oracle-eye {
  font-size: 2.5rem; color: var(--orchid);
  display: inline-block;
  animation: eyeWatch 2s ease-in-out infinite;
}
@keyframes eyeWatch {
  0%, 100% { transform: scale(1); text-shadow: 0 0 15px var(--orchid); }
  50%      { transform: scale(1.08); text-shadow: 0 0 35px var(--cursed); }
}
.oracle-text {
  font-size: 0.75rem; color: var(--dim);
  letter-spacing: 0.2em; margin-top: 0.75rem;
}
.oracle-line {
  width: 100px; height: 1px; margin: 1.2rem auto 0;
  background: linear-gradient(90deg, transparent, var(--violet), transparent);
  animation: lineBreathe 1.5s ease-in-out infinite;
}
@keyframes lineBreathe {
  0%, 100% { opacity: 0.4; width: 100px; }
  50%      { opacity: 1; width: 160px; }
}

/* ── Revelation: the found path ─────────────────────────────────────── */
.revelation { text-align: center; width: 100%; }
.reveal-header { margin-bottom: 1.5rem; }
.reveal-kanji {
  display: block; font-size: 1.8rem; color: var(--cursed);
  letter-spacing: 0.4em;
  text-shadow: 0 0 30px rgba(192,132,252,0.5);
  animation: revealGlow 2s ease-out;
}
@keyframes revealGlow {
  0%   { text-shadow: 0 0 5px rgba(192,132,252,0.2); opacity: 0.4; }
  100% { text-shadow: 0 0 30px rgba(192,132,252,0.5); opacity: 1; }
}
.reveal-sub {
  font-size: 0.6rem; color: var(--dim);
  letter-spacing: 0.4em;
}
.reveal-kanji.dead { color: var(--blood); text-shadow: 0 0 25px rgba(136,19,55,0.4); }
.reveal-sub.dead { color: var(--rust); }

.file-meta {
  font-size: 0.65rem; color: var(--ash);
  letter-spacing: 0.1em; margin-bottom: 1.2rem;
  word-break: break-all;
}

/* Path capsule */
.path-capsule {
  background: var(--deep);
  border: 1px solid var(--bruise);
  padding: 1.8rem 1.2rem; margin: 0 auto 1.5rem;
  max-width: 100%; overflow-x: auto;
  position: relative;
  box-shadow: 0 0 40px rgba(30,15,48,0.5), inset 0 0 30px rgba(0,0,0,0.4);
}
.path-capsule::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(91,26,140,0.04) 0%, transparent 50%, rgba(91,26,140,0.04) 100%);
  pointer-events: none;
}
.path-sigil {
  position: absolute; top: -12px; left: 16px;
  font-size: 0.75rem; color: var(--blood);
  background: var(--deep); padding: 0 6px;
  font-weight: bold;
}
.path-scroll {
  font-family: 'MS Gothic', 'Courier New', monospace;
  font-size: 0.95rem; line-height: 1.9; letter-spacing: 0.06em;
  color: var(--specter);
  text-shadow: 0 0 8px rgba(192,132,252,0.4);
  word-break: break-all;
  animation: pathUnveil 2s ease-out;
  position: relative;
}
.path-scroll.path-truncated {
  max-height: 5.7em;       /* ~3 lines — keeps the GO TO FILE button visible */
  overflow: hidden;
}
.path-scroll.path-truncated::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(transparent, var(--deep));
  pointer-events: none;
}
.path-scroll.path-expanded {
  max-height: none;
  overflow: visible;
}
.path-scroll.path-expanded::after { display: none; }
.path-expand-btn {
  display: block; margin: 0.3rem auto 0; padding: 0.2rem 1rem;
  background: transparent; border: 1px solid var(--ash);
  color: var(--ash); font-family: inherit; font-size: 0.65rem;
  letter-spacing: 0.15em; cursor: pointer;
  transition: all 0.3s ease;
}
.path-expand-btn:hover {
  border-color: var(--orchid); color: var(--orchid);
  box-shadow: 0 0 12px rgba(147,51,234,0.15);
}
@keyframes pathUnveil {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0); }
}

/* Copy button */
.seal-btn {
  background: transparent; border: 1px solid var(--violet);
  color: var(--dim); padding: 0.5rem 1.8rem;
  font-family: inherit; font-size: 0.65rem;
  letter-spacing: 0.3em; cursor: pointer;
  transition: all 0.3s ease;
}
.seal-btn:hover {
  border-color: var(--orchid); color: var(--wisp);
  box-shadow: 0 0 20px rgba(147,51,234,0.2);
  text-shadow: 0 0 10px rgba(192,132,252,0.3);
}

/* Aftermath — the creepy one-liner */
.aftermath {
  font-size: 0.62rem; color: var(--rust);
  font-style: italic; letter-spacing: 0.1em;
  margin-top: 1rem; opacity: 0.8;
}

/* ── Error oracle ───────────────────────────────────────────────────── */
.error-oracle {
  font-size: 0.8rem; color: var(--rust);
  opacity: 0.8; letter-spacing: 0.1em;
  margin-top: 1rem;
}

/* ── Footnote ───────────────────────────────────────────────────────── */
.footnote {
  text-align: center; padding-top: 2.5rem;
  border-top: 1px solid rgba(91,26,140,0.1);
  width: 100%;
}
.foot-line {
  font-size: 0.6rem; color: var(--ash);
  letter-spacing: 0.15em; line-height: 2;
}
.dead-text {
  color: var(--rust); opacity: 0.6; font-style: italic;
}
.sig {
  margin-top: 0.8rem; color: var(--violet);
  letter-spacing: 0.2em; font-size: 0.55rem !important;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
.path-capsule::-webkit-scrollbar { height: 3px; }
.path-capsule::-webkit-scrollbar-track { background: transparent; }
.path-capsule::-webkit-scrollbar-thumb {
  background: var(--bruise); border-radius: 2px;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .core { padding: 2.5rem 1rem 3rem; gap: 2.5rem; }
  .whisper { font-size: 1.2rem; }
  .whisper-delay2 { font-size: 0.95rem; }
  .aperture { width: 180px; height: 180px; }
  .kanji-core { font-size: 2.2rem; }
  .path-scroll { font-size: 0.8rem; }
}