:root {
    --navy: #092e5c;
    --blue: #0759ab;
    --royal: #0672d3;
    --text: #203d59;
    --muted: #4e6881;
    --line: #c5d8ed;
    --pale: #eaf3fd;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background: #dbeafa;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    background: linear-gradient(155deg, #bfdaf7 0, #e8f2fd 26%, #dcecff 64%, #c7e0f7 100%)
}

button,
input {
    font: inherit
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

a {
    color: inherit;
    text-decoration: none
}

button {
    cursor: pointer
}

button:disabled {
    opacity: .65;
    cursor: wait
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #2693ec;
    outline-offset: 5px
}

svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0
}

img {
    display: block;
    max-width: 100%;
    height: auto
}

figure,
h1,
h2,
h3,
p {
    margin: 0
}

h1,
h2,
h3 {
    color: var(--navy);
    line-height: 1.2
}

h3 {
    font-size: 1.2rem
}

button {
    color: inherit
}

.shell {
    width: calc(100% - 80px);
    max-width: 1240px;
    margin: 0 auto
}

.skip {
    position: fixed;
    top: -80px;
    left: 15px;
    background: var(--navy);
    color: white;
    z-index: 30;
    padding: 12px 22px
}

.skip:focus {
    top: 8px
}

.print-copyright,
.print-brand,
.print-value {
    display: none
}

.topbar {
    background: white;
    border-bottom: 1px solid var(--line)
}

.topbar-inner {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.brand {
    width: 222px;
    flex-shrink: 0
}

.brand img {
    width: 100%
}

.header-label {
    font-size: .75rem;
    letter-spacing: .16em;
    font-weight: 700;
    color: #60768d
}

.header-print {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    color: var(--blue);
    font-weight: 700;
    font-size: .9rem;
    padding: 13px 0
}

.index-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fffffff7;
    box-shadow: 0 5px 18px #092e5c0c;
    border-bottom: 1px solid #c2d6eb
}

.nav-inner {
    display: grid;
    grid-template-columns: .7fr 1.2fr 1.1fr 1fr
}

.nav-inner a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 10px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--muted);
    border-bottom: 3px solid transparent
}

.nav-inner a span {
    font-size: .75rem;
    color: #7890a7;
    font-weight: 400
}

.nav-inner a:hover {
    background: #eaf4ff
}

.nav-inner a[aria-current] {
    border-bottom-color: var(--royal);
    color: var(--blue)
}

.guide {
    padding-top: 32px;
    padding-bottom: 42px
}

.chapter {
    margin-bottom: 30px;
    border-radius: 16px;
    padding: 42px;
    overflow: hidden;
    box-shadow: 0 10px 40px #0a38610d;
    border: 1px solid #fff9;
    scroll-margin-top: 0
}

.eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .105em;
    color: var(--blue)
}

.cover {
    background: linear-gradient(125deg, #fff 5%, #f4f9ff 44%, #c4def8 100%);
    position: relative
}

.cover:before {
    content: '';
    position: absolute;
    width: 300px;
    height: 100%;
    right: -190px;
    top: 0;
    transform: skew(-28deg);
    background: #2478be16;
    border-left: 12px solid #ffffff77;
    pointer-events: none
}

.cover-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 38px;
    align-items: center
}

h1 {
    font-size: clamp(2.6rem, 4.15vw, 3.75rem);
    letter-spacing: -.048em;
    margin: 24px 0;
    line-height: 1.13
}

h1 em {
    font-style: normal;
    color: var(--blue)
}

.hero-subtitle {
    font-size: 1.2rem;
    line-height: 1.55
}

.hero-description {
    margin-top: 17px;
    color: var(--muted);
    line-height: 1.7
}

.hero-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 25px 0
}

.hero-tags span {
    background: #dfecfc;
    border: 1px solid #b6d2f0;
    padding: 4px 9px;
    border-radius: 4px;
    font-size: .875rem;
    color: #225184
}

.hero-tags span:first-child {
    background: var(--blue);
    color: white;
    font-weight: 700;
    border-color: var(--blue)
}

.primary {
    border: 0;
    background: var(--blue);
    color: white;
    border-radius: 6px;
    padding: 14px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.5
}

.primary:hover {
    background: var(--navy)
}

.edition {
    margin-top: 27px;
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 700
}

.edition span {
    font-weight: 400;
    letter-spacing: 0;
    display: block;
    margin-top: 6px
}

.cover-visual {
    position: relative;
    align-self: stretch;
    min-height: 445px;
    border-radius: 10px;
    overflow: hidden;
    background: #a7bfd7
}

.cover-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: 61% 50%
}

.cover-visual figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(0deg, #06234eee, transparent);
    color: white;
    padding: 70px 23px 25px;
    font-size: 1rem;
    font-weight: 700
}

