michtang
/
fintech_intro_deck


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Financial Technology 20/30 — Mr. Tang</title>

<!-- ===========================================
     FONTS
     Archivo Black  = display headlines (heavy, tight, uppercase)
     Archivo        = body copy
     Space Mono     = UI labels, years, spec readouts (the "Hextech UI" voice)
     =========================================== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

<style>
/* ===========================================
   THEME TOKENS — change these to reskin the deck
   =========================================== */
:root{
  /* Riot palette */
  --void:      #0F141C;   /* primary dark   */
  --deep:      #070A0E;   /* deepest bg     */
  --charcoal:  #141A24;   /* container fill */
  --charcoal2: #1A212D;   /* raised fill    */
  --crimson:   #EB0029;   /* primary accent */
  --gold:      #C2A66C;   /* secondary      */
  --light:     #F3F3F3;   /* type on dark   */
  --body:      #B4BCC8;   /* body copy      */
  --muted:     #7E8899;   /* labels         */

  /* Type stack */
  --font-display: 'Archivo Black', sans-serif;
  --font-body:    'Archivo', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .85s;

  /* Stage chrome */
  --stage-bg: #000;
  --slide-bg: var(--void);
}

*{margin:0;padding:0;box-sizing:border-box}

/* ===========================================
   FIXED 16:9 STAGE — MANDATORY BASE
   (full contents of viewport-base.css)
   Slides are authored at 1920x1080 and the whole
   stage is scaled by one transform to fit the window.
   =========================================== */
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--stage-bg,#000)}

.deck-viewport{position:fixed;inset:0;overflow:hidden;background:var(--stage-bg,#000)}

.deck-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;
  transform-origin:0 0;background:var(--slide-bg,#fff)}

.slide{position:absolute;inset:0;width:1920px;height:1080px;overflow:hidden;display:block;
  visibility:hidden;opacity:0;pointer-events:none;background:var(--slide-bg,#fff)}

.slide.active,.slide.visible{visibility:visible;opacity:1;pointer-events:auto;z-index:1}

img,video,canvas,svg{max-width:100%;max-height:100%}

.deck-controls{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1000}

@media print{
  html,body{width:1920px;height:auto;overflow:visible;background:#fff}
  .deck-viewport{position:static;overflow:visible;background:#fff}
  .deck-stage{position:static;width:auto;height:auto;transform:none!important;background:none}
  .slide{position:relative;display:block!important;visibility:visible!important;opacity:1!important;
    pointer-events:auto!important;width:1920px;height:1080px;break-after:page;page-break-after:always}
  .slide:last-child{break-after:auto;page-break-after:auto}
  .deck-controls{display:none!important}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.2s!important}
}

/* ===========================================
   SHARED ATMOSPHERE
   Every slide gets: engineering grid + directional
   crimson glow + heavy vignette. This is the deck's
   single strongest visual signature.
   =========================================== */
.atmos{position:absolute;inset:0;pointer-events:none}
.atmos .base{position:absolute;inset:0;background:var(--deep)}
.atmos .grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(243,243,243,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(243,243,243,.04) 1px,transparent 1px);
  background-size:80px 80px}
.atmos .glow{position:absolute;inset:0;
  background:radial-gradient(ellipse 1000px 900px at 20% 55%, rgba(235,0,41,.20), transparent 62%),
             radial-gradient(ellipse 800px 700px at 94% 10%, rgba(194,166,108,.09), transparent 60%)}
.atmos .vig{position:absolute;inset:0;
  background:radial-gradient(ellipse 1400px 1000px at 45% 50%, transparent 42%, rgba(7,10,14,.84) 90%)}

/* Diagonal crimson shard — the one aggressive angle in the system.
   Sits top-right on most slides; mirrored on the closing slide. */
.shard{position:absolute;top:-120px;right:-60px;width:560px;height:560px;opacity:.26;
  background:linear-gradient(200deg, rgba(235,0,41,.85), rgba(235,0,41,0) 62%);
  clip-path:polygon(100% 0, 100% 46%, 34% 100%, 0 66%);pointer-events:none}
.shard.flip{top:auto;bottom:-120px;left:-60px;right:auto;transform:rotate(180deg)}

/* ===========================================
   SLIDE HEADER — kicker + section title
   Repeated on every content slide for rhythm.
   =========================================== */
.s-head{position:absolute;left:120px;top:104px;right:120px;z-index:3}
.kicker{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.kicker .tick{width:52px;height:3px;background:var(--crimson);flex:none}
.kicker span{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.36em;
  text-transform:uppercase;color:var(--gold);white-space:nowrap}
.s-head h2{font-family:var(--font-display);text-transform:uppercase;font-size:82px;line-height:.92;
  letter-spacing:-.030em;color:var(--light)}
.s-head h2 .hot{color:var(--crimson);text-shadow:0 0 46px rgba(235,0,41,.45)}

/* ===========================================
   PANEL — the core container of the design system.
   Sharp corners, gold hairline, crimson left edge.
   =========================================== */
.panel{background:linear-gradient(160deg, rgba(20,26,36,.94), rgba(15,20,28,.84));
  border:1px solid rgba(194,166,108,.30);border-left:3px solid var(--crimson);position:absolute;z-index:3}
.panel.quiet{border-left-color:rgba(194,166,108,.45)}

/* Media frame: photographs always sit in a hard-edged frame,
   never bare. Crimson top edge + inner darkening for legibility. */
.media{position:absolute;overflow:hidden;z-index:3;background:var(--charcoal);
  border:1px solid rgba(194,166,108,.28)}
.media::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--crimson);z-index:2}
.media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.04)}
/* Bottom scrim so overlay captions stay readable on any photo */
.media .scrim{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(7,10,14,.92))}
.media .cap{position:absolute;left:26px;right:26px;bottom:22px;z-index:2}
.media .cap .l{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:7px}
.media .cap .t{font-family:var(--font-body);font-size:23px;font-weight:600;color:var(--light);line-height:1.25}
.media.sm .cap{left:16px;right:16px;bottom:13px}
.media.sm .cap .t{font-size:16px;font-weight:600}
.media.sm .cap .l{font-size:10px;letter-spacing:.20em;margin-bottom:4px}

/* ===========================================
   REVEAL ANIMATION
   Elements fade + rise when their slide becomes visible.
   Per-element delay via inline --d custom property.
   =========================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d,0s)}
.slide.visible .reveal{opacity:1;transform:none}

.reveal-x{opacity:0;transform:translateX(-34px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d,0s)}
.slide.visible .reveal-x{opacity:1;transform:none}

.reveal-w{opacity:0;transform:scaleX(0);transform-origin:left;
  transition:opacity .5s var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d,0s)}
.slide.visible .reveal-w{opacity:1;transform:none}

/* ===========================================
   SLIDE 1 — TITLE
   =========================================== */
.t-dossier{left:120px;top:236px;width:452px;padding:44px 40px 40px}
.t-dossier h3{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:30px}
.t-row{padding:19px 0;border-top:1px solid rgba(243,243,243,.09)}
.t-row:first-of-type{border-top:none;padding-top:0}
.t-row .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:9px}
.t-row .v{font-family:var(--font-body);font-size:27px;font-weight:600;color:var(--light);
  display:flex;align-items:center;gap:12px}
