Fitness Island

.DS_Store
__pycache__/
*.py[cod]
.pytest_cache/
node_modules/
tmp/

/*
[INPUT]: 依赖 index.html 的路线 DOM、plan.json 的 30 天训练路线、浏览器剪贴板能力、fetch/XMLHttpRequest、可选 localStorage 和 topMeta 打字机容器
[OUTPUT]: 对外提供由 plan.json 的 title/summary/type/phase/minutes 驱动的「动森训练岛」hero 文案、Animal Loading 启动状态、打字机日程行、游戏提示语、今日进度条、无文字状态标签的 7 日路线渲染、每日动作卡、黄色主按钮结算、奖励式每日完成弹窗、周复盘 Table 渲染、导出记录给 Agent、周复盘 Markdown 生成、plan.json 兜底加载和本地临时缓存
[POS]: fitness-island/assets 的静态行为目标，plan.json 是页面数据投影，本文件只做渲染与导出交接
[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
*/

const STORAGE_KEY = "fitness-island-v1";
const DAY_MS = 24 * 60 * 60 * 1000;

const $ = (id) => document.querySelector(`#${id}`);

const nodes = {
  islandLoading: $("islandLoading"),
  islandLoadingText: $("islandLoadingText"),
  topMeta: $("topMeta"),
  topTitle: $("topTitle"),
  topSummary: $("topSummary"),
  heroProgressFill: $("heroProgressFill"),
  heroProgressText: $("heroProgressText"),
  weekPlant: $("weekPlant"),
  handoffTrigger: $("handoffTrigger"),
  weekLabel: $("weekLabel"),
  weekSignal: $("weekSignal"),
  weekRoute: $("weekRoute"),
  phaseLabel: $("phaseLabel"),
  sequenceTitle: $("sequenceTitle"),
  completionText: $("completionText"),
  exerciseList: $("exerciseList"),
  completeDay: $("completeDay"),
  reviewPanel: $("reviewPanel"),
  reviewAppear: $("reviewAppear"),
  reviewFull: $("reviewFull"),
  reviewMinimum: $("reviewMinimum"),
  reviewTable: $("reviewTable"),
  copyReview: $("copyReview"),
  calendarGrid: $("calendarGrid"),
  toast: $("toast"),
  completeDialog: $("completeDialog"),
  closeComplete: $("closeComplete"),
  handoffDialog: $("handoffDialog"),
  painInput: $("painInput"),
  resistanceInput: $("resistanceInput"),
  cancelHandoff: $("cancelHandoff"),
  copyHandoff: $("copyHandoff"),
  openResetFromHandoff: $("openResetFromHandoff"),
  resetDialog: $("resetDialog"),
  cancelReset: $("cancelReset"),
  confirmReset: $("confirmReset"),
  navPrev: $("navPrev"),
  navComplete: $("navComplete"),
  navNext: $("navNext")
};

let route = { weeks: [] };
let days = [];
let state = createState();
let toastTimer;
let heroTypeKey = "";
let heroTypeTimer;

function todayKey() {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

function addDays(dateKey, offset) {
  const [year, month, day] = dateKey.split("-").map(Number);
  const date = new Date(year, month - 1, day);
  date.setDate(date.getDate() + offset);
  const nextYear = date.getFullYear();
  const nextMonth = String(date.getMonth() + 1).padStart(2, "0");
  const nextDay = String(date.getDate()).padStart(2, "0");
  return `${nextYear}-${nextMonth}-${nextDay}`;
}

function createState() {
  return {
    startDate: todayKey(),
    lastSeen: todayKey(),
    selectedDay: 1,
    checks: {},
    days: {},
    settled: {}
  };
}

function readState() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};
    return { ...createState(), ...saved };
  } catch {
    return createState();
  }
}

function writeState() {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  } catch {
    // localStorage 是缓存，不是系统真相源；不可用时保持当前会话可用。
  }
}

function loadJson(url) {
  if (typeof fetch === "function") {
    return fetch(url).then((response) => {
      if (!response.ok) throw new Error("plan.json load failed");
      return response.json();
    }).catch(() => loadJsonWithRequest(url));
  }

  return loadJsonWithRequest(url);
}

function loadJsonWithRequest(url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open("GET", url);
    request.responseType = "json";
    request.addEventListener("load", () => {
      if (request.status < 200 || request.status >= 300) {
        reject(new Error(`HTTP ${request.status}`));
        return;
      }

      resolve(request.response || JSON.parse(request.responseText));
    });
    request.addEventListener("error", () => reject(new Error("plan load failed")));
    request.send();
  });
}

function loadDays(plan) {
  const weekDays = plan.weeks.flatMap((week, weekIndex) =>
    week.days.map((day, dayIndex) => normalizeDay(day, week, weekIndex, dayIndex))
  );
  const bufferDays = (plan.buffer?.days || []).map((day, dayIndex) =>
    normalizeDay(day, plan.buffer, plan.weeks.length, dayIndex)
  );

  return [...weekDays, ...bufferDays]
    .slice(0, 30)
    .map((day, index) => ({ ...day, planDay: index + 1 }));
}

function normalizeDay(day, group, weekIndex, dayIndex) {
  return {
    ...day,
    weekIndex,
    dayIndex,
    weekTheme: group.theme,
    weekSignal: group.signal,
    weekSentence: group.sentence,
    plant: group.plant
  };
}

function currentPlanDay() {
  const [startYear, startMonth, startDay] = state.startDate.split("-").map(Number);
  const [nowYear, nowMonth, nowDay] = todayKey().split("-").map(Number);
  const start = new Date(startYear, startMonth - 1, startDay);
  const now = new Date(nowYear, nowMonth - 1, nowDay);
  const diff = Math.floor((now - start) / DAY_MS) + 1;
  return Math.min(days.length, Math.max(1, diff));
}

function planFor(day) {
  return days[Math.min(days.length, Math.max(1, day)) - 1];
}

function weekFor(day) {
  const plan = planFor(day);
  return {
    theme: plan.weekTheme,
    signal: plan.weekSignal,
    sentence: plan.weekSentence,
    plant: plan.plant
  };
}

function weekRangeFor(day) {
  const weekIndex = planFor(day).weekIndex;
  const sameWeek = days.filter((item) => item.weekIndex === weekIndex);
  const startDay = sameWeek[0].planDay;
  const endDay = sameWeek.at(-1).planDay;
  return { startDay, endDay };
}

function dayChecks(day) {
  return state.checks[day] || [];
}

function setDayChecks(day, checks) {
  state.checks[day] = checks;
}

function isDayDone(day) {
  return Boolean(state.days[day]);
}

function isDaySettled(day) {
  return Boolean(state.settled?.[day]);
}

function dayAppeared(day) {
  return isDayDone(day) || isDaySettled(day) || dayChecks(day).some(Boolean);
}

function checkedCount(day) {
  return dayChecks(day).filter(Boolean).length;
}

function dayStatus(day) {
  if (isDayDone(day)) return "完整";
  if (dayAppeared(day)) return "出现";
  return "待补";
}

function routeStatusLabel(day, current) {
  if (isDayDone(day)) return "完成";
  if (day === current) return dayAppeared(day) ? "进行" : "今天";
  if (day < current && !dayAppeared(day)) return "未完成";
  if (dayAppeared(day)) return "出现";
  return "待做";
}

function peakAppearedStreak(weekDays) {
  let peak = 0;
  let count = 0;

  weekDays.forEach((day) => {
    count = dayAppeared(day) ? count + 1 : 0;
    peak = Math.max(peak, count);
  });

  return peak;
}

function exerciseReviewStats(weekDays) {
  const stats = new Map();

  weekDays.forEach((day) => {
    const checks = dayChecks(day);
    planFor(day).exercises.forEach(([name], index) => {
      const stat = stats.get(name) || { name, done: 0, total: 0 };
      stat.total += 1;
      if (checks[index]) stat.done += 1;
      stats.set(name, stat);
    });
  });

  const list = [...stats.values()];
  const byRatio = (item) => item.done / item.total;
  const active = list.filter((item) => item.done > 0);
  const stable = active.sort((a, b) => byRatio(b) - byRatio(a) || b.done - a.done)[0];
  const weakest = list.sort((a, b) => byRatio(a) - byRatio(b) || a.done - b.done)[0];
  const format = (item) => item ? `${item.name} (${item.done}/${item.total})` : "待记录";

  return {
    stable: format(stable),
    weakest: format(weakest)
  };
}

function dayTrailItem(day) {
  if (isDayDone(day)) return { label: `D${day}`, status: "done", text: "✓" };
  if (dayAppeared(day)) return { label: `D${day}`, status: "appeared", text: "·" };
  return { label: `D${day}`, status: "missed", text: "x" };
}

function weeklyReview(day = state.selectedDay, input = {}) {
  const { startDay, endDay } = weekRangeFor(day);
  const weekDays = Array.from({ length: endDay - startDay + 1 }, (_, index) => startDay + index);
  const appeared = weekDays.filter(dayAppeared).length;
  const full = weekDays.filter(isDayDone).length;
  const minimum = weekDays.filter((item) => dayAppeared(item) && !isDayDone(item)).length;
  const weekNumber = planFor(day).weekIndex + 1;
  const startDate = addDays(state.startDate, startDay - 1);
  const endDate = addDays(state.startDate, endDay - 1);
  const stats = exerciseReviewStats(weekDays);
  const trailItems = weekDays.map(dayTrailItem);
  const trail = weekDays
    .map((item) => `Day ${item}${isDayDone(item) ? "✓" : dayAppeared(item) ? "·" : "x"}`)
    .join(" ");
  const lines = [
    `## Last Week (Week ${weekNumber}, ${startDate} ~ ${endDate})`,
    `完成: ${full}/${weekDays.length} (${trail})`,
    `最稳: ${stats.stable}`,
    `最弱: ${stats.weakest}`,
    `连续到场峰值: ${peakAppearedStreak(weekDays)} 天`
  ];

  const pain = input.pain?.trim();
  const resistance = input.resistance?.trim();
  if (pain) lines.push(`疼痛: ${pain}`);
  if (resistance) lines.push(`阻力: ${resistance}`);
  lines.push("", "→ 按 Next Week Rule 生成下周");

  return {
    appeared,
    full,
    minimum,
    trailItems,
    rows: [
      { key: "period", item: "周期", value: `第 ${weekNumber} 周`, note: `${startDate} ~ ${endDate}` },
      { key: "completion", item: "完成", value: `${full}/${weekDays.length}`, note: trailItems },
      { key: "stable", item: "最稳", value: stats.stable, note: "保持这个入口" },
      { key: "weakest", item: "最弱", value: stats.weakest, note: "下周别加码" },
      { key: "streak", item: "连续", value: `${peakAppearedStreak(weekDays)} 天`, note: "到场峰值" }
    ],
    text: lines.join("\n")
  };
}

