@font-face { font-family: 'Inter Variable'; font-weight: 100 900; font-display: swap; src: url(fonts/inter.woff2) format('woff2-variations'); }
:root {
  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  /* slate skin: the page is #3A4250, white ink */
  --page: #3A4250;
  --ink: oklch(0.985 0 0);
  --ink-muted: oklch(0.708 0 0);
  --line: rgb(255 255 255 / 10%);
  --plate: rgb(255 255 255 / 11%);
  --glass: rgb(30 30 34 / .42);
  --brand-stops: #FFD563 14%, #FFB900 43%, #F6FF0B 86%;
  --brand-fill: linear-gradient(180deg, var(--brand-stops));
  --brand-ink: #111;
  --radius: 11px;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); font-feature-settings: "cv11","ss01"; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1,h2,h3 { margin: 0; text-wrap: balance; } p { margin: 0; } a { color: inherit; text-decoration: none; }

/* the page column: 1120px wide, 24px side padding; section heading 44px/1.06 bold, tracking -0.035em; sub 18px muted */
.col { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.h2 { font-size: 44px; font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; max-width: 20ch; }
.sub { margin-top: 16px; max-width: 54ch; font-size: 18px; color: var(--ink-muted); }

/* ---- tinyApps header: Mac menu bar with a notch (from Aide MenuBar.tsx). Place inside a position:relative page; it is absolute at the top. ---- */
.mb { position: absolute; inset: 0 0 auto 0; z-index: 30; height: 37px; background: #000; }
.mb-col { position: relative; margin: 0 auto; display: flex; height: 100%; max-width: 1120px; align-items: center; justify-content: space-between; padding: 0 24px; }
.mb-brand { display: flex; align-items: center; gap: 8px; margin-left: -8.5px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; font-size: 12px; font-weight: 600; transition: opacity 150ms; }
.mb-brand:hover { opacity: .8; }
.mb-heart { display: block; width: 17px; height: 17px; color: rgb(255 255 255 / .85); }
.mb-status { display: flex; height: 100%; align-items: center; gap: 14px; font-size: 13px; font-weight: 500; color: rgb(255 255 255 / .85); }
.mb-clock { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; white-space: pre; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .9); }
.mb-star { position: relative; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgb(255 255 255 / .85); cursor: pointer; }
.mb-star::after { content: ""; position: absolute; inset: -6px -7px; }
.mb-star:hover, .mb-star:active, .mb-star:focus { background: transparent; }
.mb-star:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.mb-star svg { display: block; width: 15.5px; height: 15.5px; overflow: visible; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { display: block; height: 48px; width: auto; }
.mb-star .star-fill { opacity: 0; transition: opacity 180ms ease; }
.mb-star[data-liked="true"] .star-fill { opacity: 1; }
.mb-notch { position: absolute; left: 50%; top: 0; display: flex; height: 67px; width: 228px; transform: translateX(-50%); align-items: center; justify-content: center; border-radius: 0 0 14px 14px; background: #000; color: #fff; font-weight: 700; font-size: 29px; line-height: 1; letter-spacing: -0.035em; }
.mb-fillet { position: absolute; top: 37px; width: 14px; height: 14px; }
.mb-fillet-l { left: -14px; background: radial-gradient(circle at 0 100%, transparent 13.5px, #000 14px); }
.mb-fillet-r { right: -14px; background: radial-gradient(circle at 100% 100%, transparent 13.5px, #000 14px); }

/* ---- the accent button, as the Aide hero draws it: 44px tall, 12px radius, dark ink on the yellow gradient, soft glow ---- */
.btn-brand { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--brand-fill); color: var(--brand-ink); font: 500 15px/1 var(--font-sans); white-space: nowrap; cursor: pointer; box-shadow: 0 0 24px rgb(255 201 0 / .35); transition: filter 150ms; }
.btn-brand:hover { filter: brightness(1.05); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--plate); color: var(--ink); font: 500 15px/1 var(--font-sans); white-space: nowrap; cursor: pointer; }
/* hero typography, as on the Aide page: 60px extrabold, 1.02, -0.045em; the second line at 55% ink; sub 18px at 70% ink; small print 14px at 55% */
.h1 { font-size: 60px; font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; }
.h1 .dim { display: block; color: rgb(255 255 255 / .55); }
.lead { margin-top: 20px; max-width: 54ch; font-size: 18px; color: rgb(255 255 255 / .7); }
.note { font-size: 14px; color: rgb(255 255 255 / .55); }