.t-row .v svg{width:21px;height:21px;flex:none}
.t-row .v em{font-style:normal;color:var(--gold)}
/* Two Instagram handles stacked under one icon: the personal
   account leads, the business account sits beneath it in a
   lighter weight so the hierarchy stays clear. */
.t-row .v .handles{display:flex;flex-direction:column;gap:7px;min-width:0}
.t-row .v .handles .alt{font-size:20px;font-weight:500;color:var(--body);letter-spacing:-.005em}

.t-head{position:absolute;left:700px;top:262px;right:120px;z-index:3}
.t-head h1{font-family:var(--font-display);text-transform:uppercase;font-size:146px;line-height:.85;
  letter-spacing:-.035em;color:var(--light)}
.t-head h1 .accent{color:var(--crimson);text-shadow:0 0 54px rgba(235,0,41,.55);display:block}
.t-head h1 .ln{display:block}
.t-sub{margin-top:46px;padding-top:34px;border-top:1px solid rgba(194,166,108,.30);
  font-family:var(--font-body);font-size:25px;line-height:1.55;color:var(--body);max-width:830px}
.t-sub strong{color:var(--light);font-weight:600}
.t-tags{margin-top:40px;display:flex}
.t-tag{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);padding:12px 26px;
  border:1px solid rgba(243,243,243,.14);margin-right:-1px}
.t-tag.hot{color:var(--light);border-color:var(--crimson);background:rgba(235,0,41,.13)}

.rail{position:absolute;left:120px;right:120px;bottom:80px;height:1px;background:rgba(243,243,243,.13);z-index:3}
.railtext{position:absolute;left:120px;right:120px;bottom:44px;display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);z-index:3}
.railtext .hot{color:var(--crimson)}
/* Single-item rail: keep the marker pinned right */
.railtext.right{justify-content:flex-end}

/* ===========================================
   SLIDE 2 — BACKGROUND (timeline + thesis)
   =========================================== */
.tl{position:absolute;left:120px;top:368px;width:830px;z-index:3}
.tl-item{position:relative;padding-left:74px;padding-bottom:58px}
.tl-item:last-child{padding-bottom:0}
/* vertical connector rail */
.tl-item::before{content:"";position:absolute;left:11px;top:26px;bottom:-4px;width:1px;
  background:rgba(194,166,108,.32)}
.tl-item:last-child::before{display:none}
/* node marker — rotated square, Hextech-ish */
.tl-item::after{content:"";position:absolute;left:5px;top:9px;width:14px;height:14px;
  background:var(--crimson);transform:rotate(45deg);box-shadow:0 0 18px rgba(235,0,41,.75)}
