#my-chart-app .chart-intro { margin-bottom: 24px; }
#my-chart-app .chart-refresh-link { display: inline-flex; margin-top: 12px; color: #92764d; border-bottom: 1px solid #c9b38f; padding-bottom: 5px; text-decoration: none; }
#my-chart-app .chart-status { min-height: 1.4em; color: #43516b; }
#my-chart-app .chart-empty { max-width: 760px; margin: 28px auto; padding: 34px; }
#my-chart-app .chart-empty small { color: #92764d; letter-spacing: .16em; }
#my-chart-app .chart-empty h2 { color: #25334d; font-weight: 500; }
#my-chart-app .chart-empty p { line-height: 1.8; color: #55627a; }
#my-chart-app .chart-empty a, #my-chart-app .palace-detail a { color: #735d3d; text-decoration: none; border-bottom: 1px solid #c9b38f; padding-bottom: 4px; }
#my-chart-app .chart-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 0 0 12px; color: #59667c; font-size: .84rem; }
#my-chart-app .chart-meta span + span::before { content: "·"; margin-right: 16px; color: #b5986b; }
#my-chart-app .chart-scroll-hint { display: none; margin: 0 0 10px; color: #64718a; font-size: .86rem; }
#my-chart-app .chart-board-scroll { overflow-x: auto; overscroll-behavior-inline: contain; padding: 4px 2px 14px; scrollbar-color: #bba47e #e9e4de; }
#my-chart-app .chart-board-stage { position: relative; width: min(100%, 1080px); min-width: 820px; margin: 0 auto; overflow: visible; }
#my-chart-app .chart-arrow-layer { position: absolute; inset: 0; z-index: 5; overflow: visible; pointer-events: none; }
#my-chart-app .chart-arrow-halo { fill: none; stroke: #fffdfa; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .88; }
#my-chart-app .chart-arrow-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .86; }
#my-chart-app .chart-arrow-label rect { stroke-width: 1.2; }
#my-chart-app .chart-arrow-label text { font: 700 11px "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
#my-chart-app .chart-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(178px, auto)); gap: 10px; min-width: 820px; max-width: 1080px; margin: 0; }
#my-chart-app .palace-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 14px 14px 12px; border: 1px solid #d7d0c7; border-radius: 10px; background: rgba(255, 253, 249, .88); color: #28364f; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
#my-chart-app .palace-card:hover, #my-chart-app .palace-card:focus-visible, #my-chart-app .palace-card.is-selected { border-color: #b89a6d; box-shadow: 0 8px 24px rgba(43, 52, 69, .08); outline: none; }
#my-chart-app .palace-card:hover { transform: translateY(-2px); }
#my-chart-app .palace-card.is-current-decade { background: linear-gradient(145deg, #fffdfa, #f0edf3); }
#my-chart-app .palace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
#my-chart-app .palace-name { font-size: 1rem; font-weight: 600; letter-spacing: .06em; }
#my-chart-app .palace-branch { color: #6d7890; font-size: .82rem; }
#my-chart-app .palace-flags { display: flex; gap: 4px; }
#my-chart-app .palace-flag { padding: 2px 5px; border: 1px solid #d6c29f; border-radius: 999px; color: #806747; font-size: .65rem; line-height: 1.2; }
#my-chart-app .palace-major-stars { display: flex; flex-wrap: wrap; gap: 4px 9px; min-height: 1.75em; margin: 12px 0 6px; color: #273651; font-size: 1.12rem; font-weight: 600; line-height: 1.5; }
#my-chart-app .palace-major-stars.is-empty { color: #8991a0; font-size: .82rem; font-weight: 400; }
#my-chart-app .mutagen-tag { display: inline-block; margin-left: 3px; padding: 1px 4px; border-radius: 4px; background: #eee8f2; color: #685c78; font-size: .62rem; font-weight: 500; vertical-align: .22em; }
#my-chart-app .mutagen-tag.is-yearly { background: #f3ead9; color: #826745; }
#my-chart-app .palace-minor-stars, #my-chart-app .palace-other-stars { min-height: 1.3em; margin: 0; color: #58657b; font-size: .79rem; line-height: 1.65; overflow-wrap: anywhere; }
#my-chart-app .palace-other-stars { color: #778197; font-size: .71rem; }
#my-chart-app .palace-info { display: grid; gap: 3px; margin-top: auto; padding-top: 8px; border-top: 1px solid #e7e1d8; color: #68748a; font-size: .69rem; line-height: 1.45; }
#my-chart-app .chart-center { grid-column: 2 / span 2; grid-row: 2 / span 2; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; border: 1px solid #d5c6ad; border-radius: 13px; background: radial-gradient(ellipse at 50% 5%, rgba(220, 214, 227, .55), transparent 70%), #f9f6f0; text-align: center; }
#my-chart-app .chart-center .section-kicker { margin-bottom: 8px; color: #987b51; letter-spacing: .15em; font-size: .72rem; }
#my-chart-app .chart-center h2 { margin: 0 0 8px; color: #26344e; font-size: 1.24rem; font-weight: 500; }
#my-chart-app .center-birth { margin: 0 0 13px; color: #5d6980; font-size: .82rem; line-height: 1.65; }
#my-chart-app .center-data { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 auto; text-align: left; }
#my-chart-app .center-data > div { display: flex; align-items: baseline; gap: 6px; padding: 0; background: none; }
#my-chart-app .center-data .center-pillars { display: flex; gap: 18px; }
#my-chart-app .center-pillar { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#my-chart-app .center-data dt { color: #92764d; font-size: .65rem; letter-spacing: .1em; }
#my-chart-app .center-data dd { margin: 3px 0 0; color: #34415a; font-size: .82rem; }
#my-chart-app .palace-detail { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 900px; margin: 18px auto 0; padding: 20px 24px; border: 1px solid #d8d0c5; border-radius: 10px; background: #fbf8f3; }
#my-chart-app .palace-detail .section-kicker { margin: 0 0 5px; color: #987b51; font-size: .68rem; letter-spacing: .16em; }
#my-chart-app .palace-detail h2 { margin: 0; color: #26344e; font-size: 1.2rem; font-weight: 500; }
#my-chart-app .palace-detail p:not(.section-kicker) { margin: 4px 0 0; color: #647087; font-size: .88rem; }
#my-chart-app .chart-disclaimer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; color: #707b8d; font-size: .78rem; }
#my-chart-app .chart-disclaimer a { color: #806747; text-decoration: none; }
#my-chart-app .chart-support-links { display: flex; justify-content: center; gap: 24px; margin: 28px 0 8px; }
#my-chart-app .chart-support-links a { color: #526078; text-decoration: none; font-size: .88rem; }
#my-chart-app .chart-support-links a:hover { color: #8e7249; }
@media (max-width: 760px) {
  #my-chart-app .chart-scroll-hint { display: block; }
  #my-chart-app .chart-board { grid-template-rows: repeat(4, minmax(166px, auto)); }
  #my-chart-app .chart-center { padding: 16px; }
  #my-chart-app .palace-card { padding: 12px 10px 10px; }
  #my-chart-app .palace-detail { align-items: flex-start; flex-direction: column; }
  #my-chart-app .chart-disclaimer { flex-direction: column; }
  #my-chart-app .chart-support-links { flex-wrap: wrap; }
}
/* Chart-only readability and placement refinements. */
#my-chart-app .chart-board { grid-template-rows: repeat(4, minmax(190px, auto)); }
#my-chart-app .palace-card { padding: 16px 16px 13px; }
#my-chart-app .palace-heading { align-items: center; }
#my-chart-app .palace-name { color: #26344e; font-size: 1.06rem; font-weight: 650; }
#my-chart-app .palace-stem-branch { display: inline-flex; gap: 7px; align-items: center; color: #34415a; font-size: .92rem; font-weight: 600; }
#my-chart-app .palace-stem { color: #526078; }
#my-chart-app .palace-branch { color: #26344e; font-size: .94rem; font-weight: 700; }
#my-chart-app .palace-flags { display: flex; gap: 5px; margin-top: 6px; }
#my-chart-app .palace-flag { color: #59462c; background: #f3ecdf; border-color: #c9b58f; font-size: .72rem; font-weight: 600; }
#my-chart-app .palace-major-stars { gap: 5px 10px; margin: 14px 0 8px; color: #202d47; font-size: 1.28rem; font-weight: 700; line-height: 1.45; }
#my-chart-app .palace-major-stars.is-empty { color: #526078; font-size: .9rem; }
#my-chart-app .palace-minor-stars { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; color: #46546d; font-size: .98rem; font-weight: 550; line-height: 1.6; }
#my-chart-app .chart-star { color: inherit; }
#my-chart-app .mutagen-tag { margin-left: 4px; padding: 1px 5px; color: #514166; background: #e9e3ee; font-size: .68rem; font-weight: 700; }
#my-chart-app .mutagen-tag.is-yearly { color: #604a2d; background: #efe3cf; }
#my-chart-app .palace-flow-tag { margin-left: 2px; font-size: .58rem; font-weight: 700; vertical-align: .15em; }
#my-chart-app .palace-flow-tag.is-outward { color: #43805f; }
#my-chart-app .palace-flow-tag.is-inward { color: #b64e50; }
#my-chart-app .palace-info { gap: 4px; padding-top: 9px; color: #4f5d74; font-size: .79rem; font-weight: 500; }
#my-chart-app .chart-center .section-kicker { font-size: .78rem; }
#my-chart-app .center-birth { color: #47546c; font-size: .92rem; }
#my-chart-app .center-data dt { font-size: .72rem; }
#my-chart-app .center-data dd { color: #293751; font-size: .91rem; font-weight: 550; }
@media (max-width: 760px) {
  #my-chart-app .chart-board { grid-template-rows: repeat(4, minmax(178px, auto)); }
  #my-chart-app .palace-card { padding: 13px 11px 11px; }
  #my-chart-app .palace-name { font-size: 1rem; }
  #my-chart-app .palace-major-stars { font-size: 1.15rem; }
  #my-chart-app .palace-minor-stars { font-size: .9rem; }
  #my-chart-app .palace-info { font-size: .74rem; }
}