.chapter-copyright {
    position: relative;
    font-size: .75rem;
    line-height: 1.6;
    color: #466480;
    padding-top: 20px;
    margin-top: 34px;
    border-top: 1px solid #98b8d566
}

.chapter-heading {
    display: flex;
    align-items: flex-start;
    gap: 19px;
    margin-bottom: 30px
}

.section-number {
    width: 45px;
    height: 45px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #d7eafb;
    color: var(--blue);
    font-size: .94rem;
    font-weight: 700;
    flex-shrink: 0
}

.chapter-heading .eyebrow {
    margin-bottom: 10px
}

.chapter-heading h2 {
    font-size: clamp(2rem, 3.1vw, 2.7rem);
    letter-spacing: -.035em
}

.chapter-heading p:last-child {
    margin-top: 12px;
    color: var(--muted)
}

.modes-chapter {
    background: linear-gradient(140deg, #074785, #078cb2);
    border-color: #478fc1
}

.modes-chapter .chapter-heading h2,
.modes-chapter .chapter-heading .eyebrow,
.modes-chapter .chapter-heading p:last-child {
    color: white
}

.modes-chapter .section-number {
    background: #ffffff26;
    color: white;
    border: 1px solid #ffffff66
}

.mode-group {
    border-radius: 11px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #baecf6;
    padding: 0 13px 13px
}

.group-heading {
    color: #fff;
    padding: 14px 6px;
    text-align: center;
    font-size: 1.08rem;
    background: #027c9f;
    margin: 0 -13px 13px
}

.group-heading>span {
    font-size: .875rem;
    font-weight: 400;
    margin-left: 9px;
    display: inline-block
}

.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.mode-card {
    border-radius: 8px;
    background: #f1fbff;
    overflow: hidden
}

.mode-card-title {
    background: #e0f2fa;
    padding: 15px 18px;
    border-bottom: 1px solid #b5dfec;
    display: flex;
    align-items: baseline;
    gap: 11px
}

.mode-card-title>span {
    font-size: .75rem;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: .06em;
    white-space: nowrap
}

.mode-card-title h3 {
    font-size: 1.18rem
}

.mode-body {
    display: grid;
    grid-template-columns: 32% 1fr;
    align-items: start;
    gap: 17px;
    padding: 18px
}

.mode-body>img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    border-radius: 5px
}

.power {
    font-size: 1.23rem;
    letter-spacing: -.02em;
    color: var(--navy)
}

.mode-text p {
    font-size: .875rem;
    line-height: 1.65;
    margin-top: 11px;
    color: #375970
}

.mode-text b {
    color: #143b61;
    display: block;
    font-size: .8125rem
}

.outdoor {
    background: #ffd876
}

.outdoor .group-heading {
    background: #fbc14a;
    color: #543703
}

.outdoor .mode-card {
    background: #fffaf0
}

.outdoor .mode-card-title {
    background: #fff0c6;
    border-bottom-color: #ebd58d
}

.outdoor .mode-body>img {
    height: 210px
}

.outdoor .mode-card-title>span {
    color: #805809
}

.power-note {
    font-size: .8125rem;
    line-height: 1.6;
    color: #e1f4ff;
    margin: -2px 0 22px
}

.principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.principles article {
    display: flex;
    gap: 16px;
    align-items: center;
    border-radius: 9px;
    padding: 20px;
    background: #dcf4ef;
    border: 1px solid #8dd5c3
}

.principles img {
    width: 88px;
    height: 108px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 5px
}

.principles h3 {
    font-size: 1.04rem;
    margin-bottom: 9px
}

.principles p {
    font-size: .875rem;
    line-height: 1.65;
    color: #375b63
}

.reference-note {
    margin-top: 22px;
    border-left: 3px solid #8accf3;
    padding-left: 15px;
    font-size: .875rem;
    color: #e0f4ff
}

.reference-note strong {
    color: white
}

.reference-note p {
    margin-top: 5px
}

.reference-note a {
    font-size: .8125rem;
    display: inline-block;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 7px
}

.modes-chapter .chapter-copyright {
    color: #e2f2ff;
    border-color: #ffffff44
}