.tl-item.gold::after{background:var(--gold);box-shadow:0 0 16px rgba(194,166,108,.55)}
.tl-item .yr{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.tl-item .ttl{font-family:var(--font-body);font-size:38px;font-weight:700;color:var(--light);
  line-height:1.1;letter-spacing:-.01em}
.tl-item .det{font-family:var(--font-body);font-size:22px;color:var(--muted);margin-top:8px;line-height:1.45}

/* Right-hand thesis statement */
.thesis{position:absolute;left:1060px;top:342px;right:120px;z-index:3}
.thesis .big{font-family:var(--font-display);text-transform:uppercase;font-size:82px;line-height:.94;
  letter-spacing:-.030em;color:var(--light)}
.thesis .big .hot{color:var(--crimson);text-shadow:0 0 44px rgba(235,0,41,.45)}
.thesis .note{margin-top:40px;border-left:3px solid var(--gold);padding:6px 0 6px 26px;
  font-family:var(--font-body);font-size:24px;line-height:1.6;color:var(--body)}

/* ===========================================
   SLIDE 3 — WHAT I'VE BUILT (ventures + team photo)
   =========================================== */
.vent{position:absolute;left:120px;top:316px;width:800px;z-index:3}
.v-row{display:flex;align-items:baseline;gap:26px;padding:26px 0;
  border-top:1px solid rgba(243,243,243,.10)}
.v-row:first-child{border-top:none}
.v-row .yr{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.16em;
  color:var(--gold);width:168px;flex:none;white-space:nowrap}
.v-row .nm{font-family:var(--font-body);font-size:34px;font-weight:700;color:var(--light);
  letter-spacing:-.005em;line-height:1.15}
.v-row .nm small{display:block;font-size:20px;font-weight:400;color:var(--muted);
  margin-top:6px;letter-spacing:0}
.v-row.now .yr{color:var(--crimson)}
.v-row.now .nm{color:var(--light)}

/* Live badge on the current venture */
.livebadge{display:inline-flex;align-items:center;gap:8px;margin-left:14px;vertical-align:middle;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--crimson);border:1px solid var(--crimson);
  background:rgba(235,0,41,.13);padding:5px 10px 4px}
.livebadge i{width:7px;height:7px;background:var(--crimson);display:block;
  box-shadow:0 0 10px var(--crimson);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ===========================================
   SLIDE 4 — OFF THE CLOCK (photo mosaic)
   =========================================== */
.mos-strip{position:absolute;left:920px;top:868px;right:120px;z-index:3;
  font-family:var(--font-body);font-size:21px;color:var(--muted);line-height:1.5}
.mos-strip b{color:var(--light);font-weight:600}
.mos-strip .dot{color:var(--crimson);padding:0 8px}

/* ===========================================
   SLIDE 5 — THE RIG (spec panel + photo triptych)
   =========================================== */
.spec{left:120px;top:290px;width:520px;padding:40px 36px 36px}
.spec h3{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin-bottom:30px}
.sp-row{padding:26px 0;border-top:1px solid rgba(243,243,243,.10)}
.sp-row:first-of-type{border-top:none;padding-top:0}
.sp-row .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:11px}
.sp-row .v{font-family:var(--font-body);font-size:33px;font-weight:700;color:var(--light);
  letter-spacing:-.01em;line-height:1.1}
.sp-row .v span{color:var(--crimson)}
.sp-foot{margin-top:30px;padding-top:24px;border-top:1px solid rgba(194,166,108,.28);
  font-family:var(--font-body);font-size:19px;line-height:1.55;color:var(--body)}

/* ===========================================
   SLIDE 6 — WHAT IS FINTECH (three pillars)
   =========================================== */
/* Flex column so the bottom label pins to the panel floor,
   giving all three pillars a shared baseline. */
.pil{top:300px;height:590px;padding:40px 34px 34px;overflow:hidden;
  display:flex;flex-direction:column}
.pil .num{position:absolute;right:20px;top:6px;font-family:var(--font-display);font-size:132px;
  line-height:1;color:rgba(243,243,243,.045);letter-spacing:-.04em;pointer-events:none}
.pil h3{font-family:var(--font-display);text-transform:uppercase;font-size:40px;line-height:1.0;
  letter-spacing:-.025em;color:var(--light);position:relative;z-index:2;min-height:80px}
.pil h3 .hot{color:var(--crimson)}
/* Long single-word headings get a step down so they never
   run into the ghost number watermark. */
.pil.long h3{font-size:33px}
.pil .bar{width:64px;height:3px;background:var(--gold);margin:22px 0 24px;position:relative;z-index:2}
.pil p{font-family:var(--font-body);font-size:22px;line-height:1.6;color:var(--body);
  position:relative;z-index:2}
.pil p + p{margin-top:16px}
.pil .kv{margin-top:auto;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);position:relative;z-index:2}

/* Inset photo inside pillar 1 */
.pil-media{position:absolute;left:34px;right:34px;bottom:34px;height:196px;overflow:hidden;
  border:1px solid rgba(194,166,108,.28);z-index:2}
.pil-media img{width:100%;height:100%;object-fit:cover;display:block}
.pil-media .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,10,14,.15),rgba(7,10,14,.90))}
.pil-media .cap{position:absolute;left:16px;right:16px;bottom:12px;font-family:var(--font-mono);
  font-size:11px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:var(--gold);
  line-height:1.5}
.pil-media .cap b{display:block;font-family:var(--font-body);font-size:16px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--light);margin-top:5px}

/* ===========================================
   SLIDE 7 — CLOSING
   =========================================== */