/* Keep the chart's intrinsic square layout inside its own mobile scrollport. */
body.my-chart-page { overflow-x: clip; }
body.my-chart-page #my-chart-app { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
body.my-chart-page #my-chart-app .page-content,
body.my-chart-page #my-chart-app #chart-content { width: 100%; min-width: 0; }
body.my-chart-page #my-chart-app .chart-board-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
body.my-chart-page #my-chart-app .chart-board-stage { margin: 0 auto; }
body.my-chart-page #my-chart-app .chart-board { width: min(100%, 1080px); }
@media (max-width: 760px) {
  body.my-chart-page #my-chart-app .chart-scroll-hint { display: block; font-size: .82rem; }
  body.my-chart-page #my-chart-app .chart-board-scroll { padding-inline: 2px; }
  body.my-chart-page #my-chart-app .chart-board-stage { width: 820px; min-width: 820px; margin: 0; }
  body.my-chart-page #my-chart-app .chart-board {
    width: 820px;
    min-width: 820px;
    max-width: none;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Keep each star and its transformation markers in a dedicated, wrapping row. */
#my-chart-app .palace-major-stars,
#my-chart-app .palace-minor-stars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: start;
  gap: 5px;
  min-height: 0;
  overflow: visible;
}
#my-chart-app .palace-major-stars { margin: 14px 0 8px; }
#my-chart-app .chart-star {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 3px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.4;
}
#my-chart-app .chart-star-name { display: inline-block; flex: 0 0 auto; white-space: nowrap; }
#my-chart-app .chart-star-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  max-width: 100%;
}
#my-chart-app .mutagen-tag,
#my-chart-app .palace-flow-tag { margin: 0; vertical-align: baseline; }
#my-chart-app .palace-flow-tag { font-size: .68rem; line-height: 1.35; }
#my-chart-app .palace-minor-stars { line-height: 1.45; }

