/* FuturaApp support site.
   Each app's accent variables (--accent, --accent-rgb, --accent-deep, --tile-text, --ink, --tint)
   are generated from data/apps.json by lib/palette.js and appended to this file at startup. */

/* ===== Tokens ===== */
:root {
    color-scheme: light dark;
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-hover: #f9f9fb;
    --text: #1d1d1f;
    --text-2: #48484a;
    --text-3: #6e6e73;
    --separator: rgb(60 60 67 / 0.16);
    --fill: rgb(118 118 128 / 0.12);
    --thumb: #ffffff;
    --thumb-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.04);
    --bar-line: rgb(0 0 0 / 0.08);
    --card-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px rgb(0 0 0 / 0.04);
    --highlight: rgb(255 255 255 / 0.55);
    --glow: 0.2;
    --radius: 1.125rem;
    --measure: 46rem;
    --wide: 82rem;
    --bar-h: 3.5rem;
    --gutter: 1rem;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #000000;
        --surface: #1c1c1e;
        --surface-hover: #242426;
        --text: #f5f5f7;
        --text-2: #c7c7cc;
        --text-3: #98989d;
        --separator: rgb(84 84 88 / 0.6);
        --fill: rgb(118 118 128 / 0.24);
        --thumb: #636366;
        --thumb-shadow: 0 3px 8px rgb(0 0 0 / 0.3);
        --bar-line: rgb(255 255 255 / 0.08);
        --card-shadow: 0 0 0 1px rgb(255 255 255 / 0.06);
        --highlight: rgb(255 255 255 / 0.1);
        --glow: 0.3;
    }
}

@media (min-width: 40rem) {
    :root { --gutter: 1.5rem; }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 5rem;
}

body {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.55 var(--font);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The app's colour at the top of the page. The wash starts as --top, the bar's colour, so the
   status-bar strip, the bar and the page run into each other; the glow behind the header
   fades in below the bar, so the bar has no edge while the page is at the top. */
body::before,
body::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 40rem;
    pointer-events: none;
}

body::before {
    background: linear-gradient(var(--top), rgb(var(--top-rgb) / 0) 28rem);
}

