/*! neat-annotations | https://github.com/syabro/neat-annotations | MIT (c) 2026 Maxim Syabro
   Vendored from upstream commit 12fabf0f5b2e13b9ce884f5b0d9442c1c75a594e on 09-19-2026.
   Body is byte-identical to upstream; only this banner was rewritten (ASCII). build.js
   re-attaches this banner to the compiled stylesheet, since --minify drops every comment.
   Do not edit - re-vendor. License: neat-annotations.LICENSE
   Labels look best with the Shantell Sans font (falls back to system cursive). */

.ann {
  --ann-color: light-dark(#898584, #b8b8bd);
  --ann-mark: light-dark(
    color-mix(in oklch, var(--ann-color) 10%, transparent),
    oklch(from var(--ann-color) l calc(c * 1.35) h / 24%)
  );
  --ann-font: 'Shantell Sans', cursive;
  --ann-target-gap: 5px;
  --ann-label-gap: 6px;
  --ann-lower-label-gap: -4px;
  --ann-label-max-width: 150px;
  --ann-arrow-x: 0px;
  --ann-text-x: 0px;
  --ann-arrow-y: 0px;
  --ann-text-y: 5px;
  --ann-rotate: -4deg;
  position: relative;
  display: inline-block;
  overflow: visible;
  line-height: 1.15;
  border-radius: 3px;
  background: var(--ann-mark);
  box-shadow:
    -0.3em 0 0 0 var(--ann-mark),
    0.3em 0 0 0 var(--ann-mark);
}

.ann::after {
  content: attr(data-note);
  position: absolute;
  z-index: 4;
  width: max-content;
  max-width: var(--ann-label-max-width);
  transform: rotate(var(--ann-rotate));
  font-family: var(--ann-font);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ann-color);
  opacity: .9;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.ann::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 46px;
  height: 38px;
  transform-origin: 50% 50%;
  -webkit-mask: var(--_ann-arrow-mask) center / contain no-repeat;
  mask: var(--_ann-arrow-mask) center / contain no-repeat;
  background: var(--ann-color);
  opacity: .9;
  pointer-events: none;
}

.ann:not([data-note])::before,
.ann:not([data-note])::after,
.ann[data-note=""]::before,
.ann[data-note=""]::after { display: none; }

/* Amber text needs darker contrast, but the highlight uses bright yellow (#ffb000)
   to avoid a muddy background. color-mix with transparent creates an even marker tint. */