/* Separate birth badges from directional markers without changing chart data. */
#my-chart-app .chart-star { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; }
#my-chart-app .chart-star-heading { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#my-chart-app .mutagen-tag.is-birth { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; min-height: 1.6em; padding: 1px 5px; border-radius: 5px; background: #746381; color: #fffdfa; font-size: clamp(16px, 1.3vw, 18px); font-weight: 800; line-height: 1.3; }
#my-chart-app .chart-star-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; }
#my-chart-app .palace-flow-tag { display: inline-flex; align-items: center; gap: 3px; font-size: clamp(13px, 1.1vw, 15px); font-weight: 750; line-height: 1.5; white-space: nowrap; }
#my-chart-app .palace-flow-tag.is-outward { color: #246844; }
#my-chart-app .palace-flow-tag.is-inward { color: #a32f3c; }
#my-chart-app .flow-marker-arrow { width: 18px; height: 18px; flex: 0 0 18px; overflow: visible; }
#my-chart-app .flow-marker-arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#my-chart-app .yearly-transformation-label { color: #514166; font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; line-height: 1.5; }
#my-chart-app .palace-major-stars, #my-chart-app .palace-minor-stars { row-gap: 10px; }

#my-chart-app .decade-palace-label { display: block; margin-top: 8px; color: #514166; font-size: .88rem; font-weight: 650; }
#my-chart-app .decade-selector { margin: 20px auto; max-width: 1080px; }
#my-chart-app .decade-selector h2 { font-size: 1.15rem; color: #26344e; }
#my-chart-app .decade-selector p { color: #526078; font-size: .9rem; }
#my-chart-app .decade-options { display: flex; flex-wrap: wrap; gap: 8px; }
#my-chart-app .decade-option { padding: 8px 12px; border: 1px solid #d7d0c7; border-radius: 7px; background: #fffdf9; color: #34415a; font: inherit; font-size: .9rem; cursor: pointer; }
#my-chart-app .decade-option[aria-pressed="true"] { border-color: #a28cae; background: #eee7f1; color: #514166; }
#my-chart-app .decade-option:focus-visible { outline: 2px solid #746381; outline-offset: 2px; }

