/* Vector Kits — shared styles for /kit and /kit/<kit-name> pages */

.kit-page {
    padding: 40px 0 90px;
    font-family: 'proxima_novaregular', 'Roboto', sans-serif;
    color: #404041;
}

.kit-page h2,
.kit-page h3 {
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    letter-spacing: 0.5px;
    color: #404041;
    margin: 0;
}

.kit-intro {
    max-width: 820px;
    margin: 0 auto 45px;
    text-align: center;
}

.kit-intro h2 {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 14px;
}

.kit-intro p {
    font-size: 17px;
    line-height: 1.6;
    color: #606162;
    margin: 0;
}

/* ---------- Kit banner (top of /kit) ---------- */

.kit-banner {
    position: relative;
    overflow: hidden;
    padding: 18px 0 30px;
    color: #fff;
    font-family: 'proxima_novaregular', 'Roboto', sans-serif;
    background: linear-gradient(120deg, #2b2b2c 0%, #404041 55%, #4a4a4b 100%);
    border-top: 5px solid #eb7a24;
}

.kit-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1.3px, transparent 1.6px);
    background-size: 20px 20px;
}

.kit-banner::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(closest-side, rgba(235, 122, 36, 0.32), rgba(235, 122, 36, 0));
}

.kit-banner .container {
    position: relative;
    z-index: 1;
}

.kit-banner__crumbs {
    display: flex;
    gap: 10px;
    margin: 0 0 8px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #cfcfcf;
}

.kit-banner__crumbs a {
    color: #cfcfcf;
}

.kit-banner__crumbs a:hover {
    color: #f19b30;
}

.kit-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.kit-banner__text {
    flex: 1 1 46%;
    min-width: 0;
}

.kit-banner__eyebrow {
    display: inline-block;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #2b2b2c;
    background: #f19b30;
    border-radius: 4px;
    padding: 4px 10px;
    margin-bottom: 10px;
}

.kit-banner h1 {
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-weight: normal;
    font-size: clamp(42px, 5vw, 64px);
    line-height: 0.92;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
    overflow-wrap: anywhere;
}

.kit-banner h1 span {
    display: block;
    font-size: 0.64em;
    color: #f19b30;
    margin-top: 2px;
}

.kit-banner__lead {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 17px;
    color: #f1f1f1;
    margin: 10px 0 0;
}

.kit-banner__quote {
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 4px solid #eb7a24;
    font-size: 15px;
    line-height: 1.35;
    color: #e4e4e4;
}

.kit-banner__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.kit-banner__chip {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    padding: 5px 12px 4px;
    text-align: center;
}

.kit-banner__chip b {
    display: block;
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-weight: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.5px;
    color: #f19b30;
}

.kit-banner__chip span {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d9d9d9;
}

.kit-banner__board {
    flex: 0 1 290px;
    margin-right: 7%;
    display: block;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5));
}

.kit-banner__board img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Practice project popup ---------- */

.kit-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.kit-table--projects tbody tr {
    cursor: pointer;
}

.kit-table--projects tbody tr:hover {
    background: #fdf1e6;
}

.kit-project-link {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    font-family: 'proxima_novabold', sans-serif;
    color: #404041;
    text-align: left;
    cursor: pointer;
}

.kit-table--projects tbody tr:hover .kit-project-link,
.kit-project-link:focus-visible {
    color: #e55125;
    text-decoration: underline;
}

.kit-table__view {
    white-space: nowrap;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 14px;
    color: #eb7a24;
}

.kit-modal .kit-modal__dialog--wide {
    max-width: 720px;
    padding: 22px 26px 22px;
}

.kit-modal .kit-project h3 {
    display: inline;
    font-size: 28px;
    margin: 0 30px 0 10px;
    vertical-align: middle;
}

.kit-project__num {
    vertical-align: middle;
}

@media (min-width: 992px) {
    .kit-modal .kit-modal__dialog--wide {
        max-width: 1200px;
    }

}

.kit-modal__close:focus-visible {
    outline: 2px solid #eb7a24;
    outline-offset: 2px;
    border-radius: 4px;
}

.kit-project__num {
    display: inline-block;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e55125;
    background: #fdf1e6;
    border-radius: 3px;
    padding: 4px 10px;
}

.kit-project__section {
    margin-top: 16px;
}

.kit-project__section h4 {
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-weight: normal;
    font-size: 21px;
    letter-spacing: 0.5px;
    color: #404041;
    padding-bottom: 4px;
    margin: 0 0 10px;
    border-bottom: 2px solid #f19b30;
}

.kit-project__section p {
    color: #606162;
    line-height: 1.5;
    margin: 0;
}

.kit-project .kit-table-wrap + .kit-list {
    margin-top: 12px;
}

.kit-project .kit-list li {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.4;
}

.kit-project .kit-table--pins {
    min-width: 0;
    font-size: 15px;
}

.kit-project .kit-table--pins th,
.kit-project .kit-table--pins td {
    padding: 5px 12px;
    line-height: 1.35;
}

.kit-project .kit-table--pins td:first-child {
    width: auto;
    font-family: inherit;
    color: #404041;
}

.kit-project .kit-table--pins td:first-child b {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
}

.kit-project .kit-table--pins td:nth-child(2) {
    white-space: nowrap;
    font-family: 'proxima_novabold', sans-serif;
    color: #e55125;
}

.kit-wiring-wrap {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 8px;
}

.kit-wiring {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    height: auto;
    font-family: 'proxima_novaregular', 'Roboto', sans-serif;
}

.kit-wiring__head {
    font-size: 11px;
    letter-spacing: 1.2px;
    fill: #6e7072;
}

.kit-wiring__block {
    fill: #fff;
    stroke: #cfcfcf;
}

.kit-wiring__mcu {
    fill: #404041;
}

.kit-wiring__block-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    fill: #e55125;
}

.kit-wiring__pin {
    font-size: 15px;
    fill: #404041;
}

.kit-wiring__mcu-pin {
    font-size: 15px;
    font-weight: 700;
    fill: #fff;
}

