Add Fit Check outfit-scoring demo

README.md

@@ -8,13 +8,13 @@ app_port: 7860
 suggested_hardware: l4x1
 models:
   - LiquidAI/d1-3B
-short_description: Ten camera, drawing and text demos of d1-3B
+short_description: Eleven camera, drawing and text demos of d1-3B
 pinned: false
 ---
 
 # System One Arcade
 
-Ten demos of `d1-3B`. Each one asks the model a few typed questions about a camera frame,
+Eleven demos of `d1-3B`. Each one asks the model a few typed questions about a camera frame,
 a drawing or a message, and reads the answers from one forward pass.
 
 | demo | what it shows |
@@ -28,6 +28,7 @@ a drawing or a message, and reads the answers from one forward pass.
 | Red Light, Green Light | move on green, freeze on red |
 | Cowboy Duel | two players, first finger gun wins |
 | Live Triage | six answers about a support message as you type |
+| Fit Check | live outfit score with purikura-style doodles |
 | Ask Anything | your own yes/no questions about the camera image |
 
 Camera frames go to the model on this Space's GPU and are not stored.

game/web/app.js

@@ -15,9 +15,10 @@ import draw from "./draw.js";
 import redlight from "./redlight.js";
 import duel from "./duel.js";
 import triage from "./triage.js";
+import fitcheck from "./fitcheck.js";
 import ask from "./ask.js";
 
-const GAMES = [flappy, pong, reps, clean, hunt, draw, redlight, duel, triage, ask];
+const GAMES = [flappy, pong, reps, clean, hunt, draw, redlight, duel, triage, fitcheck, ask];
 
 const $ = (id) => document.getElementById(id);
 const video = $("cam");

game/web/fitcheck.js

