body.arc-mode { overflow: hidden; background: #020605; overscroll-behavior: none; }
body.arc-mode .moss-glow, body.arc-mode .sidebar, body.arc-mode .topbar, body.arc-mode .nav-scrim { display: none; }
body.arc-mode .app { display: block; min-height: 100dvh; }
body.arc-mode .main { width: 100%; min-height: 100dvh; padding: 0; }
body.arc-mode .composer { width: 100%; min-height: 100dvh; margin: 0; }

.arc-atlas, .arc-state { position: relative; height: 100dvh; width: 100%; overflow: hidden; isolation: isolate;
  color: #f3f4f1; background: radial-gradient(ellipse at 50% 42%, #0b1d15 0, #06100c 35%, #020605 73%); }
.arc-atlas::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 24%, rgba(0, 3, 2, .48) 100%); }
.arc-chrome { position: absolute; z-index: 8; top: max(18px, env(safe-area-inset-top)); left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.arc-back, .arc-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  background: none; color: rgba(255, 255, 255, .78); font: 300 24px/1 Georgia, serif;
  text-shadow: 0 0 9px #ffffff60, 0 0 22px #ffffff25; cursor: pointer; pointer-events: auto; }
.arc-back:hover, .arc-icon:hover { color: #fff; text-shadow: 0 0 12px #ffffffb0; }
.arc-controls { display: flex; gap: 5px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.arc-controls .arc-icon { font-size: 20px; pointer-events: none; }
.arc-atlas[data-mode="detail"] .arc-controls { opacity: .8; pointer-events: auto; }
.arc-atlas[data-mode="detail"] .arc-controls .arc-icon { pointer-events: auto; }
.arc-state > .arc-back { position: absolute; z-index: 8; left: 18px; top: max(18px, env(safe-area-inset-top)); }
.arc-loading { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 16px 3px #ffffff70; animation: star-breath 2s ease-in-out infinite alternate; }
.arc-error { position: absolute; top: 46%; width: 100%; text-align: center; color: #a0aaa3; }

.arc-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none; }
.arc-viewport.is-moving { cursor: grabbing; }
.arc-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.arc-threads { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.arc-thread { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .6s; }
.thread-core { stroke: #f5f7f4; stroke-width: .65; opacity: .14; }
.thread-glow { stroke: #fff; stroke-width: 1.7; opacity: 0; }
.thread-mist { stroke: #fff; stroke-width: 4; opacity: 0; }
.thread-filament { stroke-width: .55; opacity: .03; }
.thread-filament-mist { stroke-width: 1.6; opacity: 0; }
.thread-flow { stroke-width: .8; opacity: 0; }
.thread-core.is-lit { opacity: .88; }
.thread-glow.is-lit { opacity: .16; }
.thread-mist.is-lit { opacity: .18; }
.thread-filament.is-lit { opacity: .92; }
.thread-filament-mist.is-lit { opacity: .18; }
.thread-flow.is-lit { opacity: .65; }
.region-thread { visibility: hidden; }
.arc-atlas[data-mode="overview"] .memory-thread { opacity: .035; }
.arc-atlas[data-mode="overview"] .region-thread { visibility: visible; }
.arc-atlas[data-mode="overview"] .region-thread.thread-core { stroke-width: .85; opacity: .24; }
.arc-atlas[data-mode="overview"] .region-thread.thread-core.is-lit { opacity: .92; }
.arc-atlas[data-mode="leaving"] .region-thread { visibility: visible; }
.arc-memory-name, .arc-starfield-name { position: absolute; z-index: 3; border: 0; background: none;
  transform: translate(-50%, -50%); padding: 12px; color: #d5dad6; cursor: pointer;
  font-family: Georgia, "Songti SC", "Noto Serif CJK SC", serif; }
.arc-memory-name { width: 190px; min-height: 48px; text-align: center; font-size: 15px; line-height: 1.6;
  letter-spacing: .06em; text-wrap: balance; }
.arc-name-text { position: relative; display: block; opacity: var(--name-opacity, 0); transition: color .4s, text-shadow .4s, transform .4s; }
.arc-memory-name::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 8px 1px #ffffff50;
  transform: translate(-50%, -50%) scale(var(--inverse-scale)); opacity: calc(1 - var(--name-opacity, 0)); }
.arc-memory-name::before { content: ""; position: absolute; z-index: -1; width: 500px; height: 500px;
  left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #71927b28, #284f3920 25%, #10281b0a 52%, transparent 70%); transition: opacity .6s; }
.arc-memory-name.is-focus { z-index: 5; color: #fff; }
.arc-memory-name.is-focus::before { opacity: 1; }
.arc-memory-name.is-focus .arc-name-text { transform: scale(1.2); text-shadow: 0 0 5px #ffffff80, 0 0 17px #ffffff60, 0 0 38px #ffffff30; }
.arc-memory-name:hover .arc-name-text { color: #fff; text-shadow: 0 0 15px #ffffff65; }
.arc-name-text::after { content: attr(data-title); position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.is-opening .arc-name-text::after { animation: name-echo .38s ease-out both; }
.arc-starfield-name { z-index: 6; width: 150px; font-size: clamp(24px, 4vw, 32px); font-weight: 400;
  letter-spacing: .32em; text-indent: .32em; line-height: 1.8; color: #eef2ed;
  transform: translate(-50%, -50%) scale(var(--inverse-scale));
  text-shadow: 0 0 16px #ffffff55, 0 0 46px #ffffff20; transition: opacity .45s, filter .45s; }
.arc-starfield-name::before { content: ""; position: absolute; z-index: -1; inset: -65px -40px;
  background: radial-gradient(ellipse, #78927d16, transparent 65%); pointer-events: none; }
.arc-starfield-name:hover { color: #fff; text-shadow: 0 0 18px #ffffffa0, 0 0 48px #ffffff40; }
.arc-starfield-name.is-focus { color: #fff; text-shadow: 0 0 8px #ffffffa0, 0 0 28px #ffffff65; }
.arc-starfield-name[data-starfield="unnamed"] { font-size: 19px; color: #9ca79f; text-shadow: 0 0 16px #ffffff25; }
.arc-starfield-name[hidden] { display: none; }
.arc-atlas:not([data-mode="overview"]) .arc-starfield-name { opacity: 0; pointer-events: none; filter: blur(5px); }
.arc-atlas[data-mode="entering"] .arc-starfield-name.is-focus { animation: starfield-dive .98s cubic-bezier(.4, 0, .2, 1) both; }
.arc-atlas[data-mode="entering"] .arc-world, .arc-atlas[data-mode="leaving"] .arc-world { pointer-events: none; }
.arc-thread.is-outside, .arc-memory-name.is-outside { visibility: hidden; }
.arc-atlas[data-mode="overview"] .arc-memory-name { pointer-events: none; }
@keyframes name-echo { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.55); filter: blur(2px); } }
@keyframes starfield-dive {
  0% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(var(--inverse-scale)); }
  68%, 100% { opacity: 0; filter: blur(6px); transform: translate(-50%, -50%) scale(calc(var(--inverse-scale) * 7)); }
}
@keyframes star-breath { to { opacity: .3; transform: scale(.65); } }
@media (max-width: 720px) {
  .arc-chrome { left: 12px; right: 12px; }
  .arc-memory-name { width: 170px; font-size: 14px; }
  .arc-starfield-name { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-atlas *, .arc-state * { animation: none !important; transition: none !important; }
}