.kit-wiring__wire {
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* ---------- "On the board" view in the project popup ---------- */

.kit-project__section h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kit-tabs {
    display: flex;
    gap: 4px;
    font-family: 'proxima_novabold', sans-serif;
}

.kit-tabs__btn {
    border: 1px solid #cfcfcf;
    border-radius: 14px;
    padding: 2px 11px;
    background: #fff;
    font-size: 12px;
    letter-spacing: 0.3px;
    color: #606162;
    cursor: pointer;
}

.kit-tabs__btn.is-active {
    border-color: #eb7a24;
    background: #eb7a24;
    color: #fff;
}

.kit-board {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #2b2b2c;
}

.kit-board__overlay {
    display: block;
    width: 100%;
    height: auto;
}

.kit-board__dim {
    fill: rgba(20, 20, 21, 0.5);
}

.kit-board__block {
    fill: none;
    stroke: #f19b30;
}

.kit-board__wire-edge {
    fill: none;
    stroke: rgba(0, 0, 0, 0.8);
    stroke-linecap: round;
}

.kit-board__wire {
    fill: none;
    stroke-linecap: round;
}

/* The signal on a wire: a bright pulse that runs its whole length once and stops (the scene in
   kit-projects.js starts it again for the next signal). The path is drawn from the block's pin
   to the STM32 pin (length 1), so "in" runs forwards and "out" backwards. */
.kit-board__pulse {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 0.2 1;
    stroke-dashoffset: 0.2;
    opacity: 0;
}

.kit-board__step.is-in .kit-board__pulse {
    stroke: #8fe9ff;
    opacity: 1;
    filter: drop-shadow(0 0 3px #00c8ff);
    animation: kit-pulse-in var(--kit-travel, 1s) linear 1 both;
}

.kit-board__step.is-out .kit-board__pulse {
    stroke: #fff27a;
    opacity: 1;
    filter: drop-shadow(0 0 3px #ffb300);
    animation: kit-pulse-out var(--kit-travel, 1s) linear 1 both;
}

@keyframes kit-pulse-in {
    from { stroke-dashoffset: 0.2; }
    to { stroke-dashoffset: -1; }
}

@keyframes kit-pulse-out {
    from { stroke-dashoffset: -1; }
    to { stroke-dashoffset: 0.2; }
}

/* A wire that is carrying a signal stands out from the ones that are idle */
.kit-board__step.is-in .kit-board__wire,
.kit-board__step.is-out .kit-board__wire {
    filter: brightness(1.25);
}

.kit-board__pin {
    stroke: #fff;
}

.kit-board__led {
    opacity: 0;
    transition: opacity 0.12s linear;
}

.kit-board__led-halo {
    fill: rgba(255, 225, 77, 0.45);
}

.kit-board__led-core {
    fill: #fff27a;
    stroke: #ffb300;
}

.kit-important {
    margin-bottom: 12px;
    padding: 10px 14px 10px 12px;
    background: #fff4d6;
    border: 1px solid #f19b30;
    border-left: 5px solid #e55125;
    border-radius: 6px;
    color: #404041;
}

.kit-important strong {
    display: block;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c0391a;
    margin-bottom: 4px;
}

.kit-important ul {
    margin: 0;
    padding-left: 18px;
}

.kit-important li {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 15px;
    line-height: 1.4;
}

.kit-important li + li {
    margin-top: 3px;
}

.kit-wire-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.35);
    vertical-align: -1px;
}

.kit-board__led.is-on {
    opacity: 1;
}

.kit-board__led.is-fading {
    animation: kit-fade 2.4s ease-in-out infinite;
}

.kit-board__press {
    fill: rgba(255, 255, 255, 0.3);
    stroke: #fff;
    opacity: 0;
    transition: opacity 0.12s linear;
}

.kit-board__press.is-on {
    opacity: 1;
}

.kit-board__seg {
    fill: #ff2a1a;
    opacity: 0;
}

.kit-board__seg.is-on {
    opacity: 0.95;
}

.kit-board__sound {
    fill: none;
    stroke: #ffd400;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: kit-sound 1.2s ease-out infinite;
}

.kit-board__sound--late {
    animation-delay: 0.6s;
}

.kit-board__lcd {
    fill: #b4d335;
    stroke: #1d1d1e;
}

.kit-board__lcd-text {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    fill: #1f2a05;
}

.kit-board__caption {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6e7072;
}


@keyframes kit-fade {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.95; }
}

@keyframes kit-sound {
    0% { opacity: 0.9; transform: scale(0.6); }
    100% { opacity: 0; transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
    .kit-board__pulse,
    .kit-board__sound {
        animation: none;
    }

    .kit-board__led.is-fading {
        animation: none;
        opacity: 0.95;
    }
}

@media (max-width: 575px) {
    /* Uses / What you learn are in the popup; keep the table inside the screen */
    .kit-table--projects {
        min-width: 0;
    }

    .kit-table--projects .kit-table__extra {
        display: none;
    }

    .kit-modal .kit-modal__dialog--wide {
        padding: 26px 16px 20px;
    }

    .kit-wiring-wrap {
        padding: 4px;
    }

    .kit-project .kit-table--pins {
        font-size: 14px;
    }

    .kit-project .kit-table--pins th,
    .kit-project .kit-table--pins td {
        padding: 7px 8px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .kit-banner h1 {
        font-size: 40px;
    }
}

@media (max-width: 767px) {
    .kit-banner {
        padding: 16px 0 30px;
    }

    .kit-banner h1 {
        font-size: clamp(30px, 10.5vw, 48px);
    }

    .kit-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .kit-banner__board {
        flex: none;
        align-self: center;
        margin-right: 0;
        width: 70%;
        max-width: 290px;
    }

    .kit-banner::after {
        top: auto;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 55%;
    }
}

/* ---------- Kit listing cards ---------- */

.kit-grid {
    display: grid;
    gap: 28px;
}

.kit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    background: #fff;
    border: 1px solid #ececec;
    border-top: 4px solid #eb7a24;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(64, 64, 65, 0.07);
}

.kit-card__body {
    display: flex;
    flex-direction: column;
    padding: 28px 26px 26px;
}

/* Same dark backdrop as the banner: dot grid + orange glow behind the board */
.kit-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 34px 30px;
    background:
        radial-gradient(closest-side, rgba(235, 122, 36, 0.5), rgba(235, 122, 36, 0)),
        radial-gradient(rgba(255, 255, 255, 0.09) 1.3px, transparent 1.6px) 0 0 / 20px 20px,
        linear-gradient(120deg, #2b2b2c 0%, #404041 55%, #4a4a4b 100%);
}

.kit-card__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
}

.kit-card__media-fallback {
    display: none;
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-size: 30px;
    line-height: 1.1;
    text-align: center;
    color: #f19b30;
}

.kit-card__media--empty .kit-card__media-fallback {
    display: block;
}


.kit-card__tag {
    align-self: flex-start;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #e55125;
    background: #fdf1e6;
    border-radius: 3px;
    padding: 4px 10px;
    margin-bottom: 14px;
}

.kit-card h3 {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 6px;
}

.kit-card__sub {
    font-family: 'proxima_novabold', sans-serif;
    color: #eb7a24;
    margin-bottom: 12px;
}

.kit-card p {
    color: #606162;
    line-height: 1.55;
    margin-bottom: 16px;
}

.kit-card__points {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.kit-card__points li,
.kit-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    line-height: 1.45;
}

.kit-card__points li::before,
.kit-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #eb7a24;
}

.kit-btn {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    background: #eb7a24;
    border-radius: 4px;
    padding: 11px 22px;
    transition: background 0.2s ease;
}

.kit-btn:hover,
.kit-btn:focus {
    color: #fff;
    background: #e55125;
}

.kit-btn--ghost {
    color: #eb7a24;
    background: transparent;
    box-shadow: inset 0 0 0 2px #eb7a24;
}

.kit-btn--ghost:hover,
.kit-btn--ghost:focus {
    color: #fff;
    background: #eb7a24;
}

/* ---------- Kit detail page ---------- */

.kit-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 44px;
}

