/* ============================================================
   画布语汇 —— Cool Pastel Board
   参考 Artistry / Creative Kids：冷中性底 + 清晰 pastel 物件色。
   无暖奶油洗色；壳/chrome 中性；品牌色只在 folder / tip / COVER。
   ============================================================ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("fonts/NotoSansSC-subset.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* —— Neutrals（冷、干净，不要暖奶油） —— */
  --canvas: #F4F4F6;                  /* 冷浅灰底 */
  --paper:  #FFFFFF;
  --ink:    #0A0A0A;
  --ink-2:  #3A3A3C;
  --ink-3:  #6E6E73;
  --line:   #E5E5EA;
  --focus:  #0A0A0A;                  /* UI 强调 = 墨，不用粉/紫做 chrome */
  --dot:    #D1D1D6;                  /* 冷点阵 */

  /* —— Soft pastels（物件色，对齐参考图卡片 / tags） —— */
  --pastel-mint:     #A8EFCF;         /* 主卡片绿 */
  --pastel-lime:     #D9F99D;         /* 浅柠绿卡片 */
  --pastel-lavender: #D4C4F0;         /* 丁香紫卡片 */
  --pastel-yellow:   #FEF08A;         /* 柠檬装饰黄 */
  --pastel-rose:     #F9A8D4;         /* 软粉 CTA / tag */
  --pastel-peach:    #F9A8D4;         /* 别名 → rose（旧引用兼容） */
  --pastel-sky:      #D9F99D;         /* 别名 → lime（voice 等旧引用） */
  --cursor:          #90D5FF;         /* 自定义光标 / tag */

  /* —— Depth：冷中性阴影，极轻 —— */
  --shadow:      0 4px 16px rgba(10, 10, 10, .05), 0 1px 2px rgba(10, 10, 10, .04);
  --shadow-lift: 0 12px 32px rgba(10, 10, 10, .09), 0 2px 6px rgba(10, 10, 10, .05);

  /* —— Clay：section 里的卡片用这一档，不描边 ——
     三层叠出「捏出来的」体积感：贴地的接触影 + 扩散影 + 顶边一道内高光。
     内高光是关键 —— 没有它就只是"带阴影的方块"，有了才像一块有厚度的软陶。
     数值压得很低，因为卡片是成组出现的，稍重一点整页就脏。 */
  --clay:
    0 1px 1px rgba(10, 10, 10, .04),
    0 3px 8px rgba(10, 10, 10, .05),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  --clay-lift:
    0 2px 3px rgba(10, 10, 10, .05),
    0 8px 20px rgba(10, 10, 10, .07),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  --display: "Bricolage Grotesque", "Noto Sans SC", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 手写笔迹：一段起伏不匀的波浪线，给钉在便签底下的白纸当"写过字"的痕迹。
     内联 data-URI，不多一次请求也不多一个 DOM 节点。 */
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2q5-3.4 10-.4t10 .2q5-2.8 10-.2t10 .6q5-3.2 10-.6t10 .2q5-2.6 10-.4t10 .6q5-3 10-.8t9 .4' fill='none' stroke='%23A9A9AE' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");

  --r: 20px;
  --r-sm: 12px;
  --r-pill: 999px;
  --chrome-h: 0px;
  --dot-gap: 24px;
  --d: .18s;
  --e: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--canvas);
  overflow: hidden;
  height: 100svh;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* 跟自定义光标同色；进站后 --cursor 会被随机刷掉 */
::selection { background: color-mix(in srgb, var(--cursor) 55%, white); color: var(--ink); }
::-moz-selection { background: color-mix(in srgb, var(--cursor) 55%, white); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; z-index: 99;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip:focus { left: 12px; top: 12px; }

.t-display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
}
.t-h {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.t-label {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}