assets/solve.svg

<svg viewBox="0 0 232 112" width="232" height="112" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect { shape-rendering: crispEdges; fill: transparent; }
    text { dominant-baseline: text-before-edge; white-space: pre; font: 14px monospace; }
    text, .fg rect { fill: #232322; }
    .bold text { fill: #16AFCA; }
    .underline text { text-decoration: underline; }
    .bold text { font-weight: bold; }
    .dim { opacity: 50% }
    .hide { opacity: 0% }
    .console, .bg text { fill: #D9D9D9; }
    .black rect, .black text { fill: #212121 }
    .red rect, .red text { fill: #B7141F }
    .green rect, .green text { fill: #457B24 }
    .brown rect, .brown text { fill: #F6981E }
    .blue rect, .blue text { fill: #134EB2 }
    .purple rect, .purple text { fill: #560088 }
    .cyan rect, .cyan text { fill: #0E717C }
    .lightGray rect, .lightGray text { fill: #EFEFEF }
    .darkGray rect, .darkGray text { fill: #424242 }
    .lightRed rect, .lightRed text { fill: #E83B3F }
    .lightGreen rect, .lightGreen text { fill: #7ABA3A }
    .yellow rect, .yellow text { fill: #FFEA2E }
    .lightBlue rect, .lightBlue text { fill: #54A4F3 }
    .lightPurple rect, .lightPurple text { fill: #AA4DBC }
    .lightCyan rect, .lightCyan text { fill: #26BBD1 }
    .white rect, .white text { fill: #FFFFFF }
    @media (prefers-color-scheme: dark) {
      text, .fg rect { fill: #CCCCCC; }
      .bold text { fill: #EEEEEE; }
      .console { fill: #222222; }
      .black rect, .black text { fill: #040404 }
      .red rect, .red text { fill: #D84A33 }
      .green rect, .green text { fill: #5DA602 }
      .brown rect, .brown text { fill: #EEBB6E }
      .blue rect, .blue text { fill: #417AB3 }
      .purple rect, .purple text { fill: #E5C499 }
      .cyan rect, .cyan text { fill: #BDCFE5 }
      .lightGray rect, .lightGray text { fill: #685656 }
      .darkGray rect, .darkGray text { fill: #DBDED8 }
      .lightRed rect, .lightRed text { fill: #D76B42 }
      .lightGreen rect, .lightGreen text { fill: #99B52C }
      .yellow rect, .yellow text { fill: #FFB670 }
      .lightBlue rect, .lightBlue text { fill: #97D7EF }
      .lightPurple rect, .lightPurple text { fill: #AA7900 }
      .lightCyan rect, .lightCyan text { fill: #BDCFE5 }
      .white rect, .white text { fill: #E4D5C7 }
    }
  </style>
  <rect width="100%" height="100%" x="0" y="0" class="console" rx="6" ry="6" />
  <g transform="translate(16, 16)">
    <g>
      <g class="lightGray">
        <rect width="10" height="18" x="-1" y="15" />
        <rect width="10" height="18" x="7" y="15" />
        <rect width="10" height="18" x="15" y="15" />
        <rect width="10" height="18" x="23" y="15" />
        <rect width="10" height="18" x="63" y="15" />
        <rect width="10" height="18" x="31" y="31" />
        <rect width="10" height="18" x="39" y="31" />
        <rect width="10" height="18" x="63" y="31" />
        <rect width="10" height="18" x="31" y="47" />
        <rect width="10" height="18" x="39" y="47" />
      </g>
      <g class="brown">
        <rect width="10" height="18" x="31" y="15" />
        <rect width="10" height="18" x="39" y="15" />
        <rect width="10" height="18" x="47" y="15" />
        <rect width="10" height="18" x="55" y="15" />
        <rect width="10" height="18" x="-1" y="31" />
        <rect width="10" height="18" x="7" y="31" />
      </g>
      <g class="green">
        <rect width="10" height="18" x="15" y="31" />
        <rect width="10" height="18" x="23" y="31" />
        <rect width="10" height="18" x="47" y="31" />
        <rect width="10" height="18" x="55" y="31" />
        <rect width="10" height="18" x="-1" y="47" />
        <rect width="10" height="18" x="7" y="47" />
        <rect width="10" height="18" x="15" y="47" />
        <rect width="10" height="18" x="23" y="47" />
        <rect width="10" height="18" x="47" y="47" />
        <rect width="10" height="18" x="55" y="47" />
        <rect width="10" height="18" x="63" y="47" />
        <rect width="10" height="18" x="-1" y="63" />
        <rect width="10" height="18" x="7" y="63" />
        <rect width="10" height="18" x="15" y="63" />
        <rect width="10" height="18" x="23" y="63" />
        <rect width="10" height="18" x="31" y="63" />
        <rect width="10" height="18" x="39" y="63" />
        <rect width="10" height="18" x="47" y="63" />
        <rect width="10" height="18" x="55" y="63" />
        <rect width="10" height="18" x="63" y="63" />
      </g>
    </g>
    <g>
      <g class="">
        <text x="0" y="0">$</text>
        <text x="16" y="0">n</text>
        <text x="24" y="0">o</text>
        <text x="32" y="0">d</text>
        <text x="40" y="0">e</text>
        <text x="56" y="0">i</text>
        <text x="64" y="0">n</text>
        <text x="72" y="0">d</text>
        <text x="80" y="0">e</text>
        <text x="88" y="0">x</text>
        <text x="96" y="0">.</text>
        <text x="104" y="0">m</text>
        <text x="112" y="0">j</text>
        <text x="120" y="0">s</text>
        <text x="136" y="0">-</text>
        <text x="144" y="0">S</text>
        <text x="160" y="0">c</text>
        <text x="168" y="0">i</text>
        <text x="176" y="0">g</text>
        <text x="184" y="0">a</text>
        <text x="192" y="0">r</text>
      </g>
      <g class="underline black">
        <text x="0" y="16">s</text>
        <text x="8" y="16">|</text>
        <text x="16" y="16">o</text>
        <text x="24" y="16">|</text>
        <text x="32" y="16">a</text>
        <text x="40" y="16">|</text>
        <text x="48" y="16">r</text>
        <text x="56" y="16">|</text>
        <text x="64" y="16">e</text>
        <text x="0" y="32">r</text>
        <text x="8" y="32">|</text>
        <text x="16" y="32">i</text>
        <text x="24" y="32">|</text>
        <text x="32" y="32">y</text>
        <text x="40" y="32">|</text>
        <text x="48" y="32">a</text>
        <text x="56" y="32">|</text>
        <text x="64" y="32">l</text>
        <text x="0" y="48">c</text>
        <text x="8" y="48">|</text>
        <text x="16" y="48">i</text>
        <text x="24" y="48">|</text>
        <text x="32" y="48">m</text>
        <text x="40" y="48">|</text>
        <text x="48" y="48">a</text>
        <text x="56" y="48">|</text>
        <text x="64" y="48">r</text>
        <text x="0" y="64">c</text>
        <text x="8" y="64">|</text>
        <text x="16" y="64">i</text>
        <text x="24" y="64">|</text>
        <text x="32" y="64">g</text>
        <text x="40" y="64">|</text>
        <text x="48" y="64">a</text>
        <text x="56" y="64">|</text>
        <text x="64" y="64">r</text>
      </g>
    </g>
  </g>
</svg>