function appendTextCell(row, text, className) {
  const cell = document.createElement("td");
  if (className) cell.className = className;
  cell.textContent = text;
  row.appendChild(cell);
  return cell;
}

function appendTrailCell(row, items) {
  const cell = document.createElement("td");
  cell.className = "review-trail-cell";
  const wrap = document.createElement("div");
  wrap.className = "review-trail";

  items.forEach((item) => {
    const chip = document.createElement("span");
    chip.className = `review-day-chip ${item.status}`;
    chip.textContent = `${item.label}${item.text}`;
    wrap.appendChild(chip);
  });

  cell.appendChild(wrap);
  row.appendChild(cell);
}

function renderReviewTable(review) {
  nodes.reviewTable.replaceChildren();

  const table = document.createElement("table");
  table.className = "review-table";

  const head = document.createElement("thead");
  const headRow = document.createElement("tr");
  ["项目", "结果", "记录"].forEach((title) => appendTextCell(headRow, title));
  head.appendChild(headRow);

  const body = document.createElement("tbody");
  review.rows.forEach((item, index) => {
    const row = document.createElement("tr");
    if (index % 2 === 1) row.className = "striped";
    appendTextCell(row, item.item, "review-item-cell");
    appendTextCell(row, item.value, "review-value-cell");
    if (Array.isArray(item.note)) appendTrailCell(row, item.note);
    else appendTextCell(row, item.note, "review-note-cell");
    body.appendChild(row);
  });

  table.append(head, body);
  nodes.reviewTable.appendChild(table);
}

function typewriterLine(node, text, key) {
  window.clearTimeout(heroTypeTimer);
  if (heroTypeKey === key || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
    node.textContent = text;
    heroTypeKey = key;
    return;
  }

  heroTypeKey = key;
  node.textContent = "";
  let index = 0;
  const tick = () => {
    node.textContent = text.slice(0, index);
    index += 1;
    if (index <= text.length) heroTypeTimer = window.setTimeout(tick, 42);
  };
  tick();
}

function renderTop(day) {
  const plan = planFor(day);
  const weekName = plan.weekIndex >= route.weeks.length ? "缓冲" : `第 ${plan.weekIndex + 1} 周`;
  const week = weekFor(day);
  const done = isDayDone(day);
  const appeared = dayAppeared(day);
  const checked = checkedCount(day);
  const total = plan.exercises.length;
  const statusLine = done ? "锻炼啦！已盖章" : appeared ? (plan.summary || "锻炼啦！继续走") : (plan.summary || week.sentence || "锻炼啦！待盖章");
  const metaParts = [`${weekName} · 第 ${day} 天`];
  if (plan.minutes) metaParts.push(`${plan.minutes} 分钟`);
  nodes.topTitle.textContent = "动森训练岛";
  typewriterLine(nodes.topMeta, metaParts.join(" · "), `${day}:${weekName}:${plan.minutes || ""}`);
  nodes.topSummary.textContent = statusLine;
  nodes.heroProgressFill.style.width = `${Math.round((checked / total) * 100)}%`;
  nodes.heroProgressText.textContent = `${checked}/${total}`;
  nodes.weekLabel.textContent = `${weekName} · 第 ${day} 天`;
  nodes.weekSignal.textContent = done ? "今天已完成" : appeared ? "今天进行中" : (week.signal || "今天未完成");
  nodes.weekPlant.dataset.plant = week.plant || "sprout";
  nodes.phaseLabel.textContent = [plan.type, plan.phase].filter(Boolean).join(" · ");
  nodes.sequenceTitle.textContent = plan.title || "今日顺序";
}

function renderWeekRoute(day) {
  const current = currentPlanDay();
  const { startDay, endDay } = weekRangeFor(day);
  nodes.weekRoute.innerHTML = "";

  for (let item = startDay; item <= endDay; item += 1) {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "route-node";
    const label = routeStatusLabel(item, current);
    button.setAttribute("aria-label", `第 ${item} 天，${label}`);
    if (item === day) {
      button.classList.add("selected");
      button.setAttribute("aria-current", "true");
    }
    if (item === current) button.classList.add("today");
    if (isDayDone(item)) button.classList.add("done");
    if (dayAppeared(item) && !isDayDone(item)) button.classList.add("appeared");
    if (item < current && !dayAppeared(item)) button.classList.add("late");
    if (planFor(item).review) button.classList.add("review");
    button.innerHTML = `
      <span>${item}</span>
    `;
    button.addEventListener("click", () => {
      state.selectedDay = item;
      writeState();
      transitionRender();
    });
    nodes.weekRoute.appendChild(button);
  }
}

function renderExercises(day) {
  const plan = planFor(day);
  const checks = dayChecks(day);
  nodes.exerciseList.innerHTML = "";

  plan.exercises.forEach(([name, detail, note], index) => {
    const item = document.createElement("li");
    item.className = `exercise-item${checks[index] ? " done" : ""}`;
    item.innerHTML = `
      <button class="check-button" type="button" aria-label="切换 ${name} 完成状态" aria-pressed="${Boolean(checks[index])}">${checks[index] ? "✓" : ""}</button>
      <div class="exercise-copy">
        <h3 class="exercise-title-row">
          <span class="exercise-name">${name}</span>
        </h3>
        <p class="exercise-detail">${detail}</p>
        <small class="exercise-note">${note}</small>
      </div>
    `;

    item.querySelector("button").addEventListener("click", () => {
      const wasDone = isDayDone(day);
      const next = [...dayChecks(day)];
      next[index] = !next[index];
      setDayChecks(day, next);
      state.days[day] = next.filter(Boolean).length === plan.exercises.length;
      writeState();
      showToast(next[index] ? `${name} 已记录` : `${name} 已取消`);
      transitionRender();
      if (!wasDone && state.days[day]) openCompleteDialog();
    });

    nodes.exerciseList.appendChild(item);
  });
}

function renderArchive(day) {
  const current = currentPlanDay();
  nodes.calendarGrid.innerHTML = "";

  days.forEach((plan, index) => {
    const item = index + 1;
    const button = document.createElement("button");
    button.type = "button";
    button.className = "calendar-day";
    button.textContent = item;
    if (item === day) button.classList.add("selected");
    if (isDayDone(item)) button.classList.add("done");
    if (item < current && !dayAppeared(item)) button.classList.add("late");
    button.addEventListener("click", () => {
      state.selectedDay = item;
      writeState();
      transitionRender();
    });
    nodes.calendarGrid.appendChild(button);
  });
}

function renderReview(day) {
  const review = weeklyReview(day);
  nodes.reviewPanel.hidden = !planFor(day).review;
  nodes.reviewAppear.textContent = review.appeared;
  nodes.reviewFull.textContent = review.full;
  nodes.reviewMinimum.textContent = review.minimum;
  renderReviewTable(review);
}

function render(options = {}) {
  const day = state.selectedDay || currentPlanDay();
  const plan = planFor(day);
  const done = isDayDone(day);
  const checked = checkedCount(day);

  renderTop(day);
  renderWeekRoute(day);
  renderExercises(day);
  renderArchive(day);
  renderReview(day);

  const actionText = completionActionText(day);
  nodes.completionText.textContent = `${checked}/${plan.exercises.length}`;
  nodes.completeDay.textContent = actionText;
  nodes.completeDay.classList.toggle("done", done);
  nodes.completeDay.setAttribute("aria-pressed", String(done));
  nodes.navComplete.setAttribute("aria-label", actionText);

  if (options.toast) showToast(options.toast);
  writeState();
}

function transitionRender(options = {}) {
  if (document.startViewTransition) {
    document.startViewTransition(() => render(options));
    return;
  }

  render(options);
}

function completionActionText(day) {
  const checked = checkedCount(day);
  const total = planFor(day).exercises.length;
  if (isDayDone(day)) return "今天已完成";
  if (checked > 0 && checked < total) return "今天到这";
  return "完成今天";
}

function settleDay() {
  const day = state.selectedDay;
  state.settled = state.settled || {};
  state.settled[day] = true;
  state.selectedDay = Math.min(days.length, day + 1);
  writeState();
  transitionRender({ toast: "已按当前进度收摊" });
}

function completeDay() {
  const day = state.selectedDay;
  const checked = checkedCount(day);
  const total = planFor(day).exercises.length;
  if (isDayDone(day)) {
    openCompleteDialog();
    return;
  }
  if (checked > 0 && checked < total) {
    settleDay();
    return;
  }

  setDayChecks(day, planFor(day).exercises.map(() => true));
  state.days[day] = true;
  writeState();
  transitionRender();
  openCompleteDialog();
}

async function copyText(text) {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }

  const field = document.createElement("textarea");
  field.value = text;
  field.setAttribute("readonly", "");
  field.style.position = "fixed";
  field.style.top = "-1000px";
  document.body.appendChild(field);
  field.select();
  document.execCommand("copy");
  field.remove();
}

function showToast(message) {
  if (!nodes.toast) return;
  window.clearTimeout(toastTimer);
  nodes.toast.textContent = message;
  nodes.toast.classList.add("show");
  toastTimer = window.setTimeout(() => {
    nodes.toast.classList.remove("show");
  }, 2200);
}

function finishLoading() {
  if (!nodes.islandLoading) return;
  nodes.islandLoading.classList.add("is-hidden");
  nodes.islandLoading.setAttribute("aria-hidden", "true");
  window.setTimeout(() => {
    nodes.islandLoading.hidden = true;
  }, 280);
}

function showLoadingError() {
  if (nodes.islandLoadingText) nodes.islandLoadingText.textContent = "plan.json 加载失败";
  if (nodes.islandLoading) nodes.islandLoading.classList.add("is-error");
}

