:root {
  color-scheme: dark;
  --bg:#020306;
  --text:rgba(244,247,255,.92);
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body {
  font-family:"Noto Serif JP", serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button, label { font:inherit; }
button { color:inherit; }
[hidden] { display:none !important; }

.app-shell { min-height:100vh; width:100%; }

/* EMPTY */
.landing {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 22px;
  background:
    radial-gradient(circle at 50% 43%, rgba(48,70,110,.075), transparent 25%),
    #020306;
}
.drop-zone {
  width:min(620px,100%);
  min-height:390px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  outline:none;
}
.memory-point {
  width:3px;
  height:3px;
  margin-bottom:42px;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 0 18px 5px rgba(196,217,255,.38),
    0 0 82px 28px rgba(83,120,184,.12),
    0 0 150px 58px rgba(53,88,150,.055);
  animation:breathe 4.8s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { transform:scale(.92); filter:brightness(.92); }
  50% { transform:scale(1.08); filter:brightness(1.08); }
}
.brand {
  margin:0 0 34px;
  color:rgba(245,247,252,.86);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:clamp(25px,3.2vw,40px);
  font-weight:400;
  letter-spacing:.12em;
}
.landing-actions { display:flex; align-items:center; gap:22px; }
.primary-btn {
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(245,247,252,.94);
  color:#080a0e;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:9px;
  letter-spacing:.13em;
  transition:.2s ease;
}
.primary-btn:hover { background:#fff; transform:translateY(-1px); }
.text-btn {
  cursor:pointer;
  border:0;
  background:transparent;
  color:rgba(235,241,255,.34);
  padding:10px 0;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:9px;
  letter-spacing:.13em;
  transition:.18s ease;
}
.text-btn:hover { color:rgba(255,255,255,.80); }
.drop-zone.dragover .memory-point {
  box-shadow:
    0 0 22px 7px rgba(210,227,255,.48),
    0 0 100px 38px rgba(88,128,194,.15);
}

/* INGEST / REVEAL / ATLAS */
.workspace { width:100%; height:100vh; min-height:620px; background:#020306; }
.atlas-stage {
  position:relative;
  width:100%;
  height:100%;
  min-height:620px;
  overflow:hidden;
  background:#020306;
}
#atlasCanvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
#atlasCanvas.dragging { cursor:grabbing; }

.ingest-overlay {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .65s ease;
}
.ingest-overlay.show { opacity:1; }
.ingest-overlay span {
  color:rgba(245,247,252,.58);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:11px;
  letter-spacing:.18em;
}

.atlas-heading {
  position:absolute;
  left:30px;
  top:27px;
  display:flex;
  flex-direction:column;
  gap:9px;
  pointer-events:none;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.atlas-stage.atlas-ready .atlas-heading {
  opacity:1;
  transform:translateY(0);
}
.atlas-name {
  color:rgba(247,249,255,.72);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:14px;
  letter-spacing:.12em;
}
.atlas-heading small {
  color:rgba(236,241,253,.30);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:10px;
  letter-spacing:.05em;
}

.atlas-actions {
  position:absolute;
  right:25px;
  top:20px;
  display:flex;
  align-items:center;
  gap:6px;
  opacity:0;
  transition:opacity .45s ease;
}
.atlas-stage.atlas-ready.chrome-awake .atlas-actions { opacity:.44; }
.atlas-actions:hover, .atlas-actions:focus-within { opacity:.86 !important; }

.chrome-btn {
  cursor:pointer;
  border:0;
  background:transparent;
  padding:10px 7px;
  color:rgba(238,243,255,.27);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:8px;
  letter-spacing:.12em;
  transition:.18s ease;
}
.chrome-btn:hover { color:rgba(255,255,255,.78); }

.zoom-controls {
  position:absolute;
  right:23px;
  bottom:48px;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  transition:opacity .45s ease;
}
.atlas-stage.atlas-ready.chrome-awake .zoom-controls { opacity:.24; }
.zoom-controls:hover, .zoom-controls:focus-within { opacity:.72 !important; }
.round-btn {
  width:31px;
  height:31px;
  border-radius:50%;
  border:1px solid rgba(237,243,255,.10);
  background:rgba(4,6,11,.16);
  backdrop-filter:blur(8px);
  cursor:pointer;
  color:rgba(246,249,255,.60);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:13px;
}
.round-btn:hover { border-color:rgba(255,255,255,.26); color:#fff; }
.fit-btn { font-size:6px; letter-spacing:.06em; }

.memory-dialog, .export-dialog {
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  background:#04060a;
  color:var(--text);
  box-shadow:0 30px 120px rgba(0,0,0,.74);
}
.memory-dialog::backdrop, .export-dialog::backdrop {
  background:rgba(0,0,0,.84);
  backdrop-filter:blur(12px);
}
.memory-dialog {
  width:min(820px,calc(100vw - 28px));
  max-height:calc(100vh - 32px);
  border-radius:12px;
  overflow:hidden;
}
.memory-dialog img, .demo-memory {
  display:block;
  width:100%;
  max-height:77vh;
  object-fit:contain;
  background:#020306;
}
.demo-memory {
  aspect-ratio:3/2;
  background:radial-gradient(circle at 40% 35%, rgba(220,198,174,.62), rgba(72,58,94,.24) 18%, rgba(4,7,12,.99) 62%);
}
.dialog-close {
  position:absolute;
  right:9px;
  top:8px;
  z-index:2;
  width:29px;
  height:29px;
  border-radius:50%;
  border:0;
  background:rgba(0,0,0,.24);
  color:rgba(255,255,255,.48);
  cursor:pointer;
  font-size:16px;
}
.memory-nav {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:10px 14px 1px;
  color:rgba(237,242,253,.34);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:8px;
  letter-spacing:.09em;
}
.memory-nav-btn {
  cursor:pointer;
  border:0;
  background:transparent;
  color:rgba(235,241,255,.34);
  padding:8px 6px;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:8px;
  letter-spacing:.10em;
}
.memory-nav-btn:hover { color:rgba(255,255,255,.82); }
.memory-index { text-align:center; }
.memory-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:4px 15px 14px;
  color:rgba(237,242,253,.28);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:8px;
  letter-spacing:.06em;
}

.export-dialog {
  width:min(310px,calc(100vw - 32px));
  border-radius:12px;
  padding:24px;
  text-align:center;
}
.export-dialog > p {
  margin:0 0 22px;
  color:rgba(246,249,255,.50);
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:9px;
  letter-spacing:.16em;
}
.export-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.export-option {
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  background:transparent;
  padding:17px 10px;
  font-family:"Libre Baskerville", Georgia, serif;
  font-size:13px;
}
.export-option:hover {
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.018);
}
.export-option small {
  display:block;
  margin-top:7px;
  color:rgba(241,246,255,.25);
  font-size:7px;
  letter-spacing:.09em;
}

.toast {
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translate(-50%,8px);
  padding:8px 12px;
  border-radius:999px;
  background:rgba(12,15,22,.82);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
  font-family:"Noto Serif JP", serif;
  font-size:9px;
  opacity:0;
  pointer-events:none;
  transition:.2s ease;
  z-index:9;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:720px) {
  .atlas-heading { left:16px; top:17px; gap:6px; }
  .atlas-actions { right:11px; top:10px; gap:0; }
  .zoom-controls { right:12px; bottom:43px; }
  .brand { font-size:28px; letter-spacing:.09em; }
  .memory-meta { flex-direction:column; gap:4px; }
}

@media (hover:none) {
  .atlas-stage.atlas-ready .atlas-actions { opacity:.24; }
  .atlas-stage.atlas-ready .zoom-controls { opacity:.17; }
}