/* Each horizontal star item keeps its own badges and directional markers. */
#my-chart-app .palace-star-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; align-items: start; gap: 4px; overflow: visible; margin: 14px 0 12px; color: #202d47; font-size: 1.28rem; font-weight: 700; line-height: 1.45; }
#my-chart-app .palace-star-grid .star-column { display: grid; grid-template-rows: 3rem 1.85rem auto; justify-items: center; align-items: start; align-content: start; gap: 5px; width: min-content; min-width: max-content; max-width: none; }
#my-chart-app .star-column .vertical-star { display: flex; flex-direction: column; align-items: center; line-height: 1.05; white-space: nowrap; }
#my-chart-app .star-column .vertical-star > span { display: block; }
#my-chart-app .star-column .star-transformation { min-height: 1.85rem; text-align: center; }
#my-chart-app .star-column .star-directions { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-width: 0; contain: inline-size; }
#my-chart-app .star-column .palace-flow-tag { flex-wrap: wrap; max-width: 100%; gap: 1px; white-space: normal; }
#my-chart-app .star-column .palace-flow-tag > span { white-space: normal; overflow-wrap: anywhere; }
#my-chart-app .palace-star-grid .is-support-star { color: inherit; font-size: inherit; font-weight: inherit; }
#my-chart-app .palace-footer { margin-top: auto; }
#my-chart-app .palace-year-age { min-height: 1.4em; margin-bottom: 3px; color: #4f5d74; font-size: .74rem; font-weight: 400; line-height: 1.4; white-space: nowrap; }
#my-chart-app .palace-footer .palace-heading { border-top: 1px solid #e7e1d8; }
#my-chart-app .palace-footer .palace-heading { justify-content: center; padding: 7px 0; }
#my-chart-app .palace-footer .palace-info { margin-top: 0; }
#my-chart-app .palace-no-major { grid-column: 1 / -1; color: #526078; font-size: .9rem; font-weight: 400; }
#my-chart-app .palace-info { display: grid; grid-template-columns: .65fr 1fr 1fr; gap: 0; align-items: stretch; margin-top: auto; }
#my-chart-app .palace-info > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 3px 4px; text-align: center; font-size: .76rem; line-height: 1.5; }
#my-chart-app .palace-info > span > span { white-space: nowrap; }
#my-chart-app .palace-info > span + span { border-left: 1px solid #e7e1d8; }
#my-chart-app .palace-info .palace-stem-branch { flex-direction: row; gap: 2px; }
#my-chart-app .palace-info .palace-branch { font-size: inherit; }
#my-chart-app .palace-info .decade-palace-label { margin: 0; }
@media (max-width: 760px) {
  #my-chart-app .palace-star-grid { font-size: 1.15rem; }
  #my-chart-app .palace-star-grid .is-support-star { font-size: inherit; }
}

