/* The whole product as four connected modules. */
[data-app="puck"] #landing .puck-map-section { padding-block: clamp(3rem,6vw,6rem); }
.puck-map__intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; margin: 2rem 0 2.5rem; }
.puck-map__intro h2 { margin: 0; font: 300 clamp(2.6rem,4.4vw,4.3rem)/1.04 var(--font-display); letter-spacing: -.04em; }
.puck-map__intro > p { margin: 0 0 .25rem auto; max-width: 42ch; font: 1.14rem/1.55 var(--font-display); color: var(--puck-muted); }
.puck-map { --map-green: #315f4b; --map-green-bg: #e8f0e7; --map-experiment: #765019; --map-experiment-bg: #f3eddc; border: 1px solid var(--puck-line); border-radius: 4px; background: var(--puck-surface); }
[data-theme="dark"] .puck-map { --map-green: #a8c9af; --map-green-bg: #243c36; --map-experiment: #e0c88e; --map-experiment-bg: #3a3930; }
.puck-map [hidden] { display: none !important; }
.puck-map__route { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; padding: 1.6rem 2rem; background: var(--puck-recessed); border-bottom: 1px solid var(--puck-line); }
.puck-map__endpoint { display: flex; align-items: center; gap: .85rem; flex: 0 0 auto; font: .66rem/1.6 var(--font-mono); color: var(--puck-muted); }
.puck-map__endpoint strong { display: block; color: var(--puck-ink); font: 400 1.2rem/1.3 var(--font-display); }
.puck-map__device { display: block; position: relative; border: 1.5px solid var(--puck-blue); flex: none; }
.puck-map__device--android { width: 22px; height: 34px; border-radius: 6px; }
.puck-map__device--android::before { content: ''; position: absolute; inset: 4px 3px 14px; border: 1px solid var(--puck-blue); border-radius: 2px; }
.puck-map__device--android::after { content: '+'; position: absolute; left: 3px; bottom: 0; color: var(--puck-blue); font: 13px var(--font-mono); }
.puck-map__device--mac { width: 38px; height: 26px; border-radius: 3px; }
.puck-map__device--mac::after { content: ''; position: absolute; height: 3px; inset: auto -5px -5px; border: 1px solid var(--puck-blue); border-radius: 0 0 4px 4px; }
.puck-map__route-line { position: relative; flex: 1; border-top: 1px solid var(--puck-line); min-width: 3rem; }
.puck-map__route-line::before,.puck-map__route-line::after { content: ''; position: absolute; top: -3px; width: 5px; height: 5px; border: 1px solid var(--puck-blue); border-radius: 50%; background: var(--puck-surface); }
.puck-map__route-line::before { left: 0; }.puck-map__route-line::after { right: 0; }
.puck-map__route-line > span { position: absolute; inset: auto 0 .55rem; color: var(--puck-quiet); text-align: center; font: .6rem var(--font-mono); }
.puck-map__navigation { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--puck-line); }
.puck-map__tabs { display: flex; gap: .35rem; }
.puck-map__tabs button { appearance: none; min-height: 44px; padding: .65rem .9rem; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--puck-muted); font: .73rem var(--font-mono); cursor: pointer; }
.puck-map__tabs button:hover { color: var(--puck-ink); background: var(--puck-recessed); }
.puck-map__tabs button[aria-selected="true"] { border-color: var(--puck-blue); color: var(--puck-ink); background: var(--puck-recessed); box-shadow: inset 0 -2px var(--puck-blue); }
.puck-map__key { font: .66rem/1.6 var(--font-mono); color: var(--puck-muted); }
.puck-map__key > summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; min-height: 44px; align-items: center; }
.puck-map__key summary::-webkit-details-marker { display: none; }
.puck-map__key > div { position: absolute; right: 1rem; top: calc(100% - .4rem); width: min(32rem,calc(100% - 2rem)); z-index: 10; padding: 1rem 1.25rem; background: var(--puck-surface); border: 1px solid var(--puck-line); box-shadow: var(--puck-shadow); }
.puck-map__key p { display: grid; grid-template-columns: 8.6rem 1fr; gap: .75rem; align-items: start; margin: .5rem 0; }
.puck-map__status { display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .2rem .4rem; border: 1px solid var(--puck-line); border-radius: 3px; color: var(--puck-muted); font: 11px/1.35 var(--font-mono); white-space: nowrap; }
.puck-map__status[data-state="available"] { border-color: color-mix(in srgb,var(--map-green) 35%,transparent); color: var(--map-green); background: var(--map-green-bg); }
.puck-map__status[data-state="experimental"] { border-color: color-mix(in srgb,var(--map-experiment) 45%,transparent); color: var(--map-experiment); background: var(--map-experiment-bg); }
.puck-map__status[data-state="unavailable"] { border-style: dashed; }
.puck-map__symbol { display: inline-block; width: 10px; text-align: center; font-size: 11px; }
.puck-map__status .icon { width: 12px; height: 12px; fill: currentColor; flex: none; }
.puck-map__panel-head { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; font: .62rem/1.5 var(--font-mono); color: var(--puck-quiet); }
.puck-map__panel-head > span:last-child { text-align: right; }
.puck-map__modules { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--puck-line); }
.puck-map__module { position: relative; min-width: 0; padding: 1.25rem; border-right: 1px solid var(--puck-line); background: linear-gradient(180deg,color-mix(in srgb,var(--puck-recessed) 35%,transparent),transparent 9rem); }
.puck-map__module:last-child { border-right: 0; }
.puck-map__module::after { content: ''; position: absolute; top: .5rem; right: .5rem; width: 5px; height: 5px; border-top: 1px solid var(--puck-line); border-right: 1px solid var(--puck-line); }
.puck-map__module-head { display: flex; align-items: start; gap: .65rem; margin-bottom: 1rem; }
.puck-map__module-number { color: var(--puck-quiet); font: .6rem var(--font-mono); padding-top: .4rem; }
.puck-map__module-head h3 { margin: 0; font: 300 clamp(1.8rem,2.3vw,2.5rem)/1.1 var(--font-display); letter-spacing: -.04em; }
.puck-map__module-head p { margin: .4rem 0 0; color: var(--puck-muted); font: .65rem/1.5 var(--font-mono); }
.puck-map__module-node { width: 5px; height: 5px; border: 1px solid var(--puck-blue); border-radius: 50%; margin: .5rem 0 0 auto; flex: none; }
.puck-map__feature { border-top: 1px solid var(--puck-line); }
.puck-map__feature > summary { display: grid; grid-template-columns: minmax(0,1fr) 10px; align-items: start; gap: .4rem .5rem; padding: .8rem 0; list-style: none; cursor: pointer; }
.puck-map__feature > summary::-webkit-details-marker { display: none; }
.puck-map__feature-name { font: 400 1rem/1.3 var(--font-display); color: var(--puck-ink); }
.puck-map__feature summary .puck-map__status { grid-column: 1; }
.puck-map__plus { color: var(--puck-quiet); font: .8rem/1.3 var(--font-mono); transition: transform .15s ease; }
.puck-map__feature .puck-map__plus { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.puck-map__feature[open] .puck-map__plus,.puck-map__setup details[open] .puck-map__plus,.puck-map__core[open] .puck-map__plus { transform: rotate(45deg); }
.puck-map__explanation { padding: .1rem 0 1rem; color: var(--puck-muted); }
.puck-map__explanation > strong { font: .65rem/1.5 var(--font-mono); color: var(--puck-ink); }
.puck-map__explanation > p { margin: .5rem 0 0; font-size: .95rem; line-height: 1.5; }
.puck-map__module-more { color: var(--puck-quiet); font: .59rem/1.5 var(--font-mono); margin: .75rem 0 0; }
.puck-map__footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 1.5rem; border-top: 1px solid var(--puck-line); font: .65rem/1.6 var(--font-mono); color: var(--puck-muted); }
.puck-map__footer a { color: var(--puck-ink); display: inline-flex; align-items: center; gap: .4rem; }
.puck-map__footer .icon { width: 13px; height: 13px; }
.puck-map__install { margin-top: 1.25rem; color: var(--puck-muted); }
.puck-map__install > summary { cursor: pointer; font: .7rem/1.6 var(--font-mono); }
.puck-map__install > p { max-width: 75ch; font-size: 1rem; }
.puck-map :focus-visible { outline: 2px solid var(--puck-blue); outline-offset: 3px; }
.puck-map__tabs button:focus-visible { outline-offset: -3px; }
.puck-map__panel:focus-visible { outline-offset: -3px; }
.puck-map__setup { display: grid; grid-template-columns: 1fr 1fr; padding: 0 1.5rem 1.5rem; gap: 0 2.5rem; }
.puck-map__setup details { border-top: 1px solid var(--puck-line); }
.puck-map__setup summary { display: flex; justify-content: space-between; gap: 1rem; list-style: none; padding: 1rem 0; cursor: pointer; }
.puck-map__setup summary::-webkit-details-marker { display: none; }
.puck-map__setup strong,.puck-map__core strong { display: block; font: 400 1.15rem/1.3 var(--font-display); }
.puck-map__setup summary > span > span,.puck-map__core summary > span:first-child > span { display: block; margin-top: .35rem; color: var(--puck-muted); font: .68rem/1.5 var(--font-mono); }
.puck-map__setup details > p,.puck-map__core > p { margin: 0 0 1rem; color: var(--puck-muted); font-size: .95rem; line-height: 1.55; }
.puck-map__emulator-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1rem 1.5rem 2rem; }
.puck-map__emulator-intro h3 { margin: 0; font: 300 2.2rem/1.1 var(--font-display); letter-spacing: -.035em; }
.puck-map__emulator-intro p { margin: 0; max-width: 50ch; color: var(--puck-muted); font-size: 1rem; }
.puck-map__cores { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 1.5rem; padding: 0 1.5rem 1rem; }
.puck-map__core { border-top: 1px solid var(--puck-line); }
.puck-map__core > summary { display: grid; grid-template-columns: minmax(0,1fr) 10px; gap: .65rem; padding: 1rem 0; list-style: none; cursor: pointer; }
.puck-map__core summary::-webkit-details-marker { display: none; }
.puck-map__core summary > .puck-map__status { grid-column: 1; }
.puck-map__core .puck-map__plus { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.puck-map__emulator-note { margin: 0; padding: .5rem 1.5rem 1.5rem; color: var(--puck-muted); font-size: 1rem; }
.puck-map__all-note { display: block; padding: 1rem 1.5rem; font: .65rem/1.5 var(--font-mono); color: var(--puck-muted); }
.puck-map[data-view="features"] .puck-map__modules { grid-template-columns: repeat(2,minmax(0,1fr)); }
.puck-map[data-view="features"] .puck-map__module { border-bottom: 1px solid var(--puck-line); }
.puck-map[data-view="features"] .puck-map__module:nth-child(even) { border-right: 0; }
.puck-map[data-view="features"] .puck-map__feature > summary { grid-template-columns: minmax(0,1fr) auto 10px; align-items: center; }
.puck-map[data-view="features"] .puck-map__feature summary .puck-map__status { grid-column: 2; }
.puck-map[data-view="features"] .puck-map__feature .puck-map__plus { grid-column: 3; grid-row: 1; }
@media (max-width: 1050px) {
 .puck-map__modules { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .puck-map__module { border-bottom: 1px solid var(--puck-line); }
 .puck-map__module:nth-child(even) { border-right: 0; }
 .puck-map__module:nth-last-child(-n+2) { border-bottom: 0; }
 .puck-map__feature > summary { grid-template-columns: minmax(0,1fr) auto 10px; align-items: center; }
 .puck-map__feature summary .puck-map__status { grid-column: 2; }
 .puck-map__feature .puck-map__plus { grid-column: 3; grid-row: 1; }
 .puck-map__cores { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
 .puck-map__intro { grid-template-columns: 1fr; gap: 1rem; margin-block: 1.5rem; }
 .puck-map__intro > p { margin: 0; max-width: 40ch; font-size: 1rem; }
 .puck-map__route { gap: 1rem; padding: 1rem; }
 .puck-map__endpoint { font-size: .58rem; gap: .6rem; }
 .puck-map__endpoint strong { font-size: 1rem; max-width: 12ch; }
 .puck-map__route-line > span { display: none; }
 .puck-map__device--android { width: 18px; height: 29px; }
 .puck-map__device--mac { width: 27px; height: 20px; }
 .puck-map__navigation { gap: .25rem; padding: .5rem .65rem; }
 .puck-map__tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; gap: .15rem; }
 .puck-map__tabs button { padding-inline: .25rem; font-size: .6rem; }
 .puck-map__key { width: 100%; }
 .puck-map__key > summary { min-height: 30px; justify-content: flex-end; }
 .puck-map__key p { grid-template-columns: 1fr; gap: .35rem; margin-block: .75rem; }
 .puck-map__panel-head { padding: .75rem; font-size: .56rem; }
 .puck-map__panel-head > span:last-child { max-width: 17ch; }
 .puck-map__module { padding: .8rem; }
 .puck-map__module-head { gap: .4rem; }
 .puck-map__module-head h3 { font-size: 1.7rem; }
 .puck-map__module-number { font-size: .5rem; }
 .puck-map__module-head p { font-size: .55rem; }
 .puck-map__module-node { display: none; }
 .puck-map__feature > summary { grid-template-columns: minmax(0,1fr) 8px; gap: .35rem .2rem; padding: .7rem 0; }
 .puck-map__feature-name { font-size: .94rem; }
 .puck-map__feature summary .puck-map__status { grid-column: 1; }
 .puck-map__feature .puck-map__plus { grid-column: 2; grid-row: 1 / 3; }
 .puck-map__status { font-size: .5rem; padding: .2rem .3rem; gap: .2rem; }
 .puck-map__status .icon { width: 11px; height: 11px; }
 .puck-map__explanation > p { font-size: .9rem; }
 .puck-map__footer { padding: .85rem; gap: .75rem; font-size: .58rem; }
 .puck-map__footer > span { max-width: 24ch; }
 .puck-map__setup { grid-template-columns: 1fr; padding-inline: .85rem; }
 .puck-map__emulator-intro { grid-template-columns: 1fr; padding: .75rem .85rem 1.5rem; gap: .75rem; }
 .puck-map__emulator-intro h3 { font-size: 1.8rem; }
 .puck-map__cores { padding-inline: .85rem; gap: 0 1rem; }
 .puck-map__core strong { font-size: 1rem; }
 .puck-map__core summary > span:first-child > span { font-size: .6rem; }
 .puck-map__emulator-note { padding-inline: .85rem; }
 .puck-map[data-view="features"] .puck-map__modules { grid-template-columns: 1fr; }
 .puck-map[data-view="features"] .puck-map__module { border-right: 0; }
 .puck-map[data-view="features"] .puck-map__module:not(:last-child) { border-bottom: 1px solid var(--puck-line); }
 .puck-map[data-view="features"] .puck-map__feature-name { font-size: 1.05rem; }
 .puck-map[data-view="features"] .puck-map__status { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) { .puck-map__plus { transition: none; } }
@media (max-width: 700px) {
 .puck-map__route { display: grid; grid-template-columns: minmax(0,1fr) 1.8rem minmax(0,1fr); gap: .5rem; }
 .puck-map__endpoint { min-width: 0; }
 .puck-map__endpoint > span:last-child { min-width: 0; }
 .puck-map__route-line { min-width: 0; }
 .puck-map__endpoint strong { font-size: .9rem; }
 .puck-map__status { font-size: .56rem; }
}
.puck-map__short-title { display: none; }
.puck-map[data-view="overview"] .puck-map__short-title { display: block; }
.puck-map[data-view="overview"] .puck-map__feature-name:has(.puck-map__short-title) .puck-map__long-title { display: none; }
.puck-map__qualifier { display: block; margin-top: .3rem; color: var(--puck-muted); font: .64rem/1.5 var(--font-mono); }
.puck-map__core summary > span:first-child > .puck-map__qualifier { color: var(--map-green); }
.puck-map__mobile-scope { display: none; }

@media (max-width: 700px) {
 .puck-map__mobile-scope { display: block; grid-column: 1 / -1; margin-top: .5rem; text-align: center; font: .62rem/1.5 var(--font-mono); color: var(--puck-muted); }
 .puck-map__status { font-size: 11px; padding-inline: .25rem; white-space: normal; max-width: 100%; }
 .puck-map__module { padding-inline: .65rem; }
 .puck-map__qualifier { font-size: .58rem; }
 .puck-map[data-view="features"] .puck-map__status { font-size: 11px; }
}

@media (max-width: 380px) {
 .puck-map__module { padding-inline: .45rem; }
 .puck-map__module-head h3 { font-size: 1.4rem; }
 .puck-map__feature summary .puck-map__status { grid-column: 1 / -1; }
 .puck-map__feature .puck-map__plus { grid-row: 1; }
 .puck-map[data-view="features"] .puck-map__feature summary .puck-map__status { grid-column: 2; }
}

/* Feature identity stays separate from its readiness tag. */
.puck-map__feature-name { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: .5rem; }
.puck-map__item-icon { display: block; width: 18px; height: 18px; fill: currentColor; color: var(--puck-blue); flex: none; margin-top: .08rem; }
.puck-map__feature-copy { min-width: 0; }
.puck-map__setup summary { display: grid; grid-template-columns: 24px minmax(0,1fr) 10px; gap: .85rem; }
.puck-map__setup .puck-map__item-icon { width: 24px; height: 24px; }
.puck-map__setup .puck-map__plus { align-self: center; }

@media (max-width: 700px) {
 .puck-map__feature-name { grid-template-columns: 16px minmax(0,1fr); gap: .35rem; }
 .puck-map__feature .puck-map__item-icon { width: 16px; height: 16px; }
}

/* Match the app's silhouettes beside the systems each core can run. */
.puck-map__core summary > span:first-child > .puck-map__core-systems { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin-top: .6rem; }
.puck-map__system { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.puck-map__system .puck-map__item-icon { width: 24px; height: 24px; margin-top: 0; }
.puck-map__system > span { min-width: 0; }
.puck-map__icon-credit { padding: 0 1.5rem 1.5rem; margin: 0; color: var(--puck-muted); font: .65rem/1.6 var(--font-mono); }
.puck-map__icon-credit a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 700px) {
 .puck-map__core summary > span:first-child > .puck-map__core-systems { gap: .4rem; }
 .puck-map__system { gap: .3rem; }
 .puck-map__system .puck-map__item-icon { width: 20px; height: 20px; }
 .puck-map__icon-credit { padding-inline: .85rem; }
}

/* Systems lead; emulator recipes live inside each disclosure. */
.puck-map__system-filters { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.5rem 1.5rem; }
.puck-map__system-filters button { min-height: 44px; padding: .5rem .75rem; background: transparent; color: var(--puck-muted); border: 1px solid var(--puck-line); border-radius: 3px; cursor: pointer; font: .68rem/1.4 var(--font-mono); }
.puck-map__system-filters button[aria-pressed="true"] { background: var(--puck-recessed); color: var(--puck-ink); border-color: var(--puck-blue); }
.puck-map__system-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .85rem 1.5rem; background: var(--puck-recessed); border-block: 1px solid var(--puck-line); }
.puck-map__system-group-head h4 { margin: 0; color: var(--puck-ink); font: .78rem/1.5 var(--font-mono); }
.puck-map__system-group-head > span { color: var(--puck-quiet); font: .65rem/1.5 var(--font-mono); }
.puck-map__core .puck-map__system-card-identity { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: .65rem; align-items: start; }
.puck-map__system-card-identity .puck-map__item-icon { width: 28px; height: 28px; margin-top: 0; }
.puck-map__core summary > .puck-map__system-card-identity > span { margin-top: 0; min-width: 0; }
.puck-map__system-card strong { color: var(--puck-ink); }
.puck-map__system-card .puck-map__qualifier { margin-top: .4rem; }
.puck-map__system-card[data-status="available"] .puck-map__qualifier { color: var(--map-green); }
.puck-map__system-detail { padding: 0 0 1.25rem; color: var(--puck-muted); }
.puck-map__emulator-label { display: block; font: .62rem/1.5 var(--font-mono); margin-bottom: .35rem; }
.puck-map__system-detail > strong { font: .72rem/1.6 var(--font-mono); }
.puck-map__system-detail > p { font-size: .95rem; line-height: 1.55; margin: .75rem 0 0; }
@media (max-width: 700px) {
 .puck-map__system-filters { padding-inline: .85rem; }
 .puck-map__system-filters button { font-size: .62rem; padding-inline: .55rem; }
 .puck-map__system-group-head { padding-inline: .85rem; }
 .puck-map__core .puck-map__system-card-identity { grid-template-columns: 22px minmax(0,1fr); gap: .35rem; }
 .puck-map__system-card-identity .puck-map__item-icon { width: 22px; height: 22px; }
 .puck-map__system-detail > p { font-size: .9rem; }
}

/* Compact feature rows reserve space for names, with one shared status key. */
.puck-map__compact-key { display:none; }
.puck-map__key[open] .puck-map__key-toggle { transform:rotate(45deg); }

 .puck-map__navigation { gap:.35rem; }
 .puck-map__key { width:100%; }
 .puck-map__key > summary { min-height:44px; gap:.75rem; justify-content:space-between; padding:.35rem 0; }
 .puck-map__key > div { position:static; width:100%; padding:.65rem 0; box-shadow:none; border:0; border-top:1px solid var(--puck-line); }
 .puck-map__key-title { display:none; }
 .puck-map__compact-key { display:grid; grid-template-columns:repeat(4,auto); gap:.5rem 1rem; font:10px/1.4 var(--font-mono); }
 .puck-map__compact-key > span { display:flex; gap:.4rem; align-items:center; }
 .puck-map__key-symbol { display:inline-block; width:16px; height:16px; flex:none; text-align:center; font:16px/1 var(--font-mono); fill:currentColor; }
 .puck-map__key-symbol[data-state="available"] { color:var(--map-green); }
 .puck-map__key-symbol[data-state="experimental"] { color:var(--map-experiment); }
 .puck-map :is(.puck-map__feature,.puck-map__core) > summary { grid-template-columns:minmax(0,1fr) 26px 10px; align-items:center; gap:.5rem; min-height:48px; }
 .puck-map :is(.puck-map__feature,.puck-map__core) summary .puck-map__status { grid-column:2; grid-row:1; width:26px; height:26px; padding:0; display:flex; align-items:center; justify-content:center; white-space:nowrap; }
 .puck-map :is(.puck-map__feature,.puck-map__core) summary .puck-map__status > span:last-child { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
 .puck-map :is(.puck-map__feature,.puck-map__core) summary .puck-map__status .puck-map__symbol { width:16px; font-size:16px; line-height:1; }
 .puck-map :is(.puck-map__feature,.puck-map__core) summary .puck-map__status .icon { width:16px; height:16px; }
 .puck-map :is(.puck-map__feature,.puck-map__core) summary .puck-map__plus { grid-column:3; grid-row:1; align-self:center; font-size:14px; }
 .puck-map__panel-head > span:last-child { max-width:none; }
@media (max-width:540px) {
 .puck-map__compact-key { grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; }

 .puck-map__panel-head { align-items:center; }
 .puck-map__panel-head > span:last-child { max-width:17ch; }
 .puck-map__modules { grid-template-columns:1fr; }
 .puck-map__module { padding:1rem; border-right:0; }
 .puck-map__module:not(:last-child) { border-bottom:1px solid var(--puck-line); }
 .puck-map__module-head { margin-bottom:.85rem; }
 .puck-map__module-head h3 { font-size:1.8rem; }
 .puck-map__module-head p { font-size:.65rem; }
 .puck-map__module-number { font-size:.6rem; }
 .puck-map__feature-name { font-size:1.05rem; grid-template-columns:18px minmax(0,1fr); gap:.6rem; }
 .puck-map__feature .puck-map__item-icon { width:18px; height:18px; }
 .puck-map__qualifier { font-size:.6rem; }
 .puck-map__cores { grid-template-columns:1fr; }
 .puck-map__core > summary { padding-block:.85rem; }
 .puck-map__system-card strong { font-size:1.1rem; }
 .puck-map__module-more { font-size:.65rem; }
}

/* One row anatomy at every size; supporting context belongs in the disclosure. */
.puck-map .puck-map__module { display:flex; flex-direction:column; }
.puck-map .puck-map__module-head { min-height:64px; }
.puck-map :is(.puck-map__feature,.puck-map__core) > summary { min-height:72px; padding-block:.75rem; }
.puck-map .puck-map__feature-name,
.puck-map .puck-map__core .puck-map__system-card-identity { align-items:center; }
.puck-map .puck-map__system-card strong { font-size:1.05rem; line-height:1.35; }
.puck-map .puck-map__cores { align-items:start; }
.puck-map .puck-map__module-more { align-self:stretch; margin:auto 0 0; padding:1rem 0 .25rem; min-height:48px; border:0; border-top:1px solid var(--puck-line); border-radius:0; background:none; color:var(--puck-blue); font:.67rem/1.5 var(--font-mono); text-align:right; cursor:pointer; }
.puck-map .puck-map__module-more span { margin-left:.4rem; }
.puck-map .puck-map__module-more:hover { text-decoration:underline; text-underline-offset:.25em; }
.puck-map .puck-map__detail-context { display:block; padding:0 0 .75rem; margin:0 0 .75rem; border-bottom:1px solid var(--puck-line); color:var(--puck-muted); font:.68rem/1.6 var(--font-mono); }
.puck-map .puck-map__detail-context > span { display:block; margin-bottom:.2rem; color:var(--puck-ink); }
@media(min-width:541px) and (max-width:1200px) {
 .puck-map__modules { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .puck-map__module { border-bottom:1px solid var(--puck-line); }
 .puck-map__module:nth-child(even) { border-right:0; }
 .puck-map__module:nth-last-child(-n+2) { border-bottom:0; }
}
@media(max-width:540px) {
 .puck-map .puck-map__module-head { min-height:0; }
 .puck-map :is(.puck-map__feature,.puck-map__core) > summary { min-height:64px; }
}

/* Readiness key belongs in the map's closing strip. */
.puck-map__footer { align-items:flex-start; }
.puck-map__footer .puck-map__key { flex:1; width:auto; min-width:0; }
.puck-map__footer .puck-map__key > summary { justify-content:flex-start; gap:1rem; }
.puck-map__footer .puck-map__key-symbol { width:16px; height:16px; }
.puck-map__footer > a { flex:none; min-height:44px; white-space:nowrap; }
@media(max-width:700px) {
 .puck-map__footer { flex-direction:column; gap:.5rem; }
 .puck-map__footer .puck-map__key { width:100%; }
 .puck-map__footer .puck-map__compact-key { grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; }
 .puck-map__footer > a { align-self:flex-end; }
}