function main() {
  const r = $data.current;
  const valid = r.longitudinalG !== null && r.lateralG !== null;
  const gx = r.lateralG ?? 0;
  const gy = r.longitudinalG ?? 0;
  const magnitude = Math.hypot(gx, gy);
  const range = 1;
  const factor = magnitude > range ? range / magnitude : 1;
  return <CardContent title="G 值" trailing={valid ? magnitude.toFixed(2) + ' G' : '—'} renderer={m => {
    const w = Math.max(0, $env.width - m.supportedGapLeft - m.supportedGapRight);
    const h = Math.max(0, $env.height - m.headerHeight - m.supportedGapTop - m.supportedGapBottom);
    const radius = Math.max(0, Math.min(w, h) / 2 - 12);
    const cx = w / 2, cy = h / 2;
    return <Group width={w} height={h}>
      <Circle x={cx-radius} y={cy-radius} width={radius*2} height={radius*2}
        fill="clear" stroke={$env.foreground} opacity={0.15} lineWidth={1}/>
      <Circle x={cx-radius/2} y={cy-radius/2} width={radius} height={radius}
        fill="clear" stroke={$env.foreground} opacity={0.08} lineWidth={1}/>
      <Line width={w} height={h} x1={cx-radius} y1={cy} x2={cx+radius} y2={cy}
        stroke={$env.foreground} opacity={0.12} lineWidth={1}/>
      <Line width={w} height={h} x1={cx} y1={cy-radius} x2={cx} y2={cy+radius}
        stroke={$env.foreground} opacity={0.12} lineWidth={1}/>
      {valid ? <Transform x={cx-6} y={cy-6} width={12} height={12}
        translateX={gx * factor / range * radius} translateY={gy * factor / range * radius}
        animations={[{property:'translateX',duration:0.2},{property:'translateY',duration:0.2}]}>
        <Circle width={12} height={12} fill={$env.accent}/>
      </Transform> : null}
    </Group>;
  }}/>;
}