/*
 * Styles for the ArUco and ChArUco board generator.
 *
 * Generated by tools/extract_styles.mjs. Edit APP_CSS in that script, not this
 * file, because the script overwrites it.
 *
 * The first part is the subset of Tailwind CSS 2.2.19 that this page uses:
 * 89 rules out of 39110. Tailwind is MIT licensed.
 * https://tailwindcss.com
 */

/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com *//*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::after,::before{box-sizing:border-box}html{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset{margin:0;padding:0}ol,ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5}body{font-family:inherit;line-height:inherit}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:-moz-focusring{outline:auto}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.w-full{width:100%}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{100%,75%{transform:scale(2);opacity:0}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-8{gap:2rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.px-4{padding-left:1rem;padding-right:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pt-2{padding-top:.5rem}.pb-2{padding-bottom:.5rem}*,::after,::before{--tw-shadow:0 0 #0000}*,::after,::before{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59, 130, 246, 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}@media (min-width:640px){}@media (min-width:768px){}@media (min-width:1024px){.lg\:w-1\/3{width:33.333333%}.lg\:w-2\/3{width:66.666667%}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}}@media (min-width:1280px){}@media (min-width:1536px){}

/*
 * The look of the site.
 *
 * The subject is black ink on white paper, measured in millimetres, so the
 * page borrows from a drawing sheet: hairline rules instead of soft shadows,
 * square-ish corners, and a monospace face wherever a number carries meaning.
 * Tailwind covers layout only. A control never carries its own look in the
 * markup, so one edit here changes the whole site.
 */
:root {
    --paper: #f7f9f8;
    --surface: #ffffff;
    --surface-sunk: #fbfdfc;
    --ink: #1a211e;
    --ink-soft: #424845;
    --ink-muted: #5f6563;
    --rule: #e6e9e8;
    --rule-strong: #cbcfcd;
    --accent: #208368;
    --accent-hover: #186a54;
    --accent-soft: #e6f7ed;
    --caution-bg: #fdf6e3;
    --caution-rule: #e2cd94;
    --caution-ink: #6b4f12;
    --alarm-bg: #fdf0ee;
    --alarm-rule: #e6b8ab;
    --alarm-ink: #8a2f18;
    --radius: 3px;
    --control-height: 2.25rem;
    --control-height-sm: 1.75rem;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --grid-line: #eef1f0;
    --shadow-paper: 0 1px 2px rgba(26, 33, 30, 0.10), 0 6px 18px rgba(26, 33, 30, 0.06);
}

body {
    background-color: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background-color: var(--accent);
    color: #fff;
}

a {
    color: var(--accent);
}

/* Masthead: a wordmark and one line, set to the left like a title block. */
.masthead {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.mark {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--ink);
}

.wordmark {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--ink);
}

.wordmark .wordmark-tail {
    color: var(--ink-muted);
    font-weight: 400;
}

.strapline {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--ink-muted);
    max-width: 46rem;
}

/* Panels: a ruled sheet, not a floating card. */
.panel {
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.panel-body {
    padding: 1.25rem;
}

/*
 * The title carries the height of a control, so a head with buttons and a head
 * without one come out the same. Otherwise the Board and Preview panels start
 * at different heights and the two columns never line up.
 */
.panel-title {
    display: flex;
    align-items: center;
    min-height: var(--control-height);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    background-color: var(--surface-sunk);
}

.panel-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--rule);
}

/*
 * One focus ring everywhere. Tailwind's focus:ring-blue-500 sets the ring
 * colour but no width, so it drew nothing at all before this.
 */
.control:focus,
.btn:focus-visible,
.view-btn:focus-visible,
.checkbox:focus-visible,
#code-panel summary:focus-visible,
a:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* Fields: a select and a number input must be the same height side by side. */
.control {
    display: block;
    width: 100%;
    height: var(--control-height);
    padding: 0 0.625rem;
    font-family: var(--mono);
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    appearance: none;
}

select.control {
    padding-right: 1.75rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235f6563'%3E%3Cpath d='M5.5 8 10 12.5 14.5 8z'/%3E%3C/svg%3E");
    background-position: right 0.4rem center;
    background-repeat: no-repeat;
    background-size: 1.1rem;
}

