/* Ketzev v9 (the founder's Claude Design file): the page is styled inline from the design's values; this file holds
   what inline styles can't: the fonts, the animations, dark mode's palette, hover states and a few resets. */
/* The app's own fonts, served from its own address and preloaded by the page (D-157): Inter for Latin, Heebo for
   Hebrew, both variable (every weight in one file), both under the SIL Open Font License (public/ui-fonts). They used
   to come from Google Fonts, a stylesheet that held up the first paint. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/ui-fonts/inter-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: "Inter"; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/ui-fonts/inter-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: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/ui-fonts/heebo-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/ui-fonts/heebo-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; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--kz-c-FFFFFF, #FFFFFF);
  color: var(--kz-c-1C1C1C, #1C1C1C);
  font-family: Inter, Heebo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
#root { height: 100%; }
a { color: var(--kz-c-1C1C1C, #1C1C1C); }
a:hover { color: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.8); }
input, textarea, select { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.4); }

/* The founder's blue accent (D-127): white text on it passes 4.5:1 in light and dark; its text colour is lighter in dark mode. */
:root { --kz-accent: #2563EB; --kz-accent-hover: #1D4ED8; --kz-accent-text: #2563EB; --kz-accent-rgb: 37, 99, 235; }

/* Buttons that look like the design's own pieces, not like buttons. */
.kz-plain { appearance: none; border: none; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.kz-plain:focus-visible, .kz-btn:focus-visible, .kz-focus:focus-visible { outline: 2px solid var(--kz-accent, #2563EB); outline-offset: 2px; }
/* Touch screens: every control a finger can hit is at least 44 px across, its look unchanged (D-157). An invisible
   layer centred on it takes the tap; nothing is set on a control that places itself (an inline style wins). */
@media (pointer: coarse) {
  :where(.kz-plain, .kz-btn, .kz-hit) { position: relative; }
  :where(.kz-plain, .kz-btn, .kz-hit)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  /* A list of links one under another: each line is a finger tall. */
  .ion-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* Fields a finger tall; colour swatches and side-by-side icon buttons 44 px apart, each touch layer its own. */
  .kz-input { min-height: 44px; }
  :root { --kz-swatch-gap: 20px; --kz-tap-gap: 14px; }
}
/* The video's controls in the editor (editor/Preview.tsx) by their bar's own width: the volume and loop go first, then
   the frame steps, so no button is pushed out of sight; a touch screen's wider gaps need more room (D-157). */
.kz-pv-bar { container-type: inline-size; }
@container (max-width: 375px) { .kz-pv-wide { display: none !important; } }
@container (max-width: 265px) { .kz-pv-step { display: none !important; } }
@media (pointer: coarse) {
  @container (max-width: 475px) { .kz-pv-wide { display: none !important; } }
  @container (max-width: 345px) { .kz-pv-step { display: none !important; } }
}
.kz-input:focus { box-shadow: inset 0 0 0 1.5px var(--kz-accent, #2563EB) !important; }

/* Hover states (the design's style-hover). */
.kz-h-i5:hover { background: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.05) !important; }
.kz-h-i6:hover { background: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.06) !important; }
.kz-h-i10:hover { background: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.1) !important; }
.kz-h-e5:hover { background: rgba(var(--kz-ink-rgb, 10, 10, 10), 0.05) !important; }
.kz-h-f4:hover { background: var(--kz-c-F4F4F5, #F4F4F5) !important; }
.kz-h-fa:hover { background: var(--kz-c-FAFAFA, #FAFAFA) !important; }
.kz-h-p12:hover { background: rgba(var(--kz-paper-rgb, 255, 255, 255), 0.12) !important; }
.kz-h-ring:hover { box-shadow: inset 0 0 0 1px rgba(var(--kz-ink-rgb, 28, 28, 28), 0.4) !important; }
.kz-active:active { transform: scale(0.94); }

/* Scroll bars (the founder: "more modern"): a thin rounded thumb on no track, no arrows, a little thicker and darker
   under the pointer; ink-coloured, so dark mode gets a light thumb. Chrome, Edge and Safari read the ::-webkit- rules;
   Firefox only takes a colour and "thin" (setting those in Chrome would switch its ::-webkit- rules off). */
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { border: 4px solid transparent; background-clip: padding-box; border-radius: 999px; background-color: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.2); min-height: 40px; }
::-webkit-scrollbar-thumb:hover { border-width: 3px; background-color: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.36); }
::-webkit-scrollbar-thumb:active { border-width: 3px; background-color: var(--kz-accent, #2563EB); }
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: rgba(var(--kz-ink-rgb, 28, 28, 28), 0.25) transparent; }
}
.kz-noscroll { scrollbar-width: none; }
.kz-noscroll::-webkit-scrollbar { display: none; }
.kz-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kz-range { width: 100%; accent-color: var(--kz-accent, #2563EB); }

@keyframes kzspin { to { transform: rotate(360deg); } }
@keyframes kzui-sheen { 0% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
@keyframes kzui-dot { 0%, 100% { opacity: 0.18; transform: scale(0.7); } 45% { opacity: 1; transform: scale(1); } }
@keyframes kzui-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes kzui-in { 0% { opacity: 0; transform: translateY(3px); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes kzui-spin { to { transform: rotate(360deg); } }
@keyframes kz-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kz-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Shorts' drawer on a phone (D-146) comes in from the side the page reads from (--kz-drawer-from: -32px or 32px). */
@keyframes kz-drawer-in { from { opacity: 0; transform: translateX(var(--kz-drawer-from, -32px)); } to { opacity: 1; transform: none; } }

/* Dark mode (the design's KZTheme palette): every colour is a variable with its light value as the fallback. */
:root[data-kz-theme="dark"] {
  color-scheme: dark;
  --kz-accent-text: #86AFFD; --kz-accent-rgb: 59, 130, 246;
  --kz-ink-rgb: 236, 236, 240; --kz-paper-rgb: 17, 17, 20; --kz-shadow-rgb: 0, 0, 0;
  --kz-page: #09090B; --kz-elev: #1E1E24; --kz-glass: rgba(26, 26, 31, 0.72); --kz-island: #1E1E24; --kz-island-ring: rgba(255, 255, 255, 0.1);
  --kz-c-007AFF: #5C9FFE; --kz-c-047857: #6CC9A4; --kz-c-059669: #4FC494; --kz-c-EAEAEC: #24242A; --kz-c-E4E4E7: #27272D; --kz-c-0A0A0A: #F2F2F4;
  --kz-c-10B981: #14BA82; --kz-c-121212: #EEEEEE; --kz-c-141414: #EBEBEB; --kz-c-18181B: #E6E6EA; --kz-c-1C1C1C: #ECECF0; --kz-c-1D4ED8: #91B4FD;
  --kz-c-1E3A8A: #A4BFFB; --kz-c-2563EB: #86AFFD; --kz-c-34C759: #34C759; --kz-c-3F3F46: #C6C6CE; --kz-c-4F46E5: #A1ACFA; --kz-c-52525B: #B4B4BD;
  --kz-c-5B21B6: #BDADFC; --kz-c-6D28D9: #B7A6FC; --kz-c-71717A: #9D9DA7; --kz-c-78350F: #F5A782; --kz-c-831843: #FE9BB6; --kz-c-8A8CD9: #9395E3;
  --kz-c-9D174D: #FE93AF; --kz-c-A1A1AA: #7D7D87; --kz-c-A1E3CB: #094434; --kz-c-B1E3FF: #063A50; --kz-c-B45309: #F89055; --kz-c-B91C1C: #FD9185;
  --kz-c-BE185D: #FC88A7; --kz-c-BFDBFE: #18375B; --kz-c-C2410C: #FB8C69; --kz-c-C6C7F8: #C6C7F8; --kz-c-D1FAE5: #013321; --kz-c-D4D4D8: #3A3A42;
  --kz-c-DBEAFE: #11161D; --kz-c-DC2626: #FB867A; --kz-c-DDD6FE: #362C55; --kz-c-E3F5FF: #11171A; --kz-c-E5ECF6: #14161A; --kz-c-ECFDF5: #121815;
  --kz-c-EDE9FE: #16151C; --kz-c-EDEEFC: #15161A; --kz-c-EEF2FF: #15161A; --kz-c-EF4444: #FF635E; --kz-c-F4F4F5: #1A1A1F; --kz-c-F59E0B: #F59E0B;
  --kz-c-F7F9FB: #18181C; --kz-c-FAFAFA: #16161A; --kz-c-FBCFE8: #4C213D; --kz-c-FCE7F3: #1B1418; --kz-c-FDBA74: #C2410C; --kz-c-FDE68A: #372E04;
  --kz-c-FEE2E2: #1D1313; --kz-c-FEF08A: #312C02; --kz-c-FEF2F2: #191515; --kz-c-FEF3C7: #302803; --kz-c-FF3B30: #FB695A; --kz-c-FF5A1F: #FF6A33;
  --kz-c-FFC555: #FFC555; --kz-c-FFE14D: #3A3101; --kz-c-FFEDD5: #37260A; --kz-c-FFFFFF: #111114;
}
:root[data-kz-theme="dark"] body { background: #111114; color: #ECECF0; }
:root[data-kz-theme="dark"] a { color: #ECECF0; }

/* Magic UI's motion (D-132): the beam round a border, a blur-in, rings, a marquee, shining text, the spotlight card
   and the light/dark swap's circle. */
@keyframes kz-blur-fade { from { opacity: 0; transform: translateY(var(--kz-bf-y, 6px)); filter: blur(var(--kz-bf-blur, 6px)); } to { opacity: 1; transform: none; filter: none; } }
@keyframes kz-ripple { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.9); } }
.kz-ripple { animation: kz-ripple 3.4s ease infinite; }
@keyframes kz-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--kz-gap, 12px))); } }
.kz-marquee:hover .kz-marquee-run { animation-play-state: paused !important; }
@keyframes kz-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.kz-magic > .kz-magic-fx { opacity: 0; transition: opacity .3s ease; }
.kz-magic:hover > .kz-magic-fx { opacity: 1; }
.kz-bento { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.kz-bento:hover { transform: translateY(-2px); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Moving between pages (D-155; the founder: "it is like I am switching to a different website"): while a move runs
   (nav.ts sets data-kz-vt), the top bar and Shorts' sidebar keep their places, the page under them fades across with a
   little blur, and a video's tile grows into the editor's video. The names exist only during a move, so the light/dark
   circle above still sweeps the whole page. */
:root[data-kz-vt="page"] .kz-vt-nav { view-transition-name: kz-nav; }
/* Shorts' sidebar keeps still between Shorts' pages; its rail (the editor's) has a name of its own, so the panel and
   the rail fade across instead of one being squeezed into the other. */
:root[data-kz-vt="page"] .kz-vt-side { view-transition-name: kz-side; }
:root[data-kz-vt="page"] .kz-vt-rail { view-transition-name: kz-rail; }
:root[data-kz-vt="page"] .kz-vt-video { view-transition-name: var(--kz-vt-video, none); }
:root[data-kz-vt="page"]::view-transition-old(root) { animation: kz-vt-out .2s cubic-bezier(.4,0,1,1) both; }
:root[data-kz-vt="page"]::view-transition-new(root) { animation: kz-vt-in .36s cubic-bezier(.2,.7,.2,1) .05s both; }
:root[data-kz-vt="page"]::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@keyframes kz-vt-out { to { opacity: 0; transform: scale(.992); filter: blur(3px); } }
@keyframes kz-vt-in { from { opacity: 0; transform: scale(1.008); filter: blur(3px); } }

/* The editor (D-155): placeholders that shimmer while it loads, and the soft light behind the video. */
@keyframes kz-skel { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.kz-skel { background: linear-gradient(100deg, rgba(var(--kz-ink-rgb, 28, 28, 28), .06) 30%, rgba(var(--kz-ink-rgb, 28, 28, 28), .12) 50%, rgba(var(--kz-ink-rgb, 28, 28, 28), .06) 70%); background-size: 300% 100%; animation: kz-skel 1.4s ease-in-out infinite; }
@keyframes kz-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
.kz-stage-glow { animation: kz-glow 7s ease-in-out infinite; }

/* ion's landing page (D-137): headline lines rising, things fading in, the hero phone arriving, sound bars, the
   typing dots, the editor's playhead (it runs from the reading start), and its links' hovers. */
@keyframes ion-up { from { transform: translateY(112%); } to { transform: none; } }
@keyframes ion-in { from { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
/* A landing section well off screen rests its looping motion (pages/Landing.tsx, D-157); it picks up where it was. */
.ion-idle, .ion-idle * { animation-play-state: paused !important; }
@keyframes ion-phone-in { from { opacity: 0; transform: translateY(90px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ion-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes ion-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ion-play-ltr { from { left: 0%; } to { left: 100%; } }
@keyframes ion-play-rtl { from { right: 0%; } to { right: 100%; } }
.ion-landing ::selection { background: var(--kz-accent, #2563EB); color: #FFFFFF; }
.ion-cta:hover { background: var(--kz-accent-hover, #1D4ED8) !important; }
.ion-link:hover { color: #F5F5F7 !important; }
.ion-totop:hover { background: #F5F5F7 !important; color: #0A0A0B !important; }

@media (prefers-reduced-motion: reduce) {
  .kz-ripple, .kz-marquee-run, .kz-shiny { animation: none !important; }
  .kz-beam { display: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}