/* Marketing display roles are separate from the native Keemo illustration roles.
   At mobile widths every text role resolves to the agreed 11–24 px scale. */
:root {
  --page: #111211; --surface: #191b19; --surface-raised: #232623;
  --ink: #f1f2ed; --muted: #a0a49b; --faint: #858b80;
  --line: #30342d; --accent: #d6fa43; --accent-ink: #1d2505;
  --radius: 20px; --space-section: 128px;
  --site-display: 80px; --site-display-leading: 84px;
  --site-section: 48px; --site-section-leading: 54px;
  --site-header-height: 76px;
  --mac-font-meta: 10px; --mac-font-small: 12px; --mac-font-body: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-height) + 24px); }
body { margin: 0; padding-top: var(--site-header-height); background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { background: none; border: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button:hover, a:hover { transition: color .2s, background .2s, border-color .2s, transform .2s; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--km-weight-medium); }
strong { font-weight: var(--km-weight-semibold); }
svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wrap { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.section-space { padding-block: var(--space-section); }
.muted { color: var(--muted); }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 30; padding: 12px 20px; color: var(--accent-ink); background: var(--accent); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { height: var(--site-header-height); position: fixed; inset: 0 0 auto; z-index: 20; background: #111211eb; border-bottom: 1px solid #ffffff0d; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { display: block; filter: brightness(0) invert(1); }
.desktop-nav { display: flex; gap: 32px; margin-left: 54px; }
.desktop-nav a, .header-actions, .footer { font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.desktop-nav a { color: var(--muted); padding-block: 12px; }
.desktop-nav a:hover { color: var(--ink); }
.header-actions { display: flex; gap: 22px; align-items: center; }
.language { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; color: var(--muted); }
.language:hover { color: var(--accent); }
.header-cta { border: 1px solid #4b5044; border-radius: 9px; padding: 11px 16px; display: flex; align-items: center; gap: 14px; }
.header-cta:hover { background: #262a22; border-color: var(--accent); }
.hero { padding-top: 76px; text-align: center; }
.hero-copy { position: relative; z-index: 2; }
h1 { font-size: var(--site-display); line-height: var(--site-display-leading); letter-spacing: -.045em; }
h1 > span { display: block; }
.soft-line { color: #a4aa9a; }
.hero-description { max-width: 640px; margin: 25px auto 29px; color: var(--muted); text-wrap: pretty; }
.download-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; padding: 12px 18px; border-radius: 11px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); font-weight: var(--km-weight-medium); border: 1px solid transparent; }
.button-primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 #ffffff75; }
.button-primary:hover { background: #e4ff76; transform: translateY(-2px); }
.button-secondary { background: #22251f; border-color: #3c4234; }
.button-secondary:hover { background: #30372a; transform: translateY(-2px); }
.button-arrow { margin-left: 12px; }
.product-composition { position: relative; margin: 62px auto 0; max-width: 1052px; padding: 0 95px 28px 0; isolation: isolate; }
.product-halo { position: absolute; inset: -120px 0 20px; background: radial-gradient(ellipse at 50% 65%, #b0cf4320 0%, #8b9c3910 35%, transparent 68%); z-index: -1; pointer-events: none; }
.mac-window { text-align: left; background: #20211f; border: 1px solid #636659; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 75px #0006, 0 0 0 4px #ffffff03; }
.hero-mac { transform: perspective(1800px) rotateY(4deg) rotateX(2deg); transform-origin: center; }
.mac-toolbar { height: 47px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #ffffff08; background: #292b26; }
.traffic { display: flex; gap: 7px; width: 90px; }
.traffic i { height: 10px; width: 10px; border-radius: 50%; background: #fa655b; }
.traffic i:nth-child(2) { background: #efbc49; }.traffic i:nth-child(3) { background: #36ba57; }
.window-wordmark { width: 61px; height: 23px; filter: brightness(0) invert(1); }
.toolbar-end { margin-left: auto; display: flex; gap: 18px; align-items: center; color: #b2b5a9; font-size: var(--mac-font-small); }
.toolbar-end svg { width: 15px; height: 15px; }
.mac-layout { display: grid; grid-template-columns: 164px 1fr 176px; min-height: 369px; }
.app-sidebar { background: #252722; padding: 18px 10px; border-right: 1px solid #ffffff05; }
.sidebar-row { display: flex; gap: 9px; align-items: center; padding: 8px; border-radius: 6px; color: #b2b6aa; font-size: var(--mac-font-small); line-height: var(--km-leading-secondary); white-space: nowrap; }
.sidebar-row svg { width: 14px; height: 14px; }
.sidebar-row.active { background: #d6fa4314; color: var(--accent); }
.sidebar-row .count { margin-left: auto; color: #a1a894; font-size: var(--mac-font-meta); }
.sidebar-label { color: #9ca38f; padding: 22px 8px 7px; font-size: var(--mac-font-meta); line-height: var(--km-leading-caption); }
.sidebar-emoji { width: 14px; text-align: center; }
.app-content { min-width: 0; padding: 18px; }
.app-content-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--mac-font-body); font-weight: var(--km-weight-semibold); line-height: var(--km-leading-compact); margin-bottom: 17px; }
.app-content-title svg { width: 15px; height: 15px; color: #a3a997; }
.app-content-title .plus { color: var(--accent); font-size: var(--mac-font-small); font-weight: var(--km-weight-medium); }
.app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-card { background: #2a2d26; border: 1px solid #3d4235; border-radius: 8px; overflow: hidden; min-width: 0; }
.card-content { padding: 12px; }
.card-heading { font-size: var(--mac-font-small); line-height: var(--km-leading-secondary); font-weight: var(--km-weight-medium); color: #edece5; }
.card-text { font-size: var(--mac-font-small); line-height: var(--km-leading-secondary); color: #adb1a3; margin-top: 6px; }
.card-meta { color: #a5b192; display: flex; gap: 5px; font-size: var(--mac-font-meta); line-height: var(--km-leading-caption); margin-top: 11px; }
.card-meta svg { height: 12px; width: 12px; }
.landscape { height: 105px; background: #89957a; position: relative; overflow: hidden; }
.landscape-svg { display: block; width: 100%; height: 100%; }
.swatches { display: flex; gap: 5px; margin-top: 10px; }.swatches i { width: 25px; height: 25px; border-radius: 50%; background: #c1ba9f; }.swatches i:nth-child(2) { background: #798469; }.swatches i:nth-child(3) { background: #48573d; }.swatches i:nth-child(4) { background: #e1d9c5; }
.app-notepad { background: #252722; padding: 18px 14px; border-left: 1px solid #ffffff05; display: flex; flex-direction: column; }
.notepad-title { color: #e1e4d8; font-size: var(--mac-font-small); font-weight: var(--km-weight-medium); }
.notepad-text { font-size: var(--mac-font-small); line-height: var(--km-leading-compact); margin-top: 18px; color: #b1b6a8; }
.notepad-text .checked { color: #8b947e; text-decoration: line-through; }
.notepad-footer { margin-top: auto; padding-top: 24px; color: #98a18b; font-size: var(--mac-font-meta); line-height: var(--km-leading-caption); }
.phone { width: 216px; min-height: 419px; padding: 9px; border-radius: 34px; background: #090a09; border: 1px solid #777b6e; box-shadow: 0 20px 55px #0008, inset 0 0 0 3px #252923; text-align: left; }
.hero-phone { position: absolute; right: 0; bottom: 39px; transform: rotate(5deg); }
.phone-screen { background: #1c1f1a; border-radius: 26px; overflow: hidden; min-height: 399px; padding: 10px; position: relative; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 15px; font-size: var(--km-font-caption); line-height: var(--km-leading-caption); }
.island { position: absolute; width: 61px; height: 17px; top: 7px; left: calc(50% - 30px); background: #070807; border-radius: 20px; }
.phone-heading { display: flex; align-items: center; justify-content: space-between; padding: 7px 1px 12px; }
.phone-heading .window-wordmark { width: 70px; height: 26px; }
.phone-heading svg { color: #b1b8a3; width: 16px; height: 16px; }
.phone-filters { display: flex; gap: 5px; margin-bottom: 12px; white-space: nowrap; font-size: var(--km-font-caption); line-height: var(--km-leading-caption); }
.phone-filters span { padding: 6px 8px; border: 1px solid #454e37; border-radius: 16px; }
.phone-filters span:first-child { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.phone .app-card { margin-bottom: 8px; border-radius: 10px; }
.phone .landscape { height: 87px; }
.phone .card-content { padding: 10px; }
.phone .card-heading { font-size: var(--km-font-secondary); }.phone .card-meta { font-size: var(--km-font-caption); }
.phone-nav { display: flex; align-items: center; justify-content: space-around; color: #a0ab91; border-radius: 22px; padding: 10px; background: #30372a; margin-top: 12px; }
.phone-nav svg { width: 16px; height: 16px; }.phone-nav > :first-child { color: var(--accent); }
.home-indicator { height: 3px; width: 66px; border-radius: 6px; background: #c4cbb8; margin: 12px auto 0; }
.intro { border-bottom: 1px solid var(--line); }
.display-heading { font-size: var(--site-section); line-height: var(--site-section-leading); letter-spacing: -.045em; font-weight: var(--km-weight-medium); text-wrap: balance; }
.section-description { color: var(--muted); text-wrap: pretty; }
.section-top { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 42px; }
.section-top .display-heading { max-width: 900px; }
.section-top .section-description { max-width: 640px; }

/* An everyday collection: three different objects sharing one typography. */
.intro-copy { max-width: 820px; margin-inline: auto; text-align: center; }
.intro-copy .section-description { max-width: 570px; margin: 24px auto 0; }
.intro-pair { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .25em; }
.intro-welcome { display: block; width: fit-content; margin: 6px auto 0; position: relative; }
.intro-underline { position: absolute; left: 0; bottom: -12px; width: 100%; height: 16px; pointer-events: none; }
.intro-underline path { fill: none; stroke: #d6fa4380; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.intro-objects { max-width: 990px; margin: 68px auto 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 26px; padding: 0 16px 24px; }
.keep-card { border: 1px solid #48513d; border-radius: 16px; background: #252c20; box-shadow: 0 18px 42px #0003; text-align: left; }
.keep-link { transform: rotate(-6deg) translateY(4px); overflow: hidden; }
.keep-landscape { height: 118px; }
.keep-landscape svg { width: 100%; height: 100%; }
.keep-content { padding: 18px; }
.keep-title { font-size: var(--km-font-compact); line-height: var(--km-leading-compact); font-weight: var(--km-weight-medium); overflow-wrap: anywhere; }
.keep-caption { color: #aab59b; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); margin-top: 12px; }
.keep-caption:has([data-icon]) { display: flex; align-items: flex-start; gap: 7px; }
.keep-caption svg { width: 14px; height: 14px; }
.keep-note { padding: 24px; background: #343e28; border-color: #64714d; transform: rotate(3deg) translateY(-12px); }
.keep-note-icon { color: #c3d2aa; margin-bottom: 22px; }
.keep-thought { font-size: var(--km-font-body); line-height: var(--km-leading-body); }
.keep-file { display: flex; align-items: center; gap: 16px; padding: 25px 20px; background: #20241e; transform: rotate(-3deg) translateY(22px); }
.keep-file-icon { width: 54px; height: 70px; flex-shrink: 0; color: #d4debf; background: #343d2a; border: 1px solid #5a664a; border-radius: 6px 13px 6px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.keep-file-icon > span:last-child { font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); font-weight: var(--km-weight-medium); }
.keep-file .keep-caption { margin-top: 7px; }
.demo-tabs { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
.demo-tab { color: var(--muted); display: inline-flex; gap: 9px; align-items: center; padding: 14px 12px 17px; min-height: 50px; position: relative; white-space: nowrap; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.demo-tab svg { width: 17px; height: 17px; }
.demo-tab[aria-selected="true"] { color: var(--accent); }.demo-tab[aria-selected="true"]::after { content: ''; height: 2px; position: absolute; inset: auto 0 -1px; background: var(--accent); }
.demo-tab:hover { color: var(--ink); }
.demo-shell { border: 1px solid #3b4035; border-radius: var(--radius); overflow: hidden; }
.demo-stage { position: relative; min-height: 410px; display: flex; align-items: center; justify-content: center; padding: 45px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #313b23 0%, #20251b 42%, #1a1e17 100%); }
.demo-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#a8b58528 .65px, transparent .65px); background-size: 24px 24px; mask-image: linear-gradient(transparent, #0004); pointer-events: none; }
.demo-bottom { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: #191c16; border-top: 1px solid #ffffff08; padding: 26px 32px; }
.demo-bottom > div { min-width: 0; }
.demo-count { float: left; margin-right: 24px; color: var(--faint); font-size: var(--km-font-secondary); line-height: var(--km-leading-title); font-variant-numeric: tabular-nums; }
.demo-bottom h3 { font-size: var(--km-font-body); line-height: var(--km-leading-body); }
.demo-bottom p { margin-top: 4px; margin-left: 73px; color: var(--muted); }
.replay { min-width: 44px; display: flex; gap: 9px; align-items: center; color: var(--muted); min-height: 44px; padding: 8px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); flex-shrink: 0; }
.replay svg { width: 17px; height: 17px; }.replay:hover { color: var(--accent); }
.demo-window { z-index: 1; width: min(600px, 100%); min-height: 295px; background: #252922; border: 1px solid #68705c; border-radius: 12px; box-shadow: 0 20px 65px #0006; overflow: hidden; }
.demo-window .mac-toolbar { background: #30352a; }
.demo-window-body { padding: 25px; }
.demo-window-label { color: #d9ddcf; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); display: flex; align-items: center; gap: 8px; margin-bottom: 17px; }
.demo-window-label > [data-icon] { color: #abb795; }
.demo-entry { background: #353d2b; padding: 16px; border: 1px solid #586746; border-radius: 10px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }
.demo-entry-title { display: flex; justify-content: space-between; gap: 10px; font-weight: var(--km-weight-medium); }
.demo-entry-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.demo-entry-title > [data-icon] { flex-shrink: 0; align-self: flex-start; }
.demo-entry p { color: #b3bda6; margin-top: 7px; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); }
.demo-tag { display: inline-flex; color: #c2d5a0; background: #d6fa430b; border: 1px solid #65774b; padding: 3px 7px; border-radius: 5px; margin-top: 12px; font-size: var(--km-font-caption); line-height: var(--km-leading-caption); }
.demo-ghost { border: 1px dashed #667451; height: 80px; border-radius: 10px; margin-top: 12px; opacity: .45; }
.demo-toast { position: absolute; bottom: 28px; right: 30px; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 16px; background: #e2f4c6; color: #26351b; border-radius: 24px; box-shadow: 0 5px 30px #0003; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); }
.demo-toast svg { width: 16px; height: 16px; }
.flying-link { width: 258px; position: absolute; left: 8%; top: 60px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 17px; background: #d9e5c5; border-radius: 13px; color: #2c3820; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); box-shadow: 0 13px 40px #0004; }
.demo-cursor { position: absolute; right: 27%; top: 39%; width: 25px; height: 32px; background: #eff7e1; clip-path: polygon(0 0, 0 89%, 27% 70%, 44% 100%, 57% 94%, 41% 64%, 76% 61%); filter: drop-shadow(0 3px 4px #000); z-index: 5; }
.play .flying-link { animation: save-link 3.6s cubic-bezier(.23,1,.32,1) both; }
.play .saved-entry { animation: entry-in 3.6s both; }
.play .demo-toast { animation: toast-in 3.6s both; }
.play .save-cursor { animation: cursor-save 3.6s both; }
@keyframes save-link { 0%,15% { transform: translate(-25px,-10px) rotate(-6deg); opacity: 1; } 65% { transform: translate(150px,68px) rotate(0); opacity: 1; } 78%,100% { transform: translate(150px,68px) scale(.8); opacity: 0; } }
@keyframes entry-in { 0%,64% { opacity: 0; transform: translateY(10px); } 85%,100% { opacity: 1; transform: translateY(0); } }
@keyframes toast-in { 0%,74% { opacity: 0; transform: translateY(10px); } 90%,100% { opacity: 1; transform: translateY(0); } }
@keyframes cursor-save { 0%,15% { transform: translate(-240px,-32px); } 65% { transform: translate(-70px,48px); } 85%,100% { transform: translate(0,70px); opacity: 0; } }
.shortcut-keys { display: flex; align-items: center; gap: 8px; margin: 0 0 25px; color: #bac5a9; }.shortcut-keys kbd { display: grid; place-items: center; width: 40px; height: 40px; background: #343d2c; border: 1px solid #758063; border-bottom-width: 3px; border-radius: 9px; font: inherit; }
.quick-scene { max-width: 400px; width: 100%; position: relative; z-index: 1; }.quick-scene .demo-window { min-height: 215px; }.quick-text { font-size: var(--km-font-body); line-height: var(--km-leading-body); color: #f2f5e9; min-height: 60px; }
.typing-mask { display: inline-block; }.play .typing-mask { animation: typed 2s steps(22,end) both; clip-path: inset(0 0 0 0); }
.quick-foot { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 25px; color: #b4c0a5; font-size: var(--km-font-caption); line-height: var(--km-leading-caption); }.quick-done { background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 5px 10px; font-size: var(--km-font-secondary); }
.play .quick-scene .demo-window { animation: quick-open .8s both; }.play .shortcut-keys { animation: key-press .8s both; }
@keyframes typed { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes quick-open { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes key-press { 30%,65% { transform: translateY(2px); color: var(--accent); } }
.move-layout { display: grid; grid-template-columns: 160px 1fr; min-height: 235px; }.move-folders { padding: 23px 14px; background: #2c3226; }.move-folder { padding: 10px 7px; display: flex; align-items: center; gap: 8px; color: #b9c4aa; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); border-radius: 6px; }.move-folder svg { width: 15px; height: 15px; }.move-folder.destination { margin-top: 15px; border: 1px solid #718354; background: #d6fa4314; color: #e3efcf; }
.move-entries { padding: 25px 20px; min-width: 0; }.moving-entry { width: 100%; }.play .moving-entry { animation: move-entry 3.6s both; }.play .destination { animation: folder-glow 3.6s both; }
@keyframes move-entry { 0%,20% { transform: none; } 35% { transform: translateY(-8px) rotate(-2deg); box-shadow: 0 15px 35px #0005; } 70%,80% { transform: translate(-160px,22px) rotate(-3deg); opacity: .9; } 90%,100% { transform: translate(-160px,22px) scale(.7); opacity: 0; } }
@keyframes folder-glow { 0%,62% { background: #d6fa4314; } 80%,100% { background: #d6fa4345; border-color: #d6fa43; } }
.hidden-scene { max-width: 400px; }.hidden-scene .demo-window-body { position: relative; }.hidden-row { display: flex; align-items: center; gap: 12px; padding: 13px 10px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.hidden-row svg { width: 18px; height: 18px; color: #bbcda0; }.hidden-row > span:last-child { margin-left: auto; }.hide-target { background: #d6fa4312; border-radius: 8px; }
.hide-menu { position: absolute; right: -43px; top: 114px; background: #3a4132; border: 1px solid #747d65; border-radius: 10px; padding: 7px; box-shadow: 0 12px 30px #0005; font-size: var(--km-font-secondary); line-height: var(--km-leading-compact); }.hide-menu div { padding: 6px 12px; display: flex; gap: 12px; align-items: center; }.hide-menu div:last-child { background: var(--accent); color: var(--accent-ink); border-radius: 6px; }.hide-menu svg { width: 15px; height: 15px; }
.play .hide-menu { animation: hide-menu 3.6s both; }.play .hide-target { animation: hide-row 3.6s both; }
@keyframes hide-menu { 0%,15% { opacity: 0; transform: translateY(5px); } 25%,65% { opacity: 1; transform: none; } 75%,100% { opacity: 0; } }
@keyframes hide-row { 0%,67% { opacity: 1; } 85%,100% { opacity: 0; transform: translateX(-15px); } }
.lock-scene { max-width: 410px; }.lock-body { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 27px; text-align: center; }.lock-body h3 { font-size: var(--km-font-heading); line-height: var(--km-leading-heading); }.lock-symbol { width: 52px; height: 52px; border-radius: 15px; background: #d6fa4315; color: var(--accent); display: grid; place-items: center; }.lock-symbol svg { width: 24px; height: 24px; }.lock-body p { color: #b9c1ac; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); }.password-dots { width: 175px; border: 1px solid #6b7857; border-radius: 8px; padding: 11px; display: flex; gap: 8px; justify-content: center; background: #1d2317; }.password-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e0f0c5; }.play .password-dots { animation: quick-open 1.8s both; }.play .lock-symbol { animation: lock-pulse 3.6s both; }
@keyframes lock-pulse { 70% { background: #d6fa4315; } 85%,100% { background: var(--accent); color: var(--accent-ink); } }
.lock-symbol { position: relative; }.lock-symbol .lock-before, .lock-symbol .lock-after { position: absolute; display: grid; place-items: center; inset: 0; }.lock-content { position: relative; width: 100%; min-height: 85px; }.lock-content .password-dots { margin: 15px auto 0; }.lock-after { opacity: 0; }.lock-result { position: absolute; inset: 0; padding: 10px; background: #d6fa430b; border: 1px solid #59664a; border-radius: 8px; }.lock-result p:first-child { color: #edf5df; margin-bottom: 6px; }.play .lock-before { animation: lock-before 3.6s both; }.play .lock-after { animation: lock-after 3.6s both; }
@keyframes lock-before { 0%,68% { opacity: 1; } 83%,100% { opacity: 0; } }
@keyframes lock-after { 0%,75% { opacity: 0; } 92%,100% { opacity: 1; } }
.demo-search { display: flex; gap: 10px; align-items: center; border: 1px solid #8f9e72; border-radius: 8px; padding: 10px 13px; color: #ecf0e1; margin-bottom: 14px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.demo-search svg { width: 16px; height: 16px; color: #b9c7a2; }.demo-search .search-caret { height: 15px; width: 1px; background: var(--accent); }.search-results { display: grid; gap: 10px; }.search-results .demo-entry { padding: 12px 15px; }.play .search-query { animation: typed 1.1s steps(8,end) both; }.play .search-results { animation: entry-in 2.2s both; }.demo-entry mark { background: #d6fa4333; color: #edf8d7; border-radius: 3px; padding: 0 2px; }
.details { padding-top: 15px; }.details-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 45px; }.detail { padding: 28px 0 33px; border-top: 1px solid var(--line); }.detail > [data-icon] { color: #c4cfad; margin-bottom: 20px; }.detail > [data-icon] svg { width: 24px; height: 24px; }.detail h3 { font-size: var(--km-font-body); line-height: var(--km-leading-body); font-weight: var(--km-weight-medium); margin-bottom: 9px; }.detail p { color: var(--muted); max-width: 310px; }
.cloud-section { background: #191d15; border-block: 1px solid #31392a; padding-block: 94px; overflow: hidden; }.cloud-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }.cloud-copy .section-description { margin-top: 24px; max-width: 410px; font-size: var(--km-font-body); line-height: var(--km-leading-body); }.cloud-benefits { list-style: none; padding: 0; margin: 27px 0 0; display: grid; gap: 12px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); color: #c1c9b4; }.cloud-benefits li { display: flex; gap: 10px; }.cloud-benefits svg { color: var(--accent); width: 16px; height: 16px; }
.cloud-art { position: relative; height: 390px; display: grid; place-items: center; }.cloud-orbit { border: 1px solid #56644055; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }.orbit-one { width: 190px; height: 190px; }.orbit-two { width: 310px; height: 310px; }.orbit-three { width: 430px; height: 430px; }.cloud-center { position: relative; width: 110px; height: 110px; border-radius: 28px; display: grid; place-items: center; background: #c6e95008; box-shadow: 0 0 100px #b3d44314; }.cloud-center img { display: block; }.orbit-device { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #5c684b; background: #242e1a; border-radius: 12px; color: #dbe6cb; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); box-shadow: 0 10px 25px #0002; }.orbit-device svg { width: 24px; height: 24px; }.orbit-mac { left: 0; top: 89px; }.orbit-phone { right: 10px; bottom: 82px; }.icloud-label { position: absolute; top: 11px; display: flex; align-items: center; gap: 8px; color: #c6d4af; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.orbit-point { width: 6px; height: 6px; border-radius: 50%; background: #b7cb8b; position: absolute; }.point-one { left: 29%; bottom: 49px; }.point-two { right: 26%; top: 83px; }
.faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; }.faq details { border-bottom: 1px solid var(--line); }.faq details:first-child { border-top: 1px solid var(--line); }.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; cursor: pointer; padding: 20px 0; font-size: var(--km-font-body); line-height: var(--km-leading-body); }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: '+'; color: var(--muted); font-size: var(--km-font-title); line-height: var(--km-leading-title); font-weight: var(--km-weight-regular); }.faq details[open] summary::after { content: '−'; color: var(--accent); }.faq details p { padding: 0 30px 23px 0; color: var(--muted); font-size: var(--km-font-compact); line-height: var(--km-leading-body); }
.future { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 40px; padding: 56px; border: 1px solid #596b3f; border-radius: 24px; background: #232e1b; }
.future-copy { min-width: 0; }
.future .display-heading { color: #e5f2ce; }
.future .section-description { margin-top: 20px; max-width: 500px; color: #b6c4a2; }
.future-platforms { display: flex; align-items: center; justify-content: center; gap: 18px; padding-bottom: 18px; }
.future-platform { width: 108px; height: 108px; border: 1px solid #718855; border-radius: 28px; background: #344426; color: var(--accent); display: grid; place-items: center; box-shadow: 0 12px 30px #0002; }
.future-platform:last-child { transform: translateY(18px); background: #2b3821; color: #d7e4bf; }
.future-platform svg { width: 52px; height: 52px; }
html[lang="ru"] :is(.hero-description, .section-description, .detail p, .demo-bottom p, .faq details p) { text-wrap: pretty; }
.closing { text-align: center; padding-block: 115px 105px; }.closing-icon { margin-bottom: 25px; }.closing .section-description { margin: 23px 0 30px; font-size: var(--km-font-body); line-height: var(--km-leading-body); }
.footer { padding-block: 30px 24px; border-top: 1px solid var(--line); color: var(--muted); }.footer-top { display: flex; gap: 25px; align-items: center; }.footer-top nav { margin-left: auto; display: flex; align-items: center; gap: 25px; }.footer-top nav button, .footer-top nav a { padding: 12px 0; min-height: 44px; color: var(--muted); font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.footer-top nav button:hover,.footer-top nav a:hover { color: var(--ink); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); color: var(--faint); }
dialog { color: var(--ink); background: #20251c; border: 1px solid #566443; border-radius: 22px; width: min(440px, calc(100% - 32px)); padding: 32px; box-shadow: 0 25px 100px #0008; }dialog::backdrop { background: #060906bc; backdrop-filter: blur(8px); }.dialog-close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; height: 44px; width: 44px; color: var(--muted); }.dialog-close:hover { color: var(--ink); }dialog h2 { font-size: var(--km-font-title); line-height: var(--km-leading-title); margin-top: 24px; }dialog p { color: var(--muted); font-size: var(--km-font-body); line-height: var(--km-leading-body); margin-top: 16px; }dialog .button { margin-top: 24px; }.noscript { padding: 25px; background: #354224; color: #f1f7e8; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: hero-in .9s .05s both; }.product-composition { animation: hero-in 1.2s .18s both; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1100px) {
  :root { --space-section: 100px; }
  .wrap { width: calc(100% - 64px); }.mac-layout { grid-template-columns: 145px 1fr; }.app-notepad { display: none; }.demo-tab { padding-inline: 7px; gap: 7px; }.faq { gap: 40px; }.desktop-nav { margin-left: 0; }
}
@media (max-width: 760px) {
  :root { --site-display: var(--km-font-title); --site-display-leading: var(--km-leading-title); --site-section: var(--km-font-title); --site-section-leading: var(--km-leading-title); --space-section: 72px; --site-header-height: 64px; --mac-font-meta: var(--km-font-caption); --mac-font-small: var(--km-font-secondary); --mac-font-body: var(--km-font-compact); }
  .intro-copy .section-description { margin-top: 24px; }
  .intro-objects { max-width: 360px; grid-template-columns: 1fr; gap: 20px; padding: 0 14px 10px; margin-top: 42px; }
  .keep-link { width: calc(100% - 24px); transform: rotate(-3deg); }
  .keep-landscape { height: 86px; }
  .keep-content { padding: 16px; }
  .keep-note { width: calc(100% - 12px); justify-self: end; padding: 20px; transform: rotate(2deg); }
  .keep-note-icon { margin-bottom: 14px; }
  .keep-file { width: calc(100% - 12px); padding: 18px; transform: rotate(-2deg); }
  .wrap { width: calc(100% - 40px); }.header-inner { gap: 10px; }.brand img { width: 81px; height: 30px; }.desktop-nav { display: none; }.header-actions { gap: 8px; }.header-cta { gap: 10px; padding: 10px 12px; font-size: var(--km-font-secondary); }.language { font-size: var(--km-font-secondary); }.hero { padding-top: 45px; }
  h1 { font-size: var(--km-font-title); line-height: var(--km-leading-title); letter-spacing: -.035em; }.hero-description { font-size: var(--km-font-body); line-height: var(--km-leading-body); max-width: 330px; margin-top: 19px; margin-bottom: 24px; }.download-actions { gap: 9px; }.button { font-size: var(--km-font-compact); line-height: var(--km-leading-compact); padding: 12px 14px; gap: 7px; min-height: 50px; }.button-arrow { display: none; }.button svg { width: 18px; height: 18px; }
  .product-composition { margin-top: 43px; padding: 0 0 28px; min-height: 381px; }.product-halo { inset: -40px -20px 0; }.hero-mac { transform: none; margin-right: 20%; }.mac-toolbar { padding-inline: 11px; height: 40px; gap: 10px; }.traffic { width: auto; gap: 5px; }.traffic i { width: 7px; height: 7px; }.window-wordmark { width: 54px; height: 20px; }.toolbar-end { gap: 7px; }.toolbar-end .toolbar-label { display: none; }.mac-layout { display: block; min-height: 300px; }.app-sidebar { display: none; }.app-content { padding: 13px; }.app-content-title { font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.app-cards { display: block; }.hero-mac .app-card { margin-top: 10px; }.hero-mac .app-card:nth-child(n+3) { display: none; }.hero-mac .landscape { height: 90px; }.hero-mac .card-content { padding: 10px; }.hero-mac .card-text { display: none; }.hero-phone { width: 168px; min-height: 330px; bottom: 16px; transform: rotate(5deg); padding: 7px; border-radius: 27px; }.phone-screen { min-height: 316px; border-radius: 21px; padding: 9px; }.phone-status { font-size: var(--km-font-caption); padding-bottom: 7px; }.island { width: 44px; left: calc(50% - 22px); height: 13px; }.phone-heading { padding-bottom: 7px; }.phone-heading .window-wordmark { width: 56px; height: 22px; }.phone-filters { gap: 4px; margin-bottom: 9px; }.phone-filters span { padding: 4px 6px; }.phone-filters span:nth-child(3) { display: none; }.phone .landscape { height: 65px; }.phone .card-content { padding: 8px; }.phone .app-card:nth-of-type(2) .card-meta { display: none; }.phone .card-heading { font-size: var(--km-font-secondary); }.phone .card-meta { font-size: var(--km-font-caption); line-height: var(--km-leading-caption); margin-top: 7px; }.phone-nav { margin-top: 8px; padding: 7px; }.home-indicator { margin-top: 8px; }
  .display-heading { font-size: var(--km-font-title); line-height: var(--km-leading-title); letter-spacing: -.03em; }.section-description { font-size: var(--km-font-body); line-height: var(--km-leading-body); }.section-top { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 25px; }
  .demo-tabs { overflow-x: auto; justify-content: flex-start; gap: 8px; padding-bottom: 0; scrollbar-width: thin; scrollbar-color: #505b40 transparent; margin-bottom: 16px; }.demo-tab { padding: 12px 9px 15px; font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.demo-stage { min-height: 338px; padding: 29px 15px 55px; }.demo-window { min-height: 247px; }.demo-window-body { padding: 18px; }.demo-window .traffic { width: 42px; }.demo-bottom { padding: 19px; gap: 12px; align-items: flex-start; }.demo-count { float: none; display: block; margin-bottom: 5px; font-size: var(--km-font-caption); line-height: var(--km-leading-caption); }.demo-bottom h3 { font-size: var(--km-font-body); line-height: var(--km-leading-body); }.demo-bottom p { margin-left: 0; }.replay { padding: 6px; margin-right: -6px; }.replay > span:last-child { display: none; }.demo-toast { bottom: 15px; right: 15px; max-width: calc(100% - 30px); font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); padding: 9px 12px; }.flying-link { left: 18px; top: 42px; width: 215px; padding: 13px; font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); }.demo-entry { padding: 12px; }.demo-entry-title { font-size: var(--km-font-compact); line-height: var(--km-leading-compact); }.demo-entry p { font-size: var(--km-font-secondary); line-height: var(--km-leading-secondary); }.demo-ghost { height: 45px; }.demo-window-label { margin-bottom: 13px; }.move-layout { grid-template-columns: 116px 1fr; min-height: 210px; }.move-folders { padding: 17px 7px; }.move-folder { flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px; }.move-entries { padding: 20px 10px; }.move-entries .demo-entry { padding: 9px; }.moving-entry .demo-tag { display: none; }.move-entries .demo-entry-title > [data-icon] { display: none; }.hide-menu { right: 0; }.hidden-row { padding-inline: 3px; }.hidden-row > span:last-child { margin-left: auto; }.lock-body { padding: 20px; gap: 12px; }.lock-body h3 { font-size: var(--km-font-heading); line-height: var(--km-leading-heading); }.quick-scene { max-width: 310px; }.shortcut-keys { margin-bottom: 16px; }.quick-foot { flex-wrap: wrap; }.quick-text { font-size: var(--km-font-body); line-height: var(--km-leading-body); }
  @keyframes save-link { 0%,15% { transform: translate(-4px,-5px) rotate(-5deg); opacity: 1; } 65% { transform: translate(15px,75px); opacity: 1; } 78%,100% { transform: translate(15px,75px) scale(.8); opacity: 0; } }
  @keyframes cursor-save { 0%,15% { transform: translate(-110px,-45px); } 65% { transform: translate(-55px,40px); } 85%,100% { transform: translate(0,70px); opacity: 0; } }
  @keyframes move-entry { 0%,20% { transform: none; } 35% { transform: translateY(-8px) rotate(-2deg); } 70%,80% { transform: translate(-92px,38px) rotate(-3deg); opacity: .9; } 90%,100% { transform: translate(-92px,38px) scale(.7); opacity: 0; } }
  .details { padding-top: 0; }.details-grid { grid-template-columns: 1fr 1fr; gap: 0 24px; }.detail { padding: 23px 0; }.detail > [data-icon] { margin-bottom: 16px; }.detail h3 { font-size: var(--km-font-body); line-height: var(--km-leading-body); }
  .cloud-section { padding-block: 55px 28px; }.cloud-layout { grid-template-columns: 1fr; gap: 25px; }.cloud-copy .section-description { max-width: none; }.cloud-art { height: 310px; max-width: 380px; width: 100%; margin-inline: auto; }.orbit-one { width: 150px; height: 150px; }.orbit-two { width: 245px; height: 245px; }.orbit-three { width: 340px; height: 340px; }.cloud-center { width: 95px; height: 95px; }.cloud-center img { width: 80px; height: 80px; }.orbit-device { padding: 9px 12px; }.orbit-device svg { width: 20px; height: 20px; }.orbit-mac { top: 68px; left: 0; }.orbit-phone { right: 0; bottom: 60px; }.icloud-label { top: 8px; }.point-one { bottom: 44px; }.point-two { top: 69px; }
  .faq { grid-template-columns: 1fr; gap: 30px; }.faq summary { font-size: var(--km-font-body); line-height: var(--km-leading-body); min-height: 65px; }.faq details p { font-size: var(--km-font-compact); line-height: var(--km-leading-body); }.closing { padding-block: 75px; }.closing .display-heading { font-size: var(--km-font-title); line-height: var(--km-leading-title); }.closing-icon { width: 68px; height: 68px; }.closing .section-description { margin-block: 19px 25px; }.footer { padding-top: 23px; }.footer-top { flex-wrap: wrap; gap: 13px 20px; }.footer-top nav { margin: 0; width: 100%; gap: 8px 24px; flex-wrap: wrap; }.footer-bottom { padding-top: 10px; gap: 16px; }dialog { padding: 26px; }dialog p { font-size: var(--km-font-body); line-height: var(--km-leading-body); }
  .future { grid-template-columns: 1fr; padding: 26px; gap: 28px; }
  .future .section-description { margin-top: 18px; }
  .future-platforms { justify-content: flex-start; }
  .future-platform { width: 88px; height: 88px; border-radius: 24px; }
  .future-platform svg { width: 44px; height: 44px; }
}
@media (max-width: 360px) { .wrap { width: calc(100% - 32px); }.hero-phone { width: 150px; right: 5px; transform: rotate(3deg); }.product-halo { left: -16px; right: -16px; }.phone-status { padding-inline: 2px; }.details-grid { grid-template-columns: 1fr; }.download-actions { flex-direction: column; }.download-actions .button { width: 100%; }.header-cta { padding-inline: 9px; }.header-actions { gap: 3px; }.demo-bottom { padding-inline: 15px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }*, *::before, *::after { animation: none !important; transition: none !important; }.flying-link, .demo-cursor, .hide-menu, .hide-target, .moving-entry, .lock-before { visibility: hidden; }.saved-entry, .demo-toast, .search-results, .typing-mask, .lock-after { opacity: 1; transform: none; clip-path: none; }
}