@@ -0,0 +1,190 @@
+// Fit Check: one outfit-rating question fills the live meter.
+
+import { el } from "./ui.js";
+
+const OUTFIT = {
+  "text": "How successful is the visible outfit as a styled look to go out? Judge the whole combination, including shoes, accessories, and any piece that undermines it. Do not score the person's attractiveness, body, pose, or surroundings. Use only what is visible, without imagining hidden pieces or intent. Judge the assembled outfit, not the appeal of individual garments. Use the lowest level when there is no coherent styling idea visible or a conspicuous conflict makes the whole look unsuccessful. Comfortable clothes are not automatically low-scoring; the distinction is whether their shape, pairing, footwear, and details create a convincing look. Do not let one nice or formal item rescue a broken combination.\nBefore scoring above the lowest level, look for something that improves the whole outfit: considered proportions, a coherent silhouette, complementary pieces, or effective finishing. Being wearable, clean, or loosely color-coordinated is not enough. If no outfit-level styling is visible, or one conspicuous conflict cancels it, use the lowest level. Conversely, reward simple outfits when their shape and pieces genuinely work together.",
+  "levels": [
+    "0–20, lounge or active wear. anything you'd wear to a gym or at home on the sofa.",
+    "20–40, casual outfit.",
+    "40–60, outfit you can leave the house in Europe with (does not include lounge wear or active wear) pieces are worn but not styled. does not include lounge wear or gym wear. not dressed for comfort. not accessorized",
+    "60–80, coordinated outfit: Appealing and coherent, but less distinctive or less fully resolved as a whole. includes some intentional accessories, such as belts or jewelry. interesting combination or clothing pieces.",
+    "80–100, A distinctive, convincingly styled outfit with a clear visual point of view. Several visible choices—silhouette, proportion, layering, color or texture contrast, accessories, and footwear—reinforce the same aesthetic. Playful or unconventional combinations qualify when they feel composed rather than accidental. The result is memorable and well resolved in its own style; it need not be formal, expensive, minimal, or flawless. Combination of interesting patterns, accessories, color-coordinated pieces.dressier pieces of clothing including leather shoes-"
+  ]
+};
+const FRAME_SIDE = 512;
+
+// One global, monotonic display transform; no image- or garment-specific rules.
+const SCORE_STRETCH = Object.freeze({ rawLow: 21, shownLow: 5, rawHigh: 75, shownHigh: 90 });
+
+function outfitScore(probs) {
+  const rawScore = 100 * probs.reduce((sum, probability, index) => sum + index * probability, 0) / (probs.length - 1);
+  const { rawLow, shownLow, rawHigh, shownHigh } = SCORE_STRETCH;
+  const shown = shownLow + (rawScore - rawLow) * (shownHigh - shownLow) / (rawHigh - rawLow);
+  return Math.max(0, Math.min(100, shown));
+}
+
+const SMOOTH = 0.18;
+const RAIN_ENTER_AT = 35;
+const RAIN_EXIT_AT = 48;
+const RAIN_DWELL_MS = 3000;
+const MOODS = [
+  { at: 40, name: "low", stickers: ["ぽつぽつ", "☂", "☁", "涙"] },
+  { at: 65, name: "mid", stickers: ["いいかも♡", "♪", "♡", "☆"] },
+  { at: 85, name: "cute", stickers: ["キラキラ☆", "かわいい♡", "きゅん", "✧", "☆"] },
+  { at: 101, name: "sparkle", stickers: ["ちょーかわいい♡", "キラキラMAX", "最高♡", "✦", "♡♡", "☆☆"] },
+];
+const DOODLES = ["♡", "☆", "✧", "♡♡", "★", "♪", "✦", "キラッ"];
+const FOIL_INKS = ["#ee55cb", "#7be7ff", "#c590ff", "#fff174", "#8bf0c5", "#ff9d75"];
+
+let alive = false;
+
+export default {
+  id: "fitcheck",
+  title: "Fit Check",
+  blurb: "Get a live outfit score with purikura-style doodles.",
+  tags: ["Outfits", "Camera", "Live score"],
+  camera: true,
+
+  start({ panel, view, stream }) {
+    alive = true;
+    document.documentElement.lang = "ja";
+    document.body.classList.add("fitcheck-page");
+    const stage = view.closest(".stage");
+    stage?.classList.add("fit-stage");
+    view.classList.add("fitcheck");
+    panel.classList.add("fit-panel");
+    view.append(el("div", { class: "fit-weather", "aria-hidden": "true" }));
+    view.append(el("img", { class: "puri-lace", src: "assets/puri-lace.svg", alt: "", "aria-hidden": "true" }));
+    view.append(el("div", { class: "purikura-decor", "aria-hidden": "true" },
+      el("span", { class: "puri-title" }, "今日のコーデ♡"),
+      el("span", { class: "puri-model" }, "decision model ♡"),
+      el("span", { class: "puri-date" }, new Intl.DateTimeFormat("ja-JP", { year: "numeric", month: "numeric", day: "numeric" }).format(new Date())),
+      el("img", { class: "puri-logo puri-logo-bottom", src: "assets/liquid-mark.svg", alt: "" }),
+      el("img", { class: "puri-logo puri-logo-top", src: "assets/liquid-mark.svg", alt: "" }),
+      el("img", { class: "puri-logo puri-logo-side", src: "assets/liquid-mark.svg", alt: "" }),
+      el("span", { class: "puri-frame-heart" }, "♥"),
+      el("span", { class: "puri-frame-star" }, "☆"),
+      el("span", { class: "puri-doodle heart-one" }, "♡"),
+      el("span", { class: "puri-doodle heart-two" }, "♡"),
+      el("span", { class: "puri-doodle heart-three" }, "♥"),
+      el("span", { class: "puri-doodle heart-four" }, "♡"),
+      el("span", { class: "puri-doodle heart-five" }, "♥"),
+      el("span", { class: "puri-doodle heart-six" }, "♡"),
+      el("span", { class: "puri-doodle heart-seven" }, "♡"),
+      el("span", { class: "puri-doodle heart-eight" }, "♥"),
+      el("span", { class: "puri-doodle star-one" }, "☆"),
+      el("span", { class: "puri-doodle star-two" }, "✧"),
+      el("span", { class: "puri-doodle star-three" }, "☆"),
+      el("span", { class: "puri-doodle star-four" }, "✦"),
+      el("span", { class: "puri-doodle star-five" }, "✧"),
+      el("span", { class: "puri-doodle star-six" }, "☆"),
+      el("span", { class: "puri-doodle star-seven" }, "✦"),
+      el("span", { class: "puri-doodle star-eight" }, "☆"),
+      el("span", { class: "puri-doodle spark-one" }, "✦"),
+      el("span", { class: "puri-doodle spark-two" }, "✧"),
+      el("span", { class: "puri-doodle spark-three" }, "✦"),
+      el("span", { class: "puri-doodle spark-four" }, "✧"),
+      el("span", { class: "puri-doodle spark-five" }, "✧"),
+      el("span", { class: "puri-doodle spark-six" }, "✦"),
+      el("span", { class: "puri-doodle spark-seven" }, "✧"),
+      el("span", { class: "puri-doodle spark-eight" }, "✦")));
+    const stickers = el("div", { class: "sticker-field", "aria-hidden": "true" });
+    view.append(stickers);
+
+    const fill = el("i");
+    const percent = el("div", { class: "fit-score", "aria-live": "off" }, "–");
+    const meter = el("div", { class: "fit-meter", role: "progressbar", "aria-label": "Outfit score", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": "0" }, fill);
+    const privacy = el("p", { class: "note" },
+      "Camera frames are sent to the model for scoring and are not saved on this page.");
+    panel.append(
+      el("div", { class: "fit-panel-main" },
+        el("div", { class: "fit-score-row" },
+          el("div", { class: "fit-panel-heading" }, el("strong", {}, "♡ コーデのかわいさ"), el("small", {}, "How cute is your outfit today?")),
+          percent),
+        meter),
+      el("div", { class: "fit-panel-foot" },
+        el("p", { class: "fit-disclaimer" }, "A playful AI outfit rating, not a probability or a judgment of you."), privacy));
+
+    let shown = null;
+    let lastText = null;
+    let lastSticker = -Infinity;
+    let lowSince = null;
+    let rainActive = false;
+    stream.start({ questions: () => [OUTFIT], side: FRAME_SIDE, inflight: 2 }, (answer) => {
+      if (!alive) return;
+      const raw = outfitScore(answer.probs[0]);
+      shown = shown === null ? raw : shown + SMOOTH * (raw - shown);
+      const score = Math.round(shown);
+      const mood = MOODS.find((m) => score < m.at) ?? MOODS.at(-1);
+      const now = performance.now();
+      if (raw >= RAIN_EXIT_AT) {
+        if (rainActive) stickers.replaceChildren();
+        lowSince = null;
+        rainActive = false;
+      } else if (raw < RAIN_ENTER_AT) {
+        lowSince ??= now;
+        if (now - lowSince >= RAIN_DWELL_MS) rainActive = true;
+      } else if (!rainActive) {
+        lowSince = null;
+      }
+      const visualMood = mood.name === "low" && !rainActive ? null : mood;
+
+      fill.style.width = `${score}%`;
+      meter.setAttribute("aria-valuenow", String(score));
+      if (lastText === null || Math.abs(score - lastText) >= 1) {
+        lastText = score;
+        percent.textContent = `${score}%`;
+      }
+      view.dataset.mood = visualMood?.name ?? "";
+      panel.dataset.mood = visualMood?.name ?? "";
+      if (visualMood) maybeSticker(stickers, visualMood, score, lastSticker, (t) => { lastSticker = t; });
+    });
+  },
+
+  stop() {
+    alive = false;
+    document.documentElement.lang = "en";
+    document.body.classList.remove("fitcheck-page");
+    const view = document.getElementById("view");
+    const panel = document.getElementById("panel");
+    view?.classList.remove("fitcheck");
+    panel?.classList.remove("fit-panel");
+    view?.removeAttribute("data-mood");
+    panel?.removeAttribute("data-mood");
+    const stage = document.querySelector(".stage");
+    stage?.classList.remove("fit-stage");
+  },
+};
+
+function maybeSticker(layer, mood, score, last, setLast) {
+  const now = performance.now();
+  const every = score < 40 ? 680 : score < 65 ? 740 : score < 85 ? 900 : 700;
+  if (now - last < every) return;
+  setLast(now);
+  const decorated = score >= 65;
+  const pool = decorated && Math.random() < 0.82 ? DOODLES : mood.stickers;
+  const word = pool[Math.floor(Math.random() * pool.length)];
+  const kind = /^[♡☆✧★✦♪☂☁]+$/.test(word) ? "doodle" : "word";
+  const sticker = el("span", { class: `fit-sticker ${kind} ${mood.name}${decorated ? " edge" : ""}` }, word);
+  if (decorated) {
+    // Let the live rakugaki appear around the perimeter, leaving the person clear.
+    const edge = Math.floor(Math.random() * 4);
+    const x = edge === 0 ? 10 + Math.random() * 80 : edge === 1 ? 10 + Math.random() * 80 : edge === 2 ? 8 + Math.random() * 7 : 85 + Math.random() * 7;
+    const y = edge === 0 ? 11 + Math.random() * 8 : edge === 1 ? 81 + Math.random() * 8 : 21 + Math.random() * 58;
+    sticker.style.left = `${x}%`;
+    sticker.style.top = `${y}%`;
+  } else {
+    sticker.style.left = `${9 + Math.random() * 82}%`;
+    sticker.style.top = `${13 + Math.random() * 72}%`;
+  }
+  sticker.style.setProperty("--drift", `${-18 + Math.random() * 36}px`);
+  sticker.style.setProperty("--rise", `${24 + Math.random() * 34}px`);
+  sticker.style.setProperty("--spin", `${-18 + Math.random() * 36}deg`);
+  sticker.style.setProperty("--delay", `${Math.random() * 120}ms`);
+  if (decorated) sticker.style.setProperty("--sticker-ink", FOIL_INKS[Math.floor(Math.random() * FOIL_INKS.length)]);
+  layer.append(sticker);
+  const max = decorated ? 6 : 10;
+  while (layer.children.length > max) layer.firstElementChild.remove();
+  sticker.addEventListener("animationend", () => sticker.remove(), { once: true });
+}

game/web/index.html

@@ -4,11 +4,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>System One Arcade</title>
-<meta name="description" content="Ten demos of d1-3B.">
+<meta name="description" content="Eleven demos of d1-3B.">
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23cd82f0'/%3E%3C/svg%3E">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@300..600&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@300..600&family=Yomogi&display=swap">
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -28,7 +28,7 @@
     <div class="orb"></div>
     <div class="eyebrow">d1-3B</div>
     <h1>System One Arcade</h1>
-    <p>Ten demos of a 3B vision-language model. Each one asks the model a few typed questions about a
+    <p>Eleven demos of a 3B vision-language model. Each one asks the model a few typed questions about a
       camera frame, a drawing or a message, and reads the answers from one forward pass.</p>
     <button class="btn" data-local>Run it locally</button>
   </div>

game/web/style.css

@@ -166,6 +166,311 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .prob.top .name, .prob.top .value { color: var(--ink); }
 .prob.top .fill { background: linear-gradient(90deg, var(--violet), var(--purple)); }
 
+/* Fit Check: a single purple purikura photo frame */
+.stage.fit-stage {
+  width: 100%;
+  max-width: 1300px;
+  margin: 0 auto;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+  --puri: #8700f5;
+  --puri-dark: #3f0079;
+  --puri-mid: #6d00d8;
+  --puri-light: #ad62fe;
+  --puri-lilac: #c253f5;
+  --puri-pale: #f7f0ff;
+}
+.view.fitcheck {
+  isolation: isolate;
+  padding: 62px 54px 58px;
+  border: 0;
+  border-radius: 24px;
+  background:
+    radial-gradient(circle, #ffffffbd 0 1.5px, transparent 2.5px) 0 0 / 20px 20px,
+    radial-gradient(circle, #f8dcffb8 0 2px, transparent 3px) 9px 12px / 39px 39px,
+    repeating-linear-gradient(135deg, #af61de 0 15px, #c47fe9 15px 30px, #d89bed 30px 45px, #aa5bd9 45px 60px);
+  box-shadow: 0 14px 28px #3f00792e;
+}
+.view.fitcheck video {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  max-height: none;
+  object-fit: contain;
+  background: #211132;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-mask: url("assets/puri-opening.svg") center / 100% 100% no-repeat;
+  mask: url("assets/puri-opening.svg") center / 100% 100% no-repeat;
+}
+.view.fitcheck .camera-hint {
+  z-index: 5;
+  inset: 35% 22%;
+  min-height: 74px;
+  padding: 16px;
+  border: 3px solid var(--puri-light);
+  border-radius: 6px;
+  background: #f7f0ffee;
+  color: var(--puri-dark);
+  font: 800 13px/1.6 "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
+  box-shadow: 4px 5px 0 var(--puri);
+}
+.fit-weather, .purikura-decor, .sticker-field {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.fit-weather {
+  z-index: 1;
+  inset: 62px 54px 58px;
+  opacity: 0;
+  transition: opacity .3s ease;
+  -webkit-mask: url("assets/puri-opening.svg") center / 100% 100% no-repeat;
+  mask: url("assets/puri-opening.svg") center / 100% 100% no-repeat;
+}
+.fit-weather::before, .fit-weather::after { content: ""; position: absolute; inset: 0; }
+.view.fitcheck[data-mood="low"] .fit-weather { opacity: .68; }
+.view.fitcheck[data-mood="low"] .fit-weather::before {
+  z-index: 1;
+  background:
+    repeating-linear-gradient(105deg, transparent 0 27px, #bda7ed85 28px 29px, transparent 30px 67px),
+    repeating-linear-gradient(105deg, transparent 0 52px, #ffffff8a 53px 54px, transparent 55px 109px);
+  background-size: 90px 120px, 150px 160px;
+  animation: puri-rain .45s linear infinite;
+}
+.view.fitcheck[data-mood="low"] .fit-weather::after {
+  background: linear-gradient(#44345c1c, #38204e0e 45%, #35254e2b);
+}
+.view.fitcheck[data-mood="cute"] .fit-weather,
+.view.fitcheck[data-mood="sparkle"] .fit-weather { opacity: 1; }
+.view.fitcheck[data-mood="cute"] .fit-weather::before,
+.view.fitcheck[data-mood="sparkle"] .fit-weather::before {
+  background:
+    radial-gradient(circle at 12% 23%, #f8c4e9 0 3px, transparent 4px),
+    radial-gradient(circle at 27% 72%, #b9eaff 0 2px, transparent 3px),
+    radial-gradient(circle at 56% 20%, #fff 0 4px, transparent 5px),
+    radial-gradient(circle at 78% 61%, #fff0b0 0 2px, transparent 3px),
+    radial-gradient(circle at 89% 31%, #d9bdff 0 3px, transparent 4px);
+  background-size: 280px 210px;
+  animation: puri-twinkle .7s steps(2, end) infinite;
+}
+.view.fitcheck[data-mood="sparkle"] .fit-weather::after {
+  background: linear-gradient(105deg, transparent 30%, #ffffff38 49%, transparent 60%);
+  background-size: 180px 100%;
+  animation: puri-sweep 1.4s linear infinite;
+  mix-blend-mode: screen;
+}
+.puri-lace {
+  position: absolute;
+  z-index: 2;
+  top: 62px;
+  left: 54px;
+  width: calc(100% - 108px);
+  height: calc(100% - 120px);
+  pointer-events: none;
+}
+.purikura-decor { z-index: 3; font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; }
+.sticker-field { z-index: 4; }
+.puri-title {
+  position: absolute;
+  top: -4px;
+  left: 72px;
+  transform: rotate(-5deg);
+  white-space: nowrap;
+  color: #f5c2ff;
+  font-size: clamp(48px, 5.7vw, 78px);
+  font-family: "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
+  font-weight: 900;
+  letter-spacing: .02em;
+  -webkit-text-stroke: 5px #7014b4;
+  paint-order: stroke fill;
+  text-shadow: -2px -2px 0 #fff, 3px 4px 0 #fff, 6px 7px 0 #54217e, 0 0 13px #fff;
+}
+.puri-logo {
+  position: absolute;
+  object-fit: contain;
+  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #f1b9ff) drop-shadow(2px 3px 0 #682595);
+}
+.puri-logo-bottom { left: 23px; bottom: 17px; width: 63px; height: 79px; transform: rotate(-10deg); }
+.puri-logo-top { top: 19px; left: 64%; width: 50px; height: 68px; transform: rotate(12deg); }
+.puri-logo-side { top: 69%; left: 25px; width: 50px; height: 67px; transform: rotate(-13deg); }
+.puri-frame-heart, .puri-frame-star {
+  position: absolute;
+  line-height: 1;
+  font-family: Georgia, serif;
+  -webkit-text-stroke: 2px #fff;
+  paint-order: stroke fill;
+  text-shadow: 0 0 5px #fff, 0 0 11px #e9b2ff, 3px 3px 0 #7742a7;
+}
+.puri-frame-heart { top: 15px; right: 59px; color: #e6b8f9; font-size: 83px; transform: rotate(16deg); }
+.puri-frame-star { bottom: 11px; left: 43%; color: #c5dafa; font-size: 81px; transform: rotate(-11deg); }
+.puri-model {
+  position: absolute;
+  top: 83px;
+  left: 180px;
+  transform: rotate(-6deg);
+  white-space: nowrap;
+  color: #fff4ff;
+  font: 900 clamp(32px, 3.5vw, 48px)/1 "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
+  -webkit-text-stroke: 5px #b84ae7;
+  paint-order: stroke fill;
+  text-shadow: 3px 4px 0 #5a2389, 0 0 8px #fff, 0 0 18px #dc8eff;
+}
+.puri-date {
+  position: absolute;
+  right: 40px;
+  bottom: 12px;
+  transform: rotate(-5deg);
+  color: #45445b;
+  font: 900 clamp(22px, 2.9vw, 34px)/1 "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
+  letter-spacing: -.08em;
+  -webkit-text-stroke: 4px #fff;
+  paint-order: stroke fill;
+  text-shadow: 2px 2px 0 #d6b3fa;
+}
+.puri-doodle {
+  position: absolute;
+  line-height: 1;
+  font-weight: 900;
+  scale: 1.16;
+  -webkit-text-stroke: 3px white;
+  paint-order: stroke fill;
+  text-shadow: 0 0 5px white, 0 0 12px #ffc4fa, 2px 3px 0 #8e4bc5;
+}
+.puri-doodle { font-family: Georgia, serif; }
+.heart-one { top: 21%; left: 25px; color: #f9b9dc; font-size: 79px; transform: rotate(-20deg); }
+.heart-two { right: 24px; bottom: 14%; color: #bce8f7; font-size: 80px; transform: rotate(18deg); }
+.heart-three { top: 26px; left: 56%; color: #ffd3ed; font-size: 55px; transform: rotate(12deg); }
+.heart-four { top: 10%; right: 21px; color: #fbd6fa; font-size: 58px; transform: rotate(-17deg); }
+.heart-five { top: 36%; left: 17px; color: #f1c2fc; font-size: 62px; transform: rotate(15deg); }
+.heart-six { top: 40%; right: 15px; color: #d6bdfb; font-size: 64px; transform: rotate(-13deg); }
+.heart-seven { bottom: 13px; left: 17%; color: #ffc6df; font-size: 57px; transform: rotate(15deg); }
+.heart-eight { bottom: 18px; right: 18%; color: #d9c2ff; font-size: 54px; transform: rotate(-17deg); }
+.star-one { bottom: 20px; left: 28%; color: #e8b9f7; font-size: 77px; transform: rotate(-14deg); }
+.star-two { top: 27%; right: 22px; color: #fff2b0; font-size: 74px; transform: rotate(12deg); }
+.star-three { right: 27%; bottom: 20px; color: #c9eaff; font-size: 72px; transform: rotate(9deg); }
+.star-four { top: 12%; left: 24px; color: #c9eaff; font-size: 57px; transform: rotate(-9deg); }
+.star-five { top: 60%; left: 19px; color: #c0e4ff; font-size: 59px; transform: rotate(13deg); }
+.star-six { top: 61%; right: 16px; color: #f9c6f3; font-size: 62px; transform: rotate(-9deg); }
+.star-seven { top: 13px; right: 23%; color: #fff0b5; font-size: 52px; transform: rotate(12deg); }
+.star-eight { bottom: 16px; left: 62%; color: #e6c5ff; font-size: 54px; transform: rotate(-12deg); }
+.spark-one { top: 48%; left: 30px; color: #d9d3ff; font-size: 56px; transform: rotate(15deg); }
+.spark-two { right: 29px; bottom: 43%; color: #efc4fa; font-size: 60px; transform: rotate(-12deg); }
+.spark-three { right: 25px; top: 72%; color: #fff0bb; font-size: 55px; transform: rotate(15deg); }
+.spark-four { top: 25px; left: 46%; color: #fff2c9; font-size: 49px; transform: rotate(-10deg); }
+.spark-five { top: 30%; left: 16px; color: #ffe7ac; font-size: 45px; transform: rotate(-12deg); }
+.spark-six { bottom: 27%; left: 15px; color: #ffe7fc; font-size: 51px; transform: rotate(10deg); }
+.spark-seven { top: 20%; right: 16px; color: #bbf1ff; font-size: 48px; transform: rotate(14deg); }
+.spark-eight { bottom: 13px; right: 35%; color: #fff0b5; font-size: 48px; transform: rotate(-9deg); }
+.view.fitcheck[data-mood="low"] .puri-doodle { color: #abb6d8; text-shadow: 0 0 5px #fff, 2px 3px 0 #7368a3; }
+.fit-sticker {
+  position: absolute;
+  color: var(--sticker-ink, #c590ff);
+  font: 900 clamp(26px, 3.5vw, 46px)/1.2 "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
+  white-space: nowrap;
+  -webkit-text-stroke: 2.5px #271139;
+  paint-order: stroke fill;
+  text-shadow: 0 0 3px #fff, 0 0 11px currentColor, 0 0 22px currentColor;
+  animation: sticker-pop 1.35s cubic-bezier(.2, 1, .4, 1) var(--delay) forwards;
+}
+.fit-sticker.doodle {
+  font: 900 clamp(55px, 7vw, 105px)/1 Georgia, serif;
+  -webkit-text-stroke: 3px #271139;
+}
+.fit-sticker.edge { font-size: clamp(20px, 2.5vw, 34px); -webkit-text-stroke-width: 2px; }
+.fit-sticker.edge.doodle { font-size: clamp(37px, 4.5vw, 67px); -webkit-text-stroke-width: 2px; }
+.fit-sticker.low { color: #a6b5ff; }
+.fit-sticker.sparkle { color: var(--sticker-ink, #ee55cb); }
+@keyframes sticker-pop {
+  0% { opacity: 0; transform: translate(-50%, -40%) scale(.55) rotate(var(--spin)); }
+  13% { opacity: 1; transform: translate(-50%, -50%) scale(1.24) rotate(var(--spin)); }
+  55% { opacity: 1; transform: translate(-50%, -55%) scale(1) rotate(var(--spin)); }
+  100% { opacity: 0; transform: translate(calc(-50% + var(--drift)), calc(-50% - var(--rise))) scale(.76) rotate(var(--spin)); }
+}
+@keyframes puri-rain { from { background-position: 0 -120px, 0 -160px; } to { background-position: -90px 0, -150px 0; } }
+@keyframes puri-twinkle { 0%, 100% { opacity: .3; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.8); } }
+@keyframes puri-sweep { from { background-position: -180px 0; } to { background-position: 180px 0; } }
+.fit-panel {
+  display: block;
+  width: 100%;
+  border: 4px solid var(--puri);
+  border-radius: 13px;
+  background: linear-gradient(120deg, #f7f7fa, #e7e4ed 31%, #f5eafd 56%, #e9f2f5 79%, #f7f7fa);
+  box-shadow: 0 8px 0 #bec0ca, 0 16px 24px #3f007926;
+  color: var(--puri-dark);
+}
+.fit-panel-main { padding: 14px 22px 10px; }
+.fit-score-row { display: flex; align-items: center; gap: 20px; min-height: 75px; }
+.fit-panel-heading { display: flex; flex-direction: column; flex: 1; gap: 5px; }
+.fit-panel-heading strong { font: 900 clamp(21px, 2.4vw, 29px)/1.2 "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; }
+.fit-panel-heading small { color: var(--puri-mid); font: 800 clamp(18px, 1.9vw, 23px)/1.25 var(--sans); letter-spacing: .01em; }
+.fit-score { color: var(--puri); font: 900 clamp(49px, 6vw, 78px)/1 var(--sans); letter-spacing: -.07em; font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 #d8adff; }
+.fit-meter { height: 25px; overflow: hidden; border: 3px solid var(--puri-mid); border-radius: 5px; background: white; box-shadow: inset 0 2px 4px #6d00d833; }
+.fit-meter i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(-45deg, #ffffff91 0 8px, transparent 8px 16px), linear-gradient(90deg, #aeb3c1, #b89ee1 24%, #add8ea 40%, #b9dcc9 56%, #e7d19d 73%, #d5a9cf 86%, #8700f5); transition: width .12s linear; }
+.fit-panel-foot { display: flex; justify-content: space-between; gap: 20px; padding: 9px 22px; border-top: 1px dashed #c797fe; color: #71538d; }
+.fit-panel-foot p { margin: 0; font-size: 11px; line-height: 1.5; }
+.fit-panel-foot .note { max-width: 55%; color: inherit; font-size: 11px; }
+.fit-panel[data-mood="low"] { border-color: #6c6196; background: #eeeaf7; box-shadow: 0 8px 0 #c7bedf, 0 16px 24px #28203d26; }
+.fit-panel[data-mood="low"] .fit-score { color: #6c6196; text-shadow: 3px 3px 0 #d0cae1; }
+.fit-panel[data-mood="low"] .fit-meter { border-color: #887daa; }
+.fit-panel[data-mood="low"] .fit-meter i { background: repeating-linear-gradient(-45deg, #ffffff55 0 8px, transparent 8px 16px), linear-gradient(90deg, #b2a7d2, #6c6196); }
+.view.fitcheck .caption[data-tone="badge"] { z-index: 6; inset: auto 30px 65px; padding: 10px; border: 3px solid white; border-radius: 6px; background: #5b368ce8; font: 800 17px/1.3 "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; }
+@media (max-width: 700px) {
+  .view.fitcheck { padding: 48px 29px 42px; }
+  .fit-weather { inset: 48px 29px 42px; }
+  .puri-lace { top: 48px; left: 29px; width: calc(100% - 58px); height: calc(100% - 90px); }
+  .puri-title { left: 23px; top: -3px; font-size: clamp(34px, 8.5vw, 47px); -webkit-text-stroke-width: 3px; }
+  .puri-logo-bottom { left: 12px; bottom: 9px; width: 39px; height: 51px; }
+  .puri-logo-top { top: 65px; right: 9px; left: auto; width: 33px; height: 45px; }
+  .puri-logo-side { top: 68%; left: 8px; width: 33px; height: 45px; }
+  .puri-frame-heart { top: 51px; right: 13px; font-size: 50px; }
+  .puri-frame-star { bottom: 8px; font-size: 51px; }
+  .puri-doodle { font-size: 47px; }
+  .heart-three, .heart-eight, .star-three, .star-seven, .spark-four, .spark-five, .spark-seven { display: none; }
+  .spark-three { right: 8px; font-size: 40px; }
+  .heart-one { left: 10px; }
+  .star-one { left: 28%; }
+  .heart-two, .star-two { right: 10px; }
+  .spark-one, .spark-two { display: none; }
+  .heart-five { top: 34%; left: 8px; }
+  .heart-six { top: 42%; right: 8px; }
+  .heart-seven { bottom: 8px; left: 18%; }
+  .star-five { top: 57%; left: 8px; }
+  .star-six { top: 61%; right: 8px; }
+  .star-eight { bottom: 9px; left: 63%; }
+  .spark-six { bottom: 25%; left: 7px; }
+  .spark-eight { bottom: 9px; right: 37%; }
+  .puri-model { top: 44px; left: 49px; right: auto; font-size: clamp(23px, 5.4vw, 32px); writing-mode: horizontal-tb; -webkit-text-stroke-width: 3px; }
+  .puri-date { right: 20px; bottom: 9px; font-size: clamp(17px, 3.5vw, 23px); }
+  .fit-score-row { flex-wrap: wrap; gap: 6px 14px; }
+  .fit-panel-heading { min-width: 100%; }
+  .fit-panel-heading strong { font-size: 23px; }
+  .fit-panel-heading small { font-size: 20px; }
+  .fit-score { font-size: 52px; }
+  .fit-panel-foot { flex-direction: column; gap: 3px; }
+  .fit-panel-foot .note { max-width: none; }
+}
+@media (max-width: 480px) {
+  .fitcheck-page .play { padding: 14px 16px 28px; }
+  .fitcheck-page .topbar { gap: 8px; padding: 0 12px; }
+  .fitcheck-page .topbar .logo, .fitcheck-page .topbar .sep, .fitcheck-page .topbar .tag, .fitcheck-page .topbar .pill { display: none; }
+  .fitcheck-page .topbar .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
+  .view.fitcheck .camera-hint { inset: 32% 12%; font-size: 11px; }
+  .puri-title { font-size: clamp(34px, 9vw, 40px); }
+  .puri-model { font-size: clamp(23px, 6vw, 27px); }
+  .fit-panel-heading strong { font-size: 23px; }
+  .fit-panel-heading small { font-size: 21px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fit-sticker, .view.fitcheck[data-mood="low"] .fit-weather::before,
+  .view.fitcheck[data-mood="cute"] .fit-weather::before,
+  .view.fitcheck[data-mood="sparkle"] .fit-weather::before,
+  .view.fitcheck[data-mood="sparkle"] .fit-weather::after { animation: none; }
+}
+
 /* game surfaces */
 .surface { display: block; width: 100%; height: auto; }
 .view .surface { max-height: calc(100vh - 124px); object-fit: contain; }

game/web/thumbs.js

@@ -118,6 +118,21 @@ export const THUMBS = {
     ${[0, 1, 2, 3, 4].map((i) => `<rect x="${196 + i * 18}" y="98" width="14" height="7" rx="2" fill="${i < 4 ? P : SOFT}"/>`).join("")}
     ${label(196, 130, "REFUND")}<text x="196" y="148" font-family="${MONO}" font-size="12" fill="${DEEP}">yes · 97%</text>`),
 
+  fitcheck: frame("fitcheck", `
+    <defs><linearGradient id="puri-foil"><stop stop-color="#aeb1bd"/><stop offset=".28" stop-color="#e3d6ef"/><stop offset=".53" stop-color="#a9d9e9"/><stop offset=".76" stop-color="#f2d8b5"/><stop offset="1" stop-color="#c1c4ce"/></linearGradient><pattern id="puri-check" width="16" height="16" patternUnits="userSpaceOnUse"><rect width="16" height="16" fill="#fff"/><rect width="8" height="8" fill="#c7c9d2"/><rect x="8" y="8" width="8" height="8" fill="#c7c9d2"/></pattern></defs>
+    <rect x="24" y="14" width="272" height="172" rx="10" fill="url(#puri-foil)" stroke="#8700f5" stroke-width="5"/>
+    <rect x="27" y="17" width="266" height="166" rx="8" fill="url(#puri-check)" opacity=".22"/>
+    <rect x="37" y="35" width="246" height="112" rx="3" fill="#f0e5ff" stroke="#fff" stroke-width="5"/>
+    <circle cx="160" cy="75" r="17" fill="#b793dc"/>
+    <path d="M111 140 Q122 91 160 93 Q198 91 209 140Z" fill="#ad62fe"/>
+    <text x="160" y="38" text-anchor="middle" font-family="sans-serif" font-size="17" font-weight="900" fill="#8700f5" stroke="#fff" stroke-width="3" paint-order="stroke">FIT CHECK ♡</text>
+    <text x="51" y="99" font-family="${SERIF}" font-size="42" fill="#8700f5" stroke="#fff" stroke-width="2" paint-order="stroke">☆</text>
+    <text x="264" y="89" text-anchor="end" font-family="${SERIF}" font-size="39" fill="#8700f5" stroke="#fff" stroke-width="2" paint-order="stroke">♡</text>
+    <text x="225" y="131" text-anchor="middle" font-family="Yomogi, sans-serif" font-size="17" font-weight="900" fill="#ff6bd6" stroke="#261139" stroke-width="3" paint-order="stroke">SPARKLE ☆</text>
+    <rect x="40" y="157" width="180" height="14" rx="3" fill="#fff" stroke="#6d00d8" stroke-width="2"/>
+    <rect x="42" y="159" width="155" height="10" rx="1" fill="#8700f5"/>
+    <text x="273" y="171" text-anchor="end" font-family="${MONO}" font-size="24" font-weight="900" fill="#8700f5">86%</text>`),
+
   ask: frame("ask", `
     <g fill="none" stroke="${INK}" stroke-width="2.5" stroke-linecap="round">
       <path d="M26 46 V30 H42 M118 30 H134 V46 M134 154 V170 H118 M42 170 H26 V154"/>