function openCompleteDialog() {
  nodes.completeDialog.hidden = false;
  document.body.classList.add("modal-open");
  nodes.closeComplete.focus();
}

function closeCompleteDialog() {
  nodes.completeDialog.hidden = true;
  document.body.classList.remove("modal-open");
  nodes.completeDay.focus();
}

function openHandoffDialog() {
  nodes.handoffDialog.hidden = false;
  document.body.classList.add("modal-open");
  nodes.painInput.focus();
}

function closeHandoffDialog() {
  nodes.handoffDialog.hidden = true;
  document.body.classList.remove("modal-open");
  nodes.handoffTrigger.focus();
}

async function copyHandoff() {
  const text = weeklyReview(state.selectedDay, {
    pain: nodes.painInput.value,
    resistance: nodes.resistanceInput.value
  }).text;

  await copyText(text);
  closeHandoffDialog();
  showToast("已复制，贴回对话给 Agent");
}

function openResetDialog() {
  nodes.handoffDialog.hidden = true;
  nodes.resetDialog.hidden = false;
  document.body.classList.add("modal-open");
  nodes.cancelReset.focus();
}

function closeResetDialog() {
  nodes.resetDialog.hidden = true;
  document.body.classList.remove("modal-open");
  nodes.handoffTrigger.focus();
}

function resetPlan() {
  state = createState();
  writeState();
  closeResetDialog();
  transitionRender({ toast: "路线已重置，从第一天重新开始" });
}

function bindEvents() {
  nodes.completeDay.addEventListener("click", () => completeDay());
  nodes.navComplete.addEventListener("click", () => completeDay());
  nodes.navPrev.addEventListener("click", () => {
    state.selectedDay = Math.max(1, state.selectedDay - 1);
    transitionRender();
  });
  nodes.navNext.addEventListener("click", () => {
    state.selectedDay = Math.min(days.length, state.selectedDay + 1);
    transitionRender();
  });
  nodes.handoffTrigger.addEventListener("click", () => openHandoffDialog());
  nodes.closeComplete.addEventListener("click", () => closeCompleteDialog());
  nodes.completeDialog.addEventListener("click", (event) => {
    if (event.target === nodes.completeDialog) closeCompleteDialog();
  });
  nodes.copyReview.addEventListener("click", () => openHandoffDialog());
  nodes.cancelHandoff.addEventListener("click", () => closeHandoffDialog());
  nodes.copyHandoff.addEventListener("click", async () => {
    try {
      await copyHandoff();
    } catch {
      showToast("复制失败，请手动选中复盘文本");
    }
  });
  nodes.handoffDialog.addEventListener("click", (event) => {
    if (event.target === nodes.handoffDialog) closeHandoffDialog();
  });
  nodes.openResetFromHandoff.addEventListener("click", () => openResetDialog());
  nodes.cancelReset.addEventListener("click", () => closeResetDialog());
  nodes.confirmReset.addEventListener("click", () => resetPlan());
  nodes.resetDialog.addEventListener("click", (event) => {
    if (event.target === nodes.resetDialog) closeResetDialog();
  });
  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && !nodes.completeDialog.hidden) closeCompleteDialog();
    if (event.key === "Escape" && !nodes.handoffDialog.hidden) closeHandoffDialog();
    if (event.key === "Escape" && !nodes.resetDialog.hidden) closeResetDialog();
  });
}

async function init() {
  route = await loadJson("./plan.json?v=20260524-route");
  days = loadDays(route);
  state = readState();

  if (state.lastSeen !== todayKey()) {
    state.selectedDay = currentPlanDay();
    state.lastSeen = todayKey();
  }

  state.selectedDay = Math.min(days.length, Math.max(1, state.selectedDay || currentPlanDay()));
  bindEvents();
  render();
  finishLoading();
}

init().catch(() => {
  showLoadingError();
});