/* Compact dimensions only; palace positions and typography remain unchanged. */
body.my-chart-page #my-chart-app .chart-board-stage { width: min(100%, 1050px); }
body.my-chart-page #my-chart-app .chart-board { width: 100%; max-width: 1050px; gap: 6px; grid-template-rows: repeat(4, minmax(176px, auto)); }
#my-chart-app .palace-card { padding: 8px 10px 7px; }
#my-chart-app .palace-star-grid { margin: 4px 0 7px; }
#my-chart-app .palace-star-grid .star-column { gap: 3px; }
#my-chart-app .palace-flags { margin-top: 0; }
#my-chart-app .palace-footer .palace-heading { padding: 3px 0; }
#my-chart-app .palace-footer .palace-info { padding-top: 3px; }
#my-chart-app .palace-info > span { padding: 1px 3px; }
#my-chart-app .chart-center { padding: 14px 18px; }
#my-chart-app .chart-center .section-kicker { margin: 0 0 4px; }
#my-chart-app .chart-center h2 { margin-bottom: 5px; }
#my-chart-app .center-birth { margin-bottom: 8px; }
#my-chart-app .center-data { gap: 7px; }
#my-chart-app .center-data dd { margin-top: 0; }
@media (max-width: 760px) {
  body.my-chart-page #my-chart-app .chart-board-stage { width: 820px; }
  body.my-chart-page #my-chart-app .chart-board { width: 820px; }
  #my-chart-app .chart-center { padding: 12px; }
}

/* Desktop-only compact chart: preserve all palace coordinates and mobile dimensions. */
@media (min-width: 1024px) {
  #my-chart-app > .page-hero { min-height: 0; padding: 101px 7% 12px; }
  #my-chart-app > .page-hero .section-kicker { margin: 0 0 3px; line-height: 1.3; }
  #my-chart-app > .page-hero h1 { font-size: 30px; line-height: 1.2; margin: 0 0 4px; }
  #my-chart-app > .page-hero > p:last-of-type { font-size: 14px; line-height: 1.5; }
  #my-chart-app .page-content { max-width: 1280px; padding: 8px 4% 28px; }
  #my-chart-app .breadcrumbs { margin-bottom: 7px; line-height: 1.4; }
  #my-chart-app .chart-intro { max-width: 1050px; margin-bottom: 5px; }
  #my-chart-app .chart-intro .section-kicker { margin: 0 0 2px; line-height: 1.3; }
  #my-chart-app .chart-intro h2 { font-size: 22px; line-height: 1.3; margin-bottom: 3px; }
  #my-chart-app .chart-intro > p:not(.section-kicker) { margin: 0; font-size: 13px; line-height: 1.45; }
  #my-chart-app .chart-refresh-link { margin-top: 3px; padding-bottom: 1px; font-size: 13px; line-height: 1.4; }
  #my-chart-app .chart-status { margin: 4px 0; font-size: 13px; line-height: 1.4; }
  #my-chart-app .chart-meta { margin-bottom: 4px; gap: 3px 12px; font-size: 12px; line-height: 1.4; }
  #my-chart-app .chart-board-scroll { padding: 2px 2px 5px; }
  body.my-chart-page #my-chart-app .chart-board-stage { width: min(100%, 1100px); }
  body.my-chart-page #my-chart-app .chart-board { max-width: 1100px; gap: 4px; grid-template-rows: repeat(4, minmax(160px, auto)); }
  #my-chart-app .palace-card { padding: 6px 8px 5px; }
  #my-chart-app .palace-star-grid { margin: 2px 0 3px; gap: 6px; font-size: 1.2rem; line-height: 1.1; }
  #my-chart-app .palace-star-grid .star-column { grid-template-rows: auto auto auto; gap: 2px; }
  #my-chart-app .star-column .vertical-star { line-height: 1.05; min-height: 2.55rem; }
  #my-chart-app .star-column .star-transformation { min-height: 0; }
  #my-chart-app .mutagen-tag.is-birth { font-size: 16px; min-width: 1.4em; min-height: 1.4em; padding: 0 3px; line-height: 1.3; }
  #my-chart-app .star-column .star-directions { contain: none; width: max-content; gap: 2px; }
  #my-chart-app .star-column .palace-flow-tag { flex-wrap: nowrap; max-width: none; gap: 2px; font-size: 12px; line-height: 1.35; white-space: nowrap; }
  #my-chart-app .star-column .palace-flow-tag > span { white-space: nowrap; overflow-wrap: normal; }
  #my-chart-app .flow-marker-arrow { width: 14px; height: 14px; flex-basis: 14px; }
  #my-chart-app .palace-flags { margin: 0 0 2px; }
  #my-chart-app .palace-year-age { font-size: 12px; line-height: 1.3; margin-bottom: 2px; }
  #my-chart-app .palace-footer .palace-heading { padding: 2px 0; }
  #my-chart-app .palace-name { font-size: 15px; line-height: 1.3; }
  #my-chart-app .palace-footer .palace-info { padding-top: 2px; }
  #my-chart-app .palace-info > span { padding: 0 2px; font-size: 12px; line-height: 1.3; }
  #my-chart-app .palace-info .palace-stem-branch { font-size: 12px; }
  #my-chart-app .chart-center { padding: 10px 14px; }
  #my-chart-app .chart-center .section-kicker { margin-bottom: 3px; font-size: 12px; line-height: 1.3; }
  #my-chart-app .chart-center h2 { margin-bottom: 7px; font-size: 19px; line-height: 1.3; }
  #my-chart-app .center-data { gap: 5px; }
  #my-chart-app .center-data dt { font-size: 12px; line-height: 1.4; }
  #my-chart-app .center-data dd { font-size: 14px; line-height: 1.4; }
  #my-chart-app .center-data .center-pillars { gap: 14px; }
  #my-chart-app .center-pillar { gap: 1px; }
}

