/* ============================================================
   ROOY · 03c 滑行中 · 上课模式
   ───────────────────────────────────────────────────────────
   需求：教学中 —— ROOY 主动给反馈，当前任务上下文永久可见，
   客观数据弱化（不强调"成绩"）。

   跟 03b 的差别：
   1. 顶部悬浮教学 banner（任务名 + 进度 N/M），点击展开看任务详情
   2. peek hero 是教学指标（完成度 = 逐弯计数 + tally + gold 达标
      线，节奏为副指标），客观三数据下沉到 expanded
   3. **没有** lesson tab —— 教学态由顶部 banner 承担

   italic anchor：完成度弯数（peek hero）。
   accent：ROOY 绿（banner kicker "ROOY · 当前任务" + peek 完成度
   计数与 tally 填充）；gold 1（tally 达标 tick = 本趟计入任务进
   度的门槛）。

   交互细节：banner 跟 sheet 都占大屏空间，同时展开会顶人 ——
   useEffect 做互斥：谁后展开谁让另一个收回。
   ============================================================ */
function SkiScreenC({ onNav }) {
  const [expanded, setExpanded] = React.useState(false);
  const [bannerOpen, setBannerOpen] = React.useState(false);

  React.useEffect(() => {
    if (bannerOpen) setExpanded(false);
  }, [bannerOpen]);
  React.useEffect(() => {
    if (expanded) setBannerOpen(false);
  }, [expanded]);

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, position: 'relative', color: R.ink, ...T.subhead,
    }}>

      {/* basemap — 与 03b 一致（冷调雪面浅灰蓝，色值见 ski-b 注释）；
          上课模式仍然有真实滑行场景. */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        background: '#E8ECF1',
        overflow: 'hidden',
      }}>
        <svg width="100%" height="600" viewBox="0 0 390 600" preserveAspectRatio="xMidYMin slice"
             style={{ display: 'block' }}>
          <defs>
            <linearGradient id="ski-c-mp" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="600">
              <stop offset="0%"    stopColor="#F4F6F9"/>
              <stop offset="66.7%" stopColor="#E8ECF1"/>
              <stop offset="100%"  stopColor="#E8ECF1"/>
            </linearGradient>
          </defs>
          <rect width="390" height="600" fill="url(#ski-c-mp)"/>

          {Array.from({ length: 19 }).map((_, i) => {
            const y = 18 + i * 30;
            const amp = 24 + (i % 4) * 9;
            return (
              <path key={i}
                d={`M -40 ${y} Q 80 ${y - amp} 180 ${y} T 400 ${y - amp / 2}`}
                fill="none" stroke="rgba(14,17,22,0.07)" strokeWidth="0.8"/>
            );
          })}
          {Array.from({ length: 5 }).map((_, i) => {
            const y = 65 + i * 120;
            return (
              <path key={i}
                d={`M -40 ${y} Q 80 ${y - 28} 180 ${y} T 400 ${y - 14}`}
                fill="none" stroke="rgba(14,17,22,0.14)" strokeWidth="1.2"/>
            );
          })}

          <text x="100" y="63"  style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2400 M</text>
          <text x="100" y="183" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2200 M</text>
          <text x="100" y="303" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>2000 M</text>
          <text x="100" y="423" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>1800 M</text>
          <text x="100" y="543" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.42)' }}>1600 M</text>

          <g transform="translate(265 475)">
            <path d="M 0 8 L 6 0 L 12 8 Z" fill="rgba(14,17,22,0.42)"/>
            <rect x="2" y="8" width="8" height="5" fill="rgba(14,17,22,0.42)"/>
            <text x="18" y="11" style={{ ...T.caption2, fill: 'rgba(14,17,22,0.55)' }}>Furi 缆车站</text>
          </g>

          {/* Trail group — 03c 整体下移 80，让起点贴 banner collapsed 底部
              (banner top 60 + maxHeight 80 = bottom 140；trail 起点 78+80=158,
              露出 banner 下方 ~18pt，保持"从 banner 自然延伸"的紧邻感). */}
          <g transform="translate(0 80)">
            <path d="M 60 70 C 100 122, 70 191, 140 226 S 220 313, 180 357"
              fill="none" stroke="rgba(31,58,138,0.26)" strokeWidth="2" strokeLinecap="round" strokeDasharray="2 4"/>
            <path d="M 80 78 C 120 148, 90 226, 160 261 S 240 348, 200 383"
              fill="none" stroke="var(--r-data)" strokeWidth="3.5" strokeLinecap="round"/>
            <path d="M 145 235 C 180 296, 215 322, 200 357"
              fill="none" stroke="var(--r-gold)" strokeWidth="5" strokeLinecap="round"/>
            <circle cx="200" cy="383" r="18" fill="var(--r-data)" fillOpacity=".14"/>
            <circle cx="200" cy="383" r="10" fill="var(--r-data)" fillOpacity=".30"/>
            <circle cx="200" cy="383" r="5.5" fill="var(--r-data)"/>
            <circle cx="200" cy="383" r="5.5" fill="none" stroke="#fff" strokeWidth="1.5"/>
            <path d="M 200 383 L 240 52" stroke="rgba(14,17,22,0.4)" strokeWidth="1.4" strokeDasharray="3 4" strokeLinecap="round"/>
            <circle cx="232" cy="113" r="4" fill={R.ink} stroke="#fff" strokeWidth="1.5"/>
          </g>
        </svg>
      </div>

      <StatusBar/>

      {/* 教学 banner — 在 status bar 下方，向下展开 (collapsed → 任务上下文 +
          progress；expanded 加 callout subtitle + 关键点 list + 继续 button).
          底色用 R.bg 跟下方 sheet 一致, 靠 shadow.lift + 圆角表示"脱离
          basemap 的功能层". */}
      <div onClick={() => setBannerOpen(!bannerOpen)} style={{
        position: 'absolute',
        /* 默认 (design canvas) top:60 — mock StatusBar 54pt + 6pt 间距.
           PWA prototype (__ROOY_HIDE_MOCK_STATUSBAR) 下 mock 不渲染，
           改用 safe-area-inset-top 自适应：iOS PWA = notch 47 + 6 = 53,
           Android PWA = 0 + 6 = 6（贴在系统状态栏下方）. */
        top: (typeof window !== 'undefined' && window.__ROOY_HIDE_MOCK_STATUSBAR)
          ? 'calc(env(safe-area-inset-top, 0px) + 6px)'
          : 60,
        left: 12, right: 12,
        zIndex: 4,
        background: R.bg, borderRadius: B.cardL,
        boxShadow: Shadow.lift,
        overflow: 'hidden',
        cursor: 'pointer',
        maxHeight: bannerOpen ? 260 : 80,
        transition: 'max-height 0.36s cubic-bezier(0.4,0,0.2,1)',
      }}>
        <div style={{ padding: '14px 16px 14px' }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            marginBottom: 6,
          }}>
            <span style={{ ...T.eyebrow, color: R.rooy }}>ROOY · 当前任务</span>
            <svg width="12" height="12" viewBox="0 0 12 12" style={{
              color: R.ink3,
              transform: bannerOpen ? 'rotate(180deg)' : 'none',
              transition: 'transform 0.2s ease',
            }}>
              <path d="M2 4.5 L6 8.5 L10 4.5" stroke="currentColor" strokeWidth="1.6"
                fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          {/* Headline 行 inline 进度 metadata —— progress bar 删了 (4pt
              ROOY 绿粗条让 banner 读作 "hero tracking 卡"，跟 "轻量教学任
              务上下文" 定位冲突；同屏 ROOY 绿配额也超标)。"2 / 5" 退成右
              侧 footnote, 让标题主导这条 banner. */}
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
            <p style={{ ...T.headline, color: R.ink }}>转换时轻跳一下</p>
            <span style={{ ...T.footnote, color: R.ink3, flexShrink: 0 }}>
              <span style={{ ...N.reg, fontWeight: 600, color: R.ink }}>2</span>
              <span style={{ color: R.ink4 }}> / </span>
              <span style={{ ...N.reg, color: R.ink3 }}>5</span>
            </span>
          </div>

          {/* Expanded 内容 —— 仅 bannerOpen 时渲染. 不再靠外层 overflow:hidden
              裁切，避免 collapsed 状态下 video thumb 顶部圆角 4pt 漏出 banner
              底部的灰色边缘. */}
          {bannerOpen && (
            <>
              <div
                onClick={(e) => e.stopPropagation()}
                style={{ marginTop: 14, display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {[
                    '弯之间轻轻跳一下',
                    '落地用脚趾·入弯',
                    '上身保持朝前',
                  ].map((t, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                      <span style={{
                        width: 10, height: 1, background: R.ink4,
                        marginTop: 9, flexShrink: 0, borderRadius: 1,
                      }}/>
                      <p style={{ ...T.subhead, color: R.ink2 }}>{t}</p>
                    </div>
                  ))}
                </div>
                <div style={{
                  width: 130, height: 73, background: R.hair2, borderRadius: 8,
                  position: 'relative', flexShrink: 0, cursor: 'pointer',
                }}>
                  <div style={{
                    position: 'absolute', top: '50%', left: '50%',
                    transform: 'translate(-50%, -50%)',
                    width: 32, height: 32, borderRadius: '50%',
                    background: 'rgba(255,255,255,0.92)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="12" height="12" viewBox="0 0 10 10">
                      <path d="M 3 1.5 L 8 5 L 3 8.5 Z" fill={R.ink}/>
                    </svg>
                  </div>
                </div>
              </div>

              {/* Footer —— 仅 退出上课 胶囊按钮, 右下角. hairline 分隔 banner 内容. */}
              <div style={{
                marginTop: 14, paddingTop: 12,
                borderTop: `0.5px solid ${R.hair2}`,
                display: 'flex', justifyContent: 'flex-end', alignItems: 'center',
              }}>
                <button
                  onClick={(e) => { e.stopPropagation(); onNav && onNav('ski-b'); }}
                  style={{
                    ...T.footnote, color: R.ink2, background: R.hair2,
                    border: 'none', padding: '8px 14px', borderRadius: 999,
                    cursor: 'pointer',
                  }}>
                  退出上课
                </button>
              </div>
            </>
          )}
        </div>
      </div>

      <div style={{ flex: 1 }}/>

      {/* Stop button —— 跟 03b 同款 56×56 戴手套友好白圆 + 红方块.
          tap → 暂停 push 03d（跟 03b 一致）。bottom 固定到 peek (252)
          顶 14px 上方, expanded 时被 sheet 盖住 (intended). */}
      <button onClick={(e) => { e.stopPropagation(); onNav && onNav('ski-d'); }} style={{
        position: 'absolute', right: 18, zIndex: 4,
        bottom: 80 + 252 + 14,
        width: 56, height: 56, borderRadius: 999,
        background: '#fff', border: 'none', padding: 0, cursor: 'pointer',
        boxShadow: Shadow.lift,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{ width: 18, height: 18, background: R.alert, borderRadius: 3 }}/>
      </button>

      {/* Sheet — peek (scope + hero + ROOY), expanded 加 4 段. */}
      <div style={{
        position: 'relative', zIndex: 5,
        background: R.bg,
        borderTopLeftRadius: B.sheetL,
        borderTopRightRadius: B.sheetL,
        paddingTop: 4,
        boxShadow: Shadow.sheet,
        /* 跟 ski-b 同步：TabBar 76pt 后 sheet 钻到 TabBar 下面 ~6pt，
           basemap 不再从缝里漏出来. */
        marginBottom: 70,
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
        /* peek 252：完成度 tally + ROOY 反馈 2 行的实测内容高度 +
           底部气口；stop button 的 bottom 同步用 252. */
        height: expanded ? 550 : 252,
        transition: 'height 0.36s cubic-bezier(0.4,0,0.2,1)',
      }}>
        <button
          onClick={() => setExpanded(!expanded)}
          style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            display: 'flex', justifyContent: 'center', width: '100%',
            padding: '8px 0 10px',
            flexShrink: 0,
          }}>
          <div style={{ width: 38, height: 5, borderRadius: 3, background: 'rgba(14,17,22,0.18)' }}/>
        </button>

        <div style={{
          flex: 1, minHeight: 0,
          overflowY: 'auto',
          WebkitOverflowScrolling: 'touch',
        }}>
          <DataContentC expanded={expanded}/>
        </div>
      </div>

      <TabBar active="ski" onTab={(t) => onNav && onNav(t)}/>
    </div>
  );
}

/* DataContentC — 03c sheet 内容（peek + expanded）
   Peek (252): scope 行 + 完成度 hero（逐弯计数 + tally + gold 达
   标线）+ 节奏副指标 + ROOY 反馈 2 行
   Expanded 加 4 段（同 03b）: 本趟 3 数据 → 速度曲线 → 左右脚 →
   今日累计。任务名靠顶部 banner 表达，sheet 不重复。 */
function DataContentC({ expanded }) {
  return (
    <>
      {/* PEEK · 0. Scope label — 跟 03b 同款 space-between layout. */}
      <div style={{
        padding: '0 22px',
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      }}>
        <span style={{ ...T.eyebrow, color: R.ink3 }}>刚刚那趟</span>
        <span style={{ ...T.footnote, color: R.ink2 }}>Furi 蓝道</span>
      </div>

      {/* PEEK · 1. Hero — 不对称布局:
          左: 完成度主 hero = 逐弯计数（italic 5 + "/ 8 弯"）;
          右: "节奏" label 在上 + 65 数字在下 (column, 副 hero).
          85% 抽象百分比换成逐弯计数——上课模式的完成度本来就按弯
          计（哪几个弯做到轻跳），计数 + 下方 tally 比百分比可扫
          读，且直接给出"差几个弯"的下一步差距；节奏数字非 italic,
          让副 hero 视觉权重弱于主 hero. */}
      <div style={{
        margin: '18px 22px 0',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ ...N.italic, fontSize: 48, color: R.rooy, lineHeight: 1 }}>5</span>
            <span style={{
              ...T.eyebrow, color: R.ink3, letterSpacing: '0.04em',
            }}>/ 8 弯</span>
          </span>
          <span style={{ ...T.eyebrow, color: R.ink3 }}>完成度</span>
        </div>
        <div style={{ textAlign: 'right' }}>
          <p style={{ ...T.eyebrow, color: R.ink3, marginBottom: 4 }}>节奏</p>
          <span style={{ ...N.hero, fontSize: 36, color: R.ink, lineHeight: 1 }}>65</span>
        </div>
      </div>

      {/* PEEK · 1b. 逐弯 tally — 8 弯做到 5 个，gold tick = 6 弯门
          槛：本趟够 6 个弯才计入 banner 的任务进度（差 1 个，所以
          banner 停在 2/5）。差距不配文字 caption——tick 前的空槽
          自己说话. */}
      <div style={{ margin: '14px 22px 0' }}>
        <TallyC total={8} done={5} goal={6}/>
      </div>

      {/* PEEK · 2. ROOY 反馈 — 03b 同款单行段: dot inline + 一段话.
          peek 不再放 3 stats (已下沉到 expanded "本趟" section), peek
          只承担"教学焦点 hero + ROOY 评价"两件事, 减少视觉压力. */}
      <p style={{
        margin: '20px 22px 0',
        ...T.body, color: R.ink, fontWeight: 500,
      }}>
        节奏稳了 ↑3，立刃也跟上 ↑11。下一弯收尾再晚一点试试。
      </p>

      {/* EXPANDED · 5 段: 本趟 (3 stats) → 能力 → 速度曲线 → 左右脚 → 今日累计.
          3 stats 从 peek 下沉到 expanded 顶, peek 留给 hero + ROOY. */}
      {expanded && (
        <>
          <SectionC label="本趟" first>
            <div style={{ display: 'flex', alignItems: 'stretch', margin: '0 -20px' }}>
              <div style={{ flex: 1, paddingLeft: 20, paddingRight: 14 }}>
                <StatColC label="最高速" value="64" unit="km/h"/>
              </div>
              <div style={{ width: 0.5, background: R.hair2, alignSelf: 'stretch' }}/>
              <div style={{ flex: 1, paddingLeft: 18, paddingRight: 14 }}>
                <StatColC label="里程" value="1.4" unit="km"/>
              </div>
              <div style={{ width: 0.5, background: R.hair2, alignSelf: 'stretch' }}/>
              <div style={{ flex: 1, paddingLeft: 18, paddingRight: 20 }}>
                <StatColC label="用时" value="3:42"/>
              </div>
            </div>
          </SectionC>

          <SectionC label="速度曲线" sub="本趟 8 弯">
            <SpeedSparklineC/>
          </SectionC>

          <SectionC label="左右脚" sub="偏左 4">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
              <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ ...T.footnote, color: R.ink3 }}>左</span>
                <span style={{ ...N.hero, fontSize: 22, color: R.ink, lineHeight: 1 }}>52</span>
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ ...N.hero, fontSize: 22, color: R.ink, lineHeight: 1 }}>48</span>
                <span style={{ ...T.footnote, color: R.ink3 }}>右</span>
              </span>
            </div>
            <div style={{ position: 'relative', height: 4 }}>
              <div style={{ position: 'absolute', inset: 0, background: R.hair2, borderRadius: 2, overflow: 'hidden' }}>
                <div style={{ width: '52%', height: '100%', background: R.ink3, borderRadius: 2 }}/>
              </div>
              <div style={{
                position: 'absolute', left: '50%', top: -3, bottom: -3,
                width: 1.5, background: R.ink2, transform: 'translateX(-0.75px)',
              }}/>
            </div>
          </SectionC>

          <SectionC label="今日累计" sub="到目前为止" gap last>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 12, columnGap: 24 }}>
              <DayStatC l="里程" v="12.4" u="km"/>
              <DayStatC l="垂降" v="8.4"  u="km"/>
              <DayStatC l="趟数" v="14"/>
              <DayStatC l="时长" v="4:32"/>
            </div>
          </SectionC>
        </>
      )}
    </>
  );
}

