/* SeeThru, as a branded insert in the manual. Its own visual system ("Field": every action is one dot),
   from the SeeThru frontend: Instrument Sans, DM Mono, Doto numerals; one accent, red, only for
   "flagged and waiting for a person". The insert stays on SeeThru's light ground in both site themes. */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Doto:wght,ROND@800,100&family=Instrument+Sans:wght@400;500;600&display=swap");

.st {
  --st-ground: #f5f4f0; --st-ink: #16181c; --st-text2: #4a4f57; --st-muted: #5f646d;
  --st-rule: #dcd9d1; --st-fill: #ebe8e1; --st-red: #e0461b; --st-dot: #b9b6ae;
  --st-ui: "Instrument Sans", system-ui, sans-serif; --st-mono: "DM Mono", ui-monospace, monospace;
  --st-dots: "Doto", "DM Mono", monospace;
  background: var(--st-ground); color: var(--st-ink); font-family: var(--st-ui);
  color-scheme: light;
}
.st *:focus-visible { outline: 2px solid var(--st-ink); outline-offset: 2px; }

/* the instrument */
.st-inst { padding: 16px 16px 14px; border: 1px solid var(--st-rule); font-size: 14px; line-height: 1.4; }
.st-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--st-rule); }
.st-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.st-logo { width: 20px; height: 20px; display: block; }
.st-tag { font: 400 11px/1.3 var(--st-mono); color: var(--st-muted); }
.st-views { display: inline-flex; gap: 6px; margin: 12px 0 4px; }
.st-pill, .st-views button { font: 500 13px/1.2 var(--st-ui); padding: 8px 14px; min-height: 36px; border: 1px solid var(--st-ink); border-radius: 999px; background: transparent; color: var(--st-ink); cursor: pointer; }
.st-views button[aria-pressed="true"], .st-choice[aria-pressed="true"] { background: var(--st-ink); color: var(--st-ground); }
.st-pill:disabled { opacity: .4; cursor: default; }
.st-save:not(:disabled) { background: var(--st-ink); color: var(--st-ground); }
.st-hero { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0 !important; }
.st-num { font: 800 58px/1 var(--st-dots); font-variation-settings: "ROND" 100; color: var(--st-red); min-width: .7em; }
.st-inst.is-public .st-num, .st-inst.is-public .st-num-t { display: none; }
.st-num-t { font-size: 17px; font-weight: 500; }
.st-field { display: block; width: 100%; height: auto; margin: 8px 0 4px; overflow: visible; }
.st-field .st-d { fill: var(--st-dot); transition: fill .3s; }
.st-field .st-ring { fill: var(--st-ground); stroke: var(--st-muted); stroke-width: 1.2; }
.st-field .st-red { fill: var(--st-red); }
.st-field .st-ink { fill: var(--st-ink); }
.st-field .st-axis { fill: var(--st-rule); }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px !important; font: 400 11px/1.4 var(--st-mono); color: var(--st-muted); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.st-legend .lg-g { background: var(--st-dot); }
.st-legend .lg-ring { border: 1.2px solid var(--st-muted); width: 6px; height: 6px; }
.st-legend .lg-red { background: var(--st-red); }
.st-legend .lg-ink { background: var(--st-ink); }
.st-queue, .st-done { list-style: none; margin: 0; padding: 0; }
.st-queue li, .st-done li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--st-rule); }
.st-done li { grid-template-columns: auto auto minmax(0, 1fr); color: var(--st-text2); }
.st-rdots { display: inline-flex; gap: 3px; }
.st-rdots i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-red); }
.st-inkdots i { background: var(--st-ink); }
.st-q { font: 500 12px/1 var(--st-mono); }
.st-why { font-size: 13.5px; }
.st-queue .st-pill { padding: 6px 12px; min-height: 32px; }
.st-review { margin: 6px 0 4px; padding: 12px; background: var(--st-fill); }
.st-review p { margin: 0 0 6px !important; }
.st-rv-q { font: 500 12px/1.3 var(--st-mono); }
.st-ai { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--st-text2); }
.st-ai svg { width: 11px; height: 11px; color: var(--st-muted); }
.st-rv-ai { font-size: 14px; }
.st-dec-h, .st-done-h { font-weight: 600; font-size: 13px; margin: 10px 0 6px !important; }
.st-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.st-public { padding: 4px 0 2px; }
.st-public p { margin: 0 0 4px !important; font-size: 15px; }
.st-public .st-sub { font-size: 13px; color: var(--st-muted); }
.st-again { margin-top: 12px; }
.st-note { margin: 10px 0 0 !important; font-size: 12px !important; color: var(--st-muted); }
.st-inst.is-public .st-reviewer { display: none; }

/* the buildathon page as a SeeThru insert */
.st-page { margin: var(--s6, 32px) 0 0; padding: 28px 20px 40px; border: 1px solid var(--st-rule); }
@media (min-width: 720px) { .st-page { padding: 40px 48px 56px; } }
.st-page a { color: var(--st-ink); }
.st-crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--st-rule); }
.st-crumbs .lbl { color: var(--st-text2); font-family: var(--st-mono); }
.st-h1 { display: flex; align-items: center; gap: 16px; margin: 36px 0 8px; font: 600 clamp(44px, 9vw, 84px)/1 var(--st-ui); letter-spacing: -.035em; }
.st-h1 .st-logo { width: .62em; height: .62em; }
.st-lede { margin: 0; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.25; color: var(--st-text2); max-width: 26em; }
.st-facts { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 28px 0 0; padding-top: 14px; border-top: 1px solid var(--st-rule); }
.st-facts dt { font: 400 11px/1.4 var(--st-mono); color: var(--st-muted); text-transform: uppercase; letter-spacing: .06em; }
.st-facts dd { margin: 2px 0 0; font-weight: 500; }
.st-sec { margin-top: 52px; padding-top: 16px; border-top: 1px solid var(--st-rule); }
.st-sec h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font: 600 clamp(22px, 3vw, 28px)/1.15 var(--st-ui); letter-spacing: -.02em; }
.st-n { font: 400 12px/1 var(--st-mono); color: var(--st-muted); }
.st-big { margin: 0 0 12px; font-size: clamp(18px, 2.1vw, 22px); line-height: 1.4; max-width: 34em; }
.st-sec p { max-width: 38em; }
.st-two { display: grid; gap: 28px; }
@media (min-width: 960px) { .st-two { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; } }
.st-roles { margin: 20px 0 0; }
.st-roles div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--st-rule); }
.st-roles dt { font: 500 12px/1.6 var(--st-mono); }
.st-roles dd { margin: 0; color: var(--st-text2); }
.st-demo .st-inst { background: var(--st-ground); }
.st-rules { margin: 0; padding: 0; list-style: none; counter-reset: r; max-width: 40em; }
.st-rules li { counter-increment: r; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--st-rule); font-size: 17px; }
.st-rules li::before { content: counter(r, decimal-leading-zero); font: 400 12px/1.9 var(--st-mono); color: var(--st-muted); }
.st-warn { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--st-ink); background: var(--st-fill); max-width: 38em; }
.st-warn p { margin: 0 !important; }
.st-warn-h { display: flex; align-items: center; gap: 8px; font: 500 11px/1.4 var(--st-mono) !important; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px !important; }
.st-warn-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-ink); }