/*
* Klyp shared app stylesheet — on-brand building blocks for funky apps.
* Self-hosted Plus Jakarta Sans (same face as the feed shell) so apps match the app-store type system AND
* still load instantly offline (woff2 vendored under /apps/fonts, precached by the SW).
* Include with:
*/
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal; font-weight: 200 800; font-display: swap;
src: url("/apps/fonts/jakarta.woff2") format("woff2");
}
@font-face { /* latin-ext (accented creator/app names) */
font-family: "Plus Jakarta Sans";
font-style: normal; font-weight: 200 800; font-display: swap;
src: url("/apps/fonts/jakarta-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* SHARED SAFE-TOP: the reserved band the host top chrome floats over — post the
2026-07 tab-bar redesign that's ONE row: streak chip (left, bottom ≈ inset+46px)
and coin jar (right, bottom ≈ inset+52px); search/daily/rank live in the bottom
tab bar now. 64px = jar worst-case + 12px breathing (was 92px for the retired
two-row pill stack — every app gets ~28px of its screen back). Any app whose
content sits at the top MUST pad with this — one source of truth. */
--klyp-safe-top: calc(env(safe-area-inset-top) + 64px);
/* SHARED SAFE-BOTTOM: the reserved strip the host bottom chrome (the ~58px nav /
coin-jar / progress bar) floats over. Mirrors --klyp-safe-top. Full-bleed apps
pad their play-zone with this (via .klyp-stage) so nothing tappable hides under
the bottom strip. Additive: existing apps ignore it. */
--klyp-safe-bottom: calc(58px + env(safe-area-inset-bottom));
--cream: #FEFAF6;
--cream-2: #F5EDE4;
--coral: #E07A5F;
--coral-dark: #C4593F;
--teal: #7BA7BC;
--purple: #9B72CF;
--gold: #F2CC8F;
--green: #81B29A;
--ink: #1A1816; /* warm-black — aligned to the feed's canonical --text-primary (was #2D2A26, the deprecated ink) */
--ink-2: #6B6560;
--ink-3: #9B948D;
--line: #E8DFD5;
/* serif is RESERVED for the result-card score reveal only (.df-score) — the one editorial flourish; every
other heading/number/body is Plus Jakarta Sans, matching the feed shell (founder call 2026-07-15). */
--serif: Georgia, "Times New Roman", serif;
--sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* FRAMED-BY-THE-FEED (L15): the feed insets the app iframe below the top band and above the identity strip
(globals.css --top-h/--strip-h), so the host ALREADY clears the chrome. Re-applying the full safe bands
INSIDE the frame double-counts them → a big empty void above (and below) every app (the 64px shoved
margin:auto content down so the top void dwarfed the bottom). klyp.js tags .klyp-framed only for
the feed's