/* ── 子组件 (03b 同款设计语言, 加 C 后缀避免跟 ski-b.jsx 的 global 冲突) */

/* TallyC — 逐弯记分板（教学态）：total 弯 / done 做到（R.rooy 填充
   = 教学指标色，同老 85% 的 hero 色角色）/ goal 后的 gold 达标
   tick。段是 skewX(-14°) 直角平行四边形——跟上方 N.italic 计数
   同一倾角（SF italic ≈14°），棱角和运动感来自形态不是装饰. */
function TallyC({ total = 8, done = 0, goal = 6 }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <React.Fragment key={i}>
          <div style={{
            flex: 1, height: 8,
            background: i < done ? R.rooy : R.hair2,
            transform: 'skewX(-14deg)',
          }}/>
          {i === goal - 1 && (
            <div style={{
              width: 2, height: 14, background: R.gold,
              flexShrink: 0, transform: 'skewX(-14deg)',
            }}/>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function SectionC({ label, sub, first, last, gap, children }) {
  const top = first ? 32 : gap ? 40 : 22;
  return (
    <div style={{ padding: `${top}px 20px ${last ? 24 : 0}px` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
        <span style={{ ...T.eyebrow, color: R.ink3 }}>{label}</span>
        {sub && <span style={{ ...T.footnote, color: R.ink4 }}>{sub}</span>}
      </div>
      {children}
    </div>
  );
}

function StatColC({ label, value, unit }) {
  return (
    <div>
      <p style={{ ...T.footnote, color: R.ink3, marginBottom: 4 }}>{label}</p>
      <StatNumber value={value} unit={unit} size={30}/>
    </div>
  );
}

function DayStatC({ l, v, u }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 5 }}>
      <span style={{ ...T.caption1, color: R.ink3 }}>{l}</span>
      <span style={{ ...N.hero, fontSize: 18, color: R.ink, letterSpacing: '-0.02em' }}>{v}</span>
      {u && <span style={{ ...T.caption1, color: R.ink3 }}>{u}</span>}
    </span>
  );
}

/* 速度曲线 sparkline — 与 03b 同款 (8 段 turns + 实线 vertical 分隔
   + dot-grid 底). 复制而非共享, 避免跨 script global 依赖. */
function SpeedSparklineC() {
  const turns = [
    [18, 28, 36, 30, 20, 14, 12],
    [22, 36, 50, 55, 46, 30, 20, 16, 18],
    [28, 46, 62, 68, 58, 40, 28, 22, 30],
    [38, 48, 50, 40, 22, 14, 12],
    [26, 46, 64, 72, 60, 40, 28, 24, 30],
    [36, 42, 45, 36, 22, 16, 14],
    [28, 44, 58, 60, 50, 32, 22, 18],
    [24, 28, 32, 26, 22, 20],
  ];
  const speeds = turns.flat();
  const boundaries = turns.reduce(
    (acc, t) => [...acc, acc[acc.length - 1] + t.length],
    [0],
  ).slice(1, -1);

  const min = Math.min(...speeds), max = Math.max(...speeds);
  const range = max - min || 1;
  const w = 326, h = 80, padTop = 14, padBot = 10, padX = 6;
  const yRange = h - padTop - padBot;
  const xRange = w - padX * 2;
  const xAt = (i) => padX + (i / (speeds.length - 1)) * xRange;
  const pts = speeds.map((v, i) => ({
    x: xAt(i),
    y: padTop + (1 - (v - min) / range) * yRange,
  }));

  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(' ');
  const last = pts[pts.length - 1];

  return (
    <DottedGrid style={{ padding: '14px 0' }}>
      <svg width="100%" viewBox={`0 0 ${w} ${h}`}
        style={{ display: 'block', overflow: 'visible' }}>
        {boundaries.map((b, k) => {
          const x = xAt(b - 0.5);
          return (
            <line key={k} x1={x} x2={x} y1="0" y2={h}
              stroke="rgba(14,17,22,0.18)" strokeWidth="0.7"/>
          );
        })}
        <path d={`${path} L ${last.x.toFixed(2)} ${h - 1} L ${pts[0].x.toFixed(2)} ${h - 1} Z`}
          fill="var(--r-data)" fillOpacity="0.07"/>
        <path d={path} fill="none"
          stroke="var(--r-data)" strokeWidth="1.8"
          strokeLinecap="round" strokeLinejoin="round"/>
        <circle cx={last.x} cy={last.y} r="3.5" fill="var(--r-data)"/>
      </svg>
    </DottedGrid>
  );
}

Object.assign(window, { SkiScreenC });