/* Hand-drawn sketch styles, shared by the home page and every lab page. */
.sketch { width: 100%; height: auto; display: block; }
.sketch .s-box { fill: var(--card); stroke: var(--fg); stroke-width: 2.4; stroke-linejoin: round; }
.sketch .s-box.s-accent { stroke: var(--accent); fill: var(--accent-soft); }
.sketch .s-box.s-pop { stroke: var(--pop); fill: var(--pop-soft); }
.sketch .s-box.s-red { stroke: #d64545; fill: var(--card); }
.sketch .s-box.s-term { fill: #1a1f2b; stroke: var(--fg); }
.sketch .s-box.s-bubble { fill: var(--card); stroke: var(--fg); stroke-width: 2.2; }
.sketch .s-line { stroke: var(--fg); stroke-linecap: round; fill: none; }
.sketch .s-line.s-accent { stroke: var(--accent); }
.sketch .s-line.s-pop { stroke: var(--pop); }
.sketch .s-line.s-red { stroke: #d64545; }
.sketch .s-text { fill: var(--fg); }
.sketch .s-t-muted { fill: var(--muted); }
.sketch .s-t-accent { fill: var(--accent); }
.sketch .s-t-pop { fill: var(--pop); }
.sketch .s-t-red { fill: #d64545; }
.sketch .s-t-term { fill: #b8f0d8; }
.sketch .s-t-muted-term { fill: #7d8a9e; }
.sketch .s-note { fill: #fff3a8; stroke: #c9b44a; stroke-width: 1.5; }
.sketch .s-t-note { fill: #3b3413; }
.sketch .s-brick { fill: #e8a27c; stroke: #9c5a3c; stroke-width: 1.5; }
.sketch .s-dot-r { fill: #e05d5d; } .sketch .s-dot-y { fill: #e8c14a; } .sketch .s-dot-g { fill: #4cbf7a; }
.sketch .s-bar-red { fill: #e05d5d; } .sketch .s-bar-ok { fill: #4cbf7a; } .sketch .s-bar-pop { fill: #e8a24a; }
.sketch-frame { background: var(--card); border: 2px dashed var(--line); border-radius: 18px; padding: 10px; }
.quip { font-family: 'Caveat', 'Patrick Hand', cursive; font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--pop); margin: 6px 0 16px; }