.control:hover:not(:focus) {
    border-color: var(--ink-muted);
}

.checkbox {
    width: 0.9375rem;
    height: 0.9375rem;
    margin-right: 0.5rem;
    accent-color: var(--accent);
}

.control-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-soft);
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
}

/* Buttons: two sizes, two weights of emphasis, one shape. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    padding: 0 0.875rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.btn-sm {
    height: var(--control-height-sm);
    padding: 0 0.5rem;
    font-size: 0.75rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-primary {
    color: #fff;
    background-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-hover);
}

.btn-secondary {
    color: var(--ink-soft);
    background-color: var(--surface);
    border-color: var(--rule-strong);
}

/*
 * The hover text uses the darker accent. The solid accent on the soft accent
 * is 4.19 to 1, which is under the 4.5 that AA asks for; this pair is 5.85.
 */
.btn-secondary:hover:not(:disabled) {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* A joined row of buttons where exactly one is chosen. */
.segmented {
    display: inline-flex;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    overflow: hidden;
}

.view-btn {
    height: calc(var(--control-height-sm) - 2px);
    padding: 0 0.6rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink-soft);
    background-color: var(--surface);
    border: 0;
    border-right: 1px solid var(--rule-strong);
    cursor: pointer;
}

.view-btn:last-child {
    border-right: 0;
}

.view-btn:hover:not(.is-active) {
    background-color: var(--accent-soft);
}

.view-btn.is-active {
    color: #fff;
    background-color: var(--accent);
}

.view-btn:focus-visible {
    position: relative;
    z-index: 1;
}

/*
 * The field wrapper is the containing block for its tooltip. A tooltip can
 * then never grow wider than the column that holds it, so it cannot push the
 * page sideways on a narrow screen.
 */
.field {
    position: relative;
}

.tooltip {
    display: inline-block;
    cursor: help;
    color: var(--accent);
}

.tooltip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 10;
    padding: 0.5rem 0.625rem;
    background-color: var(--ink);
    color: var(--surface);
    font-size: 0.75rem;
    font-weight: 400;
    text-align: left;
    line-height: 1.45;
    border-radius: var(--radius);
    transition: opacity 0.2s;
}

.tooltip:hover .tooltiptext,
.tooltip:focus .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.section-heading {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.section-heading:first-of-type {
    margin-top: 0;
}

/* Messages. */
.notice {
    padding: 0.875rem 1rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.notice-caution {
    background-color: var(--caution-bg);
    border-color: var(--caution-rule);
    color: var(--caution-ink);
}

.notice-alarm {
    background-color: var(--alarm-bg);
    border-color: var(--alarm-rule);
    color: var(--alarm-ink);
}

.notice-title {
    font-weight: 700;
}

.notice-list {
    margin-top: 0.4rem;
    padding-left: 1.1rem;
    list-style: disc;
}

.notice-list li + li {
    margin-top: 0.3rem;
}

/* The board summary: a title block of labels and values. */
.spec {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 2rem;
    font-size: 0.8125rem;
}

@media (min-width: 640px) {
    .spec {
        grid-template-columns: 1fr 1fr;
    }
}

.spec-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--rule);
}

.spec-row dt {
    color: var(--ink-muted);
}

.spec-row dd {
    font-family: var(--mono);
    color: var(--ink);
    text-align: right;
}

/* The sheet under the preview reads as paper on a desk. */
#preview-container {
    display: flex;
    justify-content: center;
    padding: 1.25rem;
    background-color: var(--surface-sunk);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: -1px -1px;
}

#preview-canvas {
    box-shadow: var(--shadow-paper);
    max-width: 100%;
}

/* A dimmed board is the last one that worked, kept while the form is wrong. */
#preview-canvas.is-stale {
    opacity: 0.25;
    filter: grayscale(1);
}

#code-panel {
    border-top: 1px solid var(--rule);
}

#code-panel summary {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
}

#code-panel summary:hover {
    color: var(--accent);
}

#code-block {
    margin: 0;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--rule);
    background-color: var(--surface-sunk);
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-height: 26rem;
    overflow: auto;
    white-space: pre;
}

