/* House look for the tutorial. Kept tiny and fully local (no @import, no CDN). */

:root {
  /* SAT-grader "house colours" — referenced verbatim in Level 2 & Level 4. */
  --hac-orange: #ea580c;   /* primary action  (Save / "To save") */
  --hac-green:  #84b082;    /* clean / safe    ("Saved", disabled) */
  --hac-slate:  #1f2937;    /* body text */
  --hac-border: #e5e7eb;    /* panel borders */
  --hac-panel:  #f3f4f6;    /* panel fill */
}

/* Tidy every screenshot/placeholder: soft border, rounded, never overflow. */
.md-typeset img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--hac-border);
  border-radius: 6px;
  background: #fff;
}

/* Swatches used when we name the house colours. Usage:
   <span class="sw" style="--c:#ea580c"></span> */
.md-typeset .sw {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.2);
  background: var(--c);
  vertical-align: -0.1em;
  margin-right: 0.35em;
}

/* Make the "you can stop here" success callouts impossible to miss. */
.md-typeset .admonition.success {
  border-left-width: 0.4rem;
}