body::after {
    background: radial-gradient(ellipse 70% 72% at 50% 4rem, rgb(var(--accent-rgb) / var(--glow)), transparent 72%);
    -webkit-mask-image: linear-gradient(transparent 3.25rem, #000 11rem);
    mask-image: linear-gradient(transparent 3.25rem, #000 11rem);
}

h1, h2, h3 {
    margin: 0;
    color: var(--text);
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
    color: var(--ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; color: var(--text); }

svg { display: block; flex: none; }

:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.skip {
    position: absolute;
    z-index: 100;
    top: -5rem;
    left: var(--gutter);
    padding: 0.625rem 1rem;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.skip:focus { top: 0.625rem; }

/* ===== Top bar (translucent, Liquid Glass style) =====
   Safari 26+ ignores theme-color and paints the iPhone status-bar strip with the background
   colour of a full-width sticky bar at the top, if it is at least 75% opaque, so the bar's
   colour is what fills the top of the screen. */
.bar {
    position: sticky;
    z-index: 10;
    top: 0;
    height: var(--bar-h);
    border-bottom: 1px solid var(--bar-line);
    background-color: rgb(var(--top-rgb) / 0.9);
    view-transition-name: bar;
}

/* The blur is a separate layer under the bar. With backdrop-filter on the bar itself, Safari
   stops using the bar's colour and fills the status-bar strip with the page background;
   on a child of the bar, the blur doesn't reach the page behind it. */
.bar-glass {
    position: sticky;
    z-index: 9;
    top: 0;
    height: var(--bar-h);
    margin-bottom: calc(-1 * var(--bar-h));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: none;
}

/* Like an iOS navigation bar: no edge while the page is at the top, a hairline once content
   scrolls under it. */
@supports (animation-timeline: scroll()) {
    .bar {
        animation: bar-edge linear both;
        animation-timeline: scroll(root);
        animation-range: 0 3rem;
    }
}

@keyframes bar-edge {
    from { border-bottom-color: rgb(var(--top-rgb) / 0); }
}

.bar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(var(--wide) + 2 * var(--gutter));
    height: 100%;
    margin-inline: auto;
    padding: 0 var(--gutter);
}

.bar-app {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Segmented control linking an app's pages ===== */
.tabs {
    display: flex;
    flex: none;
    padding: 2px;
    border-radius: 999px;
    background: var(--fill);
}

.tabs a {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 2.125rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.tabs a:hover { color: var(--text); }

.tabs a[aria-current="page"] {
    background: var(--thumb);
    box-shadow: var(--thumb-shadow);
    color: var(--text);
}

@media (max-width: 23.75rem) {
    .tabs a { padding: 0 0.625rem; }
}

/* ===== App tile (initials on the app's colour, with a glass highlight) ===== */
.tile {
    --size: 1.75rem;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--size);
    height: var(--size);
    border-radius: 23%;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 55%),
        linear-gradient(145deg, var(--accent), var(--accent-deep));
    box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.3), inset 0 1px 1px rgb(255 255 255 / 0.35);
    color: var(--tile-text);
    font: 600 calc(var(--size) * 0.4) / 1 var(--font-rounded);
    letter-spacing: -0.02em;
}

.tile-hero {
    --size: 5.5rem;
    margin-bottom: 0.5rem;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.2),
        inset 0 2px 2px rgb(255 255 255 / 0.35),
        0 18px 40px -14px rgb(var(--accent-rgb) / 0.7),
        0 4px 12px rgb(0 0 0 / 0.08);
}

/* ===== Page header ===== */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 3.5rem var(--gutter) 3rem;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.eyebrow {
    margin-bottom: -0.5rem;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lead {
    max-width: 36em;
    color: var(--text-2);
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.hero-note {
    color: var(--text-3);
    font-size: 0.875rem;
    -webkit-user-select: all;
    user-select: all;
}

@media (max-width: 30rem) {
    .hero { padding-top: 2.5rem; padding-bottom: 2.25rem; }
    .tile-hero { --size: 4.75rem; }
}

/* ===== Buttons ===== */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding: 0 1.375rem;
    border-radius: 999px;
    background: var(--tint);
    box-shadow: inset 0 1px 0 var(--highlight), inset 0 0 0 1px rgb(var(--accent-rgb) / 0.2);
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.button:hover {
    box-shadow: inset 0 1px 0 var(--highlight), inset 0 0 0 1px rgb(var(--accent-rgb) / 0.4), 0 8px 22px -8px rgb(var(--accent-rgb) / 0.55);
}

.button:active { transform: scale(0.97); }

.button svg { width: 1.125rem; height: 1.125rem; }

/* ===== Content column ===== */
main { flex: 1; }

.content {
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 0 var(--gutter) 4.5rem;
}

.block + .block { margin-top: 3rem; }

.block-title {
    margin-bottom: 1rem;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ===== Grouped list (iOS inset grouped style) ===== */
.group {
    overflow: clip;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.25rem;
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
}

.row:hover { background: var(--surface-hover); }

.row svg { width: 0.875rem; height: 0.875rem; color: var(--text-3); }

.row + .row::before,
.faq + .faq::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 1.25rem;
    border-top: 1px solid var(--separator);
}

/* ===== FAQ (native <details>, so it works without JavaScript) ===== */
.faq { position: relative; }

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { background: var(--surface-hover); }

.faq summary:focus-visible { outline-offset: -3px; }

.faq:target summary { background: var(--tint); }

.chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--text-3);
    transition: transform 0.3s var(--ease);
}

.faq[open] .chevron { transform: rotate(180deg); }

.faq-answer {
    padding: 0 1.25rem 1.125rem;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }

    .faq::details-content {
        overflow-y: clip;
        block-size: 0;
        transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete;
    }

    .faq[open]::details-content { block-size: auto; }
}

/* ===== Privacy policy and terms ===== */
.doc { overflow-wrap: anywhere; }

.doc-section + .doc-section { margin-top: 2.25rem; }

.doc-section h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.012em;
}

.doc-section p,
.doc-section li { color: var(--text-2); }

.doc-section ul {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
}

.doc-section li + li { margin-top: 0.5rem; }

.doc-empty { color: var(--text-2); }

.doc-links { margin-top: 3rem; }

.doc-links + .contact { margin-top: 1.25rem; }

/* "On this page": a collapsible card on phones and tablets, a sticky sidebar on wide screens. */
.toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.toc a {
    display: block;
    color: var(--text-2);
    font-size: 0.9375rem;
    line-height: 1.35;
    text-decoration: none;
}

.toc a:hover { color: var(--ink); }

.toc-inline { margin-bottom: 2.5rem; }

.toc-inline summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.25rem;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.toc-inline summary::-webkit-details-marker { display: none; }

.toc-inline summary:focus-visible { outline-offset: -3px; }

