{
  "id": "midnight-reel-seats",
  "name": "Seat Picker",
  "theme": "midnight-reel",
  "category": "Commerce",
  "description": "Choosing a seat in a dark room: the auditorium plan is drawn in hairlines and the only brass on the screen is the seat you have picked.",
  "layout": "A curved seat map occupying the left two thirds with the screen drawn as a wide arc at the top, and a fixed 300px booking column on the right that never scrolls away.",
  "modules": [
    {
      "key": "head",
      "name": "Screening header",
      "html": "\n<header class=\"hd\"><div><span class=\"k\">Friday 4 September · 20:45</span><h1>Stalker</h1><span class=\"m\">1979 · 161 min · 35mm · Screen 1</span></div><a class=\"und\" href=\"#\">Change screening</a></header>"
    },
    {
      "key": "plan",
      "name": "Auditorium plan",
      "html": "\n<section class=\"pn\"><div class=\"scr\">Screen</div>\n<div class=\"rows\">\n  <div class=\"row\"><span class=\"rl\">A</span><i></i><i></i><i class=\"x\"></i><i class=\"x\"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">B</span><i></i><i></i><i></i><i></i><i class=\"x\"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">C</span><i class=\"x\"></i><i class=\"x\"></i><i></i><i></i><i></i><i class=\"s\"></i><i class=\"s\"></i><i></i><i></i><i></i><i class=\"x\"></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">D</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">E</span><i></i><i class=\"x\"></i><i class=\"x\"></i><i class=\"x\"></i><i></i><i></i><i></i><i></i><i class=\"x\"></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">F</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n</div>\n<div class=\"lgd\"><span><i class=\"k1\"></i>free</span><span><i class=\"k2\"></i>taken</span><span><i class=\"k3\"></i>yours</span></div></section>"
    },
    {
      "key": "booking",
      "name": "Booking column",
      "html": "\n<aside class=\"bk\"><span class=\"k\">Your seats</span>\n<ul><li><b>C6</b><span class=\"m\">Standard · £11.00</span></li><li><b>C7</b><span class=\"m\">Member · £5.00</span></li></ul>\n<dl><div><dt>Tickets</dt><dd>£16.00</dd></div><div><dt>Booking fee</dt><dd>£0.00</dd></div><div class=\"tot\"><dt>Total</dt><dd>£16.00</dd></div></dl>\n<button type=\"button\" class=\"go\">Hold these seats</button>\n<p class=\"fine\">Seats are held for eight minutes. Members never pay a booking fee.</p></aside>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "midnight-reel-seats",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:45:54+09:00",
    "updatedAt": "2026-09-01T19:45:54+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/midnight-reel-seats.json",
  "structure": "A curved seat map occupying the left two thirds with the screen drawn as a wide arc at the top, and a fixed 300px booking column on the right that never scrolls away.",
  "html": "<div class=\"dz dz-midnight-reel-seats\" data-design=\"midnight-reel-seats\" data-theme=\"midnight-reel\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Screening header\">\n<header class=\"hd\"><div><span class=\"k\">Friday 4 September · 20:45</span><h1>Stalker</h1><span class=\"m\">1979 · 161 min · 35mm · Screen 1</span></div><a class=\"und\" href=\"#\">Change screening</a></header></section><section class=\"dz-mod\" data-mod=\"plan\" aria-label=\"Auditorium plan\">\n<section class=\"pn\"><div class=\"scr\">Screen</div>\n<div class=\"rows\">\n  <div class=\"row\"><span class=\"rl\">A</span><i></i><i></i><i class=\"x\"></i><i class=\"x\"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">B</span><i></i><i></i><i></i><i></i><i class=\"x\"></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">C</span><i class=\"x\"></i><i class=\"x\"></i><i></i><i></i><i></i><i class=\"s\"></i><i class=\"s\"></i><i></i><i></i><i></i><i class=\"x\"></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">D</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">E</span><i></i><i class=\"x\"></i><i class=\"x\"></i><i class=\"x\"></i><i></i><i></i><i></i><i></i><i class=\"x\"></i><i></i><i></i><i></i></div>\n  <div class=\"row\"><span class=\"rl\">F</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>\n</div>\n<div class=\"lgd\"><span><i class=\"k1\"></i>free</span><span><i class=\"k2\"></i>taken</span><span><i class=\"k3\"></i>yours</span></div></section></section><section class=\"dz-mod\" data-mod=\"booking\" aria-label=\"Booking column\">\n<aside class=\"bk\"><span class=\"k\">Your seats</span>\n<ul><li><b>C6</b><span class=\"m\">Standard · £11.00</span></li><li><b>C7</b><span class=\"m\">Member · £5.00</span></li></ul>\n<dl><div><dt>Tickets</dt><dd>£16.00</dd></div><div><dt>Booking fee</dt><dd>£0.00</dd></div><div class=\"tot\"><dt>Total</dt><dd>£16.00</dd></div></dl>\n<button type=\"button\" class=\"go\">Hold these seats</button>\n<p class=\"fine\">Seats are held for eight minutes. Members never pay a booking fee.</p></aside></section>\n</div>",
  "css": "\n.dz-midnight-reel-seats { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 44px; padding: 0 40px 36px; }\n.dz-midnight-reel-seats .hd { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 26px 0 20px; border-bottom: var(--pv-bw) solid var(--border); margin-bottom: 30px; }\n.dz-midnight-reel-seats .k { font-size: 12.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-seats .hd h1 { font-family: var(--pv-display); font-size: 42px; font-weight: 500; margin: 8px 0 6px; }\n.dz-midnight-reel-seats .m { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-seats .und { font-size: 13px; color: var(--primary); text-decoration: none; padding-bottom: 5px; background-image: linear-gradient(var(--primary), var(--primary)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--dur-slow) var(--ease); background-size: 30% 1px; }\n.dz-midnight-reel-seats .und:hover { background-size: 100% 1px; }\n.dz-midnight-reel-seats .scr { text-align: center; font-size: 11.5px; letter-spacing: .3em; color: var(--muted-foreground); padding-bottom: 10px; border-bottom: var(--pv-bw) solid var(--border); border-radius: 50% 50% 0 0 / 100% 100% 0 0; margin: 0 60px 34px; }\n.dz-midnight-reel-seats .rows { display: flex; flex-direction: column; gap: 12px; align-items: center; }\n.dz-midnight-reel-seats .row { display: flex; align-items: center; gap: 9px; }\n.dz-midnight-reel-seats .rl { width: 18px; font-family: var(--pv-mono); font-size: 11px; color: var(--muted-foreground); }\n.dz-midnight-reel-seats .row i { width: 22px; height: 18px; border: var(--pv-bw) solid var(--border); border-radius: 3px 3px 0 0; display: block; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); cursor: pointer; }\n.dz-midnight-reel-seats .row i:hover { border-color: var(--primary); }\n.dz-midnight-reel-seats .row .x { background: color-mix(in srgb, var(--foreground) 14%, transparent); border-color: transparent; cursor: not-allowed; }\n.dz-midnight-reel-seats .row .s { background: var(--primary); border-color: var(--primary); }\n.dz-midnight-reel-seats .lgd { display: flex; justify-content: center; gap: 24px; padding-top: 28px; font-size: 12px; color: var(--muted-foreground); }\n.dz-midnight-reel-seats .lgd span { display: inline-flex; align-items: center; gap: 7px; }\n.dz-midnight-reel-seats .lgd i { width: 14px; height: 11px; border-radius: 2px 2px 0 0; display: block; }\n.dz-midnight-reel-seats .k1 { border: var(--pv-bw) solid var(--border) } .dz-midnight-reel-seats .k2 { background: color-mix(in srgb, var(--foreground) 14%, transparent) } .dz-midnight-reel-seats .k3 { background: var(--primary) }\n.dz-midnight-reel-seats .bk { border-left: var(--pv-bw) solid var(--border); padding-left: 28px; }\n.dz-midnight-reel-seats .bk ul { list-style: none; margin: 12px 0 22px; padding: 0; }\n.dz-midnight-reel-seats .bk li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-midnight-reel-seats .bk b { font-family: var(--pv-display); font-size: 21px; font-weight: 500; color: var(--primary); }\n.dz-midnight-reel-seats .bk dl { margin: 0 0 22px; }\n.dz-midnight-reel-seats .bk dl div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; color: var(--muted-foreground); }\n.dz-midnight-reel-seats .tot { border-top: var(--pv-bw) solid var(--border); margin-top: 6px; padding-top: 12px !important; color: var(--foreground) !important; font-size: 17px !important; }\n.dz-midnight-reel-seats .bk dd { margin: 0; font-family: var(--pv-mono); }\n.dz-midnight-reel-seats .go { font: inherit; font-size: 14px; width: 100%; background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: 0; padding: 13px; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }\n.dz-midnight-reel-seats .go:hover { background: var(--primary); color: var(--primary-foreground); }\n.dz-midnight-reel-seats .fine { font-size: 12px; color: var(--muted-foreground); line-height: 1.5; margin: 14px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-midnight-reel-seats *, .dz-midnight-reel-seats *::before, .dz-midnight-reel-seats *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/midnight-reel.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}