.close-wrap{position:absolute;left:120px;top:288px;right:120px;z-index:3}
.close-wrap h1{font-family:var(--font-display);text-transform:uppercase;font-size:168px;line-height:.84;
  letter-spacing:-.038em;color:var(--light)}
.close-wrap h1 .hot{color:var(--crimson);text-shadow:0 0 60px rgba(235,0,41,.55);display:block}
.close-sub{margin-top:44px;font-family:var(--font-body);font-size:29px;line-height:1.55;
  color:var(--body);max-width:900px}
.close-sub strong{color:var(--light);font-weight:600}

.cta-grid{position:absolute;left:120px;right:120px;bottom:150px;display:flex;gap:0;z-index:3}
.cta{flex:1;border:1px solid rgba(243,243,243,.14);border-left:3px solid var(--crimson);
  margin-right:-1px;padding:30px 32px 28px;
  background:linear-gradient(160deg,rgba(20,26,36,.92),rgba(15,20,28,.80))}
.cta .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:14px}
.cta .v{font-family:var(--font-body);font-size:29px;font-weight:600;color:var(--light);
  display:flex;align-items:center;gap:13px;line-height:1.2}
.cta .v svg{width:24px;height:24px;flex:none}
.cta .v small{display:block;font-size:18px;font-weight:400;color:var(--muted);margin-top:5px}

/* ===========================================
   DECK CHROME — outside the 1920x1080 stage
   =========================================== */
.deck-controls{display:flex;align-items:center;gap:18px;
  background:rgba(7,10,14,.82);border:1px solid rgba(194,166,108,.26);padding:9px 16px;
  backdrop-filter:blur(8px);opacity:.28;transition:opacity .3s ease}
.deck-controls:hover{opacity:1}
.dots{display:flex;gap:9px}
.dot{width:9px;height:9px;background:rgba(243,243,243,.22);cursor:pointer;
  transition:background .25s ease,transform .25s ease;border:none;padding:0}
.dot:hover{background:rgba(243,243,243,.5)}
.dot.on{background:var(--crimson);transform:rotate(45deg);box-shadow:0 0 12px rgba(235,0,41,.8)}
.count{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--muted);
  min-width:52px;text-align:right}
.count b{color:var(--light);font-weight:700}

/* Progress bar pinned to the very bottom of the window */
.progress{position:fixed;left:0;bottom:0;height:3px;background:var(--crimson);z-index:1001;
  box-shadow:0 0 14px rgba(235,0,41,.9);transition:width .5s var(--ease);width:0}

/* ===========================================
   INLINE EDIT MODE
   Hover the top-left hotzone, or press E.
   =========================================== */
.edit-hotzone{position:fixed;top:0;left:0;width:80px;height:80px;z-index:10000;cursor:pointer}
.edit-toggle{position:fixed;top:16px;left:16px;z-index:10001;width:44px;height:44px;
  background:rgba(7,10,14,.92);border:1px solid var(--crimson);color:var(--light);
  font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease}
.edit-toggle.show,.edit-toggle.active{opacity:1;pointer-events:auto}
.edit-toggle.active{background:var(--crimson)}
body.editing [contenteditable="true"]{outline:1px dashed rgba(194,166,108,.65);
  outline-offset:4px;cursor:text}
body.editing [contenteditable="true"]:focus{outline:2px solid var(--crimson);background:rgba(235,0,41,.07)}
.edit-hint{position:fixed;top:16px;left:72px;z-index:10001;
  background:rgba(7,10,14,.94);border:1px solid rgba(194,166,108,.4);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);padding:13px 16px;display:none;white-space:nowrap}
body.editing .edit-hint{display:block}
</style>
</head>
<body>

<div class="deck-viewport">
<main class="deck-stage" id="deckStage">

<!-- ===========================================
     SLIDE 1 — TITLE
     Asymmetric: metadata dossier left, oversized
     headline offset right.
     =========================================== -->
<section class="slide title-slide active visible" aria-label="Title">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard"></div>

  <aside class="panel t-dossier reveal-x" style="--d:.40s">
    <h3>Course File // 10/20/30</h3>
    <div class="t-row"><span class="k">Instructor</span><span class="v">Mr. Tang</span></div>
    <div class="t-row"><span class="k">Room</span><span class="v"><em>2303</em></span></div>
    <div class="t-row"><span class="k">Emergencies</span><span class="v">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="6" width="13" height="12" rx="1.5" stroke="#EB0029" stroke-width="1.8"/><path d="M15 10.5L22 7v10l-7-3.5z" fill="#C2A66C"/></svg>
      Google Chat</span></div>
    <div class="t-row"><span class="k">Instagram</span><span class="v">
      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" stroke="#EB0029" stroke-width="1.8"/><circle cx="12" cy="12" r="4.2" stroke="#C2A66C" stroke-width="1.8"/><circle cx="17.4" cy="6.6" r="1.2" fill="#C2A66C"/></svg>
      <span class="handles">
        <span>_michtang</span>
        <span class="alt">codeninjassprucegrove</span>
      </span></span></div>
  </aside>

  <div class="t-head">
    <div class="kicker reveal" style="--d:.14s"><span class="tick"></span><span>Semester One</span></div>
    <h1>
      <span class="ln reveal" style="--d:.26s">Financial</span>
      <span class="accent reveal" style="--d:.38s">Technology</span>
    </h1>
    <p class="t-sub reveal" style="--d:.58s">How money works investing, entrepreneurship.</p>
    <div class="t-tags reveal" style="--d:.72s">
      <span class="t-tag hot">Financial Literacy</span>
      <span class="t-tag">Entrepreneurship</span>
      <span class="t-tag">Work Ethic</span>
    </div>
  </div>

  <div class="rail reveal" style="--d:.9s"></div>
  <div class="railtext right reveal" style="--d:.95s">
    <span class="hot">Day One</span>
  </div>