.ann-amber {
  --ann-color: light-dark(#b8751a, #f0b45a);
  --ann-mark: light-dark(
    color-mix(in oklch, #ffb000 14%, transparent),
    color-mix(in oklch, #ffb000 22%, transparent)
  );
}
.ann-blue { --ann-color: light-dark(#3b72c4, #78a9ef); }
.ann-green { --ann-color: light-dark(#2f8f5b, #67c792); }
.ann-red { --ann-color: light-dark(#c45a38, #ee8a6e); }
.ann-purple { --ann-color: light-dark(#8657c8, #b998ef); }
.ann-rainbow {
  --ann-color: oklch(0.65 0.28 var(--ann-rainbow-hue, 350deg));
}
.ann-no-mark { --ann-mark: transparent; }

@property --ann-rainbow-hue {
  syntax: "<angle>";
  inherits: false;
  initial-value: 350deg;
}

@keyframes ann-rainbow-cycle { to { --ann-rainbow-hue: 710deg; } }
@media (prefers-reduced-motion: no-preference) {
  .ann-rainbow { animation: ann-rainbow-cycle 3s linear infinite; }
}

@media (forced-colors: active) {
  .ann::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

.ann-n::before {
  left: calc(50% - 23px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 4px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 35 C22 26 22 15 23 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 10 L23 3 L29 10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-n::after { left: calc(50% + var(--ann-text-x)); top: calc(100% + var(--ann-target-gap) + 31px + var(--ann-lower-label-gap) + var(--ann-text-y)); transform: translateX(-50%) rotate(var(--ann-rotate)); }

.ann-ne::before {
  left: calc(50% - 40px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 6px + var(--ann-arrow-y));
  transform: translateX(-10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 32 C16 30 28 18 40 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M30 10 L40 6 L36 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-ne::after { left: calc(50% - 34px + var(--ann-text-x)); top: calc(100% + var(--ann-target-gap) + 26px + var(--ann-lower-label-gap) + var(--ann-text-y)); transform: translateX(-60%) rotate(var(--ann-rotate)); }

.ann-e::before {
  left: calc(-1 * var(--ann-target-gap) - 43px + var(--ann-arrow-x));
  top: calc(50% - 19px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19 C15 18 31 18 43 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 13 L43 19 L36 25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-e::after { right: calc(100% + var(--ann-target-gap) + 39px + var(--ann-label-gap) - var(--ann-text-x)); top: calc(50% - 5px + var(--ann-text-y)); transform: translateY(-50%) rotate(var(--ann-rotate)); }

.ann-se::before {
  left: calc(50% - 40px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 32px + var(--ann-arrow-y));
  transform: translateX(-10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6 C16 8 28 20 40 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M36 22 L40 32 L30 28' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-se::after { left: calc(50% - 34px + var(--ann-text-x)); bottom: calc(100% + var(--ann-target-gap) + 26px + var(--ann-label-gap) - var(--ann-text-y)); transform: translateX(-60%) rotate(var(--ann-rotate)); }

.ann-s::before {
  left: calc(50% - 23px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 35px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 4 C22 13 22 24 23 35' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M17 29 L23 36 L29 29' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-s::after { left: calc(50% + var(--ann-text-x)); bottom: calc(100% + var(--ann-target-gap) + 31px + var(--ann-label-gap) - var(--ann-text-y)); transform: translateX(-50%) rotate(var(--ann-rotate)); }

.ann-sw::before {
  left: calc(50% - 6px + var(--ann-arrow-x));
  top: calc(-1 * var(--ann-target-gap) - 32px + var(--ann-arrow-y));
  transform: translateX(10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 6 C30 8 18 20 6 32' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 22 L6 32 L16 28' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-sw::after { left: calc(50% + 34px + var(--ann-text-x)); bottom: calc(100% + var(--ann-target-gap) + 26px + var(--ann-label-gap) - var(--ann-text-y)); transform: translateX(-40%) rotate(var(--ann-rotate)); }

.ann-w::before {
  left: calc(100% + var(--ann-target-gap) - 3px + var(--ann-arrow-x));
  top: calc(50% - 19px + var(--ann-arrow-y));
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43 19 C32 18 15 18 3 19' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10 13 L3 19 L10 25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-w::after { left: calc(100% + var(--ann-target-gap) + 40px + var(--ann-label-gap) + var(--ann-text-x)); top: calc(50% - 5px + var(--ann-text-y)); transform: translateY(-50%) rotate(var(--ann-rotate)); }

.ann-nw::before {
  left: calc(50% - 6px + var(--ann-arrow-x));
  top: calc(100% + var(--ann-target-gap) - 6px + var(--ann-arrow-y));
  transform: translateX(10%);
  --_ann-arrow-mask: url("data:image/svg+xml,%3Csvg width='46' height='38' viewBox='0 0 46 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 32 C30 30 18 18 6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16 10 L6 6 L10 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ann-nw::after { left: calc(50% + 34px + var(--ann-text-x)); top: calc(100% + var(--ann-target-gap) + 26px + var(--ann-lower-label-gap) + var(--ann-text-y)); transform: translateX(-40%) rotate(var(--ann-rotate)); }

html {
    box-sizing: border-box;
}

/* Global CLS guard: paired with width/height attributes on <img> so the HTML
   height never stretches a width-constrained image (global RJL rule). */
img {
    height: auto;
}

:root {
    --brand-red: #CB0000;
    --brand-red-light: #ff4d4d;
    --brand-accent: #FF002A;
    --bg-base: #ffffff;
    --bg-soft: #f6f8fb;
    --bg-soft-alt: #eef3f9;
    --border-soft: #e2e8f0;
    /* New colorful diagonal gradient (TL->BR) using softened brand palette */
    --bg-gradient: linear-gradient(135deg,
        #fff5f5 0%,           /* very light red tint */
        #ffe8cc 22%,          /* warm light gold */
        #ffd84d 38%,          /* brand-inspired yellow accent */
        #ffb3c1 55%,          /* soft pink (transition from yellow to red family) */
        #f597e2 72%,          /* pink -> magenta bridge */
        #e4ccff 88%,          /* light violet (ties to outline/purple) */
        #ffffff 100%          /* fade to white for readability bottom-right */
    );
}

*, *:before, *:after {
    box-sizing: inherit;
}

.group:after {
    content: "";
    display: table;
    clear: both;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: var(--bg-gradient);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Primary visible page heading */
.site-title {
        font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.55rem);
        text-align: center;
        font-weight: 800;
        line-height: 1.1;
        margin: 8px 12px 30px;
        letter-spacing: .5px;
        position: relative;
        color: var(--brand-red);
        background: linear-gradient(90deg,var(--brand-red) 0%, var(--brand-red-light) 60%, var(--brand-accent) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent; /* fallback handled by @supports below */
        text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .site-title { color: var(--brand-red); }
}

.site-title:after {
        content: "";
        display: block;
        width: 140px;
        height: 5px;
        margin: 14px auto 0;
        border-radius: 3px;
        background: linear-gradient(90deg,var(--brand-red) 0%, var(--brand-accent) 100%);
        box-shadow: 0 2px 6px -1px rgba(203,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.4) inset;
}

/* Responsive top logo image */
#logoImage {
        display: block;
        width: 100%;          /* Fill available width but constrain by max-width */
        max-width: 600px;      /* Original intended size */
        height: auto;
        margin: 0 auto 8px;
        image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 640px) {
    #logoImage { max-width: 92%; margin: 0 auto 4px; }
}

@media only screen and (max-width: 600px) {
    .site-title { margin: 0 8px 18px; font-size: 1.55rem; }
}

.logo {
    display: block;
    width: 282px;
    height: 202px;
    background-image: url(/fakenewsmaker-logo.png);
    text-indent: -9999px;
    margin: 0 auto;
    background-size: contain;
	background-repeat: no-repeat;
}

.container {
    width: 100%;
    max-width: 1700px;
    margin: 15px auto 20px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 4px 18px -6px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.08);
    padding: 26px 46px 34px;
}

.intro {
    width: 30%;
    padding-right: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

/* .intro__text previously empty; removed for cleanliness */

.build-form {
    text-align: left;
}

.build-form__item {
    display: inline-block;
    width: 100%;
    /* margin-bottom: 10px; */
}

.build-form__label {
    font-weight: 700;
    display: block;
    font-size: 110%;
    margin-bottom: 4px;
}

.build-form input[type="text"] {
    width: 100%;
    margin-bottom: 5px;
    padding: 10px;
}

.build-form fieldset {
    border: none;
    padding: 0;
    margin-bottom: 10px;
}

.build-form__radio {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 16px;
}

.select {
    max-width: 400px;
    width: 100%;
    padding: 10px;
}

.disclaimer {
    font-size: 13px;
}

.main {
    display: inline-block;
    width: 70%;
    vertical-align:top;
    text-align: center;
}

.main {
    display: inline-block;
    width: 70%;
    vertical-align:top;
    text-align: center;
}

.byon-canvas {
    width: 100% !important;
    height: auto;
}

.byon-canvas[data-ratio="square"] {
    max-width: 640px;
}


.byon-canvas[data-ratio="portrait"] {
    max-width: 447px;
}

/* .share-row had no declarations; placeholder removed */

.button {
    padding: 12px;
    border-radius: 4px;
    background: #222;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    font-size: 115%;
    margin: 10px 5px;
    box-shadow: inset 0 -4px 12px 2px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    vertical-align: top;
    border: 0;
    font-family: 'Roboto', sans-serif;
}

.button:hover {
    box-shadow: inset 0 4px 12px 2px rgba(0, 0, 0, 0.1);
}

.button--download {
    background: #002EAD;
    color: #FFFFFF;
}

.upload-response:not(:empty) {
    margin-bottom: 10px;
}


footer {
    padding: 12px;
    color: #fff;
    font-size: 120%;
    background-color: #CB0000;
    border-radius: 4px;
    box-shadow: inset 0 -4px 12px 2px rgba(0, 0, 0, 0.2);
}

footer a {
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 980px) {
    .intro {
        width: 35%;
        padding: 20px;
    }


    .intro__text {
        font-size: 90%;
    }

    .main {
        width: 65%;
        padding-right: 20px;
    }

    .container { padding: 24px 36px 30px; }

    .logo {
        width: 150px;
        height: 135px;
    }

}

@media only screen and (max-width: 800px) {
    .container {
        margin: 10px auto;
    padding: 20px 24px 26px;
    }

    .intro {
        width: 100%;
        padding: 10px;
    }

    .intro__text {
        margin-top: 0;
    }

    .logo {
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 100px;
        height: 90px;
    }

    .main {
        width: 100%;
        padding: 0;
    }

    .build-form__item {
        width: 48%;
    }

    .build-form__item:first-of-type {
        margin-right: 4%;
    }

    .button {
        padding: 8px;
        font-size: 100%;
        margin: 5px;
    }

    footer {
        margin: 5px;
        padding: 8px;
        font-size: 90%;
        text-align: center;
    }
}


@media only screen and (max-width: 400px) {

    .build-form__item {
        width: 100%;
    }

    .build-form__item:first-of-type {
        margin-right: 0;
    }

    .container { padding: 18px 18px 22px; }
}

/* ------------------------------------------------------------------ fonts */
/* Shantell Sans 400 - the handwritten face the vendored neat-annotations labels ask for.
   Without it the labels fall back to `cursive`, which is Comic Sans on Windows. Latin
   subset only, swap, decorative, deliberately NOT preloaded. The woff2 is copied from
   @fontsource/shantell-sans into dist/fonts/ by buildFonts() in build.js. */
@font-face {
    font-family: "Shantell Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/shantell-sans-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------ annotations (neat-annotations) */
/* src/vendor/neat-annotations.css is concatenated AHEAD of this file by build.js, so
   everything below overrides it by source order. Arrows and labels are absolutely
   positioned outside their target and reserve no space, so they only draw where the
   layout has room: lg (64rem) and up. Below that the marker highlight alone remains, and
   whatever a note says is also in the page's own visible copy. Never edit the vendored
   file - re-vendor it with /rjl-add-annotations. */
.ann {
    --ann-label-max-width: 170px;
}
.ann::before,
.ann::after {
    display: none;
}
@media (min-width: 64rem) {
    .ann[data-note]::before,
    .ann[data-note]::after {
        display: block;
    }
}

/* The build form lives in the 30%-wide .intro column. An ann-w label sits ~51px past the
   target and can be 120px wide, which only clears the column from about 80rem up - below
   that it would run over the canvas in .main. Same specificity as the rule above, so this
   has to stay after it. */
.fnm-form-ann {
    --ann-label-max-width: 120px;
}
@media (max-width: 79.99rem) {
    .fnm-form-ann[data-note]::before,
    .fnm-form-ann[data-note]::after {
        display: none;
    }
}

/* Print: arrows and labels off - they have no layout box and land on top of the copy. */
@media print {
    .ann::before,
    .ann::after {
        display: none;
    }
}