/* The two looks of the page; each layout mode brings its own (html[data-theme] is set from the mode). */

/* map — the growth map: hand-drawn ink lines on warm dotted paper (default) */
html[data-theme="map"] {
  --f: "Smiley", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-hand: var(--f);
  --paper: #f6f1e6; --paper-a: rgba(246, 241, 230, .92);
  --grain: radial-gradient(rgba(42, 38, 35, .10) 1.4px, transparent 1.6px) 0 0 / 34px 34px;
  --ink: #2a2623; --ink-soft: #4a4643; --mute: #6b6f76;
  --card: #fffdf7; --ph: #eee;
  --card-border: 2px solid #2a2623; --card-border-f: 3px; --card-shadow: 0 3px 0 rgba(42, 38, 35, .22); --btn-shadow: 0 2px 0 rgba(42, 38, 35, .25);
  --tape: rgba(242, 180, 44, .72); --hover: rgba(242, 180, 44, .6);
  --accent: #c2541f; --fruit: #d9483b; --stamp: #d9483b; --play: #2e7d5b; --link: #f2b42c;
  --canplay-text: "可体验";
  --veil: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(246, 241, 230, 1) 0%, rgba(246, 241, 230, .97) 52%, rgba(246, 241, 230, .62) 82%, rgba(246, 241, 230, .5) 100%);
}

/* tree — the same ink on pale green dotted paper */
html[data-theme="tree"] {
  --f: "Smiley", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-hand: var(--f);
  --paper: #f2f4e7; --paper-a: rgba(242, 244, 231, .92);
  --grain: radial-gradient(rgba(40, 70, 45, .13) 1.4px, transparent 1.6px) 0 0 / 34px 34px;
  --ink: #2a2623; --ink-soft: #4a4643; --mute: #6b6f76;
  --card: #fffdf7; --ph: #eceee2;
  --card-border: 2px solid #2a2623; --card-border-f: 3px; --card-shadow: 0 3px 0 rgba(42, 38, 35, .22); --btn-shadow: 0 2px 0 rgba(42, 38, 35, .25);
  --tape: rgba(150, 192, 96, .62); --hover: rgba(150, 192, 96, .55);
  --accent: #c2541f; --fruit: #d9483b; --stamp: #d9483b; --play: #2e7d5b; --link: #cfe3a8;
  --canplay-text: "可体验";
  --veil: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(242, 244, 231, 1) 0%, rgba(242, 244, 231, .97) 52%, rgba(242, 244, 231, .62) 82%, rgba(242, 244, 231, .5) 100%);
}