上传文件至「/」

app.js

@@ -0,0 +1,177 @@
+const meals = [
+  { name: "番茄牛腩饭", icon: "🍅", flavor: "rich", budget: "mid", group: true, note: "酸甜开胃 · 热乎下饭" },
+  { name: "麻辣香锅", icon: "🌶️", flavor: "spicy", budget: "mid", group: true, note: "自由搭配 · 快乐翻倍" },
+  { name: "鸡丝凉面", icon: "🍜", flavor: "fresh", budget: "low", group: false, note: "清爽不腻 · 午后轻盈" },
+  { name: "海南鸡饭", icon: "🍗", flavor: "light", budget: "mid", group: false, note: "鲜嫩咸香 · 稳稳满足" },
+  { name: "寿喜烧", icon: "🍲", flavor: "rich", budget: "high", group: true, note: "甜咸浓郁 · 犒劳一下" },
+  { name: "酸菜鱼", icon: "🐟", flavor: "spicy", budget: "high", group: true, note: "酸辣鲜香 · 超级下饭" },
+  { name: "牛肉粉", icon: "🥣", flavor: "spicy", budget: "low", group: false, note: "暖胃满足 · 快速回血" },
+  { name: "轻食沙拉", icon: "🥗", flavor: "light", budget: "mid", group: false, note: "清新脆爽 · 没有负担" },
+  { name: "咖喱猪排饭", icon: "🍛", flavor: "rich", budget: "mid", group: false, note: "酥脆浓香 · 能量满格" },
+  { name: "小笼包", icon: "🥟", flavor: "light", budget: "low", group: true, note: "一口爆汁 · 简单满足" },
+  { name: "韩式烤肉", icon: "🥩", flavor: "rich", budget: "high", group: true, note: "焦香多汁 · 适合聚餐" },
+  { name: "重庆小面", icon: "🍜", flavor: "spicy", budget: "low", group: false, note: "麻辣带劲 · 唤醒味蕾" },
+  { name: "日式拉面", icon: "🍥", flavor: "rich", budget: "mid", group: false, note: "汤浓面弹 · 暖心满足" },
+  { name: "广式烧腊饭", icon: "🍖", flavor: "rich", budget: "mid", group: false, note: "蜜香油润 · 经典不出错" },
+  { name: "云南米线", icon: "🍜", flavor: "fresh", budget: "low", group: false, note: "鲜香顺滑 · 嗦粉快乐" },
+  { name: "泰式冬阴功", icon: "🦐", flavor: "spicy", budget: "high", group: true, note: "酸辣醒胃 · 南洋风味" },
+  { name: "椰子鸡火锅", icon: "🥥", flavor: "light", budget: "high", group: true, note: "清甜鲜嫩 · 聚餐友好" },
+  { name: "东北铁锅炖", icon: "🍲", flavor: "rich", budget: "high", group: true, note: "热气腾腾 · 越吃越香" },
+  { name: "披萨拼盘", icon: "🍕", flavor: "rich", budget: "mid", group: true, note: "口味任选 · 分享方便" },
+  { name: "潮汕牛肉火锅", icon: "🥩", flavor: "fresh", budget: "high", group: true, note: "鲜切现涮 · 团队人气王" },
+  { name: "越南牛肉河粉", icon: "🌿", flavor: "fresh", budget: "mid", group: false, note: "清鲜有层次 · 舒服耐吃" },
+  { name: "菌菇焖饭", icon: "🍄", flavor: "light", budget: "low", group: false, note: "菌香温润 · 素食也满足" },
+  { name: "新疆大盘鸡", icon: "🍗", flavor: "spicy", budget: "high", group: true, note: "香辣量足 · 多人更合适" },
+  { name: "粤式点心", icon: "🫖", flavor: "light", budget: "mid", group: true, note: "多款分享 · 慢慢吃聊" }
+];
+
+const KEYS = {
+  favorites: "whats2eat-favorites",
+  history: "whats2eat-history"
+};
+
+const state = { flavor: "all", budget: "all", mode: "solo", current: null, activeList: "favorites" };
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+const readStore = (key) => JSON.parse(localStorage.getItem(key) || "[]");
+const writeStore = (key, value) => localStorage.setItem(key, JSON.stringify(value));
+const mealByName = (name) => meals.find((meal) => meal.name === name);
+
+function bindExclusiveButtons(selector, stateKey, onChange) {
+  $$(selector).forEach((button) => {
+    button.addEventListener("click", () => {
+      $$(selector).forEach((item) => {
+        item.classList.remove("active");
+        item.setAttribute("aria-pressed", "false");
+      });
+      button.classList.add("active");
+      button.setAttribute("aria-pressed", "true");
+      state[stateKey] = button.dataset.value || button.dataset.mode;
+      if (onChange) onChange();
+    });
+  });
+}
+
+function setModeCopy() {
+  const isTeam = state.mode === "team";
+  $("#heroSubtitle").textContent = isTeam
+    ? "少数服从运气，找一个大家都愿意去的答案。"
+    : "一个人的午饭，也值得认真决定。";
+  $("#modeBadge").textContent = isTeam ? "同事聚餐推荐" : "一人食推荐";
+  $("#status").textContent = isTeam ? "聚餐模式会优先推荐适合分享的选择。" : "一人食模式会优先推荐方便又满足的选择。";
+}
+
+function filteredMeals() {
+  let pool = meals.filter((meal) =>
+    (state.flavor === "all" || meal.flavor === state.flavor) &&
+    (state.budget === "all" || meal.budget === state.budget) &&
+    (state.mode !== "team" || meal.group)
+  );
+  if (pool.length > 1 && state.current) pool = pool.filter((meal) => meal.name !== state.current.name);
+  return pool;
+}
+
+function pickMeal() {
+  const pool = filteredMeals();
+  if (!pool.length) {
+    $("#status").textContent = "这个组合暂时没有合适选项，试试放宽一个条件吧。";
+    return;
+  }
+  const meal = pool[Math.floor(Math.random() * pool.length)];
+  const card = $("#resultCard");
+  card.classList.remove("shuffling");
+  void card.offsetWidth;
+  card.classList.add("shuffling");
+  setTimeout(() => showResult(meal, true), 260);
+}
+
+function showResult(meal, addToHistory) {
+  state.current = meal;
+  $("#resultIcon").textContent = meal.icon;
+  $("#resultKicker").textContent = state.mode === "team" ? "大家今天就吃" : "今天就吃";
+  $("#resultName").textContent = meal.name;
+  $("#resultMeta").textContent = meal.note;
+  $("#status").textContent = `答案是「${meal.name}」，不要再纠结啦！`;
+  updateSaveButton(readStore(KEYS.favorites).includes(meal.name));
+  if (addToHistory) {
+    const history = readStore(KEYS.history).filter((name) => name !== meal.name);
+    history.unshift(meal.name);
+    writeStore(KEYS.history, history.slice(0, 12));
+    if (state.activeList === "history") renderList();
+  }
+}
+
+function updateSaveButton(saved) {
+  $("#saveBtn").classList.toggle("saved", saved);
+  $("#saveBtn").setAttribute("aria-pressed", String(saved));
+  $("#saveBtn").textContent = saved ? "♥ 已收藏" : "♡ 收藏";
+}
+
+function toggleFavorite() {
+  if (!state.current) {
+    $("#status").textContent = "先抽一个午饭答案，再收藏它吧。";
+    return;
+  }
+  const favorites = readStore(KEYS.favorites);
+  const index = favorites.indexOf(state.current.name);
+  if (index >= 0) favorites.splice(index, 1);
+  else favorites.unshift(state.current.name);
+  writeStore(KEYS.favorites, favorites);
+  updateSaveButton(index < 0);
+  renderList();
+}
+
+function renderList() {
+  const names = readStore(KEYS[state.activeList]);
+  $("#favoriteCount").textContent = readStore(KEYS.favorites).length;
+  $("#clearHistory").hidden = state.activeList !== "history" || names.length === 0;
+  $("#mealList").innerHTML = names.length
+    ? names.map((name) => {
+        const meal = mealByName(name);
+        if (!meal) return "";
+        const action = state.activeList === "favorites"
+          ? `<button class="remove-item" data-remove="${meal.name}" aria-label="取消收藏 ${meal.name}">×</button>`
+          : "";
+        return `<article class="meal-item">
+          <span class="meal-item-icon" aria-hidden="true">${meal.icon}</span>
+          <span><strong>${meal.name}</strong><small>${meal.note}</small></span>
+          ${action}
+        </article>`;
+      }).join("")
+    : `<div class="empty">${state.activeList === "favorites" ? "还没有收藏，遇到心动午饭就点一下 ♡" : "还没有抽取记录，今天的第一顿会是什么？"}</div>`;
+
+  $$("[data-remove]").forEach((button) => {
+    button.addEventListener("click", () => {
+      writeStore(KEYS.favorites, readStore(KEYS.favorites).filter((name) => name !== button.dataset.remove));
+      if (state.current?.name === button.dataset.remove) updateSaveButton(false);
+      renderList();
+    });
+  });
+}
+
+function switchList(listName, shouldScroll = false) {
+  state.activeList = listName;
+  $$(".tab").forEach((tab) => {
+    const active = tab.dataset.list === listName;
+    tab.classList.toggle("active", active);
+    tab.setAttribute("aria-selected", String(active));
+  });
+  renderList();
+  if (shouldScroll) $(".collection").scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+bindExclusiveButtons("#flavorChips .chip", "flavor", () => $("#status").textContent = "口味收到，随时可以开奖。");
+bindExclusiveButtons("#budgetChips .chip", "budget", () => $("#status").textContent = "预算收到，随时可以开奖。");
+bindExclusiveButtons(".mode", "mode", setModeCopy);
+$("#decideBtn").addEventListener("click", pickMeal);
+$("#againBtn").addEventListener("click", pickMeal);
+$("#saveBtn").addEventListener("click", toggleFavorite);
+$$(".tab").forEach((tab) => tab.addEventListener("click", () => switchList(tab.dataset.list)));
+$$("[data-open-list]").forEach((button) => button.addEventListener("click", () => switchList(button.dataset.openList, true)));
+$("#clearHistory").addEventListener("click", () => {
+  writeStore(KEYS.history, []);
+  renderList();
+});
+
+setModeCopy();
+renderList();

index.html

@@ -0,0 +1,102 @@
+<!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="#ffd84d">
+  <title>whats2eat — 今天中午吃什么？</title>
+  <meta name="description" content="一个人或和同事，三秒决定今天中午吃什么。">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="page">
+    <header>
+      <a class="logo" href="#" aria-label="whats2eat 首页">
+        <span class="logo-mark" aria-hidden="true">🍳</span>
+        <span>whats2eat</span>
+      </a>
+      <nav class="header-actions" aria-label="个人菜单">
+        <button class="text-button" data-open-list="favorites">♡ 收藏 <span id="favoriteCount">0</span></button>
+        <button class="text-button" data-open-list="history">↺ 历史</button>
+      </nav>
+    </header>
+
+    <main>
+      <section class="hero" aria-labelledby="hero-title">
+        <span class="eyebrow">今天也要好好吃饭</span>
+        <h1 id="hero-title">中午<br>吃什么？</h1>
+        <p class="subtitle" id="heroSubtitle">一个人的午饭，也值得认真决定。</p>
+
+        <div class="mode-switch" role="group" aria-label="用餐模式">
+          <button class="mode active" data-mode="solo" aria-pressed="true">
+            <span aria-hidden="true">🙋</span>
+            <span><strong>一个人吃</strong><small>简单、快速、不踩雷</small></span>
+          </button>
+          <button class="mode" data-mode="team" aria-pressed="false">
+            <span aria-hidden="true">👥</span>
+            <span><strong>和同事吃</strong><small>适合分享、大家都开心</small></span>
+          </button>
+        </div>
+
+        <button class="decide" id="decideBtn">帮我决定 ↗</button>
+        <p class="status" id="status" aria-live="polite">选好偏好，点一下就有答案。</p>
+        <div class="doodle" aria-hidden="true"></div>
+      </section>
+
+      <aside class="panel" aria-label="午餐偏好与推荐结果">
+        <section class="card filters">
+          <div class="filter-block">
+            <h2>① 今天想吃什么味？</h2>
+            <div class="chips" id="flavorChips">
+              <button class="chip active" data-value="all" aria-pressed="true">都可以</button>
+              <button class="chip" data-value="light" aria-pressed="false">清淡</button>
+              <button class="chip" data-value="spicy" aria-pressed="false">香辣</button>
+              <button class="chip" data-value="rich" aria-pressed="false">浓郁</button>
+              <button class="chip" data-value="fresh" aria-pressed="false">鲜爽</button>
+            </div>
+          </div>
+          <div class="filter-block">
+            <h2>② 今天准备花多少？</h2>
+            <div class="chips" id="budgetChips">
+              <button class="chip active" data-value="all" aria-pressed="true">随缘</button>
+              <button class="chip" data-value="low" aria-pressed="false">¥ 省点</button>
+              <button class="chip" data-value="mid" aria-pressed="false">¥¥ 日常</button>
+              <button class="chip" data-value="high" aria-pressed="false">¥¥¥ 犒劳</button>
+            </div>
+          </div>
+        </section>
+
+        <section class="card result" id="resultCard" aria-live="polite">
+          <span class="mode-badge" id="modeBadge">一人食推荐</span>
+          <div class="result-icon" id="resultIcon">🥢</div>
+          <p class="result-kicker" id="resultKicker">今日候选</p>
+          <h2 class="result-name" id="resultName">等待开奖</h2>
+          <p class="result-meta" id="resultMeta">选好偏好，然后交给我</p>
+          <div class="result-actions">
+            <button class="small-btn" id="againBtn">↻ 再来一次</button>
+            <button class="small-btn" id="saveBtn" aria-pressed="false">♡ 收藏</button>
+          </div>
+        </section>
+      </aside>
+    </main>
+
+    <section class="collection card" aria-labelledby="collectionTitle">
+      <div class="collection-head">
+        <div>
+          <p class="section-kicker">MY LUNCH LOG</p>
+          <h2 id="collectionTitle">我的午饭口袋</h2>
+        </div>
+        <div class="tabs" role="tablist">
+          <button class="tab active" role="tab" data-list="favorites" aria-selected="true">我的收藏</button>
+          <button class="tab" role="tab" data-list="history" aria-selected="false">最近历史</button>
+        </div>
+      </div>
+      <div class="meal-list" id="mealList"></div>
+      <button class="clear-button" id="clearHistory" hidden>清空历史</button>
+    </section>
+
+    <footer><span>whats2eat © 2026</span><span>认真吃饭，是每天最小的幸福。</span></footer>
+  </div>
+  <script src="app.js"></script>
+</body>
+</html>

styles.css

@@ -0,0 +1,120 @@
+:root {
+  --ink: #202020;
+  --muted: #6d6a62;
+  --paper: #fffdf6;
+  --yellow: #ffd84d;
+  --green: #bce8b2;
+  --pink: #ffc4d5;
+  --blue: #bfe2ff;
+  --line: #202020;
+  --shadow: 5px 5px 0 var(--line);
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 10% 8%, rgba(255,216,77,.42) 0 7%, transparent 7.2%),
+    radial-gradient(circle at 90% 70%, rgba(188,232,178,.42) 0 8%, transparent 8.2%),
+    var(--paper);
+  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+button { font: inherit; color: inherit; }
+button:focus-visible, a:focus-visible { outline: 3px solid #5c56ff; outline-offset: 3px; }
+.page { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 34px; }
+
+header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
+.logo { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 22px; font-weight: 900; letter-spacing: -.04em; }
+.logo-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 2px solid var(--line); border-radius: 50% 50% 46% 54%; background: var(--yellow); transform: rotate(-6deg); box-shadow: 2px 2px 0 var(--line); }
+.header-actions { display: flex; gap: 10px; }
+.text-button { padding: 8px 11px; border: 0; background: transparent; font-weight: 750; cursor: pointer; }
+.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
+
+main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 28px; align-items: stretch; }
+.hero { position: relative; min-height: 640px; padding: clamp(28px, 5vw, 58px); overflow: hidden; border: 2px solid var(--line); border-radius: 34px; background: var(--yellow); box-shadow: var(--shadow); }
+.eyebrow { display: inline-block; padding: 7px 12px; border: 2px solid var(--line); border-radius: 999px; background: #fff; font-weight: 800; font-size: 13px; transform: rotate(-2deg); }
+h1 { max-width: 580px; margin: 23px 0 12px; font-size: clamp(48px, 8vw, 88px); line-height: .94; letter-spacing: -.07em; }
+.subtitle { max-width: 460px; margin: 0 0 24px; font-size: clamp(16px, 2vw, 19px); line-height: 1.65; }
+
+.mode-switch { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 470px; margin-bottom: 24px; }
+.mode { display: flex; align-items: center; gap: 10px; padding: 12px; border: 2px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.7); text-align: left; cursor: pointer; transition: transform .15s, background .15s; }
+.mode:hover { transform: translateY(-2px); }
+.mode.active { background: #fff; box-shadow: 3px 3px 0 var(--line); }
+.mode > span:first-child { font-size: 25px; }
+.mode strong, .mode small { display: block; }
+.mode small { margin-top: 2px; color: var(--muted); font-size: 11px; }
+
+.decide { position: relative; z-index: 2; min-width: 190px; padding: 16px 24px; border: 2px solid var(--line); border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 4px 4px 0 rgba(255,255,255,.78); font-size: 18px; font-weight: 900; cursor: pointer; transition: transform .15s, box-shadow .15s; }
+.decide:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 rgba(255,255,255,.8); }
+.decide:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 rgba(255,255,255,.8); }
+.status { position: relative; z-index: 2; min-height: 20px; margin: 16px 0 0; font-size: 13px; font-weight: 700; }
+.doodle { position: absolute; right: 25px; bottom: 22px; width: clamp(125px, 27%, 190px); aspect-ratio: 1; border: 3px solid var(--line); border-radius: 50%; background: #fff9e3; box-shadow: inset 0 0 0 14px #fff; transform: rotate(8deg); }
+.doodle::before, .doodle::after { content: ""; position: absolute; border-radius: 50%; background: var(--pink); }
+.doodle::before { width: 44%; height: 27%; left: 20%; top: 30%; transform: rotate(-14deg); }
+.doodle::after { width: 23%; height: 20%; right: 14%; bottom: 21%; background: var(--green); }
+
+.panel { display: flex; flex-direction: column; gap: 18px; }
+.card { padding: 24px; border: 2px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 4px 4px 0 var(--line); }
+.card h2 { margin: 0 0 16px; font-size: 17px; }
+.filters { display: grid; gap: 21px; }
+.filter-block + .filter-block { padding-top: 20px; border-top: 1.5px dashed #aaa59a; }
+.chips { display: flex; flex-wrap: wrap; gap: 9px; }
+.chip { padding: 9px 13px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; transition: background .15s, transform .15s; }
+.chip:hover { transform: translateY(-2px); }
+.chip.active { background: var(--green); font-weight: 800; box-shadow: 2px 2px 0 var(--line); }
+
+.result { position: relative; flex: 1; display: grid; align-content: center; min-height: 300px; background: #fff6f9; text-align: center; }
+.mode-badge { position: absolute; top: 16px; right: 16px; padding: 6px 9px; border-radius: 999px; background: var(--blue); font-size: 11px; font-weight: 800; }
+.result-icon { font-size: 58px; line-height: 1; }
+.result-kicker { margin: 14px 0 5px; color: var(--muted); font-size: 13px; font-weight: 700; }
+.result-name { margin: 0 !important; font-size: clamp(30px, 5vw, 44px) !important; letter-spacing: -.05em; }
+.result-meta { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
+.result-actions { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
+.small-btn { padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; font-weight: 700; }
+.small-btn.saved { background: var(--pink); }
+.shuffling { animation: shuffle .55s ease both; }
+@keyframes shuffle { 0% { transform: rotate(0) scale(1); opacity: 1; } 35% { transform: rotate(-4deg) scale(.88); opacity: .25; } 70% { transform: rotate(3deg) scale(1.04); } 100% { transform: rotate(0) scale(1); opacity: 1; } }
+
+.collection { margin-top: 30px; }
+.collection-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
+.section-kicker { margin: 0 0 5px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
+.collection-head h2 { margin: 0; font-size: 27px; }
+.tabs { display: flex; padding: 4px; border: 1.5px solid var(--line); border-radius: 13px; background: #f5f1e8; }
+.tab { padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 750; }
+.tab.active { background: #fff; box-shadow: 1px 1px 0 var(--line); }
+.meal-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
+.meal-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-width: 0; padding: 13px; border: 1.5px solid var(--line); border-radius: 15px; background: var(--paper); }
+.meal-item-icon { font-size: 25px; }
+.meal-item strong, .meal-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.meal-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
+.remove-item { width: 25px; height: 25px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
+.remove-item:hover { background: var(--pink); }
+.empty { grid-column: 1 / -1; padding: 28px; border: 1.5px dashed #aaa59a; border-radius: 15px; color: var(--muted); text-align: center; }
+.clear-button { margin-top: 14px; padding: 6px 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 28px; color: var(--muted); font-size: 13px; }
+
+@media (max-width: 850px) {
+  main { grid-template-columns: 1fr; }
+  .hero { min-height: 580px; }
+  .meal-list { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 560px) {
+  .page { width: min(100% - 22px, 620px); padding-top: 14px; }
+  header { margin-bottom: 18px; }
+  .text-button { padding-inline: 5px; font-size: 13px; }
+  .hero { min-height: 610px; padding: 28px 22px; border-radius: 26px; }
+  .mode-switch { grid-template-columns: 1fr; }
+  .doodle { right: 20px; bottom: 18px; width: 130px; }
+  .card { padding: 20px; border-radius: 20px; }
+  .collection-head { align-items: stretch; flex-direction: column; }
+  .tabs { align-self: flex-start; }
+  .meal-list { grid-template-columns: 1fr; }
+  footer { flex-direction: column; gap: 4px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}