{
  "id": "radiograph-compare",
  "name": "Four Up",
  "theme": "radiograph",
  "category": "Dashboard",
  "description": "A four-pane comparison — never three, because three wastes a quadrant — with every pane carrying its own corner overlay and one shared rail.",
  "layout": "A 2×2 hard grid of panes filling 60%+ of the width, each with a four-corner mono overlay; the rail carries a pane-count control at the top.",
  "modules": [
    {
      "key": "panes",
      "name": "Pane grid",
      "html": "\n<section class=\"pg\">\n<div class=\"pn\"><img src=\"{{ART scan}}\" alt=\"{{ARTALT scan}}\"><div class=\"ov\"><span class=\"tl\">SER 3 · 2026-03-12</span><span class=\"tr\">A</span><span class=\"bl\">W 1500 · L −600</span><span class=\"br\">10 mm</span></div></div>\n<div class=\"pn\"><img src=\"{{ART lightbox}}\" alt=\"{{ARTALT lightbox}}\"><div class=\"ov\"><span class=\"tl\">SER 3 · 2025-09-04</span><span class=\"tr\">A</span><span class=\"bl\">W 1500 · L −600</span><span class=\"br\">10 mm</span></div></div>\n<div class=\"pn\"><img src=\"{{ART console}}\" alt=\"{{ARTALT console}}\"><div class=\"ov\"><span class=\"tl\">SER 7 · 2026-03-12</span><span class=\"tr\">A</span><span class=\"bl\">W 400 · L 40</span><span class=\"br\">5 mm</span></div></div>\n<div class=\"pn\"><img src=\"{{ART corridor}}\" alt=\"{{ARTALT corridor}}\"><div class=\"ov\"><span class=\"tl\">SER 7 · 2025-09-04</span><span class=\"tr\">A</span><span class=\"bl\">W 400 · L 40</span><span class=\"br\">5 mm</span></div></div>\n</section>"
    },
    {
      "key": "rail",
      "name": "Comparison rail",
      "html": "\n<aside class=\"rl\"><span class=\"k\">Layout</span><div class=\"lay\"><span class=\"ly\">1</span><span class=\"ly\">2</span><span class=\"ly on\">4</span></div>\n<span class=\"k\">Linked</span><div class=\"tool on\"><i></i><span>Scroll</span><b>on</b></div><div class=\"tool on\"><i></i><span>Window</span><b>on</b></div><div class=\"tool\"><i></i><span>Zoom</span><b>off</b></div>\n<span class=\"k\">Current vs prior</span><div class=\"kv\"><span>Interval</span><b>189 d</b></div><div class=\"kv\"><span>Nodule, RUL</span><b>8.1 → 11.4 mm</b></div><div class=\"kv\"><span>Change</span><b class=\"hi\">+40.7%</b></div><div class=\"kv\"><span>Doubling time</span><b>212 d</b></div></aside>"
    },
    {
      "key": "bar",
      "name": "Comparison bar",
      "html": "\n<header class=\"hb\"><span class=\"lg\">Radiograph</span><span class=\"mn\">ANON-44182 · CURRENT AND PRIOR · LINKED SCROLL</span><span class=\"rd\">Comparison</span></header>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "radiograph-compare",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:28:02+09:00",
    "updatedAt": "2026-09-02T01:28:02+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/radiograph-compare.json",
  "structure": "A 2×2 hard grid of panes filling 60%+ of the width, each with a four-corner mono overlay; the rail carries a pane-count control at the top.",
  "html": "<div class=\"dz dz-radiograph-compare\" data-design=\"radiograph-compare\" data-theme=\"radiograph\">\n<section class=\"dz-mod\" data-mod=\"panes\" aria-label=\"Pane grid\">\n<section class=\"pg\">\n<div class=\"pn\"><img src=\"https://designlookbook.dev/assets/img/radiograph-scan.webp\" alt=\"The bore of a scanner lit from inside\"><div class=\"ov\"><span class=\"tl\">SER 3 · 2026-03-12</span><span class=\"tr\">A</span><span class=\"bl\">W 1500 · L −600</span><span class=\"br\">10 mm</span></div></div>\n<div class=\"pn\"><img src=\"https://designlookbook.dev/assets/img/radiograph-lightbox.webp\" alt=\"The even glow of an empty viewing panel\"><div class=\"ov\"><span class=\"tl\">SER 3 · 2025-09-04</span><span class=\"tr\">A</span><span class=\"bl\">W 1500 · L −600</span><span class=\"br\">10 mm</span></div></div>\n<div class=\"pn\"><img src=\"https://designlookbook.dev/assets/img/radiograph-console.webp\" alt=\"A dim console desk with two dark screens and a purple cast\"><div class=\"ov\"><span class=\"tl\">SER 7 · 2026-03-12</span><span class=\"tr\">A</span><span class=\"bl\">W 400 · L 40</span><span class=\"br\">5 mm</span></div></div>\n<div class=\"pn\"><img src=\"https://designlookbook.dev/assets/img/radiograph-corridor.webp\" alt=\"A hospital corridor at night with cyan floor light\"><div class=\"ov\"><span class=\"tl\">SER 7 · 2025-09-04</span><span class=\"tr\">A</span><span class=\"bl\">W 400 · L 40</span><span class=\"br\">5 mm</span></div></div>\n</section></section>\n<section class=\"dz-mod\" data-mod=\"rail\" aria-label=\"Comparison rail\">\n<aside class=\"rl\"><span class=\"k\">Layout</span><div class=\"lay\"><span class=\"ly\">1</span><span class=\"ly\">2</span><span class=\"ly on\">4</span></div>\n<span class=\"k\">Linked</span><div class=\"tool on\"><i></i><span>Scroll</span><b>on</b></div><div class=\"tool on\"><i></i><span>Window</span><b>on</b></div><div class=\"tool\"><i></i><span>Zoom</span><b>off</b></div>\n<span class=\"k\">Current vs prior</span><div class=\"kv\"><span>Interval</span><b>189 d</b></div><div class=\"kv\"><span>Nodule, RUL</span><b>8.1 → 11.4 mm</b></div><div class=\"kv\"><span>Change</span><b class=\"hi\">+40.7%</b></div><div class=\"kv\"><span>Doubling time</span><b>212 d</b></div></aside></section>\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Comparison bar\">\n<header class=\"hb\"><span class=\"lg\">Radiograph</span><span class=\"mn\">ANON-44182 · CURRENT AND PRIOR · LINKED SCROLL</span><span class=\"rd\">Comparison</span></header></section>\n</div>",
  "css": "\n.dz-radiograph-compare { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 1fr 280px; grid-template-rows: auto 1fr; min-height: 620px; }\n.dz-radiograph-compare .mn { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; }\n.dz-radiograph-compare .hb { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--card); }\n.dz-radiograph-compare .lg { font-size: 15px; font-weight: 600; }\n.dz-radiograph-compare .hb .mn { color: var(--muted-foreground); }\n.dz-radiograph-compare .rd { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--accent); margin-left: auto; }\n.dz-radiograph-compare .pg { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--border); }\n.dz-radiograph-compare .pn { position: relative; background: var(--secondary); overflow: hidden; }\n.dz-radiograph-compare .pn img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--img-filter); }\n\n.dz-radiograph-compare .ov { position: absolute; inset: 0; pointer-events: none; }\n.dz-radiograph-compare .ov span { position: absolute; font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; color: var(--primary-foreground); opacity: .82; line-height: 1.5; }\n.dz-radiograph-compare .ov .tl { top: 10px; left: 12px; }\n.dz-radiograph-compare .ov .tr { top: 10px; right: 12px; text-align: right; }\n.dz-radiograph-compare .ov .bl { bottom: 10px; left: 12px; }\n.dz-radiograph-compare .ov .br { bottom: 10px; right: 12px; text-align: right; }\n\n.dz-radiograph-compare .rl { width: 280px; background: var(--card); border-left: 1px solid var(--border); padding: 14px 12px; box-sizing: border-box; }\n.dz-radiograph-compare .rl .k { text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 600; color: var(--muted-foreground); display: block; margin: 16px 0 8px; }\n.dz-radiograph-compare .rl .k:first-child { margin-top: 0; }\n.dz-radiograph-compare .tool { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 3px; }\n.dz-radiograph-compare .tool.on { background: var(--primary); color: var(--primary-foreground); }\n.dz-radiograph-compare .tool i { width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 3px; display: block; flex: none; }\n.dz-radiograph-compare .tool i.c { border-radius: 9999px; }\n.dz-radiograph-compare .tool i.d { transform: rotate(45deg); border-radius: 0; }\n.dz-radiograph-compare .tool b { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; margin-left: auto; font-weight: 400; }\n.dz-radiograph-compare .tool span { font-size: 13px; }\n.dz-radiograph-compare .lay { display: flex; gap: 6px; }\n.dz-radiograph-compare .ly { flex: 1; text-align: center; font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; border: 1px solid var(--border); border-radius: 3px; padding: 9px 0; color: var(--muted-foreground); }\n.dz-radiograph-compare .ly.on { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }\n.dz-radiograph-compare .kv { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; }\n.dz-radiograph-compare .kv span { color: var(--muted-foreground); }\n.dz-radiograph-compare .kv b { font-family: var(--pv-mono); font-size: 12px; letter-spacing: .01em; font-weight: 400; }\n.dz-radiograph-compare .kv .hi { color: var(--accent); }\n@media (prefers-reduced-motion: reduce) { .dz-radiograph-compare *, .dz-radiograph-compare *::before, .dz-radiograph-compare *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/radiograph.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&family=B612+Mono:wght@400;500;600;700&display=swap"
}