<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Editorial Deck Template</title>
<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=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<script src="deck-stage.js"></script>
<style>
  :root {
    --green: #2e4a2a;
    --green-deep: #243a21;
    --green-lite: #3a5a36;
    --pink: #e89cb1;
    --pink-deep: #d27e96;
    --cream: #efe7d4;
    --cream-2: #e6dcc4;
    --ink: #1a1a17;
    --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  }
  html, body { margin: 0; padding: 0; background: #111; }
  deck-stage { font-family: var(--serif); color: var(--ink); }

  section {
    box-sizing: border-box;
    width: 1920px;
    height: 1080px;
    padding: 96px 120px;
    background: var(--cream);
    color: var(--ink);
    position: relative;
    overflow: hidden;
  }

  .label {
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
  }

  /* ============ 01 — Cover ============ */
  .cover {
    background: var(--green);
    color: var(--pink);
    padding: 100px 140px;
  }
  .cover .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--pink);
  }
  .cover .topbar .label { color: var(--pink); }
  .cover .mark {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 28px;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
  .cover h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 220px;
    line-height: 0.92;
    letter-spacing: -0.02em;
    margin: 40px 0 0 0;
  }
  .cover .footline {
    position: absolute;
    bottom: 80px;
    left: 140px;
    right: 140px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 28px;
    color: var(--pink);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }

  /* ============ 02 — Agenda (tiles) ============ */
  .agenda {
    background: var(--cream);
    padding: 90px 120px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 36px;
  }
  .agenda .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 40px;
  }
  .agenda h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 96px;
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--green);
    margin: 0;
    white-space: nowrap;
  }
  .agenda .head .label { color: var(--green); white-space: nowrap; }
  .agenda-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 24px;
  }
  .topic {
    border-radius: 6px;
    position: relative;
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
  }
  .topic.t-green { background: var(--green); color: var(--pink); grid-row: span 2; }
  .topic.t-pink { background: var(--pink); color: var(--green-deep); }
  .topic.t-greenLite { background: var(--green-lite); color: var(--pink); }
  .topic.t-cream { background: var(--cream-2); color: var(--green); border: 2px solid var(--green); }
  .topic .num {
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.14em;
    font-weight: 500;
  }
  .topic h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 56px;
    line-height: 0.98;
    letter-spacing: -0.01em;
    margin: 28px 0 0 0;
  }
  .topic.t-green h3 { font-size: 84px; }
  .topic p {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.32;
    margin: 16px 0 0 0;
    max-width: 100%;
    font-weight: 400;
  }
  .topic .foot {
    font-family: var(--mono);
    font-size: 24px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 20px;
  }

  /* ============ 03 — Statement (big idea) ============ */
  .statement {
    background: var(--pink);
    color: var(--green-deep);
    padding: 130px 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .statement .label { color: var(--green-deep); }
  .statement blockquote {
    margin: 48px 0 0 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 140px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 1560px;
  }
  .statement .attrib {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 60px;
    font-family: var(--mono);
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    gap: 60px;
  }
  .statement .attrib > div { display: flex; flex-direction: column; gap: 14px; white-space: nowrap; }
  .statement .attrib .name {
    font-family: var(--serif);
    font-size: 44px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    line-height: 1;
  }

  /* ============ 04 — Two-column with image ============ */
  .two-col {
    background: var(--cream);
    display: grid;
    grid-template-columns: 880px 1fr;
    gap: 100px;
    align-items: stretch;
    padding: 110px 120px;
  }
  .two-col .col-img {
    background: var(--green);
    color: var(--pink);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .two-col .col-img .figure {
    font-family: var(--serif);
    font-size: 56px;
    color: var(--pink);
    font-weight: 500;
    text-align: center;
    padding: 0 40px;
    line-height: 1.05;
  }
  .two-col .col-img .caption {
    position: absolute;
    bottom: 36px;
    left: 36px;
    right: 36px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--pink);
  }
  .two-col .col-text { display: flex; flex-direction: column; padding-top: 8px; }
  .two-col .eyebrow {
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 500;
    margin-bottom: 32px;
  }
  .two-col h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 96px;
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--green);
    margin: 0 0 40px 0;
  }
  .two-col p {
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.38;
    color: var(--ink);
    margin: 0 0 24px 0;
    max-width: 760px;
    font-weight: 400;
    text-wrap: pretty;
  }
  .two-col .meta {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    border-top: 2px solid var(--green);
    padding-top: 32px;
  }
  .two-col .meta dt {
    font-family: var(--mono);
    font-size: 24px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 500;
    margin-bottom: 8px;
  }
  .two-col .meta dd {
    font-family: var(--serif);
    font-size: 32px;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
  }

  /* ============ 05 — Data / chart ============ */
  .data { background: var(--green); color: var(--cream); padding: 100px 120px; }
  .data .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
  }
  .data .head .label { color: var(--pink); }
  .data h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 84px;
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin: 16px 0 0 0;
    max-width: 1200px;
  }
  .data .legend {
    display: flex;
    gap: 36px;
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.1em;
    color: var(--cream);
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
  }
  .data .legend .sw {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 12px;
    vertical-align: -4px;
    border-radius: 2px;
  }
  .chart {
    margin-top: 110px;
    height: 520px;
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: 1fr 60px;
    column-gap: 24px;
  }
  .chart .yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 26px;
    color: var(--cream);
    text-align: right;
    padding-right: 8px;
    font-weight: 500;
  }
  .chart .plot {
    position: relative;
    border-left: 2px solid var(--cream);
    border-bottom: 2px solid var(--cream);
    padding: 0 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
  }
  .chart .grid-lines {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), rgba(239,231,212,0.18) calc(25% - 1px) 25%);
    pointer-events: none;
  }
  .bar-group { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; gap: 8px; }
  .bar-pair { display: flex; align-items: flex-end; gap: 12px; height: 100%; width: 100%; justify-content: center; }
  .bar { width: 56px; border-radius: 3px 3px 0 0; position: relative; }
  .bar.a { background: var(--pink); }
  .bar.b { background: var(--cream); }
  .bar .val {
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 24px;
    color: var(--cream);
    font-weight: 500;
  }
  .chart .xlabel-row {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    padding: 18px 30px 0;
    font-family: var(--mono);
    font-size: 26px;
    color: var(--cream);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .chart .xlabel { flex: 1; text-align: center; }
  .data .footnote {
    position: absolute;
    bottom: 60px;
    left: 120px;
    right: 120px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 26px;
    color: var(--pink);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }

  /* ============ 06 — Framework / 4 steps ============ */
  .framework { background: var(--cream); padding: 100px 120px; }
  .framework .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 40px;
  }
  .framework .head .label { color: var(--green); white-space: nowrap; }
  .framework h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 96px;
    line-height: 0.96;
    letter-spacing: -0.02em;
    color: var(--green);
    margin: 24px 0 0 0;
    max-width: 1500px;
  }
  .flow {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    align-items: stretch;
  }
  .step {
    border-radius: 8px;
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
    min-height: 470px;
    border: 2.5px solid var(--green);
    background: var(--cream);
    color: var(--green);
  }
  .step.fill { background: var(--green); color: var(--pink); border-color: var(--green); }
  .step.pinkfill { background: var(--pink); color: var(--green-deep); border-color: var(--pink-deep); }
  .step .num {
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.16em;
    font-weight: 500;
  }
  .step h3 {
    font-family: var(--serif);
    font-size: 68px;
    line-height: 0.96;
    letter-spacing: -0.01em;
    font-weight: 500;
    margin: 24px 0 24px 0;
  }
  .step p {
    font-family: var(--serif);
    font-size: 26px;
    line-height: 1.34;
    margin: 0;
    font-weight: 400;
  }
  .step .marker {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 24px;
    border-top: 2px solid currentColor;
    font-family: var(--mono);
    font-size: 24px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }

  /* ============ 07 — Big stats / KPI callouts ============ */
  .stats { background: var(--green); color: var(--cream); padding: 100px 120px; }
  .stats .head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 40px;
  }
  .stats .head .label { color: var(--pink); white-space: nowrap; }
  .stats h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 80px;
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--cream);
    margin: 18px 0 0 0;
    max-width: 1400px;
  }
  .kpi-row {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    border-top: 2px solid var(--pink);
    padding-top: 56px;
  }
  .kpi { display: flex; flex-direction: column; gap: 16px; }
  .kpi .tag {
    font-family: var(--mono);
    font-size: 24px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pink);
    font-weight: 500;
  }
  .kpi .big {
    font-family: var(--serif);
    font-size: 220px;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--pink);
    font-weight: 500;
  }
  .kpi .big .unit {
    font-size: 110px;
    color: var(--cream);
    margin-left: 4px;
  }
  .kpi .desc {
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1.32;
    color: var(--cream);
    margin: 8px 0 0 0;
    font-weight: 400;
  }

  /* ============ 08 — Summary / closing ============ */
  .summary { background: var(--green); color: var(--cream); padding: 110px 140px; }
  .summary .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .summary .topbar .label { color: var(--pink); }
  .summary h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 220px;
    line-height: 0.94;
    letter-spacing: -0.02em;
    color: var(--pink);
    margin: 50px 0 0 0;
  }
  .summary .grid-cols {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    border-top: 2px solid var(--pink);
    padding-top: 36px;
  }
  .summary .grid-cols h4 {
    font-family: var(--mono);
    font-size: 26px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 18px 0;
    font-weight: 500;
  }
  .summary .grid-cols p {
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.32;
    margin: 0;
    color: var(--cream);
    font-weight: 400;
  }

