.mode-page { max-width: 1200px; padding-inline: clamp(20px, 4.5vw, 64px); }
.mode-hero { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: clamp(24px, 4vw, 64px); }
.mode-intro p { max-width: 48ch; font-size: 18px; line-height: 1.65; color: var(--quiet); }
.mode-page :is(.mode-intro, .mode-section) a, .mode-inline, [data-use-prompt] { color: #eee78c; text-decoration: underline; text-underline-offset: 4px; }
.mode-feature { margin: 0; }
.mode-feature button { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--panel-line); border-radius: 16px; background: var(--panel-bg); color: var(--ink); cursor: pointer; }
.mode-feature img { display: block; width: 100%; height: 210px; object-fit: contain; border-radius: 14px; background: #222620; }
.mode-feature > img { background: #eae9e3; }
.mode-feature span { display: block; padding: 10px; }
.mode-section { border-top: 1px solid var(--line); padding: clamp(32px, 5vw, 64px) 0; }
.mode-section h2 { max-width: 32ch; margin: 0 0 20px; }
.mode-section p { max-width: 74ch; color: var(--quiet); line-height: 1.75; }
.mode-cards, .mode-steps, .view-pair, .credit-list { display: grid; gap: 16px; }
.mode-cards, .mode-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mode-cards article { background: var(--panel-bg); border: 1px solid var(--panel-line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; }
.mode-cards h3, .mode-steps h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.mode-cards blockquote { margin: 14px 0; flex: 1; line-height: 1.7; color: var(--quiet); }
.mode-inline, [data-use-prompt] { padding: 4px 0; border: 0; background: none; font: inherit; cursor: pointer; }
.mode-steps { padding-left: 22px; column-gap: 42px; }
.mode-steps li::marker { color: var(--yellow); }
.view-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
.view-pair figure { margin: 0; }
.view-pair img { width: 100%; height: auto; display: block; border-radius: 12px; }
.view-pair figcaption { font-size: 14px; line-height: 1.6; }
.view-pair figcaption strong { display: block; color: var(--ink); }
.credit-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
.credit-list div { padding: 14px; border-left: 2px solid var(--panel-line); }
.credit-list dt { color: var(--quiet); font-size: 14px; }
.credit-list dd { margin: 4px 0 0; font-size: 20px; }
.mode-questions details { padding: 14px 0; border-bottom: 1px solid var(--line); }
.mode-questions summary { cursor: pointer; font-weight: 550; }
@media (max-width:760px) {
  .mode-hero, .mode-cards, .mode-steps { grid-template-columns: 1fr; }
  .mode-feature img { height: 155px; }
  .credit-list { grid-template-columns: 1fr 1fr; }
  .mode-steps { row-gap: 8px; }
}