.kit-spec {
    flex: 1 1 150px;
    background: #fdf1e6;
    border-radius: 8px;
    padding: 18px 16px;
    text-align: center;
}

.kit-spec strong {
    display: block;
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-size: 28px;
    font-weight: normal;
    line-height: 1.1;
    white-space: nowrap;
    color: #e55125;
}

.kit-spec span {
    font-size: 14px;
    color: #606162;
}

.kit-section {
    margin-bottom: 44px;
}

.kit-section > h3 {
    font-size: 32px;
    padding-bottom: 10px;
    margin-bottom: 22px;
    border-bottom: 2px solid #f19b30;
}

.kit-section > p {
    font-size: 16px;
    line-height: 1.6;
    color: #606162;
}

.kit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kit-list--cols {
    columns: 2;
    column-gap: 40px;
}

.kit-list--cols li {
    break-inside: avoid;
}

.kit-list li strong {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
}

.kit-list li small {
    display: block;
    font-size: 14px;
    color: #6e7072;
}

.kit-steps {
    counter-reset: kit-step;
    list-style: none;
    padding: 0;
    margin: 0;
}

.kit-steps > li {
    counter-increment: kit-step;
    position: relative;
    padding: 0 0 18px 52px;
    line-height: 1.55;
}

.kit-steps > li::before {
    content: counter(kit-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eb7a24;
    color: #fff;
    font-family: 'proxima_novabold', sans-serif;
    text-align: center;
    line-height: 36px;
}

.kit-steps > li > strong {
    display: block;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 17px;
}

.kit-table-wrap {
    overflow-x: auto;
}

.kit-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.kit-table th,
.kit-table td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid #ececec;
    line-height: 1.45;
}

.kit-table th {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #fff;
    background: #404041;
}

.kit-table td:first-child {
    width: 48px;
    font-family: 'proxima_novabold', sans-serif;
    color: #eb7a24;
}

.kit-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #fdf1e6;
    border-radius: 10px;
    padding: 28px 30px;
}

.kit-cta h3 {
    font-size: 30px;
    margin-bottom: 4px;
}

.kit-cta p {
    margin: 0;
    color: #606162;
}

.kit-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kit-cta .kit-btn {
    margin-top: 0;
}

/* ---------- Registration modal ---------- */

body.kit-modal-open {
    overflow: hidden;
}

.kit-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    background: rgba(32, 32, 33, 0.72);
    font-family: 'proxima_novaregular', 'Roboto', sans-serif;
}

.kit-modal[hidden],
.kit-modal form[hidden] {
    display: none;
}

.kit-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: auto;
    background: #fff;
    border-top: 4px solid #eb7a24;
    border-radius: 8px;
    padding: 30px 28px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.kit-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #6e7072;
    cursor: pointer;
}

.kit-modal h3 {
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-size: 30px;
    letter-spacing: 0.5px;
    color: #404041;
    margin: 0 24px 8px 0;
}

.kit-modal__lead {
    color: #606162;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Login form: note for Vector students, who log in with their Student ID */
.kit-modal__student {
    margin: 0 0 14px;
    padding: 9px 12px;
    background: #fdf1e6;
    border-left: 4px solid #eb7a24;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: #404041;
}

.kit-modal__student strong {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #c0391a;
}

.kit-field {
    display: block;
    margin-bottom: 14px;
}

.kit-field span {
    display: block;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 14px;
    color: #404041;
    margin-bottom: 5px;
}

.kit-field input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 16px;
    color: #404041;
    background: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    outline: none;
}

.kit-field input:focus {
    border-color: #eb7a24;
    box-shadow: 0 0 0 3px rgba(235, 122, 36, 0.18);
}

.kit-modal__msg {
    min-height: 20px;
    margin: 0 0 12px;
    font-size: 14px;
    color: #c0271a;
}

.kit-modal__msg--ok {
    color: #2e7d32;
}

.kit-modal .kit-btn {
    width: 100%;
    border: 0;
    text-align: center;
    cursor: pointer;
}

.kit-modal button:disabled {
    opacity: 0.6;
    cursor: default;
}

.kit-modal__links {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.kit-modal__links button {
    border: 0;
    padding: 0;
    background: none;
    font-size: 14px;
    color: #eb7a24;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 767px) {
    .kit-page {
        padding: 45px 0 60px;
    }

    .kit-intro h2 {
        font-size: 32px;
    }


    .kit-list--cols {
        columns: 1;
    }
}

@media (max-width: 991px) {
    .kit-card {
        grid-template-columns: 1fr;
    }

    .kit-card__media {
        order: -1;
        min-height: 200px;
    }

    .kit-card__media img {
        max-height: 300px;
    }

    /* The banner already shows this kit's photo just above */
    .kit-card--featured .kit-card__media {
        display: none;
    }
}

/* Sample program in the project popup */
.kit-code {
    border: 1px solid #2b2b2c;
    border-radius: 8px;
    overflow: hidden;
    background: #1f2021;
}

.kit-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px 6px 14px;
    background: #404041;
}

.kit-code__name {
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    color: #e6e6e6;
}

