@scope (#main) to (#top) {
/* Block 03: generated background; text, rules and glints remain independent. */
#modes.modes-section {
  position: relative; width: var(--frame-width); min-height: 800px;
  margin: 12px auto 0; padding: 40px 0 60px;
  overflow: clip; isolation: isolate; border-radius: var(--radius-xl);
  color: #f7e3ca; background: #3a0317; box-shadow: none;
}
#modes.modes-section::before, #modes.modes-section::after,
#modes > .section-heading::before { content: none; }
.modes-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.modes-background img { display: block; width: 100%; height: 100%; object-fit: fill; }
#modes > .section-heading {
  position: relative; width: min(calc(100% - 40px), 740px); max-width: none;
  margin: 0 auto; color: #3a0317; text-align: center;
}
#modes > .section-heading .eyebrow {
  margin-bottom: 10px; color: #9d632c; font-size: 11px; font-weight: 500; letter-spacing: 0;
}
#modes > .section-heading .eyebrow::after {
  content: "✦"; display: block; width: 104px; margin: 10px auto 0;
  color: #bc884b; font-size: 13px; font-weight: 400; line-height: 1;
  background: linear-gradient(currentColor, currentColor) left center / 38px 1px no-repeat, linear-gradient(currentColor, currentColor) right center / 38px 1px no-repeat;
}
#modes > .section-heading h2 {
  max-width: 720px; margin: 0 auto; color: #3a0317;
  font-size: 48px; font-weight: 400; line-height: 1.04; letter-spacing: 0;
}
#modes > .section-heading p:not(.eyebrow) {
  max-width: 610px; margin: 14px auto 0; color: #512439; font-size: 16px; line-height: 1.5;
}
#modes .mode-bridge {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; width: 82%; max-width: none;
  min-height: 390px; margin: 78px auto 0; gap: 0;
}
#modes .mode-bridge::before {
  content: ""; display: block; position: absolute; top: -45px; bottom: 0;
  left: 50%; width: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffe6b0 12%, #d5ac65 60%, transparent);
  box-shadow: 0 -16px 12px 2px rgba(255, 232, 185, .26);
}
#modes .mode-bridge::after {
  content: ""; position: absolute; top: 33%; left: 50%; width: 16px; height: 18px;
  background: #f2d395; transform: translate(-50%, -50%); pointer-events: none;
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0 50%, 38% 34%);
  filter: drop-shadow(0 0 6px rgba(255, 226, 160, .4));
}
#modes .mode-panel {
  position: relative; min-height: 0; padding: 0 35px 30px min(9.5vw, 180px); overflow: visible;
  border: 0; border-radius: 0; background: transparent; color: #f7e3ca;
  box-shadow: none; transform: none;
}
#modes .mode-panel::after { display: none; }
#modes .mode-number {
  margin: 0 0 14px; color: #f0c783; font-size: 11px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0; text-transform: uppercase;
}
#modes .mode-number span { margin: 0 8px; }
#modes .mode-panel h3 {
  max-width: 410px; margin: 0; color: #f7e3ca; font-size: var(--section-mode-size);
  font-weight: 400; line-height: 1.08; letter-spacing: 0;
}
#modes .mode-lead {
  max-width: 410px; margin: 22px 0 28px; color: #f0dbbf;
  font-size: 16px; font-weight: 400; line-height: 1.6;
}
#modes .mode-list-label {
  display: flex; align-items: center; gap: 16px; margin: 0 0 12px;
  color: #f0c783; font-size: 11px; font-weight: 500; text-transform: uppercase;
}
#modes .mode-list-label::after { content: ""; width: 56px; height: 1px; background: rgba(218, 173, 98, .55); }
#modes .mode-panel ul { max-width: 410px; margin: 0; padding: 0; border: 0; list-style: none; }
#modes .mode-panel li {
  position: relative; margin: 0; padding-left: 21px; color: #f0dbbf; font-size: 15px; line-height: 1.55;
}
#modes .mode-panel li + li { margin-top: 7px; }
#modes .mode-panel li::before {
  content: ""; position: absolute; top: .78em; left: 1px; width: 10px; height: 12px;
  background: #edc681; transform: translateY(-50%);
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0 50%, 38% 34%);
}
.modes-end-rule { display: flex; justify-content: center; gap: 280px; margin: 28px auto 0; }
.modes-end-rule span { width: 65px; height: 1px; background: #a77c47; }
/* Only mounted on localhost with modesPreview=1. */
.modes-background-picker {
  position: fixed; z-index: 1000; bottom: 18px; left: 50%;
  display: flex; align-items: center; gap: 5px; padding: 8px;
  border: 1px solid rgba(240, 199, 131, .55); border-radius: 8px;
  background: #3a0317; color: #f7e3ca; box-shadow: 0 6px 24px #16010966;
  transform: translateX(-50%); font: 12px var(--font-ui);
}
.modes-background-picker span { padding: 0 7px; }
.modes-background-picker button {
  width: 40px; height: 36px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: inherit; cursor: pointer;
}
.modes-background-picker button[aria-pressed="true"] { background: #f7e3ca; color: #3a0317; }
.modes-background-picker button:focus-visible { outline: 2px solid #f0c783; outline-offset: 2px; }
@media (min-width: 1680px) {
  #modes.modes-section { min-height: 900px; padding-top: 50px; }
  #modes .mode-bridge { margin-top: 110px; }
}
@media (max-width: 1100px) {
  #modes .mode-bridge { width: 90%; }
  #modes .mode-panel { padding-inline: 35px; }
}
@media (max-width: 900px) {
  #modes.modes-section { width: calc(100vw - 28px); min-height: 0; padding: 42px 0 48px; }
  .modes-background { height: 900px; mask-image: linear-gradient(#000 85%, transparent); }
  #modes > .section-heading { width: min(calc(100% - 34px), 650px); }
  #modes > .section-heading h2 { font-size: var(--section-title-size); }
  #modes .mode-bridge { grid-template-columns: 1fr; width: min(calc(100% - 28px), 600px); margin-top: 80px; }
  #modes .mode-bridge::before, #modes .mode-bridge::after { display: none; }
  #modes .mode-panel { padding: 20px 22px 38px; }
  #modes .mode-panel + .mode-panel { padding-top: 38px; border-top: 1px solid rgba(253, 214, 116, .34); }
  .modes-end-rule { gap: 90px; }
}
@media (max-width: 560px) {
  .modes-background { height: 1000px; }
  #modes > .section-heading p:not(.eyebrow) { font-size: 15px; }
  #modes .mode-panel h3 { font-size: 34px; }
  #modes .mode-lead { font-size: 15px; }
}

}

@scope (#footer) {
/* Block 03: generated background; text, rules and glints remain independent. */
#modes.modes-section {
  position: relative; width: var(--frame-width); min-height: 800px;
  margin: 12px auto 0; padding: 40px 0 60px;
  overflow: clip; isolation: isolate; border-radius: var(--radius-xl);
  color: #f7e3ca; background: #3a0317; box-shadow: none;
}
#modes.modes-section::before, #modes.modes-section::after,
#modes > .section-heading::before { content: none; }
.modes-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.modes-background img { display: block; width: 100%; height: 100%; object-fit: fill; }
#modes > .section-heading {
  position: relative; width: min(calc(100% - 40px), 740px); max-width: none;
  margin: 0 auto; color: #3a0317; text-align: center;
}
#modes > .section-heading .eyebrow {
  margin-bottom: 10px; color: #9d632c; font-size: 11px; font-weight: 500; letter-spacing: 0;
}
#modes > .section-heading .eyebrow::after {
  content: "✦"; display: block; width: 104px; margin: 10px auto 0;
  color: #bc884b; font-size: 13px; font-weight: 400; line-height: 1;
  background: linear-gradient(currentColor, currentColor) left center / 38px 1px no-repeat, linear-gradient(currentColor, currentColor) right center / 38px 1px no-repeat;
}
#modes > .section-heading h2 {
  max-width: 720px; margin: 0 auto; color: #3a0317;
  font-size: 48px; font-weight: 400; line-height: 1.04; letter-spacing: 0;
}
#modes > .section-heading p:not(.eyebrow) {
  max-width: 610px; margin: 14px auto 0; color: #512439; font-size: 16px; line-height: 1.5;
}
#modes .mode-bridge {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; width: 82%; max-width: none;
  min-height: 390px; margin: 78px auto 0; gap: 0;
}
#modes .mode-bridge::before {
  content: ""; display: block; position: absolute; top: -45px; bottom: 0;
  left: 50%; width: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffe6b0 12%, #d5ac65 60%, transparent);
  box-shadow: 0 -16px 12px 2px rgba(255, 232, 185, .26);
}
#modes .mode-bridge::after {
  content: ""; position: absolute; top: 33%; left: 50%; width: 16px; height: 18px;
  background: #f2d395; transform: translate(-50%, -50%); pointer-events: none;
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0 50%, 38% 34%);
  filter: drop-shadow(0 0 6px rgba(255, 226, 160, .4));
}
#modes .mode-panel {
  position: relative; min-height: 0; padding: 0 35px 30px min(9.5vw, 180px); overflow: visible;
  border: 0; border-radius: 0; background: transparent; color: #f7e3ca;
  box-shadow: none; transform: none;
}
#modes .mode-panel::after { display: none; }
#modes .mode-number {
  margin: 0 0 14px; color: #f0c783; font-size: 11px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0; text-transform: uppercase;
}
#modes .mode-number span { margin: 0 8px; }
#modes .mode-panel h3 {
  max-width: 410px; margin: 0; color: #f7e3ca; font-size: var(--section-mode-size);
  font-weight: 400; line-height: 1.08; letter-spacing: 0;
}
#modes .mode-lead {
  max-width: 410px; margin: 22px 0 28px; color: #f0dbbf;
  font-size: 16px; font-weight: 400; line-height: 1.6;
}
#modes .mode-list-label {
  display: flex; align-items: center; gap: 16px; margin: 0 0 12px;
  color: #f0c783; font-size: 11px; font-weight: 500; text-transform: uppercase;
}
#modes .mode-list-label::after { content: ""; width: 56px; height: 1px; background: rgba(218, 173, 98, .55); }
#modes .mode-panel ul { max-width: 410px; margin: 0; padding: 0; border: 0; list-style: none; }
#modes .mode-panel li {
  position: relative; margin: 0; padding-left: 21px; color: #f0dbbf; font-size: 15px; line-height: 1.55;
}
#modes .mode-panel li + li { margin-top: 7px; }
#modes .mode-panel li::before {
  content: ""; position: absolute; top: .78em; left: 1px; width: 10px; height: 12px;
  background: #edc681; transform: translateY(-50%);
  clip-path: polygon(50% 0, 62% 34%, 100% 50%, 62% 66%, 50% 100%, 38% 66%, 0 50%, 38% 34%);
}
.modes-end-rule { display: flex; justify-content: center; gap: 280px; margin: 28px auto 0; }
.modes-end-rule span { width: 65px; height: 1px; background: #a77c47; }
/* Only mounted on localhost with modesPreview=1. */
.modes-background-picker {
  position: fixed; z-index: 1000; bottom: 18px; left: 50%;
  display: flex; align-items: center; gap: 5px; padding: 8px;
  border: 1px solid rgba(240, 199, 131, .55); border-radius: 8px;
  background: #3a0317; color: #f7e3ca; box-shadow: 0 6px 24px #16010966;
  transform: translateX(-50%); font: 12px var(--font-ui);
}
.modes-background-picker span { padding: 0 7px; }
.modes-background-picker button {
  width: 40px; height: 36px; border: 1px solid transparent; border-radius: 4px;
  background: transparent; color: inherit; cursor: pointer;
}
.modes-background-picker button[aria-pressed="true"] { background: #f7e3ca; color: #3a0317; }
.modes-background-picker button:focus-visible { outline: 2px solid #f0c783; outline-offset: 2px; }
@media (min-width: 1680px) {
  #modes.modes-section { min-height: 900px; padding-top: 50px; }
  #modes .mode-bridge { margin-top: 110px; }
}
@media (max-width: 1100px) {
  #modes .mode-bridge { width: 90%; }
  #modes .mode-panel { padding-inline: 35px; }
}
@media (max-width: 900px) {
  #modes.modes-section { width: calc(100vw - 28px); min-height: 0; padding: 42px 0 48px; }
  .modes-background { height: 900px; mask-image: linear-gradient(#000 85%, transparent); }
  #modes > .section-heading { width: min(calc(100% - 34px), 650px); }
  #modes > .section-heading h2 { font-size: var(--section-title-size); }
  #modes .mode-bridge { grid-template-columns: 1fr; width: min(calc(100% - 28px), 600px); margin-top: 80px; }
  #modes .mode-bridge::before, #modes .mode-bridge::after { display: none; }
  #modes .mode-panel { padding: 20px 22px 38px; }
  #modes .mode-panel + .mode-panel { padding-top: 38px; border-top: 1px solid rgba(253, 214, 116, .34); }
  .modes-end-rule { gap: 90px; }
}
@media (max-width: 560px) {
  .modes-background { height: 1000px; }
  #modes > .section-heading p:not(.eyebrow) { font-size: 15px; }
  #modes .mode-panel h3 { font-size: 34px; }
  #modes .mode-lead { font-size: 15px; }
}

}