/* The Butter Index: a dairy wrapper. Butter-yellow foil, a green oval seal, a fat retro script for the claim. */
@import url("https://fonts.googleapis.com/css2?family=Shrikhand&family=Karla:wght@400;500;700;800&display=swap");

:root {
  --bg: #ffd95a; --ink: #143d22; --soft: #5a4a12; --line: rgba(20, 61, 34, 0.25);
  --paper: #ffffff; --paper-ink: #143d22; --paper-soft: #55603a; --paper-line: #f1e6b8;
  --btn: #143d22; --btn-ink: #ffd95a; --hit: #b5121b;
  --display: "Shrikhand", Georgia, serif; --body: "Karla", system-ui, sans-serif; --dw: 400;
  --h1: 400 clamp(2.5rem, 12vw, 4rem)/1.02 var(--display);
  --h2: 400 1.8rem/1.1 var(--display);
  --radius: 0.9rem;
  --c1: #143d22; --c2: #b5121b; --c3: #c9b25a; --c4: #f1e6b8;
}

.mast { text-align: center; margin: var(--s4) 0 var(--s3); }
.toy-name {
  display: inline-block; margin: 0 0 var(--s3); padding: 0.6rem 1.5rem;
  font: 800 0.95rem/1 var(--body); color: var(--bg); background: var(--ink);
  border-radius: 50%; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink);
}
.lede { margin-left: auto; margin-right: auto; }

canvas.chart { height: 15rem; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); }
.status { font: 700 1.05rem/1.35 var(--body); min-height: 2.8rem; margin: 0.5rem 0 0; }
.gloss { border: 3px solid var(--ink); }
.formula { font: 600 1rem/1.45 var(--body); margin: 0.2rem 0 0; }
.formula i { font-style: normal; color: var(--hit); font-weight: 800; }
.key i { width: 1.1rem; height: 0; background: none; border-top: 3px solid var(--c1); vertical-align: 0.2rem; }
.key i.c2 { border-top: 3px dashed var(--c2); }
#future { margin-top: 1rem; }
#stamp { top: 1.2rem; right: 0.8rem; }