.installation-chapter {
    background: linear-gradient(145deg, #edf6ff, #cddff8)
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.flow-card {
    background: white;
    border: 1px solid #abcbea;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.flow-title {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #edf5ff;
    padding: 18px 17px;
    min-height: 85px;
    border-bottom: 1px solid #d5e3f3
}

.flow-title>span {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: .75rem;
    font-weight: 700
}

.flow-title h3 {
    font-size: 1.05rem;
    line-height: 1.4
}

.flow-card figure {
    height: 210px;
    margin: 20px 20px 12px;
    display: flex;
    justify-content: center;
    align-items: center
}

.flow-card figure img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.flow-card>p {
    padding: 0 20px 22px;
    font-size: .94rem;
    line-height: 1.7;
    color: var(--muted)
}

.technical-note {
    padding: 22px 24px;
    background: #e1edfc;
    border-left: 4px solid var(--blue);
    border-radius: 0 8px 8px 0;
    margin-top: 24px;
    font-size: .875rem;
    color: var(--muted)
}

.technical-note strong {
    display: block;
    color: var(--navy);
    margin-bottom: 6px
}

.checklist-chapter {
    background: linear-gradient(140deg, #f6faff, #d6eafb)
}

.check-layout {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 26px;
    align-items: start
}

.check-sidebar {
    position: sticky;
    top: 105px
}

.check-summary {
    background: #fff;
    border: 1px solid #b2cde8;
    border-radius: 9px;
    padding: 24px
}

.progress-number {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 18px 0 10px
}

.progress-number strong {
    color: var(--blue);
    font-size: 3rem;
    letter-spacing: -.05em;
    line-height: 1.1
}

.progress-number span {
    color: var(--muted);
    font-size: .875rem
}

progress {
    display: block;
    appearance: none;
    border: 0;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #d5e4f3;
    overflow: hidden
}

progress::-webkit-progress-bar {
    background: #d5e4f3
}

progress::-webkit-progress-value {
    background: var(--royal)
}

progress::-moz-progress-bar {
    background: var(--royal)
}

#progress-message {
    font-size: .875rem;
    color: var(--muted);
    margin-top: 14px
}

.unit-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 24px 0 16px
}

.unit-fields label {
    font-size: .875rem;
    font-weight: 700;
    color: var(--navy)
}

.unit-fields input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: 1px solid #a8c3dd;
    background: #f7fbff;
    padding: 9px;
    font-size: 1rem;
    border-radius: 4px;
    margin-top: 5px;
    color: var(--text)
}

.session-note {
    font-size: .8125rem;
    color: var(--muted);
    line-height: 1.65
}

.checklist {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.check-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid #b9d1e9;
    border-radius: 7px;
    padding: 21px;
    cursor: pointer
}

.check-item:hover {
    border-color: #568fc7
}

.check-item input {
    position: absolute;
    opacity: 0;
    width: 21px;
    height: 21px;
    margin: 0;
    left: 21px;
    top: 24px
}

.check-box {
    margin-top: 3px;
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    border: 1.5px solid #8faac3;
    border-radius: 4px;
    background: #fff
}

.check-item input:focus-visible+.check-box {
    outline: 3px solid #2990ee;
    outline-offset: 4px
}

.check-item input:checked+.check-box {
    background: var(--blue);
    border-color: var(--blue)
}

.check-item input:checked+.check-box:after {
    content: '';
    width: 6px;
    height: 11px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    display: block;
    transform: rotate(45deg);
    margin: 2px auto
}

.check-item:has(input:checked) {
    background: #e6f2ff;
    border-color: #7baddc
}

.check-body {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.check-kicker {
    font-size: .75rem;
    letter-spacing: .05em;
    font-weight: 700;
    color: #607c98
}

.check-body strong {
    font-size: 1.04rem;
    line-height: 1.4;
    color: var(--navy)
}

.check-body>span:last-child {
    font-size: .94rem;
    line-height: 1.7;
    color: var(--muted)
}

.final-note {
    background: #e0ebf7;
    color: #45617d;
    font-size: .875rem;
    line-height: 1.7;
    padding: 20px 24px;
    border-radius: 7px;
    border: 1px solid #bbd0e5;
    margin-top: 25px
}

.final-note strong {
    color: var(--navy)
}

.print-actions {
    padding: 32px 38px;
    background: white;
    border-radius: 12px;
    border: 1px solid #accae8;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center
}

.print-actions h2 {
    font-size: 1.65rem;
    letter-spacing: -.02em;
    margin: 9px 0
}

.print-actions p:not(.eyebrow) {
    color: var(--muted);
    font-size: .94rem
}

.print-full {
    max-width: 370px;
    text-align: left;
    gap: 12px
}

.print-instructions {
    grid-column: 1/-1;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: .8125rem !important
}

.print-status {
    grid-column: 1/-1
}

.print-status:empty {
    display: none
}

.site-footer {
    background: var(--navy);
    color: #cfdded;
    padding: 37px 0 25px
}

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px
}

.footer-brand {
    font-weight: 700;
    font-size: 1.55rem;
    letter-spacing: .09em;
    color: white
}

.footer-brand span {
    font-size: .7rem;
    letter-spacing: .22em;
    display: block
}

.footer-main p:not(.footer-brand) {
    font-size: .875rem;
    margin: 15px 0 5px
}

.footer-main a {
    font-size: .875rem
}

.footer-main a:hover {
    text-decoration: underline
}

.footer-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.footer-qr img {
    width: 94px;
    height: 94px;
    background: white;
    border-radius: 5px
}

