.gs-page .gs-board-list { gap:5px; }
.gs-page .gs-board-list li { padding:3px 7px; font-size:11.5px; }
.example-step {display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;margin:24px 0;}
.example-number {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mcu-colour);color:white;font-weight:600;}
.gs-page .example-step h3 {margin:2px 0 12px;}
.example-path {border:1px solid #d6e0eb;border-radius:8px;padding:14px 16px;background:#f6f8fb;margin:14px 0;}
.example-path span {display:block;font-size:12px;color:#526b88;margin-bottom:6px;}
.gs-page .example-os {display:flex;gap:8px;margin-bottom:14px;}
.example-os button,.example-copy {font:inherit;font-size:13px;border:1px solid #d6e0eb;border-radius:6px;padding:5px 12px;background:white;color:#526b88;cursor:pointer;}
.example-os button[aria-pressed=true] {background:var(--mcu-colour);color:white;border-color:var(--mcu-colour);}
.example-url {display:flex;align-items:start;gap:10px;}.example-url code {flex:1;min-width:0;}.example-copy {flex-shrink:0;}
@media(max-width:600px){.example-step{grid-template-columns:26px minmax(0,1fr);gap:10px;}.example-number{width:26px;height:26px;}.example-url{display:block;}.example-copy{margin-top:10px;}}

.example-step,.example-first-upload {scroll-margin-top:90px;}
.example-screenshot {margin:20px 0;max-width:620px;}
.example-screenshot button {display:block;width:100%;padding:0;border:1px solid #d6e0eb;border-radius:10px;overflow:hidden;background:white;cursor:zoom-in;}
.example-screenshot img {display:block;width:100%;height:auto;}
.example-screenshot figcaption {font-size:12px;color:#526b88;margin-top:8px;}
.example-first-upload {margin:28px 0 0;padding:22px;border:1px solid var(--mcu-colour);border-left:5px solid var(--mcu-colour);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--mcu-colour) 8%,white);}
.gs-page .example-first-upload h3 {font-size:22px;margin:0 0 14px;}
.gs-page .example-first-upload ol {margin-bottom:16px;}
.example-image-dialog {border:0;border-radius:12px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);padding:16px;background:white;}
.example-image-dialog::backdrop {background:rgba(15,25,35,.8);}
.example-image-dialog img {display:block;max-width:100%;max-height:calc(100vh - 110px);object-fit:contain;}
.example-image-dialog button {display:block;margin:0 0 12px auto;font:inherit;padding:5px 14px;border:1px solid #d6e0eb;border-radius:6px;background:white;cursor:pointer;}

.example-visual-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,34%);gap:22px;align-items:start;margin:20px 0;}
.example-visual-row .example-screenshot {margin:0;min-width:0;}
.example-visual-row .gs-table-wrap {margin-bottom:0;}
.example-screenshot button {padding:8px;background:#f6f8fb;}
.example-screenshot img {max-height:230px;object-fit:contain;}
@media(max-width:700px){.example-visual-row{grid-template-columns:1fr;gap:12px;}.example-visual-row .example-screenshot{max-width:320px;}}

.develop-setup { grid-column:1 / -1; min-width:0; margin:0; border:1px solid #d6e0eb; border-radius:12px; padding:22px; scroll-margin-top:90px; }

.develop-setup[hidden] { display:none !important; }
/* Selected tile: the site's existing a.surface hover treatment, held while the setup is open. */
.develop-page a.surface.site[aria-expanded="true"] { border-color: var(--blue); background: #fff; box-shadow: 0 14px 34px rgba(47,127,232,0.14); }
.develop-page [data-setup-open] { scroll-margin-top: 90px; }
.develop-page a.surface.site[aria-expanded="true"] .cap::after { width: 100%; }

.develop-setup .gs-selector { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin:0; padding:0 0 14px; }
.develop-setup .gs-selector h3 { margin:0; }
.develop-setup .gs-mcu-options { margin:0; }
@media (max-width: 700px) { .develop-setup .gs-mcu-options { width:100%; } }
.develop-setup .gs-platform-body { padding:14px 0 0; }
.develop-setup .gs-platform-body > :first-child, .develop-setup .gs-platform-body > :first-child > li:first-child { margin-top:0; }
.develop-setup .develop-setup-docs { padding-top:24px; margin-top:24px; border-top:1px solid #d6e0eb; }
@media(max-width:600px){.develop-setup{padding:16px;}}

/* Real screenshots show at their own proportions; diagrams keep the fixed height. */
.example-photo button { padding:0; border:0; border-radius:10px; background:none; }
.example-photo img { max-height:none; object-fit:initial; border:1px solid #dce3eb; border-radius:10px; }

/* Compact reference tables inside the setup panels. */
.develop-setup .gs-table th, .develop-setup .gs-table td { padding:6px 12px; line-height:1.4; }

/* Compact step cards: number and title on one row, description below. */
.develop-setup .gs-boot-steps { margin:16px 0; gap:10px; }
.develop-setup .gs-boot-steps > div { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:6px 10px; padding:12px 14px; }
.develop-setup .gs-boot-steps span { grid-row:auto; width:26px; height:26px; margin:0; font-size:13px; }
.develop-setup .gs-boot-steps strong { margin:0; white-space:nowrap; }
.develop-setup .gs-boot-steps p { grid-column:1 / -1; }

/* Callout: the home page highlight panel, tinted with the selected MCU colour. */
.develop-setup :is(.example-callout, .gs-first-flash, .example-first-upload) { margin:28px 0 0; padding:16px; border:0; background:color-mix(in srgb,var(--mcu-colour) 8%,white); border-bottom:2px solid color-mix(in srgb,var(--mcu-colour) 35%,white); border-radius:8px; scroll-margin-top:90px; }
.develop-setup :is(.example-callout, .gs-first-flash, .example-first-upload) h3 { margin-top:0; font-size:16px; }
.develop-setup :is(.example-callout, .gs-first-flash, .example-first-upload) > :last-child { margin-bottom:0; }

/* Compact path and URL boxes. */
.develop-setup .example-path { padding:8px 12px; margin:0 0 10px; }
.develop-setup .example-path span { margin-bottom:2px; }

/* Space between a table and the text that follows it in the left column. */
.develop-setup .example-visual-row .gs-table-wrap { margin-bottom:18px; }