/* Fixed desktop chart dimensions; mobile and palace coordinates are unchanged. */
@media (min-width: 1024px) {
  #my-chart-app > .page-hero { padding: 96px 7% 4px; }
  #my-chart-app > .page-hero h1 { margin-bottom: 2px; }
  #my-chart-app .page-content { padding-top: 3px; }
  #my-chart-app .breadcrumbs { margin-bottom: 3px; }
  #my-chart-app .chart-intro { margin-bottom: 2px; }
  #my-chart-app .chart-intro h2 { margin-bottom: 2px; }
  #my-chart-app .chart-intro .section-kicker { margin-bottom: 1px; }
  #my-chart-app .chart-refresh-link { margin-top: 2px; }
  #my-chart-app .chart-status { margin: 2px 0; }
  #my-chart-app .chart-meta { margin-bottom: 1px; }
  #my-chart-app .chart-board-scroll { padding: 0; }
  body.my-chart-page #my-chart-app .chart-board-stage {
    box-sizing: border-box;
    width: 1000px;
    min-width: 1000px;
    max-width: 1000px;
    height: 640px;
    margin-inline: auto;
  }
  body.my-chart-page #my-chart-app .chart-board {
    box-sizing: border-box;
    width: 1000px;
    min-width: 1000px;
    max-width: 1000px;
    height: 640px;
    aspect-ratio: auto;
    grid-template-columns: repeat(4, 250px);
    grid-template-rows: repeat(4, 160px);
    gap: 0;
  }
  #my-chart-app .palace-card {
    box-sizing: border-box;
    min-height: 0;
    padding: 4px 8px;
    overflow: visible;
  }
  #my-chart-app .palace-card:hover { transform: none; }
  #my-chart-app .palace-star-grid { position: absolute; top: 4px; right: 8px; margin: 0; gap: 6px; font-size: 20px; }
  #my-chart-app .palace-star-grid .star-column { grid-template-rows: auto auto auto; gap: 1px; }
  #my-chart-app .star-column .vertical-star { min-height: 0; line-height: 1; }
  #my-chart-app .star-column .star-transformation { min-height: 0; }
  #my-chart-app .mutagen-tag.is-birth { margin-left: 0; font-size: 14px; min-width: 18px; min-height: 18px; line-height: 18px; }
  #my-chart-app .star-column .star-directions { contain: none; width: max-content; gap: 1px; }
  #my-chart-app .star-column .palace-flow-tag { font-size: 12px; line-height: 14px; white-space: nowrap; flex-wrap: nowrap; margin-left: 0; }
  #my-chart-app .star-column .palace-flow-tag > span { white-space: nowrap; overflow-wrap: normal; }
  #my-chart-app .palace-flags { flex: 0 0 auto; margin: 0 0 2px; }
  #my-chart-app .palace-footer { flex: 0 0 auto; margin-top: auto; }
  #my-chart-app .palace-year-age { font-size: 12px; line-height: 14px; min-height: 14px; margin-bottom: 2px; }
  #my-chart-app .palace-footer .palace-heading { padding: 1px 0; }
  #my-chart-app .palace-name { font-size: 15px; line-height: 19px; }
  #my-chart-app .palace-footer .palace-info { padding-top: 1px; }
  #my-chart-app .palace-info > span { flex-direction: row; gap: 3px; padding: 0 2px; font-size: 12px; line-height: 15px; }
  #my-chart-app .chart-center { box-sizing: border-box; min-height: 0; padding: 8px 16px; }
  #my-chart-app .center-data { gap: 4px; }
  #my-chart-app .palace-info .decade-palace-label { display: flex; flex-direction: row; gap: 3px; }
  #my-chart-app .chart-center h2 { margin-bottom: 5px; }
  #my-chart-app .center-data dt, #my-chart-app .center-data dd { line-height: 1.3; }
}