.footer-qr span {
    font-size: .75rem
}

.footer-copyright {
    font-size: .75rem;
    line-height: 1.7;
    color: #b9cfe4;
    border-top: 1px solid #ffffff33;
    margin-top: 25px;
    padding-top: 20px
}

@media screen and (max-width:1100px) {
    .shell {
        width: calc(100% - 48px)
    }

    .chapter {
        padding: 32px
    }

    .header-label {
        display: none
    }

    .cover-grid {
        gap: 25px
    }

    .cover-visual {
        min-height: 425px
    }

    .mode-body {
        gap: 13px;
        padding: 15px;
        grid-template-columns: 30% 1fr
    }

    .mode-body>img {
        height: 240px
    }

    .mode-card-title {
        padding: 13px
    }

    .mode-card-title h3 {
        font-size: 1.1rem
    }

    .flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .check-layout {
        grid-template-columns: 235px minmax(0, 1fr)
    }

    .check-summary {
        padding: 20px
    }

    .print-actions {
        grid-template-columns: 1fr
    }

    .print-full {
        max-width: none;
        width: 100%
    }
}

@media screen and (max-width:800px) {
    .mode-grid {
        grid-template-columns: 1fr
    }

    .mode-body {
        grid-template-columns: 130px 1fr
    }

    .mode-body>img,
    .outdoor .mode-body>img {
        height: 205px;
        object-fit: contain
    }

    .principles {
        grid-template-columns: 1fr
    }

    .check-layout {
        grid-template-columns: 1fr
    }

    .check-sidebar {
        position: static
    }

    .unit-fields {
        max-width: 400px
    }

    .cover-grid {
        grid-template-columns: 1fr
    }

    .cover-visual {
        min-height: 0;
        aspect-ratio: 1.4/1
    }

    .cover-copy h1 {
        font-size: 3.3rem
    }

    .hero-description {
        max-width: 570px
    }
}

@media screen and (max-width:560px) {
    html {
        scroll-padding-top: 98px
    }

    .shell {
        width: calc(100% - 24px)
    }

    .topbar-inner {
        min-height: 78px;
        gap: 13px
    }

    .brand {
        width: 162px
    }

    .header-print {
        font-size: .8125rem;
        line-height: 1.4;
        gap: 7px
    }

    .header-print span {
        max-width: 95px
    }

    .header-print svg {
        width: 18px;
        height: 18px
    }

    .nav-inner {
        width: 100%;
        grid-template-columns: .65fr 1.15fr 1.1fr .9fr
    }

    .nav-inner a {
        flex-direction: column;
        gap: 3px;
        padding: 12px 4px;
        font-size: .875rem;
        line-height: 1.25;
        min-height: 77px;
        text-align: center
    }

    .nav-inner a span {
        font-size: .75rem
    }

    .guide {
        padding-top: 18px;
        padding-bottom: 25px
    }

    .chapter {
        padding: 24px 18px;
        border-radius: 10px;
        margin-bottom: 18px
    }

    .cover-grid {
        gap: 25px
    }

    .cover-copy h1 {
        font-size: 2.72rem;
        margin: 21px 0
    }

    .hero-subtitle {
        font-size: 1.12rem
    }

    .hero-description {
        font-size: 1rem
    }

    .hero-tags span {
        font-size: .8125rem
    }

    .eyebrow {
        font-size: .7rem
    }

    .cover-visual {
        aspect-ratio: 1.05/1
    }

    .cover-visual figcaption {
        font-size: .9rem;
        padding: 55px 15px 20px
    }

    .chapter-copyright {
        margin-top: 24px;
        padding-top: 17px;
        font-size: .75rem
    }

    .chapter-heading {
        gap: 12px;
        margin-bottom: 24px
    }

    .section-number {
        width: 34px;
        height: 34px;
        font-size: .8125rem;
        border-radius: 5px
    }

    .chapter-heading h2 {
        font-size: 1.92rem
    }

    .chapter-heading .eyebrow {
        font-size: .6875rem;
        line-height: 1.5
    }

    .chapter-heading p:last-child {
        font-size: .94rem
    }

    .mode-group {
        padding: 0 8px 8px;
        border-radius: 8px
    }

    .group-heading {
        margin: 0 -8px 8px;
        font-size: 1.04rem;
        padding: 13px 9px
    }

    .group-heading>span {
        display: block;
        margin: 5px 0 0;
        font-size: .8125rem
    }

    .mode-body {
        grid-template-columns: 90px 1fr;
        gap: 12px;
        padding: 14px
    }

    .mode-body>img,
    .outdoor .mode-body>img {
        height: 175px
    }

    .mode-card-title {
        gap: 9px;
        flex-wrap: wrap
    }

    .mode-card-title h3 {
        font-size: 1.12rem
    }

    .mode-text p {
        font-size: .9375rem;
        line-height: 1.65
    }

    .mode-text b {
        font-size: .875rem
    }

    .power {
        font-size: 1.13rem
    }

    .principles article {
        padding: 15px;
        gap: 13px
    }

    .principles img {
        width: 65px;
        height: 88px
    }

    .principles h3 {
        font-size: 1rem
    }

    .principles p {
        font-size: .94rem
    }

    .reference-note {
        font-size: .875rem
    }

    .flow-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .flow-title {
        padding: 15px;
        min-height: 0
    }

    .flow-title h3 {
        font-size: 1.1rem
    }

    .flow-card figure {
        height: 210px;
        margin: 20px 20px 12px
    }

    .flow-card>p {
        font-size: 1rem;
        padding: 0 20px 23px
    }

    .technical-note {
        padding: 18px;
        font-size: .94rem
    }

    .check-item {
        padding: 19px 15px;
        gap: 11px
    }

    .check-item input {
        left: 15px;
        top: 22px
    }

    .check-body>span:last-child {
        font-size: 1rem
    }

    .check-body strong {
        font-size: 1.05rem
    }

    .final-note {
        padding: 18px;
        font-size: .875rem
    }

    .print-actions {
        padding: 26px 20px;
        border-radius: 9px;
        gap: 18px
    }

    .print-full {
        font-size: .94rem;
        padding: 14px 15px
    }

    .footer-logo {
        width: 180px;
    }

    .footer-main {
        flex-wrap: wrap;
        gap: 25px
    }

    .footer-qr img {
        width: 80px;
        height: 80px
    }

    .back-top {
        width: 100%
    }

    .footer-copyright {
        padding-top: 18px
    }
}