</section>

<!-- ===========================================
     SLIDE 2 — BACKGROUND
     Vertical timeline left, thesis statement right.
     No photograph: the type carries this one.
     =========================================== -->
<section class="slide" aria-label="Background">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard"></div>

  <header class="s-head">
    <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>01 &nbsp;/&nbsp; Background</span></div>
    <h2 class="reveal" style="--d:.18s">Where I <span class="hot">Started</span></h2>
  </header>

  <div class="tl">
    <div class="tl-item reveal-x" style="--d:.34s">
      <span class="yr">2011</span>
      <div class="ttl">Bachelor of Commerce</div>
      <div class="det">Business first &mdash; accounting, finance, how companies actually work.</div>
    </div>
    <div class="tl-item reveal-x" style="--d:.46s">
      <span class="yr">2013</span>
      <div class="ttl">Bachelor of Education</div>
      <div class="det">Then the decision to teach it instead of just do it.</div>
    </div>
    <div class="tl-item gold reveal-x" style="--d:.58s">
      <span class="yr">Classrooms</span>
      <div class="ttl">Grades 3, 5 and 11</div>
      <div class="det">Elementary to senior high &mdash; and a stretch teaching in the United Kingdom.</div>
    </div>
  </div>

  <div class="thesis">
    <div class="big reveal" style="--d:.52s">Commerce<br>first.<br><span class="hot">Classroom</span><br>second.</div>
    <p class="note reveal" style="--d:.70s">Which means this course isn&rsquo;t theory I read in a textbook. It&rsquo;s the stuff I had to learn the expensive way.</p>
  </div>
</section>

<!-- ===========================================
     SLIDE 3 — WHAT I'VE BUILT
     Venture list left, Code Ninjas team photo right.
     =========================================== -->
<section class="slide" aria-label="What I have built">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard"></div>

  <header class="s-head">
    <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>02 &nbsp;/&nbsp; Track Record</span></div>
    <h2 class="reveal" style="--d:.18s">What I&rsquo;ve <span class="hot">Built</span></h2>
  </header>

  <div class="vent">
    <div class="v-row reveal-x" style="--d:.34s">
      <span class="yr">Early</span>
      <div class="nm">T&#8209;Shirt Business<small>Design, inventory, margins &mdash; the first experiment.</small></div>
    </div>
    <div class="v-row reveal-x" style="--d:.44s">
      <span class="yr">2015-2016</span>
      <div class="nm">Website Development<small>Building for clients, quoting work, getting paid.</small></div>
    </div>
    <div class="v-row reveal-x" style="--d:.54s">
      <span class="yr">2017 &ndash; 2020</span>
      <div class="nm">Ethereum Mining<small>Hardware, power costs, and a very volatile asset.</small></div>
    </div>
    <div class="v-row now reveal-x" style="--d:.64s">
      <span class="yr">2021 &ndash; Present</span>
      <div class="nm">Code Ninjas<span class="livebadge"><i></i>Live</span><small>Co&#8209;owner of two locations: Spruce Grove &amp; North Edmonton.</small></div>
    </div>
  </div>

  <figure class="media reveal" style="left:990px;top:296px;width:810px;height:580px;--d:.48s">
    <img src="img/code-ninjas-team.png" alt="Code Ninjas staff team photo in front of a lime green CREATE wall">
    <div class="scrim"></div>
    <figcaption class="cap">
      <span class="l">Code Ninjas &middot; Spruce Grove</span>
      <span class="t">The team. Payroll, rent, marketing, hiring &mdash; every month, whether it&rsquo;s busy or not.</span>
    </figcaption>
  </figure>
</section>

<!-- ===========================================
     SLIDE 4 — OFF THE CLOCK
     Photo mosaic: one hero + two mid + a trio strip.
     =========================================== -->