.toc-inline[open] .chevron { transform: rotate(180deg); }

.toc-inline ol { padding-bottom: 0.5rem; }

.toc-inline a { padding: 0.5rem 1.25rem; }

.toc-side { display: none; }

.toc-side h2 {
    margin-bottom: 0.75rem;
    color: var(--text-3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.toc-side li + li { margin-top: 0.625rem; }

/* The sidebar lines up with the app name in the bar; the text column stays centred. */
@media (min-width: 79rem) {
    .doc-layout {
        display: grid;
        grid-template-columns: minmax(12rem, 1fr) minmax(0, var(--measure)) minmax(12rem, 1fr);
        gap: 3rem;
        max-width: calc(var(--wide) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .doc-layout > .content {
        grid-column: 2;
        max-width: none;
        padding-inline: 0;
    }

    .toc-side {
        position: sticky;
        top: 5.5rem;
        display: block;
        align-self: start;
        width: 100%;
        max-width: 15rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        grid-column: 1;
        grid-row: 1;
    }

    .toc-inline { display: none; }
}

/* ===== Contact card ===== */
.contact {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--card-shadow);
}

.contact-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--tint);
    color: var(--ink);
}

.contact-icon svg { width: 1.25rem; height: 1.25rem; }

.contact h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.contact p {
    color: var(--text-2);
    font-size: 0.9375rem;
}

/* ===== Footer ===== */
.foot { border-top: 1px solid var(--separator); }

.foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    max-width: calc(var(--wide) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 1.5rem var(--gutter) 2rem;
    color: var(--text-3);
    font-size: 0.8125rem;
}

.foot nav { display: flex; gap: 1.25rem; }

.foot a {
    color: var(--text-3);
    text-decoration: none;
}

.foot a:hover { color: var(--text); }

/* ===== Accessibility preferences ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bar { background-color: var(--top); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .bar { background-color: var(--top); }
    .bar-glass { display: none; }
}

@media (prefers-contrast: more) {
    :root {
        --text-2: var(--text);
        --separator: var(--text-3);
        --card-shadow: 0 0 0 1px var(--text-3);
    }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* Cross-fade between an app's Support, Privacy and Terms pages; the bar stays put. */
    @view-transition { navigation: auto; }

    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 0.25s; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ===== Print ===== */
@media print {
    .bar, .bar-glass, .skip, .toc, .hero-actions, .contact, .foot nav { display: none !important; }
    body { background: #fff; color: #000; }
    body::before, body::after { display: none; }
    .group { box-shadow: none; border: 1px solid #ccc; }
}

@media print {
    .faq::details-content { content-visibility: visible; block-size: auto; }
}

/* ===== App accents (generated from data/apps.json) ===== */
:root{--accent:#6c5ce7;--accent-rgb:108 92 231;--accent-deep:#4b40a6;--tile-text:#ffffff;--ink:#6153d2;--tint:#edebfc;--top:#e5e3f5;--top-rgb:229 227 245}
@media (prefers-color-scheme: dark){:root{--ink:#8d8af1;--tint:#2e2a4a;--top:#16122e;--top-rgb:22 18 46}}
[data-app="index"]{--accent:#6c5ce7;--accent-rgb:108 92 231;--accent-deep:#4b40a6;--tile-text:#ffffff;--ink:#6153d2;--tint:#edebfc;--top:#e5e3f5;--top-rgb:229 227 245}
@media (prefers-color-scheme: dark){[data-app="index"]{--ink:#8d8af1;--tint:#2e2a4a;--top:#16122e;--top-rgb:22 18 46}}
[data-app="zumkor"]{--accent:#3B4150;--accent-rgb:59 65 80;--accent-deep:#282c37;--tile-text:#ffffff;--ink:#3b4150;--tint:#e7e8ea;--top:#dfdfe3;--top-rgb:223 223 227}
@media (prefers-color-scheme: dark){[data-app="zumkor"]{--ink:#878b95;--tint:#232429;--top:#0c0d10;--top-rgb:12 13 16}}
[data-app="scanner"]{--accent:#5e5ce6;--accent-rgb:94 92 230;--accent-deep:#4140a5;--tile-text:#ffffff;--ink:#5654d4;--tint:#ecebfc;--top:#e3e3f5;--top-rgb:227 227 245}
@media (prefers-color-scheme: dark){[data-app="scanner"]{--ink:#838bf0;--tint:#2b2a4a;--top:#13122e;--top-rgb:19 18 46}}
[data-app="ai"]{--accent:#fdcb6e;--accent-rgb:253 203 110;--accent-deep:#b6914d;--tile-text:#1d1d1f;--ink:#856936;--tint:#fff9ee;--top:#f6f0e7;--top-rgb:246 240 231}
@media (prefers-color-scheme: dark){[data-app="ai"]{--ink:#fdcb6e;--tint:#4e4330;--top:#332916;--top-rgb:51 41 22}}
[data-app="printer"]{--accent:#00cec9;--accent-rgb:0 206 201;--accent-deep:#009390;--tile-text:#ffffff;--ink:#007774;--tint:#e0f9f9;--top:#d8f0f1;--top-rgb:216 240 241}
@media (prefers-color-scheme: dark){[data-app="printer"]{--ink:#00cec9;--tint:#164344;--top:#002928;--top-rgb:0 41 40}}
[data-app="iprint"]{--accent:#0984e3;--accent-rgb:9 132 227;--accent-deep:#045da3;--tile-text:#ffffff;--ink:#0567b4;--tint:#e1f0fc;--top:#d9e7f5;--top-rgb:217 231 245}
@media (prefers-color-scheme: dark){[data-app="iprint"]{--ink:#4f9dea;--tint:#183349;--top:#021a2d;--top-rgb:2 26 45}}
[data-app="photos"]{--accent:#e84393;--accent-rgb:232 67 147;--accent-deep:#a62d68;--tile-text:#ffffff;--ink:#b53272;--tint:#fce8f2;--top:#f3e0eb;--top-rgb:243 224 235}
@media (prefers-color-scheme: dark){[data-app="photos"]{--ink:#f06aa5;--tint:#492538;--top:#2e0d1d;--top-rgb:46 13 29}}
[data-app="clipolette"]{--accent:#a29bfe;--accent-rgb:162 155 254;--accent-deep:#736eb6;--tile-text:#ffffff;--ink:#6762a4;--tint:#f4f3ff;--top:#ebeaf8;--top-rgb:235 234 248}
@media (prefers-color-scheme: dark){[data-app="clipolette"]{--ink:#a29bfe;--tint:#39384f;--top:#201f33;--top-rgb:32 31 51}}
[data-app="qrysta"]{--accent:#00b894;--accent-rgb:0 184 148;--accent-deep:#008369;--tile-text:#ffffff;--ink:#00785f;--tint:#e0f6f2;--top:#d8eeeb;--top-rgb:216 238 235}
@media (prefers-color-scheme: dark){[data-app="qrysta"]{--ink:#00b894;--tint:#163e38;--top:#00251e;--top-rgb:0 37 30}}
[data-app="reachia"]{--accent:#6c5ce7;--accent-rgb:108 92 231;--accent-deep:#4b40a6;--tile-text:#ffffff;--ink:#6153d2;--tint:#edebfc;--top:#e5e3f5;--top-rgb:229 227 245}
@media (prefers-color-scheme: dark){[data-app="reachia"]{--ink:#8d8af1;--tint:#2e2a4a;--top:#16122e;--top-rgb:22 18 46}}
[data-app="celebrity"]{--accent:#fd79a8;--accent-rgb:253 121 168;--accent-deep:#b65577;--tile-text:#ffffff;--ink:#a34c6b;--tint:#ffeff5;--top:#f6e6ee;--top-rgb:246 230 238}
@media (prefers-color-scheme: dark){[data-app="celebrity"]{--ink:#fd79a8;--tint:#4e303c;--top:#331822;--top-rgb:51 24 34}}
[data-app="fax"]{--accent:#636e72;--accent-rgb:99 110 114;--accent-deep:#454d50;--tile-text:#ffffff;--ink:#5d686c;--tint:#eceeee;--top:#e3e5e7;--top-rgb:227 229 231}
@media (prefers-color-scheme: dark){[data-app="fax"]{--ink:#8e9699;--tint:#2c2e30;--top:#141617;--top-rgb:20 22 23}}
[data-app="insight"]{--accent:#e17055;--accent-rgb:225 112 85;--accent-deep:#a14e3b;--tile-text:#ffffff;--ink:#a4503c;--tint:#fbeeeb;--top:#f3e5e4;--top-rgb:243 229 228}
@media (prefers-color-scheme: dark){[data-app="insight"]{--ink:#e68168;--tint:#472e2a;--top:#2d1611;--top-rgb:45 22 17}}
[data-app="physical-scanner"]{--accent:#2d3436;--accent-rgb:45 52 54;--accent-deep:#1d2224;--tile-text:#ffffff;--ink:#2d3436;--tint:#e6e7e7;--top:#dddee0;--top-rgb:221 222 224}
@media (prefers-color-scheme: dark){[data-app="physical-scanner"]{--ink:#84898a;--tint:#202123;--top:#090a0b;--top-rgb:9 10 11}}
[data-app="combine-pdf"]{--accent:#d63031;--accent-rgb:214 48 49;--accent-deep:#991f20;--tile-text:#ffffff;--ink:#bf2a2b;--tint:#fae6e6;--top:#f1dddf;--top-rgb:241 221 223}
@media (prefers-color-scheme: dark){[data-app="combine-pdf"]{--ink:#e66c63;--tint:#452022;--top:#2b0a0a;--top-rgb:43 10 10}}
[data-app="find-airpords"]{--accent:#0984e3;--accent-rgb:9 132 227;--accent-deep:#045da3;--tile-text:#ffffff;--ink:#0567b4;--tint:#e1f0fc;--top:#d9e7f5;--top-rgb:217 231 245}
@media (prefers-color-scheme: dark){[data-app="find-airpords"]{--ink:#4f9dea;--tint:#183349;--top:#021a2d;--top-rgb:2 26 45}}
[data-app="stocks-news"]{--accent:#00b894;--accent-rgb:0 184 148;--accent-deep:#008369;--tile-text:#ffffff;--ink:#00785f;--tint:#e0f6f2;--top:#d8eeeb;--top-rgb:216 238 235}
@media (prefers-color-scheme: dark){[data-app="stocks-news"]{--ink:#00b894;--tint:#163e38;--top:#00251e;--top-rgb:0 37 30}}
[data-app="blipkey"]{--accent:#C36F12;--accent-rgb:195 111 18;--accent-deep:#8b4e09;--tile-text:#ffffff;--ink:#9a570c;--tint:#f8eee3;--top:#efe5dc;--top-rgb:239 229 220}
@media (prefers-color-scheme: dark){[data-app="blipkey"]{--ink:#d0894c;--tint:#412e1b;--top:#271604;--top-rgb:39 22 4}}
[data-app="movies-tv-shows-recommender"]{--accent:#9333ea;--accent-rgb:147 51 234;--accent-deep:#6822a8;--tile-text:#ffffff;--ink:#8b30de;--tint:#f2e7fc;--top:#e9def5;--top-rgb:233 222 245}
@media (prefers-color-scheme: dark){[data-app="movies-tv-shows-recommender"]{--ink:#ae76f4;--tint:#36214b;--top:#1d0a2f;--top-rgb:29 10 47}}
[data-app="dating-apps-opening-lines"]{--accent:#fd79a8;--accent-rgb:253 121 168;--accent-deep:#b65577;--tile-text:#ffffff;--ink:#a34c6b;--tint:#ffeff5;--top:#f6e6ee;--top-rgb:246 230 238}
@media (prefers-color-scheme: dark){[data-app="dating-apps-opening-lines"]{--ink:#fd79a8;--tint:#4e303c;--top:#331822;--top-rgb:51 24 34}}
[data-app="ignitai"]{--accent:#6c5ce7;--accent-rgb:108 92 231;--accent-deep:#4b40a6;--tile-text:#ffffff;--ink:#6153d2;--tint:#edebfc;--top:#e5e3f5;--top-rgb:229 227 245}
@media (prefers-color-scheme: dark){[data-app="ignitai"]{--ink:#8d8af1;--tint:#2e2a4a;--top:#16122e;--top-rgb:22 18 46}}
[data-app="flunqero"]{--accent:#00cec9;--accent-rgb:0 206 201;--accent-deep:#009390;--tile-text:#ffffff;--ink:#007774;--tint:#e0f9f9;--top:#d8f0f1;--top-rgb:216 240 241}
@media (prefers-color-scheme: dark){[data-app="flunqero"]{--ink:#00cec9;--tint:#164344;--top:#002928;--top-rgb:0 41 40}}
[data-app="dictanta"]{--accent:#FF7D5E;--accent-rgb:255 125 94;--accent-deep:#b75841;--tile-text:#ffffff;--ink:#a8503b;--tint:#ffefec;--top:#f6e7e5;--top-rgb:246 231 229}
@media (prefers-color-scheme: dark){[data-app="dictanta"]{--ink:#ff7d5e;--tint:#4e312c;--top:#331913;--top-rgb:51 25 19}}