@media screen and (max-width:360px) {
    .cover-copy h1 {
        font-size: 2.35rem
    }

    .mode-body {
        grid-template-columns: 1fr
    }

    .mode-body>img,
    .outdoor .mode-body>img {
        height: 180px;
        width: 100%;
        object-fit: contain
    }

    .brand {
        width: 145px
    }

    .chapter-heading h2 {
        font-size: 1.72rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }
}

@page {
    size: A4;
    margin: 12mm 12mm 22mm
}

@media print {
    html {
        scroll-padding-top: 0;
        background: white
    }

    body {
        background: white;
        font-size: 9pt;
        line-height: 1.4;
        color: #173957
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none !important
    }

    a {
        color: inherit;
        text-decoration: none
    }

    .topbar,
    .index-nav,
    .skip,
    .explore,
    .print-actions,
    .site-footer,
    .chapter-copyright,
    .session-note {
        display: none !important
    }

    .shell {
        width: 100%;
        max-width: none;
        margin: 0
    }

    .guide {
        padding: 0
    }

    .chapter {
        padding: 7mm;
        margin: 0;
        border: 0;
        border-radius: 0;
        overflow: visible;
        break-before: page;
        page-break-before: always
    }

    .chapter:first-child {
        break-before: auto;
        page-break-before: auto
    }

    .print-copyright {
        display: block;
        position: fixed;
        bottom: -15mm;
        left: 0;
        right: 0;
        border-top: .5pt solid #99b5d1;
        padding-top: 2.5mm;
        font-size: 7.4pt;
        line-height: 1.4;
        text-align: center;
        color: #284b6c;
        background: white
    }

    .print-brand {
        display: block;
        margin-bottom: 10mm
    }

    .print-brand img {
        width: 70mm;
        height: auto
    }

    .cover {
        background: linear-gradient(130deg, #fff, #d4e8fc);
        padding: 8mm
    }

    .cover:before {
        display: none
    }

    .cover-grid {
        display: block
    }

    .cover-copy h1 {
        font-size: 32pt;
        line-height: 1.1;
        letter-spacing: -1.2pt;
        margin: 7mm 0 5mm
    }

    .hero-subtitle {
        font-size: 12pt;
        line-height: 1.5;
        max-width: 140mm
    }

    .hero-description {
        font-size: 10pt;
        line-height: 1.5;
        margin-top: 4mm;
        max-width: 155mm
    }

    .hero-tags {
        margin: 5mm 0;
        gap: 2mm
    }

    .hero-tags span {
        font-size: 9pt;
        padding: 1.3mm 2.5mm
    }

    .edition {
        font-size: 8pt;
        margin: 5mm 0
    }

    .edition span {
        display: inline-block;
        margin-left: 5mm
    }

    .cover-visual {
        height: 109mm;
        min-height: 0;
        aspect-ratio: auto;
        margin-top: 7mm;
        border-radius: 2mm;
        overflow: hidden;
        position: relative
    }

    .cover-photo {
        width: 100%;
        height: 109mm;
        position: static;
        object-fit: cover;
        object-position: 60% 52%
    }

    .cover-visual figcaption {
        font-size: 10pt;
        padding: 14mm 5mm 5mm
    }

    .chapter-heading {
        gap: 3.5mm;
        margin-bottom: 6mm
    }

    .section-number {
        width: 10mm;
        height: 10mm;
        font-size: 9pt;
        border-radius: 1.5mm
    }

    .chapter-heading .eyebrow {
        font-size: 7.2pt;
        margin-bottom: 2.5mm;
        letter-spacing: .5pt
    }

    .chapter-heading h2 {
        font-size: 23pt;
        letter-spacing: -.65pt;
        line-height: 1.15
    }

    .chapter-heading p:last-child {
        font-size: 9pt;
        margin-top: 3mm;
        line-height: 1.45
    }

    .eyebrow {
        font-size: 8pt
    }

    .mode-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3mm
    }

    .mode-group {
        padding: 0 2.5mm 2.5mm;
        margin-bottom: 4mm;
        border-radius: 2mm;
        break-inside: avoid;
        page-break-inside: avoid
    }

    .group-heading {
        font-size: 10pt;
        padding: 2.5mm;
        margin: 0 -2.5mm 2.5mm
    }

    .group-heading>span {
        font-size: 8pt;
        margin-left: 3mm
    }

    .mode-card {
        border-radius: 1.5mm;
        break-inside: avoid
    }

    .mode-card-title {
        padding: 2.5mm 3mm;
        gap: 2mm;
        min-height: 0
    }

    .mode-card-title>span {
        font-size: 7.5pt
    }

    .mode-card-title h3 {
        font-size: 10.5pt
    }

    .mode-body {
        grid-template-columns: 24mm 1fr;
        padding: 3mm;
        gap: 3mm
    }

    .mode-body>img {
        height: 48mm;
        width: 24mm;
        object-fit: contain;
        border-radius: 1mm
    }

    .outdoor .mode-body>img {
        height: 38mm
    }

    .power {
        font-size: 11pt
    }

    .mode-text p {
        font-size: 8.4pt;
        line-height: 1.4;
        margin-top: 2.2mm
    }

    .mode-text b {
        font-size: 8pt
    }

    .power-note {
        font-size: 8pt;
        line-height: 1.4;
        margin: 0 0 4mm
    }

    .principles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3mm;
        break-inside: avoid
    }

    .principles article {
        padding: 3mm;
        gap: 3mm;
        border-radius: 2mm
    }

    .principles img {
        width: 16mm;
        height: 24mm
    }

    .principles h3 {
        font-size: 9pt;
        margin-bottom: 2mm
    }

    .principles p {
        font-size: 8.2pt;
        line-height: 1.4
    }

    .reference-note {
        font-size: 8pt;
        line-height: 1.4;
        padding-left: 3mm;
        margin-top: 4mm;
        break-inside: avoid
    }

    .reference-note p {
        margin-top: 1.3mm
    }

    .reference-note a {
        font-size: 7.5pt;
        margin-top: 1.3mm
    }

    .flow-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3.5mm
    }

    .flow-card {
        break-inside: avoid;
        page-break-inside: avoid;
        display: block;
        border-radius: 2mm
    }

    .flow-title {
        padding: 3mm;
        gap: 2.5mm;
        min-height: 0
    }

    .flow-title>span {
        width: 6.5mm;
        height: 6.5mm;
        font-size: 7.5pt
    }

    .flow-title h3 {
        font-size: 9.5pt;
        line-height: 1.4
    }

    .flow-card figure {
        height: 28mm;
        margin: 3mm 4mm 2mm;
        display: flex
    }

    .flow-card figure img {
        height: 28mm;
        max-width: 100%;
        object-fit: contain
    }

    .flow-card>p {
        padding: 0 4mm 3.5mm;
        font-size: 8.8pt;
        line-height: 1.45
    }

    .technical-note {
        font-size: 8.5pt;
        line-height: 1.45;
        padding: 3.5mm 4mm;
        margin-top: 4mm;
        border-left-width: 1mm;
        break-inside: avoid
    }

    .technical-note strong {
        margin-bottom: 1.4mm
    }

    .check-layout {
        display: block
    }

    .check-sidebar {
        position: static
    }

    .check-summary {
        padding: 2.5mm 4mm;
        border-radius: 1.5mm;
        margin-bottom: 4mm
    }

    .check-summary>.eyebrow,
    .progress-number,
    progress,
    #progress-message {
        display: none
    }

    .unit-fields {
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5mm;
        margin: 0
    }

    .unit-fields label {
        display: block;
        font-size: 9pt
    }

    .unit-fields input {
        display: none
    }

    .print-value {
        display: inline-block;
        margin-left: 3mm;
        font-weight: 400;
        overflow-wrap: anywhere
    }

    .checklist {
        display: block
    }

    .check-item {
        padding: 2.4mm 3mm;
        border-radius: 1.2mm;
        margin-bottom: 2mm;
        gap: 3mm;
        break-inside: avoid;
        page-break-inside: avoid
    }

    .check-item input {
        left: 3mm;
        top: 3mm;
        width: 4.5mm;
        height: 4.5mm
    }

    .check-box {
        width: 4.5mm;
        height: 4.5mm;
        margin-top: .6mm;
        border-radius: .7mm;
        border-color: #466885
    }

    .check-item input:checked+.check-box {
        background: white;
        border-color: #1d4c77
    }

    .check-item input:checked+.check-box:after {
        width: 1.4mm;
        height: 2.8mm;
        border-color: #063869;
        border-width: .5mm;
        margin: .25mm auto
    }

    .check-body {
        gap: 1.2mm
    }

    .check-kicker {
        font-size: 6.9pt;
        letter-spacing: .3pt
    }

    .check-body strong {
        font-size: 9.2pt;
        line-height: 1.3
    }

    .check-body>span:last-child {
        font-size: 8.6pt;
        line-height: 1.42
    }

    .final-note {
        font-size: 8pt;
        line-height: 1.4;
        padding: 3mm 4mm;
        margin-top: 3.5mm;
        border-radius: 1.5mm;
        break-inside: avoid
    }
}