<section class="slide" aria-label="Personal interests">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard"></div>

  <header class="s-head">
    <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>03 &nbsp;/&nbsp; Off the Clock</span></div>
    <h2 class="reveal" style="--d:.18s">When I&rsquo;m <span class="hot">Not Here</span></h2>
  </header>

  <!-- Hero: League profile -->
  <figure class="media reveal" style="left:120px;top:300px;width:760px;height:560px;--d:.34s">
    <img src="img/league-rank.png" alt="League of Legends profile showing Gold III rank, Honor Level 5, mastery score 331">
    
  </figure>

  <!-- Mid row -->
  <figure class="media sm reveal" style="left:920px;top:300px;width:425px;height:250px;--d:.44s">
    <img src="img/badminton.png" alt="Badminton racket and shuttlecocks on a gymnasium floor">
    
  </figure>

  <figure class="media sm reveal" style="left:1375px;top:300px;width:425px;height:250px;--d:.52s">
    <img src="img/budaejigae.png" alt="Korean army stew simmering in a metal pot">
    
  </figure>

  <!-- Starbucks trio strip -->
  <figure class="media sm reveal" style="left:920px;top:580px;width:273px;height:250px;--d:.60s">
    <img src="img/sbux-summer.png" alt="Starbucks summer berry refresher">
    
  </figure>
  <figure class="media sm reveal" style="left:1223px;top:580px;width:273px;height:250px;--d:.66s">
    <img src="img/sbux-mango.png" alt="Two Starbucks mango dragonfruit refreshers">
    
  </figure>
  <figure class="media sm reveal" style="left:1526px;top:580px;width:274px;height:250px;--d:.72s">
    <img src="img/sbux-cranberry.png" alt="Starbucks iced cranberry drink">
    
  </figure>

  <p class="mos-strip reveal" style="--d:.80s">
    Also: <b>running</b>, <b>weight lifting</b>, and an <b>indefensible Starbucks habit</b>
    <span class="dot">&mdash;</span> ask me what that one costs per year.
  </p>
</section>

<!-- ===========================================
     SLIDE 5 — THE RIG
     Spec panel + two-photo triptych.
     =========================================== -->
<section class="slide" aria-label="The rig">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard"></div>

  <header class="s-head">
    <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>04 &nbsp;/&nbsp; Hardware</span></div>
    <h2 class="reveal" style="--d:.18s">The <span class="hot">Rig</span></h2>
  </header>

  <aside class="panel spec reveal-x" style="--d:.34s">
    <h3>System Spec</h3>
    <div class="sp-row"><span class="k">Processor</span><span class="v">Ryzen 9 <span>3900X</span></span></div>
    <div class="sp-row"><span class="k">Memory</span><span class="v">64 GB <span>DDR4</span></span></div>
    <div class="sp-row"><span class="k">Graphics</span><span class="v">GeForce <span>RTX 3090</span></span></div>
    <p class="sp-foot">Built piece by piece, paid for by the businesses on the last slide. Every part was a decision about cost versus what it actually returns.</p>
  </aside>

  <figure class="media reveal" style="left:700px;top:290px;width:740px;height:600px;--d:.46s">
    <img src="img/gaming-setup.png" alt="Triple curved monitor gaming desk with red ambient lighting and a racing chair">
    
  </figure>

  <figure class="media reveal" style="left:1480px;top:290px;width:320px;height:600px;--d:.56s">
    <img src="img/gaming-rig.png" alt="Open PC case interior showing RGB memory, liquid cooler and RTX graphics card">
    <div class="scrim"></div>
    
</section>

<!-- ===========================================
     SLIDE 6 — WHAT IS FINTECH
     Three pillars. Pillar 1 carries an inset photo.
     =========================================== -->
<section class="slide" aria-label="What is fintech">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard"></div>

  <header class="s-head">
    <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>05 &nbsp;/&nbsp; The Course</span></div>
    <h2 class="reveal" style="--d:.18s">So What Is <span class="hot">Fintech?</span></h2>
  </header>

  <article class="panel pil reveal" style="left:120px;width:533px;--d:.34s">
    <span class="num">01</span>
    <h3>Financial<br><span class="hot">Literacy</span></h3>
    <div class="bar"></div>
    <p>How money actually works. Saving, investing, what an asset is, and why some things go up while other things quietly go to zero.</p>
    <div class="pil-media">
      <img src="img/pokemon-collection.png" alt="Graded Pokemon trading cards in protective cases">
      <div class="scrim"></div>
      <div class="cap">Condition, scarcity, demand<b>Everything is a market.</b></div>
    </div>
  </article>

  <article class="panel pil quiet long reveal" style="left:693px;width:533px;--d:.44s">
    <span class="num">02</span>
    <h3>Entrepre<span class="hot">neurship</span></h3>
    <div class="bar"></div>
    <p>What running a business really means &mdash; twelve months a year, not just when it&rsquo;s fun.</p>
    <p>Where the cash actually goes, and then planning and running your own.</p>
    <span class="kv">Fintech 20 &amp; 30</span>
  </article>

  <article class="panel pil quiet reveal" style="left:1266px;width:534px;--d:.54s">
    <span class="num">03</span>
    <h3>Work Ethic<br>&amp; <span class="hot">Attitude</span></h3>
    <div class="bar"></div>
    <p>The part no spreadsheet teaches. Showing up, doing the unglamorous work, and how you handle it when a plan doesn&rsquo;t survive contact with reality.</p>
    <p>This is the one that transfers to everything else.</p>
    <span class="kv">Every Job You&rsquo;ll Ever Have</span>
  </article>
</section>

<!-- ===========================================
     SLIDE 7 — CLOSING CTA
     =========================================== -->
