/* Reuse the official site's typography and document layout. */
.update-october-page .release-feature { scroll-margin-top: 90px; }
.update-october-page .doc-sec h2[id] { scroll-margin-top: 90px; }
.update-october-page .release-contents ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.update-october-page .release-contents a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 3px; }
.update-october-page .release-media { max-width: 640px; margin: 24px auto; }
.update-october-page .release-media__screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.update-october-page .release-media__screen { min-width: 0; }
.update-october-page .release-media figcaption { margin: 12px 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.8; }
.update-october-page .release-screen-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .88rem; font-weight: 700; color: var(--ink); }
.update-october-page .release-screen-help { margin: 14px 0 0; font-size: .84rem; }
.update-october-page .release-important { margin: 20px 0; padding: 14px 16px; border-left: 3px solid var(--pink); background: #fff4f8; }
.update-october-page .release-important strong { color: var(--pink-deep); }
.update-october-page .release-detail { margin: 24px 0 0; }
.update-october-page .release-detail a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--pink-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.update-october-page .release-detail a:hover { color: var(--ink); }
.update-october-page .release-detail a:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 4px; }
/* Frame the relevant UI without altering the original Figma exports. */
.update-october-page .release-crop {
  --source-width: 375;
  --crop-x: 0;
  --crop-y: 0;
  --crop-width: 375;
  --crop-height: 200;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  aspect-ratio: var(--crop-width) / var(--crop-height);
  border: 1px solid #eee5ec;
  border-radius: 8px;
  background: #fff;
}
.update-october-page .release-crop img {
  position: absolute;
  display: block;
  top: calc(-100% * var(--crop-y) / var(--crop-height));
  left: calc(-100% * var(--crop-x) / var(--crop-width));
  width: calc(100% * var(--source-width) / var(--crop-width));
  max-width: none;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.update-october-page .release-crop--beauty { --crop-y: 620; --crop-height: 164; }
.update-october-page .release-crop--peek { --crop-x: 17; --crop-y: 184; --crop-width: 341; --crop-height: 445; max-width: 375px; border-radius: 16px; }
.update-october-page .release-crop--kyash { --crop-x: 8; --crop-y: 48; --crop-width: 359; --crop-height: 300; max-width: 420px; }
.update-october-page .release-crop--kyash-method { --crop-y: 28; --crop-height: 62; max-width: 420px; border: 0; border-radius: 0; }
.update-october-page .release-crop--result-summary { --crop-x: 16; --crop-y: 141; --crop-width: 343; --crop-height: 165; }
.update-october-page .release-crop--result-graph { --crop-x: 16; --crop-y: 315; --crop-width: 343; --crop-height: 455; }
.update-october-page .release-crop--custom-stickers { --crop-y: 466; --crop-height: 330; max-width: 375px; }
.update-october-page .release-crop--gifts { --crop-x: 8; --crop-y: 48; --crop-width: 359; --crop-height: 290; max-width: 420px; }
.update-october-page .release-gift-preview { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.update-october-page .release-gift-preview p { margin: 0; }
.update-october-page .release-crop--gift-preview { --crop-x: 24; --crop-y: 232; --crop-width: 48; --crop-height: 48; width: 72px; }
.update-october-page .release-live-control { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 16px 20px; }
.update-october-page .release-live-control figcaption { grid-column: 1 / -1; margin: 0; }
.update-october-page .release-crop--live-controls { --source-width: 464; --crop-x: 340; --crop-y: 145; --crop-width: 112; --crop-height: 196; max-width: 112px; margin-inline: 0; }
.update-october-page .release-crop--live-controls::after { content: ""; position: absolute; pointer-events: none; left: 51%; width: 47%; height: 27%; border: 2px solid var(--pink); border-radius: 50%; box-sizing: border-box; }
.update-october-page .release-crop--beauty-control::after { top: 37%; }
.update-october-page .release-media--comments { max-width: 500px; }
.update-october-page .release-crop--live-comments { --source-width: 464; --crop-x: 8; --crop-y: 555; --crop-width: 448; --crop-height: 408; }
.update-october-page .release-stamps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.update-october-page .release-stamps li { min-width: 0; margin: 0; }
.update-october-page .release-stamps img { display: block; width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 640px) {
  .update-october-page .release-live-control { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .update-october-page .release-crop--live-controls { max-width: 112px; margin-inline: auto; }
  .update-october-page .release-contents ol { grid-template-columns: minmax(0, 1fr); }
  .update-october-page .release-media__screens { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .update-october-page .release-media__screen { width: 100%; max-width: 375px; margin-inline: auto; }
  .update-october-page .release-stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}