.chapter-heading>div {
    flex: 1;
    min-width: 0
}

@media print {
    :root {
        background: white !important
    }

    .print-copyright {
        z-index: 1000
    }

    .chapter-heading h2 {
        font-size: 21pt
    }

    .section-number,
    .flow-title>span {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .flow-grid {
        gap: 3mm
    }

    .flow-title {
        padding: 2.5mm 3mm
    }

    .flow-card figure {
        height: 24mm;
        margin: 2mm 4mm
    }

    .flow-card figure img {
        height: 24mm
    }

    .flow-card>p {
        font-size: 8.6pt;
        line-height: 1.4;
        padding-bottom: 3mm
    }

    .check-body {
        display: block
    }

    .check-kicker {
        display: inline;
        margin-right: 2mm;
        font-size: 6.8pt
    }

    .check-body strong {
        display: inline;
        font-size: 9.1pt
    }

    .check-body>span:last-child {
        display: block;
        margin-top: 1mm;
        font-size: 8.6pt;
        line-height: 1.4
    }

    .check-item {
        padding: 2mm 3mm;
        margin-bottom: 1.7mm
    }
}

@media print {
    .print-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8mm
    }

    .print-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1mm;
        font-size: 8pt;
        color: #073b79
    }

    .print-brand .print-contact img {
        width: 17mm;
        height: 17mm
    }

    .cover-visual,
    .cover-photo {
        height: 104mm
    }
}

