Files
2026-08-10 12:01:03 +07:00

782 lines
48 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<style data-brand-fonts>
@font-face {
font-family: "Cormorant Garamond";
src: url("../../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../../fonts/cormorant-garamond-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../../fonts/cormorant-garamond-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../../fonts/cormorant-garamond-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Tenor Sans";
src: url("../../fonts/tenor-sans-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Malenia — Pitch deck</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;display=swap" />
<style>
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role="button"]{transition:filter .15s ease,transform .15s ease}
a[role="button"]:hover{filter:brightness(1.07)}
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc>summary{list-style:none;cursor:pointer}
details.kit-acc>summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
html, body { height: 100%; overflow: hidden; }
.deck { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.slide { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 24px; }
.frame {
position: relative; aspect-ratio: 16 / 9;
width: min(1280px, 94vw, calc((100vh - 48px) * 16 / 9));
container-type: size;
background: var(--brand-color-bg-container);
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
border-radius: var(--brand-border-radius-lg);
box-shadow: 0 24px 64px -24px var(--brand-color-fill-secondary), 0 2px 8px var(--brand-color-fill-quaternary);
overflow: hidden; display: flex; flex-direction: column;
}
/* solid-accent slides (cover + traction + ask): restrained 3-page accent budget */
.frame--accent { background: var(--brand-color-primary); border-color: transparent; }
.frame--accent .s-kicker { color: rgba(255,255,255,0.72); }
.frame--accent .s-kicker::before { background: rgba(255,255,255,0.85); }
.frame--accent .s-title, .frame--accent .s-mega, .frame--accent .s-num { color: #fff; }
.frame--accent .s-lede, .frame--accent .s-eyebrow { color: rgba(255,255,255,0.85); }
.frame--accent .f-head, .frame--accent .f-foot { color: rgba(255,255,255,0.62); }
.frame--accent .f-head .rule, .frame--accent .f-foot .rule { background: rgba(255,255,255,0.2); }
/* surface slides (alternate bg per §3 视觉一致) */
.frame--surface { background: var(--brand-color-bg-layout); }
.f-head { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 3cqi 5cqi 0; color: var(--brand-color-text-quaternary); font-size: 1.35cqi; }
.f-head .wm { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.7cqi; letter-spacing: -0.01em; color: inherit; }
.f-head .rule { flex: 1; height: var(--brand-line-width); background: var(--brand-color-border-secondary); }
.f-head .ix { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.f-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 5cqi; min-height: 0; overflow: hidden; }
/* shrink-to-fit layer: the runtime scales this down about its centre when
a slide's content would otherwise exceed the fixed frame (no-clip).
flex:none keeps its natural (unshrunk) height so the runtime can
measure the true overflow instead of a flex-shrunk box. */
.f-fit { flex: none; width: 100%; transform-origin: center center; will-change: transform; }
.f-foot { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 0 5cqi 3cqi; color: var(--brand-color-text-quaternary); font-size: 1.25cqi; }
.f-foot .rule { flex: 1; height: var(--brand-line-width); background: var(--brand-color-border-secondary); }
.s-kicker { display: inline-flex; align-items: center; gap: 1.1cqi; text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.3cqi; color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); margin-bottom: 2cqi; }
.s-kicker::before { content: ""; width: 2.6cqi; height: 0.32cqi; border-radius: 1cqi; background: var(--brand-color-primary); }
.s-eyebrow { font-size: 1.7cqi; color: var(--brand-color-text-tertiary); margin: 0 0 1.6cqi; max-width: 70cqi; }
.s-title { font-family: var(--display-family); font-size: 4.6cqi; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--brand-color-text); max-width: 82cqi; }
.s-mega { font-family: var(--display-family); font-size: 8cqi; line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--brand-color-text); }
.s-lede { font-size: 1.95cqi; line-height: 1.5; color: var(--brand-color-text-secondary); max-width: 66cqi; margin: 2.4cqi 0 0; }
.s-accent { color: var(--brand-color-primary); }
.frame--accent .s-accent { color: #fff; }
.s-grid { display: grid; gap: 2cqi; margin-top: 4cqi; }
.s-card { position: relative; background: var(--brand-color-bg-container); border: var(--brand-line-width) solid var(--brand-color-border-secondary); border-radius: 1.4cqi; padding: 2.6cqi; min-width: 0; }
.frame--surface .s-card { background: var(--brand-color-bg-container); }
.s-card h3 { font-size: 2cqi; line-height: 1.22; margin: 0 0 1cqi; letter-spacing: -0.01em; }
.s-card p { font-size: 1.55cqi; line-height: 1.5; color: var(--brand-color-text-secondary); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.s-card .tick { display: inline-flex; align-items: center; justify-content: center; width: 3.4cqi; height: 3.4cqi; border-radius: 1cqi; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); margin-bottom: 1.6cqi; }
.s-card .tick svg { width: 1.9cqi; height: 1.9cqi; }
.s-num { font-family: var(--display-family); font-size: 3.4cqi; font-weight: var(--brand-font-weight-strong); line-height: 1; color: var(--brand-color-primary); margin-bottom: 1.4cqi; letter-spacing: -0.02em; }
/* metric tiles (market / traction) */
.s-metric { min-width: 0; }
.s-metric .v { font-family: var(--display-family); font-size: 5cqi; font-weight: var(--brand-font-weight-strong); line-height: 1; letter-spacing: -0.03em; color: var(--brand-color-text); }
.frame--accent .s-metric .v { color: #fff; }
.s-metric .l { margin-top: 1.2cqi; font-size: 1.5cqi; line-height: 1.35; color: var(--brand-color-text-tertiary); }
.frame--accent .s-metric .l { color: rgba(255,255,255,0.78); }
/* market funnel bars — value labels live OUTSIDE the proportional track in
their own auto column, so a long label can never wrap/clip the bar. */
.s-bars { display: flex; flex-direction: column; gap: 1.8cqi; margin-top: 3.4cqi; max-width: 82cqi; }
.s-bar { display: grid; grid-template-columns: 12cqi 1fr auto; align-items: center; gap: 2cqi; }
.s-bar .tag { font-size: 1.5cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-secondary); letter-spacing: 0.04em; }
.s-bar .lane { min-width: 0; }
.s-bar .track { height: 4.2cqi; border-radius: 0.8cqi; }
.s-bar .val { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.9cqi; color: var(--brand-color-text); white-space: nowrap; }
.frame--accent .s-bar .val { color: #fff; }
/* competition matrix */
.s-matrix { display: grid; gap: 1.6cqi; margin-top: 3.4cqi; }
.s-matrix .row { display: grid; align-items: center; gap: 1.6cqi; padding: 1.8cqi 2.4cqi; border-radius: 1.2cqi; }
.s-matrix .row.head { color: var(--brand-color-text-tertiary); font-size: 1.4cqi; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0; padding-bottom: 0; }
.s-matrix .row.them { background: var(--brand-color-bg-container); border: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.s-matrix .row.us { background: var(--brand-color-primary-bg); border: 1.5px solid var(--brand-color-primary-border); }
.s-matrix .cell { font-size: 1.6cqi; min-width: 0; }
.s-matrix .who { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.85cqi; letter-spacing: -0.01em; }
.s-matrix .us .who { color: var(--brand-color-primary); }
.s-matrix .mk { display: inline-flex; align-items: center; justify-content: center; width: 3cqi; height: 3cqi; border-radius: 50%; }
.s-matrix .mk svg { width: 1.7cqi; height: 1.7cqi; }
.s-matrix .yes { background: var(--brand-color-primary); color: #fff; }
.s-matrix .no { background: var(--brand-color-fill-tertiary); color: var(--brand-color-text-quaternary); }
/* team initials */
.s-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; margin-top: 4cqi; }
.s-avatar { display: inline-flex; align-items: center; justify-content: center; width: 7cqi; height: 7cqi; border-radius: 50%; font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.6cqi; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); margin-bottom: 1.6cqi; letter-spacing: 0.02em; }
/* quote / why-now */
.s-quote { font-family: var(--display-family); font-size: 3.4cqi; line-height: 1.32; letter-spacing: -0.015em; color: var(--brand-color-text); max-width: 80cqi; margin: 0; }
.s-byline { display: flex; align-items: center; gap: 1.8cqi; margin-top: 3.6cqi; }
.s-byline .av { display: inline-flex; align-items: center; justify-content: center; width: 4.6cqi; height: 4.6cqi; border-radius: 50%; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); font-size: 1.7cqi; }
.s-byline .n { font-weight: var(--brand-font-weight-strong); font-size: 1.75cqi; color: var(--brand-color-text); }
.s-byline .r { font-size: 1.45cqi; color: var(--brand-color-text-tertiary); }
/* ask checklist */
.s-ask { display: flex; flex-direction: column; gap: 1.8cqi; margin-top: 3.6cqi; max-width: 70cqi; }
.s-ask .item { display: flex; align-items: flex-start; gap: 1.8cqi; font-size: 2cqi; line-height: 1.4; color: #fff; }
.s-ask .item .b { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.4cqi; height: 3.4cqi; border-radius: 0.9cqi; background: rgba(255,255,255,0.16); margin-top: 0.2cqi; }
.s-ask .item .b svg { width: 1.9cqi; height: 1.9cqi; }
.s-ask .item .k { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); }
.s-cta { display: inline-flex; align-items: center; gap: 1.4cqi; margin-top: 4cqi; height: 6cqi; padding: 0 3.4cqi; border-radius: 1.2cqi; background: #fff; color: var(--brand-color-primary); font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.1cqi; letter-spacing: -0.01em; }
.s-cta svg { width: 2cqi; height: 2cqi; }
/* product wireframe motif (div/SVG, no screenshots) */
.s-screen { margin-top: 3.6cqi; border-radius: 1.6cqi; border: var(--brand-line-width) solid var(--brand-color-border-secondary); background: var(--brand-color-bg-container); overflow: hidden; box-shadow: 0 12px 32px -16px var(--brand-color-fill-secondary); }
.s-screen .bar { display: flex; align-items: center; gap: 1cqi; padding: 1.4cqi 1.8cqi; border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.s-screen .bar i { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: var(--brand-color-fill-tertiary); }
.s-screen .bar .url { margin-left: 1cqi; height: 2.4cqi; flex: 1; max-width: 36cqi; border-radius: 1cqi; background: var(--brand-color-fill-quaternary); }
.s-screen .canvas { display: grid; grid-template-columns: 16cqi 1fr; min-height: 22cqi; }
.s-screen .nav { border-right: var(--brand-line-width) solid var(--brand-color-border-secondary); padding: 2cqi 1.6cqi; display: flex; flex-direction: column; gap: 1.4cqi; }
.s-screen .nav span { height: 1.5cqi; border-radius: 1cqi; background: var(--brand-color-fill-quaternary); }
.s-screen .nav span:first-child { background: var(--brand-color-primary); width: 70%; }
.s-screen .main { padding: 2.4cqi; display: flex; flex-direction: column; gap: 1.6cqi; }
.s-screen .main .h { height: 3cqi; width: 44%; border-radius: 0.8cqi; background: var(--brand-color-fill-tertiary); }
.s-screen .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; }
.s-screen .tiles i { height: 9cqi; border-radius: 1.2cqi; background: var(--brand-color-fill-quaternary); border: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.s-screen .tiles i:first-child { background: var(--brand-color-primary-bg); border-color: var(--brand-color-primary-border); }
/* solution: oversized signature line */
.s-pillars { display: flex; flex-wrap: wrap; gap: 1.2cqi; margin-top: 3.6cqi; }
.s-pill { display: inline-flex; align-items: center; gap: 1cqi; padding: 1.2cqi 2cqi; border-radius: 6cqi; border: var(--brand-line-width) solid var(--brand-color-border); font-size: 1.6cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-secondary); }
.s-pill .dot { width: 1cqi; height: 1cqi; border-radius: 50%; background: var(--brand-color-primary); }
/* pager UI */
.deck-ui { position: fixed; right: 24px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 10px; }
.deck-ui button {
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
border: var(--brand-line-width) solid var(--brand-color-border);
background: var(--brand-color-bg-container); color: var(--brand-color-text-secondary);
font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
transition: border-color .15s ease, color .15s ease;
}
.deck-ui button:hover { border-color: var(--brand-color-primary); color: var(--brand-color-primary); }
.deck-counter { font-size: 12px; color: var(--brand-color-text-tertiary); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; letter-spacing: 0.04em; }
.deck-dots { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 30; display: flex; gap: 8px; }
.deck-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-color-fill); cursor: pointer; transition: all .2s ease; }
.deck-dot.on { background: var(--brand-color-primary); transform: scale(1.3); }
</style>
</head>
<body>
<main class="deck">
<section class="slide">
<div class="frame frame--accent">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">SOPHISTICATED · QUIET · ESSENTIAL</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Sophisticated · Quiet · Essential</span>
<h1 class="s-mega">Malenia</h1>
<p class="s-lede" style="font-size:2.6cqi;color:rgba(255,255,255,0.92);">Свобода. Практика. Простота.</p>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">01 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame frame--surface">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">THE PROBLEM</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">The problem</span>
<h2 class="s-title">Getting this category right is still painfully hard.</h2>
<p class="s-lede">A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.</p>
<div class="s-grid" style="grid-template-columns:repeat(3,1fr);">
<div class="s-card"><span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span><h3>Tools don't talk</h3><p>Work scatters across apps that never share a source of truth, so context is lost on every handoff.</p></div>
<div class="s-card"><span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span><h3>Every loop costs a day</h3><p>Iteration stalls in coordination — approvals, exports, re-dos — long before anything ships.</p></div>
<div class="s-card"><span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span><h3>Quality is a coin flip</h3><p>Output depends on whoever happened to do the work, not on a standard you can rely on.</p></div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">02 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">THE SOLUTION</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">The solution</span>
<h2 class="s-title"><span class="s-accent">Malenia</span> is how teams get свобода. Практика. Простота</h2>
<div class="s-pillars">
<span class="s-pill"><span class="dot"></span>Network freedom</span>
<span class="s-pill"><span class="dot"></span>Practical simplicity</span>
<span class="s-pill"><span class="dot"></span>Aesthetic restraint</span>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">03 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">WHY NOW</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Why now</span>
<p class="s-quote">The shift toward <span class="s-accent">sophisticated</span>, accountable this category is happening now — and the teams that move first set the standard.</p>
<div class="s-byline">
<span class="av">M</span>
<div><div class="n">Malenia</div><div class="r">malenia.space</div></div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">04 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame frame--surface">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">MARKET</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Market</span>
<h2 class="s-title">The opportunity is large and still wide open.</h2>
<div class="s-bars">
<div class="s-bar"><span class="tag">TAM</span>
<div class="lane"><div class="track" style="width:100%;background:var(--brand-color-primary);"></div></div>
<span class="val">$48B total market</span></div>
<div class="s-bar"><span class="tag">SAM</span>
<div class="lane"><div class="track" style="width:64%;background:var(--brand-color-primary-hover);"></div></div>
<span class="val">$12B reachable today</span></div>
<div class="s-bar"><span class="tag">SOM</span>
<div class="lane"><div class="track" style="width:30%;background:var(--brand-color-primary-active);"></div></div>
<span class="val">$1.4B near-term wedge</span></div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">05 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">PRODUCT</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Product</span>
<h2 class="s-title">Malenia is real, shipping, and good to use today.</h2>
<div class="s-screen">
<div class="bar"><i></i><i></i><i></i><span class="url"></span></div>
<div class="canvas">
<div class="nav"><span></span><span></span><span></span><span></span><span></span></div>
<div class="main"><div class="h"></div><div class="tiles"><i></i><i></i><i></i></div></div>
</div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">06 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame frame--surface">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">BUSINESS MODEL</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Business model</span>
<h2 class="s-title">We make money the moment we create value.</h2>
<div class="s-grid" style="grid-template-columns:repeat(3,1fr);">
<div class="s-card">
<h3>Starter</h3>
<div style="font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;">$0<span style="font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;"> / mo</span></div>
<p style="-webkit-line-clamp:3;">Up to 3 projects · Network freedom · Community support</p>
</div>
<div class="s-card" style="border-color:var(--brand-color-primary);border-width:1.5px;">
<h3>Pro</h3>
<div style="font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;">$29<span style="font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;"> / mo</span></div>
<p style="-webkit-line-clamp:3;">Unlimited projects · Practical simplicity · Aesthetic restraint</p>
</div>
<div class="s-card">
<h3>Enterprise</h3>
<div style="font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;">Custom<span style="font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;"> </span></div>
<p style="-webkit-line-clamp:3;">SSO &amp; audit logs · Dedicated success manager · Custom contracts &amp; SLA</p>
</div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">07 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">COMPETITION &amp; MOAT</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Competition &amp; moat</span>
<h2 class="s-title">Only Malenia is built sophisticated from the ground up.</h2>
<div class="s-matrix" style="grid-template-columns:1fr;">
<div class="row head" style="grid-template-columns:18cqi repeat(3,1fr);">
<span></span><span class="cell">Built for teams</span><span class="cell">Fast to value</span><span class="cell">On-brand by default</span>
</div>
<div class="row them" style="grid-template-columns:18cqi repeat(3,1fr);">
<span class="cell who" style="color:var(--brand-color-text);">Fieldnote</span>
<span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span><span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span><span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span>
</div>
<div class="row them" style="grid-template-columns:18cqi repeat(3,1fr);">
<span class="cell who" style="color:var(--brand-color-text);">Arcadia</span>
<span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span><span class="cell"><span class="mk no"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg></span></span>
</div>
<div class="row us" style="grid-template-columns:18cqi repeat(3,1fr);">
<span class="cell who">Malenia</span>
<span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span><span class="cell"><span class="mk yes"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span></span>
</div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">08 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame frame--accent">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">TRACTION</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Traction</span>
<h2 class="s-title" style="font-size:5cqi;">People already want this — and the line is going up.</h2>
<div class="s-grid" style="grid-template-columns:repeat(4,1fr);margin-top:5cqi;">
<div class="s-metric"><div class="v">10k+</div><div class="l">Teams onboard</div></div>
<div class="s-metric"><div class="v">99.9%</div><div class="l">Uptime SLA</div></div>
<div class="s-metric"><div class="v">4.9/5</div><div class="l">Average rating</div></div>
<div class="s-metric"><div class="v">120+</div><div class="l">Integrations</div></div>
</div>
<p class="s-lede" style="color:rgba(255,255,255,0.78);font-size:1.5cqi;max-width:64cqi;margin-top:3.4cqi;">Illustrative figures — replace with your live numbers before pitching.</p>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">09 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame frame--surface">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">TEAM</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">Team</span>
<h2 class="s-title">The people behind Malenia have done this before.</h2>
<div class="s-team">
<div class="s-card" style="background:transparent;border:none;padding:0;">
<span class="s-avatar">MC</span>
<h3 style="font-size:1.9cqi;margin:0 0 0.4cqi;">Maya Chen</h3>
<p style="-webkit-line-clamp:2;">Head of Design, Northwind</p>
</div>
<div class="s-card" style="background:transparent;border:none;padding:0;">
<span class="s-avatar">JW</span>
<h3 style="font-size:1.9cqi;margin:0 0 0.4cqi;">Jonas Weber</h3>
<p style="-webkit-line-clamp:2;">Engineering Lead, Lumen Labs</p>
</div>
<div class="s-card" style="background:transparent;border:none;padding:0;">
<span class="s-avatar">PN</span>
<h3 style="font-size:1.9cqi;margin:0 0 0.4cqi;">Priya Natarajan</h3>
<p style="-webkit-line-clamp:2;">Founder, Fieldnote</p>
</div>
</div>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">10 / 11</span></div>
</div>
</section>
<section class="slide">
<div class="frame frame--accent">
<div class="f-head"><span class="wm">Malenia</span><span class="rule"></span><span class="ix">THE ASK</span></div>
<div class="f-body">
<div class="f-fit">
<span class="s-kicker">The ask</span>
<h2 class="s-mega" style="font-size:6.4cqi;">Let's build the future of this category together.</h2>
<div class="s-ask">
<div class="item"><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span><span class="k">Partner with us</span> — back the team building the sophisticated standard for this market.</span></div>
<div class="item"><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span><span class="k">Fuel the next phase</span> — scale the product, the go-to-market motion, and the team.</span></div>
<div class="item"><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span><span class="k">Hit the milestone</span> — reach the next tier of customers and revenue within 12 months.</span></div>
</div>
<a class="s-cta">Talk to us &middot; malenia.space <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
</div>
</div>
<div class="f-foot"><span>malenia.space</span><span class="rule"></span><span class="ix">11 / 11</span></div>
</div>
</section>
</main>
<div class="deck-dots"><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span><span class="deck-dot"></span></div>
<div class="deck-ui">
<button class="deck-prev" aria-label="Previous slide">&larr;</button>
<span class="deck-counter">1 / 11</span>
<button class="deck-next" aria-label="Next slide">&rarr;</button>
</div>
<script>
(function () {
/* od-deck-fit: shrink-to-fit guarantee — keep every slide's content inside
the fixed 16:9 frame so brand copy of any length never clips. */
function fitFrame(body) {
var fit = body.querySelector('.f-fit');
if (!fit) return;
fit.style.transform = 'none';
var availH = body.clientHeight;
var availW = fit.clientWidth;
if (availH <= 0 || availW <= 0) return;
var naturalH = fit.offsetHeight;
var naturalW = fit.scrollWidth;
var scale = Math.min(1, availH / naturalH, availW / naturalW);
if (scale < 1) {
// small safety margin so descenders never touch the clip edge
fit.style.transform = 'scale(' + (scale * 0.98) + ')';
}
}
function fitAll() {
[].forEach.call(document.querySelectorAll('.f-body'), fitFrame);
}
// Fit synchronously rather than via requestAnimationFrame: rAF callbacks are
// throttled while the deck is offscreen/occluded, which would leave a slide
// unscaled (and clipped) until first paint. A trailing settle pass catches
// late reflow (web-font swap, image load).
var fitTimer;
function scheduleFit() {
fitAll();
if (fitTimer) clearTimeout(fitTimer);
fitTimer = setTimeout(fitAll, 150);
}
window.addEventListener('resize', scheduleFit);
if (document.fonts && document.fonts.ready) {
document.fonts.ready.then(fitAll).catch(function () {});
}
window.addEventListener('load', fitAll);
scheduleFit();
var deck = document.querySelector('.deck');
var slides = [].slice.call(document.querySelectorAll('.slide'));
var dots = [].slice.call(document.querySelectorAll('.deck-dot'));
var counter = document.querySelector('.deck-counter');
var idx = 0;
function render() {
if (counter) counter.textContent = (idx + 1) + ' / ' + slides.length;
dots.forEach(function (d, n) { d.classList.toggle('on', n === idx); });
}
function go(i) {
idx = Math.max(0, Math.min(slides.length - 1, i));
slides[idx].scrollIntoView({ behavior: 'smooth' });
render();
}
deck.addEventListener('scroll', function () {
requestAnimationFrame(function () {
var i = Math.round(deck.scrollTop / deck.clientHeight);
if (i !== idx && i >= 0 && i < slides.length) { idx = i; render(); }
});
});
window.addEventListener('keydown', function (e) {
if (['ArrowDown', 'ArrowRight', 'PageDown', ' '].indexOf(e.key) > -1) { e.preventDefault(); go(idx + 1); }
else if (['ArrowUp', 'ArrowLeft', 'PageUp'].indexOf(e.key) > -1) { e.preventDefault(); go(idx - 1); }
else if (e.key === 'Home') { e.preventDefault(); go(0); }
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
});
dots.forEach(function (d, n) { d.addEventListener('click', function () { go(n); }); });
document.querySelector('.deck-prev').addEventListener('click', function () { go(idx - 1); });
document.querySelector('.deck-next').addEventListener('click', function () { go(idx + 1); });
render();
})();
</script>
</body>
</html>