.kit-code__copy {
    border: 0;
    border-radius: 4px;
    padding: 5px 14px;
    background: #eb7a24;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.kit-code__copy:hover,
.kit-code__copy:focus-visible {
    background: #e55125;
}

.kit-code__pre {
    margin: 0;
    padding: 12px 14px;
    max-height: 440px;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: #f2f2f2;
    white-space: pre;
    tab-size: 4;
}

.kit-code__pre code {
    padding: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    white-space: inherit;
}

.kit-code__comment {
    color: #9fc28a;
}

@media (max-width: 575px) {
    .kit-code__pre {
        max-height: 360px;
        font-size: 11.5px;
    }
}

/* Three tabs beside the heading: keep each label on one line, wrap below the title on phones */
.kit-project__section h4 {
    flex-wrap: wrap;
}

.kit-tabs__btn {
    white-space: nowrap;
}

/* Assumptions the example program makes about the board (Programming Example) */
.kit-important--check li {
    font-family: 'proxima_novaregular', sans-serif;
    font-size: 14px;
}

/* ---------- "How to Run on the Board": one complete list per IDE ---------- */

.kit-how__lead {
    margin: 0 0 14px;
    font-size: 16px;
    color: #606162;
}

.kit-how__needs,
.kit-how__problems {
    padding: 12px 16px;
    border-radius: 6px;
    background: #f6f6f6;
    border-left: 4px solid #6e7072;
}

.kit-how__needs strong,
.kit-how__problems > strong,
.kit-how__variant > strong {
    display: block;
    margin-bottom: 6px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #404041;
}

.kit-how__needs ul {
    margin: 0;
    padding-left: 20px;
}

.kit-how__needs li,
.kit-how__steps li,
.kit-how__problems dd {
    font-size: 15.5px;
    line-height: 1.55;
    color: #404041;
}

.kit-how__needs li + li {
    margin-top: 3px;
}

/* Link to a tool's download page on its maker's site */
.kit-how__link {
    font-family: 'proxima_novabold', sans-serif;
    color: #e55125;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.kit-how__link::after {
    content: "\2197";
    display: inline-block;
    margin-left: 2px;
    font-size: 0.85em;
    text-decoration: none;
}

.kit-how__link:hover,
.kit-how__link:focus {
    color: #eb7a24;
}

.kit-how__stage {
    margin-top: 18px;
    border: 1px solid #f19b30;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.kit-how .kit-how__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 14px;
    background: #fdf1e6;
    border-bottom: 1px solid #f6cfa0;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.25;
    color: #404041;
}

.kit-how__number {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eb7a24;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}

.kit-how__body {
    padding: 12px 16px 14px;
}

.kit-how__intro {
    margin: 0 0 8px;
    font-size: 15.5px;
    color: #606162;
}

.kit-how__steps {
    margin: 0;
    padding-left: 24px;
}

.kit-how__steps li {
    padding-left: 4px;
}

.kit-how__steps li + li {
    margin-top: 7px;
}

.kit-how__steps li::marker {
    font-family: 'proxima_novabold', sans-serif;
    color: #e55125;
}

/* Something to click or find on the screen */
.kit-how__ui {
    font-family: 'proxima_novabold', sans-serif;
    color: #202021;
}

/* Something to type, a file name, or text printed by the tool */
.kit-how__type {
    padding: 1px 6px;
    border-radius: 3px;
    background: #efefef;
    border: 1px solid #dcdcdc;
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.88em;
    color: #202021;
    overflow-wrap: anywhere;
}

/* Two ways to do one stage (e.g. by version of the IDE) */
.kit-how__variant {
    margin-top: 10px;
    padding: 10px 14px 12px;
    border: 1px dashed #c9cacb;
    border-radius: 6px;
}

.kit-how__variant > strong {
    color: #c0391a;
}

.kit-how__copy {
    margin-top: 12px;
    padding: 9px 18px;
    font-size: 14px;
}

.kit-how__note {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 4px solid #eb7a24;
    border-radius: 4px;
    background: #fdf1e6;
    font-size: 14.5px;
    line-height: 1.5;
    color: #404041;
}

.kit-how__problems {
    margin-top: 18px;
}

.kit-how__problems dl {
    margin: 0;
}

.kit-how__problems dt {
    margin-top: 8px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 15.5px;
    color: #c0391a;
}

.kit-how__problems dt:first-child {
    margin-top: 0;
}

.kit-how__problems dd {
    margin: 1px 0 0;
}

/* BOOT0 / BOOT1 explanation inside Getting Started */
.kit-boot {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fdf1e6;
    border-left: 4px solid #eb7a24;
    border-radius: 6px;
}

.kit-boot p {
    margin: 0;
    color: #404041;
}

.kit-boot .kit-table-wrap {
    margin: 10px 0;
}

.kit-boot b {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
}

.kit-table.kit-table--boot {
    min-width: 440px;
    background: #fff;
    font-size: 15px;
}

.kit-table--boot th,
.kit-table--boot td {
    padding: 7px 10px;
}

.kit-table--boot td:nth-child(-n+2) {
    font-family: 'proxima_novabold', sans-serif;
    white-space: nowrap;
}

.kit-steps li .kit-important {
    margin: 10px 0 0;
}

.kit-steps li .kit-important strong {
    font-size: 12px;
}

/* Circuit schematic in the project popup (KiCad-like colours) */
.kit-wiring-wrap--sch {
    background: #fff;
    padding: 8px;
    overflow-x: auto;
}

.kit-sch {
    display: block;
    width: 100%;
    min-width: 560px;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.kit-sch__wire { fill: none; stroke: #00892b; stroke-width: 1.6; stroke-linejoin: round; }
.kit-sch__sym { fill: none; stroke: #8a1f11; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kit-sch__bar { stroke: #8a1f11; stroke-width: 3; stroke-linecap: round; }
.kit-sch__part { fill: #fff; stroke: #8a1f11; stroke-width: 1.5; stroke-linejoin: round; }
.kit-sch__ic { fill: #fffbc8; stroke: #8a1f11; stroke-width: 1.6; }
.kit-sch__glyph { fill: none; stroke: #8a1f11; stroke-width: 1.2; }
.kit-sch__dot { fill: #00892b; }
.kit-sch__head { fill: #eef2ff; stroke: #1a2c9c; stroke-width: 1.4; }
.kit-sch__rs232 { stroke: #e55125; stroke-width: 2.4; stroke-dasharray: 5 3; }
.kit-sch__jumper { stroke-width: 3.6; stroke-linecap: round; }
.kit-sch__jumper-edge { stroke: #404041; stroke-width: 5.2; stroke-linecap: round; opacity: 0.55; }

.kit-sch__pin { font-size: 11.5px; fill: #00585c; }
.kit-sch__hdr { font-size: 12px; font-weight: bold; fill: #1a2c9c; }
.kit-sch__val { font-size: 10.5px; fill: #00585c; }
.kit-sch__pwr { font-size: 11px; font-weight: bold; fill: #8a1f11; }
.kit-sch__title { font-size: 11.5px; font-weight: bold; fill: #1a2c9c; }
.kit-sch__note { font-size: 10.5px; font-style: italic; fill: #606162; }
.kit-sch__col { font-size: 9px; font-weight: bold; letter-spacing: 0.8px; fill: #8c8d8f; }

.kit-wiring__wire--fixed {
    stroke-dasharray: 5 4;
}

.kit-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #e7f4ea;
    font-size: 12px;
    color: #1d6b34;
    white-space: nowrap;
}

/* Kit access popup: Log in / Register tabs, two-column password row */
.kit-modal__tabs {
    display: flex;
    gap: 4px;
    margin: 0 34px 18px 0;
    border-bottom: 2px solid #ececec;
}

.kit-modal__tabs[hidden] {
    display: none;
}

.kit-modal__tabs button {
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 6px 16px 8px;
    background: none;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 16px;
    color: #6e7072;
    cursor: pointer;
}

.kit-modal__tabs button.is-active {
    color: #e55125;
    border-bottom-color: #eb7a24;
}

.kit-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.kit-field input::placeholder {
    font-size: 14px;
    color: #9a9b9d;
}

@media (max-width: 420px) {
    .kit-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* Logged-in visitor: name and Log out at the top of the banner */
.kit-banner__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 8px;
}

.kit-banner__top .kit-banner__crumbs {
    margin: 0;
}

.kit-banner__account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    color: #cfcfcf;
    white-space: nowrap;
}

.kit-banner__account button {
    border: 1px solid #8c8d8f;
    border-radius: 4px;
    padding: 3px 12px;
    background: none;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
}

.kit-banner__account button:hover,
.kit-banner__account button:focus-visible {
    border-color: #f19b30;
    color: #f19b30;
}

/* ---------- Practice project page (/kit/<kit>/project/<n>, opened in its own window) ---------- */

.kit-table--projects .kit-project-link:hover {
    color: #e55125;
}

/* Kit banner in its compact form: breadcrumb, eyebrow, title and a small board image */
.kit-banner--compact {
    padding: 16px 0 18px;
}

.kit-banner--compact h1 {
    font-size: clamp(36px, 4vw, 50px);
}

.kit-banner--compact .kit-banner__board {
    flex: 0 1 320px;
    margin-right: 3%;
}

/* Board image with the blocks a project uses highlighted and the rest dimmed */
.kit-banner__map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.kit-banner__map-dim {
    fill: rgba(20, 20, 21, 0.62);
}

.kit-banner__map-block {
    fill: none;
    stroke: #ffd400;
}

/* Callouts for the highlighted blocks (a project with `callouts` in config/kit-projects.js).
   Wide screens: labels beside the board, each joined to its block by a leader line. The labels
   are drawn outside the picture's own box, in room kept free by the padding below (the
   --kit-pad-* values come from the layout, as fractions of the board's width).
   Narrower screens: a number on each block and the labels in a numbered list. */
.kit-banner__map-leader {
    fill: none;
    stroke: #ffd400;
    stroke-linejoin: round;
}

.kit-banner__map-dot {
    fill: #ffd400;
}

.kit-banner__map-name {
    font-family: 'proxima_novabold', sans-serif;
    letter-spacing: 0.5px;
    fill: #fff;
}

.kit-banner__map-role {
    fill: #d9d9d9;
}

.kit-banner__map-badges circle {
    fill: #ffd400;
    stroke: #2b2b2c;
    stroke-width: 5;
}

.kit-banner__map-badges text {
    font-family: 'proxima_novabold', sans-serif;
    fill: #2b2b2c;
}

.kit-banner__legend {
    display: none;
}

@media (min-width: 992px) {
    .kit-banner--compact .kit-banner__board--callouts {
        --kit-board: 290px;
        flex: none;
        box-sizing: content-box;
        width: var(--kit-board);
        margin-right: 0;
        padding: calc(var(--kit-board) * var(--kit-pad-top)) calc(var(--kit-board) * var(--kit-pad-right)) calc(var(--kit-board) * var(--kit-pad-bottom)) calc(var(--kit-board) * var(--kit-pad-left));
    }

    .kit-banner__board--callouts .kit-banner__map {
        overflow: visible;
        border-radius: 0;
    }

    .kit-banner__map-badges {
        display: none;
    }
}

@media (min-width: 1200px) {
    .kit-banner--compact .kit-banner__board--callouts {
        --kit-board: 320px;
    }
}

@media (max-width: 991px) {
    .kit-banner__map-callouts {
        display: none;
    }

    /* Title, then the list of parts below it, with the board on the right */
    .kit-banner__inner--callouts {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas: "text board" "legend board";
        gap: 16px 36px;
        align-items: start;
    }

    .kit-banner__inner--callouts .kit-banner__text {
        grid-area: text;
    }

    .kit-banner--compact .kit-banner__board--callouts {
        grid-area: board;
        align-self: center;
        width: auto;
        max-width: none;
    }

    .kit-banner__legend {
        grid-area: legend;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 16px;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: kit-legend;
    }

    .kit-banner__legend li {
        position: relative;
        min-height: 22px;
        padding-left: 30px;
        font-size: 13px;
        line-height: 1.3;
        color: #d9d9d9;
        counter-increment: kit-legend;
    }

    .kit-banner__legend li::before {
        content: counter(kit-legend);
        position: absolute;
        left: 0;
        top: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffd400;
        font-family: 'proxima_novabold', sans-serif;
        font-size: 13px;
        line-height: 22px;
        text-align: center;
        color: #2b2b2c;
    }

    .kit-banner__legend b {
        display: block;
        font-family: 'proxima_novabold', sans-serif;
        font-weight: normal;
        letter-spacing: 0.5px;
        color: #fff;
    }
}

@media (max-width: 767px) {
    /* Phone: title, board, then the list */
    .kit-banner__inner--callouts {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "text" "board" "legend";
        gap: 20px;
    }

    .kit-banner--compact .kit-banner__board--callouts {
        justify-self: center;
        width: 80%;
        max-width: 300px;
    }
}

/* Project name inside the banner, below the kit title */
.kit-banner__heading {
    margin: 16px 0 0;
    padding-left: 12px;
    border-left: 4px solid #eb7a24;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 24px;
    line-height: 1.25;
    color: #fff;
}

.kit-banner__heading span {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #f19b30;
    margin-bottom: 2px;
}

/* Previous / All projects / Next, below the banner */
.kit-project-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 30px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e3e3;
}

.kit-project-head__nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kit-project-head__nav a {
    border: 2px solid #eb7a24;
    border-radius: 5px;
    padding: 8px 20px;
    background: #eb7a24;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(229, 81, 37, 0.25);
}

.kit-project-head__nav a:hover,
.kit-project-head__nav a:focus-visible {
    border-color: #e55125;
    background: #e55125;
    color: #fff;
}

/* "All projects" is the secondary button: outlined, not filled */
.kit-project-head__nav a.kit-project-head__all {
    background: #fff;
    color: #e55125;
    box-shadow: none;
}

.kit-project-head__nav a.kit-project-head__all:hover,
.kit-project-head__nav a.kit-project-head__all:focus-visible {
    background: #fdf1e6;
    color: #e55125;
}

.kit-page--project {
    padding: 22px 0 70px;
}

@media (max-width: 767px) {
    .kit-banner__heading {
        font-size: 20px;
    }

    .kit-banner--compact .kit-banner__board {
        flex-basis: auto;
        width: 80%;
        max-width: 300px;
    }
}

@media (max-width: 575px) {
    /* Breadcrumb and "Hi, name / Log out" stack instead of squeezing each other */
    .kit-banner__top {
        flex-wrap: wrap;
        gap: 6px 16px;
    }

    .kit-banner__top .kit-banner__crumbs {
        flex-wrap: wrap;
        gap: 2px 8px;
    }
}

/* ---------- Kit Contents (kit page): what Vector supplies in the kit ---------- */

.kit-contents {
    max-width: 860px;
    border: 1px solid #f19b30;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.kit-contents__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 18px 9px 62px;
    background: #404041;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
}

.kit-contents__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: kit-contents;
}

.kit-contents__list > li {
    position: relative;
    padding: 13px 18px 13px 62px;
    counter-increment: kit-contents;
}

.kit-contents__list > li + li {
    border-top: 1px solid #f0e2d2;
}

.kit-contents__list > li:nth-child(even) {
    background: #fffaf5;
}

.kit-contents__list > li::before {
    content: counter(kit-contents);
    position: absolute;
    left: 16px;
    top: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eb7a24;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    color: #fff;
}

.kit-contents__row,
.kit-contents__sub li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.kit-contents__name strong {
    display: block;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 17px;
    line-height: 1.35;
    color: #202021;
}

.kit-contents__name small {
    display: block;
    margin-top: 1px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #606162;
}

.kit-contents__qty {
    flex: none;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #fdecd9;
    border: 1px solid #f19b30;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: #202021;
}

.kit-contents__sub {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
}

.kit-contents__sub li {
    padding: 6px 0 6px 14px;
    border-left: 3px solid #f19b30;
    font-size: 15.5px;
    line-height: 1.4;
    color: #404041;
}

.kit-contents__sub li + li {
    margin-top: 4px;
}

/* ---------- On-board Interfaces & Peripherals (kit page): each item with its quantity ---------- */

.kit-onboard li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0;
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid #eee3d6;
}

.kit-onboard li::before {
    top: calc(9px + 0.5em);
}

/* ---------- Components required (project page): two groups, in the kit / arrange separately ---------- */

.kit-parts-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.kit-parts {
    border: 1px solid #2e9e4f;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.kit-parts--own {
    border-color: #8c8d8f;
}

.kit-parts__head {
    padding: 9px 16px 10px;
    background: #2e9e4f;
    color: #fff;
}

.kit-parts--own .kit-parts__head {
    background: #606162;
}

.kit-parts__head strong {
    display: block;
    font-family: 'bebas_neue_proregular', sans-serif;
    font-weight: normal;
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: 0.5px;
}

.kit-parts__head span {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.95;
}

.kit-parts__list {
    list-style: none;
    margin: 0;
    padding: 4px 16px 6px;
}

.kit-parts__list li {
    position: relative;
    padding: 9px 0 9px 26px;
    font-size: 16px;
    line-height: 1.4;
    color: #202021;
}

.kit-parts__list li + li {
    border-top: 1px solid #ececec;
}

/* a tick for what is supplied, a plain dot for what is not */
.kit-parts__list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 13px;
    width: 12px;
    height: 7px;
    border-left: 3px solid #2e9e4f;
    border-bottom: 3px solid #2e9e4f;
    transform: rotate(-45deg);
}

.kit-parts--own .kit-parts__list li::before {
    left: 5px;
    top: 16px;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #8c8d8f;
    transform: none;
}

.kit-parts__list small {
    display: block;
    font-size: 14px;
    color: #606162;
}

.kit-page--project .kit-project__section .kit-parts__none {
    margin: 0;
    padding: 14px 16px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #606162;
}

@media (max-width: 767px) {
    .kit-parts-groups {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575px) {
    .kit-contents__head,
    .kit-contents__list > li {
        padding-left: 52px;
        padding-right: 12px;
    }

    .kit-contents__list > li::before {
        left: 11px;
    }
}

/* ---------- Section buttons above the project (pinned below the site header on scroll) ---------- */

.kit-jump {
    margin-top: 16px;
}

.kit-jump__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kit-jump__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.kit-jump__btn {
    flex: none;
    padding: 7px 15px;
    border: 1px solid #f19b30;
    border-radius: 999px;
    background: #fdecd9;        /* mild orange, so the buttons stand out on the white page */
    font-family: 'proxima_novabold', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    color: #404041;
    text-decoration: none;
}

.kit-jump__btn:hover,
.kit-jump__btn:focus-visible {
    background: #f9d5ae;
    color: #c0391a;
    text-decoration: none;
}

.kit-jump__btn.is-active {
    border-color: #eb7a24;
    background: #eb7a24;
    color: #fff;
}

/* "Top" is only useful once the row follows the reader */
.kit-jump__top {
    display: none;
    border-color: #404041;
    background: #404041;
    color: #fff;
}

.kit-jump__top:hover,
.kit-jump__top:focus-visible {
    border-color: #202021;
    background: #202021;
    color: #fff;
}

.kit-jump.is-pinned .kit-jump__bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 900;       /* below the site header (991), above the page */
    height: 80px;       /* name strip 28 + buttons 52 */
    background: #fff;
    border-bottom: 2px solid #eb7a24;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.14);
}

/* The project's name above the buttons, only while pinned (the banner has scrolled away) */
.kit-jump__name {
    display: none;
}

.kit-jump.is-pinned .kit-jump__name {
    display: block;
    height: 28px;
    padding: 0 15px;
    background: #404041;
}

.kit-jump__name-inner {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 auto;
    line-height: 28px;
    white-space: nowrap;
    overflow: hidden;
}

.kit-jump__name span {
    flex: none;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f19b30;
}

.kit-jump__name strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 15px;
    color: #fff;
}

.kit-jump.is-pinned .kit-jump__row {
    padding: 0 15px;
    box-sizing: content-box;
    height: 50px;
    margin: 0 auto;
}

/* One line while pinned; on a narrow screen the buttons scroll sideways and Top stays put */
.kit-jump.is-pinned .kit-jump__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.kit-jump.is-pinned .kit-jump__inner::-webkit-scrollbar {
    display: none;
}

.kit-jump.is-pinned .kit-jump__top {
    display: inline-block;
}

/* A section reached by its link must not hide under the header and the pinned row */
.kit-page--project .kit-project__section {
    scroll-margin-top: 205px;
}

@media (max-width: 575px) {
    .kit-jump__btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .kit-jump.is-pinned .kit-jump__name,
    .kit-jump.is-pinned .kit-jump__row {
        padding: 0 10px;
    }

    .kit-jump__name-inner {
        gap: 8px;
    }

    .kit-jump__name span {
        font-size: 10.5px;
        letter-spacing: 1px;
    }

    .kit-jump__name strong {
        font-size: 14px;
    }
}

/* Project page: sections follow one another, all the full width of the page. Diagrams sit
   centred inside their panel at a readable size instead of stretching across it. */
.kit-page--project .kit-project__section {
    margin-top: 26px;
}

.kit-page--project .kit-project__section > p {
    font-size: 17px;
}

.kit-page--project .kit-project__section--tabs h4 {
    justify-content: flex-start;
    gap: 10px 22px;
}

.kit-page--project .kit-tabs__btn {
    padding: 4px 14px;
    font-size: 13px;
}

.kit-page--project .kit-wiring {
    max-width: 520px;
}

.kit-page--project .kit-sch {
    max-width: 900px;
    margin: 0 auto;
}

.kit-page--project .kit-board {
    width: fit-content;
    max-width: min(100%, 900px);
    margin: 0 auto;
}

.kit-page--project .kit-board__overlay {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    max-height: max(0px, calc(100vh - var(--kit-board-offset, 260px)));
    max-height: max(0px, calc(100dvh - var(--kit-board-offset, 260px)));
}

.kit-page--project .kit-code__pre {
    max-height: 600px;
    font-size: 13.5px;
}

.kit-page--project .kit-board__caption {
    font-size: 14px;
}

/* ---------- "On the board": wires connected one step at a time ---------- */

.kit-board__step {
    opacity: 0;
}

.kit-board__step.is-on {
    opacity: 1;
}

/* While stepping, wires already connected fade back so the current one stands out */
.kit-board--stepping .kit-board__step.is-on:not(.is-current) {
    opacity: 0.4;
}

.kit-board__draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.kit-board__step.is-on .kit-board__draw {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.9s ease;
}

.kit-board__ring {
    fill: none;
    stroke: #fff;
    opacity: 0;
}

.kit-board__step.is-current .kit-board__ring {
    animation: kit-ring 0.9s ease-in-out infinite;
}

@keyframes kit-ring {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}

.kit-board__tag {
    opacity: 0;
}

.kit-board__step.is-current .kit-board__tag {
    opacity: 1;
}

.kit-board__tag rect {
    fill: #fff;
    stroke: #202021;
}

.kit-board__tag text {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    fill: #202021;
}

.kit-stepbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: #fdf1e6;
    border: 1px solid #f19b30;
    border-radius: 8px;
}

.kit-stepbar button {
    min-width: 38px;
    height: 36px;
    padding: 0 12px;
    border: 2px solid #eb7a24;
    border-radius: 5px;
    background: #fff;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 16px;
    line-height: 1;
    color: #e55125;
    cursor: pointer;
}

.kit-stepbar button.kit-stepbar__play {
    min-width: 88px;
    background: #eb7a24;
    color: #fff;
}

.kit-stepbar button:disabled {
    opacity: 0.4;
    cursor: default;
}

.kit-stepbar__text {
    flex: 1 1 260px;
    padding-left: 6px;
    font-size: 16px;
    line-height: 1.35;
    color: #404041;
}

/* Which way the signal is travelling in the finished circuit */
.kit-stepbar__signal {
    flex: 1 1 100%;
    padding: 6px 0 2px 2px;
    border-top: 1px dashed #f1c493;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 15.5px;
    line-height: 1.35;
    color: #202021;
}

.kit-signal {
    display: inline-block;
    min-width: 66px;
    margin-right: 10px;
    padding: 2px 9px;
    border-radius: 3px;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    color: #202021;
}

.kit-signal--in {
    background: #8fe9ff;
    border: 1px solid #25a9cc;
}

.kit-signal--out {
    background: #fff27a;
    border: 1px solid #d99a00;
}

.kit-stepbar__text b {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #c0391a;
    margin-right: 10px;
}

.kit-stepbar__text strong {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #e55125;
}

.kit-stepbar__text .kit-wire-dot {
    margin-right: 6px;
}

.kit-page--project .kit-stepbar {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
    .kit-board__step.is-on .kit-board__draw {
        transition: none;
    }

    .kit-board__step.is-current .kit-board__ring {
        animation: none;
        opacity: 1;
    }
}

/* ---------- Programming Example → Source: code on the left, how it runs on the right ---------- */

.kit-code__line {
    display: block;
}

.kit-run-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* Numbered lines, with the line being executed highlighted */
.kit-code--lines .kit-code__pre {
    position: relative;
    height: 600px;
    max-height: none;
    padding: 10px 0;
    scroll-behavior: smooth;
}

.kit-code--lines .kit-code__pre code {
    display: inline-block;
    min-width: 100%;
    counter-reset: kit-line;
}

.kit-code--lines .kit-code__line {
    counter-increment: kit-line;
    padding: 0 14px 0 0;
}

.kit-code--lines .kit-code__line::before {
    content: counter(kit-line);
    display: inline-block;
    width: 4ch;
    margin-right: 14px;
    text-align: right;
    color: #7c7e80;
    user-select: none;
}

.kit-code--lines .kit-code__line.is-current {
    background: rgba(241, 155, 48, 0.32);
    box-shadow: inset 4px 0 0 #f19b30;
}

.kit-code--lines .kit-code__line.is-current::before {
    color: #ffd08a;
}

.kit-run {
    border: 1px solid #f19b30;
    border-radius: 8px;
    background: #fffaf3;
    padding: 14px 16px 16px;
}

.kit-run__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.kit-run__head strong {
    font-family: 'bebas_neue_proregular', 'bebas_neueregular', sans-serif;
    font-weight: normal;
    font-size: 22px;
    letter-spacing: 0.5px;
    color: #404041;
}

.kit-run__count {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 14px;
    color: #c0391a;
    white-space: nowrap;
}

.kit-stepbar--run {
    margin: 0 0 14px;
    background: #fff;
}

.kit-page--project .kit-stepbar--run {
    max-width: none;
}

.kit-stepbar button.kit-stepbar__restart {
    border-color: #cfcfcf;
    font-size: 14px;
    color: #606162;
}

.kit-run__tip {
    flex: 1 1 140px;
    font-size: 13px;
    color: #6e7072;
}

.kit-run__pass {
    display: inline-block;
    border-radius: 3px;
    padding: 3px 10px;
    background: #404041;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #fff;
}

.kit-run .kit-run__title {
    margin: 10px 0 4px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 21px;
    line-height: 1.25;
    color: #e55125;
}

.kit-run .kit-run__note {
    min-height: 4.5em;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #404041;
}

.kit-run__vars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.kit-run__var {
    display: inline-flex;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 14px;
}

.kit-run__var i {
    padding: 4px 9px;
    background: #ececec;
    font-style: normal;
    color: #404041;
}

.kit-run__var b {
    padding: 4px 10px;
    font-weight: normal;
    color: #202021;
}

.kit-run__var.is-changed {
    border-color: #eb7a24;
}

.kit-run__var.is-changed b {
    background: #ffe2c2;
    font-weight: bold;
    color: #c0391a;
}

.kit-run__io {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e0c9ac;
}

.kit-run__row + .kit-run__row {
    margin-top: 12px;
}

.kit-run__label {
    display: block;
    margin-bottom: 6px;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6e7072;
}

.kit-run__items {
    display: flex;
    gap: 5px;
}

.kit-run__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 74px;
    padding: 6px 2px 5px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
}

.kit-run__item i {
    width: 22px;
    height: 22px;
    border: 2px solid #b9babc;
    border-radius: 50%;
    background: #f1f1f1;
}

.kit-run__item b {
    margin-top: 4px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #404041;
}

.kit-run__item small {
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 10px;
    letter-spacing: -0.3px;
    color: #6e7072;
    white-space: nowrap;
}

/* A lit LED */
.kit-run__row--leds .kit-run__item.is-on {
    border-color: #f19b30;
    background: #fff6e0;
}

.kit-run__row--leds .kit-run__item.is-on i {
    border-color: #e55125;
    background: #ffd400;
    box-shadow: 0 0 10px 3px rgba(255, 196, 0, 0.75);
}

/* Buttons are square; a held button looks pushed in */
.kit-run__row--buttons .kit-run__item i {
    border-radius: 5px;
    box-shadow: 0 3px 0 #b9babc;
}

.kit-run__row--buttons .kit-run__item.is-on {
    border-color: #404041;
    background: #ececec;
}

.kit-run__row--buttons .kit-run__item.is-on i {
    border-color: #202021;
    background: #404041;
    box-shadow: none;
    transform: translateY(3px);
}

/* 7-segment digits */
.kit-run__row--seg .kit-run__items {
    display: inline-flex;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #202021;
}

.kit-run__digit {
    width: 54px;
    height: 90px;
}

.kit-run__bar {
    fill: #333435;
}

.kit-run__bar.is-wanted {
    fill: #5a2a22;
}

.kit-run__digit.is-on .kit-run__bar.is-wanted {
    fill: #ff3b1f;
}

.kit-run .kit-run__hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6e7072;
}

/* The line being executed, inside the panel: only where the code is stacked below the panel */
.kit-run__line,
.kit-swipe-hint {
    display: none;
}

@media (max-width: 991px) {
    .kit-run-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .kit-run__line {
        display: flex;
        align-items: stretch;
        margin-top: 10px;
        border-radius: 4px;
        overflow: hidden;
        background: #1f2021;
        border-left: 4px solid #f19b30;
    }

    .kit-run__line i {
        flex: none;
        padding: 7px 9px;
        background: #5c4322;
        font-family: 'proxima_novabold', sans-serif;
        font-style: normal;
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
        color: #ffe2b8;
    }

    .kit-run__line code {
        flex: 1;
        min-width: 0;
        padding: 7px 10px;
        background: none;
        font-family: Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 13px;
        line-height: 1.5;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        color: #f4f4f4;
    }

    /* The explanation comes first on small screens, with a shorter code window below it */
    .kit-run {
        order: -1;
    }

    .kit-code--lines .kit-code__pre {
        height: 320px;
    }

    .kit-run .kit-run__note {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kit-code--lines .kit-code__pre {
        scroll-behavior: auto;
    }
}

@media (max-width: 599px) {
    /* The schematic keeps a readable size and scrolls sideways inside its box */
    .kit-swipe-hint {
        display: block;
        margin: 0 0 6px;
        font-family: 'proxima_novabold', sans-serif;
        font-size: 13px;
        color: #c0391a;
    }
}

@media (max-width: 575px) {
    .kit-run__row--leds .kit-run__items,
    .kit-run__row--buttons .kit-run__items {
        flex-wrap: wrap;
    }

    .kit-run__item {
        flex: 0 0 calc(25% - 4px);
        max-width: none;
    }
}

/* More of the board in "How the program runs": LCD, PC terminal, labelled values */
.kit-run__lcd {
    display: inline-block;
    padding: 8px 12px;
    border: 4px solid #202021;
    border-radius: 6px;
    background: #b9d23c;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
}

.kit-run__lcd span {
    display: block;
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 21px;
    line-height: 1.3;
    letter-spacing: 3px;
    color: #1f2a08;
    white-space: pre;
}

.kit-run__term {
    min-height: 92px;
    max-height: 190px;
    margin: 0;
    padding: 10px 12px;
    overflow: auto;
    border: 0;
    border-radius: 6px;
    background: #101112;
    font-family: Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 14px;
    line-height: 1.45;
    color: #8ff08f;
    white-space: pre-wrap;
}

.kit-run__cursor {
    display: inline-block;
    width: 8px;
    background: #8ff08f;
}

.kit-run__row--facts .kit-run__items {
    flex-wrap: wrap;
    gap: 8px;
}

/* One PWM period as a bar: LOW part (an active-low LED is lit) and HIGH part */
.kit-run__pwm {
    display: flex;
    height: 30px;
    border: 1px solid #404041;
    border-radius: 5px;
    overflow: hidden;
    background: #606162;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12.5px;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
}

.kit-run__pwm-low {
    background: #fff27a;
    color: #202021;
    overflow: hidden;
}

.kit-run__pwm-high {
    background: #606162;
    color: #fff;
    overflow: hidden;
}

.kit-run__pwm-key {
    display: inline-block;
    margin-right: 8px;
    padding: 0 7px;
    border-radius: 3px;
    font-family: 'proxima_novabold', sans-serif;
    font-size: 12px;
    line-height: 1.6;
}

.kit-run__pwm-key--low {
    background: #fff27a;
    border: 1px solid #d99a00;
    color: #202021;
}

.kit-run__pwm-key--high {
    background: #606162;
    border: 1px solid #404041;
    color: #fff;
}

.kit-run__fact {
    display: inline-flex;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    font-size: 14px;
}

.kit-run__fact i {
    padding: 4px 9px;
    background: #404041;
    font-style: normal;
    color: #fff;
}

.kit-run__fact b {
    padding: 4px 10px;
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #202021;
}

@media (max-width: 575px) {
    .kit-run__lcd span {
        font-size: 17px;
        letter-spacing: 2px;
    }
}

/* ---------- Sample project: one practice project open without login ---------- */

/* "View kit details" + "View sample project" at the bottom of a kit card */
.kit-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

.kit-card__actions .kit-btn {
    margin-top: 0;
}

/* Panel on /kit, below the kit cards */
.kit-sample {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 30px 44px;
    align-items: start;
    margin-top: 32px;
    padding: 32px 34px;
    background: #fdf1e6;
    border-left: 5px solid #eb7a24;
    border-radius: 8px;
}

.kit-sample__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kit-sample .kit-card__tag {
    background: #fff;
}

.kit-sample h3 {
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 12px;
}

.kit-sample__text p {
    font-size: 16px;
    line-height: 1.6;
    color: #606162;
    margin: 0 0 22px;
}

.kit-sample__text p strong {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #404041;
}

.kit-sample__inside {
    background: #fff;
    border-radius: 8px;
    padding: 22px 24px 8px;
}

.kit-sample__inside h4 {
    font-family: 'proxima_novabold', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e55125;
    margin: 0 0 16px;
}

.kit-steps--small > li {
    padding: 0 0 14px 42px;
    font-size: 15px;
    line-height: 1.45;
    color: #606162;
}

.kit-steps--small > li::before {
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 28px;
}

.kit-steps--small > li > strong {
    font-size: 16px;
    color: #404041;
}

/* Notice at the top of the sample project page, in place of Previous / All projects / Next */
.kit-sample-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding: 14px 18px;
    background: #fdf1e6;
    border-left: 5px solid #eb7a24;
    border-radius: 6px;
}

.kit-sample-bar p {
    margin: 0;
    line-height: 1.5;
    color: #606162;
}

.kit-sample-bar p strong {
    font-family: 'proxima_novabold', sans-serif;
    font-weight: normal;
    color: #404041;
}

.kit-sample-bar .kit-btn {
    flex: none;
    margin-top: 0;
    align-self: center;
    white-space: nowrap;
}

/* The names of all the kit's projects, below the sample project */
.kit-sample-more {
    margin: 44px 0 0;
}

.kit-sample-more .kit-table-wrap {
    margin-top: 18px;
}

.kit-table--sample span.kit-project-link {
    cursor: default;
}

.kit-table--sample tr.is-current {
    background: #fdf1e6;
}

.kit-table--sample .kit-table__view a {
    color: #eb7a24;
}

.kit-table__locked {
    font-family: 'proxima_novaregular', 'Roboto', sans-serif;
    color: #6e7072;
}

.kit-sample-more .kit-cta {
    margin-top: 28px;
}

@media (max-width: 991px) {
    .kit-sample {
        grid-template-columns: 1fr;
        padding: 26px 24px;
    }
}

@media (max-width: 767px) {
    .kit-sample-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .kit-sample-bar .kit-btn {
        align-self: flex-start;
    }
}

@media (max-width: 575px) {
    .kit-sample {
        padding: 22px 16px;
    }

    .kit-sample h3 {
        font-size: 28px;
    }

    .kit-sample__inside {
        padding: 18px 16px 4px;
    }

    .kit-table--sample {
        min-width: 0;
    }

    .kit-table--sample .kit-table__extra {
        display: none;
    }
}