/* Consistent heading hierarchy and an in-flow cover photograph. */
@media screen {
    .cover-visual {
        min-height: 0;
        align-self: center;
        width: 100%
    }

    .cover-photo {
        position: static;
        height: auto;
        aspect-ratio: 4/5;
        object-fit: cover;
        object-position: 61% 50%
    }

    .chapter-heading .eyebrow {
        font-size: .875rem;
        line-height: 1.5
    }

    .installation-chapter .chapter-heading .eyebrow {
        font-size: 1.125rem;
        letter-spacing: .06em
    }

    .mode-card-title {
        flex-wrap: wrap;
        gap: 7px 12px
    }

    .mode-card-title>span,
    .mode-card-title h3 {
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: 0
    }

    .mode-text p,
    .principles p,
    .flow-card>p,
    .check-body>span:last-child {
        font-size: 1rem
    }

    .mode-text b,
    .group-heading>span {
        font-size: .9375rem
    }

    .group-heading {
        font-size: 1.2rem
    }

    .flow-title {
        min-height: 90px;
        align-items: center
    }

    .flow-title h3 {
        font-size: 1.25rem;
        line-height: 1.35
    }

    .flow-title>span {
        font-size: .875rem;
        width: 33px;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .flow-card figure {
        height: 155px;
        margin: 16px 22px 10px
    }

    .flow-card figure img {
        max-width: 85%;
        height: 155px
    }

    .check-body strong,
    .principles h3 {
        font-size: 1.125rem;
        line-height: 1.4
    }

    .check-kicker {
        font-size: .8125rem
    }

    .technical-note,
    .reference-note,
    .final-note {
        font-size: .9375rem
    }
}

@media screen and (max-width:800px) {
    .cover-photo {
        aspect-ratio: 4/3
    }

    .cover-visual {
        aspect-ratio: auto
    }
}

@media screen and (max-width:560px) {

    .mode-card-title>span,
    .mode-card-title h3 {
        font-size: 1.1875rem
    }

    .flow-title {
        min-height: 0
    }

    .flow-card figure,
    .flow-card figure img {
        height: 145px
    }

    .flow-title h3 {
        font-size: 1.1875rem
    }

    .installation-chapter .chapter-heading .eyebrow {
        font-size: 1rem
    }
}

@media print {
    .chapter-heading .eyebrow {
        font-size: 8.5pt
    }

    .installation-chapter .chapter-heading .eyebrow {
        font-size: 11pt;
        letter-spacing: .6pt
    }

    .mode-card-title {
        flex-wrap: wrap;
        gap: 1.5mm 2mm;
        padding: 2.3mm 2.5mm
    }

    .mode-card-title>span,
    .mode-card-title h3 {
        font-size: 11.5pt;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0
    }

    .mode-body {
        grid-template-columns: 22mm 1fr;
        padding: 2.5mm;
        gap: 2.5mm
    }

    .mode-body>img {
        width: 22mm;
        height: 40mm
    }

    .outdoor .mode-body>img {
        height: 30mm
    }

    .mode-text p {
        font-size: 9pt;
        line-height: 1.32;
        margin-top: 1.8mm
    }

    .mode-text b {
        font-size: 8.5pt
    }

    .group-heading {
        font-size: 11pt
    }

    .group-heading>span {
        font-size: 8.5pt
    }

    .mode-group {
        margin-bottom: 3mm
    }

    .power-note {
        margin-bottom: 3mm
    }

    .principles article {
        padding: 2.5mm
    }

    .principles h3 {
        font-size: 9.5pt
    }

    .principles p {
        font-size: 8.6pt
    }

    .reference-note {
        margin-top: 3mm
    }

    .flow-title h3 {
        font-size: 11pt;
        line-height: 1.3
    }

    .flow-title {
        align-items: center;
        min-height: 13mm
    }

    .flow-title>span {
        font-size: 8.5pt;
        width: 7mm;
        height: 7mm
    }

    .flow-card figure,
    .flow-card figure img {
        height: 19mm
    }

    .flow-card figure img {
        max-width: 85%
    }

    .flow-card>p {
        font-size: 9.2pt;
        line-height: 1.35
    }

    .check-body strong {
        font-size: 9.7pt
    }

    .check-body>span:last-child {
        font-size: 9pt;
        line-height: 1.35
    }

    .check-kicker {
        font-size: 7.2pt
    }
}

#pdf-result {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

#pdf-result[hidden] {
    display: none
}

