:root {
  
  --base-font: 20px;
  --line: 1.3;
  --text-scale: 1;
  --font-at-scale: calc(var(--base-font) * var(--text-scale));

  
  --size-body: var(--font-at-scale);
  --size-prompt: var(--font-at-scale);
  --size-speaker: calc(var(--font-at-scale) * 0.8);

  
  --card: #FFFDF7;
  --ink: #1E1B18;
  --paper-classroom: #2C4EB8;
  --paper-label-classroom: #FFFFFF;
  --paper-gate: #3E4B5E;
  --paper-label-gate: #FFFFFF;
  --paper-hall: #6A3B8F;
  --paper-label-hall: #FFFFFF;
  --paper-kitchen: #B7433B;
  --paper-label-kitchen: #FFFFFF;
  --paper-pool: #187C84;
  --paper-label-pool: #FFFFFF;
  --paper-rec: #1F7A47;
  --paper-label-rec: #FFFFFF;
  --paper-street: #D9701A;
  --paper-label-street: #1E1B18;
  --paint-grass: #4BAA4E;
  --paint-poppy: #E8453C;
  --paint-sky: #7FB8E8;
  --paint-sunflower: #FFC72C;
  --paint-tangerine: #F2892B;
  --paint-teal: #2AA0A8;
  --paint-violet: #8A5BC3;
  --skin-fam-1: #C98D62;
  --skin-line-fam-1: #1E1B18;
  --skin-fam-2: #A66A3F;
  --skin-line-fam-2: #1E1B18;
  --skin-fam-3: #F5D6C0;
  --skin-line-fam-3: #1E1B18;
  --skin-fam-4: #4E3222;
  --skin-line-fam-4: #A29387;
  --skin-fam-5: #E8B894;
  --skin-line-fam-5: #1E1B18;
  --skin-fam-6: #7A4A2A;
  --skin-line-fam-6: #CCB9A9;
  --skin-fam-7: #E8B894;
  --skin-line-fam-7: #1E1B18;

  
  --paper: var(--paper-classroom);
  --paper-label: var(--paper-label-classroom);
  --paper-ink-mix: 0;
  --ground: color-mix(in srgb, var(--ink) calc(var(--paper-ink-mix) * 100%), var(--paper));

  
  --shadow-paper: 0 2px 0 rgba(30, 27, 24, 0.16);
  --shadow-card: 0 3px 0 rgba(30, 27, 24, 0.22), 0 10px 18px -8px rgba(30, 27, 24, 0.28);
  --shadow-none: none;

  
  --cut-edge: polygon(
    0% 1.2%, 12% 0%, 27% 1.4%, 41% 0.2%, 58% 1.6%, 73% 0.3%, 88% 1.5%, 100% 0.4%,
    99% 14%, 100% 31%, 98.8% 48%, 100% 66%, 98.9% 83%, 100% 98.6%,
    87% 100%, 71% 98.5%, 55% 100%, 39% 98.6%, 24% 100%, 9% 98.7%, 0% 100%,
    1.2% 82%, 0% 65%, 1.3% 47%, 0.2% 30%, 1.1% 15%
  );

  
  --face-line: 3px;
  --face-line-color: var(--ink);
  --face-strip: 160px;
  --figure-head-ratio: 2.6;
  --gaze-x: 0;
  --gaze-y: 0;

  
  --chrome: 64px;
  --border-paint: var(--paint-sunflower);
  --pad: 16px;
  
  --rail: 24px;
  
  --target-min: 56px;
  --target-gap: 12px;

  
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-settle: 240ms;
  --dur-swap: 160ms;

  
  color-scheme: light;
}


@media (prefers-contrast: more) {
  :root {
    --face-line: calc(3px * 1.35);
    --card: #FFFFFF;
    --shadow-paper: none;
    --shadow-card: none;
  }
}


[data-paper="classroom"] {
  --paper: var(--paper-classroom);
  --paper-label: var(--paper-label-classroom);
}
[data-paper="gate"] {
  --paper: var(--paper-gate);
  --paper-label: var(--paper-label-gate);
}
[data-paper="hall"] {
  --paper: var(--paper-hall);
  --paper-label: var(--paper-label-hall);
}
[data-paper="kitchen"] {
  --paper: var(--paper-kitchen);
  --paper-label: var(--paper-label-kitchen);
}
[data-paper="pool"] {
  --paper: var(--paper-pool);
  --paper-label: var(--paper-label-pool);
}
[data-paper="rec"] {
  --paper: var(--paper-rec);
  --paper-label: var(--paper-label-rec);
}
[data-paper="street"] {
  --paper: var(--paper-street);
  --paper-label: var(--paper-label-street);
}