/* p176: story text fonts (self-hosted from Google Fonts, OFL). Subsets: latin, latin-ext, greek, cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/caveat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/caveat-latin.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;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/comfortaa-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/comfortaa-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/comfortaa-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/comfortaa-latin.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;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/story/noto-serif-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/story/noto-serif-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/story/noto-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/story/noto-serif-latin.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;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/roboto-condensed-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/roboto-condensed-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/roboto-condensed-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/story/roboto-condensed-latin.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;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/story/roboto-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/story/roboto-mono-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/story/roboto-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/story/roboto-mono-latin.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;
}

/* ---- p176: Stories phase 1 ---- */

/* story fonts (labels and text stories). Greek letters missing from Caveat fall back to Comfortaa. */
.zk-sf-classic { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-weight: 800; }
.zk-sf-strong { font-family: 'Roboto Condensed', Inter, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.zk-sf-serif { font-family: 'Noto Serif', Georgia, serif; font-weight: 700; font-style: italic; }
.zk-sf-mono { font-family: 'Roboto Mono', ui-monospace, monospace; font-weight: 600; letter-spacing: -.01em; }
.zk-sf-rounded { font-family: Comfortaa, Inter, sans-serif; font-weight: 700; }
.zk-sf-hand { font-family: Caveat, Comfortaa, cursive; font-weight: 700; font-size: 1.28em; line-height: 1.08; }

/* label colours: --zk-c is the colour, --zk-on the text colour on a box of that colour */
.zk-lc-white { --zk-c: #ffffff; --zk-on: #111; }
.zk-lc-black { --zk-c: #111111; --zk-on: #fff; }
.zk-lc-yellow { --zk-c: #fde047; --zk-on: #111; }
.zk-lc-pink { --zk-c: #f472b6; --zk-on: #111; }
.zk-lc-cyan { --zk-c: #22d3ee; --zk-on: #111; }
.zk-lc-red { --zk-c: #ef4444; --zk-on: #fff; }
.zk-lc-orange { --zk-c: #fb923c; --zk-on: #111; }
.zk-lc-green { --zk-c: #4ade80; --zk-on: #111; }
.zk-lc-blue { --zk-c: #3b82f6; --zk-on: #fff; }
.zk-lc-violet { --zk-c: #8b5cf6; --zk-on: #fff; }

/* text styles */
.zk-ts-in { overflow-wrap: break-word; word-break: break-word; }
.zk-ts-plain .zk-ts-in { color: var(--zk-c, #fff); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.zk-lc-black.zk-ts-plain .zk-ts-in { text-shadow: 0 1px 6px rgba(255,255,255,.6); }
.zk-ts-glow .zk-ts-in { color: #fff; text-shadow: 0 0 .06em #fff, 0 0 .22em var(--zk-c, #fff), 0 0 .5em var(--zk-c, #fff), 0 0 1em var(--zk-c, #fff); }
.zk-lc-white.zk-ts-glow .zk-ts-in { text-shadow: 0 0 .1em #fff, 0 0 .35em #c4b5fd, 0 0 .8em #a78bfa; }
.zk-ts-box .zk-ts-in, .zk-ts-soft .zk-ts-in { padding: .1em .36em; border-radius: .3em; line-height: 1.5; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.zk-ts-box .zk-ts-in { background: var(--zk-c, #fff); color: var(--zk-on, #111); }
.zk-ts-soft .zk-ts-in { background: rgba(0,0,0,.55); color: var(--zk-c, #fff); }
.zk-lc-black.zk-ts-soft .zk-ts-in { background: rgba(255,255,255,.78); }

/* photo/video filters */
.zk-flt-vivid { filter: saturate(1.45) contrast(1.08); }
.zk-flt-warm { filter: sepia(.25) saturate(1.35) hue-rotate(-10deg) brightness(1.04); }
.zk-flt-cool { filter: saturate(1.05) hue-rotate(14deg) brightness(1.04) contrast(1.06); }
.zk-flt-mono { filter: grayscale(1) contrast(1.1); }
.zk-flt-vintage { filter: sepia(.45) contrast(.9) brightness(1.07) saturate(1.2); }
.zk-flt-fade { filter: contrast(.8) brightness(1.13) saturate(.78); }
.zk-flt-drama { filter: contrast(1.35) saturate(1.18) brightness(.9); }
.zk-flt-noir { filter: grayscale(1) contrast(1.55) brightness(.84); }

/* studio: font chips, option rows */
.zk-s6-row { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.zk-s6-row::-webkit-scrollbar { display: none; }
.zk-s6-chip { flex: none; min-height: 40px; padding: 0 .9rem; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-size: .95rem; border: 1px solid rgba(255,255,255,.1); transition: background .15s, border-color .15s; }
.zk-s6-chip:hover { background: rgba(255,255,255,.14); }
.zk-s6-chip.is-on { background: #fff; color: #111; border-color: #fff; }
.zk-s6-ic { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.1); }
.zk-s6-ic.is-on { background: #fff; color: #111; }
.zk-s6-ic svg { width: 20px; height: 20px; }
.zk-s6-dot { flex: none; width: 30px; height: 30px; border-radius: 999px; border: 2px solid rgba(255,255,255,.25); }
.zk-s6-dot.is-on { box-shadow: 0 0 0 2px #18181b, 0 0 0 4px #fff; border-color: transparent; }
.zk-s6-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.45); margin-bottom: .35rem; }

/* studio: drawing toolbar (sits on the canvas while drawing) */
.zk-dr-bar { position: absolute; inset: 8px 8px auto 8px; z-index: 45; display: flex; flex-direction: column; gap: 8px; }
.zk-dr-top { display: flex; align-items: center; gap: 6px; }
.zk-dr-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14); }
.zk-dr-btn svg { width: 20px; height: 20px; }
.zk-dr-btn.is-on { background: #fff; color: #111; }
.zk-dr-btn:disabled { opacity: .35; }
.zk-dr-done { margin-left: auto; min-height: 40px; padding: 0 1.1rem; border-radius: 999px; background: #fff; color: #111; font-weight: 700; font-size: .875rem; }
.zk-dr-colors { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.zk-dr-colors::-webkit-scrollbar { display: none; }
.zk-dr-size { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 45; height: 180px; width: 40px; display: flex; align-items: center; justify-content: center; }
.zk-dr-size input { writing-mode: vertical-lr; direction: rtl; width: 28px; height: 170px; accent-color: #fff; }
.zk-dr-dot { position: absolute; right: -38px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.4); pointer-events: none; }

/* studio: filter strip */
.zk-flt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.zk-flt-item { display: flex; flex-direction: column; gap: .3rem; align-items: center; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); }
.zk-flt-item .zk-flt-th { width: 100%; aspect-ratio: 3 / 4; border-radius: .8rem; overflow: hidden; background: #27272a; border: 2px solid transparent; }
.zk-flt-item .zk-flt-th img, .zk-flt-item .zk-flt-th video { width: 100%; height: 100%; object-fit: cover; }
.zk-flt-item.is-on { color: #fff; }
.zk-flt-item.is-on .zk-flt-th { border-color: #fff; }

/* studio: switches in the audience panel */
.zk-s6-sw { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.zk-s6-opt { display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left; padding: .75rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); }
.zk-s6-opt.is-on { border-color: #fff; background: rgba(255,255,255,.1); }
.zk-s6-opt .zk-s6-oi { flex: none; width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.zk-cf-badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; background: #22c55e; color: #fff; font-size: 10.5px; font-weight: 700; padding: .1rem .45rem; line-height: 1.4; }
.zk-cf-badge svg { width: 11px; height: 11px; }

/* studio: preview mode progress bar */
.zk-pv-bar { position: absolute; inset: 8px 8px auto 8px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; z-index: 45; }
.zk-pv-bar > i { display: block; height: 100%; width: 0; background: #fff; animation: zk-pv 5s linear infinite; }
@keyframes zk-pv { to { width: 100%; } }

/* viewer: owner insights */
.zk-ins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.zk-ins > div { border-radius: .9rem; background: rgba(255,255,255,.06); padding: .55rem .6rem; }
.zk-ins b { display: block; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.zk-ins span { display: block; font-size: 11px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* story bar: green ring when a story is only for Close Friends */
.zinkly-story-ring.zk-ring-cf::before { background: conic-gradient(from 0deg, #22c55e, #4ade80, #16a34a, #22c55e); }
.zinkly-story-ring.zk-ring-cf.zinkly-story-ring--viewed::before { background: conic-gradient(from 0deg, #166534, #15803d, #166534); animation: none; }

/* in the side panel, chip and colour rows wrap instead of scrolling sideways (mouse users can't swipe) */
@media (min-width: 640px) { #zkStoryStudio section .zk-s6-row { flex-wrap: wrap; overflow: visible; } }
/* the main button of a panel stays visible at the bottom of the sheet */
.zk-s6-stick { position: sticky; bottom: -16px; z-index: 5; margin: 0 -16px -16px; padding: 12px 16px 16px; background: linear-gradient(to top, #18181b 75%, rgba(24,24,27,0)); }

/* p179: in light mode the gap between photo and story ring is white, not black */
html.light .zinkly-story-ring > * { border-color: #fff !important; }