{
  "generated_from": "packages/db/.generated/system-templates.json",
  "frame_count": 59,
  "frames": [
    {
      "slug": "alert-banner",
      "name": "Alert Banner",
      "category": "announcement",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .alert { display: flex; align-items: center; justify-content: center; height: 100%; background: #dc2626; color: white; padding: 60px; }\n.alert .icon { font-size: 120px; margin-right: 60px; }\n.alert .content { text-align: left; }\n.alert h1 { font-size: 64px; margin-bottom: 20px; }\n.alert p { font-size: 32px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"alert\">\n  <div class=\"icon\">⚠️</div>\n  <div class=\"content\">\n    <h1>Important Notice</h1>\n    <p>Please read carefully</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "elevator-out-of-service",
      "name": "Elevator Out of Service",
      "category": "announcement",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .eos { height: 100%; width: 100%; display: grid; grid-template-columns: 660px minmax(0, 1fr); overflow: hidden; background: #0E1420; color: #F5F7FA; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.eos-car { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #18202F; border-right: 10px solid #F5A524; }\n.eos-plaque { flex: none; margin: 64px 60px 0; padding: 34px 40px 40px; text-align: center; border: 8px solid rgba(255, 255, 255, 0.16); border-radius: 14px; }\n.eos-car-label { font-size: 30px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.eos-car-id { margin-top: 6px; font-size: 190px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #F5A524; white-space: nowrap; overflow: hidden; }\n.eos-car-note { margin-top: 16px; font-size: 34px; font-weight: 600; line-height: 1.25; max-height: 2.5em; overflow: hidden; opacity: 0.8; }\n.eos-doors { position: relative; flex: 1 1 auto; min-height: 0; margin: 54px 60px 0; border-top: 10px solid #F5A524; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 2px, rgba(255, 255, 255, 0) 2px 26px), linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 100%); }\n.eos-seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 10px; margin-left: -5px; background: rgba(0, 0, 0, 0.55); }\n.eos-jamb { position: absolute; top: 0; bottom: 0; width: 5px; background: rgba(0, 0, 0, 0.4); }\n.eos-jamb.left { left: 0; }\n.eos-jamb.right { right: 0; }\n.eos-band { position: absolute; left: -60px; right: -60px; top: 50%; height: 156px; margin-top: -78px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(-45deg, #F5A524 0 36px, rgba(0, 0, 0, 0.78) 36px 72px); }\n.eos-band-text { max-width: 600px; padding: 14px 30px; background: #18202F; color: #F5A524; font-size: 46px; font-weight: 800; line-height: 1.1; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; max-height: 2.2em; overflow: hidden; overflow-wrap: break-word; }\n.eos-body { display: grid; grid-template-rows: 110px minmax(0, 1fr) 150px; min-width: 0; overflow: hidden; }\n.eos-rail { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0 72px; overflow: hidden; border-bottom: 4px solid rgba(255, 255, 255, 0.14); }\n.eos-eyebrow { flex: none; padding: 14px 30px; border-radius: 6px; background: #F5A524; color: #0E1420; font-size: 30px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; }\n.eos-meta { min-width: 0; font-size: 28px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.eos-main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }\n.eos-head { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: safe center; padding: 36px 72px 32px; }\n.eos-headline { margin: 0; font-size: 92px; font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; max-height: 2.32em; overflow: hidden; overflow-wrap: break-word; }\n.eos-rule { flex: none; width: 220px; height: 10px; margin: 24px 0 26px; background: #F5A524; }\n.eos-summary { margin: 0; font-size: 44px; font-weight: 500; line-height: 1.3; white-space: pre-line; max-height: 3.9em; overflow: hidden; opacity: 0.9; }\n.eos-details { flex: none; padding: 0 72px 28px; }\n.eos-row { display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: baseline; gap: 32px; padding: 18px 0; border-top: 3px solid rgba(255, 255, 255, 0.16); }\n.eos-row-label { font-size: 28px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #F5A524; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.eos-row-value { font-size: 42px; font-weight: 600; line-height: 1.16; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.eos-foot { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 0 72px; overflow: hidden; background: #F5A524; color: #0E1420; }\n.eos-contact { min-width: 0; }\n.eos-contact-label { font-size: 28px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.eos-contact-value { margin-top: 8px; font-size: 42px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.eos-authority { flex: none; max-width: 320px; font-size: 28px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; line-height: 1.22; max-height: 2.44em; overflow: hidden; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"eos\">\n  <div class=\"eos-car\">\n    <div class=\"eos-plaque\">\n      <div class=\"eos-car-label\">Elevator</div>\n      <div class=\"eos-car-id\">2</div>\n      <div class=\"eos-car-note\">North Lobby - Levels 1-8</div>\n    </div>\n    <div class=\"eos-doors\">\n      <span class=\"eos-jamb left\"></span>\n      <span class=\"eos-jamb right\"></span>\n      <span class=\"eos-seam\"></span>\n      <div class=\"eos-band\"><span class=\"eos-band-text\">Out of Service</span></div>\n    </div>\n  </div>\n  <div class=\"eos-body\">\n    <div class=\"eos-rail\">\n      <span class=\"eos-eyebrow\">Building Notice</span>\n      <span class=\"eos-meta\">Posted Sat, Aug 2 - 7:00 AM</span>\n    </div>\n    <div class=\"eos-main\">\n      <div class=\"eos-head\">\n        <h1 class=\"eos-headline\">Scheduled Maintenance</h1>\n        <div class=\"eos-rule\"></div>\n        <p class=\"eos-summary\">Elevator 2 is shut down while the door controller is replaced. All other elevators are running on their normal schedule.</p>\n      </div>\n      <div class=\"eos-details\">\n        <div class=\"eos-row\">\n          <span class=\"eos-row-label\">Expected Return</span>\n          <span class=\"eos-row-value\">Monday, Aug 4 by 12:00 PM</span>\n        </div>\n        <div class=\"eos-row\">\n          <span class=\"eos-row-label\">Use Instead</span>\n          <span class=\"eos-row-value\">Elevators 1 and 3, North Lobby</span>\n        </div>\n        <div class=\"eos-row\">\n          <span class=\"eos-row-label\">Step-Free Route</span>\n          <span class=\"eos-row-value\">Level 2 walkway to Tower B</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"eos-foot\">\n      <div class=\"eos-contact\">\n        <div class=\"eos-contact-label\">Need Assistance</div>\n        <div class=\"eos-contact-value\">Call Building Services, ext. 4120</div>\n      </div>\n      <div class=\"eos-authority\">Northgate Tower Facilities</div>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "simple-announcement-1",
      "name": "Simple Announcement 1",
      "category": "announcement",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .announcement { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-align: center; padding: 60px; }\n.announcement h1 { font-size: 72px; margin-bottom: 30px; font-weight: 700; }\n.announcement p { font-size: 36px; max-width: 80%; line-height: 1.4; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"announcement\">\n  <h1>Announcement</h1>\n  <p>Your message here</p>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "simple-announcement-2",
      "name": "Simple Announcement 2",
      "category": "announcement",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .sa2-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0A0F1E; color: #FFFFFF; font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif; }\n.sa2-stage .sa2-rail { position: absolute; top: 0; bottom: 0; left: 0; width: 22px; background: #FACC15; }\n.sa2-stage .sa2-slab { position: absolute; top: -80px; bottom: -80px; right: -90px; width: 540px; background: linear-gradient(180deg, #FACC15 0%, #F97316 100%); transform: skewX(-7deg); }\n.sa2-stage .sa2-slab-inner { position: absolute; top: 80px; bottom: 80px; left: 0; right: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; transform: skewX(7deg); }\n.sa2-stage .sa2-stamp { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; font-size: 84px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #0A0F1E; }\n.sa2-stage .sa2-frame { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 76px 590px 70px 132px; }\n.sa2-stage .sa2-top { display: flex; align-items: center; gap: 40px; }\n.sa2-stage .sa2-eyebrow { display: inline-block; flex: none; padding: 16px 34px; background: #FACC15; color: #0A0F1E; font-size: 30px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; border-radius: 4px; }\n.sa2-stage .sa2-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 28px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; }\n.sa2-stage .sa2-copy { min-height: 0; }\n.sa2-stage .sa2-title { margin: 0; max-height: 2.88em; overflow: hidden; font-size: 146px; font-weight: 800; line-height: 0.96; letter-spacing: -0.015em; text-transform: uppercase; overflow-wrap: break-word; }\n.sa2-stage .sa2-rule { height: 14px; margin: 40px 0 38px; background: #FACC15; }\n.sa2-stage .sa2-message { margin: 0; white-space: pre-line; max-width: 1060px; max-height: 5.28em; overflow: hidden; font-size: 54px; font-weight: 500; line-height: 1.32; }\n.sa2-stage .sa2-foot { display: flex; align-items: center; gap: 22px; }\n.sa2-stage .sa2-foot-mark { width: 22px; height: 22px; flex: none; background: #FACC15; }\n.sa2-stage .sa2-foot-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 30px; font-weight: 600; letter-spacing: 0.05em; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"sa2-stage\">\n  <div class=\"sa2-rail\"></div>\n  <div class=\"sa2-slab\">\n    <div class=\"sa2-slab-inner\"><span class=\"sa2-stamp\">Aug 12</span></div>\n  </div>\n  <div class=\"sa2-frame\">\n    <div class=\"sa2-top\">\n      <span class=\"sa2-eyebrow\">Staff Notice</span>\n      <span class=\"sa2-meta\">Posted by Facilities</span>\n    </div>\n    <div class=\"sa2-copy\">\n      <h1 class=\"sa2-title\">Office Closed Friday</h1>\n      <div class=\"sa2-rule\"></div>\n      <p class=\"sa2-message\">The building will be closed all day for scheduled electrical work. Normal hours resume Monday at 8:00 AM.</p>\n    </div>\n    <div class=\"sa2-foot\">\n      <span class=\"sa2-foot-mark\"></span>\n      <span class=\"sa2-foot-text\">Questions? Ask the front desk.</span>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "countdown-timer-1",
      "name": "Countdown Timer 1",
      "category": "countdown",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .countdown { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #0f172a; color: white; }\n.countdown h1 { font-size: 56px; margin-bottom: 60px; }\n.countdown .timer { display: flex; gap: 40px; margin-bottom: 60px; transition: opacity 0.5s; }\n.countdown .unit { background: #1e293b; padding: 40px 50px; border-radius: 20px; text-align: center; min-width: 160px; }\n.countdown .value { display: block; font-size: 80px; font-weight: 700; color: #3b82f6; font-variant-numeric: tabular-nums; }\n.countdown .label { font-size: 24px; color: #64748b; text-transform: uppercase; }\n.countdown p { font-size: 32px; color: #94a3b8; }\n.countdown .expired { color: #f59e0b; font-size: 36px; margin-top: 20px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"countdown\">\n  <h1>Product Launch</h1>\n  <div class=\"timer\">\n    <div class=\"unit\"><span class=\"value\" id=\"days\">00</span><span class=\"label\">Days</span></div>\n    <div class=\"unit\"><span class=\"value\" id=\"hours\">00</span><span class=\"label\">Hours</span></div>\n    <div class=\"unit\"><span class=\"value\" id=\"minutes\">00</span><span class=\"label\">Minutes</span></div>\n    <div class=\"unit\"><span class=\"value\" id=\"seconds\">00</span><span class=\"label\">Seconds</span></div>\n  </div>\n  <p>Get ready for something amazing</p>\n  <p class=\"expired\" id=\"expired\" style=\"display:none;\">The countdown has ended!</p>\n</div>\n<script>\n(function() {\n  const mode = \"duration\";\n  const targetDate = \"2030-01-01\";\n  const targetTime = \"18:00\";\n  const timezone = \"America/New_York\";\n  const durationDays = parseInt(\"14\") || 0;\n  const durationHours = parseInt(\"06\") || 0;\n  const durationMinutes = parseInt(\"30\") || 0;\n  const durationSeconds = parseInt(\"00\") || 0;\n  \n  let endTime;\n  \n  if (mode === \"duration\") {\n    const totalMs = ((durationDays * 24 * 60 * 60) + (durationHours * 60 * 60) + (durationMinutes * 60) + durationSeconds) * 1000;\n    endTime = Date.now() + totalMs;\n  } else {\n    const dateTimeStr = targetDate + \"T\" + (targetTime || \"00:00\") + \":00\";\n    if (timezone && timezone !== \"local\") {\n      try {\n        var _d = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(targetDate);\n        var _t = /^(\\d{1,2}):(\\d{2})/.exec(targetTime || \"00:00\");\n        if (!_d || !_t) throw new Error(\"unparseable target\");\n        var _off = function (ms) {\n          var f = new Intl.DateTimeFormat(\"en-US\", { timeZone: timezone, hour12: false, year: \"numeric\", month: \"2-digit\", day: \"2-digit\", hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }).formatToParts(new Date(ms));\n          var q = {};\n          for (var i = 0; i < f.length; i++) q[f[i].type] = f[i].value;\n          return Date.UTC(+q.year, +q.month - 1, +q.day, (+q.hour) % 24, +q.minute, +q.second) - ms;\n        };\n        var _naive = Date.UTC(+_d[1], +_d[2] - 1, +_d[3], +_t[1], +_t[2], 0);\n        endTime = _naive - _off(_naive - _off(_naive));\n      } catch (e) {\n        endTime = new Date(dateTimeStr).getTime();\n      }\n    } else {\n      endTime = new Date(dateTimeStr).getTime();\n    }\n  }\n  \n  function updateCountdown() {\n    const now = Date.now();\n    let diff = Math.max(0, endTime - now);\n    \n    if (diff <= 0) {\n      document.getElementById(\"days\").textContent = \"00\";\n      document.getElementById(\"hours\").textContent = \"00\";\n      document.getElementById(\"minutes\").textContent = \"00\";\n      document.getElementById(\"seconds\").textContent = \"00\";\n      document.querySelector(\".timer\").style.opacity = \"0.5\";\n      document.getElementById(\"expired\").style.display = \"block\";\n      return;\n    }\n    \n    const days = Math.floor(diff / (1000 * 60 * 60 * 24));\n    diff -= days * (1000 * 60 * 60 * 24);\n    const hours = Math.floor(diff / (1000 * 60 * 60));\n    diff -= hours * (1000 * 60 * 60);\n    const minutes = Math.floor(diff / (1000 * 60));\n    diff -= minutes * (1000 * 60);\n    const seconds = Math.floor(diff / 1000);\n    \n    document.getElementById(\"days\").textContent = String(days).padStart(2, \"0\");\n    document.getElementById(\"hours\").textContent = String(hours).padStart(2, \"0\");\n    document.getElementById(\"minutes\").textContent = String(minutes).padStart(2, \"0\");\n    document.getElementById(\"seconds\").textContent = String(seconds).padStart(2, \"0\");\n  }\n  \n  updateCountdown();\n  setInterval(updateCountdown, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "countdown-timer-2",
      "name": "Countdown Timer 2",
      "category": "countdown",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .cd2 { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: #12131A; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.cd2-head { flex: 0 0 auto; background: #FF4D1A; color: #12131A; padding: 24px 60px 30px; }\n.cd2-badge { font-size: 34px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 12px; }\n.cd2-title { font-family: Rockwell, \"Rockwell Nova\", \"Roboto Slab\", \"Bookman Old Style\", \"Noto Serif\", \"DejaVu Serif\", \"Times New Roman\", serif; font-size: 116px; font-weight: 700; line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; }\n.cd2-blocks { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; padding: 14px; }\n.cd2-block { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: #F5F1E8; overflow: hidden; }\n.cd2-block:first-child { flex-grow: 1.3; }\n.cd2-num { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 40px 6px 0; font-family: Rockwell, \"Rockwell Nova\", \"Roboto Slab\", \"Bookman Old Style\", \"Noto Serif\", \"DejaVu Serif\", \"Times New Roman\", serif; font-size: 300px; font-weight: 700; line-height: 0.82; letter-spacing: -0.035em; color: #12131A; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }\n.cd2-unit { flex: 0 0 auto; background: #FF4D1A; color: #12131A; font-size: 40px; font-weight: 800; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; text-align: center; padding: 20px 10px 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cd2-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding: 28px 60px 32px; border-top: 14px solid #FF4D1A; }\n.cd2-sub { flex: 1 1 620px; min-width: 0; font-size: 46px; font-weight: 700; line-height: 1.08; color: #F5F1E8; }\n.cd2-when { flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }\n.cd2-chip { background: #FF4D1A; color: #12131A; font-size: 32px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px 16px; white-space: nowrap; }\n.cd2-tz { text-transform: none; letter-spacing: 0.02em; }\n.cd2-expired { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 0 80px; background: #12131A; color: #FF4D1A; font-size: 130px; font-weight: 800; line-height: 1.05; }\n.cd2 { position: relative; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"cd2\">\n  <header class=\"cd2-head\">\n    <p class=\"cd2-badge\">Counting down to</p>\n    <h1 class=\"cd2-title\">Product Launch</h1>\n  </header>\n  <div class=\"cd2-blocks\">\n    <div class=\"cd2-block\">\n      <div class=\"cd2-num\" id=\"cd2-days\">14</div>\n      <div class=\"cd2-unit\">Days</div>\n    </div>\n    <div class=\"cd2-block\">\n      <div class=\"cd2-num\" id=\"cd2-hours\">06</div>\n      <div class=\"cd2-unit\">Hours</div>\n    </div>\n    <div class=\"cd2-block\">\n      <div class=\"cd2-num\" id=\"cd2-minutes\">30</div>\n      <div class=\"cd2-unit\">Minutes</div>\n    </div>\n    <div class=\"cd2-block\">\n      <div class=\"cd2-num\" id=\"cd2-seconds\">00</div>\n      <div class=\"cd2-unit\">Seconds</div>\n    </div>\n  </div>\n  <footer class=\"cd2-foot\">\n    <p class=\"cd2-sub\">Get ready for something amazing</p>\n    <div class=\"cd2-when\">\n      <span class=\"cd2-chip\">2030-01-01</span>\n      <span class=\"cd2-chip\">18:00</span>\n      <span class=\"cd2-chip cd2-tz\">America/New_York</span>\n    </div>\n  </footer>\n  <div class=\"cd2-expired\" id=\"cd2-expired\">The countdown has ended!</div>\n</div>\n<script>\n(function () {\n  var mode = \"duration\";\n    if (mode === \"duration\") { var _w = document.querySelector(\".cd2-when\"); if (_w) _w.style.display = \"none\"; }\n  var targetDate = \"2030-01-01\";\n  var targetTime = \"18:00\";\n  var timezone = \"America/New_York\";\n  var d0 = parseInt(\"14\") || 0;\n  var h0 = parseInt(\"06\") || 0;\n  var m0 = parseInt(\"30\") || 0;\n  var s0 = parseInt(\"00\") || 0;\n\n  var endTime;\n  if (mode === \"duration\") {\n    endTime = Date.now() + (((d0 * 24 + h0) * 60 + m0) * 60 + s0) * 1000;\n  } else {\n    var str = targetDate + \"T\" + (targetTime || \"00:00\") + \":00\";\n    if (timezone && timezone !== \"local\") {\n      try {\n        var _d = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(targetDate);\n        var _t = /^(\\d{1,2}):(\\d{2})/.exec(targetTime || \"00:00\");\n        if (!_d || !_t) throw new Error(\"unparseable target\");\n        var _off = function (ms) {\n          var f = new Intl.DateTimeFormat(\"en-US\", { timeZone: timezone, hour12: false, year: \"numeric\", month: \"2-digit\", day: \"2-digit\", hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }).formatToParts(new Date(ms));\n          var q = {};\n          for (var i = 0; i < f.length; i++) q[f[i].type] = f[i].value;\n          return Date.UTC(+q.year, +q.month - 1, +q.day, (+q.hour) % 24, +q.minute, +q.second) - ms;\n        };\n        var _naive = Date.UTC(+_d[1], +_d[2] - 1, +_d[3], +_t[1], +_t[2], 0);\n        endTime = _naive - _off(_naive - _off(_naive));\n      } catch (e) { endTime = new Date(str).getTime(); }\n    } else { endTime = new Date(str).getTime(); }\n  }\n\n  function put(id, v) {\n    var el = document.getElementById(id);\n    if (el) el.textContent = String(v).padStart(2, \"0\");\n  }\n\n  function tick() {\n    var diff = Math.max(0, endTime - Date.now());\n    if (!isFinite(endTime)) return;   // unparseable date: leave the defaults on screen\n    if (diff <= 0) {\n      put(\"cd2-days\", 0); put(\"cd2-hours\", 0); put(\"cd2-minutes\", 0); put(\"cd2-seconds\", 0);\n      var ex = document.getElementById(\"cd2-expired\");\n      if (ex) ex.style.display = \"flex\";\n      return;\n    }\n    var day = Math.floor(diff / 86400000); diff -= day * 86400000;\n    var hr  = Math.floor(diff / 3600000);  diff -= hr * 3600000;\n    var mi  = Math.floor(diff / 60000);    diff -= mi * 60000;\n    put(\"cd2-days\", day); put(\"cd2-hours\", hr); put(\"cd2-minutes\", mi);\n    put(\"cd2-seconds\", Math.floor(diff / 1000));\n  }\n\n  tick();\n  setInterval(tick, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "custom-text-block",
      "name": "Custom Text Block",
      "category": "custom",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .canvas { height: 100%; display: flex; align-items: center; justify-content: center; background: #1e293b; color: #ffffff; padding: 60px; font-family: system-ui, -apple-system, sans-serif; text-align: center; }\n.canvas .content { max-width: 80%; }\n.canvas .title { font-size: 72px; margin-bottom: 30px; font-weight: 700; line-height: 1.2; }\n.canvas .body { font-size: 36px; line-height: 1.5; white-space: pre-line; opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"canvas\">\n  <div class=\"content\">\n    <h1 class=\"title\">Your Title</h1>\n    <p class=\"body\">Add your message here.\nLine breaks are preserved.</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "full-screen-image",
      "name": "Full Screen Image",
      "category": "custom",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .fullscreen { height: 100%; background-image: url(/img/demo-scenic.svg); background-size: cover; background-position: center; display: flex; align-items: flex-end; }\n.fullscreen .overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 60px; color: white; }\n.fullscreen h1 { font-size: 64px; margin-bottom: 10px; }\n.fullscreen p { font-size: 32px; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"fullscreen\">\n  <div class=\"overlay\">\n    <h1>Welcome to Northwind</h1>\n    <p>Open daily from 7am</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "logo-display",
      "name": "Logo Display",
      "category": "custom",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .logo-display { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #ffffff; }\n.logo-display .logo { max-width: 60%; max-height: 50%; object-fit: contain; margin-bottom: 40px; }\n.logo-display .tagline { font-size: 36px; color: #1e293b; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"logo-display\">\n  <img src=\"/img/demo-logo.svg\" alt=\"Logo\" class=\"logo\">\n  <p class=\"tagline\">Your Company Tagline</p>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "split-screen",
      "name": "Split Screen",
      "category": "custom",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .split { display: flex; height: 100%; }\n.split .left { background: #3b82f6; }\n.split .right { background: #8b5cf6; }\n.split .left, .split .right { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px; color: white; }\n.split h1 { font-size: 56px; margin-bottom: 30px; }\n.split p { font-size: 32px; line-height: 1.5; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"split\">\n  <div class=\"left\">\n    <h1>Section One</h1>\n    <p>Content for the left side</p>\n  </div>\n  <div class=\"right\">\n    <h1>Section Two</h1>\n    <p>Content for the right side</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "event-announcement-1",
      "name": "Event Announcement 1",
      "category": "event",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .event { display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%); color: white; gap: 80px; }\n.event .date { background: #3b82f6; padding: 40px 60px; border-radius: 20px; text-align: center; }\n.event .month { display: block; font-size: 32px; text-transform: uppercase; }\n.event .day { display: block; font-size: 96px; font-weight: 700; }\n.event .details h1 { font-size: 64px; margin-bottom: 20px; }\n.event .time { font-size: 36px; color: #60a5fa; margin-bottom: 10px; }\n.event .location { font-size: 28px; color: #94a3b8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"event\">\n  <div class=\"date\">\n    <span class=\"month\">DEC</span>\n    <span class=\"day\">25</span>\n  </div>\n  <div class=\"details\">\n    <h1>Holiday Party</h1>\n    <p class=\"time\">6:00 PM - 10:00 PM</p>\n    <p class=\"location\">📍 Main Conference Room</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "event-announcement-2",
      "name": "Event Announcement 2",
      "category": "event",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .evt2 { display: flex; height: 100%; width: 100%; overflow: hidden; font-family: system-ui, sans-serif; background: #f4f1ea; }\n.evt2-when { flex: 0 0 38%; display: flex; flex-direction: column; justify-content: space-between; padding: 78px 70px 0; overflow: hidden; color: #ffffff; background-image: repeating-linear-gradient(158deg, rgba(255,255,255,0.07) 0 3px, rgba(255,255,255,0) 3px 30px), linear-gradient(158deg, #e8380d 0%, #8a0f3c 100%); }\n.evt2-badge { align-self: flex-start; padding: 18px 30px; border: 4px solid rgba(255,255,255,0.85); border-radius: 999px; font-size: 30px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; }\n.evt2-stamp { flex: 0 1 auto; min-height: 0; overflow: hidden; }\n.evt2-weekday { font-size: 54px; font-weight: 700; letter-spacing: 10px; text-transform: uppercase; }\n.evt2-monthyear { display: flex; align-items: baseline; gap: 24px; margin-top: 6px; }\n.evt2-month { font-size: 96px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; }\n.evt2-year { font-size: 50px; font-weight: 600; letter-spacing: 6px; }\n.evt2-day { font-size: 400px; font-weight: 800; line-height: 0.84; letter-spacing: -16px; }\n.evt2-time { flex: 0 0 auto; height: 340px; margin: 0 -70px; padding: 0 70px; display: flex; flex-direction: column; justify-content: center; border-top: 5px solid rgba(255, 255, 255, 0.5); }\n.evt2-time-label { font-size: 28px; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; margin-bottom: 14px; }\n.evt2-time-value { font-size: 58px; font-weight: 700; }\n.evt2-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border-left: 18px solid #e8380d; background: #f4f1ea; color: #12100e; }\n.evt2-head { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: safe center; padding: 60px 64px; }\n.evt2-title { font-size: 145px; font-weight: 800; line-height: 0.92; letter-spacing: -5px; text-transform: uppercase; overflow-wrap: break-word; }\n.evt2-rule { flex: 0 0 auto; height: 12px; margin: 42px 0 38px; background: #e8380d; }\n.evt2-subtitle { font-size: 44px; font-weight: 500; line-height: 1.3; opacity: 0.72; }\n.evt2-foot { flex: 0 0 auto; height: 340px; display: flex; flex-direction: column; justify-content: center; padding: 0 64px; background: #12100e; color: #f4f1ea; }\n.evt2-location { display: flex; align-items: center; gap: 26px; }\n.evt2-pin { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 11px solid #e8380d; }\n.evt2-place { font-size: 56px; font-weight: 700; }\n.evt2-cta { align-self: flex-start; margin-top: 40px; padding: 22px 38px; border-radius: 8px; background: #e8380d; color: #12100e; font-size: 34px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"evt2\">\n  <div class=\"evt2-when\">\n    <div class=\"evt2-badge\">You&#039;re Invited</div>\n    <div class=\"evt2-stamp\">\n      <div class=\"evt2-weekday\">Friday</div>\n      <div class=\"evt2-monthyear\">\n        <span class=\"evt2-month\">DEC</span>\n        <span class=\"evt2-year\">2026</span>\n      </div>\n      <div class=\"evt2-day\">25</div>\n    </div>\n    <div class=\"evt2-time\">\n      <span class=\"evt2-time-label\">Doors Open</span>\n      <span class=\"evt2-time-value\">6:00 PM - 10:00 PM</span>\n    </div>\n  </div>\n  <div class=\"evt2-what\">\n    <div class=\"evt2-head\">\n      <h1 class=\"evt2-title\">Holiday Party</h1>\n      <div class=\"evt2-rule\"></div>\n      <p class=\"evt2-subtitle\">Dinner, drinks and the annual awards</p>\n    </div>\n    <div class=\"evt2-foot\">\n      <div class=\"evt2-location\">\n        <span class=\"evt2-pin\"></span>\n        <span class=\"evt2-place\">Main Conference Room</span>\n      </div>\n      <div class=\"evt2-cta\">RSVP at the front desk</div>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "fitness-schedule",
      "name": "Fitness Schedule",
      "category": "event",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .fitness-container { display: flex; flex-direction: column; height: 100%; background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); color: #ffffff; font-family: system-ui, sans-serif; }\n.fitness-header { text-align: center; padding: 40px; background: rgba(0,0,0,0.2); color: white; }\n.fitness-header h1 { font-size: 48px; margin: 0; }\n.fitness-header p { font-size: 24px; margin: 10px 0 0; opacity: 0.9; }\n.schedule-grid { flex: 1; display: flex; flex-direction: column; padding: 30px; gap: 12px; }\n.schedule-row { display: flex; padding: 20px 30px; border-radius: 12px; font-size: 28px; }\n.schedule-row.header-row { background: rgba(255,255,255,0.15); font-weight: 600; font-size: 22px; text-transform: uppercase; letter-spacing: 1px; }\n.schedule-row:not(.header-row) { background: rgba(255,255,255,0.1); }\n.time-col { flex: 1; font-weight: 600; color: #fbbf24; }\n.class-col { flex: 2; font-weight: 600; }\n.instructor-col { flex: 1.5; opacity: 0.8; }\n.room-col { flex: 1; opacity: 0.7; text-align: right; }\n.fitness-footer { text-align: center; padding: 25px; background: rgba(0,0,0,0.2); font-size: 22px; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"fitness-container\">\n  <div class=\"fitness-header\">\n    <h1>Today&#039;s Classes</h1>\n    <p>Monday Schedule</p>\n  </div>\n  <div class=\"schedule-grid\">\n    <div class=\"schedule-row header-row\">\n      <div class=\"time-col\">Time</div>\n      <div class=\"class-col\">Class</div>\n      <div class=\"instructor-col\">Instructor</div>\n      <div class=\"room-col\">Room</div>\n    </div>\n    <div class=\"schedule-row\">\n      <div class=\"time-col\">6:00 AM</div>\n      <div class=\"class-col\">Morning Yoga</div>\n      <div class=\"instructor-col\">Sarah M.</div>\n      <div class=\"room-col\">Studio A</div>\n    </div>\n    <div class=\"schedule-row\">\n      <div class=\"time-col\">8:00 AM</div>\n      <div class=\"class-col\">HIIT Training</div>\n      <div class=\"instructor-col\">Mike T.</div>\n      <div class=\"room-col\">Main Floor</div>\n    </div>\n    <div class=\"schedule-row\">\n      <div class=\"time-col\">10:00 AM</div>\n      <div class=\"class-col\">Spin Class</div>\n      <div class=\"instructor-col\">Lisa K.</div>\n      <div class=\"room-col\">Cycle Room</div>\n    </div>\n    <div class=\"schedule-row\">\n      <div class=\"time-col\">12:00 PM</div>\n      <div class=\"class-col\">Pilates</div>\n      <div class=\"instructor-col\">Emma R.</div>\n      <div class=\"room-col\">Studio B</div>\n    </div>\n    <div class=\"schedule-row\">\n      <div class=\"time-col\">5:30 PM</div>\n      <div class=\"class-col\">CrossFit</div>\n      <div class=\"instructor-col\">Jake P.</div>\n      <div class=\"room-col\">Main Floor</div>\n    </div>\n  </div>\n  <div class=\"fitness-footer\">Sign up at the front desk or via our app</div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "meeting-room-1",
      "name": "Meeting Room 1",
      "category": "event",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .room { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 60px; color: white; }\n.room.available { background: #16a34a; }\n.room.busy { background: #dc2626; }\n.room h1 { font-size: 56px; margin-bottom: 30px; }\n.room .status-badge { font-size: 72px; font-weight: 700; margin-bottom: 60px; }\n.room .current, .room .next { text-align: center; margin: 20px 0; }\n.room .label { font-size: 24px; opacity: 0.8; }\n.room .meeting { font-size: 32px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"room available\">\n  <h1>Conference Room A</h1>\n  <div class=\"status-badge\">AVAILABLE</div>\n  <div class=\"current\">\n    <p class=\"label\">Now</p>\n    <p class=\"meeting\">Open for booking</p>\n  </div>\n  <div class=\"next\">\n    <p class=\"label\">Next: 2:00 PM</p>\n    <p class=\"meeting\">Team Standup</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "meeting-room-2",
      "name": "Meeting Room 2",
      "category": "event",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .mr2 { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px minmax(0, 1fr) auto; overflow: hidden; background: #0b1014; color: #ffffff; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.mr2 .topbar { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 0 80px; overflow: hidden; border-bottom: 6px solid #ffb703; }\n.mr2 .roomname { flex: 1 1 auto; min-width: 0; font-size: 110px; line-height: 1.05; font-weight: 800; letter-spacing: -3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mr2 .meta { flex: 0 1 auto; max-width: 520px; text-align: right; font-size: 28px; font-weight: 600; letter-spacing: 3px; line-height: 1.3; text-transform: uppercase; color: #9fb2c0; }\n.mr2 .state { display: grid; grid-template-columns: minmax(0, 1fr) 680px; align-items: center; gap: 64px; padding: 0 80px; overflow: hidden; background: #16d67a; color: #06210f; }\n.mr2.busy .state { background: #ff2d2d; color: #1a0505; }\n.mr2 .stateword { font-size: 160px; line-height: 0.84; font-weight: 900; letter-spacing: -4px; text-transform: uppercase; }\n.mr2 .statenow { min-width: 0; padding: 40px 44px; background: #0b1014; border-left: 12px solid #ffb703; }\n.mr2 .nowlabel { display: block; font-size: 28px; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; color: #ffb703; }\n.mr2 .nowtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 14px; max-height: 120px; overflow: hidden; font-size: 54px; font-weight: 700; line-height: 1.1; color: #ffffff; }\n.mr2 .nowtime { display: block; margin-top: 12px; font-size: 34px; font-weight: 500; color: #9fb2c0; }\n.mr2 .board { background: #0b1014; }\n.mr2 .boardtop { display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 80px; overflow: hidden; }\n.mr2 .sched { flex: 0 1 auto; font-size: 30px; font-weight: 800; letter-spacing: 10px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffb703; }\n.mr2 .rule { flex: 1 1 auto; height: 4px; background: rgba(255, 255, 255, 0.16); }\n.mr2 .row { display: grid; grid-template-columns: 300px minmax(0, 1fr) 420px; align-items: center; gap: 40px; height: 110px; padding: 0 80px; border-top: 2px solid rgba(255, 255, 255, 0.1); }\n.mr2 .rows .row:nth-child(even) { background: rgba(255, 255, 255, 0.035); }\n.mr2 .row .c-time { font-size: 54px; font-weight: 800; letter-spacing: -1px; color: #ffb703; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }\n.mr2 .row .c-title { font-size: 50px; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mr2 .row .c-host { font-size: 38px; font-weight: 500; text-align: right; color: #93a5b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.mr2 .row.head { height: 64px; border-top: none; background: none; }\n.mr2 .row.head span { font-size: 26px; font-weight: 700; letter-spacing: 8px; text-transform: uppercase; color: #8ea0ad; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"mr2 available\">\n  <div class=\"topbar\">\n    <div class=\"roomname\">Conference Room A</div>\n    <div class=\"meta\">Level 3 · Seats 14</div>\n  </div>\n  <div class=\"state\">\n    <div class=\"stateword\">AVAILABLE</div>\n    <div class=\"statenow\">\n      <span class=\"nowlabel\">Now</span>\n      <span class=\"nowtitle\">Open for booking</span>\n      <span class=\"nowtime\">Free until 2:00 PM</span>\n    </div>\n  </div>\n  <div class=\"board\">\n    <div class=\"boardtop\">\n      <span class=\"sched\">Up Next Today</span>\n      <span class=\"rule\"></span>\n    </div>\n    <div class=\"rows\">\n      <div class=\"row head\">\n        <span class=\"c-time\">Time</span>\n        <span class=\"c-title\">Meeting</span>\n        <span class=\"c-host\">Host</span>\n      </div>\n      <div class=\"row\">\n        <span class=\"c-time\">2:00 PM</span>\n        <span class=\"c-title\">Team Standup</span>\n        <span class=\"c-host\">Priya Raman</span>\n      </div>\n      <div class=\"row\">\n        <span class=\"c-time\">2:45 PM</span>\n        <span class=\"c-title\">Quarterly Roadmap Review</span>\n        <span class=\"c-host\">Marcus Webb</span>\n      </div>\n      <div class=\"row\">\n        <span class=\"c-time\">4:15 PM</span>\n        <span class=\"c-title\">Client Onboarding — Northwind</span>\n        <span class=\"c-host\">Sales Team</span>\n      </div>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "town-hall-reminder",
      "name": "Town Hall Reminder",
      "category": "event",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .thr { height: 100%; width: 100%; display: grid; grid-template-rows: 14px 116px minmax(0, 1fr) 356px 252px; overflow: hidden; background: #101A2C; color: #F5F1E6; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.thr .thr-seal { background: #C9A227; }\n.thr .thr-rail { display: flex; align-items: center; gap: 32px; padding: 0 80px; overflow: hidden; border-bottom: 4px solid #C9A227; }\n.thr .thr-mark { flex: none; width: 20px; height: 54px; background: #C9A227; }\n.thr .thr-org { flex: 1 1 auto; min-width: 0; font-size: 40px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-notice { flex: 0 1 auto; max-width: 780px; font-size: 32px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: #C9A227; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-lead { min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 80px; overflow: hidden; }\n.thr .thr-kicker { font-size: 32px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #C9A227; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-title { margin-top: 18px; font-family: Georgia, \"Noto Serif\", \"DejaVu Serif\", \"Liberation Serif\", \"Times New Roman\", serif; font-size: 108px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-host { margin-top: 16px; font-size: 42px; font-weight: 500; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-when { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; padding: 0 56px; overflow: hidden; background: #F5F1E6; color: #101A2C; border-top: 8px solid #C9A227; border-bottom: 8px solid #C9A227; }\n.thr .thr-when-cell { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; overflow: hidden; }\n.thr .thr-when-cell + .thr-when-cell { border-left: 4px solid #C9A227; }\n.thr .thr-when-label { font-size: 30px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-when-value { margin-top: 14px; font-size: 88px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-when-detail { margin-top: 14px; font-size: 46px; font-weight: 600; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.7fr); gap: 44px; padding: 40px 80px; overflow: hidden; }\n.thr .thr-fact { min-width: 0; display: flex; flex-direction: column; padding-left: 28px; border-left: 6px solid #C9A227; overflow: hidden; }\n.thr .thr-fact-label { font-size: 30px; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: #C9A227; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.thr .thr-fact-value { margin-top: 16px; font-size: 42px; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }\n.thr .thr-kicker:empty, .thr .thr-host:empty, .thr .thr-when-detail:empty, .thr .thr-fact-label:empty { display: none; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"thr\">\n  <div class=\"thr-seal\"></div>\n  <header class=\"thr-rail\">\n    <span class=\"thr-mark\"></span>\n    <span class=\"thr-org\">Northwind Logistics</span>\n    <span class=\"thr-notice\">Company-Wide Notice</span>\n  </header>\n  <section class=\"thr-lead\">\n    <p class=\"thr-kicker\">All Employees Are Invited</p>\n    <h1 class=\"thr-title\">Q3 Town Hall</h1>\n    <p class=\"thr-host\">Hosted by Dana Whitfield, Chief Executive</p>\n  </section>\n  <section class=\"thr-when\">\n    <div class=\"thr-when-cell\">\n      <span class=\"thr-when-label\">Date</span>\n      <span class=\"thr-when-value\">October 16, 2026</span>\n      <span class=\"thr-when-detail\">Thursday</span>\n    </div>\n    <div class=\"thr-when-cell\">\n      <span class=\"thr-when-label\">Time</span>\n      <span class=\"thr-when-value\">10:00 – 11:30 AM</span>\n      <span class=\"thr-when-detail\">Pacific Time</span>\n    </div>\n  </section>\n  <footer class=\"thr-facts\">\n    <div class=\"thr-fact\">\n      <span class=\"thr-fact-label\">Where</span>\n      <span class=\"thr-fact-value\">Atrium, Building C</span>\n    </div>\n    <div class=\"thr-fact\">\n      <span class=\"thr-fact-label\">Join Remotely</span>\n      <span class=\"thr-fact-value\">meet.northwind.co/townhall</span>\n    </div>\n    <div class=\"thr-fact\">\n      <span class=\"thr-fact-label\">On the Agenda</span>\n      <span class=\"thr-fact-value\">Business results, FY27 priorities, and live Q&amp;A.</span>\n    </div>\n  </footer>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "analog-clock",
      "name": "Analog Clock",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .ac { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; overflow: hidden; background: #0B1120; color: #E2E8F0; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.ac .ac-label { flex: none; max-width: 1600px; font-size: 62px; font-weight: 700; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ac .ac-stage { flex: none; width: 780px; height: 780px; }\n.ac .ac-face { display: block; width: 100%; height: 100%; }\n.ac .ac-rim { fill: #38BDF8; }\n.ac .ac-dial { fill: #111C33; }\n.ac .ac-mark { stroke: #E2E8F0; opacity: 0.55; }\n.ac .ac-mark-hour { opacity: 1; }\n.ac .ac-numeral { fill: #E2E8F0; font-size: 34px; font-weight: 700; font-family: inherit; }\n.ac .ac-hand { stroke-linecap: round; }\n.ac .ac-hour { stroke: #FFFFFF; stroke-width: 12; }\n.ac .ac-min { stroke: #FFFFFF; stroke-width: 8; }\n.ac .ac-sec { stroke: #F43F5E; stroke-width: 3; }\n.ac .ac-cap { fill: #F43F5E; }\n.ac .ac-date { flex: none; font-size: 46px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; text-align: center; opacity: 0.88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"ac\">\n  <div class=\"ac-label\">Head Office</div>\n  <div class=\"ac-stage\">\n    <svg class=\"ac-face\" viewBox=\"0 0 400 400\" preserveAspectRatio=\"xMidYMid meet\">\n      <circle class=\"ac-rim\"  cx=\"200\" cy=\"200\" r=\"194\"/>\n      <circle class=\"ac-dial\" cx=\"200\" cy=\"200\" r=\"178\"/>\n      <g id=\"ac-marks\"></g>\n      <g id=\"ac-numerals\"></g>\n      <line class=\"ac-hand ac-hour\" id=\"ac-hour\" x1=\"200\" y1=\"200\" x2=\"200\" y2=\"112\"/>\n      <line class=\"ac-hand ac-min\"  id=\"ac-min\"  x1=\"200\" y1=\"200\" x2=\"200\" y2=\"72\"/>\n      <line class=\"ac-hand ac-sec\"  id=\"ac-sec\"  x1=\"200\" y1=\"218\" x2=\"200\" y2=\"58\"/>\n      <circle class=\"ac-cap\" cx=\"200\" cy=\"200\" r=\"8\"/>\n    </svg>\n  </div>\n  <div class=\"ac-date\" id=\"ac-date\"></div>\n</div>\n<script>\n(function () {\n  \"use strict\";\n  // Only ASCII-safe identifiers cross into the script; see the module docstring.\n  var TZ        = \"Local\";\n  var STYLE     = \"numbers\";\n  var SHOW_SEC  = \"true\" === \"true\";\n  var SHOW_DATE = \"true\" === \"true\";\n\n  // Take the namespace from the <svg> already in the document rather than\n  // writing the literal URI. It is only ever compared as a string — nothing is\n  // fetched — but a bare http:// URL in a template reads as a network\n  // dependency to both the demo-frame host check and to the next human.\n  var SVGNS = document.querySelector(\".ac-face\").namespaceURI;\n  var marks = document.getElementById(\"ac-marks\");\n  var nums  = document.getElementById(\"ac-numerals\");\n  var hourH = document.getElementById(\"ac-hour\");\n  var minH  = document.getElementById(\"ac-min\");\n  var secH  = document.getElementById(\"ac-sec\");\n  var dateEl = document.getElementById(\"ac-date\");\n\n  // An unknown zone must not blank the clock. Fall back to device time, which\n  // is the only other thing we can truthfully show.\n  function zoneOK(tz) {\n    if (!tz || tz === \"Local\") return false;\n    try { new Intl.DateTimeFormat(\"en-US\", { timeZone: tz }); return true; }\n    catch (e) { return false; }\n  }\n  var useTZ = zoneOK(TZ) ? TZ : null;\n\n  function el(tag, attrs) {\n    var n = document.createElementNS(SVGNS, tag);\n    for (var k in attrs) { n.setAttribute(k, attrs[k]); }\n    return n;\n  }\n\n  // Tick marks: every minute, with the hour positions drawn longer.\n  if (STYLE !== \"none\") {\n    for (var i = 0; i < 60; i++) {\n      var isHour = i % 5 === 0;\n      if (STYLE === \"minimal\" && !isHour) continue;\n      var a = (i * 6) * Math.PI / 180;\n      var outer = 172, inner = isHour ? 152 : 164;\n      marks.appendChild(el(\"line\", {\n        x1: (200 + outer * Math.sin(a)).toFixed(2),\n        y1: (200 - outer * Math.cos(a)).toFixed(2),\n        x2: (200 + inner * Math.sin(a)).toFixed(2),\n        y2: (200 - inner * Math.cos(a)).toFixed(2),\n        \"class\": \"ac-mark\" + (isHour ? \" ac-mark-hour\" : \"\"),\n        \"stroke-width\": isHour ? 5 : 2,\n        \"stroke-linecap\": \"round\"\n      }));\n    }\n  }\n\n  var ARABIC = [\"12\",\"1\",\"2\",\"3\",\"4\",\"5\",\"6\",\"7\",\"8\",\"9\",\"10\",\"11\"];\n  var ROMAN  = [\"XII\",\"I\",\"II\",\"III\",\"IV\",\"V\",\"VI\",\"VII\",\"VIII\",\"IX\",\"X\",\"XI\"];\n  if (STYLE === \"numbers\" || STYLE === \"roman\") {\n    var set = STYLE === \"roman\" ? ROMAN : ARABIC;\n    for (var h = 0; h < 12; h++) {\n      var ang = (h * 30) * Math.PI / 180;\n      var t = el(\"text\", {\n        x: (200 + 128 * Math.sin(ang)).toFixed(2),\n        y: (200 - 128 * Math.cos(ang)).toFixed(2),\n        \"class\": \"ac-numeral\",\n        \"text-anchor\": \"middle\",\n        \"dominant-baseline\": \"central\"\n      });\n      t.textContent = set[h];\n      nums.appendChild(t);\n    }\n  }\n\n  if (!SHOW_SEC) { secH.style.display = \"none\"; }\n  if (!SHOW_DATE) { dateEl.style.display = \"none\"; }\n\n  // formatToParts avoids parsing a localised time string back into numbers.\n  function readClock(now) {\n    var opt = { hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\", hour12: false };\n    if (useTZ) { opt.timeZone = useTZ; }\n    var out = { hour: 0, minute: 0, second: 0 };\n    var parts = new Intl.DateTimeFormat(\"en-GB\", opt).formatToParts(now);\n    for (var i = 0; i < parts.length; i++) {\n      var p = parts[i];\n      if (p.type === \"hour\" || p.type === \"minute\" || p.type === \"second\") {\n        out[p.type] = parseInt(p.value, 10) || 0;\n      }\n    }\n    // hour12:false yields 24 for midnight in some engines; fold it back to 0.\n    out.hour = out.hour % 24;\n    return out;\n  }\n\n  function tick() {\n    var now = new Date();\n    var t = readClock(now);\n    var sec = t.second;\n    var min = t.minute + sec / 60;\n    var hr  = (t.hour % 12) + min / 60;\n\n    hourH.setAttribute(\"transform\", \"rotate(\" + (hr * 30).toFixed(3) + \" 200 200)\");\n    minH.setAttribute(\"transform\",  \"rotate(\" + (min * 6).toFixed(3) + \" 200 200)\");\n    if (SHOW_SEC) {\n      secH.setAttribute(\"transform\", \"rotate(\" + (sec * 6).toFixed(3) + \" 200 200)\");\n    }\n\n    if (SHOW_DATE) {\n      var d = { weekday: \"long\", month: \"long\", day: \"numeric\" };\n      if (useTZ) { d.timeZone = useTZ; }\n      dateEl.textContent = now.toLocaleDateString(undefined, d);\n    }\n  }\n\n  tick();\n  setInterval(tick, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "calendar-1",
      "name": "Calendar 1",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .calendar-container { height: 100%; display: flex; flex-direction: column; background: #1e293b; color: #ffffff; padding: 40px; font-family: system-ui, sans-serif; }\n.calendar-header { text-align: center; margin-bottom: 30px; }\n.calendar-header h1 { font-size: 48px; font-weight: 600; margin: 0; }\n.calendar-grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }\n.day-header { text-align: center; font-size: 24px; font-weight: 600; padding: 15px; color: #ffffff; opacity: 0.7; }\n#calendar-days { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }\n.day { display: flex; align-items: center; justify-content: center; font-size: 32px; padding: 20px; border-radius: 12px; background: rgba(255,255,255,0.1); }\n.day.empty { background: transparent; }\n.day.today { color: white; font-weight: 700; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"calendar-container\">\n  <div class=\"calendar-header\">\n    <h1 id=\"month-year\"></h1>\n  </div>\n  <div class=\"calendar-grid\">\n    <div class=\"day-header\">Sun</div>\n    <div class=\"day-header\">Mon</div>\n    <div class=\"day-header\">Tue</div>\n    <div class=\"day-header\">Wed</div>\n    <div class=\"day-header\">Thu</div>\n    <div class=\"day-header\">Fri</div>\n    <div class=\"day-header\">Sat</div>\n    <div id=\"calendar-days\"></div>\n  </div>\n</div>\n<script>\n(function() {\n  const highlightColor = \"#3b82f6\";\n  const now = new Date();\n  const year = now.getFullYear();\n  const month = now.getMonth();\n  const today = now.getDate();\n  \n  const monthNames = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\n  document.getElementById(\"month-year\").textContent = monthNames[month] + \" \" + year;\n  \n  const firstDay = new Date(year, month, 1).getDay();\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  \n  const container = document.getElementById(\"calendar-days\");\n  let html = \"\";\n  \n  for (let i = 0; i < firstDay; i++) {\n    html += \"<div class=\\\"day empty\\\"></div>\";\n  }\n  \n  for (let d = 1; d <= daysInMonth; d++) {\n    const isToday = d === today;\n    html += \"<div class=\\\"day\" + (isToday ? \" today\\\" style=\\\"background:\" + highlightColor + \"\\\"\" : \"\\\"\") + \">\" + d + \"</div>\";\n  }\n  \n  container.innerHTML = html;\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "calendar-2",
      "name": "Calendar 2",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .cal2-screen { height: 100%; width: 100%; display: grid; grid-template-rows: 190px 1fr 216px; background: #12151C; color: #F5F7FA; font-family: system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif; overflow: hidden; }\n.cal2-screen .cal2-band { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0 72px; border-bottom: 14px solid #FF5A36; overflow: hidden; }\n.cal2-screen .cal2-month { font-size: 118px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }\n.cal2-screen .cal2-year { font-size: 118px; font-weight: 300; line-height: 1; letter-spacing: 0.08em; color: #FF5A36; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.cal2-screen .cal2-body { display: grid; grid-template-columns: 44% 56%; min-height: 0; overflow: hidden; }\n.cal2-screen .cal2-datepanel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 72px; background: #FF5A36; color: #14100E; min-width: 0; overflow: hidden; }\n.cal2-screen .cal2-weekday { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; }\n.cal2-screen .cal2-numeral { font-size: 470px; font-weight: 800; line-height: 0.82; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; margin: 12px 0 6px; }\n.cal2-screen .cal2-datenote { font-size: 38px; font-weight: 600; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; }\n.cal2-screen .cal2-rail { display: flex; flex-direction: column; padding: 44px 72px; min-width: 0; overflow: hidden; }\n.cal2-screen .cal2-railhead { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; color: #FF5A36; margin-bottom: 26px; }\n.cal2-screen .cal2-list { list-style: none; flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); min-height: 0; }\n.cal2-screen .cal2-row { display: grid; grid-template-columns: 250px 1fr; column-gap: 32px; align-items: center; padding: 10px 0; border-top: 3px solid #FF5A36; min-width: 0; overflow: hidden; }\n.cal2-screen .cal2-row:last-child { border-bottom: 3px solid #FF5A36; }\n.cal2-screen .cal2-time { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; color: #FF5A36; font-variant-numeric: tabular-nums; }\n.cal2-screen .cal2-what { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; }\n.cal2-screen .cal2-title { font-size: 56px; font-weight: 700; line-height: 1.05; overflow-wrap: break-word; }\n.cal2-screen .cal2-place { font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; overflow-wrap: break-word; }\n.cal2-screen .cal2-foot { display: grid; grid-template-columns: repeat(3, 1fr) 1.15fr; align-items: stretch; padding: 0 72px; background: #FF5A36; color: #14100E; overflow: hidden; }\n.cal2-screen .cal2-cell { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 40px 44px 40px 0; min-width: 0; overflow: hidden; }\n.cal2-screen .cal2-cell + .cal2-cell { padding-left: 44px; border-left: 3px solid #14100E; }\n.cal2-screen .cal2-celldate { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; }\n.cal2-screen .cal2-celllabel { font-size: 32px; font-weight: 600; line-height: 1.15; overflow-wrap: break-word; }\n.cal2-screen .cal2-note { display: flex; align-items: center; padding: 40px 0 40px 44px; border-left: 3px solid #14100E; font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; min-width: 0; overflow: hidden; overflow-wrap: break-word; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"cal2-screen\">\n  <header class=\"cal2-band\">\n    <span class=\"cal2-month\">March</span>\n    <span class=\"cal2-year\">2026</span>\n  </header>\n  <div class=\"cal2-body\">\n    <section class=\"cal2-datepanel\">\n      <span class=\"cal2-weekday\">Thursday</span>\n      <span class=\"cal2-numeral\">19</span>\n      <span class=\"cal2-datenote\">Week 12 · Spring Term</span>\n    </section>\n    <section class=\"cal2-rail\">\n      <h2 class=\"cal2-railhead\">Today&#039;s Schedule</h2>\n      <ul class=\"cal2-list\">\n        <li class=\"cal2-row\">\n          <span class=\"cal2-time\">08:30</span>\n          <span class=\"cal2-what\">\n            <span class=\"cal2-title\">All-Hands Standup</span>\n            <span class=\"cal2-place\">Atrium Stage</span>\n          </span>\n        </li>\n        <li class=\"cal2-row\">\n          <span class=\"cal2-time\">10:00</span>\n          <span class=\"cal2-what\">\n            <span class=\"cal2-title\">Design Review</span>\n            <span class=\"cal2-place\">Studio B</span>\n          </span>\n        </li>\n        <li class=\"cal2-row\">\n          <span class=\"cal2-time\">13:15</span>\n          <span class=\"cal2-what\">\n            <span class=\"cal2-title\">Client Walkthrough</span>\n            <span class=\"cal2-place\">Boardroom 4</span>\n          </span>\n        </li>\n        <li class=\"cal2-row\">\n          <span class=\"cal2-time\">16:00</span>\n          <span class=\"cal2-what\">\n            <span class=\"cal2-title\">Sprint Retro</span>\n            <span class=\"cal2-place\">Studio A</span>\n          </span>\n        </li>\n      </ul>\n    </section>\n  </div>\n  <footer class=\"cal2-foot\">\n    <div class=\"cal2-cell\">\n      <span class=\"cal2-celldate\">Fri 20</span>\n      <span class=\"cal2-celllabel\">Quarterly Town Hall</span>\n    </div>\n    <div class=\"cal2-cell\">\n      <span class=\"cal2-celldate\">Mon 23</span>\n      <span class=\"cal2-celllabel\">Safety Training</span>\n    </div>\n    <div class=\"cal2-cell\">\n      <span class=\"cal2-celldate\">Wed 25</span>\n      <span class=\"cal2-celllabel\">Vendor Open House</span>\n    </div>\n    <div class=\"cal2-note\">Updated daily by Facilities</div>\n  </footer>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "digital-clock-1",
      "name": "Digital Clock 1",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .clock-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #0f172a; color: #ffffff; font-family: system-ui, sans-serif; }\n.clock-container .time { font-size: 200px; font-weight: 300; letter-spacing: -5px; line-height: 1; font-variant-numeric: tabular-nums; }\n.clock-container .ampm { font-size: 48px; font-weight: 600; margin-top: 10px; opacity: 0.8; }\n.clock-container .date { font-size: 42px; margin-top: 30px; opacity: 0.7; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"clock-container\">\n  <div class=\"time\" id=\"clock-time\">00:00</div>\n  <div class=\"ampm\" id=\"clock-ampm\"></div>\n  <div class=\"date\" id=\"clock-date\"></div>\n</div>\n<script>\n(function() {\n  const use24Hour = \"12h\" === \"24h\";\n  const showSeconds = \"false\" === \"true\";\n  const dateFormat = \"long\";\n  \n  function updateClock() {\n    const now = new Date();\n    let hours = now.getHours();\n    const minutes = String(now.getMinutes()).padStart(2, \"0\");\n    const seconds = String(now.getSeconds()).padStart(2, \"0\");\n    let ampm = \"\";\n    \n    if (!use24Hour) {\n      ampm = hours >= 12 ? \"PM\" : \"AM\";\n      hours = hours % 12 || 12;\n    }\n    \n    let timeStr = String(hours).padStart(2, \"0\") + \":\" + minutes;\n    if (showSeconds) timeStr += \":\" + seconds;\n    \n    document.getElementById(\"clock-time\").textContent = timeStr;\n    document.getElementById(\"clock-ampm\").textContent = use24Hour ? \"\" : ampm;\n    \n    const options = { weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\" };\n    if (dateFormat === \"short\") {\n      document.getElementById(\"clock-date\").textContent = now.toLocaleDateString();\n    } else {\n      document.getElementById(\"clock-date\").textContent = now.toLocaleDateString(undefined, options);\n    }\n  }\n  \n  updateClock();\n  setInterval(updateClock, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "digital-clock-2",
      "name": "Digital Clock 2",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .dc2 { height: 100%; width: 100%; display: grid; grid-template-rows: 140px 1fr 340px; background: #08090D; color: #F4F6FA; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; overflow: hidden; }\n.dc2-rail { display: flex; align-items: center; justify-content: space-between; padding: 0 64px; border-bottom: 6px solid #FF5A1F; overflow: hidden; }\n.dc2-rail-left { display: flex; align-items: center; gap: 28px; min-width: 0; }\n.dc2-tick { flex: none; width: 20px; height: 62px; background: #FF5A1F; }\n.dc2-location { font-size: 58px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dc2-zone { flex: none; margin-left: 48px; font-size: 42px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: #FF5A1F; }\n.dc2-main { align-self: center; display: flex; align-items: baseline; justify-content: space-between; padding: 0 64px; }\n.dc2-time { font-size: 460px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.dc2-side { flex: none; margin-left: 48px; display: flex; align-items: baseline; gap: 32px; }\n.dc2-ampm { font-size: 130px; font-weight: 800; letter-spacing: 0.04em; }\n.dc2-sec { font-size: 130px; font-weight: 800; font-variant-numeric: tabular-nums; color: #FF5A1F; }\n.dc2-band { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 0 64px; background: #FF5A1F; color: #08090D; overflow: hidden; }\n.dc2-when { min-width: 0; }\n.dc2-weekday { font-size: 62px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.15; }\n.dc2-date { font-size: 92px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }\n.dc2-message { flex: none; max-width: 560px; font-size: 52px; font-weight: 700; line-height: 1.2; text-align: right; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"dc2\">\n  <div class=\"dc2-rail\">\n    <div class=\"dc2-rail-left\">\n      <span class=\"dc2-tick\"></span>\n      <span class=\"dc2-location\">Main Lobby</span>\n    </div>\n    <span class=\"dc2-zone\">Pacific Time</span>\n  </div>\n  <div class=\"dc2-main\">\n    <div class=\"dc2-time\" id=\"dc2-time\">10:24</div>\n    <div class=\"dc2-side\">\n      <div class=\"dc2-ampm\" id=\"dc2-ampm\">AM</div>\n      <div class=\"dc2-sec\" id=\"dc2-sec\">38</div>\n    </div>\n  </div>\n  <div class=\"dc2-band\">\n    <div class=\"dc2-when\">\n      <div class=\"dc2-weekday\" id=\"dc2-weekday\">Monday</div>\n      <div class=\"dc2-date\" id=\"dc2-date\">August 4, 2026</div>\n    </div>\n    <div class=\"dc2-message\">Meetings begin on the hour. Doors close five minutes prior.</div>\n  </div>\n</div>\n<script>\n(function () {\n  var use24Hour = \"12h\" === \"24h\";\n  var showSeconds = \"true\" === \"true\";\n  var dateFormat = \"long\";\n  var elTime = document.getElementById(\"dc2-time\");\n  var elAmpm = document.getElementById(\"dc2-ampm\");\n  var elSec = document.getElementById(\"dc2-sec\");\n  var elWeekday = document.getElementById(\"dc2-weekday\");\n  var elDate = document.getElementById(\"dc2-date\");\n  var lastDay = \"\";\n\n  if (!showSeconds) elSec.style.display = \"none\";\n  if (use24Hour) elAmpm.style.display = \"none\";\n\n  // Grow the clock into whatever width the meridiem/seconds do not need, so\n  // every format setting still reaches the edges. Sized for the widest\n  // system-ui digits, so none of the three can overflow 1920.\n  var sideParts = (use24Hour ? 0 : 1) + (showSeconds ? 1 : 0);\n  elTime.style.fontSize = (sideParts === 2 ? 460 : sideParts === 1 ? 505 : 560) + \"px\";\n\n  function pad(n) { return n < 10 ? \"0\" + n : String(n); }\n\n  function tick() {\n    var now = new Date();\n    var hours = now.getHours();\n    var ampm = \"\";\n    if (!use24Hour) {\n      ampm = hours >= 12 ? \"PM\" : \"AM\";\n      hours = hours % 12 || 12;\n    }\n    elTime.textContent = pad(hours) + \":\" + pad(now.getMinutes());\n    elAmpm.textContent = ampm;\n    elSec.textContent = pad(now.getSeconds());\n\n    var dayKey = now.toDateString();\n    if (dayKey !== lastDay) {\n      lastDay = dayKey;\n      elWeekday.textContent = now.toLocaleDateString(undefined, { weekday: \"long\" });\n      elDate.textContent = dateFormat === \"short\"\n        ? now.toLocaleDateString()\n        : now.toLocaleDateString(undefined, { month: \"long\", day: \"numeric\", year: \"numeric\" });\n    }\n  }\n\n  tick();\n  setInterval(tick, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "directory",
      "name": "Directory",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .directory { display: flex; flex-direction: column; height: 100%; background: #1e293b; color: white; padding: 80px; }\n.directory h1 { font-size: 56px; text-align: center; margin-bottom: 60px; }\n.directory .list { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }\n.directory .row { display: flex; justify-content: space-between; font-size: 36px; padding: 30px 40px; background: #334155; border-radius: 10px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"directory\">\n  <h1>Building Directory</h1>\n  <div class=\"list\">\n    <div class=\"row\"><span>Reception</span><span>Floor 1</span></div>\n    <div class=\"row\"><span>Sales</span><span>Floor 2</span></div>\n    <div class=\"row\"><span>Engineering</span><span>Floor 3</span></div>\n    <div class=\"row\"><span>Executive</span><span>Floor 4</span></div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "holiday-hours",
      "name": "Holiday Hours",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .hh-notice { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: #3A1E14; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.hh-notice .hh-ribbon { flex: 0 0 20px; background: repeating-linear-gradient(-45deg, #B85614 0, #B85614 26px, #E8A33D 26px, #E8A33D 52px); }\n.hh-notice .hh-card { flex: 1 1 auto; min-height: 0; margin: 34px 76px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; background: #FBF3E4; color: #2A1A10; border: 6px solid #B85614; }\n.hh-notice .hh-band { display: flex; align-items: center; justify-content: space-between; gap: 44px; padding: 30px 56px; overflow: hidden; background: #3A1E14; color: #FBF3E4; }\n.hh-notice .hh-eyebrow { flex: 0 0 auto; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: 0.24em; text-transform: uppercase; color: #E8A33D; white-space: nowrap; }\n.hh-notice .hh-org { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-notice .hh-hero { padding: 34px 56px 26px; overflow: hidden; }\n.hh-notice .hh-title { margin: 0; max-height: 1.9em; overflow: hidden; font-size: 112px; font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; overflow-wrap: break-word; }\n.hh-notice .hh-rule { height: 10px; margin: 20px 0 18px; background: #E8A33D; }\n.hh-notice .hh-range { margin: 0; max-height: 2.3em; overflow: hidden; font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: 0.02em; color: #B85614; overflow-wrap: break-word; }\n.hh-notice .hh-rows { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); padding: 0 56px 8px; min-height: 0; overflow: hidden; }\n.hh-notice .hh-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: 34px; padding: 4px 0; min-width: 0; overflow: hidden; border-bottom: 3px dotted #B85614; }\n.hh-notice .hh-row:first-child { border-top: 3px dotted #B85614; }\n.hh-notice .hh-row:last-child { border-bottom: none; }\n.hh-notice .hh-bar { align-self: stretch; background: #B85614; }\n.hh-notice .hh-row.closed .hh-bar { background: #A32B1E; }\n.hh-notice .hh-when { display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; }\n.hh-notice .hh-date { font-size: 44px; font-weight: 700; line-height: 1.04; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-notice .hh-why { margin-top: 6px; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: 0.1em; text-transform: uppercase; color: #B85614; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-notice .hh-hours { justify-self: end; max-width: 640px; padding: 6px 22px; border: 4px solid transparent; font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-notice .hh-row.closed .hh-hours { border-color: #A32B1E; color: #A32B1E; letter-spacing: 0.12em; text-transform: uppercase; }\n.hh-notice .hh-foot { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 26px 56px 30px; overflow: hidden; border-top: 8px solid #B85614; }\n.hh-notice .hh-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: 1 1 auto; min-width: 0; margin: 0; max-height: 2.6em; overflow: hidden; white-space: pre-line; font-size: 34px; font-weight: 500; line-height: 1.28; }\n.hh-notice .hh-contact { flex: 0 0 auto; max-width: 800px; text-align: right; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: #B85614; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"hh-notice\">\n  <div class=\"hh-ribbon\"></div>\n  <div class=\"hh-card\">\n    <header class=\"hh-band\">\n      <span class=\"hh-eyebrow\">Please Note</span>\n      <span class=\"hh-org\">Fairview Market</span>\n    </header>\n    <section class=\"hh-hero\">\n      <h1 class=\"hh-title\">Holiday Hours</h1>\n      <div class=\"hh-rule\"></div>\n      <p class=\"hh-range\">Wednesday 31 December – Sunday 4 January</p>\n    </section>\n    <section class=\"hh-rows\">\n      <div class=\"hh-row open\">\n        <span class=\"hh-bar\"></span>\n        <span class=\"hh-when\">\n          <span class=\"hh-date\">Wed 31 Dec</span>\n          <span class=\"hh-why\">New Year&#039;s Eve</span>\n        </span>\n        <span class=\"hh-hours\">9:00 AM – 4:00 PM</span>\n      </div>\n      <div class=\"hh-row closed\">\n        <span class=\"hh-bar\"></span>\n        <span class=\"hh-when\">\n          <span class=\"hh-date\">Thu 1 Jan</span>\n          <span class=\"hh-why\">New Year&#039;s Day</span>\n        </span>\n        <span class=\"hh-hours\">Closed</span>\n      </div>\n      <div class=\"hh-row open\">\n        <span class=\"hh-bar\"></span>\n        <span class=\"hh-when\">\n          <span class=\"hh-date\">Fri 2 Jan</span>\n          <span class=\"hh-why\">Reduced staffing</span>\n        </span>\n        <span class=\"hh-hours\">10:00 AM – 4:00 PM</span>\n      </div>\n      <div class=\"hh-row open\">\n        <span class=\"hh-bar\"></span>\n        <span class=\"hh-when\">\n          <span class=\"hh-date\">Sat 3 Jan</span>\n          <span class=\"hh-why\">Weekend hours</span>\n        </span>\n        <span class=\"hh-hours\">9:00 AM – 6:00 PM</span>\n      </div>\n      <div class=\"hh-row closed\">\n        <span class=\"hh-bar\"></span>\n        <span class=\"hh-when\">\n          <span class=\"hh-date\">Sun 4 Jan</span>\n          <span class=\"hh-why\">Annual stock take</span>\n        </span>\n        <span class=\"hh-hours\">Closed</span>\n      </div>\n    </section>\n    <footer class=\"hh-foot\">\n      <p class=\"hh-note\">Normal hours resume Monday 5 January. Online orders ship from 2 January.</p>\n      <span class=\"hh-contact\">fairviewmarket.com · (555) 014-2280</span>\n    </footer>\n  </div>\n  <div class=\"hh-ribbon\"></div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "kpi-dashboard",
      "name": "KPI Dashboard",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .kpi { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: #0A0D12; color: #F4F7FA; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.kpi .kpi-head { flex: 0 0 184px; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; overflow: hidden; border-bottom: 8px solid #FFC300; }\n.kpi .kpi-headline { display: flex; align-items: center; gap: 28px; min-width: 0; }\n.kpi .kpi-tick { flex: none; width: 18px; height: 84px; background: #FFC300; }\n.kpi .kpi-title { min-width: 0; font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.kpi .kpi-period { flex: 0 1 auto; max-width: 700px; font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase; text-align: right; color: #FFC300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.kpi .kpi-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 36px 72px; }\n.kpi .kpi-tile { grid-column: span 4; min-width: 0; display: flex; flex-direction: column; padding: 32px 34px 28px; overflow: hidden; background: #161C25; border-left: 14px solid #FFC300; }\n.kpi .kpi-label { flex: none; font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.kpi .kpi-value { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; overflow: hidden; }\n.kpi .kpi-value span { min-width: 0; font-size: 124px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.kpi .kpi-trend { flex: none; padding-top: 18px; border-top: 3px solid rgba(128, 128, 128, 0.4); font-size: 46px; font-weight: 800; line-height: 1.15; letter-spacing: 0.01em; color: #FFC300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.kpi .kpi-tile.positive { border-left-color: #4ADE80; }\n.kpi .kpi-tile.positive .kpi-trend { color: #4ADE80; }\n.kpi .kpi-tile.negative { border-left-color: #FB7185; }\n.kpi .kpi-tile.negative .kpi-trend { color: #FB7185; }\n.kpi .kpi-tile.neutral { border-left-color: #FFC300; }\n.kpi .kpi-tile.neutral .kpi-trend { color: #FFC300; }\n.kpi.five .t6 { display: none; }\n.kpi.five .t4, .kpi.five .t5 { grid-column: span 6; }\n.kpi.four .t5, .kpi.four .t6 { display: none; }\n.kpi.four .kpi-tile { grid-column: span 6; }\n.kpi.four .kpi-label { font-size: 40px; }\n.kpi.four .kpi-value span { font-size: 168px; }\n.kpi.four .kpi-trend { font-size: 50px; }\n.kpi .kpi-foot { flex: 0 0 112px; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; overflow: hidden; background: #FFC300; color: #0A0D12; }\n.kpi .kpi-compare { min-width: 0; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.kpi .kpi-note { flex: 0 1 auto; font-size: 34px; font-weight: 600; line-height: 1.2; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"kpi six\">\n  <div class=\"kpi-head\">\n    <div class=\"kpi-headline\">\n      <span class=\"kpi-tick\"></span>\n      <h1 class=\"kpi-title\">Operations Board</h1>\n    </div>\n    <div class=\"kpi-period\">Week 31 · Jul 27 - Aug 2</div>\n  </div>\n  <div class=\"kpi-grid\">\n    <div class=\"kpi-tile t1 positive\">\n      <div class=\"kpi-label\">Orders Shipped</div>\n      <div class=\"kpi-value\"><span>1,482</span></div>\n      <div class=\"kpi-trend\">▲ 6.2%</div>\n    </div>\n    <div class=\"kpi-tile t2 positive\">\n      <div class=\"kpi-label\">On-Time Rate</div>\n      <div class=\"kpi-value\"><span>97.4%</span></div>\n      <div class=\"kpi-trend\">▲ 1.1 pts</div>\n    </div>\n    <div class=\"kpi-tile t3 positive\">\n      <div class=\"kpi-label\">Open Tickets</div>\n      <div class=\"kpi-value\"><span>38</span></div>\n      <div class=\"kpi-trend\">▼ 12</div>\n    </div>\n    <div class=\"kpi-tile t4 negative\">\n      <div class=\"kpi-label\">Avg Response</div>\n      <div class=\"kpi-value\"><span>4m 12s</span></div>\n      <div class=\"kpi-trend\">▲ 41s</div>\n    </div>\n    <div class=\"kpi-tile t5 positive\">\n      <div class=\"kpi-label\">Weekly Revenue</div>\n      <div class=\"kpi-value\"><span>$248K</span></div>\n      <div class=\"kpi-trend\">▲ 3.8%</div>\n    </div>\n    <div class=\"kpi-tile t6 neutral\">\n      <div class=\"kpi-label\">Safety Days</div>\n      <div class=\"kpi-value\"><span>45</span></div>\n      <div class=\"kpi-trend\">→ Steady</div>\n    </div>\n  </div>\n  <div class=\"kpi-foot\">\n    <div class=\"kpi-compare\">Change shown vs. previous week</div>\n    <div class=\"kpi-note\">Reviewed at the 9:00 AM stand-up</div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "now-serving",
      "name": "Now Serving",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .queue-container { display: flex; flex-direction: column; height: 100%; background: #1e293b; color: #ffffff; font-family: system-ui, sans-serif; }\n.queue-header { padding: 40px; text-align: center; background: rgba(0,0,0,0.1); }\n.queue-header h1 { font-size: 48px; margin: 0; }\n.queue-main { flex: 1; display: flex; padding: 60px; gap: 60px; }\n.now-serving { flex: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #3b82f6; border-radius: 24px; color: white; }\n.serving-label { font-size: 36px; opacity: 0.9; margin-bottom: 20px; }\n.serving-number { font-size: 200px; font-weight: 700; line-height: 1; }\n.serving-window { font-size: 32px; margin-top: 20px; opacity: 0.9; }\n.queue-info { flex: 1; display: flex; flex-direction: column; gap: 40px; }\n.next-up, .wait-time { background: rgba(0,0,0,0.1); border-radius: 20px; padding: 40px; text-align: center; }\n.next-label, .wait-label { font-size: 28px; opacity: 0.7; margin-bottom: 20px; }\n.next-numbers { display: flex; justify-content: center; gap: 20px; }\n.next-numbers span { font-size: 48px; font-weight: 600; background: rgba(0,0,0,0.1); padding: 15px 30px; border-radius: 12px; }\n.wait-value { font-size: 56px; font-weight: 600; }\n.queue-footer { padding: 30px; text-align: center; background: rgba(0,0,0,0.1); }\n.queue-footer p { font-size: 24px; margin: 0; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"queue-container\">\n  <div class=\"queue-header\">\n    <h1>Customer Service</h1>\n  </div>\n  <div class=\"queue-main\">\n    <div class=\"now-serving\">\n      <div class=\"serving-label\">Now Serving</div>\n      <div class=\"serving-number\">A042</div>\n      <div class=\"serving-window\">Window 3</div>\n    </div>\n    <div class=\"queue-info\">\n      <div class=\"next-up\">\n        <div class=\"next-label\">Next</div>\n        <div class=\"next-numbers\">\n          <span>A043</span>\n          <span>A044</span>\n          <span>A045</span>\n        </div>\n      </div>\n      <div class=\"wait-time\">\n        <div class=\"wait-label\">Estimated Wait</div>\n        <div class=\"wait-value\">~10 min</div>\n      </div>\n    </div>\n  </div>\n  <div class=\"queue-footer\">\n    <p>Please have your documents ready</p>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "parking-shuttle-info",
      "name": "Parking & Shuttle Info",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .ps { height: 100%; width: 100%; display: grid; grid-template-rows: 156px minmax(0, 1fr) 168px; overflow: hidden; background: #0C1116; color: #F3F6F9; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.ps-head { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 60px; overflow: hidden; border-bottom: 8px solid #FFC233; }\n.ps-head-main { display: flex; align-items: center; gap: 28px; min-width: 0; }\n.ps-tick { flex: none; width: 20px; height: 84px; background: #FFC233; }\n.ps-titles { min-width: 0; }\n.ps-title { font-size: 72px; font-weight: 900; line-height: 1.18; letter-spacing: -0.015em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-venue { margin-top: 6px; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: #FFC233; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-now { flex: none; text-align: right; }\n.ps-now-label { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.6; }\n.ps-clock { margin-top: 4px; font-size: 78px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.ps-main { display: grid; grid-template-columns: minmax(0, 1fr) 780px; overflow: hidden; }\n.ps-secthead { display: flex; align-items: center; gap: 26px; overflow: hidden; }\n.ps-sectlabel { flex: 0 1 auto; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFC233; }\n.ps-rule { flex: 1 1 auto; min-width: 40px; height: 4px; background: rgba(255, 255, 255, 0.16); }\n.ps-lots { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 22px; padding: 40px 60px; overflow: hidden; }\n.ps-lotlist { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 14px; overflow: hidden; }\n.ps-lot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; padding: 0 34px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border-left: 14px solid #8b98a4; }\n.ps-lotinfo { min-width: 0; }\n.ps-lotname { font-size: 58px; font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-lotdetail { margin-top: 8px; font-size: 32px; font-weight: 500; line-height: 1.2; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-pill { padding: 12px 30px; font-size: 36px; font-weight: 900; line-height: 1.15; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; background: #8b98a4; color: #0b1014; }\n.ps-lot.open { border-left-color: #16d67a; }\n.ps-lot.open .ps-pill { background: #16d67a; color: #06210f; }\n.ps-lot.filling { border-left-color: #ffb703; }\n.ps-lot.filling .ps-pill { background: #ffb703; color: #241900; }\n.ps-lot.full { border-left-color: #ff2d2d; }\n.ps-lot.full .ps-pill { background: #ff2d2d; color: #1a0505; }\n.ps-lot.closed { border-left-color: #8b98a4; }\n.ps-lot.closed .ps-pill { background: #8b98a4; color: #0b1014; }\n.ps-shuttle { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 20px; padding: 34px 52px; overflow: hidden; background: rgba(255, 255, 255, 0.05); border-left: 4px solid rgba(255, 255, 255, 0.14); }\n.ps-freq { min-width: 0; }\n.ps-freqvalue { font-size: 78px; font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-freqnote { margin-top: 8px; font-size: 32px; font-weight: 500; line-height: 1.2; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-pickup { height: 74px; line-height: 74px; padding: 0 26px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #FFC233; color: #0C1116; font-size: 38px; font-weight: 800; }\n.ps-deps { display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 12px; overflow: hidden; }\n.ps-deplabel { font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-dep { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 0 26px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }\n.ps-depinfo { min-width: 0; }\n.ps-deptime { font-size: 44px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-deproute { margin-top: 6px; font-size: 32px; font-weight: 500; line-height: 1.15; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ps-rel { font-size: 34px; font-weight: 800; line-height: 1.2; white-space: nowrap; text-align: right; color: #FFC233; }\n.ps-rel.ps-past { color: #8a97a3; }\n.ps-note { display: flex; align-items: center; gap: 40px; padding: 0 60px; overflow: hidden; background: #FFC233; color: #0C1116; }\n.ps-notelabel { flex: none; padding: 12px 26px; font-size: 30px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; background: #0C1116; color: #FFC233; }\n.ps-notetext { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 116px; overflow: hidden; font-size: 44px; font-weight: 700; line-height: 1.25; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"ps\">\n  <div class=\"ps-head\">\n    <div class=\"ps-head-main\">\n      <span class=\"ps-tick\"></span>\n      <div class=\"ps-titles\">\n        <div class=\"ps-title\">Parking &amp; Shuttles</div>\n        <div class=\"ps-venue\">Riverside Convention Center</div>\n      </div>\n    </div>\n    <div class=\"ps-now\">\n      <div class=\"ps-now-label\">Time Now</div>\n      <div class=\"ps-clock\" id=\"ps-clock\">--:--</div>\n    </div>\n  </div>\n  <div class=\"ps-main\">\n    <div class=\"ps-lots\">\n      <div class=\"ps-secthead\">\n        <span class=\"ps-sectlabel\">Lot Status</span>\n        <span class=\"ps-rule\"></span>\n      </div>\n      <div class=\"ps-lotlist\">\n        <div class=\"ps-lot open\">\n          <div class=\"ps-lotinfo\">\n            <div class=\"ps-lotname\">Lot A — Main Garage</div>\n            <div class=\"ps-lotdetail\">Enter from Mill Street · Levels 1–4</div>\n          </div>\n          <span class=\"ps-pill\">open</span>\n        </div>\n        <div class=\"ps-lot filling\">\n          <div class=\"ps-lotinfo\">\n            <div class=\"ps-lotname\">Lot B — West Surface</div>\n            <div class=\"ps-lotdetail\">Accessible spaces in row 1</div>\n          </div>\n          <span class=\"ps-pill\">filling</span>\n        </div>\n        <div class=\"ps-lot full\">\n          <div class=\"ps-lotinfo\">\n            <div class=\"ps-lotname\">Lot C — East Deck</div>\n            <div class=\"ps-lotdetail\">Permit required before 6:00 PM</div>\n          </div>\n          <span class=\"ps-pill\">full</span>\n        </div>\n        <div class=\"ps-lot open\">\n          <div class=\"ps-lotinfo\">\n            <div class=\"ps-lotname\">Lot D — Overflow</div>\n            <div class=\"ps-lotdetail\">400 Mill Street · Shuttle stop</div>\n          </div>\n          <span class=\"ps-pill\">open</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"ps-shuttle\">\n      <div class=\"ps-secthead\">\n        <span class=\"ps-sectlabel\">Shuttle</span>\n        <span class=\"ps-rule\"></span>\n      </div>\n      <div class=\"ps-freq\">\n        <div class=\"ps-freqvalue\">Every 10 min</div>\n        <div class=\"ps-freqnote\">Continuous service until 11:00 PM</div>\n      </div>\n      <div class=\"ps-pickup\">Board at Curb 2 · North Doors</div>\n      <div class=\"ps-deps\">\n        <div class=\"ps-deplabel\">Next Departures</div>\n        <div class=\"ps-dep\">\n          <div class=\"ps-depinfo\">\n            <div class=\"ps-deptime\">5:10 PM</div>\n            <div class=\"ps-deproute\">Red Line · Overflow Lot</div>\n          </div>\n          <div class=\"ps-rel\" id=\"ps-rel1\"></div>\n        </div>\n        <div class=\"ps-dep\">\n          <div class=\"ps-depinfo\">\n            <div class=\"ps-deptime\">5:20 PM</div>\n            <div class=\"ps-deproute\">Blue Line · Hotel Row</div>\n          </div>\n          <div class=\"ps-rel\" id=\"ps-rel2\"></div>\n        </div>\n        <div class=\"ps-dep\">\n          <div class=\"ps-depinfo\">\n            <div class=\"ps-deptime\">5:30 PM</div>\n            <div class=\"ps-deproute\">Red Line · Overflow Lot</div>\n          </div>\n          <div class=\"ps-rel\" id=\"ps-rel3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"ps-note\">\n    <span class=\"ps-notelabel\">Heads Up</span>\n    <p class=\"ps-notetext\">Lot C closes at 6:00 PM tonight for resurfacing. Use Lot D and ride the Red Line shuttle — it runs every 10 minutes to the North Doors.</p>\n  </div>\n</div>\n<script>\n(function () {\n  var use24 = \"12h\" === \"24h\";\n  var clockEl = document.getElementById(\"ps-clock\");\n  var rows = [\n    { raw: \"5:10 PM\", el: document.getElementById(\"ps-rel1\"), mins: null },\n    { raw: \"5:20 PM\", el: document.getElementById(\"ps-rel2\"), mins: null },\n    { raw: \"5:30 PM\", el: document.getElementById(\"ps-rel3\"), mins: null }\n  ];\n\n  function pad(n) { return n < 10 ? \"0\" + n : String(n); }\n\n  // Minutes past midnight for a departure the operator typed. Accepts\n  // \"7:45\", \"07.45\", \"7:45 pm\", \"7:45PM\", \"7:45 p.m.\" and 24-hour \"19:45\".\n  // Anything else returns null and that row simply shows no countdown.\n  function toMinutes(raw) {\n    var s = String(raw).trim();\n    var m = s.match(/^(\\d{1,2})[:.](\\d{2})\\s*([ap])\\.?m\\.?$/i);\n    if (!m) m = s.match(/^(\\d{1,2})[:.](\\d{2})$/);\n    if (!m) return null;\n    var h = parseInt(m[1], 10);\n    var min = parseInt(m[2], 10);\n    if (min > 59) return null;\n    if (m[3]) {\n      if (h < 1 || h > 12) return null;\n      h = h % 12;\n      if (m[3].toLowerCase() === \"p\") h += 12;\n    } else if (h > 23) {\n      return null;\n    }\n    return h * 60 + min;\n  }\n\n  for (var i = 0; i < rows.length; i++) rows[i].mins = toMinutes(rows[i].raw);\n\n  // Stay quiet rather than lie: a departure more than 90 minutes gone, or\n  // more than 12 hours out, gets no countdown at all.\n  function countdown(delta) {\n    if (delta < -90 || delta > 720) return null;\n    if (delta < 0) return { text: \"Departed\", past: true };\n    if (delta < 1) return { text: \"Boarding\", past: false };\n    if (delta < 60) return { text: \"in \" + delta + \" min\", past: false };\n    return { text: \"in \" + Math.floor(delta / 60) + \" hr \" + (delta % 60) + \" min\", past: false };\n  }\n\n  function tick() {\n    var now = new Date();\n    var h = now.getHours();\n    var suffix = \"\";\n    if (!use24) {\n      suffix = h >= 12 ? \" PM\" : \" AM\";\n      h = h % 12 || 12;\n    }\n    clockEl.textContent = (use24 ? pad(h) : String(h)) + \":\" + pad(now.getMinutes()) + suffix;\n\n    var nowMins = now.getHours() * 60 + now.getMinutes();\n    for (var j = 0; j < rows.length; j++) {\n      var row = rows[j];\n      if (!row.el) continue;\n      var out = row.mins === null ? null : countdown(row.mins - nowMins);\n      row.el.textContent = out ? out.text : \"\";\n      row.el.className = out && out.past ? \"ps-rel ps-past\" : \"ps-rel\";\n    }\n  }\n\n  tick();\n  setInterval(tick, 10000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "safety-dashboard",
      "name": "Safety Dashboard",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .safety-container { display: flex; flex-direction: column; height: 100%; background: #16a34a; color: white; font-family: system-ui, sans-serif; }\n.safety-header { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 40px; background: rgba(0,0,0,0.2); }\n.safety-header .icon { font-size: 48px; }\n.safety-header h1 { font-size: 42px; margin: 0; }\n.safety-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px; }\n.days-counter { text-align: center; }\n.days-number { font-size: 180px; font-weight: 700; color: #fbbf24; line-height: 1; }\n.days-label { font-size: 36px; opacity: 0.9; margin-top: 10px; }\n.goal-section { text-align: center; width: 60%; }\n.goal-label { font-size: 24px; opacity: 0.7; }\n.goal-value { font-size: 32px; font-weight: 600; margin: 10px 0 20px; }\n.progress-bar { height: 24px; background: rgba(255,255,255,0.2); border-radius: 12px; overflow: hidden; }\n.progress-fill { height: 100%; background: #fbbf24; border-radius: 12px; transition: width 1s ease; }\n.safety-footer { display: flex; justify-content: space-between; padding: 30px 50px; background: rgba(0,0,0,0.2); font-size: 24px; }\n.tip { display: flex; align-items: center; gap: 15px; }\n.tip-icon { font-size: 28px; }\n.emergency { opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"safety-container\">\n  <div class=\"safety-header\">\n    <span class=\"icon\">🛡️</span>\n    <h1>Safety First</h1>\n  </div>\n  <div class=\"safety-main\">\n    <div class=\"days-counter\">\n      <div class=\"days-number\">45</div>\n      <div class=\"days-label\">Days Without Incident</div>\n    </div>\n    <div class=\"goal-section\">\n      <div class=\"goal-label\">Goal</div>\n      <div class=\"goal-value\">100 Days</div>\n      <div class=\"progress-bar\">\n        <div class=\"progress-fill\" id=\"progress-fill\"></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"safety-footer\">\n    <div class=\"tip\">\n      <span class=\"tip-icon\">💡</span>\n      <span>Always wear proper PPE in designated areas</span>\n    </div>\n    <div class=\"emergency\">\n      <span>Emergency: 911 or ext. 5555</span>\n    </div>\n  </div>\n</div>\n<script>\n(function() {\n  const days = parseInt(\"45\") || 0;\n  const goal = parseInt(\"100\") || 100;\n  const percent = Math.min((days / goal) * 100, 100);\n  document.getElementById(\"progress-fill\").style.width = percent + \"%\";\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "store-hours-1",
      "name": "Store Hours 1",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .sh1 { display: flex; flex-direction: column; height: 100%; padding: 52px 100px 54px; overflow: hidden; background: #f4f2ed; color: #16202e; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.sh1-head { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; padding-bottom: 28px; overflow: hidden; }\n.sh1-ident { flex: 1 1 auto; min-width: 0; }\n.sh1-eyebrow { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: #1f4d6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh1-name { margin-top: 18px; font-family: Georgia, \"Times New Roman\", \"Iowan Old Style\", serif; font-size: 78px; font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; color: #16202e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh1-place { flex: 0 1 auto; max-width: 620px; text-align: right; }\n.sh1-place-label { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: #5c6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh1-place-value { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 14px; overflow: hidden; font-size: 34px; font-weight: 600; line-height: 1.2; color: #16202e; }\n.sh1-rule { position: relative; flex: 0 0 auto; height: 4px; margin-bottom: 34px; }\n.sh1-rule::before { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #5c6675; opacity: 0.28; }\n.sh1-rule::after { content: \"\"; position: absolute; top: 0; left: 0; width: 300px; height: 100%; background: #1f4d6b; }\n.sh1-board { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 14px 56px; border-radius: 10px; background: #ffffff; box-shadow: 0 20px 44px rgba(15, 25, 40, 0.1); }\n.sh1-board::after { content: \"\"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid #5c6675; border-radius: 10px; opacity: 0.2; pointer-events: none; }\n.sh1-row { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; overflow: hidden; }\n.sh1-row + .sh1-row::before { content: \"\"; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #5c6675; opacity: 0.22; }\n.sh1-day { flex: 0 1 auto; min-width: 0; font-size: 46px; font-weight: 600; line-height: 1.1; letter-spacing: 0.01em; color: #16202e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh1-lead { flex: 1 1 auto; min-width: 40px; height: 0; margin: 12px 32px 0; border-bottom: 4px dotted #5c6675; opacity: 0.42; }\n.sh1-hours { flex: 0 1 auto; max-width: 760px; text-align: right; font-size: 46px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: #16202e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh1-foot { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 72px; margin-top: 34px; overflow: hidden; }\n.sh1-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: 1 1 auto; min-width: 0; max-width: 1000px; overflow: hidden; font-size: 32px; font-weight: 500; line-height: 1.34; color: #5c6675; }\n.sh1-contact { flex: 0 1 auto; min-width: 0; text-align: right; }\n.sh1-contact-label { display: block; font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: #1f4d6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh1-contact-value { display: block; margin-top: 12px; font-size: 44px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: #16202e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"sh1\">\n  <header class=\"sh1-head\">\n    <div class=\"sh1-ident\">\n      <p class=\"sh1-eyebrow\">Opening Hours</p>\n      <h1 class=\"sh1-name\">Northgate Family Dental</h1>\n    </div>\n    <div class=\"sh1-place\">\n      <p class=\"sh1-place-label\">Location</p>\n      <p class=\"sh1-place-value\">128 Northgate Avenue, Suite 200</p>\n    </div>\n  </header>\n  <div class=\"sh1-rule\"></div>\n  <main class=\"sh1-board\">\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Monday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">8:00 AM – 5:00 PM</span>\n    </div>\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Tuesday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">8:00 AM – 5:00 PM</span>\n    </div>\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Wednesday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">8:00 AM – 7:00 PM</span>\n    </div>\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Thursday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">8:00 AM – 5:00 PM</span>\n    </div>\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Friday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">8:00 AM – 3:00 PM</span>\n    </div>\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Saturday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">9:00 AM – 1:00 PM</span>\n    </div>\n    <div class=\"sh1-row\">\n      <span class=\"sh1-day\">Sunday</span>\n      <span class=\"sh1-lead\"></span>\n      <span class=\"sh1-hours\">Closed</span>\n    </div>\n  </main>\n  <footer class=\"sh1-foot\">\n    <p class=\"sh1-note\">Closed on public holidays. Please arrive 10 minutes early; walk-ins are seen when a chair is free.</p>\n    <div class=\"sh1-contact\">\n      <span class=\"sh1-contact-label\">Appointments</span>\n      <span class=\"sh1-contact-value\">(206) 555-0148</span>\n    </div>\n  </footer>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "store-hours-2",
      "name": "Store Hours 2",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .sh2 { height: 100%; width: 100%; display: grid; grid-template-rows: 180px minmax(0, 1fr) 88px; overflow: hidden; background: #8f0f1e; color: #ffffff; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.sh2 .sh2-crown { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; overflow: hidden; background: #ffd200; color: #3a0209; }\n.sh2 .sh2-name { min-width: 0; font-family: \"Arial Black\", Impact, system-ui, sans-serif; font-size: 92px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh2 .sh2-kicker { flex: 0 0 auto; max-width: 560px; text-align: right; font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh2 .sh2-wall { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); min-height: 0; overflow: hidden; }\n.sh2 .sh2-row { display: flex; align-items: stretch; min-width: 0; overflow: hidden; }\n.sh2 .sh2-wall .sh2-row:nth-child(odd) { background: #6d0a16; }\n.sh2 .sh2-day { flex: 0 0 560px; display: flex; align-items: center; padding: 0 40px 0 72px; border-right: 6px solid #ffd200; font-family: \"Arial Black\", Impact, system-ui, sans-serif; font-size: 62px; font-weight: 900; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh2 .sh2-value { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 34px; padding: 0 72px 0 40px; }\n.sh2 .sh2-flag { flex: 0 0 auto; display: none; padding: 10px 24px; background: #3a0209; color: #ffd200; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }\n.sh2 .sh2-hours { flex: 0 1 auto; min-width: 0; text-align: right; font-family: \"Arial Black\", Impact, system-ui, sans-serif; font-size: 68px; font-weight: 900; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh2 .sh2-wall .sh2-row.sh2-now { background: #ffd200; color: #3a0209; box-shadow: inset 0 0 0 8px #3a0209; }\n.sh2 .sh2-wall .sh2-row.sh2-now .sh2-flag { display: block; }\n.sh2 .sh2-base { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 0 72px; overflow: hidden; border-top: 10px solid #ffd200; background: #3a0209; color: #ffffff; }\n.sh2 .sh2-note { min-width: 0; font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.sh2 .sh2-contact { flex: 0 0 auto; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: #ffd200; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"sh2\">\n  <header class=\"sh2-crown\">\n    <div class=\"sh2-name\">Ironside Barbers</div>\n    <div class=\"sh2-kicker\">Opening Hours</div>\n  </header>\n  <div class=\"sh2-wall\">\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Monday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">9AM - 7PM</span>\n      </span>\n    </div>\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Tuesday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">9AM - 7PM</span>\n      </span>\n    </div>\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Wednesday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">9AM - 7PM</span>\n      </span>\n    </div>\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Thursday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">9AM - 9PM</span>\n      </span>\n    </div>\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Friday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">9AM - 9PM</span>\n      </span>\n    </div>\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Saturday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">8AM - 6PM</span>\n      </span>\n    </div>\n    <div class=\"sh2-row\">\n      <span class=\"sh2-day\">Sunday</span>\n      <span class=\"sh2-value\">\n        <span class=\"sh2-flag\">Today</span>\n        <span class=\"sh2-hours\">Closed</span>\n      </span>\n    </div>\n  </div>\n  <footer class=\"sh2-base\">\n    <span class=\"sh2-note\">Walk-ins welcome - last cut 30 minutes before close</span>\n    <span class=\"sh2-contact\">(555) 555-0142</span>\n  </footer>\n</div>\n<script>\n(function () {\n  var mode = \"monday-first\";\n  if (mode !== \"monday-first\" && mode !== \"sunday-first\") return;\n  var rows = document.querySelectorAll(\".sh2 .sh2-wall .sh2-row\");\n  if (rows.length !== 7) return;\n  function paint() {\n    var weekday = new Date().getDay();\n    var index = mode === \"sunday-first\" ? weekday : (weekday + 6) % 7;\n    for (var i = 0; i < rows.length; i++) {\n      if (i === index) {\n        rows[i].classList.add(\"sh2-now\");\n      } else {\n        rows[i].classList.remove(\"sh2-now\");\n      }\n    }\n  }\n  paint();\n  setInterval(paint, 60000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "wait-time-display",
      "name": "Wait Time Display",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .wtd { height: 100%; display: grid; grid-template-rows: 132px minmax(0, 1fr) auto auto auto; overflow: hidden; background: #0e1621; color: #ffffff; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.wtd-rail { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 0 90px; overflow: hidden; border-bottom: 4px solid rgba(255, 255, 255, 0.14); }\n.wtd-venue { flex: 1 1 auto; display: flex; align-items: baseline; gap: 30px; min-width: 0; }\n.wtd-name { min-width: 0; font-size: 48px; font-weight: 800; letter-spacing: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wtd-dept { flex: 0 0 auto; font-size: 28px; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; color: #ffb703; white-space: nowrap; }\n.wtd-now { flex: 0 0 auto; text-align: right; }\n.wtd-now-label { font-size: 22px; font-weight: 700; letter-spacing: 7px; text-transform: uppercase; color: #9fb0c0; }\n.wtd-clock { margin-top: 8px; font-size: 44px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }\n.wtd-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; padding: 0 90px; overflow: hidden; }\n.wtd-hero-label { flex: 0 0 auto; max-width: 100%; font-size: 40px; font-weight: 700; letter-spacing: 14px; text-transform: uppercase; color: #ffb703; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wtd-figure { flex: 0 1 auto; display: flex; align-items: baseline; justify-content: center; gap: 34px; max-width: 100%; min-width: 0; }\n.wtd-number { font-size: 300px; line-height: 0.88; font-weight: 900; letter-spacing: -10px; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.wtd-unit { min-width: 0; font-size: 108px; font-weight: 600; letter-spacing: -1px; color: rgba(255, 255, 255, 0.74); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wtd-status { display: flex; align-items: center; gap: 30px; padding: 32px 90px; overflow: hidden; background: #ffb703; color: #241800; }\n.wtd.low .wtd-status { background: #16d67a; color: #06210f; }\n.wtd.moderate .wtd-status { background: #ffb703; color: #241800; }\n.wtd.high .wtd-status { background: #ff5a3d; color: #2a0700; }\n.wtd-dot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: currentColor; }\n.wtd-status-text { flex: 1 1 auto; min-width: 0; font-size: 50px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wtd-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 42px 90px 0; }\n.wtd-tile { min-width: 0; padding: 34px 38px; background: rgba(255, 255, 255, 0.06); border-top: 8px solid #ffb703; }\n.wtd-tile-label { font-size: 28px; font-weight: 700; letter-spacing: 7px; text-transform: uppercase; color: #9fb0c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wtd-tile-value { margin-top: 14px; font-size: 72px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wtd-foot { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 122px; padding: 34px 90px 38px; overflow: hidden; font-size: 32px; font-weight: 500; line-height: 1.3; color: #93a5b2; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"wtd moderate\">\n  <div class=\"wtd-rail\">\n    <div class=\"wtd-venue\">\n      <span class=\"wtd-name\">Riverbend Urgent Care</span>\n      <span class=\"wtd-dept\">Walk-In Clinic</span>\n    </div>\n    <div class=\"wtd-now\">\n      <div class=\"wtd-now-label\">Time Now</div>\n      <div class=\"wtd-clock\" id=\"wtd-clock\">2:40 PM</div>\n    </div>\n  </div>\n  <div class=\"wtd-hero\">\n    <div class=\"wtd-hero-label\">Current Wait</div>\n    <div class=\"wtd-figure\">\n      <span class=\"wtd-number\">25</span>\n      <span class=\"wtd-unit\">minutes</span>\n    </div>\n  </div>\n  <div class=\"wtd-status\">\n    <span class=\"wtd-dot\"></span>\n    <span class=\"wtd-status-text\">Steady — walk-ins are being seen in order of arrival</span>\n  </div>\n  <div class=\"wtd-details\">\n    <div class=\"wtd-tile\">\n      <div class=\"wtd-tile-label\">Now Serving</div>\n      <div class=\"wtd-tile-value\">B-214</div>\n    </div>\n    <div class=\"wtd-tile\">\n      <div class=\"wtd-tile-label\">In Queue</div>\n      <div class=\"wtd-tile-value\">9 waiting</div>\n    </div>\n    <div class=\"wtd-tile\">\n      <div class=\"wtd-tile-label\">Posted At</div>\n      <div class=\"wtd-tile-value\">2:40 PM</div>\n    </div>\n  </div>\n  <div class=\"wtd-foot\">Wait times are an estimate posted by our front desk and may change. Please tell a member of staff if your condition changes.</div>\n</div>\n<script>\n(function () {\n  var use24Hour = \"12h\" === \"24h\";\n  var el = document.getElementById(\"wtd-clock\");\n  if (!el) return;\n  function pad(n) { return n < 10 ? \"0\" + n : String(n); }\n  function tick() {\n    var d = new Date();\n    var h = d.getHours();\n    var suffix = \"\";\n    if (!use24Hour) {\n      suffix = h < 12 ? \" AM\" : \" PM\";\n      h = h % 12;\n      if (h === 0) h = 12;\n    }\n    el.textContent = (use24Hour ? pad(h) : String(h)) + \":\" + pad(d.getMinutes()) + suffix;\n  }\n  tick();\n  setInterval(tick, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "welcome-screen-1",
      "name": "Welcome Screen 1",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%); color: white; text-align: center; }\n.welcome h1 { font-size: 48px; opacity: 0.9; }\n.welcome .name { font-size: 96px; font-weight: 700; margin: 30px 0; }\n.welcome .message { font-size: 36px; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"welcome\">\n  <h1>Welcome</h1>\n  <p class=\"name\">John Smith</p>\n  <p class=\"message\">Please check in at reception</p>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "welcome-screen-2",
      "name": "Welcome Screen 2",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .welcome2 { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #0b1f4e; color: #ffffff; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.welcome2 .w2-rail { position: absolute; top: 0; left: 0; width: 28px; height: 100%; background: #ff5a1f; z-index: 3; }\n.welcome2 .w2-top { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 48px; padding: 46px 96px 40px 152px; border-bottom: 4px solid #ff5a1f; }\n.welcome2 .w2-host { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 42px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }\n.welcome2 .w2-location { flex: 0 0 auto; white-space: nowrap; font-size: 34px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; text-align: right; }\n.welcome2 .w2-hero { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 36px 96px 36px 152px; overflow: hidden; min-height: 0; background: linear-gradient(118deg, #0b1f4e 0%, #16407f 100%); }\n.welcome2 .w2-hero::after { content: \"\"; position: absolute; top: -300px; right: -220px; width: 940px; height: 940px; border: 64px solid rgba(255,255,255,0.08); border-radius: 50%; }\n.welcome2 .w2-intro { position: relative; z-index: 1; font-size: 44px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.82; margin-bottom: 26px; }\n.welcome2 .w2-greet { position: relative; z-index: 1; font-size: 232px; font-weight: 800; line-height: 0.86; letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: break-word; }\n.welcome2 .w2-band { flex: 0 0 auto; background: #ff5a1f; color: #10182b; padding: 48px 96px 52px 152px; }\n.welcome2 .w2-name { font-size: 136px; font-weight: 800; line-height: 0.96; letter-spacing: -0.02em; overflow-wrap: break-word; }\n.welcome2 .w2-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 64px; padding: 44px 96px 48px 152px; }\n.welcome2 .w2-message { font-size: 58px; font-weight: 600; line-height: 1.15; }\n.welcome2 .w2-ticks { display: flex; flex: 0 0 auto; gap: 16px; }\n.welcome2 .w2-ticks i { display: block; width: 24px; height: 64px; background: #ff5a1f; transform: skewX(-14deg); }\n.welcome2 .w2-ticks i:nth-child(2) { width: 16px; }\n.welcome2 .w2-ticks i:nth-child(3) { width: 8px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"welcome2\">\n  <div class=\"w2-rail\"></div>\n  <header class=\"w2-top\">\n    <span class=\"w2-host\">Harborview Offices</span>\n    <span class=\"w2-location\">Main Lobby · Level 2</span>\n  </header>\n  <section class=\"w2-hero\">\n    <p class=\"w2-intro\">Today we are hosting</p>\n    <h1 class=\"w2-greet\">Welcome</h1>\n  </section>\n  <section class=\"w2-band\">\n    <p class=\"w2-name\">John Smith</p>\n  </section>\n  <footer class=\"w2-foot\">\n    <p class=\"w2-message\">Please check in at reception</p>\n    <div class=\"w2-ticks\"><i></i><i></i><i></i></div>\n  </footer>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "wi-fi-access",
      "name": "Wi-Fi Access",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .wifi { height: 100%; width: 100%; display: grid; grid-template-rows: 136px minmax(0, 1fr) 152px; overflow: hidden; background: #0B1220; color: #F5F8FF; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.wifi .wf-head { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 88px; overflow: hidden; border-bottom: 6px solid #35D6F5; }\n.wifi .wf-venue { flex: 1 1 auto; min-width: 0; font-size: 46px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.15; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wifi .wf-kicker { flex: 0 0 auto; max-width: 720px; font-size: 36px; font-weight: 800; letter-spacing: 0.22em; line-height: 1.15; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; color: #35D6F5; }\n.wifi .wf-body { display: flex; flex-direction: column; justify-content: center; gap: 32px; min-height: 0; padding: 40px 88px; overflow: hidden; }\n.wifi .wf-card { flex: 0 0 auto; min-width: 0; overflow: hidden; }\n.wifi .wf-card-net { padding: 32px 44px; background: rgba(255, 255, 255, 0.04); border-left: 14px solid rgba(255, 255, 255, 0.28); }\n.wifi .wf-card-pass { padding: 34px 44px 36px; background: rgba(255, 255, 255, 0.08); border: 4px solid #35D6F5; border-left-width: 22px; }\n.wifi .wf-label { display: block; font-size: 34px; font-weight: 800; letter-spacing: 0.3em; line-height: 1.15; text-transform: uppercase; color: #35D6F5; }\n.wifi .wf-fit { min-width: 0; margin-top: 14px; overflow: hidden; }\n.wifi .wf-net { display: inline-block; font-size: 112px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }\n.wifi .wf-pass { display: inline-block; font-family: ui-monospace, \"SF Mono\", SFMono-Regular, Menlo, Consolas, \"Roboto Mono\", \"DejaVu Sans Mono\", \"Liberation Mono\", \"Courier New\", monospace; font-size: 148px; line-height: 1.05; font-weight: 700; letter-spacing: 0.01em; white-space: pre; }\n.wifi .wf-note { display: block; margin-top: 18px; font-size: 34px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; opacity: 0.74; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wifi .wf-foot { display: flex; align-items: center; justify-content: space-between; gap: 64px; padding: 0 88px; overflow: hidden; background: #35D6F5; color: #0B1220; }\n.wifi .wf-terms { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 38px; font-weight: 600; line-height: 1.2; }\n.wifi .wf-help { flex: 0 0 auto; max-width: 640px; font-size: 34px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"wifi\">\n  <header class=\"wf-head\">\n    <span class=\"wf-venue\">Harborview Offices</span>\n    <span class=\"wf-kicker\">Guest Wi-Fi</span>\n  </header>\n  <main class=\"wf-body\">\n    <section class=\"wf-card wf-card-net\">\n      <span class=\"wf-label\">Network</span>\n      <div class=\"wf-fit\" id=\"wf-net-fit\"><span class=\"wf-net\" id=\"wf-net\">Harborview-Guest</span></div>\n    </section>\n    <section class=\"wf-card wf-card-pass\">\n      <span class=\"wf-label\">Password</span>\n      <div class=\"wf-fit\" id=\"wf-pass-fit\"><span class=\"wf-pass\" id=\"wf-pass\">Harbor-Guest-2026</span></div>\n      <span class=\"wf-note\">Case sensitive · type it exactly as shown</span>\n    </section>\n  </main>\n  <footer class=\"wf-foot\">\n    <span class=\"wf-terms\">Complimentary guest access. Sessions end after 4 hours — reconnect any time.</span>\n    <span class=\"wf-help\">Trouble connecting? Ask at reception</span>\n  </footer>\n</div>\n<script>\n(function () {\n  // Credentials vary from 8 to 40+ characters. Fit each line to the panel\n  // width so a long password never clips and a short one still fills the\n  // frame. Text width scales linearly with font-size, so one proportional\n  // step lands it and a second absorbs the integer rounding.\n  var targets = [\n    { text: document.getElementById(\"wf-net\"), box: document.getElementById(\"wf-net-fit\"), min: 52, max: 118 },\n    { text: document.getElementById(\"wf-pass\"), box: document.getElementById(\"wf-pass-fit\"), min: 84, max: 200 }\n  ];\n\n  function fitOne(t) {\n    if (!t.text || !t.box) return;\n    var avail = t.box.clientWidth;\n    if (!avail) return;\n    t.text.style.fontSize = t.max + \"px\";\n    var w = t.text.getBoundingClientRect().width;\n    if (w <= avail) return;\n    var size = Math.max(t.min, Math.floor(t.max * (avail / w)));\n    t.text.style.fontSize = size + \"px\";\n    w = t.text.getBoundingClientRect().width;\n    if (w > avail && size > t.min) {\n      t.text.style.fontSize = Math.max(t.min, Math.floor(size * (avail / w))) + \"px\";\n    }\n  }\n\n  function fitAll() {\n    for (var i = 0; i < targets.length; i++) fitOne(targets[i]);\n  }\n\n  fitAll();\n  window.addEventListener(\"load\", fitAll);\n  window.addEventListener(\"resize\", fitAll);\n  if (document.fonts && document.fonts.ready && document.fonts.ready.then) {\n    document.fonts.ready.then(fitAll);\n  }\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "wi-fi-access-with-qr",
      "name": "Wi-Fi Access with QR",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .wifiqr { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #0b1220; color: #ffffff; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; }\n.wifiqr .wq-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 40px 88px 30px; border-bottom: 4px solid #22d3ee; }\n.wifiqr .wq-venue { flex: 1 1 auto; min-width: 0; font-size: 40px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wifiqr .wq-mark { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 10px; height: 64px; }\n.wifiqr .wq-mark i { display: block; width: 22px; border-radius: 5px; background: #22d3ee; }\n.wifiqr .wq-mark i:nth-child(1) { height: 18px; opacity: 0.4; }\n.wifiqr .wq-mark i:nth-child(2) { height: 33px; opacity: 0.6; }\n.wifiqr .wq-mark i:nth-child(3) { height: 48px; opacity: 0.8; }\n.wifiqr .wq-mark i:nth-child(4) { height: 64px; }\n.wifiqr .wq-main { flex: 1 1 auto; display: flex; align-items: stretch; gap: 64px; padding: 44px 88px; min-height: 0; }\n.wifiqr .wq-creds { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; }\n.wifiqr .wq-heading { font-size: 104px; font-weight: 800; line-height: 0.94; letter-spacing: -0.03em; overflow-wrap: break-word; }\n.wifiqr .wq-field { min-width: 0; background: #16233f; border-left: 12px solid #22d3ee; border-radius: 16px; padding: 26px 40px 32px; }\n.wifiqr .wq-field-label { font-size: 32px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #22d3ee; margin-bottom: 12px; }\n.wifiqr .wq-field-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace; font-size: 76px; font-weight: 700; line-height: 1.06; letter-spacing: 0.02em; overflow-wrap: break-word; }\n.wifiqr .wq-qr { flex: 0 0 auto; width: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px 36px; overflow: hidden; text-align: center; background: #ffffff; border-radius: 28px; }\n.wifiqr .wq-qr-img { display: block; width: 440px; height: 440px; object-fit: contain; }\n.wifiqr .wq-qr-fallback { display: none; width: 100%; font-size: 42px; font-weight: 700; line-height: 1.3; color: #0b1220; }\n.wifiqr .wq-qr-title { font-size: 46px; font-weight: 800; line-height: 1.1; color: #0b1220; }\n.wifiqr .wq-qr-note { font-size: 32px; font-weight: 500; line-height: 1.25; color: #3f4a5f; }\n.wifiqr .wq-qr.is-failed .wq-qr-img, .wifiqr .wq-qr.is-failed .wq-qr-title, .wifiqr .wq-qr.is-failed .wq-qr-note { display: none; }\n.wifiqr .wq-qr.is-failed .wq-qr-fallback { display: block; }\n.wifiqr .wq-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; padding: 26px 88px 38px; border-top: 2px solid #22d3ee; }\n.wifiqr .wq-foot-note { font-size: 34px; font-weight: 500; line-height: 1.3; opacity: 0.88; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"wifiqr\">\n  <header class=\"wq-top\">\n    <span class=\"wq-venue\">Harborview Offices</span>\n    <span class=\"wq-mark\"><i></i><i></i><i></i><i></i></span>\n  </header>\n  <main class=\"wq-main\">\n    <section class=\"wq-creds\">\n      <h1 class=\"wq-heading\">Guest Wi-Fi</h1>\n      <div class=\"wq-field\">\n        <div class=\"wq-field-label\">Network</div>\n        <div class=\"wq-field-value\">Harborview-Guest</div>\n      </div>\n      <div class=\"wq-field\">\n        <div class=\"wq-field-label\">Password</div>\n        <div class=\"wq-field-value\">Seaside-2026</div>\n      </div>\n    </section>\n    <aside class=\"wq-qr\" id=\"wifiqr-card\">\n      <img class=\"wq-qr-img\" id=\"wifiqr-image\" alt=\"Wi-Fi QR code\" src=\"https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=WIFI%3AT%3AWPA%3BS%3AHarborview-Guest%3BP%3ASeaside-2026%3B%3B\" />\n      <p class=\"wq-qr-fallback\">QR code unavailable — join with the network name and password shown.</p>\n      <p class=\"wq-qr-title\">Scan to Join</p>\n      <p class=\"wq-qr-note\">Open your phone camera and point it at the code</p>\n    </aside>\n  </main>\n  <footer class=\"wq-foot\">\n    <span class=\"wq-foot-note\">Need a hand getting online? Ask at the front desk and we will help.</span>\n  </footer>\n</div>\n<script>\n(function () {\n  var img = document.getElementById(\"wifiqr-image\");\n  var card = document.getElementById(\"wifiqr-card\");\n  if (!img || !card) return;\n  img.addEventListener(\"error\", function () { card.classList.add(\"is-failed\"); });\n  var ssid = \"Harborview-Guest\";\n  var pass = \"Seaside-2026\";\n  var sec = \"WPA\" || \"WPA\";\n  if (!ssid) { card.classList.add(\"is-failed\"); return; }\n  var esc = function (s) { return String(s).replace(/([\\\\;,:\"])/g, \"\\\\$1\"); };\n  var payload = \"WIFI:T:\" + sec + \";S:\" + esc(ssid) + \";\";\n  if (sec !== \"nopass\") { payload += \"P:\" + esc(pass) + \";\"; }\n  payload += \";\";\n  img.src = \"https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=\" + encodeURIComponent(payload);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "world-clocks",
      "name": "World Clocks",
      "category": "info",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .wc { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: #0B1120; color: #F1F5F9; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.wc .wc-head { flex: 0 0 190px; display: flex; align-items: center; gap: 30px; padding: 0 84px; overflow: hidden; border-bottom: 8px solid #38BDF8; }\n.wc .wc-tick { flex: none; width: 18px; height: 88px; background: #38BDF8; }\n.wc .wc-title { min-width: 0; font-size: 88px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wc .wc-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 40px 84px 56px; }\n.wc .wc-zone { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 36px 20px; overflow: hidden; background: #111C33; border-top: 10px solid #38BDF8; }\n.wc .wc-city { max-width: 100%; font-size: 42px; font-weight: 700; line-height: 1.1; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wc .wc-time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; max-width: 100%; font-size: 132px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.wc .wc-mer { font-size: 44px; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; opacity: 0.8; }\n.wc .wc-mer:empty { display: none; }\n.wc .wc-day { max-width: 100%; font-size: 40px; font-weight: 600; line-height: 1.2; text-align: center; opacity: 0.68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wc .wc-grid.wc-n1 { grid-template-columns: minmax(0, 1fr); }\n.wc .wc-grid.wc-n1 .wc-city { font-size: 84px; }\n.wc .wc-grid.wc-n1 .wc-time { font-size: 380px; }\n.wc .wc-grid.wc-n1 .wc-mer { font-size: 110px; }\n.wc .wc-grid.wc-n1 .wc-day { font-size: 66px; }\n.wc .wc-grid.wc-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.wc .wc-grid.wc-n2 .wc-city { font-size: 68px; }\n.wc .wc-grid.wc-n2 .wc-time { font-size: 250px; }\n.wc .wc-grid.wc-n2 .wc-mer { font-size: 78px; }\n.wc .wc-grid.wc-n2 .wc-day { font-size: 52px; }\n.wc .wc-grid.wc-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n.wc .wc-grid.wc-n3 .wc-city { font-size: 58px; }\n.wc .wc-grid.wc-n3 .wc-time { font-size: 180px; }\n.wc .wc-grid.wc-n3 .wc-mer { font-size: 56px; }\n.wc .wc-grid.wc-n3 .wc-day { font-size: 44px; }\n.wc .wc-grid.wc-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n.wc .wc-grid.wc-n0 { grid-template-columns: minmax(0, 1fr); }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"wc\">\n  <div class=\"wc-head\">\n    <span class=\"wc-tick\"></span>\n    <h1 class=\"wc-title\">World Clocks</h1>\n  </div>\n  <div class=\"wc-grid\" id=\"wc-grid\">\n    <div class=\"wc-zone\" id=\"wc-z1\">\n      <div class=\"wc-city\">New York</div>\n      <div class=\"wc-time\"><span id=\"wc-t1\">--:--</span><span class=\"wc-mer\" id=\"wc-m1\"></span></div>\n      <div class=\"wc-day\" id=\"wc-d1\"></div>\n    </div>\n    <div class=\"wc-zone\" id=\"wc-z2\">\n      <div class=\"wc-city\">London</div>\n      <div class=\"wc-time\"><span id=\"wc-t2\">--:--</span><span class=\"wc-mer\" id=\"wc-m2\"></span></div>\n      <div class=\"wc-day\" id=\"wc-d2\"></div>\n    </div>\n    <div class=\"wc-zone\" id=\"wc-z3\">\n      <div class=\"wc-city\">Dubai</div>\n      <div class=\"wc-time\"><span id=\"wc-t3\">--:--</span><span class=\"wc-mer\" id=\"wc-m3\"></span></div>\n      <div class=\"wc-day\" id=\"wc-d3\"></div>\n    </div>\n    <div class=\"wc-zone\" id=\"wc-z4\">\n      <div class=\"wc-city\">Tokyo</div>\n      <div class=\"wc-time\"><span id=\"wc-t4\">--:--</span><span class=\"wc-mer\" id=\"wc-m4\"></span></div>\n      <div class=\"wc-day\" id=\"wc-d4\"></div>\n    </div>\n  </div>\n</div>\n<script>\n(function () {\n  \"use strict\";\n  // Labels stay in the HTML above. Only IANA identifiers cross into the script.\n  var SLOTS = [\n    { id: \"wc-z1\", t: \"wc-t1\", m: \"wc-m1\", d: \"wc-d1\", tz: \"America/New_York\" },\n    { id: \"wc-z2\", t: \"wc-t2\", m: \"wc-m2\", d: \"wc-d2\", tz: \"Europe/London\" },\n    { id: \"wc-z3\", t: \"wc-t3\", m: \"wc-m3\", d: \"wc-d3\", tz: \"Asia/Dubai\" },\n    { id: \"wc-z4\", t: \"wc-t4\", m: \"wc-m4\", d: \"wc-d4\", tz: \"Asia/Tokyo\" }\n  ];\n  var USE_24  = \"24h\" === \"24h\";\n  var SHOW_DAY = \"true\" === \"true\";\n  var grid = document.getElementById(\"wc-grid\");\n\n  // A slot is shown only if its zone is set AND the platform recognises it.\n  // Blank is the documented way to use fewer than four; an unrecognised zone is\n  // hidden too, because a slot that cannot tell the time is worse than absent.\n  function usable(tz) {\n    if (!tz || tz === \"None\") return false;\n    try { new Intl.DateTimeFormat(\"en-US\", { timeZone: tz }); return true; }\n    catch (e) { return false; }\n  }\n\n  var live = [];\n  for (var i = 0; i < SLOTS.length; i++) {\n    var s = SLOTS[i];\n    var node = document.getElementById(s.id);\n    if (!node) { continue; }\n    if (usable(s.tz)) { live.push(s); }\n    else { node.style.display = \"none\"; }\n  }\n\n  // Let the layout know how many survived, so 1-4 zones each fill the screen.\n  grid.className = \"wc-grid wc-n\" + (live.length || 0);\n\n  function pad(n) { return n < 10 ? \"0\" + n : String(n); }\n\n  function paint() {\n    var now = new Date();\n    for (var i = 0; i < live.length; i++) {\n      var s = live[i];\n      var opt = { hour: \"2-digit\", minute: \"2-digit\", hour12: false, timeZone: s.tz };\n      var h = 0, m = 0;\n      var parts = new Intl.DateTimeFormat(\"en-GB\", opt).formatToParts(now);\n      for (var j = 0; j < parts.length; j++) {\n        if (parts[j].type === \"hour\") { h = parseInt(parts[j].value, 10) || 0; }\n        if (parts[j].type === \"minute\") { m = parseInt(parts[j].value, 10) || 0; }\n      }\n      h = h % 24;\n      var mer = \"\";\n      var shown = h;\n      if (!USE_24) {\n        mer = h >= 12 ? \"PM\" : \"AM\";\n        shown = h % 12;\n        if (shown === 0) { shown = 12; }\n      }\n      document.getElementById(s.t).textContent = (USE_24 ? pad(shown) : String(shown)) + \":\" + pad(m);\n      document.getElementById(s.m).textContent = mer;\n      if (SHOW_DAY) {\n        document.getElementById(s.d).textContent = now.toLocaleDateString(undefined, {\n          weekday: \"short\", month: \"short\", day: \"numeric\", timeZone: s.tz\n        });\n      } else {\n        document.getElementById(s.d).style.display = \"none\";\n      }\n    }\n  }\n\n  paint();\n  setInterval(paint, 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "bakery-menu",
      "name": "Bakery Menu",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .bkm { display: grid; grid-template-rows: 200px minmax(0, 1fr) 108px; height: 100%; width: 100%; overflow: hidden; font-family: \"Iowan Old Style\", \"Palatino Linotype\", Palatino, Georgia, \"Times New Roman\", serif; color: #3b2314; background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.018) 0 3px, rgba(0, 0, 0, 0) 3px 11px), #faf3e6; }\n.bkm-head { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; overflow: hidden; background: #2a1a10; color: #faf3e6; border-bottom: 10px solid #9c2a2a; }\n.bkm-brand { flex: 1 1 auto; min-width: 0; }\n.bkm-shop { font-size: 78px; font-weight: 700; line-height: 1.02; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.bkm-tagline { margin-top: 10px; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.bkm-date { flex: 0 1 auto; max-width: 840px; padding: 14px 26px; background: #9c2a2a; color: #faf3e6; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.bkm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 34px 72px 30px; overflow: hidden; }\n.bkm-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }\n.bkm-sec { flex: 0 0 auto; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 6px solid #9c2a2a; font-size: 44px; font-weight: 700; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.bkm-rows { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }\n.bkm-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 112px; padding: 0 22px 0 26px; overflow: hidden; }\n.bkm-row + .bkm-row { border-top: 2px solid rgba(0, 0, 0, 0.11); }\n.bkm-main { flex: 1 1 auto; min-width: 0; }\n.bkm-item { font-size: 46px; font-weight: 700; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.bkm-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; min-width: 0; }\n.bkm-flag { display: none; flex: 0 0 auto; padding: 4px 14px; background: #9c2a2a; color: #faf3e6; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }\n.bkm-note { flex: 1 1 auto; min-width: 0; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 500; line-height: 1.15; color: #6b4a34; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.bkm-price { flex: 0 0 auto; font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: #9c2a2a; white-space: nowrap; }\n.bkm.fresh-item1 .bkm-row.r1,\n.bkm.fresh-item2 .bkm-row.r2,\n.bkm.fresh-item3 .bkm-row.r3,\n.bkm.fresh-item4 .bkm-row.r4,\n.bkm.fresh-item5 .bkm-row.r5,\n.bkm.fresh-item6 .bkm-row.r6,\n.bkm.fresh-item7 .bkm-row.r7,\n.bkm.fresh-item8 .bkm-row.r8,\n.bkm.fresh-item9 .bkm-row.r9 { background: rgba(124, 45, 18, 0.1); box-shadow: inset 12px 0 0 #9c2a2a; }\n.bkm.fresh-item1 .bkm-row.r1 .bkm-flag,\n.bkm.fresh-item2 .bkm-row.r2 .bkm-flag,\n.bkm.fresh-item3 .bkm-row.r3 .bkm-flag,\n.bkm.fresh-item4 .bkm-row.r4 .bkm-flag,\n.bkm.fresh-item5 .bkm-row.r5 .bkm-flag,\n.bkm.fresh-item6 .bkm-row.r6 .bkm-flag,\n.bkm.fresh-item7 .bkm-row.r7 .bkm-flag,\n.bkm.fresh-item8 .bkm-row.r8 .bkm-flag,\n.bkm.fresh-item9 .bkm-row.r9 .bkm-flag { display: inline-block; }\n.bkm-card { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 24px; margin-top: 20px; padding: 18px 26px; overflow: hidden; background: #9c2a2a; color: #faf3e6; }\n.bkm-card-title { flex: 0 0 auto; padding: 6px 16px; background: #faf3e6; color: #9c2a2a; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }\n.bkm-card-text { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 30px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }\n.bkm-foot { display: flex; align-items: center; padding: 0 72px; overflow: hidden; background: #2a1a10; color: #faf3e6; border-top: 10px solid #9c2a2a; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: 0.06em; }\n.bkm-foot span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"bkm fresh-item3\">\n  <div class=\"bkm-head\">\n    <div class=\"bkm-brand\">\n      <div class=\"bkm-shop\">Hearth &amp; Crumb</div>\n      <div class=\"bkm-tagline\">Neighbourhood bakery since 2012</div>\n    </div>\n    <div class=\"bkm-date\">Saturday · Out of the oven at 7am</div>\n  </div>\n  <div class=\"bkm-body\">\n    <div class=\"bkm-col\">\n      <div class=\"bkm-sec\">From the Oven</div>\n      <div class=\"bkm-rows\">\n        <div class=\"bkm-row r1\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Sourdough Miche</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">36-hour levain, dark bake, 1kg loaf</span></div>\n          </div>\n          <div class=\"bkm-price\">$9.50</div>\n        </div>\n        <div class=\"bkm-row r2\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Butter Croissant</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Laminated over three days</span></div>\n          </div>\n          <div class=\"bkm-price\">$4.75</div>\n        </div>\n        <div class=\"bkm-row r3\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Cardamom Bun</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Hand-knotted, pearl sugar</span></div>\n          </div>\n          <div class=\"bkm-price\">$5.25</div>\n        </div>\n        <div class=\"bkm-row r4\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Seeded Rye</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Sunflower, flax and caraway</span></div>\n          </div>\n          <div class=\"bkm-price\">$8.00</div>\n        </div>\n        <div class=\"bkm-row r5\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Morning Bun</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Orange zest and cinnamon sugar</span></div>\n          </div>\n          <div class=\"bkm-price\">$4.50</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"bkm-col\">\n      <div class=\"bkm-sec\">Cakes &amp; Sweets</div>\n      <div class=\"bkm-rows\">\n        <div class=\"bkm-row r6\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Almond Frangipane Tart</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Poached pear, toasted almond</span></div>\n          </div>\n          <div class=\"bkm-price\">$6.50</div>\n        </div>\n        <div class=\"bkm-row r7\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Chocolate Rye Cookie</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Sea salt, 70% dark</span></div>\n          </div>\n          <div class=\"bkm-price\">$3.75</div>\n        </div>\n        <div class=\"bkm-row r8\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Lemon Olive Oil Cake</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Whole slice, candied peel</span></div>\n          </div>\n          <div class=\"bkm-price\">$6.00</div>\n        </div>\n        <div class=\"bkm-row r9\">\n          <div class=\"bkm-main\">\n            <div class=\"bkm-item\">Pistachio Kouign-Amann</div>\n            <div class=\"bkm-meta\"><span class=\"bkm-flag\">Fresh Today</span><span class=\"bkm-note\">Caramelised, baked to order</span></div>\n          </div>\n          <div class=\"bkm-price\">$5.75</div>\n        </div>\n      </div>\n      <div class=\"bkm-card\">\n        <span class=\"bkm-card-title\">Order Ahead</span>\n        <span class=\"bkm-card-text\">Whole cakes and party boxes need 48 hours notice.</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"bkm-foot\"><span>Baked on site every morning · Open 7am to 4pm, closed Mondays</span></div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "cafe-menu",
      "name": "Cafe Menu",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .cafemenu { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; background: radial-gradient(120% 78% at 50% 0%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 62%), #2b1a12; color: #f8ecd9; }\n.cafemenu-head { flex: 0 0 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 72px; overflow: hidden; border-bottom: 6px solid #e8a13a; }\n.cafemenu-name { max-width: 100%; font-family: Georgia, \"Iowan Old Style\", \"Times New Roman\", serif; font-size: 96px; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: #f8ecd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cafemenu-tagline { max-width: 100%; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: 0.24em; text-transform: uppercase; color: #e8a13a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cafemenu-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 40px; padding: 34px 56px 30px; overflow: hidden; }\n.cafemenu-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 26px 34px 24px; border-radius: 22px; background: #3b2519; }\n.cafemenu-section { flex: 0 0 auto; font-family: Georgia, \"Iowan Old Style\", \"Times New Roman\", serif; font-size: 46px; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; color: #e8a13a; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 5px solid #e8a13a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cafemenu-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; overflow: hidden; }\n.cafemenu-row { flex: 0 0 auto; min-width: 0; }\n.cafemenu-line { display: flex; align-items: baseline; gap: 16px; }\n.cafemenu-item { flex: 0 1 auto; min-width: 0; font-size: 40px; font-weight: 700; line-height: 1.2; color: #f8ecd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cafemenu-leader { flex: 1 1 auto; min-width: 30px; height: 0; align-self: flex-end; margin-bottom: 10px; border-bottom: 5px dotted #e8a13a; opacity: 0.55; }\n.cafemenu-price { flex: 0 0 auto; font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #f6c66a; white-space: nowrap; }\n.cafemenu-desc { margin-top: 2px; font-size: 32px; font-weight: 400; line-height: 1.22; color: #f8ecd9; opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cafemenu-extras { flex: 0 0 116px; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 0 56px; overflow: hidden; background: #e8a13a; }\n.cafemenu-extras-label { flex: 0 0 auto; font-size: 30px; font-weight: 900; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: #2b1a12; white-space: nowrap; }\n.cafemenu-extra { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 14px; padding: 12px 28px; border-radius: 999px; background: #2b1a12; overflow: hidden; }\n.cafemenu-extra-name { min-width: 0; font-size: 34px; font-weight: 600; line-height: 1.2; color: #f8ecd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.cafemenu-extra-price { flex: 0 0 auto; font-size: 34px; font-weight: 800; line-height: 1.2; color: #f6c66a; white-space: nowrap; }\n.cafemenu-foot { flex: 0 0 80px; display: flex; align-items: center; justify-content: center; padding: 0 64px; overflow: hidden; background: #3b2519; }\n.cafemenu-foot span { font-size: 32px; font-weight: 500; line-height: 1.2; color: #f8ecd9; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"cafemenu\">\n  <div class=\"cafemenu-head\">\n    <div class=\"cafemenu-name\">Ember &amp; Oak Coffee</div>\n    <div class=\"cafemenu-tagline\">Small-batch roastery - open daily 6am to 6pm</div>\n  </div>\n  <div class=\"cafemenu-body\">\n    <div class=\"cafemenu-col\">\n      <div class=\"cafemenu-section\">Espresso Bar</div>\n      <div class=\"cafemenu-list\">\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Espresso</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$3.25</span></div>\n          <div class=\"cafemenu-desc\">Two ounces, pulled to order</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Cortado</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.00</span></div>\n          <div class=\"cafemenu-desc\">Equal parts espresso and warm milk</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Cappuccino</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.50</span></div>\n          <div class=\"cafemenu-desc\">Dense foam, dusted with cocoa</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Caffe Latte</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.75</span></div>\n          <div class=\"cafemenu-desc\">Double shot, silky steamed milk</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Mocha</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$5.25</span></div>\n          <div class=\"cafemenu-desc\">Dark chocolate, espresso, whipped cream</div>\n        </div>\n      </div>\n    </div>\n    <div class=\"cafemenu-col\">\n      <div class=\"cafemenu-section\">Brew Bar &amp; More</div>\n      <div class=\"cafemenu-list\">\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Drip Coffee</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$2.75</span></div>\n          <div class=\"cafemenu-desc\">House blend, fresh pot every hour</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Pour Over</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.50</span></div>\n          <div class=\"cafemenu-desc\">Single origin, brewed cup by cup</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Cold Brew</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.75</span></div>\n          <div class=\"cafemenu-desc\">Steeped 18 hours, poured over ice</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Chai Latte</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.50</span></div>\n          <div class=\"cafemenu-desc\">Spiced black tea with steamed milk</div>\n        </div>\n        <div class=\"cafemenu-row\">\n          <div class=\"cafemenu-line\"><span class=\"cafemenu-item\">Hot Chocolate</span><span class=\"cafemenu-leader\"></span><span class=\"cafemenu-price\">$4.00</span></div>\n          <div class=\"cafemenu-desc\">Belgian cocoa, marshmallow on top</div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"cafemenu-extras\">\n    <span class=\"cafemenu-extras-label\">Make it yours</span>\n    <span class=\"cafemenu-extra\"><span class=\"cafemenu-extra-name\">Extra Shot</span><span class=\"cafemenu-extra-price\">+$1.00</span></span>\n    <span class=\"cafemenu-extra\"><span class=\"cafemenu-extra-name\">Oat or Almond Milk</span><span class=\"cafemenu-extra-price\">+$0.75</span></span>\n    <span class=\"cafemenu-extra\"><span class=\"cafemenu-extra-name\">Vanilla or Caramel</span><span class=\"cafemenu-extra-price\">+$0.60</span></span>\n  </div>\n  <div class=\"cafemenu-foot\"><span>Beans roasted in-house every Tuesday - ask us what is on the pour-over bar today</span></div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "daily-special-1",
      "name": "Daily Special 1",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .special { display: flex; height: 100%; background: #0f172a; }\n.special .image { flex: 1; background-image: url(/img/demo-food.svg); background-size: cover; background-position: center; }\n.special .info { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px; color: white; }\n.special .badge { background: #ef4444; padding: 10px 20px; border-radius: 20px; font-size: 24px; width: fit-content; margin-bottom: 30px; }\n.special h1 { font-size: 64px; margin-bottom: 20px; }\n.special p { font-size: 28px; color: #94a3b8; margin-bottom: 40px; }\n.special .price { font-size: 56px; color: #22c55e; font-weight: 700; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"special\">\n  <div class=\"image\"></div>\n  <div class=\"info\">\n    <span class=\"badge\">TODAY ONLY</span>\n    <h1>Grilled Salmon</h1>\n    <p>Fresh Atlantic salmon with herbs</p>\n    <div class=\"price\">$24.99</div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "daily-special-2",
      "name": "Daily Special 2",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .dsp2 { position: relative; height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: #7a1216; color: #fff4e6; font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif; }\n.dsp2-band { flex: 0 0 176px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 0 72px; background: #f5a524; }\n.dsp2-badge { min-width: 0; font-size: 88px; font-weight: 900; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #7a1216; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dsp2-kicker { flex: 0 0 auto; max-width: 620px; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: #7a1216; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dsp2-body { position: relative; flex: 1 1 auto; display: flex; min-height: 0; }\n.dsp2-wall { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }\n.dsp2-titlewrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; padding: 36px 56px 26px 72px; overflow: hidden; }\n.dsp2-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 100%; font-size: 190px; font-weight: 900; line-height: 0.84; letter-spacing: -0.035em; text-transform: uppercase; overflow-wrap: break-word; color: #fff4e6; }\n.dsp2-deck { flex: 0 0 auto; min-height: 220px; display: flex; align-items: center; padding: 34px 56px 34px 72px; border-top: 12px solid #f5a524; background: rgba(0, 0, 0, 0.26); }\n.dsp2-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 820px; font-size: 42px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; color: #fff4e6; }\n.dsp2-shot { flex: 0 0 560px; border-left: 16px solid #f5a524; background-color: #7a1216; background-image: linear-gradient(205deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.55) 100%), url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2066%2090%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27b%27%20x2%3D%27.35%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%2393310f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%232b0a05%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2766%27%20height%3D%2790%27%20fill%3D%27url%28%23b%29%27%2F%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2747%27%20r%3D%2725%27%20fill%3D%27%23f7e6c4%27%2F%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2747%27%20r%3D%2717%27%20fill%3D%27%23c2410c%27%2F%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2747%27%20r%3D%2717%27%20fill%3D%27none%27%20stroke%3D%27%23f2b544%27%2F%3E%3Ccircle%20cx%3D%2733%27%20cy%3D%2747%27%20r%3D%275%27%20fill%3D%27%237c2d12%27%2F%3E%3C%2Fsvg%3E\"); background-size: cover, cover; background-position: center, center; }\n.dsp2-slab { position: absolute; left: 1360px; bottom: 40px; max-width: 760px; padding: 24px 44px 30px; background: #fffaf0; color: #7a1216; transform: translateX(-50%) rotate(-3deg); box-shadow: 18px 18px 0 rgba(0, 0, 0, 0.45); overflow: hidden; }\n.dsp2-price { font-size: 126px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: #7a1216; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dsp2-note { margin-top: 6px; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: 0.18em; text-transform: uppercase; color: #7a1216; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dsp2-foot { flex: 0 0 128px; display: flex; align-items: center; padding: 0 72px; background: #f5a524; overflow: hidden; }\n.dsp2-foot span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 34px; font-weight: 700; line-height: 1.2; color: #7a1216; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"dsp2\">\n  <div class=\"dsp2-band\">\n    <div class=\"dsp2-badge\">Today Only</div>\n    <div class=\"dsp2-kicker\">Chef&#039;s Pick</div>\n  </div>\n  <div class=\"dsp2-body\">\n    <div class=\"dsp2-wall\">\n      <div class=\"dsp2-titlewrap\"><h1 class=\"dsp2-title\">Grilled Salmon</h1></div>\n      <div class=\"dsp2-deck\"><p class=\"dsp2-desc\">Fresh Atlantic salmon, charred lemon and herb butter, served with new potatoes.</p></div>\n    </div>\n    <div class=\"dsp2-shot\"></div>\n    <div class=\"dsp2-slab\">\n      <div class=\"dsp2-price\">$24.99</div>\n      <div class=\"dsp2-note\">Per Plate</div>\n    </div>\n  </div>\n  <div class=\"dsp2-foot\"><span>Ask your server about tonight&#039;s pairing - kitchen open until 10pm</span></div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "drinks-menu",
      "name": "Drinks Menu",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .dkm-board { position: relative; display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; color: #faf0dd; font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif; background-color: #150c07; background-image: radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%), radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.55) 100%), linear-gradient(165deg, #150c07 0%, #34190d 55%, #150c07 100%); }\n.dkm-head { flex: 0 0 232px; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; background: rgba(0,0,0,0.34); border-bottom: 6px solid #d99a2b; overflow: hidden; }\n.dkm-headline { min-width: 0; }\n.dkm-title { font-size: 96px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: #faf0dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-sub { margin-top: 18px; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; color: #d99a2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-badge { flex: 0 0 auto; max-width: 640px; padding: 20px 36px; border: 4px solid #d99a2b; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: #d99a2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; padding: 40px 72px 34px; }\n.dkm-col { min-width: 0; display: flex; flex-direction: column; }\n.dkm-sect { flex: 0 0 auto; display: flex; align-items: baseline; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 3px solid rgba(255,255,255,0.18); overflow: hidden; }\n.dkm-sect-title { min-width: 0; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: #d99a2b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; }\n.dkm-row { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 28px; padding: 12px 26px; border-left: 8px solid #d99a2b; background: linear-gradient(90deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.16) 100%); overflow: hidden; }\n.dkm-main { flex: 1 1 auto; min-width: 0; }\n.dkm-name { font-size: 46px; font-weight: 800; line-height: 1.04; letter-spacing: -0.01em; color: #faf0dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-desc { margin-top: 8px; font-size: 32px; font-weight: 500; line-height: 1.18; color: #d3b98f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-tail { flex: 0 1 auto; min-width: 0; max-width: 38%; text-align: right; }\n.dkm-price { font-size: 54px; font-weight: 900; line-height: 1; letter-spacing: -0.01em; color: #ffcc5c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-meta { margin-top: 10px; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: 0.1em; text-transform: uppercase; color: #d3b98f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.dkm-foot { flex: 0 0 128px; display: flex; align-items: center; justify-content: center; padding: 0 72px; background: #d99a2b; overflow: hidden; }\n.dkm-foot-note { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: #150c07; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"dkm-board\">\n  <div class=\"dkm-head\">\n    <div class=\"dkm-headline\">\n      <div class=\"dkm-title\">The Copper Tap</div>\n      <div class=\"dkm-sub\">Poured fresh until close</div>\n    </div>\n    <div class=\"dkm-badge\">Happy Hour 4-6</div>\n  </div>\n  <div class=\"dkm-body\">\n    <div class=\"dkm-col\">\n      <div class=\"dkm-sect\"><span class=\"dkm-sect-title\">On Tap</span></div>\n      <div class=\"dkm-list\">\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Copper Line IPA</div>\n            <div class=\"dkm-desc\">Hazy, stone fruit, soft bitter finish</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$8</div>\n            <div class=\"dkm-meta\">6.4% ABV</div>\n          </div>\n        </div>\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Midnight Porter</div>\n            <div class=\"dkm-desc\">Cocoa nib, espresso, dry roast</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$7</div>\n            <div class=\"dkm-meta\">5.8% ABV</div>\n          </div>\n        </div>\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Ash Grove Pilsner</div>\n            <div class=\"dkm-desc\">Crisp, floral hop, clean malt</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$6</div>\n            <div class=\"dkm-meta\">4.9% ABV</div>\n          </div>\n        </div>\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Farmhouse Saison</div>\n            <div class=\"dkm-desc\">Peppery, dry, lemon zest</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$8</div>\n            <div class=\"dkm-meta\">6.1% ABV</div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"dkm-col\">\n      <div class=\"dkm-sect\"><span class=\"dkm-sect-title\">Cocktails &amp; Wine</span></div>\n      <div class=\"dkm-list\">\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Smoked Old Fashioned</div>\n            <div class=\"dkm-desc\">Rye, demerara, cherry bark bitters</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$14</div>\n            <div class=\"dkm-meta\">Stirred</div>\n          </div>\n        </div>\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Garden Gimlet</div>\n            <div class=\"dkm-desc\">Gin, lime cordial, cucumber, dill</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$13</div>\n            <div class=\"dkm-meta\">Shaken</div>\n          </div>\n        </div>\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Rioja Crianza</div>\n            <div class=\"dkm-desc\">Red cherry, vanilla, soft tannin</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$12</div>\n            <div class=\"dkm-meta\">Spain, 6oz</div>\n          </div>\n        </div>\n        <div class=\"dkm-row\">\n          <div class=\"dkm-main\">\n            <div class=\"dkm-name\">Willamette Pinot Gris</div>\n            <div class=\"dkm-desc\">Pear, white flower, bright finish</div>\n          </div>\n          <div class=\"dkm-tail\">\n            <div class=\"dkm-price\">$11</div>\n            <div class=\"dkm-meta\">Oregon, 6oz</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"dkm-foot\"><span class=\"dkm-foot-note\">Flight of four drafts $14 - ask about tonight&#039;s cask</span></div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "food-truck-menu",
      "name": "Food Truck Menu",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .ftm { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: #12100f; color: #fff7e8; font-family: 'Arial Black', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif; }\n.ftm-head { flex: 0 0 152px; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; background: #ff7a1a; color: #1a0f00; overflow: hidden; }\n.ftm-name { min-width: 0; font-size: 92px; font-weight: 900; line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ftm-tagline { flex: 0 1 auto; max-width: 700px; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 0.2em; text-transform: uppercase; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ftm-sig { flex: 0 0 272px; display: flex; align-items: center; gap: 48px; padding: 26px 72px; background: #8c1d04; border-bottom: 8px solid #ff7a1a; overflow: hidden; }\n.ftm-sig-text { flex: 1 1 auto; min-width: 0; }\n.ftm-sig-name { font-size: 92px; font-weight: 900; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ftm-sig-note { margin-top: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 34px; font-weight: 600; line-height: 1.25; letter-spacing: 0.005em; overflow-wrap: break-word; }\n.ftm-sig-price { flex: 0 0 auto; font-size: 124px; font-weight: 900; line-height: 1; letter-spacing: -0.035em; color: #ffd12e; white-space: nowrap; }\n.ftm-stamp { flex: 0 0 360px; height: 152px; display: flex; align-items: center; justify-content: center; padding: 14px 20px; text-align: center; background: #ff7a1a; color: #1a0f00; border: 8px solid #fff7e8; border-radius: 999px; transform: rotate(-4deg); box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.32); overflow: hidden; }\n.ftm-stamp span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: break-word; }\n.ftm-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 72px 0; overflow: hidden; }\n.ftm-row { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 2px 0; border-bottom: 4px solid #4a3a24; overflow: hidden; }\n.ftm-row:last-child { border-bottom: none; }\n.ftm-row-text { flex: 1 1 auto; min-width: 0; }\n.ftm-item { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -0.015em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ftm-note { margin-top: 6px; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ftm-price { flex: 0 0 auto; font-size: 76px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: #ffd12e; white-space: nowrap; }\n.ftm-foot { flex: 0 0 100px; display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 72px; background: #ff7a1a; color: #1a0f00; border-top: 8px solid #12100f; overflow: hidden; }\n.ftm-foot span { min-width: 0; font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ftm-foot .ftm-foot-right { flex: 0 1 auto; text-align: right; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"ftm\">\n  <div class=\"ftm-head\">\n    <div class=\"ftm-name\">Rusty Spoon</div>\n    <div class=\"ftm-tagline\">Wood-Fired Street Food</div>\n  </div>\n  <div class=\"ftm-sig\">\n    <div class=\"ftm-sig-text\">\n      <div class=\"ftm-sig-name\">The Firebird</div>\n      <div class=\"ftm-sig-note\">Buttermilk-brined chicken thigh, chipotle slaw and smoked honey on a potato bun.</div>\n    </div>\n    <div class=\"ftm-sig-price\">$14</div>\n    <div class=\"ftm-stamp\"><span>Fan Favorite</span></div>\n  </div>\n  <div class=\"ftm-list\">\n    <div class=\"ftm-row\">\n      <div class=\"ftm-row-text\">\n        <div class=\"ftm-item\">Smash Burger</div>\n        <div class=\"ftm-note\">Double patty, house pickles, secret sauce</div>\n      </div>\n      <div class=\"ftm-price\">$12</div>\n    </div>\n    <div class=\"ftm-row\">\n      <div class=\"ftm-row-text\">\n        <div class=\"ftm-item\">Baja Fish Taco</div>\n        <div class=\"ftm-note\">Beer-battered cod, lime crema, red cabbage</div>\n      </div>\n      <div class=\"ftm-price\">$9</div>\n    </div>\n    <div class=\"ftm-row\">\n      <div class=\"ftm-row-text\">\n        <div class=\"ftm-item\">Loaded Chili Fries</div>\n        <div class=\"ftm-note\">Slow-cooked beef chili, jack cheese, scallion</div>\n      </div>\n      <div class=\"ftm-price\">$10</div>\n    </div>\n    <div class=\"ftm-row\">\n      <div class=\"ftm-row-text\">\n        <div class=\"ftm-item\">Charred Corn Ribs</div>\n        <div class=\"ftm-note\">Cotija, chili butter, cilantro, lime</div>\n      </div>\n      <div class=\"ftm-price\">$8</div>\n    </div>\n    <div class=\"ftm-row\">\n      <div class=\"ftm-row-text\">\n        <div class=\"ftm-item\">Horchata Shake</div>\n        <div class=\"ftm-note\">Cinnamon, vanilla bean, condensed milk</div>\n      </div>\n      <div class=\"ftm-price\">$6</div>\n    </div>\n  </div>\n  <div class=\"ftm-foot\">\n    <span>Cash &amp; card - order at the window</span>\n    <span class=\"ftm-foot-right\">@rustyspoontruck</span>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "menu-board",
      "name": "Menu Board",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .menu-board { display: flex; flex-direction: column; height: 100%; background: #1a1a2e; color: #ffffff; font-family: system-ui, sans-serif; }\n.menu-header { text-align: center; padding: 40px; background: rgba(0,0,0,0.3); }\n.menu-header h1 { font-size: 56px; margin: 0; color: #f59e0b; }\n.menu-header p { font-size: 24px; margin: 10px 0 0; opacity: 0.8; }\n.menu-columns { flex: 1; display: flex; padding: 40px; gap: 40px; }\n.menu-section { flex: 1; background: rgba(0,0,0,0.2); border-radius: 16px; padding: 30px; }\n.menu-section h2 { font-size: 32px; color: #f59e0b; margin: 0 0 25px; padding-bottom: 15px; border-bottom: 2px solid #f59e0b; }\n.menu-items { display: flex; flex-direction: column; gap: 18px; }\n.menu-item { display: flex; justify-content: space-between; align-items: baseline; font-size: 26px; }\n.item-name { flex: 1; }\n.item-price { font-weight: 600; color: #f59e0b; margin-left: 20px; }\n.menu-footer { text-align: center; padding: 25px; background: rgba(0,0,0,0.3); font-size: 22px; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"menu-board\">\n  <div class=\"menu-header\">\n    <h1>Our Menu</h1>\n    <p>Fresh ingredients, made with love</p>\n  </div>\n  <div class=\"menu-columns\">\n    <div class=\"menu-section\">\n      <h2>Appetizers</h2>\n      <div class=\"menu-items\">\n        <div class=\"menu-item\"><span class=\"item-name\">Spring Rolls</span><span class=\"item-price\">$8</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Soup of the Day</span><span class=\"item-price\">$6</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Garden Salad</span><span class=\"item-price\">$9</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Bruschetta</span><span class=\"item-price\">$7</span></div>\n      </div>\n    </div>\n    <div class=\"menu-section\">\n      <h2>Main Courses</h2>\n      <div class=\"menu-items\">\n        <div class=\"menu-item\"><span class=\"item-name\">Grilled Salmon</span><span class=\"item-price\">$24</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Ribeye Steak</span><span class=\"item-price\">$32</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Chicken Parmesan</span><span class=\"item-price\">$18</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Veggie Pasta</span><span class=\"item-price\">$16</span></div>\n      </div>\n    </div>\n    <div class=\"menu-section\">\n      <h2>Beverages</h2>\n      <div class=\"menu-items\">\n        <div class=\"menu-item\"><span class=\"item-name\">Fresh Juice</span><span class=\"item-price\">$5</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Coffee</span><span class=\"item-price\">$4</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Iced Tea</span><span class=\"item-price\">$3</span></div>\n        <div class=\"menu-item\"><span class=\"item-name\">Smoothie</span><span class=\"item-price\">$7</span></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"menu-footer\">Ask about our daily specials!</div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "simple-menu",
      "name": "Simple Menu",
      "category": "menu",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .menu { display: flex; flex-direction: column; height: 100%; background: #1a1a2e; color: white; padding: 80px; }\n.menu h1 { font-size: 64px; text-align: center; margin-bottom: 60px; color: #f59e0b; }\n.menu .items { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 30px; }\n.menu .item { display: flex; justify-content: space-between; font-size: 36px; padding: 20px 0; border-bottom: 1px solid #333; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"menu\">\n  <h1>Today&#039;s Specials</h1>\n  <div class=\"items\">\n    <div class=\"item\"><span>Burger</span><span>$12.99</span></div>\n    <div class=\"item\"><span>Pizza</span><span>$15.99</span></div>\n    <div class=\"item\"><span>Salad</span><span>$9.99</span></div>\n    <div class=\"item\"><span>Soup</span><span>$7.99</span></div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "happy-hour",
      "name": "Happy Hour",
      "category": "promotion",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .hh { display: grid; grid-template-rows: 392px 10px 1fr 130px; height: 100%; width: 100%; overflow: hidden; font-family: \"Helvetica Neue\", Helvetica, Arial, system-ui, sans-serif; color: #fff4e8; background-color: #140524; background-image: radial-gradient(rgba(255,255,255,0.055) 2.5px, rgba(0,0,0,0) 2.6px), linear-gradient(165deg, #140524 0%, #3d0d52 100%); background-size: 54px 54px, cover; }\n.hh-hero { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 76px; overflow: hidden; }\n.hh-brand { flex: 1 1 0; min-width: 0; }\n.hh-venue { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 0.28em; text-transform: uppercase; color: #ffc94a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-title { margin-top: 18px; font-size: 104px; font-weight: 900; line-height: 0.94; letter-spacing: -0.02em; text-transform: uppercase; color: #fff4e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-days { margin-top: 20px; font-size: 42px; font-weight: 700; line-height: 1.1; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-when { flex: 0 0 auto; min-width: 0; max-width: 1000px; text-align: right; }\n.hh-window { padding: 42px 38px; margin: -42px -38px; font-size: 158px; font-weight: 900; line-height: 0.92; letter-spacing: -0.02em; color: #ffc94a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 20px #ffc94a, 0 0 46px #ff2f7e; }\n.hh-status { display: inline-flex; align-items: center; gap: 18px; max-width: 100%; margin-top: 26px; padding: 13px 34px; border: 4px solid #ff2f7e; border-radius: 999px; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase; color: #fff4e8; box-shadow: 0 0 30px -6px #ff2f7e; }\n.hh-status-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #ff2f7e; }\n.hh-status.is-live { background: #ff2f7e; color: #140524; }\n.hh-status.is-live .hh-dot { background: #140524; animation: hh-pulse 1.5s ease-in-out infinite; }\n@keyframes hh-pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.72); } 100% { opacity: 1; transform: scale(1); } }\n.hh-rule { background: #ff2f7e; box-shadow: 0 0 34px -4px #ff2f7e; }\n.hh-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 22px 30px; padding: 30px 76px; min-height: 0; overflow: hidden; }\n.hh-item { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 0; overflow: hidden; padding: 0 32px; border-left: 10px solid #ff2f7e; border-radius: 14px; background: rgba(255,255,255,0.055); box-shadow: 0 12px 28px rgba(0,0,0,0.3); }\n.hh-item-copy { flex: 1 1 auto; min-width: 0; }\n.hh-item-name { font-size: 50px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: #fff4e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-item-detail { margin-top: 8px; font-size: 32px; font-weight: 500; line-height: 1.2; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.hh-item-price { flex: 0 0 auto; font-size: 68px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: #ffc94a; white-space: nowrap; }\n.hh-foot { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding: 0 76px; background: rgba(0,0,0,0.35); overflow: hidden; }\n.hh-terms { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 1180px; font-size: 32px; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; }\n.hh-cta { flex: 0 0 auto; font-size: 38px; font-weight: 900; line-height: 1.1; letter-spacing: 0.1em; text-transform: uppercase; color: #ffc94a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"hh\">\n  <div class=\"hh-hero\">\n    <div class=\"hh-brand\">\n      <div class=\"hh-venue\">The Copper Tap</div>\n      <h1 class=\"hh-title\">Happy Hour</h1>\n      <div class=\"hh-days\">Monday through Friday</div>\n    </div>\n    <div class=\"hh-when\">\n      <div class=\"hh-window\">4 – 7 PM</div>\n      <div class=\"hh-status\" id=\"hh-status\">\n        <span class=\"hh-dot\"></span>\n        <span class=\"hh-status-text\" id=\"hh-status-text\">Back tomorrow at 4</span>\n      </div>\n    </div>\n  </div>\n  <div class=\"hh-rule\"></div>\n  <div class=\"hh-list\">\n    <div class=\"hh-item\">\n      <div class=\"hh-item-copy\">\n        <div class=\"hh-item-name\">House Draft Pints</div>\n        <div class=\"hh-item-detail\">Every tap, 16 oz pour</div>\n      </div>\n      <div class=\"hh-item-price\">$5</div>\n    </div>\n    <div class=\"hh-item\">\n      <div class=\"hh-item-copy\">\n        <div class=\"hh-item-name\">Well Cocktails</div>\n        <div class=\"hh-item-detail\">Bartender&#039;s choice of spirit</div>\n      </div>\n      <div class=\"hh-item-price\">$7</div>\n    </div>\n    <div class=\"hh-item\">\n      <div class=\"hh-item-copy\">\n        <div class=\"hh-item-name\">Wine by the Glass</div>\n        <div class=\"hh-item-detail\">Red, white or bubbles</div>\n      </div>\n      <div class=\"hh-item-price\">$8</div>\n    </div>\n    <div class=\"hh-item\">\n      <div class=\"hh-item-copy\">\n        <div class=\"hh-item-name\">Crispy Wings</div>\n        <div class=\"hh-item-detail\">Six pieces, any sauce</div>\n      </div>\n      <div class=\"hh-item-price\">$9</div>\n    </div>\n    <div class=\"hh-item\">\n      <div class=\"hh-item-copy\">\n        <div class=\"hh-item-name\">Loaded Nachos</div>\n        <div class=\"hh-item-detail\">Add pulled pork for $3</div>\n      </div>\n      <div class=\"hh-item-price\">$10</div>\n    </div>\n    <div class=\"hh-item\">\n      <div class=\"hh-item-copy\">\n        <div class=\"hh-item-name\">Truffle Fries</div>\n        <div class=\"hh-item-detail\">Parmesan, garlic and herbs</div>\n      </div>\n      <div class=\"hh-item-price\">$6</div>\n    </div>\n  </div>\n  <div class=\"hh-foot\">\n    <p class=\"hh-terms\">Bar and patio seating only. Dine-in, one round per guest at a time. Not valid with other offers or on game days. Must be 21+ with valid ID.</p>\n    <div class=\"hh-cta\">Grab a seat at the bar</div>\n  </div>\n</div>\n<script>\n(function () {\n  var pill = document.getElementById('hh-status');\n  var label = document.getElementById('hh-status-text');\n  if (!pill || !label) return;\n\n  var offHours = 'Back tomorrow at 4';\n\n  function parseClock(value) {\n    var m = /^\\s*(\\d{1,2})\\s*:\\s*(\\d{2})\\s*$/.exec(value || '');\n    if (!m) return null;\n    var h = parseInt(m[1], 10);\n    var min = parseInt(m[2], 10);\n    if (h > 23 || min > 59) return null;\n    return h * 60 + min;\n  }\n\n  function human(mins) {\n    var h = Math.floor(mins / 60);\n    var m = mins % 60;\n    if (h > 0 && m > 0) return h + 'h ' + m + 'm';\n    if (h > 0) return h + 'h';\n    return m + 'm';\n  }\n\n  function render(isLive, text) {\n    label.textContent = text;\n    if (isLive) pill.className = 'hh-status is-live';\n    else pill.className = 'hh-status';\n  }\n\n  var startAt = parseClock('16:00');\n  var endAt = parseClock('19:00');\n\n  function update() {\n    if (startAt === null || endAt === null) {\n      render(false, offHours);\n      return;\n    }\n    var d = new Date();\n    var now = d.getHours() * 60 + d.getMinutes();\n    var close = endAt <= startAt ? endAt + 1440 : endAt;\n    var left = null;\n    if (now >= startAt && now < close) left = close - now;\n    else if (now + 1440 >= startAt && now + 1440 < close) left = close - now - 1440;\n    if (left !== null) {\n      render(true, 'On now, ' + human(left) + ' left');\n      return;\n    }\n    var until = (startAt - now + 1440) % 1440;\n    if (until > 0 && until <= 180) {\n      render(false, 'Starts in ' + human(until));\n      return;\n    }\n    render(false, offHours);\n  }\n\n  update();\n  setInterval(update, 30000);\n})();\n</script>\n\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "product-feature-1",
      "name": "Product Feature 1",
      "category": "promotion",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .product { display: flex; height: 100%; background: white; }\n.product .image { flex: 1; background-image: url(/img/demo-product.svg); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #f8fafc; }\n.product .info { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px; }\n.product h1 { font-size: 56px; color: #1e293b; margin-bottom: 20px; }\n.product p { font-size: 28px; color: #64748b; margin-bottom: 40px; }\n.product .prices { display: flex; align-items: center; gap: 20px; }\n.product .original { font-size: 32px; color: #94a3b8; text-decoration: line-through; }\n.product .current { font-size: 56px; color: #16a34a; font-weight: 700; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"product\">\n  <div class=\"image\"></div>\n  <div class=\"info\">\n    <h1>Premium Headphones</h1>\n    <p>Wireless noise-canceling headphones with 30-hour battery life</p>\n    <div class=\"prices\">\n      <span class=\"original\">$299</span>\n      <span class=\"current\">$199</span>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "product-feature-2",
      "name": "Product Feature 2",
      "category": "promotion",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .pf2 { display: flex; width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(155deg, #6d28d9 0%, #3b0764 100%); }\n.pf2 .pf2-name { width: 62%; display: flex; flex-direction: column; padding: 0 150px 0 84px; color: #ffffff; overflow: hidden; }\n.pf2 .pf2-eyebrow { margin: 0 -150px 0 -84px; padding: 28px 84px; background: #facc15; color: #0b0f19; font-size: 40px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.pf2 .pf2-titlewrap { flex: 1; display: flex; align-items: center; padding: 56px 0; }\n.pf2 .pf2-title { margin: 0; font-size: 132px; font-weight: 900; line-height: 0.9; letter-spacing: -0.025em; text-transform: uppercase; overflow-wrap: break-word; }\n.pf2 .pf2-cta { margin: 0 -150px 0 -84px; padding: 34px 150px 38px 84px; border-top: 8px solid #facc15; background: rgba(0, 0, 0, 0.3); font-size: 36px; font-weight: 600; line-height: 1.3; }\n.pf2 .pf2-detail { flex: 1; display: flex; flex-direction: column; margin-left: -140px; background: #0b0f19; clip-path: polygon(140px 0, 100% 0, 100% 100%, 0 100%); }\n.pf2 .pf2-plate { position: relative; height: 44%; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNODggMzIwVjI0OGExNjggMTY4IDAgMCAxIDMzNiAwdjcyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMjgiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxyZWN0IHg9IjM2IiB5PSIyOTYiIHdpZHRoPSIxMDgiIGhlaWdodD0iMTg4IiByeD0iNTAiIGZpbGw9IiNmZmYiLz48cmVjdCB4PSIzNjgiIHk9IjI5NiIgd2lkdGg9IjEwOCIgaGVpZ2h0PSIxODgiIHJ4PSI1MCIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,0.06); border-bottom: 8px solid #facc15; }\n.pf2 .pf2-save { position: absolute; right: 0; bottom: 0; padding: 18px 40px; background: #facc15; color: #0b0f19; font-size: 38px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }\n.pf2 .pf2-copy { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 52px 60px 176px; color: #ffffff; overflow: hidden; }\n.pf2 .pf2-desc { margin: 0; font-size: 40px; font-weight: 500; line-height: 1.3; opacity: 0.86; }\n.pf2 .pf2-prices { display: flex; flex-direction: column; padding-top: 26px; border-top: 4px solid rgba(255, 255, 255, 0.18); overflow-wrap: break-word; }\n.pf2 .pf2-was { font-size: 46px; font-weight: 600; text-decoration: line-through; opacity: 0.55; }\n.pf2 .pf2-now { font-size: 148px; font-weight: 900; line-height: 0.95; letter-spacing: -0.025em; color: #facc15; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"pf2\">\n  <div class=\"pf2-name\">\n    <div class=\"pf2-eyebrow\">New Arrival</div>\n    <div class=\"pf2-titlewrap\"><h1 class=\"pf2-title\">Premium Headphones</h1></div>\n    <div class=\"pf2-cta\">Ask any team member for a demo</div>\n  </div>\n  <div class=\"pf2-detail\">\n    <div class=\"pf2-plate\"><span class=\"pf2-save\">Save $100</span></div>\n    <div class=\"pf2-copy\">\n      <p class=\"pf2-desc\">Wireless noise-canceling headphones with 30-hour battery life</p>\n      <div class=\"pf2-prices\">\n        <span class=\"pf2-was\">$299</span>\n        <span class=\"pf2-now\">$199</span>\n      </div>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "real-estate-listing",
      "name": "Real Estate Listing",
      "category": "promotion",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .listing-container { display: flex; height: 100%; background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); font-family: system-ui, sans-serif; }\n.property-image { flex: 1.2; background-image: url(/img/demo-property.svg); background-size: cover; background-position: center; position: relative; background-color: #134e4a; }\n.price-tag { position: absolute; bottom: 30px; left: 30px; background: #fbbf24; color: white; padding: 15px 30px; font-size: 42px; font-weight: 700; border-radius: 8px; }\n.status-badge { position: absolute; top: 30px; right: 30px; background: #22c55e; color: white; padding: 10px 25px; font-size: 20px; font-weight: 600; border-radius: 20px; text-transform: uppercase; }\n.property-info { flex: 1; padding: 50px; display: flex; flex-direction: column; color: #ffffff; }\n.property-info h1 { font-size: 42px; margin: 0 0 10px; }\n.location { font-size: 28px; color: rgba(255,255,255,0.7); margin: 0 0 40px; }\n.features { display: flex; gap: 30px; margin-bottom: 40px; }\n.feature { text-align: center; background: rgba(255,255,255,0.1); padding: 20px 30px; border-radius: 12px; }\n.feature-value { display: block; font-size: 36px; font-weight: 700; color: #fbbf24; }\n.feature-label { font-size: 18px; color: rgba(255,255,255,0.7); text-transform: uppercase; }\n.description { font-size: 24px; line-height: 1.6; color: rgba(255,255,255,0.8); flex: 1; }\n.agent-info { display: flex; align-items: center; gap: 20px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.2); }\n.agent-photo { width: 70px; height: 70px; border-radius: 50%; background-image: url(/img/demo-avatar.svg); background-size: cover; background-color: rgba(255,255,255,0.2); }\n.agent-details { flex: 1; }\n.agent-name { font-size: 24px; font-weight: 600; }\n.agent-contact { font-size: 20px; color: #fbbf24; }\n.qr-code { width: 80px; height: 80px; background-image: url(https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=https://www.sheencast.com); background-size: contain; background-repeat: no-repeat; background-color: white; border-radius: 8px; padding: 5px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"listing-container\">\n  <div class=\"property-image\">\n    <div class=\"price-tag\">$549,000</div>\n    <div class=\"status-badge\">For Sale</div>\n  </div>\n  <div class=\"property-info\">\n    <h1>123 Oak Street</h1>\n    <p class=\"location\">Austin, TX 78701</p>\n    <div class=\"features\">\n      <div class=\"feature\"><span class=\"feature-value\">4</span><span class=\"feature-label\">Beds</span></div>\n      <div class=\"feature\"><span class=\"feature-value\">3</span><span class=\"feature-label\">Baths</span></div>\n      <div class=\"feature\"><span class=\"feature-value\">2,450</span><span class=\"feature-label\">Sq Ft</span></div>\n      <div class=\"feature\"><span class=\"feature-value\">2019</span><span class=\"feature-label\">Year</span></div>\n    </div>\n    <p class=\"description\">Beautiful modern home featuring an open floor plan, gourmet kitchen, and spacious backyard. Recently updated with smart home features.</p>\n    <div class=\"agent-info\">\n      <div class=\"agent-photo\"></div>\n      <div class=\"agent-details\">\n        <div class=\"agent-name\">Jennifer Smith</div>\n        <div class=\"agent-contact\">(512) 555-0123</div>\n      </div>\n      <div class=\"qr-code\"></div>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "sale-banner-1",
      "name": "Sale Banner 1",
      "category": "promotion",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .sale { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); color: white; text-align: center; }\n.sale .discount { font-size: 180px; font-weight: 900; line-height: 1; }\n.sale h1 { font-size: 72px; margin: 20px 0; }\n.sale p { font-size: 36px; opacity: 0.9; }\n.sale .code { margin-top: 40px; background: rgba(0,0,0,0.2); padding: 20px 40px; border-radius: 10px; font-size: 32px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"sale\">\n  <div class=\"discount\">50% OFF</div>\n  <h1>FLASH SALE</h1>\n  <p>Limited time only</p>\n  <div class=\"code\">Use code: SAVE50</div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "sale-banner-2",
      "name": "Sale Banner 2",
      "category": "promotion",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .sale2 { display: grid; grid-template-rows: 158px 1fr 236px; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 46px, rgba(255,255,255,0) 46px 92px), linear-gradient(115deg, #1a0033 0%, #4c0080 100%); }\n.sale2-topbar { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 0 84px; background: #e0006e; color: #ffffff; }\n.sale2-kicker { font-size: 56px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.05; }\n.sale2-terms { flex: 0 1 auto; max-width: 820px; text-align: right; font-size: 32px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; }\n.sale2-body { display: grid; grid-template-columns: 1fr 470px; align-items: center; gap: 40px; padding: 44px 84px; overflow: hidden; }\n.sale2-wall { min-width: 0; max-height: 100%; overflow: hidden; overflow-wrap: break-word; }\n.sale2-title { font-family: 'Arial Black', Impact, system-ui, sans-serif; font-size: 104px; font-weight: 900; line-height: 0.95; letter-spacing: -0.015em; text-transform: uppercase; color: #ffffff; }\n.sale2-rule { height: 24px; margin: 24px 0; background: #e0006e; }\n.sale2-discount { font-family: 'Arial Black', Impact, system-ui, sans-serif; font-size: 236px; font-weight: 900; line-height: 0.86; letter-spacing: -0.035em; text-transform: uppercase; color: #ffe600; }\n.sale2-burst { width: 452px; height: 452px; max-height: 100%; margin-left: auto; overflow: hidden; overflow-wrap: break-word; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; background: #e0006e; border: 14px solid #ffe600; transform: rotate(-7deg); box-shadow: 0 28px 60px rgba(0,0,0,0.38); }\n.sale2-burst-text { font-family: 'Arial Black', Impact, system-ui, sans-serif; font-size: 90px; font-weight: 900; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; color: #ffffff; }\n.sale2-burst-note { margin-top: 22px; font-size: 36px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffffff; }\n.sale2-footer { display: flex; align-items: center; justify-content: space-between; gap: 60px; padding: 0 84px; background: #ffe600; color: #12001f; }\n.sale2-code-group { display: flex; align-items: center; gap: 32px; }\n.sale2-code-label { font-size: 42px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }\n.sale2-code { font-family: 'Arial Black', Impact, system-ui, sans-serif; font-size: 92px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; padding: 18px 44px; background: #12001f; color: #ffe600; }\n.sale2-subtitle { flex: 0 1 auto; max-width: 700px; text-align: right; font-size: 52px; font-weight: 800; line-height: 1.12; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"sale2\">\n  <div class=\"sale2-topbar\">\n    <span class=\"sale2-kicker\">Doors open 9AM</span>\n    <span class=\"sale2-terms\">In store and online</span>\n  </div>\n  <div class=\"sale2-body\">\n    <div class=\"sale2-wall\">\n      <h1 class=\"sale2-title\">FLASH SALE</h1>\n      <div class=\"sale2-rule\"></div>\n      <div class=\"sale2-discount\">50% OFF</div>\n    </div>\n    <div class=\"sale2-burst\">\n      <div class=\"sale2-burst-text\">Today only</div>\n      <div class=\"sale2-burst-note\">Ends Sunday</div>\n    </div>\n  </div>\n  <div class=\"sale2-footer\">\n    <div class=\"sale2-code-group\">\n      <span class=\"sale2-code-label\">Use code</span>\n      <span class=\"sale2-code\">SAVE50</span>\n    </div>\n    <span class=\"sale2-subtitle\">Limited time only</span>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "inspirational-quote-1",
      "name": "Inspirational Quote 1",
      "category": "quote",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .quote { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: #fef3c7; padding: 100px; text-align: center; }\n.quote blockquote { font-size: 56px; font-style: italic; color: #92400e; line-height: 1.4; max-width: 80%; margin-bottom: 40px; }\n.quote blockquote::before { content: \"\\201C\"; font-size: 120px; color: #f59e0b; display: block; line-height: 0.5; }\n.quote cite { font-size: 32px; color: #b45309; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"quote\">\n  <blockquote>The only way to do great work is to love what you do.</blockquote>\n  <cite>— Steve Jobs</cite>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "inspirational-quote-2",
      "name": "Inspirational Quote 2",
      "category": "quote",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .quotewall { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #14110d; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.quotewall .qw-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; padding: 56px 120px 28px; overflow: hidden; }\n.quotewall .qw-field::before { content: \"\\201C\"; position: absolute; top: -210px; left: -30px; font-family: Georgia, \"Times New Roman\", serif; font-size: 760px; line-height: 1; font-weight: 700; color: #f2a50c; opacity: 0.17; }\n.quotewall .qw-field::after { content: \"\\201D\"; position: absolute; right: -30px; bottom: -370px; font-family: Georgia, \"Times New Roman\", serif; font-size: 760px; line-height: 1; font-weight: 700; color: #f2a50c; opacity: 0.17; }\n.quotewall .qw-text { position: relative; z-index: 1; max-width: 1680px; font-size: 136px; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: #fff7ea; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }\n.quotewall .qw-attrib { flex: 0 0 280px; display: flex; align-items: center; padding: 0 120px; background: #f2a50c; }\n.quotewall .qw-name { font-style: normal; font-size: 104px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #14110d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.quotewall .qw-name::before { content: \"\"; display: inline-block; width: 140px; height: 16px; margin-right: 44px; vertical-align: 0.3em; background: #14110d; }\n.quotewall .qw-name:empty { display: none; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"quotewall\">\n  <div class=\"qw-field\">\n    <blockquote class=\"qw-text\">The only way to do great work is to love what you do.</blockquote>\n  </div>\n  <div class=\"qw-attrib\"><cite class=\"qw-name\">Steve Jobs</cite></div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "tip-of-the-day",
      "name": "Tip of the Day",
      "category": "quote",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .tip { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; text-align: center; padding: 100px; }\n.tip .badge { background: rgba(255,255,255,0.2); padding: 15px 30px; border-radius: 30px; font-size: 28px; margin-bottom: 40px; }\n.tip h1 { font-size: 64px; margin-bottom: 30px; }\n.tip p { font-size: 36px; max-width: 70%; line-height: 1.5; opacity: 0.9; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"tip\">\n  <div class=\"badge\">💡 Tip of the Day</div>\n  <h1>Stay Hydrated</h1>\n  <p>Drinking water throughout the day helps maintain energy levels and focus.</p>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "celebration",
      "name": "Celebration",
      "category": "social",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .celebration-container { display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%); color: #78350f; font-family: system-ui, sans-serif; position: relative; overflow: hidden; }\n.confetti { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }\n.confetti-piece { position: absolute; width: 10px; height: 10px; top: -20px; border-radius: 2px; animation: fall 5s linear infinite; }\n@keyframes fall { 0% { top: -20px; transform: rotate(0deg) translateX(0); opacity: 1; } 100% { top: 100%; transform: rotate(720deg) translateX(100px); opacity: 0; } }\n.celebration-content { text-align: center; z-index: 1; }\n.celebration-icon { font-size: 80px; margin-bottom: 20px; }\n.celebration-type { font-size: 36px; color: #d97706; margin: 0 0 30px; text-transform: uppercase; letter-spacing: 3px; }\n.honoree-photo { width: 250px; height: 250px; border-radius: 50%; background-image: url(/img/demo-avatar.svg); background-size: cover; background-position: center; background-color: #e2e8f0; margin: 0 auto 30px; border: 8px solid #d97706; }\n.honoree-name { font-size: 64px; font-weight: 700; margin: 0 0 15px; }\n.celebration-detail { font-size: 32px; color: #d97706; margin: 0 0 30px; font-weight: 600; }\n.message { font-size: 28px; opacity: 0.8; max-width: 600px; margin: 0 auto; line-height: 1.5; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"celebration-container\">\n  <div class=\"confetti\" id=\"confetti\"></div>\n  <div class=\"celebration-content\">\n    <div class=\"celebration-icon\">🎂</div>\n    <h1 class=\"celebration-type\">Happy Birthday!</h1>\n    <div class=\"honoree-photo\"></div>\n    <h2 class=\"honoree-name\">John Smith</h2>\n    <p class=\"celebration-detail\">December 21st</p>\n    <p class=\"message\">Wishing you a wonderful day filled with joy and happiness!</p>\n  </div>\n</div>\n<script>\n(function() {\n  const colors = [\"#f59e0b\", \"#ef4444\", \"#8b5cf6\", \"#3b82f6\", \"#10b981\", \"#ec4899\"];\n  const container = document.getElementById(\"confetti\");\n  for (let i = 0; i < 50; i++) {\n    const confetti = document.createElement(\"div\");\n    confetti.className = \"confetti-piece\";\n    confetti.style.left = Math.random() * 100 + \"%\";\n    confetti.style.animationDelay = Math.random() * 5 + \"s\";\n    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];\n    container.appendChild(confetti);\n  }\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "employee-spotlight",
      "name": "Employee Spotlight",
      "category": "social",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .spotlight-container { display: flex; flex-direction: column; height: 100%; background: linear-gradient(135deg, #a855f7 0%, #581c87 100%); color: #ffffff; font-family: system-ui, sans-serif; padding: 60px; }\n.spotlight-badge { align-self: center; background: #fbbf24; color: #1e293b; padding: 15px 40px; border-radius: 30px; font-size: 28px; font-weight: 600; margin-bottom: 50px; }\n.spotlight-content { flex: 1; display: flex; gap: 80px; align-items: center; }\n.photo-section { flex-shrink: 0; }\n.photo { width: 400px; height: 400px; border-radius: 50%; background-image: url(/img/demo-avatar.svg); background-size: cover; background-position: center; background-color: rgba(255,255,255,0.2); border: 8px solid #fbbf24; }\n.info-section { flex: 1; }\n.name { font-size: 64px; font-weight: 700; margin: 0 0 10px; }\n.title { font-size: 36px; color: #fbbf24; margin: 0 0 5px; font-weight: 600; }\n.department { font-size: 28px; opacity: 0.8; margin: 0 0 30px; }\n.tenure { display: flex; align-items: center; gap: 15px; font-size: 28px; margin-bottom: 40px; }\n.tenure-icon { font-size: 32px; }\n.quote { font-size: 32px; font-style: italic; line-height: 1.5; margin: 0 0 40px; padding-left: 30px; border-left: 4px solid #fbbf24; opacity: 0.9; }\n.fun-fact { font-size: 26px; background: rgba(255,255,255,0.1); padding: 20px 30px; border-radius: 12px; }\n.fact-label { font-weight: 600; margin-right: 10px; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"spotlight-container\">\n  <div class=\"spotlight-badge\">⭐ Employee of the Month</div>\n  <div class=\"spotlight-content\">\n    <div class=\"photo-section\">\n      <div class=\"photo\"></div>\n    </div>\n    <div class=\"info-section\">\n      <h1 class=\"name\">Jane Smith</h1>\n      <p class=\"title\">Senior Developer</p>\n      <p class=\"department\">Engineering</p>\n      <div class=\"tenure\">\n        <span class=\"tenure-icon\">🏆</span>\n        <span>3 Years with the company</span>\n      </div>\n      <blockquote class=\"quote\">\n        \"I love working here because of the amazing team and the opportunities to grow.\"\n      </blockquote>\n      <div class=\"fun-fact\">\n        <span class=\"fact-label\">Fun Fact:</span>\n        <span>Jane has visited 15 countries and counting!</span>\n      </div>\n    </div>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "leaderboard",
      "name": "Leaderboard",
      "category": "social",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .leaderboard-container { display: flex; flex-direction: column; height: 100%; background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%); color: #ffffff; font-family: system-ui, sans-serif; }\n.leaderboard-header { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 40px; background: rgba(0,0,0,0.2); color: white; }\n.trophy { font-size: 56px; }\n.leaderboard-header h1 { font-size: 48px; margin: 0; }\n.rankings { flex: 1; display: flex; flex-direction: column; padding: 40px; gap: 16px; }\n.rank-row { display: flex; align-items: center; padding: 25px 35px; background: rgba(255,255,255,0.1); border-radius: 16px; font-size: 32px; }\n.rank-row.rank-1 { background: linear-gradient(90deg, rgba(251,191,36,0.3) 0%, rgba(255,255,255,0.1) 100%); }\n.rank-row.rank-2 { background: linear-gradient(90deg, rgba(192,192,192,0.3) 0%, rgba(255,255,255,0.1) 100%); }\n.rank-row.rank-3 { background: linear-gradient(90deg, rgba(249,115,22,0.3) 0%, rgba(255,255,255,0.1) 100%); }\n.rank-badge { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; margin-right: 25px; }\n.rank-1 .rank-badge { background: #f59e0b; color: white; }\n.rank-2 .rank-badge { background: #9ca3af; color: white; }\n.rank-3 .rank-badge { background: #f97316; color: white; }\n.rank-row:not(.rank-1):not(.rank-2):not(.rank-3) .rank-badge { background: rgba(255,255,255,0.2); color: white; }\n.rank-name { flex: 1; font-weight: 600; }\n.rank-score { font-size: 36px; font-weight: 700; color: #fbbf24; }\n.leaderboard-footer { text-align: center; padding: 25px; background: rgba(0,0,0,0.2); font-size: 22px; opacity: 0.8; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"leaderboard-container\">\n  <div class=\"leaderboard-header\">\n    <span class=\"trophy\">🏆</span>\n    <h1>Top Performers</h1>\n  </div>\n  <div class=\"rankings\">\n    <div class=\"rank-row rank-1\">\n      <div class=\"rank-badge\">1</div>\n      <div class=\"rank-name\">Alex Johnson</div>\n      <div class=\"rank-score\">2,450 pts</div>\n    </div>\n    <div class=\"rank-row rank-2\">\n      <div class=\"rank-badge\">2</div>\n      <div class=\"rank-name\">Sarah Williams</div>\n      <div class=\"rank-score\">2,280 pts</div>\n    </div>\n    <div class=\"rank-row rank-3\">\n      <div class=\"rank-badge\">3</div>\n      <div class=\"rank-name\">Mike Chen</div>\n      <div class=\"rank-score\">2,150 pts</div>\n    </div>\n    <div class=\"rank-row\">\n      <div class=\"rank-badge\">4</div>\n      <div class=\"rank-name\">Emily Davis</div>\n      <div class=\"rank-score\">1,980 pts</div>\n    </div>\n    <div class=\"rank-row\">\n      <div class=\"rank-badge\">5</div>\n      <div class=\"rank-name\">Chris Taylor</div>\n      <div class=\"rank-score\">1,850 pts</div>\n    </div>\n  </div>\n  <div class=\"leaderboard-footer\">Updated daily at midnight</div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "qr-code",
      "name": "QR Code",
      "category": "social",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .qr { display: flex; align-items: center; justify-content: center; height: 100%; background: white; gap: 100px; }\n.qr .code { width: 400px; height: 400px; background-color: #f8fafc; border-radius: 20px; object-fit: contain; }\n.qr .info { max-width: 500px; }\n.qr h1 { font-size: 56px; color: #1e293b; margin-bottom: 20px; }\n.qr p { font-size: 32px; color: #64748b; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"qr\">\n  <img class=\"code\" id=\"qr-image\" src=\"https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=https://www.sheencast.com\" alt=\"QR Code\" />\n  <div class=\"info\">\n    <h1>Scan to Learn More</h1>\n    <p>Point your camera at the QR code</p>\n  </div>\n</div>\n<script>\n(function() {\n  const content = \"https://www.sheencast.com\";\n  if (content) {\n    const encoded = encodeURIComponent(content);\n    document.getElementById(\"qr-image\").src = \"https://api.qrserver.com/v1/create-qr-code/?size=400x400&data=\" + encoded;\n  }\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "social-post",
      "name": "Social Post",
      "category": "social",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .social { display: flex; flex-direction: column; justify-content: center; height: 100%; background: #0f172a; color: white; padding: 100px; }\n.social .header { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }\n.social .avatar { width: 80px; height: 80px; border-radius: 50%; background-image: url(/img/demo-avatar.svg); background-size: cover; background-color: #334155; }\n.social .name { display: block; font-size: 32px; font-weight: 600; }\n.social .handle { font-size: 24px; color: #64748b; }\n.social .content { font-size: 48px; line-height: 1.4; margin-bottom: 40px; }\n.social .stats { display: flex; gap: 40px; font-size: 28px; color: #64748b; }\n.social .stat:empty { display: none; }\n.social .likes::before { content: \"❤️ \"; }\n.social .shares::before { content: \"🔄 \"; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"social\">\n  <div class=\"header\">\n    <div class=\"avatar\"></div>\n    <div class=\"user\">\n      <span class=\"name\">Company Name</span>\n      <span class=\"handle\">@company</span>\n    </div>\n  </div>\n  <p class=\"content\">Share your latest update here!</p>\n  <div class=\"stats\">\n    <span class=\"stat likes\">128</span>\n    <span class=\"stat shares\">24</span>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "weather-display-1",
      "name": "Weather Display 1",
      "category": "weather",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .weather { display: flex; align-items: center; justify-content: center; height: 100%; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: white; gap: 80px; }\n.weather .current { text-align: center; }\n.weather .icon { font-size: 150px; display: block; }\n.weather .temp { font-size: 120px; font-weight: 300; }\n.weather .details h1 { font-size: 48px; margin-bottom: 10px; }\n.weather .details p { font-size: 36px; opacity: 0.9; margin-bottom: 30px; }\n.weather .meta { display: flex; gap: 40px; font-size: 28px; }\n.weather .updated { position: absolute; bottom: 20px; right: 30px; font-size: 18px; opacity: 0.6; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"weather\">\n  <div class=\"current\">\n    <span class=\"icon\" id=\"weather-icon\">⏳</span>\n    <span class=\"temp\" id=\"weather-temp\">--°</span>\n  </div>\n  <div class=\"details\">\n    <h1 id=\"weather-location\">New York, NY</h1>\n    <p id=\"weather-condition\">Loading...</p>\n    <div class=\"meta\">\n      <span>💧 <span id=\"weather-humidity\">--</span>%</span>\n      <span>💨 <span id=\"weather-wind\">--</span> mph</span>\n    </div>\n  </div>\n  <p class=\"updated\" id=\"weather-updated\"></p>\n</div>\n<script>\n(function() {\n  const lat = \"40.7128\";\n  const lon = \"-74.0060\";\n  const units = \"fahrenheit\";\n  const refreshMinutes = parseInt(\"30\") || 30;\n  \n  const weatherCodes = {\n    0: {icon: \"☀️\", desc: \"Clear sky\"},\n    1: {icon: \"🌤️\", desc: \"Mainly clear\"},\n    2: {icon: \"⛅\", desc: \"Partly cloudy\"},\n    3: {icon: \"☁️\", desc: \"Overcast\"},\n    45: {icon: \"🌫️\", desc: \"Foggy\"},\n    48: {icon: \"🌫️\", desc: \"Depositing rime fog\"},\n    51: {icon: \"🌧️\", desc: \"Light drizzle\"},\n    53: {icon: \"🌧️\", desc: \"Moderate drizzle\"},\n    55: {icon: \"🌧️\", desc: \"Dense drizzle\"},\n    61: {icon: \"🌧️\", desc: \"Slight rain\"},\n    63: {icon: \"🌧️\", desc: \"Moderate rain\"},\n    65: {icon: \"🌧️\", desc: \"Heavy rain\"},\n    66: {icon: \"🌨️\", desc: \"Light freezing rain\"},\n    67: {icon: \"🌨️\", desc: \"Heavy freezing rain\"},\n    71: {icon: \"🌨️\", desc: \"Slight snow\"},\n    73: {icon: \"🌨️\", desc: \"Moderate snow\"},\n    75: {icon: \"❄️\", desc: \"Heavy snow\"},\n    77: {icon: \"🌨️\", desc: \"Snow grains\"},\n    80: {icon: \"🌦️\", desc: \"Slight rain showers\"},\n    81: {icon: \"🌦️\", desc: \"Moderate rain showers\"},\n    82: {icon: \"⛈️\", desc: \"Violent rain showers\"},\n    85: {icon: \"🌨️\", desc: \"Slight snow showers\"},\n    86: {icon: \"🌨️\", desc: \"Heavy snow showers\"},\n    95: {icon: \"⛈️\", desc: \"Thunderstorm\"},\n    96: {icon: \"⛈️\", desc: \"Thunderstorm with hail\"},\n    99: {icon: \"⛈️\", desc: \"Thunderstorm with heavy hail\"}\n  };\n  \n  async function fetchWeather() {\n    try {\n      const tempUnit = units === \"celsius\" ? \"celsius\" : \"fahrenheit\";\n      const windUnit = units === \"celsius\" ? \"kmh\" : \"mph\";\n      const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m&temperature_unit=${tempUnit}&wind_speed_unit=${windUnit}`;\n      \n      const response = await fetch(url);\n      const data = await response.json();\n      \n      if (data.current) {\n        const temp = Math.round(data.current.temperature_2m);\n        const humidity = data.current.relative_humidity_2m;\n        const wind = Math.round(data.current.wind_speed_10m);\n        const code = data.current.weather_code;\n        const weather = weatherCodes[code] || {icon: \"🌡️\", desc: \"Unknown\"};\n        const unitSymbol = units === \"celsius\" ? \"°C\" : \"°F\";\n        \n        document.getElementById(\"weather-temp\").textContent = temp + unitSymbol;\n        document.getElementById(\"weather-humidity\").textContent = humidity;\n        document.getElementById(\"weather-wind\").textContent = wind;\n        document.getElementById(\"weather-icon\").textContent = weather.icon;\n        document.getElementById(\"weather-condition\").textContent = weather.desc;\n        document.getElementById(\"weather-updated\").textContent = \"Updated: \" + new Date().toLocaleTimeString();\n      }\n    } catch (error) {\n      document.getElementById(\"weather-condition\").textContent = \"Unable to load weather\";\n      console.error(\"Weather fetch error:\", error);\n    }\n  }\n  \n  fetchWeather();\n  setInterval(fetchWeather, refreshMinutes * 60 * 1000);\n})();\n</script>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    },
    {
      "slug": "weather-display-2",
      "name": "Weather Display 2",
      "category": "weather",
      "width": 1920,
      "height": 1080,
      "durationMs": 10000,
      "html": "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    html, body { width: 100%; height: 100%; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; }\n    body { display: flex; align-items: center; justify-content: center; background: #000; }\n    #sc-stage { flex: none; width: 1920px; height: 1080px; transform-origin: center center; transform: scale(min(calc(100vw / 1920px), calc(100vh / 1080px))); }\n    .wx2 { position: relative; height: 100%; width: 100%; overflow: hidden; background: linear-gradient(180deg, #0b1e3f 0%, #3b4f9e 44%, #f2a65a 90%); color: #ffffff; font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; }\n.wx2 .wx2-glow { position: absolute; inset: 0; background: radial-gradient(92% 62% at 80% 70%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 32%, rgba(255,255,255,0) 60%); pointer-events: none; }\n.wx2 .wx2-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }\n.wx2 .wx2-head { flex: 0 0 132px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0 84px; border-bottom: 3px solid rgba(255,255,255,0.24); }\n.wx2 .wx2-loc { font-size: 74px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wx2 .wx2-date { flex-shrink: 0; font-size: 36px; font-weight: 700; letter-spacing: 7px; text-transform: uppercase; color: #ffd166; white-space: nowrap; }\n.wx2 .wx2-hero { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 70px; padding: 24px 84px; overflow: hidden; }\n.wx2 .wx2-now { flex: 0 0 auto; display: flex; align-items: flex-start; }\n.wx2 .wx2-temp { font-size: 360px; font-weight: 800; line-height: 0.84; letter-spacing: -16px; white-space: nowrap; }\n.wx2 .wx2-unit { font-size: 132px; font-weight: 700; line-height: 1; margin-top: 26px; margin-left: 16px; color: #ffd166; white-space: nowrap; }\n.wx2 .wx2-cond { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-left: 66px; border-left: 4px solid rgba(255,255,255,0.26); }\n.wx2 .wx2-icon { font-size: 132px; line-height: 1.05; font-family: \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", system-ui, sans-serif; }\n.wx2 .wx2-cond-name { font-size: 96px; font-weight: 800; line-height: 1.04; letter-spacing: -2px; margin-top: 6px; }\n.wx2 .wx2-feels { font-size: 42px; font-weight: 500; line-height: 1.3; margin-top: 14px; opacity: 0.92; }\n.wx2 .wx2-hilo { font-size: 48px; font-weight: 800; line-height: 1.2; margin-top: 10px; letter-spacing: 1px; color: #ffd166; }\n.wx2 .wx2-forecast { flex: 0 0 196px; display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(6,12,28,0.42); border-top: 3px solid rgba(255,255,255,0.24); }\n.wx2 .wx2-day { display: flex; align-items: center; gap: 26px; padding: 0 56px; border-right: 2px solid rgba(255,255,255,0.16); overflow: hidden; }\n.wx2 .wx2-forecast .wx2-day:last-child { border-right: 0; }\n.wx2 .wx2-day-name { font-size: 44px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; color: #ffd166; white-space: nowrap; }\n.wx2 .wx2-day-icon { font-size: 68px; line-height: 1; font-family: \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", system-ui, sans-serif; }\n.wx2 .wx2-day-hi { margin-left: auto; font-size: 60px; font-weight: 800; white-space: nowrap; }\n.wx2 .wx2-day-lo { font-size: 60px; font-weight: 400; opacity: 0.72; white-space: nowrap; }\n.wx2 .wx2-metrics { flex: 0 0 190px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(6,12,28,0.62); border-top: 2px solid rgba(255,255,255,0.16); }\n.wx2 .wx2-metric { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 42px; border-right: 2px solid rgba(255,255,255,0.16); overflow: hidden; }\n.wx2 .wx2-metrics .wx2-metric:last-child { border-right: 0; }\n.wx2 .wx2-m-label { font-size: 29px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: #ffd166; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wx2 .wx2-m-value { font-size: 56px; font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.wx2 .wx2-foot { flex: 0 0 76px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 0 84px; background: rgba(6,12,28,0.78); }\n.wx2 .wx2-foot-rule { flex: 1 1 auto; height: 4px; background: rgba(255,255,255,0.22); }\n.wx2 .wx2-updated { flex-shrink: 0; font-size: 28px; font-weight: 600; letter-spacing: 2px; color: #ffd166; white-space: nowrap; }\n  </style>\n</head>\n<body>\n  <div id=\"sc-stage\">\n  <div class=\"wx2\">\n  <div class=\"wx2-glow\"></div>\n  <div class=\"wx2-inner\">\n    <header class=\"wx2-head\">\n      <span class=\"wx2-loc\">New York, NY</span>\n      <span class=\"wx2-date\">Thursday, August 1</span>\n    </header>\n    <section class=\"wx2-hero\">\n      <div class=\"wx2-now\">\n        <span class=\"wx2-temp\">72</span>\n        <span class=\"wx2-unit\">°F</span>\n      </div>\n      <div class=\"wx2-cond\">\n        <span class=\"wx2-icon\">⛅</span>\n        <span class=\"wx2-cond-name\">Partly Cloudy</span>\n        <span class=\"wx2-feels\">Feels like 75°</span>\n        <span class=\"wx2-hilo\">H 78°  ·  L 61°</span>\n      </div>\n    </section>\n    <section class=\"wx2-forecast\">\n      <div class=\"wx2-day\">\n        <span class=\"wx2-day-name\">FRI</span>\n        <span class=\"wx2-day-icon\">☀️</span>\n        <span class=\"wx2-day-hi\">81°</span>\n        <span class=\"wx2-day-lo\">64°</span>\n      </div>\n      <div class=\"wx2-day\">\n        <span class=\"wx2-day-name\">SAT</span>\n        <span class=\"wx2-day-icon\">🌦️</span>\n        <span class=\"wx2-day-hi\">74°</span>\n        <span class=\"wx2-day-lo\">60°</span>\n      </div>\n      <div class=\"wx2-day\">\n        <span class=\"wx2-day-name\">SUN</span>\n        <span class=\"wx2-day-icon\">⛈️</span>\n        <span class=\"wx2-day-hi\">69°</span>\n        <span class=\"wx2-day-lo\">58°</span>\n      </div>\n    </section>\n    <section class=\"wx2-metrics\">\n      <div class=\"wx2-metric\">\n        <span class=\"wx2-m-label\">Humidity</span>\n        <span class=\"wx2-m-value\">58%</span>\n      </div>\n      <div class=\"wx2-metric\">\n        <span class=\"wx2-m-label\">Wind</span>\n        <span class=\"wx2-m-value\">9 mph NW</span>\n      </div>\n      <div class=\"wx2-metric\">\n        <span class=\"wx2-m-label\">Rain Chance</span>\n        <span class=\"wx2-m-value\">10%</span>\n      </div>\n      <div class=\"wx2-metric\">\n        <span class=\"wx2-m-label\">Sunset</span>\n        <span class=\"wx2-m-value\">8:14 PM</span>\n      </div>\n    </section>\n    <footer class=\"wx2-foot\">\n      <span class=\"wx2-foot-rule\"></span>\n      <span class=\"wx2-updated\">Updated 4:20 PM</span>\n    </footer>\n  </div>\n</div>\n  </div>\n  <script>\n  (function(){\n    try {\n      var s=document.getElementById('sc-stage');\n      if(!s){ return; }\n      var fit=function(){\n        try {\n          var k=Math.min(window.innerWidth/1920,window.innerHeight/1080);\n          if(k>0&&isFinite(k)){ s.style.transform='scale('+k+')'; }\n        } catch(e){ }\n      };\n      fit();\n      if(window.addEventListener){ window.addEventListener('resize',fit,false); }\n    } catch(e){ }\n  })();\n  </script>\n</body>\n</html>"
    }
  ]
}