<section class="slide" aria-label="Closing">
  <div class="atmos"><div class="base"></div><div class="grid"></div><div class="glow"></div><div class="vig"></div></div>
  <div class="shard flip"></div>

  <div class="close-wrap">
    <div class="kicker reveal" style="--d:.10s"><span class="tick"></span><span>Let&rsquo;s Get Started</span></div>
    <h1>
      <span class="reveal" style="--d:.24s">See You In</span>
      <span class="hot reveal" style="--d:.36s">Room 2303</span>
    </h1>
    <p class="close-sub reveal" style="--d:.56s">Bring a notebook and a question about money you&rsquo;ve always wanted answered. <strong>We&rsquo;ll start there.</strong></p>
  </div>

  <div class="cta-grid">
    <div class="cta reveal" style="--d:.70s">
      <span class="k">Can&rsquo;t make class</span>
      <span class="v">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="6" width="13" height="12" rx="1.5" stroke="#EB0029" stroke-width="1.8"/><path d="M15 10.5L22 7v10l-7-3.5z" fill="#C2A66C"/></svg>
        <span>Google Meet<small>Link posted before each session</small></span>
      </span>
    </div>
    <div class="cta reveal" style="--d:.78s">
      <span class="k">Instagram</span>
      <span class="v">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" stroke="#EB0029" stroke-width="1.8"/><circle cx="12" cy="12" r="4.2" stroke="#C2A66C" stroke-width="1.8"/><circle cx="17.4" cy="6.6" r="1.2" fill="#C2A66C"/></svg>
        <span>@_michtang<small>Course updates and reminders</small></span>
      </span>
    </div>
    <div class="cta reveal" style="--d:.86s">
      <span class="k">Find me outside school</span>
      <span class="v">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2.5L21 7v10l-9 4.5L3 17V7z" stroke="#EB0029" stroke-width="1.8"/><path d="M8.5 10.5l3.5 3.5 3.5-3.5" stroke="#C2A66C" stroke-width="1.8"/></svg>
        <span>Code Ninjas<small>Spruce Grove &amp; North Edmonton</small></span>
      </span>
    </div>
  </div>

  <div class="rail reveal" style="--d:.94s"></div>
  <div class="railtext reveal" style="--d:.98s">
    <span>Financial Technology 20 / 30 &nbsp;&middot;&nbsp; Mr. Tang</span>
    <span class="hot">Room 2303</span>
  </div>
</section>

</main>
</div>

<!-- ===========================================
     DECK CHROME (outside the scaled stage)
     =========================================== -->
<nav class="deck-controls" aria-label="Slide navigation">
  <div class="dots" id="dots"></div>
  <div class="count"><b id="cur">1</b> / <span id="tot">7</span></div>
</nav>
<div class="progress" id="progress"></div>

<!-- Inline editing affordance -->
<div class="edit-hotzone" aria-hidden="true"></div>
<button class="edit-toggle" id="editToggle" title="Edit mode (E)" aria-label="Toggle edit mode">&#9998;</button>
<div class="edit-hint">Click any text to edit &nbsp;&middot;&nbsp; Ctrl+S saves &nbsp;&middot;&nbsp; E exits</div>

<script>
/* ===========================================
   SLIDE PRESENTATION CONTROLLER
   Handles: fixed-stage scaling, keyboard / touch /
   wheel navigation, progress chrome.
   =========================================== */
class SlidePresentation {
  constructor(){
    this.slides  = Array.from(document.querySelectorAll('.slide'));
    this.stage   = document.getElementById('deckStage');
    this.current = 0;
    this.buildDots();
    this.setupStageScale();
    this.setupKeyboardNav();
    this.setupTouchNav();
    this.setupWheelNav();
    this.showSlide(0);
  }

  /* --- Scale the 1920x1080 stage uniformly into the window.
         Letterboxes / pillarboxes; never reflows content. --- */
  setupStageScale(){
    const scale = () => {
      const f = Math.min(window.innerWidth/1920, window.innerHeight/1080);
      const x = (window.innerWidth  - 1920*f)/2;
      const y = (window.innerHeight - 1080*f)/2;
      this.stage.style.transform = `translate(${x}px, ${y}px) scale(${f})`;
    };
    scale();
    window.addEventListener('resize', scale);
  }

  buildDots(){
    const wrap = document.getElementById('dots');
    document.getElementById('tot').textContent = this.slides.length;
    this.slides.forEach((_, i) => {
      const b = document.createElement('button');
      b.className = 'dot';
      b.setAttribute('aria-label', 'Go to slide ' + (i+1));
      b.addEventListener('click', () => this.showSlide(i));
      wrap.appendChild(b);
    });
    this.dots = Array.from(wrap.children);
  }

  setupKeyboardNav(){
    document.addEventListener('keydown', e => {
      // Never hijack keys while the user is editing text
      if (e.target.getAttribute && e.target.getAttribute('contenteditable') === 'true') return;
      switch(e.key){
        case 'ArrowRight': case 'ArrowDown': case ' ': case 'PageDown':
          e.preventDefault(); this.next(); break;
        case 'ArrowLeft': case 'ArrowUp': case 'PageUp':
          e.preventDefault(); this.prev(); break;
        case 'Home': e.preventDefault(); this.showSlide(0); break;
        case 'End':  e.preventDefault(); this.showSlide(this.slides.length-1); break;
      }
    });
  }