.page-label {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

.site-footer {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.site-footer p + p {
    margin-top: 0.35rem;
}

/* Pages of prose: guides, dictionary references, and the notes below the tool. */
.mark-link {
    display: block;
    flex: none;
    line-height: 0;
}

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

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.crumb-sep {
    color: var(--rule-strong);
}

.doc {
    max-width: 52rem;
}

.prose {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

.prose h1 {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.prose > h2:first-child,
.notes-grid > section > h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.prose h2 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ink);
}

/*
 * The Tailwind reset gives every heading the body size and weight, so a
 * heading inside prose is invisible until it is styled.
 *
 * h3 opens a block of notes. h4 is a question inside one.
 */
.prose h3 {
    margin-top: 1.75rem;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.prose h4 {
    margin-top: 1.1rem;
    margin-bottom: 0.15rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink);
}

/* A block that stands alone below the columns earns a rule. */
.prose > h3 {
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.prose p {
    margin-bottom: 0.85rem;
    max-width: 42rem;
}

.prose .lede {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
}

.prose ul {
    margin-bottom: 0.85rem;
    padding-left: 1.15rem;
    list-style: disc;
}

.prose li {
    margin-bottom: 0.3rem;
}

.prose a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose code {
    padding: 0.05em 0.3em;
    font-family: var(--mono);
    font-size: 0.875em;
    background-color: var(--surface-sunk);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink);
}

.prose .formula {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--ink);
    padding: 0.6rem 0.85rem;
    background-color: var(--surface-sunk);
    border-left: 3px solid var(--accent);
}

.code-sample {
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    background-color: var(--surface-sunk);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--ink);
}

.footnote {
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.table-scroll {
    margin-bottom: 1rem;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.data-table th,
.data-table td {
    padding: 0.45rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

.data-table th {
    font-weight: 600;
    color: var(--ink-muted);
    border-bottom-color: var(--rule-strong);
}

.data-table td:not(:first-child) {
    font-family: var(--mono);
    color: var(--ink);
}

.data-table tbody tr:hover {
    background-color: var(--surface-sunk);
}

.tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .tile-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .home-notes .tile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tile {
    display: block;
    padding: 0.85rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none !important;
}

.tile:hover {
    border-color: var(--accent);
    background-color: var(--accent-soft);
}

.tile-title {
    display: block;
    font-weight: 600;
    color: var(--ink);
}

.tile-text {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.marker-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.marker-sample svg {
    display: block;
    width: 68px;
    height: 68px;
    border: 1px solid var(--rule);
}

.marker-sample figcaption {
    margin-top: 0.2rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-muted);
    text-align: center;
}

.cta {
    display: inline-flex;
    align-items: center;
    height: var(--control-height);
    padding: 0 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff !important;
    background-color: var(--accent);
    border-radius: var(--radius);
    text-decoration: none !important;
}

.cta:hover {
    background-color: var(--accent-hover);
}

/* The notes under the tool on the home page, laid out to use the full width. */
.home-notes {
    margin-top: 2rem;
}

/*
 * Column flow, not a grid. A grid ties every block in a row to the height of
 * the tallest one, which left large gaps under the short blocks. Flowing the
 * blocks down the columns fills the panel instead.
 */
.notes-grid {
    column-gap: 3rem;
}

@media (min-width: 1024px) {
    .notes-grid {
        column-count: 2;
    }
}

/*
 * No rule on a block. In a column flow the block that happens to start the
 * second column would draw one across the top of that column, which reads as
 * a mistake. Space and a heading separate the blocks instead.
 */
.notes-grid > section {
    break-inside: avoid;
    margin-bottom: 2rem;
}

.notes-grid > section > h3:first-child {
    margin-top: 0;
}

.notes-grid > section:last-child {
    margin-bottom: 0;
}

.notes-grid > section:last-child {
    margin-bottom: 0;
}

/*
 * A Tailwind display utility and [hidden] have the same weight, and the
 * utility comes later, so it would win. The page hides fields with the hidden
 * property, so hidden has to beat the utility.
 */
[hidden] {
    display: none !important;
}