{
  "id": "bloom-lab-intake",
  "name": "Intake Question",
  "theme": "bloom-lab",
  "category": "Auth & Onboarding",
  "description": "One question filling a whole screen, answered by tapping a pill, with the progress shown as a thin arc rather than a bar of segments.",
  "layout": "A single centred column no wider than 560px on an otherwise empty mint page, with a circular progress arc replacing the usual stepper and the back link isolated in the top-left.",
  "modules": [
    {
      "key": "progress",
      "name": "Progress arc",
      "html": "\n<header class=\"pr\"><a class=\"bk\" href=\"#\">Back</a>\n<div class=\"arc\"><svg viewBox=\"0 0 44 44\" aria-label=\"Question 4 of 11\"><circle class=\"tk\" cx=\"22\" cy=\"22\" r=\"19\"/><circle class=\"fl\" cx=\"22\" cy=\"22\" r=\"19\"/></svg><span>4<i>/11</i></span></div></header>"
    },
    {
      "key": "question",
      "name": "The question",
      "html": "\n<div class=\"qn\"><span class=\"k\">About your sleep</span><h1>How many nights a week do you wake before you meant to?</h1><p>An estimate is fine. We ask because iron and thyroid results read differently against poor sleep.</p></div>"
    },
    {
      "key": "answers",
      "name": "Answers",
      "html": "\n<div class=\"an\">\n  <button type=\"button\">Almost never</button>\n  <button type=\"button\">One or two</button>\n  <button type=\"button\" class=\"on\">Three or four</button>\n  <button type=\"button\">Five or more</button>\n  <button type=\"button\">Every night</button>\n</div>"
    },
    {
      "key": "foot",
      "name": "Continue",
      "html": "\n<footer class=\"ft\"><button type=\"button\" class=\"go\">Continue</button><span class=\"fine\">You can change any answer before you submit the panel.</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "bloom-lab-intake",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:48:21+09:00",
    "updatedAt": "2026-09-01T19:48:21+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/bloom-lab-intake.json",
  "structure": "A single centred column no wider than 560px on an otherwise empty mint page, with a circular progress arc replacing the usual stepper and the back link isolated in the top-left.",
  "html": "<div class=\"dz dz-bloom-lab-intake\" data-design=\"bloom-lab-intake\" data-theme=\"bloom-lab\">\n<section class=\"dz-mod\" data-mod=\"progress\" aria-label=\"Progress arc\">\n<header class=\"pr\"><a class=\"bk\" href=\"#\">Back</a>\n<div class=\"arc\"><svg viewBox=\"0 0 44 44\" aria-label=\"Question 4 of 11\"><circle class=\"tk\" cx=\"22\" cy=\"22\" r=\"19\"/><circle class=\"fl\" cx=\"22\" cy=\"22\" r=\"19\"/></svg><span>4<i>/11</i></span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"question\" aria-label=\"The question\">\n<div class=\"qn\"><span class=\"k\">About your sleep</span><h1>How many nights a week do you wake before you meant to?</h1><p>An estimate is fine. We ask because iron and thyroid results read differently against poor sleep.</p></div></section>\n<section class=\"dz-mod\" data-mod=\"answers\" aria-label=\"Answers\">\n<div class=\"an\">\n  <button type=\"button\">Almost never</button>\n  <button type=\"button\">One or two</button>\n  <button type=\"button\" class=\"on\">Three or four</button>\n  <button type=\"button\">Five or more</button>\n  <button type=\"button\">Every night</button>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Continue\">\n<footer class=\"ft\"><button type=\"button\" class=\"go\">Continue</button><span class=\"fine\">You can change any answer before you submit the panel.</span></footer></section>\n</div>",
  "css": "\n.dz-bloom-lab-intake { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; align-content: start; padding: 26px 30px 44px; row-gap: 26px; min-height: 520px; }\n.dz-bloom-lab-intake .pr { display: flex; align-items: center; justify-content: space-between; }\n.dz-bloom-lab-intake .bk { font-size: 13.5px; color: var(--muted-foreground); text-decoration: none; border-radius: 999px; border: var(--pv-bw) solid var(--border); padding: 8px 18px; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-bloom-lab-intake .bk:hover { color: var(--foreground); border-color: var(--primary); }\n.dz-bloom-lab-intake .arc { position: relative; width: 46px; height: 46px; display: grid; place-items: center; }\n.dz-bloom-lab-intake .arc svg { position: absolute; inset: 0; transform: rotate(-90deg); }\n.dz-bloom-lab-intake .tk { fill: none; stroke: var(--muted); stroke-width: 4; }\n.dz-bloom-lab-intake .fl { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 76; }\n.dz-bloom-lab-intake .arc span { font-family: var(--pv-mono); font-size: 13px; font-weight: 500; }\n.dz-bloom-lab-intake .arc i { font-style: normal; font-size: 10px; color: var(--muted-foreground); }\n.dz-bloom-lab-intake .k { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-bloom-lab-intake .qn h1 { font-family: var(--pv-display); font-size: 38px; font-weight: 600; line-height: 1.16; letter-spacing: -.02em; margin: 10px 0 14px; }\n.dz-bloom-lab-intake .qn p { font-size: 15.5px; line-height: 1.58; color: var(--muted-foreground); margin: 0; }\n.dz-bloom-lab-intake .an { display: flex; flex-direction: column; gap: 12px; }\n.dz-bloom-lab-intake .an button { font: inherit; font-size: 16px; text-align: left; background: var(--card); color: var(--foreground); border: var(--pv-bw) solid var(--border); border-radius: 999px; padding: 17px 24px; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }\n.dz-bloom-lab-intake .an button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--primary) 60%, transparent); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }\n.dz-bloom-lab-intake .an .on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--card)); font-weight: 600; }\n.dz-bloom-lab-intake .ft { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }\n.dz-bloom-lab-intake .go { font: inherit; font-size: 16px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: 999px; padding: 15px 40px; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }\n.dz-bloom-lab-intake .go:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); }\n.dz-bloom-lab-intake .fine { font-size: 12.5px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-bloom-lab-intake *, .dz-bloom-lab-intake *::before, .dz-bloom-lab-intake *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/bloom-lab.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500;600;700&display=swap"
}