  setupTouchNav(){
    let sx = 0, sy = 0;
    document.addEventListener('touchstart', e => {
      sx = e.changedTouches[0].clientX; sy = e.changedTouches[0].clientY;
    }, {passive:true});
    document.addEventListener('touchend', e => {
      const dx = e.changedTouches[0].clientX - sx;
      const dy = e.changedTouches[0].clientY - sy;
      if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy)) {
        dx < 0 ? this.next() : this.prev();
      }
    }, {passive:true});
  }

  setupWheelNav(){
    let lock = false;
    document.addEventListener('wheel', e => {
      if (lock || document.body.classList.contains('editing')) return;
      if (Math.abs(e.deltaY) < 24) return;
      lock = true;
      e.deltaY > 0 ? this.next() : this.prev();
      setTimeout(() => lock = false, 700);
    }, {passive:true});
  }

  next(){ this.showSlide(this.current + 1); }
  prev(){ this.showSlide(this.current - 1); }

  showSlide(i){
    this.current = Math.max(0, Math.min(i, this.slides.length - 1));
    this.slides.forEach((s, n) => {
      const on = n === this.current;
      s.classList.toggle('active', on);
      s.classList.toggle('visible', on);
    });
    this.dots.forEach((d, n) => d.classList.toggle('on', n === this.current));
    document.getElementById('cur').textContent = this.current + 1;
    document.getElementById('progress').style.width =
      ((this.current + 1) / this.slides.length * 100) + '%';
  }
}

/* ===========================================
   INLINE TEXT EDITOR
   Press E or use the top-left hotzone. Edits persist
   to localStorage; Ctrl+S downloads the edited file.
   =========================================== */
class InlineEditor {
  constructor(deck){
    this.deck = deck;
    this.isActive = false;
    // Every text-bearing element that is safe to edit
    this.targets = Array.from(document.querySelectorAll(
      '.slide h1, .slide h2, .slide h3, .slide p, .slide .ttl, .slide .det, ' +
      '.slide .yr, .slide .nm, .slide .v, .slide .k, .slide .t, .slide .l, ' +
      '.slide .kicker span:last-child, .slide .t-tag, .slide .railtext span, ' +
      '.slide .kv, .slide .cap'
    ));
    this.restore();
    this.bind();
  }

  bind(){
    const toggle  = document.getElementById('editToggle');
    const hotzone = document.querySelector('.edit-hotzone');
    let hideTimer = null;

    // JS-driven hover with a grace period. A CSS `~` sibling
    // selector fails here because pointer-events breaks the chain.
    const show = () => { clearTimeout(hideTimer); toggle.classList.add('show'); };
    const hide = () => {
      hideTimer = setTimeout(() => {
        if (!this.isActive) toggle.classList.remove('show');
      }, 400);
    };
    hotzone.addEventListener('mouseenter', show);
    hotzone.addEventListener('mouseleave', hide);
    toggle.addEventListener('mouseenter', show);
    toggle.addEventListener('mouseleave', hide);
    hotzone.addEventListener('click', () => this.toggle());
    toggle.addEventListener('click',  () => this.toggle());

    document.addEventListener('keydown', e => {
      const editingNow = e.target.getAttribute &&
                         e.target.getAttribute('contenteditable') === 'true';
      if ((e.key === 'e' || e.key === 'E') && !editingNow) { this.toggle(); }
      if (e.key === 'Escape' && this.isActive) { this.toggle(); }
      if ((e.ctrlKey || e.metaKey) && e.key === 's' && this.isActive) {
        e.preventDefault(); this.download();
      }
    });
  }

  toggle(){
    this.isActive = !this.isActive;
    document.body.classList.toggle('editing', this.isActive);
    document.getElementById('editToggle').classList.toggle('active', this.isActive);
    this.targets.forEach((el, i) => {
      if (this.isActive){
        el.setAttribute('contenteditable', 'true');
        el.dataset.editKey = 'fintech-' + i;
        el.addEventListener('input', this.persist);
      } else {
        el.removeAttribute('contenteditable');
        el.removeEventListener('input', this.persist);
      }
    });
  }

  persist(){
    const store = JSON.parse(localStorage.getItem('fintechDeckEdits') || '{}');
    store[this.dataset.editKey] = this.innerHTML;
    localStorage.setItem('fintechDeckEdits', JSON.stringify(store));
  }

  restore(){
    const store = JSON.parse(localStorage.getItem('fintechDeckEdits') || '{}');
    this.targets.forEach((el, i) => {
      const saved = store['fintech-' + i];
      if (saved !== undefined) el.innerHTML = saved;
    });
  }

  // Save a copy of the edited deck to disk
  download(){
    const clone = document.documentElement.cloneNode(true);
    clone.querySelectorAll('[contenteditable]').forEach(n => {
      n.removeAttribute('contenteditable');
      n.removeAttribute('data-edit-key');
    });
    const blob = new Blob(['<!DOCTYPE html>\n' + clone.outerHTML], {type:'text/html'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'fintech-2030-deck.html';
    a.click();
    URL.revokeObjectURL(a.href);
  }
}

const deck = new SlidePresentation();
const editor = new InlineEditor(deck);
</script>
</body>
</html>