{"roots":["11:324"],"nodeById":{"11:349":{"type":"WIDGET","id":"11:349","name":"Embed 1","absoluteBoundingBox":{"x":7160.0,"y":269.0,"width":335.0,"height":996.0},"isolatedAbsoluteRenderBounds":{"x":7160.0,"y":269.0,"width":335.0,"height":996.0},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,169.0]],"size":{"x":335.0,"y":996.0},"layoutAlign":"STRETCH","accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Daily Spend</title>\n<style>\n  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&display=swap');\n\n  :root{\n    --bg:#151515;\n    --bg2:#202020;\n    --white:#F8F8F8;\n    --yellow:#EBF400;\n    --green:#00D45D;\n    --orange:#FF7A18;\n    --blue:#6A89FF;\n    --pink:#FF90CC;\n    --red:#FF4C56;\n    --sky:#8FD0FF;\n    --grey:#4B4B4B;\n    --ink:#151515;\n    --radius:36px;\n  }\n\n  *{box-sizing:border-box;margin:0;padding:0}\n  html,body{height:100%}\n  body{\n    background:var(--bg);\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    color:var(--white);\n    display:flex;\n    justify-content:center;\n    align-items:flex-start;\n    padding:20px 12px;\n  }\n  .widget{\n    width:100%;max-width:520px;\n    margin:0 auto;\n    display:flex;flex-direction:column;gap:14px;\n  }\n\n  /* Top tabs */\n  .tabs{display:flex;gap:10px}\n  .tab{\n    flex:1;border:none;cursor:pointer;\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    font-weight:700;font-size:1.25rem;\n    text-align:center;\n    display:flex;align-items:center;justify-content:center;\n    padding:16px 0;border-radius:999px;\n    background:var(--bg2);color:var(--white);\n    transition:transform .1s ease, background .15s ease, color .15s ease;\n  }\n  .tab:active{transform:scale(.97)}\n  .tab.active{background:var(--blue);color:var(--ink)}\n\n  /* Stacked panels: container height = tallest panel, so height\n     stays constant across tabs and hugs the content (no clipping). */\n  .panels{display:grid}\n  .panel{\n    grid-area:1/1;\n    visibility:hidden;\n    display:flex;flex-direction:column;gap:12px;\n    align-content:start;\n  }\n  .panel.active{visibility:visible}\n\n  /* Sub tabs */\n  .subtabs{display:flex;gap:10px}\n  .subtab{\n    flex:1;border:none;cursor:pointer;\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    font-weight:600;font-size:1rem;\n    text-align:center;\n    display:flex;align-items:center;justify-content:center;\n    padding:12px 0;border-radius:999px;\n    background:var(--bg2);color:var(--white);\n    transition:background .15s ease,color .15s ease;\n  }\n  .subtab.active{background:var(--sky);color:var(--ink)}\n\n  .card{\n    border-radius:var(--radius);\n    padding:32px 30px;\n    color:var(--ink);\n  }\n  .card.blue{background:var(--blue)}\n  .card.green{background:var(--green)}\n  .card.orange{background:var(--orange)}\n  .card.yellow{background:var(--yellow)}\n  .card.pink{background:var(--pink)}\n  .card.dark{background:var(--bg2);color:var(--white)}\n\n  .card .label{font-weight:600;font-size:1.05rem;opacity:.85}\n  .card .big{\n    font-weight:700;\n    font-size:clamp(3rem,12vw,4.5rem);\n    line-height:1.05;\n    letter-spacing:-0.02em;\n    margin:6px 0 4px;\n    word-break:break-all;\n  }\n  .card .sub{font-weight:600;font-size:.95rem;opacity:.75}\n\n  .row{display:flex;gap:14px}\n  .row .card{flex:1;padding:22px 24px}\n  .row .mid{font-weight:700;font-size:1.9rem;margin-top:4px}\n\n  /* Calculations */\n  .card.field{padding:18px 22px}\n  .field label{\n    display:block;font-weight:700;font-size:1.1rem;\n    margin-bottom:8px;color:var(--ink);\n  }\n  .field input{\n    width:100%;border:none;outline:none;\n    background:rgba(21,21,21,.12);\n    border-radius:16px;\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    font-weight:700;font-size:1.4rem;\n    color:var(--ink);\n    padding:10px 16px;\n  }\n  .field input::placeholder{color:rgba(21,21,21,.35)}\n  .hint{font-weight:600;font-size:.8rem;margin-top:8px;opacity:.75}\n  .note{\n    font-weight:600;font-size:.8rem;\n    color:var(--grey);\n    text-align:center;\n    padding:4px 10px 2px;\n  }\n  .dates{display:flex;gap:12px}\n  .dates > div{flex:1}\n  .dates .sublabel{font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--ink);opacity:.75}\n  .field input[type=\"date\"]{\n    font-size:1rem;padding:12px 14px;\n    appearance:none;-webkit-appearance:none;\n    min-height:48px;\n  }\n\n  .negative .big{color:var(--red)}\n</style>\n</head>\n<body>\n<div class=\"widget\">\n\n  <div class=\"tabs\">\n    <button class=\"tab active\" data-tab=\"today\">Progress</button>\n    <button class=\"tab\" data-tab=\"calc\">Calculations</button>\n  </div>\n\n  <div class=\"panels\">\n\n  <!-- TODAY -->\n  <div class=\"panel active\" id=\"panel-today\">\n    <div class=\"subtabs\">\n      <button class=\"subtab active\" data-sub=\"day\">Today</button>\n      <button class=\"subtab\" data-sub=\"week\">This week</button>\n    </div>\n\n    <div id=\"sub-day\">\n      <div class=\"card blue\" style=\"margin-bottom:14px\">\n        <div class=\"label\">Should be left in your account</div>\n        <div class=\"big\" id=\"dayTarget\">–</div>\n        <div class=\"sub\" id=\"dayDate\"></div>\n      </div>\n      <div class=\"row\">\n        <div class=\"card orange\">\n          <div class=\"label\">Spend today</div>\n          <div class=\"mid\" id=\"dayAllowance\">–</div>\n        </div>\n        <div class=\"card dark\">\n          <div class=\"label\">Days left</div>\n          <div class=\"mid\" id=\"daysLeft\">–</div>\n        </div>\n      </div>\n    </div>\n\n    <div id=\"sub-week\" style=\"display:none\">\n      <div class=\"card blue\" style=\"margin-bottom:14px\">\n        <div class=\"label\">Should be left after this week</div>\n        <div class=\"big\" id=\"weekTarget\">–</div>\n        <div class=\"sub\" id=\"weekRange\"></div>\n      </div>\n      <div class=\"row\">\n        <div class=\"card orange\">\n          <div class=\"label\">Spend this week</div>\n          <div class=\"mid\" id=\"weekAllowance\">–</div>\n        </div>\n        <div class=\"card dark\">\n          <div class=\"label\">Per day</div>\n          <div class=\"mid\" id=\"weekPerDay\">–</div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- CALCULATIONS -->\n  <div class=\"panel\" id=\"panel-calc\">\n    <div class=\"card dark field\">\n      <label for=\"dateStart\" style=\"color:var(--white)\">Time period</label>\n      <div class=\"dates\">\n        <div>\n          <div class=\"sublabel\" style=\"color:var(--white)\">From</div>\n          <input id=\"dateStart\" type=\"date\" style=\"background:rgba(248,248,248,.1);color:var(--white)\">\n        </div>\n        <div>\n          <div class=\"sublabel\" style=\"color:var(--white)\">To</div>\n          <input id=\"dateEnd\" type=\"date\" style=\"background:rgba(248,248,248,.1);color:var(--white)\">\n        </div>\n      </div>\n    </div>\n    <div class=\"card yellow field\">\n      <label for=\"budget\">Time period budget</label>\n      <input id=\"budget\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n    </div>\n    <div class=\"card orange field\">\n      <label for=\"savings\">I want to save</label>\n      <input id=\"savings\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n    </div>\n    <div class=\"card blue field\">\n      <label for=\"fixed\">Fixed expenses</label>\n      <input id=\"fixed\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n      <div class=\"hint\">What you predict you'll need to spend on things like rent or loan repayments. Deducted from your monthly budget. Leave empty to disregard.</div>\n    </div>\n    <div class=\"card pink field\">\n      <label for=\"extra\">Additional spending</label>\n      <input id=\"extra\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n      <div class=\"hint\">Any unexpected expenses that come up during the period that you want to exclude from the budget.</div>\n      <div class=\"hint\" id=\"calcHint\"></div>\n    </div>\n    <div class=\"note\">Your data is saved on this device and will be here when you come back.</div>\n  </div>\n\n  </div><!-- /panels -->\n\n</div>\n\n<script>\n(function(){\n  const $ = id => document.getElementById(id);\n  const store = {\n    get(k){ try{ return localStorage.getItem(k) }catch(e){ return null } },\n    set(k,v){ try{ localStorage.setItem(k,v) }catch(e){} }\n  };\n\n  const fmt = n => n.toLocaleString(undefined,{minimumFractionDigits:0,maximumFractionDigits:0});\n\n  // Tabs\n  document.querySelectorAll('.tab').forEach(t=>{\n    t.addEventListener('click',()=>{\n      document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));\n      document.querySelectorAll('.panel').forEach(x=>x.classList.remove('active'));\n      t.classList.add('active');\n      $('panel-'+t.dataset.tab).classList.add('active');\n      if(t.dataset.tab==='today') render();\n    });\n  });\n  document.querySelectorAll('.subtab').forEach(t=>{\n    t.addEventListener('click',()=>{\n      document.querySelectorAll('.subtab').forEach(x=>x.classList.remove('active'));\n      t.classList.add('active');\n      $('sub-day').style.display = t.dataset.sub==='day' ? '' : 'none';\n      $('sub-week').style.display = t.dataset.sub==='week' ? '' : 'none';\n    });\n  });\n\n  // Inputs\n  const budgetEl = $('budget'), savingsEl = $('savings'), fixedEl = $('fixed'), extraEl = $('extra');\n  const dateStartEl = $('dateStart'), dateEndEl = $('dateEnd');\n  budgetEl.value = store.get('dsc_budget') || '';\n  savingsEl.value = store.get('dsc_savings') || '';\n  fixedEl.value = store.get('dsc_fixed') || '';\n  extraEl.value = store.get('dsc_extra') || '';\n  dateStartEl.value = store.get('dsc_start') || '';\n  dateEndEl.value = store.get('dsc_end') || '';\n  [budgetEl,savingsEl,fixedEl,extraEl,dateStartEl,dateEndEl].forEach(el=>el.addEventListener('input',()=>{\n    store.set('dsc_budget',budgetEl.value);\n    store.set('dsc_savings',savingsEl.value);\n    store.set('dsc_fixed',fixedEl.value);\n    store.set('dsc_extra',extraEl.value);\n    store.set('dsc_start',dateStartEl.value);\n    store.set('dsc_end',dateEndEl.value);\n    render();\n  }));\n\n  const DAY = 86400000;\n  const mid = d => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  const diffDays = (a,b) => Math.round((mid(a)-mid(b))/DAY);\n\n  function render(){\n    const budget = parseFloat(budgetEl.value)||0;\n    const savings = parseFloat(savingsEl.value)||0;\n    const fixed = parseFloat(fixedEl.value)||0;\n    const extra = parseFloat(extraEl.value)||0;\n    const spendable = budget - savings - fixed - extra;\n\n    const now = new Date();\n\n    // Period: chosen dates, or the current month by default\n    let start = dateStartEl.value ? new Date(dateStartEl.value+'T00:00:00') : new Date(now.getFullYear(), now.getMonth(), 1);\n    let end   = dateEndEl.value   ? new Date(dateEndEl.value+'T00:00:00')   : new Date(now.getFullYear(), now.getMonth()+1, 0);\n    if (end < start) [start,end] = [end,start];\n\n    const totalDays = diffDays(end,start) + 1;\n    const daily = spendable / totalDays;\n\n    // Today, clamped inside the period\n    const today = mid(now) < mid(start) ? mid(start) : (mid(now) > mid(end) ? mid(end) : mid(now));\n\n    const daysAfterToday = Math.max(0, diffDays(end, today));\n    const dayTarget = savings + daily * daysAfterToday;\n\n    $('dayTarget').textContent = fmt(dayTarget);\n    $('dayAllowance').textContent = fmt(daily);\n    $('daysLeft').textContent = daysAfterToday + 1;\n    $('dayDate').textContent = today.toLocaleDateString(undefined,{weekday:'long', day:'numeric', month:'long'});\n    $('dayTarget').closest('.card').classList.toggle('negative', dayTarget<0);\n\n    // Week: Monday–Sunday containing today, clamped to the period\n    const dow = (today.getDay()+6)%7; // 0 = Monday\n    let weekStart = new Date(today.getTime() - dow*DAY);\n    let weekEnd   = new Date(weekStart.getTime() + 6*DAY);\n    if (weekStart < start) weekStart = mid(start);\n    if (weekEnd > end) weekEnd = mid(end);\n\n    const weekDays = diffDays(weekEnd, weekStart) + 1;\n    const weekAllowance = daily * weekDays;\n    const daysAfterWeek = Math.max(0, diffDays(end, weekEnd));\n    const weekTarget = savings + daily * daysAfterWeek;\n\n    $('weekTarget').textContent = fmt(weekTarget);\n    $('weekAllowance').textContent = fmt(weekAllowance);\n    $('weekPerDay').textContent = fmt(daily);\n    const dOpts = {day:'numeric', month:'short'};\n    $('weekRange').textContent = weekStart.toLocaleDateString(undefined,dOpts) + ' – ' + weekEnd.toLocaleDateString(undefined,dOpts);\n\n    $('calcHint').textContent = spendable>0\n      ? 'Spendable: ' + fmt(spendable) + ' over ' + totalDays + ' days · ' + fmt(daily) + ' / day'\n      : 'Enter your budget and savings goal';\n  }\n\n  render();\n})();\n</script>\n</body>\n</html>","embedURL":""}},"11:348":{"type":"TEXT","id":"11:348","name":"Refresh the page if the widget doesn’t load","absoluteBoundingBox":{"x":7202.5,"y":213.0,"width":250.0,"height":16.0},"isolatedAbsoluteRenderBounds":{"x":7203.48388671875,"y":217.0,"width":247.953125,"height":11.5440063476562},"relativeTransform":[[1.0,0.0,62.5],[0.0,1.0,113.0]],"size":{"x":250.0,"y":16.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.292217552661896,"g":0.292217552661896,"b":0.292217552661896,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Refresh the page if the widget doesn’t load","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"resolvedParagraphValues":{"0":{"listSpacing":0.0,"paragraphIndent":0.0,"paragraphSpacing":0.0}},"textAutoResize":"WIDTH_AND_HEIGHT","textAlignVertical":"CENTER","style":{"fontFamily":"IBM Plex Sans","fontPostScriptName":"IBMPlexSans-SemiBold","fontStyle":"SemiBold","textCase":"TITLE","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":12.0,"textAlignHorizontal":"LEFT","textAlignVertical":"CENTER","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":15.5999994277954,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"11:347":{"type":"TEXT","id":"11:347","name":"Daily spend","absoluteBoundingBox":{"x":7243.0,"y":130.0,"width":133.0,"height":31.0},"isolatedAbsoluteRenderBounds":{"x":7244.9677734375,"y":137.095993041992,"width":128.9453125,"height":22.7040100097656},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,10.0]],"size":{"x":133.0,"y":31.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.123685397207737,"g":0.123685397207737,"b":0.123685397207737,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Daily spend","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"resolvedParagraphValues":{"0":{"listSpacing":0.0,"paragraphIndent":0.0,"paragraphSpacing":0.0}},"textAutoResize":"WIDTH_AND_HEIGHT","textAlignVertical":"CENTER","style":{"fontFamily":"IBM Plex Sans","fontPostScriptName":"IBMPlexSans-SemiBold","fontStyle":"SemiBold","textCase":"TITLE","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":24.0,"textAlignHorizontal":"LEFT","textAlignVertical":"CENTER","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":31.1999988555908,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"11:341":{"type":"FRAME","id":"11:341","name":"Button","absoluteBoundingBox":{"x":7160.0,"y":120.0,"width":53.0,"height":53.0},"isolatedAbsoluteRenderBounds":{"x":7160.0,"y":120.0,"width":53.0,"height":53.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":53.0,"y":53.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":0.564705908298492,"b":0.800000011920929,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[{"id":{"sessionID":2,"localID":162},"event":{"interactionType":"ON_CLICK"},"actions":[{"transitionNodeID":{"sessionID":0,"localID":3},"connectionType":"INTERNAL_NODE","navigationType":"NAVIGATE","connectionURL":"/"}],"isDeleted":false,"stateManagementVersion":1}],"rectangleCornerRadii":[200.0,200.0,200.0,200.0],"cornerRadius":200.0,"paddingTop":10.0,"paddingRight":20.0,"paddingBottom":12.0,"paddingLeft":20.0,"clipsContent":true,"layoutMode":"HORIZONTAL","itemSpacing":20.0,"counterAxisAlignItems":"CENTER","primaryAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","counterAxisSizingMode":"FIXED","children":["11:342","11:343"]},"11:343":{"type":"SVG","id":"11:343","name":"Group 1","absoluteBoundingBox":{"x":7175.18628495115,"y":134.186290605416,"width":22.6274300977093,"height":22.6274300977091},"targetAspectRatio":{"x":86.0000076293945,"y":86.0000076293945},"isolatedAbsoluteRenderBounds":{"x":7173.77197265625,"y":133.479202270508,"width":24.0417423926046,"height":24.0416412353516},"relativeTransform":[[-0.70710676908493,0.70710676908493,26.5],[-0.70710676908493,-0.70710676908493,36.8137168884277]],"size":{"x":16.0000095367432,"y":16.0000095367432},"fills":[],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"hash":"691b3de63fc4d2eaea85228adcc8c006cffacce8"},"11:339":{"type":"FRAME","id":"11:339","name":"Mobile","absoluteBoundingBox":{"x":7140.0,"y":100.0,"width":375.0,"height":1185.0},"isolatedAbsoluteRenderBounds":{"x":7140.0,"y":100.0,"width":375.0,"height":1185.0},"relativeTransform":[[1.0,0.0,1408.0],[0.0,1.0,100.0]],"size":{"x":375.0,"y":1185.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.123685397207737,"g":0.123685397207737,"b":0.123685397207737,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":20.0,"paddingRight":20.0,"paddingBottom":20.0,"paddingLeft":20.0,"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","layoutMode":"VERTICAL","itemSpacing":40.0,"counterAxisAlignItems":"CENTER","counterAxisSizingMode":"FIXED","isBreakpointFrame":true,"children":["11:340","11:348","11:349"]},"11:335":{"type":"WIDGET","id":"11:335","name":"Embed 1","absoluteBoundingBox":{"x":5816.0,"y":274.0,"width":1240.0,"height":925.0},"isolatedAbsoluteRenderBounds":{"x":5816.0,"y":274.0,"width":1240.0,"height":925.0},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,174.0]],"size":{"x":1240.0,"y":925.0},"layoutAlign":"STRETCH","accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"syncedState":{"embedAllowFullscreen":"false","embedCodeType":"html","embedIframeHtml":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Daily Spend</title>\n<style>\n  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&display=swap');\n\n  :root{\n    --bg:#151515;\n    --bg2:#202020;\n    --white:#F8F8F8;\n    --yellow:#EBF400;\n    --green:#00D45D;\n    --orange:#FF7A18;\n    --blue:#6A89FF;\n    --pink:#FF90CC;\n    --red:#FF4C56;\n    --sky:#8FD0FF;\n    --grey:#4B4B4B;\n    --ink:#151515;\n    --radius:36px;\n  }\n\n  *{box-sizing:border-box;margin:0;padding:0}\n  html,body{height:100%}\n  body{\n    background:var(--bg);\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    color:var(--white);\n    display:flex;\n    justify-content:center;\n    align-items:flex-start;\n    padding:20px 12px;\n  }\n  .widget{\n    width:100%;max-width:520px;\n    margin:0 auto;\n    display:flex;flex-direction:column;gap:14px;\n  }\n\n  /* Top tabs */\n  .tabs{display:flex;gap:10px}\n  .tab{\n    flex:1;border:none;cursor:pointer;\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    font-weight:700;font-size:1.25rem;\n    text-align:center;\n    display:flex;align-items:center;justify-content:center;\n    padding:16px 0;border-radius:999px;\n    background:var(--bg2);color:var(--white);\n    transition:transform .1s ease, background .15s ease, color .15s ease;\n  }\n  .tab:active{transform:scale(.97)}\n  .tab.active{background:var(--blue);color:var(--ink)}\n\n  /* Stacked panels: container height = tallest panel, so height\n     stays constant across tabs and hugs the content (no clipping). */\n  .panels{display:grid}\n  .panel{\n    grid-area:1/1;\n    visibility:hidden;\n    display:flex;flex-direction:column;gap:12px;\n    align-content:start;\n  }\n  .panel.active{visibility:visible}\n\n  /* Sub tabs */\n  .subtabs{display:flex;gap:10px}\n  .subtab{\n    flex:1;border:none;cursor:pointer;\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    font-weight:600;font-size:1rem;\n    text-align:center;\n    display:flex;align-items:center;justify-content:center;\n    padding:12px 0;border-radius:999px;\n    background:var(--bg2);color:var(--white);\n    transition:background .15s ease,color .15s ease;\n  }\n  .subtab.active{background:var(--sky);color:var(--ink)}\n\n  .card{\n    border-radius:var(--radius);\n    padding:32px 30px;\n    color:var(--ink);\n  }\n  .card.blue{background:var(--blue)}\n  .card.green{background:var(--green)}\n  .card.orange{background:var(--orange)}\n  .card.yellow{background:var(--yellow)}\n  .card.pink{background:var(--pink)}\n  .card.dark{background:var(--bg2);color:var(--white)}\n\n  .card .label{font-weight:600;font-size:1.05rem;opacity:.85}\n  .card .big{\n    font-weight:700;\n    font-size:clamp(3rem,12vw,4.5rem);\n    line-height:1.05;\n    letter-spacing:-0.02em;\n    margin:6px 0 4px;\n    word-break:break-all;\n  }\n  .card .sub{font-weight:600;font-size:.95rem;opacity:.75}\n\n  .row{display:flex;gap:14px}\n  .row .card{flex:1;padding:22px 24px}\n  .row .mid{font-weight:700;font-size:1.9rem;margin-top:4px}\n\n  /* Calculations */\n  .card.field{padding:18px 22px}\n  .field label{\n    display:block;font-weight:700;font-size:1.1rem;\n    margin-bottom:8px;color:var(--ink);\n  }\n  .field input{\n    width:100%;border:none;outline:none;\n    background:rgba(21,21,21,.12);\n    border-radius:16px;\n    font-family:'IBM Plex Sans',-apple-system,sans-serif;\n    font-weight:700;font-size:1.4rem;\n    color:var(--ink);\n    padding:10px 16px;\n  }\n  .field input::placeholder{color:rgba(21,21,21,.35)}\n  .hint{font-weight:600;font-size:.8rem;margin-top:8px;opacity:.75}\n  .note{\n    font-weight:600;font-size:.8rem;\n    color:var(--grey);\n    text-align:center;\n    padding:4px 10px 2px;\n  }\n  .dates{display:flex;gap:12px}\n  .dates > div{flex:1}\n  .dates .sublabel{font-weight:600;font-size:.85rem;margin-bottom:6px;color:var(--ink);opacity:.75}\n  .field input[type=\"date\"]{\n    font-size:1rem;padding:12px 14px;\n    appearance:none;-webkit-appearance:none;\n    min-height:48px;\n  }\n\n  .negative .big{color:var(--red)}\n</style>\n</head>\n<body>\n<div class=\"widget\">\n\n  <div class=\"tabs\">\n    <button class=\"tab active\" data-tab=\"today\">Progress</button>\n    <button class=\"tab\" data-tab=\"calc\">Calculations</button>\n  </div>\n\n  <div class=\"panels\">\n\n  <!-- TODAY -->\n  <div class=\"panel active\" id=\"panel-today\">\n    <div class=\"subtabs\">\n      <button class=\"subtab active\" data-sub=\"day\">Today</button>\n      <button class=\"subtab\" data-sub=\"week\">This week</button>\n    </div>\n\n    <div id=\"sub-day\">\n      <div class=\"card blue\" style=\"margin-bottom:14px\">\n        <div class=\"label\">Should be left in your account</div>\n        <div class=\"big\" id=\"dayTarget\">–</div>\n        <div class=\"sub\" id=\"dayDate\"></div>\n      </div>\n      <div class=\"row\">\n        <div class=\"card orange\">\n          <div class=\"label\">Spend today</div>\n          <div class=\"mid\" id=\"dayAllowance\">–</div>\n        </div>\n        <div class=\"card dark\">\n          <div class=\"label\">Days left</div>\n          <div class=\"mid\" id=\"daysLeft\">–</div>\n        </div>\n      </div>\n    </div>\n\n    <div id=\"sub-week\" style=\"display:none\">\n      <div class=\"card blue\" style=\"margin-bottom:14px\">\n        <div class=\"label\">Should be left after this week</div>\n        <div class=\"big\" id=\"weekTarget\">–</div>\n        <div class=\"sub\" id=\"weekRange\"></div>\n      </div>\n      <div class=\"row\">\n        <div class=\"card orange\">\n          <div class=\"label\">Spend this week</div>\n          <div class=\"mid\" id=\"weekAllowance\">–</div>\n        </div>\n        <div class=\"card dark\">\n          <div class=\"label\">Per day</div>\n          <div class=\"mid\" id=\"weekPerDay\">–</div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- CALCULATIONS -->\n  <div class=\"panel\" id=\"panel-calc\">\n    <div class=\"card dark field\">\n      <label for=\"dateStart\" style=\"color:var(--white)\">Time period</label>\n      <div class=\"dates\">\n        <div>\n          <div class=\"sublabel\" style=\"color:var(--white)\">From</div>\n          <input id=\"dateStart\" type=\"date\" style=\"background:rgba(248,248,248,.1);color:var(--white)\">\n        </div>\n        <div>\n          <div class=\"sublabel\" style=\"color:var(--white)\">To</div>\n          <input id=\"dateEnd\" type=\"date\" style=\"background:rgba(248,248,248,.1);color:var(--white)\">\n        </div>\n      </div>\n    </div>\n    <div class=\"card yellow field\">\n      <label for=\"budget\">Time period budget</label>\n      <input id=\"budget\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n    </div>\n    <div class=\"card orange field\">\n      <label for=\"savings\">I want to save</label>\n      <input id=\"savings\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n    </div>\n    <div class=\"card blue field\">\n      <label for=\"fixed\">Fixed expenses</label>\n      <input id=\"fixed\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n      <div class=\"hint\">What you predict you'll need to spend on things like rent or loan repayments. Deducted from your monthly budget. Leave empty to disregard.</div>\n    </div>\n    <div class=\"card pink field\">\n      <label for=\"extra\">Additional spending</label>\n      <input id=\"extra\" type=\"number\" inputmode=\"decimal\" placeholder=\"0\">\n      <div class=\"hint\">Any unexpected expenses that come up during the period that you want to exclude from the budget.</div>\n      <div class=\"hint\" id=\"calcHint\"></div>\n    </div>\n    <div class=\"note\">Your data is saved on this device and will be here when you come back.</div>\n  </div>\n\n  </div><!-- /panels -->\n\n</div>\n\n<script>\n(function(){\n  const $ = id => document.getElementById(id);\n  const store = {\n    get(k){ try{ return localStorage.getItem(k) }catch(e){ return null } },\n    set(k,v){ try{ localStorage.setItem(k,v) }catch(e){} }\n  };\n\n  const fmt = n => n.toLocaleString(undefined,{minimumFractionDigits:0,maximumFractionDigits:0});\n\n  // Tabs\n  document.querySelectorAll('.tab').forEach(t=>{\n    t.addEventListener('click',()=>{\n      document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));\n      document.querySelectorAll('.panel').forEach(x=>x.classList.remove('active'));\n      t.classList.add('active');\n      $('panel-'+t.dataset.tab).classList.add('active');\n      if(t.dataset.tab==='today') render();\n    });\n  });\n  document.querySelectorAll('.subtab').forEach(t=>{\n    t.addEventListener('click',()=>{\n      document.querySelectorAll('.subtab').forEach(x=>x.classList.remove('active'));\n      t.classList.add('active');\n      $('sub-day').style.display = t.dataset.sub==='day' ? '' : 'none';\n      $('sub-week').style.display = t.dataset.sub==='week' ? '' : 'none';\n    });\n  });\n\n  // Inputs\n  const budgetEl = $('budget'), savingsEl = $('savings'), fixedEl = $('fixed'), extraEl = $('extra');\n  const dateStartEl = $('dateStart'), dateEndEl = $('dateEnd');\n  budgetEl.value = store.get('dsc_budget') || '';\n  savingsEl.value = store.get('dsc_savings') || '';\n  fixedEl.value = store.get('dsc_fixed') || '';\n  extraEl.value = store.get('dsc_extra') || '';\n  dateStartEl.value = store.get('dsc_start') || '';\n  dateEndEl.value = store.get('dsc_end') || '';\n  [budgetEl,savingsEl,fixedEl,extraEl,dateStartEl,dateEndEl].forEach(el=>el.addEventListener('input',()=>{\n    store.set('dsc_budget',budgetEl.value);\n    store.set('dsc_savings',savingsEl.value);\n    store.set('dsc_fixed',fixedEl.value);\n    store.set('dsc_extra',extraEl.value);\n    store.set('dsc_start',dateStartEl.value);\n    store.set('dsc_end',dateEndEl.value);\n    render();\n  }));\n\n  const DAY = 86400000;\n  const mid = d => new Date(d.getFullYear(), d.getMonth(), d.getDate());\n  const diffDays = (a,b) => Math.round((mid(a)-mid(b))/DAY);\n\n  function render(){\n    const budget = parseFloat(budgetEl.value)||0;\n    const savings = parseFloat(savingsEl.value)||0;\n    const fixed = parseFloat(fixedEl.value)||0;\n    const extra = parseFloat(extraEl.value)||0;\n    const spendable = budget - savings - fixed - extra;\n\n    const now = new Date();\n\n    // Period: chosen dates, or the current month by default\n    let start = dateStartEl.value ? new Date(dateStartEl.value+'T00:00:00') : new Date(now.getFullYear(), now.getMonth(), 1);\n    let end   = dateEndEl.value   ? new Date(dateEndEl.value+'T00:00:00')   : new Date(now.getFullYear(), now.getMonth()+1, 0);\n    if (end < start) [start,end] = [end,start];\n\n    const totalDays = diffDays(end,start) + 1;\n    const daily = spendable / totalDays;\n\n    // Today, clamped inside the period\n    const today = mid(now) < mid(start) ? mid(start) : (mid(now) > mid(end) ? mid(end) : mid(now));\n\n    const daysAfterToday = Math.max(0, diffDays(end, today));\n    const dayTarget = savings + daily * daysAfterToday;\n\n    $('dayTarget').textContent = fmt(dayTarget);\n    $('dayAllowance').textContent = fmt(daily);\n    $('daysLeft').textContent = daysAfterToday + 1;\n    $('dayDate').textContent = today.toLocaleDateString(undefined,{weekday:'long', day:'numeric', month:'long'});\n    $('dayTarget').closest('.card').classList.toggle('negative', dayTarget<0);\n\n    // Week: Monday–Sunday containing today, clamped to the period\n    const dow = (today.getDay()+6)%7; // 0 = Monday\n    let weekStart = new Date(today.getTime() - dow*DAY);\n    let weekEnd   = new Date(weekStart.getTime() + 6*DAY);\n    if (weekStart < start) weekStart = mid(start);\n    if (weekEnd > end) weekEnd = mid(end);\n\n    const weekDays = diffDays(weekEnd, weekStart) + 1;\n    const weekAllowance = daily * weekDays;\n    const daysAfterWeek = Math.max(0, diffDays(end, weekEnd));\n    const weekTarget = savings + daily * daysAfterWeek;\n\n    $('weekTarget').textContent = fmt(weekTarget);\n    $('weekAllowance').textContent = fmt(weekAllowance);\n    $('weekPerDay').textContent = fmt(daily);\n    const dOpts = {day:'numeric', month:'short'};\n    $('weekRange').textContent = weekStart.toLocaleDateString(undefined,dOpts) + ' – ' + weekEnd.toLocaleDateString(undefined,dOpts);\n\n    $('calcHint').textContent = spendable>0\n      ? 'Spendable: ' + fmt(spendable) + ' over ' + totalDays + ' days · ' + fmt(daily) + ' / day'\n      : 'Enter your budget and savings goal';\n  }\n\n  render();\n})();\n</script>\n</body>\n</html>","embedURL":""}},"11:340":{"type":"FRAME","id":"11:340","name":"Header","absoluteBoundingBox":{"x":7160.0,"y":120.0,"width":335.0,"height":53.0},"isolatedAbsoluteRenderBounds":{"x":7160.0,"y":120.0,"width":335.0,"height":53.0},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,20.0]],"size":{"x":335.0,"y":53.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"HORIZONTAL","itemSpacing":10.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["11:341","11:346"]},"11:333":{"type":"TEXT","id":"11:333","name":"Daily spend","absoluteBoundingBox":{"x":5991.798828125,"y":130.0,"width":133.0,"height":31.0},"isolatedAbsoluteRenderBounds":{"x":5993.7666015625,"y":137.095993041992,"width":128.9453125,"height":22.7040100097656},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,10.0]],"size":{"x":133.0,"y":31.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.123685397207737,"g":0.123685397207737,"b":0.123685397207737,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Daily spend","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"resolvedParagraphValues":{"0":{"listSpacing":0.0,"paragraphIndent":0.0,"paragraphSpacing":0.0}},"textAutoResize":"WIDTH_AND_HEIGHT","textAlignVertical":"CENTER","style":{"fontFamily":"IBM Plex Sans","fontPostScriptName":"IBMPlexSans-SemiBold","fontStyle":"SemiBold","textCase":"TITLE","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":24.0,"textAlignHorizontal":"LEFT","textAlignVertical":"CENTER","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":31.1999988555908,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"11:334":{"type":"TEXT","id":"11:334","name":"Refresh the page if the widget doesn’t load","absoluteBoundingBox":{"x":6277.5,"y":213.0,"width":317.0,"height":21.0},"isolatedAbsoluteRenderBounds":{"x":6278.81201171875,"y":218.0,"width":314.22900390625,"height":15.3919982910156},"relativeTransform":[[1.0,0.0,481.5],[0.0,1.0,113.0]],"size":{"x":317.0,"y":21.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.292217552661896,"g":0.292217552661896,"b":0.292217552661896,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Refresh the page if the widget doesn’t load","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"resolvedParagraphValues":{"0":{"listSpacing":0.0,"paragraphIndent":0.0,"paragraphSpacing":0.0}},"textAutoResize":"WIDTH_AND_HEIGHT","textAlignVertical":"CENTER","style":{"fontFamily":"IBM Plex Sans","fontPostScriptName":"IBMPlexSans-SemiBold","fontStyle":"SemiBold","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":16.0,"textAlignHorizontal":"LEFT","textAlignVertical":"CENTER","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":20.7999992370605,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textCase":"ORIGINAL","textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"11:326":{"type":"FRAME","id":"11:326","name":"Header","absoluteBoundingBox":{"x":5816.0,"y":120.0,"width":1240.0,"height":53.0},"isolatedAbsoluteRenderBounds":{"x":5816.0,"y":120.0,"width":1240.0,"height":53.0},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,20.0]],"size":{"x":1240.0,"y":53.0},"fills":[],"strokeAlign":"INSIDE","layoutAlign":"STRETCH","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"layoutMode":"HORIZONTAL","itemSpacing":10.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["11:327","11:332"]},"11:328":{"type":"TEXT","id":"11:328","name":"Home","absoluteBoundingBox":{"x":5836.0,"y":130.0,"width":66.0,"height":31.0},"isolatedAbsoluteRenderBounds":{"x":5837.9677734375,"y":138.248001098633,"width":62.56640625,"height":17.0399932861328},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,10.0]],"size":{"x":66.0,"y":31.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.123685397207737,"g":0.123685397207737,"b":0.123685397207737,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Home","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"resolvedParagraphValues":{"0":{"listSpacing":0.0,"paragraphIndent":0.0,"paragraphSpacing":0.0}},"textAutoResize":"WIDTH_AND_HEIGHT","textAlignVertical":"CENTER","style":{"fontFamily":"IBM Plex Sans","fontPostScriptName":"IBMPlexSans-SemiBold","fontStyle":"SemiBold","textCase":"TITLE","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":24.0,"textAlignHorizontal":"LEFT","textAlignVertical":"CENTER","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":31.1999988555908,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"11:332":{"type":"FRAME","id":"11:332","name":"Button","absoluteBoundingBox":{"x":5971.798828125,"y":120.0,"width":1084.20092773438,"height":53.0},"isolatedAbsoluteRenderBounds":{"x":5971.798828125,"y":120.0,"width":1084.201171875,"height":53.0},"relativeTransform":[[1.0,0.0,155.799011230469],[0.0,1.0,0.0]],"size":{"x":1084.20092773438,"y":53.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.415686279535294,"g":0.537254929542542,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","layoutGrow":1.0,"strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"rectangleCornerRadii":[200.0,200.0,200.0,200.0],"cornerRadius":200.0,"paddingTop":10.0,"paddingRight":20.0,"paddingBottom":12.0,"paddingLeft":20.0,"clipsContent":true,"layoutMode":"HORIZONTAL","itemSpacing":40.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["11:333"]},"11:325":{"type":"FRAME","id":"11:325","name":"Desktop","absoluteBoundingBox":{"x":5796.0,"y":100.0,"width":1280.0,"height":1119.0},"isolatedAbsoluteRenderBounds":{"x":5796.0,"y":100.0,"width":1280.0,"height":1119.0},"relativeTransform":[[1.0,0.0,64.0],[0.0,1.0,100.0]],"size":{"x":1280.0,"y":1119.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.123685397207737,"g":0.123685397207737,"b":0.123685397207737,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"paddingTop":20.0,"paddingRight":20.0,"paddingBottom":20.0,"paddingLeft":20.0,"clipsContent":true,"overflowDirection":"VERTICAL_SCROLLING","layoutMode":"VERTICAL","itemSpacing":40.0,"counterAxisAlignItems":"CENTER","counterAxisSizingMode":"FIXED","isBreakpointFrame":true,"children":["11:326","11:334","11:335"]},"11:329":{"type":"SVG","id":"11:329","name":"Group 1","absoluteBoundingBox":{"x":5921.99991120312,"y":135.600499896467,"width":19.7990057187671,"height":19.7990057187676},"targetAspectRatio":{"x":86.0000076293945,"y":86.0000076293945},"isolatedAbsoluteRenderBounds":{"x":5920.5859375,"y":134.893417358398,"width":21.2129794218836,"height":21.2132110595703},"relativeTransform":[[-0.70710676908493,0.70710676908493,115.899505615234],[-0.70710676908493,-0.70710676908493,35.3995018005371]],"size":{"x":14.0000114440918,"y":14.0000114440918},"fills":[],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"hash":"798e3de9ce02b7650d7beb69e773d4cf9057e8be"},"11:324":{"type":"WEBPAGE","id":"11:324","name":"/daily-spend","absoluteBoundingBox":{"x":5732.0,"y":0.0,"width":1847.0,"height":1349.0},"isolatedAbsoluteRenderBounds":{"x":5732.0,"y":0.0,"width":1847.0,"height":1349.0},"relativeTransform":[[1.0,0.0,5732.0],[0.0,1.0,0.0]],"size":{"x":1847.0,"y":1349.0},"fills":[{"opacity":0.0470588244497776,"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"visible":true}],"strokeAlign":"INSIDE","strokes":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"children":["11:325","11:339"]},"11:346":{"type":"FRAME","id":"11:346","name":"Button","absoluteBoundingBox":{"x":7223.0,"y":120.0,"width":272.0,"height":53.0},"isolatedAbsoluteRenderBounds":{"x":7223.0,"y":120.0,"width":272.0,"height":53.0},"relativeTransform":[[1.0,0.0,63.0],[0.0,1.0,0.0]],"size":{"x":272.0,"y":53.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.415686279535294,"g":0.537254929542542,"b":1.0,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","layoutGrow":1.0,"strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"rectangleCornerRadii":[200.0,200.0,200.0,200.0],"cornerRadius":200.0,"paddingTop":10.0,"paddingRight":20.0,"paddingBottom":12.0,"paddingLeft":20.0,"clipsContent":true,"layoutMode":"HORIZONTAL","itemSpacing":40.0,"counterAxisAlignItems":"CENTER","primaryAxisSizingMode":"FIXED","children":["11:347"]},"11:342":{"type":"TEXT","id":"11:342","name":"Home","absoluteBoundingBox":{"x":7180.0,"y":130.0,"width":66.0,"height":31.0},"isolatedAbsoluteRenderBounds":{"x":7180.0,"y":130.0,"width":66.0,"height":31.0},"relativeTransform":[[1.0,0.0,20.0],[0.0,1.0,10.0]],"size":{"x":66.0,"y":31.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.123685397207737,"g":0.123685397207737,"b":0.123685397207737,"a":1.0},"visible":true,"opacity":1.0}],"visible":false,"strokeAlign":"OUTSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[],"characterStyleOverrides":[],"characters":"Home","lineIndentations":[0],"lineTypes":["NONE"],"listStartOffsets":[],"lineStyleOverrides":[0],"lineTextDirections":null,"resolvedParagraphValues":{"0":{"listSpacing":0.0,"paragraphIndent":0.0,"paragraphSpacing":0.0}},"textAutoResize":"WIDTH_AND_HEIGHT","textAlignVertical":"CENTER","style":{"fontFamily":"IBM Plex Sans","fontPostScriptName":"IBMPlexSans-SemiBold","fontStyle":"SemiBold","textCase":"TITLE","textAutoResize":"WIDTH_AND_HEIGHT","fontVariantPosition":"NORMAL","fontSize":24.0,"textAlignHorizontal":"LEFT","textAlignVertical":"CENTER","letterSpacing":0.0,"letterSpacingValue":0.0,"letterSpacingUnit":"PERCENT","lineHeightPx":31.1999988555908,"lineHeightPercent":100.0,"lineHeightUnit":"INTRINSIC_%","paragraphSpacing":0,"paragraphIndent":0,"listSpacing":0,"italic":false,"textDecoration":"NONE","textDecorationSkipInk":false,"textDecorationStyle":"solid","textTruncation":"DISABLED","lineHeightPercentFontSize":100},"styleOverrideTable":{}},"11:327":{"type":"FRAME","id":"11:327","name":"Button","absoluteBoundingBox":{"x":5816.0,"y":120.0,"width":145.799011230469,"height":53.0},"isolatedAbsoluteRenderBounds":{"x":5816.0,"y":120.0,"width":145.799011230469,"height":53.0},"relativeTransform":[[1.0,0.0,0.0],[0.0,1.0,0.0]],"size":{"x":145.799011230469,"y":53.0},"fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":0.564705908298492,"b":0.800000011920929,"a":1.0},"visible":true,"opacity":1.0}],"strokeAlign":"INSIDE","strokes":[],"effects":[],"accessibleHTMLTag":"AUTO","isDecorativeImage":false,"ariaAttributes":{},"interactions":[{"id":{"sessionID":2,"localID":163},"event":{"interactionType":"ON_CLICK"},"actions":[{"transitionNodeID":{"sessionID":0,"localID":3},"connectionType":"INTERNAL_NODE","navigationType":"NAVIGATE","connectionURL":"/"}],"isDeleted":false,"stateManagementVersion":1}],"rectangleCornerRadii":[200.0,200.0,200.0,200.0],"cornerRadius":200.0,"paddingTop":10.0,"paddingRight":20.0,"paddingBottom":12.0,"paddingLeft":20.0,"clipsContent":true,"layoutMode":"HORIZONTAL","itemSpacing":20.0,"counterAxisAlignItems":"CENTER","children":["11:328","11:329"]}},"assetIdToGuid":{},"guidToUrl":{"2:2":"/fretboard","11:324":"/daily-spend","7:126":"/flashcards","0:3":"/"},"fonts":{"IBM Plex Sans:SemiBold":{"id":"IBMPlexSans_wdth_wght__1","url":"/_woff/v2/IBMPlexSans_wdth_wght__1/IBMPlexSans_wdth_wght__1.woff2","source":1,"italic":false,"weight":600,"variationAxes":[{"tag":"wght","value":600.0,"name":"Weight"},{"tag":"wdth","value":100.0,"name":"Width"}],"subsets":{"baseUrl":"/_woff/v2/IBMPlexSans_wdth_wght__1/","subsetMappings":[{"unicodeRange":"U+0000-00A0,U+00A2-00A9,U+00AC-00AE,U+00B0-00B7,U+00B9-00BA,U+00BC-00BE,U+00D7,U+00F7,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-21BB,U+2212,U+2215,U+F8FF,U+FEFF,U+FFFD","file":"IBMPlexSans_wdth_wght__1-english.woff2"},{"unicodeRange":"U+00A1,U+00AA-00AB,U+00AF,U+00B8,U+00BB,U+00BF-00D6,U+00D8-00F6,U+00F8-00FF,U+0131,U+0152-0153,U+02B0-02FF","file":"IBMPlexSans_wdth_wght__1-rest-latin.woff2"},{"unicodeRange":"U+0100-0130,U+0132-0151,U+0154-017F","file":"IBMPlexSans_wdth_wght__1-latin-extended-a.woff2"},{"unicodeRange":"U+0180-024F","file":"IBMPlexSans_wdth_wght__1-latin-extended-b.woff2"},{"unicodeRange":"U+1E00-1EFF","file":"IBMPlexSans_wdth_wght__1-latin-extended-additional.woff2"},{"unicodeRange":"U+0250-02AF,U+0300-1DFF,U+1F00-1FFF,U+2070-2073,U+2075-20AB,U+20AD-2121,U+2123-218F,U+21BC-2211,U+2213-2214,U+2216-F8FE,U+F900-FEFE,U+FF00-FFFC,U+FFFE-FFFF","file":"IBMPlexSans_wdth_wght__1-rest.woff2"}]}}},"assets":{"691b3de63fc4d2eaea85228adcc8c006cffacce8":{"type":"GENERATED_ASSET","url":"691b3de63fc4d2eaea85228adcc8c006cffacce8.svg","size":{"x":17.7071132659912,"y":17.7071151733398},"offsets":{"left":{"value":-4.4194578859461,"unit":"PERCENT"},"right":{"value":-6.24993406240102,"unit":"PERCENT"},"top":{"value":-6.25004246828409,"unit":"PERCENT"},"bottom":{"value":-4.41936140098488,"unit":"PERCENT"}},"format":"SVG"},"798e3de9ce02b7650d7beb69e773d4cf9057e8be":{"type":"GENERATED_ASSET","url":"798e3de9ce02b7650d7beb69e773d4cf9057e8be.svg","size":{"x":15.7071142196655,"y":15.7071151733398},"offsets":{"left":{"value":-5.0508164092611,"unit":"PERCENT"},"right":{"value":-7.14276487737529,"unit":"PERCENT"},"top":{"value":-7.14291516610677,"unit":"PERCENT"},"bottom":{"value":-5.05067293248346,"unit":"PERCENT"}},"format":"SVG"},"80b30a8b8d495f47f96c611b0b160ea7b7cf0546":{"type":"GENERATED_ASSET","url":"80b30a8b8d495f47f96c611b0b160ea7b7cf0546.png","size":{"x":1200.0,"y":630.0},"offsets":{"top":{"value":0,"unit":"PIXELS"},"right":{"value":0,"unit":"PIXELS"},"bottom":{"value":0,"unit":"PIXELS"},"left":{"value":0,"unit":"PIXELS"}},"format":"PNG"},"b46c3e4bd3e95a52c9b79f9891719f37e799a9a7":{"type":"GENERATED_ASSET","url":"b46c3e4bd3e95a52c9b79f9891719f37e799a9a7.png","size":{"x":95.0,"y":95.0},"offsets":{"top":{"value":0,"unit":"PIXELS"},"right":{"value":0,"unit":"PIXELS"},"bottom":{"value":0,"unit":"PIXELS"},"left":{"value":0,"unit":"PIXELS"}},"format":"PNG"}},"stablePathToAssetInfo":{"11:343":{"hash":"691b3de63fc4d2eaea85228adcc8c006cffacce8"},"11:329":{"hash":"798e3de9ce02b7650d7beb69e773d4cf9057e8be"},"11:417":{"hash":"80b30a8b8d495f47f96c611b0b160ea7b7cf0546"},"2:164":{"hash":"b46c3e4bd3e95a52c9b79f9891719f37e799a9a7"}},"animateRootIds":[],"siteSettings":{"title":"Useful Shit | Free Little Tools for Learning & Everyday Life","description":"A small collection of free browser tools made for fun: learn every note on the guitar fretboard, turn any content into flashcards, and track your daily spend.","scalingMode":"REFLOW","lang":"en","faviconFilename":"b46c3e4bd3e95a52c9b79f9891719f37e799a9a7.png","socialImageFilename":"80b30a8b8d495f47f96c611b0b160ea7b7cf0546.png","labs":{"E5FBBA911B2B7A09E649D4BE6CDF8591EAEFC881":false}},"sourceCodeHash":""}