<!--
[INPUT]: 依赖 app.js 加载的 plan.json 训练路线、localStorage 状态、可选生产 assets/fonts 字体子集、assets/animal-island 原生背景/伙伴/光标资产和 styles.css 的滚动背景与 animal-island-ui 静态投影
[OUTPUT]: 对外提供「动森训练岛」首页式标题、favicon、统一 hero-stage 舞台、Animal Loading 启动遮罩、打字机日程行、游戏提示语、hero-animal 伙伴层、今日进度条、零基础 30 天训练打卡入口、7 日路线、今日动作序列、黄色结算主按钮、导出入口、奖励式每日完成弹窗、周日复盘 Table、30 天全图 Collapse、本周交接导出弹窗、重置弹窗、Animal Modal clip-path、Footer sea 装饰与反馈容器
[POS]: fitness-island/assets 的 canonical 页面目标，被 init_project.sh 复制到目标项目 index.html，把 animal-island-ui 设计系统和一屏一意图训练流投射为 HTML 骨架
[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
-->
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#f7f1e3">
    <title>动森训练岛</title>
    <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="./styles.css?v=20260524-exercise-scale">
  </head>
  <body>
    <div class="island-loading" id="islandLoading" role="status" aria-live="polite">
      <div class="island-loading-stage">
        <div class="island-loading-animal" aria-hidden="true"></div>
        <p id="islandLoadingText">小岛载入中</p>
        <div class="island-loading-bar" aria-hidden="true"><span></span></div>
      </div>
    </div>

    <svg class="animal-modal-defs" style="position:absolute;width:0;height:0" aria-hidden="true">
      <defs>
        <clipPath id="animal-modal-clip" clipPathUnits="objectBoundingBox">
          <path d="M0.501,0.005 L0.501,0.005 L0.523,0.005 L0.549,0.006 C0.704,0.01,0.796,0.017,0.825,0.027 L0.827,0.028 C0.872,0.045,0.939,0.044,0.978,0.17 C1,0.254,1,0.365,0.99,0.505 L0.988,0.513 C0.979,0.558,0.971,0.598,0.965,0.633 C0.956,0.689,0.979,0.77,0.964,0.865 C0.953,0.928,0.921,0.966,0.869,0.979 C0.821,0.986,0.773,0.992,0.726,0.995 L0.712,0.996 L0.694,0.997 C0.648,1,0.586,1,0.507,1 L0.501,1 L0.464,1 C0.385,1,0.325,0.998,0.283,0.995 C0.234,0.992,0.184,0.987,0.133,0.979 C0.081,0.966,0.05,0.928,0.039,0.865 C0.023,0.77,0.047,0.689,0.037,0.633 C0.031,0.595,0.023,0.552,0.013,0.505 C-0.006,0.365,-0.002,0.254,0.024,0.17 C0.064,0.045,0.13,0.045,0.174,0.028 L0.175,0.028 C0.204,0.017,0.303,0.009,0.474,0.005 L0.501,0.005"></path>
        </clipPath>
      </defs>
    </svg>
    <main class="app-shell">
      <header class="topbar" aria-label="今日训练">
        <div class="week-plant" id="weekPlant" aria-hidden="true"></div>
        <div class="hero-stage">
          <h1 id="topTitle">动森训练岛</h1>
          <p class="caption hero-meta" id="topMeta">第 1 天</p>
          <p class="body-copy" id="topSummary">先散个步，再看身体愿不愿意多做一点。</p>
          <div class="hero-animal" aria-hidden="true"></div>
          <div class="hero-progress" aria-label="今日完成进度">
            <span id="heroProgressFill"></span>
            <strong id="heroProgressText">0/1</strong>
          </div>
        </div>
        <button class="small-button top-copy-button" type="button" id="handoffTrigger" aria-label="导出记录给 Agent">导出</button>
      </header>

      <section class="route-card" aria-labelledby="weekTitle">
        <div class="section-head">
          <div>
            <p class="caption" id="weekLabel">第 1 周</p>
            <h2 id="weekTitle">这周路线</h2>
          </div>
          <p class="caption strong" id="weekSignal">路线全灰，亮一颗。</p>
        </div>
        <div class="week-route" id="weekRoute" aria-label="本周 7 日路线"></div>
      </section>

      <section class="route-card today-card" aria-labelledby="sequenceTitle">
        <div class="section-head">
          <div>
            <p class="caption" id="phaseLabel">习惯启动</p>
            <h2 id="sequenceTitle">今日顺序</h2>
          </div>
          <p class="caption strong" id="completionText">0/1</p>
        </div>

        <ol class="exercise-list" id="exerciseList"></ol>

      </section>

      <section class="complete-strip" aria-label="结算今日训练">
        <button class="complete-button" id="completeDay" type="button">完成今天</button>
      </section>

      <section class="review-card" id="reviewPanel" aria-labelledby="reviewTitle" hidden>
        <div class="section-head">
          <div>
            <p class="caption">周日回顾</p>
            <h2 id="reviewTitle">这周交接</h2>
          </div>
          <button class="small-button" id="copyReview" type="button">导出</button>
        </div>
        <div class="review-stats" aria-label="本周训练摘要">
          <div>
            <span id="reviewAppear">0</span>
            <small>出现</small>
          </div>
          <div>
            <span id="reviewFull">0</span>
            <small>完整</small>
          </div>
          <div>
            <span id="reviewMinimum">0</span>
            <small>兜底</small>
          </div>
        </div>
        <div class="review-table-wrap" id="reviewTable" aria-label="本周复盘表格"></div>
      </section>

      <details class="archive-card">
        <summary>
          <span class="archive-summary-main">
            <span class="archive-toggle-icon" aria-hidden="true"></span>
            <span class="archive-title-copy">
              <span>30 天全图</span>
              <small>训练岛地图册</small>
            </span>
          </span>
          <span class="archive-leaf" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="20" height="20" focusable="false">
              <path fill="currentColor" d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"></path>
            </svg>
          </span>
        </summary>
        <div class="archive-panel">
          <div class="archive-divider" aria-hidden="true"></div>
          <div class="calendar-grid" id="calendarGrid" aria-label="30 天完成状态"></div>
        </div>
      </details>
    </main>

    <div class="animal-footer-sea" aria-hidden="true"></div>

    <div class="toast" id="toast" role="status" aria-live="polite"></div>

    <div class="modal-backdrop" id="completeDialog" hidden>
      <section class="modal-card complete-modal-card" role="dialog" aria-modal="true" aria-labelledby="completeTitle">
        <div class="stamp-mark" aria-hidden="true">OK</div>
        <h2 id="completeTitle">盖章啦</h2>
        <div class="modal-actions single">
          <button type="button" class="reward-button" id="closeComplete">收下</button>
        </div>
      </section>
    </div>

    <div class="modal-backdrop" id="handoffDialog" hidden>
      <section class="modal-card" role="dialog" aria-modal="true" aria-labelledby="handoffTitle">
        <p class="caption">给 Agent</p>
        <h2 id="handoffTitle">导出记录</h2>
        <p class="body-copy">复制一段本周记录，贴回对话里让我更新下一周。空着就不写进 Markdown。</p>
        <label class="field-label" for="painInput">
          <span>疼痛 / 不适</span>
          <textarea id="painInput" rows="3" autocomplete="off"></textarea>
        </label>
        <label class="field-label" for="resistanceInput">
          <span>主要阻力</span>
          <textarea id="resistanceInput" rows="3" autocomplete="off"></textarea>
        </label>
        <div class="modal-actions">
          <button type="button" class="small-button ghost" id="cancelHandoff">取消</button>
          <button type="button" class="small-button primary" id="copyHandoff">复制</button>
        </div>
        <button type="button" class="danger-link" id="openResetFromHandoff">重置本地记录</button>
      </section>
    </div>

    <div class="modal-backdrop" id="resetDialog" hidden>
      <section class="modal-card" role="dialog" aria-modal="true" aria-labelledby="resetTitle">
        <p class="caption">重置</p>
        <h2 id="resetTitle">从今天重新开始？</h2>
        <p class="body-copy">这会清空本地完成记录，但不会改变训练计划。</p>
        <div class="modal-actions">
          <button type="button" class="small-button ghost" id="cancelReset">取消</button>
          <button type="button" class="small-button danger" id="confirmReset">确认重置</button>
        </div>
      </section>
    </div>

    <nav class="floating-nav" aria-label="训练操作">
      <button type="button" id="navPrev" aria-label="前一天">‹</button>
      <button class="nav-fab" type="button" id="navComplete" aria-label="完成今天">✓</button>
      <button type="button" id="navNext" aria-label="后一天">›</button>
    </nav>

    <script src="./app.js?v=20260524-rounded-font"></script>
  </body>
</html>

{
  "contract": {
    "INPUT": "依赖用户稳定默认值、低重量原则和 4 周 + 2 天缓冲节奏",
    "OUTPUT": "对外提供示例 30 天训练路线、周主题、视觉信号、复盘日和最低承诺缓冲日",
    "POS": "fitness-island/assets 的 plan.json 示例，被 init_project.sh 复制为可运行默认路线，再由 agent 按用户情况改写",
    "PROTOCOL": "[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md"
  },
  "weeks": [
    {
      "theme": "出现",
      "signal": "路线全灰，亮一颗。",
      "sentence": "今天来岛上走走。",
      "plant": "sprout",
      "days": [
        {
          "type": "A 训练",
          "title": "背 + 核心",
          "phase": "力量入门",
          "summary": "先上跑步机 5 分钟，再做低重量背部和核心。",
          "minutes": 10,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，2 组 x 10 次", "保留 3 次余力"],
            ["低位划船", "20kg，2 组 x 10 次", "背挺直"],
            ["腹部卷腹", "10-15kg，2 组 x 12 次", "慢一点"],
            ["跑步机", "4.0-4.5 km/h，走 5 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "习惯加固",
          "summary": "今天只走路，不加力量，给身体留恢复空间。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0-4.5 km/h，走 10-12 分钟", "能完整说话"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "B 训练",
          "title": "肩 + 后三角",
          "phase": "力量入门",
          "summary": "肩部只练轻重量，动作干净比重量重要。",
          "minutes": 10,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["肩推", "10kg，2 组 x 8 次", "不锁死肘"],
            ["侧平举", "5kg，2 组 x 12 次", "不耸肩"],
            ["坐姿划船/后三角", "15kg，2 组 x 10 次", "肩胛后收"],
            ["跑步机", "4.0-4.5 km/h，走 5 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "恢复",
          "summary": "今天用低强度走路恢复，别把恢复日练成惩罚日。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0-4.5 km/h，走 10-12 分钟", "轻松完成"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "C 训练",
          "title": "全身轻循环",
          "phase": "动作熟悉",
          "summary": "每个动作只做 1 组，熟悉器械顺序。",
          "minutes": 10,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，1 组 x 10 次", "慢拉慢放"],
            ["低位划船", "20kg，1 组 x 10 次", "背挺直"],
            ["背伸", "10kg，1 组 x 12 次", "腰不疼才做"],
            ["腹部卷腹", "10-15kg，1 组 x 12 次", "慢一点"],
            ["肩推", "10kg，1 组 x 8 次", "不耸肩"],
            ["跑步机", "4.0-4.5 km/h，走 5 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "心肺入门",
          "summary": "稍微走久一点，但仍然不跑。",
          "minutes": 15,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 12-15 分钟", "只走不跑"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "最低承诺日",
          "title": "最低承诺日",
          "phase": "身份维护",
          "summary": "今天只守住 5 分钟。不是休息失败，是习惯成功。",
          "minutes": 5,
          "review": true,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "盖个小章"]
          ]
        }
      ]
    },
    {
      "theme": "加入",
      "signal": "走路日变长一点。",
      "sentence": "只加一点，不加压力。",
      "plant": "leaf",
      "days": [
        {
          "type": "A 训练",
          "title": "背 + 核心",
          "phase": "力量入门",
          "summary": "力量不加码，先把出现变稳定。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，2 组 x 10 次", "保留 3 次余力"],
            ["低位划船", "20kg，2 组 x 10 次", "背挺直"],
            ["腹部卷腹", "10-15kg，2 组 x 12 次", "慢一点"],
            ["跑步机", "4.0-4.5 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "习惯加固",
          "summary": "走路时间略长，仍然能完整说话。",
          "minutes": 15,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 15 分钟", "能完整说话"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "B 训练",
          "title": "肩 + 后三角",
          "phase": "动作稳定",
          "summary": "肩部仍然轻，先稳住动作轨迹。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["肩推", "10kg，2 组 x 8 次", "不锁死肘"],
            ["侧平举", "5kg，2 组 x 12 次", "不耸肩"],
            ["坐姿划船/后三角", "15kg，2 组 x 10 次", "肩胛后收"],
            ["跑步机", "4.0-4.5 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "恢复",
          "summary": "恢复日只负责让明天更容易出现。",
          "minutes": 15,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 15 分钟", "轻松完成"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "C 训练",
          "title": "全身轻循环",
          "phase": "顺序熟悉",
          "summary": "还是低重量，目标是不用重新思考。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，1 组 x 10 次", "慢拉慢放"],
            ["低位划船", "20kg，1 组 x 10 次", "背挺直"],
            ["背伸", "10kg，1 组 x 12 次", "腰不疼才做"],
            ["腹部卷腹", "10-15kg，1 组 x 12 次", "慢一点"],
            ["肩推", "10kg，1 组 x 8 次", "不耸肩"],
            ["跑步机", "4.0-4.5 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "心肺入门",
          "summary": "走久一点，但不追速度。",
          "minutes": 18,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 15-18 分钟", "只走不跑"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "最低承诺日",
          "title": "最低承诺日",
          "phase": "身份维护",
          "summary": "今天只守住 5 分钟，然后复盘。",
          "minutes": 5,
          "review": true,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "盖个小章"]
          ]
        }
      ]
    },
    {
      "theme": "稳住",
      "signal": "重量节点只记录，不硬加。",
      "sentence": "稳定比用力更高级。",
      "plant": "branch",
      "days": [
        {
          "type": "A 训练",
          "title": "背 + 核心",
          "phase": "重量观察",
          "summary": "如果全程无痛且轻松，记录下周是否可加一点。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，2 组 x 10 次", "无痛才记录可加"],
            ["低位划船", "20kg，2 组 x 10 次", "背挺直"],
            ["腹部卷腹", "10-15kg，2 组 x 12 次", "慢一点"],
            ["跑步机", "4.0-4.8 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "稳态心肺",
          "summary": "保持呼吸快一点，但还能完整说话。",
          "minutes": 18,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 18 分钟", "能完整说话"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "B 训练",
          "title": "肩 + 后三角",
          "phase": "重量观察",
          "summary": "肩部不急着加重量，先保持干净。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["肩推", "10kg，2 组 x 8 次", "无痛才记录可加"],
            ["侧平举", "5kg，2 组 x 12 次", "不耸肩"],
            ["坐姿划船/后三角", "15kg，2 组 x 10 次", "肩胛后收"],
            ["跑步机", "4.0-4.8 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "恢复",
          "summary": "低强度恢复，给身体留余地。",
          "minutes": 18,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 18 分钟", "轻松完成"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "C 训练",
          "title": "全身轻循环",
          "phase": "顺序稳定",
          "summary": "不追泵感，追动作不乱。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，1 组 x 10 次", "慢拉慢放"],
            ["低位划船", "20kg，1 组 x 10 次", "背挺直"],
            ["背伸", "10kg，1 组 x 12 次", "腰不疼才做"],
            ["腹部卷腹", "10-15kg，1 组 x 12 次", "慢一点"],
            ["肩推", "10kg，1 组 x 8 次", "不耸肩"],
            ["跑步机", "4.0-4.8 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "稳态心肺",
          "summary": "走路保持，不跑步。",
          "minutes": 20,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 18-20 分钟", "只走不跑"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "最低承诺日",
          "title": "最低承诺日",
          "phase": "身份维护",
          "summary": "今天只守住 5 分钟，然后复盘。",
          "minutes": 5,
          "review": true,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "盖个小章"]
          ]
        }
      ]
    },
    {
      "theme": "巩固",
      "signal": "路线尾端看见 next。",
      "sentence": "这是系统，不是冲刺。",
      "plant": "tree",
      "days": [
        {
          "type": "A 训练",
          "title": "背 + 核心",
          "phase": "巩固",
          "summary": "照旧完成，不用证明更多。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，2 组 x 10 次", "保留 3 次余力"],
            ["低位划船", "20kg，2 组 x 10 次", "背挺直"],
            ["腹部卷腹", "10-15kg，2 组 x 12 次", "慢一点"],
            ["跑步机", "4.0-4.8 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "巩固",
          "summary": "让走路变成不需要谈判的默认动作。",
          "minutes": 20,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 20 分钟", "能完整说话"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "B 训练",
          "title": "肩 + 后三角",
          "phase": "巩固",
          "summary": "动作保持，结束后留一点余力。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["肩推", "10kg，2 组 x 8 次", "不锁死肘"],
            ["侧平举", "5kg，2 组 x 12 次", "不耸肩"],
            ["坐姿划船/后三角", "15kg，2 组 x 10 次", "肩胛后收"],
            ["跑步机", "4.0-4.8 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "恢复",
          "summary": "恢复日保持轻松，不把身体推到疼。",
          "minutes": 20,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 20 分钟", "轻松完成"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "C 训练",
          "title": "全身轻循环",
          "phase": "巩固",
          "summary": "把路线走顺，30 天后再决定下一步。",
          "minutes": 12,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "入口"],
            ["高位下拉", "20kg，1 组 x 10 次", "慢拉慢放"],
            ["低位划船", "20kg，1 组 x 10 次", "背挺直"],
            ["背伸", "10kg，1 组 x 12 次", "腰不疼才做"],
            ["腹部卷腹", "10-15kg，1 组 x 12 次", "慢一点"],
            ["肩推", "10kg，1 组 x 8 次", "不耸肩"],
            ["跑步机", "4.0-4.8 km/h，走 7 分钟", "收尾"]
          ]
        },
        {
          "type": "走路日",
          "title": "走路日",
          "phase": "巩固",
          "summary": "最后一个完整走路日，不跑步。",
          "minutes": 20,
          "exercises": [
            ["跑步机", "4.0-4.8 km/h，走 20 分钟", "只走不跑"],
            ["记录", "写下今天完成分钟数", "不断链"]
          ]
        },
        {
          "type": "最低承诺日",
          "title": "最低承诺日",
          "phase": "身份维护",
          "summary": "今天只守住 5 分钟，然后复盘。",
          "minutes": 5,
          "review": true,
          "exercises": [
            ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "盖个小章"]
          ]
        }
      ]
    }
  ],
  "buffer": {
    "theme": "缓冲",
    "signal": "只走最低承诺。",
    "sentence": "不补课，不惩罚。",
    "plant": "seed",
    "days": [
      {
        "type": "缓冲日",
        "title": "最低承诺",
        "phase": "缓冲",
        "summary": "今天不加训练量，只守住 5 分钟。",
        "minutes": 5,
        "exercises": [
          ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "盖个小章"]
        ]
      },
      {
        "type": "缓冲日",
        "title": "30 天收口",
        "phase": "复盘",
        "summary": "只走最低承诺，然后决定下一周。",
        "minutes": 5,
        "review": true,
        "exercises": [
          ["跑步机", "4.0 km/h，坡度 0，走 5 分钟", "盖个小章"]
        ]
      }
    ]
  }
}