/* My-chart introductory information and closing navigation only. */
#my-chart-app .page-hero h1{margin-bottom:20px}#my-chart-app .breadcrumbs{margin-bottom:28px}#my-chart-app .chart-intro{margin-bottom:24px}#my-chart-app .chart-intro .section-kicker{margin-bottom:12px}#my-chart-app .chart-intro h2{margin-bottom:0}#my-chart-app .chart-meta{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0 0 20px;padding:14px 18px;border-top:1px solid #d9d0c7;border-bottom:1px solid #d9d0c7;line-height:1.7}#my-chart-app .chart-meta span{min-width:0;overflow-wrap:anywhere}#my-chart-app .chart-meta span+span::before{content:none}#my-chart-app .chart-support-links{display:flex;justify-content:center;gap:20px;margin:40px 0 16px}#my-chart-app .chart-support-links a{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:54px;min-width:220px;max-width:100%;box-sizing:border-box;padding:14px 26px;border-radius:28px;background:#293750;color:#faf7f2;font-size:18px;text-decoration:none;transition:background-color .18s}#my-chart-app .chart-support-links a:hover{background:#3b4b65;color:#faf7f2}#my-chart-app .chart-support-links a:focus-visible{outline:2px solid #b99d74;outline-offset:4px}@media(max-width:700px){#my-chart-app .breadcrumbs{margin-bottom:22px}#my-chart-app .chart-intro{margin-bottom:20px}#my-chart-app .chart-meta{flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;padding:12px 14px}#my-chart-app .chart-support-links{flex-direction:column;align-items:center;gap:14px;margin-top:30px}#my-chart-app .chart-support-links a{width:min(100%,320px);min-width:0}}

/* Requested heading hierarchy and added lunar-date footer only. */
#my-chart-app .page-hero .breadcrumbs{margin:0 0 24px;font-size:14px;line-height:1.6}#my-chart-app .page-hero>p:last-child{font-size:22px;line-height:1.85;color:#58647b}#my-chart-app .chart-status:empty{display:none}#my-chart-app .chart-center{position:relative}#my-chart-app .center-lunar-date{position:static;margin:0;overflow-wrap:anywhere}@media(max-width:700px){#my-chart-app .page-hero>p:last-child{font-size:18px}#my-chart-app .page-hero .breadcrumbs{margin-bottom:20px}}

/* Space between the hero subtitle and the chart content, scoped to this page. */
body.my-chart-page #my-chart-app>.page-hero{min-height:0;padding-bottom:0}
body.my-chart-page #my-chart-app>.page-content{padding-top:0;margin-top:40px}
@media(min-width:701px) and (max-width:1023px){body.my-chart-page #my-chart-app>.page-content{margin-top:32px}}
@media(max-width:700px){body.my-chart-page #my-chart-app>.page-content{margin-top:24px}}