#pdf-result a {
    padding: 12px 16px;
    background: #e6f1ff;
    color: #0759ab;
    border: 1px solid #a8c9ed;
    border-radius: 6px;
    font-weight: 700;
    font-size: .94rem
}

@media print {

    html,
    body {
        -webkit-text-size-adjust: none;
        text-size-adjust: none
    }

    #pdf-result {
        display: none !important
    }
}

/* Compact illustrations keep the safety cards close to the charging modes. */
@media screen {

    .mode-body>img,
    .outdoor .mode-body>img {
        height: 185px;
        object-fit: contain
    }

    .principles article {
        padding: 13px 16px;
        gap: 12px
    }

    .principles img {
        width: 58px;
        height: 68px
    }

    .principles h3 {
        margin-bottom: 5px
    }

    .flow-card:nth-child(5) figure img {
        max-width: 100%
    }

    .mode-group {
        margin-bottom: 14px
    }
}

@media screen and (max-width:560px) {
    .principles img {
        width: 48px;
        height: 58px
    }

    .principles article {
        padding: 12px
    }

    .mode-body>img,
    .outdoor .mode-body>img {
        height: 155px
    }
}

/* Regulatory note belongs to the outdoor charging group. */
.outdoor-observation {
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: 7px;
    background: #ffd876;
    color: #543703;
    border: 1px solid #dca72f;
    font-size: .9375rem;
    line-height: 1.55
}

.outdoor-observation strong {
    display: block;
    margin-bottom: 8px;
    color: #543703
}

.outdoor-observation ul {
    margin: 0;
    padding-left: 20px;
    display: grid;
    gap: 8px
}

.principles .signage-image {
    object-fit: contain;
    background: #fff
}

@media screen and (max-width:560px) {
    .outdoor-observation {
        padding: 14px;
        font-size: .9rem
    }

    .outdoor-observation ul {
        padding-left: 18px
    }

    .principles .signage-image {
        width: 58px;
        height: 76px
    }
}

@media print {
    .outdoor-observation {
        margin-top: 2.5mm;
        padding: 2.5mm 3mm;
        font-size: 7.8pt;
        line-height: 1.35
    }

    .outdoor-observation strong {
        margin-bottom: 1.5mm
    }

    .outdoor-observation ul {
        padding-left: 4mm;
        gap: 1.2mm
    }
}

.guide-contact {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 22px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--blue)
}

.guide-contact a {
    text-decoration: underline;
    text-underline-offset: 4px
}

@media print {
    .guide-contact {
        display: none
    }
}