.first-result { border-top: 1px solid var(--line); padding-block: 2rem; scroll-margin-top: 2rem; }
.first-result-heading h2 { margin: 0 0 .6rem; font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.8rem); line-height: 1.15; }
.first-result-heading p { max-width: 70ch; margin: .6rem 0; }
.first-result-tabs { display: flex; gap: 0; margin: 1.5rem 0 0; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; background: var(--bg,#f6f6f3); }
.first-result-tabs[hidden], .first-result-pane[hidden] { display: none; }
.first-result-tabs button { flex: 1; min-height: 3.25rem; padding: .8rem .5rem; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-2); font: 600 1rem var(--sans); cursor: pointer; }
.first-result-tabs button span { font-size: .8em; margin-right: .4rem; font-weight: 400; }
.first-result-tabs button[aria-selected=true] { border-bottom-color: var(--p,#ad371b); color: var(--ink); background: var(--surface,#fff); }
.first-result :is(a,button,[tabindex]):focus-visible { outline: 3px solid var(--p,#ad371b); outline-offset: 4px; }
.first-result-pane { margin: 0; padding: 1.5rem 0; min-width: 0; }
.first-result-enhanced .first-result-stage-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.first-result-screen { margin: 0; min-width: 0; }
.first-result-screen img { display: block; width: 100%; height: auto; max-height: 660px; object-fit: contain; border: 1px solid var(--line); background: var(--surface,#fff); }
.first-result-screen figcaption { font-size: .85rem; line-height: 1.55; color: var(--ink-2); margin-top: .75rem; }
.first-result-screen a { text-underline-offset: .18em; }
.first-result-pane p { line-height: 1.65; overflow-wrap: anywhere; }
.first-result-pane h3 { margin: 0 0 1rem; font-size: 1.2rem; }
.first-result-instructions { margin-top: 1.5rem; }
.first-result-instructions ol { margin: 0; padding-left: 1.4rem; }
.first-result-instructions li { line-height: 1.6; margin-bottom: .8rem; padding-left: .3rem; overflow-wrap: anywhere; }
.first-result-goal { font-size: 1.125rem; font-weight: 500; }
.first-result-quick-steps li { margin-bottom: 1.25rem; }
.first-result-details { margin-block: 1.25rem; }
.first-result-details summary { cursor: pointer; padding-block: .6rem; min-height: 2.75rem; font-size: .95rem; text-underline-offset: .2em; }
.first-result-details summary:hover { text-decoration: underline; }
.first-result-details[open] summary { margin-bottom: .75rem; }
.first-result-next { margin-top: 1.25rem; grid-column: 1 / -1; }
.first-result-next[hidden] { display: none; }
.first-result-next button { display: inline-flex; align-items: center; gap: .75rem; border: 1px solid var(--ink); background: var(--ink); color: var(--bg,#fff); min-height: 2.75rem; padding: .7rem 1rem; font: 600 .95rem var(--sans); cursor: pointer; text-align: left; }
.first-result-next button:hover { background: var(--surface,#fff); color: var(--ink); }
.first-result-next svg { flex-shrink: 0; }
.first-result-output { max-width: 78ch; margin-bottom: 1.5rem; }
.first-result-audio { margin: 1.5rem 0; }
.first-result-audio audio { display: block; width: 100%; max-width: 34rem; }
.first-result-pixel-output { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-block: 1.5rem; }
.first-result-pixel-output figure { margin: 0; }
.first-result-pixel-output a { display: grid; gap: .75rem; font-size: .95rem; text-underline-offset: .2em; }
.first-result-pixel-output img { display: block; box-sizing: content-box; width: 128px; height: 128px; image-rendering: pixelated; background: var(--surface,#fff); border: 1px solid var(--line); }
.first-result-table { max-width: 100%; overflow-x: auto; margin-bottom: 1.5rem; }
.first-result-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.first-result-table caption { text-align: left; padding-bottom: 1rem; color: var(--ink-2); font-size: .875rem; }
.first-result-table th,.first-result-table td { padding: .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.first-result-table th { background: var(--surface,#fff); }
.first-result-checks { margin-top: 1.5rem; max-width: 78ch; }
.first-result-checks summary { cursor: pointer; min-height: 2.75rem; padding-block: .6rem; font-weight: 600; }
.first-result-context { font-size: .875rem; color: var(--ink-2); max-width: 95ch; }
.first-result-footer { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.example-access-note { font-size: .8rem; color: var(--ink-2); }
.first-result .example-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.first-result .example-file { overflow-wrap: anywhere; max-width: 100%; }
.buyer-opening { margin: 1rem 0; }
.buyer-opening summary { cursor: pointer; min-height: 2.75rem; display: list-item; padding: .5rem 0; font-weight: 600; }
.buyer-opening p { font-size: .95rem; line-height: 1.65; }
.gallery-extra { margin: 2rem 0; }
.gallery-extra summary { cursor: pointer; padding-block: .8rem; font-weight: 600; }
@media (min-width: 70rem) {
  .first-result-pane[data-example-pane=work] { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(18rem,1fr); gap: 2rem; align-items: start; }
  .first-result-pane[data-example-pane=work][hidden] { display: none; }
  .first-result-instructions { margin-top: 0; }
  .first-result-stage-title { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .first-result-tabs button { font-size: .9rem; padding-inline: .25rem; }
  .first-result-tabs button span { display: block; margin: 0 0 .2rem; }
  .first-result-screen img { max-height: none; }
  .first-result-table--changes :is(table,tbody,tr) { display: block; width: 100%; }
  .first-result-table--changes caption { display: block; }
  .first-result-table--changes thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .first-result-table--changes tr { padding-block: .75rem; border-bottom: 1px solid var(--line); }
  .first-result-table--changes td { display: grid; grid-template-columns: 4.25rem minmax(0,1fr); gap: .75rem; border: 0; padding: .35rem 0; }
  .first-result-table--changes td::before { content: attr(data-label); color: var(--ink-2); font-weight: 600; }
}
@media print {
  .first-result-tabs,.first-result-next { display: none; }
  .first-result-pane[hidden] { display: block !important; }
  .first-result-enhanced .first-result-stage-title { position: static; width: auto; height: auto; clip-path: none; }
}