.memory-dialog {
  width:min(880px,calc(100% - 28px));
  max-height:min(94dvh,920px);
  padding:30px 28px 18px;
  background:radial-gradient(ellipse at 100% 0,#acc8cb0a,transparent 65%),#101419;
}
.memory-dialog h2 { font-size:32px;line-height:1.06;margin-top:13px;letter-spacing:-.05em; }
.memory-dialog h2 span { color:var(--accent); }
.memory-dialog .dialog-description { font-size:12px;line-height:1.55;margin:9px 0 13px; }
.memory-chapters {
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(48px,1fr);
  gap:8px;margin-bottom:12px;overflow-x:auto;overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;scroll-padding-inline:1px;scrollbar-width:none;
}
.memory-chapters::-webkit-scrollbar { display:none; }
.memory-chapters button {
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  min-height:42px;padding:0 10px;border:1px solid #a9c8cc1e;border-radius:2px;
  background:#d8eeee05;color:#84939b;font-size:10px;letter-spacing:.13em;
  scroll-snap-align:center;transition:color .25s,border-color .25s,background .25s;
}
.memory-chapters button:hover { color:#d9efeb;border-color:#a9c8cc66;background:#d8eeee0b; }
.memory-chapters button[aria-current="true"] { color:#d9efeb;border-color:var(--accent);background:#b7dcd710; }
.memory-chapters button:focus-visible { outline:1px solid #d8eeea;outline-offset:-3px; }
.memory-chapters button i { font-size:10px;font-style:normal;color:var(--accent); }
.memory-stage {
  position:relative;height:clamp(260px,44dvh,460px);
  border:1px solid #b5d5d52a;border-radius:4px;overflow:hidden;background:#080b0f;
  isolation:isolate;
}
.memory-stage img { width:100%;height:100%;object-fit:contain;display:block; }
.memory-stage canvas {
  position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;
  transition:opacity .8s;
}
.memory-light {
  position:absolute;z-index:2;left:0;top:0;width:130px;height:130px;
  pointer-events:none;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#d8f6ee22 0,#b5ded621 16%,#b5ded608 42%,transparent 70%);
  transform:translate3d(-65px,-65px,0);mix-blend-mode:screen;transition:opacity .2s;will-change:transform;
}
.memory-stage.is-touching .memory-light { opacity:1; }
.memory-hint {
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;text-align:center;
  background:radial-gradient(ellipse,#abcbd407,transparent 70%);transition:opacity .35s;
}
.memory-swipe {
  position:relative;display:block;width:52px;height:9px;
  background:linear-gradient(90deg,transparent,#9fc4c1 22%,#d4ebe7 50%,#9fc4c1 78%,transparent) center/100% 1px no-repeat;
  opacity:.85;
}
.memory-swipe i {
  position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;
  background:#e3f3ef;box-shadow:0 0 5px #d4eee8,0 0 13px #9fd8ce99;
  transform:translateY(-50%);animation:memory-swipe-light 2.8s cubic-bezier(.45,0,.55,1) infinite;
}
.memory-hint p { font-size:18px;letter-spacing:-.035em;margin-top:18px; }
.memory-hint small { font-size:8px;letter-spacing:.2em;color:#a1b4bd;margin-top:10px; }
.memory-stage.is-exploring .memory-hint,.memory-stage.is-revealed .memory-hint { opacity:0; }
.memory-stage.is-revealed canvas { opacity:0;pointer-events:none; }
.memory-error {
  position:absolute;z-index:4;inset:0;display:grid;place-items:center;
  text-align:center;padding:30px;background:#101419;color:var(--muted);font-size:12px;
}
.memory-discovery { height:2px;margin-top:1px;background:#badbd716;overflow:hidden; }
.memory-discovery span {
  display:block;width:0;height:100%;
  background:linear-gradient(90deg,#637f92,#c0e7d8,#b7dcd7);
  box-shadow:0 0 16px #b7dcd7aa;transition:width .23s ease-out;
}
.memory-figure figcaption {
  display:flex;justify-content:space-between;align-items:baseline;gap:15px;
  min-height:30px;margin-top:12px;color:#e5eae8;
}
#memoryCaption { font-size:15px;letter-spacing:-.025em;animation:memory-title-in .7s cubic-bezier(.2,.7,.2,1) both; }
#memoryNumber { margin-left:auto;white-space:nowrap;color:#82949a;font-size:9px;letter-spacing:.16em; }
@keyframes memory-title-in { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } }
@keyframes memory-swipe-light {
  0%,12% { left:0;opacity:0; }
  24% { opacity:1; }
  76% { opacity:1; }
  88%,100% { left:48px;opacity:0; }
}
.memory-actions {
  display:grid;grid-template-columns:minmax(130px,1fr) auto;align-items:center;gap:18px;
  margin-top:2px;border-bottom:1px solid var(--line);padding-bottom:8px;
}
.memory-actions p { color:#9eb5b7;font-size:10px;line-height:1.4; }
.memory-actions__buttons { display:grid;grid-auto-flow:column;align-items:center;justify-content:end;gap:5px; }
.memory-actions button {
  min-height:42px;min-width:88px;padding:0 12px;border:1px solid transparent;border-radius:2px;
  background:none;color:#cdd7d5;font-size:10px;white-space:nowrap;
  transition:color .2s,border-color .2s,background .2s,opacity .2s;
}
.memory-actions button:hover:not(:disabled) { color:#fff;border-color:#b7dcd72b;background:#b7dcd708; }
.memory-actions button:focus-visible { outline:1px solid var(--accent);outline-offset:2px; }
.memory-actions button:disabled { opacity:.28;cursor:default; }
.memory-actions #memoryReveal { color:var(--accent);border-color:#b7dcd72b;background:#b7dcd707; }
.memory-next { font-size:10px;color:#8f9ca3;line-height:1.5;margin-top:10px; }
.memory-preview { font-size:9px;color:#7d8990;margin-top:9px; }
.memory-dialog [hidden] { display:none!important; }
body:has(#memoryDialog[open]) { overflow:hidden; }
@media(max-width:520px) {
  .memory-dialog { width:calc(100% - 12px);max-height:calc(100dvh - 12px);padding:28px 15px 14px; }
  .memory-dialog h2 { font-size:27px;margin-top:11px; }
  .memory-dialog .dialog-description { margin:8px 0 12px; }
  .memory-chapters { grid-auto-columns:52px;gap:6px;margin-right:-15px;padding-right:15px; }
  .memory-chapters button { min-height:44px;padding:0 7px;font-size:9px; }
  .memory-stage { height:clamp(190px,32dvh,300px); }
  .memory-actions { grid-template-columns:1fr;gap:2px;padding:6px 0 10px; }
  .memory-actions p { min-height:20px;display:flex;align-items:center; }
  .memory-actions__buttons { grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:4px; }
  .memory-actions button { min-width:0;padding:0 5px;font-size:9px; }
}
@media(max-width:360px) {
  .memory-dialog { padding-inline:12px; }
  .memory-chapters { margin-right:-12px;padding-right:12px; }
  .memory-actions button { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .memory-stage canvas,.memory-hint,.memory-light,.memory-discovery span { transition:none; }
  .memory-swipe i { animation:none;left:24px; }
  #memoryCaption { animation:none; }
}