html {
    width: 100%;
    height: 100%;

    --background-color: #f5f5f5;
    --page-color: white;
    --page-border-color: #ccc;
    --page-max-width: 1000px;
    --page-font: Arial, system-ui, sans-serif;
    --page-text-color: black;

    /* old buggy sizes units
    --page-width: min(95vw, var(--page-max-width));
    --page-height: calc(var(--page-width) * sqrt(2));
    */

    /* ha-ha how many sheets of A10 fit into one .page? */
    --page-width: 1000px;
    --page-height: 1414px;
    --page-scale: 1;
    --page-slot-width: var(--page-width);
    --page-slot-height: var(--page-height);
    --page-slot-margin: 4em;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    /*background-color: var(--background-color);*/
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

.background-container {
    position: fixed;
    z-index: -1;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    opacity: 1;
}

.background-container .background-svg {
    width: 100%;
    height: 100%;
}

main.main-container {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;
    counter-reset: page;
}

main.main-container .page-slot {
    width: var(--page-slot-width);
    height: var(--page-slot-height);
    margin: var(--page-slot-margin) auto;
}

main.main-container .page {
    background-color: var(--page-color);
    border: .05em solid var(--page-border-color);

    width: var(--page-width);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);

    font-family: var(--page-font);
    font-size: calc(var(--page-width) * 0.02);
    color: var(--page-text-color);

    padding: 4em;
    margin: 0;

    counter-increment: page;
    position: relative;
    transform: scale(var(--page-scale));
    transform-origin: top left;
}

main.main-container .page.worksheet {
    font-size: calc(var(--page-width) * 0.018);
}

main.main-container .page.a4 {
    height: var(--page-height);
}

main.main-container .page::before {
    position: absolute;
    content: "page " counter(page) "/8";
    opacity: 0.5;
    bottom: 2em;
    right: 2em;
}

.page > :first-child {
    margin-top: 0;
}

.page ul, .page ol {
    padding-inline-start: 3em;
}

.page ul li, .page ol li {
    margin: 1em 0;
}

.page p, .page li {
    line-height: 1.3em;
    text-align: left;
}

.page a {
    color: var(--page-text-color);
}

#qr-ecc-mask-choice-svg {
    width: 12.2em;
    height: 13.725em;
}

.page .svg-side-layout {
    display: grid;
    gap: 2em;
    grid-template-columns: auto 1fr;
}

.page .svg-side-layout > *,
.page .fill-svg-layout > * {
    min-width: 0;
}

.page select {
    font-size: 1em;
    width: 100%;
}

#qr-fill-svg {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: .05em solid black;
}

#byte-tables {
    margin-top: .8em;
}

.byte-table-label {
    font-size: .8em;
}

.byte-table {
    display: grid;

    grid-template-columns: repeat(24, minmax(0, 1fr));
    --table-border: .05em solid black;
    row-gap: .2em;
    margin-bottom: .5em;
    min-width: 0;
}

.byte-table .byte-cell:nth-child(2n):not(:last-child):not(.last-column) {
    border-right: .15em solid black;
}

.byte-table .byte-cell.first-column {
    border-left: var(--table-border);
}

.byte-table .byte-cell {
    border-right: var(--table-border);
    border-top: var(--table-border);
    border-bottom: var(--table-border);
    padding: 0;
    min-width: 0;
    height: 2em;
    position: relative;
}

.byte-table .byte-cell.show-blockindex::before {
    position: absolute;
    top: .1em;
    left: .15em;
    content: attr(data-blockindex);
    font-size: .6em;
}

.byte-table .byte-cell > input {
    font-size: 1em;
    border: none;
    font-family: monospace;
    background: none;
    text-align: center;
    padding-inline: 0;
    padding: 0;
    padding-block: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
}

.byte-table .byte-cell:focus-within {
    background-color: #00FF00;
}

.page .fill-svg-layout {
    display: grid;
    gap: 1em;
    grid-template-columns: 3fr 1fr;
}

.page .fill-svg-layout > :nth-child(2) {
    display: flex;
    flex-direction: column;
}

.page .fill-svg-layout > :nth-child(2) > p {
    margin: 0;
}

.page .no-margin {
    margin: 0;
}

.page .hex-table {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(8, 1fr);
    margin-top: auto;
    font-family: monospace;
    column-gap: 1em;
    font-size: .99em;
}

.page .image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.page .image-grid img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
}

.page .hex-table > div {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.page .hex-table > div > div:nth-child(2) {
    text-align: center;
}

.page .hex-table > div > div:first-child {
    position: relative;
}

.page .hex-table > div > div:first-child::after {
    position: absolute;
    content: ":";
    right: 0;
}

#free-workspace {
    margin-top: 1em;
}

#free-workspace.visible {
    border: .05em solid black;
    padding: 0;
}

#free-workspace > textarea {
    display: none;
}

#free-workspace.visible > textarea {
    display: block;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    font-size: 1em;
    padding: .5em;
}

.print-button {
    position: absolute;
    font-size: 1em;
    top: 4em;
    right: 4em;
    border: .05em solid #ccc;
    border-radius: 0.25em;
    background-color: #f5f5f5;
    padding: .25em .8em;
    cursor: pointer;
}

.print-button:hover {
    box-shadow: 0 0 .3em rgba(0, 0, 0, 0.3);
}

.page table {
    margin-top: .5em;
    border-collapse: collapse;
    margin-bottom: .5em;
    width: 100%;
}

.page table td {
    padding: .5em;
    border: .05em solid black;
}

.page table td.invis {
    border: none;
}

.page table td.bold {
    font-weight: bold;
    text-align: center;
}

.page table td.code {
    font-size: .8em;
}

.page table.td-align-center td {
    text-align: center;
}

.page ol.starts-at-0 {
    counter-reset: item -1;
    padding-inline-start: 4em;
}

.page ol.starts-at-0 > li {
    counter-increment: item;
}

.page ol.starts-at-0 > li::marker {
    content: "(Step " counter(item) ") ";
    font-weight: bold;
    color: blue;
}

.page ol.starts-at-3 {
    counter-reset: item 2;
    padding-inline-start: 4em;
}

.page ol.starts-at-3 > li {
    counter-increment: item;
}

.page ol.starts-at-3 > li::marker {
    content: "(Step " counter(item) ") ";
    font-weight: bold;
    color: blue;
}

.page .spacer {
    height: 14em;
}


@page {
    size: A4 portrait;
    margin: 0;
}

@media print {

    html {
        --page-width: 210mm;
        --page-height: 297mm;
        --page-scale: 1 !important;

        width: var(--page-width);
        height: var(--page-height);
        background-color: white;
    }

    body {
        width: var(--page-width);
        height: var(--page-height);
        background-color: white;
        overflow: visible;
    }

    * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .background-container {
        display: none;
    }

    main.main-container .page {
        width: var(--page-width);
        height: var(--page-height);
        border: none;
        margin: 0;
        box-shadow: none;
        transform: none !important;
        break-after: page;
        page-break-after: always;
    }

    main.main-container {
        width: var(--page-width);
        height: auto;
        padding: 0;
        overflow: visible;
        transform: none;
    }

    main.main-container .page-slot {
        display: contents !important;
    }

    main.main-container .page::before {
        display: none;
    }

    .using-invisible-ink {
        display: none !important;
    }

    body.print-worksheet-only .page:not(#worksheet-container) {
        display: none;
    }

}