{
  "id": "reading-lamp-shell",
  "name": "Reader",
  "theme": "reading-lamp",
  "category": "App Shell",
  "description": "The whole application chrome: a thin top line, the locked column, and nothing at the sides — no table of contents rail and no reading progress bar.",
  "layout": "A 44px top line carrying the book and the two controls, then the 66ch column centred with a great deal of deliberate empty space beside it.",
  "modules": [
    {
      "key": "top",
      "name": "Top line",
      "html": "\n<header class=\"tp\"><span class=\"bk\">The Long Room · Chapter 11</span><div class=\"ctl\"><span class=\"sz\"><i style=\"width:8px\"></i><i style=\"width:12px\"></i><i class=\"on\" style=\"width:16px\"></i><i style=\"width:20px\"></i><i style=\"width:24px\"></i></span><span class=\"wm\"><span class=\"tk\"><span class=\"pip\" style=\"left:62%\"></span></span></span></div></header>"
    },
    {
      "key": "body",
      "name": "Reading column",
      "html": "\n<article class=\"col\"><p class=\"first\">The house had been repainted so many times that the door frames had lost their edges, and where a hinge had been moved the old screw holes stood proud under the filler like the knuckles of a hand under a sheet.</p><p>She had come for a fortnight and had stayed for the winter. This was not a decision anyone had made. The lease on the flat had run out in October and nobody had raised the question again, and by the time the frost came the question had become the sort that is rude to ask.</p><p>What she remembered afterwards was the light. Not the quality of it — that was ordinary, a grey coastal light that did nothing for anybody — but its schedule. At four it left the long room entirely, and the lamp went on, and the room became a different and much smaller place with a hard edge somewhere near the second window.</p><p>In February the wall behind the eleventh layer turned out to be brick, and behind the brick was a doorway, and behind the doorway was the top of a stair going down into what the deeds insisted was solid ground.</p></article>"
    },
    {
      "key": "foot",
      "name": "Chapter foot",
      "html": "\n<footer class=\"col ft\"><a class=\"nx\" href=\"#\">Chapter twelve</a><span class=\"mn\">Position 41% · about 3 hours left</span></footer>"
    },
    {
      "key": "why",
      "name": "Absent things",
      "html": "\n<aside class=\"col ab\"><p class=\"ln\">Things deliberately absent from this screen: a table of contents rail, a reading-progress bar down the edge, a width control, a font picker, a theme picker, a highlight toolbar, a share button, and any element at all in the left or right margin.</p></aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "reading-lamp-shell",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:46:38+09:00",
    "updatedAt": "2026-09-02T01:46:38+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/reading-lamp-shell.json",
  "structure": "A 44px top line carrying the book and the two controls, then the 66ch column centred with a great deal of deliberate empty space beside it.",
  "html": "<div class=\"dz dz-reading-lamp-shell\" data-design=\"reading-lamp-shell\" data-theme=\"reading-lamp\">\n<section class=\"dz-mod\" data-mod=\"top\" aria-label=\"Top line\">\n<header class=\"tp\"><span class=\"bk\">The Long Room · Chapter 11</span><div class=\"ctl\"><span class=\"sz\"><i style=\"width:8px\"></i><i style=\"width:12px\"></i><i class=\"on\" style=\"width:16px\"></i><i style=\"width:20px\"></i><i style=\"width:24px\"></i></span><span class=\"wm\"><span class=\"tk\"><span class=\"pip\" style=\"left:62%\"></span></span></span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"body\" aria-label=\"Reading column\">\n<article class=\"col\"><p class=\"first\">The house had been repainted so many times that the door frames had lost their edges, and where a hinge had been moved the old screw holes stood proud under the filler like the knuckles of a hand under a sheet.</p><p>She had come for a fortnight and had stayed for the winter. This was not a decision anyone had made. The lease on the flat had run out in October and nobody had raised the question again, and by the time the frost came the question had become the sort that is rude to ask.</p><p>What she remembered afterwards was the light. Not the quality of it — that was ordinary, a grey coastal light that did nothing for anybody — but its schedule. At four it left the long room entirely, and the lamp went on, and the room became a different and much smaller place with a hard edge somewhere near the second window.</p><p>In February the wall behind the eleventh layer turned out to be brick, and behind the brick was a doorway, and behind the doorway was the top of a stair going down into what the deeds insisted was solid ground.</p></article></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Chapter foot\">\n<footer class=\"col ft\"><a class=\"nx\" href=\"#\">Chapter twelve</a><span class=\"mn\">Position 41% · about 3 hours left</span></footer></section>\n<section class=\"dz-mod\" data-mod=\"why\" aria-label=\"Absent things\">\n<aside class=\"col ab\"><p class=\"ln\">Things deliberately absent from this screen: a table of contents rail, a reading-progress bar down the edge, a width control, a font picker, a theme picker, a highlight toolbar, a share button, and any element at all in the left or right margin.</p></aside></section>\n</div>",
  "css": "\n.dz-reading-lamp-shell { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 72px; }\n.dz-reading-lamp-shell .tp { display: flex; align-items: center; gap: 24px; height: 44px; padding: 0 40px; border-bottom: 1px solid var(--border); margin-bottom: 52px; }\n.dz-reading-lamp-shell .bk { font-family: var(--pv-mono); font-size: 13.5px; color: var(--muted-foreground); }\n.dz-reading-lamp-shell .ctl { display: flex; align-items: center; gap: 24px; margin-left: auto; }\n.dz-reading-lamp-shell .sz { display: flex; align-items: flex-end; gap: 5px; height: 16px; }\n.dz-reading-lamp-shell .sz i { height: 2px; background: var(--muted-foreground); display: block; }\n.dz-reading-lamp-shell .sz i.on { background: var(--primary); height: 3px; }\n.dz-reading-lamp-shell .wm .tk { display: block; width: 90px; height: 2px; background: var(--border); position: relative; }\n.dz-reading-lamp-shell .wm .pip { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 9999px; background: var(--primary); }\n\n.dz-reading-lamp-shell .col { max-width: 66ch; margin: 0 auto; padding: 0 40px; }\n.dz-reading-lamp-shell .col p { font-size: 19px; line-height: 1.78; margin: 0; text-indent: 1em; }\n.dz-reading-lamp-shell .col p.first { text-indent: 0; }\n.dz-reading-lamp-shell .col a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); }\n.dz-reading-lamp-shell .ft { display: flex; align-items: baseline; gap: 20px; margin-top: 52px; padding-top: 20px; border-top: 1px solid var(--border); }\n.dz-reading-lamp-shell .nx { font-family: var(--pv-display); font-weight: 600; font-size: 21px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); }\n.dz-reading-lamp-shell .mn { font-family: var(--pv-mono); font-size: 13.5px; color: var(--muted-foreground); margin-left: auto; }\n.dz-reading-lamp-shell .ab { margin-top: 72px; }\n.dz-reading-lamp-shell .ln { font-size: 15px; line-height: 1.6; text-indent: 0; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-reading-lamp-shell *, .dz-reading-lamp-shell *::before, .dz-reading-lamp-shell *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/reading-lamp.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&family=Cutive+Mono:wght@400;500;600;700&display=swap"
}