Source
This app’s code and revision history are public. Download a copy or explore the files below.
Public
The app’s code and revision history are public.
Run it yourself
Take the whole tree and run it on your own machine. The download needs no account. Cloning needs a sign-in.
Download .zip
bounded clone 5af1a249bbbef1db1b4c5ec8
A copy you download is not bounded. The guarantees this app runs under - declared egress, proven invariants, writes that fail closed - live in the runtime serving this page, not in the files. What you get is auditable source you can read and run, with no runtime guarantees attached.
src/styles.css
/* Subs. Shared look comes from /kit.css; this is the app's own layout. Phones first. */
body.app-mode .landing-only { display: none !important; }
body:not(.app-mode) #app:empty, body:not(.app-mode) #app-nav { display: none; }
body.app-mode .site-foot { display: none; }
.small { font-size: 14px; }
.self-start { justify-self: start; align-self: flex-start; }
.inline-icon { display: inline-block; vertical-align: -2px; }
.brand-app { color: var(--muted); font-weight: 500; }
.brand-sep { color: var(--line-strong); font-weight: 300; }
.nav-cta { background: var(--ink-solid); color: #fff !important; }
.nav-cta:hover { background: #2a2c31 !important; }
@media (max-width: 420px) { .brand-word { display: none; } }
.field > label { font: 600 13.5px/1.2 var(--sans); color: #33363c; }
/* Landing hero with the quick add */
.app-hero { padding: 40px 0 72px; background: linear-gradient(180deg, #faf6ee 0%, #fdfdfc 100%); border-bottom: 1px solid #f0ebe1; }
.app-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "text start" "more start"; column-gap: 56px; align-items: start; }
.hero-text { grid-area: text; align-self: end; }
.hero-more { grid-area: more; align-self: start; }
#start { grid-area: start; min-width: 0; }
.app-hero h1 { margin-top: 14px; }
.app-hero .lede { margin-top: 18px; }
.hero-points { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 10px; font-size: 15.5px; color: #3c4048; }
.hero-points li { display: flex; gap: 10px; align-items: baseline; }
.hero-points li::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--cobalt); transform: translateY(-2px); }
.hero-art { width: 230px; height: auto; margin-bottom: -6px; }
.hero-art, .empty-art { filter: brightness(1.025); }
@media (max-width: 900px) {
.app-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "start" "more"; row-gap: 24px; }
.app-hero { padding-top: 16px; }
.hero-art { width: 150px; }
.app-hero .lede { margin-top: 4px; }
}
.start { padding: 20px; display: grid; gap: 12px; }
.start-title { font: 400 26px/1.2 var(--serif); letter-spacing: -.015em; }
.start-total { font: 400 20px/1.2 var(--serif); }
.start-total strong { font: 360 44px/1.05 var(--serif); letter-spacing: -.02em; }
.start-soon { list-style: none; padding: 0; display: grid; }
.start-soon li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.start-soon li span:first-child { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.start-soon li span:last-child { flex: none; font-size: 13.5px; }
.picks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pick { min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: #fff; color: #33363c; font: 600 13.5px/1 var(--sans); cursor: pointer; }
.pick:hover { border-color: #aeb6c2; color: var(--ink-solid); }
/* Landing sections */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; padding: 0; counter-reset: step; }
.steps li { list-style: none; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--ink-solid); color: #fff; font: 650 15px var(--sans); }
.steps h3, .features h3 { font: 600 18px/1.3 var(--sans); }
.steps p, .features p { margin-top: 8px; color: #4a4e56; }
.features { list-style: none; padding: 0; margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.features li { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
@media (max-width: 860px) { .steps, .features { grid-template-columns: minmax(0, 1fr); } }
.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 860px) { .two-up { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.prose-list { margin-top: 14px; padding-left: 1.2em; display: grid; gap: 8px; color: #3d4148; }
.api-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.api-grid .code { font-size: 12.5px; }
@media (max-width: 900px) { .api-grid { grid-template-columns: minmax(0, 1fr); } }
.more-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin-top: 22px; }
.more-apps a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.more-apps a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.more-apps strong { font: 400 22px/1.1 var(--serif); }
.more-apps span { color: var(--muted); font-size: 14px; }
.compare td:first-child { font-weight: 600; }
.compare { min-width: 600px; }
@media (max-width: 640px) { .compare { min-width: 0; font-size: 14px; } .compare th, .compare td { padding: 10px 10px; } .compare td:first-child { width: 30%; } }
/* App tabs: in the header on wide screens, a bar at the bottom on phones */
body.app-mode .site-nav { display: none; }
#app-nav { margin-left: auto; }
.head-tabs { display: none; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fdfdfcf2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.tabbar a { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 0; border-radius: 12px; color: var(--muted); font: 600 12px/1 var(--sans); }
.tabbar a[aria-current="page"] { color: var(--ink-solid); background: #0000000a; }
@media (min-width: 760px) {
.tabbar { display: none; }
.head-tabs { display: flex; gap: 4px; }
.head-tabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 8px; color: #33363c; font: 600 14.5px/1 var(--sans); }
.head-tabs a svg { width: 18px; height: 18px; }
.head-tabs a:hover { background: #0000000a; color: var(--ink-solid); }
.head-tabs a[aria-current="page"] { background: #0000000d; color: var(--ink-solid); }
}
/* Pages */
.shell { width: var(--page); margin-inline: auto; padding: 18px 0 120px; }
@media (min-width: 760px) { .shell { padding-bottom: 80px; } }
.page { max-width: 760px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.page.overview, .page.sub, .page.settings, .page.add { max-width: 1080px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.page-head > div { min-width: 0; }
.page-head .h1 { margin-top: 8px; overflow-wrap: anywhere; }
.head-add { display: none; }
@media (min-width: 760px) { .head-add { display: inline-flex; } }
.back-link { display: inline-flex; align-items: center; gap: 4px; justify-self: start; min-height: 36px; font: 600 14.5px var(--sans); }
.section-label { margin: 6px 0 4px; font: 650 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.empty { display: grid; justify-items: center; gap: 14px; padding: 36px 20px; border: 1px dashed var(--line-strong); border-radius: 16px; text-align: center; }
.pad { padding: 18px; }
@media (min-width: 760px) { .pad { padding: 22px; } }
.icon-title { display: flex; align-items: center; gap: 8px; }
.icon-title svg { color: var(--sage); flex: none; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 36px; padding: 0; border: 0; background: none; color: var(--cobalt); font: 600 14.5px var(--sans); cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--cobalt-ink); }
.fine { margin-top: 6px; }
.plain-list { list-style: none; padding: 0; display: grid; }
.plain-list li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.plain-list li:first-child { border-top: 0; padding-top: 0; }
.plain-list li a { font-weight: 600; overflow-wrap: anywhere; }
.plain-list li span { font-size: 13.5px; }
.plain-list li.urgent span { color: var(--brick); }
/* Empty overview */
.empty-start { display: grid; justify-items: center; gap: 14px; padding: 8px 0 24px; text-align: center; }
.empty-start .muted { max-width: 46ch; }
.empty-start .picks { justify-content: center; max-width: 560px; }
.empty-art { width: 220px; height: auto; }
/* Overview */
.total { font-size: clamp(40px, 6vw, 64px); }
.total span { font-weight: 330; }
.overview-grid, .sub-grid, .add-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.col-main, .col-side { --gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
.overview-grid, .sub-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.add-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}
.soon-list { list-style: none; padding: 0; display: grid; }
.soon-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.soon-list li:first-child { border-top: 0; padding-top: 0; }
.soon-date { display: grid; gap: 2px; }
.soon-date strong { font: 600 14.5px/1.2 var(--sans); }
.soon-date span { font-size: 12.5px; color: var(--muted); }
.soon-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 600 15.5px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.soon-name:hover { color: var(--cobalt); }
.soon-amount { font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.swaps { background: linear-gradient(180deg, #f6faf7 0%, #fff 60%); }
.swap-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.swap-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
@media (min-width: 640px) { .swap-list li { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 16px; } }
.swap-from { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.swap-from a { font: 600 15.5px/1.3 var(--sans); overflow-wrap: anywhere; }
.swap-to { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--sage-wash); border: 1px solid #cfe2d4; color: #24442f; min-width: 0; }
.swap-to:hover { color: #1a3524; border-color: #b6d2be; }
.swap-to strong { font: 600 15px/1.3 var(--sans); }
.swap-to span { font-size: 13.5px; color: #3b5c45; }
.cat-bars { list-style: none; padding: 0; display: grid; gap: 12px; }
.cat-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14.5px; }
.cat-name { min-width: 0; overflow-wrap: anywhere; }
.cat-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #eef0f3; overflow: hidden; }
.cat-bar span { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--cobalt); }
.lead-field { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: #33363c; }
.lead-field .input { width: auto; min-height: 40px; padding: 6px 10px; }
/* All subscriptions */
.sub-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.sub-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 1px 2px #1a1d240a; }
.sub-row:hover { color: var(--ink); border-color: var(--line-strong); }
.sub-main { display: grid; gap: 4px; flex: 1; min-width: 0; }
.sub-main strong { font: 600 16.5px/1.3 var(--sans); overflow-wrap: anywhere; }
.sub-meta { font-size: 13.5px; color: var(--muted); }
.sub-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.sub-price { display: grid; justify-items: end; gap: 2px; flex: none; text-align: right; }
.sub-price strong { font: 600 16px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.sub-price span { font-size: 12.5px; color: var(--muted); }
.sub-list.cancelled .sub-row { background: #fafbfc; box-shadow: none; }
.sub-list.cancelled strong { color: var(--muted); }
/* One subscription */
.sub-title { font-size: clamp(34px, 5vw, 50px); }
.sub-price-big { margin-top: 6px; font-size: 16px; color: #3c4048; }
.sub-price-big strong { font: 400 26px/1.2 var(--serif); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.stats div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.stats dt { font: 600 11.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.stats dd { margin: 6px 0 0; font: 380 26px/1.15 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.stats dd small { display: block; font: 500 13px var(--sans); letter-spacing: 0; color: var(--muted); }
@media (max-width: 560px) { .stats { gap: 6px; } .stats div { padding: 10px 10px 12px; border-radius: 12px; } .stats dt { font-size: 10.5px; letter-spacing: .04em; } .stats dd { font-size: 20px; } }
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; }
.details dt { margin-top: 8px; font: 600 12.5px/1.2 var(--sans); color: var(--muted); }
.details dt:first-child { margin-top: 0; }
.details dd { margin: 0; font-size: 15.5px; overflow-wrap: anywhere; }
.details dd.notes { white-space: pre-wrap; }
/* Editor */
.editor { display: grid; gap: 18px; }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px -12px #1a1d2440; }
.combo-list li { display: grid; gap: 3px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.combo-list li strong { font: 600 15px/1.25 var(--sans); }
.combo-list li > span:not(.chip) { font-size: 12.5px; color: var(--muted); }
.combo-list li .chip { justify-self: start; }
.combo-list li:hover, .combo-list li.on { background: var(--panel); }
.alt-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; }
.alt-note a { font-weight: 600; }
.price-row { display: flex; align-items: stretch; }
.price-cur { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--panel); font: 600 14px var(--sans); color: #4a4e56; }
.price-row .input { border-radius: 0 var(--radius) var(--radius) 0; font-variant-numeric: tabular-nums; }
.typical { color: var(--gold) !important; font-weight: 600; }
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--panel-line); }
.segmented.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented button { min-height: 42px; padding: 0 4px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: 600 14px var(--sans); color: var(--muted); }
.segmented button[aria-checked="true"] { background: #fff; color: var(--ink-solid); box-shadow: 0 1px 3px #0000001a; }
.inline-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 15px; color: #33363c; }
.every-input { width: 76px; text-align: center; }
.unit-select { width: auto; }
.date-input { max-width: 220px; }
.trial-check { justify-self: start; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 520px) { .editor-actions .btn { width: 100%; } }
.add-side { align-content: start; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.account-card { background: var(--cobalt-wash); border-color: #d1ddf5; }
.import-list { max-height: 50vh; overflow-y: auto; }
/* Sheets (from Split) */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: #15171b66; animation: fade .15s ease; overflow: hidden; }
.modal { display: flex; flex-direction: column; outline: none; width: min(560px, 100%); max-height: min(88vh, 900px); border-radius: 18px; background: #fff; box-shadow: 0 30px 80px -20px #0006; animation: rise .18s ease; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.modal-title { font: 400 26px/1.2 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.modal-body { display: grid; gap: 12px; padding: 12px 20px 20px; overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.icon-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); }
.icon-btn:hover { background: #0000000a; color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 600px) {
.modal-backdrop { place-items: end stretch; padding: 0; }
.modal { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
}
.toast { display: flex; align-items: center; gap: 14px; bottom: calc(92px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); width: max-content; }
.toast-action { flex: none; min-height: 32px; padding: 0 10px; border: 1px solid #ffffff40; border-radius: 8px; background: none; color: #fff; font: 650 14px var(--sans); cursor: pointer; }
.toast-action:hover { background: #ffffff1a; }
@media (min-width: 760px) { .toast { bottom: 24px; } }
body:not(.app-mode) .toast { bottom: 24px; }
Change history
Point store links to openapps.free
Bind agent address in policy
Use OpenApps service URLs and add contribution strip
Bounded source sync
Bounded source sync
Bounded source sync