.album-start-guide {
  position: fixed; z-index: 90; width: min(310px, calc(100vw - 24px));
  padding: 18px 20px 14px; box-sizing: border-box; border: 1px solid #d5ae8f;
  border-radius: 14px; background: #fffdf9; color: #382e26;
  box-shadow: 0 12px 36px #51352122; text-align: left;
  font: 14px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.album-start-guide-step { display: block; padding-right: 28px; color: #a95a2e; font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.album-start-guide h2 { margin: 6px 0 7px; font-size: 19px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.album-start-guide p { margin: 0; color: #796858; font-size: 13px; font-weight: 400; line-height: 1.8; }
.album-start-guide button { font: inherit; cursor: pointer; }
.album-start-guide .album-start-guide-close { position: absolute; right: 8px; top: 6px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9a806a; font-size: 24px; line-height: 1; }
.album-start-guide .album-start-guide-done { display: block; min-height: 40px; margin: 8px 0 0 auto; padding: 6px 12px; border: 0; border-radius: 7px; background: #f6ecdf; color: #97552e; font-size: 12px; font-weight: 500; }
.album-start-guide button:hover { background: #f0e2d1; }
.album-start-guide button:focus-visible { outline: 3px solid #ba7746; outline-offset: 2px; }
.album-start-guide-target { outline: 2px solid #bd7744 !important; outline-offset: 5px !important; }
.album-start-guide-arrow { position: absolute; display: block; width: 12px; height: 12px; border: solid #d5ae8f; border-width: 0 1px 1px 0; background: #fffdf9; pointer-events: none; }
.album-start-guide[data-side="above"] .album-start-guide-arrow { bottom: -7px; left: var(--guide-arrow-x); transform: translateX(-50%) rotate(45deg); }
.album-start-guide[data-side="below"] .album-start-guide-arrow { top: -7px; left: var(--guide-arrow-x); transform: translateX(-50%) rotate(225deg); }
.album-start-guide[data-side="left"] .album-start-guide-arrow { right: -7px; top: var(--guide-arrow-y); transform: translateY(-50%) rotate(-45deg); }
.album-start-guide[data-side="right"] .album-start-guide-arrow { left: -7px; top: var(--guide-arrow-y); transform: translateY(-50%) rotate(135deg); }
@media (max-width: 600px), (max-height: 520px) {
  .album-start-guide { padding: 13px 16px 10px; }
  .album-start-guide h2 { margin: 4px 0 5px; font-size: 17px; }
  .album-start-guide p { font-size: 12px; line-height: 1.7; }
  .album-start-guide .album-start-guide-done { margin-top: 5px; }
}
@media (max-height: 520px) {
  .album-start-guide { width: min(360px, calc(100vw - 24px)); padding: 12px 16px 8px; }
  .album-start-guide-step { display: none; }
  .album-start-guide h2 { margin: 0 30px 5px 0; }
  .album-start-guide p { line-height: 1.6; }
  .album-start-guide .album-start-guide-done { min-height: 36px; }
}