/*
[INPUT]: 依赖 design.md 的组件契约、index.html 的路线语义结构、assets/animal-island 的 animal-island-ui 原生背景/伙伴/光标资产和 app.js 写入的 selected/done/appeared/late 状态类
[OUTPUT]: 对外提供严格贴合 animal-island-ui v0.9.3 token 的移动优先训练岛界面、圆润中文系统字体栈、可选本地字体子集入口、规范化间距/圆角阶梯、清晰标题/参数/备注层级、Card/Button/Checkbox/Collapse/Loading/Modal/Footer/Table/Toast 静态 HTML 投影、小尺寸游戏光标、1120px 疏纹滚动叶子背景、统一 Hero Artboard 舞台、hero-animal 伙伴层、今日游戏进度条、无文字状态标签路线节点、黄色结算主按钮、奖励式完成弹窗、薄荷完成态、暖红逾期态、前景海底条和三键底部导航
[POS]: fitness-island/assets 的视觉层目标，只负责把 animal-island-ui 设计系统落实为可触控界面
[PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
*/
:root { color-scheme: light; --animal-primary-color: #19c8b9; --animal-primary-color-hover: #3dd4c6; --animal-primary-color-active: #50b9ab; --animal-primary-color-bg: #e6f9f6; --animal-success-color: #6fba2c; --animal-success-color-active: #5a9e1e; --animal-warning-color: #f5c31c; --animal-warning-color-active: #dba90e; --animal-error-color: #e05a5a; --animal-error-color-active: #c94444; --animal-text-color: #794f27; --animal-text-color-body: #725d42; --animal-text-color-secondary: #9f927d; --animal-text-color-muted: #8a7b66; --animal-text-color-disabled: #c4b89e; --animal-border-color: #aaa69d; --animal-border-color-hover: #827157; --animal-border-color-light: #e8e2d6; --animal-input-border: #c4b89e; --animal-input-border-hover: #a89878; --animal-bg-color: #f8f8f0; --animal-bg-content: rgb(247, 243, 223); --animal-bg-card-title: #fdfdf5; --animal-bg-secondary: #f0e8d8; --animal-bg-disabled: #f0ece2; --animal-focus-yellow: #ffcc00; --animal-focus-yellow-dark: #e0b800; --animal-shadow-btn: #bdaea0; --animal-shadow-input: #d4c9b4; --animal-shadow-card: rgba(107, 92, 67, 0.42); --animal-font-family: "Fitness Rounded CN", "Resource Han Rounded CN", Nunito, "Noto Sans SC", "Zen Maru Gothic", "HarmonyOS Sans SC", "MiSans", sans-serif; --animal-font-size-sm: 12px; --animal-font-size-base: 14px; --animal-font-size-lg: 16px; --animal-line-height-base: 1.5715; --animal-spacing-xs: 4px; --animal-spacing-sm: 8px; --animal-spacing-md: 12px; --animal-spacing-lg: 16px; --animal-spacing-xl: 24px; --animal-stack-gap: 16px; --animal-stack-gap-raised: 22px; --animal-surface-pad-x: 24px; --animal-surface-pad-y: 18px; --animal-inset-gap: 14px; --animal-radius-sm: 12px; --animal-radius-base: 16px; --animal-radius-lg: 22px; --animal-radius-card: 28px; --animal-radius-surface: 32px; --animal-radius-pill: 999px; --animal-motion-fast: 0.15s; --animal-motion: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --display: 38px; --body: 16px; --caption: 12px; }
*,
*::before,
*::after { box-sizing: border-box; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease; }
html { min-width: 320px; background: var(--animal-bg-color); }
body { margin: 0; min-height: 100dvh; overflow-x: hidden; background: url("./assets/animal-island/home-bg.webp") center top / 1120px auto repeat, #7dc395; color: var(--animal-text-color-body); cursor: url("./assets/animal-island/cursor-icon-small.png") 4 0, auto; font-family: var(--animal-font-family); font-size: var(--body); font-weight: 500; line-height: var(--animal-line-height-base); animation: island-bg-scroll 48s linear infinite; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.modal-open { overflow: hidden; }
button { min-width: 44px; min-height: 44px; border: 0; color: inherit; cursor: url("./assets/animal-island/cursor-icon-small.png") 4 0, pointer; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible,
summary:focus-visible,
textarea:focus-visible { outline: 2px solid var(--animal-focus-yellow); outline-offset: 2px; }
h1,
h2,
h3,
p { margin: 0; }
h1 { max-width: 9em; margin-top: 4px; color: var(--animal-text-color); font-size: var(--display); font-weight: 800; letter-spacing: 0.02em; line-height: 1.1; }
h2 { color: var(--animal-text-color); font-size: 22px; font-weight: 900; letter-spacing: 0; line-height: 1.16; }
h3 { color: var(--animal-text-color-body); font-size: var(--body); font-weight: 800; letter-spacing: 0; line-height: 1.32; }
.app-shell { width: 100%; max-width: 720px; margin: 0 auto; padding: 18px 14px 132px; }
.caption { color: var(--animal-text-color-secondary); font-size: var(--caption); font-weight: 700; letter-spacing: 0.01em; line-height: 1.35; }
.caption.strong { color: var(--animal-primary-color); }
.body-copy { margin-top: 8px; color: var(--animal-text-color-muted); font-size: var(--body); line-height: 1.65; }
.topbar,
.route-card,
.complete-strip,
.review-card,
.archive-card { color: var(--animal-text-color-body); transition: all 0.3s ease; }
.route-card,
.complete-strip,
.review-card,
.archive-card { width: 100%; max-width: 100%; margin-top: var(--animal-stack-gap); border-radius: var(--animal-radius-surface); background: var(--animal-bg-content); padding: var(--animal-surface-pad-y) var(--animal-surface-pad-x); box-shadow: 0 4px 10px var(--animal-shadow-card); }
.route-card:hover,
.review-card:hover,
.archive-card:hover { transform: translateY(-2px); }
.island-loading { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: url("./assets/animal-island/home-bg.webp") center top / 1120px auto repeat, #7dc395; color: var(--animal-text-color); padding: 24px; transition: opacity 260ms ease, visibility 260ms ease; }
.island-loading.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.island-loading-stage { display: grid; width: min(100%, 320px); justify-items: center; gap: 14px; border: 3px solid #d8d0c3; border-radius: var(--animal-radius-surface); background: rgba(255, 253, 245, 0.94); padding: 24px 26px 26px; box-shadow: 0 7px 0 0 var(--animal-shadow-btn), 0 16px 28px rgba(61, 52, 40, 0.18); }
.island-loading-animal { width: 148px; height: 102px; background: url("./assets/animal-island/animal-icon.png") center / contain no-repeat; animation: island-loading-bob 1200ms ease-in-out infinite; }
.island-loading p { color: var(--animal-text-color); font-size: 18px; font-weight: 900; line-height: 1.2; }
.island-loading-bar { position: relative; width: 100%; height: 18px; overflow: hidden; border: 2px solid #d4c9b4; border-radius: var(--animal-radius-pill); background: var(--animal-bg-content); box-shadow: inset 0 -2px 0 rgba(122, 91, 52, 0.08); }
.island-loading-bar span { position: absolute; inset: 0 auto 0 0; width: 52%; border-radius: inherit; background: repeating-linear-gradient(-45deg, #19c8b9, #19c8b9 10px, #11b7aa 10px, #11b7aa 20px); animation: island-loading-sweep 1350ms ease-in-out infinite; }
.island-loading.is-error .island-loading-animal { animation: none; opacity: 0.82; }
.island-loading.is-error .island-loading-bar span { width: 100%; background: var(--animal-error-color); animation: none; }
.topbar { position: relative; width: 100vw; max-width: none; height: clamp(336px, 54vw, 720px); margin: -18px 0 18px calc(50% - 50vw); overflow: hidden; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.topbar > * { position: relative; z-index: 1; }
.topbar::before { display: none; }
.topbar::after { display: none; }
.hero-stage { position: relative; width: min(calc(100% - 56px), 1280px); height: 100%; margin: 0 auto; overflow: hidden; }
.week-plant { display: none; }
.week-plant::before,
.week-plant::after { position: absolute; content: ""; }
.week-plant::before { right: 10px; bottom: 0; width: 4px; height: 34px; border-radius: 999px; background: var(--animal-success-color-active); transform: rotate(12deg); transform-origin: bottom; }
.week-plant::after { right: 14px; bottom: 15px; width: 30px; height: 22px; border-radius: 100% 0 100% 0; background: var(--animal-primary-color); transform: rotate(-18deg); }
.week-plant[data-plant="leaf"]::after { box-shadow: 15px 10px 0 -4px var(--animal-primary-color); }
.week-plant[data-plant="branch"]::before { height: 34px; }
.week-plant[data-plant="branch"]::after { box-shadow: 16px 8px 0 -5px var(--animal-primary-color), -10px 14px 0 -6px var(--animal-primary-color); }
.week-plant[data-plant="tree"]::before { height: 36px; }
.week-plant[data-plant="tree"]::after { width: 29px; height: 24px; border-radius: 50%; box-shadow: 13px 6px 0 -5px var(--animal-primary-color), -10px 7px 0 -5px var(--animal-primary-color); }
.week-plant[data-plant="seed"]::before { height: 18px; }
.week-plant[data-plant="seed"]::after { width: 16px; height: 12px; }
.topbar h1 { position: absolute; top: clamp(58px, 4.2vw, 66px); left: 0; max-width: 4.45em; color: #fff9e6; font-size: clamp(54px, 13vw, 184px); font-weight: 900; line-height: 0.94; text-shadow: 0 7px 0 rgba(61, 84, 55, 0.48), 0 2px 0 rgba(114, 93, 66, 0.34); }
.topbar .caption { position: absolute; top: clamp(178px, 37vw, 430px); left: 0; color: #fff9e6; font-size: clamp(16px, 2.55vw, 34px); text-shadow: 0 3px 0 rgba(61, 84, 55, 0.32); }
.hero-meta::after { display: inline-block; width: 0.62em; color: #fff9e6; content: "|"; animation: type-caret 1s step-end infinite; }
.topbar .body-copy { position: absolute; top: clamp(218px, 42vw, 500px); left: 0; width: min(54vw, 720px); max-width: 22em; color: #7b5633; font-size: clamp(17px, 2.65vw, 36px); font-weight: 700; line-height: 1.38; text-shadow: none; }
.hero-animal { position: absolute; right: 0; top: clamp(84px, 24vw, 304px); display: block; width: clamp(122px, 34vw, 520px); height: clamp(92px, 23vw, 356px); background: url("./assets/animal-island/animal-icon.png") center / contain no-repeat; opacity: 0.94; pointer-events: none; }
.hero-progress { position: absolute; top: clamp(276px, 47vw, 600px); left: 0; display: flex; width: min(44vw, 560px); min-width: 308px; height: clamp(34px, 5vw, 72px); align-items: center; overflow: hidden; border: clamp(2.5px, 0.35vw, 5px) solid #d4c9b4; border-radius: 50px; background: rgb(247, 243, 223); box-shadow: 0 4px 0 0 var(--animal-shadow-input); }
.hero-progress span { position: absolute; inset: 0 auto 0 0; width: 0; min-width: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, #19c8b9, #19c8b9 10px, #11b7aa 10px, #11b7aa 20px); transition: width var(--animal-motion); }
.hero-progress strong { position: relative; z-index: 1; display: grid; width: clamp(54px, 8vw, 116px); height: calc(100% - 10px); place-items: center; margin-left: auto; margin-right: 5px; border-radius: 50px; background: #fff9e6; color: var(--animal-text-color-body); font-size: clamp(13px, 2vw, 30px); font-weight: 900; box-shadow: 0 2px 0 0 #d4c9b4; }
.section-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: 18px; padding-bottom: 22px; }
.section-head > * { min-width: 0; }
.section-head > .caption { max-width: 46%; overflow-wrap: anywhere; text-align: right; }
.section-head > div > .caption { margin-bottom: 5px; color: #8e755c; font-size: 13px; font-weight: 900; }
.section-head > .caption.strong { display: inline-flex; min-width: 72px; min-height: 40px; align-items: center; justify-content: center; border: 3px solid #d4c9b4; border-radius: 999px; background: #fffdf5; color: var(--animal-primary-color-active); padding: 0 14px; box-shadow: 0 4px 0 0 var(--animal-shadow-btn); font-size: 17px; font-weight: 900; line-height: 1; white-space: nowrap; }
.section-head::after { position: absolute; right: 18px; bottom: 0; left: 18px; height: 12px; background: url("./assets/animal-island/divider-line-brown.svg") center / contain repeat-x; content: ""; opacity: 0.58; }
.week-route { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.route-node { display: grid; min-width: 0; height: 76px; place-items: center; border: 2px solid var(--animal-border-color-light); border-radius: var(--animal-radius-lg); background: rgba(255, 255, 255, 0.62); color: var(--animal-text-color-muted); padding: 8px 4px; transition: all var(--animal-motion); }
.route-node:hover { background: rgba(25, 200, 185, 0.1); color: var(--animal-text-color); transform: translateY(-1px); }
.route-node span { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid #d4c9b4; border-radius: 50%; background: #fffdf5; color: var(--animal-text-color); box-shadow: 0 2px 0 0 #d4c9b4; font-size: 13px; font-weight: 900; }
.route-node.selected { border-color: var(--animal-focus-yellow); background: var(--animal-focus-yellow); color: var(--animal-text-color-body); box-shadow: 0 4px 0 0 var(--animal-focus-yellow-dark); transform: translateY(-1px); }
.route-node.today span { background: var(--animal-warning-color); color: var(--animal-text-color-body); }
.route-node.done { border-color: var(--animal-primary-color-active); background: var(--animal-primary-color-bg); color: var(--animal-text-color-body); }
.route-node.selected span { background: #fff9e6; color: var(--animal-text-color-body); }
.route-node.done span,
.route-node.appeared span { background: var(--animal-primary-color); color: #fff; }
.route-node.late { border-color: var(--animal-error-color); background: #fff0ea; color: var(--animal-error-color); }
.today-card { background: transparent; padding: 0; box-shadow: none; }
.today-card:hover { transform: none; }
.today-card .section-head { min-height: 118px; margin: 0 0 var(--animal-stack-gap); overflow: hidden; border: 4px solid #d8d0c3; border-radius: var(--animal-radius-surface); background: #fffdf5; padding: 20px 28px 28px; box-shadow: 0 6px 0 0 var(--animal-shadow-btn); }
.today-card .section-head h2 { color: var(--animal-text-color); font-size: 30px; font-weight: 900; line-height: 1.04; }
.today-card .section-head > div > .caption { margin-bottom: 8px; color: #9b8468; font-size: 14px; }
.today-card .section-head::after { right: 38px; left: 38px; opacity: 0.42; }
.exercise-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.exercise-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; min-height: 154px; border: 3px solid #ebe4d4; border-radius: 28px; background: rgb(247, 243, 223); padding: 24px 28px; color: var(--animal-text-color); box-shadow: 0 4px 10px rgba(107, 92, 67, 0.2); transition: background-color var(--animal-motion), border-color var(--animal-motion), box-shadow var(--animal-motion), transform var(--animal-motion); }
.exercise-item:hover { border-color: var(--animal-primary-color); box-shadow: 0 6px 0 0 rgba(80, 185, 171, 0.28), 0 14px 22px rgba(61, 52, 40, 0.12); transform: translateY(-2px); }
.exercise-item.done { border-color: var(--animal-primary-color-active); background: #e1f8f5; box-shadow: 0 4px 0 0 rgba(80, 185, 171, 0.36), 0 12px 20px rgba(61, 52, 40, 0.08); }
.check-button { position: relative; display: grid; width: 56px; height: 56px; min-width: 56px; min-height: 56px; place-items: center; border-radius: 18px; background: transparent; color: transparent; font-size: 0; line-height: 1; transition: transform var(--animal-motion); }
.check-button::before { position: absolute; width: 40px; height: 40px; border: 3px solid var(--animal-input-border); border-radius: 14px; background: var(--animal-bg-content); box-shadow: inset 0 -2px 0 rgba(122, 91, 52, 0.08); content: ""; transition: all var(--animal-motion); }
.check-button:hover::before { border-color: var(--animal-primary-color); transform: translateY(-1px); }
.check-button:focus-visible::before { outline: 2px solid var(--animal-focus-yellow); outline-offset: 2px; }
.exercise-item.done .check-button::before { border-color: var(--animal-primary-color-active); background: var(--animal-primary-color); box-shadow: 0 3px 0 0 var(--animal-primary-color-active); }
.exercise-item.done .check-button::after { position: absolute; width: 18px; height: 11px; border-bottom: 4px solid #fff; border-left: 4px solid #fff; content: ""; transform: translateY(-3px) rotate(-45deg); }
.check-button:not(:empty) { animation: animal-checkbox-pop var(--animal-motion-fast) cubic-bezier(0.4, 0, 0.2, 1); }
.exercise-copy { display: grid; min-width: 0; gap: 8px; }
.exercise-title-row { display: block; min-width: 0; color: var(--animal-text-color); }
.exercise-name { display: block; min-width: 0; color: var(--animal-text-color); font-size: 27px; font-weight: 900; line-height: 1.08; overflow-wrap: anywhere; }
.exercise-detail { display: inline-block; width: fit-content; max-width: 100%; margin-top: 0; border: 2px solid rgba(212, 201, 180, 0.72); border-radius: 18px; background: rgba(255, 253, 245, 0.82); color: #5f3b1e; padding: 8px 13px 9px; box-shadow: inset 0 -2px 0 rgba(122, 91, 52, 0.08); font-size: 21px; font-weight: 900; line-height: 1.24; overflow-wrap: anywhere; }
.exercise-note { display: block; color: #7f735f; font-size: 16px; font-weight: 800; line-height: 1.35; }
.exercise-item.done .exercise-detail { border-color: rgba(80, 185, 171, 0.42); background: rgba(255, 253, 245, 0.92); }
.small-button,
.complete-button { display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: var(--animal-radius-pill); font-family: var(--animal-font-family); font-weight: 600; letter-spacing: 0.02em; line-height: 1; transition: all var(--animal-motion); user-select: none; white-space: nowrap; }
.small-button { height: 32px; min-height: 32px; padding: 0 16px; border-color: var(--animal-border-color); border-radius: var(--animal-radius-sm); background: var(--animal-bg-color); color: var(--animal-text-color); font-size: var(--caption); box-shadow: 0 2px 4px 0 rgba(61, 52, 40, 0.06); }
.small-button:hover { border-color: var(--animal-primary-color); color: var(--animal-primary-color); box-shadow: 0 3px 10px 0 rgba(61, 52, 40, 0.1); transform: translateY(-1px); }
.small-button:active { border-color: var(--animal-primary-color-active); color: var(--animal-primary-color-active); transform: translateY(0); }
.small-button.primary { border-color: var(--animal-focus-yellow); background: var(--animal-focus-yellow); color: var(--animal-text-color-body); }
.small-button.danger { border-color: var(--animal-error-color); background: var(--animal-error-color); color: #fff; box-shadow: 0 5px 0 0 var(--animal-error-color-active); }
.small-button.ghost { background: transparent; box-shadow: none; }
.top-copy-button { position: absolute; top: 18px; right: max(18px, calc((100vw - 720px) / 2 + 18px)); z-index: 2; min-width: 64px; max-width: 72px; height: 34px; min-height: 34px; padding: 0 14px; overflow: hidden; border-color: #d4c9b4; border-radius: var(--animal-radius-pill); background: #fffdf5; color: var(--animal-text-color); font-size: 13px; box-shadow: 0 4px 0 0 var(--animal-shadow-btn); }
.complete-strip { position: relative; margin-top: var(--animal-stack-gap-raised); border: 3px solid #fff9e6; border-radius: var(--animal-radius-surface); background: linear-gradient(180deg, #f7cd67 0%, #f5c31c 100%); padding: var(--animal-inset-gap); box-shadow: 0 8px 0 0 #dba90e, 0 16px 22px rgba(61, 52, 40, 0.16); text-align: center; overflow: hidden; }
.complete-strip::before,
.complete-strip::after { position: absolute; border-radius: 50%; background: rgba(255, 253, 245, 0.28); content: ""; pointer-events: none; }
.complete-strip::before { top: -26px; left: 28px; width: 82px; height: 82px; }
.complete-strip::after { right: -24px; bottom: -30px; width: 108px; height: 108px; }
.complete-button { position: relative; z-index: 1; width: 100%; height: 64px; min-height: 64px; padding: 0 32px; border: 4px solid #fffdf5; border-radius: var(--animal-radius-pill); background: #fffdf5; color: var(--animal-text-color); font-size: 24px; font-weight: 900; box-shadow: 0 7px 0 0 var(--animal-shadow-btn); }
.complete-button:hover { border-color: #fffdf5; box-shadow: 0 8px 0 0 var(--animal-shadow-btn); transform: translateY(-1px); }
.complete-button:active { box-shadow: 0 2px 0 0 var(--animal-shadow-btn); transform: translateY(4px); }
.complete-button.done { border-color: #fffdf5; background: var(--animal-success-color); color: #fff; box-shadow: 0 4px 0 0 var(--animal-success-color-active); }
.review-card[hidden] { display: none; }
.review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.review-stats div { min-height: 72px; border: 2px solid var(--animal-border-color-light); border-radius: var(--animal-radius-base); background: var(--animal-bg-card-title); padding: 10px; }
.review-stats span { display: block; color: var(--animal-text-color); font-size: var(--display); font-weight: 900; line-height: 1; }
.review-stats small { color: var(--animal-text-color-muted); font-size: var(--caption); font-weight: 600; }
.review-table-wrap { position: relative; width: 100%; margin-top: var(--animal-stack-gap); overflow-x: auto; border-radius: var(--animal-radius-card); background: var(--animal-bg-content); padding: 6px; scrollbar-width: none; }
.review-table-wrap::-webkit-scrollbar { display: none; }
.review-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-family: var(--animal-font-family); }
.review-table thead { background: var(--animal-bg-content); }
.review-table tr { position: relative; transition: background var(--animal-motion), color var(--animal-motion); }
.review-table tr::after { position: absolute; right: 20px; bottom: 0; left: 20px; height: 1px; background: repeating-linear-gradient(90deg, var(--animal-bg-secondary) 0, var(--animal-bg-secondary) 6px, transparent 6px, transparent 12px); content: ""; }
.review-table tr:last-child::after { display: none; }
.review-table th { padding: 14px 20px; color: var(--animal-text-color-body); font-size: 14px; font-weight: 900; letter-spacing: 0.02em; line-height: 1.4; text-align: left; white-space: nowrap; }
.review-table td { padding: 14px 20px; color: var(--animal-text-color-body); font-size: 14px; font-weight: 700; line-height: 1.6; vertical-align: middle; }
.review-table tbody tr.striped { background: rgba(248, 248, 240, 0.6); }
.review-table tbody tr:hover { background-image: repeating-linear-gradient(-45deg, rgba(25, 200, 185, 0.42), rgba(25, 200, 185, 0.42) 10px, rgba(14, 196, 182, 0.42) 10px, rgba(14, 196, 182, 0.42) 20px); background-size: 28.28px 28.28px; clip-path: inset(0 0 0 0 round var(--animal-radius-card)); }
.review-table tbody tr:hover::after { opacity: 0; }
.review-item-cell { width: 76px; color: var(--animal-text-color-muted); white-space: nowrap; }
.review-value-cell { min-width: 150px; color: var(--animal-text-color); font-weight: 900; }
.review-note-cell { color: var(--animal-text-color-muted); }
.review-trail { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
.review-day-chip { display: inline-flex; min-height: 28px; align-items: center; justify-content: center; border: 2px solid var(--animal-border-color-light); border-radius: var(--animal-radius-pill); background: #fffdf5; color: var(--animal-text-color-muted); padding: 0 9px; box-shadow: 0 2px 0 0 #d4c9b4; font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap; }
.review-day-chip.done { border-color: var(--animal-primary-color-active); background: var(--animal-primary-color); color: #fff; box-shadow: 0 2px 0 0 var(--animal-primary-color-active); }
.review-day-chip.appeared { border-color: var(--animal-primary-color); background: var(--animal-primary-color-bg); color: var(--animal-text-color); }
.review-day-chip.missed { border-color: var(--animal-error-color); background: #fff0ea; color: var(--animal-error-color); }
.archive-card { position: relative; margin-top: var(--animal-stack-gap-raised); overflow: hidden; border: 3px solid #d8d0c3; border-radius: var(--animal-radius-surface); background: linear-gradient(180deg, #fffdf5 0%, var(--animal-bg-content) 100%); padding: 0; box-shadow: 0 6px 0 0 var(--animal-shadow-btn), 0 14px 22px rgba(61, 52, 40, 0.14); }
.archive-card::before { position: absolute; top: -26px; right: 76px; width: 76px; height: 76px; border-radius: 50%; background: rgba(25, 200, 185, 0.11); content: ""; pointer-events: none; }
.archive-card::after { position: absolute; right: 20px; bottom: -34px; width: 118px; height: 78px; border-radius: 50%; background: rgba(111, 186, 44, 0.12); content: ""; pointer-events: none; }
.archive-card:hover { transform: translateY(-2px); }
.archive-card[open] { border-color: var(--animal-primary-color); }
.archive-card summary { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 76px; align-items: center; gap: 12px; padding: 12px 18px; cursor: url("./assets/animal-island/cursor-icon-small.png") 4 0, pointer; list-style: none; }
.archive-card summary::-webkit-details-marker { display: none; }
.archive-summary-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
.archive-toggle-icon { position: relative; display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 50%; background: var(--animal-primary-color); color: #fff; box-shadow: 0 3px 0 0 var(--animal-primary-color-active); transition: background-color var(--animal-motion), box-shadow var(--animal-motion), transform var(--animal-motion); }
.archive-toggle-icon::before { color: currentColor; content: "+"; font-size: 22px; font-weight: 900; line-height: 1; transform: translateY(-1px); }
.archive-title-copy { display: grid; min-width: 0; gap: 2px; color: var(--animal-text-color); font-weight: 800; }
.archive-title-copy > span { overflow: hidden; font-size: 22px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.archive-title-copy small { color: var(--animal-text-color-secondary); font-size: var(--caption); font-weight: 700; letter-spacing: 0.02em; }
.archive-leaf { display: grid; width: 30px; height: 30px; place-items: center; color: var(--animal-primary-color); opacity: 0.55; transition: opacity var(--animal-motion), transform var(--animal-motion); }
.archive-card[open] .archive-toggle-icon { background: var(--animal-primary-color-active); box-shadow: 0 2px 0 0 #3f8f18; transform: rotate(180deg); }
.archive-card[open] .archive-toggle-icon::before { content: "-"; transform: translateY(-2px); }
.archive-card[open] .archive-leaf { opacity: 1; transform: rotate(45deg); }
.archive-panel { position: relative; z-index: 1; padding-bottom: 18px; }
.archive-divider { height: 12px; margin: 0 18px 14px; background: url("./assets/animal-island/divider-line-brown.svg") center / contain repeat-x; opacity: 0.78; }
.calendar-grid { display: flex; gap: 8px; overflow-x: auto; padding: 0 18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.calendar-grid::-webkit-scrollbar { display: none; }
.calendar-day { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 2px solid var(--animal-border-color-light); border-radius: var(--animal-radius-base); background: var(--animal-bg-content); color: var(--animal-text-color-muted); font-size: var(--caption); font-weight: 700; scroll-snap-align: center; transition: all var(--animal-motion); }
.calendar-day.selected { border-color: #0cc0b5; background: #0cc0b5; color: #fff9e3; }
.calendar-day.done { border-color: var(--animal-primary-color-active); background: var(--animal-primary-color-bg); color: var(--animal-text-color-body); }
.calendar-day.late { border-color: var(--animal-error-color); background: #fff0ea; color: var(--animal-error-color); }
.field-label { display: grid; gap: 6px; margin-top: 14px; color: var(--animal-text-color-body); font-size: var(--caption); font-weight: 600; letter-spacing: 0.01em; }
.field-label textarea { width: 100%; min-height: 96px; resize: vertical; border: 2.5px solid var(--animal-input-border); border-radius: var(--animal-radius-lg); background: var(--animal-bg-content); color: var(--animal-text-color-body); padding: 12px 16px; box-shadow: 0 3px 0 0 var(--animal-shadow-input); font: 500 var(--body) / 1.5 var(--animal-font-family); letter-spacing: 0.01em; transition: all var(--animal-motion); }
.field-label textarea:focus { border-color: var(--animal-focus-yellow); box-shadow: 0 3px 0 0 var(--animal-focus-yellow-dark), 0 0 0 3px rgba(255, 204, 0, 0.15); outline: none; }
.danger-link { min-height: 38px; margin-top: 12px; background: transparent; color: var(--animal-error-color); font-size: var(--caption); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.floating-nav { position: fixed; right: 14px; bottom: 14px; left: 14px; z-index: 25; display: grid; grid-template-columns: 58px 74px 58px; justify-content: center; align-items: center; gap: 16px; width: min(calc(100% - 28px), 360px); height: 82px; margin: 0 auto; border: 3px solid #d8d0c3; border-radius: 999px; background: rgba(248, 248, 240, 0.96); padding: 8px 16px 12px; box-shadow: 0 7px 0 0 var(--animal-shadow-btn), 0 14px 22px rgba(61, 52, 40, 0.14); backdrop-filter: blur(14px); }
.floating-nav button { display: grid; width: 58px; height: 52px; min-width: 58px; min-height: 52px; place-items: center; justify-self: center; border: 2px solid #d4c9b4; border-radius: 50px; background: #fffdf5; color: var(--animal-text-color); font-size: 32px; font-weight: 900; line-height: 1; box-shadow: 0 5px 0 0 var(--animal-shadow-btn); transition: all var(--animal-motion); }
.floating-nav button:not(.nav-fab) { position: relative; top: -4px; }
.floating-nav button:hover { border-color: var(--animal-primary-color); background: #fffef8; color: var(--animal-primary-color); box-shadow: 0 6px 0 0 var(--animal-shadow-btn); transform: translateY(-1px); }
.floating-nav button:active { box-shadow: 0 1px 0 0 var(--animal-shadow-btn); transform: translateY(2px); }
.floating-nav .nav-fab { width: 72px; height: 66px; min-width: 72px; min-height: 66px; border: 4px solid #fffdf5; background: var(--animal-focus-yellow); color: var(--animal-text-color-body); font-size: 34px; box-shadow: 0 6px 0 0 var(--animal-focus-yellow-dark), 0 0 0 2px #d4c9b4; }
.floating-nav .nav-fab:hover { border-color: #fffdf5; background: #ffd63a; color: var(--animal-text-color-body); box-shadow: 0 7px 0 0 var(--animal-focus-yellow-dark), 0 0 0 2px var(--animal-primary-color); }
.floating-nav .nav-fab:active { box-shadow: 0 1px 0 0 var(--animal-focus-yellow-dark), 0 0 0 2px #d4c9b4; transform: translateY(3px); }
.toast { position: fixed; right: 18px; bottom: 104px; left: 18px; z-index: 35; display: grid; min-height: 48px; max-width: 460px; place-items: center; margin: 0 auto; border: 2px solid var(--animal-border-color); border-radius: 50px; background: var(--animal-bg-color); color: var(--animal-text-color); padding: 10px 18px; box-shadow: 0 5px 0 0 var(--animal-shadow-btn); font-size: var(--caption); font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity var(--animal-motion), transform var(--animal-motion); }
.toast.show { opacity: 1; transform: translateY(0); }
.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); padding: 20px; animation: animal-fade-in 0.25s ease; }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: min(100%, 520px); max-height: calc(100vh - 64px); clip-path: url("#animal-modal-clip"); border: 0; border-radius: 0; background: var(--animal-bg-content); color: var(--animal-text-color-muted); padding: 48px 48px 32px; box-shadow: none; animation: animal-zoom-in 0.3s ease; overflow: auto; }
.modal-card h2 { color: var(--animal-text-color-body); font-size: 28px; font-weight: 700; }
.complete-modal-card { position: relative; display: grid; justify-items: center; padding: 46px 44px 34px; text-align: center; }
.complete-modal-card h2 { margin-top: 18px; color: var(--animal-text-color); font-size: 32px; font-weight: 900; line-height: 1.1; }
.stamp-mark { display: grid; width: 104px; height: 104px; place-items: center; border: 4px solid var(--animal-primary-color); border-radius: 30px; background: var(--animal-primary-color); color: #fff; font-size: 30px; font-weight: 900; box-shadow: 0 8px 0 0 var(--animal-success-color-active); transform: rotate(-3deg); animation: reward-pop 360ms cubic-bezier(0.2, 1.2, 0.3, 1); }
.reward-button { display: inline-flex; width: min(100%, 360px); height: 64px; min-height: 64px; align-items: center; justify-content: center; border: 2px solid var(--animal-focus-yellow); border-radius: 50px; background: var(--animal-focus-yellow); color: var(--animal-text-color-body); padding: 0 32px; box-shadow: 0 5px 0 0 var(--animal-shadow-btn); font-family: var(--animal-font-family); font-size: 20px; font-weight: 900; letter-spacing: 0.02em; line-height: 1; transition: all var(--animal-motion); user-select: none; white-space: nowrap; }
.reward-button:hover { border-color: var(--animal-focus-yellow); background: #ffd633; box-shadow: 0 6px 0 0 var(--animal-shadow-btn); transform: translateY(-1px); }
.reward-button:active { box-shadow: 0 1px 0 0 var(--animal-shadow-btn); transform: translateY(2px); }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.modal-actions.single { width: 100%; grid-template-columns: minmax(180px, 360px); justify-content: center; margin-top: 24px; }
.animal-footer-sea { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; height: 80px; background: url("./assets/animal-island/footer-sea.svg") left bottom / auto 80px repeat-x; opacity: 0.92; pointer-events: none; }
.load-error { border: 1px solid var(--animal-error-color); border-radius: var(--animal-radius-base); background: #fff0ea; padding: 16px; color: var(--animal-error-color); font-weight: 700; }
@keyframes animal-checkbox-pop { 0% { opacity: 0; transform: scale(0.4); }
  60% { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); } }

@keyframes animal-fade-in { from { opacity: 0; }
  to { opacity: 1; } }

@keyframes animal-zoom-in { from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); } }
@keyframes reward-pop { 0% { opacity: 0; transform: rotate(-3deg) scale(0.58); }
  70% { opacity: 1; transform: rotate(-3deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes island-bg-scroll { from { background-position: center 0; }
  to { background-position: center 1120px; } }
@keyframes type-caret { 50% { opacity: 0; } }
@keyframes island-loading-bob { 0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-8px); } }
@keyframes island-loading-sweep { 0% { transform: translateX(-82%); }
  50% { transform: translateX(56%); }
  100% { transform: translateX(132%); } }

@media (prefers-reduced-motion: reduce) { *,
  *::before,
  *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }

@media (min-width: 720px) { .app-shell { padding: 28px 20px 142px; } }

@media (max-width: 520px) { .modal-card { padding: 42px 28px 30px; }
  .modal-card h2 { font-size: 24px; } }

@media (max-width: 600px) { :root { --display: 34px; --animal-stack-gap: 12px; --animal-stack-gap-raised: 18px; --animal-surface-pad-x: 16px; --animal-surface-pad-y: 16px; --animal-inset-gap: 12px; --animal-radius-card: 24px; --animal-radius-surface: 28px; }
  .app-shell { padding-right: 12px; padding-left: 12px; }
  .topbar { margin-bottom: 8px; }
  .hero-stage { width: calc(100% - 56px); }
  .topbar h1 { max-width: 4.35em; }
  .topbar .body-copy { width: min(62vw, 280px); }
  .hero-animal { top: 92px; width: min(26vw, 112px); height: 82px; }
  .hero-progress { width: calc(100% - 56px); min-width: 0; }
  .top-copy-button { right: 18px; min-width: 62px; max-width: 68px; padding: 0 12px; }
  .route-card,
  .complete-strip,
  .review-card { margin-top: var(--animal-stack-gap); padding: var(--animal-surface-pad-y) var(--animal-surface-pad-x); }
  .today-card { padding: 0; }
  .today-card .section-head { min-height: 104px; padding: 16px 18px 24px; }
  .today-card .section-head h2 { font-size: 26px; }
  .today-card .section-head > div > .caption { font-size: 13px; }
  .section-head > .caption.strong { min-width: 62px; min-height: 36px; padding: 0 11px; font-size: 16px; }
  .today-card .section-head::after { right: 24px; left: 24px; }
  .review-stats { gap: 6px; }
  .review-stats div { min-height: 62px; padding: 8px; }
  .review-table { min-width: 480px; }
  .review-table th,
  .review-table td { padding: 12px 14px; }
  .review-value-cell { min-width: 130px; }
  .exercise-list { gap: 12px; }
  .exercise-item { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; min-height: 136px; border-width: 3px; border-radius: 24px; padding: 20px 18px; }
  .check-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .check-button::before { width: 34px; height: 34px; border-radius: 12px; }
  .exercise-item.done .check-button::after { width: 16px; height: 10px; }
  .exercise-copy { gap: 7px; }
  .exercise-name { font-size: 23px; }
  .exercise-detail { border-radius: 16px; padding: 7px 10px 8px; font-size: 18px; }
  .exercise-note { font-size: 15px; }
  .week-route { gap: 5px; }
  .route-node { height: 66px; border-radius: 18px; padding: 6px 2px; }
  .route-node span { width: 26px; height: 26px; font-size: 12px; }
  .complete-strip { margin-top: var(--animal-stack-gap-raised); padding: var(--animal-inset-gap); }
  .complete-button { height: 58px; min-height: 58px; font-size: 21px; } }