</style>
</head>
<body>

<deck-stage aspect="1920/1080" no-rail>

  <!-- ============ 01 — Cover ============ -->
  <section class="cover" data-screen-label="01 Cover">
    <div class="topbar">
      <span class="label">A Presentation Template</span>
      <div class="mark">01</div>
    </div>
    <h1>Quarterly<br/>Review<br/>2026</h1>
    <div class="footline">
      <span>Studio Placeholder</span>
      <span>Presented by Name Placeholder</span>
    </div>
  </section>

  <!-- ============ 02 — Agenda (tile grid) ============ -->
  <section class="agenda" data-screen-label="02 Agenda">
    <div class="head">
      <h2>Agenda.</h2>
      <span class="label">Five topics &middot; ninety minutes</span>
    </div>
    <div class="agenda-grid">
      <div class="topic t-green">
        <div>
          <div class="num">01</div>
          <h3>Where<br/>we stand<br/>today.</h3>
        </div>
        <div class="foot">Context</div>
      </div>
      <div class="topic t-pink">
        <div>
          <div class="num">02</div>
          <h3>The big shift.</h3>
        </div>
        <div class="foot">Insight</div>
      </div>
      <div class="topic t-cream">
        <div>
          <div class="num">03</div>
          <h3>By the numbers.</h3>
        </div>
        <div class="foot">Data</div>
      </div>
      <div class="topic t-greenLite">
        <div>
          <div class="num">04</div>
          <h3>How we&rsquo;ll get there.</h3>
        </div>
        <div class="foot">Plan</div>
      </div>
      <div class="topic t-pink">
        <div>
          <div class="num">05</div>
          <h3>What it adds up to.</h3>
        </div>
        <div class="foot">Outcomes</div>
      </div>
    </div>
  </section>

  <!-- ============ 03 — Big statement ============ -->
  <section class="statement" data-screen-label="03 Statement">
    <div>
      <span class="label">The shift</span>
      <blockquote>The next twelve months are about doing fewer things, and doing them with more conviction.</blockquote>
    </div>
    <div class="attrib">
      <div>
        <div class="name">Name Placeholder</div>
        <div style="margin-top: 8px;">Role Placeholder</div>
      </div>
      <div>Section 02</div>
    </div>
  </section>

  <!-- ============ 04 — Two-column with image ============ -->
  <section class="two-col" data-screen-label="04 Two Column">
    <div class="col-img">
      <div class="figure">[ image &middot; 880 &times; 760 ]</div>
      <div class="caption">
        <span>Visual 01</span>
        <span>Replace with photo</span>
      </div>
    </div>
    <div class="col-text">
      <div class="eyebrow">The big shift</div>
      <h2>Fewer bets, stronger commitments.</h2>
      <p>Placeholder body copy sits here as a stand&#8209;in for the supporting narrative. Open with the point you want the audience to remember when they walk out of the room.</p>
      <p>Use the second paragraph to add proof &mdash; a customer, a moment in market, a number that earns the claim. Keep one idea per paragraph; trust the audience to follow.</p>
      <dl class="meta">
        <div><dt>Owner</dt><dd>Team Placeholder</dd></div>
        <div><dt>Timeframe</dt><dd>Q2 &mdash; Q4</dd></div>
        <div><dt>Status</dt><dd>On track</dd></div>
      </dl>
    </div>
  </section>

  <!-- ============ 05 — Data chart ============ -->
  <section class="data" data-screen-label="05 Data">
    <div class="head">
      <div>
        <div class="label">By the numbers</div>
        <h2>Revenue by quarter,<br/>year over year.</h2>
      </div>
      <div class="legend">
        <span><span class="sw" style="background: var(--pink);"></span>This year</span>
        <span><span class="sw" style="background: var(--cream);"></span>Last year</span>
      </div>
    </div>

    <div class="chart">
      <div class="yaxis">
        <span>100</span><span>75</span><span>50</span><span>25</span><span>0</span>
      </div>
      <div class="plot">
        <div class="grid-lines"></div>
        <div class="bar-group"><div class="bar-pair">
          <div class="bar a" style="height: 62%;"><span class="val">62</span></div>
          <div class="bar b" style="height: 48%;"><span class="val">48</span></div>
        </div></div>
        <div class="bar-group"><div class="bar-pair">
          <div class="bar a" style="height: 74%;"><span class="val">74</span></div>
          <div class="bar b" style="height: 55%;"><span class="val">55</span></div>
        </div></div>
        <div class="bar-group"><div class="bar-pair">
          <div class="bar a" style="height: 81%;"><span class="val">81</span></div>
          <div class="bar b" style="height: 67%;"><span class="val">67</span></div>
        </div></div>
        <div class="bar-group"><div class="bar-pair">
          <div class="bar a" style="height: 88%;"><span class="val">88</span></div>
          <div class="bar b" style="height: 72%;"><span class="val">72</span></div>
        </div></div>
        <div class="bar-group"><div class="bar-pair">
          <div class="bar a" style="height: 92%;"><span class="val">92</span></div>
          <div class="bar b" style="height: 78%;"><span class="val">78</span></div>
        </div></div>
      </div>
      <div class="xlabel-row">
        <span class="xlabel">Q1</span>
        <span class="xlabel">Q2</span>
        <span class="xlabel">Q3</span>
        <span class="xlabel">Q4</span>
        <span class="xlabel">YTD</span>
      </div>
    </div>

    <div class="footnote">
      <span>Source &middot; Internal data, 2026</span>
      <span>Indexed to plan</span>
    </div>
  </section>

  <!-- ============ 06 — Framework / 4 steps ============ -->
  <section class="framework" data-screen-label="06 Framework">
    <div class="head">
      <span class="label">How we&rsquo;ll get there</span>
      <span class="label">Four steps</span>
    </div>
    <h2>A simple plan,<br/>in four moves.</h2>

    <div class="flow">
      <div class="step">
        <div class="num">Step 01</div>
        <h3>Listen</h3>
        <p>Open the quarter with structured conversations across teams. Capture what we hear without filtering.</p>
        <div class="marker"><span>Weeks 1&ndash;2</span><span>Owner</span></div>
      </div>
      <div class="step pinkfill">
        <div class="num">Step 02</div>
        <h3>Align</h3>
        <p>Cluster signals into themes. Name them plainly so everyone uses the same language in every room.</p>
        <div class="marker"><span>Week 3</span><span>Owner</span></div>
      </div>
      <div class="step fill">
        <div class="num">Step 03</div>
        <h3>Build</h3>
        <p>Translate the themes into a short list of bets. Decide what we&rsquo;re keeping, and what we&rsquo;re cutting.</p>
        <div class="marker"><span>Weeks 4&ndash;6</span><span>Owner</span></div>
      </div>
      <div class="step">
        <div class="num">Step 04</div>
        <h3>Ship</h3>
        <p>Put the work in market on a known cadence. Measure against the plan; adjust without losing the thread.</p>
        <div class="marker"><span>Weeks 7&ndash;12</span><span>Owner</span></div>
      </div>
    </div>
  </section>

  <!-- ============ 07 — Big stats / KPI callouts ============ -->
  <section class="stats" data-screen-label="07 Stats">
    <div class="head">
      <span class="label">What it adds up to</span>
      <span class="label">Year to date</span>
    </div>
    <h2>Three numbers that<br/>tell the story.</h2>

    <div class="kpi-row">
      <div class="kpi">
        <span class="tag">Growth</span>
        <span class="big">+42<span class="unit">%</span></span>
        <p class="desc">Year over year increase in active accounts, ahead of the plan we set in January.</p>
      </div>
      <div class="kpi">
        <span class="tag">Retention</span>
        <span class="big">94<span class="unit">%</span></span>
        <p class="desc">Net retention across the top customer cohort, a four&#8209;point lift from last year.</p>
      </div>
      <div class="kpi">
        <span class="tag">Reach</span>
        <span class="big">3.1<span class="unit">M</span></span>
        <p class="desc">People served this quarter, across the markets we entered in the spring.</p>
      </div>
    </div>
  </section>

  <!-- ============ 08 — Summary / closing ============ -->
  <section class="summary" data-screen-label="08 Summary">
    <div class="topbar">
      <span class="label">In summary</span>
      <span class="label">Thank you</span>
    </div>
    <h2>Three<br/>things to take.</h2>
    <div class="grid-cols">
      <div>
        <h4>One</h4>
        <p>The strategy holds. We are doing fewer things, and the right things.</p>
      </div>
      <div>
        <h4>Two</h4>
        <p>The numbers back the bets. Growth, retention, and reach are all ahead of plan.</p>
      </div>
      <div>
        <h4>Three</h4>
        <p>Next quarter, we keep the pace and add focus where the data points us.</p>
      </div>
    </div>
  </section>

</deck-stage>

</body>
</html>
